/* CSS Document */

/* Global Styles
--------------------------------------------------------------- */
* {
	margin:0px;
	padding:0px;
}
p {
	line-height: 1.4em;
	padding:5px 0px 5px 0px;
}

#main ul {
	margin: 0px;
	padding: 0px 0px 0px 25px;
}

	ul li {
		line-height: 1.4em;
	}

body, html {
	min-height: 10%;
}

body {
	text-align: left;
	font-size: 62.5%;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	color: #000000;
	background: url(../../images/misc/bg2.gif) repeat #fff ;
	margin: 0px;
}

#businesscard {
	background: #fff;
	margin: 10px;
	text-align:center;
}

a:link, a:visited, a:focus {
	color: #0000FF;
	text-decoration: underline;
	outline: none;
}

a:hover, a:active {
	color: #000;
	text-decoration: underline;
}

a img {
	border: none;
}

h1 {
	font-size: 2.0em;
	background:url(../../images/misc/h1.png) left no-repeat;
	padding-left:25px;
	color:#939393;
	margin:10px 0px 10px 0px;
	
}
	h1 span{
		color:#00aed8;
	}
h2 {
	font-size: 1.6em;
	background:url(../../images/misc/h1.png) left bottom no-repeat ;
	padding-left:25px;
	color:#00aed8;
	margin:20px 0px 10px 0px;
}
	h2 span{
		color:#033744;
	}
	h2.plain{
		margin:0px 0px 10px 0px;
		color:#53231b;
		background:none;
		padding:0px;
	}
/* Container Styles
--------------------------------------------------------------- */

#container {
	width: 930px;
	margin-left: auto;
	margin-right: auto;
	
	font-size: 1.2em;
}

	#contentContainer {
		width: 930px;
		position:relative;
		z-index: 1;
		margin-top: 400px; /* Same as height of header */
	}
	
/* Main Styles
--------------------------------------------------------------- */

		#main {
			float: left;
			width: 550px;
			padding: 10px 20px;
			color:#666666;
		}

		#map {
			width: 660px;
			height: 200px;
		}
		
			ul.key{
				margin-left:30px;
				float:left;
				width:150px;
			}
		
			#logos-bottom {
				background: #fff;
				text-align: center;
				border: 1px solid #ccc;
				margin-top: 20px;
			}	
		
/* Sidebar/CTA Styles
--------------------------------------------------------------- */
		
		#sidebar {
			float: right;
			width: 330px;
		}
			#sidecta{
				margin-top:20px;
				position:relative;
				right:10px;
			}
			#sidebar h2{

			}
			#sidebar ul{
				margin:0px;
				padding:0px;
			}
			#sidebar ul li{
				display:inline;
				list-style: none;
				float:left;			
				text-align:center;
				width:90px;
				font-size:1.0em;
				text-transform:uppercase;
			}
				#sidebar.big ul li{
					font-size:1.6em;
					width:130px;
				}
			#sidebar img{
				float:left;
				margin-right:10px;
				margin-bottom:10px;
			}
				#sidebar.small img{
					margin-right:5px;
					margin-bottom:5px;
				}
					#sidebar a:link, #sidebar a:visited{
						color:#999999;
					}
/* Header Styles
--------------------------------------------------------------- */

