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

html,
body {
   margin:0;
   padding:0;
   height:100%;
background: url(images/background.png) repeat-y center top #9b9b9b;

   font-family: 'Chivo', sans-serif;
   color: #333;
}


   a.action:link {    font-family: 'Chivo', sans-serif;
   color: #fff;
   background: #666;
   padding: 2px;
 margin-left: 5px;}
   
   a.action:visited {    font-family: 'Chivo', sans-serif;
   color: #fff;
   background: #666;
   padding: 2px;
 margin-left: 5px;}

   a.action:hover {    font-family: 'Chivo', sans-serif;
   color: #666;
   background: #fff;
   padding: 2px;
 margin-left: 5px;}

h1{
	font-size: 22px;
	color: #666;
	font-weight: normal;
	display: inline;}
	
	h3{
	font-size: 16px;
	color: #000;
	font-weight: normal;
	display: inline;}

#container {
   min-height:100%;
   position:relative;
}
#header {
   text-align: center;
   z-index: 50;
   position: relative;
   background: url(images/header-background.png) no-repeat center bottom;
}
#body {
min-height:100%;
padding-bottom: 170px;
overflow: auto;   /* Height of the footer */
}

#box{
margin-left: auto;
margin-right: auto;
width: 980px;
background: #fff;
overflow: auto;
padding-left, padding-right: 15px;
padding-bottom: 170px;
padding-top: 0;
height:100%;
}

#navi{
	width: 220px;
	float: left;
	padding-left: 0; }
	
#promo{
		width: 670px;
		margin-right: 10px;
		float: right;
		border: solid 8px #666;
		height: 398px;}
		
#promoimg{
		width: 670px;
		margin-right: 10px;
		float: right;
	}
		
#text {width: 620px;
		float: right;
		margin-top: 25px;
		margin-right: 50px;}
		
#promo1{
	width: 160px;
	height: 160px;
	float: left;
	margin-right: 22px;
	text-align: center;

background: #bad36e; /* Old browsers */
background: -moz-linear-gradient(top, #bad36e 0%, #009900 50%, #409940 51%, #bad36e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bad36e), color-stop(50%,#009900), color-stop(51%,#409940), color-stop(100%,#bad36e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bad36e 0%,#009900 50%,#409940 51%,#bad36e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bad36e 0%,#009900 50%,#409940 51%,#bad36e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bad36e 0%,#009900 50%,#409940 51%,#bad36e 100%); /* IE10+ */
background: linear-gradient(to bottom, #bad36e 0%,#009900 50%,#409940 51%,#bad36e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bad36e', endColorstr='#bad36e',GradientType=0 ); /* IE6-9 */

	border: solid 4px #666;
	padding-top: 10px;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 10px;
	color: #fff;
		-webkit-transition:background 0.3s ease;
	-moz-transition:background 0.3s ease;
	-o-transition:background 0.3s ease;
	-ms-transition:background 0.3s ease;
	transition:background 0.3s ease;	}
	
#promo1:hover{
	background: #bad36e; /* Old browsers */
background: -moz-linear-gradient(top, #bad36e 0%, #ffffff 50%, #ffffff 51%, #bad36e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bad36e), color-stop(50%,#ffffff), color-stop(51%,#ffffff), color-stop(100%,#bad36e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bad36e 0%,#ffffff 50%,#ffffff 51%,#bad36e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bad36e 0%,#ffffff 50%,#ffffff 51%,#bad36e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bad36e 0%,#ffffff 50%,#ffffff 51%,#bad36e 100%); /* IE10+ */
background: linear-gradient(to bottom, #bad36e 0%,#ffffff 50%,#ffffff 51%,#bad36e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bad36e', endColorstr='#bad36e',GradientType=0 ); /* IE6-9 */
	color: #333;
	}

#promo2{
	width: 30%;
	float: left;
	margin-right: 15px;}
	
#promo3{
	width: 30%;
	float: left;
	margin-right: 15px;}
	


