table.table_css_027_2, table.table_css_027_2 td, table.table_css_027_2 th {
  border:1px solid #CCCCCC;
  text-align:center;
}

table.table_css_027_2 {
  width:700px;
  border-collapse:collapse;
  margin:25px auto;
}

table.table_css_027_2 td, table.table_css_027_2 th {
  height:40px;
  padding:5px;
  vertical-align:middle;
  background-color:#FFFFFF;
}

table.table_css_027_2 th {
  background-color:#F0FEFF;
  background-image:url('/fs/soft/css/tablebg.jpg');
  background-repeat:repeat-x;
}

table.table_css_027_2 tr.blue1 td {
  background-color:#CEEFFF;
}

.body_css_028 {
  font:11px Verdana, sans-serif;
  color:#333333;
/*  background-image:url('/fs/soft/css/pattern03invert.gif'); */
}

.wrapper_css_028 {
  width:500px;
  outline:0px solid #FAA21A;
}

.question_css_028 {
  font-weight:bold;
}

.fieldset_css_028 {
  padding:10px;
  margin:10px;
  border:1px solid #CCCCCC;
  background-color:#FCFCFC;
}

.textarea_css_028 {
  border:1px solid #333333;
  background-color:#F4F9FF;
  width:480px;
  margin:2px 10px;
}

.tp_css_028 {
  margin-left:10px;
}

.body_css_029 {
  font:11px Verdana, sans-serif;
  color:#333333;
/*  background-image:url('/fs/soft/css/pattern03invert.gif'); */
}

.wrapper_css_029 {
  width:500px;
  outline:0px solid #FAA21A;
}

.question_css_029 {
  font-weight:bold;
}

.fieldset_css_029 {
  padding:10px;
  margin:10px;
  border:1px solid #CCCCCC;
  background-color:#FCFCFC;
}

.textarea_css_029 {
  font:12px Verdana, sans-serif;
  border:1px solid #333333;
  background-color:#F4F9FF;
  width:480px;
  margin:2px 10px;
  padding:0 7px;
}

.textarea_css_029:focus {
  border:1px solid #1351B4;
  background-color:#FFFFFF;
}

.tp_css_029 {
  margin-left:10px;
}

.input_css_029 {
  font:12px Verdana, sans-serif;
  border:1px solid #333333;
  height:27px;
  line-height:27px;
  background-image:url('/fs/soft/css/inputbg.jpg');
  background-repeat:repeat-x;
  width:300px;
  padding:0 7px;
}


.input_css_029:focus {
  border:1px solid #1351B4;
  background:none;
  background-color:#FFFFFF;
}


.label_css_029 {
  cursor:pointer;
}

p.css_029_first_letter:first-letter {
  font-size:200%;
  color:#8A2BE2;
} 

p.css_029_first_line:first-line {
  font-size:200%;
  color:#8A2BE2;
} 

p.css_029_before:before {
  font-size:200%;
  color:#8A2BE2;
  content:"$ - ";
} 

p.css_029_after:after {
  font-size:200%;
  color:#8A2BE2;
  content:" - $";
} 

p.css_029_lang_it:lang(it) {
  font-size:200%;
  color:#8A2BE2;
} 

.body_css_030 {
  font:12px Verdana, sans-serif;
  color:#333333;
  outline:1px solid #FAA21A;
}

.pic1_css_030 {
  outline:1px solid #F77777;
  float:right;
  margin:20px;
}

.p_css_030 {
  outline:1px solid #777777;
  padding:5px;
  margin:10px;
}

.p_css_030:lang(en) {
  background-color:#F0FFFF; 
} 

.p_css_030:lang(ru) {
  background-color:#FFF0FF;
} 


.body_css_030_2 {
  font:10px Verdana, sans-serif;
  color:#111111;
  background-color:#777777;
  outline:1px solid #FAA21A;
  width:96%;
/*  height:280px; */
  margin:0 auto;
}

.head_css_030_2 {
  font:32px Verdana, sans-serif;
  color:#111111;
  background-color:#F8AC18;
  text-align:center;
  outline:0px solid #909090;
  width:100%;
  height:40px;
  margin:0px auto;
  padding:0;
}

.menu_css_030_2 {
  font:12px Verdana, sans-serif;
  color:#111111;
  background-color:#EBEBEB;
  text-align:center;
  outline:0px solid #909090;
  width:100%; 
  height:20px;
  margin:0px auto;
  padding:0;
}

