/*===============================
======== Colour Palette =========
Grey......................#9A9A9A
Dark Grey.................#3A3A3A
Light Grey................#D1D1D1
Purple....................#83397C
Red.......................#CC0101
===============================*/

/*===============================
============= 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:none;outline:0;}

/*===============================
========== Base Styles ==========
===============================*/
/* for sticky footer */
html, body {height: 100%;}
#container {min-height:100%;}
		
body {
	font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
	font-size:80%;
	color:#424242;
	line-height:1.5;
	background:url(../images/bg-y.jpg) center top #FFF repeat-y;
}

p, pre, blockquote, cite, dl, ul, ol, address {margin:0 0 1em 0;}

ul, ol, li, blockquote {margin-left:1em;}

ol {list-style-type:decimal;}

ol ol {
	list-style-type:lower-alpha;
	margin-bottom:0;
}

dt {font-weight:bold;}

dd {margin:0 0 1em;}

h1, h2, h3, h4, h5, h6 {
	line-height:1.2;
	margin:.5em 0;
	font-weight:normal;
	font-family:"Trebuchet MS", Helvetica, Jamrul, sans-serif;
}

h1 {
	font-size:2.0em;
	margin:0;
}

h2 {
	font-size:2em;
	color:#83397C;
	margin-top:0;
}

h3 {
	font-size:1.6em;
	margin:0 0 0.6em;
	color:#FFF;
}

h3.sub-heading {margin-top:-10px;}

h3.sub-heading, h4 {
	font-size:1.5em;
	font-weight:bold;
	color:#83397C;
}

h5 {font-size:1.1em;}
h6 {font-size:1.0em;}

a {color:#83397C;}
a:hover {color:#83397C;}
a:visited {color:#83397C;}
a:active {color:#83397C;}

img {vertical-align:bottom;}

table {border-collapse:collapse;}

caption, th {text-align:left;}

acronym, abbr {
	border-bottom:1px dotted #333;
	cursor:help;
}

pre, kbd, code, samp, tt, var {font-family:monospace;}

pre {white-space:pre-wrap;}

strong {color:#CC0101;}

iframe {border-width:0;}

.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

/*===============================
========== Base Forms ===========
===============================*/
input, textarea, select {
	margin:0;
	padding:0;
	vertical-align:middle;
}

form .field, form.buttons {margin:0 0 10px;}

label {
	font-weight:bold;
	margin:0 0 5px;
}

form .field label {display:block;}

.fields label {
	font-weight:normal;
	vertical-align:middle;
}

form .fields {margin:0 0 10px;padding:0;} /* ul/div -> multiple/single */

form ul.fields li {
	list-style-type:none;
	margin:0 0 5px;
	padding:0;
	display:inline;
}

textarea {overflow:auto;}

input.text, input.password, textarea, select {
	width:284px;
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	padding:3px;
	border:1px solid #9A9A9A;
	color:#424242;
}

select {width:292px;}

.buttons {float:right;}

input.button {
	border:none;
	display:block;
	float:left;
	cursor:pointer;
	text-indent:-9999px;
	font-size:0;
	line-height:25px;
	margin:0;
}

/*===============================
======== Site Structure =========
===============================*/
#container {
	margin:0 auto;
	width:920px;
}

#header {
	position:relative;
	height:261px;
	background:#3A3A3A;
	margin-top:0;
	color:#FFF;
}

#header span {
	display:block;
	position:absolute;
	top:0; left:0;
	background:url(../images/header.jpg) no-repeat;
	width:100%;
	height:100%;
}

#main-content {
	margin:20px 20px 0;
	width:520px;
	float:left;
}

#sub-footer {
	clear:right;
	margin:40px 0 0;
}

#sub-footer ul {
	list-style:none;
	margin:0;
}

#sub-footer li {
	display:inline;
	border-right:1px solid #83397C;
	padding:0 7px 0 0;
	margin:0 7px 0 0;
}

#sub-footer li.last-child {
	border:none;
	padding:0;
}

#sub-footer p {margin-top:0;}

#sidebar {
	width:340px;
	float:left;
	margin-top:-23px;
	position:relative;
	z-index:1;
}

/* sticky footer */
#footer {
	position:relative;
	z-index:10;
	height:85px;
	margin-top:-50px;
	background:#3A3A3A;
	margin:-85px auto 0;
	width:920px;
	clear: both; /* TEMP */
}

#footer ul {
	margin:0;
	list-style:none;
	color:#FFF;
	text-align:center;
	padding:20px 0 0;
}

#footer a {
	color:#FFF;
}

#footer li {
	display:inline;
	margin:0;
	height:5px;
}

#footer a {
	border-right:1px solid #FFF;
	padding-right:7px;
	margin:0 0 0 7px;
}

/*===============================
========= Common styles =========
===============================*/
/* Intro box */
.intro {
	background:#EEE;
	border:1px solid #D1D1D1;
	padding:30px 15px 0;
	margin-bottom:20px;
	position:relative;
	margin-top:35px;
}

#add-friends-page .intro {padding-bottom:15px;}

/* text replacement */
.replaced {
	position:absolute;
	height:51px;
	line-height:51px;
	padding:0 0 0 20px;
	background:#83397C;
	overflow:hidden;
}

.replaced span {
	display:block;
	position:absolute;
	top:0; left:0;
	height:51px;
}

/* prize-status */
#prize-status {background:url(../images/sidebar-bg-top-grey.gif) no-repeat left top;}

