/*  

CORPORATE COLOURS
Blue = #15365D
Orange = #FE7B1B
Lighter Orange for Menu = #FE9547
RED = #A42634

    */


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


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

body {
    margin:0;
    font-family: veranda, helvetica, arial, sans-serif;
    font-weight:400;
    font-size:1em;
    line-height:160%;
    color:DimGray;
    background-color:white;
    -webkit-text-size-adjust: none;
    }

@media only screen and (max-device-width: 480px) { body {font-size:16px}  }

/* 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; }

.space200 {height:200px; width:20px }
@media only screen and (max-device-width: 480px) {.space200 {display:none;}  }

.space50 {height:50px; width:20px }
@media only screen and (max-device-width: 480px) {.space200 {display:none;}  }


/* ----Home Page ------ */

   


#page-container {
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    width:1000px;
    border:0px red solid;
    }
    @media only screen and (max-device-width: 480px) { #page-container {width:100%;}  }
    


/* ----- HEADER -------- */
#header-outer {
    width: 100%;
    border:0px solid green;
    background-color:white;
    }
    
    
#header {
    margin-left:auto;
    margin-right:auto;
    width: 1000px;
    min-height: 100px;
    border:0px solid pink;
    }
    @media only screen and (max-device-width: 480px) { #header {width:100%;padding-top:10px}  }
    
#header h1 {font-size:0.6em; font-family:verdana, sans-serif; text-transform:none; letter-spacing:0; color:#999999; text-align:right;}
          
.header-logo{width:239px; margin-top:0px; border:0px green solid;}
             @media only screen and (max-device-width: 480px) { .header-logo {float:none; margin:0 auto 0 auto}  }

.header-logo2{float:right; width:143px; text-align:center; margin-top:-100px; font-size:13px}
              @media only screen and (max-device-width: 480px) { .header-logo2 {float:none; margin:10px auto 0 auto;}  }
              
.logo_tag {margin:-27px 0 20px 115px; color:black; font-size:0.9em; font-weight:bold; letter-spacing:-1px; line-height:120%}
          @media only screen and (max-device-width: 480px) { .logo_tag {float:none; margin:10px auto 20px auto; letter-spacing:normal;text-align:center; width:90%}  }

/* -------  SITE WIDE TEXT SETTINGS --------   */

img {border:0 }    
@media only screen and (max-device-width: 480px) { #img {width:100%;}  }

a           {color:DimGray; font-size: 1em}
a:hover     {color:#AA2634;}
a:visited   {color:#747474;text-decoration:none;}    

h1{
   font-size:36px;
   color:Black;
   line-height:110%;
   font-family: 'Oswald', sans-serif;
   font-weight:400;
   line-height:130%;
   letter-spacing:-1px
   }
   @media only screen and (max-device-width: 480px) { h1, h2, h3, h4, h4 {padding:0 10px}  }
   @media only screen and (max-device-width: 480px) { h1 {font-size:1.5em}  }
h2{
   font-size:20px;
   color:#AA2634;
   line-height:160%;
   }
h3{
   font-size:13px;
   color:red;
   line-height:160%;
   font-weight:bold;
   }
h4{
   font-size:11px;
   color:red;
   line-height:120%;
   font-weight:bold;
   }   

p {
  color:inherit;
  line-height:160%;
  font-size:1em;
  font-weight:normal;
  }
  @media only screen and (max-device-width: 480px) { p, ul, li, ol, dl {font-size:1.2em;padding:0 10px}  }
  
ul {
  color:inherit;
  line-height:160%;
  font-size:inherit;
  font-weight:normal;
  margin-bottom:5px;
   margin-top:5px
  }
  
ol {
  color:inherit;
  line-height:160%;
  font-size:inherit;
  font-weight:normal;
  margin-bottom:5px;
   margin-top:5px;
   margin-left:20px
  }
  
li {
   margin-bottom:10px;
   margin-top:5px;
   font-size:13px;
   color:inherit;
    }
    
#page-container li {font-size:1em; }
                @media only screen and (max-device-width: 480px) { #page-container li {font-size:1.2em;padding:0 10px}  }
                
input[type=text], textarea {width: 280px; }
input[value] {color:DimGray } 


 /* ----------------------- Video Page  ------------------------------------------------ */
.small-video {width:420px; }


#table-container {
    display:table;
    width:1000px;
     margin: -15px 0 10px -10px;
     border:0px blue solid;
     vertical-align:bottom;
     border-spacing: 15px;
     border-collapse: separate;
    }

     .cell {
     display:table-cell;
     width:25%;
     padding:10px;
     border:1px #E9E9E9 solid;
     text-align:center;
     vertical-align:bottom;
     }
     
     .cell a { color:#00823A; line-height:130%; text-decoration:none;}
     .cell a:visited { color:#00823A;  text-decoration:none;}
     .cell a:hover { color:#404FB7;  text-decoration:none;}
     .cell a:active { color:#00823A;  text-decoration:none;}


     .cell-noborder {
     display:table-cell;
     width:25%;
     padding:10px;
     text-align:center;
     vertical-align:bottom;
     }
      
    .row {
     display:table-row;
     margin-bottom: 2px;
     border-bottom:3px white solid;
     }
     
 /* ----------------------- Product Page  ------------------------------------------------ */
 
 .product-image {float:right;margin-left:15px }
                @media only screen and (max-device-width: 980px){.product-image {float:none;margin-left:auto;margin-right:auto;}}
      
 .two-fifty {width:30px; height:250px }  
            @media only screen and (max-device-width: 980px){.two-fifty {display:none;}} 
            
 .one-hundred {width:30px; height:100px }  
            @media only screen and (max-device-width: 980px){.one-hundred {display:none;}} 
            
 /* ----------------------- Contact Pager  ------------------------------------------------ */            
 #contact_address {float:left; width:650px; text-align:left;}
         @media only screen and (max-device-width: 980px){#contact_address {float:none; text-align:left; width:100%; margin-bottom:20px; font-size:1em;}} 
         @media only screen and (max-device-width: 980px){#contact_address a {font-size:1em;}}
         
 #map {float:right;width:600px;margin-right:10px }   
     @media only screen and (max-device-width: 980px){#map {   }}

      
 iframe {width:100% }
       
    
 #input-form {float:right; width:380px; border:0px red solid; margin-top:-583px} 
             @media only screen and (max-device-width: 980px){ #input-form {float:none; width:100%; font-size:1em; margin-top:20px}}

            
    
 input[type=text] {width:350px; font-size:1em }   
                  @media only screen and (max-device-width: 980px){  input[type=text] {width:90%; font-size:1em}}

    
 textarea {height:120px; width:350px; font-size:1em }  
                 @media only screen and (max-device-width: 980px){  textarea {width:90%; font-size:1em}} 
 

 input[type=submit] {font-size:1em} 
                   @media only screen and (max-device-width: 980px){  input[type=submit] {padding-left:10px; font-size:1em}}
                              

 /* ----------------------- Footer  ------------------------------------------------ */
 
 #footer-container-outer {width:100%; background-color:#FE7B1B; color:white; margin-top:20px }
                  
                  
                   
 #footer-container {width:1000px; height:110px; background-color:#FE7B1B; color:white; margin:0 auto 0 auto; }
                  @media only screen and (max-device-width: 980px){#footer-container {width:100%;min-height:220px}}

 #footer-container a { color:white; line-height:140%; text-decoration:none;font-size:1em}
 #footer-container a:visited { color:#A42634; text-decoration:none;}
 #footer-container a:hover { color:#CCC8C8; text-decoration:none;}
 #footer-container a:active { color:white; text-decoration:none;}
      
#footer-address {float:right; width:220px; border:0px black dotted; margin-top:15px}
                @media only screen and (max-device-width: 800px){#footer-address {float:left; padding-left:10px; width:100%; margin-bottom:20px; }}
                @media only screen and (max-device-width: 800px){#footer-address a {text-decoration:underline;font-size:110%; font-weight:bold;}}
      
#footer-address p {
      color:white;
      font-size:0.8em;
      margin-left:58px;
      margin-top:-5px;
       }
      @media only screen and (max-device-width: 980px){#footer-address p {font-size:1.2em;margin-top:5px;text-align:left;}} 

#footer-address img {margin-top:15px }  
    
.site-map {font-size:0.8em; border:1px transparent dotted; width:750px; margin-top:0} 
          @media only screen and (max-device-width: 980px){.site-map {display:none;}}
          
.site-map a {font-family:Verdana, sans-serif; color:white }          
.site-map a:hover {color:#A42634 }
.site-map a:visited {color:grey }

     
      
#ideo {margin:20px auto 15px auto; width:1000px;}
      @media only screen and (max-device-width: 800px){#ideo {width:100%; padding-left:10px}}
      
            
#ideo a {
    font-size:0.6em;
	color:#888888;
    text-decoration:none;
    padding-bottom:20px;
    }
    @media only screen and (max-device-width: 980px){#ideo a {font-size:0.6em;}}
    
#ideo a:hover {
	color:black;
	text-decoration:none;
    padding-bottom:20px;
    }
 
    
/* UP TAB  */    



  
#tab button{
      
      background-color:#E77E0C;
      border-top:1px #A85C00 solid; 
      border-left:1px #A85C00 solid;
      border-bottom:1px #A85C00 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 #7D4506;
      font-size:0.9em;
      color:white;
      }
       @media only screen and (max-device-width: 980px){#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: 980px){.caret2 {display:none;}}