/* -------------------------------------------------------------- 
  
   CSS Framework
   Web Design & Development by Studio 24 Ltd
   www.studio24.net - (0870) 241 6159
     
-------------------------------------------------------------- */


@import "reset.css";



/* =CONTAINERS
-------------------------------------------------------------- */

body {
    background:#000 url(../img/layout/body-bg.gif) repeat-x 0 0;
}

div#container { /* set as 'standard' width, centred container for 1024x768 site */
    position:relative;
    width: 960px;
    margin: 0 auto;
}

div#branding {
    height:100px;
}

div#footer {
    clear: both;
    float:left;
    position:relative;
    top:20px;
    border-top:1px solid #333;
    padding:10px 20px 20px 20px;
    margin-top:20px;
    margin-bottom:80px;
    font-size:.95em;
    width:920px;
    background:#000;
}

/* =BRANDING
-------------------------------------------------------------- */
div#branding img#mrc-logo {
    position:absolute;
    top:10px;
    right:20px;
}

div#branding #logo {
    margin-left:14px;
}

/* =SITE-TOOLS
-------------------------------------------------------------- */
ul#site-tools {
    list-style-type: none;
} 

div#site-search {
}

/* =NAV-PRIMARY
-------------------------------------------------------------- */

ul#nav-primary {
    list-style-type: none;
} 

ul#nav-primary li {
    display:inline;
}

ul#nav-primary li a {
    text-decoration: none;
    text-indent: -9999px;
    display:block;
    position:absolute;
    height:36px;
    float:left;
    background:transparent url(../img/layout/prim-nav-sprite.png) 0 0;
}

/* home */
ul#nav-primary li#home a {
    top:73px;
    left:300px;
    width:77px;
}
ul#nav-primary li#home a:hover {
    background-position: 0 -36px;
}
body.home ul#nav-primary li#home a, body.home ul#nav-primary li#home a:hover {
    background-position: 0 -72px;
}

/* take tests */
ul#nav-primary li#take-tests a {
    top:73px;
    left:387px;
    width:115px;
    background-position:-87px 0;
}
ul#nav-primary li#take-tests a:hover {
    background-position: -87px -36px;
}
body.take-tests ul#nav-primary li#take-tests a, body.take-tests ul#nav-primary li#take-tests a:hover {
    background-position: -87px -72px;
}

/* my scores */
ul#nav-primary li#my-scores a {
    top:73px;
    left:512px;
    width:120px;
    background-position:-212px 0;
}
ul#nav-primary li#my-scores a:hover {
    background-position: -212px -36px;
}
body.my-scores ul#nav-primary li#my-scores a, body.my-scores ul#nav-primary li#my-scores a:hover {
    background-position: -212px -72px;
}

/* about us */
ul#nav-primary li#about-us a {
    top:73px;
    left:625px;
    width:115px;
    background-position:-325px 0;
}
ul#nav-primary li#about-us a:hover {
    background-position: -325px -36px;
}
body.about-us ul#nav-primary li#about-us a, body.about-us ul#nav-primary li#about-us a:hover {
    background-position: -325px -72px;
}

ul#nav-primary li#site-tools-3 a {
	position:absolute;
    top:75px;
    right:75px;
    color: white;
    height: 18px;
    padding:0 5px;
    border-right:1px solid white;
    text-indent:0;
    background:0 none;
}

ul#nav-primary li#site-tools-4 a {
	position:absolute;
    top:75px;
    right:20px;
    color: white;
     text-indent:0;
     background:0 none;
}
ul#nav-primary li#site-tools-3 a:hover, ul#nav-primary li#site-tools-4 a:hover {
	color: #33CC00;
}


ul#nav-primary li#site-tools a {
	
    position:absolute;
    top:75px;
    right:20px;
    background-image: none;
    /*text-indent:-99999px;*/
    letter-spacing: 1px;
    height:20px;
    width:95px;
    /*background:#000 url(../img/layout/site-tools-sprite.png) 0 0 no-repeat;*/
    color: white;
}
ul#nav-primary li#site-tools a:hover {
   /* background:#000 url(../img/layout/site-tools-sprite.png) 0 -25px no-repeat;*/
}

ul#nav-primary li#site-tools-1 a {
    position:absolute;
    top:75px;
    right:73px;
    background-image: none;
    text-indent:-99999px;
    letter-spacing: 1px;
    height:20px;
    width:72px;
    background:#000 url(../img/layout/site-tools-sprite.png) 0 -50px no-repeat;
}
ul#nav-primary li#site-tools-1 a:hover {
    background:#000 url(../img/layout/site-tools-sprite.png) 0 -75px no-repeat;
}

ul#nav-primary li#site-tools-2 a{
    position:absolute;
    top:75px;
    right:20px;
    color: white;
    height: 18px;
    padding:0 5px;
    text-indent:0;
    background:0 none;


}
ul#nav-primary li#site-tools-2 a:hover {
   /* background:#000 url(../img/layout/site-tools-sprite.png) 0 -125px no-repeat;*/
   color: #33CC00;
}
p.logged-in-as {
	position:absolute; 
	top:100px;
	right:0;
	text-align:right;
	padding:5px 25px 0 0;
	color:#999;
}

/* =NAV-SECONDARY
-------------------------------------------------------------- */

ul#nav-secondary {
    list-style-type: none;
    margin:0;
} 

ul#nav-secondary li a {
    display:block;
    padding-left:23px;
    width:212px;
    height:28px;
    text-decoration: none;
    font-size: 1.15em;
    color:#ccc;
    line-height:24px;
    background: transparent url(../img/layout/nav-sec-sprite.png) no-repeat 0 0;
}
ul#nav-secondary li a:hover, body.view-all li#view-all a, body.latest-tests li#latest-tests a, body.popular-tests li#popular-tests a, body.most-played li#most-played a 
{
    background: transparent url(../img/layout/nav-sec-sprite.png) no-repeat 0 -28px;
}
ul#nav-secondary li a:hover {
    color:#fff;
}
body.view-all li#view-all a, body.latest-tests li#latest-tests a, body.popular-tests li#popular-tests a, body.most-played li#most-played a {
    color:#fff;
}

/* =NAV-TERTIRARY
-------------------------------------------------------------- */

ul#nav-tertiary {
    list-style-type: none;
} 


/* =BREADCRUMB
-------------------------------------------------------------- */

ul#nav-breadcrumb {
    list-style-type: none;
} 


/* =CONTENT CONTAINERS
-------------------------------------------------------------- */

/* custom layout with background image for 'generic' pages */

body.about-us div#content-primary, body.terms div#content-primary, body.privacy div#content-primary, body.error div#content-primary, body.contact div#content-primary, body.generic div#content-primary  {
	padding-top:20px;
    padding-left:270px;
    padding-right:250px;
    width:416px;
}

body.about-us div#content {
    background:transparent url(../img/layout/about-us-BG.jpg) no-repeat 0 0; 
}

body.terms div#content {
    background:transparent url(../img/layout/terms-BG.jpg) no-repeat -20px 0;
}

body.privacy div#content {
    background:transparent url(../img/layout/privacy-BG.jpg) no-repeat 0 0;
}

div#content-primary {
}

body.two-col div#content-primary  {
    float:right;
    position:relative;
    right:10px;
    margin-top:18px;
    width:676px;
}

body.three-col div#content-primary  {
    float:left;
    width:50%;
}

div#content-secondary {
}

div#content-secondary p {
	padding-left:3px;
}

body.two-col div#content-secondary  {
    float:left;
    position:relative;
    margin-left:20px;
    margin-top:28px;
    width:222px;
    display:inline; /* for ie6 */
}

body.three-col div#content-secondary  {
    float:left;
    margin-left:20px;
    width:20%;
    background:#999;
}

div#content-tertiary {

} 

body.three-col div#content-tertiary  {
    float:left;
    margin-left:20px;
    width:20%;
    background:#eee;
}


/* =SITE-INFO
-------------------------------------------------------------- */
ul#site-info {
    list-style-type: none;
} 

ul#site-info li {
}

