/* @override 
	http://www.nextstoplondon.org/css/ef.css
*/

/* -----------------------------------------------------------

	Project:		Education first
	Version:		1.0
	Created:		01/12/08
	Modified:		18/12/08
	
		[Table of contents]
		1. Reset
		2. Typography
			2.1	Headings
			2.2	Text elements
			2.3	Lists
			2.4	Tables
			2.5	Forms
		3. Structure
			3.1	Header
			3.2	Navigation
			3.3	Content
			3.4	Footer
		4. Clear floats
	
----------------------------------------------------------- */

xx@import "diagnostics.css"; /* Remove this before the site goes live!!! */


/* -----------------------------------------------------------

	Reset
	
----------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table 			{ border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th 	{ vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: none; }


/* -----------------------------------------------------------

	Typography
	
----------------------------------------------------------- */

/* Default font settings. 
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
body { 
	font-size: 81%;
	color: #000;
	line-height: 1.5;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #2f2d50; font-family: Arial,"Helvetica Neue", Helvetica, Arial, sans-serif; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 20px; line-height: 1; margin-bottom: 14px; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; height: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img {
  margin: 0;
}


/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; }
p img       { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

a:focus, 
a:hover     { color: #2f2d50; }
a           { color: #000; text-decoration: underline; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre,code    { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } 
span.errorMsg {color:#990000;}
span.msg 	{color:#526307; font-weight:bold;}

/* Lists
-------------------------------------------------------------- */

