/******   bbsmart 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: 62.5% "Trebuchet MS",Tahoma, Verdana, Helvetica, sans-serif;
  background: #211111 url(../background/body.gif) repeat-x; 
  margin: 0; 
}   

html, body, div#wrapper {
  height: 100%;
} 

#wrapper {
  width: 900px;  
  text-align: left;   
  background: url(../background/left-panel.gif) repeat-y;  
  margin: 0 auto; 
}    

#container {
  position: relative;  
}    

#aGallery, #bGallery, #cGallery, #dGallery
{
width: 240px !important;
height: 180px !important;
}  


/*****  h1, h2, h3, h4, h5  *****/
                 

h1.home, h1 a {
  position: absolute;
  top: 0;
  left: 23px;
  width: 240px;
  height: 129px;       
  background: url(../background/h1-h2.gif); 
}               

h1 a:hover {
  background: url(../background/h1-h2.gif) 0 -129px; 
}     

h1, h3, h4 {
  overflow: hidden;
}

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

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

/* h3 = normal 24px Trebuchet MS, top: 6px */

h3, h3 span {  
  position: absolute; 
  top: 0;
  left: 0;
  width: 608px;
  height: 40px;     
  font-size: 1.2em;   
  text-align: center;     
  margin: -41px 0 0 292px;
}  

h3 span {
  margin: 0 0 -40px 0;
}             

h3.welcome, h3.welcome span {        
  background: url(../background/h3-welcome.gif) 50% 0 no-repeat; 
}                           

h3.whoweare, h3.whoweare span {        
  background: url(../background/h3-whoweare.gif) 50% 0 no-repeat; 
}                                 

h3.partners, h3.partners span {        
  background: url(../background/h3-partners.gif) 50% 0 no-repeat; 
}                            

h3.bbesv, h3.bbsev span {        
  background: url(../background/h3-bbsev.gif) 50% 0 no-repeat; 
}

h3.alarmspro, h3.alarmspro span {       
  background: url(../background/h3-alarmspro.gif) 50% 0 no-repeat;
}                                      

h3.shortcuts, h3.shortcuts span {       
  background: url(../background/h3-shortcuts.gif) 50% 0 no-repeat;
}                     

h3.cad, h3.cad span {        
  background: url(../background/h3-cad.gif) 50% 0 no-repeat; 
}                           

h3.training, h3.training span {        
  background: url(../background/h3-training.gif) 50% 0 no-repeat; 
}                                

h3.news, h3.news span {        
  background: url(../background/h3-news.gif) 50% 0 no-repeat; 
}                            

h3.contact, h3.contact span {        
  background: url(../background/h3-contact.gif) 50% 0 no-repeat; 
}                                 

h3.ivista, h3.ivista span {        
  background: url(../background/h3-ivista.gif) 50% 0 no-repeat; 
}   

h4, h4 span {   
  position: absolute; 
  top: 0;
  left: 0;
  width: 286px;
  height: 18px;     
  font-size: 1.2em;   
  text-align: center;     
  margin: 16px 0 18px 0;   
}         

h4 span {
  margin: 0 0 -18px 0;
}                        

h4.awards, h4.awards span {        
  background: url(../background/h4-awards.gif) 50% 0 no-repeat; 
}

h4.testimonials, h4.testimonials span {        
  background: url(../background/h4-testimonials.gif) 50% 0 no-repeat; 
}

h4.news, h4.news span {        
  background: url(../background/h4-news.gif) 50% 0 no-repeat; 
}                   

h4.support, h4.support span {        
  background: url(../background/h4-support.gif) 50% 0 no-repeat; 
}   

h5 {
  font-size: 1.3em; 
  font-weight: normal;
  color: #787878;
  text-align: center;
  margin: 20px 0 10px 0;
}      


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


#header {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 900px; 
  height: 166px;     
  background: url(../background/header.gif) no-repeat; 
}   


/*****  main content  *****/    


#content {          
  clear: both;
  position: absolute; 
  top: 166px; 
  left: 0; 
  width: 900px;    
  color: #d4d4d4;   
  background: url(../background/left-panel.gif) repeat-y;  
} 

#main-content {    
  float: right;
  width: 608px;   
  margin: 10px 0;
}     

.item-content-outer, .sub-menu {  
  clear: both;   
  background: #322;       
  padding: 1px;   
  margin: 0 0 15px 0;
}       

.content-more { 
  width: 606px;
  height: 222px; 
  background: #100 url(../background/more.jpg) 2px 0 no-repeat;  
  margin: 0;
} 

