/* 
    Document   : parallax
    Created on : May 30, 2013, 10:59:53 AM
    Author     : JML
    Description: Home page parallax styles
*/

body#home {overflow-x: hidden;} /* stops left-to-right scrolling  */


/* Fixed right nav */

nav#paranav {
		z-index: 700;
		position: fixed;
		top: 50%;
		right: 15px;
		margin-top: -40px;}
	nav#paranav ul {list-style: none;}
	nav#paranav li {
		position: relative;
		height: 16px;
		margin-bottom: 7px;}
	nav#paranav a {
		display: block;
		width: 10px;
		height: 10px;
		text-indent: -9999px;
		background-color: #aaa;
		border: 1px solid #aaa; 
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		border-radius: 20px; /* future proofing */
		-khtml-border-radius: 20px; /* for old Konqueror browsers */
		/*background: transparent url('../images/parallax/nav-dot.png') 4px 4px no-repeat;*/
		}
	nav#paranav a:hover, nav#paranav a.active {
		/*background: transparent url('../images/parallax/nav-dot.png') 4px -16px no-repeat;*/
		background-color: #000;
		border: 1px solid #555;}
	nav#paranav p {
		display: block;
		position: absolute;
		z-index: 500;
		right: 22px;
		top: -10px;
		display: none;
		padding: 4px 20px 4px 7px;
		color: #fff;
		white-space: nowrap;
		background: transparent url('../images/parallax/nav-arrow.png') 100% 50% no-repeat;}
	
        
        

/* content */

	#parallax {}
	#parallax section {
		display: block;
		width: 100%;
		height: 825px;
		position: absolute;
		overflow: hidden;}
	#parallax article {
		display: block;
		position: relative;
		width: 990px;
		overflow: visible;
		margin: 0 auto;}
	#parallax article div { /*  content column in each panel  */
		position: relative;
		z-index: 50;
		width: 390px;
		float: right;
		margin: 160px 0 0 0;
                padding-right: 30px;}
	#parallax article h2 {
		display: block;
		margin: 0 0 25px 0;
		font: normal 45px/48px Georgia, "Times New Roman", Times, serif;
		color: #005499;
		border-bottom: 1px solid #005499;
		padding-bottom: 10px; }
	#parallax article p {
		color: #525252;
		font-size: 16px;
		line-height: 30px;}
	#parallax .layer {
		position: absolute;
		width: 2000px;
		margin-left: -1000px; /* move left by half element's width */
		left: 50%; /* align left edge with center of viewport */
		top: 0;}
	#parallax .level1 {z-index: 10;}
	#parallax .level2 {z-index: 20;}	
	#parallax .level3 {z-index: 30;}	
	#parallax .level4 {z-index: 40;}
	#parallax section img {
		display: block;
		position: absolute;}
        
        
        .hp-spotlight {
            width: 306px;
            height: 147px;
            position: relative;
            margin-left: -45px;
            margin-top: 50px;
            background: url(../images/parallax/hp-spotlight-box.png) no-repeat top left;
            padding:  40px 10px 0 60px;}
        .hp-spotlight img {
            display: block;
            float: left;}
        #parallax article .hp-spotlight p {
            display: block;
            width: 165px;
            float: right;
            color: #525252;
            font-size: 12px;
            line-height: 18px;
            margin-top: 7px;}
        .hp-spotlight a.spot-learnmorebut {
            display: block;
            width: 110px;
            height: 30px;
            position: absolute;
            bottom: 10px;
            right: -10px;
            background: url(../images/parallax/btn-learn-more.png) no-repeat top right;
            text-indent:  -9999px;}
        .scrolldown {
            display: block;
            position: absolute;
            left: 998px;
            top: 200px;}
        
	
	/* PANE 1 */
	#parallax #pane1 {
            top: 0px;
            background-color: #fff;
            height: 870px; /* additional height for first pane, because of main nav.   */}
	#parallax #pane1 article div {margin: 300px 0 0 0;}
	#paint-fg1 {top: 500px; left: 400px;}
	#paint-fg2 {top: -300px; left: 1100px;}
	#box-pane1 {top: 300px; left: 570px;}
	#paint-mg1 {top: 300px; left: 1400px;}
	#paint-mg2 {top: 1500px; left: 600px;}
	#brknd-pane1 {top: 120px; left: 0;}
        #parallax #pane1 article .hp-spotlight p {
            width: 200px;
            margin: 10px 20px 0 0;}
	
	
	/* PANE 2 */
	#parallax #pane2 {
            top: 870px; /* if increasing pane height, add top space for each pane afterward   */
            background-color: #E1E1D8;}
	#parallax #pane2 article div {margin: 600px 0 0 0;}
        #pane2-loupe {top: 3400px; left: 500px;}
        #pane2-regis-blue {top: 4620px; left: 1350px;}
        #pane2-regis-green {top: 2050px; left: 1352px;}
        #pane2-box {top: 1500px; left: 700px;}
        #brknd-pane2 {top: -200px; left: 0;}
        #parallax #pane2 article .hp-spotlight p {
            width: 200px;
            margin: 10px 20px 0 0;}
	
	/* PANE 3 */
	#parallax #pane3 {
            top: 1695px;
            background-color: #000;}
        #parallax #pane3 article div {margin: 1000px 0 0 0;}
        #pane3-rgb {top: 7400px; left: 400px;}
		#pane3-color-wheel {top: -4500px; left: 1200px;}	
        #pane3-box {top: 2700px; left: 550px;}
        #brknd-pane3 {top: -150px; left: 0;}
	#parallax #pane3 h2{
            color: #fff;
            border-bottom: 1px solid #555;}
	#parallax #pane3 article div > p {color: #fff;}
	
	
	/* PANE 4 */
	#parallax #pane4 {
            top: 2520px;
            background-color: #fff;
            height: 850px;}
        #parallax #pane4 article div {margin: 1350px 0 0 0;}
	#pane4-box {top: 3800px; left: 650px;}
        #pane4-bridge {top: 10300px; left: 0px;}
        #brknd-pane4 {top: -100px; left: 0;}
        #parallax #pane4 article .hp-spotlight p {
            width: 200px;
            margin: 10px 20px 0 0;}