/* General declerations */

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

br.clear, div.clear{
	display:block;
	height:0px;
	clear:both;
	line-height:0px;
	font-size:0px;
	}
	
div.fl{
	float:left;
	}
	
div.fr{
	float:right;
	}

/* Layout declerations */

body{
	font-family:Verdana, Geneva, sans-serif;
	color:#4575a2;
	font-size:11px;
	}

#pageContainer{
	width:749px;
	margin:0px auto;
	position:relative;
	}
	
#topContainer{
	background-image:url(images/contentBG.png);
	margin-bottom:12px;
	}
	
#leftSidebar{
	float:left;
	background-image:url(images/header.png);
	padding-top:230px;
	padding-bottom:15px;
	background-position:top;
	background-repeat:no-repeat;
	width:236px;
	}
	
div.logoContainer{
	position:absolute;
	width:513px;
	height:125px;
	overflow:hidden;
	top:0px;
	left:236px;
	}
	
div.logoContainer h1{
	background-image:url(images/logo.png);
	padding:0px 0px 0px 513px;
	margin:0px;
	height:125px;
	}
	
div#footer{
	background-image:url(images/footer.png);
	height:76px;
	display:block;
	overflow:hidden;
	margin:12px 0px;
	position:relative;
	}
	
div#footer div.content{
	padding-top:76px;
	}
	
div#rightSidebar{
	min-height:400px;
	float:right;
	width:513px;
	padding-top:125px;
	}
	
/* Styling side menu */
	
ul#sideMenu{
	list-style-type:none;
	}
	
ul#sideMenu li{
	display:block;
	overflow:hidden;
	width:236px;
	}
	
ul#sideMenu li a{
	display:block;
	padding-left:236px;
	}
	
ul#sideMenu li.services{
	height:118px;
	}

ul#sideMenu li.portfolio{
	height:102px;
	}
	
ul#sideMenu li.testimonials{
	height:106px;
	}

ul#sideMenu li.services a{
	background-image:url(images/menu-services.png);
	height:118px;
	}
	
	
ul#sideMenu li.portfolio a{
	background-image:url(images/menu-portfolio.png);
	height:102px;
	}
	
	
ul#sideMenu li.testimonials a{
	background-image:url(images/menu-testimonials.png);	
	height:106px;
	}
	
/* Positioning top menu */

ul#topMenu{
	display:block;
	position:absolute;
	text-align:right;
	top:10px;
	left:532px;
/*	width:117px;
*/	height:10px;
	list-style-type:none;
	}

ul#topMenu li{
	height:10px;
/*	overflow:hidden;
*/	display:block;
	float:left;
	}
	
ul#topMenu li a{
	display:block;
	text-decoration:none;
	padding-right:15px;
	color:#000;

	}
	
ul#topMenu li.home a, ul#topMenu li.contact a{
	background-image:url(images/bullet.gif);
	background-repeat:no-repeat;
	padding-left:10px;
	background-position:center left;
	}

ul#topMenu li.facebook a{
	background-image:url(images/facebook.gif);
	background-repeat:no-repeat;
	padding-left:20px;
	}
	
	
/* styling services page */

div#services{
	margin-left:20px;
	padding-top:30px;
	}

h2.services{
	color:#529802;
	font-size:18px;
	margin-bottom:20px;
	}
	
p.services{
	margin-bottom:10px;
	}
	
#services h3{
	font-weight:bold;
	color:#c52424;
	font-size:12px;
	}
	
#services ul{
	font-size:11px;
	margin-left:14px;
	margin-bottom:20px;
	}
	
#services div.fl{
	width:200px;
	}
	
/* Styling home page AKA index.php */

#home div.top{
	margin-left:40px;
	padding-top:30px;
	position:relative;
	z-index:5;
	}
	
#home div.top h2{
	color:#529802;
	font-size:16px;
	margin-bottom:20px;
	}
	
#home div.top p{
	margin-left:192px;
	margin-bottom:15px;
	}
	
#home a, #home a:visited{
	color:#529802;
	text-decoration:none;
	}
	
#home a:hover, #home a:active{
	text-decoration:underline;
	}
	
	
#home div.bottom{
	background-image:url(images/indexBottom.png);
	width:100%;
	margin-top:-166px;
	padding-top:195px;
	height:213px;
	background-repeat:no-repeat;
	margin-left:-24px;
	margin-bottom:-12px;
	position:relative;
	}

#home div.bottom div.quoteBox{
	position:absolute;
	width:175px;
	height:180px;
	top:191px;
	left:328px;
	color:#FFF;
	overflow-x:hidden;
	}
	
#home div.bottom div.quoteBox h2{
	font-size:13px;
	margin-bottom:10px;
	}
	
#home div.bottom div.quoteBox p{
	margin-bottom:5px;
	font-style:italic;
	}
	
#home div.bottom div.quoteBox p a, #home div.bottom div.quoteBox p a:visited{
	color:#99d157;
	text-decoration:none;
	font-style:normal;
	}
	
