/* CSS Document */

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

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

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


body#index {background:url(../../images/layout/mainBg.jpg) top left repeat-x #F6F6F6;}
body {
	text-align: left;
	font-size: 62.5%;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	background: url(../../images/layout/bodyBg.jpg) top left repeat-x #F6F6F6;
	margin: 0px;
}

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 Styles
--------------------------------------------------------------- */

h1 {
	font-size: 2.3em;
	font-weight: normal;
	color: #000;
	text-transform:uppercase;
	color: #0078ab;
}

h2 {
	font-size: 1.6em;
	font-weight: normal;
	color: #333;
	text-transform:uppercase;
}

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

/* 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;
		padding-top:450px;
	}
	
#index #contentContainer {padding-top:620px;}	
	
/* Main Styles
--------------------------------------------------------------- */

		#main {
			float: left;
			width: 560px;
			padding: 10px 10px 10px 10px;
		}
		
			#main p {
				margin: 10px 0px 10px 0px;
				font-size: 1.1em;
				line-height:1.5em;
			}
			
			#main p.first {
				font-weight:bold;
				color: #333;
				}
			
			#main ul {
				font-size: 1.1em;
				padding: 3px 0px;
			}
			
				#main ul li {
					padding: 6px 0px 6px 30px;
					list-style: none;
					line-height:1.5em;
					background: url(../../images/misc/tick.jpg) left center no-repeat;
				}
				
				
			#main #bottomCta {
				display:block;
				float:left;
				position:relative;
				background:url(../../images/layout/bottomCtaBg.jpg) top left no-repeat;
				width: 527px;
				height:103px;
				}	
				
				#main #bottomCta a {
					position:absolute;
					z-index:100;
					top:0px;
					left:0px;
					font-weight:bold;
					font-size:1.4em;
					text-transform:uppercase;	
					text-decoration:none;
					color: #000;				
					padding:66px 0px 0px 113px;
					}
					
					#main #bottomCta a:hover {
						color: #333;
						}
						
		#main .javascriptOff {
			color: #666;
			} 										
						

/* Sidebar/CTA Styles
--------------------------------------------------------------- */
		
		#sidebar {
			float: right;
			width: 380px;
			padding:20px 0px 0px 0px;
		}
		
		#sidebar .cta {
			float:right;
			position:relative;
			padding:0px;
			margin:0px 0px 20px 0px;
			}
			
		#sidebar #systemUpgradeCta {
			width:380px;
			height:135px;
			background:url(../../images/layout/systemUpgradesCta.jpg) top left no-repeat;
			}	
			
			#sidebar #systemUpgradeCta p {
				position:absolute;
				top:83px;
				left:37px;
				color: #fede2f;
				font-size:2.4em;
				font-weight:bold;
				}
				
		#sidebar #personalTailoredCta {
			width:380px;
			height:135px;
			background:url(../../images/layout/personalTailoredCta.jpg) top left no-repeat;
			}
			
			#sidebar #personalTailoredCta p {
				position:absolute;
				top:83px;
				left:157px;
				color: #fff;
				font-size:2.4em;
				font-weight:bold;
				}	
				
	#safes #sidebar #securikeyCta,
	#burglar-alarms #sidebar #securikeyCta {display:block;}			
	
	#sidebar #securikeyCta {
		width: 380px;
		height:	77px;
		background:url(../../images/layout/securikeyCtaBg.jpg) top left no-repeat;
		display:none;
		}
		
		#sidebar #securikeyCta a {
			position:absolute;
			top:0px;
			left:0px;
			padding:26px 0px 0px 240px;
			font-weight:bold;
			text-decoration:none;
			text-transform:uppercase;			
			color: #000;
			display:none;
			}
			
			#sidebar #securikeyCta a:hover { color: #666;}
			
		#safes #sidebar #securikeyCta a.securikey {display:block;}
		#burglar-alarms #sidebar #securikeyCta a.safes {display:block;}	
				
		
/* Header Styles
--------------------------------------------------------------- */

#header {
	clear: both;
	width: 960px;
	height: 130px;
	position: absolute;
	z-index: 10;
	top: 0px;
	left: 0px;
}

	#logo {
		width: 208px;
		height: 130px;
		float: left;
	}
	
	#cta-top-right {
		width: 600px;
		float: right;
		padding: 45px 85px 0px 0px;
		text-align: right;
		font-size: 1.6em;
		height:120px;
		background:url(../../images/layout/ctaTopRightBg.jpg) top right no-repeat;
		color: #9d9c9c;
		line-height:1.4em;
	}
	
		#cta-top-right .phone {
			font-size: 2.2em;
			color: #e67f07;
			letter-spacing:-1px;
		}

/* Buckets Styles
--------------------------------------------------------------- */
#index #buckets {display:block;}
#buckets {
	position:absolute;
	top:450px;
	left:0px;
	width:960px;
	z-index:120;
	display:none;
	}
	
	#buckets ul {
		float:left;
		padding:0px;
		margin:0px;
		}
		
		#buckets ul li {
			float:left;
			position:relative;
			padding:0px;
			margin:0px;
			width:229px;
			height:120px;
			padding:30px 80px 0px 0px;
			margin:0px 10px 0px 0px;
			list-style:none;
			line-height:1.5em;
			border-right:1px solid #eee;
			display:inline;
			}
			
			#buckets ul li.burglar-alarms {background:url(../../images/layout/alarmsBucketsBg.jpg) 223px 20px no-repeat;}
			#buckets ul li.fire-alarms {background:url(../../images/layout/fireBucketsBg.jpg) 230px 20px no-repeat;}
			#buckets ul li.cctv {background:url(../../images/layout/cctvBucketsBg.jpg) 230px 20px no-repeat; border:none;}
			
			#buckets ul li a {
				position:absolute;
				top:0px;
				left:0px;
				display:block;
				font-size:1.6em;
				font-weight:bold;
				text-transform:uppercase;
				color: #0078ab;
				width:300px;
				height:150px;
				text-decoration:none;
				}
				
				#buckets ul li a:hover {color: #174559;}
				
				#buckets ul li span {					
					display:block;
					text-transform:uppercase;
					text-decoration:none;
					font-weight:bold;
					color: #fff;
					background: #f5950c;
					width:100px;
					padding:3px 5px 3px 8px;
					margin:10px 0px 0px 0px;
					}
					
					
		

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

