/* Common Library */
/*************************************************/

/* Reset */
/***********************/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
ul {
list-style: none;
}
ol {
list-style-position: inside;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}


/* HTML5 */
/***********************/
article, aside, figure, footer, header, hgroup, nav, section {
display: block;
}

/* Tools */
/***********************/


@media screen and (-webkit-min-device-pixel-ratio:0) {
	html, body#accounts, body#competition{ 
	height: 100%;
	}
}

.clearfix:after,
.clearfixItems li:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix, .clearfixItems li {display: inline-block;}    
/* Hides from IE-mac \*/  
* html .clearfix,
* html .clearfixItems li {height: 1%;}  
.clearfix, .clearfixItems li {display: block;}  
/* End hide from IE-mac */

.clear {
clear: both;
}

.txtReplace, .sprite {
text-indent: -9999px;
overflow: hidden; /* Stop focus outline issues */
}

.sprite {
border: 0;
cursor: pointer;
}

/* Read by a screen reader and visible when styles disabled */
.accessText {
position: absolute;
z-index: -1;
text-indent: -9999px;
line-height: 0; /* for legend */
}

.pushLeft {
float: left;
margin-right: 1em;
}

.pushRight {
float: right;
margin-left: 1em;
}

.alignRight {
text-align: right;
}

.alignCenter {
text-align: center;
}

ul.inline li {
display: inline;
margin-right: 1.5em;
}

ul.inline li:last-child {
margin-right: 0;
}

del, .strike {
text-decoration: line-through;
}

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

button {
overflow: visible;
font-size: 1em;
}

.hide {
display: none;
}

.js .placeholder {
cursor: text;
}

.invisible {
visibility: hidden;
}

h1,h2,h3,h4,h5,h6,strong,.strong,b,th,dt,label,legend {
font-weight: bold;
}

i, em, .italic, blockquote, cite, q {
font-style: italic;
}

.norm, strong span, label span, blockquote em, blockquote cite, h1 span, h2 span, h3 span, dt span {
font-weight: normal;
}

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

small, .small {
font-size: smaller;
}

big, .big {
font-size: larger;
}

#accounts p,
.prose p {
margin-bottom: 1.5em;
}

#accounts p.crumb {
margin-bottom: 0.5em;
}

#accounts.application p.crumb {
margin-right: 160px;
}

#accounts p.single {
margin-bottom: 0;
margin-left: 230px;
}

#accounts div p.single {
margin-left: 230px;
}

/* Grid : 960 pixels fixed, 12 columns */
/*************************************************/

.g1 { width:60px; }
.g2 { width:140px; }
.g3 { width:220px; }
.g4 { width:300px; }
.g5 { width:380px; }
.g6 { width:460px; }
.g7 { width:540px; }
.g8 { width:620px; }
.g9 { width:700px; }
.g10 { width:780px; }
.g11 { width:860px; }
.g12 { width:940px; }


.g1, .g2, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12, .pre4, .g8-3, .g, .g8-plusLM {
margin: 0 10px;
float: left;
display: inline;
overflow: hidden;
}

.pre4 { 
margin-left: 320px;
margin-right: 0;
}

/* 3 columns squeezed into grid 8 */
.g8-3 {
width: 193px;
}
.g8-plusLM { /*.g8-Plus-Leftmargin i.e. cannabolise the margin to the left and outside of 940px space */
margin-left:-10px;
width:630px;
}
.rev .g1, .rev .g2, .rev .g3, .rev .g4, .rev .g5, .rev .g6, .rev .g7, .rev .g8, .rev .g9, .rev .g10, .rev .g11, .rev .g12 {
float: right;
}

/* row, row with margin */
.r, .rm { 
width: 960px;
margin: 0 auto;
overflow: hidden;
}

.rm {
margin: 1.5em auto;
}

.rs {
margin: 1.5em 10px;
width: 940px;
overflow: hidden;
}

/* nested rows */
.r .r, .rs .r, .rm .r, .rm .rm, .r .rm {
width: auto;
display: inline-block;
margin-left: -10px;
margin-right: -10px;
}

.nudge {
margin-left: 10px;
margin-right: 10px;
}

.nudgePadd {
padding-left: 10px;
padding-right: 10px;
}
.nudgePadd-TB {
padding-top: 10px;
padding-bottom: 10px;
}
.nudgeCol {
margin-left: 10px;
margin-right: 330px;
}
/*
#k { height:100%;
width:100%;
background-color:red;
margin:0 !important;
padding:0 !important;
} */
/* Forms */
/**************************************/

.disabledInput {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}

/* Legacy override */
input.text, select, textarea { 
font-size: 1em;
}

/* Legacy */
#mast input.text, #mast select {
font-size: 1.1em;
	color: #444; 
	border: 1px solid #bfbfbf; 
background-color: #fff;
}

/* Typography */
/**************************************/
body, h2, h3, h4, .sans, input, select, textarea, legend, #extras #resourcesQuickSearch h2 {
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

h1, .serif, .shareResource h2, .area h2, h2.h1, #header li,
#footer h2, #extras h2, #extras h3, .status {
font-family: Georgia, serif; 
}

/* Legacy size, needed for header & footer */
/* TODO: Update so body is 12 and changes apply to parts as required */
body {
font-size: 0.688em; /* 11px */
color: #4f4d45;
background: #E6E6E6 url('graphics/main.bg.png') repeat-y 50% 0;
}

body#accounts, body#competition{
font-size: 12px;
background: #fff;
margin: 0 20px;
} 
body#accounts, body#competition{
margin-left:0px;
margin-right:0px;
} /* used to be margin: 0 20px But there is no easy way to subclass this so completely new id */


#accounts #nav, #competition #nav {
height: 31px;
background-color: #fff;
}

/* New size (overrides) */
#content.wide {
font-size: 1.091em; /* 12px */
line-height: 1.333em; /* 16px */
width: 960px;
margin: 24px 17px;
}

/* accounts */
#content.thin {
width: 465px;
margin: 30px auto;
}

#content.medium {
width: 590px;
margin: 30px auto;
}

h2, h3, h4, legend, a, h1 span, .shareResource p {
color: #535353;
}

h1, h2.h1 {
font-size: 2em; /* 24px */
line-height: 1.3em;
color: #333;
}

h1 span {
font-size: 0.6875em; /* 20px @ 11 base */
margin-right: 5px;
}

h1.crumbtrail {
font-size: 1.333em; /* 16px */
font-weight: normal;
margin: 0 10px 1.25em; /* 20px */
color: #999;
}

h1.crumbtrail .current {
font-size: 1.625em; /* 26 px */
line-height: 1.3em;
display: block;
color: #333;
}

h1.lined, .editBox h2.lined {
border-bottom: 1px solid #e2e2e2;
}

h2, .area h3 {
font-size: 1.333em; /* 15px @ 11, should be 1.364em - 16px @ 12 */
margin: 0 0 1em; /* 15px @ 11,  16px @ 12 */
}

h3, .area h4 {
font-size: 1.17em; /* 14px */
margin: 0.83em 0; /* 12px, 13px @ 12 */
}

h2.fill, h3.fill, h4.fill {
margin-bottom: 0;
}

h2.first, .wide .first, .wide h2.first, .wide h3.first {
margin-top: 0;
}

.wide h2, .area h3, .singleEditBox {
border-bottom: 0.25em solid #e2e2e2; /* 4px */
padding-bottom: 0.438em; /* 7px */
margin-top: 1.875em; /* 30px */
}

