/*
Brown:#281c06; 
Darker Brown:#35260c;
Blue #3f657c;
*/

/********************************************
******** Reset ******************************
*********************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol,  li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
}

/********************************************
******* Page Style and Common HTML **********
*********************************************/
body 
{
  font-size:14pt; 
  font-family:Arial;
  line-height:1.428;
  background-image:url("../images/DesignElements/BgContent.jpg"); 
  background-repeat:repeat-x repeat-y;
}

.AdjustableWidth
{
  width:100%;
  margin:0 auto;
}

h1
{
  font-size:1.5em;
  font-weight:bold;
  color:#3f657d;
}

h2
{
  font-size:1em;
  font-weight:bold;
  color:#3f657d;
}

h3
{
  font-size:1em;
  color:#3f657d;
  text-align:center;
}

img
{
  margin:0 auto;
}

.Spacer
{
  margin-top:50px;
}

/********************************************
************ Banner *************************
*********************************************/
.banner
{
  width:100%;
  margin:0 auto;
  
}

.banner img
{
  width:100%;
  margin:0 auto;
  border:3px solid #3f657c;
}

/********************************************
****** Sets Width for desktop ***************
*********************************************/
@media only screen and (min-width:1200px)
{
  .AdjustableWidth
  {
    width:1200px;
    margin:0 auto;
    overflow:hidden;
  }
}

/*************************************************
**************** Header Area *********************
**************************************************/
header
{
  width:100%;
  overflow:hidden;
}

.LogoArea, .PhoneArea
{
  clear:both;
  display:block;
  width:95%;
  margin:0 auto;
  padding:25px 0px 0px 0px;
}

.PhoneArea
{
  padding:10px 0px 10px 0px;
}

.LogoArea img 
{
  width:auto;
  margin:0 auto;
  display:block;
}

.PhoneArea p
{
  text-align:center;
}

.PhoneArea a:link, .PhoneNum a:visited, .PhoneNum a:hover
{
  font-size:1.5em;
  text-decoration:none;
  color:#3f657c;

}

.PhoneNum a:hover
{
  text-decoration:underline;
}

@media only screen and (min-width:768px)
{  
  .LogoArea
  {
    clear:none;
    width:55%;
    float:left; 
    padding:25px 0px 20px 0px;    
  }
  
  .PhoneArea
  {
    clear:none;
    width:40%;
    float:right;
    padding:40px 0px 20px 0px;
  }

  .LogoArea img 
  {
    float:left;
    padding-left:20px;
  }
}


/*************************************************
********** Mobile/Desktop Toggle Menu ************
**************************************************/
.TopLinksToggleArea
{
  clear:both;
  width:15%;
  margin:0px auto;
  display:block;
  margin-top:10px;
  margin-bottom:10px; 
}

.TopLinksToggleArea img
{
  width:auto;
  margin:0px auto;
  display:block;
}

.MobileLinks
{ 
  display:block;
}

.DeskLinks
{
  display:none;
}

@media only screen and (min-width:480px)
{
  .TopLinksToggleArea
  {
    display:none;
  }

  .MobileLinks
  {
    display:none;
  }

  .DeskLinks
  {
    display:block;
  }
}

/**************************************************
*********** Mobile Navigation *********************
**************************************************/
nav
{
  clear:both;
  width:100%;
  display:block;
}

.navwidth
{
  width:100%;
}

nav a:link, nav a:visited, nav a:hover
{ 
  clear:both;
  width:100%;
  font-size:1em; 
  color:#cccccc;
  background-color:#3f657c;
  text-decoration:none;
  text-align:center;
	display:block;
  margin:1px 0px 1px 0px;
}

nav a:hover
{
  color:#ffffff;
}
 
/**************************************************
*********** Desktop Navigation ********************
**************************************************/
@media only screen and (min-width:480px)
{
  nav
  {    
    background-color:#3f657c;
  }
  
  .navwidth
  {
    width:480px;
    margin:auto;
  }
  
  nav a:link, nav a:visited, nav a:hover
  { 
    clear:none;
    display:inline;
    color:#ffffff;
    padding:0px 23px 0px 23px;
  }
  
  nav a:hover
  {
    text-decoration:underline;
  }
}

@media only screen and (min-width:768px)
{
  .navwidth
  {
    width:700px;
  }
  
  nav a:link, nav a:visited, nav a:hover
  {
    padding:0px 50px 0px 50px;
  } 
}

