@import url('reset.css');
@import url('typography.css'); 
body{ 
	margin:0; 
	padding:0; 
	background: url('../img/bg_all.png') repeat-x top;
	font-family: "Arial", Helvetica, Myriad Pro, sans-serif;
	font-size:12px;
}
div#wrap {  
	background:url(../img/clouds.png) no-repeat top center;
 
}

div#page { 
	width: 980px; 
	height: auto; 
	margin: 0 auto;
}

div#header {
	width: 980px;
	height: 125px;
	position:relative
}
/*шапка*/
div#header .logo1 { 
	display:block; 
	width:130px; 
	height:112px; 
	background:url('../img/logo.png') top right no-repeat;
}

div#header .logo_en { 
	display:block; 
	width:130px; 
	height:112px; 
	background:url('../img/logo_en.png') top right no-repeat;
}


div#header .logo1, div#header .logo_en {
	display:block; float:right;
}

div#header .logotema h2 {
	width: 410px;
	height: 30px;
	display:block; float:right;
	margin:35px 0px 0 0; padding:4px 0px;
	}

div#header .logotema h2 {
	color: #656565;
	font-size: 22px;
	text-decoration: none; 
	text-transform: uppercase; 
	font-weight: bold;
	line-height:20px;
	text-shadow: 0px 1px 0px #ffffff;
	padding-top:10px;
	}


 div#logo  h1, div#logo_en h1{
    margin:0; padding:0;
    position:relative; left:0px; top:0px;
    width:434px; height:130px;
    overflow:hidden;
    }
div#logo  h1 a{ display:block; width:450px; height:130px; background:url('../img/zagolovok3.png') top left no-repeat;}

div#logo_en  h1 a{ display:block; width:450px; height:130px; background:url('../i/logo_en.png') top left no-repeat;}
    

div#logo  	h1 span, div#logo_en h1 span {
    display:block;
	position:absolute; left:300; top:130; z-index:1;
    width:450px; height:130px;
    text-indent:-1000px;
    }


div#menu a { 
	color: #294f7a;
	font-family: "Arial", Helvetica, Myriad Pro, sans-serifl;
 	font-weight:bold;
	font-size: 14px;
	padding:0 10px;
	text-decoration:underline
 
}
 
div#menu a:hover {color:#fff; text-decoration: none; }

.latter{position:absolute; right:30px; top:45px; background:#4dc7ea;  }
.latter a {
 	font-size: 12px;
	text-decoration: underline; 
	font-weight: regular;
	display:block; float:right;
	  padding:5px; color:#FFFFFF;
	  text-shadow: #fff 0px 0px 1px;
}

  .latter a:hover {color:#fff; text-decoration:none;}
 .latter a.cur{ background:#fff; color:#999999; text-decoration:none; padding:5px;}

/*контент*/

div#content {
	width: 980px;
	height: 1000px;
}

div#l_col {
	width: 740px;
	float:left;
}

/*Новая страница*/

div#newcontent .indexnews {
	padding: 10px;
	color: #000000;
	line-height: 1.4;
	text-decoration: none; 
	font-weight: normal;
	font-size: 14px;
	text-align: justify;
word-spacing: -0.3ex;
}

div#newcontent .indexnews .ph   {
	float:left;
	padding:10px;

}


 


.indexnews p{ padding-bottom:10px;}
/*правая колонка*/
div#r_col {
	width: 236px;
	float:right;
}

div#r_col .r_publ {
	padding: 20px 0 10px 0px;
	color: #000000;
	font-size: 18px;
	font-weight: normal;
}
 
div#r_hotnews {
	width: 236px;
	border-bottom-color: #E5E5E5; 
	border-bottom-style: solid; 
	border-bottom-width: 2px;
	padding: 5px 0px 10px 0px;

}

div#r_col .r_data .ssl {
	font-weight: bold;
	padding-top: 2px;
}

div#r_col h5 a{
 }

div#r_col .r_data {
	width: 32px;
	height: 27px;
 	background: #ECF6F8;
	line-height: 1.1;
	padding: 5px 0;
	margin-right:5px;
	float: left;
	text-align: center;
	font-weight:bold;
	font-size:11px;
}
  
div#foot .r_publnews {
	margin: 15px 0 0 0;
	text-align:right;
}

div#foot .r_publnews a {
 
}

div#foto {
	margin: 10px 0 0 0px;
	width: 236px;
}

div#foto .fotoraport {
	padding: 10px 10px 10px 10px;
	float: left;
	color: #000000;
	font-size: 18px;
	font-weight: normal
}

div#foto .fotozag a:hover {
	text-decoration:underline;
}

div#foto .fotozag a {
	color: #195190;
	text-decoration: none; 
	font-weight:bold;
	line-height: 1.1;
	font-size: 14px;
}

div#foto .fotozag {
	margin: 0px 40px 0px 10px;
}

div#foto .fototemy {
	margin: 15px 0px 0px 27px;
	background:url('../img/fototemy.png') no-repeat;
	border: 2px solid; color:#4f99ec;
	width: 178px;
	height: 178px;
}
div#foto .fotofooter {
	background: #f5f5f5;
	margin: 15px 0px 0px 0px;
	width: 235px;
	height: 30px;
}