/* =FOOTER
-------------------------------------------------------------- */
div#footer p#credits {
    float:right;
    text-align:right;
}

div#footer p span {
    padding-left: 6px;
    margin-left:4px;
    border-left:solid 1px #333;
}


/* =BASIC TYPOGRAPHY
-------------------------------------------------------------- */

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%; /* Dont resize here, resize text elements below */
    line-height: 1.125em;
    color:#ddd;
/*     color:#999; */
}

p, ul, ol, dl, table, form {
    font-size: 0.75em; /* 12px - changing this will mean you have to re-calculate all nested font-sizing - just leave it alone! */
}

p {
    margin: 0 0 1em 0;
}

h1, h2, h3, h4, h5, h6 {
    line-height:1.5em;
    font-weight: normal;
}

h1 {
    font-family:Corbel, Arial, Helvetica, sans-serif;
	font-size: 2em; /* 32px */
    font-size: 1.5em; /* 24px */
}

h2 {
    font-family:Corbel, Arial, Helvetica, sans-serif;
	font-size: 1.75em; /* 28px */
    font-size: 1.3em; /* 24px */
}

h3 {
    font-family:Corbel, Arial, Helvetica, sans-serif;
    font-size: 1.5em; /* 24px */
    font-size:1.25em;
}
h3 em{
	color:#1DEFB0;
}
h4 {
    font-family:Corbel, Arial, Helvetica, sans-serif;
	font-size: 1em; /* 20px */
}

h5 {
    font-size: 1em; /* 16px */
    font-weight: bold;
}

h6 {
    font-size: 0.75em; /* 12px */
    font-weight: bold;
}

/* =NESTED HEADINGS */
ul h1, ol h1, table h1 {
    font-size: 2.67em;
}

ul h2, ol h2, table h2 {
    font-size: 2.34em;
}

ul h3, ol h3, table h3 {
    font-size: 2em;
}

ul h4, ol h4, table h4 {
    font-size: 1.67em;
}

ul h5, ol h5, table h5 {
    font-size: 1.33em;
}

ul h6, ol h6, table h6 {
    font-size: 1em;
}

p.text-primary { 
    padding-top: 50px; 
}

p.highlight {
    margin-top:10px;
    margin-bottom:15px;
    padding-bottom:45px;
    color:#669933;
    font-size: 1.1em; /* 16px */
    line-height: 1.1em;
}

/* used for pullquote on Test Detail page */
div.highlight {
	font-size: 1.4em;
}


/* image replacement */
h2.view-tests-by, h2.tests-by-type {
    display: block;
    height:46px;
    text-indent:-9999px;
    background:transparent url(../img/layout/general-sprite.png) no-repeat 0 -47px;
}
h2.tests-by-type {
    background:transparent url(../img/layout/general-sprite.png) no-repeat 0 -93px;
}

/* =LINKS
-------------------------------------------------------------- */

a:link, a:visited, a:focus, a:active {
    color:#fff;
   	outline: none;
}

a:hover {
    color:#33cc00;
}

#skipLink { 
    position:absolute;
    left:-9000px;
    top:0; 
    z-index:20;
} 


a.info {
	padding-left:20px;
	display:block;
    background:transparent url(../img/icons/info.png) no-repeat 0 0;
}

a.pdf {
	padding-left:20px;
	background:transparent url(../img/icons/pdf.png) no-repeat 0 0;
}


/* accordian */
div.accordion-wrapper {
    width:222px;
    height:290px;
    margin-bottom:1em;
}
ul.accordion {
    margin:0;
}
ul.accordion li {
    list-style-type: none;
}
ul.accordion li h3 {
    font-family:Arial, Helvetica, sans-serif;
    clear:both;
    font-size: 1em;
/*  display:block; */
}

ul.accordion li h3 a {
    display: block;
    width:202px;
    height:20px;
    color:#ccc;
    padding:3px 10px 3px 10px;
    border-bottom:solid 1px #000;
    background:#202020 url(../img/layout/acc-arrow.gif) no-repeat 202px 1px ;
/*  width:100%; */
    text-decoration: none;
}
ul.accordion li h3 a:hover {
    color:#fff;
    background:#101010 url(../img/layout/acc-arrow.gif) no-repeat 202px -27px;
}
ul.accordion li h3.active a {
    color:#fff;
    background:#101010 url(../img/layout/acc-arrow.gif) no-repeat 202px 1px;
}

ul.accordion li h3 a span {
    color:#666;
}

ul.accordion li div {   
    background:transparent url(../img/layout/accordion-bg.png) repeat-x bottom left;
}
ul.accordion li div p {
    margin:10px;
}
ul.accordion li div p a {
    display:block;
    height:11px;
    line-height: 10px;
    float:right;
    text-decoration: none;
    margin-bottom:20px;
    padding-right:10px;
    background:transparent url(../img/icons/link-arrow.gif) no-repeat right 0;
/*  outline:solid 1px;   */
}
ul.accordion li div p a:hover {
    background:transparent url(../img/icons/link-arrow-roll.gif) no-repeat right 0;
}

/* list of tests */
ul.accordion li ul {
	margin:3px 0 0 0;
	padding:0;
}
ul.accordion ul li a {
	display:block;
	text-decoration: none;
	padding-left:23px;
	line-height:24px;
	background:transparent url(../img/layout/accordian-sprite.gif) no-repeat scroll 0 0;
}
ul.accordion ul li a:hover {
	background:transparent url(../img/layout/accordian-sprite.gif) no-repeat scroll 0 -28px;
}
	
/* =LISTS
-------------------------------------------------------------- */

ul {
    margin: 0 0 1em 2em;
}

ol { 
    margin-left: 2.4em; /* larger left margin to line up numeral with bullets on unordered lists */
    margin-bottom: 1em;
}

ol.alpha {
    list-style-type: lower-alpha;
}

dl {
    margin: 0 0 1em 2em;
}

dt {
    font-weight: bold;
}

dt, dd {
    margin: 0 0 0.5em 0 ;
}

/* =NESTED ELEMENTS - resetting the font-sizes */
ul ul, ol ol, ul ol, ol ul, dd ul, dd ol,
table ul, table ol, ul table, ol table,
ul p, ol p, dl p, table p, p code, p pre,
form ul, form ol, form dl, form table, form code, form pre, form p
{
    font-size: 100%;
}

ul ul, ol ol, ul ol, ol ul, dd ul, dd ol
{
    margin-bottom: 0;
}


/* =OTHER TEXT ELEMENTS
-------------------------------------------------------------- */

blockquote { 

}

pre, code {
    font-size: 0.85em;
    margin: 0 0 1em 0;
}

/* new hr style to allow for browser differences */
hr {
    border: none 0;
    border-top: 1px solid #333;/*the border*/
    height: 1px; /*whatever the total width of the border-top and border-bottom equal*/
    background-color: #333;
    clear: both;
}

/* =TABLES
-------------------------------------------------------------- */

/* NOTE: tables still need 'cellspacing="0"' in the markup for browser reset consistency */

table {
    width: auto;
    margin: 0 0 1em 0;
    border-top:1px solid #ddd;
    border-left:1px solid #ddd;
}

th,td {
    padding: 0.3em 0.4em 0.2em 0.4em;
    border-bottom:1px solid #ddd;
    border-right:1px solid #ddd;
}

th {
    font-weight:bold;
}

table .alt { /* use this class on every other <tr> for a zebra effect - change colour as suits */
    background: #edf3fe;
}



/* -------------------------------------------------------------- 
   -------------------------------------------------------------- 
                        FORMS
   -------------------------------------------------------------- 
   -------------------------------------------------------------- */
  

 
form.simple-form {
	margin:0;
	padding:0;
}
 

form.simple-form span {
	font-size:0.8em;
	font-variant: small-caps;
}

form.simple-form label {
	float:left;
	width:180px;
}

form.simple-form fieldset {
	border:0 none;
}

