/*****************************************************************************

	Jessie J 'WILD' Splash page 2013
	Code, inner workings & wizardry by Lawrie Malen at Very New Media
	http://www.verynewmedia.com

*****************************************************************************/


html, body {
	background-color: 		#FFFFFF;
	font-family: 				Trebuchet MS;
	font-size: 					1em;
	margin:						0px;
	padding:						0px;
	color:						#808080;
}

#coverall {
	position:					absolute;
	top:							0px;
	left:							0px;
	right:						0px;
	bottom:						0px;
	background-color:			#FFFFFF;
	z-index:						1001;
}

/*
	MAIN PAGE CONTAINERS
*/

#container {
	position:					absolute;
	top:							50%;
	left:							50%;
	width:						1100px;
	height:						700px;
	margin-top:					-350px;
	margin-left:				-480px;
}

#terms {
	position:					absolute;
	bottom:						-40px;
	left:							0px;
	font-size:					0.625em;
}

/*
	DEFINING THE LOOK OF THE PAGE N' JUNK
*/

.panel {
	position:					absolute;
	left:							50%;
	width:						240px;
	height:						700px;
}

.panel .jessie, .panel .letter, .panel .fullword, .panel .over {
	position:					absolute;
	top:							0px;
	left:							0px;
	right:						0px;
	bottom:						0px;
	background-position:		top left;
	background-repeat:		no-repeat;
}

/*
	W 
*/

.panel#w {
	width:						390px;
}

.panel#w .jessie {
	background-image:			url('./img/jessieW.png');
}

.panel#w .letter {
	background-image:			url('./img/letterW.png');
}

.panel#w .fullword {
	background-image:			url('./img/letterW.png');
}

/*
	I 
*/

.panel#i {
	width:						280px;
}

.panel#i .jessie {
	background-image:			url('./img/jessieI.png');
}

.panel#i .letter {
	
}

.panel#i .fullword {
	background-image:			url('./img/fullwordI.png');
}

/*
	L 
*/

.panel#l {
	width:						320px;
}

.panel#l .jessie {
	background-image:			url('./img/jessieL.png');
}

.panel#l .letter {
	background-image:			url('./img/letterL.png');
}

.panel#l .fullword {
	background-image:			url('./img/fullwordL.png');
}

.panel#l .over {
	background-image:			url('./img/overL.png');
}

/*
	D 
*/

.panel#d {
	width:						260px;
}

.panel#d .jessie {
	background-image:			url('./img/jessieD.png');
}

.panel#d .letter {
	background-image:			url('./img/letterD.png');
}

.panel#d .fullword {
	background-image:			url('./img/fullwordD.png');
}

/*
	EXPANDED PANEL
*/

.info {
	position:					absolute;
	top:							0px;
	right:						0px;
	width:						710px;
	height:						700px;
}

/*
	W 
*/

.info#info-w {
	width:						710px;
}

/*
	I 
*/

.info#info-i {
	width:						820px;
	padding-top:				0px;
}

.info#info-i {
	width:						820px;
	padding-top:				0px;
}

.info#info-i .whitebox {
	margin-top:					30px;
}

.info#info-i .quote {
	margin-left:				380px;
}

/*
	L 
*/

.info#info-l {
	width:						760px;
}

/*
	D 
*/

.info#info-d {
	width:						840px;
}

.info#info-d .whitebox {
	margin-top:					30px;
	margin-left:				190px;
}

.info#info-d .socialbar {
	margin-left:				190px;
}

.info#info-d .itunes {
	margin-top:					10px;
	margin-left:				200px;
}

/*
	ENTER BUTTON
*/

a.enter {
	position:					absolute;
	bottom:						0px;
	right:						0px;
	display:						inline-block;
	width:						94px;
	height:						32px;
	background-image:			url('./img/enter.png');
	background-repeat:		no-repeat;
	text-indent:				-1000px;
	overflow:					hidden;
}

a.close {
	position:					absolute;
	top:							50px;
	right:						0px;
	display:						inline-block;
	width:						25px;
	height:						25px;
	background-image:			url('./img/close.png');
	background-repeat:		no-repeat;
	text-indent:				-1000px;
	text-decoration:			none !important;
	overflow:					hidden;
}

/*
	BOX CONTAINER
*/

.whitebox {
	display:						inline-block;
	padding:						8px;
	background-color:			#FFFFFF;
	-webkit-box-shadow:		2px 2px 5px 3px rgba(0, 0, 0, 0.1);     
	box-shadow:					2px 2px 5px 3px rgba(0, 0, 0, 0.1);
}

/*
	SOCIAL BAR 
*/

.socialbar {
	margin:						10px 0px 0px 5px;
}

.socialbar .ra1-pw_size_medium {
	display:						inline-block;
}

.socialbar .vevo {
	display:						inline-block;
	width:						25px;
	height:						24px;
	margin-left:				-5px;
	background-image:			url('./img/vevo.png');
	background-repeat:		no-repeat;
	text-indent:				-1000px;
	overflow:					hidden;
}

/*
	FAN WALL
*/

#fanwall {
	display:						none;
	width:						880px;
	height:						540px;
	padding:						20px;
}

/*
	RE-USABLES
*/

.fullwidth {
	width:						960px;
	margin-left:				auto;
	margin-right:				auto;
}

.left {
	float:						left;
}

.right {
	float:						right;
}

img.left {
	margin:						0px 20px 20px 0px;
}

img.right {
	margin:						0px 0px 20px 20px;
}

.clear {
	height:						0px;
	margin:						0px;
	padding:						0px;
	clear:						both;
}

.hide {
	display:						none !important;
}

/*
	ELEMENTS
*/

* {
	-webkit-box-sizing:		border-box;
	-moz-box-sizing:			border-box;
	box-sizing:					border-box;
}

object, embed {
	max-width:					600px;
	max-height:					374px;
}

/* ELEMENT DEFINITIONS */

a:link, a:visited {
	color: 						#CCCCCC;
	text-decoration: 			underline;
}

a:hover {
	color:						#999999;
	text-decoration: 			underline;
}

a:focus, a:active {
	outline:						none;
}

hr {
	height:						0px;
	color:						#FFFFFF;
	border:						none;
	border-bottom:				1px solid #FFFFFF;
}

img {
	border:						0px;
}