@import url(mainnav/layout.css);

body {
	font-family: arial,verdana,helvetica,clean,sans-serif; 
	font-size: 12px; 
	/*line-height: 1.3;*/
	background-color: #191919;
	height: 100%;
	padding: 0;
	margin: 0;
	background: #191919 url(../images/bg-html.png) no-repeat 50% 100%;
	}
img {
	border: none;
	}	
html, body, #outer {
	height: 100%; 
	width: 100%; 
	position: relative;
	padding: 0;
	margin: 0 auto;
	color: #ccc;
	text-align: left;
	}
#outer {
	display:table; 
	overflow: hidden;
	}
#outer .container {
	top: 50%; 
	display: table-cell; 
	vertical-align: middle; 
	}
#outer .frame {
	top: -50%; 
	width: 100%;
	margin: 0 auto;
	height: 640px;
	background: #191919 url(../images/bg-body.png) no-repeat 50% 50%;
	}
#outer .inner-frame {
	width: 970px;
	margin: 0 auto;
	height: 640px;
	}	
.con-header {
	background-color: #333;
	text-align: right;
	width: 970px;
	height: 76px;
	overflow: hidden;
	position: relative;
	}
.con-main,
.media-detail .con-main,
.gallery .con-main {
	width: 700px;
	height: 424px;
	float: left;
	background: #333 url(../images/bg-content-full.png) no-repeat top left;
	position: relative;
	overflow: hidden;
	}
.gallery .con-main,
.display .con-main,
.profile .con-main,
.media .con-main,
.media-detail .con-main,
.contact .con-main {
	background-color: #000;
	}
.contact .con-main {
	background: #000 url(../images/bg-content.png) no-repeat top right;
	}	
.profile .con-main {
	background: #000 url(../images/bg-content-wide.png) no-repeat top left;
	}	
.mod-content {
	padding: 20px 25px 25px 25px;
	float: left;
	width: 220px;
	position: relative;
	}
.profile .mod-content {
	padding: 20px 25px 25px 25px;
	float: left;
	width: 380px
	}	
.media .mod-content  {
	width: 650px
	}	
.mod-image {
	float: left;
	position: relative;
	}
.mod-image ul,
.mod-image li {
	padding: 0;
	margin: 0;
	list-style-type: none;
	}
.profile .mod-image {
	overflow: hidden;
	width: 270px;
	height: 424px;
	}	
.con-supp {
	background: #00a8d4 url(../images/bg-supp.png) no-repeat 0 0;
	width: 270px;
	height: 424px;
	float: left;
	position: relative;
	}	
.con-footer {
	background: #191919 url(../images/bg-footer.png) no-repeat 0 0;
	height: 0;
	padding-top: 140px;
	width: 970px;
	float: left;
	clear: both;
	overflow: hidden;
	}	
#mainnav {
	position: absolute;
	bottom: 15px;
	left: 0px;
	z-index: 1;
	}
.arrow {
	position: absolute;
	z-index: 99;
	top: 0;
	left: -6px;
	}
.home .arrow {top: 227px;}		
.gallery .arrow {top: 163px;}	
.display .arrow {top: 291px;}	
.profile .arrow {top: 323px;}	
.media .arrow {top: 355px;}
.media-detail .arrow {top: 355px;}	
.contact .arrow {top: 387px;}	
/*
.all .arrow {top: 176px;}	
.new .arrow {top: 204px;}
.commercial .arrow {top: 232px;}
.extensions .arrow {top: 261px;}*/

.pics {  
    width: 700px;
	height: 424px;
    padding: 0;  
    margin:  0;  
    position: relative;
	} 
 
.pics img { 
    width: 700px;
	height: 424px;
    top:  0; 
    left: 0;
    position: absolute;
	} 	
	
h1 {
	color: #00a8d4;
	font-weight: bold;
	font-size: 100%;
	margin-top: 0;
	line-height: 1.3;
	margin-bottom: .9em;
	}
h1 em {
	color: #666;
	font-weight: normal;
	font-style: normal;
	}	
h2 {
	color: #fff;
	font-weight: bold;
	font-size: 100%;
	margin-top: 0;
	margin-bottom: .9em;
	line-height: 1.3;
	}
h2 em {
	font-weight: normal;
	font-style: normal;
	color: #999;
	font-size: 10px;
	}	
p, li,  {
	font-size: 100%;
	/*line-height: 1.3;*/
	margin-top: 0;
	margin-bottom: .8em;
	font-weight: normal;
	}
li {
	margin-bottom: 0;
	}	
sup, 
sub { 
	vertical-align: 0;
    position: relative;
    font-size: 9px;
    }