.nav_css_030_2 {
  font:12px Verdana, sans-serif;
  color:#111111;
  background-color:#0BEBFB;
  text-align:center;
  outline:0px solid #909090;
  width:20%;
  height:160px;
  margin:0px auto;
  padding:0;
}

.nav_css_030_2_left {
  float:left;
}

.nav_css_030_2_right {
  float:right;
}

.central_css_030_2 {
  font:12px Verdana, sans-serif;
  color:#111111;
  background-color:#FB0B9B;
  text-align:center;
  outline:0px solid #909090;
  height:160px;
  margin:0px auto;
  padding:0;
}

.footer_css_030_2 {
  font:12px Verdana, sans-serif;
  color:#FFFF00;
  background-color:#111111;
  text-align:center;
  outline:0px solid #909090;
  height:20px;
  margin:0px auto;
  padding:0;
}

.wrapper_css_031 {
  width:80%; /*  width:800px; */
  font:14px Verdana, sans-serif;
  text-align:center;
  color:#000000;
  background-color:#F9F9F9;
  outline:1px solid #CCCCCC;
  padding:10px;
  margin:0 auto;
}

.header_css_031 {
  height:77px;
  background-color:#F8AC18;
  margin-bottom:12px;
}

.sidebar_css_031 {
  height:77px;
  background-color:#EBEBEB;
  margin-bottom:12px;
}


.content_css_031 {
  height:77px;
  background-color:#C5161D;
  margin-bottom:12px;
}


.footer_css_031 {
  height:77px;
  background-color:#777777;
/*  margin-bottom:12px; */
}

<div id="wrapper_css_031" class="wrapper_css_031" style="">
  <div id="header_css_031" class="header_css_031">Шапка (Хидер, header)</div>
  <div id="sidebar_css_031" class="sidebar_css_031">Меню в сторонке (СайдБар, sidebar)</div>
  <div id="content_css_031" class="content_css_031">Содержание (Контент, content)</div>
  <div id="footer_css_031" class="footer_css_031">Низ (Футер, footer)</div>
</div>

.sidebar_css_031_width_20p {
  width:20%;  /*  width:150px;  */
}

.content_css_031_width_79p {
  width:79%;  /*  width:640px;  */
}

.content_css_031_margin_left_21p {
  margin-left:21%; /*  margin-left:160px;  */
}

.sidebar_css_031_float_left {
  float:left;
}

.clear_both {
  clear:both;
}

<div class="clear_both"></div>

.body_css_035 {
  position:relative;
  background-color:#D2D2D2;
  outline:0px solid #CCCCCC;
  color:#696969;
  font:14px Verdana, sans-serif;
}

.wrapper_css_035 {
/*  width:80%;  */
  max-width:650px;
  background-color:#F4F4F4;
  margin:30px auto;
}

.header_css_035 {
  height:75px;
  background-color:#F8AC18;
  background-image:url('/fs/soft/css/redHeader.png');
  background-repeat:no-repeat;
}

.content_css_035 {
  padding:20px 30px;
}

.block_big_css_035 {
  background-color:#D2F2F2;
  width:640px;
  height:120px;
  padding:10px;
  outline:1px solid #72D2D2;
}

.block_little_css_035 {
  background-color:#D2F2D2;
  width:300px;
  height:60px;
  outline:1px solid #02F202;
  opacity:0.5;
}

#pic_new_css_035 {
  position:absolute;
  top:0;
  left:0;
}

<div id="body_css_035" class="body_css_035" style="padding:1px 0;">
  <div id="wrapper_css_035" class="wrapper_css_035">
    <div id="header_css_035" class="header_css_035"></div>
    <div id="content_css_035" class="content_css_035">
    <img id="pic_new_css_035" src="/fs/soft/css/new.png" width="104" height="104" />
    <p>position:static; - По умолчанию. Элементы показываются по порядку, как они появляются в потоке документа.</p>
    <p>position:absolute; - Элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка.</p>
    <p>position:fixed; - Элемент позиционируется относительно окна браузера. Поэтому они вылетели из таблицы и находятся внизу экрана, 40 и 60 пикселей от нижнего края.</p>
    <p>position:relative; - Элемент позиционируется относительно своей нормальной позиции, так, например, "left:20" добавляет 20 пикселей к своей нормальной позиции.</p>
    <p>position:inherit; - Значение свойства position (позиционирование) наследуется от своего родителя.</p>
    </div>
  </div>
</div>

