@charset "UTF-8";
/* CSS Document */

/* COLOURS
Blue	#0a79b1
Yellow	#fcbf19
V light grey	#e5e5e5
Light grey		#ccc
Copy grey		#666
Mid grey		#878787
Dark grey		#484848
Dark blue		#00add8
Darker blue		#0a79b1
*/

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

/* hide from MacIE \*/
html {
    min-height: 100%;
    margin-bottom: 1px;
}
/* end hiding from IE5 mac */

html, body {
	height: 100%;
	background: url(../images/bgrd-grey-top.gif) repeat-x;
	background-attachment: fixed;
}

/* Trebuchet MS,  */
	
body {
	font-family: Verdana, Geneva, Tahoma, Arial, Helvetica,  sans-serif;
	background: #fff url(../images/background.jpg) repeat-y center top;
	color: #666;
	font-size: 100.01%;
	line-height: 1.1em;
	text-align:center; /* horizontal centering for IE Win quirks */
}

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 130%;
	font-weight: normal;
}

body strong {
	color: #484848;
	letter-spacing: 0.1em;
}

a img {
	border: 0px;
}

hr {
 	border-top: 1px solid #b2b2b2;
	border-bottom: none;
	border-left: none;
	border-right: none;
 	color: #b2b2b2;
 	/*width: 100%;*/
 	height: 0px;
 	margin: 10px 10px 20px 10px;
 	padding: 0 0 0 0;
}
	
a:link {
	color: #0099cc; /* was #0a79b1  then #00cccff */
	text-decoration: none;
}

a:visited {
	color: #0099cc; /* was #0a79b1 */
	text-decoration: none;
}
	
a:hover {
	color: #000;
	text-decoration: underline;
}
	
a:active {
	color: #000;
	text-decoration: none;
}
	
/* wrapper */

#wrapper {
	margin: 0px auto;
	width: 960px;
	height: auto;
	/*border: 1px solid #CCC;*/
	text-align: left;
	padding: 0px 0 0px 0px;
	background: url(../images/white-trans60.png) repeat;
}

/* header */

#header {
	height: 105px;
	border-top: 4px solid #fcbf19;
	/*background: url(../images/header.jpg) no-repeat  4px left;*/
}

/* nav bar - replaced by SpryMenuBar #menu */

#nav {
	/*height: 40px;*/
	width: 960px; 
	background-color: #fff;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-size: 70%;
	letter-spacing: 0.2em;
}

#nav ul {
	/*height: 40px;*/
	list-style: none;
	color: #666;
	margin: 0 0;
	padding: 0 0 0 0;
	/*width: 960px;  was  */
	/*border-bottom: 1px solid #999;*/
}

#nav li {
	height: 31px;
	border-right: 1px solid #999;
	float: left;
	margin: 0px 0 0 0;
	/*padding: 0 .75em 0 .75em;*/
	text-align: center;
}

#nav a {
	display: block;
	width: 159px;
	color: #484848;
	margin: 5px 0 5px 0;
}

#nav a:link, #nav a:active, #nav a:visited {
	color: #666;
	text-decoration: none;
}

#nav a:hover {
	/*text-decoration: underline;*/
	border-bottom: 4px solid #fcbf19;
	color: #484848;
	padding: 0 0 5px 0;
}

/* banner */

#banner {
	height: auto;
	width: 960px;
	margin: 0 0 0px 0;
}

/* content */

#contentwrapper {
	clear: both;
	width: 960px;
	height: auto;
	padding: 10px 0 0 0px;
	overflow: hidden;
}

#column940 {
	float: left;
	margin: 0 0px 0 0px;
	width: 960px;
}

#columnleft {
	float: left;
	margin: 0 10px 0 0px;
	width: 310px;
}

#columnright {
	float: right;
	margin: 0 0px 0 1px;
	width: 319px;
}

#column640 {
	float: left;
	margin: 0 0px 10px 0px;
	width: 640px;
}

#column760 {
	float: left;
	margin: 0 0px 0 0px;
	width: 760px;
}

#column440 {
	float: left;
	margin: 0 0px 0 0px;
	width: 440px;
}

#columnthird {
	float: left;
	margin: 0 0px 0 10px;
	width: 310px;
}

#columnquarter {
	float: left;
	margin: 0 0 0 10px;
	width: 230px;
}

h1 {
	font-size: 140%;
	color: #0a79b1;
	padding: 0 0 10px 10px;
}

h2 {
	font-size: 90%;
	color: #fff;
	background-color: #0a79b1;
	padding: 5px 10px;
	letter-spacing: .1em;
	margin: 0 0 10px 0;
}

h2 a {
	color: #fff;
}

