/* STYLE SHEET FOR [x] WEB SITE
Created by Author Name
http://kmp.co.uk
Version Number: 1.0

/* ================ TABLE OF CONTENTS ======================

1. BASE
	1.1. Typography
	1.2. Links
	1.3. Tables
2. HEADER
	2.1. H1 Logo Replacement
	2.2. Top Level Action Navigation
	2.3. Search Form
3. NAVIGATION
	3.1. Primary Navigation
	3.2. Secondary Navigation
	3.3. Footer Navigation
	3.4. Breadcrumbs
	3.5. Paging
4. FOOTER BLOCK
5. CONTENT
	5.1. Zone-Home Content
	5.2. Modal Window
	5.3. Quicktime Window
	5.4. Form
6. SIDEBAR COMPONENTS

/* =============== NOTES =======================*/


/* ====================
COLOUR REFERENCE SHEET
-----------------------

Page Background: #ffffff;
Primary Font: #000000;
Secondary Font: #666666;
Primary Link: #0000FF;
Primary Link Hover: #0000FF;
Secondary Link: #FF0000;
Secondary Link Hover: #FF0000;

Borders, Headlines, etc, 

===================== */

@import url('reset.css');

/*=======================
~1. BASE
=========================*/

html {
	position:relative;
	height:100%;
	overflow:hidden;
}

body {
	height:100%;
	background-color:#ffffff;
	color:#000;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:62.5%;
	line-height:1.5;
	overflow:hidden;
}


/*
#bg {
	height:200% !important;
	left:-50%;
	position:absolute;
	top:-50%;
	width:200% !important;
	z-index:1;
}

#bg #bg-wrap {
	display:table;
	height:100%;
	padding:0;
	width:100%;
}
#bg #img-holder {
	display:table-cell !important;
	height:100%;
	text-align:center !important;
	vertical-align:middle !important;
	width:100%;
}
#bg #img-holder img {
	margin:0 auto;
	min-height:50%;
	min-width:50%;
} */

#wrapper{  
	clear:both;
	position:relative;
	top:0;
	z-index:4;
	width:100%;
	height:100%;
	min-height:100%;
}

#stars-container {
	position:relative;
	top:0;
	left:0;
	z-index:2;
}
#sky-container {
	position:relative;
	top:0;
	left:0;
	z-index:1;
}

.sky1 {
	width:100%;
	height:299px;
	background:url(../img/sky1.jpg) repeat-x;
}
.sky2 {
	width:100%;
	height:299px;
	background:url(../img/sky2.jpg) repeat-x;
}
.stars1 {
	width:100%;
	height:299px;
	background:url(../img/stars1.png) -50% 0 repeat-x;
}
.stars2 {
	width:100%;
	height:299px;
	background:url(../img/stars2.png) 50% 0 repeat-x;
}

.header {
	position:absolute;
	top:20;
	left:20;
	z-index:5;
	width:305px;
}

.content {
	position:absolute;
	bottom:-100px;
	left:0;
	z-index:4;
	height:100%;
	width:100%;
	background:url(../img/snow.png) left top repeat-x;
}
#racer {
	width:535px;
	margin:0 auto;	
}

#racer div {
	position:absolute; 
	top:50%; 
	margin-top:-245px;
	width:535px;
	height:489px;
	background:url(../img/racer.png) no-repeat;
}
/*
@-webkit-keyframes pop {
	0%	{ -webkit-transform: scale(1); }
	25%	{ -webkit-transform: opacity(0); }
	50%	{  -webkit-transform: scale(4.5); opacity:0 }
	60%	{  -webkit-transform: scale(0); opacity:0 }
	70%	{  -webkit-transform: scale(0); -webkit-transform: opacity(1); }
	100%{  -webkit-transform: scale(1);  }
}
#racer-img {
  -webkit-transform: scale(1);
}
#racer-img.popping {
  -webkit-transform: scale(1);
  -webkit-animation-name: pop;
  -webkit-animation-duration: 3000ms;
  -webkit-animation-timing-function: ease-in-out;
}
*/

