/*******************************************/
/* Educational Style sheet for IFO, in progress */
/*******************************************/
/* necessary details...                    */
/*******************************************/
html, body{ 
 margin:0; 
 padding:0; 
 background-image: url("http://i-fiberoptics.com/images/edu-background-strip.jpg");
 background-position: top center;
 background-repeat: repeat-y;
 background-color:#62666f;
 text-align:center; 
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9pt;
} 

#outer{ 
 border:solid white 0px; 
 /*/*/ border-left-width: 187px; /* left column width. NN4 hack to hide borders */ 
 border-left-color: #584881;  /* left column colour */ 
 border-left-style: solid; 
 background-color: #FFFFFF; /* center column colour */ 
 width: auto; 
} 

/*********************************************************************************************************************/
/* header section, contains 3 rows/divs - company name + search box, main banner image and horizontal navigation bar */ 
/*********************************************************************************************************************/
#header-img{ 
 width:980px; 
 height: 100px;
 background-color:#ffffff; 
 background-image: url(http://i-fiberoptics.com/edu-interface/banner.jpg);
 background-repeat: no-repeat;
 background-position: bottom center;
} 
 
#navbar{
 height: 20px;
 border-top: 3px solid #87939d;
 border-bottom: 3px solid #87939d;
 background-color: #000000;
 padding: 0px;
 margin: -1px 0px 0px 0px;
 text-align: center;
 z-index: 91;
 vertical-align: middle;
} 

/******************************************************************************************************/
/* left column, set to 187 wide, will be purple for educational section, blue for Educational section */ 
/******************************************************************************************************/

#leftcol{
 background-image: url(http://i-fiberoptics.com/images/edu-leftcol-gradient.gif);
 background-repeat: repeat-x; 
 background-color: #584881;
} 

.sidenav {
 border-right:1px solid #555555;
 text-align: left;
 background-color:#CCCCCC;
}

#sidenav-links{
 float: right;
 width: 168px;
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 8pt;
 font-weight: bold;
 color: #000000;
 line-height: 11pt;
} 

#sidenav-links ul {
 list-style: none;
 margin: 0;
 padding: 0;
  border-top: 1px solid #87939d;
  border-bottom: 1px solid #87939d;
}

#sidenav-links li A:link{
 display: block;
 color:#000000;
 text-decoration:none;
 padding: 5px 0px 5px 0px;
 border-top: 1px solid #87939d;
 border-bottom: 1px solid #87939d;
 }
#sidenav-links li A:visited {
 display: block;
 color:#000000;
 text-decoration:none;
 padding: 5px 0px 5px 0px;
 border-top: 1px solid #87939d;
 border-bottom: 1px solid #87939d;
}
#sidenav-links li A:hover {
 display: block;
 background-color: #87939d;
 color:#ffffff;
 text-decoration:none;
 padding: 5px 0px 5px 0px;
 border-top: 1px solid #ffffff;
 border-bottom: 1px solid #ffffff;
}
#sidenav-links li A:active {
 display: block;
 color:#7b68a7;
 background-color: #ffffff;
 padding: 5px 0px 5px 0px;
 border-top: 1px solid #87939d;
 border-bottom: 1px solid #87939d;
}

#sidenavTEXT{
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 13pt;
 font-weight: bold;
 color: #000000;
 text-align: left;
 padding: 6px 0px 1px 18px;
}

.sidenav-lg-links{
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 10pt;
 font-weight: bold;
 color: #ffffff;
 line-height: 18pt;
 text-align: left;
 padding: 10px 0px 10px 18px;
}

.sidenav-lg-links A:link {
 	color:#ffffff;
 	text-decoration:none;
}
.sidenav-lg-links A:visited {
 	color:#ffffff;
 	text-decoration:none;
}
.sidenav-lg-links A:hover {
	 color:#000000;
 	text-decoration:none;
}
.sidenav-lg-links A:active {
 	color:#ffffff;
 	text-decoration:none;
}

.sidenav-inset {
 font-family: Arial, Verdana, Helvetica, sans-serif;
 width: 155px;
 font-size: 8pt;
 color: #ffffff;
 text-align: left;
 padding: 0px 15px 0px 18px;
}

.sidenav-inset-h1 {
 color: #000000;
 font-weight: bold;
}

.sidenav-inset A:link {
 	font-size: 9pt;
 	color:#fffdd7;
 	text-decoration:none;
}
.sidenav-inset A:visited {
 	font-size: 9pt;
 	color:#fffdd7;
 	text-decoration:none;
}
.sidenav-inset A:hover {
 	font-size: 9pt;
 	color:#fffdd7;
 	text-decoration:none;
}
.sidenav-inset A:active {
 	font-size: 9pt;
 	color:#fffdd7;
 	text-decoration:none;
}