#imgmain {
	z-index: 100;
	position: absolute;
	top: 177px;
	left: 0px;
}

#imgmainContainer {
	position:absolute;
	top:177px;
	left:0px;
	width:960px;
	z-index:110;
	}
	
	#imgmainContainerInner {
		float:left;
		position:relative;
		padding:0px;
		margin:0px;		
		}
		
		#imgmainContainerInner p {
			text-transform:uppercase;
			position:absolute;
			top:0px;
			left:0px;
			}
		
		#index #imgmainContainerInner p.topLine {font-size:3.6em; left:210px;}
		#imgmainContainerInner p.topLine {
			top:40px;
			left:250px;
			font-size:3.0em;
			width:600px;
			color: #958989;
			font-weight:bold;
			}
		
		#index #imgmainContainerInner p.bottomLine {font-size:5.0em; top:80px; left:230px;}	
		#imgmainContainerInner p.bottomLine {
			top:80px;
			left:320px;
			font-size:4.0em;
			width:600px;
			font-weight:bold;
			}	

		#index #imgmainContainerInner p.callTag,
		#contact #imgmainContainerInner p.callTag {left:320px;}
		#imgmainContainerInner p.callTag {
			top:175px;
			left:440px;
			text-transform:none;
			font-size:1.8em;
			width:300px;
			}
		
		#index #imgmainContainerInner p.phonenumber,
		#contact #imgmainContainerInner p.phonenumber {left: 420px;}
		#imgmainContainerInner p.phonenumber {
			top:195px;
			left:530px;
			width:400px;
			font-size:2.6em;
			color: #e67d02;
			}

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

#navigation {
	width: 960px;
	z-index: 11;
	position: absolute;
	left: 0px;
	top: 135px;
}

	#navigation ul {
		margin: 0px;
		padding: 0px;
	}
	
		#navigation ul li {
			display: inline;
			list-style: none;
		}
			  
			#navigation ul li a {
				float: left;
				border-right:1px solid #4e4e4e;
				border-left:1px solid #343434;
				color: #fff;
				text-decoration: none;
				padding: 14px 17px 10px 16px;
				font-size: 1.1em;
				font-weight:bold;
				text-transform:uppercase;
				letter-spacing:-1px;
			}

				#navigation ul li a.contact-a {border-right: none;}				
				#navigation ul li a.index-a {border-left:none;}
				#navigation ul li a:hover {color: #FFEB96;}
				
				
#fire-alarm-installation #navigation ul li a.fire-alarms-a,
#fire-alarm-maintenance #navigation ul li a.fire-alarms-a,
#commercial-fire-alarms #navigation ul li a.fire-alarms-a,
#covert-cctv-systems #navigation ul li a.cctv-a,
#door-entry-systems #navigation ul li a.access-control-a,
#security-swipe-cards #navigation ul li a.access-control-a {color: #f1980e;}

/* Dropdown Styles
--------------------------------------------------------------- */

.dropdown {
	position:absolute;
	top:0px;
	left:0px;
	z-index:200;
	display:none;
	}
	
	.drodpwon ul {
		padding:0px;
		margin:0px;
		}
		
		.dropdown ul li {
			list-style:none;
			padding:0px;
			margin:0px;
			}
			
			.dropdown ul li a {
				display:block;
				color: #fff;
				text-decoration:none;
				font-weight:bold;
				font-size:1.3em;
				width:180px;
				padding:13px 0px 0px 10px;
				margin:0px;
				background:url(../../images/layout/dropdownBg.jpg) top left repeat-x;
				height:30px;
				text-transform:uppercase;
				}
				
				.dropdown ul li a:hover {color: #FFEB96;}
				
#fireAlarmsSN {
	top:179px;
	left:73px;
	}
	
#cctvSN	{
	top:179px;
	left:569px;
	}
	
#accessControlSystemsSN {
	top:179px;
	left:634px;
	}	

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

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

#footer {
	clear: both;
	width: 960px;
	height:285px;
	background:url(../../images/layout/footerBg.jpg) top left no-repeat;
	color: #fff;
	font-weight:bold;
	text-transform:uppercase;
	margin: 0px auto;
	padding: 60px 0px 10px 0px;
	font-size: 1.2em;
}

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

	#footer h2 {
		font-weight: bold;
		color: #111;
		padding: 3px 5px;
		font-size: 1.2em;
		font-style: italic;
	}
		
	#footer li {
		list-style: none;
	}
	
	#footer a {
		white-space: nowrap;
		color: #aaa;
		text-decoration: none;
	}
		
		#footer a:hover {
			color: #ffcc00;
			text-decoration: underline;
		}

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

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

	#footer #footer-areas {
		float: left;
		padding:0px 0px 0px 40px;
	}
	
		#footer #footer-areas ul {
			float: left;
			width: 150px;
		}
	
		#footer #footer-areas ul li {
			float: left;
			width: 130px;
			padding: 3px 5px;
		}
		
/* Footer Address Styles
--------------------------------------------------------------- */	

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

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

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

/* 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;
}