/*
Plugin: jQuery Parallax
Version 1.1.3
Author: Ian Lunn
Twitter: @IanLunn
Author URL: http://www.ianlunn.co.uk/
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/

License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.ianlunn.co.uk/.

Customized by: sike
Author URI: http://codecanyon.net/user/sike?ref=sike

*/

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


.float-left{
	float: left;
	margin: 0 0 0 20px;
}

.float-right{
	float: right;
	margin: 0 20px 0 0;
}

#parallax-nav{
	position: fixed;
	opacity: 0;
	margin: 0;
	padding: 0;
	width: 12px;
	list-style: none;
	top: 50%;
	/*left: 10px;*/
	z-index: 1000002;
	display: none;
}

#parallax-nav li a{
	width: 11px;
	height: 11px;
	margin: 4px 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.6);
}
#parallax-nav li a:hover, #parallax-nav li a.active {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.8);
}
#parallax-nav li a:focus{
	outline: none;
}



.parallax-container{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1000001;
	top: 0;
	left: 0;
	opacity: 0;
	display: none;
}
.parallax-container img{
	border: 0;
	outline: 0;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.parallax-container h2{
	font-size: 24px;
	margin-bottom: 12px;
}

.parallax-container p{
	line-height: 160%;
	margin: 0 0 4px 0;
	font-size: 13px;
}
.parallax-item{
	color: #333;
	background-position: 50% 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 auto;
	padding: 0;
}

.parallax-close{
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(../img/close.png) 0 0 no-repeat;
	position: fixed;
	right: 12px;
	top: 12px;
	z-index: 13;
}
.cq-parallax-pattern{
	background-image: url(../img/purty_wood.png) repeat;
	background-repeat: repeat;
}


.parallax-container .story{
	margin: 0 auto;
	min-width: 980px;
	overflow: auto;
	width: 980px;
}

.parallax-container .story .float-left, .parallax-container .story .float-right{
	position: relative;
	/*width: 350px;*/
}

/* style for the close button in the text block */
.parallax-container .parallax-close-btn{
	 display:-moz-table-cell; display:inline-block; *display:inline; *zoom:1;
}
.parallax-container .bluebutton{
	background-color: #759ae9;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #759ae9), color-stop(50%, #376fe0), color-stop(50%, #1a5ad9), color-stop(100%, #2463de));
	background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
	background-image: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
	background-image: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
	background-image: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
	background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
	border: 1px solid #1b4db3;
	-webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
	-moz-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
	box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
	color: #fff;
	font: 12px "helvetica neue", helvetica, arial, sans-serif;
	padding: 7px 12px 8px 12px;
	text-shadow: 0 -1px 1px #1a5ad9;
	text-decoration: none;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	/*width: 100%;*/
}
.parallax-container .bluebutton:hover{
	background-color: #5d89e8;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5d89e8), color-stop(50%, #2261e0), color-stop(50%, #044bd9), color-stop(100%, #0d53de));
    background-image: -webkit-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    background-image: -moz-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    background-image: -ms-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    background-image: -o-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    background-image: linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    cursor: pointer;
}

.parallax-container .pinkbutton {
	background-color: #9e76e8;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9e76e8), color-stop(50%, #7038e0), color-stop(50%, #6021de), color-stop(100%, #6224de));
	background-image: -webkit-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
	background-image: -moz-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
	background-image: -ms-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
	background-image: -o-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
	background-image: linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
	color: #fff;
	font: 12px "helvetica neue", helvetica, arial, sans-serif;
	line-height: 1;
	padding: 7px 12px 8px 12px;
	text-align: center;
	text-decoration: none;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-background-clip: padding-box;
}

.parallax-container .pinkbutton:hover {
	background-color: #8d69cf;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8d69cf), color-stop(50%, #6332c7), color-stop(50%, #551dc4), color-stop(100%, #561fc4));
    background-image: -webkit-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
    background-image: -moz-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
    background-image: -ms-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
    background-image: -o-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
    background-image: linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
    -webkit-background-clip: padding-box;
    cursor: pointer;
}

.parallax-container .redbutton {
	background-color: #ee432e;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee432e), color-stop(50%, #c63929), color-stop(50%, #b51700), color-stop(100%, #891100));
	background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
	background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
	background-image: -ms-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
	background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
	background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
	border: 1px solid #951100;
	color: #fff;
	font: 12px "helvetica neue", helvetica, arial, sans-serif;
	line-height: 1;
	padding: 7px 12px 8px 12px;
	text-align: center;
	text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
	text-decoration: none;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
.parallax-container .redbutton:hover {
    background-color: #f37873;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f37873), color-stop(50%, #db504d), color-stop(50%, #cb0500), color-stop(100%, #a20601));
    background-image: -webkit-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -ms-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -o-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    cursor: pointer;
}

.parallax-container .darkbutton {
	color: #d7d7d7;
	border: solid 1px #333;
	background: #333;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #364c80));
    background-image: -webkit-linear-gradient(top, #444444 0%, #000000 100%);
    background-image: -moz-linear-gradient(top, #444444 0%, #000000 100%);
    background-image: -ms-linear-gradient(top, #444444 0%, #000000 100%);
    background-image: -o-linear-gradient(top, #444444 0%, #000000 100%);
    background-image: linear-gradient(top, #444444 0%, #000000 100%);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
	font: 12px "helvetica neue", helvetica, arial, sans-serif;
	line-height: 1;
	padding: 8px 12px 9px 12px;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 0 #333;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
.parallax-container .darkbutton:hover {
	background: #000;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #666666), color-stop(100%, #364c80));
    background-image: -webkit-linear-gradient(top, #666666 0%, #000000 100%);
    background-image: -moz-linear-gradient(top, #666666 0%, #000000 100%);
    background-image: -ms-linear-gradient(top, #666666 0%, #000000 100%);
    background-image: -o-linear-gradient(top, #666666 0%, #000000 100%);
    background-image: linear-gradient(top, #666666 0%, #000000 100%);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6666666', endColorstr='#000000');
}
.parallax-container .lightbutton {
	background: #e3e3e3;
	border: 1px solid #bbb;
	-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
	-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
	box-shadow: inset 0 0 1px 1px #f6f6f6;
	color: #333;
	font: 12px "helvetica neue", helvetica, arial, sans-serif;
	line-height: 1;
	padding: 8px 12px 9px 12px;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
.parallax-container .lightbutton:hover {
    background: #d9d9d9;
    -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
    -moz-box-shadow: inset 0 0 1px 1px #eaeaea;
    box-shadow: inset 0 0 1px 1px #eaeaea;
    color: #222;
    cursor: pointer;
}


.parallax-container .redbutton:focus, .parallax-container .bluebutton:focus, .parallax-container .darkbutton:focus, .parallax-container .pinkbutton:focus, .parallax-container .lightbutton:focus{
	outline: 0;
	border: 0;
}


@media only screen and (min-width: 960px) {
  .float-right{
  }
}

@media screen and (min-width: 768px) and (max-width: 959px) {
  .float-right{
  }
  .parallax-container .story{
	min-width: 720px;
	width: 720px;
  }

}

@media screen and (min-width: 480px) and (max-width: 767px) {
  .float-right{
  	float: left;
	margin: 0 0 0 20px;
  }
  .parallax-container .story{
	min-width: 480px;
	width: 480px;
  }

}

@media only screen and (min-width: 160px) and (max-width: 479px) {
  .float-right{
  	float: left;
	margin: 0 0 0 20px;
  }
  .parallax-item{
	min-width: 480px;
	width: 480px;
  }
  .parallax-container .story{
	min-width: 460px;
	width: 460px;
  }

}