.body_css_036 {
  position:relative;
  background-color:#D2D2D2;
  outline:0px solid #CCCCCC;
  color:#696969;
  font:14px Verdana, sans-serif;
}

.wrapper_css_036 {
/*  width:80%;  */
  max-width:650px;
  background-color:#F4F4F4;
  margin:30px auto;
}

.header_css_036 {
  height:75px;
  background-color:#F8AC18;
  background-image:url('/fs/soft/css/redHeader.png');
  background-repeat:no-repeat;
  position:relative;
}

.content_css_036 {
  padding:20px 30px;
}

.block_big_css_036 {
  background-color:#D2F2F2; 
  width:640px;
  height:240px;
  padding:10px;
  outline:1px solid #72D2D2;
}

.block_little_css_036 {
  background-color:#D2F2D2; 
  width:300px;
  height:60px;
  outline:1px solid #02F202;
  opacity:0.5;
}

#pic_new_css_036 {
  position:absolute;
  top:0;
  left:0;
}

#button_css_036 {
  position:absolute;
  top:-14px;
  left:294px;
  border:1px solid #F00000;
}

  <div id="wrapper_css_036" class="wrapper_css_036">
    <div id="header_css_036" class="header_css_036">
      <img src="/fs/soft/css/button_css.png" width="87" height="28" id="button_css_036" title="CSS - это наше всё!" alt="CSS - это наше всё!" />
    </div>
    <div id="content_css_036" class="content_css_036">
    <img id="pic_new_css_036" src="/fs/soft/css/new.png" width="104" height="104" />
    <p>position:static; - По умолчанию. Элементы показываются по порядку, как они появляются в потоке документа.</p>
    <p>position:absolute; - Элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка.</p>
    <p>position:fixed; - Элемент позиционируется относительно окна браузера. Поэтому они вылетели из таблицы и находятся внизу экрана, 40 и 60 пикселей от нижнего края.</p>
    <p>position:relative; - Элемент позиционируется относительно своей нормальной позиции, так, например, "left:20" добавляет 20 пикселей к своей нормальной позиции.</p>
    <p>position:inherit; - Значение свойства position (позиционирование) наследуется от своего родителя.</p>
    </div>
  </div>

.body_css_037 {
  position:relative;
  background-color:#D2D2D2;
  outline:0px solid #CCCCCC;
  color:#696969;
  font:14px Verdana, sans-serif;
}

.wrapper_css_037 {
/*  width:80%;  */
  max-width:650px;
  background-color:#F4F4F4;
  margin:30px auto;
}

.header_css_037 {
  height:75px;
  background-color:#F8AC18;
  background-image:url('/fs/soft/css/redHeader.png');
  background-repeat:no-repeat;
  position:relative;
}

.content_css_037 {
  padding:20px 30px;
}

.block_big_css_037 {
  background-color:#D2F2F2;
  width:640px;
  height:120px;
  padding:10px;
  outline:1px solid #72D2D2;
}

.block_little_css_037 {
  background-color:#D2F2D2;
  width:300px;
  height:60px;
  outline:1px solid #02F202;
  opacity:0.5;
}

#pic_new_css_037 {
  position:absolute;
  top:0;
  left:0;
}

#button_css_037 {
  position:absolute;
  top:-14px;
  left:294px;
  border:1px solid #F00000;
}

#operator_css_037 {
  position:fixed;
  width:22px;
  height:180px;
  top:250px;
  left:0px;
}

#operator_css_037 img {
  border:none;
}

  <div id="operator_css_037" class="operator_css_037" style="">
  <a href="/"><img src="/fs/soft/css/operator.png" width="22" height="180" class="" alt="Оператор поддержки" title="Оператор поддержки"></a>
  </div>
  <div id="wrapper_css_037" class="wrapper_css_037">
    <div id="header_css_037" class="header_css_037">
      <img src="/fs/soft/css/button_css.png" width="87" height="28" id="button_css_036" title="CSS - это наше всё!" alt="CSS - это наше всё!" />
    </div>
    <div id="content_css_037" class="content_css_037">
    <img id="pic_new_css_037" src="/fs/soft/css/new.png" width="104" height="104" />
      <p>position:static; - По умолчанию. Элементы показываются по порядку, как они появляются в потоке документа.</p>
      <p>position:absolute; - Элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка.</p>
      <p>position:fixed; - Элемент позиционируется относительно окна браузера. Поэтому они вылетели из таблицы и находятся внизу экрана, 40 и 60 пикселей от нижнего края.</p>
      <p>position:relative; - Элемент позиционируется относительно своей нормальной позиции, так, например, "left:20" добавляет 20 пикселей к своей нормальной позиции.</p>
      <p>position:inherit; - Значение свойства position (позиционирование) наследуется от своего родителя.</p>
    </div>
  </div>

