@charset "utf-8";

/* CSS Document */

p {
	font-family:Arial, Helvetica, sans-serif;
	margin-top: 3px;
	line-height: 1.3;
}
#coax strong {
	color: #990000;
}
#rightside ul {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	margin-left: 40px;
}

#rightside em {
	font-style: normal;
	font-weight: bold;
}

.imgLeft {
	float: left;
	margin-left:30px;
	margin-right: 10px;
}

.imgRight {
	float: right;
	margin-right: 30px;
	margin-left: 20px;
}

#fm .imgLeft {
	margin-left: 0;
}

#fm .imgRight {
	margin-right: 0;
}


.productPhotos {
	display: block;
	float: left;
	list-style-type: none;
}
.productPhotos li {
	display: block;
	float: left;
	width: 160px;
	list-style-type: none;
	margin: 10px 10px 0px 10px;
}
p.caption,
.productPhotos p {
	font-size: 9px;
	font-weight: bold;
	color: #000000;
	text-align: center;
	padding: 0 !important;
}

.imgRight p {
	text-align: center;
}

.imgLeft, .imgRight {
/*	margin-top: 20px;
*/	margin-bottom: 8px;
}

.imgCenter {
	display: block;
	margin: 5px auto 5px auto;
}

table {
	border-collapse:collapse;
	border-spacing: 0;
	color:#000000;
	font-family:verdana, arial, sans-serif;
	font-size:11px;
	line-height: 1.4;
	table-layout:fixed;
	text-align:justify;
	width: 500px;
	margin: 0 auto;
}

a.pdf,
a.pdf:hover {
	background-image: url(../images/pdf.gif);
	background-position: left center;
	background-repeat: no-repeat;
	font-size :  11px;
	font-weight :  bold;
	line-height: 35px;
	display:block;
	padding-left: 30px;
	margin: 10px 0px 10px 20px;
}

a.pdf:hover {
	color: #990000;
	text-decoration: underline;
}

h1 {
	font-family :  verdana, "trebuchet ms", geneva, sans-serif;
	font-size :  18px;
	font-weight :  normal;
	color :  #0A3867;
	margin :  0px 0px 10px 0px;
	padding :  7px 0px 7px 15px;
	text-transform :  capitalize;
}

h2, h3 {
	font-family :  "trebuchet ms", geneva, sans-serif;
	font-size :  16px;
	font-weight :  bold;
	color :  #0A3867;
	background :  inherit;
	margin :  0px;
	padding-left: 30px;
	text-transform :  capitalize;
	text-align: center;
}


a {
	color :  #0A3867;
	font-weight: bold;
}

a:hover {
	color :  #000000;
}


#fm #rightside h1 {
	padding-left: 0px;
	padding-right: 0px;
	margin: 0;
}

#leftOneOfTwo {
	float: left;
	margin: 0 !important;
	padding: 0 !important;
	width: 48%;
}
#leftOneOfTwo img {
	display:block;
	margin: 0 auto;
}
#leftOneOfTwo h2 {
	padding-left: 0;
	padding-right: 0;
}

/************* properties for tables in the product pages ***********************************/
table.product {
	width: auto;
	margin: 0 auto 0 30px;
	background-color: #E6E6E6;
}


/* for the description block in the tables - make it stand out with a light background color */
col#desc,
tr.subHead {
	background-color: #C9C9C9;
}
col#data, col#data1, col#data2 {
	background-color: #BDbDbD;
}

.product td {
	padding: 2px 5px;
	border: 2px solid #FFF;
	text-align: left;
}

#coax .product td {
	padding: 2px 10px;
}

.product th {
	background: #0a3867 url(../images/tableHeader.jpg) repeat-x scroll 0%;
	color: #FFF;
	padding: 3px 3px;
	text-align: center;
}

/********************************************************************************************/
/* table properties in coaxial rotary joints */

col#reactive {
	width: 100px;
}

col#label {
	width: 120px;
}

col#absorptive {
	width: 120px;
}

/* table properties in HDR products */

#hdrTable {
	width: 450px;
	margin: 0 auto;
	background-color: #E6E6E6;
}

#hdrTable td {
	padding: 2px;
	border: 1px solid black;
}

#hdrTable col#label {
	width: 120px;
}

#combinerTable {
	width: 60%;
	height: auto;
	margin: 5px;
	background-color: #E6E6E6;
	margin: auto 0;
}

#combinerTable td {
	padding: 2px 5px;
	border: 2px solid #FFF;
	text-align: left;
}

#combinerTable col#label {
	width: 180px;
}

#combinerTable th {
	background: #0a3867 url(../images/tableHeader.jpg) repeat-x scroll 0%;
	color: #FFF;
	padding: 3px 3px;
	text-align: center;
}

/**  Here's styles for the product options at the bottom of each product page ***/

#options {
	clear: both;
	margin-top: 30px;
	margin-left: 30px;
}

#options h2 {
	font-size: 14px;
	font-weight: bold;
	text-align: left;
	padding: 2px 5px;
}

#options table {
	margin: 5px;
	background-color: #E6E6E6;
	border-collapse: collapse;
	width: 340px;
}

#options th, #options td {
	padding: 2px 5px;
	text-align: left;
	vertical-align: baseline;
	border-right: 10px solid #FFF;
}

#options th {
	padding: 3px 3px;
	text-align: left;
	background: #0a3867 url(../images/tableHeader.jpg) repeat-x scroll 0%;
	color: #fff;
}

