/* ------------------------------------------ */
/*                                            */
/* CSS Layouts for TEXTPREFS by Message       */
/*                                            */
/* Mark Hurrell - 03-2008                     */
/*                                            */
/* See layout_ie7.css for IE7 specific styles */
/*                                            */
/* See layout_ie.css for IE6 & lower styles   */
/*                                            */
/* -                                          */
/*                                            */
/* textprefs.com                              */
/*                                            */
/* message.uk.com                             */
/*                                            */
/* ------------------------------------------ */







/* 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.5em;
		color: black;
		background: white;
		font-size: 62.5%;
		font-family: Helvetica, Arial, sans-serif;
}

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: "" "";
}




/* Basic Layout */

html, body /* modified for IE - see layout_ie.css */ {
		height: 100%;
		min-width: 780px;
}

#container /* modified for IE - see layout_ie.css */ {
		margin: 0 10px -3em 10px;
		padding: 0;
		text-align: center;
		position: relative;
		min-height: 100%;
		height: auto;
}

	#container.welcome {
			background: #e1e65e url(images/body_bg.png) no-repeat top center;
	}
	
		#container.welcome p {
				margin-top: 1em;
				line-height: 1;
		}
	
#instructions {
		background: #e1e65e url(images/body_bg.png) no-repeat top center;
		text-align: left;
		padding-left: 70px;
		border-top: 10px solid #ffffff;
		min-height: 24.3em;
		/* margin-top: 10px; */
}

	#container #instructions_text {
			position: absolute;
			font-size: 1.1em;
			color: #333333;
			width: 25em;
			left: 267px;
			top: 72px;
			line-height: 1.16;
	}
	
#feedback {
		display: block;
		clear: left;
		margin-left: 200px;
}

	#container #feedback p {
			clear: left;
			width: 500px;
			top: -2px;
			height: 2.1em;
			position: relative;
			display: block;
			font-size: 1.2em;
	}
	
		#container #feedback p.results {
				height: auto;
				margin: 2.1em 0 2em /* -0.6em */;
				background: #f3f5bc;
				border-top: 1px solid #c8cb9c;
				border-bottom: 1px solid #c8cb9c;
				padding: 0.45em 0.6em;
				width: 30em;
		}
		
		#container #feedback p.email {
				width: 30em;
				font-size: 1em;
				margin-top: -1.6em;
				margin-bottom: 2.5em;
		}
	
#controls {
		display: block;
		clear: left;
}

	#container #controls p {
			clear: left;
			text-align: right;
			width: 110px;
			height: 2.1em;
			position: relative;
			display: block;
			font-size: 1.2em;
	}
	
		#container #controls p.font_select {
				margin-top: 14px;
				height: 1.4em;
				line-height: auto;
	}
	
div#submit_prefs {
		display: block;
		margin-top: 14px;
		margin-right: 70px;
		background: transparent url(images/form1_topleft.png) no-repeat top left;
		position: relative;
}

	#form1 {
			display: block;
			background: transparent url(images/form1_topright.png) no-repeat top right;
			padding: 0 20px;
	}

		#form1 fieldset {
				display: block;
				background: #f3f5bc;
				height: 61px;
				padding: 0;
				position: relative;
				border-top: 1px solid #f3f5bc;
		}
		
			#form1 fieldset p {
					display: block;
					position: absolute;
					left: 14.75em;
					font-size: 1.2em;
					color: #333333;
					top: 24px;
			}
		
		#container #form1 button /* modified for IE - see layout_ie.css */ {
				position: relative;
				display: block;
				border: none;
				padding: 0;
				margin: 16px 0 0 0 ;
				width: 150px;
				height: 30px;
				background: transparent url(images/submit_button_all.png) no-repeat right 0;
		}
		
			#container #form1 button:hover {
					background: transparent url(images/submit_button_all.png) no-repeat right -30px;
			}
			
			#container #form1 button span {
					position: absolute;
					font-size: 1%;
					left: -1000px;
			}
		
		#container #form1 #button_deactivated /* modified for IE - see layout_ie.css */ {
				position: relative;
				display: block;
				border: none;
				padding: 0;
				margin: 16px 0 0 0 ;
				width: 150px;
				height: 30px;
				background: transparent url(images/submit_button_fade.png) no-repeat right 0;
		}
			
			#container #form1 #button_deactivated span {
					position: absolute;
					font-size: 1%;
					left: -1000px;
			}
						
#col_outer { 
		/* styling only required for IE & IE7 - see layout_ie.css & layout_ie7.css */ 
		padding-bottom: 7em;
}

	#col /* modified for IE7 - see layout_ie7.css */ {
			position: relative;
			top: 35px;
			left: 90px;
			text-align: left;
	}

		#col p {
				position: relative;
				margin-bottom: 1em;
		}
		
#query {
		display: none;
}

table {
		width: 32em;
		font-size: 1.25em;
		position: relative;
		display: block;
		margin: 62px auto 0;
		background: #f3f5bc;
}

	th {
			width: 8em;
			height: 2.6em;
	}
	
	td {
			height: 1.8em;
	}
	
#footer {
		/* position: absolute; */
		position: absolute;
		width: 100%;
		background: #ffffff;
		bottom: 0;
		height: 2em;
		left: 0;
		padding: 1em 0;
		text-align: center;
		color: #535353;
}

	#footer p {
		font-size: 1em;
		line-height: 1;
		padding: 0;
		margin: 0;
	}



/* Typography */

h1.logo {
		display: block;
		background: transparent url(images/logo.png) no-repeat center 45px;
		width: 100%;
		border-top: 10px solid white;
		height: 433px;
		margin: 0 auto;
		position: relative;
		top: 0;
		overflow: hidden;
}

	h1 span {
		position: absolute;
		left: -1000px;
		font-size: 1%;
	}
	
