/* STYLESHEET FOR MOERO DOWNHILL NIGHT

Page url: http://www.jastusa.com/moero/moero1.html
Author: Thomas Soubrier for JAST USA
Author url: http://www.tomakun.com

JAST USA 2009, All Rights Reserved

*/


/* --- RESET --- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/*--- STRUCTURE ---*/

body { background: #1C1C1C url('../img/moero_bg.jpg') repeat; font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; }

.page { width: 980px; margin: 0 auto; }

#header { background-color: #111111; height: 130px; border-bottom: 3px solid #363636; margin-bottom: 20px; }

#content { position: relative; padding: 0; }

#video { float: right; }

.description { color: #FFF; font-weight: normal; font-size: 20px; line-height: 30px; width: 650px; margin-bottom: 20px; }

.preorder { width: 300px; text-align: center; position: relative; left: -10px; }

#cg { margin-bottom: 50px; clear: both; padding-top: 65px; }
#cg ul { margin-bottom: 15px; }
#cg ul li { float: left; margin: 0;	padding: 0;	opacity: 0.8; }
#cg ul li:hover { opacity: 1; }

#footer { clear: left; background-color: #111111; padding: 20px 0; border-top: 3px solid #363636; margin-top: 40px; }
#footer h4 { color: #FFF; font-size: 20px; margin-bottom: 8px; }
#footer p {	color: #ddd; margin-bottom: 40px; }
#footer p a { color: #ffa9e3; text-decoration: none; font-size: 18px;}
#footer p a:hover { text-decoration: underline; }
#footer span { color: #555555; font-size: 12px; line-height: 25px; position: relative; top: -7px;}


/*-- CHARACTERS --*/

.characters { 
	margin-top: 150px;
	margin-bottom: 50px;
	}

ul.tabs { float: right; }
ul.tabs li { margin-bottom: 10px; }
ul.tabs li a { display: block; width: 300px; height: 70px; text-indent: -2000em;}	
ul.tabs li.kei a { background: url('../img/keibtn.jpg'); }
li.reiko a { background: url('../img/reikobtn.jpg'); }
li.rinka a { background: url('../img/rinkabtn.jpg'); }
li.tomomi a { background: url('../img/tomomibtn.jpg'); }
li.akito a { background: url('../img/akitobtn.jpg'); }

	
.tab_content { 
	background-color: #FFF;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	width: 620px;
	height: 360px;
	padding: 30px 30px 0 0;
	position: relative;
	}

.tab_content h3 { 
	font-size: 28px;
	text-transform: uppercase;
	margin-bottom: 20px;
	text-align: right;
	}
	
.tab_content p {
	font-size: 15px; line-height: 24px; color: #353535;
	margin-left: 250px;
	margin-bottom: 20px;
	text-align: right;
	}
	
.tab_content div.fullname {
	overflow: hidden;
	position: absolute;
	width: 650px;
	bottom: -10px;
	right: 0;
	z-index: 1;
	}

.tab_content div.fullname span { 
	text-transform: uppercase;
	font-size: 100px;
	font-weight: bold;
	/*text-align: right;*/
	display: block;
	width: 900px;
	position: relative;
	}
	
.standing { 
	position: absolute;
	bottom: 0;
	z-index: 5;
	}
	
#rinka .standing { 
	background: url('../img/rinka.png') 0 0 no-repeat;
	height: 534px;
	width: 315px;
	left: -45px;	
	}
	
#rinka:hover .standing { 
	background: url('../img/rinka.png') -315px 0 no-repeat;
	width: 325px;
	}
	
#rinka h3 {	color: #6a3f94;	}
#rinka span { color: #dfd4ea; right: 130px; }

#kei .standing { 
	background: url('../img/kei.png') 0 0 no-repeat;
	height: 497px;
	width: 238px;
	left: 30px;	
	}
	
#kei:hover .standing { 
	background: url('../img/kei.png') -238px 0 no-repeat;
	}
	
#kei h3 { color: #8f274c; }
#kei span { color: #e9d4db; right: 85px; }
	
#reiko .standing { 
	background: url('../img/reiko.png') 0 0 no-repeat;
	height: 545px;
	width: 327px;
	}
	
#reiko:hover .standing { 
	background: url('../img/reiko.png') -328px 0 no-repeat;
	width: 380px;
	}
	
#reiko h3 { color: #286e9e; }
#reiko p { margin-left: 275px;}
#reiko span { color: #d3e1ea; right: 225px; }

#tomomi .standing { 
	background: url('../img/tomomi.png') 0 0 no-repeat;
	height: 532px;
	width: 225px;
	left: 30px;
	}
	
#tomomi:hover .standing { 
	background: url('../img/tomomi.png') -296px 0 no-repeat;
	}
	
#tomomi h3 { color: #4886a3; }
#tomomi span { color: #dae7ed; right: 205px; }

#akito { 
	background: url(../img/akito.jpg) 0 0 no-repeat;
	padding: ;
	}

#akito p { 
	width: 500px;
	text-align: center;
	margin-left: 85px;
	color: #EEE;
	}

#akito h3 { color: #EEE; text-align: center; position: relative; left: 20px; }


/*--- TYPOGRAPHY & LINKS ---*/

h1 { background: url('../img/moero2_logo.jpg'); width: 675px; height: 130px; text-indent: -9000em; margin: 0 auto; }

h2 { font-size: 36px; color: #bf8da2; margin-bottom: 20px; }

.preorder a.btn { display: block; width: 295px; height: 60px; text-indent: -9000em; background: url('../img/preorderbtn.gif') 0 0; }
.preorder a.btn:hover { background-position: 0 -60px; }

.catch { 
	color: #FFF;
	margin-top: 50px;
	font-style: italic;
	font-size: 30px;
	line-height: 45px;
	}

#footer .preorder { float: right; }
#footer .preorder a.btn { display: block; width: 295px; height: 60px; text-indent: -9000em; background: url('../img/preorderbtn_foot.gif') 0 0 no-repeat; }

#footer .preorder a.btn:hover { background-position: 0 -61px; }

#cg p { 
	clear: both;
	color: #DDD;
	font-size: 12px;
	font-style: italic;
	padding-top: 10px;
	}

#features h3 { 
	color: #DDD;
	margin: 0 20px 25px;
	font-size: 20px;
	}

#features p { 
	color: #DDD;
	width: 280px;
	float: left;
	margin: 0 23px;
	line-height: 24px;
	font-size: 15px;
	font-style: italic;
	padding-top: 220px;
}

#features p.gameplay1 { background: url('../img/gameplay1.jpg') 0 0 no-repeat; }
	
#features p.gameplay2 { background: url('../img/gameplay2.jpg') 0 0 no-repeat; }

#features p.gameplay3 { background: url('../img/gameplay3.jpg') 0 0 no-repeat; }

span a { color: #2864c7; font-size: 12px; text-decoration: none; }
/*.preorder:hover span a { color: #FFF; }*/


/*--- COMMON ---*/

.hidden { display: none; }
.clearfloat { clear: both; }