/*EFFECTS EVERYTHING*/

* {
  padding: 0px;
  margin: 0px;
}



/*THIS ZEROS OUT BROWSER DEFAULTS SO PAGE WILL LOOK THE SAME ON ALL BROWSERS*/
html, body {
  margin: 0px;
  padding: 0px;
  border: 0px;
}  


/*DEFAULTS*/


body {
 background-image: url(../bisaya/images/skymap.jpg);
 background-attachment: fixed;
 background-color: #282F1D;
 background-repeat: no-repeat;
 background-position: center;
 font-family: "Bookman Old Style", Georgia, serif;
 font-size: medium;
 text-align: center; /*DON'T CHANGE THIS!!! Combined with #layout below it makes the page centered in screen 
   but text is left-aligned by default*/
 color: black;

}


ul
{ 
list-style-type: circle;
padding-left: 25px;

} 

li
{ line-height: 2.5; }


table
{
  
  border: 1px solid #CCCCCC;
  border-collapse: collapse;
  margin: auto;
}

th { padding: 5px 10px 5px 10px; border: 1px #808080 solid; background-color: #BB9FA1; }

td { padding: 5px 10px 5px 16px; border: 1px #808080 solid; background-color: #999999;} 


iframe
{ padding: 0 87px; 
 background-image: url(../images/bigboiler_sm.jpg);
 background-attachment: scroll;
 background-color: white;
 background-repeat: no-repeat;
 background-position: center;}



h1 /*use for main page heading*/ { padding-top: 15px; padding-bottom: 15px; text-align: center; line-height: 1.5; font-size: 175%; }

h2 /*use for smaller topgraphic text on home page*/  { margin-left: 5%; padding-top: 20px; text-align: left; 
   line-height: 1.5; font-size: 120%; }

h3 /*use for top title on large blocks of text*/ { padding-top: 10px; text-align: left; 
   line-height: 1.5; font-weight: bold; font-size: 120%; }

h4 /*use for text links in footers*/ { padding-top: 0px; padding-bottom: 10px; color: #CCCCCC; 
   text-align: center; line-height: 1.5; font-weight: normal; }

h5 /*use for quotation or one-liner standalone in footer*/ { margin-right: 5%; padding-top: 30px; text-align: right; 
   font-weight: normal; font-size:110%; color: #CCCCCC; font-style: italic;> }
       
h6 /*use for captions under pictures in light background areas*/ { padding-top: 15px; padding-bottom: 10px; 
   text-align: center; line-height: 1.5; font-weight: normal; font-size: 75%;}
   





p {
   /*width: 100%; TAKEN OUT BECAUSE IT PREVENTED TEXT FROM WRAPPING AROUND FLOATED IMAGES*/
   /*THIS IS FOR PARAGRAPHS THAT HAVE MORE PARAGRAPHS ABOVE AND BELOW.  FOR SINGLE PAR'S style= "margin: 0;"  FOR THE
   TOP PARAGRAPH, style= "margin: 0 0 10px 0;"  FOR THE BOTTOME PARAGRAPH, style= "margin: 10px 0 0 0;" */
   text-align: left;
   line-height: 1.5;
   margin: 10px 0;
   
   
   
}

/************************* IDs and Classes *************************/

#layout{
   width: 853px;
   
   margin-left: auto;
   margin-right: auto;
   text-align: left; 
}

.logo{
    width: 133px;
    height: 133px;
    display: block;
    }
    
    #logohover{
    background-image:url('../bisaya/images/meold.jpg');
    }
    .logo:hover{
    background-position:left 133px;
    }

.button{
    width:40px;
    height:40px;
    margin-top: 0px;
    margin-bottom: 0px;
    
    display:block;
    }

    #linkbutton{
    background-image:url('../images/buttons/ballrolltrans.png');
    }
    .button:hover{
    background-position:left 40px;
    
    }
    
  
  
    
    
.volvair{
    width: 414px;
    height: 207px;
    display: block;
    }
    
    #volvhover{
    background-image:url('../images/volvair.jpg');
    }
    .volvair:hover{
    background-position:left 207px;
    }
    
    
    
         
 

#logocorner {
    width: 133px;
    height: 133px;
    background-color: transparent;
    margin-left: 20px;
    margin-right: 180px;
    float: left;
    
} 

#header {
   width: 831px;
   height: 104px;
   float: right;
   background-color: #330000;
   text-align: center;
   font-weight: bold;
   font-size:110%;
   color: #CCCCCC;
   margin-top: 30px;
   padding-top: 33px;
   border: 2px solid #303030;
                                         
}

 /*FOR EXPERIMENTING WITH OVERLAP Z-INDEX AND ABSOLUTE POSITIONING
 div#ontop {
  background-color: #transparent;
  z-index: 50;
  top: 0px;
  position: absolute;
  left: 0px;
  width: 133px;
  height:133px;
  margin-left: 20px;
  margin-right: 180px;
  }*/  


