/********************************************************/
/* Stylesheet for Casting Collective Registration		*/
/* Default 												*/
/* Created 19.09.12										*/
/********************************************************/
/* Reset ************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 1px;
	-moz-outline: 1px dotted #666 !important;
	-moz-outline-offset: 1px !important;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}


/********************************************************/
/* Elements												*/
/********************************************************/
body {
	font-family: 'Fira Sans', sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#FFF;
    padding:0 0 0 0;
	background:#333;
}

h1, h2, h3, h4 {
	font-family: 'Fira Sans', sans-serif;
	font-style:normal;
	font-weight:500 !important;
}
h3 {
	padding:0 0 0.5em 0;
}

a {
    color:#f8b142;
    text-decoration:none;
}
a:hover {
	color:#666;
}

strong {
    font-weight:bold;
}
em {
    font-style:italic;
}

input, select, textarea {
	font-family: 'Fira Sans', sans-serif;
	font-weight:normal;
	font-style:normal;
	/*font-family:Arial, Helvetica, sans-serif;*/
    border:1px solid #CCC;
    padding:0.2em 0.3em 0.3em 0.3em;
    margin:0 0 0 0;
	color:#666;
	font-size:100%;
}
select {
	padding:0.25em;
}

input[type=text]:focus,
select:focus,
textarea:focus {
	background:#F9F9F9;
}
option {
	background:#FFF;
}
input[type=checkbox],
input[type=radio] {
    padding:0 0 0 0;
    margin:0 0 0 0;
    border:0;
	width:auto !important;
}
input[type=submit] {
    border:0;
    color:#FFF !important;
    padding:0.4em 1em 0.6em 1em;
    width:auto !important;
    cursor:pointer;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background:#f8b142;
}
input[type=submit].large {
    background:#f8b142;
    padding:0.3em 1em 0.6em 1em;
	height:32px;
}

input[type=submit].large-remove-me {
    border:0;
    color:#FFF !important;
    padding:0.4em 1em 0.6em 1em;
    width:auto !important;
    cursor:pointer;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background:red;
}

input[type=submit].large.plain,
input[type=submit].xlarge.plain {
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
    padding:0.3em 2em 0.7em 2em;
	min-height:32px;
	clear:left;
	background:#f8b142;
}
.start input[type=submit].xlarge {
	margin-left:40%;
	font-size:130% !important;
}


input[type=submit].large.center {
	margin-left:42%;
}
input[type=submit].large.float-right {
	float:right;
	margin:0 0 0 0;
	clear:none;
}
input[type=submit].xlarge.plain {
    font-size:120%;
    padding:0.8em 1.5em 0.8em 1.5em;
}
input[type=submit]:hover {
    background:#f8b142 url(/_/images/button-bg-over.png) repeat;
}
input[type=submit]:hover.large {
    background:#666;
}
input[type=submit]:hover.large.plain,
input[type=submit]:hover.xlarge.plain {
	background:#666;
}

input:disabled {
	/*background-color: grey;*/
	opacity: 0.5;
	border-color: #ddd;
	cursor: not-allowed;
}

/* Shared */
.mobile {
	display:none !important;
}

/********************************************************/
/* STRUCTURE											*/
/********************************************************/
#site {
	float:left;
	width:100%;
}
.container {
	float:left;
	width:100%;
    padding:0 0 0 0;
    margin:0 0 0 0;
}
.inner {
    width:100%;
	max-width:60em;
    padding:1em 0;
	margin:0 auto;
}

#container-messagebag {
	float:left;
	width:100%;
    padding:0 0 0 0;
    margin:0 0 0 0;
    background: #333333;
}
#inner-messagebag {
    width:100%;
	max-width:60em;
    padding:1em 0;
	margin:0 auto;
}

.popup {
	width:710px !important;
}
.popup.small {
	width:510px !important;
}
.popup .inner {
	padding:0 2%;
	width:96%;
}


/********************************************************/
/* CONTENT   											*/
/********************************************************/
/* HEADER */
#header {
	background:#EEE;
    padding:0 0 1.7em 0;
}
#header .inner {
	color:#666;
}
#header .logo {
	width:20%;
	display:block;
	float:left;
	margin-top:0.6em;
}
#header .logo img {
	width:100%;
	max-width:220px;
}
#header .logout {
	display:inline-block;
	float:right;
	margin-top:-1.25em;
	background:#E2E2E2;
	padding:0.25em 1em 0.5em 1em;
	font-size:90%;
	color:#666;
	border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-radius-bottomright:5px;
	border-bottom-left-radius:5px;
	-moz-border-radius-bottomleft:5px;
	-webkit-border-radius-bottomleft:5px;
}
	#header a:hover.logout {
		background:#FFF;
	}
#header .buttons {
	width:70%;
	float:right;
	text-align:right;
	padding-top:0.8em;
	font-size:100%;
}
#header .buttons a {
	display:inline-block;
	float:right;
	padding:0.7em 1em 0.7em 1em;
	margin:0 0 0 2px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	font-size:90%;
	color:#FFF;
    background:#222;
}
#header .buttons a:hover {
    background:#f8b142;
}
#header .buttons a.selected {
	margin-top:-1px;
    color:#666;
	border:1px solid #CCC;
	background: #F0F0F0; /* for non-css3 browsers */
}
#header .buttons a:hover.selected {
	text-shadow: none;
}

#header .welcome {
	width:80%;
	padding:2.5em 10% 0 10%;
	float:left;
}
#header .welcome h1 {
	font-size:1.75em;
	padding-bottom:0.5em;
}
#header .welcome p {
	font-size:1em;
	padding-bottom:0;
	width:90%;
	color:#888;
	line-height:1.2em;
}

/* MAIN CONTENT */
#main {
	background:#FFF;
	color:#666;
}

#main .divider-dashboard {
	width:100%;
	float:left;
	background:#CCC url(/_/images/divider-left.png) no-repeat top left;
}
#main .divider-dashboard div {
	width:100%;
	height:1px;
	float:left;
	background:url(/_/images/divider-right.png) no-repeat top right;
}

/* Left nav */
#main #left-nav {
	width:29%;
	max-width:18em;
	float:left;
	position:relative;
}
#main .reverse #left-nav {
	float:right;
}

#main #left-nav ul {
	padding-bottom:1.5em;
	background:url(/_/images/left-bg-base.png) no-repeat bottom right;
	margin-bottom:1.5em;
}
#main #left-nav ul li {
	height:auto;
	width:100%;
}
	#main #left-nav ul li:first-child {
		padding-top:1em;
		background:url(/_/images/left-bg-top.png) no-repeat top right;
	}
	#main #left-nav ul li.user {
		padding:3em 0 6em 0;
		background:url(/_/images/left-divider-line.png) no-repeat top right;
	}
#main #left-nav ul li a {
	padding:0.65em 0.8em 0.8em 0.8em;
	margin-right:1px;
	display:block;
	background:url(/_/images/left-divider.png) no-repeat top right;
	color:#666;
}
	#main #left-nav ul li a:hover {
		color:#f8b142;
	}
#main #left-nav ul li.current a {
	background:#f8b142 !important;
	color:#444;
	padding:0.65em 0.8em 0.75em 0.8em;
}
	#main #left-nav ul li.current a:hover {
		color:#FFF;
	}
