html {
	width:100%; 
	height:100%;
}
body {
	width:100%; 
	height:100%;
	color:#000;
	font-family: 'ColaborateThinRegular';
}
@font-face {
    font-family: 'ColaborateThinRegular';
    src: url('../fonts/ColabThi-webfont.eot');
    src: url('../fonts/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ColabThi-webfont.woff') format('woff'),
         url('../fonts/ColabThi-webfont.ttf') format('truetype'),
         url('../fonts/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'ColaborateLightRegular';
    src: url('../fonts/ColabLig-webfont.eot');
    src: url('../fonts/ColabLig-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ColabLig-webfont.woff') format('woff'),
         url('../fonts/ColabLig-webfont.ttf') format('truetype'),
         url('../fonts/ColabLig-webfont.svg#ColaborateLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

    /* #Typography
================================================== */
	.content h2 { font-family: 'ColaborateLightRegular'; text-transform:uppercase; font-size:20px; color:#ac0b28; font-weight:normal; width:90%; padding:0 0 4px 0; border-bottom:1px solid #780714; margin:0 0 15px 0;}
	.content h2 span {float:right; color:#777; font-size:15px; text-transform:none; font-style:italic;}
	p { margin: 0 0 20px 0; line-height:24px; font-size:16px; font-family: 'ColaborateLightRegular';}
	p img { margin: 0; }
	

	em { font-style: italic; }
	strong { font-weight: bold; color: #333; }
	small { font-size: 80%; }
	ol, ul {list-style-type:none; margin:0; font-family: 'ColaborateLightRegular'; }
	ul.circle {list-style-type:circle; }
	ul.square {list-style-type:square; }
	
	ol li, ul li {margin-bottom:10px; }
	
	.contact {margin:0 20px 55px -30px;}
	
	.contact {margin-left:0; padding: 0;}
	.phone {background:url(../images/phone.png) no-repeat; padding:2px 0 2px 25px; margin:0 0 8px 0; font-size:22px;}
	.email {background:url(../images/email.png) no-repeat; padding:2px 0 2px 25px; margin:0 0 8px 0; font-size:15px;}
	.email a {color:#222;}
	.address {background:url(../images/address-icon.png) no-repeat; padding:2px 0 2px 25px; margin:0 0 8px 0; font-size:15px;}
	.list-fl-left li {background:url(../images/bullet.png) no-repeat; padding:1px 0 0 25px; margin:0 0 8px 0;}
	.list-fl-left {float:left; margin:0 20px 0 -30px; font-size:16px; list-style-type:none;}
	
	.list-fl-left {
		padding: 0;
			margin-left:0;
	}

	
	.list-fl-right li {background:url(../images/bullet.png) no-repeat; padding:1px 0 0 25px; margin:0 0 8px 0;}
	.list-fl-right {float:right; margin:0 0 0 0px; font-size:16px; list-style-type:none;}
	
	.list-fl-left .pdf {background:url(../images/pdf.png) no-repeat; padding:6px 0 4px 35px; margin:0 0 8px 0; font-size:15px;}
	.list-fl-left .pdf a {color:#108ae0; text-decoration:underline;}
	
	.list-fl-left-no-bullet li {padding:1px 0 0 0px; margin:0 0 12px 0;}
	.list-fl-left-no-bullet {float:left; margin:0 20px 0 -35px; font-size:16px; list-style-type:none;
	
	margin-left: 0;}
	
	.list-fl-left li a {color:#222; text-decoration:none;}
	.list-fl-left li a:hover {text-decoration:underline;}
	/* #Links
================================================== */

	a:link {}
	a:visited {}
	a:hover {}
	a:active {}

    /* #Images
================================================== */
	img {border:none;}
	
	
	/* #Header
================================================== */	
	
	#header {width:100%; height:130px; background:#00386c; padding:10px 0 0 0;}
	.logo {width:159px; height:115px; background:url(../images/logo.png) no-repeat; text-indent:-9999px;}
	
	/* #Navigation
================================================== */
	.nav {position:relative;}
	#nav{
	list-style:none;
	position:absolute;
	top:-10px; right:0;
}
#nav li{
	float:left;
	position:relative;
}
#nav li a{
	display:block;
	padding:65px 10px 60px 10px;
	color:#ddd;
	text-decoration:none;
	font-size:15px;
	text-transform:uppercase;
	background:#00386c;
	transition: background 1s;
	-moz-transition: background 1s; /* Firefox 4 */
	-webkit-transition: background 1s; /* Safari and Chrome */
	-o-transition: background 1s; /* Opera */
}
#nav a:hover, #nav a.current{
	color:#fff;
	background:#015fb5;
}

/*--- DROPDOWN ---*/
#nav ul {
	list-style:none;
	position:absolute;
	display:none; 
	z-index:-1;
	margin:-80px 0 0 0;
	min-width:130px;
	padding:0 10px 0 10px;
	transition: background 1s;
	-moz-transition: background 1s; /* Firefox 4 */
	-webkit-transition: background 1s; /* Safari and Chrome */
	-o-transition: background 1s; /* Opera */
	
}
#nav ul:hover {background:#015fb5;}

#nav ul li{
	top:0; 
	float:none;
	background:url(../images/ullet2.png) no-repeat; padding:0px 0px 0 5px; margin:0px 0 0px -10px;
	
}
#nav li ul li a{
	display:block;
	padding:0px 26px 3px 13px;
	color:#ddd;
	text-decoration:none;
	font-size:16px;
	text-transform:uppercase;
	background:transparent !important;
	
}
.drop h3 {
	color:#ddd; cursor:pointer; text-decoration:none; font-size:15px; text-transform:uppercase; font-weight:normal; padding:60px 0 30px 5px; margin:0px 0 0 0;}
#nav li ul li.first {margin-top:10px;}
#nav li ul li.last {	background:url(../images/ullet2.png) no-repeat; padding:0px 5px 10px 5px; margin:0px 0 0px -10px;}
#nav li a:active {background:#780714;}
#nav li:hover ul{ 
	display:  block; position: absolute; top: 80px; left: 0; width: 120px; padding: 5px; z-index:10;
}

#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none; color:#ccc;
}
#nav li:hover ul li a:hover{ color:#fff;/* Here we define the most explicit hover states--what happens when you hover each individual link. */
	
}

	select {font-size:13px; margin:20px auto 20px auto; width:100%;}
	
	
	/* #Slideshow
================================================== */	
.slideshow {width:100%; height:345px; position:relative;
height: 400px !important;
}
.slideshow img {width:100%; height:auto; position:absolute; top:0; left:0; }


