/*
**********************************************************
**  Document Type:  Cascading Style Sheet               **
**                                                      **
**  Document Name:  main.css                            **
**                                                      **
**  Created By:     Travis Grawey, Web Designer         **
**                  travis.grawey@gmail.com             **
**                                                      **
**  Created For:    Gaijin Games                        **
**                  http://bittripgame.com              **
**                  css/main.css                        **
**                                                      **
**  Release Date:   March 1, 2010                       **
**********************************************************
*/



body {
	background: #000 url(../images/bg-cv-stripes.png) center 689px no-repeat;
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	text-align: left;
}


.brClear {
	clear: both;
	height: 0;
	margin: 0;
	font-size: 1px;
	line-height: 0px;
}


/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

a:link, a:visited {
	color: #39A5A9;
	text-decoration: none;
}

a:hover {
	color: #CC0000;
	text-decoration: none;
}

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

.mystery, 
.mystery a {
	cursor: help;
}
/* **************************************************** */



/*
**********************************************************
**  main layout styles                                  **
**********************************************************
*/
#bg {
	background: transparent url(../images/bg-blk-beats.png) 0 -40px repeat-x;
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

#page-wrapper {
	margin: 0 auto;
	position: relative;
	width: 1000px;
	z-index: 100;
}

#home #content-wrapper, 
#details #content-wrapper {
	background: url(../images/home-bg-content.png) repeat-x;
	margin: 0 auto;
	margin-top: 9px;
	margin-bottom: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 910px;
	
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

#details {background:#000;}
#details #content-wrapper {background: #111 url(../images/details-bg-content.png) repeat-x;}
#details #header {padding-top:60px;}

#footer-wrapper {
	background: #000;
}

#header {}

#footer {
	margin: 0 auto;
	width: 910px;
}

	/*
	Sticky Footer by Ryan Fait
	http://ryanfait.com/
	*/
	* {
		margin: 0;
	}
	html, body {
		height: 100%;
	}
	
	#page-wrapper {
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -100px;
	}
	
	#footer, .push {
		height: 100px;
	}
	/*
	|
	*/

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



/*
**********************************************************
**  header styles                                       **
**********************************************************
*/
#header {
	padding-top: 90px;
	text-align: center;
}

#header ol, #header li {
	margin:0; padding:0;
}

#header ol {
	margin: 0 auto;
	margin-top: 10px;
	width: 910px;
}

#header li {
	display: inline;
	list-style: none;
	margin-right: 15px;
	margin-left: 15px;
	vertical-align: top;
}

#header li img {
	border: 1px dotted #666;
}

#header .tagline {
	margin-top: 5px;
	margin-bottom: 5px;
}
/* **************************************************** */



/*
**********************************************************
**  content styles                                      **
**********************************************************
*/
h2 {
	font-size: 0px;
	line-height: 0;
	margin:0; padding:0;
}

#h2-Updates {
	background: url(../images/h2-updates.png) no-repeat;
	display: block;
	height: 16px;
	margin-top: 36px;
	margin-bottom: 14px;
	margin-left: 30px;
	width: 134px;
}

a.link-pink {color:#DC6AA5;}
a.link-green {color:#3AA6A9;}
a.link-orange {color:#FCA531;}
a.link-purple {color:#39367B;}

.border-pink {border:4px solid #DC6AA5;} /* VOID */
.border-green {border:4px solid #3AA6A9;} /* BEAT */
.border-orange {border:4px solid #FCA531;} /* CORE */
.border-purple {border:4px solid #39367B;} /* RUNNER */

#bittrip-cycle {
	background: #ccc;
	display: block;
	height: 360px;
	margin: 0 auto;
	width: 870px;
	
}

#bittrip-cycle ul {
	margin:0; padding:0;
	margin: 0 auto;
	width: 870px;
	
	display: none;
}

#bittrip-cycle li {
	display: block;
	float: left;
	height: 360px;
	list-style: none;
	margin:0; padding:0;
	position: relative;
	width: 145px;
}

#bittrip-cycle li a {
	display: block;
	padding-top: 80px;
}

#bittrip-cycle .beat {background:url(../images/bg-panel-beat.png) no-repeat;}
#bittrip-cycle .core {background:url(../images/bg-panel-core.png) no-repeat;}
#bittrip-cycle .void {background:url(../images/bg-panel-void.png) no-repeat;}
#bittrip-cycle .runner {background:url(../images/bg-panel-runner.png) no-repeat;}
#bittrip-cycle .fate {background:url(../images/bg-panel-fate.png) no-repeat;}
#bittrip-cycle .mystery-2 {background:url(../images/bg-panel-mystery2.png) no-repeat;}

#bittrip-cycle li:hover {
	 border: 4px solid;
	 border-bottom-width: 2px;
	 margin: -4px;
	 z-index: 999;
}

#bittrip-cycle .beat:hover {background-color:#F7D801; border-color:#F7D801; text-shadow:1px 1px #333;} /* yellow */
#bittrip-cycle .core:hover {background-color:#FCA531; border-color:#FCA531; text-shadow:1px 1px #333;} /* orange */
#bittrip-cycle .void:hover {background-color:#3AA6A9; border-color:#3AA6A9; text-shadow:1px 1px #333;} /* teal */
#bittrip-cycle .runner:hover {background-color:#DC6AA5; border-color:#DC6AA5; text-shadow:1px 1px #666;} /* pink */
#bittrip-cycle .fate:hover {background-color:#39367B; border-color:#39367B; text-shadow:1px 1px #999;} /* purple */
#bittrip-cycle .mystery-2:hover {background-color:#F7D801; border-color:#F7D801;} /* yellow */

#bittrip-cycle .mystery a {background:url(../images/title-mystery.png) no-repeat center 30px;}
#bittrip-cycle .beat a {background:url(../images/title-beat.png) no-repeat center 30px;}
#bittrip-cycle .core a {background:url(../images/title-core.png) no-repeat center 30px;}
#bittrip-cycle .void a {background:url(../images/title-void.png) no-repeat center 30px;}
#bittrip-cycle .runner a {background:url(../images/title-runner.png) no-repeat center 30px;}
#bittrip-cycle .fate a {background:url(../images/title-fate.png) no-repeat center 30px;}

#bittrip-cycle .beat:hover span {color:#F7D801;} /* yellow */
#bittrip-cycle .core:hover span {color:#FCA531;} /* orange */
#bittrip-cycle .void:hover span {color:#3AA6A9;} /* teal */
#bittrip-cycle .runner:hover span {color:#DC6AA5;} /* pink */
#bittrip-cycle .fate:hover span {color:#39367B;} /* purple */
#bittrip-cycle .mystery-2:hover span {color:#F7D801;} /* yellow */

#bittrip-cycle img {
	padding-top: 15px;
	padding-bottom: 10px;
}

#bittrip-cycle span {
	color: #fff;
	display: block;
	line-height: 14px;
	margin-bottom: 10px;
	padding-right: 15px;
	padding-left: 15px;
}

#bittrip-cycle .enter {
	font-size: 10px;
	letter-spacing: 1px;
	margin-top: -5px;
	text-transform: uppercase;
}

