@charset "utf-8";
/* Temporary CSS for CAV's temporary page */

/* IE 6 hack even though few people still use IE 6 (but the hack is easy) */

* html #footer {
	height:1px;
}
/* Resets */

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

/* General styling */

body, html {
	color: #FFF;
	background: #8C7D6D url(../images/background.jpg) repeat-x fixed 0 0;
}

p {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 18px;
}

h1, h2, h3 {
	margin:0px 0px 15px 0px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	line-height: 150%;
}

h2, h3 {
	color: #151F21;
}

#wrap {
	position: relative;
	width: 877px;
	padding: 0px;
	left: 12px;
	background: #53797D url(../images/background-wrap.jpg) repeat-x;
	border: #89C5E1 1px solid;
}

#dropshadow {
	width: 904px;
	margin: 0 auto;
	background: url(../images/background-dropshadowWide.png) repeat-y;	
}

#header {
	background: #BBD5DC url(../images/header-backgroundWide.jpg) repeat-x;
	height: 91px;
	padding: 0px 20px;
}

/* For two column layouts */

#main {
	float: left;
	width: 230px;
	padding: 20px;
	background: #5D848D inherit;
}

	#main ul li {
		font-family: Tahoma, Geneva, sans-serif;
		color: #F7E3CB;
		line-height: 150%;
	}

#sidebar {
	float: right;
	width: 530px;
	padding: 20px;
	background: #5D848D inherit;
}

	#sidebar a {
		color: #193370;
	}

		#sidebar a:hover {
			color: #FFF;
		}

	#sidebar ul li {
		font-family: Tahoma, Geneva, sans-serif;
		color: #F7E3CB;
		line-height: 150%;
	}

.images img {
	margin: 10px 0px 25px 0px;
}

/* End two column layouts */

/* For one column layouts */

div#container {
	margin: 0 auto;
	overflow: hidden;
	width: 840px;
}

/* End one column layout */

p.labeltext {
	margin: -23px 0px 0px 0px;
	font: Tahoma, Geneva, sans-serif;
	color: #F7E3CB;
	font-size: 11px;
}

#footer {
	width: 904px;
	margin: 10px auto 0px auto;
}

#footer-dropshadow {
	margin: 0 auto;
	width: 900px;
	height: 15px;
	background: #8C7D6D url(../images/footer-dropshadowWide.png) no-repeat;
}

	#footer p {
		margin: 0px;
		text-align: center;
		color: #F7E3CB;
		font-size: 11px;
		font-family: Verdana, Geneva, sans-serif;
		line-height: 18px;
	}

.footer-leader {
	font-weight: bolder;
}

/* Always use to clear out divs inside #wrapper */
.quickclear {
	clear: both;
}

/* Primary navigation styling; meant to accompany the "lava" JS script */

#lava {
	/* you must set it to relative, so that you can use absolute position for children elements */
	position:relative; 
	text-align:center;
	background: #8F806E url(../images/navWide.jpg) repeat-x;
	border-top: #89C5E1 solid 1px;
	border-bottom: #89C5E1 solid 1px;
	height: 20px;
	width: 875px;
}

	#lava ul {
		/* remove the list style and spaces*/
		margin:0; 
		padding:0; 
		list-style:none; 
				
		/* position absolute so that z-index can be defined */
		position:absolute; 
		
		/* center the menu, depend on the width of you menu*/
		top:0; 
		
		/* should be higher than #box */
		z-index:100;
	
	}

		#lava ul li {
			/* give some spaces between the list items */
			margin:0 18px; 
			/* display the list item in single row */
			float:left;
			display:inline;
		}

		#lava ul li a {
			color: #F7E3CB;
			font-size: 12px;
			font-family: Verdana, Geneva, sans-serif;
			text-decoration: none;
			line-height: 20px;
		}

	#lava #box {
		/* position absolute so that z-index can be defined and able to move this item using javascript */
		position:absolute; 
		left:0; 
		top:0; 
		
		/* should be lower than the list menu */
		z-index:50; 
	
		/* image of the right rounded corner */
		background:#A5C0C3; 
		height:20px;
		
		/* add padding 8px so that the tail would appear */
		padding-right:8px;
		
		/* self-adjust negative margin to make sure the box display in the center of the item */
		margin-left:-10px;
	}

		#lava #box .head {
			/* image of the left rounded corner */
			background:#53797D;
			height:20px;
		
			/* self-adjust left padding to make sure the box display in the center of the item */
			padding: 0px 10px;
		}

/* List styling for services offered (residential, commercial, security pages */

ul#serviceList {
	list-style: none;
}

	ul#serviceList li {
	
		margin: 20px 0px;
		font: font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	}

		ul#serviceList li h3 {
			margin: 5px 0px;
		
		}

/* List styling for articles written (residential, commercial, security pages */

ul#articleList {
	list-style: none;
}

