/* ========================================================================================
C&M Fire Alarms: Main Layout 
Version:1.0
Author: Raphael Marsh
Email: raphael@onbrand.co.uk
Last Updated: 18 November 2011
=========================================================================================== */

/* STANDARD FORMATTING 
=========================================================================================== */
* {
	margin: 0;
 	padding: 0;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:63.3%;
	margin:0;
	padding:15px 0;
	min-width:784px;
	text-align:left;
	line-height:140%;                         
	background-color:#878787;
	background-image:url(../images/generic/body-bg.gif);
	background-position:top;
	background-repeat:repeat-x;
}


/* Generic 
=========================================================================================== */
h1 {
	font-size: 2.4em; margin:0;
}
h2 {
	font-size: 2.0em; margin:0;
}
h3 {
	font-size: 1.6em; margin:0;
}
img {
	border:none;
}
p {
	color:#7c7c7c; font-size:110%; margin:0;
}
	p a {
		color:#7c7c7c;
	}
ul {
	list-style-type:none; margin:0; padding:0;
}
a {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
a:active {
	text-decoration:underline;
}
.left {
	float:left;
}
.right {
	float:right;
}
hr {
	float:left; position:absolute; border:0; height:1px;
}

/* Structure 
=========================================================================================== */
div#wrapper {
	width: 986px; margin: auto; text-align: left;
}
#branding {
	height: 80px;
	background:#fff url(../images/generic/branding-bg.gif) top no-repeat;
}
	#branding .logo {
		float:left; position:relative; top:7px; left:8px;
	}
	#branding .contact {
		float:right; position:relative; top:28px; right:17px; border:0;
	}

#pageContent {
	width:962px; background:#f0f0f0; margin:0 auto; padding:12px;
}
#header {
	height:150px; z-index:50;
	border-left:#dddddd 1px solid; border-right:#dddddd 1px solid;
}
.clear {
	clear: both; text-indent: -9999px;
}	

/* Layout
=========================================================================================== */
#mainColumn {
	float:left; width:460px; margin-left:13px;
}
#sideColumn {
	float:right; width:222px;
}
	#mainColumn p {
		color:#7a7a7a; font-size:120%; line-height:150%;
	}
	#mainColumn h1 {
		font-size:210%; width:auto; line-height:100%; font-weight:normal; color:#686868; padding-bottom:4px; 
		margin-bottom:20px; border-bottom:#dcdee2 1px solid;
	}
	#mainColumn h2 {
		font-size:170%; font-weight:normal; color:#686868; margin-bottom:24px;
	}
		#mainColumn h2.homeTitle {
			text-indent:-5000em; overflow:hidden;
			width:386px; height:25px; background:url(../images/generic/home-body-title.gif);
		}		
	#mainColumn ul {
		float:left; width:45%; list-style:disc; margin:0 10px 0 12px;
	}
		#mainColumn ul li {
			color:#bc1500; font-size:120%; line-height:140%; margin-bottom:4px;
		}
			#mainColumn ul li a {
				color:#bc1500;
			}
	#mainColumn a.all {
		color:#9e3471; font-size:120%; line-height:150%; margin:12px; 
		font-weight:bold; 
	}	
	

		
	#quotebox blockquote {
		float:right; width:580px;
		text-align: center;
		margin: 0;
		font-family: georgia, serif;
		font-size: 1.4em;
		letter-spacing: -1px;
		line-height: 1.2em;
		color: #555;
		background:#eeeeee url(../images/generic/fi_top.gif) top left no-repeat;
}
	#quotebox blockquote strong {
  		color: #bc1500 !important;
	}
	#quotebox #quote {
  		padding:20px; margin-right:10px;
  		background: url(../images/generic/fi_bottom.gif) right bottom no-repeat;
	}
	#quotebox #author {
		font-family:Arial, Helvetica, sans-serif; margin: 0; padding: 0 0 20px 0; color: #999; font-size:90%; letter-spacing:0;
  		background: url(../images/generic/hpquote_bottom.gif) no-repeat bottom;
	}
	

/* Primary Navigation
=========================================================================================== */
#primaryNav {
	position:relative; width:984px; height:38px; 
	border-left:#dddddd 1px solid; border-right:#dddddd 1px solid;
	background:url(../images/generic/primaryNav-bg.gif) top repeat-x;
}
#navigation {
	position:absolute; z-index:999; list-style:none; 
}

	#navigation li {
		float:left; font-size:130%; text-transform:uppercase; border-right:#94bacf 1px solid;
	}
		#navigation li a {
			float:left; display:block; text-transform:uppercase; font-weight:bold;
			height:2.4em; /* Targets IE 5.5 only */
			hei\ght:1.9em; /* All Other Browsers */
			padding:0.9em 1.7em 0.1em 1.6em; color:#fff; text-decoration:none; overflow:hidden;
			background:url(../images/generic/primaryNav-button.gif) repeat-x;
		}
	#navigation li.active {
		background-position:100% -38px;
		border-right:#cc2f1c 1px solid;
	}
		#navigation li.active a {
			color:#fff; background-position:0% -38px;
		}
			#navigation li:hover, #navigation li.ieHover {
				background-position:100% -150px;
				border-right:#cc2f1c 1px solid;
			}
			#navigation li:hover a, #navigation li.ieHover a {
				color:#fff; background-position:0% -38px;
			}

		#navigation li a.homepage {
			width:47px; height:37px; padding:0; margin:0; overflow:hidden;
			background:url(../images/generic/homepage-icon.gif) no-repeat;
		}
			#navigation li a.homepage.active, #navigation li a.homepage:hover {
				width:47px; height:37px; padding:0; margin:0;
				background:url(../images/generic/homepage-icon2.gif) no-repeat;
			}

