@import url("reset.css");
@import url("series_esys-nav.css");


/* COMMON POSITIONING */

.floatright{
	float: right;
}


/* Product Header CSS - Seperate out into a file so start left aligned */

#esys-nav{
	display: block;
	position: relative;
	margin-bottom: 20px;
}


	#seriesnav-header {
	  width: 807px;
	  height: 68px;
	  background: url("/cpg_section/images/series/digital/seriesnav-header-bg.gif") #000;
	  border-bottom: 1px solid #5C5C5C;
	}

		#seriesheader-title-dslr {
		  float: left;
		  width: 435px;
		  height: 28px;
		  text-indent: -9999em;
	  	  background: url("/cpg_section/images/series/esys/seriesnav-header-titles.gif") 0 0px no-repeat;
		  margin: 21px 0px 0px 15px;
		}

		#seriesheader-title-pen {
		  float: left;
		  width: 435px;
		  height: 28px;
		  text-indent: -9999em;
	  	  background: url("/cpg_section/images/series/esys/seriesnav-header-titles.gif") 0 -29px no-repeat;
		  margin: 21px 0px 0px 15px;
		}

		#seriesheader-title-lenses {
		  float: left;
		  width: 435px;
		  height: 28px;
		  text-indent: -9999em;
	  	  background: url("/cpg_section/images/series/esys/seriesnav-header-titles.gif") 0 -58px no-repeat;
		  margin: 21px 0px 0px 15px;
		}

		a#seriesheader-viewall-btn {
		  float: right;
		  width: 300px;
		  height: 41px;
		  text-indent: -9999em;
	  	  background: url("/cpg_section/images/series/digital/seriesnav-header-btn.gif") 0 -41px no-repeat;
		  margin: 15px 15px 0px 0px;
		}

		a#seriesheader-viewall-btn:hover {
	  	  background: url("/cpg_section/images/series/digital/seriesnav-header-btn.gif") 0 0px no-repeat;
		}




/* TAB NAV STYLES BEGIN */

		#seriespanel {
		  width: 809px;
		  margin-top: 20px;
		}


	#seriespanel #maincontent-container {
	  width: 809px;
	  background-color: #000;
	  display: inline-block;
	}

	#seriespanel #maincontent{
	  width: 793px;
	  background: #ccc url("../images/series/esys/esys_gradbg.png") repeat-x;
	  margin: 9px auto 9px auto;
	  color: #000;
	  z-index: 0;
	}
	
	#seriespanel #maincontent div.roundtop,
	#seriespanel #maincontent div.roundbottom{
		width: 793px;
		height: 6px;
		line-height: 0px;
		font-size: 0px;
		margin: 0;
		padding: 0;
	}
	#seriespanel #maincontent #panel1 div.roundtop{
		background: url("../images/series/esys/dslr/esys_dslr-rounded.gif") no-repeat top;
	}
	#seriespanel #maincontent #panel1 div.roundbottom{
		background: url("../images/series/esys/dslr/esys_dslr-rounded.gif") no-repeat bottom;
	}
	#seriespanel #maincontent #panel2 div.roundtop{
		background: url("../images/series/esys/pen/esys_pen-rounded.jpg") no-repeat top;
	}
	#seriespanel #maincontent #panel2 div.roundbottom{
		background: url("../images/series/esys/pen/esys_pen-rounded.jpg") no-repeat bottom;
	}
	#seriespanel #maincontent #panel3 div.roundtop{
		background: url("../images/series/esys/lens/esys_lens-rounded.gif") no-repeat top;
	}
	#seriespanel #maincontent #panel3 div.roundbottom{
		background: url("../images/series/esys/lens/esys_lens-rounded.gif") no-repeat bottom;
	}
	
