/* ---------------general styles---------------- */

h1{
	font-size: 160%;
	font-family: "Trebuchet MS", Arial, Sans-serif;
}


h2{
	font-size: 125%;
	color: black;
	font-family: "Trebuchet MS", Arial, Sans-serif;
	margin-bottom: -10px;
}

h3{
	font-size: 14px;
	color: #003366;
	font-family: "Trebuchet MS" Arial Sans-serif;
	font-style: bold;
	margin: 20px 0px 3px 0px;
}

h4{
	font-size: 14px;
	color: black;
	font-family: "Trebuchet MS", Arial, Sans-serif;
	font-style: plain;
	margin-left: 24px;
	margin-top: 4px;
	}


p.white{
color: white;
}

hr{
width: 90%;
color: #990000;
background-color: #990000;
float: right;
margin:0px;
}


/* ---------------navigation on left side---------------- */

#prodnavcontainer{
background: #F0F0F0; 
width: 254px;
height: 676px;
float: left;
}

.prodnav{
width: 248px;
float: left;
}

.prodnav h3 a{
text-decoration: none;
margin: 10px 0px 0px 0px;
}


.prodnav h3 a:hover{
color: #000080;
}

.prodnav ul{
list-style-type: none;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
text-align: right;
text-decoration: none;
}

.prodnav ul li{
padding-bottom: 6px; /*bottom spacing between menu items*/
}

.prodnav ul li a{
font-family: Verdana, Arial, Sans-serif;
color: black;
display: block;
padding: 9px 0px 4px 0px;
line-height:5px;
text-decoration: none;

}

.prodnav ul li a:visited{
color: black;
}

.prodnav ul li a:hover{ /*hover state CSS*/
color: #808080;
}



/* ---------------content styles---------------- */
    
#content{
   padding:0;
   margin: 0;
   width: 100%;
   font-size: 11px;
   background: white;
   color: black;
   font-family: Verdana, Arial, Sans-serif;
   text-align: left;
 }
 
#maincontainer{
width: 754px;
height: 676px;
float: left;
background: white;
}
 
#custom{
width: 373px;
height: 170px;
float: left;
background: url("/chrome/custom.jpg") no-repeat;
}

#custom p{
margin: 5px 10px 0px 111px;
}

#just{
width: 373px;
height: 170px;
float: left;
background: url("/chrome/just.jpg") no-repeat;
}

#just p{
margin: 5px 10px 0px 111px;
}

#players{
width: 373px;
height: 160px;
float: left;
background: url("/chrome/players.jpg") no-repeat;
}

#players p{
margin: 5px 10px 0px 111px;
}

#activation{
width: 373px;
height: 160px;
float: left;
margin-top: 1px;
background: url("/chrome/activation.jpg") no-repeat;
}

#activation p{
margin: 5px 10px 0px 111px;
}

#ivr{
width: 373px;
height: 160px;
float: left;
background: url("/chrome/ivr.jpg") no-repeat;
}

#ivr p{
margin: 5px 10px 0px 111px;
}

#voice{
width: 373px;
height: 160px;
float:left;
margin-top: 1px;
background: url("/chrome/voice.jpg") no-repeat;
}

#voice p{
margin: 5px 10px 0px 111px;
}

#background{
width: 373px;
height: 160px;
float: left;
background: url("/chrome/background.jpg") no-repeat;
}
 
 #background p{
margin: 5px 0px 0px 111px;
}

.backgroundinfo{
margin: 30px 0px 0px 18px;
width: 355px;
float: left;
}

/* -------footer----------------- */

#footer{
	clear: left;
	text-align: center;
	padding-top: 25px;
	width: 1010px;
	background-color: black;
	height: 40px;
	font-family: Trebuchet MS, Arial, Sans-serif;
	color: white;
	font-size: .8em;
	}