#main #left-nav ul li.user span {
	display:block;
	float:left;
	width:5px;
	height:40px;
	overflow:hidden;
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	margin-right:0.2em;
}
#main #left-nav ul li.user span img {
	margin-top:-5px;
	margin-left:-5px;
}
#main #left-nav ul li.user em {
	font-style:normal;
	float:left;
	width:90%;
}
#main #left-nav ul li.user p {
	font-size:75%;
	float:left;
	color:#888;
}
#main #left-nav ul li.user p a {
	display:inline;
	background:none;
	padding:0 0 0 0;
	text-decoration:underline;
	color:#888;
}
	#main #left-nav ul li.user p a:hover {
		color:#f8b142;
	}

/* Main column */
#main {
	padding-bottom:2em;
	line-height:1.3em;
}
#main .content {
	width:65%;
	padding-right:0;
	max-width:40em;
	float:right;
}
	#main .content.form {
		width:60%;
		padding-right:5%;
	}
#main .reverse .content {
	float:left;
}
#main .full .content {
	float:left;
	width:100%;
	padding-right:0;
	max-width:60em;
}
#main .content.left {
	float:left;
}

/* Main column heading styles */
#main h1 {
	margin:0.75em 0 1em 0 !important;
	font-size:200%;
	width:100%;
	float:left;
	line-height:1em;
}
	#main h1.icon {
		margin:0.25em 0 0.75em -5px !important;
	}
	#main h1.icon em {
		font-style:normal;
		float:left;
		margin:0.6em 0 0 0;
	}
	#main h1.icon span {
		display:block;
		float:left;
		height:61px;
		margin-right:0.25em;
	}
		#main h1.icon.calendar span {
			background: url(/_/images/interface/organiser-icon.svg) no-repeat 0 top;
			width:69px;
		}
		#main h1.icon.earnings span {
			background:url(/_/images/interface/rates-icon.svg) no-repeat 0 top;
			width:54px;
		}
		#main h1.icon.details span {
			background:url(/_/images/interface/contacts-icon.svg) no-repeat 0 top;
			width:59px;
		}
		#main h1.icon.help span {
			background:url(/_/images/interface/help-icon.svg) no-repeat 0 top;
			width:68px;
		}
#main h2 {
	margin:0 0 1em 0;
	background:#EEE;
	color:#666;
	width:96%;
	padding:2% 2% 2% 2%;
	float:left;
	font-size:110%;
}
#main h2.large {
	margin:0.5em 0 1em 0;
	font-size:150%;
	background:none;
	color:#f8b142;
	width:100%;
	padding:0 0 0 0;
	line-height:1.1em;

}
#main h2.large.border {
	padding:0 0 0.5em 0;
	border-bottom:1px solid #EEE;
}
#main .faqs h2.large {
	margin:2.5em 0 1em 0;
	color:#666;
}
#main h2 a {
	padding-left:0.5em;
}
#main h3 {
	font-size:110%;
}

#main p {
	padding-bottom:1.2em;
}
#main p.info {
	padding: 8px 35px 8px 30px;
	margin-bottom: 20px;
	background: #D1F0F0 url(/_/images/i.png) no-repeat 11px 7px;
	color: #0099FF;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
#main p.instructions {
	font-weight:bold;
	font-size:75%;
}
#main p.important {
	background:#333;
	color:#FFF;
	padding:1%;
	width:98%;
	margin-bottom:1.2em;
	float:left;
}
#main p.small {
	font-size:75%;
	line-height:1.4em;
}

/* TABLES */
/* Responsive */
.resp-table {display:none;}

* html .resp { zoom: 1; }
*:first-child+html .resp { zoom: 1; }

#main table {
	width:100% !important;
	float:left;
	border:1px solid #CCC;
	margin-bottom:1.5em;
	border-collapse: collapse;
	border-spacing: 0;
}
#main table .align-right {
	text-align:right;
}
#main table th {
	padding:0.5em;
	background:#F6F6F6;
	font-size:90%;
	border-bottom: 1px dotted #CCC;
}
	#main table th.title {
		width:30%;
	}
	#main table .figure {
		width:10%;
	}
#main table td {
	padding:0.5em;
	border-top: 1px dotted #CCC;
	font-size:90%;
}
#main table.remittance td:first-child {
	width:60%;
	padding-left:50%;
}

/* message bag */
#inner-messagebag ul li {
	margin: 0 0 5px 0;
	display:block;
	padding:0 0 0.25em 0em;
	margin-bottom:0.5em;
	line-height: 1.3em;
}

#inner-messagebag h2 {
    border-bottom: 1px solid #EEEEEE;
    padding: 0 0 0.5em;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #f8b142;
    font-size: 150%;
    font-weight: bold !important;
    line-height: 1.1em;
    margin: 0em 0 0.7em;
    width: 100%;
}


/* Link buttons */
a.button {
	font-size:90%;
	display:block;
    padding:0.6em 1em 0.65em 1em;
    cursor:pointer;
	float:left;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin:0.5em 0 1.5em 0;
	line-height:1em;
    background:#f8b142;
	border:1px solid #f8b142;
	color:#FFF;


}
a:hover.button {
	border:1px solid #CCC;
	color:#666;
	background: #F0F0F0; /* for non-css3 browsers */
}
a.large {
	font-size:140%;
    padding:0.75em 1.5em 1em 1.25em;
	margin:1.5em 0 1.5em 40%;
}
a.edit {
	border:1px solid #CCC;
	color:#666;
    background:#FFF;
}

a.dull {
    background:#CCC;
    color:#666;
}
a:hover.dull {
    background:#999;
}

a.dull-no-bg {
	color:#666;
	text-decoration: underline;
}

#main .dashboard .help-page a,
a.arrow {
	font-weight:bold;
	padding:0 0 0.25em 0;
	color:#f8b142;
}
	a:hover.arrow {
		color:#666;
	}

a.add {
	float:left;
	font-weight:bold;
	width:100%;
	font-size:90%;
}
a.add.margin {
	margin-bottom:1em;
}

a.info {
	display:inline-block;
	margin-left:0.5em;
	width:1.25em;
	height:1.25em;
	text-align:center;
	color:#FFF;
	font-size:90%;
	font-weight:bold;
	font-style:italic;
	font-family:'Times New Roman';
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
    background:#666;
}
	a:hover.info {
		background:#f8b142;
	}


/* Content blocks */
#main .block {
	width:96%;
	margin:0 0 1em 0;
	padding:2%;
	border:1px solid #CCC;
	float:left;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	line-height:1.3em;
}
#main #left-nav .block {
	width:95%;
	padding:5% 0 5% 5%;
	line-height:1.2em;
}
#main #left-nav .block h2 {
	margin:0 0 0.25em 0;
	font-size:150%;
	background:none;
}
#main #left-nav .block h3 {
	margin:0 0 0.25em 0;
}
#main #left-nav .block p {
	width:95%;
	font-size:90%;
}
#main #left-nav .block .button {
	font-size:90%;
	margin-bottom:0;
}
#main .full .block .align-left,
#main .full .block .align-right {
	width:38%;
	float:left;
	padding:0 0 0 8.5%;
}
#main .full .block .align-right {
	width:42%;
	padding:0 0 0 8%;
}
#main .full .block h2.large {
	font-weight:bold !important;
	color:#666;
	font-size:140%;
	margin:0 0 1em 0;
	min-height:24px;
	line-height:1em;
}
#main .full .block h3 {
	color:#000;
}
#main .full .block p {
	color:#888;
}
#main .full .block ol {
	padding:0 0 0 0;
}


/* Dashboard */
#main .dashboard ul.icons {
	width:100%;
	float:left;
	padding:1em 0 2em 0;
}
	#main .dashboard ul.icons.one {
		width:25%;
		padding:1.75em 37.5% 1.75em 37.5%;
	}
	#main .dashboard ul.icons.two {
		width:50%;
		padding:1.75em 25% 1.75em 25%;
	}
	#main .dashboard ul.icons.three {
		width:75%;
		padding:1.75em 12.5% 1.75em 12.5%;
	}