.item-content-inner {   
  background: #100; 
  padding: 4px 10px 10px 10px;  
}  

.title-image {   
  background: #100; 
  padding: 3px 3px 0 3px;
}   

.title-image-index {   
  background: #100; 
  padding: 0 3px 3px 3px;
}

.preamble, .preamble-link, .trybuy-bg {   
  font-size: 1.6em;  
  text-align: center;   
  color: #fff;    
  background: #100 url(../background/preamble.gif) 50% bottom no-repeat;    
  padding: 3px 0 7px 0;  
}           

.sub-menu .preamble {   
  padding: 2px 0 7px 0;  
}         

.preamble-link {   
  padding: 3px 55px 7px 0;  
}         

.sub-menu p {   
  background: #100 url(../background/sub-menu.gif) 50% bottom no-repeat;    
} 

.preamble img, .trybuy-bg img {  
  padding: 0;   
  margin: 0 0 -7px 0;   
}                     

.preamble a, .trybuy-bg a {       
  color: #fff;    
  margin: -2px 0 0 0;   
}                              

.preamble a.trybuy, .trybuy-bg a.trybuy {  
  font-weight: bold;   
}                             

.preamble a.current {   
  color: #f00;    
  cursor: default;   
}                        

.preamble a:hover, a.preamble:hover, .trybuy-bg a:hover {      
  color: #f00;    
}  

a.preamble {
  display: block;   
  float: right;
  width: 55px;
  height: 25px;
  font-size: 1.6em;  
  background: url(../background/link.gif) no-repeat;    
  padding: 1px 0 0 6px;   
  margin: -30px 2px 0 0;       
}   

img.ivista-left {
  margin-right: 50px;
}      

img.ivista-right {
  margin-left: 50px;
}

.filler {
  height: 15px;
}   

.content {   
  font-size: 1.3em;   
  text-align: justify;
  color: #d4d4d4;     
  margin: 6px 0;
}

.heading {
	font-size: 2em;   
  text-align: justify;
  color: #d4d4d4;     
  margin: 6px 0;
  }

.price-right {
	font-size: 1.5em;
	text-align: right;
	color: #fff;
	margin-top: 10px;
}

.price-left {
	font-size: 1.5em;
	text-align: left;
	color: #fff;
	margin-top: 10px;
}

em {
  font-style: normal;    
  font-weight: bold;
  color: #a10302;       
}                             

.white {    
  color: #fff;       
}           

.list {   
  background: url(../background/bullet.gif) no-repeat;  
  font-size: 1.3em;   
  padding: 0 0 0 15px;     
  margin: 5px 10px 5px 0;    
}           

.content a, .list a, .image p a, .inner p a {   
  color: #fff; 
  text-decoration: underline; 
}                

.content a:hover, .list a:hover, .image p a:hover, .inner p a:hover {
  color: #f00;
} 

a.ota {
  text-decoration: none;
}             

.quote {      
  font-size: 1.3em;    
  background: url(../background/66.gif) 0 4px no-repeat;
  padding: 0 0 0 12px;   
  margin: 5px 5px 5px 0;   
}            

.image, .image-screenshot, .image-skyline {                 
  text-align: center;  
  border-top: 0; 
  background: #100;    
}                                 

.image-screenshot {         
  height: 206px; 
}  

.image-skyline {         
  height: 295px; 
}            

.image img {              
  padding: 2px;    
}            

.image-right p {   
  background: url(../background/try-buy.gif) 50% bottom no-repeat;  
  margin: -4px 0 0 0;    
}                 

.trybuy-bg {  
  background: url(../background/try-buy.gif) 50% bottom no-repeat;  
  margin: 10px 0 0 254px;        
} 

.credit {
  font-size: 1em;
  color: #433;
  text-align: right; 
  margin: -15px 0 0 0;   
}        

.credit a {
  color: #433;  
}          

.credit a:hover {
  color: #a10302;
} 

.image-right {
  float: right;
  background: #100;  
  padding: 2px 2px 0 2px;
  margin: 3px 5px 0 14px;    
}      

.image-left {
  float: left;
  background: #100;  
  padding: 2px 2px 0 2px;
  margin: 3px 14px 0 0;    
}           

.image-center {
  text-align: center;
  background: #100;  
  padding: 2px 2px 0 2px;
  margin: 3px 6px 6px 0;    
}  

img.seq, img.news, img.screenshot {
  border: 1px solid #433;  
  padding: 2px;
}               

img.seq {
  margin: 0 0 3px 0;
}

