/**************************************************************************************************
* 	Print CSS
**************************************************************************************************/

/**************************************************************************************************
*	BROWSER RESET
**************************************************************************************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
b,
strong {
    font-weight: bold;
    font-weight: 700;
}
i,
em {
    font-style: italic;
}


/**************************************************************************************************
* 	BASIC STYLES - Contains frequent and re-usable styles found throughout the project
**************************************************************************************************/
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    font-weight: normal;
    font: normal 600 62.5%/1.857em Arial, sans-serif;
}
body {
    font-size: 1.4em; /* 14px */
    color: #363636;
}
.wrapper {
	max-width: 950px;
    overflow: hidden;
	margin: 0 auto;
}
.wrapper.centred {
    text-align: center;
}
article, aside, main, nav, section, ul {
    margin-bottom: 32px;
}
p {
    margin-bottom: 20px;
}
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
#skipToContent {
    display: none;
}


/* GLOBAL
------------------------------------------*/
a {
    color: #2e94b6;
    text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
img {
	max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 20px;
    line-height: 1.3;
    font-family: Arial, sans-serif;
    color: #000;
}
h1 {
    font-size: 2.57em; /* 36px */
    font-weight: bold;
    font-weight: 700;
}
h2 {
    font-size: 1.57em; /* 22px */
    font-weight: bold;
    font-weight: 600;
    line-height: 1.2;
}
h3 {
    font-size: 1.429em; /* 20px */
}
h3.sectionTitle {
    position: relative;
    clear: both;
    padding: 0 0 12px 30px;
    font-size: 1em; /* 14px */
    border-bottom: 1px solid #e6e6e6;
}
h3.sectionTitle:before {
    content: "";
    position: absolute;
    top: 1px;
    left: 10px;
    width: 6px;
    height: 11px;
    background: url("/Styles/img/wg-sprite.png") no-repeat -63px 0;
}
h3.sectionTitle.open:before {
    top: 4px;
    width: 11px;
    height: 6px;
    background-position: 0 0;
}
h4 {
    font-size: 1.143em;/* 16px */
    font-weight: bold;
    font-weight: 700;
}
h4.light {
    padding-bottom: 12px;
    font-weight: normal;
    font-weight: 600;
    border-bottom: 1px solid #e6e6e6;
}
ul,
ol {
    margin-left: 2em;
}
ul {
    list-style: disc outside;
}
ol {
    list-style:decimal;
}
ul ul {
    list-style-type: circle;
}
ol ol {
    list-style: lower-roman;
}
ul ol,
ul ul,
ol ol,
ol ul {
    margin-bottom: 0;
}
li {
    margin-top: .5em;
}
strong {
    font-weight: bold;
}
em {
    font-style: italic;
}
.gradient-bg {
    background: #e9e9e9; /* Old browsers */
}
.grey-bg {
    padding: 1em;
    overflow: hidden;
    background: #f0f0f0;
}
.grey-bg p {
    margin: 0 0 1em;
}

/* BUTTONS
------------------------------------------*/
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1.143em; /* 16px */
    font-weight: bold;
    font-weight: 700;
    background: #2e94b6;
    color: #fff;
    border: 0;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.btn-large {
    padding: 24px 58px;
}
.btn-small {
    padding: 6px 7px;
    font-size: 0.857em; /* 12px */
    line-height: 1.285; /* 18px */
}
.btn:hover {
    text-decoration: underline;
}
.btn:active {
    background: #2a637c;
}
.btn-red {
    background: #e30613;
    color: #fff;
}
.btn-red:active {
    background: #9d272a;
}
.btn-grey {
    background: #d0d0d0;
}
.btn-grey:active {
    background: #828283;
    color: #fff;
}
.btn-green {
    background: #009640;
}
.btn-green:active {
    background: #207243;
    color: #fff;
}
.btn-white {
    padding: 8px 40px;
    background: #fff;
    border: 2px solid #e6e6e6;
}
.btn-white:active {
    background: #d0d0ce;
}
.btn-grey,
.btn-white {
    color: #363636;
}
.btn:disabled,
.btn:disabled:hover {
    background: #CCC;
    color: #666;
    cursor: auto;
    text-decoration: none;
}

/* Inline Button with Text Input */
.field input.btn-inline,
.field button.btn-inline {
    float: left;
    margin: 0;
}
.field input.btn-inline {
    width: 182px;
}
.field .btn.btn-inline {
    width: 60px;
    height: 32px;
    padding: 0;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
}

/* FORMS
------------------------------------------*/
input,
select,
textarea {
    margin: 0;
    padding: 2px 5px;
    border: 1px solid #D0D0D0;
}
input,
select,
textarea,
button {
    font-weight: normal;
    font: normal 600 1em Arial, sans-serif;
    color: #363636;
}
.field,
.field-large {
    float: left;
    margin-bottom: 30px;
    position: relative;
}
.field {
    width: 50%;
}
.field.focus {
    z-index: 2;
}
.field-large,
.field-inlineBtn {
    width: 100%;
}
.field:nth-child(2n+1) {
    clear: left;
}
.field label {
    width: 130px;
    float: left;
    margin-top: 5px;
    padding-right: 10px;
    text-align: right;
}
.field .mandatory {
    margin-left: 3px;
    color: #e30613;
}
.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=tel],
.field input[type=search],
.field input[type=file],
.field select {
    width: 242px;
    height: 32px;
}
.field-large input[type=text],
.field-large input[type=email],
.field-large input[type=password],
.field-large input[type=tel],
.field-large input[type=search] {
    width: 610px;
}
.field input[type=file] {
    height: auto;
    border: 0;
}
.field select option {
    line-height: 32px;
}
.field-check input,
.field-radio input {
    width: auto;
    height: auto;
    float:left;
    margin: 3px 10px 0 0;
    padding: 0;
    border: 0;
}
.field-check label,
.field-radio label {
    width: auto;
    margin: 0;
    padding: 0;
}
.field-check label a,
.field-radio label a {
    margin-left: 20px;
}
textarea {
    width: 722px;
    height: 100px;
    padding: 5px;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=search]:focus,
