@import url('../stylesheets/reset.css');
@import url('../stylesheets/nav.css');
@import url('../stylesheets/forms.css');
@import url('../stylesheets/prettyPhoto.css');
@import url('../stylesheets/jquery-ui-1.7.1.custom.css');

/*
-----------------------------------------------
Layout CSS
----------------------------------------------- */
body {
  font: 11px Arial, Helvetica, Verdana, sans-serif;
  /*background: #fff url(../images/bg-body.jpg) no-repeat center 67px;*/
  text-align: center;
}
a {
  color: #fff;
  text-decoration: underline;
}
#masthead {
  background: url(../images/bg-masthead.png) repeat-x left top;
  height: 76px;
  z-index: 10;
  position: relative;
}
#header,
#contentWrapper {
  width: 960px;
  margin: 0px auto;
  text-align: left;
}
#header h1,
#header h1 a {
  float: left;
}
#header h1 a {
  display: block;
  background: url(../images/logo.png) no-repeat left center;
  text-indent: -9999px;
  height: 40px;
  width: 336px;
  margin-top: 13px;
}
#header p {
  font-size: 17px;
  padding-top: 30px;
}
#player {
  float: left;
  margin-top: 15px;
}
#contentWrapper {
  height: 663px;
  text-align: center;
}
#footer {
  background: url(../images/bg-footer.png) repeat-x left top;
  margin-top: -10px;
  padding-bottom: 50px;
  z-index: 11;
  position: relative;
}
.company-details,
.newsletter-form {
  width: 890px;
  margin: 0px auto;
  text-align: left;
  position:relative;	
}
.company-details {
  font-size: 11px;
  height: 40px;
  line-height: 40px;
  color: #fff;
}
#footer .newsletter-form {
  /*display: none;*/
}
.newsletter-form h3 {
  font-size: 27px;
  padding-left: 27px;
  background: url(../images/img-footer-logo.gif) no-repeat left bottom;
  width: 170px;
  float: left;	
}
.newsletter-form p.note {
  color: #4D4D4D;
  font-size: 12px;
  line-height: 12px;
  width: 230px;
  padding: 6px 0px 0px 5px;
}
h1.pTitle {
  background: url(../images/hdr-private-promotion.png) no-repeat center center;
  height: 128px;
  width: 484px;
  text-indent: -9999px;
  margin: 40px auto 10px;
}
.box {
  width: 590px;
  color: #B2B2B2;
  margin: 0px auto;
  text-align: center;
  position: relative;
}
.box-header {
  background: url(../images/bg-box-header.png) no-repeat center bottom;
  height: 21px;
}
.box-footer {
  background: url(../images/bg-box-footer.png) no-repeat center top;
  height: 21px;
}
.box-content {
  background: url(../images/bg-box-content.png) repeat-y center top;
  padding: 5px 0px;
}
.box-content h2 {
  color: #fff;
  font-size: 32px;
  text-align: center;
  padding: 0px 0px 10px;
}
.box-content h3 {
  font-size: 18px;
  padding-bottom: 15px;
  text-align: center;
}
.box-content p {
  font-size: 12px;
  color: #B2B2B2;
  line-height: 20px;
  padding: 0px 25px 15px;
}
.box-content strong {
  font-size: 13px;
  font-weight: bold;
  display: block;
  padding-top: 5px;
}
a.get-btn {
  background: url(../images/btn-get-promo.png) no-repeat center center;
  display: block;
  text-indent: -9999px;
  height: 86px;
  width: 350px;
  position: absolute;
  bottom: -33px;
  left: 50%;
  margin-left: -175px;
}

/* Promo Modal Styles
   ------------------------------------ */
body#promo,
#promo .box-content {
  background: none;
  padding: 0px;
  margin: 0px;
}
#promo h1.pTitle {
  margin: 0px auto;
}
#promo .box-content {
  width: 470px;
  text-align: left;
  margin: 0px 0px 20px 30px;
}
#promo .box-content p {
  font-size: 12px;
  color: #A5B3AB;
  font-weight: bold;
}
#promo input {
  width: 425px;
  background: #f2f2f2;
  color: #a5b3ab;
  font: 17px Arial, Helvetica, Verdana, sans-serif;
  font-weight: bold;
  border: 1px solid #808080;
  padding: 15px 20px;
  margin-bottom: 15px;
}
#promo #submit {
  height: 39px;
  width: 277px;
  background: url(../images/btn-email.png) no-repeat center center;
  text-indent: -9999px;
  margin: 0px 12px 0px 0px;
  padding: 0px;
  float: right;
  cursor: pointer;
  border: none;
}