.area h2 {
border: none;
font-size: 23px; /* TODO */
font-weight: normal;
margin-bottom: 0;
margin-top: 7px; /* TODO */
}

.area h3 {
margin-top: 0;
}

/* Colours */
/**************************************/

.inactive {
color: #C1C1C1; /* Light grey */
}

.lite, q.status, .js .placeholder {
color: #999; /* Light grey */
}

p.error, div.error, ul.error li, strong.error, #formError, #formError h3, #fileUploadError,  #fileUploadError h3, .errorFlash {
color: #c00; /* Red */
}

span.errorBlock {
color: #c00;
display: block;
}

input.error, textarea.error {
border: 1px solid #c00; /* Red */
}

#accounts input.error {
padding: 2px;
}

.wide a, 
.split a {
color: #06C; /* Blue */
text-decoration: none;
}

.wide a:visited,
#accounts a:visited {
color: #975DA6; /* Purple */
}

.wide a:hover, #accounts a:hover, #content a:focus, #content a:active {
text-decoration: underline;
}

a.competitonCarLinks:link {color: black; text-decoration: none; }
a.competitonCarLinks:hover {color: black; text-decoration: underline; }
a.competitonCarLinks:visited {color: black; text-decoration: underline; }


a.jsControl:visited,
#accounts a.jsControl:visited {
color: #06C; /* Blue */
}

.sub a, a.sub, .wide a span, .lite a, a.jsControl.sub:visited, a span.sub {
color: #39C; /* Light blue */
}

.sub a:visited, a.sub:visited, .wide a:visited span, .lite a:visited, a:visited span.sub {
color: #AC7DB8; /* Light purple */
}

a span acronym {
border-color: #39C; /* Purple */
}

a:visited span acronym {
border-color: #AC7DB8; /* Light purple */
}

img.inlineIndicator {
margin-left: 10px;
vertical-align: top;
}

h2.jobs {
border-color: #ED1A3A; /* Red */
}

h2.community {
border-color: #00A560; /* Green */
}

/* Structure */
/**************************************/
#wrapper {
width: 994px; 
margin: 0 auto;
position: relative;
}

#content.extrasCol {
background: url('front/images/extras_faux_column.png') repeat-y 10px 0; 
}

/* Common Content Formats */
/**************************************/

.banner {
overflow: hidden;
margin: 0px 10px 15px 10px;
border: 1px solid #ccc;
position: relative;
}

.banner h2 {
border: none;
margin: 10px;
padding: 0;
font-size: 14px;
}

.banner p {
margin: 10px;
}

.banner img {
float:right;
margin-left: 1em;
}

.bannerMargin {
margin-top: 15px;
}

.banner620 {
min-height: 88px;
width: 618px;
}

.g8 .banner620 {
margin-left: 0;
margin-right: 0;
}