#main .dashboard ul.icons li {
	width:25%;
	float:left;
	display:block;
}
	#main .dashboard ul.icons.one li {
		width:100% !important;
	}
	#main .dashboard ul.icons.two li {
		width:50% !important;
	}
	#main .dashboard ul.icons.three li {
		width:33.3% !important;
	}
#main .dashboard ul.icons li a {
	float:left;
	color:#666;
	font-weight:bold;
	font-size:1.1em;
	width:100%;
}
#main .dashboard ul.icons li a span {
	display:block;
	min-height:51px;
	float:left;
	width:50%;
	margin:0 0 0 0 !important;
	padding:10px 0 0 0;
}
	#main .dashboard ul.icons li.calendar a span {
		background: url(/_/images/interface/organiser-icon.svg) no-repeat 0.75em top;
		padding-left:83px;
	}
	#main .dashboard ul.icons li.earnings a span {
		background:url(/_/images/interface/rates-icon.svg) no-repeat 0.75em top;
		padding-left:83px;
	}
	#main .dashboard ul.icons li.details a span {
		background:url(/_/images/interface/contacts-icon.svg) no-repeat 0.75em top;
		padding-left:83px;
	}
	#main .dashboard ul.icons li.help a span {
		background:url(/_/images/interface/help-icon.svg) no-repeat 0.75em top;
		padding-left:83px;
	}
	#main .dashboard ul.icons li a:hover span {
		color:#f8b142;
		background-position:0.75em bottom;
	}

#main .dashboard h2 em {
	font-style:normal;
	float:left;
	padding:0.75em 0 0.25em 0;
}
#main .dashboard h2 span {
	display:block;
	float:left;
}

#main .dashboard .status,
#main .dashboard .upgrade-message,
#main .dashboard .announcements,
#main .dashboard .before,
#main .dashboard .send-for-approval-msg {
	width:80%;
	padding:2em 10%;
	float:left;
}

#main .dashboard .status {
    padding:0 10% 2em 10%;
}

#main .dashboard .upgrade-message {
	margin-top: 1em;
	padding:0 10%;
}

	#main .dashboard .before {
		padding:0 10% 3em 10%;
	}
	#main .dashboard .send-for-approval-msg {
		padding:0 10% 1em 10%;
	}
#main .dashboard .status div {
	width:30%;
	float:right;
}
	#main .dashboard .status div:first-child {
		width:65%;
		float:left;
	}
#main .dashboard .status div h2 span {
	width:50px;
	height:50px;
	overflow:hidden;
	border-radius:25px;
	-moz-border-radius:25px;
	-webkit-border-radius:25px;
	margin-right:0.75em;
}
#main .dashboard .status div ul,
#main .dashboard .status div ul li {
	float:left;
	width:100%;
}
#main .dashboard .status div ul li a {
	display:block;
	color:#666;
	padding:0 0 0.25em 2em;
	margin-bottom:0.5em;
	background:url(/_/images/icons/arrows2.png) no-repeat 0 1px;
}
	#main .dashboard .status div ul li a:hover {
		color:#f8b142;
		background:url(/_/images/icons/arrows2.png) no-repeat 0 -140px;
	}
#main .dashboard .before p {
	width:80%;
}

#main .dashboard .block {
	width:80%;
	margin:0 5%;
	padding:0 5% 2em 5%;
}
#main .dashboard .block h2,
#main .dashboard .announcements h2,
#main .dashboard .before h2 {
	padding-bottom:0.25em;
	margin-bottom:1em;
}
#main .dashboard .block h2 span,
#main .dashboard .announcements h2 span,
#main .dashboard .before h2 span,
#main .dashboard .help-page h2 span {
	background: url(/_/images/interface/organiser-icon.svg) no-repeat 0 bottom;
	width:69px;
	height:61px;
	margin-right:0.5em;
}
	#main .dashboard .announcements h2 span {
		background:url(/_/images/interface/announcements-icon.svg) no-repeat 0 bottom;
		width:67px;
	}
	#main .dashboard .before h2 span {
		background:url(/_/images/icons/warning.png) no-repeat 0 bottom;
		width:62px;
	}
	#main .dashboard .help-page h2 span {
		background:url(/_/images/interface/help-icon.svg) no-repeat 0 bottom;
		width:62px;
	}

#main .dashboard .block h2 .button {
	font-size:60%;
	font-weight:normal;
	float:right;
	margin:1.25em 0 0 0;
	padding:0.4em 1em 0.65em 1em;
}


/* Calendar */
#main .content .calendar {
	width:100%;
	float:left;
	margin:1em 0;
}
	#main .dashboard .block .calendar {
		width:30%;
		margin:0 0 0 5%;
		font-size:80%;
		float:left;
	}
	#main .dashboard .block .calendar.first {
		margin-left:0;
	}
#main .calendar .month {
	font-size:130%;
	width:98%;
	text-align:center;
	padding-bottom:0.75em;
	background:url(/_/images/month-bg.png) no-repeat center bottom;
	color:#f8b142;
	min-height:25px;
}
	#main .dashboard .block .calendar .month {
		width:100%;
		background:none;
		padding-bottom:0.5em;
		color:#666;
	}
#main .calendar .month span {
	float:left;
	width:85%;
}
#main .calendar .month .button {
	font-size:60%;
	margin:0 0 0 0;
	float:right;
}
	#main .calendar .month .button:first-child {
		float:left;
	}
#main .calendar .month .button span {
	text-indent:-2000em;
	display:block;
	background:url(/_/images/calendar-arrows.png) no-repeat bottom right;
	width:7px;
	height:8px;
	margin:0.25em 0 0.1em 0;
	float:left;
}
#main .calendar .month a:hover.button span {
	background:url(/_/images/calendar-arrows.png) no-repeat top right;
}
	#main .calendar .month .button:first-child span {
		background:url(/_/images/calendar-arrows.png) no-repeat bottom left;
	}
	#main .calendar .month a:hover.button:first-child span {
		background:url(/_/images/calendar-arrows.png) no-repeat top left;
	}
#main .calendar .day {
	font-size:75%;
	width:12%;
	height:100px;
	margin:0 0 5px 5px;
	padding:0 2px;
	float:left;
	border:1px solid #CCC;
}
	#main .calendar .day.head {
		border:1px solid #FFF;
		height:auto;
		margin:1em 0 0.75em 5px;
	}
		#main .dashboard .block .calendar .day.head {
			margin:0 0 2px 2px;
		}
	#main .calendar .day.past {
		border:1px solid #EEE;
		color:#CCC;
	}
	#main .calendar .day.future {
		border:1px solid #EEE;
		background:#EEE;
		color:#999;
	}
	#main .calendar .day.current {
		border:1px solid #666;
		background:#666;
		color:#FFF;
		font-weight:bold;
	}
	#main .calendar .day.booking {
		border:1px solid #f8b142;
		background:#f8b142;
		color:#FFF;
	}
		#main .calendar .day.future.booking {
			border:1px solid #FC9;
			background:#FC9;
			color:#FFF;
		}
	#main .calendar .day.unavailable {
		border:1px solid #666;
		background:url(/_/images/cross-lg.png) no-repeat center center;
	}
	#main .dashboard .block .calendar .day.unavailable {
		background:url(/_/images/cross.png) no-repeat center center;
	}
		#main .calendar .day.past.unavailable {
			border:1px solid #EEE;
			background:url(/_/images/cross-light-lg.png) no-repeat center center;
		}
		#main .dashboard .block .calendar .day.past.unavailable {
			background:url(/_/images/cross-light.png) no-repeat center center;
		}
		#main .calendar .day.current.unavailable {
			background:#666 url(/_/images/cross-white-lg.png) no-repeat center center;
		}
		#main .dashboard .block .calendar .day.current.unavailable {
			background:#666 url(/_/images/cross-white.png) no-repeat center center;
		}
		#main .calendar .day.future.unavailable {
			border:1px solid #EEE;
			background:#EEE url(/_/images/cross-grey-lg.png) no-repeat center center;
		}
		#main .dashboard .block .calendar .day.future.unavailable {
			background:#EEE url(/_/images/cross-grey.png) no-repeat center center;
		}
	#main .dashboard .block .calendar .day,
	#main .dashboard .block .calendar .day.head {
		width:10%;
		height:28px;
		padding:0 1%;
		margin:-2px -2px 2% 2%;
	}
