/* Reset
------------------------------------------------------------ */

* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 13px; color: #333; font: 100% ebrima, Arial, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}	
a, img { outline: none; border:none; color: #000; }
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}

aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;
	}
	
@font-face
{
    font-family: 'segoeuil';
    src: url('segoeuil.eot');
    src: local('segoeuil'), local('segoeuil'), url('segoeuil.ttf') format('truetype');
}	
@font-face
{
    font-family: 'ebrima';
    src: url('ebrima.eot');
    src: local('ebrima'), local('ebrima'), url('ebrima.ttf') format('truetype');
}
	
/* Structure */
#wrapper {
	width: 100%;	
	margin: auto;
	} 

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/* Header */
		
header { width:100%; height:110px; display: block; clear:both;}

#topnav {
	float:right;
	display: block;
	background: #efefef;
	width:320px;
	padding-left:20px;
	right:0px;
	}
#topnav li {
	padding:5px;
	line-height:1.6em;
	display:inline;
}
#header  {
	width: 1000px;
	font-family:ebrima;
	font-weight:lighter !important;
	margin:0px auto;
}
		
#header div{float:left;}
#header .hdleft{ }
#header .hdright{ margin-left:40px; }
#header  .hdright  nav {
	font-size:14px;
	font-weight:lighter !important;
	margin-top:60px;
	}
#header .hdright nav li {
	display: inline;
	margin:0px 10px;
	font-weight:lighter !important;
	font-size:14px;
	text-transform: uppercase;
}
#header li  a:link{ text-decoration:none; color:#09F;}
#header li  a:visited{ text-decoration:none; color:#09F;}
#header li  a:hover{ text-decoration:none; color:#000;}
#header li  a:active{ text-decoration:none; color:#09F;}
#header li.selected {border-bottom:2px solid #09f;}

nav a#pull {
	display: none;
}

/* Banner */	

#banner {z-index:9999; background-color:#ccc;}
#banner-small {display:none;}

#slidebox{position:relative; border:0px solid #ccc; margin:0px auto;}
#slidebox, #slidebox .content{width:1200px;margin-top:0px; }
#slidebox, #slidebox .container, #slidebox .content{height:440px;}
#slidebox{overflow:hidden;}
#slidebox .container{position:relative; left:0;}
#slidebox .content{ float:left; background-image: url(images/spiral.png);
 background-repeat: no-repeat; background-position:right top; border:0px solid #fff;}
#slidebox .content div{padding:0px 0px; height:100%; font-family:Verdana, Geneva, sans-serif; font-size:13px;}
#slidebox .next, #slidebox .previous{position:absolute; z-index:2; display:block; width:25px; height:46px;}
#slidebox .next{right:0; margin-right:0px; background:url(images/slidebox_next.png) no-repeat left top; right:100px;}
#slidebox .next:hover{background:url(images/slidebox_next_hover.png) no-repeat left top; cursor:pointer;}
#slidebox .previous{margin-left:0px; background:url(images/slidebox_previous.png) no-repeat left top; left:100px;}
#slidebox .previous:hover{background:url(images/slidebox_previous_hover.png) no-repeat left top; cursor:pointer;}
#slidebox .thumbs{position:absolute; z-index:2; bottom:40px; right:550px;}
#slidebox .thumbs .thumb{display:block; margin-left:5px; float:left; width:21px; height:21px; font-family:Verdana, Geneva, sans-serif; font-size:10px !important; text-decoration:none; padding-top:1px !important; background:url(images/blue-dot.png); line-height:18px;  color:#fff; }
#slidebox .thumbs .thumb:hover{background:url(images/white-dot.png); color:#02a1fc;  line-height:18px; width:21px; height:21px; }
#slidebox .selected_thumb{background:url(images/white-dot.png); color:#02a1fc; display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:10px; line-height:18px; text-decoration:none;  width:21px; height:21px; padding-top:1px !important;}