#buttonbar {
   width: 240px;
   height: 720px;
   float: left;
   margin-left: 93px;
   background-color: transparent;
   
 
   
}

#buttoncol { 
   margin-top: 20px;
   width: 17%; 
   float: left; 
   background-color: transparent;
    
}

.buttonspace {
   
   height: 80px;
   }

#navtextcol {
   margin-top: 0px;
   width: 70%;
   padding-left: 10%;
   float: right;
   background-color: transparent;
}

.navtext {
    width: 100%;
    
    height: 36px;
    
    padding-top: 22px;
    padding-bottom: 22px;
    float: right;
     
    font-size: 60%; 
     
    background-color: transparent;
    
}


/*used in index.htm, aboutus.htm, resonance.htm, history.htm, nealtank.htm */
#topgraphic { 
   width: 400px;
   border: 2px solid #707070;
   padding-left: 51px;
   padding-right: 51px;
   float: right;
   background-color: #999999; }
    



/*used in nothin???*/
/*#topgraphicsmall { 
   width: 414px;
   height: 420px; 
   padding-left: 53px;
   padding-right: 53px;
   float: right;
   background-color: #999999;
   border: 2px solid #707070;   */
   
       
}

/*USED IN nothing???*/

#topgraphicwide { 
   width: 516px;
   border: 2px solid #707070;
   float: right;
   background-color: #999999;
    
}


.belowtext {
   width: 595px;
   float: right; 
   padding-top: 30px;
   padding-right: 48px;
   padding-bottom: 30px;
   padding-left: 48px;
   background-color: #CCCCCC;
   border-collapse: collapse;
   border: 2px solid #909090;
   
 }
 
 .belowtextWIDE {
   width: 873px;
   float: right; 
   background-color: #CCCCCC;
   border-collapse: collapse;
   border: 2px solid #909090;
   
 }
 
 
/*USED IN ITEM DESCRIPTIONS IN 6 CATALOG PAGES SUCH AS CATACOUS.HTM ETC SO THERE'LL BE NO BOTTOM BORDER*/ 
.belowtextITEMS {
   width: 595px;
   float: right; 
   padding-top: 30px;
   padding-right: 48px;
   padding-bottom: 30px;
   padding-left: 48px;
   background-color: #CCCCCC;
   border-collapse: collapse;
   border-style: solid;
   border-color: #909090;
   border-width: 2px 2px 0;
   
 }
 
 
 /*USED WHERE IMAGE IS ON LEFT AND TEXT IS ON RIGHT, GIVES SMALLER MARGINS FOR LONGER TEXT LINES*/
 .belowtextwrapright {
   width: 631px;
   float: right;
   padding: 30px 25px 30px 35px;
   background-color: #CCCCCC;
   border-collapse: collapse;
   border: 2px solid #909090;
      
 }
 
 
 /*USED WHERE IMAGE IS ON RIGHT AND TEXT IS ON LEFT, GIVES SMALLER MARGINS FOR LONGER TEXT LINES*/
 .belowtextwrapleft {
   width: 631px;
   float: right;
   padding: 30px 35px 30px 25px;
   background-color: #CCCCCC;
   border-collapse: collapse;
   border: 2px solid #909090;
   
 }
 
 
 
 
 /*USED in honda.htm*/
 .belowtextwraprightHONDA {
   width: 631px;
   float: right;
   padding: 30px 25px 30px 35px;
   background-color: #CCCCCC;
   border-collapse: collapse;
   border: 2px solid #909090;
   font-family: arial;
   font-size: 85%;
      
 }
 
 
 
 
 
 /*USED ON LONG PAGES WITH LOTS OF PICTURES OR SECTIONS, TO BREAK THE PAGE INTO PANELS WITH TRANSPARENT SECTIONS BETWEEN*/
 
.divider {
   width: 695px;
   float: right;
   background-color: transparent;
   height: 25px;
   
}
 


 /*THESE TWO TEXT WRAPPING CLASSES GO INSIDE THE IMG TAG and the img tag goes inside a .belowtext or .belowtextwrapright etc*/
 
 /*USED IN HISTORY.HTM*/

.wraptextright {
  margin: 0 20px 0 0;
  float: left;
}

.wraptextleft {
  margin: 0 0 0 20px;
  float: right;
  
}

.wraptextleftSITEMAP {
  margin: 50px 0 0 20px;
  float: right;
  
}







.tm { 
  margin: 15px 30px;

}


 
#footer {  
   width: 520px;
   height: 100px;
   
   float: right;
   background-color: #330000;

}

