/*
	screen.css: SCREEN stylesheet
	------------
	Job:					Oommoo
	Template Version:		1.0
	Produced by:			Jim Savage
	Start date:				29/08/2009
	------------

	TOC:
	0.	custom fonts
			all fonts used have a free liciense for private use, commercial use & distribution.
	1.	general styles
			body styles
			reset
			links
			headings
			other elements, tags
	2.	helper styles
			forms
			notifications and errors
			consistant items with normally just one class
	3.	page structure
			skeleton including page furniture
	4.	page components / modules
			most of your styles will be in here
	5.	content/CMS
			these are styles that the client could put in via the FCKeditor. They will also need to be added to the FCK stylesheet.
	6.	overrides

*/
/* =0. custom fonts */
@font-face {
	font-family: Label;
	src: url('/_common/fonts/embosst1.eot');
	src: local('Impact Label Reversed Regular'), local('ImpactLabelReversed-Regular'), url('/_common/fonts/embosst1.ttf') format('truetype');
}

/* =1. general styles */
* {
	margin: 0;
	padding: 0;
	text-decoration: none;
}
body {
	font-family: Verdana, arial, sans-serif;
	color: #666666;
	font-size: 80%;
	/*background: #100805 url(/_common/img/bg.jpg) repeat-x center 0;*/
}
a:link, a:visited {
	color: #009fc2;
	text-decoration: none;
}
a:hover, a:focus {
	color: #f8971d;
	text-decoration: none;
}
	
/* =2. helper styles */
input, textarea, select {
	font-family: Arial, Helvetica, sans-serif;
}

/* =3. page structure */
.wrap {
	min-width: 990px;
	width: 100%;
	overflow: hidden;
}
.container {
	width: 990px;
	margin: 0 auto;
	position: relative;
}
.header {
	height: 150px;
	background: #25a9e0;
}
.content {
	background: #c6c8ca;
	padding-top: 45px;
}


/* =4. page components / modules */
.logo {
	margin-left: -40px;
	float: left;
	position: absolute;
}

.splodgeYellow {
	background: url(/_common/images/splodge-yellow.png) no-repeat;
	width: 326px;
	height: 486px;
	right: 0;
	margin-right: -38px;
	position: absolute;
}


.boxText {
	width: 257px;
	margin-left: 13px;
	float: left;
	position: relative;
}
.boxTextContent {
	background: url(/_common/images/small-box-top.png) no-repeat;
	min-height: 380px;
	z-index: 2;
	position: relative;
	padding: 15px;
}
.boxTextFooter {
	background: url(/_common/images/small-box-bottom.png) no-repeat;
	height: 19px;
	z-index: 2;
	position: relative;
}
.boxVideo {
	background: url(/_common/images/box-video.png) repeat-y;
	width: 620px;
	/*height: 458px;*/
	/*float: right;*/
	margin-left: 278px;
	padding: 40px;
}

.boxVideo ul, .boxText ul {
	margin: 3px;
	padding: 3px;
	}
.boxVideo li, .boxText li {
	margin: 3px 3px 3px 12px;
	padding: 3px 3px 3px 3px;
	}
.boxVideo p {
	margin-bottom: 7px;
	}
	
.homeVideo {
	background: url(/_common/images/home-video.png) repeat-y;
	width: 885px;
	/*height: 458px;*/
	/*float: right;*/
	margin-left: 13px;
	padding: 40px;
}


div#playVideo {
	width: 620px;
	height: 430px;
	background: #FFFF00;
}
div#playVideo2, div#playVideo3 {
	width: 430px;
	height: 400px;
	background: #FFFF00;
}
div#playVideo2 {
	margin-left: 15px;
}


.splodgeGrey {
	background: url(/_common/images/splodge-grey.png) no-repeat;
	width: 329px;
	height: 602px;
	bottom: 0;
	margin-bottom: -410px;
	margin-left: -45px; /*-45px;*/
	position: absolute;
	z-index: 1;
}



.bubbles {
	background: url(/_common/images/bubbles.png) no-repeat;
	width: 284px;
	height: 258px;
	z-index: 3;
	bottom: 0;
	margin-left: -5px;
	margin-bottom: -180px;
	position: absolute;
}
.bubble3.note {
	background: url(/_common/images/note.png) no-repeat;
	width: 45px;
	height: 50px;
	right: 48px;
	top: 32px;
	position: absolute;
}
.bubble4.ipod.pink {
	background: url(/_common/images/ipod-pink.png) no-repeat;
	width: 72px;
	height: 95px;
	left: 70px;
	top: 90px;
	position: absolute;
}





.star {
	width: 168px;
	height: 173px;
	background: url(/_common/images/star.png) no-repeat;
	position: absolute;
	z-index: 3;
	right: 0;
	top: 530px;
	margin-right: -80px;
}



.nav {
	z-index: 3;
	position: absolute;
	right: 13px;
	margin-top: -30px;
	font-size: .9em;
	font-family: Label, Verdana, arial, sans-serif;
	height: 40px;
}
.nav ul {
	list-style: none;
	background: url(/_common/images/nav-start.gif) no-repeat left;
	overflow: hidden;
	width: auto;
	padding-left: 66px;
}
.nav ul li {
	float: left;
	background: #ffffff;
	margin-left: 5px;
}
.nav ul li a {
	color: #000000;
	display: block;
	padding: 4px 20px;
}
.nav ul li a:hover, .nav ul li a:focus {
	color: red;
}

.subMenu {
	background: #000;
	color: #FFF;
	padding: 10px;
	width: 600px;
	}


.footer {
	background: #c6c8ca url(/_common/images/box-footer.png) no-repeat 13px 8px;
	padding: 23px 0 20px 0;
	width: 100%;
	height: 192px;
	clear: both;
	font-family: Label, Verdana, arial, sans-serif;
}
.footer ul {
	list-style: none;
	overflow: hidden;
	width: auto;
	padding-left: 280px;
}
.footer ul li {
	float: left;
	background: #ffffff;
	margin-left: 5px;
}
.footer ul li a {
	color: #000000;
	display: block;
	padding: 4px 20px;
}
.footer ul li a:hover, .nav ul li a:focus {
	color: red;
}



.sponsors {
	width: 100%;
	float: left
}
ul.sponsors {
	list-style: none;
	margin-top: 30px;
}
ul.sponsors li {
	float: left;
	margin-right: 10px;
}
ul.sponsors li a img {
	border: none;
}

.footer p {
	margin-left: 280px;
	
}




/* content */
h1 {
	color: #000000;
	font-size: 1.4em;
	margin-bottom: 15px;
	font-weight: normal;
	font-family: Label, Arial, Helvetica, sans-serif;
}

h2 {
	color: #000000;
	font-size: 1em;
	margin-bottom: 10px;
	font-weight: normal;
	font-family: Label, Arial, Helvetica, sans-serif;
}

.white {
	background-color: #FFFFFF;
	width: 450px;
	}

/* =6. overrides */