#thankyou{}
#thankyou .box {
  width: 400px;
  background: #e1e1e1;
  padding: 20px;
  border-radius: 10px;
  margin: 20px auto;
  text-align: center;
}
#thankyou .box h1,
#thankyou .box h2,
#thankyou .box p{ margin-bottom: 20px; }

#thankyou .box h1{ font-size: 30px;}
#thankyou .box h2{ font-size: 20px}
#thankyou .box p{ font-size: 15px}
#thankyou .box p a{}
#thankyou .box p a:hover{}

#controls {
    position: absolute;
    width: 96%;
    z-index: 5555;
    height: 37px;
    top: 370px;
    top: 290px;
	padding-left: 2%;
	padding-right: 2%;
}
#controls #left,
#controls #right{
	padding: 20px;
}
#controls #left{
	float: left;
	background: rgba(255, 255, 255, 0.3);
}
#controls #right{
	float: right;
	background: rgba(255, 255, 255, 0.3);
}


.slideshow a{ position: static !important}


.btnNewCustom {
    padding: 5px 10px;
    background-color: #00386c;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    float: right;
}
.btnNewCustom:hover {color:#fff;background-color:#015fb5;}
.slider-caption {
    position: absolute;
    top: 170px;
    left: 0;
    right: 0;
    color: #fff;
    /* font-weight: normal; */
    width: 100%;
    z-index: 777;
    text-align: center;
    font-size: 30px;
}

.slider-caption span {
    display: inline-block;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.7);
    color: #002647;
    float: right;
    margin-right: 10%;
}

