/*-------------------------------------------------------------------------------------------
    DOCUMENT SETUP
-------------------------------------------------------------------------------------------*/	
	@import url(/stylesheets/modulestylesheets.reset-min.css);
	@import url(/stylesheets/beta.css.base.2.4-min.css);
	@import url(http://fonts.googleapis.com/css?family=PT+Sans|PT+Serif:400,700);
	
	html,body {}
	html {}
	body {}

	a {
	    text-decoration: none;
	    color: #9CBC59;
	}
	a:hover {
	    color: #91b054;
	}
	code, pre {
	    color: #202020;
	    padding: 0 3px 2px;
	    font-family: Monaco, Andale Mono, Courier New, monospace; /* TO CHANGE */
	    font-size: 0.875em; 
	    
	    -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
	}
	code {
		display:inline-block;
		padding: 1px 3px;
		background-color: #E0E0E0;
		border:1px solid #808080; border-color:rgba(0,0,0,0.25);
	}
	pre {
		display: block;
		margin-top:1.5em; padding-top: 1em;
		font-size: 0.875em; line-height: 1.3125;
		background-color: #f5f5f5;
		border: 1px dashed #ccc; /*border: 1px solid rgba(0, 0, 0, 0.15);*/
		white-space: pre; white-space: pre-wrap; word-wrap: break-word;
		
		-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
	}
	
	.button {
		font-weight: 700;
		color: #5F5F5F;
		background: transparent;
		/* Border */
		border-color: rgba(0,0,0,0.2);
		border-bottom-color: black;
		border-bottom-color: rgba(0,0,0,.5);
		/* Box */
		box-shadow:
			inset 0 2px 2px 1px rgba(255,255,255,.1),
			inset 0 -4px 8px rgba(0,0,0,.1),
			0 1px 1px rgba(0,0,0,.1);
	}
	.button:hover  {
		color: #454545;
		background-color:#FCFCFC;
	}
	.green.button {
	    color: #FAFAFA;
	    text-shadow: 0 1px rgba(0,0,0,.5);
	    background-color:#a5c860;
	}
	.green.button:hover {
	    color: #FFF;
	    background-color:#9CBC59;
	}
	input[type="text"], textarea  {
	    border:1px solid rgba(0,0,0,.2);
	    box-shadow: inset 0 0 4px rgba(0,0,0,.1);
	    border-radius: .5em;
	    margin-bottom: .5em;
	    padding:0;
	    width:60%;
	    
	    color: #999;
	    line-height: 2em;
	    font-style: italic;
	    text-indent: .5em;
	}
	input[type="text"] {
	    height:2.5em;
	    height:2em\9;
	}
	
	input[type="text"]#FirstName, input[type="text"]#LastName {
	    width:29%;
	}

	input[type="text"]:focus {
	    color: #666;
	    font-style: normal;
	}
	form input[type="submit"].button, form img {
	    margin-top: 0 !important;
	}
	form #CaptchaV2 {
	    font-family: serif;
	    font-size: 24px;
	    font-weight: bold;
	    font-style: normal;
	    letter-spacing: 13px;
	    text-indent: 10px;
	    height: 1.5em !important;
	    padding: 0 !important;
	    line-height: 1em !important;
	    border-radius: 0;
	    color: #333;
	}
	
	.hide {display:none;}
	.seo img {
	    height: 21px;
	    vertical-align: baseline;
	}
	.itb {
	    height: 18px;
	    vertical-align: -3px;
	}
/* Test  		    -------------------------------------------------------*/
	.result {
	    position: fixed;
	    top:100px; right:0;
	    width:200px;
	    z-index: 999;
	    background: #EEE;
	    display: none;
	    
	    border: 1px dashed black;
	}
	.container, section {
	   /* border:1px dashed red;*/
	    position: relative;
	}
	section {
	    
	}
	article {
	    margin: auto;
	    margin-top: 3em;
	    /* TODO: Fix height for background colour. */
	}
    