textarea:focus,
.select-wrapper.focus {
    border: 1px solid #2e94b6;
}

/* Custom drop down */
.select-wrapper {
	display: inline-block;
	border: 1px solid #d0d0d0;
	background: #fff url("/Styles/img/wg-sprite.png") no-repeat 210px -40px;
	cursor: pointer;
    vertical-align: middle;
}
.select-wrapper,
.select-wrapper select {
	width: 242px;
    max-width: 100%;
}
.select-wrapper .holder {
	display: block;
	margin: 0 35px 0 5px;
	white-space: nowrap;            
	overflow: hidden;
	cursor: pointer;
	position: relative;
	z-index: 1;
    height: 32px;
    line-height: 32px;
}
.select-wrapper select {
    height: 32px;
	margin: 0;
    padding: 4px 9px;
	position: absolute;
	z-index: 2;            
	cursor: pointer;
	outline: none;
    border: 0;
	opacity: 0;
	/* CSS for older browsers */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
}
.select-wrapper option {
    padding: 0.5em;
    font-size: 1em;
}
select.unstyled {
    font-size: 12px;
}

/* CUSTOMISED ICONS (FontAwesome)
------------------------------------------*/
.fa-star {
    color: #ffcc00;
}
.fa-check {
    color: #646363;
}

/* TABLES
------------------------------------------*/
table {
    width: 100%;
}
table thead {
    font-weight: bold;
    font-weight: 700;
    color: #fff;
}
table td {
    padding: 1em;
}
table tr td {
    background: #fff;
}

table tr th,
table thead tr td {
    background: #646363;
    text-align: left;
}
table tr th {
    font-weight: bold;
    font-weight: 700;
    color: #fff;
    padding: 1em;
}
table tr:nth-of-type(2n) td {
    background: #e9e9e9;
}
thead {
  display:table-header-group;/*repeat table headers on each page*/
}
tbody {
  display:table-row-group;
}
tfoot {
  display:table-footer-group;/*repeat table footers on each page*/
}


/**************************************************************************************************
* 	PRINT CSS SPECIFIC
**************************************************************************************************/
.profileCard,
#skipToContent,
#mainNav,
#spotlights,
#siteFooter,
.basketProgress,
.printPage,
.multiEmail,
.loadingMessage,
.superCentreSwitcher,
.catalogueSectionFilter,
#catalogueSearch,
.catalogueTabs,
#catalogueListing .catalogueTabs + span,
.catalogueSearch,
.resultsHeader .resultsDisplayed,
.resultsFooter,
p.backToSearch,
.productDetails .actions,
.roc .rocSel,
.manageUsers .userActions,
.centreSettingsSearchFilter,
.centre ul.tabs,
.centreSettingsHelp,
.centreSectionActions,
.financialSearch,
.invoiceActions,
.confirmationpage .optionsHeader i {
	display: none !important;
}
body {
    padding-top: 30px;
}
h1 {
    font-size: 22px !important;
}
h3.accordion,
h3 + div.ng-hide {
    font-size: 14px;
}
h3.accordion {
    margin-bottom: 0;
}
.accordion-wrapper > div {
    margin-bottom: 10px;
}
.accordion-content {
    padding-top: 5px;
}