li ul, 
li ol       { margin:0 1.5em; }
ul, ol      { margin: 0 1.5em 1.5em 1.5em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


/* Tables
-------------------------------------------------------------- */

table       { margin-bottom: 1.4em; width:100%; }
th          { font-weight: bold; background: #e9e9e9; }
th,td       { padding: 4px 10px 4px 5px; }
tr.even td  { background: #E5ECF9; }
tfoot       { font-style: italic; }
caption     { background: #eee; }


/* Forms
-------------------------------------------------------------- */

label { font-weight: normal; color: #00000; padding-right: 20px;}

fieldset    { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; }

input.text, input.title   { width: 300px; margin:0.5em 0.5em 0.5em 0; }
input.text, input.title   { border:1px solid #bbb; background:#f6f6f6; padding:5px; }
input.text:focus,
input.title:focus         { border:1px solid #999; background:#fff; }
input.title               { font-size:1.5em; }

textarea            { width: 260px; height: 120px; margin:0.5em 0.5em 0.5em 0; }
textarea            { border:1px solid #bbb; xbackground:#eee; padding:5px; font-family: arial,verdana; font-size: 1em; }
textarea:focus      { border:1px solid #999; background:#fff; }

select              { border:1px solid #ccc; background:#f6f6f6; width:200px; height: 25px; line-height: 25px;}
select:focus        { border:1px solid #999; background:#fff; }

#countryselector {padding-top:20px;}


/* -----------------------------------------------------------

	Structure
	
----------------------------------------------------------- */

body {
	background: #fff url(../img/bodybg2.jpg) repeat-x 0 0;
	margin: 0;
	text-align: center; /*ie hack for centered layout. if not centered, remove this line and the next hack in wrapper*/
}
#wrapper {
	position: relative;
	width: 950px;
	margin: auto;
	margin-top: 0;
}
.leftwrapper {
	width: 156px;
	height: 339px;
	background: transparent url(../img/leftwrapper2.png) no-repeat 0 0;
	position: absolute;
	top: 0px;
	left: -156px;
}
.rightwrapper {
	width: 156px;
	height: 339px;
	background: transparent url(../img/rightwrapper2.png) no-repeat 0 0;
	position: absolute;
	top: 0;
	right: -155px;
}
#page {
	margin: auto;
	background: #fff;
	position: relative;
	width: 950px; /*fill in the width of the page*/
	text-align: left; /*for previous ie hack*/
}

#page {
	background: transparent url() no-repeat 0 0;
	margin-bottom: 40px;
}

.container {
	float: left;
	display: inline;
	width: 950px;
}

/* Header
-------------------------------------------------------------- */
.header {
	background: transparent url(../img/headerrawbg2.jpg) no-repeat 0 0;
	height: 300px;
}
.header h1,.headernavi h1 {
	margin: 0px 0 0 0;
	width: 380px;
	height: 200px;
	padding-top: 30px;
	text-indent: -9000px;
	float: left;
	display: inline;
}
.header h1 a, .headernavi h1 a {
	display: block;
	width: 380px;
	height: 200px;
}
.header h2, .headernavi h2 {
	text-indent: -9000px;
	float: left;
	display: inline;
	width: 500px;
	margin-left: 50px;
	height: 150px;
}
.header p, .headernavi p {
	text-indent: -9000px;
	float: left;
	display: inline;
	width: 300px;
	margin-left: 120px;
	height: 90px;
}
.headernavi {
	background: transparent url(../img/headernavi.jpg) no-repeat 0 0;
	height: 344px;
}

/* Navigation
-------------------------------------------------------------- */

.main_navigation {
	float: left;
	width: 698px;
	_width: 701px;
	_margin-right: -3px;
	position: absolute;
	top: 286px;
	right:0;
	display: inline;
	background: transparent url();
	outline: 0;
}
.main_navigation a {
	xfloat: left;
	display: inline;
	outline: 0;
}
#menu1,#menu2,#menu3,#menu4,#menu5 {
	display: block;
	height: 59px;
	text-indent: -9000px;
    background: transparent url(../img/naviuus.jpg) no-repeat 0 0;
    float: left;
}
#menu1_1 {
	background: transparent url(../img/navi2uus.jpg) no-repeat 0 0;
	display: block;
	height: 59px;
	text-indent: -9000px;
    float: left;
}
#menu1 { width: 202px; background-position: 0 0; }
#menu1_1 { width: 202px; background-position: 0 0; }
#menu2 { width: 148px; background-position: -202px 0; }
#menu3 { width: 92px;  background-position: -350px 0; }
#menu4 { width: 116px; background-position: -442px 0; }
#menu5 { width: 140px; background-position: -558px 0; }

#menu1:hover { width: 202px; background-position: 0 -59px; }
#menu1_1:hover { width: 202px; background-position: 0 -59px; }
#menu2:hover { width: 148px; background-position: -202px -59px; }
#menu3:hover { width: 92px;  background-position: -350px -59px; }
#menu4:hover { width: 116px; background-position: -442px -59px; }
#menu5:hover { width: 140px; background-position: -558px -59px; }

#menu1.selected { width: 202px; background-position: 0 -59px; }
#menu1_1.selected { width: 202px; background-position: 0 -59px; }
#menu2.selected { width: 148px; background-position: -202px -59px; }
#menu3.selected { width: 92px;  background-position: -350px -59px; }
#menu4.selected { width: 116px; background-position: -442px -59px; }
#menu5.selected { width: 140px; background-position: -558px -59px; }








/* Content
-------------------------------------------------------------- */
.leftcol {
	width: 483px;
	float: left;
	display: inline;
	background: transparent url(../img/enter2.jpg) no-repeat 0px 0px;
}
.entercode {
	width: 480px;
}

.forgotpwd {
	background: transparent url(../img/arrow.jpg) no-repeat 0 7px;
	padding-left: 12px;
	height: 14px;
	float: left;
	display: inline;
	text-decoration: none;
}
.leftcol h3 {
	width: 260px;
	padding-right: 70px;
	position: relative;
	margin-top: 52px;
	margin-bottom: 5px;
	height: 53px;
	font-size: 22px;
	font-weight: bold;
	background: transparent url(../img/nuoli.jpg) no-repeat right top;
}
.formleft {
	float: left;
	display: inline;
	width: 240px;
}
.formtext {
	float: left;
	display: inline;
	width: 400px;
}
#flashcontent {
	float: left;
	display: inline;
	width: 200px;
}
.formright {
	float: left;
	display: inline;
}
#code,#code2 {
	height: 20px;
	line-height: 20px;
	background: #f2f2f2;
	border: 1px solid #bcbcbc;
	width: 220px;
	font-size: 13px;
	color: #636363;
	text-indent: 1px;
}
.entercode form {
	float: left;
	display: inline;
	padding-bottom: 10px;
	margin: 0;
}
.submit {
	float: left;
	display: inline;
	clear: both;
	width: 80px;
	border: none;
	cursor: pointer;
	height: 25px;
	text-indent: -9000px;
	_font-size: 1px;
	background: transparent url(../img/submitnew.jpg) no-repeat 0 0 ;
}

.rightcol {
	float: left;
	display: inline;
	width: 440px;
	padding-left: 27px;
	background: transparent url(../img/rightcolbg2.jpg) no-repeat -3px 0;
}
.lista ul{
	list-style: none;
	margin-left: 0 !important;
	padding-left: 0 !important;
}
.lista li{
padding-bottom: 10px;
}
.rightcol a {
	outline: 0;
}
.rightcol p {
	width: 200px;
}
.rightcol h3 {
	height: 30px;
	font-size: 22px;
	font-weight: bold;
	_padding-top: 20px;
	*padding-top: 20px;
	color: #2f2d50;
	width: 200px !important;
	margin-bottom: -5px;
}
.rightcol h4 {
	margin: 0;
	margin-bottom: 10px;
	width: 200px !important;
}
.rightcol strong{
	font-weight: bold;
	color: #37345f;
	font-size: 1.15em;
}

.dropdownlang {
	height: 25px;
	line-height: 25px;
	float: right;
	margin-right: 30px;
	margin-top: 10px;
	_margin-top: 30px;
	*margin-top: 30px;
}
a.registeryourclass {
	background: transparent url(../img/registeryourclass.jpg) no-repeat 0 0;
	height: 40px;
	display: block;
	width: 195px;
	text-indent: -9000px;
	outline: 0;
}
.register input{
	border: 1px solid #bcbcbc;
	background-color: #f2f2f2;
	width: 180px;
}
.register p {
	margin: 0;
}
.register table {
	width: 150px;
}
.submitregister {
	display: block;
	width: 80px !important;
	height: 26px !important;
	margin: 0;
	padding: 0;
	cursor: pointer;
	background: transparent url(../img/register.jpg) no-repeat 0 0;
}



/* content
-------------------------------------------------------------- */

#flashcontent {
	width: 728px;
	height: 362px;
	}

.maincontent {
	width: 740px;
	float: left;
	display: inline;
	margin-top: 20px;
	padding-top: 14px;
	margin-right: 10px;
	background: transparent url(../img/maincontentbg.jpg) no-repeat 0 0;
}
.sidebar {
	width: 200px;
	padding-top: 30px;
	float: left;
	display: inline;
}


.registration_box {
	float: left;
	display: inline;
	width: 348px;
	padding-top: 10px;
	background: transparent url(../img/registrationboxbg.jpg) no-repeat top right;
}
.registration_box_wide {
	float: left;
	display: inline;
	width: 713px;
	padding-top: 10px;
	background: transparent url(../img/registrationboxbg.jpg) no-repeat top right;
}
.registration_box2 {
	float: left;
	padding-top: 10px;
	display: inline;
	width: 337px;
	padding-left: 25px;
	border-left: 1px solid #c4c4c4;
	border-right: 1px solid #c4c4c4;
} 
.registration_box3 {
	float: left;
	padding-top: 10px;
	display: inline;
	width: 324px;
	padding-left: 25px;
	background: transparent url(../img/apinabg.jpg) no-repeat 0 0;
	min-height: 300px;
	height:auto !important;
    height:300px;
    border-left: 1px solid #c4c4c4;
} 
.registration_box input, .registration_box2 input, .registration_box_wide input, #reminderForm input { 
	width: 220px; 
	border: 1px solid #c4c4c4; 
	height: 22px; 
	font-size:0.91em; 
	color: #707070;
	line-height: 22px;
	text-indent: 5px;
}

#dob {	clear:both;	}
#dob p {	float:left;	width:242px;	padding:4px;	}
#dob>.inputField {	border:0;	float:left;	clear:none;}
#dob>select {width:100px;}
#dob label {	display:none;}

a.takequiz {
	width: 197px;
	background: transparent url(../img/takequiz.jpg) no-repeat 0 0;
	height:42px;
	display: block;
	text-indent: -9000px;
	margin-top: 160px;
}
.registration_box3 span {
	width: 197px;
	background: transparent url(../img/takequiznoactive.jpg) no-repeat 0 0;
	height:42px;
	display: block;
	text-indent: -9000px;
	margin-top: 160px;
}
.registration_box p,.registration_box2 p { margin-bottom: 5px;}
.registration_box h3, .registration_box2 h3 {
	font-weight: bold;
	font-size: 22px;
	margin-bottom: 10px;
	margin-top: 0;
}
.boxcontainer {
	width: 712px;
	float: left;
	display: inline;
	/*border-bottom: 1px solid #c4c4c4;*/
	border-top: 1px solid #c4c4c4;
}
.lilasubmit {
	background: transparent url(../img/lilabg.jpg) repeat-x 0 0;
	height: 26px !important;
	line-height: 26px;
	border: 0 !important;
	color: #ffe600 !important;
	font-weight: bold;
	cursor: pointer;
	text-align: center;
	text-indent: 0 !important;
}
.lilasubmit {
	width: 63px !important;
	margin-top: 10px;
}
#long {
	width: 142px !important;
	margin-left: 20px;
	height: 26px;
	line-height: 26px;
	border: 0;
}
.sidebar form p{ margin-top: 20px; }

.list { clear: both; width: 710px; float: left; display: inline; margin-top: 0px;}
.list h3 { font-weight: bold; float: left; display: inline;}

.studentlist { width: 650px; font-size: 0.92em; margin: 0; padding: 0;}
.studentlist td { height: 25px; line-height: 25px; }
.white .student { border-right: 1px solid #e9e9e9; }
.grey .student { border-right: 1px solid #ffffff; }
.studentlist a { text-decoration: none;}
.studentlist a:hover { text-decoration: underline; }
.studentlist img { padding-top: 9px; float: right;}
.studentlist .grey { background: #e9e9e9; }
.studentlist .white { background: #ffffff; }
.studentlist .white td span, .studentlist .grey td span{ background: transparent url(../img/exclamation.png) no-repeat 0 0; padding-left: 20px; color: #ee9201; text-decoration: none;}
.studentlist .white td span a:hover, .studentlist .grey td span a:hover { text-decoration: none !important; }

.languageselector {
	float: left;
	display: inline;
	padding-left: 40px;
	padding-top: 20px;
	height: 20px;
}
.results {
	float: left;
	display: inline;
	clear: both;
	width: 600px;
}
.results th { border-bottom: 1px solid #e9e9e9; background-color: #ffffff; }
.results .grey { background: #e9e9e9; }
.results .grey .student { border-right: 1px solid #ffffff;  }
.results .white .student { border-right: 1px solid #e9e9e9;  }

.results .highlight {background: #93AB39;};

.textcontent {
	width: 730px;
	min-height: 440px;
	height:auto !important;
    height:440px;
	background: transparent url(../img/textcontentbg.jpg) no-repeat 110% 0;
}
.textcontent ul {
	margin: 0;
	padding-left: 30px;
	padding-bottom: 10px;
	width: 400px;
}
.textcontent p {
	width: 430px;
}
.textcontent h3 {
	font-weight: bold;
}

.sponsor{
border-bottom:1px solid #c4c4c4;
padding-bottom:2em;
margin-bottom:1em
}

.sponsor img{
float:none;
}

/* FP */

#fpGallery {
	visibility:hidden;
}

/* ESSAY PAGE */

#errorMsg {
	width: 100%;
	padding:10px;
	font-weight:bold;
}

.registration_box_essay {
	float: left;
	display: inline;
	width: 348px;
	padding-top: 10px;
	background: transparent url(../img/registrationboxbg.jpg) no-repeat top right;
	/*border-right: 1px solid #c4c4c4;*/
}

.registration_box_essay p {
	margin: 11px 0;
}

.registration_box2_essay {
	float: left;
	padding-top: 10px;
	display: inline;
	width: 312px;
	padding: 0 25px;
	border-right: 1px solid #c4c4c4;
	border-left: 1px solid #c4c4c4;
} 

#submitEssay {
	float:right;
	width: 337px;
	padding-left: 25px;
	padding-bottom:25px;	
}
img#essay_instructions{
	float:left;
	margin: 5px 25px 25px 0;
}

#essayForm {
	border-top: 1px solid #c4c4c4;
	clear:both;
	width:100%;
	position:relative;
}
#essayForm textarea {
	border:1px solid #bbb; background:#f6f6f6; padding:5px;
	width: 700px;
	height: 560px;
}

#essayForm select {
	width:310px;
}

#essayForm h3 {
	margin-bottom:10px;
}

#counter {
float:right;
	position:relative;
	width: 200px;
	text-align:right;
	right:0px;
}

#photoForm {
	height: 230px;
}

#imgHolder {
	height: 200px;
	float: left;
	width: 157px;
	padding:5px;
	margin-right: 15px;
	margin-top:5px;
	border:1px solid #CCC;
}

