/******   mapps css  *****/

/*****

i apologise if you're looking at this-
my css skills are so bad that the code below will possibly make your eyes bleed,
or at least cause severe vomiting...  

site design: the.x.man  basic web design  
http://www.thexman.net.nz/web-design/
jono[at]thexman[dot]net[dot]nz  

*****/ 



/*****  main elements  *****/


* {
  margin: 0;
  padding: 0;     
}

* :focus {
  outline: 0;
}

img { 
  border: 0; 
}

a {
  text-decoration: none;
}  
        
.hide {   
  display: none;                                                                                                                                                              
}

ul {
  list-style: none;
}

body {
  text-align: center;  
  cursor: default;   
  font: normal 62.5% "Trebuchet MS", Tahoma, Verdana;
  background: #332b2d url(../background/body.gif) repeat-x;
  margin: 0 auto; 
}                 

#wrapper {
  width: 900px; 
  text-align: left;   
  margin: 0 auto; 
}    

#container {
  position: relative; 
  top: 0; 
  left: 0; 
  width: 900px;   
}       


/*****  h1, h2, h3  *****/
                 

h1 {
  position: absolute;
  top: 50px;
  left: 0;
  width: 451px;
  height: 110px;       
  background: url(../background/h1.gif); 
}   

h1 {
  overflow: hidden;
}

h1 span {
  display: block;
  position: relative;
  z-index: 1;
}      

h1 span {
  margin: -110px 0 0 0;
}       

h2 {
  display: block;
  position: absolute;
  top: 166px;
  left: 0;   
  width: 451px;
  font: normal 1.9em "Trebuchet MS", Tahoma;
  color: #97ca0b;
  text-align: center; 
  line-height: 32px;
}          

h3 {
  display: block;
  clear: both;
  width: 858px;
  font: normal 1.6em "Trebuchet MS", Tahoma;
  color: #fff;
  text-align: left; 
  line-height: 20px;
  margin: 10px 21px;
}

h3 a {
  color: #97ca0b;
}

h3 a:hover {
  color: #fff;
}


/*****  menu  *****/    


#menu {
  position: absolute;
  top: 50px;
  left: 480px;    
  width: 422px;   
}

#menu li {
  float: left;
  display: block;
  width: 82px;
  height: 110px;
  background: url(../background/menu-bg.gif);  
  font: bold 1.3em "Trebuchet MS", Tahoma;
  text-align: center;
  color: #fff;
  line-height: 130px;
  margin: 0 0 -20px 2px;
}

#menu li#current a,
#menu li#current a:hover {
  color: #fff;
  background: none;
  cursor: default;
}

#menu li a {
  display: block;
  width: 78px;
  height: 108px; 
  background: url(../background/menu-a.gif); 
  color: #fff;      
  line-height: 126px;
  margin: 2px 2px 0 2px;
}         

#menu li a:hover {
  background: url(../background/menu-a.gif) 0 -108px; 
  color: #332b2d;
}  

#mask { 
  position: absolute;
  top: 130px;
  left: 480px;    
  width: 420px;
  height: 30px; 
  background: url(../background/mask.gif); 
}


/*****  content  *****/    


#content {
  position: absolute;
  top: 200px;
  left: 0;
  color: #ccc;
  border-top: 1px solid #97ca0b;
  background: url(../background/content.png);
}

#content a {
  color: #97ca0b;
}

#content a:hover {
  color: #fff;
}

p {
  font-size: 1.2em;
  margin: 0 20px 5px 21px;
}   

.highlight {
  color: #fff;  
  font-weight: bold;   
}

.left {
  float: left;  
  border-left: 1px solid #97ca0b;
  margin: 0 1px 20px 0;
}  

.left p {
  margin: 0 20px -4px 20px;
}

.right {
  float: right;
  width: 326px;
  margin: 0 11px 0 10px;
}

html>body .right {
  margin: 0 21px 0 10px;
}

.right img,
.examples img {
  border: 1px solid #ccc;
  padding: 2px;
  margin: 0 0 20px 0;
}

.examples {
  margin: 0 0 5px 20px;
}

.examples img {
  margin: 0 11px 13px 0;
}

.right img.caption {
  border-bottom: 0;
}     

.right p {
  font-size: 1.2em;
  text-align: center;
  line-height: 20px;
  background: #0a0a0a;
  border: 1px solid #ccc;
  border-top: 0;
  margin: -21px 0 20px 0; 
}

