/*
Red #BF0C45
*/


@import url(http://fonts.googleapis.com/css?family=Oswald:400,300);

/* --------------------- GLOBAL FORMATING ----------------- */



body {
    margin:0 auto;
    font-family: Verdana, helvetica, Sans-serif;
    font-size:12pt;
    line-height:180%;
    color:#777;
    background-color:white
    }

@media(max-width:800px){/* Collapsed menu padding */
                        body {width:100%;margin:0 auto;font-size:15px;} }

/* tells browsers that don't read html 5 tags to render like divs */
header, footer, aside, nav, article, section {display: block; margin: 0; padding: 0;}

/* clears containers with floated elements, no need for extra markup! */
.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clear {clear:both}
.clearing{width:100%;height:10px;background-color:RED;display:block; }
    
    

   
    /* ----------------------- HEADER --------------------------------- */ 

header {background-color:#F8F8F4;background-image:url('images/BG.jpg'); background-repeat:repeat; } 
   
#login            {width:100% }    

#login-inner     {width:1000px; margin:0 auto 0 auto; height:33px; text-align:right;  padding-top:5px}
                 @media only screen and (max-device-width: 970px) { #login-inner {width:100%; height:45px; padding-top:15px; margin-right:50px}  }
             
#login-inner h1 {color:#999999; font-size: 9pt; font-family:Verdana, helvetica, sans-serif; text-transform:none; margin-left:300px}  
                @media only screen and (max-device-width: 970px) { #login-inner h1 {text-align:center; margin:0 10px 10px 10px; line-height:110%}  }           

#head           {width:100%; border:1px transparent dashed }
    
#head-inner     {width:1000px; margin:0 auto; }    
                @media only screen and (max-device-width: 970px) { #head-inner {width:100%; margin:10px 0 20px 0;}  }
                
                
            
#logo-area      {width:100%; margin-top:40px; text-align:right; color:#005263; padding-top:5px; font-family: Oswald, Sans-serif; font-size:1.8em; border:0px green dashed }   
                @media only screen and (max-device-width: 500px) { #logo-area {margin:0; text-align:center;}  } 
                  
#logo           {float:left; width:220px; margin-top:-55px; padding-bottom:20px; }
                @media only screen and (max-device-width: 500px) { #logo {float:none; margin:-10px auto 0 auto; display:inline-block;}  }
                
#header_phone {margin-top:15px; font-size:28pt; color:#666666 }
              @media only screen and (max-device-width: 500px) { #header_phone {margin-top:-5px; padding-right:10px; margin-bottom:10px; font-size:24pt}  }
              
#header_phone img {width:40px; margin-bottom:-15px }
                  @media only screen and (max-device-width: 500px) { #header_phone img {width:30px; margin-bottom:-7px}  }              
      
#color-bar       {width:100%; background-color:#BF0C45; }   
#color-bar-inner {width:1000px; 
                  height:30px; 
                  padding-top:3px;
                  margin-left:auto;
                  margin-right:auto;
                  background-color:#BF0C45; 
                  text-align:right; 
                  letter-spacing:4px;
                  font-size:1.2em;
                  font-family: Oswald, Sans-serif;
                  font-weight:300; 
                  color:white; 
                  text-transform:uppercase;
                  border:0px black dashed
                  }
                  @media only screen and (max-device-width: 970px) { #color-bar-inner {width:100%; text-align:center; font-size:11pt; letter-spacing:3px; }  }




  /* +++++++++   MENU TWEEKS    +++++++++ */                
                  
#menu-container-outer {width:100%; background-color:#000;}  
 
#menu-container {width:1000px; min-height:40px; background-color:#005263; margin:0 auto; }
                @media only screen and (max-device-width: 970px) { #menu-container {width:100%}  }
           
   
#home-button {padding-left:0;margin-left:0 }

#home-button-left {padding-left:0;margin-left:-12px } 
                  @media only screen and (max-device-width: 500px) { #home-button-left {margin-left:20px}  }
.dropdown-menu li {padding-left:10px }

 /*----- General formating ------*/
 
 #page-container {border:0px red solid; width:1000px; margin:30px auto;}
 @media only screen and (max-device-width: 970px) { #page-container {width:100%}  }
 
img {border:0}

h1 {
   font-size: 28pt;
   color:#999999;
   font-weight:normal;
   letter-spacing:-1px;
   word-spacing:3px;
   margin-top:10px;
   margin-bottom:10px;
   line-height:140%;
   font-family: Oswald, Sans-serif;
   font-weight:normal;
   }
@media only screen and (max-device-width: 970px) { h1 {font-size:20pt; margin-left:10px; margin-right:10px}  }

h2 {
   font-size: 20pt;
   color:#005263;
   font-family: Oswald, Sans-serif;
   font-weight:400;
   line-height:140%;
   }
@media only screen and (max-device-width: 970px) { h2 {font-size:2em; margin-left:10px}  }

h3 {
   font-size: 16pt;
   color:#005263;
   line-height:140%;
   font-family: Verdana, helvetica, Sans-serif;
   letter-spacing:-1px;
   }
@media only screen and (max-device-width: 970px) { h3 {font-size:1.5em; margin-left:10px; letter-spacing:normal;}  }  
 
h4 {
   font-size: 12pt;
   color:#BF0C45;
   line-height:140%;
   font-family: Verdana, helvetica, Sans-serif;
   margin-bottom:0;
   }
@media only screen and (max-device-width: 970px) { h4 {font-size:1.2em; margin-left:10px}  }

p  {
   font-size:12pt;
   color:#777;
   line-height:140%;
   margin-left:0;
   font-family: Verdana, helvetica, Sans-serif;
   }
   @media only screen and (max-device-width: 970px) { p {font-size:12pt; margin-left:10px; margin-right:10px}  }
   
ul {margin-top:5px }

   

#page-container li  {font-size:12pt;color:#777; font-family: Verdana, helvetica, Sans-serif; text-transform:none;}
                @media only screen and (max-device-width: 970px) {#page-container li {font-size:1.2em; font-family: Verdana, helvetica, Sans-serif;}  }



    a  { color:#777; text-decoration:none; font-size:1em; font-family: Verdana, helvetica, Sans-serif; }
    a:visited { color:#192287; }
    a:hover { color:#999; }
    a:active { color:#BD1788; }
@media only screen and (max-device-width: 970px) { a {font-size:1.2em;}  }    

hr.style-five { border: 0; height: 0; /* Firefox... */ box-shadow: 0 0 10px 1px black;margin:25px auto;width:90% } 
hr.style-five:after { /* Not really supposed to work, but does */ content: "\00a0"; /* Prevent margin collapse */ }




/*  -------- MOBILE ONLY ---------  */
    
                           

@media only screen and (max-device-width: 970px) { .screen-only {display:none;} }     


.Page-No-Bottom {float:right; }



/* ---------------- Main Menu ------------------*/







/* ----------------  Home page ------------------*/

#wow-outer { width:100%; background-color:#BF0C45; margin-top:-20px; background-image:url('images/wow-bg.png'); background-repeat:repeat-x;}

#wow {width:100%; z-index:1; }

#shadow {width:100%; margin:-10px 0 -85px 0; z-index:100; }
        @media only screen and (max-device-width: 970px) { #shadow {margin:-10px 0 -20px 0 ;line-height:12px}  }
        
#home_button {padding-left:0;margin-left:-12px; }
             @media only screen and (max-device-width: 970px) { #home_button {padding-left:40px;margin-left:0}  }
             
             
#data-container-home {
    width:1000px;
    display:table;
    border-collapse: separate;
    border-spacing:10px 10px;
    z-index:1;
    }
    @media only screen and (max-device-width: 970px) { #data-container-home {display:inline;width:100%}  }
    
     .col1-home {
     display:table-cell;
     width:25%;
     text-indent:10px;
     border:1px #192287 solid;
     position: relative;
     background-color:#F8F8FF;
     }
     @media only screen and (max-device-width: 970px) { .col1-home {display:block;width:90%;margin:0 auto 20px auto;}  }
     
     .col2-home {
     display:table-cell;
     width: 25%;
     text-indent:10px;
     border:1px #192287 solid;
     position: relative;
     background-color:#F8F8FF;
     }
     @media only screen and (max-device-width: 970px) { .col2-home {display:block;width:90%;margin:0 auto 20px auto;}  }
     
     .col3-home {
     display:table-cell;
     width: 25%;
     text-indent:10px;
     border:1px #192287 solid;
     position: relative;
     background-color:#F8F8FF;
     }
     @media only screen and (max-device-width: 970px) { .col3-home {display:block;width:90%;margin:0 auto 20px auto;}  }
     
     .col4-home {
     display:table-cell;
     width: 24%;
     text-indent:10px;
     border:1px #192287 solid;
     position: relative;
     background-color:#F8F8FF;
     }
     @media only screen and (max-device-width: 970px) { .col4-home {display:block;width:90%;margin:0 auto 20px auto;}  }
     
    .row-home {
     display:table-row;
     margin-bottom: 2px;
     border-bottom:3px white solid;
     }

     .col-heading {
     width:100%;
     background-color:#192287;
     height:32px;
     color:white;
     font-size:1.2em;
     text-indent:1em;
     font-family: Oswald, Sans-serif;
     font-weight:normal; 
     padding-top:7px;
     padding-bottom:2px;
     }

     .col-type {
     padding:0 10px 0 10px;
     line-height:130%;
     text-indent:0;
     margin-bottom:30px;
     
     }

     .col-image {
     border:1px solid black; 
     margin:0 10px 15px 10px; 
     display:block;
     height:90px;
     background-color:white;
     }
     
     .col-more {
     margin-top:5px;
     position:absolute; 
     bottom:0}

/* -------   Contact Page  ---------*/


.address {float:left; width:620px; border:0px pink dotted }
          @media only screen and (max-device-width: 520px) { .address {width:100%}  }


.contact-form { float:right; width:350px; margin-bottom:20px; border:0px dotted}
                @media only screen and (max-device-width: 520px) { .contact-form {float:none; width:100%}  }

#map {width:620px; height:400px; margin-bottom:20px;}

form input[type=text] {width:90%; color:#888888 }

#message {padding:2px; border:1px solid #CCCCCC; width:100%; height:100px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13pt; color:#888888}

@media only screen and (max-device-width: 520px) { #map, iframe {width:85%}  }

@media only screen and (max-device-width: 970px) { input[type=text]{font-size:18px;width:90%; } 
                                                   textarea{ width:90%; }
                                                   input[type=submit] {font-size:13pt }
                                                   }



/* --------------------- FOOTER ----------------- */

#footer-outer{
           width:100%;
           background-color:#F8F8F4;
           background-image:url('images/BG.jpg');
           }

   #footer-inner{
           width:1000px;
           padding-top:3px;
           margin:0 auto;
           min-height:175px;
           }
           @media only screen and (max-device-width: 500px) { #footer-inner {width:100%;padding-bottom:20px; min-height:100px;}  }
           
#address {color:#005263; float:right; width:140px; border:0px black dotted;}   
                @media only screen and (max-device-width: 970px) { #address {width:100%; margin-left:10px; margin-right:10px; margin-top:10px;}  }
                
#footer-logo {float:right;width:167px; margin:10px 0 2px 0; text-align:right; border:0px red dashed }
             @media only screen and (max-device-width: 970px) { #footer-logo {padding-right:0; margin-top:0; width:120px; margin-bottom:10px}  }                
                
#address-text {float:right; font-size:9pt; line-height:160%; width:160px; border:0px green dashed}
              @media only screen and (max-device-width: 970px) { #address-text {float:left; font-size:0.9em; width:45%; padding-left:15px}  }

#phone-text {color:#000; line-height:160%; font-size:13pt; float:right; width:180px; margin-top:1px; border:0px green dashed; text-align:right; font-family: Oswald, Sans-serif; }

             /* @media only screen and (max-device-width: 970px) { #phone-text {float:left; margin-top:-40px; font-size:0.9em; width:100%; padding-left:15px; margin-bottom:0;}  } */ 
             @media only screen and (max-device-width: 970px) { #phone-text {float:left; font-size:14pt; width:70%; margin:0 0 0 -25px; }  }             
                
             @media only screen and (max-device-width: 970px) { #phone-text span a {text-decoration:none;color:#000000}  }
             
#phone-text span {font-size:17pt }    
                       

/*  Page links on Footer  */                
.footer-links {float:left; margin-top:30px; width:720px;}
               @media only screen and (max-device-width: 970px) { .footer-links {display:none;}  }
               
.footer-links    a  { color:#777; line-height:140%; text-decoration:none; font-size:0.7em; font-family: Verdana, helvetica, Sans-serif;}
.footer-links    a:visited { color:#000; font-family: Verdana, helvetica, Sans-serif;}
.footer-links    a:hover { color:#000; font-family: Verdana, helvetica, Sans-serif;}
.footer-links    a:active { color:#000; font-family: Verdana, helvetica, Sans-serif;}


#ideo {
      width:1000px;
      margin:5px auto 0 auto;
      color:#A6A6A6;
      border:0px red dotted;
      padding:0;
      }
@media only screen and (max-device-width: 500px) { #ideo { width:100%; margin:10px 0 20px 10px;}  }      
      
#ideo a {
	color:#A6A6A6;
    text-decoration:none;
    font-size:8pt;
    font-family: Verdana, helvetica, Sans-serif;
    padding:0;
    }
#ideo a:hover {
	color:black;
	text-decoration:none;
    }
@media only screen and (max-device-width: 500px) { #ideo a {font-size:10px; padding:0}  }  
  
#ideo p { color: white; text-align:left; font-family: Verdana, helvetica, Sans-serif; padding:0;}


 /* ---------------- Page up Button for computer only  ----------------  */     
#tab {margin-right:-4px }
     @media only screen and (max-device-width: 980px){#tab {display:none;}}
  
#tab button{
      
      background-color:#000;
      border-top:1px #000 solid; 
      border-left:1px #000 solid;
      border-bottom:1px #000 solid;
      border-top-left-radius:10px;
      border-bottom-left-radius:10px;
      position:fixed; 
      bottom:50px; 
      right:0; 
      text-align:right;
      padding-right:10px;
      padding-left:10px;
      padding-top:5px;
      padding-bottom:7px;
      box-shadow: 6px 6px 5px #888888;
      font-size:0.9em;
      color:white;
      }
       @media only screen and (max-device-width: 520px){#tab button {display:none;}}


.caret2{display:inline-block;
        width:0;height:0;margin-left:2px;vertical-align:middle;
        border-bottom:8px white solid;
        border-right:8px solid transparent;
        border-left:8px solid transparent
        }
        @media only screen and (max-device-width: 520px){.caret2 {display:none;}}

        
 /* ---------------- Page up Button for phone  ----------------  */ 
      
.page-up {display:none;} 
         @media only screen and (max-device-width: 500px){.page-up {display:block; float:left; margin:20px 0 0 20px;}}
.caret3  {display:inline-block;
         width:0;height:0;
         margin-left:2px;
         vertical-align:middle;
         border-bottom:8px black solid;
         border-right:8px solid transparent;
         border-left:8px solid transparent}
 @media only screen and (max-device-width: 980px){.page-up button {color:black; padding-bottom:10px}}