/* CSS 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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0 none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:0;
vertical-align:baseline;
}

HTML{
	background: url(../images/bg-clouds.png) top center  repeat;	
	background-color: #6691cb; /*Sky colour*/
	margin: 0px; padding: 0px;
}
BODY{

	margin: 0px; padding: 0px;
	font-family: verdana;
	font-size: 11px;
}
p{
display:block;
}

h1{
	font-weight: bold;
	font-size: 20px;
	color: #2F1D0A;
}


#header-container{
	margin:0 auto;

	height: 255px;
	color: white;
	font-family: verdana;
	font-size: 11px;
	padding: 15px 0px 0px 0px;
	overflow: hidden;
	background: url(../images/bg-header.png) top center repeat-x;	

}

#header{

	height: 200px;
	overflow: hidden;
}



a.futurlab-logo{
	display: block;
	margin-top: 5px;
	margin-left: auto; /*Centre the div*/
	margin-right: auto; /*Centre the div*/
	width: 225px;
	height: 49px;
	background: url(../images/futurlab-logo.png) top center no-repeat;

}
#coco-logo{
	position: relative;
	margin-top: 20px;
	margin-left: auto; /*Centre the div*/
	margin-right: auto; /*Centre the div*/
	width: 882px;
	height: 117px;
	background: url(../images/title.gif) top center no-repeat;
}
#follow-us{
	position:absolute;
	top: -50px;
	right: -15px;
	width:163px;
	height:67px;
	background: url(../images/follow-us.png) top center no-repeat;
}
#follow-us a.facebook{
	left: 95px;
	top: 28px;
	display:block;
	position:absolute;
	background: url(../images/follow-facebook.png);
	width: 20px;
	height: 21px;
}
#follow-us a.twitter{
	left: 120px;
	top: 28px;
	display:block;
	position:absolute;
	background: url(../images/follow-twitter.png);
	width: 20px;
	height: 21px;
}
#get-ready{

	margin-left: auto; /*Centre the div*/
	margin-right: auto; /*Centre the div*/
	margin-bottom: 20px;
	width: 650px;
	height: 36px;
	background: url(../images/get-ready.png) top center no-repeat;

}

a.now-available{
	display: block;
	margin-left: 20px;
	margin-top: 20px;


	width:429px;
	height:50px;
	background: url(../images/now-available.png) top center no-repeat;

}

a.sticker{
	display: block;
	margin-left: auto; /*Centre the div*/
	margin-right: auto; /*Centre the div*/
	width: 358px;
	height: 360px;
	background: url(../images/sticker_release.png) top center no-repeat;

}

#page-container{
	margin:0 auto;
	position: relative;
	width:100%;
	min-height:200px;
	background: url(../images/bg_sea.png) bottom center repeat-x;
	z-index:10;	
}

#board-container{
	position: relative;
	width:970px;
	margin-left: auto; /*Centre the div*/
	margin-right: auto; /*Centre the div*/
}

#board-top{
	margin-left: auto; /*Centre the div*/
	margin-right: auto; /*Centre the div*/
	background: url(../images/board-top.png) bottom center no-repeat;	
	width: 941px;
	height: 52px;
}
#board-middle{
	margin-left: auto; /*Centre the div*/
	margin-right: auto; /*Centre the div*/
	background: url(../images/board-middle.png) top center repeat-y;	
	width: 941px;

}
#board-bottom{

	margin-left: auto; /*Centre the div*/
	margin-right: auto; /*Centre the div*/
	background: url(../images/board-bottom.png) top center no-repeat;	
	width: 941px;
	height: 81px;
}
#paper-top{

	margin-left: auto; /*Centre the div*/
	margin-right: auto; /*Centre the div*/
	position:relative;

	background: url(../images/paper-top.png) bottom center no-repeat;	
	width: 917px;
	height:52px;
}
#paper-middle{
	margin-left: auto; /*Centre the div*/
	margin-right: auto; /*Centre the div*/
	position:relative;
	background: url(../images/paper-middle.png) top center  repeat-y;	
	width: 917px;
}
#paper-bottom{
	margin-left: auto; /*Centre the div*/
	margin-right: auto; /*Centre the div*/
	position:relative;
	background: url(../images/paper-bottom.png) top center no-repeat;	
	width: 917px;
	height: 50px;
}

