@charset "utf-8";
/* CSS Document */

/* REQUIRED */

body {
	padding: 0 0;
	margin: 0 0;
	font-family:Arial, Helvetica, sans-serif;
	color:#555555;
	font-size:100%;
}

table {
	line-height:170%;
	margin-bottom:10px;
}

td {
	border-top: solid 1px #EEEEEE;
}

/* GLOBAL */

p {
	font-family:Arial, Helvetica, sans-serif;
	line-height:170%;
	margin:15px 0px;
	font-size:75%;
}

ul ol {
	padding:0px 0px 0px 40px;
	margin:0px;
}

ol li {
	line-height:140%;
	font-size:75%;
}

ul li {
	line-height:140%;
	font-size:75%;	
}

.imgRight {
	float:right;
	margin: 10px 0px 10px 20px;
	border:1px solid #CCCCCC;
	padding:5px;
	text-align:center;
	max-width:290px;
}
.imgRight img {
	max-width:290px;
	border:none;
}
.imgRight p {
	margin:7px 0px 2px 0px;
	padding:0px;
	font-size:80%;
	color:#555555;
	
}

.imgLeft {
	float:left;
	margin: 10px 20px 10px 0px;
	border:1px solid #CCCCCC;
	padding:5px;
	text-align:center;
	max-width:290px;
}
.imgLeft img {
	max-width:290px;
	border:none;
}
.imgLeft p {
	margin:7px 0px 2px 0px;
	padding:0px;
	font-size:80%;
	color:#555555;
	
}

h1 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:150%;
	font-style:italic;
	font-weight:lighter;
	margin:0px 0px 8px 0px;
	line-height:120%;
}

h2 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:110%;
	line-height:120%;
	font-weight:lighter;
	margin:0px 0px 10px 0px;
	clear:both;
}

h3 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:100%;
	font-weight:lighter;
	margin:0px 0px 10px 0px;
	clear:both;
}

h4 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:90%;
	font-weight:lighter;
	font-style:italic;
	margin:0px 0px 10px 0px;
}

#bkgd {
	background-color:#FFFFFF;
	width:100%;
}
#container {
	margin: 0 auto;
	width:1000px;
	padding-bottom:30px;
}

.noList {
	list-style:none;
	margin:0px;
	padding:0px;
}

/* HEADER */

#header {
	position:relative;
	height:160px;
	width:980px;
	padding: 0px 10px;
}

#innerHeader {
	position:relative;
	height:250px;
	width:980px;
	padding: 0px 10px;
}

#logo {
	position:absolute;
	bottom:0px;
	left:20px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:440%;
}
#logo img {
	border:none;
	padding:0px;
}

#slogan {
	position:absolute;
	bottom:50px;
	left:10px;
}

#slogan img {
	border:none;
	padding:0px;
}

/* NAVIGATION */

#nav {
	position:absolute;
	top:0px;
	right:10px;
}

#menu {
	float: left;
	list-style: none;
	margin: 10px 0px;
	padding: 0;
	background-color:#CCCCCC;
}

#menu li {
	float: left;
	margin:0px;
	padding:0px;
	width:128px;
	text-align:center;
}
#menu li a {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-size:110%;
	text-decoration:none;
	padding:7px 20px 6px 20px;
	color:#FFFFFF;
	margin:0px;
	display:block;
}
#menu li a:hover {

}
#menu li.selectBtn {

}

#menu li#leftBtn {

}
#menu li#leftBtn:hover {

}
#menu li#leftBtn.selectBtn {

}

#menu li#rightBtn {

}
#menu li#rightBtn:hover {

}
#menu li#rightBtn.selectBtn {

}

/* CONTENT */

#content {
	position:relative;
	min-height:380px;
	width:960px;
	padding: 0px 20px;

}

a {
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}
.narrowColumn {
	position:relative;
	float:left;
	width:220px;
	margin:0px 10px;
}
.wideColumn {
	position:relative;
	float:left;
	width:380px;
	margin:0px 10px;
}

.halfColumn {
	position:relative;
	float:left;
	width:460px;
	margin:0px 10px;
}
.halfInner {
	float:left;
	width:50%;
}

.singleColumn {
	position:relative;
	float:left;
	width:300px;
	margin:0px 10px;
}
.doubleColumn {
	position:relative;
	float:left;
	width:620px;
	margin:0px 10px;
}

.tripleColumn {
	position:relative;
	float:left;
	width:940px;
	margin:0px 10px;
}
.row {
	position:relative;
	clear:both;
	padding: 10px 0px 0px 0px;
}

.lineBreak {
	position:relative;
	border-top:solid 1px #DDDDDD;
	height:1px;
	width:100%;
	margin:10px 0px;
}

.clearFix {
	width:100%;
	height:1px;
	clear:both;
}

#getCode {
	text-align:center;
	font-family:Georgia, "Times New Roman", Times, serif;
}

#getCode a {
	
	font-size:210%;
	padding:10px 15px;
}