.image-screenshot p {    
  display: block;  
  float: left;
  width: 287px; 
  color: #a10302;  
  font-weight: bold;
  font-size: 1.3em;
  line-height: 22px;  
  margin: 5px 0 0 4px;  
}          

img.logo {    
  padding: 5px 55px 5px 0;
}   
  
.install-container {
  margin: 5px 0 0 0;    
}            

.install-ota, .install-dmi {      
  float: left;   
  width: 286px;
  background: #322;
  padding: 1px;   
  margin: 0 10px 10px 0;   
}                        

.dload-ivista, .dload-ivista88 {      
  float: left;   
  width: 186px;
  background: #322;
  padding: 1px;   
  margin: 0 10px 10px 0;   
}             

.install-dmi, .dload-ivista88 {    
  margin: 0;   
}           

.install-heading { 
  font-size: 1.3em;       
  text-align: center;   
  color: #a10302; 
  font-weight: bold;
  background: #100;
  padding: 3px 0;
  margin: 0 0 1px 0;   
}           

.list-install {   
  background: #100 url(../background/bullet.gif) 5px 5px no-repeat;  
  font-size: 1.3em;   
  padding: 5px 5px 5px 20px;     
  margin: 0;    
}  

p.buynow { 
  background: #100 url(../background/buynow.gif) 50% 50% no-repeat;  
  line-height: 45px;      
  font-size: 1.6em;   
  text-align: center;     
  padding: 0 6px;     
}  

p.buynow a { 
  color: #fff; 
}      

p.buynow a:hover { 
  color: #f00; 
} 

#alarmpro-gallery { 
  width: 606px;
  height: 490px;
  background: #100 url(../background/blackberry2.png) 50% 10px no-repeat;
}           

#alarmpro-gallery img { 
  margin: 128px 0 0 141px;
}     

form.back, form.forward {
  position: absolute;  
  top: 450px;   
  width: 57px;
  height: 25px;
  font-size: 1.6em;     
  text-align: center;
  background: url(../background/link.gif) -4px 0;
}              

form.back a, form.forward a {
  color: #fff;  
}                  

form.back a:hover, form.forward a:hover {
  color: #f00;  
}   

.back {
  left: 327px;
}           

.forward {
  left: 806px;   
}     

.clear {  
  clear: both;  
} 



/*****  left panel  *****/


#left-panel {  
  float: left;
  width: 286px;    
  font-size: 1.2em;    
  font-weight: bold;
  color: #464646;   
  margin: 34px 0 0 0;     
}  

.item {              
  background: #fdf7f9 url(../background/item.gif) repeat-x; 
  border: 1px solid #b5b5b5;
  margin: 10px 30px 0 30px;  
}  

.date {
  text-align: center; 
  color: #a10302;
  padding: 6px 5px 5px 5px;
}    

.award {
	color: #a10302;
	padding: 12px 5px 5px 5px;
}           

.news-text {
  padding: 0 10px 5px 10px;  
}

.item ul {    
  list-style: none;
  list-style-image: url(../background/bullet-item.gif); 
  padding: 0 0 0 10px;   
  margin: 0 0 0 10px;  
}

.testimonial-text {
  padding: 10px 10px 5px 10px;  
  font-style: italic;
}

.testimonial-name {
  padding: 0 10px 5px 10px;
  font-weight: bold;
  text-align: right;
}

.news-image {
  text-align: center;
}      

.news-link {
  text-align: right;   
  padding: 5px 10px;      
}              

.news-link a {
  color: #d45657; 
  text-decoration: underline; 
}                

.news-link a:hover {
  color: #f00;
}                   


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


#footer {    
  clear: both;
  width: 900px;    
  height: 60px;  
  text-align: center;  
  color: #322;    
  margin: 15px 0 0 0; 
}       

.copy {
  display: block; 
  float: left;  
  width: 286px;  
  color: #2d2d2d;       
  padding: 5px 0 0 0;    
} 

.foot-nav {
  float: right; 
  display: block;
  width: 614px;      
  font-size: 1em;  
  background: url(../background/footer.gif) 50% 0 no-repeat;
  padding: 5px 0 0 0;  
}       

.copy a { 
  color: #d25657;
}   

.copy a:hover {
  color: #f00;
}    

.valid {
  display: inline-block;
  width: 80px;
  height: 15px; 
}  

.foot-nav a { 
  color: #8d8d8d;
}                   

.foot-nav a:hover {
  color: #a10302;
}     
  
#site-design {
  float: left;  
  width: 11px; 
  height: 107px;  
  margin: -117px 0 -70px -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;  
}