@charset "utf-8";
/* Main style for OsXs promo site */

*, html {
	border:				0;
	margin:				0;
	padding:			0;
}

body {
	background:			#352d54 url(../images/main_bg.jpg) repeat-x;
	font-family:		Verdana, Geneva, sans-serif;
	font-size:			100%;
}

h1, h2, h3, h4, h5, h6 {
	font-weight:		normal;
	color:				#313131;
	margin-bottom:		0.2em;
}

h2 {
	margin-bottom:		0.6em;
}

h5 {
	width:				80%;
	font-size: 			0.6em;
	margin:				0 auto 1.6em auto;
}

p {
	font-size:			0.8em;
	color:				#313131;
	margin:				0 0 1em 0;
}

a:link,
a:visited {
	color:				#564595;
}

a:hover {
	color:				#372e55;	
}

/* =Generic
----------------------------------------------- */
#logo {
	position: 			absolute;
	top:				20px;
	left:				20px;
}

#contentMain {
	position:			relative;
	width:				808px;
	margin: 			0 auto;
}

#infoContainer {
	background:			url(../images/check_bg.jpg) no-repeat bottom;
	padding:			72px 50px 30px 0;
	overflow:			hidden;
	min-height:			246px;
	max-height:			246px;
}

#infoSection {
	background:			url(../images/info_bg.png);
	padding:			30px 30px 30px 10px;
}

#infoSection ul {
	color:				#fff;
	font-size:			0.8em;
	list-style:			none inside;
	
}

#infoSection ul li {
	padding:			0 0 1.1em 40px;
	line-height:		1.5em;
	background:			url(../images/bullet_o.png) no-repeat;
}

#infoSection ul li:nth-child(even) {
	background:			url(../images/bullet_x.png) no-repeat;
}

#priceBadge {
	background: 		url(../images/price_badge.gif) no-repeat;
	overflow:			hidden;
	height:				146px;
	width:				198px;
	position:			absolute;
	top:				100px;
	right:				280px;
	padding:			92px 0 0 0;
	text-align:			center;
}

#iphone {
	position:			absolute;
	top:				10px;
	right:				32px;
	width:				220px;
	height:				435px;
	background:			url(../images/iphone.gif) no-repeat;
}

#header {
	background:			url(../images/header_bg.gif) no-repeat;
	width:				808px;
	height:				64px;
	padding: 			20px;
	overflow:			hidden;
}

#header p {
	color:				#fff;
	font-size:			1em;
}

#header .review {
	vertical-align: 	top;
	line-height:		4em;
}

#header .reviewer {
	font-size:			0.6em;
	vertical-align: 	3.5em;
	line-height:		4em;
}

#header .quote {
	font-family:		Arial, Helvetica, sans-serif;
	color:				#504088;
	font-size:			6em;
}

#mainCont {
	width:				768px;
	background:			url(../images/roundedMid_bg.gif) repeat-y;
	padding:			20px;
}

/* =Footer
----------------------------------------------- */
#roundFooter {
	width:				808px;
	height:				23px;
	background:			url(../images/roundedBot_bg.gif) no-repeat;
}

#footer {
	text-align:			center;
	padding: 			0.5em;
	font-size:			0.8em;
	color:				#564594;
}

#footer p {
	color:				#564594;
}

#footer a:link,
#footer a:visited,
#footer a:hover
{
	color:				#564594;
}

/* =Buttons
----------------------------------------------- */
.socialContainer {
	float: 				right;
	width:				12em;
	text-align: 		center;
}

a.roundButton {
	display:			block;
	background:			#453870 url(../images/roundbtn_bg.gif) repeat-x;
	padding:			0.5em 0.8em;
	margin-bottom:		1.0em;
	border:				1px solid #372e55;
	-moz-border-radius:	5px;
	-webkit-border-radius: 5px;
	border-radius:		5px;
	text-decoration:	none;
	color:				#fff;
}

a.roundButton:hover {
	background-color:	#392c64;
	color:				#fff;
}

.templateBtn {
	width:				12em;
}

.templateBtn span {
	background: url(../images/downarrow.gif) no-repeat;
	background-position: 0 -15px;
	float:				left;
	width:				12px;
	height:				15px;
	margin:				0 0.4em 0 0;
}

.twitterBtn {
	width:				8em;
	margin:				0 auto;
}

.twitterBtn span {
	background: 		url(../images/twitter_btn.gif) no-repeat;
	background-position: 0 -17px;
	float:				left;
	width:				13px;
	height:				17px;
	margin:				0 0.4em 0 0;
}

/* =Gallery
----------------------------------------------- */
#photoGal {
	display:			none;
	position: 			absolute;
	width:				166px;
	height:				239px;
	overflow:			hidden;
	top:				78px;
	left:				28px;
}

#photoGal ul {
	width: 				1014px;
	list-style:			none;
	float: 				left;
	margin-left:		0;
}

#photoGal li {
	float: 				left;
	width:				166px;
	margin: 			0;
	padding: 			0;
}

#thumbDots {
	display: 			none;
	position: 			absolute;
	top: 				400px;
	right: 				90px;
	z-index:			100;
}

#thumbDots li {
	width:				10px;
	height:				10px;
	float: 				left;
	list-style:			none;
	text-indent:		-9999em;
	margin:				0 0 0 0.5em;
	overflow:			hidden;
}

#thumbDots li a {
	display:			block;
	width:				10px;
	height:				10px;
	background: 		url(../images/thumb_dot.gif) no-repeat;
}

#thumbDots li a:hover,
#thumbDots li a.activeDot {
	background-position: 0 -10px;	
}

#thumbArrows {
	display:			none;
	position:			absolute;
	top:				180px;
	right:				16px;
}

#thumbArrows li {
	list-style:			none;
	text-indent:		-9999em;
	float:				left;
}

#thumbArrows li a {
	display:			block;
	width:				21px;
	height:				30px;
	overflow:			hidden;
}

#thumbPrev {
	background:			url(../images/gallery_back.png) no-repeat;
}

#thumbNext {
	background:			url(../images/gallery_forward.png) no-repeat;
	margin-left:		210px;
}