/* CSS Document */

/* Font Face
--------------------------------------------------------------- */

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

}
	
	#cta-top-right p,
	ul#buckets li a span,
	#footer h2 {
		font-family: "PuschkinRegular", Arial, Helvetica;
		line-height:1.0em;
	}

/* Global Styles
--------------------------------------------------------------- */

* {
	margin: 0px;
	padding: 0px;
}

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

body {
	text-align: left;
	font-size: 62.5%;
	font-family: Arial, Helvetica, sans-serif;
	color: #2b4087;	
	margin: 0px;
}

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

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

a img {
	border: none;
}

/* H1/H2/H3 Styles
--------------------------------------------------------------- */

h1 {
	font-size: 2.1em;
	font-weight: normal;
	color: #2b4087;
	padding: 0px 0px 3px;
}

h2 {
	font-size: 1.6em;
	font-weight: normal;
	color: #2b4087;
	padding: 5px 0px 0px;
}

h3 {
	font-size: 1.3em;
	font-weight: normal;
	color: #2b4087;
}

/* Container Styles
--------------------------------------------------------------- */

#outerContainer {
	width: 100%;
	float: left;
}

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

	#contentContainer {
		width: 960px;
		background: url(../../images/layout/contentContainerBg.jpg) top left repeat-y #fff;
		border-top: 398px solid #fff;
	}
	
#index #contentContainer {border-top:658px solid #fff;}	
	

/* MainContainer Styles
--------------------------------------------------------------- */

#mainContainer {
	float:left;
	position:relative;
	width:960px;
	background:url(../../images/layout/mainContainerBg.jpg) bottom left no-repeat;
}

/* Main Styles
--------------------------------------------------------------- */

		#main {
			float: left;
			width: 610px;
			padding: 140px 10px 10px 30px;
		}
		
			#main p {
				margin: 10px 0px 10px 0px;
				font-size: 1.1em;
				line-height: 1.6em;
				}
			
			#main ul {
				font-size: 1.1em;
				padding: 3px 0px 20px;
			}
			
				#main ul li {
					padding: 4px 0px 4px 30px;
					list-style: none;
					background: url(../../images/misc/tick.jpg) left center no-repeat;
				}
				
				#main ul.horizontal {
					margin: 15px 0px 20px;
					padding: 12px 0px 12px 7px;
					border: solid 1px #ccc;
				}
				
				#main ul.horizontal li{
					display:inline-block;
					padding:0px 10px 0px 27px;
					height: 18px;
				}
				
					#main ul.horizontal li a {
					}
				
#main p:first-of-type {font-weight:bold;}							
		
#bottomCta {
	margin:25px 0px 0px;
}

	#bottomCta p {
		font-size:1.8em;
		font-weight:bold;		
	}
	
		#bottomCta p span {color: #ff9208;}
		
		#bottomCta p .lowercase {
			text-transform:lowercase;
			color:#2b4087;
		}

#index #main,
#repairs-servicing #main,
#contact #main,
#gallery #main,
#default #main {padding-top:10px;}


/* pageGallery Styles
--------------------------------------------------------------- */

.pageGallery {
	position:absolute;
	top:0px;
	left:20px;
}

	.pageGallery a {
		padding:0px 10px;
		margin:0px;
	}	

#index .pageGallery,
#contact .pageGallery,
#default .pageGallery
#repairs-servicing .pageGallery {
	display:none;}
	
#gallery .pageGallery {
	position:inherit;	
	float:left;
	display:block;
	padding:0px;
	margin:0px;
}

	#gallery .pageGallery a {
		float:left;
		display:block;
		margin:0px;
		padding:8px;
	}	
	
/* Sidebar/CTA Styles
--------------------------------------------------------------- */
		
	#sidebar {
		float: right;
		width: 310px;
	}
	
		#sidebar .cta {
			display:block;
			width:293px;
			margin:0px 0px;
		}
		
		#sidebar a#discountCta {
			background:url(../../images/layout/sidebarDiscountCtaBg.jpg) top left no-repeat;
			height:42px;
			width:58px;
			padding:118px 0px 0px 235px;
			text-decoration:none;
			font-size:1.1em;
			line-height:1.0em;
			color: #9eacca;
		}
		
			#sidebar a#discountCta span {
				display:block;
			}
			
			#sidebar a#discountCta:hover {text-decoration:underline;}
		
		#sidebar p {
			font-size:1.6em;
			color: #2B4087;
			line-height:1.0em;
			padding:3px 0px 0px 12px;
			font-weight:bold;
		}
		
			#sidebar p span {
				color: #FF9208;
			}
						
			
