/* --------------- DEVICE AGNOSTIC ------------------*/
/* --------------- STRUCTURE ------------------*/


body {
margin:0px;
padding:0px;
background-color:#ebf4eb;
padding:10px;
}

#live960 {
width:960px;
padding:0px;
margin:0px auto;
background-color:#d9e7d9;
border: 0px;
}

#masthead_01 {
float:left;
width:300px;
height:80px;
background-color:#658a65;
border:0px dashed blue;
}

#masthead_02 {
float:left;
width:300px;
height:80px;
background-color:#82a682;
border:0px dashed blue;
}

#masthead_03 {
float:left;
width:295px;
height:80px;
background-color:#9eba9e;
border:0px dashed blue;
}

#masthead_04 {
float:left;
width:65px;
height:80px;
background-color:#9eba9e;
border:0px dashed blue;
}

#pagetitleDiv {
float:left;
width:960px;
border-top:1px solid #333;
background-color:#ccc;
}

#leftnavDiv {
float:left;
width:160px;
border:0px solid #f00;
background-color:#EBF4EB;
}

#pagehdrDiv {
width:763px;
margin-top:20px;
margin-left:-10;
background-color:#f0f0f0;
border:0px dashed red;
}

#contentDiv {
float:left;
width:770px;
padding:0px 10px 10px 20px;
border:0px solid #333;
background-color:#fff;
}

#footerDiv {
float:left;
width:780px;
margin:0px 0px 40px 160px;
padding:0px 20px 20px 0px;
border-top:01px dashed #ccc;
background-color:#fff;
}





/* ------------------------------ART--------------------------------------------*/


.featureImg {
width:300px;
height:175px;
border:0px;
margin: 0px 10px 10px 10px;
}




/* ----------------------------------COPY----------------------------------------*/




p, li {
font-family: verdana, arial, helvetica, sans-serif;
color: #333;
font-size: 0.875em;
/*font-size: small !important;
font-size: x-small;*/
line-height: 1.6;
}

h3 {
font-family: verdana, arial, helvetica, sans-serif;
color: #333333;
font-size: 0.925em;
/*font-size: large !important;
font-size: medium;*/
font-weight: bold;
line-height: 1.6;
}

p.subhead {
font-family: verdana, arial, helvetica, sans-serif;
color: #333333;
font-size: 0.925em;
font-weight: bold;
line-height: 1;
text-decoration: none;
}

.bodycopy {
font-family: verdana, arial, helvetica, sans-serif;
color: #333333;
font-size: 0.875em;
line-height: 1.5;
}

.copyright {
color: #666666;
font-size: 0.7em;
line-height: 1;
}

a:link {
color: #163074;
text-decoration: underline;
}

a:active, a:hover {
color: #990e2f;
text-decoration: underline;
}

a:visited {
color: #0e683f;
text-decoration: underline;
}




/*
RESPONSIVE
There are three breaks, seen on the nav. Desktop includes windsock and phone number. Tablet includes location. Mobile swaps out left navigation for tiny nav.

/* ---------------------------DESKTOP-----------------------------------------------*/



@media screen and (min-width: 991px) {

#masthead_bg {
display:none;
}

#tinynavDiv {
display:none;
}

/*tinynav*/
#nav {
display:none;
}

.featureImgTop {
display:none;
}

}/*end*/



/* ------------------------------DESKTOP 990--------------------------------------------*/



@media screen and (max-width: 990px) {

#live960 {
width:800px;
margin:0px auto;
border: 0px dashed red;
}

#masthead_02 {
display:width:100%;
}

#masthead_03 {
display:none;
}

#masthead_04 {
display:none;
}

#masthead_bg {
background-color:#82a682;
height:80px;
}

#pagetitleDiv {
width:100%;
}

#tinynavDiv {
display:none;
}

#nav {
display:none;
}

#contentDiv {
width:610px;
/*max-width:560px;*/
float:right;
border: 0px dashed green;
}

#bodyDiv {
width:540px;
border: 0px dashed blue;
}

#pagehdrDiv {
width:98%;
border: 0px dashed blue;
}

#pagehdr_grad {
width:100px;
border: 0px dashed green;
}

#footerDiv {
width:570px;
}

.featureImgTop {
display:none;
}

}/*end*/




/* ------------------------------------
SUB 700
100% masthead 1
TINY NAV APPEARS
SWAP LEFT AND TOP FEATURE IMAGES
--------------------------------------*/


@media screen and (max-width: 768px) {

#live960 {
width:100%;
}

#masthead_01 {
width:100%;
}

#masthead_02 {
display:none;
}

#masthead_03 {
display:none;
}

#masthead_04 {
display:none;
}

#masthead_bg {
display:none;
}

#tinynavDiv {
display:block;
width:100%;
margin: 10px 0px 10px 10px;
}

#nav {
    .tinynav { display: block }
    #nav { display: none }
}

#leftnavDiv {
display:none;
}

#pagetitleDiv {
display:none;
}

#pagehdrDiv {
width:94%;
background-color: #666;
}

#pagehdr_grad {
display:none;
}

#footerDiv {
display:none;
}

#contentDiv {
width:90%;
margin-right: 20px;
}

#bodyDiv {
width:90%;
float:left;
background-color: #fff;
border: 0px dashed #ccc;
}

.featureImg {
width:260px;
height:155px;
border:0px;
margin: 0px 10px 10px 10px;
}

.featureImgTop {
display:none;
}


}/*end*/





/* ------------------------------------
iPhone Plus 414px
100% masthead 1
TINY NAV APPEARS
SWAP LEFT AND TOP FEATURE IMAGES
--------------------------------------*/


@media screen and (max-width: 414px) {

#live960 {
width:100%;
}

#masthead_01 {
width:100%;
}

#masthead_02 {
display:none;
}

#masthead_03 {
display:none;
}

#masthead_04 {
display:none;
}

#masthead_bg {
display:none;
}

#tinynavDiv {
display:block;
width:100%;
margin: 10px 0px 10px 10px;
}

#nav {
    .tinynav { display: block }
    #nav { display: none }
}

#leftnavDiv {
display:none;
}

#pagetitleDiv {
display:none;
}

#pagehdrDiv {
width:94%;
background-color: #666;
}

#pagehdr_grad {
display:none;
}

#footerDiv {
display:none;
}

#contentDiv {
width:83%;
/*border: 1px dashed red;*/
}

#bodyDiv {
width:90%;
float:left;
background-color: #fff;
border: 0px dashed #ccc;
}

.featureImg {
width:260px;
height:155px;
border:0px;
margin: 0px 10px 10px 10px;
}

.featureImgLeft {
display: none;
}

.featureImgTop {
display: block;
}

}/*end*/







