/* link styles */

a:active { color: #7D1121; text-decoration: underline; }
a:link    { color: #7D1121; text-decoration: underline; }
a:visited { color: #7D1121; text-decoration: underline; }
a:hover     { color: #AC192F; 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.submenu { color: #1B5942; text-decoration: none;}
a.submenu:active { color: #1B5942; text-decoration: none;}
a.submenu:link    { color: #1B5942; text-decoration: none;}
a.submenu:visited { color: #1B5942; text-decoration: none;}
a.submenu:hover     { color: #1B5942; 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: #7D1121; font-size: 1.9em;}
h2  {color: #7D1121; font-size: 1.6em; }
h3  {color: #1B5942; font-size: 1.3em; }
h4  {color: #1B5942; 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*/
.aligned-img {filter: drop-shadow(2px 2px 6px rgba(0,0,0,.5));}
.personnel-img {box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);}
.personnel {font-size: .98em; padding: 0px 10px 0px 10px;}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */

}

body{
margin: 0px; 
padding: 0px;
background:  url("images/bg.jpg");
background-color: #000000;
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;
}

.header-mobile{
display: none;
}

.container {
margin: 0 auto;
padding: 0px;
background: #000000;
/*background: #7D1121;*/
}

.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: .8em;
}

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

.info-box {
color: #770013; 
width: 80%;
border: 2px solid #ffffff; 
background-color: #D8D7DA;
/*background-color: #DBCBCB;*/
padding: 6%;
margin-left:  auto;
margin-right:  auto;
border-radius: 25px 25px;
}


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

.center {margin: 0px auto;}

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: #D8D7DA;
max-height: 35px;
border: 2px solid #ffffff;
}

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

#nav ul li a:hover {
background: #D8D7DA;
max-height: 35px;
text-overflow:ellipsis;
white-space:nowrap;
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
transform: scale(1.05);
}

hr.light, hr.light90 {
border: 0;
height: 1px;
color: #770013;
background-color: #770013;
}

hr.light90{
width: 90%;
}


/* 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 {
display: inline;
padding: 0px;
text-decoration: none;
font-weight: bold;
background: none;
height: auto;
}

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

/* 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) {

.form table, td, tr {
display: block;
padding-bottom: 2%;
}

.personnel table, td, tr {
display: block;
padding-bottom: 2%;
}
.personnel-img {max-width: 95%;}

INPUT, SELECT, TEXTAREA {
height: 35px;
}

  .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, .header { display: none;}/*hide the info box below the navigation menu for phones to save space*/
/*hide the header and footr for phones to save space*/
.header-mobile {width: 90%; margin: 0px auto; display: block;}
.content {font-size: 1em;}
body{
background: #E49246;
background:  url("images/bg.jpg");
}

#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;}

}