#main .calendar .day .content {
	width:100%;
	float:left;
	font-size:85%;
	line-height:1.2em;
	padding-top:5px;
}
#main .calendar .day .content {
	width:100%;
	float:left;
}
	#main .dashboard .block .calendar .day .content {
		display:none;
	}


/* Earnings */
#main .content dl.rates {
	border:1px solid #CCC;
	float:left;
	width:100%;
	margin-bottom:1.5em;
	font-size:90%;
}
#main .content dl.rates dt,
#main .content dl.rates dd {
	padding:0.5em 0 0 0;
	border-bottom:1px dotted #CCC;
	float:left;
	min-height:2em;
}
#main .content dl.rates dt.bottom,
#main .content dl.rates dd.bottom {
	border-bottom:0;
}
#main .content dl.rates dt {
	width:23%;
	margin:0 0 0 2%;
}
#main .content dl.rates dd {
	width:73%;
	margin:0 2% 0 0;
}


/* Forms */
#main .content form {
	width:100%;
	float:left;
	margin:0 0 2em 0;
	position:relative;
}
#main .full .content form {
	margin:0 0 2em 0;
}
#main .review .content form {
	width:100%;
	padding-right:0;
}
#main .content .login {
	width:50%;
	margin-left:25%;
}
#main .content .login form {
	width:96%;
	padding:2%;
}
#main .content fieldset {
	width:100%;
	float:left;
	margin:0 0 0.5em 0;
	padding:0 0 1em 0;
	float:left;
	border-bottom:1px dotted #CCC;
}
	#main .content fieldset.buttons {
		border-bottom:0;
		padding:0 0 0 0;
	}
		#main .content fieldset.buttons .button {
			margin:0 0.5em 0.5em 0;
		}
	#main .content fieldset.invisible {
		border-bottom:0;
		margin:0 0 0 0;
		padding:0 0 0 0;
	}
#main .content fieldset dl {
	width:100%;
	float:left;
}
#main .content fieldset dl.additional {
	width:96%;
	margin-left:2%;
	padding-left:2%;
	border-left:1px dotted #CCC;
	float:left;
	margin-bottom:2em;
}
#main .content fieldset dt,
#main .content fieldset dd {
	float:left;
	padding-bottom:1em;
}
#main .content fieldset dt {
	width:32%;
	padding-right:3%;
	clear:left;
}
#main .content .login fieldset dt {
	width:37%;
}
#main .content fieldset .additional dt {
	width:29%;
}
#main .content fieldset dt.double {
	width:100%;
	padding-right:0;
}
#main .content fieldset .review dt.double {
	padding-bottom:0.5em;
}
#main .content fieldset dt.reverse {
	width:72%;
}
#main .content fieldset .additional dt.reverse {
	width:70.75%;
}
#main .content fieldset dd {
	width:65%;
	position:relative;
	min-height:2em;
}
#main .content .login fieldset dd {
	width:60%;
}
#main .content fieldset .review dd {
	min-height:1em;
	padding-bottom:1em !important;
}
#main .content fieldset .additional dd {
	min-height:0;
	padding-bottom:0 !important;
}
#main .content fieldset dd.double,
#main .content fieldset .review dd.double {
	width:100%;
	padding-bottom:1.5em ;
}
#main .content fieldset .review dd.double {
	padding-bottom:1em !important;
}
#main .content fieldset dd.double.additional {
	width:90% !important;
	margin-left:2%;
	padding-left:2%;
	border-left:1px dotted #CCC;
	min-height:0;
	padding-bottom:0;
	margin-bottom:1.5em;
}
#main .content fieldset dd.reverse {
	width:25%;
}
#main .content fieldset dt.half,
#main .content fieldset dd.half,
#main .content fieldset .half dt,
#main .content fieldset .half dd {
	width:50%;
	padding-right:0;
}
#main .content fieldset dt.error,
#main .content fieldset dd.error {
	color:#F30;
}

#main .content fieldset p {
	float:left;
	position:relative;
	width:100%;
}

#main .content fieldset .alert p {
	float: none !important;
	padding-bottom: 1em !important;
}

#main .content fieldset .alert p:last-of-type {
	padding-bottom: 0 !important;
}

#main .content .login form p {
	float:left;
	padding-top:0.4em;
}
#main .content fieldset dl p {
	float:left;
	padding:0 0 0.5em 0;
	margin:0 0 0 0;
}
#main .content fieldset .review dd p {
	padding:0 0 0 0;
	margin:0 0 0 0;
	font-weight:bold;
}
#main .content fieldset p.error {
	color:#F30;
}
#main .content fieldset p.highlight {
	background:#EEE;
	padding:1em 1% 1.25em 2%;
	width:97%;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	margin:1em 0;
}
#main .content fieldset p.highlight.error {
	color:#F30;
	background-color: #FFD6CC;
}

#main .content fieldset dd input,
.popup input,
#main .content fieldset p input,
#main .content fieldset dd select,
#main .content fieldset dd textarea {
	width:96%;
	float:left;
}
#main .content fieldset dd input.small {
	width:44%;
	margin-right:2%;
}
#main .content fieldset .additional dd.double input {
	margin-bottom:0.25em;
}
#main .content fieldset dd select {
	width:100%;
}
#main .content fieldset dd select.small {
	width:48%;
	margin-right:2%;
}
#main .content fieldset dd textarea {
	height:10em;
}
#main .content fieldset span.check {
	display:block;
	float:left;
	padding:0.1em 0 0.1em 5px;
	margin-right:5px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background:#F9F9F9;
}
#main .content fieldset span:hover.check {
	background:#EEE;
}
#main .content fieldset dd input[type=checkbox],
#main .content fieldset dd input[type=radio],
#main .content fieldset p input[type=checkbox],
#main .content fieldset p input[type=radio],
.popup input[type=checkbox] {
	margin:0.3em 0.75em 0 0;
}
#main .content fieldset p.highlight input[type=checkbox] {
	margin:0.3em 0.75em 0 0;
}
	#main .content fieldset dd.list input,
	.popup input[type=checkbox] {
		clear:left;
	}
	#main .content fieldset .multi span.check {
		width:31%;
		margin:0 1% 0.5em 0;
	}
	#main .content fieldset dd.multi.two span.check {
		width:48%;
	}
	#main .content fieldset dd.multi span.check input[type=radio] {
		margin:0.3em 0.75em 0.3em 0;
	}