/* ESYS CAMERA ROWS */

	#esys-logo{
		width: 196px;
		height: 36px;
		float: left;
		margin: 30px 0 0 30px;
		background: url("../images/series/esys/dslr/e-system-logo.gif") no-repeat;
		text-indent: -9999em;
	}
	
	#esys-introp{
		width: 500px;
		margin: 20px 40px 0 0;
		float: right;
		display: inline;
	}

	/*common*/
	
	div.esys-row1 div.esys-camera{
		height: 140px;
		width: 130px;
		position: relative;
		display: block;
		float: left;
	}
	div.esys-row2 div.esys-camera,
	div.esys-row3 div.esys-camera{
		height: 90px;
		width: 130px;
		position: relative;
		display: inline-block;
		float: left;
	}
	
	div.esys-camerainfo{
		width: 110px;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	
	div#panel1 .cameraimage{
		float: left;
		display: block;
		position: absolute;
		bottom: 0;
	}

	.esys-col1 h2,
	.esys-col2 h2,
	.esys-col3 h2{
		display: block;
		margin-bottom: 4px;
	}
	
	div#panel1 .cameranew{
		height: 36px;
		width: 36px;
		background: url("../images/series/esys/esys-new.png") no-repeat;
		text-indent: -9999em;
		display: block;
		z-index: 2;
		position: absolute;
		bottom: -2px;
		left: -5px;
	}
	div#panel1 .camerarebate{
		height: 15px;
		width: 45px;
		background: url("../images/series/esys/esys-rebate.gif") no-repeat;
		text-indent: -9999em;
		display: block;
		margin-bottom: 4px;
	}
	div#panel1 .cameraprice{
		display: inline-block;
		margin-bottom: 4px;
	}
	div#panel1 .camerainfo{
		display: inline-block;
		margin-left: 10px;
		width: 10px;
		text-indent: -9999em;
		background: url("../images/series/esys/esys_infoicon.gif") no-repeat right 3px;
		cursor: default;
	}
	
	div#panel1 a.learnmore, div#panel3 a.learnmore{
		color: #000;
		font-weight: bold;
		display: block;
		font-size: 10px;
		background: url("../images/series/esys/esys_learnarrow.gif") no-repeat 0 4px;
		padding-left: 10px;
	}
	div#panel1 a.learnmore:link, div#panel1 a.learnmore:visited, div#panel1 a.learnmore:active, div#panel3 a.learnmore:link, div#panel3 a.learnmore:visited, div#panel3 a.learnmore:active{
		text-decoration: none;
	}
	div#panel1 a.learnmore:hover, div#panel3 a.learnmore{
		text-decoration: underline;
	}
	
	/*rows*/
	
	.esys-row1, .esys-row2, .esys-row3{
		display: block;
		width: 793px;
		clear: both;
	}
	
	.esys-row1{
		border-bottom: 1px gray solid;
	}
	.esys-row2{
		border-top: 1px white solid;
		border-bottom: 1px gray solid;
		height: 150px;
	}
	.esys-row3{
		border-top: 1px white solid;
		height: 150px;
	}
	
	/*columns layout*/
	
	.esys-col1, .esys-col2, .esys-col3{
		width: 240px;
		float: left;
		display: inline-block;
		margin: 20px 0 20px 20px;
		position: relative;
	}
	.esys-col1{
		margin-left: 30px;
	}
	
	/* CAMERA LOGOS - DSLR SECTION */
	div#maincontent #panel1 h2{
		background: url("../images/series/esys/dslr/camera_logos.gif") no-repeat 0 0;
		display: block;
		text-indent: -9999em;
		height: 16px;
	}
	h2.e3h2{
		background-position: 0 0;
	}
	h2.e30h2{
		background-position: 0 -15px !important;
	}
	h2.e620h2{
		background-position: 0 -30px !important;
	}
	h2.e520h2{
		background-position: 0 -45px !important;
	}
	h2.e450h2{
		background-position: 0 -75px !important;
	}
	h2.e420h2{
		background-position: 0 -60px !important;
	}
	h2.e600h2{
		background-position: 0 -90px !important;
	}
	h2.e5h2{
		background-position: 0 -105px !important;
	}
	
/* BEGIN PEN SECTION
----------------------------------------------------*/

#pen-leftimg{
	height: 498px;
	width: 312px;
	background: url("../images/series/esys/pen/esys_pen-leftimg.jpg") no-repeat top left;
	float: left;
	display: block;
}
#pen-rightcontent{
	width: 440px;
	margin: 20px 30px 0 0;
	float: right;
	display: block;
}

h1#pen-logo{
	background: url("../images/series/esys/pen/esys_pen-logo.gif") no-repeat 0 0;
	height: 52px;
	width: 376px;
	float: left;
	display: block;
	text-indent: -9999em;
	margin: 0 0 20px 5px;
}