/* Sections  		    -------------------------------------------------------*/
	section {
	
	}
	
/* Article  		    -------------------------------------------------------*/
	.container {
	    top:0;
	    min-width: 950px;
	}
	
	article {
	    height: auto;
	    padding-bottom: 3em;
	}
/* Panels  		    -------------------------------------------------------*/

	[data-type="panel"] {
	    position: relative;
	    margin: 0; 
	    padding: 0;
		    
	    width: 100%; /*max-width: 1920px;*/
	    height: 850px; /*TODO: Set Global? */
	    
	    overflow: hidden;
	}

    
/* Sprites  		    -------------------------------------------------------*/

	[data-type="sprite"] {
	    position: absolute;
	    /*left:50%;
	    top:50%;*/
	    width:auto; height:auto;
	    /*border:1px dashed blue;*/
	}
/* Scroll Navigation Controls  	    -------------------------------------------------------*/

	#scroll {
	    text-indent: -100px;
	    overflow: hidden;
	}
	#scroll a {
	    width:11px; height: 11px;
	    background: url(../stylesheets/images/bg-scroll-a.png) no-repeat top left;
	}
	#scroll li.current a, li:hover a {
	    background-position: bottom left;
	}
    
/*-------------------------------------------------------------------------------------------
    TYPOGRAPHY
-------------------------------------------------------------------------------------------*/
	html {
	    /* Set Font Family - Default is Sans-Serif */
	    /* Set Font Colour - Default is #333 */
	}
	body {
	    /* Set Font Size - Default is 1em (or 16px) */
	    /* Set Line Height - Default is 1.5em (or 24px) */
	    padding-top: 3em;
	}
	
	h1 {
	    font-family: PT Sans;
	    font-size: 3em;
	    color: #333;
	    text-shadow: 0 1px rgba(255,255,255,1);
	}
/*-------------------------------------------------------------------------------------------
    NAVIGATION
-------------------------------------------------------------------------------------------*/
	.sticky {
		position: fixed;
		top:0;
		width:100%;
		height: 5em;
		border-bottom:1px solid #BEBEBE;
		border-bottom-color: rgba(0,0,0,.25);
		box-shadow: -3px 0 3px rgba(0,0,0,.25);
		z-index:999;
	}
	#primary {
		margin-top: 1.5em;
	}
	#primary a {
		text-shadow: 0 1px rgba(255,255,255,1);
		font-weight: 700;
		font-size: 13px;
		color: #5F5F5F;
		background: transparent;
		border: 1px solid #FEFEFE !important;
	}
	#primary .current a, #primary a:hover  {
		color: #454545;
		background-color:#FCFCFC !important;
		/* Border */
		border: 1px solid #C9C9C9 !important;
		border: 1px solid rgba(0,0,0,0.2) !important;
		
		border-bottom-color: #AFAFAF !important;
		/*border-bottom-color: rgba(0,0,0,.5) !important;*/
		
		
		/* Box */
		box-shadow:
			inset 0 2px 2px 1px rgba(255,255,255,.1),
			inset 0 -4px 8px rgba(0,0,0,.1),
			0 1px 1px rgba(0,0,0,.1);
	}
	
	
	#scroll {
		position:fixed;
		top:40%;
		right:20px;
		width:auto;
		z-index:999;
		
		/*border:1px dashed yellow;*/
	}
	#scroll a {
		/*background:url(../stylesheets/images/bg-nav.png) no-repeat center top transparent;
		height:12px;
		width:12px;
		margin-bottom:2px;*/
		display:block;
		cursor:pointer;
		
		/*text-indent: -9999px;*/
	}
	#scroll a:hover, #scroll .current a {
		/*background-position:center bottom;*/
		color: red;
	}
	.next {
	    display: block;
	    position: absolute;
	    width:50px;
	    height:49px;
	    bottom:50px; right: 50px;
	    text-indent: -100px;
	    overflow: hidden;
	}
	.next a {
	    display: block;
	    width:100%; height: 100%;
	    background:url(../stylesheets/images/bg-next.png) no-repeat top left;
	}
	.next a:hover {
	    background-position: bottom left;
	}
	#backtotop a {
	    background-image:url(../stylesheets/images/bg-backtotop.png);
	}