.thanks {
  display: block;  
  height: 194px;
}


/*****  quote form - sorry about the mess, i HATE tables...  *****/


#form1 {
  clear: both;
  width: 900px;
}

.segment {
  border: 1px solid #ccc;
  margin: 0 21px 10px 21px;
  }
  .segment p {
    line-height: 17px;
    margin: 0;
  }
  .segment p.notes {
    border: 0;
  }
  .segment ul {
    margin: 0 0 10px 0;
  }
  .segment li {
    list-style: disc;
    font-size: 12px;
    margin: 0 43px;
}

table {
  width: 816px;
  cellpadding: 0;
  border: 0;
  margin: 0 20px 10px 20px;
}

tr {
  background: #332b2d;
}

td {
  text-align: right;
  border-bottom: 10px solid #0a0a0a;
  padding: 3px;
  }
  .noBorder {
    border: 0;
}

#client input,
#client select {
  width: 300px;
  color: #0a0a0a;
  font: 12px/20px "Trebuchet MS";
  border: 1px solid #ccc;
  background: #fff;
  padding: 1px 0 1px 5px;
  }
  #client select {
    width: 306px;
  }
  .claim {
    font: 12px/20px "Trebuchet MS";
    color: #0a0a0a;
    background: #ccc;
  }
  #client_address,
  #client_fabrication_address,
  #textarea3 {
    width: 300px;
    padding: 1px 0 1px 5px;
}

#form1 img {
  border-top: 5px solid #fff;
  margin: 0 20px;
}

#sizing {
  width: 816px;
  background: #fff;
  padding: 0 0 10px 0
  }
  #sizing td {
    border: 0;
    background: #fff;
    padding: 5px 0 0 0;
  }
  #sizing p {
    color: #0a0a0a;
    border: 0;
  }
  .label {
    font-size: 12px;
  }
  td.title {
    width: 150px;
  }
  td.blank {
    background: #0a0a0a;
  }
  td.w250 {
    width: 250px;
}

.submit {
  text-align: center;
  margin: 20px 0;
  }
  #button {
    cursor: pointer;
    color: #97ca0b;
    background: #0a0a0a;
    border: 1px solid #97ca0b;
    padding: 3px 50px;
  }
  #button:hover {
    color: #fff;
    border: 1px solid #fff;
}


/*****  contact form  *****/

 
.input {   
  width: 400px; 
  margin: 20px 0 0 20px;   
} 
 
.input p {   
  display: block; 
  line-height: 20px;
  margin: 0 0 5px 0; 
}           

.input p.label {  
  float: left;   
  width: 50px; 
  text-align: right; 
  margin: 0 10px 5px 0; 
}                             
                   
#name,
#email,
#phone,
#enquiry {
  width: 245px;
  color: #ccc;
  font-size: 12px;
  font-family: "Trebuchet MS";
  border: 1px solid #ccc;
  background: #332b2d;
  padding: 0 0 0 5px;
}                                
                   
#enquiry {
  margin: 0 0 5px 0;
}            

.sendReset {  
  width: 250px;  
  text-align: center;   
  border-bottom: 1px solid #ccc;
  margin: 0 0 20px 60px;  
}            

.button {   
  width: 70px; 
  height: 22px; 
  font-size: 12px;
  font-family: "Trebuchet MS";  
  color: #0a0a0a;
  margin: 0 5px 10px 5px; 
}     


/*****  footer  *****/    


#footer { 
  clear: both;  
  width: 900px;  
  border-top: 1px solid #97ca0b;
  background: #332b2d;
  margin: 0;
}

#footer p {
  font-size: 1em;      
  text-align: center;
  line-height: 20px;   
  margin: 0 0 -5px 0;
}

a#currentFooter,
a#currentFooter:hover {
  color: #0a0a0a;
  cursor: default;
}

                                     
/*****  site design  *****/


#site-design {
  width: 11px; 
  height: 107px;   
  margin: -108px 0 3px -13px;
}     

#site-design a {
  display: block;
  position: relative; 
  top: 0; 
  left: 0; 
  width: 11px; 
  height: 107px;
  background: url(../background/site-design.gif);  
}

#site-design a:hover {
  background: url(../background/site-design.gif) -11px 0;  
}