/* Reset
--------------------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }

/*Font Styles
----------------------------------------------*/
body { font:88%/1.5 sans-serif; *font-size:small; }
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

/*Base Styles
----------------------------------------------*/
html { overflow-y: scroll; }
a:hover, a:active { outline: none; }
ul, ol { margin: 0 0 1.5em 1.5em;}
ol { list-style-type: decimal; }
ul.stripped, ul.stripped li, nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td { vertical-align: top; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
pre {
  white-space: pre; white-space: pre-wrap; word-wrap: break-word;
  padding: 15px;
}
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; } 
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid {
   border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }
body, select, input, textarea {
  color: #4c4c4c;
  font-family: Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 { 
	font-weight: normal; 
	line-height: 1.3;
	margin-bottom: .5em;
}
a, a:active, a:visited { 
	color: #165c7f; 
	text-decoration:none;
}
a:hover { color: #2d97c9; }
p { margin-bottom: 1.5em;}
blockquote {margin: 1.5em;}

/*Primary Styles
-------------------------------------------*/
body {background: rgb(255,255,255);}
#container {
	width: 980px;
	margin:0 auto;
	-webkit-box-shadow: 0 0 35px rgba(0,0,0,.7);
	-moz-box-shadow: 0 0 35px rgba(0,0,0,.7);
	box-shadow: 0 0 35px rgba(0,0,0,.7);
	border-left: 1px solid #AEAEAC;
	border-right: 1px solid #AEAEAC;
}
#content {
	width: 728px;
	float:right;
	padding: 21px 26px 26px 26px;
	min-height: 290px;
}
.col1, .col2, .col3 {
	width: 225px;
	float:left;
	margin: 0 13px;
	min-height: 1px;
}
	.col1 {
		margin-left:0;
	}
	.col3 {
		margin-right:0;
	}
#content h1 {
	font-size: 186%;
	color: rgb(34,69,145);
	padding-bottom: 5px;
	border-bottom: 1px solid rgb(217,217,217);
}
#content h2 {
	font-size: 143%;
}
#content h3 {
	font-size: 143%;
	color: rgb(34,69,145);
}
#content h4 {
	font-size: 114%;
	font-weight:bold;
}
#content h5 {
	font-size: 114%;
	color: rgb(34,69,145);
	font-weight:bold;
}
#content h6 {
	font-size: 100%;
	font-weight:bold;
}
ul#features {
	color: rgb(19,81,113);
  margin-bottom: 0;
}

