 /*
NAME:	CUSTOM CSS
DESC:	CUSTOM STYLING FOR OOD
VER:	1 | 100504
AUTHOR: ID
*/

/* -------------------------------- */
/* DEFAULT HTML TAGS STYLING		*/ 
/* -------------------------------- */

html {
	background: #FFF;
	min-height: 100%;	
	}	
	
body {
	background: #FFF url(../img/bg-new.jpg) repeat-y center top;
	color: #4b4b4b;
	min-width: 900px;
	min-height: 100%;
	}
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	}
	h2 {
		}
	h3 {
		}
	h4 {
		}
p {
	}
small {
	}
a {
	color: #999;
	}
a:hover {
	}
	
/* -------------------------------- */
/* MAIN LAYOUT						*/ 
/* -------------------------------- */

#whole {
	height: 100%;
	position: relative;
	overflow: hidden;
	}
	#container {
		width: 900px;
		}	
		#head {
			left: 50%;
			position: absolute;
			margin: 30px 0 0 -230px;
			width: 460px;
			z-index: 110;
			}
			#logo {
				background: url(../img/logo.png) no-repeat;
				height: 217px;
				margin: 0 auto 30px;
				width: 214px;
				}
			#controller {
				margin: 0 auto 60px;
				padding: 0 0 0 90px;
				padding: 0 0 0 15px;
				margin: 0 auto 30px;
				}
				#controller a {
					border-right: 1px solid;
					color: #333;
					display: block;
					float: left;
					font-size: 14px;
					padding: 0 10px;
					}
				#controller a.last {
					border-right: none;	
					padding-right: 0;
					}
				#controller a:hover {
					color: #EA0078;	
					}
			#fulfill {
				background-image: url(../img/btn-fulfill.png);
				width: 100%;
				width: 300px;
				height: 75px;
				margin: 0 auto;
				}
				
		#footer {
			width: 900px;
			padding: 0;
			line-height: 1;
			
			
			
			position: absolute;
			bottom: 0;
			width: 100%;
			}	
			#footer p {
				margin: 0;	
				}
			#footer a#qpow {
				color: #999;
				}
				.footer-inner {
					padding: 0 20px;	
					}
			
/* -------------------------------- */
/* FLOW								*/ 
/* -------------------------------- */

#slides {
	}
	.page {
		}
	.home {
		background: url(../img/home.jpg) no-repeat center top;
		}
		.content {
			margin: 0 auto;	
			padding: 349px 0 0;
			width: 900px;
			text-indent: -9999em;
			display: block;
			}
			.what .content {
				background: url(../img/what.png) no-repeat 120px 349px;
				height: 600px;
				}
				.what-wrap {
					opacity: 0.6;
					width: 900px;
					height: 500px;
					position: absolute;
					bottom: 0;
					left: 50%;
					z-index: 300;
					margin-left: -450px;
					}
					a.simply {
						width: 290px;
						height: 380px;
						position: absolute;
						top: 20px;
						left: 125px;
						display: block;
						}
					
					#prevNext {
						
						}
					
					.what-wrap a.hereare, a.jFlowPrev {
						width: 374px;
						height: 30px;
						position: absolute;
						bottom: 125px;
						right: 44px;
						display: block;
						text-indent: -9999em;
						}
						.what-wrap a.hereare:hover, a.jFlowPrev:hover {
							background: url(../img/herearesome.png) no-repeat;
							}
				
				
			.how .content {
				background: url(../img/how.png) no-repeat 200px 409px;
				height: 600px;
				}
			.terms .content {
				background: url(../img/terms.png) no-repeat 180px 419px;
				height: 800px;
				}
				.terms .content li {
					list-style: none;	
					}
.qtip {
	font-weight: bold;
	}
.click-wrap {
	opacity: 0.6;
	width: 1424px;
	height: 826px;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 100;
	margin-left: -712px;
	}
	.click {
		height: 100px;
		position: absolute;
		width: 100px;
		top: 0;
		left: 0;
		z-index: 100;
		}
		.glasses {
			width: 249px;
			height: 99px;
			left: 48px;
			top: 38px;
			}
		.ipad {
			width: 127px;
			height: 163px;
			left: 350px;
			top: 280px;
			}
		.nds {
			width: 172px;
			height: 136px;
			left: 324px;
			top: 91px;
			}
		.skywalker {
			width: 248px;
			height: 149px;
			left: 21px;
			top: 184px;
			}
		.watch {
			width: 116px;
			height: 213px;
			left: 30px;
			top: 395px;
			}
			
		.hoodie {
			width: 167px;
			height: 187px;
			left: 202px;
			top: 414px;
			}
		.laptop {
			width: 194px;
			height: 161px;
			left: 0;
			top: auto;
			bottom: 11px;
			}
		.perfume {
			width: 179px;
			height: 176px;
			left: 260px;
			top: auto;
			bottom: 5px;
			}
		.camera {
			width: 144px;
			height: 143px;
			left: 500px;
			top: auto;
			bottom: 5px;
			}
			
			
		.lv {
			width: 173px;
			height: 186px;
			left: auto;
			right: 266px;
			top: 21px;
			}
		.phone {
			width: 98px;
			height: 196px;
			left: auto;
			right: 90px;
			top: 21px;
			}
		.jacket {
			width: 165px;
			height: 206px;
			left: auto;
			right: 260px;
			top: 245px;
			}
		.glasses2 {
			width: 210px;
			height: 125px;
			left: auto;
			right: 25px;
			top: 255px;
			}
		.zen {
			width: 180px;
			height: 103px;
			left: auto;
			right: 257px;
			top: auto;
			bottom: 238px;
			}
		.heels {
			width: 164px;
			height: 200px;
			left: auto;
			right: 58px;
			top: auto;
			bottom: 237px;
			}
		.heels2 {
			width: 155px;
			height: 148px;
			left: auto;
			right: 439px;
			top: auto;
			bottom: 28px;
			}
		.lv2 {
			width: 190px;
			height: 160px;
			left: auto;
			right: 239px;
			top: auto;
			bottom: 28px;
			}
		.sk {
			width: 170px;
			height: 170px;
			left: auto;
			right: 45px;
			top: auto;
			bottom: 28px;
			}
                    
                    
			
			
			
			
			
			