h2 a:link {
	color: #fff;
	text-decoration: none;
}

h2 a:visited {
	color: #fff;
	text-decoration: none;
}
	
h2 a:hover {
	color: #fff;
	text-decoration: underline;
}
	
h2 a:active {
	color: #fff;
	text-decoration: none;
}


h3 {
	font-size: 110%;
	padding: 5px 0 5px 10px;
}

h4 {
	font-size: 85%;
	padding: 5px 0 2px 10px;
}

p {
	font-size: 70%;
	padding: 0 0 10px 10px;
}

p.nopadding {
	font-size: 70%;
	padding: 0 0 10px 0;
}

p.nopaddingbelow {
	font-size: 70%;
	padding: 0 0 5px 10px;
}

p.smallprint {
	font-size: 90%;
}

blockquote.content {
	font-size: 80%;
	border: 1px solid #ccc;
	background-color: #ececec;
	margin: 10px 0;
	padding: 10px;
}

ol {
	list-style-position: inside;
	font-size: 70%;
	/*margin: 0 0 0 30px;*/
	color: #0a79b1;
	font-weight: bold;
	padding: 0 0 0 10px;
}

ol p {
	color: #666;
	text-indent: -18px;
	margin: 0 0 0 35px;
	font-weight: normal;
}

li {
	margin: 0 0 5px 0;
	/*text-indent: -18px;*/
}

ul.bullets  {
	list-style-type: square;
	list-style-position: inside;
	font-size: 70%;
	margin: 0 0 0 25px;
}

.bullets li {
	margin: 0 0 5px 0;
	text-indent: -13px;
}

ul.imagegrid {
	list-style: none;
}

.imagegrid li {
	float: left;
	border: 5px solid #e5e5e5;
	display: inline;
	margin: 5px;
	/*background: #e5e5e5;*/
	/*border: 1px solid #e5e5e5;*/
	color: inherit;
	/*padding: 5px;
	position: relative;	*/
}


/* leftnav */

#leftnav {
	float: left;
	width: 190px;
	font-size: 70%;
	/*background-color: #e5e5e5;*/
	text-align: left;
	padding: 0;
	margin: 0 10px 0 0px;
}

#leftnav ul {
	line-height: 3em;
	font-weight: normal;
	color:#fff; /* was #888 */
	list-style-type: none;
	padding: 0;
	margin: 0 0 0 0px;
	background-color: #f3f3f3; /* was 00ccffe5e5e5 */
	/*border-bottom: 3px solid white;  white border beneath each menu item */
}
	
#leftnav li {
	padding: 0 0 0 0px;
	margin: 0 0 0 0px;
	/*text-indent: 20px;  moves arrow in to correct */
}

#leftnav li a {
	display: block;
	/*background: url(../images/arrow-grey-solid-single.gif) no-repeat 8px center;*/
	/* text-indent: 20px; moves arrow in to correct */
	text-decoration: none;
	padding: .3em 0 .3em 10px;
	cursor: pointer;
	width: 180px;
	height: 100%;
}

#leftnav ul.dropdownl1 {
	padding: 0 0 0 0px;
	/*border-bottom: 3px solid white;*/
}

#leftnav ul.dropdownl1 li {
	/*background: url(../images/arrow-wht-x2.gif) no-repeat 15px 15px;*/
	/*border-top: 4px solid #e5e5e5; */
	border-bottom: 2px solid #fff; 
}
	
#leftnav ul.dropdownl2 {
	padding: 0 0 0 0px;
	background-color: #e9e9e9; /* was 00add8#d5d5d5 */
	border-bottom: 2px solid white;
	display: none; /* switch this code on/off to show/hide nav */
}

#leftnav ul.dropdownl2 li {
	/*background: url(../images/arrow-wht-x2.gif) no-repeat 15px 15px;*/
	border-top: 2px solid white; 
	border-bottom: 0px solid white;
}


#leftnav ul.dropdownl3 {
	padding: 0 0 0 0px;
	background-color: #fff; /* was 0a79b1#c5c5c5 */
	border-bottom: 1px solid white;
	display: none; /* switch this code on/off to show/hide nav */
}

#leftnav ul.dropdownl3 li {
	background: url(../images/arrow-wht-x1.gif) no-repeat 15px 15px;
	border-top: 1px solid white; 
	border-bottom: 1px solid white;
}


#leftnav a {
	cursor:pointer;
	/*border-bottom: 0px solid white;*/
}
	
#leftnav a:link, #leftnav a:visited {
	color: #555; /* was #fff */
	cursor:pointer;
}

#leftnav a:hover {
	color: #fff; /* was #fff */
	background-color: #fcbf19;
	cursor: pointer;
}
	