.educational-buttons{
 text-align: center;
}

.educational-buttons img{
 border: none;
}

/**********************************/
/* main content area for all pages*/ 
/**********************************/

#maincol {
 min-height:335px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

#maincol A:link, #onecolumn A:link, #narrowcolumn A:link {
 color:#56467F;
}

#maincol A:visited, #onecolumn A:visited, #narrowcolumn A:visited  {
 color:#56467F;
}

#maincol A:hover, #onecolumn A:hover, #narrowcolumn A:hover {
 color:#00f321;
}

#maincol A:active, #onecolumn A:active, #narrowcolumn A:active  {
 color:#56467F;
}

#maincol img, #onecolumn img, #narrowcolumn img, #onecolumn-special-links img{
 border: none;
}

.home-pg-links A:link {
 	text-decoration:none;
}
.home-pg-links A:visited {
 	text-decoration:none;
}
.home-pg-links A:hover {
 	text-decoration:none;
}
.home-pg-links A:active {
 	text-decoration:none;
}

#onecolumn, #onecolumn-special-links #narrowcolumn{
font-family: Verdana, Arial, Helvetica, sans-serif;
}


.default-links a:link{
 color:#56467F;
}
.default-links a:visited{
 color:#56467F;
}
.default-links a:hover{
 color:#00f321;
}
.default-links a:active{
 color:#56467F;
}
.price_blue_background {
 background-color:#D0DBEA;
}

.comment_blue_background {
 background-color:#BDD7FA;
}

.padded_blue_background {
 padding: 10px;
 background-color:#BDD7FA;
}

.dark_blue_background {
 background-color:#56467F;
 color: #ffffff;
}

.bright_blue_background {
 background-color:#7B8BA0;
 color: #ffffff;
}

.price_gray_background {
 background-color:#EFEFEF;
}

.black_background {
 background-color:#000000;
}

.grey_background {
 background-color:#E7EBF7;
}

.light-grey-background {
 background-color:#eeeeee;
}

.med-grey-background {
 background-color:#cccccc;
}

.product_header_style {
 background-color:#56467F;
 color:#ffffff;
 font-weight:bold;
 text-decoration: none;
}

.product_header_style a:link {
 color:#ffffff;
 text-decoration: none;
}

.product_header_style a:visited {
 color:#ffffff;
 text-decoration: none;
}

.product_header_style a:hover {
 color:#ffffff;
 text-decoration: none;
}

.product_header_style a:active {
 color:#ffffff;
 text-decoration: none;
}

.hdr {
 font-size:15pt;
 color:#56467F;
 font-weight:bold;
 text-align: left;
}

.hdr-narrow {
 font-size:15pt;
 color:#56467F;
 font-weight:bold;
 text-align: left;
}

.hdr2 {
 font-size:12pt;
 color:#666666;
 text-align: left;
 font-weight:bold;
}

.hdr2-narrow {
 font-size:12pt;
 color:#666666;
 text-align: left;
 font-weight:bold;
 width: 230px;

}
.eska-hdr2 {
 font-size:16pt;
 color:#52dfbd;
 text-align: left;
 font-weight:bold;
}

.prodsubhdr {
 font-size:14pt;
 font-weight:bold;
 color:#000000;
}

.subhdr {
 font-size:10.5pt;
 font-weight:bold;
 color:#666666;
 margin-bottom: -10px;
}

.subhdr2 {
 font-weight:bold;
 color:#666666;
}

ul.bluediamonds {
 list-style-image: url(http://i-fiberoptics.com/images/luediamond.gif);
}

ul.largebluediamonds {
 list-style-image: url(http://i-fiberoptics.com/images/largebluediamond.gif);
}

.tall-lines{
 line-height: 2.0;
}

.half-tall-lines{
 line-height: 1.5;
}

ul.bluediamonds {
 list-style-image: url(http://i-fiberoptics.com/images/bluediamond.gif);
}

ul.spaceddiamonds {
 list-style-image: url(http://i-fiberoptics.com/images/bluediamond.gif);
 line-height: 1.8;
}

ul.greendiamonds {
 list-style-image: url(http://i-fiberoptics.com/images/greendiamond.gif);
}

ul.large-greendiamonds {
 list-style-image: url(http://i-fiberoptics.com/images/greendiamond.gif);
 font-size:12pt;
 font-weight:bold;
 line-height: 1.2;
}

/*****************************/
/* Footer section of website */
/*****************************/
#footer{
} 

#footer A:link{
 color:#0000ff;
}

#footer A:visited{
 color:#990099;
}

#footer A:hover{
 color:#00f321;
}

#footer A:active{
 color:#0000ff;
}

#bottom-drop-shadow{
height:10px; 
}