.rounded, .boxed, .help, .flash, .errorFlash, .roundedItems li {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.boxed {
background: #eee;
border: 1px solid #eee;
padding: 10px;
margin-bottom: 10px;
}

.boxed .row {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
min-height: 20px;
}

.boxed .lastRow {
border: none;
padding: 0;
margin: 0;
}

.help {
background-color: #E1F0E1;
border: 1px solid #87C487;
padding: 15px 15px 0;
}

.help h4, .help p {
margin-bottom: 1em;
}

.help h4 {
color: #00a560;
}

.helpContainer {
position: absolute;
overflow: visible !important;
}

.helpContainer img {
left: -19px;
position: absolute;
top: 14px;
}

.helpIcon {
cursor: help;
margin-left: 5px;
}

.flash {
background-color: #E1F0E1; /* Green */
border: 1px solid #87C487;
margin: 0 0 2em;
font-weight: bold;
padding: 10px;
color: #00a560; 
}

.errorFlash {
background: #FFE5E5;
border: 1px solid #c00;
padding: 10px;
margin: 0 0 2em;
}

.wide .nav,
.editBox,
.files,
.addComment {
background: #f6f6f6;
}

.wide .nav,
.files,
.addComment {
padding-bottom: 1.154em; /* 15px */ 
padding-top: 1.154em; /* 15px */
}

.wide .nav {
font-weight: bold;
font-size: 1.083em; /* 13px */
line-height: 1.308em; /* 17px */
}

/* Striped lists (e.g. comments, resources) */

.striped li {
width: 620px;
margin: 0.5em 0 0.5em;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}

.striped li .g3,
.striped li .g2 {
margin-right: 0;
}

.striped li .g5,
.striped li .g6 {
margin-left: 0;
padding-left: 15px;
}

.striped li .g5 {
width: 365px;
}

.striped li .g6 {
width: 445px;
}

.striped li.first {
border-top: none;
}

.striped li.last {
border-bottom: none;
margin-bottom: 0;
}

.striped li.even {
border: none;
}

.striped li div {
margin-top: 0.8333em; /* 10px */
margin-bottom: 0.8333em;
}

.striped h3 {
margin-top: 0;
font-weight: normal;
font-size: 1.167em; /* 14px */
clear: both;
}

/* Related container */
.related {
margin-top: 3em;
border-top: 1px solid #ccc;
}


/* Search (resources) */
/**************************************/

.search {
height: 8.333em; /* 100px */
color: #fff;
background: #32355C url('front/images/search_bkg.gif') repeat-x;
position: relative;
}

.search label {
display: block;
font-weight: normal;
}

.search select {
width: 160px;
height: 1.583em; /* 19px */
margin-left: 0.417em; /* 5px */
}

.search .keyword, .search .facets {
float: left;
height: 6.667em; /* 80px */
padding: 1.417em 10px 0;
}

.search .keyword {
width: 330px;
padding-left: 20px;
height: 5.417em; /* 65px */
background: url('front/images/search_bkg_line.gif') 100% 0 no-repeat;
}

.search .keyword input {
width: 320px;
font-size: 1.333em; /* 16px */
}

.search .facets {
width: 230px;
text-align: right;
padding-right: 10px;
}

.search .facets label {
margin-bottom: 0.417em; /* 5px */
}

.search input.sprite {
position: absolute;
left: 279px;
top: 60px;
}

/* Resources Home, Channel and Hub 
#resources.home, #resources.channel, #resources.hub */
/**************************************/

.shareResource {
border: 0.083em solid #dadada; /* 1px */
padding: 0.833em 10px; /* 10px */
height: 6.5em; /* 78px */
}

.shareResource h2 {
font-weight: normal;
border: none;
font-size: 1.833em; /* 22px */
margin-bottom: 0.682em; /* 15px */
margin-top: 0;
padding-bottom: 0;
line-height: 1em;
}

.calendar {
padding: 0.75em 9px; /* 9px */
position: relative;
}

.calendar form {
border-bottom: 0.083em solid #c2c2c2; /* 1px */
border-top: 0.083em solid #c2c2c2; /* 1px */
padding: 0.583em 0; /* 7px */
}

.calendar form select {
width: 90px;
margin: auto 5px;
vertical-align: middle;
}

.calendar form input.sprite {
background: url('graphics/buttons/b_go.png');
height: 19px;
width: 40px;
}

.calendar h2 {
font-size: 1.25em; /* 15px */
line-height: 1.2em; /* 18px */
border-bottom: 0.083em solid #c2c2c2; /* 1px */
padding-bottom: 0.467em; /* 7px */
margin: 0;
}

.calendar h3 {
font-size: 1.167em; /* 14px */
line-height: 1.286em; /* 18px */
padding-bottom: 0.5em; /* 7px */
border-bottom: 0.286em solid #898989; /* 4px */
}

.calendar ul {
font-weight: bold;
margin: 0.417em 0; /* 10px */
}

ul.reviews h3,
ul.community h3,
ul.resources h3,
ul.resources h4,
ul.jobs h3 {
margin-bottom: 0;
}

ul.community h3 a:hover,
ul.jobs h3 a:hover,
ul.resources h4 a:hover,
ul.resources h3 a:hover {
text-decoration: none;
cursor: pointer;
}

ul.community h3 a:hover strong.title,
ul.jobs h3 a:hover strong.title,
ul.resources h4 a:hover strong.title,
ul.resources h3 a:hover strong.title {
text-decoration: underline;
}

ul.reviews h3 a,
ul.resources h4 a, {
line-height: 1.286em; /* 18px */
}

ul.resources a span {
font-size: 0.857em; /* 12px */
float:left; /* Hack to stop underline showing */
width:100%;
}

ul.resources a span {
display: block;
}

li.sub {
margin-top: 1.25em; /* 15px */
font-weight: bold;
}

.resources li span.author {
font-size: 0.917em; /* 11px */
line-height: 1.455em; /* 16px */
}

ul.reviews span.lite,
ul.community span.lite,
ul.jobs span.lite {
font-size: 0.917em; /* 11px */
}

ul.community a span,
ul.jobs a span {
font-size: 0.857em; /* 12px */
}

ul.reviews span,
ul.community span,
ul.jobs span {
display: block;
}

ul.reviews span,
ul.reviews p,
ul.reviews h3,
ul.community h3,
ul.community span {
margin-left: 74px;
}

ul.community h3 span {
margin-left: 0;
}

ul.community h3 img,
ul.reviews h3 img {
margin-left: -74px;
}

.dblclick {
margin-top: 4.333em; /* 56px */
}

div.partner h2 {
font-size: 1.5em; /* 18px */
line-height: 1.333em; /* 24px */
border-bottom: none;
}

div.partner h2 img {
margin-top: -1em;
border: 4px solid #fff;
}

div.partner h2 span {
font-size: 0.667em; /* 12px */
}

.interactive ul.resourceTitles {
font-weight: bold;
line-height: 1.286em; /* 18px */
margin: 0.714em 0;
}

/* Resources home - #resources.home */
/**************************************/

.area h2 {
margin: auto 10px;
border-top:2px solid #CCC;
padding-top: 0.583em;
}

/* Foundation override */
.g8 .area h2 {
margin: auto 0;
}

.area .nav {
min-height: 190px;
font-size: 1em;
}

.area .nav ul {
margin-left: 0;
line-height: 1.5em;
}

.area .nav .g2 {
width: 140px;
margin-right: 0;
}

.area p.assoc {
font-size: 0.917em; /* 11px */
}

.area p.assoc a {
font-weight: bold;
}

.area p.assoc img {
margin-top: -1em;
}

/* Resource detail - #resources.detail */
/**************************************/

.author img.avatar {
display: block;
/* overrides */
float: none;
margin: 5px 0 0;
overflow: hidden;
}

.files {
line-height: 18px;
padding: 1.25em 10px; /* 15px */
margin: 0;
}

.files li {
margin-bottom: 1.25em; /* 15px */
background: none;
padding: 0;
}

.files h3 {
margin: 0;
font-size: 1.167em; /* 14px */
}

.files img {
vertical-align: middle;
}

.files span {
font-size: 0.917em; /* 11px */
}


dl.details {
line-height: 1.333em; /* 16px */
}

dl.details dt,
dl.meta dt {
color: #7F7F7F;
font-weight: bold;
font-size: 1.167em; /* 14px */
}

dl.details dd {
margin-bottom: 1.3em;
}

dl.details dd p {
margin-top: 0;
}

dl.meta {
margin: 1.5em 0;
font-size: 0.917em;
color: #333;
}

dl.meta dt {
float: left;
clear: left;
margin-right: 0.5em;
font-weight: normal;
font-size: 1em;
}

dl.meta dd {
margin-bottom: 0;
margin-top: 0;
}

dl.meta dd.lite {
color: #999;
margin-top: 0;
clear: both;
}

.files,
.addComment {
background: #f6f6f6;
padding-bottom: 1.25em; /* 15px */ 
padding-top: 1.25em; /* 15px */
}

.embeds div {
margin-bottom: 1.667em; /* 20px */
}

/* Add comment */

.addComment {
padding-left: 10px;
padding-right: 10px;
}

.addComment label {
display: block;
margin-top: 0.8333em; /* 10px */
font-weight: bold;
}

.addComment .star_rating_sleeve label {
margin-top: 0.5833em; /* 7px */
}

.addComment .star_rating p {
font-size: 0.917em; /* 11px */
}

.addComment label strong {
display: block;
}

.addComment input.text {
width: 200px;
}

.addComment .post_options {
margin-top: 0.8333em; /* 10px */.
}

.addComment li {
background: url(front/images/resources_star.png) no-repeat 0 0;
padding: 0;
height: 18px;
}

.addComment li.on,
.addComment li.over {
background-position: 0 100%;
}

/* .comments extends ul.striped */

.comments li .g5 p {
margin-bottom: 0;
}

.comments .author img.avatar {
margin-top: 0.8333em; /* 10px */
}

.comments .lite {
margin-top: 0.909em; /* 10px */
font-size: 0.917em; /* 11px */
}

.comments h4 {
margin: 0;
font-size: 1em;
}

.comments p {
font-size: 1em;
}

.comments dl.meta {
float: right;
margin-top: -46px;
width: 169px;
}

.comments dl.meta .lite {
font-size: 1em;
color: #7F7F7F;
}

/* Profile pages - #user.profile */
/**************************************/

q.status {
font-size: 1.5em; /* 18px */
line-height: 1.3em;
margin-bottom: 30px;
display: block;
}

a.addAsFriend {
position: absolute;
margin-left: 535px;
margin-top: -1.8em;
font-weight: bold;
}

/* extends ul.resources and ul.striped */
.stripedResources li {
padding: 0.8333em 0;
margin: 0;
}

.stripedResources h3 {
font-weight: bold;
}

#friendsWidget {
position: relative;
}

#friendsWidget img.control {
top: 100px;
position: absolute;
cursor: pointer;
}

#friendsWidget img.right {
right: 0;
}

#friendsWrapper {
overflow: hidden;
position: relative; 
margin-left: 25px;
width: 575px;
height: 100px;
}

.friends ul {
height: 100px;
float: left;
width: 600px;
height: 100px;
}

.friends li {
float: left;
width: 95px;
height: 100px;
text-align: center;
}

.friends li img {
margin: 0 auto 3px;
display: block;
}

/* Edit profile */

.editBox {
margin-bottom: 30px;
padding: 0.8333em 10px;
position: relative;
}

.editBox .g6 {
width: 450px;
}

.editBox .g2 {
width: 130px;
}

.editBox .g8 {
width: 600px;
}

.editBox h2 {
margin-top: 5px;
}

.editBox h2.h1 {
margin-top:-5px;
padding-bottom:5px;
}

.editBox .editButton {
position: absolute;
top: 10px;
right: 20px;
}

/* extends editBox */
.singleEditBox h2,
.singleEditBox q {
margin-bottom: 0;
border: none;
padding-bottom: 0;
}

.singleEditBox label {
position: absolute;
right: 20px;
top: 15px;
}


/* Sign up */
/*************************************************/
#accounts .errorFlash,
#accounts .flash {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
background-color: #fff;
}