/* Main Image Control 
=========================================================================================== */
#header.homepage {
	background:#fff url(../images/generic/homepage-header.jpg) top left no-repeat;
}
#header.headerimage1 {
	background:#fff url(../images/generic/headerimage1.jpg) top left no-repeat;
}
#header.headerimage2 {
	background:#fff url(../images/generic/headerimage2.jpg) top left no-repeat;
}
#header.headerimage3 {
	background:#fff url(../images/generic/headerimage3.jpg) top left no-repeat;
}
#header.headerimage4 {
	background:#fff url(../images/generic/headerimage4.jpg) top left no-repeat;
}
#header.headerimage5 {
	background:#fff url(../images/generic/headerimage5.jpg) top left no-repeat;
}
#header.headerimage6 {
	background:#fff url(../images/generic/headerimage6.jpg) top left no-repeat;
}
#header.headerimage7 {
	background:#fff url(../images/generic/headerimage7.jpg) top left no-repeat;
}
#header.generic {
	background:#fff url(../images/generic/generic-header.jpg) top left no-repeat;
}


/* Feature Panels
=========================================================================================== */
.panel-holder {
	float:left; width:984px; border-left:#dddddd 1px solid; 
	background:#fff; border-right:#dddddd 1px solid;
}
.feature-panel {
	float:left; position:relative; width:326px; margin-right:3px; overflow:hidden;
	background:#7fabc4 url(../images/generic/panel-blend.gif) repeat-y; height:175px;
}
	.end {
		margin-right:0 !important;
	}

	.feature-panel h3 {
		padding-bottom:4px; margin-bottom:10px; text-indent:-5000em; overflow:hidden; border-bottom:#97bbcf 1px solid;
	}
		.feature-panel h3.newsPanel {
			height:17px; background:url(../images/generic/news-panel-title.gif) no-repeat;
		}
		.feature-panel h3.servPanel {
			height:17px; background:url(../images/generic/services-panel-title.gif) no-repeat;
		}
		.feature-panel h3.featPanel {
			height:17px; background:url(../images/generic/featured-panel-title.gif) no-repeat;
		}
	
	.feature-panel .contents {
		float:left; margin:12px 14px 0 14px; width:90%;
	}
		.feature-panel .contents p {
			color:#fff; font-size:110%; line-height:140%;
		}
			.feature-panel .contents p a {
				color:#fff; font-weight:bold;
			}
			.feature-panel .contents p.newsText {
				line-height:120%;
			}
			.feature-panel .contents p.spacer {
				margin-top:10px;
			}

	.feature-panel .contents ul {
		float:left; width:45%; margin:0 5px 0 12px; list-style:disc; font-size:110%; display:block;
	}
		.feature-panel .contents ul li {
			color:#fff; font-weight:bold; line-height:140%; margin-bottom:8px;
		}

/* Menu Box 
=========================================================================================== */
.menu-box {
	float:left; position:relative; display:inline; width:430px; border:#e5e5da 3px solid; padding:10px 7px; margin:5px; height:170px;
	background:#ffffff url(../images/generic/cat-box-bg.jpg) bottom right no-repeat;
}
	.menu-box:hover {
		border:#bc1500 3px solid;
	}
	.menu-box h2 {
		font-size:170%; line-height:150%; color:#bc1500; margin-bottom:6px;
	}		
	.menu-box p {
		font-size:120%; line-height:150%;
	}
	.menu-box p a {
		color:#bc1500; font-weight:bold; text-decoration:none;
	}
		.menu-box a:hover {
			text-decoration:underline;
		}
	.menu-box img {
		float:left; margin:10px; padding:1px; border:#e5e5da 2px solid;
	}
	.menu-box .layout {
		float:right; width:230px; display:block; margin:10px 10px 0 0;
	}



