/* --------------------------------------------------------------------
                                                                      
  TA DESIGN COMPETITION
              
  Author: 			Mark Hurrell & Joe Holdcroft
  Date: 			28 August 2008
  Company: 			Message Digital Design
  URL: 				message.uk.com
 
  
  Table of Contents:
  1. CSS Reset .......................................... Line 37
  2. Layout	............................................. Line 102
  3. Typography	......................................... Line 547
  4. Lists .............................................. Line 547

  5. IE7 Specific Styles ............................... See ie-7.css
  6. IE6 Specific Styles ............................... See ie.css		
  
 -------------------------------------------------------------------- */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* --------------------------------------------------------------------
                                                                      
  1. 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 {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-weight: inherit;
		font-style: inherit;
		font-family: inherit;
		vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
		outline: 0;
}

body {
		line-height: 1.4;
		background: white;
		font-size: 62.5%;
}

ol, ul {
		list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
		border-collapse: separate;
		border-spacing: 0;
}

caption, th, td {
		text-align: left;
		font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
		content: "";
}

blockquote, q {
		quotes: "" "";
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* --------------------------------------------------------------------
                                                                      
  2. Layout
    
 -------------------------------------------------------------------- */

body {
		background: #ffffff url(images/body_bg.jpg) repeat-x center 60px;
}

	div#header {
			position: relative;
			height: 60px;
			background: #ffffff;
	}
	
		div#header h1 {
				position: relative;
				margin: 0 auto;
				width: 840px;
				height: 60px;
				background: transparent url(images/logo.png) no-repeat left 17px;
		}
		
			div#header h1 a {
					position: absolute;
					top: 15px;
					width: 160px;
					height: 30px;
					text-indent: -5000%;
					overflow: hidden;
			}
		
	div#container {
			position: relative;
			margin: 0 auto;
			width: 840px;
			min-height: 600px;
			background: transparent url(images/frame.jpg) no-repeat top center;
	}

		ul#tiles {
				position: absolute;
				top: 51px;
				left: 234px;
				width: 375px;
				height: 375px;
				background: transparent;
		}
		
			ul#tiles li {
					position: relative;
					width: 125px;
					height: 125px;
					float: left;
					overflow: hidden;
			}
			
				ul#tiles li span {
						width: inherit;
						height: inherit;
						display: block;
						position: relative;
						overflow: hidden;
				}
				
				ul#tiles li span.ugly {
						background: #000000;
				}
				
				ul#tiles li span.flip {
						background: orange;
				}
				
				ul#tiles li span.pretty {
						background: #cccccc;
				}
				
					ul#tiles li span.ugly img {
							position: relative;
							top: 0;
							left: 0;
							height: 250px;
							width: 100%;
					}
					
					ul#tiles li span.pretty img {
							position: relative;
							top: -125px;
							left: 0;
							height: 250px;
							width: 100%;
					}
				
		p.feedback {
				position: absolute;
				top: -31px;
				left: 234px;
				width: 400px;
				display: none;
		}
		
		div#question {
				position: absolute;
				top: 85px;
				left: 0;
				width: 200px;
				padding-bottom: 25px;
				background: transparent url(images/boxes.png) no-repeat bottom left;
		}
		
			div#question h2 {
					position: relative;
					display: block;
					width: 199px;
					height: 50px;
					margin-top: -50px;
					background: transparent url(images/boxes.png) no-repeat 0 top;
					overflow: hidden;
					text-indent: -5000%;
			}
			
			div#question p {
					margin: 5px 20px 0 15px;
			}
				
		div#tiebreaker {
				position: absolute;
				top: 85px;
				left: 0;
				width: 200px;
				padding-bottom: 25px;
				background: transparent url(images/boxes.png) no-repeat -400px bottom;
		}
		
			div#tiebreaker h2 {
					position: relative;
					display: block;
					width: 199px;
					height: 50px;
					margin-top: -50px;
					background: transparent url(images/boxes.png) no-repeat -400px top;
					overflow: hidden;
					text-indent: -5000%;
			}
			
			div#tiebreaker p,
			div#tiebreaker form {
					margin: 5px 20px 0 15px;
			}
			
				div#tiebreaker form input {
						width: 157px;
						margin: 2px 0 10px 0;
						padding: 4px 2px;
						border: 2px solid #bbbbbb;
						background: #ffffff;
				}
				
					div#tiebreaker form input:focus {
							border: 2px solid #ce3235;
					}
					
					div#tiebreaker form button {
							display: block;
					}
			
			div#tiebreaker span.note {
					display: block;
			}
				
		div#answers {
				position: absolute;
				top: 85px;
				right: -5px;
				width: 200px;
				padding-bottom: 25px;
				background: transparent url(images/boxes.png) no-repeat -200px bottom;
		}
		
			div#answers h2 {
					position: relative;
					display: block;
					width: 199px;
					height: 50px;
					margin-top: -50px;
					background: transparent url(images/boxes.png) no-repeat -200px top;
					overflow: hidden;
					text-indent: -5000%;
			}
			
			div#answers ul {
					margin: 0 20px 0 15px;
			}
			
				div#answers ul li a.answer_1 {
						display: block;
						min-height: 28px;
						padding-top: 5px;
						padding-left: 50px;
						background: transparent url(images/bullets.png) no-repeat left 3px;
				}
				
				div#answers ul li a.answer_2 {
						display: block;
						min-height: 28px;
						padding-top: 5px;
						padding-left: 50px;
						background: transparent url(images/bullets.png) no-repeat left -195px;
				}
				
		div#progress_bar {
				position: relative;
				top: 478px;
				margin: 0 auto 0 auto;
				width: 375px;
				height: 20px;
				background: transparent url(images/progress.jpg) no-repeat;
				text-indent: -5000%;
				overflow: hidden;
		}
		
			div#progress_bar.stage_0 {
					background-position: 0 0;
			}
		
			div#progress_bar.stage_1 {
					background-position: 0 -20px;
			}
		
			div#progress_bar.stage_2 {
					background-position: 0 -40px;
			}
		
			div#progress_bar.stage_3 {
					background-position: 0 -60px;
			}
		
			div#progress_bar.stage_4 {
					background-position: 0 -80px;
			}
		
			div#progress_bar.stage_5 {
					background-position: 0 -100px;
			}
		
			div#progress_bar.stage_6 {
					background-position: 0 -120px;
			}
		
			div#progress_bar.stage_7 {
					background-position: 0 -140px;
			}
		
			div#progress_bar.stage_8 {
					background-position: 0 -160px;
			}
		
			div#progress_bar.stage_9 {
					background-position: 0 -180px;
			}
				
	div#footer {
			position: relative;
			text-align: center;
			clear: both;
			padding-bottom: 20px;
	}
	