#accounts .flash {
border-color: #006bb3;
color: #006bb3;
}



#accounts #content, #competition  #content{
padding-bottom: 10px;
padding-top: 10px;
}

#accounts hr {
border: 0;
border-top: 1px solid #cacaca;
border-bottom: 1px solid #fff;
}

#accounts #login hr {
border-top-color: #333;
border-bottom-color: #959595;
}


/*#accounts #header {
padding-top: 20px;
}*/

/*#accounts.split #header {
padding-top: 0;
} */
/* deprecated? */
			#login h2 {
			text-indent: -9999px;
			height: 27px;
			width: 257px;
			background: url("../magazine/front/images/already_signed_up.png") no-repeat left bottom;
			margin-bottom: 14px;
			}

/* deprecated? 
#accounts h2 {
font-size: 30px; 
color: #999;
text-shadow: #fff 1px 1px 1px;
font-weight: normal;
}
*/
#accounts #content.thin h2 {
font-size: 24px;
}

#accounts h3 {
margin-bottom: 0;
}

#accounts .checks h3 {
margin-bottom: 1em;
}

#registerForm,
#secondaryForm {
margin-left: 0;
background-color: #e8e5e4;
padding-top: 18px;
padding-left: 17px;
padding-right: 17px;
width: 595px;
}

#registerForm.activation p.flash {
margin: 20px 0;
}

#secondaryForm hr,
#registerForm hr {
border-top: none;
border-bottom: #6ca0c9 1px dotted;
background-color: transparent;
color: transparent;
height: 1px;
}

#registerForm h2 {
text-indent: -9999px;
width:199px;
height:25px;
background: url("../magazine/front/images/join_us_for_free.png") no-repeat left bottom;
margin-bottom: 10px;
}

h2.forgotUsername {
text-indent: -9999px;
width:514px;
height:25px;
background: url("../magazine/front/images/forgotten_your_username_or_password.png") no-repeat left bottom;
margin-bottom: 10px;
}

h2.updatePassword {
text-indent: -9999px;
width:290px;
height:25px;
background: url("../magazine/front/images/update_password_error.png") no-repeat left bottom;
margin-bottom: 10px;
}

#registerForm .subjects #addAnotherSubject {
position: relative;
top: -15px;
margin-bottom: -15px;
}

#secondaryForm form.standard label, 
#registerForm form.standard label {
padding-top: 3px;
}

#secondaryForm form.standard label,
#secondaryForm form.standard strong.label,
#registerForm form.standard label,
#registerForm form.standard strong.label {
color: #000;
text-align: left;
}

#secondaryForm input.text,
#registerForm input.text {
border: 1px solid #fff;
height: 26px;
line-height: 26px;
padding-left: 8px;
}

#registerForm #captcha {
margin-left: 10px;
}

#registerForm input.check {
border: none;
}

#registerForm select {
border: 1px solid #b8b7b5;
background-color: #b8b7b5;
padding: 4px 3px 3px 8px;
height: 26px;
line-height: 26px;
padding-left: 8px;
vertical-align: middle;
width: 225px;
}

#registerForm #validationSummary {
margin: 20px 0;
}

#secondaryForm form.standard fieldset div,
#registerForm form.standard fieldset div {
margin-top: 12px;
margin-bottom: 20px;
}

#secondaryForm form.standard fieldset.submit,
#registerForm form.standard fieldset.submit {
padding-left: 149px;
padding-top: 15px;
padding-bottom: 20px;
}

#registerForm form.standard.part2 fieldset.submit div.buttons {
overflow: visible;
}

#registerForm form.standard.part2 fieldset.submit div.buttons p {
white-space: nowrap;
}

#registerForm form.standard.part2 fieldset.submit a,
#registerForm form.standard.part2 fieldset.submit a:hover,
#registerForm form.standard.part2 fieldset.submit a:visited,
#registerForm form.standard.part2 fieldset.submit a:active {
color: #000;
font-weight: normal;
}

#registerForm form.standard.part2 fieldset.submit {
padding-left: 0;
}

#registerForm form.standard.part2 fieldset,
#registerForm form.standard.part2 div.asFieldset {
padding-right: 210px;
}

#registerForm form.standard.part2 div.asFieldset {
padding-top: 12px;
}

#secondaryForm input.cancel,
#secondaryForm input.submit,
#registerForm input.cancel,
#registerForm input.submit {
font-size: 1.3333em;
width: auto;
height: 30px;
}

#secondaryForm input.submit,
#registerForm input.continue {
font-size: 1.3333em;
width: 215px;
text-align: center;
}

#secondaryForm p.flash,
#secondaryForm p.errorFlash,
#secondaryForm div.errorFlash
{
margin: 12px 0;
}


#registerForm div.terms {
margin-left: 149px;
}

/* Overrides margin:0 10px of .g class */
				#login,
				#needAccount, #competitionCar {
				margin-left: 0;
				display: inline-block;
				vertical-align: top;
				color: #666;
				min-height: 164px; /* TODO */
				}

				.compCaptcha{
				float: left;
				clear: both;
				padding: 15px 20px;
				}

				#competitionCar {
				background-color: white;
				margin:0;
				padding-top: 17px;
				padding-left: 9px;
				padding-right: 9px;
				width: 614px;
				}

				#login {
				width: 288px; /*312 edge-to-edge width - padding 12L + 12R */
				float:right;
				padding:17px 12px 10px 12px;
				color:black;
				background-color: #E8E7E4;
				}
				
				#competitionCarRight{
				width: 312px; 
				float:right;
				}
				
				#competitionCarRemind {
				width: 292px; /*312 edge-to-edge width - padding 12L + 12R */
				float:right;
				clear: both;
				padding:10px;
				background-color: #fff;
				margin-bottom: 14px;
				}
				
				#competitionCarQuote {
				width: 280px; /*312 edge-to-edge width - padding 12L + 12R */
				height: 230px;
				float: right;
				clear: both;
				padding:10px;
				border: solid 6px #e8e7e4;
				background: #fff url(../magazine/front/images/competition_car_blurb_bg.png) no-repeat left bottom;
				}
				
				#competitionCarQuote div {
				width: 242px;
				}
				
				#competitionCarQuote p{
				font-size: 0.98em;
				}
				
				#competitionCar hr {color: #fff; background-color: #fff; border: 1px dotted #ff8e9c; border-style: none none dotted; }
				
				#competitionCarRemind ul
				{
				margin-left: 12px;
				margin-top: 14px;
				}
				
				#competitionCarRemind li
				{
				list-style-image: url(../magazine/front/images/competition_car_bullet.gif);
				margin-bottom: 7px;
				}
				
				#competitionCarRE{
				float: right;
				padding-bottom: 11px;
				}
				
				#remindMe{
					float: left;
					padding-top: 15px;
					padding-right: 5px;
					font-weight: bold;
					width: 255px;
				}
				
				

#accounts.split #login {
display: block;
margin: 0 auto;
}

#accounts #header h1 {
background-image: none;
}

#accounts #footer, #competition #footer {
border-top: none;
}

#accounts .step {
text-transform: uppercase;
float: right;
margin-top: 8px;
}