/*@-webkit-keyframes pop {
  0%   { -webkit-transform: scale(0.5); }
  70%  { -webkit-transform: scale(2.0); }
  100% { -webkit-transform: scale(1.0); }
}
#racer-img {
  -webkit-transform: scale(0.5);
}
#racer-img.popping {
  -webkit-transform: scale(1.0);
  -webkit-animation-name: pop;
  -webkit-animation-duration: 1000ms;
  -webkit-animation-timing-function: ease-in-out;
}

*/
#download {
	position:absolute;
	bottom:50px;
	left:10px;
	width:131px;
	height:290px;
	background:url(../img/download-back.png) no-repeat;
	z-index:5;
}
#download a {
	display:block;
	margin:74px 0 0 18px;
	width:108px;
	height:116px;
	background:url(../img/download.png) no-repeat;
	text-indent:-9999px;
}
#scoreboard {
	position:absolute;
	top:10px;
	right:0;
	width:310px;
	background:url(../img/sign-top.png) right top no-repeat;
	z-index:5;
}
#scoreboard ul {
	margin-top:46px;
	width:250px;
}

#scoreboard ul li {
	list-style:none;
	height:51px;
	margin-left:27px;
	background:url(../img/blank-small.png) no-repeat;
	color:#603813;
	cursor:pointer;
}
#scoreboard ul li.download {
	width:208px;
	height:62px;
	margin-left:25px;
	background:url(../img/download-menu2.png) no-repeat;
	text-indent:-9999px;
}
#scoreboard ul li.high-scores {
	background:url(../img/highscores-small.png) no-repeat;
	text-indent:-9999px;
}
#scoreboard ul li.see-video {
	background:url(../img/video-small.png) no-repeat;
	text-indent:-9999px;
}
#scoreboard ul li.follow {
	background:url(../img/twitter-small.png) no-repeat;
	text-indent:-9999px;
}
#scoreboard ul li.visit-us{
	background:url(../img/visit-small.png) no-repeat;
	text-indent:-9999px;
}
#scoreboard ul li.facebook{
	background:url(../img/facebook-small.png) no-repeat;
	text-indent:-9999px;
}
#scoreboard ul li a {
	display:block;
	width:208px;
	height:52px;
}
#scoreboard ul li.visit-us a, #scoreboard ul li.follow a, #scoreboard ul li.see-video a {
	text-indent:-9999px;
}

#background	{ 
	position:absolute; 
	top:0; 
	left:0; 
	z-index:1; 
	width:100%; 
	min-height:768px; 
	min-width:1024px; 
}

#modal .inner {
	position:absolute;
	top:160px;
	left:80px;
}

.skipnav {
	position: absolute;
	top:0;
	left: -999px;
	display: block;
	padding: 10px 20px;
}
.skipnav:focus { 
	left: 0; 
}

/*-----------------------
~1.1. TYPOGRAPHY
-----------------------*/

h1, h2, h3, h4 {
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
	line-height:1em;
}

h1 {
	font-size: 2.5em;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.4em;
}
		
h4 {
	font-size:1.2em;
	text-transform:uppercase;
}

p {
	padding-bottom: 1em;
	font-size:1.2em;
}

.clear{
	clear:both;
}


/*-----------------------
~1.2. Links
-------------------------*/

a {
	color:#603813;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:1.2em;
	text-decoration:none;
}

a:link {
}

a:active {
}

a:hover {
	text-decoration:underline;
}

a:visited {
}

a:focus {
}

h1.logo a {
	border:none;
}

/*-----------------------
~1.3. STANDARD TABLES
-----------------------*/


/*=======================
~2. HEADER
=========================*/

.header-holding {
	position:absolute;
	z-index:2;
}

/*-----------------------
~2.1. H1 Logo Replacement
-------------------------*/

.logo { 
	letter-spacing : -1000em;
} 

/* Just for Opera, but hide from MacIE */ 
/*\*/html>body .logo { 
	text-indent : -999em; 
	letter-spacing : normal; 
	overflow : hidden;
} 
/* End of hack */ 