#photoForm img {
	float: left;
	
	border:1px solid #f1f1f1;
	
}

#photoForm p {
	padding-top:80px;
}

#photoForm #fileField {
	margin-bottom:10px;
}

.lilasubmitEssay {
	background: transparent url(../img/lilabg.jpg) repeat-x 0 0;
	height: 26px !important;
	line-height: 26px;
	border: 0 !important;
	color: #ffe600 !important;
	font-weight: bold;
	cursor: pointer;
	text-align: center;
	text-indent: 0 !important;
}

#voteButton {
	background: transparent url(../img/vote_btn.jpg) repeat-x 0 0;
	height: 42px !important;
	width:100px;
	line-height: 42px;
	border: 0 !important;
	color: #ffe600 !important;
	font-weight: bold;
	cursor: pointer;
	text-align: center;
	text-indent: 0 !important;
	float:left;
}

#voteinfo {
	display:block;
	float:left;
	margin-top:25px;
	margin-left:10px;
	width:150px;
}

.lilasubmitEssay {
	
	margin-top: 10px;
}

#infoBox img {
	border: 1px solid #dbdbdb;
	padding: 10px;
}

.row {
	clear:both;
	width: 720px;
	border-bottom:1px solid #CCC;
}

.row .thumb, .row .titles, .row .content, .row .score, .row .vote {
	float:left;
}