form.simple-form input, form.simple-form  select {
	padding:2px 0 2px 2px;
	background: #ccc;
	width:200px;
	border:solid 0 #fff; /* remove the standard border */
}
form.simple-form input[type=checkbox] {
	width:auto;
}
form.simple-form  input:focus, form.simple-form  select:focus, form.simple-form  select#Country:focus {
	background:#fff;
}
form.simple-form div {
	margin-top:15px;
}

form.simple-form  #submit-element {
	clear:both;
	outline: none;
}

/* required fields */
form.simple-form  .required {
	position:relative;
	left:-7px;
	padding-left:8px;
	background: url(../img/layout/required.gif) top left no-repeat;
	/*background:#000 url(../img/layout/required.gif) top left no-repeat;*/
	clear: both;	
	float:left;
	width:173px;
}
#dashboard form.simple-form  .required{
	background: none;
	background: url(../img/layout/required.gif) top left no-repeat;
}


/* =DEFAULT-FORM-STYLES
----------------------------------------------- */

form.default-form {
}

form.default-form fieldset {    
    margin: 1em 0 0 0;
    padding: 0;
    border: 1px solid #EEE;
}

form.default-form fieldset.actions {
    border: none;
}

form.default-form legend {
    font-weight: bold;
    padding:.5em;
    margin-left:1em;
}

form.default-form p {

}

form.default-form div {
    display: block;
    width: 100%;
    float: left;
    padding: 0.5em 0 0.5em 0;
    border-top: 1px solid #EEE;
}

form.default-form div.alt {
    background: #edf3fe; /* example background colour for optional 'zebra' effect */
}

form.default-form label {
    position: relative;
    top: 0.15em;
    padding: 0 0 0 1em;
    width: 15em; /* change this width according to your site design to line things up */
    float: left;
}

form.default-form label em {
    position: absolute;
    right: 0.5em;
    color: red;
    font-weight: bold;
}

form.default-form .radio, form.default-form .checkbox {
    position: relative;
    top: 0.2em;
    float: left;
    margin: 0 0.5em 0 0.5em;
    width: auto;
}

form.default-form #day, form.default-form #month, form.default-form #year {
    position: relative;
    top: 0;
    width: 4.8em; /* small width set for date selection dropdowns */
}

form.default-form fieldset.actions {
    border: none;
    text-align:right; /* set right or left as suits your design */
}

form.default-form fieldset.actions p {
    display: inline;
}

form.default-form #submit {
    width: auto;
    outline: none;
}

form.default-form input, form.default-form textarea, form.default-form select {
    width: 15em;    
}

form.default-form .error { /* example highlighting style for form validation */
    border: 1px solid red;
    background: #FFCCCC;
}


/* login & registration forms */

dl.zend_form {
	margin:0;
	padding:0;
}
 
dl.zend_form dt {
	margin-top:18px;
}
dl.zend_form dt span {
	font-size:0.8em;
	font-variant: small-caps;
}

dl.zend_form dt label {
	float:left;
	width:180px;
}

dl.zend_form dd {
	margin-top:18px;
}

dl.zend_form dd input, dl.zend_form dd select {
	padding:2px 0 2px 2px;
	background: #ccc;
	width:120px;
	border:solid 0 #fff; /* remove the standard border */
}
dl.zend_form dd input:focus, dl.zend_form dd select:focus, dl.zend_form dd select#Country:focus {
	background:#fff;
}


dl.zend_form dd#submit-element {
	clear:both;
	outline: none;
}

/* required fields */
dl.zend_form .required {
	position:relative;
	left:-7px;
	padding-left:8px;
	/*background:#000 url(../img/layout/required.gif) top left no-repeat;*/
	background: url(../img/layout/required.gif) top left no-repeat;
	clear: both;	
	float:left;
	width:70px;
}

p.required {
	position:relative;
	left:-7px;
	clear:both;
	padding-left:8px;
	/*background:#000 url(../img/layout/required.gif) top left no-repeat;*/
	background: url(../img/layout/required.gif) top left no-repeat;
}
span.required 
{
	position:relative;
	left: 3px;
	padding:0 4px;
	background: url(../img/layout/required.gif) top left no-repeat;
}

/* error messages */
ul.errors {
	list-style: none;
	padding:0;
	margin:0;
}

ul.errors li {
	line-height:1.20em;
	padding:10px 10px 5px 27px;
	background:#333 url(../img/icons/error-bg.gif) 0 0 no-repeat;
}

form#registration ul.errors li {
	width:255px;
}

/* terms checkbox */
dl.zend_form dt#AgreetoourTermsConditions-element,
dl.zend_form dd#AgreetoourTermsConditions-element {
	float: left;
}

dl.zend_form dt#AgreetoourTermsConditions-label label {
	width:auto;
}

dl.zend_form dd#AgreetoourTermsConditions-element {
	margin-top:-2px;
}

/* actual checkbox */
dl.zend_form dd#AgreetoourTermsConditions-element input#AgreetoourTermsConditions {
	padding:2px 0 2px 2px;
	width:15px;
	height:15px;
}


/* registration specific */
div#register-col {
	float:left;
	margin-left:0px;
	padding-left:10px;
	width:40%;
	/*border-left:solid 1px #333;*/
}

form#registration {
}

form#registration input, form#registration select, form#registration select#Country {
	width:200px;
}
form#registration input[type=checkbox] {
	width:auto;
}
form#registration label{
	width: 200px;
	left: -7px;
	padding-left:8px;
}


#Optoutofdatacollection-label label {
	width:auto;
}

form#registration #submit {
	position:relative;
	left:0;
	left:210px;
	top:0;
	margin-top: 10px;
	width:202px;
	height:30px;
	background:#000 url(../img/layout/login-button.png) 0 -60px no-repeat;
	margin-bottom:10px;
	text-transform: uppercase;
	font-weight: bold;
	color:#fff;
	text-indent: -99999px;
	cursor: pointer;
	outline: none;
}
form#registration #submit:hover {
	background:#000 url(../img/layout/login-button.png) 0 -90px no-repeat;
}

form#fb-registration div{
	clear: both;
}

form#fb-registration #submit {
	position:relative;
	margin-top: 10px;
	left:0;
	top:0;
	width:202px;
	height:30px;
	background:#000 url(../img/layout/login-button.png) 0 -360px no-repeat;
	margin-bottom:10px;
	text-transform: uppercase;
	font-weight: bold;
	color:#fff;
	text-indent: -99999px;
	cursor: pointer;
	outline: none;
}
form#fb-registration #submit:hover {
	background:#000 url(../img/layout/login-button.png) 0 -390px no-repeat;
}


form#password #submit, form#email #submit, form#details #submit, form.delete-form .submit, form#fb-register .submit {
	position:relative;
	margin-top: 10px;
	left:125px;
	top:0;
	width:202px;
	height:30px;
	background:#000 url(../img/layout/login-button.png) 0 -180px no-repeat;
	margin-bottom:10px;
	text-transform: uppercase;
	font-weight: bold;
	color:#fff;
	text-indent: -99999px;
	cursor: pointer;
	outline: none;
}
form#password #submit:hover, form#email #submit:hover, form#details #submit:hover {
	background:#000 url(../img/layout/login-button.png) 0 -210px no-repeat;
}
form#email #submit {
	background:#000 url(../img/layout/login-button.png) 0 -360px no-repeat;
}
form#email #submit:hover {
	background:#000 url(../img/layout/login-button.png) 0 -390px no-repeat;
}
form.delete-form .submit, form.challenge-form input[type="submit"] {
	position:relative;
	margin-top: 10px;
	left:0;
	top:0;
	width:122px;
	height:30px;
	background:#000 url(../img/layout/login-button.png) 0 -240px no-repeat;
	margin-bottom:10px;
	text-transform: uppercase;
	font-weight: bold;
	color:#fff;
	text-indent: -99999px;
	cursor: pointer;
	outline: none;
	border: none;
}
.delete-form .submit:hover {
	background:#000 url(../img/layout/login-button.png) 0 -270px no-repeat;
}
form.challenge-form input[type="submit"] {
	background:#000 url(../img/layout/login-button.png) 0 -300px no-repeat;
}
form.challenge-form input[type="submit"]:hover {
	background:#000 url(../img/layout/login-button.png) 0 -330px no-repeat;
}