h1.logo, h2.logo {
	float:left;
	width:366px;
	height:171px;
	border:none;
	background: url(../img/logo-new.png) top left no-repeat;
	margin:20px;
}

/* Set width & height to image dimensions */
h1.logo a, h2.logo a {
	display:block;
	width:366px;
	height:171px;
}

/*-----------------------
~2.2. Action Navigation
-------------------------*/

/*-----------------------
~2.3. Search Form
-------------------------*/

/*======================= 
~3. NAVIGATION
=========================*/

/*-----------------------
~3.1. Primary Navigation
-------------------------*/


/*-----------------------
~3.2. Secondary Navigation
-------------------------*/


/*-----------------------
~3.3. Footer Navigation
-------------------------*/


/*-----------------------
~3.4. Breadcrumb Navigation
-------------------------*/


/*======================= 
~4. FOOTER BLOCK
=========================*/


/*=======================
~5. CONTENT
=========================*/

#modal-back {
	position:absolute;
	top:0;
	left:0;
	z-index:9000;
	width:100%;
	height:100%;
	background:url(../img/modal-back.png);
}

#modal {
	position:relative;
	top:0;
	z-index:9999;
	margin:0 auto;
	background:url(../img/holding2.png) top right no-repeat;
	width:730px;
	height:560px;
}
#read-more {
	position:absolute;
	bottom:0;
	right:-20px;
}

#read-more a {
}

.inner {
	width:600px;
	padding:125px 0 0 5px;
	background:url(../img/holding-copy.jpg) no-repeat
}

.inner p {
	font-size:14px;
}
.inner ul {
	list-style:none;
}
.inner ul li {
	float:left;
}


/*-----------------------
~5.1. Zone-Home Content
-----------------------*/	

/*-----------------------
~5.2. Modal Window
-----------------------*/

/* Z-index of #mask must lower than #boxes .window */
#mask {
	display:none;
	position:absolute;
	left:0;
	z-index:9000;
	background-color:#000;
}
  
#boxes .window {
	position:absolute;
	top:-650px;
	z-index:9999;
	padding:0;
	width:705px;
	height:650px;
}


/* Customize your modal window here, you can add background image too */
#boxes #dialog {
	width:705px; 
	height:650px;
	background:url(../img/modal-window.png) no-repeat;
}

#boxes #dialog div {
	margin:240px 0 0 110px;
	width:521px;
	height:300px;
	background:none;
}

a.close {
	position:absolute;
	bottom:0;
	left:0;
	width:208px;
	height:61px;
	text-align:left;
}
#boxes #dialog a.modal-download {
	position:absolute;
	bottom:0;
	right:-15px;
	width:170px;
	height:62px;
	text-align:left;
}


/* Customize your modal window here, you can add background image too */

#boxes div.scores-modal {
	position:absolute;
	top:-650px;
	z-index:9999;
}

#boxes #modal-scoreboard {
	width:272px; 
	background:url(../img/score-back.png) no-repeat;
}
#boxes #modal-scoreboard a.close {
	margin:0 0 -40px -60px;
}
#boxes #modal-scoreboard div#score-wrap {
	width:273px;
}
#boxes #modal-scoreboard #form-wrap {
	width:253px;
	height:51px;
	margin-top:190px;
	padding:20px 0 0 20px;
	background:url(../img/blank.png) no-repeat;
}
#boxes #modal-scoreboard .scoreloopGameWidget{
	width:274px;
	padding:0;
	border:none;
}
#boxes #modal-scoreboard .scoreloopGameWidget img[alt="Default"],
#boxes #modal-scoreboard .scoreloopGameWidget h1,
#boxes #modal-scoreboard .scoreloopGameWidget h1 span,
#boxes #modal-scoreboard .scoreloopGameWidget hr {
	display:none;
}
#boxes #modal-scoreboard .scoreloopGameWidget ul {
	margin-bottom:0;
}
#boxes #modal-scoreboard .scoreloopGameWidget ul li{
	width:250px;
	height:47px;
	padding:12px 10px 10px;
	margin:0;
	background:url(../img/score-blank.png) 0 0 no-repeat;
}
#boxes #modal-scoreboard .scoreloopGameWidget ul li span.scores-positioning{
	font-size:16px;
}