#options ul {
	list-style: none;
	margin: 0;
}

#options ul li {
	text-align: left;
	padding-top: 2px;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

/*********** HDR product properties **************/

#colLeft {
	float: left;
	position: relative;
	width: 45%;
	margin-left: 30px;
}

#colRight {
	float: right;
	position: relative;
	width: 45%;
	margin-right: 30px;
}

.fullWidth {
	width: 100%;
	margin-left:0;
}

.twoCol {
	float: left;
	width: 48%;
	margin: 4px 4px;
}

/********* FM HDR Products page *********************/
.hdrProduct {
	float: left;
	position: relative;
	background-color: #E6E6E6;
	width: 90%;
	height: auto;
	margin: 0 auto 20px 40px;
}

.hdrProduct h1 {
	background-color: #C6C6C6;
	padding: 2px 0;
}

.hdrProduct img {
	clear: both;
	float: left;
	margin: 0 10px 10px 0;
	padding: 0;
}

#rightside .hdrProduct ul {
	list-style-position: outside;
	padding-right: 10px;
	list-style-image: url(../images/blueBullet.gif);
	font-weight: normal;
	margin-left: 30px;
}

.hdrProduct h2 {
	background-color: #E6E6E6;
	padding: 3px 0;
	border-bottom: 1px solid #0A3867;
}

#fm #rightside .hdrProduct p {
	font-size: 11px;
	margin: 0;
	padding: 6px 10px;
	text-align: justify;
}

div.hdrProduct:hover {
	background-color: #CCCCCC;
	cursor: pointer;
}

.hdrProduct a {
	text-decoration: none;
}

/* these coaxDescrip's are used on the fmCoaxial page */

.coaxDescrip {
	margin-top: 10px;
	margin-left: 5px;
	margin-right: 5px;
	position: relative;
	background-color: #E6E6E6;
}

.coaxDescrip h2 {
	color: #0A3867;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	padding: 0px;
	border-bottom: 1px solid #0A3867;
}

.coaxDescrip a {
	text-decoration: none;
}

#fm #rightside .coaxDescrip p {
	font-size: 12px;
	margin: 0;
	padding: 6px 10px;
	text-align: justify;
}

#rightside .coaxDescrip ul {
	margin-left: 20px;
	font-weight: normal;
}

#rightside .coaxDescrip li {
	font-size: 11px;
	padding: 2px 0;
}

div.coaxDescrip:hover {
	background-color: #CCCCCC;
	cursor: pointer;
}

/**** this is the container in all the include files for the power specific products ****/
#powerDiv {
	clear: both;
	border-top: 5px solid #910000;
	padding-top: 10px;
}

#powerOptions {
	background-color: #E9E9E9;
	width: 100%;
	position: relative;
	float: left;
	margin-top: 10px;
}

#powerOptions h1 {
	font-size: 14px;
	font-weight: bold;
	padding: 5px;
	color: #0a3867;
	margin: 0;
}

#powerOptions ul {
	list-style: none;
	margin-left: 40px;
	margin-top: 0px;
}

#powerOptions li {
	float: left;
	margin: 0 5px;
	width: 100px;
}

#powerOptions li a {
	display: block;
	color: #0a3867;
	background-color: #C9C9C9;
	text-align: center;
	padding: 2px 5px;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
}

#powerOptions li.here a {
	color: #FFF;
	background-color: #910000;
}

#powerOptions a:hover {
	color: #C9C9C9;
	background-color: #0a3867;
}

#bandpassList {
	background-color: #E9E9E9;
	padding: 2px 0px;
}

#bandpassList p {
	font-weight: bold;
	text-align: center;
	margin-bottom: 0px;
}

#bandpassList img {
	margin-right: 5px;
	margin-left: 5px;
}

/**************************  here's all the rules for displaying a larger image when you hover over a drawing ******************/

#powerDiv .thumbnail {
	margin: 0;
	float:right;
}

/**** IMPORTANT NOTE !!! because of the IE z-index bug, do not make this position relative.  If we do and position the hovered
 images absolutely from this, they will display UNDER the tables and not over.  Use margins to position the hovered images *****/
#powerDiv .productBox {
	clear: both;
	float:left;
	margin-top: 30px;
	width: 100%;
	border-bottom: 1px solid #CCCCCC;
	padding-bottom: 10px;
}

#powerDiv .combinerTable {
	float: left;
}

#powerDiv .hoverbox {
	float: right;
	width: 200px;
}

#powerDiv .hoverbox a.viewButton {
	text-decoration: none;
	padding: 2px 0px;
	font-size: 12px;
	font-weight: bold;
	background-color: #CCCCCC;
	width: 100px;
	height: 15px;
	text-align: center;
	margin-top: 7px;
	float:right;
}

#powerDiv .hoverbox a.viewButton img {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	border: 0px;
}

#powerDiv .hoverbox a.viewButton:hover img {
	display:block;
	position:absolute;
	width: auto;
	height: auto;
	margin-top: -200px;		/* important to use margins to position these because of IE z-index bug */
	margin-left: -650px;
	border: 5px solid #0A3867;
	z-index: 5000;
	white-space: normal; /* to make z-index work in IE */
	overflow: auto;
}

#powerDiv .hoverbox a.viewButton:hover {
	background-color: #0A3867;
	color: #FFF;
}