form#details #submit{
	left: 180px;
}

form#password .required, form#email .required{
	width: 120px;
}
#details div{ clear: left;}
/* login specific */
div#login-col, .half-width {
	float:left;
	width:49%;
}

form#login {
	border: 0 none;
}
form#login .required {
	left:0;
	padding-left:0;
	width: 120px;
	background: none;
}

form#login dd input {
	width:120px;
}

form#login  input {
	/*width:150px;*/
}
form#login #submit {
	/*position:relative;
	left:70px;
	top:-35px;
	top:20px;*/
	clear:both;	
	float:left;
	margin:10px 0 10px 120px;
	width:122px;
	height:30px;
	background:#000 url(../img/layout/login-button.png) 0 0 no-repeat;
	text-transform: uppercase;
	font-weight: bold;
	color:#fff;
	text-indent: -99999px;
	cursor: pointer;
}
form#login #submit:hover {
	background:#000 url(../img/layout/login-button.png) 0 -30px no-repeat;
}

/* optional info specific */
div#registration {
	width:46%;
	float:left;
	border-right:solid 1px #333;
	padding-right:30px;
	margin-top:25px;
	margin-right:30px;
}

form#optional-info #submit {
	position:relative;
	left:100px;
	top:-35px;
	width:202px;
	height:30px;
	background:#000 url(../img/layout/login-button.png) 0 -120px no-repeat;
	text-transform: uppercase;
	font-weight: bold;
	color:#fff;
	text-indent: -99999px;
	cursor: pointer;
}
form#optional-info #submit:hover {
	background:#000 url(../img/layout/login-button.png) 0 -150px no-repeat;
}

body.optional-info div#login {
	float:left;
	width:30%;
	margin-top:25px;
}

/* Login form updates */
div#login-col h2,
div#register-col h2 {
    padding-left: 17px;
    font-weight: bold;
}

div#login-col p,
div#register-col p  {
    padding-left: 17px;
    height: 3.4em;
}

div#login-col div.rounded-column p,
div#register-col div.rounded-column p  {
    height: auto;
}


div#login-col div#facebook_connect {
	margin-left: 10px;
}

div#register-col div#facebook_connect {
	margin-left: 8px;
}

div#login-col div.rounded-column h2,
div#register-col div.rounded-column h2 {
    font-size: 1.1em;
    font-weight: normal;
}

div#content div.rounded-column p,
div#register-col div.rounded-column p {
    padding-left: 8px;
}


/* =ERROR MESSAGES
----------------------------------------------- */

div#error {
    padding: 18px 0 0 52px;
    margin: 1em 0 1em 0;
    border: 1px solid red;
    background: #FFCCCC url(../img/icons/icon-alert-warning.gif) no-repeat 10px 10px;
}

/* floats */
.right {
    float: right;
}
.left {
    float:left;
}

/* =MISC
----------------------------------------------- */
.transparent {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}


/* =HOMEPAGE
----------------------------------------------- */
/* WELCOME */
div#home-intro {
    float:left;
    display: inline; /* ie6 */
    margin-left:20px;
    margin-top:28px;
    margin-top:10px;
    width:222px;
}

div#home-intro p {
	padding-left:3px;
}

/* FREE TESTS CAROUSEL */
#slider {
    float:right;
    position:relative;
    top:18px;
    right:20px;
    width:666px;
    margin: 0 auto;
    background:transparent url(../img/layout/carousel-bg.png) no-repeat 0 0;
}

/* carousel navigation */
.navigation {
    position:absolute;
    top:0;
    right:0;
    width:222px;
    z-index:100;
}

.navigation dl {
    height:51px;
    width:222px;
}

.navigation dt {
    display:block;
    font-size:1.45em;
    font-weight: normal;
    padding:18px 0 0 20px;
}

.navigation dd {
    display:block;
    width:222px;
    line-height: normal;
}

.navigation dd a {
    text-indent: -9999px;
    float:left;
    clear: left;
    display:block;
    height:51px;
    width:222px;
    line-height: normal;
/*     margin-bottom:-6px; */
    background: #333;
    overflow: hidden;
/*     outline:solid 1px red; */
}

.navigation dd#memory-link a {
    background:transparent url(../img/layout/carousel-nav-sprite.png) no-repeat 0 0;
}
.navigation dd#memory-link a:hover {
    background:transparent url(../img/layout/carousel-nav-sprite.png) no-repeat 0 -51px;
}
.navigation dd#memory-link a.selected, .navigation dd#memory-link a:hover.selected {
    background:transparent url(../img/layout/carousel-nav-sprite.png) no-repeat 0 -102px;
}

.navigation dd#reasoning-link a {
    background:transparent url(../img/layout/carousel-nav-sprite.png) no-repeat 0 -153px;
}
.navigation dd#reasoning-link a:hover {
    background:transparent url(../img/layout/carousel-nav-sprite.png) no-repeat 0 -204px;
}
.navigation dd#reasoning-link a.selected, .navigation dd#reasoning-link a:hover.selected {
    background:transparent url(../img/layout/carousel-nav-sprite.png) no-repeat 0 -255px;
}

.navigation dd#concentration-link a {
    background:transparent url(../img/layout/carousel-nav-sprite.png) no-repeat 0 -306px;
}
.navigation dd#concentration-link a:hover {
    background:transparent url(../img/layout/carousel-nav-sprite.png) no-repeat 0 -357px;
}
.navigation dd#concentration-link a.selected, .navigation dd#concentration-link a:hover.selected {
    background:transparent url(../img/layout/carousel-nav-sprite.png) no-repeat 0 -408px;
}

.navigation dd#planning-link a {
    background:transparent url(../img/layout/carousel-nav-sprite.png) no-repeat 0 -459px;
    border-bottom:solid 1px #333;
}
.navigation dd#planning-link a:hover {
    background:transparent url(../img/layout/carousel-nav-sprite.png) no-repeat 0 -510px;
}
.navigation dd#planning-link a.selected, .navigation dd#planning-link a:hover.selected {
    background:transparent url(../img/layout/carousel-nav-sprite.png) no-repeat 0 -561px;
}

/* View all tests link */
.home p#view-all {
    position:absolute;
    bottom:0px;
    right:0;
}
.home p#view-all a {
    text-indent: -9999px;
    line-height: normal;
    display:block;
    height:36px;
    width:222px;
    margin-top:27px;
    background:transparent url(../img/layout/link-sprite.png) no-repeat -100px -288px;
}
.home p#view-all a:hover {
    background:transparent url(../img/layout/link-sprite.png) no-repeat -100px -324px;
}

.scroll {
    height: 320px;
    width:445px;
    overflow: auto;
    position: relative; /* fix for IE to respect overflow */
    clear: left;
    background: transparent;
}

/* test panels */
.scrollContainer div.panel {
    position: relative;
    padding:15px 20px 20px 210px;
    height: 320px;
    width:215px; /* full width = 445px */
    background:transparent;
}

.scrollContainer div.panel h2 a {
    font-size:0.9em;
    font-weight: normal;
    text-decoration: none;
    line-height: 1em;
    padding:0;
}
.scrollContainer div.panel h3 {
    font-size:0.8em;
    font-weight: normal;
    padding-top:3px;
    padding-bottom:25px;
}
.scrollContainer div.panel h3 em {
    color:#fff;
    font-style: normal;
}
.scrollContainer div.panel h3 a {
	text-decoration:none;
}

div.panel div.test-summary {
	line-height:1em;
	height:118px;
	overflow: hidden;
	border-bottom: 1px solid #333;
	margin-left:-15px;
	padding-left:15px;
}

div#initial-logged {
    background: url(../img/layout/logged-in-panel.png) no-repeat 0 0;
}
div#initial-logged h1 {
	margin-top:10px;
}
div#initial-logged h2 {
    color:#ffcc00;
    color:#669933;
}

div#initial-logged p.highlight {
    margin-top:0;
    margin-bottom:5px;
    color:#eee;
    font-size: .9em; /* 16px */
    line-height: 1.2em;
}