.row .thumb {
	width: 70px;
}

.row .thumb img {
	margin:5px;
}

.row .titles {
	width: 70px;
}

.row .content {
	width: 340px;
}

.row .score {
	text-align:center;
	width: 106px;
	height: 82px;
	color: #2f2d50;
	font-weight:bold;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
}

.coreScore {
	font-size: 30px;
}

.smallScore {
	font-size: 15px;
}

.row .vote {
	text-align:center;
	width: 126px;
}

#essayList #imgHolder {
	float:left;
}

#titles {
	float:left;
	width: 67px;
	font-weight:bold;
}

#content {
	width: 250px;
}

#titleField {
	float:left;
	width:340px;
}

#titleField p {
	clear:both;
}

#votingFields {	
	float:left;
	width: 180px;
	text-align:right;
}

#votingFields img {
	vertical-align:middle;
}

#votingFields p {
	white-space:nowrap;
}

.starRow {
	clear:both;
	margin:4px;
	vertical-align:top;
	text-align:right;
}

#top, #essay {
	width: 720px;
	clear:both;
	height:auto;
}

.starwrapper  {  
	background: url("/img/star2.jpg");  
	height: 29px;  
	width: 145px;  
	margin-top:20px;
	margin-bottom:10px;
}  
.stars  {  
	height: 29px;  
	display: block;  
	position: absolute;  
}  

