@charset "UTF-8";
/*======= 
Hotlink Claycam
Version 1.0 (31/07/08)

=======*/

/*=== 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
}
:focus { outline: 0; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

body { font: 62.5%/10px "myriad pro", "myriad", trebuchet ms, arial, helvetica, sans-serif; background: url(../images/claycam-bg.jpg) top left repeat-x; color: #575757; /*text-align: center; margin: 0 auto;*/ }
a { text-decoration: none; color: #94000e; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5 { text-indent: -9999px; line-height: .1em; font-size: .1em; }


/*=== building blocks ===*/
#wrapper { width: 1000px; /*text-align: left; margin: 0 auto;*/ }
#header { width: 1000px; height: 277px; background: url(../images/claycam-header.jpg) left top no-repeat; }
#header.inside-pages { width: 1000px; height: 277px; background: url(../images/claycam-inside-header.jpg) left top no-repeat; }
#content { position: relative; z-index: 400; width: 1000px; }
#footer { width: 100%; height: 128px; background: url(../images/footer-bg.jpg) left top repeat-x; }

/*=== header ===*/

#header h1 a { position: absolute; display: block; width: 400px; height: 155px; margin: 50px 0 0 50px; z-index: 500; }

h3 { width: 270px; height: 50px; }
#privvy-rewards { background: url(../images/rewards-kitty.jpg) left top no-repeat; padding: 299px 0 0 0; margin: 0; }
#privvy-rewards div h3 { display: block; margin: 0 0 0 45px; background: url(../images/h3-kitty.jpg) top left no-repeat; }
#birthday-rewards { background: url(../images/birthday-rewards.jpg) left top no-repeat; padding: 319px 0 0 0; margin: 0; }
#birthday-rewards div h3 { display: block; margin: 0 0 0 45px; background: url(../images/h3-birthday.jpg) top left no-repeat; height: 68px; }
#points-rewards { background: url(../images/bloom-rewards.jpg) left top no-repeat; padding: 346px 0 0 0; margin: 0; }
#points-rewards div h3 { display: block; margin: 0 0 0 45px; background: url(../images/h3-bloom.jpg) top left no-repeat; height: 43px; }
#points-rewards div p, #birthday-rewards div p, #privvy-rewards div p { width: 280px; padding: 10px 0 0 46px; line-height: 13px; color: #747474; }
#points-rewards div, #birthday-rewards div, #privvy-rewards div { background: url(../images/list-bottom.png) left bottom repeat-y;  }


/*=== navigation ===*/
#header ul#main-nav { position: absolute; top: 0; margin-left: 15px; }
#header ul#main-nav li { float: left; width: 140px; border-top: 5px solid #94000e; margin: 0 2px 0 0; }
#header ul#main-nav li a { float: left; display: block; padding: 10px 0 0 5px; font-weight: lighter; font-size: 12px; line-height: 12px; }
#header ul#main-nav li a:hover { color: #f00; text-decoration: none; }
#header ul#main-nav li:hover { border-top: 5px solid #f00; }
#header ul#main-nav li.on { border-top: none; height: 42px; background: url(../images/nav-on-bg.jpg) top left repeat-x; }
#header ul#main-nav li.on a, #header ul#main-nav li.on a:hover { color: #fff; padding: 14px 0 0 10px; }

#header ul#main-nav li.rewards { margin: 0 0 0 162px; }
#header ul#main-nav li.rewards a { background: url(../images/about-rewards-bg.jpg) bottom left no-repeat; padding: 10px 0 244px 5px; }

/*=== content for front page ===*/
#content #video-content { float: left; width: 530px; min-height: 296px; height: auto !important; height: 296px; background: url(../images/video-content-bg.jpg) top left no-repeat; }
	#video-content .player { height: 276px; margin: 25px 0 0 136px; }
	#video-content p { font-size: 12px; font-family: arial, helvetica, sans-serif; color: #575757; line-height: 16px; margin: 0 50px 0 40px; padding: 0 0 20px 0; }
	#video-content p strong { color: #0d92d0; }
	#video-content .screen-requests { margin: 0; background: url(../images/screen-requests.gif) right top no-repeat; width: 496px; height: 27px; }
	#video-content ul.status { margin: 10px 0 5px 200px; }
	#video-content ul.status li { width: 100px; height: 7px; display: block; float: left; text-transform: uppercase; padding: 3px 0 0 13px; font-size:7px; line-height: 7px; text-indent: -9999px; }
	/*
	#video-content ul.status li.accepting { background: url(../images/green-circle.gif) top left no-repeat; color: #00db05; }
	#video-content ul.status li.closed { background: url(../images/red-circle.gif) top left no-repeat; color: #f00; }*/
	#video-content .screen-requests p { display: block; text-indent: -9999px; font-size: 11px; margin: 0 0 5px 80px; color: #878787; padding: 0; }
	#video-content h4 { background: url(../images/h4-what-is-possible.jpg) top left no-repeat; width: 294px; height: 37px; margin: 30px 0 10px 40px; }
	

#content #data-holder { float: left; width: 450px; background: url(../images/data-bg.jpg) top left no-repeat; }
	#data-holder h5 { background: url(../images/h5-clay-queue.jpg) top left no-repeat; width: 388px; height: 24px; margin: 20px 0 10px 25px; }
	#data-holder.offline { padding: 30px 0 0 0; }
	#data-holder.offline h5 { background: url(../images/offline-clay.jpg) top left no-repeat; width: 450px; height: 165px; }
	#data-holder .current-clay { background: url(../images/fuzzy-divider.jpg) bottom left no-repeat; width: 410px; margin: 0; text-align: right; color: #6a6a6a; padding: 0 0 10px 0; }
	#data-holder .current-clay p { font-weight: bold; font-size: 22px; letter-spacing: -1px; line-height: 24px; }
	#data-holder .current-clay p span { color: #92000e; }
	#data-holder .current-clay p.by { font-size: 16px; line-height: 18px; }
	
	#data-holder .clay-list { margin: 10px 0 0 25px; height: 240px; overflow: auto; width: 380px; }
	#data-holder .clay-list ul li a { display: block; color: #6b6b6b; font-weight: bold; font-size: 16px; line-height: 16px; padding: 4px 0 3px 3px; margin: 0 3px 0 0; }
	#data-holder .clay-list ul li a em { color: #fff; font-weight: normal; font-size: 11px; line-height: 11px; padding: 0 0 0 3px; }
	#data-holder .clay-list ul li a:hover { background: #b2b2b2; text-decoration: none; }

	#data-holder form { background: url(../images/fuzzy-divider.jpg) top left no-repeat; width: 410px; padding: 4px 0 0 0; margin: 10px 0 0 0 ; }
	#data-holder form p { width: 123px; height: 147px; float: right; }
	#data-holder form p a { text-indent:-9999px; display: block; width: 123px; height: 147px; background: url(../images/view-gallery-bg.jpg) top left no-repeat;  }
	#data-holder form fieldset { /*width: 250px;*/ margin: 15px 0 0 15px; }
	#data-holder form legend { display: block; text-indent: -9999px; background: url(../images/legend-text.jpg) top left no-repeat; padding: 19px 0 0 254px; }
	#data-holder form .error-msg { color: #94000e; display: block; padding: 0 0 7px 0; font-size: 10px; line-height: 10px; }
	#data-holder form .the-basics { display: block; padding: 1px 0; }
	#data-holder form .the-button { margin: 5px 0 0 123px; }
	#data-holder form label { float: left; width: 80px; color: #898989; margin: 0 0 0 5px; font-weight: bold; font-size: 14px; letter-spacing: -1px; padding: 2px 0 0 0; }
	#data-holder form input.data { width: 170px; border: 1px solid #b4b4b4; background: url(../images/input-bg.jpg) top left repeat-x; font: bold 14px arial, helvetica, sans-serif; }
	#data-holder form input.submit { width: 133px; height: 29px; background: url(../images/submit-button.jpg) top left no-repeat; color: #fff; text-align: right; padding: 0 3px 0 0; font-weight: bold; font-size: 16px; line-height: 16px; border: none; overflow: visible; }
	#data-holder form fieldset#fieldset-done strong { display: block; text-indent: -9999px; background: url(../images/request-submitted.gif) top left no-repeat; padding: 0 0 10px 0; width: 186px; height: 19px; }
	#data-holder form fieldset#fieldset-done p { float: none; display: block; height: auto; width: 260px; font-weight: bold; font-size: 15px; line-height: 16px; letter-spacing: -1px; }
	#data-holder form fieldset#fieldset-done p.fineprint { font-weight: normal; font-size: 10px; line-height: 10px; letter-spacing: normal; }
	#data-holder form fieldset#fieldset-done a.back-link { display: block; width: 260px; text-align: right; font-weight: bold; font-size: 14px; line-height: 14px; padding: 5px 0 0 0; }
	

/*=== content for inside text pages ===*/
#content #title-column { float: left; width: 453px; background: url(../images/bi-column.jpg) top left no-repeat; min-height: 200px; height: auto !important; height: 200px; }
#content #title-column h4 { background: none; text-align: right; color: #a6a6a6; font-size: 30px; line-height: 40px; padding: 0 15px 50px 0; letter-spacing: -1px; }
#content #title-column h4 span { display: block; font-size: 60px; letter-spacing: -2px; }
#content #data-column { float: left; width: 475px; background: url(../images/data-column-bg.jpg) top left no-repeat; color: #5d5d5d; font: 12px/16px arial, helvetica, sans-serif; padding: 0 0 0 10px; }
#content #data-column h5 { text-indent: 0; text-align: left; font: bold 18px/18px "myriad pro", "myriad", "trebuchet ms", "trebuchet" arial, helvetica, sans-serif; color: #4f4f4f; padding: 20px 0 5px 0; }
#content #data-column h5.first { padding: 5px 0; }
#content #data-column ul { padding: 5px 0 0 0; }
#content #data-column ul li { background: url(../images/bullet.jpg) left 3px no-repeat; padding: 0 0 0 11px; margin: 3px 0; }

#content #gallery-flash { position: relative; z-index: 10; width: 1000px; background: url(../images/wide-bg.jpg) top left no-repeat; min-height: 400px; height: auto !important; height: 400px; padding: 0 0 30px 0; } 
	#content #gallery-flash.tnc, #content #gallery-flash.about { width: 855px; color: #5d5d5d; padding: 10px 0 10px 45px; font: 10px arial, helvetica, sans-serif; }
	#content #gallery-flash.tnc h4 { text-indent: 0; color: #4f4f4f; font: bold 22px/22px "myriad pro", "myriad", "trebuchet ms", "trebuchet" arial, helvetica, sans-serif; padding: 0 0 5px 0; letter-spacing: -1px; }
	#content #gallery-flash.tnc h5 { text-indent: 0; color: #4f4f4f; font: bold 12px/12px "myriad pro", "myriad", "trebuchet ms", "trebuchet" arial, helvetica, sans-serif; padding: 0; }
	#content #gallery-flash.tnc p { padding: 0 0 10px 0; }
	#content #gallery-flash.tnc p.disclaimer { text-transform: uppercase; }
	#content #gallery-flash.tnc ol { padding: 0 0 10px 0; }
	#content #gallery-flash.tnc ol li { margin: 2px 0 2px 17px; padding: 0 0 0 5px; list-style-type: decimal;  }
	
	#content #gallery-flash.about { width: 565px; }
	#content #gallery-flash.about h4, #content #gallery-flash.about h5 { text-indent: 0; color: #4f4f4f; font: bold 22px/22px "myriad pro", "myriad", "trebuchet ms", "trebuchet" arial, helvetica, sans-serif; padding: 15 0 5px 0; letter-spacing: -1px; }
	#content #gallery-flash.about h4 span { display: block; padding: 0 0 25px 0; }
	#content #gallery-flash.about p { padding: 7px 0; font: 12px/16px arial, helvetica, sans-serif; margin: 0 120px 0 0; }
	#content #gallery-flash.about a.clay { display: block; width: 381px; text-indent: -9999px; padding: 7px 0 220px 0; background: url(../images/red-clay.jpg) bottom left no-repeat; }
	

/*=== the footer ===*/

#footer { font-family: arial, helvetica, sans-serif; }
#footer .back-to-maxis { text-indent: -9999px; position: absolute; width: 62px; height: 33px; background: url(../images/maxis-logo.png) top left no-repeat; float: left; margin: 20px 0 0 900px; }
#footer .back-to-maxis a { display: block; width: 62px; height: 33px; }
#footer p.terms { font-size: 10px; padding: 40px 0 0 40px; }
#footer p.terms a.text-link { padding: 0 0 0 5px; }
#footer p.copyright { color: #6a6a6a; font-size: 9px; padding: 10px 0 10px 40px; }

/*=== clearfix ===*/
.clearfix:after {  
	content: ".";  
	display: block;  
	clear: both;  
	visibility: hidden;  
	line-height: 0;  
	height: 0;  
	}  

.clearfix { display: inline-block; }  
html[xmlns] .clearfix { display: block; }  
* html .clearfix { height: 1%; }