.body_css_038 {
  position:relative;
  background-color:#D2D2D2;
  outline:0px solid #CCCCCC;
  color:#696969;
  font:14px Verdana, sans-serif;
}

.wrapper_css_038 {
/*  width:80%;  */
  max-width:650px;
  background-color:#F4F4F4;
  margin:30px auto;
}

.header_css_038 {
  height:75px;
  background-color:#F8AC18;
  background-image:url('/fs/soft/css/redHeader.png');
  background-repeat:no-repeat;
  position:relative;
}

.content_css_038 {
  padding:20px 30px;
}

#pic_new_css_038 {
  position:absolute;
  top:0;
  left:0;
}

#button_css_038 {
  position:absolute;
  top:-14px;
  left:294px;
  border:1px solid #F00000;
  z-index:10;
}

#bird_css_038 {
  position:absolute;
  top:-3px;
  left:272px;
  border:0px solid #000000;
  z-index:20;
}

#operator_css_038 {
  /* position:fixed; */
  position:absolute;
  width:22px;
  height:180px;
  top:100px; /* 250px; */
  left:0px;
}

#operator_css_038 img {
  border:none;
}

  <div id="operator_css_038" class="operator_css_038" style="">
  <a href="/"><img src="/fs/soft/css/operator.png" width="22" height="180" class="" alt="Оператор поддержки" title="Оператор поддержки"></a>
  </div>
  <div id="wrapper_css_038" class="wrapper_css_038">
    <div id="header_css_038" class="header_css_038">
      <img src="/fs/soft/css/bird.png" width="106" height="90" id="bird_css_038" title="Птичка" alt="Птичка" />
      <img src="/fs/soft/css/button_css.png" width="87" height="28" id="button_css_038" title="CSS - это наше всё!" alt="CSS - это наше всё!" />
    </div>
    <div id="content_css_038" class="content_css_038">
      <img id="pic_new_css_038" src="/fs/soft/css/new.png" width="104" height="104" />
      <p>position:static; - По умолчанию. Элементы показываются по порядку, как они появляются в потоке документа.</p>
      <p>position:absolute; - Элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка.</p>
      <p>position:fixed; - Элемент позиционируется относительно окна браузера. Поэтому они вылетели из таблицы и находятся внизу экрана, 40 и 60 пикселей от нижнего края.</p>
      <p>position:relative; - Элемент позиционируется относительно своей нормальной позиции, так, например, "left:20" добавляет 20 пикселей к своей нормальной позиции.</p>
      <p>position:inherit; - Значение свойства position (позиционирование) наследуется от своего родителя.</p>
    </div>
  </div>

.block_big_css_044 {
  background-color:#D2F2F2; 
  width:400px; 
  height:60px;
  padding:10px;
  border:3px ridge #00FF00; 
  padding:5px;
  margin:5px;
  font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:10px;
  position:relative;
}

.block_little_css_044 {
  width:220px;
  height:40px;
  padding:5px;
  margin:5px;
  font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:8px;
  position:absolute;
  bottom:-30px;
  right:-100px;
}

.block_little_inherit_css_044 {
  background-color:inherit;
  border:inherit;
}

.pics_051 {
  width:50px;
  height:50px;
  transition:width 1s;
}

.pics_051:hover {
  width:100px;
  height:100px;
  cursor:pointer;  
}

.pics_051:active {
  width:300px;
  height:300px;
}

#sample_51_1 {
  width:100px;
  height:100px;
  background:#D7FFEA;
  margin:0px auto 0px auto;
  text-align:center;
  border:3px solid #B7F777; 
  border-radius:10px;
  box-shadow:6px 7px 5px #979797;
  transition-property:width;
  transition-duration:2s;
  transition-timing-function:linear;
  transition-delay:1s;
} 

#sample_51_1:hover {
  width:100%;
}

.sample_052 {
  width:200px;
  height:50px;
  background:red;
  position:relative;
  animation-name:for_sample_052;
  animation-duration:12s;
  animation-timing-function:linear;
  animation-delay:2s;
  animation-iteration-count:infinite;
/*  animation-direction:alternate; */
  animation-play-state:running;
  opacity:0.8;
  padding:10px;
  margin:10px;
  text-align:center;
  border:3px solid #B7F777; 
  border-radius:10px;
  box-shadow:6px 7px 5px #979797;
  
}

