/*------------------------------------------------------------------
Client: Battle Blasters
Date created: 07/01/2010
Version: 1
Author: Adam Foster
Author URI: http://codefor.com/
-------------------------------------------------------------------*/ 

/* RESET STYLES ---------------------------------------------------*/

/* CSS RESET */

* { margin: 0;padding: 0;text-indent: 0;border:0;outline:0;list-style:none;font-size:100%;border-collapse:collapse;border-spacing:0;word-wrap:break-word;quotes:none;background:transparent;vertical-align: baseline;font-weight: normal;}
:focus, a { -moz-outline-style: none;outline: none !important;}
.clearfix { display: inline-block;width: 100%;}
	.clearfix:after { content: ".";display: block;height: 0;clear: both;visibility: hidden;} 


/* GENERAL STYLES ---------------------------------------------------*/

h1 {}
h2 { color: #00ffed;font-size: 16px;line-height: 18px;text-transform: uppercase;background: url(../img/bg-headers.gif) no-repeat bottom left;padding-bottom: 9px;margin-bottom: 10px;}
	h2 span { background: url(../img/bg-headers-txt.gif) no-repeat; height: 12px; display: block; width: 151px; text-indent: -9999px; overflow: hidden; }
h3, h4, h5, h6 { padding: 0 0 12px 0;font-weight: bold;}
p { padding: 0 0 12px 0;margin: 0;font-size: 11px;line-height: 13px;}
img { margin: 0;padding: 0;border: 0 none;}
strong { color: #fff;}
em { }
input, textarea { font-family: Arial, Helvetica, sans-serif;font-size:11px;color: blue;}
ul { padding: 0 0 12px 0;margin: 0;font-size: 11px;}
	ul li { margin: 0;list-style-type: none;line-height: 13px;}
dl { padding: 0;margin: 0;font-size: 11px;line-height: 13px;}
	dt { display: inline;font-weight: bold;float: left;clear:both;}
	dd { margin: 0;padding: 0;}
small { margin: 0;padding: 0 0 10px;display: inline-block;}
abbr, acronym { cursor: help;}
q { font-style: italic;}
	q:before { content: no-open-quote;content: "";}
	q:after { content: no-close-quote;content: "";}
a { color: #00ffed;text-decoration: none;}
	a:hover { text-decoration: underline;}


/* GOLBAL STYLES ---------------------------------------------------*/ 

body { font-family: Arial, Helvetica, sans-serif;font-size:11px;line-height: 13px;color: #406464;background: #0b0f0f url(../img/bg-body.gif);}
	#header { background: #000 url(../img/background.jpg) no-repeat top;height: 514px;width: 100%;min-width: 993px;}
		#logo { margin: 0 auto;width: 350px;padding: 25px;}
			#logo a { background: url(../img/logo.png);width: 350px;height: 116px;display: block;text-indent: -9999px;overflow: hidden;}
	#contentHolder { width: 100%;min-width: 993px;background: url(../img/bg-body.jpg) repeat-x top;padding-top: 31px;}
		#content { width: 993px;margin: 0 auto;}
	#footer { background: url(../img/background-footer.gif) no-repeat top left;width: 911px;margin: 15px auto 0;height: 90px;}
		#footer a { color: #fff;}
		#footer span { color: #00ffe9;}
		.lgg { float: left;background: url(../img/logo-little-guy-games.png);width: 130px;height: 45px;text-indent: -9999px;overflow: hidden;display: block;margin: 12px;}
		.lggtext { float: left;margin: 32px 0 0 18px;}
		.fi { float: right;margin: 28px 16px 0 0;background: url(../img/logo-fully-illustrated.png) no-repeat right;padding: 4px 36px 4px 0;}
		.omdc { float: left; text-indent: -9999px;overflow: hidden;display: block;margin: 9px; background: url(../img/logo-ontario.jpg); width: 120px; height: 53px; }
		.telefilm { float: left; text-indent: -9999px;overflow: hidden;display: block;margin: 16px 20px 0 27px; background: url(../img/logo-telefilm.jpg); width: 100px; height: 42px; }
			
/* COMMON STYLES ---------------------------------------------------*/

.left { float: left!important}
.right { float: right!important}
.clear { clear: both!important;}
.end { border: none!important;margin-right: 0!important;background: 0 none!important;}
.last { margin-bottom: 0!important;}
.row { width: 927px;padding: 0 33px;position: relative;}
	.rowmid { width: 993px;padding: 0;}
.col { width: 299px;margin: 0 5px;float: left;}
.split { background: url(../img/bg-split.png) no-repeat bottom left;height: 402px;float: left;}
	.split h2 { width: 444px;margin-left: 37px;}
	.videosplit { width: 488px;}
	.imgsplit { background-position: right bottom;width: 478px;}
		.imgsplit h2 { width: 455px;margin-left: 10px;}
.btn { background: url(../img/bg-buttons.png);height: 24px;width: 266px;display: block;text-indent: -9999px;overflow: hidden;}
.box { background: url(../img/bg-box-mid.gif);padding: 5px 16px 10px 17px;zoom: 1;}	
.boxtop, .boxbot { display: block;background: url(../img/bg-box.gif);height: 10px;width: 299px;}
	.boxbot { background-position: 0 0;}
	.boxtop { background-position: 0 -10px;}


/* PAGE STYLES ---------------------------------------------------*/ 

.toprow { background: url(../img/bg-buy.png) no-repeat top;min-height: 224px;}
	.welcomecol, .newscol { padding-top: 15px;}
	.buycol { position: relative; }
		.appStore { background: url(../img/bg-app-store.png) no-repeat 0 -108px;height: 102px;width: 224px;display: block;text-indent: -9999px;overflow: hidden;margin: 0 auto;}
		.appStore:hover { background-position: 0 0; }
	#news { height: 143px;overflow: auto;}
		#news p { padding-right: 20px;}
			#news p strong{color:#00ffe9;display:block; padding-bottom: 4px;}
.mediarow {}
	.video { margin: 30px 0 0 55px;background: #000;padding: 20px 0;width: 400px;}
	.splitimg { position: relative;}
		.character { background: url(../img/bg-character-lady.png);height: 312px;width: 183px;display: block;position: absolute;top: 50px;right: -11px;}
		#screens { width: 350px;height: 325px;padding: 18px 40px;}
			#screens li { float: left;position: relative;padding-right: 5px;}
				#screens li a { position: relative;display: block;padding: 7px;}
					#screens li a:hover img { border-color: #ffffff;}
					#screens li a:hover .screenin { background: url(../img/bg-screen-over.png);height: 153px;width: 107px;display: block;position: absolute;top: 0px;left: 0px; cursor: pointer;}
					#screens li img { border: 1px solid #2f3f3c; cursor: pointer; }
.botrow {} 
	.twittercol {}
		.twittercol #twitter_update_list { min-height: 56px;}
			#twitter_update_list a { font-size: 100%!important; }
				#twitter_update_list span a { display: inline; color: #406464; padding: 0; }
					#twitter_update_list span a:hover { color:#00ffed; }
		.follow { background-position: 0px -136px;}
			.follow:hover { background-position: 0px -170px;}
	.facecol { position: relative;}
		.faceback { background: url(../img/bg-face-book.jpg) no-repeat bottom right;position: absolute;right: 7px;top: 34px;width: 217px;height: 117px;}
		.facechar { background: url(../img/bg-character.png);height: 123px;width: 141px;display: block;position: absolute;top: 29px;right: 7px;}
		.facecol p { min-height: 56px;position: relative;padding-right: 110px;}
		.join { background-position: 0px -68px;position: relative;width: 200px;}
			.join:hover { background-position: 0px -102px;}
	.emailcol {}
		.emailcol p { min-height: 52px;}
		#searchbox { position: relative;width: 258px;height: 28px;}
			#email { border: 1px solid #11edfa;width: 179px;color: #406464;font: Arial, Helvetica, sans-serif;padding: 4px 10px;height: 14px;position: absolute;top: 0;left: 0;}
			#sign-button { height: 24px;width: 57px;background: url(../img/bg-buttons.png);cursor: pointer;font-size: 0;color: #00ffe9;text-indent: -9999px;position: absolute;top: 0;right: 0;text-align: left;}
				#sign-button:hover { background-position: 0 -34px;}
		#msg { color: #11edfa; }
		#error { color: red; display: block; }

h2 {}
	.welcomeTxt {}
	.newsTxt { background-position: 0 -22px; }
	.trailerTxt { background-position: 0 -44px; }
	.screenshotsTxt { background-position: 0 -65px; }
	.twitterTxt { background-position: 0 -87px; }
	.facebookTxt { background-position: 0 -108px; }
	.emailTxt { background-position: 0 -129px; }

/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {position: absolute;top: 0;left: 0;z-index: 90;width: 100%;height: 500px;}
#jquery-lightbox {position: absolute;top: 0;left: 0;width: 100%;z-index: 100;text-align: center;line-height: 0;}
#jquery-lightbox a img { border: none;}
#lightbox-container-image-box {position: relative;background-color: #fff;width: 250px;height: 250px;margin: 0 auto;}
#lightbox-container-image { padding: 10px;}
#lightbox-loading {position: absolute;top: 40%;left: 0%;height: 25%;width: 100%;text-align: center;line-height: 0;}
#lightbox-nav {position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index: 10;}
#lightbox-container-image-box > #lightbox-nav { left: 0;}
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {width: 49%;height: 100%;zoom: 1;display: block;}
#lightbox-nav-btnPrev { left: 0;float: left;}
#lightbox-nav-btnNext { right: 0;float: right;}
#lightbox-container-image-data-box {font: 10px Verdana, Helvetica, sans-serif;background-color: #fff;margin: 0 auto;line-height: 1.4em;overflow: auto;width: 100%;padding: 0 10px 0;}
#lightbox-container-image-data {padding: 0 10px;color: #666;}
#lightbox-container-image-data #lightbox-image-details { width: 70%;float: left;text-align: left;}	
#lightbox-image-details-caption { font-weight: bold;}
#lightbox-image-details-currentNumber {display: block;clear: left;padding-top: 3px;}			
#lightbox-secNav-btnClose {width: 66px;float: right;padding-bottom: 0.7em;}

/* SCROLLER ------------------------------------------------------*/ 

.jScrollPaneContainer {position: relative;overflow: hidden;z-index: 1;}
.jScrollPaneTrack {position: absolute;cursor: pointer;right: 0;top: 0;height: 100%;background: #001a18;}
.jScrollPaneDrag {position: absolute;background: #00ffe9;cursor: pointer;overflow: hidden;}
.jScrollPaneDragTop {position: absolute;top: 0;left: 0;overflow: hidden;}
.jScrollPaneDragBottom {position: absolute;bottom: 0;left: 0;overflow: hidden;}
a.jScrollArrowUp {display: block;position: absolute;z-index: 1;top: 0;right: 0;text-indent: -2000px;overflow: hidden;background: url(../img/bg-buttons.png) -96px 0;height: 19px;}
a.jScrollArrowUp:hover { background-position: -96px -34px;}
a.jScrollArrowDown {display: block;position: absolute;z-index: 1;bottom: 0;right: 0;text-indent: -2000px;overflow: hidden;background: url(../img/bg-buttons.png) no-repeat -68px 1px;height: 19px;}
a.jScrollArrowDown:hover { background-position: -68px -33px;}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {/*background-color: #f00;*/}