#paper-small-topl{
	margin-left:30px;
	float:left;
	background: url(../images/paper-small-top.png) bottom center no-repeat;	
	width: 427px;
	height:52px;
}
#paper-small-topr{
	margin-right:30px;
	float:right;
	background: url(../images/paper-small-top.png) bottom center no-repeat;	
	width: 427px;
	height:52px;
}
#paper-small-middle{
	background: url(../images/paper-small-middle.png) top center  repeat-y;	
	width: 427px;
}

#paper-small-bottoml{
	float:left;
	margin-left:30px;
	position:relative;
	background: url(../images/paper-small-bottom.png) top center no-repeat;	
	width: 427px;
	height:43px;
}
#paper-small-bottomr{
	float:right;
	margin-right:30px;
	position:relative;
	background: url(../images/paper-small-bottom.png) top center no-repeat;	
	width: 427px;
	height:43px;
}
#board-two-col-paper-middle{
	margin-left: auto; /*Centre the div*/
	margin-right: auto; /*Centre the div*/
	background: url(../images/board-two-col-paper.png) top center repeat-y;	
	width: 941px;

}
#col-container{
	background-color: #ffffff;
	margin-left: auto; /*Centre the div*/
	margin-right: auto; /*Centre the div*/


}
#col-left-paper{
	margin-left:30px;
	float:left;
	width:427px;
	background: url(../images/paper-small-middle.png) top center  repeat-y;	
	color:#000000;
}
#col-right-paper{
	margin-right:30px;
	float:right;
	width:427px;
	background: url(../images/paper-small-middle.png) top center  repeat-y;	
	color:#000000;
}
#col-left{
	margin-left:30px;
	float:left;
	width:427px;
	color:#000000;
}
#col-right{
	margin-right:30px;
	float:right;
	width:427px;
	color:#ffffff;
}
#empty-div{
	clear:both;
}
/*
#gallery{
	padding-top: 45px;
	margin-left: auto;
	margin-right: auto; 
	width:609px;
	height:385px;
	background: url(../images/board-gallery.png) top center  no-repeat;	
}
*/
#gallery a.prev{
	margin-top: 124px;
	display: block;
	width: 11px;
	height: 24px;
	text-indent: -5000px;
	background: url(../images/prev.png) top left no-repeat;
	float: left;
	/*margin-top: 250px;*/
}
#gallery a.next{
	margin-top: 124px;
	display: block;
	width: 11px;
	height: 24px;
	text-indent: -5000px;
	background: url(../images/next.png) top left no-repeat;
	float: left;
	/*margin-top: 250px;*/
}

#gallery img-container{

	background-color:#000000;
}

#gallery img{
	margin:5px;
	float:left;
	width:480px;
	height:272px;
	background-color:#000000;
	display: block;
}

#gallery-left{
	margin-left:20px;
	float:left;
	width:512px;
	color:#000000;
}

#gallery-left h1{
	margin-left:16px; /*16px to line the text up with the picture. This accomodates the picture's margin and the a.prev button*/
}

#gallery-right{
	margin-right:20px;
	float:right;
	width:380px;
	color:#ffffff;
}
#gallery #gallery-text{
	color:#ffffff;
}

#gallery-text h1 {
	color:#2F1D0A;
	font-size: 20px;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
}

#gallery-text h2 {
	color:#2F1D0A;
	font-size: 12px;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
}

#gallery-text p {
	padding: 0px 0px 10px 0px;
}

/******************************************************* BOARD TEXT PAPER ***************************************************/

#board-text-paper{
	padding: 0px 30px 0px 30px;
	color:#000000;
}

#board-text-paper h1 {
	color:#2F1D0A;
	font-weight: bold;
	text-align: center;
	padding: 0px 15px 10px 0px;
}


#board-text-paper p {
	padding: 0px 0px 10px 0px;
}

