@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow:400,700&subset=latin,latin-ext);
@import url(nav.css);

* { list-style:none;}

body {
    font-size: 12px;
    line-height: 18px;
    font-family: 'Archivo Narrow', sans-serif;
    color: #111;
    background: linear-gradient(#eee,#fff);
	margin:0;
	padding:0;
	list-style:none; 
	overflow-x:hidden;
	overflow-y:scroll;
}

a { color: #888; text-decoration: none; cursor: pointer; }
a:hover { color:#111; }
a img { border: 0; }

h1, h2, h3, h4, h5, h6 {font-family: 'Archivo Narrow', sans-serif; margin:0; padding:0;}

h1 { font-size: 18px; color: #fff; margin:10px 0; padding:5px 15px; background:#1c4ea1; }
h2 { font-size: 16px; color: #222; }



input, textarea, select { font-size: 12px; padding:4px; font-family: arial, sans-serif; border:1px solid #CCC; width:300px;}
textarea { overflow: auto; }
.gonder { cursor:pointer; width:100px; background:#1c4ea1; color:#FFF; padding:5px; border:none;}

.grayscale { opacity:1; width:134px; border:1px solid #eee; filter: url(filter.xml#grayscale); filter: gray; -webkit-filter: grayscale(1);}
.grayscale:hover {filter: none;-webkit-filter: grayscale(0);}

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }

.galeri { font-size:11px;}
.galeri a { display:inline-block; float:left; margin:20px 10px 0 0;}
.galeri a img { width:138px; height:100px; border:1px solid #CCC; padding:5px;}
.galeri a img:hover { opacity:0.5;}

#container { width:980px; margin:0 auto; padding:15px; background:#fff; box-shadow:0 0 10px #ccc;}

#header { width: 960px; margin:0 auto; padding:10px 10px; height:90px; position:relative; border-bottom:1px solid #CCC;background: linear-gradient(#fff,#eee); }
#header > #logo { width: 230px; float:left;}
#header > #topnav { color: #000; float:right; position:absolute; right:110px; top:13px; width:150px; }
#header > #topnav a { color: #111; float:right; padding:0; transition:.65s; -moz-transition:.65s; -webkit-transition:.65s;font-size:14px; }
#header > #topnav a:hover { color: #ff2743;  transition:.65s; -moz-transition:.65s; -webkit-transition:.65s; padding-right:8px; }
#header > #topnav a span { color: #ff2743; padding-left:5px;}

.language {position:absolute; top:16px; right:12px; z-index:350;}

#news {width:960px; padding:0 10px; margin:0 auto; height:40px; background:#f7f7f7;}
#news > .head {float:left; font-size:16px; font-weight:bold; color:#1c4ea1; margin:0; padding:10px 5px;}
#news > ul#ticker { float:left; width: 650px; height: 30px; overflow: hidden; margin: 0 0 0 30px; padding: 0; list-style: none;}
#news > ul#ticker li { height: 30px; padding: 10px 0px; margin: 0px 3px; font-size:16px;}
#news > a.allnews {color:#ff2743; float:right; font-size:16px; margin:0; padding:10px 10px;}
#news > a.allnews:before { content:attr(data-icon); color:#111; position:relative; top:2px;}


#slider { width:980px; margin:0 auto; position:relative;}
#slider > h1 { position:absolute; right:30px; bottom:50px; font-size: 26px; line-height: 20px; color: #fff; text-shadow:0 1px 1px #000; }
#slider > h2 { position:absolute; right:30px; bottom:30px; font-size: 18px; line-height: 20px; color: #ccc; text-shadow:0 1px 1px #000; }

#content { margin:0 auto; padding:0px; width: 980px; min-height:250px; }
#content > .page {padding:10px; font-size:14px; }
#content > .col1 a:before, #content > .col2 a:before, #content > .col3 a:before {
	 	   content:attr(data-icon); font-size:3.5em; float:left; margin:0 10px 10px 0px; color:#1c4ea1; }
#content > .col1 h5, #content > .col2 h5, #content > .col3 h5 {
	 	   font-size:18px; margin:20px 0; color:#666; text-align:left; }
		   
#content > .col1 {font-size:14px; float:left; width:300px; line-height:14px;  color:#999; text-align:right; }
#content > .col2 {font-size:14px; float:left; margin-left:35px; line-height:14px; width:300px; color:#999;text-align:right;}
#content > .col3 {font-size:14px; float:right; width:300px; line-height:14px; color:#555;text-align:right; }
#content > .col1 strong,#content > .col2 strong,#content > .col3 strong {color:#1c4ea1; float:right; font-size:14px; }

.works-boxs { padding:2em 0; }
.works-box { position:relative; width:160px; height:145px; float:left; overflow:hidden; margin:0 4px 0 0; cursor:pointer; }
.works-box.last { margin:0 0px 0 0; float:right; }
.works-box > strong { font-size:1.2em; text-align:center; background:#1c4ea1; padding:5px 3px; display:block; color:#fff; position:relative; z-index:9999; }
.works-box > img { transform:scale(1.0,1.0); transition:.50s; }
.works-box:hover > img  { transform:scale(1.3,1.3); transition:.50s; opacity:0.7; }
.works-box:hover > .caption  { transition:.50s; -moz-transition:.50s; -webkit-transition:.50s; bottom:0px; height:60%; margin:0 0px; padding:20px 0; cursor:pointer;  }
				   .caption { position:absolute; z-index:0; bottom:-150px; width:100%; margin:0 4px; left:0; background:rgba(28,78,161,0.7); transition:.50s; }
				   .caption a { font-size:1.5em; color:#fff; text-align:center; display:block; padding:30px 0; }


.refheading {width:970px; padding:10px 0; font-size:20px; color:#1c4ea1; text-align:center; margin:20px auto; border-bottom:0px solid #eee;  border-top:1px dotted #eee;}
.references {width:970px; padding:10px 0px;  margin:0 auto;}

/* footer */
#footer { width:960px; height:20px; padding:10px 10px; margin:0 auto; background:#1c4ea1; color:#fff;}
#footer > .left { float:left; }
#footer > .globalmedya {float:right;}

ul#cat{ text-decoration:none; list-style:none; margin:0; padding:0;}
ul#cat li{ line-height:18px; }
ul#cat li::before{ content:attr(data-icon); color:#ff2743; font-weight:bold; }
ul#cat li a{ padding:0 4px; color:#888; margin-left:10px; text-decoration:none; font-size:12px; font-weight:bold; }
ul#cat li a:hover{color:#ff2743;}