/* link styles */

a:active { color: #00539F; text-decoration: underline; }
a:link    { color: #00539F; text-decoration: underline; }
a:visited { color: #00539F; text-decoration: underline; }
a:hover     { color: #ffffff; text-decoration: underline; }

a.menu:active { color: #ffffff; text-decoration: none;  font-weight: bold;}
a.menu:link    { color: #ffffff; text-decoration: none;  font-weight: bold;}
a.menu:visited { color: #ffffff; text-decoration: none;  font-weight: bold;}
a.menu:hover     { color: #ffffff; text-decoration: none;  font-weight: bold;}

a.photos { color: #C6701A; text-decoration: underline;}
a.photos:active { color: #C6701A; text-decoration: underline;}
a.photos:link    { color: #C6701A; text-decoration: underline;}
a.photos:visited { color: #C6701A; text-decoration: underline;}
a.photos:hover     { color: #000000; text-decoration: none;}

a.footer:active { color: #ffffff; text-decoration: none; }
a.footer:link { color: #ffffff; text-decoration: none; }
a.footer:visited { color: #ffffff; text-decoration: none; }
a.footer:hover { color: #ffffff; text-decoration: underline; }

/* headings */
h1, h2, h3, h4, h5, h6 {
display: inline; 
font-weight: bold; 
}

h1  {color: #C6701A; font-size: 1.8em;}
h2  {color: #C6701A; font-size: 1.5em; }
h3  {color: #C6701A; font-size: 1.3em; }
h4  {color: #C6701A; font-size: 1em; }
h5  {font-size: .8em; }
h6  {font-size: .7em; }

/*body elements*/
.aligned-img { float: right; }/*this is for wrapping an image and making text wrap around it right aligned*/


body{
margin: 0px; 
padding: 0px;
background:  url("images/bg.jpg");
background-color: #B9D3F8;
font-family: verdana, arial, Helvetica, sans-serif;
}

.header img {
 width: 100%;
 height: auto;
}

.header, .container {
width: 100%; 
max-width: 960px;
}

.header{
margin: 0px auto;
padding: 0px;
}

.container {
margin: 0 auto;
padding: 0px;
background: #DFDFDF;
}

.sidebar {
width: 24%;
/*max-width: 230.4px;*/
padding: 0px;
margin: 0 auto;
float: left;
font-size: .8em;
}

.contact {display: none;}

.content {
border-top-left-radius: 30px 30px;
border-bottom-left-radius: 30px 30px;
height: 100%;
min-height: 450px;
width: 72%;
/*max-width: 710.4px;*/
padding: 2%;
margin: 0 auto;
float: right;
background: #ffffff;
font-size: .85em;
}

.footer {
padding: 5px 0px 5px 0px;
margin: 0px auto;
width: 100%;
clear: both;
text-align: center;
font-size: .7em;
}

.info-box {
color: #ffffff; 
width: 80%;
font-size: .85em;
border: 2px solid #ffffff; 
background-color: #BC7D3F;
padding: 6%;
margin-left:  auto;
margin-right:  auto;
border-radius: 25px 25px;
}

td.gallery {padding: 0px 3px 22px 3px;}
td.gallery img {max-width: 95%;} /*this keeps gallery images from floating off screen while still side by side */
.gallery img {max-width: 95%;} /*this keeps gallery images from floating off screen while still side by side within a div vs td */

/* navigation */
#nav ul {padding-left: 4%; padding-right: 4%;}

#nav ul, li {
list-style-type: none;
margin-left:  auto;
margin-right:  auto;
margin-bottom: 4px;
border-radius: 10px 10px;
text-overflow:ellipsis;
white-space:nowrap;
}

#nav li {
display: block;
background: #BC7D3F;
max-height: 35px;
border: 2px solid #ffffff;
}

#nav ul li a, a:hover {
display: block;
padding: 10px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
border-radius: 10px 10px;
}

#nav ul li a:hover {
background: #CC9966;
max-height: 35px;
text-overflow:ellipsis;
white-space:nowrap;
}

hr.light{
border: 0;
height: 1px;
color: #00539F;
background-color: #00539F;
}

/* for some reason i need to clear the styles for a and a:hover above for body links */
 a a.menu, a.menu:active, a.menu:link, a.menu:visited,  a.menu:hover,  a.submenu, a.submenu:active, a.submenu:link, a.submenu:visited,  a.submenu:hover, a.photos:active, a.photos:link, a.photos:visited, a.photos:hover {
display: inline;
padding: 0px;
text-decoration: none;
font-weight: bold;
background: none;
height: auto;
font-size: .95em;
}

ul.list li {
white-space:normal;
padding-bottom: 8px;
list-style-image: url(images/unchecked_checkbox_sm.png);
}

ul.listb {
white-space:normal;
padding-bottom: 8px;
}

ul.listb li {
white-space:normal;
padding-bottom: 3px;
padding-top: 4px;
}

/* media queries */

/*first we set things to change when secreen dis below 760px */
@media only screen and (max-width:760px) {

.center {text-align: center; margin-left: auto; margin-right: auto;}

.header, .container {
max-width: 100%;
}

.content {
max-width: 90%;
padding: 5%;
float: none;
border-radius: 25px 25px;
}

.info-box { display: none;}/*hide the info box below the navigation menu for phones to save space*/
.aligned-img { text-align: center; float: none; margin-left:  auto; margin-right:  auto;} /*make the image float 
make side bar become vertically aligned under header*/
  .aligned-img img {max-width: 90%;}
}

/*here we make the sidebar menu become a horizontally centered menu under the header*/
@media screen and (min-width:480px) and (max-width:760px) {
  .container, .header, .content, .footer {width: 95%;}

.sidebar {
width: 100%;
max-width: 100%;
padding: 0px;
margin: 0px auto;
margin-left: -9px;
float: none;
font-size: .8em;
text-align: center;
}


#nav {
margin-left:  auto;
margin-right:  auto;
margin-top: 0px;
margin-bottom: 0px;
}


/* navigation - we want the buttons to be diplayed horizontally hugged up against the header */
/*
#nav ul {
vertical-align: top;
display: table; 
text-align: center;
width: 95%; 
margin-left:  auto;
margin-right:  auto;
}


#nav li {
display: table-cell;
width: 16.7%;
}
*/

#nav ul li a:hover {
height: 100%;
}

.info-box { display: none;}/*hide the info box below the navigation menu for phones to save space*/
}

/*finally we address just the smallest screen sizes*/
@media screen and (max-width:479px) {
  .content, .sidebar {
    float: none;
    width: auto;
  }
  
.sidebar {margin-left: auto; margin-right: auto;  text-align: center;}
.sidebar, .container {width:100%; max-width: 100%; margin-top: 0px;}
.info-box { display: none;}/*hide the info box below the navigation menu for phones to save space*/
.header, .footer  {display: none;}/*hide the header and footr for phones to save space*/
.content {font-size: 1em;}
body{
background: #D5DDEA;
}

#nav li   {
font-size: 1.2em;
}


}

@media screen and (max-width:600px) {
table.gallery, tr.gallery, td.gallery {display: block;}

.contact {display: block; text-align: center; font-size: 1.2em;}

}