/* -------------------------------- */
/* CODA SLIDER						*/ 
/* -------------------------------- */

/* Most common stuff you'll need to change */

.coda-slider-wrapper { padding: 0 }
.coda-slider { background:  }

/* Change the width of the entire slider (without dynamic arrows) */
.coda-slider, .coda-slider .panel { width: 860px } 

/* Panel padding */
.coda-slider .panel-wrapper { 
	background: #FFF; 
	padding: 80px 10px 20px 285px; 
	height: 520px; 
	}

.coda-nav ul {
	float: right; 
	margin: 0; 
	position: relative; 
	z-index: 20;
	}
	.coda-nav ul li a { 
		background: none;
		color: #fff; 
		font-weight: bold;
		font-size: 1.333em;
		margin: 0;
		padding: 20px 0 25px 20px;
		}
	.coda-nav ul li a.current { 
		background: none; 
		color: #EEE;
		} 

/* -------------------------------- */
/* CUSTOM SLIDES					*/ 
/* -------------------------------- */

/* PANEL 1 */


/* Panel 2 */


/* Panel 3 */


/* Panel 4 */


/* -------------------------------- */
/* COUNTDOWN						*/ 
/* -------------------------------- */

.hasCountdown {
	background: url(../img/countdown.jpg) no-repeat;
	border: none;
	width: 242px;
	height: 78px;
	margin: 10px auto 0;
	padding: 32px 0 0;
	}
.countdown_section {
	font-size: 12px;
	color: #FFF;
	text-shadow: 1px 1px 1px #000;
	}
.countdown_amount {
	font-size: 26px;
	color: #ff8618;
	font-weight: bold;
	text-shadow: none;
	}		
		
/* -------------------------------- */
/* POP								*/ 
/* -------------------------------- */
div.pp_inline label {
	font-size: 16px;	
	}	
div.pp_inline input[type="text"], div.pp_inline textarea {
	padding: 8px;	
	}
	
div.pp_inline input {	
	width: 400px;
	padding: 4px 8px;
	margin-bottom: 10px;

	}
	
	
/* -------------------------------- */
/* TipTip CSS - Version 1.2			*/ 
/* -------------------------------- */

#tiptip_holder {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
}

#tiptip_holder.tip_top {
	padding-bottom: 5px;
}

#tiptip_holder.tip_bottom {
	padding-top: 5px;
}

#tiptip_holder.tip_right {
	padding-left: 5px;
}

#tiptip_holder.tip_left {
	padding-right: 5px;
}

#tiptip_content {
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 2px #000;
	padding: 10px 8px;
	border: 1px solid rgba(255,255,255,0.25);
	background-color: rgb(25,25,25);
	background-color: rgb(192,13,93);
	
	background-color: rgba(25,25,25,0.92);
	background-color: rgba(192,13,93,0.92);
	
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	box-shadow: 0 0 3px #555;
	-webkit-box-shadow: 0 0 3px #555;
	-moz-box-shadow: 0 0 3px #555;
	
	text-align: center;
}

.tip_right #tiptip_content {
		
		
	background-color: rgba(25,25,25,0.92);
	background-color: rgba(0,106,182,0.92);
		
		
	}

/*0,106,182*/

#tiptip_arrow, #tiptip_arrow_inner {
	position: absolute;
	border-color: transparent;
	border-style: solid;
	border-width: 6px;
	height: 0;
	width: 0;
}

#tiptip_holder.tip_top #tiptip_arrow {
	border-top-color: #fff;
	border-top-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_bottom #tiptip_arrow {
	border-bottom-color: #fff;
	border-bottom-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_right #tiptip_arrow {
	border-right-color: #fff;
	border-right-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_left #tiptip_arrow {
	border-left-color: #fff;
	border-left-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_top #tiptip_arrow_inner {
	margin-top: -7px;
	margin-left: -6px;
	border-top-color: rgb(25,25,25);
	border-top-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_bottom #tiptip_arrow_inner {
	margin-top: -5px;
	margin-left: -6px;
	border-bottom-color: rgb(25,25,25);
	border-bottom-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_right #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -5px;
	border-right-color: rgb(0,106,182);
	border-right-color: rgba(0,106,182,0.92);
}

#tiptip_holder.tip_left #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -7px;
	border-left-color: rgb(25,25,25);
	border-left-color: rgba(25,25,25,0.92);
	
	border-left-color: rgb(0,106,182);
	border-left-color: rgba(192,13,93,0.92);
	
	
}

/* Webkit Hacks  */
@media screen and (-webkit-min-device-pixel-ratio:0) {	
	#tiptip_content {
		padding: 4px 8px 5px 8px;
		background-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_bottom #tiptip_arrow_inner { 
		border-bottom-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_top #tiptip_arrow_inner { 
		border-top-color: rgba(20,20,20,0.92);
	}
}	