#footer {
   position:relative;
   bottom:0;
   width:100%;
   margin-top: -170px;
   height:170px;   /* Height of the footer */
   background:#333;
   clear: both;
}

#footcont {
	overflow: auto;
	margin-left: auto;
	margin-right: auto;
	width: 980px;;
	height: 150px;
	padding-top: 10px; }

#contact {
	float: left;
	width: 200px;
	margin-right: 20px;
	color: #fff;
	padding-top: 0;
}

#map {
	float: right;
	width: 670px;
	text-align: right;
	}
	
#copyright{
	font-size: 0.7em;
	color: #999;
	text-align: right;}




	.menusubnav{
	background:#fff;
	margin:0; padding: 0;
	width:200px;  z-index:10;
	color:#666;
	font-size: 14px;
	}
	.menusubnav li{
	margin:0; padding:0;
	list-style:none;
	}	
		.menusubnav li:hover{
		margin:0; padding:0;
		list-style:none;
		}
	.menusubnav > li > a,
	.menusubnav > li > a:hover,
	.menusubnav > li > span.separator{
	font-weight: normal;
	}
	.menusubnav > li.deeper > a,
	.menusubnav > li.deeper .separator{
	background:transparent url('images/arrow_state_grey_down.png') no-repeat 175px 12px;
	margin:0; padding:10px; 
	}			
		.menusubnav > li.deeper > a:hover{
		background:#9b9b9b url('images/arrow_state_blue_down.png') no-repeat 175px 12px;
		}			
	.menusubnav .separator,
	.menusubnav a{
	margin:0; padding:10px;
	display:block;
	
	border-bottom: 1px solid #e0e0e0;
	color:#666; text-decoration:none; 
	-webkit-transition:background 0.3s ease;
	-moz-transition:background 0.3s ease;
	-o-transition:background 0.3s ease;
	-ms-transition:background 0.3s ease;
	transition:background 0.3s ease;		
	}
	.menusubnav a:hover{
	background:#9b9b9b;
	color:#fff;
	border-bottom: 1px solid #fff;	
	}
		/*
			children
		*/
		.menusubnav ul{
		margin:0; padding:0 0 0 10px;
		}
		.menusubnav ul li{
		margin:0; padding:0;
		}
		.menusubnav li.current > a{
		background:#ccc url('images/arrow_state_blue_right.png') no-repeat 95% 50%;
		color: #009900;
		}
	
		.menusubnav ul > li  > ul{
		margin:0; padding:0;
		width:0; height:0; 
		visibility:hidden; 
		transition:all 0.1s ease-in-out;
		-webkit-transition:all 0.1s ease;
		-moz-transition:all 0.1s ease;
		-o-transition:all 0.1s ease;
		-ms-transition:all 0.1s ease;
		}
				.menusubnav ul > li  > ul > li > a{
				display:none;
				}
		.menusubnav ul > li.deeper > .greyArrow{
		background:transparent url('images/arrow_state_grey_right.png') no-repeat 165px 12px;
		}
		.menusubnav ul > li.deeper > .greyArrow:hover  {
		background:#ccc url('images/arrow_state_blue_right.png') no-repeat 165px 12px;
		}		
		.menusubnav ul > li:hover > ul{
		width:200px;
		display:block;
		position:relative; 
		top:-37px; left:192px;
		visibility:visible; 
		}
			.menusubnav ul > li:hover > ul > li > a{
			background:#dedede; display:block;
			border-bottom: 1px solid #fdfdfd;
			}
			.menusubnav ul > li:hover > ul > li > a:hover{
			background:#ccc;
			color:#333;
			border-bottom: 1px solid #fff;			
			}  	


tbody tr:nth-child(odd) {
   background-color: #339900;
   color: #fff;
}



@media only screen and (max-width: 768px) {
	#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:100px;   /* Height of the footer */
   background:#f00;
}
	
}


@media only screen and (max-width: 450px) {
	
	#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:50px;   /* Height of the footer */
   background:#fff;
}
	
}