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

img { 
  border: 0; 
}

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

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

html, body {
  height: 100%;
}                

#wrapper {
  height: 100%;  
  width: 800px;  
  text-align: left;    
  border-bottom: 1px solid #000;   
  background: url(../background/content.gif) 0 6px;  
  margin: 0 auto; 
}    

#container {
  position: relative; 
  left: 0;
  height: 100%;  
  width: 800px;  
}   

p {              
  font-size: 1.3em; 
  margin: 5px;   
}     


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

#header {
  position: absolute; 
  top: 0; 
  left: 1px; 
  width: 798px; 
  height: 156px; 
  background: url(../background/header.gif) repeat-x;      
}    
  
#ggLogo {
  float: right;  
  width: 81px; 
  height: 81px;    
  margin: 33px 5px 0 0; 
}               
  
html>body #ggLogo {
  margin: 33px 10px 0 0; 
}     

.breadcrumbs {  
  display: block;       
  font-size: 1.1em;    
  line-height: 18px;  
  color: #414141;    
  padding: 0 0 0 10px;    
  margin: 0;   
}                  

.breadcrumbs a {
  color: #000;  
}           

.breadcrumbs a:hover {        
  color: #fff;  
}   


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

h1 a { /*   
  font: normal 38px "BN Deep Blue";
  color: #c89905;        
  text-transform: uppercase; */   
  position: absolute;
  top: 89px; 
  left: 10px;   
  width: 357px;    
  height: 25px; 
  background: url(../background/h1BN_Deep_Blue.gif); 
}     

h1 a.home {
  cursor: default;  
}   

h1 {
  overflow: hidden;
}

h1 span {
  display: block;
  position: relative;   
  margin: -200px 0 0 0;
  z-index: 1;
}      

h2 {     
  font: normal 15px "Trebuchet MS";
  color: #c89905;          
  display: block;
  width: 788px;  
  height: 27px; 
  line-height: 24px;         
  margin: 0 0 10px 11px;  
}       
                    
#header h2 {   
  width: 580px; 
  color: #c7c7c7;    
  text-align: right;    
  margin: 78px 0 0 11px;    
}      

#content h2, h3.clear {     
  clear: both;
}                         

h2.overline, h3.overline {      
  clear: left;
  width: 582px;  
  border-top: 1px solid #414141;   
  padding: 3px 0 0 0;  
}          

h3 {          
  font: bold 1.3em "Trebuchet MS";
  color: #fff;  
  margin: 0 5px 5px 11px;  
}    

.item h3 {
  margin: -3px 5px 5px 110px;  
}                


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

p.quote {     
  display: block;  
  position: absolute;
  top: 127px;
  left: 0;  
  width: 785px;  
  height: 23px;          
  text-align: right;
  font: bold italic 1.2em "Comic Sans MS";      
  color: #414141;   
  text-transform: uppercase;  
  line-height: 23px;    
  background: url(../background/divider.gif) right 0 no-repeat;   
  padding: 0 14px 0 0;   
  margin: 0;  
}        

ul {          
  position: absolute;
  top: 127px;
  left: -1px;  
  height: 23px;
  list-style: none;  
  font-size: 1.3em; 
  color: #414141;   
  background: url(../background/divider.gif) no-repeat; 
  padding: 0 0 0 2px;   
}  

li {
  float: left;  
  display: block;  
  line-height: 23px;  
  padding: 0 11px 0 9px;   
  background: url(../background/divider.gif) right 0 no-repeat;   
}         

li a {  
  color: #131313;
}           

li a:hover {  
  color: #fff;    
  text-shadow: 0 -1px 0 #a17a04;          
}  


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


#content {
  position: absolute; 
  top: 156px; 
  left: 0;   
  width: 800px;   
  background: url(../background/content.gif);  
}      

p.mainContent {      
  text-align: justify;
  margin: 5px 211px 10px 11px;  
}   