ul#features li:last-child{
  list-style-image: none;
  margin-bottom: 1.5rem;
}
ul#features li:empty{
  display: none;
}
ul#features li:empty::marker{
  content: "";
}
		
	/*Header
	------------------------------------------- */
	header {
		background: rgb(255,255,255);
	}
	#logo {
    background: url(../images/ui/jackson-labs-viavi-logo.png) no-repeat;
    width: 250px;
    height: 70px;
    float: left;
    margin: 25px 10px 0 10px;
  }
		.ie7 #logo {
			margin-bottom: 20px;
		}
	header h1 {
		color: rgb(125,125,125);
		font-size: 143%;
		float:left;
		text-align:center;
		margin: 35px;
	}
	#search_box {
		width: 175px;
		padding: 20px 15px;
		float:right;
		background: rgb(34,69,145);
	}
		#search_box form {
			margin-bottom: 10px;
		}
		#search_box form input[type="search"], .ie7 #search_box form input#keywords {
			-webkit-appearance: textfield;
			border:none;
			-webkit-border-radius: 2px 0 0 2px;
			-moz-border-radius: 2px 0 0 2px;
			border-radius: 2px 0 0 2px;
			height: 22px;
			padding: 0 3px;
			width: 138px;
			margin:0;
			font-size: 14px;
			line-height: 1;
		}
			.ie7 #search_box form input#keywords {
				width: 134px;
				height: 13px;
				padding: 3px;
			}
		#search_box form input[type="submit"] {
			border:none;
			background:url(../images/ui/search_submit.gif) 0 0 no-repeat;
			width: 31px;
			height: 22px;
			margin:0 0 0 -4px;
			padding:0;
		}
			#search_box form input[type="submit"]:hover {
				background-position: 0 -22px;
			}
		#search_box ul a, #search_box ul a:visited {
			color: rgb(255,255,255);
			text-decoration: underline;
			font-size: 10px;
			text-transform: uppercase;
		}
			#search_box ul a:hover {
				color: #f8aa1a;
			}
			#search_box ul li {
				display:inline;
			}
			#search_box ul li:first-child {
				margin-right: 5px;
				line-height: 1.6;
			}
			#search_box ul li:first-child a {
				background: url(../images/ui/ico_camera.gif) no-repeat left center;
				padding-left: 20px;
			}
				#search_box ul li:first-child a:hover {
				background-image: url(../images/ui/ico_camera_hover.gif);
			}
		#banner {
			width: 980px;
			height: 194px;
			background: url(../images/ui/body_banner.jpg);
			color: rgb(255,255,255);
			position:relative;
			border-bottom: 5px solid rgb(255,255,255);
			z-index:0;
			overflow:hidden;
		}
			#banner.Yellow {
				background-position: 0 0;
			}
				#banner.Yellow h2 {
					color: rgb(225,167,35);
				}
			#banner.Red {
				background-position: 0 -194px;
			}
				#banner.Red h2 {
					color: rgb(169,49,36);
				}
			#banner.Green {
				background-position: 0 -388px;
			}
				#banner.Green h2 {
					color: rgb(125,142,57);
				}
			#banner.Blue {
				background-position: 0 -582px;
			}
				#banner.Blue h2 {
					color: #2354dc;
				}
			#banner.Purple {
				background-position: 0 -776px;
			}
				#banner.Purple h2 {
					color: #713da2;
				}
			#banner.Orange {
				background-position: 0 -970px;
			}
				#banner.Orange h2 {
					color: #d8770e;
				}
			#banner #heading {
				position:absolute;
				bottom:10px;
				left: 10px;
			}
				#banner h2 {
					font-size: 68px;
					font-weight:bold;
					text-shadow: 0 0 8px rgba(0,0,0,.5);
					margin-bottom:10px;
				}
				#banner h3 {
					font-size: 18px;
					margin-bottom:0;
				}
			#banner ul {
				font-size: 16px;
				font-weight:bold;
				float:right;
				width: 270px;
				margin: 25px 100px 0 0;
			}
				#banner ul li {
					margin-bottom: 5px;
				}
			#banner h3, #banner ul {
				text-shadow: 0 0 8px rgba(0,0,0,.5);
			}
			#banner img {
				position: absolute;
				top: 25px;
				left: 370px;
			}
			
		/*Navigation
		----------------------------------------*/
		nav#top {
			background: rgb(76,76,76);
			float:left;
			width: 980px;
			border-top: 5px solid rgb(255,255,255);
			border-bottom: 1px solid rgb(255,255,255);
			position:relative;
			z-index:10;
		}
			nav#top li {
				float:left;
			}
			nav#top li a {
				padding: 7px 20px;
				display:block;
				color: rgb(255,255,255);
				text-transform:uppercase;
				text-align:center;
			}
			nav#top li:hover, nav#top li.current {
				background: rgb(116,116,116);
			}
		nav#top ul ul {
			position: absolute;
			left:-999em;
			background: rgb(76,76,76);
			min-width: 150px;
		}
			nav#top ul li:hover ul {
				left: auto;
			}
			nav#top ul ul li {
				clear:left;
				width: 100%;
			}
			nav#top ul ul li a {
				text-align: left;
				border-top: 1px solid #fff;
				min-width: 1%;
				display:block;
			}
	/*Sidebar
	---------------------------------------*/
	#sidebar {
		background: rgb(34,69,145);
		width: 200px;
		float:left;
	}
	nav#side ul a {
		color: rgb(255,255,255);
		text-transform: uppercase;
		padding: 10px;
		display:block;
		min-height: 1px;
	}
		nav#side ul a:hover, nav#side ul li.current a {
			background: rgb(29,122,169);
		}
	nav#side ul li {
		border-bottom: 1px solid rgb(255,255,255);
		width: 100%;
	}
	a#brochure {
		background: url(../images/ui/brochure.gif);
		width: 158px;
		height: 101px;
		margin: 20px auto;
	}
	
	/*Footer
	--------------------------------------*/
	footer {
		width: 728px;
		float:right;
		margin: 0 26px;
		padding: 26px 0 50px 0;
		border-top: 1px solid rgb(217,217,217);
		font-size: 71%;
		text-align:center;
	}
	footer ul li, footer ul {
		display:inline;
	}
	footer ul a, footer ul a:visited {
		color: #4c4c4c;
		text-decoration: underline;
	}
		footer ul a:hover {
			color: rgb(34,69,145);
		}
	#copyright {
		margin-bottom: .5em;
	}
	
	/*Homepage
	---------------------------------------*/
	.banner {
	  width: 980px;
	  height: 194px;
	  background: url(../images/ui/body_banner.jpg);
	  color: rgb(255,255,255);
	  position:relative;
	  border-bottom: 5px solid rgb(255,255,255);
	  z-index:0;
	  overflow:hidden;
	}
	.banner h2 {
	  font-size: 46px;
	  font-weight:bold;
	  text-shadow: 0 0 8px rgba(0,0,0,.5);
	  margin-bottom:10px;
  	}
			.banner.Yellow {
				background-position: 0 0;
			}
				.banner.Yellow h2 {
					color: rgb(225,167,35);
				}
			.banner.Red {
				background-position: 0 -194px;
			}
				.banner.Red h2 {
					color: rgb(169,49,36);
				}
			.banner.Green {
				background-position: 0 -388px;
			}
				.banner.Green h2 {
					color: rgb(125,142,57);
				}
			.banner.Blue {
				background-position: 0 -582px;
			}
				.banner.Blue h2 {
					color: #2354dc;
				}
			.banner.Purple {
				background-position: 0 -776px;
			}
				.banner.Purple h2 {
					color: #713da2;
				}
			.banner.Orange {
				background-position: 0 -970px;
			}
				.banner.Orange h2 {
					color: #d8770e;
				}
			.banner #heading {
				position:absolute;
        width: 360px;
				top:25px;
				left: 10px;
			}
				.banner h3 {
					font-size: 21px;
					margin-bottom:0;
				}
			.banner ul {
				font-size: 17px;
				font-weight:bold;
				float:right;
				width: 270px;
				margin: 45px 100px 0 0;
			}
				.banner ul li {
					margin-bottom: 15px;
				}
			.banner h3, .banner ul {
				text-shadow: 0 0 8px rgba(0,0,0,.5);
			}
			.banner img {
				position: absolute;
				top: 25px;
				left: 370px;
			}
			a.banner, a.banner:hover, a.banner:visited {
				color: rgb(255,255,255);
			}
			#slideshow .banner {display:none;}
			#slideshow .banner:first-child {display:block;}
	#index #content h4 {
		font-size: 129%;
		color: rgb(34,69,145);
		border-bottom: 1px solid rgb(217,217,217);
		padding-bottom: 5px;
	}
	#index #content #product img {
		margin: 0 auto 1.5em auto;
	}
	#index #news p span {
		color: rgb(34,69,145);
	}
	
	/*Special Styling
	---------------------------------------*/
	#content .category_h h4 {
		background: rgb(34,69,145);
		text-align:center;
		padding: 10px 0;
		color: rgb(255,255,255);
		text-transform: uppercase;
		margin:0;
		width: 224px;
		font-weight: normal;
	}
		.category_h h4:first-child {
			border-top:none;
		}
		#content.products_c {
			padding-top:0;
		}
		.solutions .category_h img {
			display:block;
			border-top: 1px solid #fff;
			border-bottom: 1px solid #fff;
		}
		#content .category_h a:hover h4, #content .category_h.current h4 {
			background-color: #1E7AA9;
		}
	.products .supplements {
		width: 229px;
		float:left;
		margin-right: 20px;
	}
		.products div.supplements {
			margin-right:0;
		}
	.products .supplements h5, figure figcaption {
		font-size: 100%;
		color: rgb(34,69,145);
		margin-bottom: 1em;
	}
	.supplements ul {
		margin-left:0;
		list-style:none;
	}
		.supplements ul li {
			margin-bottom: .5em;
		}
		ul li.pdf {
			background: url(../images/ui/pdf.gif) no-repeat left;
			padding-left: 25px;
		}
		#content .supplements h5 {
			font-weight:normal;
			font-size: 100%;
		}
