/* CSS Document*/
/*.....create separate classes for #inner and #copy 
and whatever else you think would be useful so that we can assign 
these to every page other that the main product page....*/

html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset{
margin: 0;
padding: 0;
border: 0;
}

body { 
background-color: #ccc;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
font-size: 100%;
text-align: center; 
}

/*/// large telephone no.///*/
.tel {
font-size: 140%;
font-weight:bold;
}
/*testdiv*/
#testdiv {
margin: 20px 0 0 80px;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}

/*///////////////////////////////////////////////////////
......TABLES ON TECH PAGES
//////////////////////////////////////////////////////*/
table.tech {
float: right;
margin-right: 100px;
margin-bottom: 10px;
text-align: center;
font-size: 70%;
}
table.tech caption {
text-align: left;
margin-right: 100px;
color: #16338f;
font-weight: bold; 
}
/*.......End Tables.........*/

#wrapper{
width: 850px;
background-color: #FFFFFF;
margin: 0px auto;
text-align: left;
}

/*///////////////////////////////////////
....BANNER (contains #bannernav)
///////////////////////////////////////*/

#banner{
height: 133px;
background-image:url(../usystem_images/header.jpg);
}
/*/////////////////////////////////////////
....BANNERNAV (Inside #banner)
/////////////////////////////////////////*/
#bannernav {
height: 22px;
width: 850px;
float: right;
font-size: 80%;
background-image: url(../usystem_images/bannernav_img.jpg);
background-position: bottom;
}

#bannernav table{
text-align: center;
border: 1px solid #999;
padding: 11px 11px;
margin-bottom: 1px;
}

/*//////////////////////////////////////
.........NAVIGATION
//////////////////////////////////////*/

#nav{
height: 26px;
background-repeat: none;
font-size: 80%;
font-weight: normal;
color: #000;
background-image: url(../usystem_images/bannernav_img.jpg);
text-align: center;
padding: 8px 0 0 0;
}

#nav a {
color: #000;
text-decoration: none;
padding: 10px 0 0 0;
}

#nav a:hover, #nav a:focus {
color: #8ba9f0;
}
#nav table {
/*margin-top: 9px;*/
}

/*........End Navigation.......*/

/*/////////////////////////////////////////////////////
.......special h5  (Hosting Centre) 
/////////////////////////////////////////////////////*/

.hostingcentre {
margin-bottom:0px;
padding-bottom: 0px;
padding-top: 10px;
padding-left: 146px;
color: #16338f;
}
/*/////////////////////////////////////////////////////
.......UCoustic Cab 
/////////////////////////////////////////////////////*/
.Ucoustic_header {
padding: 0 0 0 10px;
}

.header_fade {
background-image: url(../ucousticcabinet/top_fade.jpg);
background-repeat:no-repeat;
}
.header_fade p {
margin: 0;
padding: 4px 0 4px 130px;
/*font-weight: bold;*/
color: #16338f;
font-size: 90%;
}
/*/////////////////////////////////////////////////////
.......INNER  (Contains #container and #product_name) 
/////////////////////////////////////////////////////*/


#inner {
width: 520px;
float: right;
margin-top: 20px;
}
/*...Extra wording on product page...*/
#inner p {
color: #16338f;
font-size: 80%;
width: 450px;
}

/*...Inner div variations...*/

#inner_vari_1 {

}
#inner_vari_2 {

}


/*/////////////////////////////////////////////////////////////////
......CONTAINER (inside Inner) More stuff in individual stylesheets
/////////////////////////////////////////////////////////////////*/
/*.......Controls the css photo Gallery.......*/
#container {
position: relative;
margin-top: 40px;
width: 390px;
height: 290px;
}

/*..#container fixed main_pic moved to individual stylesheets..*/

#container ul {
padding: 0;
margin-right: -30px;
list-style-type: none;
}

#container ul {
width: 132px;
height: 240px;
float: right;
}

#container li {
float: left;
}

#container li.hdr {
color: #16338f;
padding-bottom: 5px;
font-size: 80%;
}

#container a.gallery span {
position: absolute;
width: 1px;
height: 1px;
top: 5px;
left: 5px;
overflow: hidden;
background: #fff;
}

#container a.gallery, #container a.gallery:visited {
display: block;
color: #000;
text-decoration: none;
border: 1px solid #16338f;
margin: 1px 2px 1px 2px;
text-align: left;
cursor: default;
}

#container a.gallery:hover {
border: 1px solid #fff;
}

#container a.gallery:hover span {
position: absolute;
width: 250px;
height: 280px;
top: 10px;
left: 0px;
background: #fff;
}

/*.........End Container.........*/

/*//////////////////////////////////////////////////////////////////
...PRODUCT NAME (Inside inner, below #container) opens pop up window
//////////////////////////////////////////////////////////////////*/
#product_name p {
margin-left: 50px;
color: #16338f;
font-weight: bold; 
}
#product_name a {
font-size: 80%;
color: #16338f;
}

