/*
Blue #154472
Orange #ff4500


*/


@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:0.9em;
    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; }
    
    

   
/*----- General formating ------*/
 
img {border:0}

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

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

h3 {
   font-size: 13pt;
   color:#ff6600;
   line-height:130%;
   font-family: Oswald, Sans-serif;
   letter-spacing:normal;
   }
@media only screen and (max-device-width: 970px) { h3 {font-size:1.5em; margin-left:10px; letter-spacing:normal;}  }  
 
h4 {
   font-size: 12pt;
   color:#154472;
   line-height:130%;
   letter-spacing:-1px;
   }
@media only screen and (max-device-width: 970px) { h4 {font-size:1.2em; margin-left:10px}  }

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

#page-container li  {font-size:1em;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}  }

a {text-decoration:none; }

#page-container    a  { font-size:1em;color:#777;font-family: Verdana, helvetica, Sans-serif;text-transform:none; }
#page-container    a:visited { color:#154472; }
#page-container    a:hover { color:#999; }
#page-container    a:active { color:#BD1788; }
@media only screen and (max-device-width: 970px) { #page-container 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) { input[type=text]{font-size:18px;width:90%; } 
                                                   textarea{ width:90%; }
                                                   input[type=submit] {font-size:13pt }
                                                   }                            

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


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



    /* ----------------------- HEADER --------------------------------- */ 
    
