@charset "windows-1251";

/* 
 * стили для статей КЛЕО
 * внутри страницы
 * оформляются в виде блока div.article
*/



.article {
    color: #494949;
    font-size: 14px;
    line-height: 23px;
}


.article table {border-bottom-width: 0px;
border-collapse: separate;
border-left-width: 0px;
border-right-width: 0px;
border-spacing: 0px;
border-top-width: 0px;
display: table;
margin-left: auto;
margin-right: auto;
text-indent: 0px;
}
.article table td {
padding: 15px;
}
div.article .m00 {
    margin: 0;
    padding: 0;
}



/* картинка слева */
div.article .limg {
   /* border: 1px solid #EEEEEE;*/
    float: left;
    margin: 0 1em 0.5em 0;
}

/* картинка справа */
div.article .rimg {
   /* border: 1px solid #EEEEEE;*/
    float: right;
    margin: 0 0 0.5em 1em;
}


div.article p {
    margin-top: 10px;
    margin-bottom: 10px;
}


/* вводный параграф */
div.article p.topline {
    color: #555555;
    font-family: Arial,sans-serif;
    font-size: 120%;
    font-weight: bold;
}


div.article a:link, div.article a:hover, div.article a:visited {
    color: #F33C69;
}


div.article h2, div.article h3 {
    margin: auto;
}


.article h1 {
    color: #000000;
    font: normal 28px/32px "opensans","Arial","Tahoma";
    margin: 0 0 19px;
    position: relative;
    text-transform: uppercase;
}


.article h2 {
    color: #F13C69 !important;
    font: 22px/24px 'helioscondcbold' !important;
    margin-top: 25px !important;
    text-transform: uppercase !important;
}

.article h3 {
    color: #000000;
    font: 18px/20px "opensans","Arial","Tahoma";
    padding: 0;
    text-transform: uppercase;
    margin: 0 0 20px 0!important;
}
.read_more_article_block h2 {
	 margin-top: 0 !important;
}

/*div.article ul {
    list-style: square !important;
     margin: 0 0 0 1.5em; 
    padding: 0;
}

div.article ul li {
    margin: 0.5em 0 0;
    padding: 0;
}*/




/* серая плашка */

.article .emph, .article .colored {
    background: url("/img2/old-style/selected.png") no-repeat scroll 0 0 #FBFBFB;
    border: 1px solid #EBEBEB;
    font-style: italic;
    line-height: 21px;
    margin: 15px 0 20px;
    padding: 25px 85px 27px 135px;
}

/* цитата */

.article .kleoquote {
    background: url("/img2/kleo_quote.png") no-repeat scroll 20% 12% #fff;
    _border: 1px solid #EBEBEB;
    font-style: italic;
    line-height: 21px;
    margin: 15px 0 20px;
    _padding: 25px 85px 27px 135px;
    padding: 25px 35px 27px 190px;
}


/* выноска */

.cit {
    background: url("/img2/old-style/callout.png") no-repeat scroll 0 0 transparent;
    float: right;
    font-style: italic;
    padding: 0 0 30px 83px;
    width: 230px;
    margin:0 !important;
}


/* выноска справа c красным бордюром слева */

.article .breakout {
    border-left: 5px solid #FF335A;
    color: #A1A1A1;
    float: right;
    font: 11px/15px Arial;
    margin: 3px 0 10px 30px;
    padding-left: 7px;
    width: 283px;
}

/* выноска слева c красным бордюром слева  */

.article .breakoutleft {
    border-left: 5px solid #FF335A;
    color: #A1A1A1;
    float: left;
    font: 11px/15px Arial;
    margin: 3px 30px 10px 0;
    padding-left: 7px;
    width: 283px;
}


/* ёлочки 
 */

.quotable:before {
	content: "\00AB";
}
.quotable:after {
	content: "\00BB";
}

blockquote:before {
	content: "\00AB";
}
blockquote:after {
	content: "\00BB";
}

.interview-form legend {width: 250px;}

.border_table {
border-top: 1px solid black !important;
border-left: 1px solid black !important;
border: 0;
border: 0;
}
.border_table td {
	border-bottom: 1px solid black !important;
	border-right: 1px solid black !important;
}

/*attention*/
.article .attention-box{
  position: relative;
  margin: 15px 0;
  padding: 75px 80px 50px 50px;
  font-size: 16px;
  color: #4b4949;
}
.article .attention-box.pink-att{
  background: url("../img2/attention_img/pink-top.png") 100% 100% no-repeat;
  background-size: cover;
}
.article .attention-box.pink-att:after{
    content: 'Обратите внимание!';
    position: absolute;
    top: 35px;
    left: 50px;
    font-weight: bold;
    font-size: 18px;
    color: #ac1044;
}
.article .attention-box.blue-att{
  background: url("../img2/attention_img/blue-top.png") 100% 100% no-repeat;
  background-size: cover;
}
.article .attention-box.blue-att:after{
    content: 'Важное дополнение';
    position: absolute;
    top: 35px;
    left: 50px;
    font-weight: bold;
    font-size: 18px;
    color: #1b6d7b;
}
.article .attention-box.green-att{
  background: url("../img2/attention_img/green-top.png") 100% 100% no-repeat;
  background-size: cover;
}
.article .attention-box.green-att:after{
    content: 'Рекомендация эксперта';
    position: absolute;
    top: 35px;
    left: 50px;
    font-weight: bold;
    font-size: 18px;
    color: #34a945;
}
.article .attention-box.yellow-att{
  background: url("../img2/attention_img/yellow-top.png") 100% 100% no-repeat;
  background-size: cover;
}
.article .attention-box.yellow-att:after{
    content: 'Идея от автора';
    position: absolute;
    top: 35px;
    left: 50px;
    font-weight: bold;
    font-size: 18px;
    color: #ff8400;   
}
@media screen and (max-width:680px){
    .article .attention-box{
      margin: 25px 0;
      padding: 75px 15px 15px 15px;
      font-size: 16px;
      margin-right: 15px;
      border-radius: 10px;
    }
    .article .attention-box:after{
        left: 15px!important;
    }
    .article .attention-box:before{
        content: '';
        position: absolute;
        right: -16px;
        bottom: -16px;
        height: 25px;
        width: 25px;
        background-size: cover;
    }
    .article .attention-box.pink-att{
        background: #fff1f0;
    }
    .article .attention-box.pink-att:before{
        background: url("../img2/attention_img/pink-top-small.png") 100% 100% no-repeat;
    }
    .article .attention-box.blue-att{
        background: #e1f1f4;
    }
    .article .attention-box.blue-att:before{
        background: url("../img2/attention_img/blue-top-small.png") 100% 100% no-repeat;
    }
    .article .attention-box.green-att{
        background: #ecfdef;
    }
    .article .attention-box.green-att:before{
        background: url("../img2/attention_img/green-top-small.png") 100% 100% no-repeat;
    }
    .article .attention-box.yellow-att{
        background: #fffcdc;
    }
    .article .attention-box.yellow-att:before{
        background: url("../img2/attention_img/yellow-top-small.png") 100% 100% no-repeat;
    }
}