#footer2col {
   width: 520px;
   float: right;
   height: 160px;
   background-color: #330000;
}





 .freeitem
 {
 width: 545px;
 margin: 30px 0 12px;
 float: right;
 background-color: #CCCCCC;
 font-style: italic;
 font-weight: bold;
 }
 
 
   
   
   
   


 .itemnumber
 {
  
  float: left;
  
  } 
  

.freebutton
{

	width:			165px;
  height:			43px;
	margin-right: 16px;
  float: right;
  display:block;
    }
    
  #linkfreebutton {
  background-image:url('../images/buttons/free_item.png');
  }
  
  .freebutton:hover{
    background-position:left 43px;
    
    }
    

  

/*used in aboutus.htm, onlinestore.htm, storetemplate.htm, nealtank.htm all store related pages?*/
#widefooter {  
   width: 635px; 
   height: 100px;
   padding: 28px;
   border: 2px solid #303030;
   float: right;
   background-color: #330000;
   
}

/*used in download.htm and catconts.htm */
#chicago  {
     background-image: url('../images/chicago.jpg');
     background-attachment: not-fixed;
     background-color: white;
     background-repeat: no-repeat;
     background-position: top right;
     width: 595px; height: 399px;
     border: solid 1px black;
}


/*used in download.htm and catconts.htm and in all catalog pages and store template*/

 
 #greenback  {
     
     background-image:url('../images/moneybags.jpg'); 
     width: 695px; 
     height: 351px;
     background-repeat: no-repeat;
     background-position: top right; 
     background-color: transparent;
     float: right;
     
     }
     
     
.spanall
   {
     
     
     width: 689px; 
     height: 69px;
     background-color: #FFFED8; 
     float: right;
     border-style: solid; 
     border-width: 0 3px 3px 3px; 
     border-color: #3f432f;
     
     }

  /*SIMILAR TO BELOWTEXT CLASS BUT FOR PUTTING TOP OF PAGE LINKS IN SO LESS SPACE ABOVE AND BELOW*/

 .notextdeco {
  text-decoration: none; color: blue;
  width: 595px;
  float: right;
  padding: 20px 48px 0 ;
  background-color: #CCCCCC;
  background-color: #CCCCCC;
  border-collapse: collapse;
  border: 2px solid #909090;
  }

/**********for 3 column footers use h4 inside**************/
/*used in GALLERY.HTM & PAYPAL BUTTONS*/

.contain3colpp

 {
   
  
   width: 595px;
   
   padding: 0 48px 40px 48px;
   float: right;
   background-color: #CCCCCC;
   
   font-weight: bold;
   font-style: italic; 
   
   border-collapse: collapse;
   border-style: solid;
   border-color: #909090;
   border-width: 0 2px 2px;
   

}

.col1n2of3pp {float: left; width: 396px;}

.col1pp {width: 182px; float: left; padding-left: 16px; padding-top: 5px;
     
    }

.col2pp {width: 198px; float: right; padding-top: 5px;
   
   }

.col3pp {width: 183px; float: right; 

                   
   }

.paypal {
float: right; padding-right: 16px;
}



/*used in GALLERY.HTM*/
#footer3col {
   

   width: 480px;
   height: 180px;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 0px;
   float: right;
   
   background-color: #330000;
   color: #CCCCCC;
   
}

.col1n2of3 {float: left; width: 320px;}

.col1 {width: 120px; float: left; margin: 20px;
     
    }

.col2 {width: 120px; float: right; margin: 20px;
   
   }

.col3 {width: 120px; float: right; margin: 20px;
                  
   }
   



 /*USED IN HAEW.HTM ...deleted on the assumption it is used nowhere else*/

 /*.standalonephoto {float: left;
    border-style: solid;
    border-width: 15px;
    border-color: red; } */



#copyright {
   margin-top: 60px;
   margin-bottom: 35px;
   width: 695px;
   float: right;
   background-color: transparent;
   text-align: center;
   font-size: 75%;
   color: black;
}

 /*link styles */

 /*default:*/
 
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: black;}





.linkgray A:link {text-decoration: none}
.linkgray A:visited {text-decoration: none}
.linkgray A:active {text-decoration: none}
.linkgray A:hover {text-decoration: underline; color: #CCCCCC;}

/*

.linkmax A:link {text-decoration: underline overline}
.linkmax A:visited {text-decoration: underline overline}
.linkmax A:active {text-decoration: underline overline}
.linkmax A:hover {text-decoration: underline; color: green;}    */ 

/*example of how a default link decoration system would sit on this page:

 a:link
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FF0000;
text-decoration: none;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FF0000;
text-decoration: none;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #0099FF;
text-decoration: underline;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #0099FF;
text-decoration: underline;
}
 
*/
/*end*/