#header {
	width: 930px;
	height: 200px;
	position: absolute;
	z-index: 1;
	top: 0px;

}
	#topbg{
		position:absolute;
		top:23px;
		left:0px;
	}
	#headerRight{
		float:right;
		background:url(../../images/misc/header-right.jpg) no-repeat;
		width:650px;
		height:300px;
		margin-top:100px;
		position:relative;
	}
		#roller #headerRight{
			background:url(../../images/misc/header-roller.jpg) no-repeat
		}
		#timber #headerRight{
			background:url(../../images/misc/header-wooden.jpg) no-repeat
		}
		#automated #headerRight{
			background:url(../../images/misc/header-auto.jpg) no-repeat
		}	
		#timber #headerRight{
			background:url(../../images/misc/header-wooden.jpg) no-repeat
		}
		#wrought-iron-timber-gates #headerRight{
			background:url(../../images/misc/header-electric.jpg) no-repeat
		}
		#sectional #headerRight{
			background:url(../../images/misc/header-sectional.jpg) no-repeat
		}
		#side-hinged #headerRight{
			background:url(../../images/misc/header-side.jpg) no-repeat
		}
		#up-and-over #headerRight{
			background:url(../../images/misc/header-upover.jpg) no-repeat
		}												
		.headerCta{
			height:75px;
			width:180px;
			float:left;
			top:205px;
			left:30px;
			position:relative;
			margin-right:20px;
		}
				#headerCta2{
					background:url(../../images/misc/headercta2.png) no-repeat;
				}
					#headerCta2 p{
						margin:40px 5px 0px 0px;
						text-align:center;
						font-size:1.5em;
						color:#808080;
						font-weight:bold;
						text-transform: uppercase;
					}				
				#headerCta3{
					background:url(../../images/misc/headercta3.png) no-repeat;
				}								
		#headerRight-text{
			position:absolute;
			left:240px;
			top:200px;
			color:#fff;
			
		}	
			#headerRight-text p{
				margin:8px 0px 3px 0px;
				font-size:1.1em;
			}
			#headerRight-text a:link, #headerRight-text a:visited{
				color:#00aed8;
			}
	#logo {
		position:absolute;
		left:150px;
		top:5px;
		z-index:10;
		color:#53231b;
	}
		#logo p{
			margin:0px;
			padding:0px 0px 0px 13px;
			position:relative;
			bottom:15px;
			font-size:2.2em;
			text-transform:uppercase;
			color:#999999;
		}
		#logo img{
			padding-left:4px;
			}
	#cta-top-right {
		width: 530px;
		position:absolute;
		left:395px;
		top:30px;
		z-index:10;
		height: 100px;
		text-align:right;
		font-size: 1.5em;
		}	
	
		#cta-top-right p {
			margin: 0px;
			padding: 0px;
			color:#53231b;
		}
			#cta-top-right p strong{
				color:#00bdeb;
			}
			#cta-top-right p strong.number{
				color:#083d4a;
				font-size:1.4em;
			}
#flashSlideshow {
	background: url(../../images/misc/flashSlideshowBackup.jpg);
}
.door-callback{
	background:url(../../images/misc/door-callback.jpg);
	width:212px;
	height:54px;
	float:right;
	margin:10px 0px 30px 0px ;
}
	.door-callback p{
		margin:8px 0px 0px 20px;
		width:120px;
		text-align:left;
	}
	.door-callback a:link, .door-callback a:visited{
		color:#fff;
		text-transform:uppercase;
		font-size:1.4em;
		font-weight:bold;
		padding:5px 0px 0px 0px;

	}
.door-number{
	background:url(../../images/misc/door-number.jpg);
	width:324px;
	height:54px;
	position:relative;
	margin:10px 0px 30px 0px ;
	margin-right:2px;
	float:left;
	
}
	.door-number p{
		color:#093d4a;
	}
	.door-number p.quote{
		text-transform:uppercase;
		font-size:1.4em;
		font-weight:bold;
		width:50px;
		line-height:1.0em;
		margin:12px 0px 0px 15px;
		text-align:right;
	}
	.door-number p.number{
		position:absolute;
		top:8px;
		left:110px;
		font-size:2.5em;
		margin:0px;
	}
	
	.spacer{
		margin-bottom:10px;
	}
	
.product{
	width:930px;
}
	.productLeft{
		float:left;
		width:600px;
		
	}	
	.productRight{
		float:right;
		width:310px;
	}
/* Vertical Navigation Styles
--------------------------------------------------------------- */

#navigation {
	width: 280px;
	z-index: 100;
	float:left;
	margin:100px 0px 0px 0px;
	padding:25px 0px 0px 0px;
	height:300px;
	background: url(../../images/misc/nav-bg.jpg) no-repeat;
}

	#navigation ul {
		display: inline;
		list-style: none;
		
	}
	
		#navigation li {
			display: inline;
			margin: 0px;
		}
			  
			#navigation a {
				float:left;
				width: 202px;
				font-variant:small-caps;
				color: #666666;
				text-decoration:none;
				margin-left:8px;
				padding: 5px 10px 5px 60px;
				border-bottom:1px solid #dad0ce;
				font-size: 1.1em;
			}

				#navigation a:hover {
					color: #000;
					background: #eeeeee no-repeat;
				}
				
				#navigation a.contact {
					border:none;
				}

body#home #navigation a.home, 
body#up-and-over #navigation a.up-and-over,
body#sectional #navigation a.sectional,
body#side-hinged #navigation a.side-hinged,
body#roller #navigation a.roller,
body#automated #navigation a.automated,
body#timber #navigation a.timber,
body#wrought-iron-timber-gates #navigation a.wrought-iron-timber-gates,
body#contact #navigation a.contact{
background: #00aed8 ;
color:#fff;
}