@media only screen and (min-width:1000px)
{
  .navwidth
  {
    width:960px;
  }
  
  nav a:link, nav a:visited, nav a:hover
  {
    padding:0px 85px 0px 85px;
  } 
}

@media only screen and (min-width:1200px)
{
  .navwidth
  {
    width:1140px;
  }
  
  nav a:link, nav a:visited, nav a:hover
  { 
    font-size:1.25em;
    padding:0px 85px 0px 85px;
  }
}


/*************************************************
*********** Main Content Area ********************
**************************************************/
.ContentArea
{
  clear:both;
  width:100%;
  margin:0 auto;
  display:block;
  overflow:hidden;
  padding:25px 0px 0px 0px; 
}

.ContentLeft, .ContentRight, .ContentFull
{
  clear:both;
  width:95%;
  margin:0 auto;
  display:block;
}
  
.ContentRight img
{
  width:80%;
  margin:0 auto;
  display:block;
  border:3px solid #3f657c;  
}

.CTA
{
  clear:both;
  margin:0 auto;
  padding:25px 0px 0px 0px;
}

.CTA img 
{
  width:auto;
  margin:0 auto;
  display:block;
}

@media only screen and (min-width:480px)
{
  .ContentRight img
  {
    width:70%;
  }
}

@media only screen and (min-width:600px)
{
  .ContentRight img
  {
    width:55%;
  }
}

@media only screen and (min-width:675px)
{
  .ContentRight img
  {
    width:50%;
  }
}


@media only screen and (min-width:768px)
{
  .ContentFull
  {
    float:left;
    width:98%;
    padding:10px 5px 10px 15px; 
  }
  
  .ContentLeft
  {
    clear:none;
    float:left;
    width:65%;
    padding:10px 5px 10px 15px; 
  }

  .ContentRight
  {
    clear:none;
    float:right;
    width:30%;
    padding:25px 5px 10px 5px; 
  }
  
  .ContentRight img
  {
    width:auto;
  }
}

@media only screen and (min-width:900px)
{  
  .ContentRight img
  {
    width:95%;
  }
}

@media only screen and (min-width:1050px)
{  
  .ContentRight img
  {
    width:85%;
  }
}

@media only screen and (min-width:1200px)
{  
  .ContentRight img
  {
    width:75%;
  }
}

/*************************************************
************** Gallery Area **********************
**************************************************/
.GalleryArea
{
  clear:both;
  width:100%;
  display:block;
  overflow:hidden;
  padding:25px 0px 0px 0px;
  /*background-color:black*/
}

.GalleryArea h2, .GalleryArea h3
{
  text-align:center;
}

.GalleryArea p
{
  padding:15px 10px 5px 10px;
  text-align:center;
}
 
.GalleryBox
{
  clear:both;
  display:block;
  width:100%;
  margin:0 auto;
  padding:15px 5px 15px 5px; 
}

.GalleryBox img
{
  width:70%;
  display:block;
  margin:0 auto;
  border:3px solid #3f657c;
}

@media only screen and (min-width:480px)
{
  .GalleryBox img
  {
    width:60%;
  }
}

@media only screen and (min-width:550px)
{
  .GalleryBox img
  {
    width:50%;
  }
}

@media only screen and (min-width:650px)
{
  .GalleryBox img
  {
    width:45%;
  }
}

@media only screen and (min-width:768px)
{
  .GalleryBox
  {
    clear:none;
    display:inline;
    width:33%;
    float:left;
    padding:15px 0px 15px 0px; 
  }

  .GalleryBox img
  {
    width:auto;
  }
}

@media only screen and (min-width:950px)
{
  .GalleryBox img
  {
    width:70%;
  }
}

/*************************************************
**************** Footer Area *********************
**************************************************/
footer
{
  clear:both;
  width:100%;
  overflow:hidden;
  background-color:#3f657c;
  border-top:2px solid #35260c;
  padding-bottom:20px;
}

footer img
{
  width:auto;
  display:block;
}

footer p
{ 
  font-weight:bold;
  text-align:center;
  color:#ffffff;
  padding-bottom:7px;
}

footer a, footer a:visited, footer a:hover 
{
  color:#ffffff;
}

.FooterFull
{
  clear:both;
  display:block;
  width:90%;
  margin:0 auto;
  padding-top:25px;
}