/* below deprecated ? */
#needAccount h2 {
font-size: 18px;
font-weight: normal;
color: #666;
}
						
				#loginErrorPanel{
				color: #D51300;
				font-size: 0.7em;
				font-weight: bold;
				height: 16px;
				margin: 0;
				padding-bottom: 15px;
				padding-left: 75px;
				}
				
				#login fieldset {
			
				}

				#login div.loginBoxIntro {
				border-bottom: 1px dotted #0060AD;
				border-top: 1px dotted #0060AD;
				font-size: 1.0833em;
				font-weight: bold;
				line-height: 1.3077em;
				margin-bottom: 9px;
				/*margin-bottom: 10px;
				padding-bottom: 13px;
				padding-top: 13px;
				height: 33px;*/
				}

				#login div.loginBoxIntro p {
				margin: 13px 0;
				}

				#login div.loginBoxIntro div.errorFlash,
				#login div.loginBoxIntro p.errorFlash,
				#login div.loginBoxIntro p.flash {
				margin-top: 11px;
				margin-bottom: 10px;
				}

				#login .resetLogin {
				/*padding-top: 31px;*/
				}
				
				#login fieldset div, #login input.login  {
				font-size: 1em;
				}

				#login fieldset div label {
				float: left;
				}
				#login input.login {
					font-size: 1.3333em;
					font-weight: bold;
				}

				#login .formFields{

				float: left;
				font-size: 1.0833em;
				margin-top: 15px;
				}
				
				#login fieldset a{
				display:block;
				margin: 8px 0 20px 0;
				font-size:0.95em; /* 11px as 0.95em of inherited 12px = 11px */
				font-style:italic;
				}
				#login p.intro {
				font-weight:bold;
				padding-top:9px;
				font-size: 1.0833em;
				line-height: 1.3077em;
				padding-bottom: 16px;
				}

				#login label, #login input.text, #login input.error  {
				display: inline-block;
				height:30px;
				line-height:30px; /* line-height same as input's height so that text is vertically centred. Don't trust 'vertical-align:middle' ! */
				}

				#login input.text, #login input.error  {
				padding-top: 0;
				padding-bottom: 0;
				}

				#formLayout label, #formLayout input
				{
					display: block;
					float: left;
					margin-bottom: 10px;
				}
				
				#formLayout label{
				padding-top: 8px;
				}
				
				#formLayout input
				{
					width: 280px;
					height: 30px;
					margin-left: 10px;
					margin-right: 10px;
					border: 0px;
					background: #e8e7e4;
					padding-left: 10px;
				}
				
				#friendEmailList{
				clear: both;
				float:left;
				}

				#friendEmailList div {
				 border: 10px solid #E8E7E4;
				 background: #E8E7E4;
				margin-left: 25px;
				margin-right: 10px;
				overflow: hidden;
				width: 270px;
				}

			 
				#formLayout br
				{
					clear: left;
				}

				#login label {
					width:76px;
					display: inline-block;
				}
				
				#login fieldset.submit input {
				float: right;
				}

				#login  input.text {
				 background-color: #FFFFFF;
				border: 1px solid white;
				padding-left: 8px;
				width: 200px;
		
				}
				
				#login  input.error, #login fieldset.errorFieldset input.text {
				width: 200px; /* 216px edge-to-edge width - 8px padding left */
				border: 1px solid red;	
				padding-left:8px;
				background-color:#fff;
				}
				
				
				
		#accounts #login a,
		#accounts #login a:visited {
		display: block;
		clear: both;
		color: #747474;
		font-size: 12px;
		font-weight: normal;
		text-decoration: underline;
		}
		#formLayout a, a:visited {
		color: #747474;
		font-size: 12px;
		text-decoration: underline;
		}
		
		#competitionCarRE a, a:visited {
		color: #4a4d42;
		font-size: 12px;
		font-weight: bold;
		text-decoration: none;
		}
		
		#competitionCarRE  a:hover {
		text-decoration: underline;
		}
		
		#formLayout #ReferredEmails {
		 background: none repeat scroll 0 0 #E8E7E4;
		border: 0 none;
		margin-right: 10px;
		width: 310px;
		outline:none; 
		}
		
		#formAdd{
		padding-top: 7px;
		}
		
		#formRemove {
		float: left;
		}
		
		.formLayoutError{
		text-align: left;
		clear: both;
		color: #ED1B2F;
		font-weight: bold;
		padding-left: 25px;
		margin-bottom: 12px;
		}
		
		#formErrorPanelMessage{
		border: 1px solid #ED1B2F;
		color: #ED1B2F;
		font-weight: bold;
		padding: 5px;
		margin-top: 15px;
		margin-bottom: 15px;
		}
		
		#formErrorPanel{
		margin-bottom: 15px;
		}

		#needAccount  {
		padding:0;
		}

		#needAccount.register {
		padding-top: 17px;
		padding-left: 6px;
		padding-right: 6px;
		padding-bottom: 0;
		width: auto;
		float: right;
		background-color: #fff;
		}
		#needAccount.register .gutterL10 {
		margin-right: 0;
		}

		#needAccount ol {
		overflow:hidden; /* Chrome/FF -helps hide the numbers of the OL */
		list-style-position:outside;
		background-color:#fff;
		}
			/* Typeography */
			#needAccount  {
			background: none repeat scroll 0 0 white;
			font-weight: bold;
			padding: 17px 10px 0;
			width: 612px;
			}
			/* Typeography ends */
			#needAccount div {
			
			}
			
			
			
			#reasonsContainer	{		 
			border-bottom: 1px dotted #FE8F96;
			clear:both;
			width: 610px;
			}

			
			#needAccount h2 {
			text-indent: -9999px;
			width:529px;
			height:27px;
			background: url("../magazine/front/images/reasons_to_join.png") no-repeat left bottom;
			margin-bottom: 15px;
			}

			#needAccount.register h2 {
			width:269px;
			background: url("../magazine/front/images/four_reasons_to_join.png") no-repeat left bottom;
			}
			
			#competitionCar h2 {
			text-indent: -9999px;
			width:369px;
			height:27px;
			background: url("../magazine/front/images/they-join-us.png") no-repeat left bottom;
			margin-bottom: 10px;
			}
			
            
			#needAccount ol {
			
			padding-bottom:0;
		
			}
		#needAccount ol  li {
		position:relative;
		width:223px;
		height:74px;
		background: #E8E7E4 url("../magazine/front/images/1234_sprite.png") no-repeat left top;
		display:inline-block;
		padding: 10px 5px 10px 72px; /* left + right padding = 77px; */
		margin-bottom: 10px;
		color:black;
		font-size: 1.299em;
		font-weight: normal;
		line-height: 1.333em;
