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

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

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

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


/*****

h1,  font: bold 60px IsadoraCaps;  color: #111;  text-shadow: 0 -1px 0 #acacac;
             h2,  font: normal 20px IsadoraCaps;  color: #f0f0f0;  text-shadow: 0 -1px 0 #333;
             h3,  font: bold 22px IsadoraCaps;  color: #f0f0f0;
*****/


h1 a {   
  position: absolute;
  top: 201px;
  left: 10px;
  width: 457px;
  height: 55px;
  background: url(../background/h1.gif) no-repeat;
}      

h1 a.home {
  cursor: default;  
}        

h2 {
  position: absolute;
  top: 275px;
  left: 645px;
  width: 245px;
  height: 19px; 
  background: url(../background/h2.gif); 
}           

h3 {
  display: block;
  height: 21px;
  width: 426px;
  margin: 0 0 10px 0;
}     

h1, h2, h3 {
  overflow: hidden;
}   

h1 span, h2 span, h3 span {      
  display: block;
  position: relative;
  margin: -250px 0 0 0;
  z-index: 1;
}       

h3.welcome {
  background: url(../background/h3.gif);
}

h3.products {
  background: url(../background/h3.gif) 0 -21px;
}

h3.tips {
  background: url(../background/h3.gif) 0 -42px;
}

h3.homeRamps {
  background: url(../background/h3.gif) 0 -63px;
}

h3.wchairRamps {
  background: url(../background/h3.gif) 0 -84px;
}

h3.vehicleRamps {
  background: url(../background/h3.gif) 0 -105px;
}

h3.contact {
  background: url(../background/h3.gif) 0 -126px;
}       

h3.thanks {
  background: url(../background/h3.gif) 0 -147px;
}


/*****  header  *****/       


#header {
  width: 900px;
  height: 130px;
  background: url(../background/header.gif) repeat-x;
} 

img.header {
  margin: 0 -3px 0 10px;
}   

#header p {
  text-align: right;
  font-size: 1.2em;
  line-height: 21px;
  margin: 84px 10px 0 0;   
}          

#header p.breadcrumbs {  
  position: absolute;
  top: 130px;
  left: 10px;
  text-align: left;        
  color: #333;   
  margin: 0;   
}                 

#header p a {     
  display: inline-block;  
  line-height: 13px;   
  color: #111;   
  border-bottom: 1px solid #0075a3;  
}           

#header p.breadcrumbs a {
  color: #333;  
}                        

#header p a:hover, #header p.breadcrumbs a:hover {
  color: #00adef;
  border-bottom: 1px solid #00adef;
}   


/*****  menu  font: bold 22px IsadoraCaps;  *****/       


ul {  
  list-style: none;
}  

/*****  main menu  *****/    

#mainMenu {  
  width: 900px;
  height: 32px;   
  background: url(../background/menu_bg.gif); 
  margin: 25px 0 20px 0; 
}           

html>body #mainMenu {  
  margin: 138px 0 20px 0;    
}     

#mainMenu li {
  display: block;
  float: left;  
  height: 25px;   
  margin: 2px 8px 0 2px;
}                  

html>body #mainMenu li {
  margin: 2px 6px 0 4px;
}           

#mainMenu li, #mainMenu li a {
  overflow: hidden;
}   

#mainMenu li span, #mainMenu li a span {      
  display: block;
  position: relative;
  z-index: 1;
  margin: -27px 0 0 0;
}                                  

li.products, li.productsCurrent {
  display: block;   
  width: 116px;
  height: 25px;    
}                                            

li.contact, li.contactCurrent {
  display: block;   
  width: 110px;
  height: 25px;    
}        

li.products a, li.productsCurrent a {
  display: block;   
  width: 116px;
  height: 25px;    
  background: url(../background/menu.gif);  
}                 

li.contact a, li.contactCurrent a {
  display: block;   
  width: 110px;
  height: 25px;    
  background:url(../background/menu.gif) -116px 0;  
}                        

li.productsCurrent a, li.contactCurrent a {
  background: transparent;  
}                   

li.products a:hover, li.productsCurrent a:hover {
  background: url(../background/menu.gif) 0 -25px;    
}             

li.contact a:hover, li.contactCurrent a:hover {
  background: url(../background/menu.gif) -116px -25px;    
}  

/*****  sub menu  *****/       

.subMenu {  
  font-size: 1.3em;    
  margin: 0 0 8px 0;
}     

.subMenu li {
  line-height: 21px;   
  margin: 3px 0 0 0;
}                               

.subMenu li:first-letter {   
  font-weight: bold;
  color: #f0f0f0;
  color: #00adef;
}                      

.subMenu li a {     
  font-weight: bold; 
  color: #111;   
  border-bottom: 1px solid #0075a3;  
}                        

.subMenu li a:hover {
  color: #00adef;
  border-bottom: 1px solid #00adef;
}             


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


.content {
  background: #fff;
  border: 1px solid #8e8e8e;
  padding: 9px;
  margin: 10px 0 0 0;
}               

.content p {  
  font-size: 1.3em; 
  text-align: justify;
  margin: 10px 0 0 0;
}    

em.b {
  font-style: normal;
  font-weight: bold;
  color: #000;
}       

em.u {
  font-style: normal;
  text-decoration: underline;
}                        

.content p a { 
  display: inline-block;  
  line-height: 15px;   
  color: #111;   
  border-bottom: 1px solid #0075a3;
}                        

.content p a:hover {
  color: #00adef;
  border-bottom: 1px solid #00adef;
}                                

.content p.contactDetails {
  float: left;   
  display: block;
  width: 200px;  
}  

.content p.divider {
  background: url(../background/divider.gif) 0 50% repeat-x;  
  margin: 10px 260px 0 0;
}         

.clear {  
  clear: both; 
  height: 0;  
  margin: 0; 
}      

.rightPanel {   
  float: right;     
  width: 230px;  
  background: #fff; 
  border: 1px solid #111; 
  padding: 9px;
  margin: -30px 0 0 10px;   
}                    

.rightPanel p {   
  text-align: center;    
}              

.rightPanel p.caption, .rightPanel p.captionLast {   
  font-weight: bold;   
  line-height: 19px;   
  border-bottom: 1px solid #00adef;  
  margin: 0 0 10px 0;   
}                   

.rightPanel p.captionLast {   
  margin: 0;   
}                       

.content .rightPanel a, .content .rightPanel a:hover {   
  border: 0;   
}   


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

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

.content .input p.label {  
  float: left;   
  width: 60px; 
  text-align: right; 
  margin: 0 10px 5px 0;  
}                             
                   
#name, #phone, #email, #enquiry {
  width: 240px; 
  color: #000;      
  font-size: 13px;      
  font-weight: bold;
  font-family: "Trebuchet MS";
  border: 1px solid #0075a3;
  background: #fff;
  padding: 0 0 0 5px;
}
                   
#enquiry {
  margin: 0 0 5px 0;
}            

.sendReset {  
  width: 247px;  
  text-align: center;   
  margin: 0 0 10px 70px;
}            

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


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


#footer {  
  height: 30px; 
}               

#footer p {  
  font-size: 1.1em; 
  text-align: center;
  line-height: 21px;
}                    

#footer p a {    
  display: inline-block;  
  line-height: 13px;   
  color: #111;       
  border-bottom: 1px solid #0075a3;  
}                        

#footer p a:hover {
  color: #00adef;     
  border-bottom: 1px solid #00adef;
}               
  
#site-design {
  float: left;  
  width: 11px; 
  height: 107px;  
  margin: -109px 0 -70px -14px; 
}  

#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;  
}