#board-text-paper ol {
	padding: 0px 0px 0px 30px;
}

#board-text-paper ul {
	padding: 0px 0px 0px 30px;
}

#board-text-paper li {
	padding: 0px 0px 10px 0px;
}

#board-text-paper a {
	color:#2F1D0A;
	font-weight: bold;
}

#board-text-paper a:hover {
	color:#66390D;
	font-weight: bold;
	text-decoration: none;
}

/********************************************************* BOARD TEXT ***************************************************/

#board-text{
	padding: 0px 30px 0px 30px;
	color:#ffffff;

}

#board-text h1 {
	color:#FFFFFF;
	font-weight: bold;
	padding: 0px 0px 10px 0px;
}

#board-text p {
	padding: 0px 0px 10px 0px;
}

#board-text a {
	color:#FFFFFF;
	font-weight: bold;
}

#board-text a:hover {
	color:#FFFFFF;
	font-weight: bold;
	text-decoration: none;
}

/**************************************************************MENU*******************************************************/

#menu{
	margin: 10px 0px 0px 0px;

	overflow: hidden;
	min-height: 24px;

}

#menu ul{
	margin-left: auto; /*Centre the div*/
	margin-right: auto; /*Centre the div*/

	overflow: hidden;
	list-style: none;

	height: 24px;
	/*width:432px; /*Size of menu without the downloads button*/
	
	
	
	width:520px;
	

}

#menu ul li{
	float: left; /*Puts each menu item next to each other horizontally*/

}

#menu ul li a{
	height: 24px;
	display: block;
	text-indent: -5000px;
	background-repeat: no-repeat;
	background-image: url(../images/menu-screens.jpg);
}


/**************************************************************MENU BUTTONS*******************************************************/

#menu ul li a.screen1{
		width: 81px;
		background-position:-2px -1px;	
		margin-right: 25px;
}
#menu ul li a.screen1active{
		width: 81px;
		background-position:-2px -26px;	
		margin-right: 25px;
}
#menu ul li a.screen1:hover{
		background-position:-2px -26px;	
}

#menu ul li a.screen2{
		width: 95px;
		background-position: -89px -1px;	
		margin-right: 25px;
}
#menu ul li a.screen2active{
		width: 95px;
		background-position: -89px -26px;
		margin-right: 25px;
}
#menu ul li a.screen2:hover{
		background-position: -89px -26px;	
}



#menu ul li a.screen3{
		width: 178px;
		background-position:-190px -1px;	
		margin-right: 25px;
}
#menu ul li a.screen3active{
		width: 178px;
		background-position:-190px -26px;	
		margin-right: 25px;
}
#menu ul li a.screen3:hover{
		background-position:-190px -26px;	
}


#menu ul li a.screen4{
		width: 90px;
		background-position:-374px -1px;	
		margin-right: 25px;
}
#menu ul li a.screen4active{
		width: 90px;
		background-position:-374px -26px;	
		margin-right: 25px;
}
#menu ul li a.screen4:hover{
		background-position:-374px -26px;	
}



#menu ul li a.screen5{
		width: 151px;
		background-position:-470px -1px;	
		margin-right: 20px;
}
#menu ul li a.screen5active{
		width: 151px;
		background-position:-470px -26px;	
		margin-right: 20px;
}
#menu ul li a.screen5:hover{
		background-position:-470px -26px;	
}



#menu ul li a.screen6{
		width: 90px;
		background-position:-621px -1px;	
}
#menu ul li a.screen6active{
		width: 90px;
		background-position:-621px -26px;	
}
#menu ul li a.screen6:hover{
		background-position:-621px -26px;	
}



/********************************************************FOOTER*******************************************/

#footer-container{
	
	padding: 0px 0px 0px 0px; 
	background-color:#ffef96; /*Sand Colour*/
}