/*		font-weight: normal;*/
		letter-spacing: 0.02em;

		}
		#needAccount ol  li span {
		position:absolute;
		bottom:0px;
		right:0px;
		width:275px;
		height:34px;
		line-height:34px;
		display:block;
		padding: 0 12px 0 13px;
		background-color: #b8b7b5;
		color: #004d23;
		text-transform: uppercase;
		font-size: 1.0666em;
		letter-spacing: 0.025em;
		font-weight: bold;
		}
		.gutterL10 {
		  margin-right:10px;
		}
		#needAccount.register ol li {
		clear: both;
		}
		#needAccount ol  li.first {
		/*background-color: yellow;*/
		float: left;
		}
		#needAccount ol  li.second {
		/*background-color: aqua;*/
		background-position: left -60px;
		float: left;
		}
		#needAccount ol  li.third {
		/*background-color: silver;*/
		background-position: left -120px;
		float: left;
		clear: both;
		}
		#needAccount ol  li.forth {
		/*background-color: teal;*/
		background-position: left -180px;
		float: left;
		}
		
		#needAccount h3.joinStrapline {
			width: auto;/* 286px + paddingLR of 8px apiece = total edge-to-edge width of 300px */
			color: #010101;
			font-size: 1.8333em;
			margin-top: 11px;
			float: left;
			}
			
		#competitionCar h3{
			width: auto;/* 286px + paddingLR of 8px apiece = total edge-to-edge width of 300px */
			color: #010101;
			font-size: 1.5em;
			font-weight: normal;
			margin: 0;
			}
			
		#competitionCarQuote h3.competitionQuote{
			width: auto;/* 286px + paddingLR of 8px apiece = total edge-to-edge width of 300px */
			color: #ed1b2f;
			font-size: 1.8em;
			margin: 0px;
			line-height: 23px;
			}
			
		#competitionCarQuote p{
			margin-top: 5px;
			
			}
			
		#competitionCar p{
		margin-bottom: 21px;
		letter-spacing: .03em;
		}
		
		#competitionBanner {
			margin-bottom: 13px;
		}
			
		#competitionCar p.competitionHeadline{
			width: auto;/* 286px + paddingLR of 8px apiece = total edge-to-edge width of 300px */
			color: #7e7e7e;
			font-size: 1.5em;
			margin-top: 0;
			margin-bottom: 13px;
			letter-spacing:0px;
		}
		
		#needAccount p.joinStrapline {
			float: left;
			clear: left;
			color: #7f7f7f;
			font-size: 1.0833em;
			margin-bottom: 0;
			white-space: nowrap;
		}

		#needAccount .joinStrapline {
			padding-left: 7px;
		}

		#needAccount a.signUp {
		color: #fff;
		text-decoration: none;
		text-align: center;
		font-size: 1.3333em;
		line-height: 30px;
		margin-top: 21px;
		margin-bottom: 9px;
		}

		#needAccount a.signUp:hover,
		#needAccount a.signUp:visited {
		color: #fff;
		text-decoration: none;
		}
		
		#competitionCar  a.enterCompetition{
		color: #fff;
		text-decoration: none;
		text-align: center;
		font-size: 1.3333em;
		line-height: 30px;
		margin-top: 21px;
		margin-bottom: 21px;
		}
		
		#competitionAgreed{
			color: white;
			background: #e8e7e4;
			font-size: 1.3333em;
			line-height: 30px;
			margin-bottom: 21px;
			margin-top: 21px;
			text-align: center;
			text-decoration: none;
			font-weight: bold;
			 width: 300px;
		}
/*#accounts.split #header {
height: 30px;
margin: 0 -20px 20px;
padding: 20px;
background: #fff;
}*/

#accounts.split {
/*background: #eee url('front/images/backround_texture.png') repeat-x;*/
}

#signUp {
/*width: 595px;*/
}

form.standard {
margin: 0 auto;
}

form.standard span.placeholder {
display: block;
}

.js form.standard span.placeholder {
position: absolute;
left: 225px;
top: 4px;
display: inline;
}

.js #signUp span.placeholder {
left: 145px;
}

form.standard div {
margin: 5px 10px;
position: relative;
clear: both;
}

form.standard div div {
margin-left: 0;
margin-right: 0;
}

form.standard div p,
form.standard span.errorBlock {
margin-left: 140px;
margin-top: 0.5em;
}
.weak {
color: #c00;
}

span.password_strength {
position: absolute;
top: 4px;
left: 356px;
margin: 0;
font-weight: bold;
}

span.password_strength,
.good {
color: #090;
}

span.password_strength_1,
.bad {
color: #c00;
}

span.password_strength_2,
.weak {
color: #f93;
}

form.standard label, 
form.standard strong.label {
width: 120px;
text-align: right;
display: block;
margin-top: 3px;
float: left;
margin-right: 10px;
color: #666;
font-size: 13px;
}

form.standard label noscript {
font-weight: normal !important;
display: block;
}

form.standard strong.label {
margin-top: 0;
}

form.standard div.check {
margin-left: 140px;
}

form.standard div.check input {
margin-left: 0;
}

form.standard div.check label {
float: none;
display: inline;
font-weight: normal;
}

form.standard div.check p {
margin-left: 1.6em;
margin-top: 0;
}

form.standard div.radio {
margin-bottom: 10px;
}

form.standard div.radio label,
#jobApplication div.radio label {
display: inline;
width: auto;
float: none;
margin-left: 5px;
margin-right: 10px;
font-weight: normal;
}

form.standard input.text {
width: 200px;
margin-left: 10px;
}

form.standard input.small {
width: 100px;
}

form.standard select {
width: 206px;
margin: 2px 0 3px 10px
}

a.removeSubject {
margin-left: 7px;
}

/*fieldset.personalDetails {
background: url('front/images/icon_lg_white_cardfile.png') right 9px no-repeat;
}

fieldset.career {
background: url('front/images/icon_lg_white_briefcase.png') right 9px no-repeat;
min-height: 50px;
}

fieldset.location {
background: url('front/images/icon_lg_white_globe.png') right 9px no-repeat;
min-height: 50px;
}

fieldset.community {
background: url('front/images/icon_lg_white_speech.png') right 9px no-repeat;
}*/

fieldset.submit .cancel,
fieldset.submit .delete {
margin: 6px 20px 0 0;
}

div.terms {
border: 1px solid #000;
background: #fff;
padding: 10px;
height: 200px;
overflow-y: scroll;
}

form.standard div.terms p {
margin-left: 0;
}

ol.nearlyThere li {
color: #000;
font-weight: bold;
}

ol.nearlyThere li span {
color: #000;
}

ol.nearlyThere.application {
font-size: 12px;
margin-top: 15px;
}

ol.nearlyThere.application li {
border: none;
margin-bottom: 20px;
}

form.standard div.date input {
width: 50px;
}

form.standard div.date select {
width: 137px;
}

form.standard div.date label.placeholder {
width: auto;
float: none;
display: inline;
margin: 0 0 0 10px;
}

.js form.standard div.date label.placeholder {
position: absolute;
font-weight: normal;
text-align: left;
margin-left: 15px;
margin-top: 4px;
}

form.standard textarea {
margin-left: 10px;
width: 365px;
border: 1px solid #cacaca;
padding: 5px;
height: 60px;
}

/* Applications */
/**************************************/

#accounts.application #content {
width: 960px;
margin: 0 auto;
}

#accounts.applicationOverview #content {
width: 590px;
position: relative;
}

#accounts.application h2 {
min-height: 60px;
}

#accounts.applicationOverview h2 {
font-size: 14px;
text-shadow: none;
min-height: 90px;
margin-right: 160px;
}

.applicationOverview h2 a,
.applicationOverview h2 span.title {
font-size: 24px;
display: block;
}

.applicationOverview h2 a span,
.applicationOverview h2 span.title span {
font-size: 13px;
display: block;
font-weight: bold;
}

.applicationOverview h2 span.title {
color: #666;
}

.applicationOverview .g {
margin-left: 0;
overflow: visible;
width: 400px;
}

.applicationOverview .supporting {
width: 160px;
margin-left: 10px;
}

.applicationOverview .applicationHelp {
width: 170px;
margin: 0 0 0 10px;
}

p.reviewSubmit {
margin-top: 10px;
}

p.reviewSubmit span {
vertical-align: middle;
}

ol.application {
font-size: 20px;
margin-bottom: 20px;
}

ol.application li {
background: #fafafa;
border: 1px solid #cacaca;
margin: 0 0 10px;
padding: 10px;
-moz-box-shadow: #fff 1px 1px 1px;
-webkit-box-shadow: #fff 1px 1px 1px;
}

ol.application li.ready {
background: #e6e6e6 url('front/images/tick.png') 370px 10px no-repeat;
}