#content a {
  color: #fff;    
  border-bottom: 1px solid #414141; 
}           

#content a:hover, .point {     
  color: #c89905;    
}   

.item, .note {   
  width: 570px;  
  text-align: justify;
  border: 1px solid #414141;  
  padding: 5px;   
  margin: 0 0 10px 11px;  
}    

.item {  
  min-height: 92px; 
  height: auto !important; 
  height: 92px; 
}       

.item img { 
  float: left;   
  background: #141414;  
  margin: 0 10px 5px 0;  
}    

.item p {     
  padding: 0 5px 0 0;     
  margin: 0 5px 0 0;  
}    

.note p {   
  color: #c89905;
}           

#content .note a {   
  color: #c7c7c7;
}                 

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

p.more {   
  clear: left;   
  display: block;  
  width: 565px;   
  text-align: right;    
  line-height: 20px;
  background: url(../background/more.gif);   
  margin: 0;  
}                    

#content .item a {           
  color: #fff;
  font-weight: bold;   
  border: 0;    
}                       

#content .item a:hover {           
  color: #c89905;  
  border: 0;    
}               

.mainPanel {
  float: left;    
  border: 1px solid #414141;  
  background: #000;   
  padding: 5px;  
  margin: 0 -1px 10px 11px;  
}   

.mainPanel p {
  width: 264px;    
  text-align: center;  
}           

.rightPanel {
  float: right;      
  width: 150px;   
  text-align: center;
  border: 1px solid #c89905;  
  background: #000;   
  padding: 5px;  
  margin: 0 11px 10px 0;  
}                               

.rightPanel p { 
  clear: left;   
  font-size: 1.3em;              
  color: #c7c7c7;  
  line-height: 20px;  
  margin: -5px 0;  
}        

.rightPanel img { 
  float: left;    
  padding: 0;    
}    


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

 
.input {   
  width: 582px; 
  margin: 20px 0 0 10px; 
} 
 
.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: 300px; 
  color: #000;     
  font-size: 12px;
  font-family: "Trebuchet MS";
  border: 1px solid #000;   
  padding: 0 0 0 5px;
}                               
                   
#name, #email {
  background: #c7c7c7 url(../background/required.gif) right 50% no-repeat;   
}                                               
                   
#phone {
  background: #c7c7c7 url(../background/optional.gif) right 50% no-repeat;
}                           
                   
#enquiry {     
  background: #c7c7c7;
  margin: 0 0 5px 0;
}            

.sendReset {  
  width: 250px;  
  text-align: center;   
  margin: 0 0 20px 88px;    
}            

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


/*****  slide panels  *****/
      

.outer {  
  clear: both;
  width: 800px;
  margin: 0;
}   

.outer .inner {
  overflow: hidden;
}      

.outer .title, .outer .titlehidden {  
  display: block;   
  height: 27px; 
  font: normal 15px "Trebuchet MS";
  color: #c89905;           
  line-height: 24px;
  cursor: pointer;   
  padding: 0 0 0 11px;
} 

.arrow { 
  margin: 0 0 -3px 10px;
}


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


#footer {   
  clear: both;   
  width: 800px;     
  height: 31px;    
  background: url(../background/nzMade.gif) 651px 0 no-repeat;    
  padding: 47px 0 0 0;    
  margin: 0;  
}        

#footer.notNZ {   
  background-image: none; 
}   

p.footer {      
  width: 582px;    
  text-align: center;      
  font-size: 1.1em;    
  line-height: 20px; 
  color: #c89905;       
  border-top: 1px solid #414141;  
  margin: 0 0 0 11px;    
}                 

#footer a {           
  color: #c7c7c7;   
  border: 0;    
}                       

#footer a:hover {           
  color: #fff;  
  border: 0;    
}     
  
#site-design {
  float: left;  
  width: 11px; 
  height: 107px;  
  margin: -106px 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;  
}