/*-------------------------------------------------------------------------------------------
    LAYOUT
-------------------------------------------------------------------------------------------*/	
/* Layout - Header  		    -------------------------------------------------------*/

	header {
	    position: relative;
	    background-color: #FEFEFE;
	    z-index: 9;
	}
	header .logo {
	    margin-top: 14px;
	}
/* Layout - Section  		    -------------------------------------------------------*/

	section[data-type="panel"] {
		
		border-bottom: 1px solid #BEBEBE;
		border-bottom-color: rgba(0,0,0,.25);
		/* -moz-box-shadow:    inset 0  8px 8px -8px #696868, 
                        inset 0 -8px 8px -8px #696868;
		-webkit-box-shadow: inset 0  8px 8px -8px #696868, 
                        inset 0 -8px 8px -8px #696868;*/
		box-shadow: 	inset 0  48px 48px -48px rgba(0,0,0,.2), 
				inset 0 -48px 48px -48px rgba(0,0,0,.2);
	}
/* Layout - Article  		    -------------------------------------------------------*/

/* Layout - Footer  		    -------------------------------------------------------*/
	footer {
	    background: #0A0A0A;
	    color: #A0A0A0;
	    border-top:1px solid rgba(255,255,255,0.4);
	    padding:0.75em 0;
	    
	}
	footer a {
	    color: #A0A0A0;
	}
	footer .grid_4 a {
	    line-height: 32px;
	}
	footer .icon-heart {vertical-align: middle;}
/* Layout - XX  		    -------------------------------------------------------*/
    

/*-------------------------------------------------------------------------------------------
    PANEL SPECIFIC
    
    http://subtlepatterns.com/patterns/subtlenet2.png
    http://subtlepatterns.com/patterns/white_carbon.png
    http://subtlepatterns.com/patterns/white_carbonfiber.png
-------------------------------------------------------------------------------------------*/	
/* PANEL - Panel 1		    -------------------------------------------------------*/
	#panel-1 {
		background: url(/demo/parallax/images/brillant.png) !important; /*TODO Fix detect background */
	}
	#panel-1 article {
	    
	}
	#panel-1 .border {
	    margin-top:450px;
	    padding-bottom:1.5em;
	    
	    background: #FCFCFC;
	    background: rgba(255,255,255,.8);
	    border-color: #CBCBCB;
	    border-color: rgba(0,0,0,.2); 
	}
	#panel-1 .last {
	    text-align: center;
	}
	#panel-1 .small {
	    color: #444;
	    font-weight: 300;
	}
	#panel-1 .green.button {
	    margin:3em 0 1.5em 0;
	}
	#panel-1 #p1-bg1 { top:220px; left:-100px;}
	#panel-1 #p1-bg2 {top:200px; left:700px;}
	#panel-1 #p1-mobile {top:285px; left:150px;}
	#panel-1 #p1-tablet {top:170px; left:200px;}
	#panel-1 #p1-screen {top:180px; left:450px;}
	
/* PANEL - Panel 2		    -------------------------------------------------------*/
	#panel-2 {
		background: url(/demo/parallax/images/light_wool.png) !important; /*TODO Fix detect background */
	}
	#panel-2 article {
	    background: #FCFCFC;
	    background: rgba(255,255,255,.8);
	    border-color: #CBCBCB;
	    border-color: rgba(0,0,0,.2); 
	}
	
	#panel-2 .sprite {
	    width:300px;
	}
	#panel-2 #p2-screen1 { top:35%; left: 85%; }
	#panel-2 #p2-screen2 { top:10%; left: 75%;}
	#panel-2 #p2-screen3 { top:60%; left: 80%;}