body form {
		position: relative;
		margin: 4em auto 20px;
		width: 838px;
}

	body form fieldset {
			position: relative;
			float: left;
			margin: 20px 0 4em;
			padding: 10px;
			width: 355px;
			background: #ffffff;
	}
	
		body form fieldset.your_details {
				clear: left;
				margin-right: 30px;
				padding-top: 30px;
				background: #ffffff url(images/form_bg.png) repeat-y top left;
		}

body form fieldset.your_details legend {
		position:absolute;
		top:0px;
		margin: 0px;
}
	
		body form fieldset legend {
				position: absolute;
				display: block;
				margin: -1.35em 0 0 0;
				top: 0;
		}
		
		body form fieldset.your_details label {
				float: left;
				clear: left;
				display: block;
		}
		
			body form fieldset.your_details label {
					width: 115px;
					padding-top: 4px;
					text-align: right;
			}
 
		body form fieldset.your_details input,
 		body form fieldset.your_details select,
		body form fieldset.your_details textarea {
				float: left;
				border: 1px solid #cdcdcd;
	    		background: #ffffff;
	    		top: 0;
	    		margin-top: 0;
	    		padding: 5px;
	    }
	    
	    	body form fieldset.your_details input:focus,
 			body form fieldset.your_details select:focus,
			body form fieldset.your_details textarea:focus {
	    			border: 1px solid #ce3235;
	    	}

	 		body form fieldset.your_details input,
	 		body form fieldset.your_details select,
			body form fieldset.your_details textarea {
					margin-bottom: 5px;
					margin-left: 15px;
			}

		body form fieldset.your_position {
				background: #ffffff url(images/form_bg.png) repeat-y -90px top;
		}
		
			body form fieldset.your_position label {
					position: relative;
					float: right;
					width: 265px;
					margin-top: 3px;
					margin-right: 50px;
					margin-bottom: 20px;
			}
			
			body form fieldset.your_position input {
					position: relative;
					float: left;
					clear: both;
					margin-top: 5px;
					margin-left: 3px;
			}

		body form fieldset.submit {
				margin-top: 0;
				background: #ffffff url(images/form_bg.png) repeat-y -90px top;
		}

 			body form fieldset.submit label {
					position: relative;
					float: right;
					width: 265px;
					margin-top: 3px;
					margin-right: 50px;
					margin-bottom: 20px;
			}
			
			body form fieldset.submit input {
					position: relative;
					float: left;
					clear: both;
					margin-top: 5px;
					margin-left: 3px;
			}

			body form fieldset.submit button {
					float: left;
					margin-left: 40px;
			}
			
	body form p {
			position: absolute;
			top: -1px;
			right: 463px;
			padding: 0 3px;
			background: #ffffff;
	}
	
	p.error {
			position: absolute;
			width: 759px;
			top: 60px;
			left: -418px;
			margin: 0 0 0 50%;
			padding: 0 10px;
			background: #ce3235;
	}
	
	div#thankyou_container {
			position: relative;
			margin: 80px auto;
			width: 840px;
			padding: 10px 10px;
			background: #ffffff;
	}
	
	div#thankyou_container h2 {
			position: relative;
			margin: 0 20px;
	}
	
	div#thankyou_container p {
			position: relative;
			width: 250px;
			margin-left: 31px;
			margin-bottom: 2em;
	}

	div#terms_container {
			position: relative;
			margin: 80px auto;
			width: 840px;
			padding: 10px 10px;
			background: #ffffff;
	}
	
		div#terms_container.welcome {
				min-height: 284px;
		}
	
	div#terms_container h2 {
			position: relative;
			margin: 0 20px;
	}
		div#terms_container h2.welcome {	
				margin-top: 25px;
				margin-bottom: 0;
		}
		
	div#terms_container h3 {
			position: relative;
			margin: 0 20px;
	}
	
	div#terms_container p.play {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			width: 412px;
			height: 304px;
			margin: 0;
			background: transparent url(images/charlie-2010.jpg) no-repeat top right;
	}
	
		div#terms_container p.play a {
				display: block;
				position: absolute;
				top: 16px;
				right: 16px;
				width: 180px;
				height: 41px;
		}
	
	div#terms_container p {
			position: relative;
			width: 400px;
			margin: 2em 20px;
	}
	
	div#terms_container p.signature {
			position: relative;
			display: block;
			width: 250px;
			height: 51px;
			margin-top: 0;
			background: transparent url(images/signature.png) no-repeat top left;
			text-indent: -5000%;
	}

	div#terms_container p.welcome {
			margin-top: 0.5em;
			margin-bottom: 0.5em;
	}

	div#terms_container p.and-charlie {
			position: absolute;
			bottom: 12px;
			left: 180px;
	}
	
	body div#terms_container p.note {
			margin-top: 30px;
			width: 780px;
			padding-top: 30px;
			border-top: 1px solid #cccccc;
	}



 
 
 
 
 
 
 