@keyframes for_sample_052 {
  0%  {background:red; color:yellow; left:0px; top:0px;}
  40%  {background:yellow; color:blue; left:500px; top:0px;}
  50%  {background:blue; color:green; left:500px; top:100px;}
  90%  {background:green; color:red; left:0px; top:100px;}
  100% {background:red; color:black; left:0px; top:0px;}
}

.sample_052_soccers {
  position:relative;
  width:640px;
  height:780px;
  padding:10px;
  margin:10px;
  text-align:center;
  border:3px solid #B7F777; 
  border-radius:10px;
  box-shadow:6px 7px 5px #979797;
  background:-40px 0px no-repeat url('/fs/soft/css/girl_left.jpg'), white 450px 0px no-repeat url('/fs/soft/css/girl_right.jpg'); 
  color:#FF0000;
  font-family:"Courier New", "Courier", "Andale Mono", monospace;
  font-size:32px;
  font-weight:bold;
  text-align:center;
  text-shadow:12px 5px 2px #707070;
}

.sample_052_ball {
  position:absolute; 
  animation-name:for_sample_052_ball;
  animation-duration:3s;
  animation-timing-function:linear;
  animation-delay:2s;
  animation-iteration-count:infinite;
/*  animation-direction:alternate; */
  animation-play-state:running;
  opacity:0.8;
  left:10px; 
  bottom:40px;  
}
  
}

@keyframes for_sample_052_ball {
  0%  {left:10px; bottom:40px;}
  20% {left:520px; bottom:640px; }
  80% {left:520px; bottom:0px;}
  90% {left:520px; bottom:70px;}
  100% {left:10px; bottom:40px;}
}

.news_053_p01 {
  column-count:3;
  padding:10px;
  margin:10px;
  border:3px solid #B7F777; 
  border-radius:10px;
  box-shadow:6px 7px 5px #979797;
}

.news_053_p02 {
  column-count:2;
  column-gap:60px;
  column-rule:5px ridge #00FF00;
  padding:10px;
  margin:10px;
  border:3px solid #B7F777; 
  border-radius:10px;
  box-shadow:6px 7px 5px #979797;
}

.container_054 {
  width:96%;
  height:60px;
/*  border:1em solid; */
  background:#E7FFB7;
  border:10px solid #B7F777; 
  border-radius:10px;
  box-shadow:6px 7px 5px #979797;
}

.box_inside_054_content {
  box-sizing:content-box;
  width:50%;
  background:#F0FFF7;
  border:3px solid #FFF777;
  float:left;
}

.box_inside_054_border {
  box-sizing:border-box;
  width:50%;
  background:#F0FFF7;
  border:3px solid #FFF777;
  float:left;
}

.news_054_wo_outline_offset {
  width:90%;
  padding:10px;
  margin:10px;
  border:3px solid #B7F777; 
  border-radius:10px;
  box-shadow:6px 7px 5px #979797;
  outline:3px solid #FFF777;
}

.news_054_with_outline_offset {
  width:90%;
  padding:10px;
  margin:10px;
  border:3px solid #B7F777; 
  border-radius:10px;
  box-shadow:6px 7px 5px #979797;
  outline:3px solid #FFF777;
  outline-offset:10px;
}

.news_054_resize_none {
  resize:none;
  overflow:auto;
}

.news_054_resize_both {
  resize:both;
  overflow:auto;
}

.news_054_resize_horizontal {
  resize:horizontal;
  overflow:auto;
}

.news_054_resize_vertical {
  resize:vertical;
  overflow:auto;
}

.div_page29_01 {
  width:100%;
  max-width:800px;
  min-height:60px;
  background-color:#F0FFFF;
}

.div_page29_02 {
  width:min(100%, 800px);
  min-height:60px;
  background-color:#FFF0FF;
}

.div_page29_03wr {
  position:relative;
  min-height:60px;
  background-color:#F0F0F0;
  border:1px solid #777777;
}

.div_page29_03ver1 {
  position:absolute;
  width:100%;
  height:100%;
  background-color:#F0FFF0;
}

.div_page29_03ver2 {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:#FFFFF0;
}

.div_page29_03ver3 {
  position:absolute;
  inset:0;
  background-color:#FFF0F0;
}