#footer {

	margin:0 auto;
	height: 220px;
	color: white;
	font-family: tahoma;
	font-size: 11px;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
	background: url(../images/bg-sand.png) top center repeat-x;		
}
#clawence{
	position: relative;
	z-index:20;
	margin-left: auto; /*Centre the div*/
	margin-right: auto; /*Centre the div*/
	width:451px;
	height:197px;
	background: url(../images/clawence.png) top center no-repeat;	
}
#footer-links{
	position: relative;
	margin-left: auto; /*Centre the div*/
	margin-right: auto; /*Centre the div*/
	width: 492px;
}

#footer-links a{
	display:block;
	margin-bottom: 10px;
}

#copyright {
	margin-top:15px;
	margin-left: auto;
	margin-right: auto;
	font-size: 9px;
	color: #887C39;
	text-align:center;
}

#copyright a{
	color: #887C39;
	
}

#copyright a:hover{
	text-decoration: none;
}

/* Footer links*/
a.ps-family{
	margin-right:20px;  /* Gap between each of the links*/
	float:left;

	width: 46px;
	height: 44px;
	background: url(../images/logos/ps-family.jpg) top center no-repeat;	
	margin-right: 10px;
}
a.psp{
	margin-right:20px;  /* Gap between each of the links*/
	float:left;
	width: 112px;
	height: 44px;
	background: url(../images/logos/psp.jpg) top center no-repeat;	

}
a.ps3{
	margin-right:20px;  /* Gap between each of the links*/
	float:left;
	display: block;
	width: 102px;
	height: 44px;
	background: url(../images/logos/ps3.jpg) top center no-repeat;	

}
a.minis{
	margin-right:20px;  /* Gap between each of the links*/
	float:left;
	display: block;
	width: 116px;
	height: 44px;
	background: url(../images/logos/minis.jpg) top center no-repeat;	

}
a.globe{
	margin-right:0px;
	float:left;
	display: block;
	width: 45px;
	height: 44px;
	background: url(../images/logos/globe.jpg) top center no-repeat;	
}
a.ps-store{

	margin-right: auto; /*Centre the div*/
	margin-left: auto; /*Centre the div*/
	clear: both;
	background: url(../images/logos/store.jpg) top center no-repeat;	
	width: 257px;
	height: 24px;
}

#legal{

	margin-right: auto; /*Centre the div*/
	margin-left: auto; /*Centre the div*/

	clear: both;
	background: url(../images/logos/legal.jpg) top center no-repeat;	
	width: 500px;
	height: 16px;
}

/******************************************************************GEMS AND COCONUTS******************************************************/
#obj-top-left{
	display: block;
	z-index:-1;
	position:absolute;

	left: -15px;
	top: -20px;

	background-color: #ff0000;
	width:66px;
	height:67px;
	background: url(../images/gold1.png);
}
#obj-mid-left{
	display: block;
	z-index:10;
	position:absolute;

	left:-60px;
	top:90px;

	background-color: #ff0000;
	width:52px;
	height:75px;
	background: url(../images/coconut1.png);
}
#obj-top-right{
	display: block;
	z-index:10;

	position:absolute;

	left: 920px;
	top: -40px;

	background-color: #ff0000;
	width:62px;
	height:103px;
	background: url(../images/diamond1.png);

}
#obj-low-right{
	display: block;
	z-index:10;

	position:absolute;

	left: 960px;
	top: 200px;

	background-color: #ff0000;
	width:52px;
	height:75px;
	background: url(../images/coconut2.png);
}
#obj-sand-coconut{
	top: -160px;
	left: -130px;
	width:86px;
	height:114px;
	position:absolute;
	background: url(../images/coconut-landed.png);

}#obj-sand-coconut2{
	width:86px;
	height:114px;
	top: -210px;
	right: -120px;
	position:absolute;
	background: url(../images/coconut-landed-flipped.png);

}
#sparkle-left{
	z-index: -1;
	display: block;
	position:absolute;
	bottom: 20px;
	background: url(../images/sparkle-left.png);
	width: 532px;
	height: 212px;
}
#sparkle-right{
	z-index: -1;
	display: block;
	position:absolute;
	bottom: 20px;
	right: 0px;

	
	background: url(../images/sparkle-right.png);
	width: 578px;
	height: 212px;

}