#boxes #modal-scoreboard .scoreloopGameWidget ul li span.scores-score{
	width:43px;
	padding-top:3px;
	font-size:16px;
	line-height:normal;
}
#boxes #modal-scoreboard .scoreloopGameWidget ul li div.constructedAvatarSmall {
	margin:0 0 0 -5px;
}
#boxes #modal-scoreboard .scoreloopGameWidget ul li div.scores-user{
	width:105px;
}
#boxes #modal-scoreboard .scoreloopGameWidget ul li div.scores-user span{
	padding-top:0;
	font-size:12px;
}
#boxes #modal-scoreboard .scoreloopGameWidget ul li div.scores-user .score-created{
	font-size:10px;
}
#boxes #modal-scoreboard .scoreloopGameWidget .pagination {
	width:243px;
	height:41px;
	padding:15px;
	background:url(../img/bottom-blank.png);
	border:none;
}
#boxes #modal-scoreboard .scoreloopGameWidget .pagination .next_page{
	float:right;
	display:inline-block;
	width:70px;
	height:23px;
	background:url(../img/next-page2.jpg) bottom no-repeat;
	border:none;
	text-align:justify;
	text-indent:-9999px;
}
#boxes #modal-scoreboard .scoreloopGameWidget .pagination .prev_page{
	float:left;
	display:inline-block;
	width:70px;
	height:21px;
	padding-right:20px;
	background:url(../img/prev-page.jpg) no-repeat;
	border:none;
	text-align:justify;
	text-indent:-9999px;
}
/*
#boxes #modal-scoreboard div.score-wrap ul li {
	width:273px;
	height:71px;
	list-style:none;
	background:url(../img/score-blank.png) 0 0 no-repeat;
	color:#603813;
}

#boxes #modal-scoreboard div.score-wrap ul li a, #boxes #modal-scoreboard div.score-wrap ul li span {
	display:block;
	padding:15px 0 0 0;
	width:193px;
	height:35px;
	text-align:center;
}*/
/*-----------------------
~5.3. Quicktime Window
-----------------------*/

.title {
  padding-left: 120px;
  min-height: 120px;
  background-image: url(http://images.apple.com/downloads/images/essentials_quicktime20070611.png);
  background-position: top left;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.playButton {
  background-color: rgb(20,20,20);
  cursor: pointer;
  font-weight: bold;
  font-size: 1.25em;
  opacity: .8;
  filter: alpha(opacity=80);
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  position: relative;
  top: 50%;
  zoom: 100%;
  padding: .5em 1em;
  color: white;
}

.playBackground {
  background-color: rgb(0,0,0);
  opacity: 0.0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 0px; left: 0px;
}

/*-----------------------
~5.4. Form
-----------------------*/
#form-wrap input.button {
	width:50px;
	height:23px;
	margin-left:10px;
	padding:0;
	border:none;
	cursor:pointer;
}
.inner input.button {
	width:129px;
	height:70px;
	background:#8c6239 !important;
	border:1px solid #fddd8c;
	padding:0;
	text-align:center;
	color:#fddd8c;
	cursor:pointer;
}

input {
	width:305px;
	padding:5px;
	border:2px solid #7F6F46;
	background:#E8E0D7 !important;
	font-size:16px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#form-wrap input {
	width:150px;
	font-size:14px;
}

.inner span.error{
	display:none;
	width:240px;
	height:40px;
	padding:15px 0 0 18px;
	margin:0 10px;
	background:url(../img/error-back.jpg) no-repeat;
	font-size:16px;
	font-weight:bold;
	color:#ffffff;
}


/*=======================
~6. SIDEBAR COMPONENTS
=========================*/