/* Homepage Panels
=========================================================================================== */
.halfPanel-outer {
	position:relative; width:476px;
	background:url(../images/generic/halfPanel-bot.gif) bottom no-repeat;
}
.halfPanel-inner {
	height:10px; background:url(../images/generic/halfPanel-top.gif) top no-repeat;
}
	.halfPanel-outer .contentArea {
		margin:8px 20px 20px 20px;
	}
	
		.contentArea ul {
			list-style:disc; margin:0 0 20px 20px;
		}
			.contentArea ul li {
				color:#7c7c7c; font-size:120%; line-height:150%; padding-bottom:4px;
			}

				
				
		.halfPanel-outer .contentArea h3 {
			font-size:170%; line-height:120%; font-weight:normal; color:#a5a5a5;
			text-transform:uppercase; border-bottom:#f8b2ba 1px solid; padding-bottom:8px; margin-bottom:14px;
		}
			.halfPanel-outer .contentArea h3.title1 {
				text-indent:-5000em; overflow:hidden; width:445px; height:53px;
				background:url(../images/generic/homePanel-title1.gif) top left no-repeat;
			}
			.halfPanel-outer .contentArea h3.title2 {
				text-indent:-5000em; overflow:hidden; width:445px; height:23px;
				background:url(../images/generic/homePanel-title2.gif) no-repeat;
			}
			.halfPanel-outer .contentArea h3.title3 {
				text-indent:-5000em; overflow:hidden; width:445px; height:20px;
				background:url(../images/generic/homePanel-title3.gif) no-repeat;
			}
	
		.halfPanel-outer .contentArea p {
			font-size:120%; line-height:150%; margin-bottom:11px;
		}
		
		.halfPanel-outer .contentArea img.feature {
			float:right; margin-left:50px; border:#e5e5e5 1px solid;
		}
		.halfPanel-outer .contentArea p.feature {
			font-size:130%; line-height:160%; font-weight:bold; color:#878787
		}
			.halfPanel-outer .contentArea p.feature a {
				color:#de3232;
			}


/* Content Page Panel
=========================================================================================== */
.fullPanel-outer {
	position:relative; width:962px;
	background:url(../images/generic/fullPanel-bot.gif) bottom no-repeat;
}
.fullPanel-inner {
	height:10px; background:url(../images/generic/fullPanel-top.gif) top no-repeat;
}
	.fullPanel-outer .contentArea {
		margin:8px 20px 20px 20px;
	}
	
	.fullPanel-outer .contentArea p {
			font-size:120%; line-height:150%;
	}
	.fullPanel-outer .contentArea h4 {
			font-size:130%; line-height:120%; color:#bc1500; margin-bottom:5px;
		}
	.fullPanel-outer .contentArea h3 {
		font-size:170%; line-height:120%; font-weight:normal; color:#a5a5a5; width:910px;
		text-transform:uppercase; border-bottom:#f8b2ba 1px solid; padding-bottom:14px; margin-bottom:20px;
	}
		.fullPanel-outer .contentArea h3.services {
			text-indent:-5000em; overflow:hidden; height:20px;
			background:url(../images/generic/services-title.gif) top left no-repeat;
		}
		.fullPanel-outer .contentArea h3.whychoose {
			text-indent:-5000em; overflow:hidden; height:24px; padding-bottom:10px;
			background:url(../images/generic/whychoose-title.gif) top left no-repeat;
		}
		.fullPanel-outer .contentArea h3.clients {
			text-indent:-5000em; overflow:hidden; height:20px;
			background:url(../images/generic/clients-title.gif) top left no-repeat;
		}
		.fullPanel-outer .contentArea h3.news {
			text-indent:-5000em; overflow:hidden; height:20px; margin:0;
			background:url(../images/generic/news-title.gif) top left no-repeat;
		}
		.fullPanel-outer .contentArea h3.casestudies {
			text-indent:-5000em; overflow:hidden; height:20px;
			background:url(../images/generic/casestudies-title.gif) top left no-repeat;
		}
		.fullPanel-outer .contentArea h3.reference {
			text-indent:-5000em; overflow:hidden; height:20px;
			background:url(../images/generic/reference-title.gif) top left no-repeat;
		}
		.fullPanel-outer .contentArea h3.contact {
			text-indent:-5000em; overflow:hidden; height:20px;
			background:url(../images/generic/contact-title.gif) top left no-repeat;
		}
		

/* Service Subnav
=========================================================================================== */
#subNav {
	float:left; width:260px;
}
	#subNav ul {
		list-style:square; margin:0 0 20px 20px;
	}
		#subNav ul li {
			color:#7c7c7c; font-size:120%; line-height:170%; padding-bottom:4px;
		}
			#subNav ul li a {
				color:#7c7c7c; text-decoration:none;
			}
				#subNav ul li a:hover, #subNav ul li a.active {
					color:#bc1500; text-decoration:underline;
				}
				
.subContent {
	float:right; width:650px;
}
	

/* Footer
=========================================================================================== */
#footer { 
	position:relative; clear:both; height:50px;
	background:url(../images/generic/footer-bg.png) bottom center no-repeat;;
} 
	#footer p {
		float:left; color:#5a5b5e; padding:0 14px; font-size:100%;
	}
		#footer ul {
			float:right; position:absolute; right:0; padding:0 10px;
		}
			#footer ul li {
				float:left; position:relative; font-size:100%; border-left:#999 1px solid;
			}
				#footer ul li.end {
					border-left:none;
				}
				#footer ul li a {
					padding:0 8px; color:#5a5b5e;
				}