@charset "utf-8";
/* CSS Document */

/* Default Styles */
* {	margin:0; padding:0;}
html, body {height:100%;}
body {background-color:#000; color:#222; font: 13px; font-family:Arial, Helvetica, sans-serif; background-image:url(../_images/background_texture_tile.jpg); background-repeat:repeat; text-align:center; /* horizontal centering for IE Win quirks */}
img, p, ul, ol, li, hi, h2, h3, h4 { border:0; margin:0; padding:0;}
ul, ol {margin:0 0 0 40px; }
li {margin:0; padding:0 0 4px 5px;}
p, li {	font-size: 1em; padding-bottom:0.9em; line-height: 1.5em; font-family:Arial, Helvetica, sans-serif;}
.gray { color:#BBB;}
.emphasize { color:#CCC; font-size:14px; font-style:normal;}
h1 {font-size:1.8em; font-weight:normal; color: #222; margin-bottom: 20px; padding:0 0 2px 3px; border-bottom:1px solid #999;}
h2 {font-size:1.4em; font-weight:normal; margin: 10px 0 15px; color:#89C23F;}
h3 {font-size:1.1em; font-weight:normal; margin: 10px 0 10px; padding:0; color:#666;}
h4 {font-size:18px; font-weight:normal; margin: 10px 0 15px; color:#666; padding:0 0 2px 3px; border-bottom:1px solid #999;}
h5 {font-size:1em; font-weight:normal; margin: 0 0 1.2em; color:#89C23F;}
blockquote {margin:0 70px 0 50px;}
table, td {border:1px solid #CCC; font-size:0.9em;}
a:link, a:visited {color:#555; text-decoration:underline;}
a:hover, a:focus {color:#000;}

#container { margin:16px 0; position:relative; text-align:left; width:100%; background-color:#333;}
#main { position:relative; width:90%; max-width:960px; margin:0 auto; z-index:1;}
#main2 { width:100%; min-height:400px; clear:both; position:relative; float:left; border-radius:7px;}
#header {width:100%; float:left; position:relative; background-color:#FFF; border-top-left-radius:7px; border-top-right-radius:7px;}
#logo {width:55%; float:left; position:relative; top:0; border-top-left-radius:7px;}
#logo img {width:100%; border-top-left-radius:7px;}
#contactTop {float:right; position:relative; top:1.8em; right:-15px; border-radius:10px; background-color:#89C23F; color:#FFF; padding:10px 20px; text-align:center; font-size:1.5em;}
#contactTop .small {font-size:0.7em;}

#mainImagery {width:100%; float:left; position:relative; clear:both; background-color:#000; border-radius:7px; margin:12px 0; padding-top:10px;}
#mainImagery img {border-bottom-left-radius:7px; border-bottom-right-radius:7px; width:100%;}
.overlayOuter { position: absolute; left:-15px; bottom: 20px; width: 50%; z-index: 0; background:#FFF; opacity: .7; border-radius:10px; height:5em;}

/* slideshow from http://jquery.malsup.com/cycle2/demo/overlay.php */
/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.cycle-slideshow { width: 100%; min-width: 200px; max-width: 960px; margin: 0 auto; padding: 0; position: relative; right:0; border-bottom-right-radius:7px; border-bottom-left-radius:7px; }
/* slideshow images (for most of the demos, these are the actual "slides") - some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content */
.cycle-slideshow img { position: absolute; top: 0; left: 0; width: 100%; padding: 0; display: block;}
/* in case script does not load */
.cycle-slideshow img:first-child { position: static; z-index: 100; }
/* overlay */
.cycle-overlay { position: absolute; left:-15px; bottom: 20px; width: 50%; height:5em; z-index: 600; background:#FFF; color:#000; padding:10px 10px 10px 6%; opacity: .7; border-radius:10px;  font-weight:bold; font-size:1em;}


#contentMain {width:88%; padding:5% 6% 5%; float:left; position:relative; background-color:#FFF; border-radius:7px; border-top:10px solid #89C23F;}
#contentText {width:70%; float:left; position:relative;}
#contentRightImgs {width:23%; float:right; position:relative;}
#contentRightImgs img {width:100%; border-radius:7px; margin-bottom:30px;}

#contentLeft {width:66%; float:left; position:relative;}
#contentRight {width:25%; float:right; position:relative; font-size:0.9em;}
#contentFull {width:94%; float:left; position:relative; margin-top:10px; border:1px solid #999; padding:1.5% 3%; background-color:#EEE; border-radius:10px;}
#contentFull h2 {font-size:1.2em;}

.left50 {float:left; width:50%}
.right50 {float:right; width:50%}
.leftHm40 {float:left; width:45%}
.rightHm50 {float:right; width:55%}

#nav { float:left; width:94%; position: relative; z-index:100; padding:5px 0 5px 6%; color:#FFF; background-color:#89C23F; border-bottom-left-radius:7px; border-bottom-right-radius:7px;}
#nav ul { list-style:none; padding:0; margin:0;}
#nav li { display:inline-block; font-size:0.9em; color:#FFF; border-left:1px solid #FFF; padding-bottom:0;}
#nav li.last {border-right:1px solid #FFF;}
#nav li.active { padding: 5px 15px 5px 18px; font-weight:bold;}
#nav li a { padding: 5px 15px 5px; display:inline-block; color:#000; text-decoration:none;}
#nav li a:hover {color:#FFF; }

ul.nospace li {padding-bottom:0.1em; }
ul.nospace {margin-bottom:0.9em;}

a.button {background-color:#000; color:#FFF; padding:12px 7%; display:inline-block; margin:15px 0 0; width:86%; text-align:center; border-radius:10px; text-decoration:none;}
a.button:hover {background-color:#89C23F;}

.h5 {color:#000; font-weight:bold;}
.h5 a {color:#89C23F; font-weight:bold; text-decoration:none;}
.h5 a:hover {color:#000;}

.clearfloat {clear:both; float:none; height:1px; width:100%;}
.clearLine {clear:both; float:none; width:100%; border-bottom:1px solid #999; font-size:0.7em; color:#89C23F; padding-bottom:3px; text-align:right;}
.clearLine a {color:#89C23F; text-decoration:none;}

img.border {border:1px solid #FFF;}
img.hundred {width:100%}
img.right {float:right; margin-left:30px; margin-bottom:20px;}

#footer {padding:8px 0; margin:20px auto; position:relative; text-align:center; width:100%; color:#888; height:25px; clear:both; font-size:12px;}
#footer a:link, #footer a:active, #footer a:visited {color:#888; text-decoration:none;}
#footer a:hover, #footer a:focus {color:#FFF;}
#footer .dark a:link, #footer .dark a:active, #footer .dark a:visited {color:#666; font-size:11px;}

.form1 {border:#89C23F 1px solid;padding:20px 5% 10px; width:89%; margin-bottom:20px;}
input {border:#89C23F 1px dotted; margin-bottom:10px; vertical-align:middle; padding:2px;}
label input {border:0px; margin:0px;}
.small input {margin-bottom:0px; vertical-align:top; font-size:11px; line-height:13px;}
textarea {border:#89C23F 1px dotted; margin-bottom:10px;}
select {border:#89C23F 1px dotted; margin-bottom:10px;}
.send { cursor:pointer; color:#555; font-weight:bold; border:#89C23F 1px solid;}
.form1 table, .form1 td {border:0px;}

/****************************************************
MEDIA QUERIES
*****************************************************/
/* for 1100px or less */
@media screen and (max-width: 1100px) {
	#container {width: 96%; margin:15px auto;}
	#main, #footer {width: 96%;}
	#contactTop {top:1em; font-size:1.5em;}
}
/* for 650px or less */
@media screen and (max-width: 800px) {
	#contentText, #contentRightImgs, #contentLeft, #contentRight {width:100%; float:left; position:relative; clear:both;}
	#contentRightImgs img {width:47%; margin:0 5% 30px 0; float:left; position:relative;}
	#contentRightImgs a, #contentRight a {width:30%; float:right; position:relative;}
	#contactTop {top:1em; font-size:1.2em;}
}
/* for 600px or less */
@media screen and (max-width: 600px) {
	#contentRightImgs img, #contentRight ul.links {width:60%; margin:0 auto; float:none; position:relative;}
	#contentRightImgs a, #contentRight a {width:60%; float:none; position:relative;}
	#contactTop {top:0.7em; font-size:1em; right:-10px;}
	.cycle-overlay, .overlayOuter { left:-10px; bottom:10px; width:58%; height:6.5em; font-size:0.8em;}
	.left50 {width:40%;}
	#main, #footer {width: 99%;}
	#nav {width:100%; float:left; position:relative; font-size:17px; float:none; line-height:17px; clear:both; margin-bottom:0px; padding:0;}
	#nav ul {padding:0; margin:0; width:100%; float:none; display:none; }
	#nav ul li {padding:0; text-align:left; display:block; border-left:0; border-top: 1px solid #FFF; width:100%;}
	#nav ul li a { width:95%; padding:6px 0 6px 5%; display:block;}
	#nav ul li a:hover {background-color:#FFF; color:#000; }
	#nav ul li.active { width:95%; padding:6px 0 6px 5%; display:block; }
	#nav li.last {border-right:0px}
}
/* for 380px or less */
@media screen and (max-width: 460px) {
	#contentRightImgs img, #contentRightImgs a, #contentRight a {width:90%; float:left; position:relative; clear:both;}
	#contactTop { display:none;}
}