.star1 { width: 29px;}  
.star2 { width: 58px;}  
.star3 { width: 87px;}  
.star4 { width: 116px;}  
.star5 { width: 145px;}  

#voteRules {
	width: 300px;
	font-size:11px;
	margin-bottom:20px;
	display:none;
	clear:both;
}

#verify, #voteStatus {
	clear:both;
}

#stars1score, #stars2score, #stars3score, #stars4score, #stars5score, #starsTotalScore {
	display:inline;
}

#underStars img {
	float:none;
	margin:0;
}

#topLine {
	border-top:2px solid #CCC;
}

#submit {
	height:80px;
	margin-top:20px;
	padding-top:20px;
	border-top:1px solid #e7e7e7;
}

#submit p, #submit h3 {
	margin:0;
	padding:0;
}

#submit p .lilasubmitEssay {
	margin:0;
	margin-top:5px;
	padding:0;
}

#submit a {
	display:block;
	text-align:center;
	float:left;
	border-right: 1px solid #CCC;
	height: 40px;
	margin-right:20px;
}

#submit p a img{
	float:none;
	vertical-align:text-top;
	border:0;
	margin:0;
}

.friendTitle {
	width: 127px;
	float:left;

}

#friendForm {
	background-color:#F5F5F5;
	padding:10px;
	display:none;
}

#friendForm p {
	clear:both;
	margin-bottom:10px;
}

#commentList {
	margin-top:20px;
	border-top: 1px solid #efefef;
}

.comment {
	padding:20px;
}

.grey {
	background-color:#efefef;
}

.comment b {
	margin-right:30px;
}

.comment p {
	margin:5px;
}

.comment .date {
	font-size:10px;
}

/* Footer
-------------------------------------------------------------- */
.footer {
	clear: both;
	float: left;
	display: inline;
	width: 950px;
	height: 50px;
	border-top: 1px solid #bcbcbc;
	padding-top: 5px;
	margin-top: 10px;
	margin-bottom: 30px;
	
}
.footer img {
	float: left;
	padding-right: 20px;
}
.footer p {
	line-height: 50px;
	width: 500px;
}
p.right {
	float: right;
	width: 400px;
}

#flashcontent{
padding:0;margin:0;
width:200px;
height:400px;
}
/* -----------------------------------------------------------

	Clear floats
	
----------------------------------------------------------- */
.wrapper 		{ display: inline-block; }
.wrapper:after 	{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .wrapper { height: 1%; }
.wrapper 		{ display: block; }