.guide {
    z-index: 5555;
    position: absolute;
    top: 330px;
    left: 0;
    right: 0;
    text-align: center;
}
.guide p {
    background: rgba(255, 255, 255, 0.7);
    display: inline-block;
    color: #00386c;
    padding: 0 16px;
}

	/* styles for desktop 
================================================== */
	
	.content {padding:50px 0 0 0;  }
	.sidebar {min-height:430px; margin-top:-50px}
	
	.img {padding:3px; border:1px solid #ccc; float:left; margin:0 20px 30px 0; }
	.gallery h2 { text-transform:uppercase; font-size:20px; color:#780714; font-weight:normal; width:90%; padding:0 0 4px 0; border-bottom:1px solid #780714; margin:0 0 15px 0;}
	.gallery {/*clear:both;*/width:100%; padding:15px 0 0 0;}
	.gallery p {float:left; margin:15px 0 10px 0; background:#780714; padding:3px 10px; color:#fff;}
	.gallery img {float:left; margin:0 18px 20px 0; padding:2px; border:1px solid #ccc; 
	 width:130px; height:90px; box-shadow:1px 1px 1px #666; }
	.sidebar h2 { text-transform:uppercase; font-size:20px; color:#780714; font-weight:normal; width:90%; padding:0 0 4px 0; border-bottom:1px solid #780714; margin:0 0 15px 0;}
	.mh {min-height:200px;}
	.gallery img:hover {border:1px solid #999; box-shadow:1px 1px 5px #666;}
	#carports {min-height:250px;}
	#footer-wrap {clear:both; width:100%; height:55px; background:#002647; padding:20px 0 0 0; margin:40px 0 0 0;}
	.copy {float:left; color:#aaa; font-size:13px;}
	.designer {float:right; color:#aaa; font-size:13px;}
	.designer a{ color:#aaa; text-decoration:none;}
	.designer a:hover{ color:#ddd; }
	.tinynav { display: none }
	.pt {padding-top:15px;}
	.faq-item p {padding-top:10px;}
	.faqs {padding:10px 0;}
	.faqs{padding-top:5px;}
		.faqs dt{font-weight:bold;padding:3px 0 7px 0px;position:relative; line-height:25px;}
		.faqs dt:hover{cursor:pointer}
		.faqs dd{padding:5px 10px 5px 10px; background:#f7fde4; position:relative;line-height:24px; font-size:16px; font-family: 'ColaborateLightRegular';}
		.faqs .hover{color:#990000;text-decoration:underline}
	h2.technical {height:30px; margin:30px 0 0 0; border:1px solid #fff !important; box-shadow:1px 1px 10px #111; color:#fff; border:none; padding:9px 0 20px 70px; width:160px; background:#00386c url(../images/tech.png) no-repeat; }
	
	h2.technical a {text-decoration:none; color:#fff;}
	.words {position:absolute; top:35px; right:0; z-index:99999999;}
	.award {display:none; position:absolute; top:150px; left:5%; z-index:999999999;}
	.prod-box {width:100%; padding:25px 0px 30px 0px; border-bottom:1px solid #ccc; }
	.prod-box img {float:right; padding:3px; border:1px solid #ccc; margin:0 0 20px 20px;}
	.prod-box h3 span {font-weight:normal;}
	.prod-box h3  {font-size:20px; margin:0 0 20px 0; padding:0 0 0 20px;}
	.prod-box p {padding:0 0 0 20px;}
	.form {width:100%; height:330px; margin:0 0 0 5px;}
	#contact iframe {width:100%; height:300px; padding:3px; border:1px solid #ccc; margin-top:15px;}
	/* styles for mobile */
	@media screen and (max-width: 1200px) {
		
		/*.words {top:350px;}*/
		
	}
	@media screen and (max-width: 1100px) {
		
		/*.words {top:300px;}*/
		
	}
	@media screen and (max-width: 950px) {
		/*.words {display:none;}
		.award {display:none;}
	}
	
	table{margin-bottom:20px;width:100%;border:1px solid #bbb;border-collapse:collapse;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.3);-moz-box-shadow:0 1px 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.3);box-shadow:0 1px 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.3)}
	th{font-size:14px; background:#f3f3f3;}
	thead tr{background:#f1f2f4;border-bottom:1px solid #ccc; text-align:left;}
	th,td{padding:8px 15px 8px 15px;border-right:1px solid #ccc;border-bottom:1px solid #ccc; line-height:20px;}
	td {max-height:170px; text-align:top;}
	tbody tr:nth-child(even) td,tbody tr.even td{background:#fff}tfoot{font-style:italic}