div#foto .fotofooter a:hover {
	text-decoration:underline;
}  

div#foto .fotofooter a {
	color: #294f7a;
	text-decoration: none; 
	font-weight:bold;
	font-size: 12px;
	float:right;
	padding: 0px 27px 0px 0px;
	margin: 8px 0 0 0;
}

div#foto .seti a { 
	display:block; 
	width:207px; 
	height:114px; 
	background:url('../img/sozseti.png') no-repeat;
	margin: 20px 0px 0px 13px;
}

/*левая*/
div#l_col .publ {
	padding: 10px 0 10px 10px;
	color: #000000;
	font-size: 18px;
	font-weight:bold;
	 
}
div#l_col .publ span{ font-size:14px;}
div#l_col .publ a{ color:#294f7a; font-size:12px;}
div#hotnews {
	width: 740px;
}

/*останні публікації*/
table {
    width: 100%; /* Ширина таблицы */
} 

div#hotnews table .h-top {
	height: 10px;
	background:url('../img/t-hot.png') no-repeat top left;
}

div#hotnews table .h-mid {
	padding:10px;
	background:url('../img/m-hot.png') no-repeat top left;
}

div#hotnews table .all-hot {
	background:url('../img/m-hot-all.png') repeat-y top left;
}

div#hotnews table .hot-b {
	height: 20px;
	background:url('../img/b-hot.png') no-repeat top left;
}
/*тема*/
div#tema {
	width: 700px;
}

div#tema .data {
	padding: 0 0 10px 0;
	width: 700px;
	height: 15px;
	color: #888888;
	font-weight: normal;
}

div#tema .desc {
	padding: 0 10px 10px 10px;
	color: #000000;
	line-height: 1.4;
	text-decoration: none; 
	font-weight: normal;
	font-size: 14px;
	text-align: justify;
word-spacing: -0.3ex;
}

div#tema .desc img {
	float:left;
	padding:0 10px 10px 10px;
}

div#newcontent {
	width: 740px;
	height: auto;
}

div#newcontent .l_publnews {
	padding: 10px 10px 10px 10px;
	float:right;
}

/*центральная*/
div#leftcol {
	width: 740px;
	height: auto;
	

}

/*для левой*/
div#news {
	width: 340px;
	padding: 25px 10px 0 0;
	float:left;
}


/*для левой и правой*/
div#news .data {
	padding: 0 0 5px 0;
}

div#news .descnews {
	padding: 10px 0 0 0;
	text-align: justify;
word-spacing: -0.3ex;
}
 

 
div#footer {
	border-top-color: #c8dff9; 
	border-top-style: solid; 
	border-top-width: 6px;
	width: 980px;
	height: 125px;
}

div#footer .footerlogo { 
	display:block; 
	width:226px; 
	height:73px; 
	background:url('../img/Logo_ChPCHRP_site.jpg') top left no-repeat;
	margin: 25px 0 0 15px;
}

div#footer .footercontent { 
	display: block;
	width: 340px; 
	height: 75px; 
	margin: -70px 0 0 270px;
	color: #195190;
	text-decoration: none; 
	font-weight: normal;
	line-height: 1.4;
}

div#footer .footercontent p {
	color: #195190;
	text-decoration: none; 
	font-size: 12px;
}

div#footer .logosoftdev a{
	background:url('../img/logosoftdev.png') no-repeat left center;
	padding: 0 0 0 20px;
	float: right;
	color: #feb042;
	text-decoration: none; 
}

.logosoftdev{
	margin: -50px 20px 0px 0px; 
}

span.ss{
	font-weight:bold;
}


.paginator { margin:0 auto; padding:30px 0; text-align:center}