#contact #sidebar a#discountCta {display:none;}			
#gallery #sidebar a#galleryCta {display:none;}
		
/* Header Styles
--------------------------------------------------------------- */

#header {
	clear: both;
	width: 960px;
	position: absolute;
	z-index: 10;
	top: 0px;
	left: 0px;
	background:url(../../images/layout/headerBg.jpg) top center no-repeat #fff;
	padding:35px 0px 0px 0px;
}

	#logo {
		width: 241px;
		height: 108px;
		float: left;		
	}
	
	#cta-top-right {
		width: 600px;
		float: right;
		padding: 27px 22px 0px 0px;
		text-align: right;	
	}
	
		#cta-top-right p {
			color: #4968ae;
			font-size: 2.0em;
		}
	
		#cta-top-right p.phone {
			font-size: 2.8em;
			line-height:1.4em;
			color: #ff8a00;
			padding-top:0px;
		}
		
			#cta-top-right p.phone span {letter-spacing:-2px;}

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

#imgmain {
	z-index: 40;
	position: absolute;
	top: 190px;
	left: 0px;
}

#runnerMessage {
	position:absolute;
	top:198px;
	left:20px;
	width:600px;
	padding:0px 0px 0px 10px;
	margin:0px;
	z-index:50;
}

	#runnerMessage p {
		padding:8px 0px 0px 3px;
		margin:0px;
		color: #4a6096;
		font-size:3.8em;
		font-weight:bold;
		line-height:1.0em;
		z-index:-1;
	}
	
		#runnerMessage p span {
			display:block;
			}
	
		#runnerMessage p.secondLine {
			font-size:2.5em;
			color: #ff9208;
			padding:8px 0px 0px 3px;
		}
		
		#default #runnerMessage p.secondLine {display:none;}
		
		#runnerMessage p.phoneTag {
			font-size:1.5em;
			padding:10px 0px 0px 3px;
			color: #bbb8b8;
		}
		
/* Special Offers Styles
--------------------------------------------------------------- */		
ul#specialOffers {
	float:left;
	clear:both;
	width:930px;
	height:131px;
	padding:70px 0px 20px 30px;
	margin:0px;
	background:url(../../images/layout/specialOffersBg.jpg) top left no-repeat #fff;
}

	ul#specialOffers li {
		float:left;
		list-style:none;
		padding:0px;
		margin:0px;
		width:300px;
		border-right:1px solid #97b8e1;
	}
	
	ul#specialOffers li.noBorder {border:none;}
	
		ul#specialOffers li img {
			float:left;
			padding:0px 5px 0px 5px;
			margin:0px;
		}
		
			ul#specialOffers li span.largeText {
				font-size:2.4em;
				display:block;
			}
			
			ul#specialOffers li span.topLine {
				display:block;
				color: #ff9208;
				font-size:1.8em;
				line-height:1.6em;
			}
			
			ul#specialOffers li span.textRight {
				float:right;
				padding:0px 20px 0px 0px;
				color: #9eacca;
				}
		
		ul#specialOffers li a {
			float:left;
			padding:0px;
			margin:0px;		
			width:300px;
			text-decoration:none;
			color: #2b4087;
		}
		
			ul#specialOffers li a:hover span.largeText {
				color: #97b8e1;
			}
			
			ul#specialOffers li.noBorder span.textRight {
				font-size:1.6em;
				color: #2b4087;
			}
		
/* Buckets Styles
--------------------------------------------------------------- */

ul#buckets {
	position:absolute;
	top:398px;
	left:0px;
	width:960px;
	background:url(../../images/layout/contentContainerBg.jpg) top left repeat-y;
	padding:0px 0px 0px 15px;
	display:none;
}

	ul#buckets li {
		float:left;
		padding:0px;
		margin:0px;
		list-style:none;		
	}
	
		ul#buckets li a {
			float:left;
			position:relative;
			display:inline;
			width:260px;
			height:80px;
			padding:180px 20px 0px 20px;
			margin:0px 13px 0px 0px;
			text-decoration:none;
			line-height:1.6em;
			color: #636363;
		}
		
			ul#buckets li a.upOverDoors-a {background:url(../../images/layout/bucketsUpOverDoorsBg.jpg) top left no-repeat;}
			ul#buckets li a.rollerDoors-a {background:url(../../images/layout/bucketsRollerDoorsBg.jpg) top left no-repeat;}
			ul#buckets li a.automatedDoors-a {background:url(../../images/layout/bucketsAutomatedDoorsBg.jpg) top left no-repeat;}
			
		ul#buckets li a span.title {
			position:absolute;
			top:7px;
			left:20px;
			color: #fff;
			font-size:1.6em;
			line-height:1.6em;
		}
		
		ul#buckets li a span.more {
			display:block;
			padding:1px 0px 0px 0px;
			color: #ff8a00;
			text-decoration:underline;
			text-align:right;
		}
		
		ul#buckets li a:hover span.more {text-decoration:none;}
		