.module {
	float: left;
	padding-bottom: 50px;
	position: relative;
}

#feeds {
	background:url(../images/bg-feeds.png) repeat-x;
	float: left;
	line-height: 22px;
	margin-left: 20px;
	width: 570px;
	
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

#feeds ul {margin:0; padding:0;}
#feeds li {list-style:none; margin:0; padding:0;}

.updates-blog, .updates-twitter {
	padding: 10px;
	width: 250px;
}

.updates-blog {margin-right:15px;}
.updates-twitter {padding-left:25px;}

.module.updates-blog #feed-gaijingames div {
	background: url(../images/divider-horz.png) bottom no-repeat;
	padding-top: 5px;
	padding-bottom: 10px;
}

.module.updates-twitter {
	background: url(../images/divider-vert.png) left top no-repeat;
}

#feeds li, .module.updates-twitter li {
	background: url(../images/divider-horz.png) bottom no-repeat;
	padding-top: 5px;
	padding-bottom: 10px;
}

.viewmore, .viewmore a {
	color: #999;
	font-size: 11px;
}

.module.links {
	font-size: 14px;
	margin-left: 34px;
	padding-top: 10px;
	position: relative;
	width: 270px;
}

.module.links ul {
	margin:0; padding:0;
	padding-top: 7px;
	padding-left: 9px;
}

.module.links li {
	list-style: none;
	margin:0; padding:0;
	margin-bottom: 10px;
}

.banners {
	margin-top: 90px;
}

#cv {
	position: absolute;
	right: -27px;
	top: -34px;
}

.soundtracks {
	padding-top: 20px;
}

.soundtracks #screens-top {
	background: url(../images/bg-soundtracks-top.png) no-repeat;
	height: 7px;
	position: absolute;
	top: -8px;
	width: 960px;
}
/* **************************************************** */



/*
**********************************************************
**  #details styles                                     **
**********************************************************
*/
.hero {
	margin: 0 auto;
	margin-bottom: 20px;
	position: relative;
	width: 870px;
}

.hero .box-art.btf {
	bottom: 5px;
	position: absolute;
	right: -71px;
}

.module.game-video {
	margin-left: 20px;
}

.game-video object, 
.game-video embed {z-index:5;}

.module.game-details {
	color: #999;
	margin-left: 20px;
	width: 270px;
}

.module.game-details ul {
	border-bottom: 1px dotted #333;
	margin:0; padding:0;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.module.game-details li {
	background: url(../images/bg-li.png) left 5px no-repeat;
	line-height: 22px;
	list-style: none;
	margin:0; padding:0;
	padding-left: 16px;
}

#screens {
	background: #202020;
	border-top: 1px solid #111;
	border-bottom: 1px solid #111;
	display: block;
	margin: 0 auto;
	margin-top: -30px;
	margin-bottom: -1px;
	position: relative;
	text-align: center;
	width: 960px;
}

#screens-top {
	background: url(../images/bg-screens-top.png) no-repeat;
	height: 7px;
	left: 0;
	position: absolute;
	top: -8px;
	width: 960px;
}

#screens ul {
	margin:0; padding:0;
	padding-top: 25px;
	padding-bottom: 21px;
}

#screens li {
	display: inline;
	list-style: none;
	margin:0; padding:0;
	margin-right: 20px;
	margin-left: 20px;
}
/* **************************************************** */



/*
**********************************************************
**  footer styles                                       **
**********************************************************
*/
#footer {
	color: #fff;
	font-size: 12px;
	line-height: 80px;
	padding-top: 15px;
	padding-left: 20px;
}

#footer span {
	display: inline;
	float: left;
}

#footer ul {
	float: right;
	margin:0; padding:0;
}

#footer li {
	display: inline;
	list-style: none;
	margin:0; padding:0;
	margin-right: 20px;
	margin-left: 20px;
	vertical-align: middle;
}
/* **************************************************** */



/*
**********************************************************
**  form styles                                         **
**********************************************************
*/
/* **************************************************** */