/* CSS Document */

/* 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: #000000;
	margin: 0px;
	background: url(../../images/layout/body-bg.png) repeat-y top center #fff;
}

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, h2, h3 {
	font-size: 2.3em;
	font-weight: normal;
}

h1 {
	padding:0px 0px 15px 0px;
}

h2 {
	font-size: 1.6em;
	font-weight: bold;
	color: #45c0eb;
}

h3 {
	font-size: 1.3em;
}
	

/* 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: #fff;
		border-top: 207px solid #fff;
		overflow: auto;
	}
	
/* Main Index Styles
--------------------------------------------------------------- */

	#index #maintext {
		margin-top:242px;
	}
			
	#index #maintop {
		position: absolute;
		top: 7px;
		left: 10px;
	}	
	
	#index #maintext {
		width: 640px;
		padding: 5px 10px;
	}
			
	#index #main-cta-top {
		background: url(../../images/layout/locksmith-bg.jpg) no-repeat;
		width: 662px;
		height: 234px;
		margin: 8px 0px 0px 5px;
		float: left;
	}
						
		#index #main-cta-top p {
			width: 280px;
			padding: 0px 0px 0px 15px;
			font-size: 1.2em;
			line-height: 1.3em;
			color: #006699;
		}
						
		#index #main-cta-top .dummyh1 {
			padding: 10px 0px 0px 15px;
			font-size: 2em;
			font-weight: bold;
			color: #000;
			text-transform: uppercase;
		}	
		
						
		#index #main-cta-top a {
			color: #44c0eb;
			text-decoration: none;
		}
						
			#index #main-cta-top a:hover {
				text-decoration: underline;
			}
						
			#index #main-cta-top img {
				float: right;	
			}	
			
			#main-cta-top ul {
				line-height:12px;
			}
			
			#main-cta-top ul li {
				font-size:0.9em;
				margin:0px 0px 0px 40px;
				}								
						
	#index #subnav {
		background: url(../../images/layout/nationwidecoverage.jpg) no-repeat;
		position: absolute;
		top: 240px;
		left: 10px;
		width: 660px;
		height: 177px;
	}	
					
		
					
/* Main Other Pages Styles
--------------------------------------------------------------- */

		#main {
			position: relative;
			float: left;
			width: 630px;
			padding: 30px 20px 10px 20px;
		}
		
			#main p {
				margin: 5px 0px 5px 0px;
				font-size: 1.2em;
				line-height: 22px;
			}
			
			#main ul {
				font-size: 1.2em;
			}
			
				#main ul li {
					padding: 4px 0px;
				}
				
			#main ul.errorlist {
				padding: 0px 0px 0px 20px;
				list-style: none;
			}	
			
			#main h1 {
				font-size: 2em;
				font-weight: bold;
			}	
			
			#main h1 span {
				font-weight: bold;
				color: #44c0eb;
			}
			
				#maintext {
					width: 350px;
				}
							
			#callus {
				padding: 10px 0px 10px 0px;
				font-size: 1.8em;
				margin: 0px 10px;
				font-family: "Trebuchet MS", Helvetica, Jamrul, sans-serif;
				border-bottom: #d4d4d4 solid 1px;
				border-top: #d4d4d4 solid 1px;
			}
			
			#callus span {
				color: #45c0eb;
			}							
						
				#subnav {
					background: url(../../images/layout/nationwidecoverage.jpg) no-repeat;
					width: 660px;
					height: 177px;
					margin: 10px 0px 0px 0px;
				}	
					
					#subnav li {
						list-style: none;
					}	
					
					#subnav a {
						background: url(../../images/layout/button.jpg) no-repeat;
						font-family: "Trebuchet MS", Helvetica, Jamrul, sans-serif;
						color: #000;
						width: 210px;
						height: 28px;
						display: block;
						text-align: center;
						padding: 7px 2px 0px 2px;
						font-weight: bold;
					}
						
					#subnav a:hover {
						background: url(../../images/layout/button-hover.jpg) no-repeat;
						color: #fff;
					}
					
						.subnav-left {
							float: right;
						}		
					
						.subnav-right {
							float: right;
						}
					
#locksmith #maintop {
		background: url(../../images/layout/keys.jpg) no-repeat bottom right;
}						
	
#security-doors #maintop {
		background: url(../../images/layout/security-doors.jpg) no-repeat bottom right;
}

#security-locks #maintop {
		background: url(../../images/layout/security.jpg) no-repeat bottom right;
}	

#upvc #maintop {
		background: url(../../images/layout/upvc.jpg) no-repeat bottom right;
}

#patio #maintop {
		background: url(../../images/layout/patio.jpg) no-repeat bottom right;
}

#mortice #maintop {
		background: url(../../images/layout/mortice.jpg) no-repeat bottom right;
}	

#cylinder #maintop {
		background: url(../../images/layout/cylinder.jpg) no-repeat bottom right;
}

#contact #main {
			border: none;
}

#main .list {
	padding: 10px 0px 10px 30px;
}	
		
/* Sidebar/CTA Styles
--------------------------------------------------------------- */
		
		#sidebar {
			float: right;
			width: 265px;
			padding: 15px 3px 0px 0px;
		}
		
/* Logos bottom
--------------------------------------------------------------- */		