#index ul#buckets {display:block;}		

/* Horizontal Navigation Styles
--------------------------------------------------------------- */

#navigation {
	width: 960px;
	height: 40px;
	z-index: 1;
	position: absolute;
	left: 0px;
	top: 150px;
	background:url(../../images/layout/navBg.jpg) top left no-repeat;
}

	#navigation ul {
		margin: 0px;
		padding: 0px 0px 0px 20px;
		width:920px;
	}
	
		#navigation ul li {
			display: inline;
			list-style: none;
		}
			  
			#navigation ul li a {
				float: left;
				border-right: 1px solid #d2bf22;
				color: #fff;
				text-decoration: none;
				text-align:center;
				padding: 7px 8px 7px 9px;
				font-size: 1.1em;
				margin:0px;
				line-height:1.0em;
			}

				#navigation ul li a.contact-a {
					border-right: none;
					padding-left:16px;
					padding-right:15px;
				}
				
				#navigation ul li a.index-a,
				#navigation ul li a.contact-a {
					padding-top:13px;
					padding-bottom:13px;
				}				
				
					#navigation ul li a span {
						display:block;
						font-size:0.75em;
						letter-spacing: 1px;
						color:#ddd;
					}

				#navigation ul li a:hover {
					background: #485faf;
					color: #fff;
				}

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

#outerFooter {
	float: left;
	width: 100%;
	background:url(../../images/layout/footerBg.jpg) top left repeat-x #234084;
}

#footer {
	clear: both;
	width: 960px;
	color: #fff;
	margin: 0px auto;
	padding: 15px 0px 10px 0px;
	font-size: 1.2em;
}

	#footer .index-a,
	#footer .contact-a {
		display: none;
	}

	#footer h2 {
		color: #FF8602;
		padding: 3px 5px;
		font-size: 1.4em;
	}
		
	#footer li {
		list-style: none;
	}
	
	#footer a {
		white-space: nowrap;
		color: #fff !important;
		text-decoration: none;
	}
		
		#footer a:hover {
			text-decoration: underline;
		}

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

	#footer #footer-services {
		float: left;
		width: 280px;
		margin: 0px;
	}
	
		#footer #footer-services ul li {
			float: left;
		}
	
			#footer #footer-services ul li a {
				float: left;
				width: 230px;
				padding: 3px 5px;
				color: #FC0;
			}
		
/* Footer Areas Styles
--------------------------------------------------------------- */	

	#footer #footer-areas {
		float: left;
		width: 280px;
	}
	
		#footer #footer-areas ul {
			float: left;
			width: 100px;
		}
	
		#footer #footer-areas ul li {
			float: left;
			width: 90px;
			padding: 3px 5px;
		}
		
/* Footer Address Styles
--------------------------------------------------------------- */	

	#footer #footer-address {
		float: left;
		width: 200px;
	}
		
		#footer #footer-address p {
			line-height: 20px;
			padding: 3px 5px;
		}
				
/* Footer Help & Advice
--------------------------------------------------------------- */	

	#footer #footer-help {
		float: left;
		width: 165px;
	}
		
			#footer #footer-help ul li {
				float: left;
			}
					
			#footer #footer-help ul li a {
				float: left;
				width: 155px;
				padding: 3px 5px;
				color: #FC0;
			}
		
		#footer #footer-help p {
			line-height: 20px;
			padding: 3px 5px;
		}
		
		#footer #footer-help .bottomLink {
			margin-bottom: 5px;
		}
		
		
/* Footer Bottom Styles
--------------------------------------------------------------- */	

	#footer #footer-bottom {
		width: 940px;
		float: left;
		margin:10px 0px 0px 0px;
		text-align: center;
		color: #ccc;
	}

/* Float Styles
--------------------------------------------------------------- */

.left, .img-left {
	float: left;
}

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

.right, .img-right {
	float: right;
} 

	.img-right {
		margin: 10px 0px 10px 10px;
	}

	
/* Generic Styles
--------------------------------------------------------------- */

.clearfix {
	clear: both;
}