div#initial-logged p.highlight a {
	text-decoration:none;
}

div#initial {
    background: url(../img/layout/logged-out-panel.png) no-repeat 0 0;
}

div#initial h1 {
	margin-bottom:10px;
}

div#initial h2 {
    color:#fff;
}

div#initial p.highlight {
    margin-top:0;
    margin-bottom:5px;
    font-size: .9em; /* 16px */
    line-height: 1.2em;
    color:yellow;
}
div#initial p strong {
    color:aqua;
}

div#initial p a {	
	font-weight:bold;
	text-decoration: none;
}
div#initial p.link a {	
	margin-top:-3px;
	font-weight: normal;
}

.scrollContainer div.panel a.more-info, .scrollContainer div.panel a.take-test {
    position: absolute;
    display:block;
    height:36px;
    width:210px;
    text-indent: -9999px;
}
.scrollContainer div.panel a.more-info {
    top:242px;
    top:246px;
    background:transparent url(../img/layout/link-sprite.png) no-repeat right 0;
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -148px;
}
.scrollContainer div.panel a:hover.more-info {
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -36px;
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -184px;
}
.scrollContainer div.panel a.take-test {
    top:272px;
    left:210px;
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -72px;
}
.scrollContainer div.panel a:hover.take-test {
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -108px;
}

/* HOME PROMO */
div#home-promo {
    position:relative;
    display:inline; /* for ie6 */
    margin-top:38px;
    margin-right:20px;
    width:666px;
    height:260px;
    float: right;
    background:transparent url(../img/layout/home-promo-bg.png) no-repeat 0 0;
}
div#home-promo p {
    position:absolute;
    top:28px;
    right:28px; 
    font-size: 1.5em;
    line-height:1.3em;
    text-align: right;
    width:320px;
}

div#home-promo a.big-arrow {
    text-indent: -9999px;
    position:absolute;
    right:-15px;
    -webkit-transition: right 0.25s linear;
    top:132px;
    display:block;
    width:268px;
    height:127px;
    padding:0;
    margin:0;
    background:transparent url(../img/layout/big-arrow-sprite.png) no-repeat 0 0;
}

div#home-promo a.big-arrow:hover {
    right:-25px;
    background:transparent url(../img/layout/big-arrow-sprite.png) no-repeat 0 -128px;
}

a.take-challenge {
    text-indent: -9999px;
    position:absolute;
    right:-15px;
    -webkit-transition: right 0.25s linear;
    bottom:-30px;
    display:block;
    width:240px;
    height:78px;
    padding:0;
    margin:0;
    background:transparent url(../img/layout/take-challenge-bg.png) no-repeat 0 0;
}

a.take-challenge:hover {
    right:-25px;
    background:transparent url(../img/layout/take-challenge-bg.png) no-repeat 0 -78px;
}


/* AVAILABLE TESTS ON LOGGED IN HOMEPAGE */
div#home-tests {
    position:relative;
    display:inline; /* for ie6 */
    margin-top:38px;
    margin-right:20px;
    width:642px;
    height:260px;
    height:auto;
    float: right;
    padding:12px;
    background:transparent url(../img/layout/home-tests-bottom.png) no-repeat bottom left;
}

div#home-tests h2 {
	display:block;
	margin:-12px;
	margin-bottom:5px;
	padding:12px 12px 0 12px;
    background:transparent url(../img/layout/home-tests-h2.png) no-repeat 0 0;
}

div#home-tests h3 {
	clear: both;
	display:block;
	margin:-12px;
	margin-bottom:5px;
	padding:12px 12px 0 12px;
}

div#home-tests dl {
	float:left;
	width:150px;
	margin:0 10px 0 0;
	padding:0;
}

div#home-tests dl dt {
	color:#666;
	text-transform: uppercase;	
	border-bottom:solid 1px #191919;
	padding-bottom:1px;
	margin-bottom:10px;
}

div#home-tests dl dd {
	padding-top: 3px;
	padding-bottom: 8px;
	border-bottom:dotted 1px #333;

}

div#home-tests dl dd a {
	background:transparent url(../img/icons/link-arrow.gif) no-repeat scroll 0 50%;
	display:block;
	line-height:1.1em;
	padding-left:12px;
	padding-right:5px;
	text-decoration:none;
}
div#home-tests dl dd a:hover {
	background:transparent url(../img/icons/link-roll.gif) no-repeat scroll 0 50%;
}

div#home-tests dl dd a:hover {
    color:#33cc00;
}


/* SAMPLE SCORE OR STAT */
div#home-score {
    position:relative;
    display: inline; /* ie6 */
    padding:10px;
    width:202px;
    height:288px;
    float: left;
    margin-left:20px;
    margin-top:-62px;
    background:transparent url(../img/layout/home-score-bg.png) no-repeat 0 0;
}

div#home-score h2 {
    line-height: 1.3em;
    font-size: .9em;
    font-weight: normal;
}

div#home-score h3 {
    font-size: .9em;
    font-weight: normal;
    padding-bottom: 3px;
}
div#home-score h3 a {
    font-weight: bold;
    font-style: normal;
}

div#home-score a {
    text-decoration: none;
}

#home-score p.score {
    width:190px;
    height:70px;
    margin:5px 0;
    padding:15px 5px 5px 5px;
    font-size: 3em;
    color:#666;
    text-align: center;
    line-height: 1.2em;
    font-weight: bold;
    color:#1DEFB0;
    background:#0F0F0F;
}

#home-score div#summary {
	line-height:.9em;
	height:100px;
	overflow: hidden;
	border-bottom: 1px solid #333;
}

div#home-score a.more-about, div#home-score a.beat-it {
    position: absolute;
    right:11px;
    display:block;
    height:30px;
    width:210px;
    text-indent: -9999px;
}

/* this link is currently not used */
div#home-score a.more-about {
    top:235px;
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -148px;
}
div#home-score a:hover.more-about {
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -184px;
}


div#home-score a.beat-it {
    top:265px;
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -220px;
}
div#home-score a:hover.beat-it {
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -256px;
}


/* =TAKE-TESTS - browse tests pages
----------------------------------------------- */

div#test-selection {
}

div#test-selection h2 {
    text-align: right;
    padding:40px 40px 3px 10px;
    font-size:1.05em;
    font-weight: normal;
}   
div#test-selection h2 a, div#test-selection p.test-type a {
    text-decoration: none;
}
div#test-selection p.test-type {
    text-align: right;
    padding-right: 40px; 
    line-height: 1em;   
}   
div#test-selection div.more-detail {
    padding:54px 15px 15px 15px;
}
    
div.fade-wrapper { 
    position:relative;
    float:left;
    height:159px;
    width:328px;
    margin:9px 10px 0 0;
    background:transparent url(assets/img/layout/test-bgs/browse-test-bg.png) no-repeat 0 0;
}
    
div.hidden-detail {
    display:none;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    height:328px;
    height:200px;
    height:159px;
    width:328px;
    background:transparent url(assets/img/layout/test-bgs/browse-test-bg.png) no-repeat 0 -159px;
}

div.hidden-detail a.more-about, div.hidden-detail a.take-test {
    position: absolute;
    right:15px;
    display:block;
    height:36px;
    width:210px;
    text-indent: -9999px;
}
div.hidden-detail a.more-about {
    top:246px;
    top:0;
    top:130px;
    top:95px;
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -144px;
}
div.hidden-detail a:hover.more-about {
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -180px;
}
div.hidden-detail a.take-test {
    top:276px;
    top:160px;
    top:120px;
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -72px;
}
div.hidden-detail a:hover.take-test {
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -108px;
}
div.hidden-detail a.please-login {
	position: absolute;
    right:15px;
    top:276px;
    top:0;
    top:160px;
    top:120px;
    display:block;
    height:30px;
    width:300px;
    text-indent: -9999px;
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -360px;
}
div.hidden-detail a:hover.please-login {
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -420px;
}


/* places red 'Free Test' tag */
img.free-tag {
	position:absolute;
	top:0px;
	right:-1px;
}
body.home img.free-tag {
	right:1px;
}