/* End Promo Modal Styles
   ------------------------------------ */
   
/* NEWSLETTER SIGNUP Styles
   ------------------------------------ */
.newsletter-form form {
  position: absolute;
  right: 0px;
  top: 3px;	
}	
.newsletter-form input {
  color: #808080;
  border: 1px solid #bbb;
  font-size: 15px;
  padding: 7px 2px;
  float: left;
  margin-right: 2px;
  width: 180px;	
}
.newsletter-form #submit {
  background: url(../images/btn-submit.png) no-repeat center center;
  width: 72px;
  height: 36px;
  border: none;
  padding: 0px;
  margin: 0px;	
  cursor: pointer;

}
   
/* End NEWSLETTER SIGNUP Styles
   ------------------------------------ */   


/* jPlayer Styles
   ------------------------------------ */
#player_container {
	position:relative;
	padding: 0px;
  width: 300px;
  float: left;
}
ul#icons {
  margin: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  position: relative;
}
ul#icons li {
  margin: 2px;
  position: absolute;
  top: 25px;
  left: 0px;
  padding: 0;
  cursor: pointer;
  float: left;
  list-style: none;
  border: none;
  background-color: #fff;
}
ul#icons #play {
  
}
ul#icons span.ui-icon {float: left; margin: 0; height: 17px; width: 17px;}
#sliderVolume {
	position: absolute;
	top: 32px;
	left: 130px;
	width: 60px;
	height: 3px;
}
#sliderVolume .ui-slider-handle {
	height: 9px;
	width: 5px;
  margin-top: 0px;
}
#bars_holder {
	position: absolute;
	top: 30px;
	left: 25px;
	width: 100px;
}
#bars_holder .ui-slider-horizontal {
  height: 10px;
  border: none;
  background-color: #E6E6E6;
}
#sliderPlayback .ui-slider-handle {
	height: 1.6em;
  display:none;
}
#loaderBar.ui-progressbar {
	height: 8px;
	border:0;
  margin-top: -10px;
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
  background-image:url("../images/ui-icons_888888_256x240.png");
}
/* End jPlayer Styles
   ------------------------------------ */

/* Scrollable Styles
   ------------------------------------ */
#slider {
  position: absolute;
	left: 50%;
	top: 67px;
	margin-left: -480px;
	height: 696px;
	width: 960px;
	z-index: 9;
}
.scroller {
  height: 696px;
  /*width: 990px;*/
}
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	float:left;
	overflow:hidden;
	position:relative;
	width: 960px;
  height: 696px;
}
/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	/*clear:both;*/
}

/* single scrollable item */
.scrollable .items div.item {
  /*cursor: pointer;*/
	float: left;
	margin: 0px;
	height: 696px;
	width: 960px;
	position: relative;
}
.scrollable .items div.item1 {
  background:url(../images/img-slide1.jpg) no-repeat;
}
.scrollable .items div.item2 {
  background:url(../images/img-slide2.jpg) no-repeat;
}
.scrollable .items div.item3 {
  background:url(../images/img-slide3.jpg) no-repeat;
}
.scrollable .items div.item4 {
  background:url(../images/img-slide4.jpg) no-repeat;
}
.scrollable .items div.item1 .box,
.scrollable .items div.item3 .box {
  margin-top: 220px;  
}
.scrollable .items div.item2 .box,
.scrollable .items div.item4 .box {
  margin-top: 170px;  
}
/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(../images/arrows_scroller.png) no-repeat;
	display: block;
	width: 72px;
	height: 650px;
	margin: 0;
	cursor: pointer;
	font-size: 1px;
	position: absolute;
	z-index: 12;
}

/* right */
a.right {
  background-position: left center;
  right: 0px;
}
/*a.right:hover 	{ background-position:-46px -184px; }*/
/* a.right:active 	{ background-position:-60px -30px; }  */


/* left */
a.left {
  background-position: right center;
  left: 0px;
} 
/*a.left:hover  { background-position:-46px 0; }*/
/* a.left:active { background-position:-60px 0; } */

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 

/* End Scrollable Styles
   ------------------------------------ */

/* Misc
=============================================== */
.success {
  color: #00aeef;
  position: absolute;
  left: 52%;
  top: 40px;	
}
.error {
  color: #f7941d;
  position: absolute;
  left: 52%;
  top: 40px;	
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
}

img.alignleft {
  border: 1px solid #ccc;
  margin: 0px 20px 15px 0px;
}

.alignright {
	float: right;
}

img.alignright {
  border: 1px solid #ccc;
  margin: 0px 0px 15px 20px;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}