.paginator a{ font-size:14px; font-weight:bold; color:#feb042; padding:0 5px;}
.paginator a:hover{ text-decoration:none;}

.paginator a.cur{ color:#898989; text-decoration:none; font-size:18px;}


.jcarousel-skin-pika .jcarousel-container-horizontal { padding: 15px 20px; overflow:hidden;}
.jcarousel-skin-pika .jcarousel-clip-horizontal {height: 90px; width: 485px;}
.jcarousel-skin-pika .jcarousel-item-horizontal { margin-right: 10px;}


.pikachoose {width: 520px; margin: 0 auto;}

/* Style the thumbnails */
.pika-thumbs{ padding: 0 16px;}
	.pika-thumbs li{ width: 144px; height:74px; margin: 10px 0 0 17px; padding: 0; overflow: hidden;
		float: left; list-style-type: none;padding: 3px; margin: 0 5px; background: #fafafa; border: 1px solid #e5e5e5; cursor: pointer;}
	.pika-thumbs li:last {margin: 0;}
	.pika-thumbs li .clip {position:relative;height:100%;text-align: center; vertical-align: center; overflow: hidden;}
	
/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage, .pika-textnav {width: 500px;}
.pika-stage {position: relative; background: #fafafa; border: 1px solid #e5e5e5; padding: 10px 10px 40px 10px; text-align:center; height:250px;}
.pika-stage img{height:100%;}
.pika-stage .caption {position: absolute; background: #000; background: rgba(0,0,0,0.75);  border: 1px solid #141414; font-size: 11px; 
			color: #fafafa; padding: 10px; text-align: right; bottom: 50px; right: 10px;}
	.pika-stage .caption p {padding: 0; margin: 0; line-height: 14px;}

/* Ths play, pause, prev and next buttons */
.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;}
	.pika-imgnav a.previous {background: url(../img/prev.png) no-repeat left 45%; height: 100%; width: 50px; top: 10px; left: 10px;cursor:pointer;}
	.pika-imgnav a.next {background: url(../img/next.png) no-repeat right 45%; height: 100%; width: 50px; top: 10px; right: 10px;cursor:pointer;}
	.pika-imgnav a.play {background: url(../img/play.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display: none;cursor:pointer;}
	.pika-imgnav a.pause {background: url(../img/pause.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display:none;cursor:pointer;}

/* The previous and next textual buttons */
.pika-textnav {overflow: hidden; margin: 10px 0 0 0;bottom:10px; position:absolute;}
.pika-textnav a {font-size: 12px; text-decoration: none; color: #333; padding: 4px;}
	.pika-textnav a.previous {float: left; width: auto; display: block;}
	.pika-textnav a.next {float: right; width: auto; display: block;}

/*for the tool tips*/
.pika-tooltip{font-size:12px;position:absolute;color:white;padding:3px; background-color: rgba(0,0,0,0.7);border:3px solid black;}
.pika-counter{position: absolute;bottom: 45px;left:15px;color:white;background:rgba(0,0,0,0.7);font-size:11px;padding:3px;-moz-border-radius: 5px;border-radius:5px;}

/* If using user thumbnails there's a pause well the new large image loads. This is the loader for that */		
.pika-loader{ background:url(loading.gif) 3px 3px no-repeat #000; background-color:rgba(0,0,0,0.9); color:white; width:60px; font-size:11px; padding:5px 3px; 
	text-align:right; position:absolute; top:15px; right:15px; }
	
	
	.face{
	list-style: none;
	overflow:hidden;
	}
	.face li.last {
		padding-right:20px;
		}
		.face li{
		padding-bottom:20px;
		float:left;

		}
		
        /* --- viewport configuration ---------------------------------------------------------- */
        .viewport {
            overflow: hidden;
            position: relative;
			text-align:left;
			width:159px;
        }

        /* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
           class to the last thumbnail in each row to get rid of the margin-right. */
        .no-margin {
            margin-right: 0;
        }

        /* --- Link configuration that contains the image and label ----------------------------- */
        .viewport a {
            display: block;
            position: relative;
			text-decoration:none;
		
        }

        .viewport a img {
            
            position: relative;
           
        }

        /* --- Label configuration -------------------------------------------------------------- */
        .viewport a span {
            display: none;
            height: 100%;
            position: absolute;
            text-align: left;
			font-size:14px;
			color:#000;
			font-weight:bold;
			font-family: 'ArialNarB',Arial, Helvetica, sans-serif;
            text-decoration: none;
            width: 100%;
            z-index: 100;
			padding:10px 5px 10px 5px;
        }
            .viewport a span em {
                display: block;
                font-size: 12px;
				color:#000;
				width:140px;
				padding-top:10px;
				font-family:Arial, Helvetica, sans-serif;
				font-style:normal; font-weight:normal          }

        /* --- Dark hover background ------------------------------------------------------------ */
        .dark-background {
            background-color: rgba(15, 15, 15, 0.6);
            color: #fff;
            text-shadow: #000 0px 0px 20px;
        }
            .dark-background em {
                color: #ccc;
            }

        /* --- Light hover background ----------------------------------------------------------- */
        .light-background {
            background-color: rgba(255, 255, 255, 0.6);
            color: #333;
            text-shadow: #fff 0px 0px 20px;
        }
            .light-background em {
                color: #707070;
            }

        /**
         * You could create multiple hover background classes for different looks depending on the
         * image type. Use your imagination!
         */



ul.list{
margin:0em 0 3em 0;
padding:0;
list-style:none;
width:600px;
}

ul.list li{
margin:1em 0 0 3em;
text-indent:-1.3em;

}

ul.list li:before {
content: '\2014\a0';
}

ul.list li{
behavior: expression( !this.before ? this.before = this.innerHTML = '— '
+ this.innerHTML : '' ); 
}



/*category section*/
.categorysection{
	border:none;
	}
.last h2{
	margin-bottom:18px;
	font-size:18px;
	}
.last .hentry{
	width:100%;
	overflow:hidden;
	margin-bottom:19px;
	
	}
.last .hentry img{
	float:left;
	margin-right:20px;
	}
	 .last .hentry h3{
		padding-top:0;
		position:relative;
		top:-3px;
		margin:0 0 7px 0;
		font-size:1.3em;
		}