#main .content fieldset dd.error input,
#main .content fieldset li.error input,
#main .content fieldset dd.error select,
#main .content fieldset dd.error textarea {
	border-color:#F30;
	color:#F30;
}
#main .content fieldset dd label,
.popup label {
	float:left;
	margin-right:1em;
}
	#main .content fieldset dd.list label {
		padding-bottom:0.75em;
		width:85%;
	}
	#main .content fieldset dd label.hide {
		text-indent:-2000em;
		height:0;
		width:0;
	}
	#main .content fieldset dd.multi label {
		padding-bottom:0;
		width:75%;
	}
#main .content fieldset .button {
	font-size:90%;
}
#main .content fieldset dd .button {
	float:left;
}
#main .content fieldset p label {
	float:left;
	width:90%;
}
#main .content .login form input[type=submit] {
	float:right;
}

/* List for horizontal display of fields */
#main .content fieldset ul {
	width:100%;
	float:left;
}
/* Name in personal & contact details */
#main .content fieldset ul.name li {
	width:43%;
	margin-left:1.5%;
	float:left;
	color:#666;
}
	#main .content fieldset ul li.error {
		color:#F30;
	}
#main .content fieldset .double ul.name li {
	color:#666;
}
	#main .content fieldset ul li:first-child {
		margin-left:0;
	}
	#main .content fieldset ul.name li.small {
		width:11%;
	}
#main .content fieldset ul.name li input {
	width:90%;
	margin-top:0.25em;
}
	#main .content fieldset ul.name li.small input {
		width:60%;
	}
/* Unions in experience */
#main .content fieldset ul.unions li {
	width:48%;
	margin-right:2%;
	float:left;
}
#main .content fieldset ul.unions li label {
	margin:1em 0 0 0;
}
#main .content fieldset ul.unions li input {
	margin:0.25em 0 0 0;
}
/* Vehicle details in other experience */
#main .content fieldset .vehicle dt {
	padding:1.5em 0 0.25em 0;
}
	#main .content fieldset .vehicle dt:first-child {
		padding:0 0 0.25em 0;
	}
#main .content fieldset .vehicle li {
	width:48%;
	margin-right:2%;
	margin-top:0.5em;
	float:left;
}
	#main .content fieldset .vehicle li.small {
		width:22%;
	}
#main .content fieldset .vehicle li input {
	width:90%;
}
#main .content fieldset .vehicle li label {
	margin-bottom:2%;
}

#main .content fieldset .note {
	font-style:normal;
	display:block;
	float:left;
	color:#888;
	background:none;
	border:0;
	padding:0.25em 0 0 0;
	font-size:85%;
	line-height:1.3em;
	width:100%;
	position:relative;
}
	#main .content fieldset .reverse .note {
		left:-300%;
		width:370%;
	}
#main .content fieldset .error .note {
	color:#FF8566;
}
#main .content fieldset .note a {
	color:#888;
	text-decoration:underline;
}
	#main .content fieldset .note a:hover {
		color:#f8b142;
	}
#main .content fieldset .note a.video {
	color:#999;
}
	#main .content fieldset .note a:hover.video {
		color:#f8b142;
	}
#main .content fieldset .note a.video span {
	display:block;
	padding:0.25em 0 0 1.75em;
	background:url(/_/images/icons/video.png) no-repeat 0 -22px;
	color:#9B91E6;
}
#main .content fieldset .note a:hover.video span {
	background:url(/_/images/icons/video.png) no-repeat 0 8px;
	color:#f8b142;
}



/* Photos */
#main .content fieldset .my-photo {
	width:48%;
	float:left;
	border-right:1px dotted #CCC;
	padding-right:2%;
}
#main .content fieldset .my-photo img {
	max-width:143px;
	margin:0 1em 1em 0;
}
#main .content fieldset .my-photo p {
	padding:0 0 0.5em 0;
}
#main .content fieldset .my-photo ol,
#main .content fieldset .guidance ol {
	list-style:decimal;
	padding-left:10%;
	width:90%;
	float:left;
}
#main .content fieldset .my-photo a.button {
	float:left;
}
#main .content .guidance {
	float:left;
	width:100%;
}
	#main .content fieldset .guidance {
		float:right;
		width:48%;
	}
#main .content .guidance div {
	width:22.5%;
	padding-right:2.5%;
	float:left;
	min-height:180px;
}
	#main .content fieldset .guidance div {
		width:45%;
		padding-left:5%;
		padding-right:0;
	}
	#main .content fieldset .guidance.two div {
		width:95%;
	}
#main .content .guidance img {
	width:90%;
	max-width:143px;
	float:left;
	margin-bottom:0.5em;
}
	#main .content .guidance.two img {
		width:45%;
		margin-bottom:1em;
	}
#main .content .guidance p {
	width:95%;
	padding-left:5%;
	line-height:1.3em;
	float:left;
	font-size:80%;
}
#main .content .guidance div p {
	width:100%;
	padding-left:0;
}
	#main .content .guidance.two div p {
		width:48%;
		float:right;
	}


/* In page help */
#main .content .help {
	width:100%;
	float:left;
}
#main .content .help iframe {
	width:100%;
	max-width:575px;
	margin:0 0 1.5em 0;
}
#main .content .help .measurements-help {
	width:100%;
	float:right;
	padding:0 0 1em 0;
}
#main .content .help .measurements-help img {
	float:left;
	width:21%;
	max-width:120px;
}
#main .content .help .measurements-help ul {
	float:right;
	width:78%;
	margin-top:-5px;
}
#main .content .help .measurements-help ul li {
	width:95%;
	padding-left:5%;
	float:left;
	font-size:90%;
}
#main .content .help .measurements-help ul li span {
	float:left;
	display:block;
	width:90%;
}
#main .content .help .measurements-help ul li span.letter {
	font-family:georgia, arial, verdana;
	color:#F30;
	font-weight:bold;
	width:5%;
}


/* FAQs */
#main .content .faq-titles {
	padding-bottom:2em;
}
#main .content .faq {
	margin:0 0 0.5em 0;
	padding:0 0 1em 0;
	border-bottom:1px dotted #CCC;
}

/* Review */
#main .review .content h2.large span {
	color:#666;
}
#main .content div.review-intro {
	width:48%;
	float:left;
}
#main .content .review-steps {
	width:100%;
	float:left;
	line-height:1.2em;
	margin:1.5em 0;
	font-size:90%;
}
#main .content .review-steps li {
	width:23.5%;
	float:left;
	border-top:5px solid #EEE;
}
	#main .content .review-steps li.last {
		width:6%;
		border-top:5px solid #FFF;
	}
	#main .content .review-steps li.done {
		border-top:5px solid #666;
	}
#main .content .review-steps li span {
	display:block;
	float:left;
	width:80%;
	margin:0 20% 0 0;
	padding-top:0.5em;
	color:#CCC;
}
#main .content .review-steps li.current span,
#main .content .review-steps li.done span {
	color:#666;
	font-weight:bold;
}
#main .content .review-steps li em {
	text-align:center;
	color:#FFF;
	width:1.5em;
	height:1.2em;
	padding:0.3em 0 0 0;
	display:block;
	font-style:normal;
	float:left;
	font-size:150%;
	margin-top:-0.9em;
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
    background:#EEE;
}
#main .content .review-steps li:first-child em {
	width:1.4em;
	padding:0.3em 0.1em 0 0;
}
#main .content .review-steps li.current em,
#main .content .review-steps li.done em {
	color:#FFF;
    background:#666;
}
#main .content div.review {
	width:48%;
	padding-left:4%;
	float:left;
}
#main .content div.review.photos {
	width:22%;
	padding-left:4%;
}
#main .content div.review.photos:first-child {
	padding-left:0;
}
#main .content div.review:first-child,
#main .content div.review.left {
	padding-left:0;
}
#main .content div.review fieldset {
	border-bottom:0;
	padding-bottom:0;
	margin-bottom:0;
}
#main .content div.review.photos fieldset {
	padding-bottom:1em;
	width:100%;
}
#main .content div.review.photos h2 {
	width:92%;
	padding:2% 4%;
}
#main .content div.review img {
	max-height:200px;
}
#main .content div.continue {
	width:100%;
	border-top:1px dotted #CCC;
	padding-top:1em;
	float:left;
}