#prize-status .inner {
	background:url(../images/sidebar-bg-bottom-grey.gif) no-repeat left bottom;
	padding:7px 15px 15px;
	overflow:auto;
}

#prize-status img {margin:10px 0 20px;}

/* Modal Box */
.overlay {
	position:fixed;
	top:0; left:0;
	height:100%;
	width:100%;
	display:none;
	background-color:#000000;
	z-index:20;
}

.modal {
	position:fixed;
	top:50%; left:50%;
	z-index:2;
	display:none;
	background:#FFF url(../images/loading.gif) no-repeat center;
	z-index:21;
	padding:15px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
}

.modal .close {
	display:block;
	position:absolute;
	top:-10px; right:-10px;
	background:url(../images/lightbox-close.png) no-repeat;	
	width:23px; height:23px;
	text-indent:-9999px;
}

.modal #ajax-content {
	overflow:auto;
	height:98%;
	padding:5px;
}

.modal #ajax-content h2 {
	margin:0 0 0.5em;
	color:#83397C;
	font-size:2em;
}

/*===============================
=========== Homepage ============
===============================*/
#main-content h2 em {
	font-size:1.4em;
	font-style:normal;
	font-weight:bold;
}

#how-to-enter h3 {
	top:-25px; left:-17px;
	width:175px;
}

#how-to-enter h3 span {
	background:url(../images/title-how-to-enter.png) no-repeat;
	width:195px;
}

#how-to-enter ul {
	margin:0;
	list-style:none;
}

#how-to-enter li {
	margin:0 0 20px;
	padding-left:140px;
}

#switch {
	background:url(../images/homepage-switch-icon.gif) no-repeat 0 center;
	min-height:58px;
}

#save {
	background:url(../images/homepage-pig-icon.gif) no-repeat 25px center;
	min-height:74px;
}

#win {
	background:url(../images/homepage-bulb-icon.gif) no-repeat 25px center;
	min-height:87px;
}

#how-to-enter h4 {margin-top:0;}

#home-page form {
	position:relative;
	padding:30px 10px 0;
	margin:0 0 13px;
}

#home-page #main-content form {margin:40px 0 20px;}

#home-page #main-content form h3 {
	top:-25px; left:-17px;
	width:175px;
}

#home-page #main-content form h3 span {
	background:url(../images/title-ready-to-switch.png) no-repeat;
	width:195px;
}

#home-page label {color:#CC0101;}
#home-page .fields label {color:#424242;}

#home-page .text {
	width:160px;
	margin:0 20px 0 0;
}

#home-page form ul {margin-top:6px;}

#home-page form li {margin-right:8px;}

#home-page form li label {font-weight:normal;}

#home-page form .text {text-transform:uppercase;}

#home-page #main-content .field {float:left;}

#home-page #sidebar form {
	background:url(../images/sidebar-bg-top-red.gif) left top no-repeat;
	padding:0;
}

#home-page #sidebar form .inner {
	background:url(../images/sidebar-bg-bottom-red.gif) left bottom no-repeat;
	padding:7px 15px 15px;
	overflow:auto;
}

#home-page .button {
	background:url(../images/btn-start-switching.gif) repeat scroll 0 0 transparent;
	height:38px; width:176px;
}

#home-page .error {
	color:red;
	clear:left;
	display:block;
}

/*===============================
======= Add friends page ========
===============================*/
#add-friends-page h2 {
	margin-bottom:1em;
	color:#424242;
	font-size:1.6em;
}

#want-more-entries h3 {
	top:-23px; left:-16px;
	width:254px; height:47px;
}

#want-more-entries h3 span {
	background:url(../images/title-get-up-to-10-entries.png) no-repeat;
	width:274px; height:47px;
}

#add-friends-page form {margin:0 0 50px;}

#add-friends-page .field {float:left;}

label span {font-weight:normal;}

div.name {margin-right:19px;}

#add-friends-page .text {width:242px;}

#switcher-information {
	background:url(../images/sidebar-bg-top-purple.gif) left top no-repeat;
	margin:0 0 13px;
}

#switcher-information .inner {
	background:url(../images/sidebar-bg-bottom-purple.gif) left bottom no-repeat;
	padding:7px 15px 15px;
	overflow:auto;
}

#add-friends-page .button {
	background:url(../images/btn-submit-names.gif);
	width:156px;height:38px;
}

.terms {font-size:0.85em;}

.errorlist {
	clear:left;
	color:red;
	list-style:none outside none;
	margin:0;
	position:relative;
	top:-7px;
}

.errorlist li {
	margin:0;
}

#extra-inputs-JS {
	clear:both;
	overflow:hidden;
}

/*===============================
======== Thank you page =========
===============================*/
#thanks #main-content, #error #main-content {
	width:auto;
	float:none;
}

#thanks h2 {
	font-size:1.8em;
	margin-bottom:0.3em;
}

#thanks p {font-size:1.4em;}

#thanks #main-content ul {
	margin:0;
	list-style:none;
	float:right;
}

#thanks #main-content li {float:left;}

#thanks #main-content li a {
	display:block;
	position:relative;
	height:38px;
	background-color:transparent;
}

#thanks #main-content li span {height:38px;}

#visit-which-btn {width:162px;}

#visit-which-btn span {
	background:url(../images/btn-visit-which.gif) no-repeat;
	width:182px;
}

#switch-again-btn {width:132px;}

#switch-again-btn span {
	background:url(../images/btn-switch-again.gif) no-repeat;
	width:152px;
}

/*===============================
===== Footer pages (no JS / lightbox) ======
===============================*/

#footer-page #main-content {width:auto;}