/* browsing by category pages */
body.take-tests p.description {
	width:80%;
	font-size: 0.9em;
	line-height: 1.3em;
}

/* =TEST-DETAIL
----------------------------------------------- */
div#test-detail-promo {
    position:relative;
    right:10px;
    width:666px;
    height:320px;
    margin: 0 auto;
    background:#333;
}

div#test-desc {
    position:relative;
    float:right;
    padding:15px;
    width:300px;
    height:290px;
}

div#test-desc h1 {
    margin-top:55px;
    margin-bottom: 10px;
    color:#fff;
    line-height: 1em;
}

div#test-desc p#test-type { 
    position:absolute;
    top:17px;
    left:17px;
    font-size:1em;
}

div#test-desc p#test-type a {   
    text-decoration: none;
}

p#instructions a, p.link a {
    display:block;
    height:11px;
    line-height: 10px;
    float:right;
    clear:both;
    text-decoration: none;
    margin-bottom:10px;
    padding-right:10px;
    background:transparent url(../img/icons/link-arrow.gif) no-repeat right 0;
}
p#instructions a:hover, p.link a:hover {
    background:transparent url(../img/icons/link-roll.gif) no-repeat right 0;
}

/* if not logged in and the test is not 'free' */
div#test-desc a.please-login, div#test-desc a.please-login-challenge {
	position: absolute;
    right:15px;
    top:270px;
    display:block;
    height:30px;
    width:300px;
    text-indent: -9999px;
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -360px;
}
div#test-desc a:hover.please-login {
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -420px;
}
div#test-desc a.please-login-challenge {
	top:260px;
	height:60px;
   	background:transparent url(../img/layout/link-sprite.png) no-repeat right -480px;
}
div#test-desc a:hover.please-login-challenge {
    background:transparent url(../img/layout/link-sprite.png) no-repeat right -540px;
}



div#test-desc a.big-arrow {
    text-indent: -9999px;
    position:absolute;
    right:-15px;
    -webkit-transition: right 0.25s linear;
    top:250px;
    display:block;
    width:268px;
    height:127px;
    padding:0;
    margin:0;
    background:transparent url(../img/layout/big-arrow-sprite.png) no-repeat 0 -255px;
}

div#test-desc a.big-arrow:hover {
    right:-25px;
    background:transparent url(../img/layout/big-arrow-sprite.png) no-repeat 0 -382px;
}

div#test-info {
    clear: both;
    padding:25px 12px 12px 12px;
}

div#test-info h2 {
}

div.video {
    float:right;
    margin:10px -10px 40px 40px;
    padding:5px 5px 0 5px;
    border:solid 1px #333;
}

/* Score box in secondary content */
dl#scores {
    list-style-type: none;
    margin:0;
    background: transparent url(../img/layout/scores-sec-bg-bottom.png) no-repeat bottom left;
    padding-bottom:3px;
}
dl#scores dt {
    margin:0;
    font-size: 1.8em;
    text-indent: -9999px;
    display:block;
    height:47px;
    background: transparent url(../img/layout/general-sprite.png) no-repeat 0 0;
}
dl#scores dd {
    margin:10px;
    padding-bottom:10px;
    border-bottom:solid 1px #333;
}

dd.not-played {
	font-size: 1.2em;
}

dl#scores dd.your-highest, dl#scores dd.the-highest {
    color:#00cccc;
    font-size: 1.4em;
}
dl#scores dd.the-highest {
    color:#ff9933;
    padding-top:5px;
    border-bottom:none;
}
dl#scores dd.your-highest em, dl#scores dd.the-highest em {
    font-style: normal;
    font-weight: bold;
    line-height:1.5em;
}

/* Challenge friends promo in secondary content */

div#challenge-sidebar {
    list-style-type: none;
    float:left;
    width:100%;
    margin:12px 0 0 0;
    padding-bottom:10px;
    background: transparent url(../img/layout/scores-sec-bg-bottom.png) no-repeat bottom left;
}
div#challenge-sidebar h2 {
    margin:0;
    display:block;
    height:40px;
    padding:10px;
    font-size: 1.1em;
    background: transparent url(../img/layout/general-sprite.png) no-repeat 0 -139px;
}
div#challenge-sidebar h2 img {
	margin-right:2px;
}

div#challenge-sidebar p {
    padding:0 10px 5px 10px;
}


/* message shown immediately after playing a test */
p.flash-message {
	margin:-20px 0 0 8px;
	padding:10px 10px 10px 30px;
	font-size: 1em;
	line-height: 1.4em;
}

p.flash-message img {
	position:relative;
	top:2px;
	margin-right:2px;	
}

p.flash-message em {
	font-style: normal;
	font-weight: bold;
	color:aqua;
}	

/* =MODAL WINDOWS- thickbox
----------------------------------------------- */

/* thickbox specific link and font settings */
#TB_window {
    font-size: 1em;
    color: #333333;
}

/*
#TB_secondLine {
    font: 10px Arial, Helvetica, sans-serif;
    color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
*/

/* thickbox settings */
#TB_overlay {
    position: fixed;
    z-index:100;
    top: 0;
    left: 0;
    height:100%;
    width:100%;
}

.TB_overlayMacFFBGHack {background: url(../img/layout/macFFBgHack.png) repeat;}
.TB_overlayBG {
    background-color:#000;
    filter:alpha(opacity=75);
    -moz-opacity: 0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;
}

* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window {
    position: fixed;
    z-index: 102;
    color:#ccc;
    display:none;
    background:transparent url(../img/layout/modal-bg.png) no-repeat bottom left;
    padding-bottom: 10px;
    text-align:left;
    top:50%;
    left:50%;
}

* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window img#TB_Image {
    display:block;
    margin: 15px 0 0 15px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
}

#TB_caption{
    height:25px;
    padding:7px 30px 10px 25px;
    float:left;
}

#TB_closeWindow{
    height:25px;
    padding:11px 25px 10px 0;
    float:right;
}

#TB_closeAjaxWindow{
    padding:7px 10px 5px 0;
    margin-bottom:1px;
    text-align:right;
    float:right;
}

#TB_ajaxWindowTitle{
    float:left;
    padding:7px 0 5px 10px;
    margin-bottom:1px;
}

#TB_title{
    height:32px;
    font-size:.9em;
    background: #000 url(../img/layout/modal-bg-top.png) no-repeat 0 0;
    border-bottom: solid 1px #333;
    margin-bottom:4px;
    padding:2px 5px 0 5px;
}

#TB_ajaxContent{
    clear:both;
    padding:2px 15px 15px 15px;
    text-align:left;
    line-height:1.4em;
    padding-right:10px;
}

#TB_ajaxContent.TB_modal{
    padding:15px;
}

#TB_ajaxContent p{
    padding:5px 0px 5px 0px;
}

#TB_load{
    position: fixed;
    display:none;
    height:13px;
    width:208px;
    z-index:103;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect{
    z-index:99;
    position:fixed;
    top: 0;
    left: 0;
    background-color:#fff;
    border:none;
    filter:alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    height:100%;
    width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent{
    clear:both;
    border:none;
    margin-bottom:-1px;
    margin-top:1px;
    _margin-bottom:1px;
}

/* YouTube instructions video in modal window */
div#thickbox-vid-wrapper{
	margin-top:15px;
	padding-left:40px;
}


/* login modal window / message box */
div#message p {
	font-size:.9em;
	margin-bottom:5px;
}

dl#reg-benefits {
	margin:0 0 20px 0;
	padding:20px 10px 20px 30px;
	background:#151515;
	background:transparent url(../img/layout/benefits-bg.png) 0 0 no-repeat;
}
dl#reg-benefits dt {
	font-size: 1.3em;
	color:orange;
	margin-bottom:10px;
}
dl#reg-benefits dd {
	margin-left:10px;
	padding-left:25px;
	font-size: 1.3em;
	line-height:1.8em;
	background:transparent url(../img/icons/tick.png) 0 0 no-repeat;
}