/* --------------------------------------------------------------------
                                                                      
  3. Typography
    
 -------------------------------------------------------------------- */

div#question p,
div#answers ul li a,
div#tiebreaker p,
p.feedback {
		font-family: Helvetica, Arial, sans-serif;
		color: #333333;
		font-size: 1.3em;
		font-weight: 800;
		line-height: 1.6;
		text-decoration: none;
}

	div#answers ul li.wrong a {
			text-decoration: line-through;
			color: #ce3235;
	}

div#tiebreaker span.note {
    	font-weight: 400;
    	font-size: 0.75em;
    	color: #666666;
}

body form fieldset legend {
		font-family: Helvetica, Arial, sans-serif;
		color: #555555;
		font-size: 1.8em;
		font-weight: 800;
		line-height: 1.6;
}

body form fieldset label,
body form p {
		font-family: Helvetica, Arial, sans-serif;
		color: #777777;
		font-size: 1.1em;
		font-weight: 400;
		line-height: 1.6;
}

	body form .compulsory {
			color: #444444;
			font-weight: 800;
	}

body form fieldset input,
body form fieldset select,
body form fieldset textarea {
		font-family: Helvetica, Arial, sans-serif;
		color: #999999;
		font-size: 1.1em;
		font-weight: 800;
		line-height: 1.6;
}

	body form fieldset.your_details input {
			line-height: 1;
	}

	body form fieldset input:focus,
	body form fieldset select:focus,
	body form fieldset textarea:focus {
			color: #b32c30;
	}
	