/* SITE HEADER
------------------------------------------*/
#siteHeader {
    margin: 0 0 32px;
}
.logos {
    float: left;
}
.logos a:hover {
    text-decoration: none;
}
.logos img {
    float: left;
    margin-right: 20px;
}
.walledGardenLogo {
    padding-top: 19px;
    padding-left: 20px;
    border-left: 1px solid #e6e6e6;
}


/* NEWS ARTICLE PAGE
------------------------------------------*/
.newsStory .featured {
    max-width: 100%;
    float: left;
    margin-right: 1em;
}
.newsStory time {
    display: block;
    margin-bottom: 1em;
    color: #999;
}


/* CATALOGUE LISTING TABLE
-----------------------------------------*/
.productList {
    list-style: none;
    margin: 0;
}
#catalogueListing .catalogueTabs {
    display: block !important;
    list-style: none;
    width: 100%;
    float: left;
    margin: 0 0 20px 0;
    padding: 0;
}
#catalogueListing .catalogueTabs a {
    display: none !important;
}
#catalogueListing .catalogueTabs .selectedTab a {
    display: block !important;
}

/* Listing Results */
.resultsList {
    margin-bottom: 20px;
}
.resultsList thead td,
.basketBlock thead td {
    padding: 0;
}
.resultsList thead a,
.basketBlock thead a {
    display: block;
    padding: 1em;
    color: #fff;
}
.resultsList thead i,
.basketBlock thead i {
    display: none;
}
.resultsList thead td a:hover,
.resultsList thead .selected,
.basketBlock thead td a:hover,
.basketBlock thead .selected {
    background: #767676;
    text-decoration: none;
}
.resultsList thead .selected i,
.basketBlock thead .selected i {
    display: inline;
    position: relative;
    top: -2px;
    left: 3px;
}
.resultsList thead .selected i.fa-sort-up,
.basketBlock thead .selected i.fa-sort-up {
    top: 3px;
}
.resultsList tbody td.approved {
    text-align: center;
}
.resultsList td.approved
.resultsList td.route {
    width: auto;
}
.resultsList td.code,
.resultsList td.level {
    width: 90px;
}
.resultsList thead td a {
    color: #ccc;
}
.resultsHeader td,
.resultsList td {
    padding: 8px;
    font-size: 12px;
    border-top: 1px solid #d0d0d0;
}


/* PRODUCT INFO
------------------------------------------*/
.productDetails .info {
    width: 100%;
}
.productDetails .info dt,
.productDetails .info dd {
    float: left;
}
.productDetails .info .lastReg,
.productDetails .info .lastCert {
    display: block;
    clear: left;
}