#home div.bottom div.quoteBox p a:hover, #home div.bottom div.quoteBox p a:active{
	text-decoration:underline;
	}

	
/* Pikachoose CSS Styles */

#portfolio h2{
	color:#529802;
	font-size:18px;
	margin-top:20px;
	margin-left:20px;
	}

	.pikachoose{
			width:510px;
			margin:0 auto 50px auto;
			}
	/* This is the ul you have all your images in */
	
	ul#pikaChoose{
		width:473px;
		margin:0 auto;
		display:block;
		}
	ul#pikaChoose li{
		float: left;border:1px solid #555;padding:2px;background:#777;
		margin:0px 11px 4px;position:relative;overflow:hidden;
		}
	ul#pikaChoose li div img{
		position:relative;cursor:pointer;
		}
	
	/* this is the surroundner for all your elements. This is also the fake border around the main img and room for caption */
	.pika_main{
		width:450px;
		height:350px;
		display:block;
		position:relative;
		margin:20px auto 32px;
		background:url(images/loading.gif) center center no-repeat;
		}
		
	/*sine we give it the fake border, you need to position the image a little. */
	.pika_main_img{
		position:relative;
		width:450px;
		height:355px;
		}
		
	.pika_subdiv{
		position:relative;
		overflow:hidden;
		height:350px;
		}
		
	.pika_animationDivs{top:0px;left:0px;} /*must match top/left padding for subdiv */
	.pika_subdiv img, .pika_subdiv a img{border:0px none;}
	
	.pika_caption{
		width:450px;
		height:16px;
		padding-top:4px;
		text-align:center;
		position:absolute;
		bottom:0px;
		background:url('/js/black.png') top left;
		color:#FFF;
		padding-bottom:4px;
		display:none;
		visbility:hidden;
		z-index:-999;
		}
	.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('/js/play.png') top center no-repeat;}
	.pika_play a.pika_stop_button{background:url('/js/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;
		position:absolute;
		text-align:center;
		top:390px;
		width:100%;
		}
	
	/* if you want to 'hide' these just make their height and width 1px */
	.pika_prev_hover{
		position:absolute;
		top:5px;
		left:5px;
		height:345px;
		width:75px;
		background:url('/js/rewind.png') top left no-repeat;
		cursor:pointer;
		}
		
	.pika_next_hover{
		position:absolute;
		top:5px;
		right:5px;
		height:345px;
		width:75px;
		background:url('/js/fastf.png') top right no-repeat;
		cursor:pointer;
		}
		
#portfolio{
	position:relative;
	}
	

/* Simple modal CSS */

#basic-modal-content {display:none;}

/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}

/* Container */
#simplemodal-container {
		text-align:center;
		height:250px;
		width:600px;
		background-color:#FFF;
		border:4px solid #BBB;
		padding:12px;
		}
		
#simplemodal-container h3{
		color:#529802;
		font-size:30px;
		margin-top:0px;
		}
		
#simplemodal-container p{
	margin-top:10px;
	margin-bottom:10px;
	font-size:22px;
	color:#4575A2;
	}
	
#simplemodal-container h4{
	margin-bottom:15px;
	}
		
#simplemodal-container code {
	background:#141414;
	border-left:3px solid #65B43D;
	color:#bbb; display:block;
	margin-bottom:12px;
	padding:4px 6px 6px;
	}
	
#simplemodal-container a {
	color:#ddd;
	}
#simplemodal-container a.modalCloseImg {
		background:url(/images/x.png) no-repeat;
		width:25px;
		height:29px;
		display:inline;
		z-index:3200;
		position:absolute;
		top:-15px;
		right:-16px;
		cursor:pointer;
		}
		
#simplemodal-container #basic-modal-content{
	padding:0px;
	}

/* Email link positioning */

#footer a.email{
	display:block;
	position:absolute;
	top:55px;
	right:555px;
	font-weight:bold;
	}
	
	
#footer a.email:link, #footer a.email:visited {
	color:#69A524;
	text-decoration:none;
	font-style:normal;
	}
	
#footer a.email:hover, #footer a.email:active{
	text-decoration:underline;
	}
	
/* Stylings testimonials webpae */

#testimonials{
	margin-left:20px;
	padding-top:30px;
	}
	
#testimonials ul{list-style-type:none;}

#testimonials ul li{margin-bottom:20px;}

#testimonials ul li p.quoteText{
	font-style:italic;
	}
	
#testimonials ul li p.quotePerson{
	margin-top:5px;
	font-weight:bold;
	color:#C52424;
	}
	
/* Styling the contact form */

form#contactForm{
	display:block;
	width:400px;
	text-align:center;
	margin:0px auto;
	}
	
form#contactForm div{
	margin-bottom:5px;
	}
	
form#contactForm label{
	display:block;
	float:left;
	width:100px;}
	
div#messageBox label{
	float:none;
	display:block;
	text-align:center;
	margin-bottom:5px;
	width:100%;
	}
	
div#messageBox{
	display:block;
	width:100%;
	}
	
div#messageBox textarea{
	width:100%;
	display:block;
	}