#specs_body {
	color: #fff;
	padding: 10px;
}
	#specs_body h1 {
		color: #f8aa1a;
		text-align:center;
		font-size: 143%;
		font-weight:bold;
		font-style:oblique;
		margin-bottom: 1em;
	}
	#specs_body table td, #specs_body table th {
		padding: 5px;
		border: 3px solid rgb(51,51,51);
	}
		#specs_body table th {
			padding: 10px 5px;
		}
	#specs_body table tr td:first-child {
		white-space: nowrap;
		font-weight:bold;
	}
	#specs_body table th {
		background: rgb(61,107,138);
		vertical-align: middle;
		font-size: 109%;
		white-space: nowrap;
	}
		#specs_body table th:first-child {
			color: #f8aa1a;
		}
	#specs_body table tr.odd td {
		background: #75706b;
	}
		#specs_body table tr.odd:hover td {
			background: #9c958e;
		}
		#specs_body table tr.odd td:first-child {
			background: #5584a4;
		}
			#specs_body table tr.odd:hover td:first-child {
				background: #6298bd;
			}
	#specs_body table tr.even td {
		background: #69625c;
	}
		#specs_body table tr.even:hover td {
			background: #9c958e;
		}
		#specs_body table tr.even td:first-child {
			background: rgb(61,107,138);
		}
			#specs_body table tr.even:hover td:first-child {
				background: #6298bd;
			}
	#specs_body table a:hover {
		color: #fff;
	}
	.faqs #content dl dt {
		font-weight:bold;
		margin-bottom: .5em;
	}
	.faqs #content dl dd {
		margin-bottom: 1.5em;
	}