#main .content .cms-content ul {
	margin: 0.5em 0 1em 2em;
	list-style: square;
}

#main .content .cms-content ul li {
	margin: 0.5em 0;
}


/* POPUP */
.popup #header .inner {
    padding:0.25em 0 !important;
}
.popup #main .inner {
    padding:1em 0 !important;
	line-height:1.3em;
}

.popup h1 {
	margin:0.5em 0;
	font-size:140%;
	width:80%;
}
.popup #main h2 {
	margin:1em 0 1em 0;
	float:left;
	width:100%;
	padding:0 0 0 0;
	font-weight:bold !important;
	color:#6559E6;
	background:#FFF;
}
	.popup h2:first-child {
		margin:0 0 1em 0;
	}
.popup p {
	padding:0 0 0 0 !important;
	margin:0 0 1em 0;
	float:left;
	width:100%;
	line-height:1.3em;
}

.popup span {
	width:25%;
	float:left;
	padding-bottom:1em;
}
.popup span.full {
	width:100%;
	float:left;
	padding-bottom:1em;
}
.popup.photos span {
	width:50%;
	float:left;
	padding-bottom:1em;
}

.popup label {
    padding-bottom:0.25em;
    width:70%;
}

.popup .examples {
	padding:1em 0 3em 0;
	float:left;
}
.popup .examples img {
	width:100%;
	max-width:250px;
	float:left;
	margin:0 0 1em 1em;
}
	.popup .examples img:first-child {
		margin:0 0 1em 0;
	}
.popup .examples img.small {
	max-width:125px;
}
.popup .examples ol {
	float:left;
	list-style:decimal;
	padding-left:1.5em;
	margin-left:1em;
}
.popup .examples ol li,
.popup .examples p {
	padding-bottom:0.5em;
}
.popup .examples p {
	padding:0 0 1.5em 1em;
	float:left;
	width:50%;
}
.popup .examples input.large.plain {
	clear:none;
	margin-left:0.9em;
}
.popup p.limits {
	float:left;
	width:50%;
}


/* FOOTER */
#footer {
	background:#333;
	padding-bottom:4em;
}

#footer p {
	font-size:75%;
	padding:0 0 1em 0;
	line-height:1.4em;
	float:left;
	width:70%;
}
#footer a.return {
	float:right;
	background:url(/_/images/return-main-site.png) no-repeat top left;
	width:133px;
	height:29px;
	display:block;
	text-indent:-2000em;
}



/********************************************************/
/* layouts smaller than 940px, tablets etc 				*/
/********************************************************/
@media screen and (max-width: 940px) {

	#main .dashboard .calendar.last {
		display:none;
	}
	#main .dashboard .block .calendar {
		width:40%;
		margin:0 5% 0 5% !important;
	}

}

@media screen and (max-width: 1000px) {
	.inner, #inner-messagebag {
		width:96%;
	}
}

/********************************************************/
/* layouts smaller than 800px, tablets etc 				*/
/********************************************************/
@media screen and (max-width: 800px) {


	#header .logo {
		width:29%;
		display:block;
		float:left;
		margin-top:0.7em;
	}
	#header .logo img {
		width:100%;
	}
	#header .logout,
	#header .buttons a {
		font-size:75%;
	}

	#main #left-nav ul li a {
		font-size:90%;
	}
	#main #left-nav ul li.current a {
		background: #f8b142 !important;
		border-top-left-radius:3px !important;
		-moz-border-radius-topleft:3px !important;
		-webkit-border-radius-topleft:3px !important;
		border-bottom-left-radius:3px !important;
		-moz-border-radius-bottomleft:3px !important;
		-webkit-border-radius-bottomleft:3px !important;
		padding:0.65em 0.8em 0.8em 0.8em;
		width:auto;
		margin-right:0;
	}
	#main #left-nav .block {
		font-size:90%;
	}

	/* Dashboard */
	#main .dashboard ul.icons {
		width:80%;
		float:left;
		padding:1em 12% 0 8%;
	}
		#main .dashboard ul.icons.one {
			width:40%;
			padding:1.75em 28% 0 32%;
		}
		#main .dashboard ul.icons.two {
			width:75%;
			padding:1.75em 7.5% 0 17.5%;
		}
		#main .dashboard ul.icons.three {
			width:100%;
			padding:1.75em 0 0 0;
		}
	#main .dashboard ul.icons li {
		width:50%;
		padding:0 0 2em 0;
	}
	#main .dashboard ul.icons li a {
		font-size:1.3em;
		width:80%;
	}
		#main .dashboard ul.icons li.calendar a span {
			background:#fff url(/_/images/interface/organiser-icon.svg) no-repeat 0.5em top;
			padding-left:91px;
		}
		#main .dashboard ul.icons li.earnings a span {
			background:#FFF url(/_/images/interface/rates-icon.svg) no-repeat 0.5em top;
			padding-left:91px;
		}
		#main .dashboard ul.icons li.details a span {
			background:#FFF url(/_/images/interface/contacts-icon.svg) no-repeat 0.5em top;
			padding-left:91px;
		}
		#main .dashboard ul.icons li.help a span {
			background:#FFF url(/_/images/interface/help-icon.svg) no-repeat 0.5em top;
			padding-left:91px;
		}
			#main .dashboard ul.icons li.calendar a:hover span,
			#main .dashboard ul.icons li.help a:hover span {
				background-position:0.5em bottom;
			}
	#main .dashboard ul.icons li a span {
		width:70%;
	}

	#main .dashboard h2 em {
		font-style:normal;
		float:left;
		padding:0.75em 0 0.25em 0;
	}
	#main .dashboard h2 span {
		display:block;
		float:left;
	}

	#main .dashboard .status div {
		width:40%;
	}
		#main .dashboard .status div:first-child {
			width:55%;
		}
	#main .dashboard .before p {
		width:100%;
	}

	#main .dashboard .calendar.last {
		display:none;
	}
	#main .dashboard .block .calendar {
		width:45%;
		margin:0 2.5% 0 2.5% !important;
	}


	/* Calendar */
	#main .calendar .month {
		width:100%;
		background:url(/_/images/month-bg-sm.png) no-repeat center bottom;
	}
	#main .calendar .month span {
		float:none;
		width:auto;
	}
	#main .calendar .divider {
		margin-bottom:1em;
	}
	#main .calendar .day {
		font-size:85%;
		width:98%;
		height:auto;
		margin:0 0 5px 0;
		padding:0 1%;
		float:left;
		border:1px solid #CCC;
	}
		#main .calendar .day.head {
			display:none;
		}
			#main .dashboard .block .calendar .day.head {
				display:block;
			}
		#main .calendar .day.future {
			display:none;
		}
			#main .dashboard .block .calendar .day.future {
				display:block;
			}
		#main .calendar .day.unavailable {
			background:url(/_/images/cross-lg.png) no-repeat -37px center;
		}
		#main .dashboard .block .calendar .day.unavailable {
			background:url(/_/images/cross.png) no-repeat -37px center;
		}
			#main .calendar .day.past.unavailable {
				background:url(/_/images/cross-light-lg.png) no-repeat -37px center;
			}
			#main .dashboard .block .calendar .day.past.unavailable {
				background:url(/_/images/cross-light.png) no-repeat -37px center;
			}
			#main .calendar .day.current.unavailable {
				background:#666 url(/_/images/cross-white-lg.png) no-repeat -37px center;
			}
			#main .dashboard .block .calendar .day.current.unavailable {
				background:#666 url(/_/images/cross-white.png) no-repeat -37px center;
			}
			#main .calendar .day.future.unavailable {
				background:#EEE url(/_/images/cross-grey-lg.png) no-repeat -37px center;
			}
			#main .dashboard .block .calendar .day.future.unavailable {
				background:#EEE url(/_/images/cross-grey.png) no-repeat -37px center;
			}


	#main .content {
		width:68%;
		padding-right:0;
		max-width:40em;
		float:right;
		line-height:1.3em;
	}
	#main .content.form {
		width:65%;
		padding-right:0;
	}
	#main .content.left {
		width:100%;
	}

	#main .content fieldset dt.reverse {
		width:67%;
	}
		#main .content fieldset .additional dt.reverse {
			width:65.75%;
		}
	#main .content fieldset dd.reverse {
		width:30%;
	}
		#main .content fieldset .additional dd.reverse {
			width:31%;
		}

	#main .content fieldset .reverse .note {
		left:-233%;
		width:303%;
	}

}