/* RULES OF COMBINATION
------------------------------------------*/
.roc {
    margin: 30px;
    overflow: hidden;
}
.roc .select-wrapper,
.roc select {
    width: 500px;
}
.roc .select-wrapper {
    margin-bottom: 32px;
    background-position: 466px -40px;
}
.roc .pathwaySection {
    width: 100%;
    float: left;
    margin-bottom: 32px;
    border: 4px solid #c0c0c0;
}
.roc .pathwaySection.passed {
    border-color: #009640;
}
.roc h2 {
    margin: 0;
    padding: 16px;
    background: #c0c0c0;
}
.roc .passed h2 {
    background: #009640;
    color: #fff;
}
.roc tbody tr {
    cursor: pointer;
}
.roc tbody tr:hover td {
    background: #ddd;
}
.roc .disabledRow {
    color: #d0d0d0;
}
.roc .achieved {
    width: 100%;
    float: left;
    padding: 18px 0;
    background: #009640;
    color: #fff;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}
.roc .achieved.not {
    background: #646363;
}



/* ORDER CONFIRMATION PAGE
------------------------------------------*/
.confirmationSummary,
.basketTotals.confirmation {
    margin-bottom: 32px;
}
.confirmationHeader,
.optionsFooter {
    overflow: hidden;
    margin-bottom: 20px;
}
.confirmationHeader h2 {
    width: 500px;
    float: left;
}
.printPage {
    float: right;
}
.confirmationSummary label {
    width: 240px;
    margin-top: 7px;
    text-align: left;
}
.confirmationSummary .successMessage {
    color: #009640;
}
.confirmationOrderTable tr td,
.confirmationOrderTable tr:nth-of-type(2n) td {
    margin: 0;
    padding: 0 10px 32px 0;
    background: #fff;
}
.confirmationOrderTable h6 {
    margin-bottom: 10px;
}
.confirmationOrderTable p {
    margin: 0;
    padding: 10px;
    background: #e9e9e9;
}
.confirmationpage .productHeader h3 {
    width: 630px;
    margin: 18px;
    padding: 10px 0;
}
.confirmationCandidatesCount {
    width: 420px;
}
.confirmationCourseDates {
    width: 250px;
}
.confirmationCourseDates .dateLabel,
.confirmationCourseDates .dateInfo,
.confirmationpage .productFooterLabel,
.confirmationpage .productFooterDetail,
.basketTotals.confirmation .totalsLabel,
.basketTotals.confirmation .totalsDetail,
.confirmationpage .productFooterDetail {
    float: left;
    margin: 0 0 6px;
    padding: 0;
    background: #fff;
}
.confirmationCourseDates .dateLabel,
.confirmationpage .productFooterLabel,
.basketTotals.confirmation .totalsLabel {
    width: 150px;
    color: #000;
    font-weight: 300;
}
.confirmationCourseDates .dateInfo,
.confirmationpage .productFooterDetail,
.basketTotals.confirmation .totalsDetail,
.confirmationpage .productFooterDetail {
    width: 100px;
    font-weight: bold;
    font-weight: 700;
    color: #000;
}
.confirmationCandidates {
    float: left;
    margin-top: 10px;
    margin-bottom: 20px;
}
.confirmationCandidates thead td,
.confirmationCandidates tbody td {
    padding: 1em;
}
.optionsHeader {
    position: relative;
    width: 510px;
    float: left;
    padding: 20px 0 20px 40px;
    cursor: pointer;
}
.optionsHeader h3 {
    margin-bottom: 5px;
    font-weight: normal;
    font-weight: 400;
}
.optionsHeader i {
    display: block;
    position: absolute;
    top: 30px;
    left: 16px;
    width: 6px;
    height: 11px;
    background: url("/Styles/img/wg-sprite.png") -63px 0;
}
.optionsList {
    width: 100%;
    float: left;
    margin-bottom: 20px;
    padding: 20px 40px;
    color: #fff;
}
.confirmationpage .optionsHeader {
    padding-left: 0;
}
.confirmationpage .optionsList {
    padding: 0;
}
.optionsList ul {
    list-style: none;
}
.confirmationpage .productFooter {
    margin: 0;
}
.confirmationpage .productFooter > div,
.confirmationpage .optionsFooter,
.basketTotals.confirmation .totalsFigures {
    display: block;
    width: 100%;
    clear: both;
    float: none;
}
.confirmationDeliveryLeft {
    width: 260px;
    float: left;
}
.confirmationDeliveryRight {
    width: 406px;
    float: right;
}
.confirmationDeliveryRight p {
    min-height: 200px;
}
.paymentTypeDetails {
    width: 370px;
    float: left;
}
.basketTotals.confirmation {
    width: 100%;
    float: left;
    overflow: hidden;
    border: 0;
}
.basketTotals.confirmation ul {
    margin: 0;
    list-style: none;
}
.basketTotals.confirmation li {
    display: block;
    width: 100%;
    float: left;
    margin: 0;
}
.paymentTypeDetails {
    display: block;
    width: 100%;
    float: none;
    margin: 30px 0 10px;
    font-size: 20px;
    color: #000;
}
.paymentTypeDetails br {
    display: none;
}



/* MANAGE USERS
------------------------------------------*/
.manageUsers .usersHeader > span {
    clear: left;
    display: block;
}



/* FINANCIAL
------------------------------------------*/
.invoiceInfo {
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
}
.invoiceInfo .info {
    width: 700px;
    font-size: 12px;
}
.invoiceInfo .info dt,
.invoiceInfo .info dd {
    float: left;
}
.invoiceInfo .info dt {
    clear: left;
    margin-right: 5px;
}