#subnav-up-over, #subnav-sectional, #subnav-hinged, #subnav-gates {
	visibility:hidden;
	position:absolute;
	top:146px;
	left:257px;
	z-index:20;
	width:0px;
}

	#subnav-sectional{
		top:176px;
		left:257px;
	}	
	#subnav-hinged{
		top:206px;
		left:257px;
	}	
	#subnav-gates{
		top:326px;
		left:257px;
	}
	
	#subnav-up-over ul, #subnav-sectional ul, #subnav-hinged ul, #subnav-gates ul{
		list-style:none;
		width:140px;
		
	}
		#subnav-up-over ul li, #subnav-sectional ul li, #subnav-hinged ul li, #subnav-gates ul li{
			width:140px;
			background:#fff;
			border-bottom:1px solid  #d2ad6c;
			
		}	
			#subnav-up-over ul li a, #subnav-sectional ul li a, #subnav-hinged ul li a, #subnav-gates ul li a {
				color:#000;
				display: block;
				padding:6px 20px 6px 20px;
				width:140px;
			}
			
				#subnav-up-over ul li:hover, #subnav-sectional ul li:hover, #subnav-hinged ul li:hover, #subnav-gates ul li:hover {
					background:#ede7db;
				}

/* Footer Styles
--------------------------------------------------------------- */

#footer {
	color: #666666;
	background:#e5e5e5;
	font-size: 1.1em;
	border-top:#e3dbca 1px solid;
	
}	
	#footer li {
		list-style: none;
	}
	
	#footer p {
		margin: 0px;
		padding: 0px;
		
	}

	#footer a {
		white-space: nowrap;
		color: #666666;
		text-decoration: none;
	}
	
	#footer a:hover {
		color: #111;
		text-decoration:underline;
	}
	#footerContent{
		width:930px;
		margin-left: auto;
		margin-right: auto;
		
	}
/* Footer Services Styles
--------------------------------------------------------------- */	

	#footer #footer-services {
		float: left;
		width: 320px;
		height:280px;
		background:url(../../images/misc/footer.gif) no-repeat left top;
	}
	
		#footer #footer-services ul li a {
			float: left;
			width: 310px;
			padding: 3px 5px;
		}
		
/* Footer Areas Styles
--------------------------------------------------------------- */	

	#footer #footer-areas {
		float: left;
		width: 300px;
		
	}
	#footer-areas p{
		margin-left:20px;
		line-height:1.8em;
	}
		#footer #footer-areas ul li a {
			float: left;
			width: 300px;
			padding: 3px 5px;
			
		}
		
/* Footer Right Styles
--------------------------------------------------------------- */	

	#footer #footer-right {
		float: right;
		width: 220px;
		margin-left:60px;
	}
		#footer  #footer-right ul li
		{
			margin:3px 0px;
			float:left;
		}
		#footer #footer-right ul li a {
			float: left;
			width: 200px;
			padding: 2px 5px;
			margin:0px 0px 5px 0px;
			
		}
		
/* Footer Bottom Styles
--------------------------------------------------------------- */	

	#footer #footer-bottom {
		width:100%;

		
		margin-left:auto;
		margin-right:auto;
	}
	
/* Footer W3C Styles
--------------------------------------------------------------- */	

	#footer #footer-w3c {
		width:600px;
		margin-top:30px;
		float:right;

	}
	
		#footer #footer-w3c li {
			list-style: none;
			padding:10px;
			display: inline;
			
		}
		#footer #footer-w3c li a{
		color: #666666;
		}
	
	#footer #adtrakDesign {


	}

/* Image Styles
--------------------------------------------------------------- */

.img-left {
	float: left;
	margin: 0px 10px 10px 0px;
}

.img-right {
	float: right;
	margin: 0px 0px 10px 10px;
}
	
	.img-border {
		border: 1px solid #ccc;
	}
	
/* Contact Table Styles
--------------------------------------------------------------- */

	 #botBuster {
		display: none;
	}
	
/* Generic Styles
--------------------------------------------------------------- */

.clearfix {
	clear: both;
}


/* Contact Table Styles
--------------------------------------------------------------- */

.errors {
	font-size:1.3em;
	padding:0px 0px 0px 20px;
	color:#FF0000;
	font-weight:bold;
}

#contact h2 {
	border:none;
}

#contactTable {
	float:left;
}
	
#contactTable #botBuster {
	display: none;
}
	
#form {
	float:left;
	width:300px;
}

form.formular {
	font-size: 12px;
	width:300px;
}

.formular fieldset {
	margin:0px 0px 5px 0px;
	padding : 0px 15px 15px 15px;
	border: 1px solid #99C8DF;	
}