/* Styling for slideshow */
.pikachoose{}

	/* This is the ul for the images */
	.pikachoose ul{
		padding-left:0;
		width:510px;
		height:auto;
		margin: 15px 0px 0px 0px;
		overflow:hidden;
	}

		.pikachoose ul li{
			float: left;
			border:1px solid #555;
			padding:2px;
			background:#777;
			margin:0 6px 4px 0;
			position:relative;
			overflow:hidden;
		}

			.pikachoose ul li div img{
				position:relative;
				cursor:pointer;
			}

/* this is the surrounding for all elements. This is also the fake border around the main img and room for caption */
.pika_main{
	width:516px;
	/* height:350px; */
	display:block;
	position:relative;
}

/*since we gave it a fake border, the image must be positioned a little. */
	.pika_main_img{
		position:relative;
	}

.pika_subdiv{
	position:relative;
	border:1px solid #555;
	background:#777;
	padding:2px;
}

.pika_animationDivs{
	top:2px;
	left:2px;
} /*must match top/left padding for subdiv */

.pika_subdiv img, .pika_subdiv a img{border:none;}

.pika_caption{
	width:510px;
	height:22px;
	padding-top:4px;
	text-align:center;
	position:absolute;
	bottom:7px;
	left:3px;
	background:url('../PikaChoose_3.2/PikaChoose_3.2/black.png') top left;
}

	.pika_caption a{color:white;}

.pika_play{
	position:absolute;
	z-index:1;
	left:50%;
	margin-left:-25px;
	width:50px;
	top:5px;
}

	.pika_play a{
		position:relative;
		margin-left:auto;
		cursor:pointer;
		display: block;
		width:50px;
		height:50px;
		background:url('../PikaChoose_3.2/PikaChoose_3.2/play.png') top center no-repeat;
	}

.pika_play a.pika_stop_button{background:url('../PikaChoose_3.2/PikaChoose_3.2/pause.png') top center no-repeat;}

.pika_navigation a{
	font-size: 12px; 
	text-decoration: none;
}

	.pika_navigation a:hover{text-decoration: underline;}

.pika_navigation{
	padding-top:10px;
	clear:both;
	text-align:center;
}

/* to 'hide' these, make their height and width 1px */
.pika_prev_hover{
	position:absolute;
	top:5px;
	left:5px;
	height:456px;
	width:100px;
	background:url('../PikaChoose_3.2/PikaChoose_3.2/rewind.png') top left no-repeat;
}

.pika_next_hover{position:absolute;
	top:5px;
	right:5px;
	height:456px;
	width:100px;
	background:url('../PikaChoose_3.2/PikaChoose_3.2/fastf.png') top right no-repeat;
}

/* Styling for sorting scripts and images on Gallery.html */

p, ul, ol, dl, table { margin-bottom: 18px; }
/* ul, ol, dd { margin-left: 36px; } */

/* Custom Classes */
.clearing { clear: both; }
.last { margin-bottom: 0; }
.screenReader { left: -9999px; position: absolute; top: -9999px; }

/* Basic Layout - #filter is selector set and #portfolio are associated images */

ul#filter { float: left; font-size: 16px; list-style: none; margin-left: 0; width: 100%; }
ul#filter li { 
	border-right: 1px solid #dedede;
	float: left;
	line-height: 16px;
	margin-right: 10px;
	padding-right: 10px;
}
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #999; text-decoration: none; }
ul#filter li.current a, ul#filter a:hover { text-decoration: underline; }
ul#filter li.current a { color: #333; font-weight: bold; }

ul#portfolio { 
	float: left;
	list-style: none;
	margin-left: 10px;
	width: 825px;
}
ul#portfolio li { 
	border: 1px solid #999; 
	float: left; 
	margin: 0 5px 10px 0; 
	padding: 5px;
	width: 257px;
	background-color: #000;
}
ul#portfolio a { display: block; width: 100%; color: #999; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: center; text-decoration: none;}
ul#portfolio a:hover { text-decoration: none; color: #000; background-color: #FFF;}
ul#portfolio img { margin: 0 auto; border: 1px solid #999; border-bottom: none; display: block; }

/* Added for transition */
.hidden{
	visibility: hidden;
	display: none;
}

/* Secondary navigation for Learning Center and Gallery */

#talltabs-black {
	clear:left;
	float:left;
	padding:0;
	width:100%;
	overflow:hidden;
	font-family:Georgia, serif;
	margin-bottom: 15px;
}

#talltabs-black ul {
	float:left;
	margin:0;
	padding:0;
	list-style:none;
	position:relative;
	left:50%;
	text-align:center;
}

#talltabs-black ul li {
	display:block;
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
	right:50%;
}

#talltabs-black ul li a {
	display:block;
	float:left;
	margin:0 1px 0 0;
	padding:6px 10px 6px 10px;
	background: #8F806E;
	color: #F7E3CB;
	font-size: 12px;
	font-family: Verdana, Geneva, sans-serif;
	text-decoration:none;
}

#talltabs-black ul li a:hover {
	padding:11px 10px 6px 10px;
}

#talltabs-black ul li.active a,
#talltabs-black ul li.active a:hover {
	padding:11px 10px 6px 10px;
}