#codeText {
	width:935px;
	max-width:935px;
	min-width:935px;
	height:250px;
	max-height:250px;
	min-height:250px;
}

#tweetmeme {
	position:absolute;
	bottom:0px;
	right:20px;
}

#message {
	position:absolute;
	bottom:0px;
	right:80px;
	width:250px;
	padding:14px 15px 15px 15px;
	background-color:#f8f8f8;
	border:1px solid #f0f0f0;
	color:#888888;
	
}

#message:hover {
	background-color:#f0f0f0;
	border:1px solid #cccccc;
	color:#444444;
}
#messageText {
	width:220px;
	margin:0px;
	padding:0px;
	font-size:75%;
}
#message a {
	font-size:55%;
	float:right;
}

.bigColour {
	position:relative;
	height:240px;
	width:240px;
	float:left;
	
}

.smallColour {
	position:relative;
	height:180px;
	width:180px;
	margin:10px 5px;
	float:left;
	border:1px solid #eeeeee;
}
.smallColour:hover {
	/*border:1px solid #222222;*/
}

.tinyColour {
	position:relative;
	height:50px;
	width:50px;
	margin:10px 5px 30px 0px;
	float:left;
	border:1px solid #eeeeee;
}

#smallBlocks {
	clear:both;
	width:100%;
}

#firstColour { background-color:#FFFFFF; }
#secondColour {	background-color:#FFFFFF; }
#thirdColour {	background-color:#FFFFFF; }
#fourthColour {	background-color:#FFFFFF; }
#fifthColour {	background-color:#FFFFFF; }

.color {
	position:relative;
	width:170px;
	float:left;
	margin:0px 5px 10px 5px;
	padding:5px;
	border:1px solid #eeeeee;
}

.color:hover {
	border:1px solid #222222;
}


/* FOOTER */

#footer {
	position:relative;
	width:980px;
	padding: 30px 10px;
	color:#888888;
	text-align:center;
}
#footer p {
	font-size:75%;
	color:#888888;
	margin:10px 0px;
}
#footer a {
	color:#888888;
	text-decoration:none;
}

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

#widefooter {
	position:relative;
	width:100%;
	padding: 30px 0px;
	color:#888888;
	text-align:center;
	background-color:#444444;
}
#widefooter p {
	margin:10px 0px;
}
#widefooter a {
	text-decoration:none;
}

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



.black_overlay{
	display: none;
	position:fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
 
.white_content {
	display: none;
	position: fixed;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 16px;
	border: 16px solid #222;
	background-color: white;
	z-index:1002;
	overflow: auto;
}

.closeBtn {
	position:absolute;
	top:10px;
	right:10px;
}

#twitter_update_list {
	list-style:none;
}

#twitter_update_list li {
	background-color:#f8f8f8;
	border:1px solid #f0f0f0;
	padding:10px;
	margin: 10px 0px;
	font-size:75%;
}



.chooserInfo {
	position:absolute;
	background-color:#222222;
	font-size:10px;
	color:#FFFFFF;
	bottom:0px; /*224px*/
	padding:5px;
	width:172px;
	text-align:center;
}

#firstPick {
	left:5px;
}
#secondPick {
	left:197px;
}
#thirdPick {
	left:389px;
}
#fourthPick {
	left:581px;
}
#fifthPick {
	left:773px;
}

.colourInfo {
	position:absolute;
	background-color:#222222;
	color:#FFFFFF;
	top:42px; /*42px*/
	padding:10px;
	width:362px;
	height:160px;
	border: 1px solid #222222;
}
.colourInfo p {
	color:#FFFFFF;
	font-size:75%;
}
.colourInfo h2 {
	color:#FFFFFF;
}

#firstInfo {
	left:187px;
}
#secondInfo {
	left:379px;
}
#thirdInfo {
	left:571px;
}
#fourthInfo {
	right:379px;
}
#fifthInfo {
	right:187px;
}

#overlay {
	z-index:3000;
	position:fixed;
	min-width:1000px;
	background:url(../../images/overlay.png) top center repeat;
	height:100%;
	width:100%;
	display:none;
}



/* PLAYGOUND LABS */
.ctaButton {
	margin:30px 0 20px 0;
	
}
.ctaButton a {
	padding:8px 40px;
	color:#FFFFFF;
	font-size:14px;
	font-weight:bold;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #3890bd;
	background: -webkit-gradient(linear, left top, left bottom,
		from(#87caed), to(#43a1d1),
		color-stop(0.5, #5aadd8), color-stop(0.5, #3890bd));
	box-shadow: 50px 50px 10px 10px #000;
	text-decoration:none;
	opacity: .9;
	background-color:#3890bd;
	-webkit-transition: opacity .5s linear;
}
.ctaButton a:hover {
	background: -webkit-gradient(linear, left top, left bottom,
		from(#5cb0db), to(#307ca3),
		color-stop(0.5, #58a4cb), color-stop(0.5, #3385af));
	opacity: 1;
	background-color:#43a1d1;
}