sup { bottom: 1ex; }
sub { top: 0.8ex; }	
	

a:link {color: #fff; text-decoration: underline;}
a:visited {color: #fff; text-decoration: underline;}
a:focus {color: #00a8d4; text-decoration: underline;}
a:hover {color: #00a8d4; text-decoration: underline;}	
a:active {color: #00a8d4; text-decoration: underline;}

li {
	font-size: 100%;
	line-height: 1.5em;
	padding: 0;
	}
.mod-content ul {
	margin-left: 0;
	padding-left: 1.5em;
	}	
.mod-content ul ul,
.mod-content ul ul ul {
	margin-bottom: 0 !important;
	}		
.mod-content ul {
	list-style-type: none;
	}
.mod-content ul li {
	padding-left: 12px;
	}

.mod-content ul li {background: url(../images/bullet-1.png) no-repeat left 6px;}

.backlink {
	position: absolute;
	bottom: 10px;
	z-index: 1;
	}
.backlink a:link {color: #666; text-decoration: underline;}
.backlink a:visited {color: #666; text-decoration: underline;}
.backlink a:focus {color: #00a8d4; text-decoration: underline;}
.backlink a:hover {color: #00a8d4; text-decoration: underline;}	
.backlink a:active {color: #00a8d4; text-decoration: underline;}	

.media-detail .backlink {
	display: none;
	}

.pdf-download {
	background: url(../images/icn-pdf.png) no-repeat left 2px;
	padding-left: 18px;
	}
	
	


/* ================ Media List ==================== */



.medialist,
.medialist li {
	position: relative;
	padding: 0!important;
	margin: 0 0 0 0!important;
	}
.medialist {
	margin: 0 0 0 -10px!important;
	}	
	
.medialist li {
	background-image: none!important;
	float: left;
	width: 311px;
	margin-top: -1px!important;
	}
.medialist li.col-1 {
	width: 321px;
	}	
.medialist li a {
	display: block;
	text-decoration: none!important;
	height: 60px;
	padding: 10px;
	position: relative;
	padding-left: 80px!important;
	width: 230px;
	}
.medialist li em {
	font-weight: normal;
	font-style: normal;
	font-size: 10px;
	color: #666;
	}	
.medialist li a:link {color: #ccc;}
.medialist li a:visited {color: #ccc;}
.medialist li a:focus {color: #fff;}	
.medialist li a:hover {color: #fff;background-color: #191919;}
.medialist li a:active {color: #fff;}		
.medialist img {
	position: absolute;
	z-index: 1;
	top: 10px;
	left: 10px;
	}	
	
#mycarousel,
#mycarousel li {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}	


/* ================ Gallery ==================== */

#filter {
	position: absolute;
	z-index: 1;
	top: -52px;
	font-size: 14px; 
	list-style: none; 
	margin-left: 0; 
	width: 100%;
	left: -10px;
	}
ul#filter li { 
	border-right: 1px solid #666;
	float: left;
	line-height: 16px;
	margin-right: 10px;
	padding-right: 10px;
	}	
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #999; text-decoration: none; }
ul#filter li.current a, ul#filter a:hover { text-decoration: underline; }
ul#filter li.current a { color: #fff; font-weight: bold; }


.gallery-thumbs {
	/*position: absolute;*/
	padding: 5px 0 0 0!important;
	margin-top: 0;
	width: 200px!important;
	}

.gallery-thumbs {
	/*position: absolute;
	padding: 20px 15px 15px 15px!important;
	margin-top: 0;
	width: 45px!important;
	overflow: hidden;
	top: 0px;
	left: 0px;
	z-index: 1;
	height: 400px;
	background-color: #222222;*/
	}

.gallery-thumbs,
.gallery-thumbs li {
	padding: 0;
	margin: 0;
	}
.gallery-thumbs li {
	padding: 0;
	margin: 0 10px 10px 0!important;
	float: left;
	display: block;
	width: 45px!important;
	height: 45px!important;
	overflow: hidden;
	background-image: none!important;
	background-color: #000!important;
	}
.gallery-thumbs li a img {
	opacity: 0.4;
	filter: alpha(opacity=40);
	display: block;
	}
.gallery-thumbs li a:hover img {
	opacity: 1;
	filter: alpha(opacity=100);
	}
	
.gallery .mod-content {
	/*float:left;
	padding: 20px 10px 25px 20px;
	position:relative;
	width:150px;*/
	}	
.gallery .gallery-navigation {
	display: block!important;
	}	
.gallery-navigation {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	text-align: left;
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
.gallery-navigation li {
	padding: 0;
	margin: 0;
	list-style-type: none;
	}