/* CSS Document */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.responsiveImg {
    width: 100%;
    height: auto;
}

.imgBorder
{
  border: 1px solid black;
}

#outerWrapper
{
  position: relative;
  margin: 0 auto;
}



.w3-tagLineFont 
{
  font-family: 'Roboto', sans-serif;  
  color: white;
  font-size: 28px;
  font-style: italic; 
  text-shadow:1px 1px 0 #000000;       
}

#headerLogo
{
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;      
}

.alignLeft
{
  text-align: left;
}

.alignRight
{
  text-align: right;
}

.alignCenter
{
  text-align: center;
}

.alignJustify
{
  text-align: justify;
}

.center-me {
  margin: 0 auto;
}

#myTopnav
{
  /*box-shadow: 0px 5px 5px black;*/
  border-bottom: 1px solid #333;
}

.topnav {
  overflow: auto;
  background-color: #ddd;
  /*border-bottom: 2px solid red;*/

}

.topnav a {
  float: left;
  display: block;
  /*color: #f2f2f2;*/
  color: #000000;  
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
  font-size: 16x;
}

.topnav a:hover {
  background-color: #ffee70;
  color: black;
}

.active 
{
/*  background-color: #93c5b9; */
/*  background-color: #d7e3e1; */ 
  background-color: #87CEEB;
  color: black;
}

.topnav .icon {
  display: none;
}

#mainContent
{
  padding: 10px;
  background-color: #ffffff;
}

footer
{
  background-color: #2a2d30;
  font-size: 16px;
  color: #eee;  
}

.footerHeader
{
  font-size: 16px;
  margin-bottom: 15px;
  line-height: 1.2;
  border-bottom: 1px dashed #eee;
}

/* nav related media queries ----------- begin */
/* small: 600px or less */
@media screen and (max-width: 600px) 
{
  /*.topnav a:not(:first-child) {display: none;}*/
  .topnav a {display: none;}  
  .topnav a.icon 
  {
    float: right;
    display: block;   
    background-color: #ddd;     
  }
}

/* small: 600px or less */
@media screen and (max-width: 600px) 
{
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon 
  {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    border-bottom: 1px solid #a9a9a9;
  }
}

/* meduim: 601 - 992 */
@media (max-width:992px) and (min-width:601px) 
{
  /*.topnav a:first-child {display: none;}*/
}

/* large: 993px or more */
@media screen and (min-width: 993px) 
{
  /*.topnav a:first-child {display: none;}*/
}  
/* nav related media queries ----------- end */


/* small: 600px or less */
@media screen and (max-width: 600px) 
{
  body 
  {
   /* background-color: #ffffff;*/
  }
  
  .w3-headerFont 
  {
    font-family: 'Roboto', sans-serif;  
    color: white;
    font-size: 20px;  
    text-shadow:1px 1px 0 #000000;  
    padding-top: 10px;
  }    
  
  #headerLogo
  {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;      
  }  
}

/* meduim: 601 - 992 */
@media (max-width:992px) and (min-width:601px) 
{
  body 
  {
    /*background-color: maroon;*/
  }  
  
  .w3-headerFont 
  {
    font-family: 'Roboto', sans-serif;  
    color: white;
    font-size: 28px;  
    text-shadow:1px 1px 0 #000000;  
    padding-top: 10px;
  }   
}

/* large: 993px or more */
@media screen and (min-width: 993px) 
{
  body 
  {
    background-color: lime;
	  background: #1b391b url('../img/sopine-wood-bg-3.jpg') left top repeat;
	  padding: 0;
	  margin: 0;
	  border: none;      
  }
  
  #outerWrapper
  {
	  /* box-shadow: 0 0 3px rgba(0,0,0,0.2); */
    max-width: 1050px;
  }
  
  #innerWrapper
  {
	  box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
	  border: 1px solid #333333;
    margin-top: 10px; 
    margin-bottom: 10px;  
    margin-left: 10px; 
    margin-right: 10px;
    /*border: 3px solid red;*/  
  }    
  
  #headerTextContainer
  {
    height: 70px;
    border: 0px solid orange;
    white-space: nowrap;  
  }
  
  .w3-headerFont 
  {
    font-family: 'Roboto', sans-serif;  
    color: white;
    font-size: 42px;  
    text-shadow:3px 3px 0 #000000;  
  }  
  
  .w3-phoneFont
  {
    font-family: 'Roboto', sans-serif;  
    color: white;
    font-size: 32px;
    padding-top: 8px;  
    text-shadow:3px 3px 0 #000000;  
  }    

  #tagLineTextContainer
  {
    height: 60px;
    border: 0px solid blue;
  }  
  
  
}