/* PANEL - Panel 3		    -------------------------------------------------------*/

	#panel-3 h1 {
	    color: #FCFCFC;
	    text-shadow: 0 1px rgba(0,0,0,0.8);
	}
	#panel-3 article {
	    color: #FCFCFC;
	    
	    background: #0F0F0F; 
	    background: rgba(0,0,0,.8);
	}
	
/* PANEL - Panel 4		    -------------------------------------------------------*/
	#panel-4 {
		background: url(/demo/parallax/images/strange_bullseyes.png) !important; /*TODO Fix detect background */
	}
	#panel-4 #p4-arrow-1 {
	    top:50px;
	    right:100px;
	    height:75px;
	}
	#panel-4 #p4-arrow-2{
	    top:200px;
	    right:50px;
	    height:175px;
	    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	    filter: alpha(opacity=20);
	    -moz-opacity: 0.2;
	    -khtml-opacity: 0.2;
	    opacity: 0.2;
	}
	#panel-4 #p4-arrow-3 {
	    top:290px;
	    right:100px;
	}
	#panel-4 #p4-arrow-4 {
	    top:400px;
	    right:75px;
	    height:135px;
	    
	    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	    filter: alpha(opacity=50);
	    -moz-opacity: 0.5;
	    -khtml-opacity: 0.5;
	    opacity: 0.5;
	}
	#panel-4 #p4-arrow-5 {
	    top:600px;
	    right:100px;
	    
	    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	    filter: alpha(opacity=20);
	    -moz-opacity: 0.2;
	    -khtml-opacity: 0.2;
	    opacity: 0.2;
	}
	#panel-4 #p4-arrow-6 {
	    bottom:250px;
	    right:100px;
	}
/* PANEL - Panel 5		    -------------------------------------------------------*/
	#panel-5 {
	    background: url(/demo/parallax/images/pinstriped_suit.png) !important; /*TODO Fix detect background */
	    color: #FAFAFA;
	}
	#panel-5 article {
	    margin-top:0;
	}
	#panel-5 h1 {
	    color: #FAFAFA;
	    text-shadow: 0 1px rgba(0,0,0,1);
	}
	#panel-5 #p5-arrows {
	    top:570px;
	    left:50px;
	    
	}
	#panel-5 #p5-1 {
	    top: 570px; left:-75px; 
	}
        #panel-5 #p5-2 {
	    top: 570px; left:150px; 
	}	    
	#panel-5 #p5-3 {
	    top: 570px; left:375px;
	}
	#panel-5 #p5-box {
	    font-family: PT Serif;
	    font-weight: 700;
	    font-style: italic;
	    border:1px solid #7AA94F;
	    padding:2.5em;
	    top: 570px; left:610px;
	    background: url(../stylesheets/images/spr-p5-xy.png) !important;
	    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	}
/* PANEL - Panel 6		    -------------------------------------------------------*/
	#panel-6 {
	    background: url(/demo/parallax/images/natural_paper.png) !important; /*TODO Fix detect background */
	}
	#panel-6 article {
	    margin-top:0;
	}
	    
	#panel-6 h1 {
	    text-align: right;
	}
	#panel-6 #p6-siteeditor {
	    top:100px;
	    right:47%;
	    width:57%;
	}
    
    
/* PANEL - Panel 7		    -------------------------------------------------------*/
	#panel-7 {
	    background: url(/demo/parallax/images/dark_mosaic.png) !important; /*TODO Fix detect background */
	}
	#panel-7 article {
	    background: url(/demo/parallax/images/lightpaperfibers.png) !important; /*TODO Fix detect background */
	}
	#panel-7 h1 {
	    text-align: center;
	}
	#panel-7 article {
	    background: rgba(255,255,255,0.99);
	}