#login            {width:100% }
                  @media only screen and (max-device-width: 520px) { #login {display:none;}  }    

#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:#CCC8C8; font-size: 9px; font-family:Verdana, helvetica, sans-serif; }  
                @media only screen and (max-device-width: 970px) { #login-inner h1 {text-align:center; font-size:0.7em; padding-bottom:0 10px; margin-top:-10px;}  }           

#head           {width:100%; border:0px red 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:60px; 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: 970px) { #logo-area {margin:-40px auto 0 auto; text-align:center; width:70%}  }
                @media only screen and (max-device-width: 520px) { #logo-area {margin:0; text-align:center; width:100%}  } 
                   
                 
                 
#logo           {float:left; width:500px; margin-top:-55px; padding-bottom:20px; color:#ff4500; }
                @media only screen and (max-device-width: 970px) { #logo {float:none; width:90%; margin:0 auto; padding:0}  }

.phone {color:#ff4500; font-size:36px }
       @media only screen and (max-device-width: 970px) { .phone {margin-top:20px}  }
       
.phone a {color:#ff4500; text-decoration:none; }
       
     
#color-bar       {width:100%; background-color:#ff4500; }   
#color-bar-inner {width:1000px; 
                  height:30px; 
                  padding-top:3px;
                  margin-left:auto;
                  margin-right:auto;
                  background-color:#ff4500; 
                  text-align:right; 
                  letter-spacing:2px;
                  font-size:1.2em;
                  font-family: Oswald, Sans-serif; 
                  color:white; 
                  text-transform:uppercase;
                  border:0px black dashed;
                  text-shadow:2px 2px #000
                  }
                  @media only screen and (max-device-width: 970px) { #color-bar-inner {width:100%; text-align:center; font-size:0.9em; letter-spacing:1px;}  }

#menu-container-outer {width:100%; background-color:#154472; }  
 
#menu-container {width:1000px; min-height:28px; background-color:#005263; margin:0 auto; }
@media only screen and (max-device-width: 970px) { #menu-container {width:100%}  }


#page-container-outer {width:100%; background-image:url('images/BG-gray.jpg'); background-repeat:repeat-y; background-position:center; margin-top:-20px; padding-top:20px}           
                      @media only screen and (max-device-width: 500px) { #page-container-outer {background-image:none; background-color:transparent;}  }
   
#page-container {border:0px red solid; width:1000px; margin:0 auto; }
 @media only screen and (max-device-width: 970px) { #page-container {width:100%}  }







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

#organge_box {width:100%; background-color:#ff4500; text-align:center; border-radius:8px; z-index:1000; margin-top:20px}
             @media only screen and (max-device-width: 970px) {#organge_box {width:93%; margin:0 auto;}  }

#organge_box_title {color:#fff; margin-top:-610px; margin-bottom:480px; padding-left:15px; text-shadow:3px 3px #000; font-size:60px }
                   @media only screen and (max-device-width: 970px) { #organge_box_title {margin:-460px 10px 320px 30px; font-size:50pt; }  }
                   @media only screen and (max-device-width: 520px) { #organge_box_title {margin:-230px 10px 110px 10px; font-size:30pt; }  }

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

#shadow {width:100%; margin:-1px 0 -85px 0; z-index:1; text-align:center;}
        @media only screen and (max-device-width: 970px) { #shadow {margin:0 auto; line-height:12px; width:90%}  }

.local_made {float:right; margin-top:-20px; margin-left:15px; width:300px; display:inline-block; }
            @media only screen and (max-device-width: 970px) { .local_made {padding-right:10px}  }
            @media only screen and (max-device-width: 520px) { .local_made {width:70%; float:none; padding-left:10px; margin:-10px; 0; padding-right: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;}

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


    
/* --------------------- PRODUCT PAGE ----------------- */   


#paypal {float:right; width:250px } 
        @media only screen and (max-device-width: 520px) {#paypal {width:180px; float:none; margin-left:10px;}  }

@media only screen and (max-device-width: 520px) {.pay-image {padding-left:10px}  }

      
#product-drawing {float:right; width:550px;}
                 @media only screen and (max-device-width: 520px) {#product-drawing {width:85%; float:none; text-align:left;}  }
          
#product-photo {width:400px }
               @media only screen and (max-device-width: 520px) {#product-photo {width:85%; padding-left:10px}  }

#data-container-2col {
    width:100%;
    padding:0;
     }
    @media only screen and (max-device-width: 520px) { #data-container {width:95%}  }
	
	.data-col-left {
	width:420px;
	border:0px red solid;
    float:left;
    margin:2px 0;
    padding:0;
	}
    @media only screen and (max-device-width: 520px) { .data-col-left {width:95%; float:none; margin-left:10px;}  }
	
	.data-col-right {
	width:550px;
	border:0px blue solid;
    float:right;
    margin:2px 0;
    text-align:right;
    padding:0;
	}
    @media only screen and (max-device-width: 520px) { .data-col-right {width:95%; float:none; margin-left:10px; text-align:left;}  }
    .clear {clear:both}               
               
               
               
/* --------------------- SEO ----------------- */
  
#SEO-outer{width:100%;}

#SEO-inner{width:1000px; margin:30px auto 5px auto;
           }
   @media only screen and (max-device-width: 970px) { #SEO-inner {width:100%;}  }
   
#SEO-inner>h1 {
   font-size: 8pt;
   font-weight:normal;
   color:#999999;
   padding:0px 5px 20px 5px;
   line-height:120%;
   margin-bottom:0px;
   letter-spacing:normal;
   word-spacing:normal;
   font-family: Verdana, helvetica, Sans-serif;
   } 
   @media only screen and (max-device-width: 970px) { #SEO-inner h1 {line-height:100%}  } 
 
/* -------   Contact Page  ---------*/


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


.contact-form { width:440px; margin-bottom:20px; border:0px dotted; display:inline-block;}
                @media only screen and (max-device-width: 480px) { .contact-form {width:100%}  }

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

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

form input[type=text] {width:90% }

/* Turns off touch call in phone */    
.no-phone { pointer-events: none; }
.no-phone > a { text-decoration:none; color:inherit; }  
 
 

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

#footer-outer{
           width:100%;
           border:0px orange dotted;
           background-color:#ff4500;
           margin-top:-5px;
           }

   #footer-inner{
           width:1000px;
           padding-top:3px;
           margin:0 auto;
           background-color:#ff4500;
           min-height:95px;
           }
           @media only screen and (max-device-width: 970px) { #footer-inner {width:100%;padding-bottom:10px}  }
           
#address {color:#fff; float:right; width:200px; border:0px black dotted; margin-top:3px;}   
                @media only screen and (max-device-width: 970px) { #address {width:50%;}  }
                
#footer-logo {width:136px; margin:3px 0 2px 0; padding-right:17px }
             @media only screen and (max-device-width: 520px) { #footer-logo {padding-right:0; margin-top:10px; padding-right:10px;}  }                
                
#address-text {float:right; font-size:10pt; line-height:120%; width:100%; color:#fff; border:0px white dashed; margin-top:-5px; }
              @media only screen and (max-device-width: 970px) { #address-text {color:#fff; font-size:11pt; margin:-5px 0 0 0; padding:0; width:100%;}  }

#phone-text {color:#fff; line-height:160%; font-size:10pt; float:right; width:100%; margin-top:1px; }

             @media only screen and (max-device-width: 970px) { #phone-text {display:none;}  }              
                
#phone_footer_link {display:none;}             
                   @media only screen and (max-device-width: 970px) { #phone_footer_link {color:#fff; font-family: Oswald, Sans-serif; font-size:16pt; margin-left:10px; margin-top:15px; display:block;}  }
                   @media only screen and (max-device-width: 970px) { #phone_footer_link a {color:#fff;}  }


#site-map {
    width:705px;
    line-height:140%;
    text-align:left;
    margin:10px 0 0 0;
    color:#fff;
    }
    @media only screen and (max-device-width: 970px) { #site-map {display:none;}  }
    
#site-map a { font-size:0.8em; color:#fff; font-family: Verdana, helvetica, Sans-serif; text-decoration:none;}
   
#site-map span {white-space:nowrap;}
     
     

/*  Page links on Footer  */                
.footer-links {float:left; margin-left:5px }
               @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; }
.footer-links    a:visited { color:#BG0000; }
.footer-links    a:hover { color:#D8D8D8; }
.footer-links    a:active { color:#D8D8D8; }


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

/* UP TAB  */    
#tab {margin-right:-4px }
     @media only screen and (max-device-width: 970px){#tab {display:none;}}


  
#tab button{
      
      background-color:#154472;
      border-top:1px #404FB7 solid; 
      border-left:1px #404FB7 solid;
      border-bottom:1px #404FB7 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;}}

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