a.reg-arrow {
    text-indent: -9999px;
    position:absolute;
    right:-25px;
    -webkit-transition: right 0.25s linear;
    top:250px;
    display:block;
    width:268px;
    height:127px;
    padding:0;
    margin:0;
    background:transparent url(../img/layout/big-arrow-sprite.png) no-repeat 0 0;
}

a.reg-arrow:hover {
    right:-35px;
    background:transparent url(../img/layout/big-arrow-sprite.png) no-repeat 0 -128px;
}


/* TEST PAGE 
----------------------------------------------- */
p#test-nav-links {
	position:absolute;
	top:75px;
	right:20px;
	}
p#test-nav-links a {
	text-decoration: none;
}

/* MY SCORES
----------------------------------------------- */
span.cleverness, h4.cleverness {
	padding-right:8px;
	background:transparent url(../img/layout/required.gif) top right no-repeat;
}
h4.cleverness {
	margin-left:-8px;
	padding-left:8px;
	background:transparent url(../img/layout/required.gif) top left no-repeat;
}

/* main dashboard */
body.my-scores div#dashboard {
	position: relative;
	width:646px;
 	padding:10px 10px 20px 10px;
 	margin:5px 10px 1 0;
 	background:#151515;
	background:transparent url(../img/layout/dashboard-bg.png) bottom left no-repeat;
/*  outline:solid 1px #333; */
}
body.my-scores div#dashboard h2 {
	display: block;
	margin:-10px -10px 10px -10px;
	padding:10px 10px 10px 17px;
	background:transparent url(../img/layout/dashboard-bg.png) top left no-repeat;
	border-bottom:solid 1px #202020;
	font-size: 1.2em;
/* 	outline:solid 1px; */
}
body.my-scores div#dashboard h2 span {
	color:#999;
	font-size: 0.7em;
}
body.my-scores div#dashboard h2 em {
/* 	color:#00CCCC; */
	font-style: normal;
	font-size: 1.3em;
	padding-right:5px;
}

body.my-scores div#dashboard p.take-again a, body.my-scores div#dashboard p.challenge-again a {
	position: absolute;
	top:-35px;
	right:-15px;
	-webkit-transition: right 0.25s linear;
	display:block;
	text-indent:-99999px;
	height:78px;
	width:232px;
	background:transparent url(../img/layout/take-again-bg.gif) top left no-repeat;
}
body.my-scores div#dashboard p.take-again a:hover {
    right:-20px;
	background:transparent url(../img/layout/take-again-bg.gif) 0 -78px no-repeat;
}

body.my-scores div#dashboard p.challenge-again a {
   	background:transparent url(../img/layout/challenge-again-bg.png) no-repeat 0 0;
}

body.my-scores div#dashboard p.challenge-again a:hover {
    right:-25px;
    background:transparent url(../img/layout/challenge-again-bg.png) no-repeat 0 -78px;
}


body.my-scores div#dashboard p.find-test a {
	position: absolute;
	top:-35px;
	right:-15px;
	-webkit-transition: right 0.25s linear;
	display:block;
	text-indent:-99999px;
	height:78px;
	width:232px;
	background:transparent url(../img/layout/find-a-test-to-play-bg.gif) top left no-repeat;
/* 	outline:solid 1px; */
}
body.my-scores div#dashboard p.find-test a:hover {
    right:-20px;
	background:transparent url(../img/layout/find-a-test-to-play-bg.gif) 0 -78px no-repeat;
}

body.my-scores div#score-summary {
	width:624px;
	margin-bottom:10px;        
	padding:15px 10px 15px 10px;
}

body.my-scores div#score-summary p {
	margin:0;
	padding:5px 0 0 0;
	color:#666;
	font-size: 1.3em;
	text-align: center;
}
body.my-scores div#score-summary p em {
	font-style: normal;
	color:#fff;
}

body.my-scores div#dashboard h4 {
	margin:-2px 0 5px 5px;
}

div.chart {
	padding:10px;
	background:#151515;
	border:solid 1px #000;
}

div.chart-frame {
	padding:12px 10px 0 10px;
	background:#000;
	border:solid 1px #191919;
}

p.key {
	text-align:right;
	padding:5px 10px 5px 5px;
	margin:0;
	background: #000;
	border:solid 1px #191919;
	border-top:none;
}



/* message when you've not played any tests yet */
div.no-scores-yet {
	padding:20px 20px 25px 20px;
	background:#191919;
	border:solid 1px #121212;
}
div.no-scores-yet h3 {
	color:yellow;
}
div.no-scores-yet p {
	font-size: 1em;
	color:#aaa;
	line-height: 1.3em;
}
div.no-scores-yet p.link a {
	margin-top:30px;
	float:none;
	text-align: right;
/* 	text-decoration: underline; */
}


/* sub-navigation to specific test scores */
dl#scores-menu, dl.facebook-friends {
	margin:-8px 0 15px 0;
	padding:0 0 15px 0;
	width:auto;
	border-bottom:solid 1px #333;
}

dl#scores-menu dt, dl.facebook-friends dt {
	margin-top:18px;
	padding:3px 0 3px 5px;
	font-weight: normal;
	color:#999;
	background:#151515;
	border-bottom:solid 1px #191919;
}
dl#scores-menu dt span.cleverness {
/* 	color:#fff; */
}

dl#scores-menu dd {
	padding:5px;
	padding-top: 3px;
	padding-bottom: 3px;
/* 	border-bottom:dotted 1px #191919; */
}

dl#scores-menu dd a {
	background:transparent url(../img/icons/link-arrow.gif) no-repeat scroll 0 50%;
	display:block;
	line-height:1.1em;
	padding-left:12px;
	padding-right:5px;
	text-decoration:none;
}
dl#scores-menu dd a:hover {
	background:transparent url(../img/icons/link-roll.gif) no-repeat scroll 0 50%;
}


dl#scores-menu p.not-played {
    color:#399;
    margin-left:-5px;
    margin-bottom:8px;
}

dl#scores-menu dd.no-score {
	border-bottom: none;
}

/* view all tests link - if played none in the category yet */
dl#scores-menu dd p.link a {
    display:block;
    height:11px;
    line-height: 10px;
    float:none;
    text-align: right;
    text-decoration: none;
    margin-bottom:-15px;
    padding-right:10px;
    background:transparent url(../img/icons/link-arrow.gif) no-repeat right 0;
}
p#instructions a:hover, p.link a:hover {
    background:transparent url(../img/icons/link-roll.gif) no-repeat right 0;
}


/* slide out panels */

#panel, #login-panel {
	height:auto;
	display: none;
    background:transparent url(../img/layout/accordion-bg.png) repeat-x bottom left;
    padding-bottom:30px;
    border-bottom:solid 1px #191919;
}
#login-panel, .login-slide.active{ background: none;}

div#dashboard #panel {
	padding:5px 20px 10px 5px;
	background: #151515;
	font-size: 1.1em;
}
div#dashboard #panel h2 {
	background: none;
	font-size: 1em;
	border: none;
	margin-bottom: 3px;
	padding-bottom: 0;
}
div#dashboard #panel p {
	margin:0;
	padding:0 5px 5px 5px;
}


.slide {
	margin: 0;
	padding: 0;
	background: url(../img/icons/plus.png) no-repeat 0 0;
}
.btn-slide {
	padding:0 0 5px 22px;
	background: url(../img/icons/plus.png) no-repeat 0 0;
	display: block;
	text-decoration: none;
}
.login-slide {

	background: none;
	display: inline;
	/* text-decoration: none; */
}
.active, h2 span a.active {
	background: url(../img/icons/minus.png) no-repeat 0 0;
}

h2 span .btn-slide {
	padding:0 0 0 22px;
	background: url(../img/icons/plus.png) no-repeat 0 0;
	display: inline;
	text-decoration: none;
}