#logos-bottom {
	padding: 30px 0px 30px 190px;
	margin-left: auto;
	margin-right: auto;
}	
		
/* Header Styles
--------------------------------------------------------------- */

#header {
	width: 960px;
	height: 165px;
	position: absolute;
	z-index: 10;
	top: 0px;
	left: 0px;
	background: url(../../images/layout/header-bg.png) repeat-x;
}

	#logo {
		width: 104px;
		height: 165px;
		float: left;
		padding: 0px 0px 0px 20px;
	}
	
	#cta-top-right {
		float: left;
		padding: 50px 0px 0px 20px;
		text-align: left;
		height: 120px;
		font-size: 2.4em;
		font-weight: bold;
		color: #fff;
	}
	
		#cta-top-right .phone {
			font-size: 1.2em;
			color: #44c0eb;
		}
		
	#header-badge {
		width: 175px;
		height: 175px;
		background: url(../../images/layout/no1badge-bg.png) no-repeat;
		z-index: 100;
		position: absolute;
		top: 0px;
		right: 20px;
	}	
	
		#header-badge p {
			color: #fff;
			padding: 92px 0px 0px 0px;
			text-align: center;
			font-size: 1.8em;
			font-family: "Trebuchet MS", sans-serif; 
		}
		
			#header-badge p span {
				text-transform: uppercase;
			}	

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

#slideshow {
	width: 940px;
	height: 220px;
	position: absolute;
}
	
	#slideshow img {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 8;
	}
	
	#slideshow img.active {
		z-index: 10;
	}
	
	#slideshow img.last-active {
		z-index: 9;
	}


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

#navigation {
	width: 960px;
	height: 42px;
	z-index: 1;
	position: absolute;
	left: 0px;
	top: 165px;
	background: url(../../images/layout/nav-bg.png) repeat-x;
}

	#navigation ul {
		margin: 0px;
		padding: 0px;
	}
	
		#navigation ul li {
			display: inline;
			list-style: none;
		}
			  
			#navigation ul li a {
				height: 30px;
				float: left;
				color: #3d3d3d;
				text-decoration: none;
				padding: 12px 10px 0px 9px;
				font-size: 1.1em;
				font-family: "Trebuchet MS", Helvetica, Jamrul, sans-serif;
				font-weight: bold;
			}

				#navigation ul li a:hover {
					color: #44C0EB;
				}
				
#index #navigation .index-a,
#locksmith #navigation .locksmith-a,
#security-doors #navigation .doors-a,
#security-locks #navigation .locks-a,
#upvc #navigation .upvc-a,
#patio #navigation .patio-a,
#mortice #navigation .mortice-a,
#cylinder #navigation .cylinder-a,
#contact #navigation .contact-a {
	background:url(../../images/layout/nav-active-bg.png);
	color:#3d3d3d;
}

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

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

#footer {
	clear: both;
	width: 960px;
	color: #333;
	margin: 0px auto;
	padding-bottom: 10px;
	font-size: 1.2em;
	background: url(../../images/layout/footerbg.jpg) repeat-x;
}

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

	#footer h2 {
		font-weight: bold;
		margin: 0px;
		color: #44c0eb;
		padding: 3px 5px 3px 5px;
		font-family: "Trebuchet MS", Helvetica, Jamrul, sans-serif;
		font-size: 1.3em;
		text-transform: uppercase;
		width: 250px;
		margin: 0px 0px 7px 0px;
	}
		
	#footer li {
		list-style: none;
	}
	
	#footer p, #footer ul {
		margin: 0px;
		padding: 0px;
	}

	#footer a {
		white-space: nowrap;
		color: #0066CC;
		text-decoration: none;
	}
		
		#footer a:hover {
			color: #ffcc00;
			text-decoration: underline;
		}

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

	#footer #footer-services {
		float: left;
		width: 240px;
		padding: 0px 10px;
		margin: 0px 0px 0px -1px;
	}
	
		#footer #footer-services h2 {
			width: 260px;
		}
	
		#footer #footer-services ul li {
			float: left;
		}
	
			#footer #footer-services ul li a {
				float: left;
				width: 230px;
				padding: 3px 5px;
				border-bottom: 1px dotted #777;
			}
		
/* Footer Areas Styles
--------------------------------------------------------------- */	

	#footer #footer-areas {
		float: left;
		width: 310px;
	}
	
		#footer #footer-areas h2 {
			width: 300px;
		}
	
		#footer #footer-areas ul {
			float: left;
			width: 155px;
		}
	
		#footer #footer-areas ul li {
			float: left;
			width: 125px;
			padding: 3px 5px;
			border-bottom: 1px dotted #777;
		}
		
/* Footer Address Styles
--------------------------------------------------------------- */	

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

	#footer #footer-help {
		float: right;
		width: 175px;
	}
	
		#footer #footer-help h2 {
			width: 165px;
		}
		
			#footer #footer-help ul li {
				float: left;
			}
					
			#footer #footer-help ul li a {
				float: left;
				width: 160px;
				padding: 3px 5px;
				border-bottom: 1px dotted #777;
			}
		
		#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;
		clear: both;
		margin: 10px 0px 0px 0px;
		text-align: center;
	}

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

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

.img-right {
	float: right;
	margin: 10px 0px 10px 10px;
}
	
/* Generic Styles
--------------------------------------------------------------- */

.clearfix {
	clear: both;
}