#accounts ol.application li a,
#accounts ol.application li fieldset {
display: inline-block;
vertical-align: top;
width: 320px;
color: #666;
}

#accounts ol.application li fieldset,
#accounts ol.application li fieldset div {
margin: 0;
}

#accounts ol.application li fieldset div input {
margin: 10px 0 0;
}

#accounts ol.application li a:hover {
color: #06C;
}

#accounts ol.application li a span {
display: block;
font-size: 13px;
color: #999;
}

#accounts ol.application li a:hover span {
color: #39C;
}

ol.progress {
margin-top: 15px;
width: 200px;
}

ol.progress li {
padding: 5px 0;
font-size: 14px;
border-top: 1px solid #fff;
border-bottom: 1px solid #cacaca;
}

ol.progress li.first {
border-top: 0;
}

ol.progress li.last {
border-bottom: 0;
}

ol.progress li strong {
color: #333;
}

ol.progress li.ready {
background: url('front/images/tick.png') right 5px no-repeat;
}

span.reviewApplication,
a.reviewApplication {
font-size: 14px;
margin-top: 10px;
display: block;
}

/* for school badge */
.application .g8 {
position: relative;
}

img.schoolBadge {
border: 4px solid #ddd;
padding: 3px;
background: #fff;
max-width: 136px;
-moz-border-radius: 5px; 
border-radius: 5px;
}

.application img.schoolBadge {
position: absolute;
right: 0;
}

#jobApplication span.error {
display: block;
margin-left: 220px;
}

#jobApplication fieldset {
margin: 10px auto 20px;
}

#jobApplication label,
#jobApplication strong.label {
width: 200px;
}

#jobApplication div a.toggle,
#jobApplication div a.cancelBlock,
#jobApplication p.error,
#jobApplication div.error {
margin-left: 220px;
}

#jobApplication label.check {
width: auto;
margin: 2px 0 3px 220px;
text-align: left;
font-weight: normal;
}

#jobApplication div.radio {
margin-bottom: 3em;
}

#jobApplication div.radio p {
margin-left: 0;
}

#jobApplication label.check input {
margin: 0 5px 0 0;
}

.application a.add {
margin: 10px 0 10px 230px;
}

.application dd a.add {
margin: 0;
}

dl.labelValue dt {
float: left;
width: 210px;
text-align: right;
clear: both;
}

dl.labelValue dd {
float: left;
margin-left: 20px;
margin-bottom: 15px;
}

dl.heading {
border-bottom: 1px solid #ccc;
margin-bottom: 0;
}

.reviewApplication dl.labelValue {
margin: 20px 0;
}

.reviewApplication dl.labelValue dt {
color: #999;
}

.reviewApplication dl.labelValue dd {
font-weight: bold;
margin-bottom: 5px;
}

.reviewApplication dl.labelValue dd p {
width: 360px;
font-weight: normal;
}

.reviewApplication p.error {
margin-top: -15px;
}

.application dd li {
margin-bottom: 15px;
}

.application dd li a {
font-weight: bold;
display: block;
}

.reviewApplication dl.labelValue li,
.reviewApplication dl.labelValue span {
font-weight: normal;
}

#accounts .reviewApplication h3,
#accounts.applicationOverview h3 {
color: #666;
font-size: 20px;
font-weight: normal;
margin-bottom: 20px;
}

#accounts .reviewApplication h3 span {
font-size: 13px;
}

#accounts textarea.personalStatement {
width: 600px;
height: 400px;
margin: 0;
}

#jobApplication.checks div.check {
margin-left: 50px;
}

#jobApplication.checks div.check label {
margin-bottom: 10px;
font-weight: bold;
}

#jobApplication.checks div.check p,
#jobApplication.checks div.check textarea {
margin: 10px 0 0;
}

#accounts dl.labelValue dd {
max-width: 380px;
}

/* My jobs */
/*************************************************/

.empty {
color: #aaa;
text-align: center;
margin: 3em 0;
}

.empty p {
font-size: 1.5em;
line-height: 1.3em;
}

.myJobs, .alerts {
margin-top: 20px;
}

.myJobs li, .alerts li {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}

.myJobs a.deleteButton,
.myJobs div,
.myJobs img {
float: left;
margin-right: 1em;
}

.myJobs a.deleteButton {
margin-top: 7px;
}

.myJobs .school a,
.myJobs .school strong,
.myJobs .school span {
display: block;
margin-left: 120px;
}

.myJobs .noImage a,
.myJobs .noImage strong,
.myJobs .noImage span {
margin-left: 0;
}

.myJobs div span {
display: block;
}

.myJobs div a {
font-weight: bold;
}

.myJobs .school {
width: 350px;
}

.myJobs .application {
width: 200px;
}

.myJobs img {
height: 50px;
margin-left: -120px;
max-width: 90px;
}

/* Sprites */
/**************************************/

.formSprite {
background: transparent url('front/images/controls/form_sprite.png') no-repeat 0 0;
}

/* extends sprite, formSprite */
.deleteButton {
width: 18px;
height: 18px;
}

a.deleteButton {
display: block;
}

.deleteButton:hover {
background-position: 0 -18px;
}

.deleteButton:focus,
.deleteButton:active {
background-position: 0 -36px;
}

/* extends sprite, formSprite */
#addAnother a,
a.add {
height: 16px;
padding: 2px 0 0 28px;
background-position: 0 -60px;
display: inline-block;
}

#addAnother a:focus,
a.add:focus,
#addAnother a:active,
a.add:active {
background-position: 0 -78px;
}

/* extends sprite, formSprite */
input.continue,
a.continue {
background-position: 0 -207px;
height: 25px;
width: 81px;
display: block;
}

a.continue:focus,
a.continue:active,
input.continue:focus,
input.continue:active {
background-position: 0 -233px;
}

/* extends sprite, formSprite */
input.finish {
background-position: 0 -266px;
height: 25px;
margin-left: 2em;
width: 132px;
display: inline-block;
margin: 5px 0 5px 2em;
}

input.finish:focus,
input.finish:active {
background-position: 0 -292px;
}

input.disabledFinish {
background-position: 0 -318px;
}

/* extends sprite, formSprite */
input.add {
background-position: 0 -99px;
height: 21px;
width: 45px;
}

input.add:focus,
input.add:active {
background-position: 0 -121px;
}

/* extends sprite, formSprite */
div.add label {
width: 130px;
float:left;
text-align:right;
padding-right: 0.9em;
padding-top: 2px;
}

/* extends sprite, formSprite */
.search input.sprite {
background-position: 0 -349px;
height: 25px;
width: 67px;
}

.search input.sprite:focus,
.search input.sprite:active {
background-position: 0 -375px;
}

/* extends sprite, formSprite */
.editMy {
background-position:0 -406px;
height: 25px;
width: 130px;
display: block;
}

/* extends sprite, formSprite */
#resources.detail .editMy {
left: 490px;
margin-top: -32px;
position: relative;
}

.editMy:focus,
.editMy:active {
background-position: 0 -432px;
}

/* extends sprite, formSprite */
.editButton {
background-position: 0 -463px;
height: 21px;
width: 45px;
display: block;
}

.editButton:focus,
.editButton:active {
background-position: 0 -485px;
}

input.submit,
input.continue,
input.login {
height: 30px;
width: 288px;
background-color: #005bab;
color: #fff;
border-width:0;
font-weight: bold;
}

input.cancel {
height: 30px;
background-color: #929191;
color: #fff;
border-width:0;
font-weight: bold;
}