/* =SIMPLE-FORM
----------------------------------------------- */
/*
form.simple-form fieldset {
	margin:1em 0;
	padding:1em;
	border:0 none;
}

form.simple-form div {
	position:relative;
	padding:6px;
	margin-bottom: 0.5em;
	clear:both;
}

form.simple-form label {
	display: block;
	float:left;
	width:100px;
	text-align: right;
	padding-right:10px;
}

form.simple-form input {
	width:200px;
	float:left;
	border:0 none;
}

form.simple-form textarea {
	width:300px;
	height:100px;
}

form.simple-form div.radio input, form.simple-form div.checkbox input, form.simple-form input.submit {
	width:auto;
}
   
form.simple-form div.radio label, form.simple-form div.checkbox label {
	display: inline;
}

/* fieldset messages - before the relevant field */
form.simple-form div.problem {
	background-color: #ffefef;
	border:solid 1px #ff7f7f;
}

/* message folowing log-in failure */
div.message ul {
	list-style-type: none;
	margin:0 0 0 10px;
	padding:0;
}

div.message ul li {
	padding-left:25px;
	color:#ffcc00;
	background: transparent url(../img/icons/warning.png) 0 0 no-repeat;
}



/* progressive enhancements for browsers beyond ie6 */
form.simple-form input:focus, form.simple-form textarea:focus {
	background-color: #ffc;
}

form.simple-form input[type="text"], form.simple-form input[type="password"], form.simple-form textarea {
	border-top: solid 2px #999;
	border-right: solid 1px #999;
	border-bottom: solid 1px #999;
	border-left: solid 2px #999;
}

/* CSS rounded corners - no Opera support as of Aug 09 */
/*
form.simple-form div.message,
form.simple-form div.problem,
form.simple-form fieldset {
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
*/



.stronger {
    font-weight:bolder;
}


div.form-terms {
	padding:10px;
}


ul#q-graph {
    position: relative; 
    list-style: none;
    width: 600px; 
    width:611px;
    height: 318px;  
    max-height:340px;  
    margin: 1.1em 0 0 0;
    padding: 0 0 12px 12px;
    background: #000;
	border:solid 1px #191919;
    font: 9px Helvetica, Geneva, sans-serif;
    overflow:hidden;
    
/*     outline:solid 1px green; */
}

ul#q-graph ul {
    margin: 0;
    padding: 0;
    list-style: none;
/*  outline:solid 1px red; */
}

ul#q-graph li {
    float: left;
    width: 56px;
    z-index: 2;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
}

ul#q-graph li.qtr {
    height: 318px; 
    border-right: 4px solid #000;
    color: #000;    
/* 	background: #666; */
}



ul#q-graph li.ten { border-right: none; }

ul#q-graph li div.names {    
	z-index:100;
	float:left;
	position: relative;
	top:-110px;
	left:1px;
	width:50px;
	overflow:visible;
	color:#fff;
	text-align: center;
	line-height: 1.3em;
/* 	outline:solid 1px red; */
}

ul#q-graph li div.names img {    
	margin-left:2px;
}
	
ul#q-graph li.bar {
    background: #066caa url(../img/layout/bar-chart-column-bg-2.png) top left repeat-x;
    width: 56px; 
    border-bottom: none;
	font-weight: bold;
    color:#000;
    text-shadow:0 1px 0 #fff;
    overflow: hidden;
}

ul#q-graph li.myself {
}

ul#q-graph li.myself-bar {
    background: #066caa url(../img/layout/bar-chart-column-bg.png) top left repeat-x;
}


ul#q-graph li.bar p {
    margin-top:10px;
    font-size:1.5em;
}


#challenge_message {
    width: 615px;
    background: lightGrey;	
}

/*
User account and related pages
*/
.clear{ clear:both;}
.side-column{ width: 80px; float: left; }
.main-column{ width: 550px; float: left; }
.controls{ width: 100%; clear: both;}
.controls ul, .controls li{ margin:0; padding:0; list-style: none; float: left;}
.controls li{ margin-right: 10px; }
.controls ul{ clear: both; }

.main-column h4{ padding-top: 20px;}


table.detail, .detail th, .detail td{ border: none;}
.main-column #RES_ID_fb_login{ margin-bottom: 10px;}

.margin1a{ margin: 30px;}
.margin1t{ margin-top: 30px;}
.margin1r{ margin-right: 30px;}
.margin1b{ margin-bottom: 30px;}
.margin1l{ margin-left: 30px;}

.margin2a{ margin: 10px;}
.margin2t{ margin-top: 10px;}
.margin2r{ margin-right: 10px;}
.margin2b{ margin-bottom: 10px;}
.margin2l{ margin-left: 10px;}

/* rounded-column */
div.rounded-column {
	position: relative;
	width:450px;
 	padding:10px 10px 20px 10px;
 	margin:15px 10px 1px 0px;
 	background:#151515;
	background:transparent url(../img/layout/rounded-column-bg.png) bottom left no-repeat;
}
div.rounded-column h2 {
	display: block;
	margin:-10px -10px 10px -10px;
	padding:10px 10px 10px 17px;
	background:transparent url(../img/layout/rounded-column-bg.png) top left no-repeat;
	border-bottom:solid 1px #202020;
}
div.rounded-column h2 span {
	color:#666;
}

/*
div.rounded-column p {
	padding:10px 8px 0 8px;
}
*/

/* .rounded-column hr{ border: none !important; border-bottom: 1px solid #f0f0f0;} */
div.rounded-column #panel{ background: none;}



/* FACEBOOK FRIEND SCORES CAROUSEL */

div.friend-scores {
	background:#000;
	width:620px;
	border:solid 1px #191919;
}

div.friend-scores ul#q-graph {
	border:none;
}

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
	/* these are set elsewhere in the CSS */
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}

.jcarousel-container-horizontal {
    width: 620px;
}

.jcarousel-clip-horizontal {
	width:615px !important;
}

.jcarousel-item {
    width: 56px;
}

.jcarousel-item:hover {
}

.jcarousel-item-horizontal {
}

.jcarousel-item-placeholder {
}


/* Horizontal Buttons */
/* NEXT */
.jcarousel-next-horizontal {
    position: absolute;
    top: 0;
    right: 0px;
    width: 12px;
    height: 331px;
    cursor: pointer;
    background: #000 url(../img/layout/carousel/next-horizontal.gif) no-repeat 0 0;
}
.jcarousel-next-horizontal:hover {
	background-color: #333;
    background-position: 0 -326px;
}
.jcarousel-next-horizontal:active {
    background-position: -326px 0;
}
.jcarousel-next-disabled-horizontal,
.jcarousel-next-disabled-horizontal:hover,
.jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -326px 0;
    background-color: #000;
}

/* PREVIOUS */
.jcarousel-prev-horizontal {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 331px;
    cursor: pointer;
    background: #000 url(../img/layout/carousel/prev-horizontal.gif) no-repeat 0 0;
}

.jcarousel-prev-horizontal:hover {
	background-color: #333;
    background-position: 0 -326px;
}
.jcarousel-prev-horizontal:active {
    background-position: -326px 0;
}
.jcarousel-prev-disabled-horizontal,
.jcarousel-prev-disabled-horizontal:hover,
.jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -326px 0;
    background-color: #000;
}

p.key-friendchart {
	text-align:right;
	padding:5px 10px 5px 5px;
	margin:0;
	background: #000;
	border:solid 1px #191919;
	border-top:none;
	width:605px;
}

/*
.terms{
	background-image: url(../img/layout/cross-symbol.gif);
	background-repeat: no-repeat;
	background-position: top right;
	padding-right: 10px;
	text-decoration: none;
}
.terms.leftaligned{
	background-position: top left;
	padding-left: 10px;
	padding-right: 0;
}

*/
form.challenge-form .facebook_friend {

	float:left;
	width:90px;
	
	height: 90px;
	overflow:hidden;
}

span.friend_names {

	display:block;
	padding:0 5px;
	/*width:60px;
	margin-left: 17px;*/
	
}

/* challenge your friends promo */
p#challenge-friends {
	width:100%;
	padding-left:358px;
	margin-top:10px;
}

/* Hide new site message */
div#site-update-message-1 {
	display: none;
}

/*increase from rows margin*/
form#registration fieldset > div {
    margin-bottom: 2em;
}