.formular fieldset.botBuster {
	display:none;
}

.formular legend {
	font-size: 1.4em;
	color: #236B8F;
	font-weight: bold;
	padding:0px 5px 0px 5px;
}

.formular fieldset label {
	float: none;
	text-align: inherit;
	width: auto;
}

.formular label span {
	color: #000;
}

.formular input, .formular select, .formular textarea {
	display : block;
	margin-bottom: 10px;
}

.formular .text-input {
	width: 250px;
	color: #555;
	padding: 4px;
	border: 1px solid #99C8DF;
	font-size: 14px;
	margin-top: 4px;
	background: #FFF url('/img/form/text-bg.gif') repeat-x;
	
}
.formular textarea {
	width: 250px;
	height:70px;
	color: #555;
	padding: 4px;
	border: 1px solid #99C8DF;
	font-size: 14px;
	margin-top: 4px;
	background: #FFF url('/img/form/text-bg.gif') repeat-x;
	
}
.formular .infos {
	background: #FFF;
	color: #333;
	font-size: 12px;
	padding: 10px;
	margin-bottom: 10px;
}

.formular span.checkbox, .formular .checkbox {
	display: inline;
}

.formular .submit {
	background: #236B8F;
	color:#FFFFFF;
	font-weight:bold;
	border: 1px solid #AAA;
	padding: 4px;
	margin: 5px 0px 20px 0px;
	float: right;
	text-decoration: none;
	cursor:pointer;
}

.formular hr {
	clear: both;
	visibility: hidden;
}

.formular .fc-error {
	width: 350px;
	color: 555;
	padding: 4px;
	border: 1px solid #99C8DF;
	font-size: 12px;
	margin-bottom: 15px;
	background: #FFEAEA;
}

	.formError {
			position:absolute;
			top:300px; left:300px;
			padding-bottom:13px;
			display:block;
			z-index:5000;
		}
			.ajaxSubmit{ padding:20px; background:#55ea55;border:1px solid #999;display:none}
			.formError .formErrorContent {
				width:100%; 
				background:#ee0101;
				color:#fff;
				width:150px;
				font-family:tahoma;
				font-size:11px;
				border:2px solid #ddd;
				box-shadow: 0px 0px 6px #000;
				-moz-box-shadow: 0px 0px 6px #000;
				-webkit-box-shadow: 0px 0px 6px #000;
				padding:4px 10px 4px 10px;
				border-radius: 6px;
				-moz-border-radius: 6px;
				-webkit-border-radius: 6px;
			}
			.greenPopup .formErrorContent {background:#33be40;}
			
			.blackPopup .formErrorContent {background:#393939;color:#FFF;}
			
			.formError .formErrorArrow{
				position:absolute;
				bottom:0;left:20px;
				width:15px; height:15px;

				z-index:5001;
			}
			.formError .formErrorArrowBottom{top:0;margin:-6px;}
			
				.formError .formErrorArrow div{
					border-left:2px solid #ddd;
					border-right:2px solid #ddd;
					box-shadow: 0px 2px 3px #444;
					-moz-box-shadow: 0px 2px 3px #444;
					-webkit-box-shadow: 0px 2px 3px #444;
					font-size:0px; height:1px; background:#ee0101;margin:0 auto;line-height:0px; font-size:0px; display:block;
				}
					.formError .formErrorArrowBottom div{
						box-shadow: none;
						-moz-box-shadow: none;
						-webkit-box-shadow: none;
					}
					
				.greenPopup .formErrorArrow div{background:#33be40;}
				.blackPopup .formErrorArrow div{background:#393939;color:#FFF;}

				.formError .formErrorArrow .line10{width:15px;border:none;} 
				.formError .formErrorArrow .line9{width:13px;border:none;} 
				.formError .formErrorArrow .line8{width:11px;} 
				.formError .formErrorArrow .line7{width:9px;} 
				.formError .formErrorArrow .line6{width:7px;} 
				.formError .formErrorArrow .line5{width:5px;} 
				.formError .formErrorArrow .line4{width:3px;} 
				.formError .formErrorArrow .line3{width:1px;
					border-left:2px solid #ddd;
					border-right:2px solid #ddd;
					border-bottom:0px solid #ddd;} 
				.formError .formErrorArrow .line2{width:3px;border:none;background:#ddd;}
				.formError .formErrorArrow .line1{width:1px;border:none;background:#ddd;}  
	
	

/* Legal Info.
============================================*/

#trading-as{
 text-align: center;
 padding-right: 20px;
 padding-top: 40px;
 color:#333333;
}