/* 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-image: url(../SITE_FILES_2/images/body_bg.gif);
background-repeat: no-repeat;
background-position: center top;
background-color: #8a8a8a;
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: 951px;
background-color: #FFFFFF;
margin: 14px auto 0;
text-align: left;
}

/*///////////////////////////////////////
....BANNER CONTAINS LOGO!!
///////////////////////////////////////*/

#banner{
height: 209px;
background-image:url(../usystem_images/new_header.jpg);
}
/*/////////////////////////////////////////
....BANNER CONTAINS LOGO!!
/////////////////////////////////////////*/
#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: 540px;
float: right;
/*margin-top: 20px;*/
}
/*...Extra wording on product page...*/
#inner p {
color: #16338f;
font-size: 80%;
width: 450px;
}

#top_curve {
height: 19px;
margin: 20px 0 0 0;
}

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

}

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

#container ul {
padding: 0;
margin-right: -20px;
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: 0px;
height: 0px;
/*top: 0px;
left: 0px;*/
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: 10px;

}

#container a {
border-color: #FFF;
}

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

/*//////////////////////////////////////////////////////////////////
...PRODUCT NAME (Inside inner, below #container) opens pop up window
//////////////////////////////////////////////////////////////////*/
#product_name p {
margin-left: 50px;
padding-bottom: 20px;
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: right;
font-size:65%;
color: #16338f;
width: 170px;
padding:10px 0 0 30px;
margin-left: 30px;
}


/*... 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: 880px;
margin: 0 25px 0 0;
}

#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: 10px;
padding-top: 8px;
}

/*accessories2*/
#copy.accessories2 {
width: 680px;
margin: 0 25px 0 0;
}

#copy.accessories2 table {

border: 1px solid #999;
}

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

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

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

/*////////////////////////////////////////////////////
......ACCESSORIES LAYOUT
////////////////////////////////////////////////////*/
#accessories {
float: right;
width: 880px;
margin: 0 20px 25px 0;
}
#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: 0px 10px 10px 0;
padding: 0 0px 0 0;
}
#contact h5 {
padding: 0;
margin: 0;
font-size: 110%;
}
#contact li {
line-height: 1.8em;
}
#contact ul {
padding: 0 0 0 16px;
}
/*//////////////////////////////////////
....BUTTONS  (Navigation Buttons above Footer)
//////////////////////////////////////*/

#buttons {
/*float: left;*/
margin-bottom: 15px;
width: 140px;
padding: 20px 0 0 0;
}
#buttons img {
padding: 5px 0 0 20px;
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: repeat-x;
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;
}

/*////GLOBAL MENU//////
/////////////////////*/

#menu_position {
position: relative;
left: -208px;
top: -14px;
}


/* CSS Menu Special */
#menu {
	font-size:12px;
	position:absolute;
	left:207px;
	top:-86px;
	z-index: 1; 
}
#menu ul {
    position:relative;
	top: 100px;
	list-style-type:none;
	width:150px;
	text-align: left;
	z-index: 1;
}
#menu li {
	position:relative;
	top: 100px;
	width:180px;
	float:left;
	z-index: 1;
	
}

#menu a {
	display:block;
	text-decoration:none;
	color:white;
	background-color:#555;
	font-weight:normal;
	padding:3px 3px 3px 15px;
	border-top:1px solid white;
	border-bottom:1px solid white;
	border-right:1px solid white;
	border-top:0;
	height:1%;
}
#menu a:hover {
	background-color:#ccc;
}
#menu li ul {
	position:absolute;
	top:-100px;
	left:180px;
	visibility:hidden;
}
#menu li:hover > ul {
	visibility:visible;
}

#menu li:hover > a {
	background-color:#777;
}

/* 1st sublevel */
#menu ul a:hover ul {
	visibility:visible;
}
#menu ul a:hover ul ul {
	visibility:hidden;
}
/* 2nd sublevel */
#menu ul a:hover ul a:hover ul {
	visibility:visible;
}
#menu ul a:hover ul a:hover ul ul {
	visibility:hidden;
}
/* 3rd sublevel */
#menu ul a:hover ul a:hover ul a:hover ul {
	visibility:visible;
}
#menu ul a:hover ul a:hover ul a:hover ul ul {
	visibility:hidden;
}
/* 4th sublevel */
#menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
	visibility:visible;
}
#menu ul a:hover ul a:hover ul a:hover ul a:hover ul ul {
	visibility:hidden;
}

/*////CLOSE GLOBAL MENU//////
///////////////////////////*/