/*/////////////////////////////////////////
.....LEFT COLUMN  with vertical image
/////////////////////////////////////////*/

#leftcolumn {
padding: 10px 0 0 15px;
background-color: #FFF;
/*///edited by martin////
width: 30px;
/////*/
float: left;
}

/*///////////////////////////////
............COPY    
///////////////////////////////*/

#copy {
float: left;
font-size:65%;
color: #16338f;
width: 170px;
padding:10px 0 0 30px;
margin-left: 30px;
}
/*...#copy div variations...*/
#copy_vari_1 {

}

#copy_vari_2 {

}

/*... product lists with bullet images...*/
#copy ul.bullets{
list-style-type: none;
padding-top: 10px;
padding-left: 2px;
font-weight: bold;
line-height: 20px;

}
#copy ul.bullets li {
background-image: url(../usystem_images/blue_bullet_bg.gif);
background-repeat: no-repeat;
padding: 0 0 0 14px;
}
/*...controls width on the accessories pages...*/
#copy.accessories {
width: 670px;
}

#copy.accessories table {

border: 1px solid #999;
}

#copy.accessories td {
padding: 2px;
border-right: 1px solid #999;
border-top: 1px solid #999;
text-align: center;
}

#copy.accessories h4, h5{
padding-bottom: 20px;
padding-top: 8px;
}

/*.................END................*/

/*////////////////////////////////////////////////////
......ACCESSORIES LAYOUT
////////////////////////////////////////////////////*/
#accessories {
width: 480px;
margin-bottom: 25px;
}
#accessories p{
margin: 5px;
}
#accessories a {
color: #16338f;
}
#accessories a:hover {
text-decoration: none;
}
#accessories td {
text-align: center;
padding: 2px;
}
#accessories table {
border: 1px solid #999;
}
#back a{
font-size: 120%;
color: #16338f;
}

/*///////////////////////////////////////////////
........CONTACT FORM
//////////////////////////////////////////////*/
#contact {
float: right;
width: 650px;
color: #16338f;
font-size: 80%;
margin: 20px 10px 10px 0;
padding: 0 20px 0 0;
}
/*//////////////////////////////////////
....BUTTONS  (Navigation Buttons above Footer)
//////////////////////////////////////*/

#buttons {
clear:both;
text-align: center;
padding: 8px 8px;
margin-bottom: 15px;
}
#buttons img {
padding-right: 5px;
border: none;
}
#ucoustic_table table{
border: 1px solid #fff;
border-collapse: collapse;
}
#ucoustic_table td {
background-color: #eeeeee;
border-top: 1px solid #FFF;

}
#flash_sounds {
/*height: 155px;*/
width: 720px;
}

/*//////////////////////////////// 
...........ACCESSORY 3 COLUMN CHILD PAGES
///////////////////////////////*/

#accessleftcolumn {
float: left;
width: 210px;
}

#accessmiddlecolumn {
float: left;
padding-left: 9px;
padding-right: 9px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 210px;
}

#accessrightcolumn{
padding-left: 10px;
padding-right: 10px;
float: right;
width: 210px;
}

#accessfixings {
clear: both;
text-align: center;
padding-top: 10px;
padding-bottom: 20px;
}
#accessfixings a{
color: #003399;
}

/*//////////////////////////////// 
...........ACCESSORY 2 COLUMN CHILD PAGES
///////////////////////////////*/

#accesstwoleftcolumn {
float: left;
width: 300px;
}

#accesstworightcolumn{
float: right;
width: 300px;
}

#accessfixings {
clear: both;
text-align: center;
padding-top: 10px;
padding-bottom: 20px;
}

.ucoustic_table table{
border-style: solid;    border-top-style: none;   border-width: 1px;   border-color: #666666;}

.ucoustic_table td tr th{
border: 1px solid #FFF;
}

/*//////////////////////////////// 
...........BOTTOM LOGOS
///////////////////////////////*/
#logos {
text-align:right; 
padding: 10px 10px 10px 0px;
}
/*//////////////////////////////// 
...........FOOTER 
///////////////////////////////*/

#footer{
clear: both;
background-image: url(../usystem_images/linkimg.jpg);
background-repeat: no-repeat;
color: #000;
text-align: center;
font-size: 70%;
padding: 6px 6px;
border-top: 1px #666 solid;
border-bottom: 1px #666 solid;
}
#footer a{
color: #000;
text-decoration: underline;
}
#footer a:hover{
color: #FFF;
text-decoration: none;
}
#footer a:visited{
color: #000;
}

#nopad {
font-size: 130%;
font-weight: bold;
}

.super {
font-size: 75%;
line-height: 2em;
}

#ucoustic.page p {
padding: 0;
margin: 0;
}