input.cancel,
input.submit,
input.continue,
input.login {
cursor: pointer;
}

input.submit:hover,
input.submit:focus,
input.submit:active,
input.continue:hover,
input.continue:focus,
input.continue:active,
input.login:hover,
input.login:focus,
input.login:active {
background-color: #032748;
}

input.send:hover, input.send:focus, input.send:active {
   background-color: #A10113;
}

input.send {
    background-color: #EE1B34;
    border-width: 0;
    color: #FFFFFF;
    height: 30px;
    width: 290px;
	font-size: 1.3333em;
	font-weight: bold;
	margin-left: 23px;
	margin-top: 12px;
	margin-bottom: 21px;
	float: left;
    clear: both;
}

a.signUp, a.enterCompetition {
height: 30px;
width: 300px;
display: block;
background-color: #EE1B34;
}

a.enterCompetition {
font-weight: bold;
}

a.signUp:hover,
a.signUp:focus,
a.signUp:active,
a.enterCompetition:hover,
a.enterCompetition:focus,
a.enterCompetition:active  {
background-color: #a10113;
}

/* extends sprite, formSprite */
input.updateYourPassword {
background-position: 0 -1882px;
height: 25px;
width: 156px;
}

input.updateYourPassword:focus,
input.updateYourPassword:active {
background-position: 0 -1908px;
}

/* extends sprite, formSprite */
input.iAgreeFinish {
background-position: 0 -800px;
height: 25px;
width: 117px;
}

input.iAgreeFinish:focus,
input.iAgreeFinish:active {
background-position: 0 -826px;
}

input.cancelButton {
background-position: 0 -1449px;
height: 25px;
width: 67px;
}

input.cancelButton:focus,
input.cancelButton:active {
background-position: 0 -1475px;
}

/* extends sprite, formSprite */
a.reSendActivation {
background-position: 0 -686px;
height: 25px;
width: 184px;
display: block;
} 

a.reSendActivation:focus,
a.reSendActivation:active {
background-position: 0 -712px;
}

/* extends sprite, formSprite */
input.sendLogin {
background-position: 0 -743px;
height: 25px;
width: 143px;
}

input.sendLogin:focus,
input.sendLogin:active {
background-position: 0 -769px;
}

/* extends sprite, formSprite */
input.save {
background-position: 0 -511px;
height: 25px;
width: 56px;
}

input.save:focus,
input.save:active {
background-position: 0 -537px;
}

/* extends sprite, formSprite */
input.saveContinue {
background-position: 0 -857px;
height: 25px;
width: 139px;
}

input.saveContinue:focus,
input.saveContinue:active {
background-position: 0 -883px;
}

/* extends sprite, formSprite */
.submitApplication {
background-position: 0 -1028px;
height: 25px;
width: 196px;
display: block;
}

.submitApplication:focus,
.submitApplication:active {
background-position: 0 -1054px;
}

/* extends sprite, formSprite */
.reviewAndSubmit {
background-position: 0 -1086px;
height: 25px;
width: 141px;
display: block;
}

.reviewAndSubmit:focus,
.reviewAndSubmit:active {
background-position: 0 -1112px;
}

/* extends sprite, formSprite */
.reviewAndSubmitGrey {
background-position: 0 -1138px;
height: 25px;
width: 141px;
display: block;
}

/* extends sprite, formSprite */
.createAlert {
background-position: 0 -1294px;
height: 25px;
width: 92px;
display: block;
}

.createAlert:focus,
.createAlert:active {
background-position: 0 -1320px;
}

/* extends sprite, formSprite */
.apply {
background-position: 0 -1172px;
height: 25px;
width: 59px;
display: block;
}

.apply:focus,
.apply:active {
background-position: 0 -1198px;
}

/* extends sprite, formSprite */
.applyForRole {
background-position: 0 -1233px;
height: 25px;
width: 138px;
display: block;
}

.applyForRole:focus,
.applyForRole:active {
background-position: 0 -1259px;
}

/* Legacy: star rating widget */
/**************************************/
.star_rating_sleeve { zoom: 1; }
.star_rating_sleeve:after { content: "."; clear: left; display: block; height: 0; visibility: hidden; }
.star_rating label, .star_rating p { float: left; margin: 0 10px 0 0; }
.star_rating p { margin-left: 10px; }
.star_rating li { float: left; width: 22px; height: 18px; background: url(front/images/resources_star.png) no-repeat 0 0; cursor: pointer;}
.star_rating li.on, .star_rating li.over { background-position: 0 100%;}
.star_rating li span { position: absolute; left: -9999px; }
.star_rating .average_rating { float: right; }


/* legacy - resources quick search in old sidebar, contains overrides */
#extras #resourcesQuickSearch h2 {
color: #fff;
font-weight: normal;
border: none;
background: none;
font-size: 14px;
margin-top: -2px;
margin-bottom: 15px;
}

#resourcesQuickSearch input,
#resourcesQuickSearch select {
float: right;
margin-bottom: 10px;
}

#resourcesQuickSearch select,
#resourcesQuickSearch input.text {
width: 190px;
margin-right: 10px;
}

#resourcesQuickSearch input.text {
width: 188px;
}

#resourcesQuickSearch div {
clear: both;
}

#resourcesQuickSearch label {
text-align: right;
width: 50px;
float: left;
font-weight: normal;
}

#resourcesQuickSearch .last input {
margin-right: 143px;
}

#resourcesQuickSearch {
background-image: url(front/images/resources_extras_box_bottom.png);
}

#resourcesQuickSearch .extras_box_sleeve {
background-image: url(front/images/Resources_new_search_header.png);
}

/* Legacy profile tabs from profile.css */
/**************************************/

.profiletabs {background: url(graphics/profile_tabs.png) no-repeat right; height: 31px; margin-bottom: 10px;}
.profiletabs ul {margin: 0; }
.profiletabs li {margin: 0 0 0 10px; float: right; top: 0; background: none; padding:0; }
.profiletabs li a {font: bold 1.09em Arial, sans-serif; color: #7fc2e7; display: block; text-align: center; width: 127px; padding: 7px 3px 7px 0; border: 0;}
.profiletabs li a:hover{background-color: transparent;}
.profiletabs li.on a {color: #000;}


/* Friends boxes in right column */
/*************************************************/

.extras_box label {
font-weight: normal;
}

.extras_box input.text, 
.extras_box select,
.extras_box textarea  {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #BFBFBF;
}

/* JOBS: Upload Download file name in non-js mode */
/*************************************************/

span.downloadNonJS {
	text-align: left;
	padding-left:30px !important;
	font-size:medium;
	font-weight:bold;
}

/* DUPLICATED STYLES!!!!!!!!! --- STYLES CANDIDATES FOR REFACTORING */
/* Yeah, these styles appear in other branches and so a merge or refactor could eradicate the duplciation */
.gridbg {
  position:relative;
	background: url(../magazine/front/images/grid.png);
}
.botShadowOverlay {
position:absolute;
left:0;
bottom:0;
width:100%;
height:6px;
background-image: -moz-linear-gradient(top, hsla(0,0%,0%,0), hsla(0,0%,0%,0.1) 6px);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.1)));
z-index: 100;
}

.topShadowOverlay {
position:absolute;
top:0;
left:0;
width:100%;
height:6px;
background-image: -moz-linear-gradient(top, hsla(0,0%,0%,0.1), hsla(0,0%,0%,0) 6px);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.1)), color-stop(1, rgba(0,0,0,0)));
z-index: 100;
}
/* SIGN UP / 'JOIN US' */