p.error {
		font-family: Helvetica, Arial, sans-serif;
		color: #ffffff;
		font-size: 1.1em;
		font-weight: 800;
		line-height: 1.6;
}

div#thankyou_container h2,
div#terms_container h2 {
		font-family: Helvetica, Arial, sans-serif;
		color: #ce3235;
		font-size: 4.8em;
		text-transform: uppercase;
		/* font-style: italic; */
		letter-spacing: -3px;
		font-weight: 800;
		line-height: 1.6;
}

	div#terms_container h2.welcome {
			color: #454545;
			letter-spacing: normal;
			font-size: 2.4em;
			text-transform: none;
	}

div#terms_container h3 {
		font-family: Helvetica, Arial, sans-serif;
		color: #444444;
		font-size: 1.6em;
		font-weight: 800;
		line-height: 1.6;
}

body div#terms_container p {
		font-family: Georgia, Times, serif;
		font-style: italic;
		color: #777777;
}

div#terms_container p.welcome {
		font-family: Helvetica, Arial, sans-serif;
		color: #999999;
		font-style: normal;
		font-size: 1.3em;
		font-weight: 400;
}

	div#terms_container p.welcome em {
			font-style: italic;
	}
	
	div#terms_container p.welcome strong {
			color: #777777;
			font-style: normal;
			font-weight: 800;
	}

	div#terms_container p.play a {
			text-indent: -5000%;
	}
	
body div#terms_container p.note {
			font-family: Arial, Helvetica, sans-serif;
			color: #676767;
			font-size: 1em;
			font-weight: 400;
			line-height: 1.6;
			font-style: normal;
}

div#thankyou_container p,
div#terms_container p {
		font-family: Helvetica, Arial, sans-serif;
		color: #444444;
		font-size: 1.2em;
		font-weight: 400;
		line-height: 1.6;
}

div#terms_container ol {
}
	
	div#terms_container li {
			font-family: Arial, Helvetica, sans-serif;
			color: #333333;
			font-size: 1.1em;
			font-weight: 400;
			line-height: 1.6;
	}
	
		div#terms_container li li {
				font-size: 1em;
				color: #888888;
		}

		div#terms_container li li li {
				font-size: 1em;
		}

	div#thankyou_container p strong {
			font-weight: 800;
			font-size: 1.1em;
	}

div#footer a {
		font-family: Arial, Helvetica, sans-serif;
		color: #999999;
		text-decoration: none;
}

	div#footer a span {
			font-family: Georgia, Times, serif;
			color: #999999;
			font-size: 1.1em;
	}




/* --------------------------------------------------------------------
                                                                      
  4. Lists
    
 -------------------------------------------------------------------- */

ol {
		list-style: decimal;
		margin: 0.8em 40px 0;
		width: 450px;
}

	ol li {
			position: relative;
			margin-bottom: 0.8em;
	}
		ol li ol {
				list-style: lower-latin;
		}
			ol li ol li {
			}
				ol li ol li ol {
						list-style: lower-roman;
				}