.result {
	padding: 10px;
}
	.result a, .result a:visited {
		color: #4c4c4c;
		text-decoration:underline;
	}
		.result a:hover {
			color: rgb(34,69,145);
		}
.result.even {
	background: #e8f6fc;
	margin-bottom: 10px;
}
.hilite {
	background: #ffffc9;
}

/*Forms
---------------------------------------*/
#contact_form {
	border-top: 1px solid #ccc;
	padding-top: 10px;
}
#contact_form fieldset {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #ccc;
}
#contact_form div {
	width: 250px;
	float:left;
	margin: 0 20px 10px 0;
}
	#contact_form div.hiddenFields {
		margin:0;
	}
	#contact_form div.textarea {
		width: 708px;
		margin:0 0 10px 0;
	}
#contact_form label {
	display:block;
}
#contact_form span, #contact_form label.error {
	color: #f00;
}
#contact_form input[type="text"], #contact_form input[type="email"], textarea {
	width: 98%;
	padding: 1%;
	margin:0;
}
#contact_form select {
	width: 100%;	
}
#contact_form textarea {
	height: 150px;
}
#contact_form input[type="submit"] {
	background: #929292; /* old browsers */
	background: -moz-linear-gradient(top, #929292 0%, #747675 50%, #474948 50%, #474948 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#929292), color-stop(50%,#747675), color-stop(50%,#474948), color-stop(100%,#474948)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#929292', endColorstr='#474948',GradientType=0 ); /* ie */
	background: -o-linear-gradient(top, #929292 0%,#747675 50%,#474948 50%,#474948 100%); /* opera */	
	border:none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color: rgb(255,255,255);
	padding: 7px 25px;
	font-weight:bold;
	text-shadow: 0 -1px 0 rgba(0,0,0,.5);
	text-transform: uppercase;
	float:left;
}
	#contact_form input[type="submit"]:hover {
		background: #9FA1A0; /* old browsers */
		background: -moz-linear-gradient(top, #9FA1A0 0%, #8E908F 50%, #656766 50%, #656766 100%); /* firefox */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9FA1A0), color-stop(50%,#8E908F), color-stop(50%,#656766), color-stop(100%,#656766)); /* webkit */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9FA1A0', endColorstr='#656766',GradientType=0 ); /* ie */
		background: -o-linear-gradient(top, #9FA1A0 0%,#8E908F 50%,#656766 50%,#656766 100%); /* opera */
	}
#contact_form input[type="reset"] {
	border: none;
	background: none;
	float:right;
	padding:0;
	margin:0 20px 0 0;
	cursor: pointer;
	color: #999;
}
	#contact_form input[type="reset"]:hover {
		color: rgb(34,69,145);
	}


		

	
/*Non-Semantic Helper Classes
-----------------------------------------*/
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.clear {clear:both;}

/*Print Styles
-----------------------------------------*/
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}