/********************************************************/
/* layouts smaller than 765px, iPhone and mobiles 		*/
/********************************************************/
@media handheld and (max-width: 765px), screen and (max-device-width: 765px), screen and (max-width: 765px) {

	.mobile {
		display:block !important;
	}
	.screen {
		display:none !important;
	}
	.popup,
	.popup.small {
		width:auto !important;
	}

	input[type=submit].large {
		font-size:110%;
	}

	#header .logo {
		width:100%;
		display:block;
		float:left;
		text-align:center;
	}
	#header .logo img {
		width:60% !important;
		float:none;
	}
	#header .buttons {
		width:100%;
		float:left;
		padding-top:0.5em;
		text-align:center;
	}
	#header .buttons a {
		font-size:80%;
		float:none;
		margin-top:0.5em !important;
	}
	#header .welcome {
		width:90%;
		padding:2.5em 5% 0 5%;
	}

	#main #left-nav {
		width:100% !important;
		max-width:40em !important;
		position:relative;
		margin-bottom:0.5em;
	}
	#main #left-nav .button {
		margin-bottom:0;
	}
	#main #left-nav ul {
		float:left;
		width:100%;
		background:none;
		padding-bottom:0;
		margin-bottom:0;
		margin-top:0.5em;
		border-top:1px solid #CCC;
		border-bottom:1px solid #CCC;
		display:none;
		padding:0.25em 0 0 0;
	}
		#main #left-nav ul li {
			background:none;
			padding-top:0;
			border-top:1px dotted #CCC;
			margin:0 2%;
			width:96%;
			float:left;
		}
		#main #left-nav ul li:first-child {
			background:none;
			padding-top:0;
			border-top:0;
		}
		#main #left-nav ul li.user {
			display: none;
			padding:1em 2% 0 2%;
			background:#F6F6F6;
			border-top:1px solid #CCC;
			margin:0.25em 0 0 0;
		}
	#main #left-nav ul li a {
		background:none;
		padding:0.5em;
	}
	#main #left-nav ul li.current a {
		border-top-left-radius:0 !important;
		-moz-border-radius-topleft:0 !important;
		-webkit-border-radius-topleft:0 !important;
		border-bottom-left-radius:0 !important;
		-moz-border-radius-bottomleft:0 !important;
		-webkit-border-radius-bottomleft:0 !important;
		padding:0.5em;
		margin:0;
	}
	#main #left-nav ul li.user span {
		display:block;
		float:left;
		width:40px;
		height:40px;
		overflow:hidden;
		border-radius:20px;
		-moz-border-radius:20px;
		-webkit-border-radius:20px;
		margin:0 0.8em 0 0;
	}
	#main #left-nav ul li.user span img {
		margin-top:-5px;
		margin-left:-5px;
	}
	#main #left-nav ul li.user em {
		font-style:normal;
		float:left;
		width:75%;
	}
	#main #left-nav ul li.user p {
		font-size:75%;
		float:left;
		color:#888;
	}
	#main #left-nav ul li.user p a {
		display:inline;
		background:none;
		padding:0 0 0 0.75em;
		text-decoration:underline;
		color:#888;
		border:0;
	}
		#main #left-nav ul li.user p a:hover {
			color:#f8b142;
		}


	/* Dashboard */
	#main .dashboard ul.icons {
		width:100%;
		padding:1em 0 1em 0;
	}
		#main .dashboard ul.icons.one,
		#main .dashboard ul.icons.two,
		#main .dashboard ul.icons.three {
			width:100% !important;
			padding:1em 0 1em 0 !important;
		}
	#main .dashboard ul.icons li,
	#main .dashboard ul.icons.one li,
	#main .dashboard ul.icons.two li,
	#main .dashboard ul.icons.three li {
		width:100% !important;
		padding:0 0 1em 0;
	}
	#main .dashboard ul.icons li a {
		font-size:1.3em;
		width:70%;
	}
	#main .dashboard ul.icons li a span {
		width:80%;
	}

	#main .dashboard .status,
	#main .dashboard .announcements,
	#main .dashboard .before {
		width:90%;
		padding:2em 5%;
	}
	#main .dashboard .before {
		padding-top:0;
	}
	#main .dashboard .status div {
		width:100%;
	}
		#main .dashboard .status div:first-child {
			width:100%;
		}
	#main .dashboard .before p {
		width:100%;
	}
	#main .dashboard .calendar.last {
		display:none;
	}
	#main .dashboard .block .calendar {
		width:100%;
		margin:0 0 1.5em 0 !important;
	}

	#main .dashboard .block {
		width:82%;
		margin:0 2%;
		padding:0 7% 0.5em 7%;
	}
	#main .dashboard .status h2 {
		margin-top:0;
	}
	#main .dashboard h2 em {
		font-size:90%;
	}
	#main .dashboard .block h2 em,
	#main .dashboard .announcements h2 em {
		width:60%;
		padding-top:0.15em;
	}
		#main .dashboard .announcements h2 em {
			padding-top:0.5em;
		}
	#main .dashboard .block h2 .button {
		font-size:60%;
		font-weight:normal;
		float:right;
		margin:1.25em 0 0 0;
		padding:0.4em 1em 0.65em 1em;
	}


	#main .content,
	#main .content.form {
		width:100%;
		padding-right:0;
	}
	/* Main column heading styles */
	#main h1 {
		font-size:170%;
	}

	a.large {
		margin:1.5em 0 1.5em 21%;
	}

	#main .content .help .measurements-help ul li span {
		width:85%;
	}
	#main .content .help .measurements-help ul li span.letter {
		width:10%;
		padding-top:1px;
	}

	/* Earnings */
	#main .content dl.rates dt {
		width:48%;
	}
	#main .content dl.rates dd {
		width:48%;
	}

	#main .content .login {
		width:96%;
		margin-left:0;
	}
	#main .content fieldset dt,
	#main .content fieldset dd {
		width:100% !important;
		padding-right:0 !important;
	}
	#main .content fieldset dt {
		padding-bottom:0.5em;
	}
	#main .content fieldset .reverse .note {
		left:0;
		width:100%;
	}
	#main .content fieldset dd.multi span.check {
		width:98%;
		margin-right:0;
	}
	/* Vehicle details in other experience */
	#main .content fieldset .vehicle li {
		width:98%;
	}
		#main .content fieldset .vehicle li.small {
			width:48%;
		}
	#main .content fieldset .vehicle li input {
		width:95%;
	}
		#main .content fieldset .vehicle li.small input {
			width:90%;
		}


	/* Photos */
	#main .content fieldset .my-photo {
		width:100%;
		border-top:1px dotted #CCC;
		padding-top:0.5em;
		border-right:0;
		padding-right:0;
	}
	#main .content fieldset .my-photo img {
		max-width:70px;
		margin:0 1em 1em 0;
	}
	#main .content fieldset .my-photo p {
		padding:0 0 0.5em 0;
	}
	#main .content fieldset .my-photo ol,
	#main .content fieldset .guidance ol {
		list-style:decimal;
		padding-left:10%;
		width:90%;
	}
	#main .content fieldset .my-photo a.button {
		float:left;
	}
	#main .content fieldset .guidance {
		float:left;
		width:100%;
	}
	#main .content .guidance div {
		width:47.5%;
		padding-right:2.5%;
		float:left;
		min-height:0;
	}
		#main .content fieldset .guidance div {
			width:45%;
			padding-left:0;
			padding-right:5%;
		}
	#main .content .guidance img {
		width:50%;
		max-width:143px;
		float:left;
		margin-right:0.5em;
		margin-bottom:1em;
	}
		#main .content fieldset .guidance.two img {
			width:24%;
		}
	#main .content .guidance p {
		width:100%;
		padding-left:0;
		line-height:1.3em;
		float:left;
		font-size:75%;
	}
	#main .content .guidance div p {
		width:40%;
		padding-left:0;
	}
		#main .content .guidance.two div p {
			width:72%;
		}

	.popup #header .buttons {
		text-align:left;
	}
	.popup #header .buttons input[type=submit] {
		display:inline-block;
		padding:0.425em 1em;
		margin-left:0.5em;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		font-size:80%;
		float:right;
	}
	.popup span {
		width:50%;
	}

	#footer a.return {
		margin-bottom:2em;
	}
	#footer p {
		width:90%;
		padding-left:5%;
		padding-right:5%;
	}

	#main .content div.review {
		width:100%;
		padding-left:0;
	}
	#main .content .review-steps {
		margin-bottom:0;
	}
	#main .content .review-steps li span {
		text-indent:-2000em;
		min-height:0;
	}
	#main .content div.review.photos {
		width:100%;
		padding-left:0;
	}

	.inner {
	   width: 90%;
	}

	#inner-messagebag {
	    width:90%;
	}

}