#leftnav ul.dropdownl1 li a:hover {
	color: #fff;
	background: url(../images/arrow-leftnav-white.gif) no-repeat 15px center;
	background-color: #fcbf19; /* was #09528f */
}

#leftnav ul.dropdownl2 li a:hover {
	color: #fff;
	background: url(../images/arrow-leftnav-white.gif) no-repeat 15px center;
	background-color: #fcbf19; 
}

#leftnav ul.dropdownl2 li a:hover {
	color: #fff;
	background: url(../images/arrow-leftnav-white.gif) no-repeat 15px center;
	background-color: #fcbf19; 
}

/* port selector table */

#port-form {
	
}

#port-form input, select, checkbox, textarea {
	color: #666;
	background-color: #fff; /* was #E6E6E6 */
	border: 1px solid #999;
}

#housing-selector {
	margin: 0 0 10px 0;
}

.port-selector {
	width: 960px;
	font-size: 70%;
	border: solid 1px #fff;
	
}

.port-selector p {
	font-size: 100%;
}

.port-selector h1 {
	font-size: 150%;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 0;
	margin: 0;
}

.port-selector h3 {
	font-size: 120%;
	color: #fff;
}

td.bluebgrd {
	background: #0a79b1;
	border-top: solid 2px #ccc;
}

td.bluebgrd-macro {
	background: #0a79b1 url(../port-selector/images/lens-vert-graphic-macro.gif) center repeat-y;
	border-top: solid 2px #ccc;
}	

td.bluebgrd-zoom {
	background: #0a79b1 url(../port-selector/images/lens-vert-graphic-zoom.gif) center repeat-y;
	border-top: solid 2px #ccc;
}

td.bluebgrd-wideangle {
	background: #0a79b1 url(../port-selector/images/lens-vert-graphic-wideangle.gif) center repeat-y;
	border-top: solid 2px #ccc;
}

.port-selector td {
	padding: 10px 15px;
	border-top: solid 2px #f1f1f1;
}

td.lens {
	height: 70px;
	border-top: solid 2px #ccc;
}

td.lens-name {
	height: 20px;
	padding: 5px 15px;
	background-color: #f1f1f1;
}

tr.port-selector-head  h2 {
	font-size: 130%;
	color: #fff;
	background-color: #ccc;
	font-weight: bold;
	height: 25px;
	border-bottom: none;
	border-top: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

tr.port-selector-head  {
	font-size: 110%;
	color: #fff;
	background-color: #ccc;
	font-weight: bold;
	height: 25px;
	border-bottom: none;
	border-top: none;
}

.odd {
	background-color: #F1F1F1;	
}

.even {
	background-color: #E1E1E1;
}

	
/* classes */

.productindex {
	float: left;
	text-align: center;
	
}

.productindex p {
	text-align: center;
}

.productindexhousings {
	float: left;
	text-align: center;
	margin: 0 15px 0 0;
}

.productindexhousings p {
	text-align: center;
}

.lightindex {
	float: left;
	width: 350px;
	height: 200px;
	text-align: left;
	background: #fff;
}

.paddingtopbot {
	padding: 10px 0;
}

.paddingbot {
	padding: 0 0 10px 0;
}

.imageleft 	{
	float: left;
	padding: 0px 20px 0px 0;
	margin: 3px 0 10px 0px;
}

.imageright {
	float: right;
	padding: 0 0 10px 20px;
	margin: 5px 0px 0 0;
}

.imageleftpadding	{
	float: left;
	padding: 20px 20px 20px 0;
	margin: 3px 0 10px 0px;
}

.imageleftpaddingextra	{
	float: left;
	padding: 50px 20px 50px 0;
	margin: 3px 0 10px 0px;
}

.clear {
	clear: both;
}

.blueborder {
	border: 1px solid #0a79b1;
	margin-bottom: 10px;
	background-color:#FFF;
}

/* footer */

#footer {
	clear: both;
	width: auto;
	height: 35px;
	padding: 10px 10px 0px 5px;
	font-size: 90%;
	border-top: solid 3px #CCC;
	margin: 10px 0 0px 0;
}

#footer p {
	text-transform: none;
	color: #888;
	padding: 0;
}

#footer a {
	color: #888;
	text-decoration: none;
	padding: 0 5px;
	text-transform: uppercase;
}

#footer a:link, #footer a:active, #footer a:visited {
	color: #888;
}

#footer a:hover {
	color: #000;
	text-decoration: underline;
}

#footerleft {
	float: left;
	width: 30%;
}

#footerright {
	float: right;
	width: 70%;
}

#footerright p {
	text-align: right;
}