h1.text {
		position: relative;
		margin: 23px 0 24px 20px;
		float: left;
		font-size: 1.8em;
		color: #333333;
		overflow: visible;
}
	
h1.text_confirm {
		position: relative;
		margin: 58px 0 24px 200px;
		float: left;
		font-size: 1.8em;
		color: #333333;
		overflow: visible;
}
	
h2 {
		margin-top: 25px;
		font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
		color: #333333;
		font-size: 1.4em;
		position: relative;
		font-weight: 400;
}

#col.arial p {
		font-family: Arial;
}

#col.helvetica p {
		font-family: Helvetica;
}

#col.lucida p {
		font-family: "Lucida Grande", "Lucida Sans Unicode";
}

#col.trebuchet p {
		font-family: "Trebuchet MS";
}

#col.verdana p {
		font-family: Verdana;
}

#col.times p {
		font-family: Times, "Times New Roman";
}

#col.georgia p {
		font-family: Georgia;
}

#col.courier p {
		font-family: Courier, "Courier New";
}

a.smaller {
		display: block;
		width: 20px;
		height: 20px;
		background: transparent url(images/minus2.png) no-repeat left 0;
		overflow: hidden;
		position: absolute;
		top: -5px;
		right: -30px;
}

	a.smaller:hover {
		background: transparent url(images/minus2.png) no-repeat left -20px;
	}

a.bigger {
		display: block;
		width: 20px;
		height: 20px;
		background: transparent url(images/plus2.png) no-repeat left 0;
		overflow: hidden;
		position: absolute;
		top: -5px;
		right: -60px;
}

	a.bigger:hover {
		background: transparent url(images/plus2.png) no-repeat left -20px;
	}

	a.smaller span, a.bigger span {
			font-size: 1%;
			position: absolute;
			left: -1000px;
	}
	
#container a.font {
		display: block;
		position: absolute;
		width: 33px;
		height: 1em;
		padding-left: 17px;
		background: transparent url(images/font_button.png) no-repeat left -185px;
		font-size: 1.8em;
		bottom: 0;
		text-decoration: none;
		color: #333333;
		font-weight: 100;
		text-align: left;
}

	#container a.font_selected  {
			display: block;
			position: absolute;
			width: 33px;
			height: 1em;
			padding-left: 17px;
			background: transparent url(images/font_button.png) no-repeat left 1px;
			font-size: 1.8em;
			bottom: 0;
			text-decoration: none;
			color: #333333;
			font-weight: 100;
			font-stretch: wider;
			text-align: left;
	}

	#arial {
			right: -60px;
			font-family: Arial;
	}
	
		#arial span /* modified for IE7 - see layout_ie7.css */ {
			position: relative;
		}

	#helvetica {
			right: -120px;
			font-family: Helvetica;
	}

		#helvetica span {
			position: relative;
			top: 2px;
		}

	#lucida {
			right: -180px;
			font-family: "Lucida Grande", "Lucida Sans Unicode";
	}

		#lucida span /* modified for IE7 - see layout_ie7.css */ {
			position: relative;
		}

	#trebuchet {
			right: -240px;
			font-family: "Trebuchet MS";
	}

		#trebuchet span /* modified for IE7 - see layout_ie7.css */ {
			position: relative;
		}

	#verdana {
			right: -300px;
			font-family: Verdana;
	}

		#verdana span {
			position: relative;
			top: -1px;
		}

	#times {
			right: -360px;
			font-family: Times, "Times New Roman";
	}

		#times span {
			position: relative;
			top: 2px;
		}

	#georgia {
			right: -420px;
			font-family: Georgia;
	}

		#georgia span {
			position: relative;
			top: 1px;
		}

	#courier {
			right: -480px;
			font-family: Courier, "Courier New";
	}

		#courier span /* modified for IE7 - see layout_ie7.css */ {
			position: relative;
			top: 2px;
		}

a#logo_small {
		width: 70px;
		height: 85px;
		display: block;
		position: absolute;
		left: 0;
		top: 10px;
		background: transparent url(images/logo_small.png) no-repeat top center;
		overflow: hidden;
}

	a#logo_small span {
			position: absolute;
			left: -1000px;
			font-size: 1%;
	}

p#test {
		padding-bottom: 3em;
}

a#take_test {
		display: block;
		position: relative;
		background: url(images/button_end.png) no-repeat right 0;
		width: 20em;
		margin: 35px auto;
		text-decoration: none;
}

	a#take_test span {
			display: block;
			height: 18px;
			margin-right: 15px;
			padding: 12px 0 10px 15px;
			background: url(images/button.png) no-repeat left 0;
			text-transform: uppercase;
			color: #ffffff;
			font-size: 1.4em;
			cursor: pointer;
	}
	
	a#take_test:hover {
		background: url(images/button_end.png) no-repeat right -40px;
	}
	
		a#take_test:hover span {
				background: url(images/button.png) no-repeat left -40px;
				padding: 13px 0 9px 15px;
		}
		
a#reset {
		position: absolute;
		right: 10px;
		top: 24px;
		font-size: 1.2em;
}
	
#container p {
		color: #333333;
		font-size: 1.1em;
}


/* tell a friend */
h2 { margin-bottom: 10px; }
label, input.button { display: block; }
label {
	color: #333333;
	margin-top: 5px;
}
input.button { margin: 5px 0; }
form.tellafriend { padding-bottom: 5px; }
p#form { margin-top: 0 !important; }

#instructions .bignum {
	margin-top: 100px;
	font-size: 200px;
}

em {
	font-style: italic;
}