ul.styled-list {
	margin: 0.5em 0 1em 2em;
	list-style: square;
}


/********************************************************/
/* layouts smaller than 480px, iPhone and mobiles 		*/
/********************************************************/
@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 480px) {


	/* Earnings */
	.resp-table {display:block;}

	table.resp { display: block; position: relative; width: 100%; }
	table.resp thead { display: block; float: left; }
	table.resp tbody { display: block; width: auto; position: relative; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
	table.resp thead tr { display: block; }
	table.resp th { display: block; border-bottom:1px dotted #CCC;  }
	table.resp tbody tr { display: inline-block; vertical-align: top; }
	table.resp td { display: block; min-height: 1.25em; border-top: 0 !important; border-bottom:1px dotted #CCC; width:100% !important; }
	table.resp th:last-child, table.resp td:last-child { border-bottom:0 !important; }

	#main table.resp .figure {
		width:auto;
	}
	#main table td.align-right {
		text-align:left;
	}
	#main table.remittance td:first-child {
		width:37%;
		padding-left:0.5em;
		background:#F6F6F6;
	}

	table.resp th.hide-mob, table.resp td.hide-mob  { display: none !important; }

	.start input[type=submit].xlarge {
		margin-left:25%;
	}

}


tt { display: none; }

#main .content fieldset.grouped-refdata{
	/*padding: 0.25em 0;*/
}

#main .content fieldset.grouped-refdata dd.double,
#main .content fieldset.grouped-refdata .review dd.double {
	padding-bottom: 0;
}

#main .content fieldset.grouped-refdata dt.double {
	display: none;
}

#main .content fieldset.grouped-refdata .multi span.check {
    padding-right:0;
    padding-bottom:0;
}

#main .content fieldset.grouped-refdata .multi span.check label {
	display: inline;
    font-size: 0.9em;
    height: 2.35em;
    line-height: 1.15em;
    overflow: hidden;
	width: 85%;
	margin-right: 0;
	padding-top:0.15em;
}

#main .content fieldset.grouped-refdata dd.list input {
	/*margin: 0.2em 0.75em 0 0;*/
}

#main .content fieldset.grouped-refdata div.divider {
	border-bottom: 1px dotted #CCCCCC;
	padding-bottom: .66em;
	margin-bottom: 1em;
	clear: both;
}



#main .content fieldset .photo-preview {
	height: 214px;
	line-height: 214px;
}

	#main .content fieldset .photo-preview img {
		max-height: 214px;
		max-width: 214px;
		vertical-align: middle;
		float:none;
	}

img.loading {
	margin-left: 2em;
	margin-top: .5em;
}

/* Progress meter */
.meter {
	height: 16px;  /* Can be anything */
	position: relative;
	background-color: #eee;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 8px;
	-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
	-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
	box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}

.meter > span {
	display: block;
	height: 100%;
	   -webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	       -moz-border-radius-topright: 8px;
	    -moz-border-radius-bottomright: 8px;
	           border-top-right-radius: 8px;
	        border-bottom-right-radius: 8px;
	    -webkit-border-top-left-radius: 20px;
	 -webkit-border-bottom-left-radius: 20px;
	        -moz-border-radius-topleft: 20px;
	     -moz-border-radius-bottomleft: 20px;
	            border-top-left-radius: 20px;
	         border-bottom-left-radius: 20px;
	background-color: rgb(255,116,103);
	-webkit-box-shadow:
	  inset 0 2px 9px  rgba(255,255,255,0.3),
	  inset 0 -2px 6px rgba(0,0,0,0.4);
	-moz-box-shadow:
	  inset 0 2px 9px  rgba(255,255,255,0.3),
	  inset 0 -2px 6px rgba(0,0,0,0.4);
	position: relative;
	overflow: hidden;
}

/**
 * Messages based on Modernizr results
 */
.if-fileinput
, .ifnot-fileinput {
	display: none;
}

html.fileinput .if-fileinput
, html.no-fileinput .ifnot-fileinput
{
	display: inherit;
}

/** doc uploader - additional photos **/

#main .content .additional-photos-grid {
	width:100%;
	float:left;
	margin:0 0 0.5em 0;
	padding:0 0 1em 0;
	border-bottom:1px dotted #CCC;
}

#main .content .additional-photos-grid dl {
	width:100%;
	float:left;
}

#main .content .additional-photos-grid dd {
	float:left;
	width:65%;
	position:relative;
	min-height:2em;
	padding-bottom: 0;
}

#main .content .additional-photos-grid .multi span.check {
	padding-right:0;
	padding-bottom:0;
	width:31%;
	height: 250px;
	margin:0 1% 0.5em 0;
}

@media handheld and (max-width: 765px), screen and (max-device-width: 765px), screen and (max-width: 765px) {
	#main .content .additional-photos-grid .multi span.check {
		width:50%;
	}
}