#boxes {max-width:1000px; margin:0px auto; display:block; }
#boxes .box{ width:30%; height:100%; min-height:300px; float:left; margin:0px 5px; padding:10px; background-color:#efefef; border:1px solid #fff;}
.box h1 {font-weight:normal;}
.box p {font-weight:normal; font-size:1em; padding:5px; text-align:justify;}
h1.greenhd{color:#fff !important; background-color:#393 !important; padding-left:10px;}
h1.bluehd{color:#fff !important; background-color:#009de0 !important; padding-left:10px;}
h1.orangehd{color:#fff !important; background-color:#F60 !important; padding-left:10px;}
.learntxt { margin-bottom:0px; bottom:0px;}

#content {display:block; clear:both;}
#content .pagehead{width:100%; height:60px; background-color:#000; border-bottom:1px solid #ccc; display:block;}
#content .pagetitle{margin:0 auto; width:988px; height:50px; color:#ccc; text-align:left; font-family:'ebrima'; font-size:34px; font-weight:lighter; padding-left:10px; padding-top:5px;padding-bottom:0px; }

#content-body{max-width:1000px; margin:0px auto; display:block; border-left:1px solid #ccc; border-right:1px solid #ccc;}
#content-body div{float:left;}
.content-left {
		width: 70%;
		margin:20px 50px 20px 10px;
		text-align:justify;
		}	
.content-left h3 {font-size:1.5em;}		
.content-left h4{font-size:1.3em;}	
.content-left h3, h4 {color:#036 !important; line-height:1.5em;}		
.content-left p{margin-bottom:20px;}
.content-right {
		width: 200px;
		}
.content-right img{
max-width:100%; max-height:100%;
		}
.content-right h4{color:#036; font-size:22px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; margin:10px 0px 5px 0px; padding:0px;}	
.clistbox  {display:block; width:100%; height:100%; clear:both; margin:0px 0px 20px 0px;  border:1px solid #ccc;}
.clistbox  h4{background-color:#D5EAFF; padding:5px;}
.clistbox  ul{width:228px;  float:left; margin:0px 2px 10px 2px; }
.clistbox  ul li{ list-style-type:none; text-align:left; margin-left:15px; line-height:1.5em;}

.serviceslist {
 margin: 0;
 padding: 0;
 list-style: none;
 width:200px;
 }
 
.serviceslist li 
{
 padding-left: 22px;
 background-image: url(images/orange_arrow.png);
 background-repeat: no-repeat;
 background-position: 0.5em 1em;
 background-color:#E5E5E5;
 padding-top:7px;
 padding-bottom:10px;
 border-bottom:1px solid #fff;
 font-size:13px;
 display:block;
 }
.serviceslist a:link{text-decoration:none; color:#006699;}
.serviceslist a:visited{text-decoration:none; color:#006699;}
.serviceslist a:hover{text-decoration:underline; color:#006699;}
.serviceslist a:active{text-decoration:none; color:#006699;}

.map-directions-1 {border:1px solid #ccc; display:block;}
.map-directions-2 {border:1px solid #ccc; display:none;}
		
footer { width:100%; height:70px; background-color:#222; display:block; clear:both; padding:10px 0px;  }
		
.copytxt {padding:0px; margin:0px auto; font-weight:normal; color:#ccc; height:70px;  width:1000px; font-size:0.9em;}
.copytxt a:link{text-decoration:none; color:#ccc; padding:0 2px;}
.copytxt a:visited{text-decoration:none; color:#ccc; padding:0 2px;}
.copytxt a:hover{text-decoration:none; color:#ccc;}
.copytxt a:active{text-decoration:none; color:#ccc; padding:0 2px;}

.copytxt div{ float:left;}
.copytxt .copy-1{margin-right:20px;}
.copytxt .copy-2{margin-right:20px; line-height:50px; text-align:center;}
.copytxt .copy-3{margin-right:0px; float:right;}

.copytxt .copy-3 ul li { margin:0px 5px 0px 0px; display:inline; vertical-align:middle;} 

input {border:1px solid #ccc; padding:3px;}

form { text-align:left;}

input[type=text] {
	padding: 5px; border-radius: 5px; border: 1px solid #ccc; width: 100%; margin-top: 5px; margin-bottom: 5px;
}
input[type=submit] {
	padding: 5px; border-radius: 5px; border: 1px solid #ccc; width: 45%; color: aliceblue; font-size: 15px; margin-bottom: 10px; cursor: pointer; background-color: rgb(65, 128, 197);
}
input[type=reset] {
	padding: 5px; border-radius: 5px; border: 1px solid #ccc; width: 45%; color: aliceblue; font-size: 15px; margin-bottom: 10px; cursor: pointer; background-color:#666;
}
#submit:hover {
	background-color: black;
}
textarea {
	padding: 5px; border-radius: 5px; border: 1px solid rgb #ccc; width: 100%; margin-top: 10px; margin-bottom: 10px; resize: none;
}
input[type=text]:focus {
	border-color: rgb(70, 151, 228);
}
textarea:focus {
	border-color: rgb(70, 151, 228);
}
.reqtxt {color:#F00; font-weight:bold;}

.success {
	BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; PADDING-BOTTOM: 15px; MARGIN: 10px 0px; PADDING-LEFT: 50px; PADDING-RIGHT: 10px; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-POSITION: 10px center; FONT-SIZE: 13px; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid; PADDING-TOP: 15px; width:95%; text-align:left; clear:both;
}
.success {
	BACKGROUND-IMAGE: url(images/success.png); BACKGROUND-COLOR: #dff2bf; COLOR: #4f8a10
}

/* Media Queries */
@media screen and (max-width: 720px) {

#wrapper {
	width: 100%;	
	margin:0px;
	} 

#topnav{ display:none;}

#header { width:100%; height:100%; display:block;}
#header .hdleft{ width:100%; margin:0px auto; display:block; text-align:center;}
#header .hdright{ width:100%; margin:0px; display:block;}
#header .hdright nav, #main, aside {
	float: left;
	clear: left;
	margin: 0 0 10px; 
	width: 100%;
}	
#header .hdright nav li {
	margin: 0;
	background: #efefef;
	display: block;
	margin-bottom: 3px;
	width:100%;
	font-size:1.2em;
}
#header .hdright nav a {
	display: block;
	padding: 10px;
	text-align: center;
}	
#header li.selected {background-color:#09f; color:#fff; font-weight:bold !important;}	
#banner {display:none;}
#banner-small {display:block;}
#banner-small img{max-width:100%; max-height:100%;}
				
#boxes {width:100%; margin:0px;}
#boxes .box{ width:98%; height:100%; margin:0px; padding:5px;}

#content {display:block; clear:both;}
#content .pagehead{width:100%; height:100%; background-color:#000; border-bottom:1px solid #ccc; display:block;}
#content .pagetitle{margin:0 auto; width:100%; height:50px; color:#ccc; text-align:center; font-family:'ebrima'; font-size:34px; font-weight:lighter; padding-left:10px; padding-top:5px;padding-bottom:0px; }

#content-body{width:100%; margin:0px auto; display:block; border-left:1px solid #ccc; border-right:1px solid #ccc;}
#content-body div{float:none;}
.content-left {
		width: 96%;
		margin:5%;
		text-align:justify;
		color:#3;
		font-size:0.9em;
		}		
.content-left h3, h4 {color:#036 !important; line-height:1.5em;}		
.content-left p{margin-bottom:20px; margin-right:20px;}

.content-right {
		width: 96%;
		border-top:2px solid #ccc;
		padding-left:10px;
		}
.content-right  img{
max-width:100%; max-height:100%;
		}
.content-right h4{color:#036; font-size:22px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; margin:10px 0px 5px 0px; padding:0px;}
.clistbox  {display:block; width:100%; height:100%; clear:both; margin:0px;  border:0px solid #ccc;}
.clistbox  h4{background-color:#D5EAFF; padding:5px;}
.clistbox  ul{width:100%;  float:none; margin:0px; }
.clistbox  ul li{ list-style-type:none; text-align:left; margin-left:15px; line-height:1.5em;}
		
.serviceslist {
 margin: 0;
 padding: 0;
 list-style: none;
 width:100%;
 }
 
.serviceslist li 
{
 padding-left: 22px;
 background-image: url(images/orange_arrow.png);
 background-repeat: no-repeat;
 background-position: 0.5em 1em;
 background-color:#fff;
 padding-bottom:10px;
 border-bottom:1px solid #fff;
 font-size:1.1em;
 display:block;
 }
.serviceslist a:link{text-decoration:none; color:#006699;}
.serviceslist a:visited{text-decoration:none; color:#006699;}
.serviceslist a:hover{text-decoration:underline; color:#006699;}
.serviceslist a:active{text-decoration:none; color:#006699;}

h1.greenhd{font-size:1.5em;}
h1.bluehd{font-size:1.5em;}
h1.orangehd{font-size:1.5em;}

.map-directions-1 {border:1px solid #ccc; display:none;}
.map-directions-2 {border:1px solid #ccc; display:block;}

footer { width:100%; height:100%; background-color:#222; display:block; clear:both; padding:10px 0px;  }
.copytxt{ width:100%; height:100%; overflow:hidden;   }
.copytxt div{ float:none; padding:10px 0px;}
.copytxt .copy-1{margin:0px; text-align:center; border-bottom:1px dotted #666;}
.copytxt .copy-1 img{margin:0px auto; text-align:center; }
.copytxt .copy-2{margin:0px auto;  text-align:center; line-height:18px; border-bottom:1px dotted #666;}
.copytxt .copy-3{margin:0px auto;  text-align:center; float:none;}

	nav ul {
		display: none;
		height: auto;
	}
	nav a#pull {
		display: block;
		background-color: #999;
		width: 97%;
		position: relative;
		color:#fff;
		font-size:1.5em;
		text-decoration:none;
	}
	nav a#pull:after {
		content:"";
		background: url('images/nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
			
}