div#pen-productinfo{
	width: 445px;
	clear: both;
	display: block;
	margin: 0px 0 0px 0px;
}

	#pen-productinfo .large {
		width: 445px;
		margin: 0;
	}

	#pen-productinfo div.camera{
        width: 202px;
        min-height: 70px;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
	  margin: 0px 0px 0px 0px;
        zoom: 1;
        *display: inline;
        _height: 70px;
	position: relative;
	}



		#pen-productinfo div.cameraimage{
		  width: 105px;
		  float: left;
		}

			#pen-productinfo div.cameraimage img {
			  width: 105px;
			}

			#pen-productinfo div.cameracolors {
			  display: block;
			  text-align: center;
			  margin: 6px 0px 0px 0px;
			}

			#pen-productinfo div.colorchoice {
			  width: 10px;
			  height: 10px;
			  border: 1px solid #fff;
			  display: inline-block;
			  margin: 0px 0px 0px 2px;
			}

				#pen-productinfo div.colorchoice img {
				  width: 10px;
				  height: 10px;
				  cursor: pointer;
				  margin
				}

		#pen-productinfo div.camerainfo{
		  width: 85px;
		  float: left;
		  margin: 0px 0px 0px 10px;
		  position: absolute;
		  bottom: 0;
		  right: 0;
		}

			#pen-productinfo div.camerainfo h3{
			  font-size: 11px;
			  color: #000;
			  margin: 0px 0px 0px 0px;
			}

			#pen-productinfo div.camerainfo .cameraprice{
			  display:block;
			  margin: 1px 0px 6px 0px;
			}

			#pen-productinfo div.camerainfo a.addtocart-viewall {
			  width: 81px;
			  height: 20px;
			  text-indent: -9999em;
			  background: url("/cpg_section/images/series/digital/addtocart.gif") no-repeat;
			  display: block;
			}

			#pen-productinfo div.camerainfo a.retailfinder-viewall {
			  width: 85px;
			  height: 20px;
			  text-indent: -9999em;
			  background: url("/cpg_section/images/series/digital/findretailer.gif") no-repeat;
			  display: block;
			}

			#pen-productinfo div.camerainfo a.learnmore {
			  color: #333;
			  text-decoration: none;
			  font-weight: bold;
			  background: url("/cpg_section/images/series/esys/esys_learnarrow.gif") no-repeat 0 4px;
			  padding-left: 8px;
			  margin: 3px 0px 0px 0px;
			}

				#pen-productinfo div.camerainfo a.learnmore:hover {
				  color: #888;
				}

	#pen-productinfo	.cameranew{
		height: 36px;
		width: 36px;
		background: url("../images/series/digital/cameranew_series.png") no-repeat;
		text-indent: -9999em;
		display: block;
		z-index: 2;
		position: absolute;
		top: 39px;
		left: -5px;
	}

	
	div.penhr{
		border-top: 1px gray solid;
		border-bottom: 1px white solid;
		height: 0px;
		line-height: 0px;
		font-size: 0px;
		margin-bottom: 20px;
	}
	
/* CAMERA LOGOS - PEN SECTION */
div#maincontent #panel2 h2.ep1h2{
	background: url("../images/series/esys/pen/esys_pen-logos.gif") no-repeat 0 0;
	text-indent: -9999em;
	height: 16px;
	width: 71px;
	margin: 10px auto 0 auto;
}
div#maincontent #panel2 h2.ep2h2{
	background: url("../images/series/esys/pen/esys_pen-logos.gif") no-repeat 0px -17px;
	text-indent: -9999em;
	height: 17px;
	width: 82px;
	margin: 10px auto 0 auto;
}

div#panel2 p{
	margin: 15px 0;
}
	
.panelhide{
	display: none;
}

/* LENS SECTION */
	
	p#lens-introp{
		margin: 25px 20px 0 20px;
		float: left;
		width: 480px;
	}
	
	h1#zuiko-logo{
		margin: 32px 20px 0 0;
		background: url("../images/series/esys/lens/esys_zuiko-logo.gif") no-repeat;
		float: right;
		width: 241px;
		height: 20px;
		text-indent: -9999em;
	}
	
	/*rows*/
	
	h2.super-highgr,
	h2.highgr,
	h2.standard,
	h2.mft{
		margin-left: 20px;
		text-indent: -9999em;
	}
	h2.super-highgr{
		height: 14px;
		width: 202px;
		background: url("../images/series/esys/lens/esys_lens-superhighgr.gif") no-repeat;
	}
	h2.highgr{
		height: 14px;
		width: 149px;
		background: url("../images/series/esys/lens/esys_lens-highgr.gif") no-repeat;
	}
	h2.standard{
		height: 14px;
		width: 140px;
		background: url("../images/series/esys/lens/esys_lens-standard.gif") no-repeat;
	}
	h2.mft{
		height: 14px;
		width: 208px;
		background: url("../images/series/esys/lens/esys_lens-mft.gif") no-repeat;
	}
		
	.lens-row1, .lens-row2, 
	.lens-row3, .lens-row4{
		display: block;
		width: 793px;
		clear: both;
		padding: 20px 0;
	}
	
	.lens-row1{
		border-bottom: 1px gray solid;
	}
	.lens-row2{
		border-top: 1px white solid;
		border-bottom: 1px gray solid;
	}
	.lens-row3{
		border-top: 1px white solid;
		border-bottom: 1px gray solid;
	}
	.lens-row4{
		border-top: 1px white solid;
	}
	
	/*columns layout*/
	
	.lens-col1, .lens-col2, 
	.lens-col3, .lens-col4{
		width: 185px;
		float: left;
		display: inline-block;
		margin-left: 5px;
		position: relative;
	}
	.lens-col1{
		margin-left: 25px;
	}
	
	div.esys-lens{
		width: 70px;
		height: 120px;
		position: relative;
		display: block;
		float: left;
	}
		div.esys-lens .cameranew{
		height: 36px;
		width: 36px;
		background: url("../images/series/esys/esys-new.png") no-repeat;
		text-indent: -9999em;
		display: block;
		z-index: 2;
		position: absolute;
		bottom: -2px;
		left: -5px;
	}

	.lens-row1 .esys-lens{
		height: 130px;
	}
	
		.lensimage{
			float: left;
			display: block;
			position: absolute;
			bottom: 0;
		}
	
	div.esys-lensinfo{
		width: 110px;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	
	#panel3 h3{
		font-weight: bold;
	}
	#panel3 .cameranew{
		left: 2px;
	}