﻿/* = Reset
----------------------------------------------------------------------------------------------------------------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, hr, a, a img, font, img, dd, dl, dt, li, ol, ul, blockquote, fieldset, form, label, legend, table, caption, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; }

/* = HTML5 Elements
----------------------------------------------------------------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
audio, canvas, video { display: inline-block; }

html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

/* = Body
----------------------------------------------------------------------------------------------------------------- */
body { color: #282828; line-height: 1; font-size: 1em; text-align: left; font-family: 'DIN Next W01'; background: #fff; }

/* = Text-Level
----------------------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 0 0 20px; color: #46596a; font-weight: normal; }
h1 { font-size: 3.2em; font-weight: 200; text-transform: uppercase; }
h2 { font-size: 2em; font-weight: 200; text-transform: uppercase; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1em; font-weight: bold; }
h6 { font-size: 1em; font-weight: bold; }

p { margin: 0 0 20px; line-height: 1.5em; }

blockquote { margin: 0 0 20px; padding: 0; font-size: 1.25em; color: #4b5c66; }
blockquote p { margin-bottom: 0; line-height: 1.4em; }

a { color: #d17c28; text-decoration: none; }
a:hover { color: #000; text-decoration: none; }

a, input { -moz-outline-style: none; outline: 0; }
:active, :focus { outline: 0 !important; }
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner { border: none; }

img { vertical-align: bottom; height: auto; -ms-interpolation-mode: bicubic; }
hr { margin: 20px 0; height: 1px; border: 0; border-top: 1px solid #d6dbe2; }
small { font-size: 0.85em; color: #8d8d8d; }
address { font-style: normal; }
iframe { width: 100%; }

sub, sup { line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre { margin: 0; }
code { font-size: 1em; }

/* = Lists
----------------------------------------------------------------------------------------------------------------- */
ul { margin: 0 0 20px 15px; }
ul li { margin: 0 0 10px; line-height: 1.5em; }
ul li ul { margin-top: 20px; margin-left: 30px; list-style-type: circle; }

ol { margin: 0 0 20px 18px; }
ol li { margin: 0 0 10px; }
ol li ol { margin-top: 20px; margin-left: 30px; list-style-type: lower-latin; }

dl { margin: 0 0 20px; line-height: 1.6em; }
dt { color: #46596A; font-weight: bold; font-style: normal; }
dd { margin: 0 0 20px; }

.inline { margin-left: 0; list-style: none; }
.inline li { display: inline; margin: 0 15px 0 0; }

.tick { margin: 0; list-style: none; }
.tick li { padding-left: 30px; line-height: 1.5em; background: url(/_img/icons/tick.svg) no-repeat left 4px; }

/* = Figures
----------------------------------------------------------------------------------------------------------------- */
figure { margin: 0 0 20px; }
figure img { max-width: 100%; }
figcaption { padding-top: 10px; font-size: 0.85em; }

/* = Tables
----------------------------------------------------------------------------------------------------------------- */
table { width: 100%; margin: 0 0 20px; border-spacing: 0; border-collapse: collapse; }
th { padding: 8px 10px; color: #fff; border: 1px solid #46596a; background: #46596a; }
td { padding: 8px; vertical-align: top; border-bottom: 1px solid #d6dbe2; background: #fff; }
tfoot td { color: #fff; background: #252525; }
caption { text-align: left; caption-side: bottom; padding-top: 10px; color: #8d8d8d; font-size: 0.85em; }

.rowItemAlt td { background: #d6dbe2; }
.rowItemStandout td { color: #fff; background: #d17c28; }
.rowItemDisabled td { color: #ccc; }
.tableWrap { width: 100%; position: relative; }
.tableWrap .tableScroll { overflow-x: scroll; }

/* = Screen Messages
----------------------------------------------------------------------------------------------------------------- */
.msg { margin: 0 0 20px; padding: 20px; border: 2px solid #d6dbe2; background: #fff; }
.msg p { margin-bottom: 0; }
.msg ul { margin-bottom: 0; }
.msg ul li { margin-bottom: 5px; line-height: inherit; }

.msgImp { padding-left: 60px; color: #fff; border: 1px solid #46596a; background: #46596a url(/_img/icons/important.svg) no-repeat 25px center; }
.msgImp a { color: #fff; font-weight: bold; }
.msgError { padding-left: 60px; color: #fff; border: 1px solid #d17c28; background: #d17c28 url(/_img/icons/error.svg) no-repeat 15px center; }
.msgSuccess { padding-left: 60px; color: #fff; border: 1px solid #83b746; background: #83b746 url(/_img/icons/success.svg) no-repeat 15px center; }
.msgAssist { border: 1px solid #d6dbe2; background-color: #d6dbe2; }

/* = Columns
----------------------------------------------------------------------------------------------------------------- */
.colsSixthCustom { border-bottom: 1px solid #45515c; }
.colsSixthCustom .colSpan .col ul li:first-child a { font-weight: bold; }
.colsSixthCustom .colSpan .endCol ul li:first-child a { font-weight: normal; }

.colsColour { background: #0071b8; }

/* = Modules
----------------------------------------------------------------------------------------------------------------- */
.mod { margin: 0 0 20px; }
.mod h3 { margin: 0 0 15px; }
.modStandout { padding: 20px 20px 2px; background: #d6dbe2; }

.modBlue { padding: 15px 15px 0; color: #fff; background: #0071b8; }
.modBlue h3 { color: #fff; }

.modColour { padding: 15px 15px 0; color: #fff; background: #0071b8; }
.modColour h3 { color: #fff; }

.modDownload { margin: 0 0 20px; padding: 15px; background: #d6dbe2; }
.modDownload h3 { margin: 0 0 10px; text-transform: uppercase; font-size: 1.4em; }
.modDownload p { margin: 0; }

/* = Buttons
----------------------------------------------------------------------------------------------------------------- */
.btn { display: inline-block; cursor: pointer; padding: 8px 16px 6px; color: #fff; font-size: 1em; font-weight: bold; font-family: 'DIN Next W01', Helvetica, Sans-Serif; border: 0; background: linear-gradient(to bottom, #533f66 0%, #533f66 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); -webkit-box-shadow: 0; -moz-box-shadow: 0; box-shadow: 0; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; -moz-appearance: none; -webkit-appearance: none; appearance: none; }
.btn:hover { color: #fff; background: linear-gradient(to bottom, #6f5d80 0%, #6f5d80 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); }

.btnImpact { color: #fff; background: linear-gradient(to bottom, #83b746 0%, #5b8f1e 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); }
.btnImpact:hover { color: #fff; background: linear-gradient(to bottom, #5b8f1e 0%, #83b746 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); }

.btnArrow { font-size: 1.2em; padding: 10px 18px; background: linear-gradient(to bottom, #d17c28 0%, #a95400 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); }
.btnArrow:hover { color: #fff; background: linear-gradient(to bottom, #a95400 0%, #d17c28 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); }
.btnArrow span { padding: 5px 35px 5px 0; background: url(/_img/arrows/btn.svg) no-repeat center right; }

.btnFinder { font-size: 1.2em; padding: 10px 18px; }
.btnFinder span { padding: 5px 35px 5px 0; background: url(/_img/arrows/btn-coursefinder.svg) no-repeat center right; }

.btnAlt { display: inline-block; padding: 18px 30px; margin: 0 20px 10px 0; font-size: 110%; background: #d6dbe2; color: #99a3b0; font-weight: bold; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.btnAlt label { float: none; padding: 0; width: auto; cursor: pointer; }
.btnAlt:hover { background: #cbd0d7; }
.btnAlt:active,
.btnAlt.on { color: #fff; background: #83b746; -moz-box-shadow: inset 0 0 10px #608633; -webkit-box-shadow: inset 0 0 10px #608633; box-shadow: inset 0 0 10px #608633; }
.btnAlt.on:hover { -moz-box-shadow: inset 0 0 0 #608633; -webkit-box-shadow: inset 0 0 0 #608633; box-shadow: inset 0 0 0 #608633; }

input.btn { padding-bottom: 8px; }
input.btnArrow { padding: 10px 80px 10px 20px; background: #a95400 url('/_img/ctas/btn-arrow.png') top right no-repeat; }
input.btnArrow:hover { background: #cf7a26 url('/_img/ctas/btn-arrow-hover.png') top right no-repeat; }

/* = Forms
----------------------------------------------------------------------------------------------------------------- */
.webForm div { margin: 0 0 20px; }
.webForm div em { display: block; margin: 5px 0 0; }
label { width: 100%; float: left; padding: 0 0 10px; }
input.text, textarea, select { width: 100%; padding: 10px; font-size: 1em; border: 1px solid #d6dbe2; font-family: 'DIN Next W01', Helvetica, Sans-Serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
input:focus, select:focus, textarea:focus, button:focus { outline: none; }
select { -moz-appearance: none; -webkit-appearance: none; appearance: none; }

.formList { display: inline-block; line-height: 1.5em; }
.formList label { width: auto; padding: 0; float: none; }
.formList input { width: auto; margin: 0 10px 0 0; padding: 0; border: 0; }

.checkbox { display: inline-block; }
.checkbox input { float: left; margin: 0; padding: 0; border: 0; }

/* Styled checkboxes */
.jsChk input[type="checkbox"] { display: none; }
.jsChk > span { cursor: pointer; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; }
.imgButtons { float: left; width: 100%; margin: 30px 0; }
.imgButtons > div { clear: both; }
.imgButtons .jsChk > span { position: relative; float: left; margin: 0 30px 60px 0; cursor: pointer; }
.imgButtons .jsChk > span label { float: none; padding: 0; width: auto; cursor: pointer; }
.imgButtons .jsChk > span img { float: left; margin: 4px; padding: 4px; border: solid 1px #d6dbe2; }
.imgButtons .jsChk > span img:hover { border-color: #83b746; }
.imgButtons .jsChk > span.on img { margin: 0; border: solid 5px #83b746; }
.imgButtons .jsChk > span.on span { position: absolute; left: 50%; bottom: -30px; margin-left: -10px; width: 20px; height: 16px; background: url('/_img/icons/tick-alt.png') top left no-repeat; }
.imgButtons hr { clear: both; border-top: dotted 1px #d6dbe2; }


/* == Global tooltip
----------------------------------------------------------------------------------------------------------------------*/
.genTooltip { margin: 0 3px; width: 17px; height: 17px; background: url('/_img/icons/tooltip-info.png') top left no-repeat; vertical-align: -3px; display: inline-block; }
.genTooltipAlt { background-image: url('/_img/icons/tooltip-info-alt.png'); }
.genTooltipInfo { position: absolute; top: 0; left: 0; max-width: 250px; padding: 15px; background: #000; color: #fff; line-height: 1.3em; font-size: 90%; text-align: left; }
 

/* = Pagination
----------------------------------------------------------------------------------------------------------------- */
.pagination { margin: 0 0 20px; }
.pagination li { display: inline; margin: 0; border-right: 1px solid #d6dbe2; }
.pagination li.det { padding-right: 10px; }
.pagination li a { display: inline-block; padding: 0 10px; color: #46596a; }
.pagination li a:hover { color: #c47928; }
.pagination li a.on { color: #c47928; }

/* = .net Pagination
----------------------------------------------------------------------------------------------------------------- */
.paging { clear: both; }
.paging > ul { margin: 0 0 20px 0; list-style: none; }
.paging > ul > li { display: inline-block; margin-left: 5px; border-left: 1px solid #d6dbe2; }
.paging > ul > li:first-child { margin-left: 0; border-left-width: 0; }
.paging > ul .det { padding-right: 15px; }
.paging > ul a { display: inline-block; padding: 0 10px; color: #46596a; }
.paging > ul a:hover { color: #c47928; }
.paging > ul a.on { color: #C47928; }


/* = Media Object (Extend freely but change with caution)
----------------------------------------------------------------------------------------------------------------- */
.medObj { margin: 0 0 20px; }
.medObj, .medObj .cont { overflow: hidden; _overflow: visible; _zoom: 1; }
.medObj .thumb { display: none; }

.medObjs { margin: 0; list-style: none; }
.medObjs li { margin: 0 0 20px; }
.medObjs li, .medObjs li .cont { overflow: hidden; _overflow: visible; _zoom: 1; }
.medObjs li .thumb { display: none; }
.medObjs li .cont h4 { margin-bottom: 5px; }

/* = Breadcrumb
----------------------------------------------------------------------------------------------------------------- */
.breadcrumb { padding: 20px 0; border-bottom: 1px solid #d6dbe2; }
.breadcrumb ul { margin: 0; list-style: none; }
.breadcrumb ul li { display: inline; margin: 0 10px 0 0; font-size: 0.85em; line-height: inherit; }

/* = Banners
----------------------------------------------------------------------------------------------------------------- */
.banner img { width: 100%; }
.bannerLeft { margin: 0 0 20px; }

/* = Helper Classes
----------------------------------------------------------------------------------------------------------------- */
.floatLeft { float: left; }
.floatRight { float: right; }
.floatNone { float: none; }
.hide { display: none; }
.hideText { text-indent: 100%; white-space: nowrap; overflow: hidden; }
.clr { clear: both; }
.textLeft { text-align: left; }
.textCenter { text-align: center; }
.textRight { text-align: right; }
.highlight { color: #d17c28; }
.marked { color: #fff; background: #d17c28; }
.meta { color: #8b8b8b; font-size: 0.85em; margin-bottom: 8px; }
.space { display: none; }
.leader { font-size: 1.2em; line-height: 1.2em; font-weight: 200; }
.display { display: none; }
.imgResponsive { width: 100%; }
.bullets span { display: inline-block; margin: 0 0 8px; }
.imgIcon { vertical-align: -3px; margin: 0 3px; }

/* = Clearing
----------------------------------------------------------------------------------------------------------------- */
.inner, .main, .cols, .clearfix { zoom: 1; }
.inner:after, .main:after, .cols:after, .clearfix:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; overflow: hidden; }




/* == Media Queries
----------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 480px) {
    figure { width: 50%; margin: 0 20px 0 0; }
    .figLeft { float: left; margin-right: 20px; }
    .figRight { float: right; margin-left: 20px; }
    .medObj .thumb { display: block; float: left; margin: 0 20px 0 0; max-width: 50%; }
    .medObj .thumb img { display: block; max-width: 100%; }
    .medObjs li .thumb { display: block; float: left; margin: 0 20px 0 0; max-width: 30%; }
    .medObjs li .thumb img { display: block; max-width: 100%; }
}

@media screen and (min-width: 600px) {
    .tableWrap .tableScroll { overflow-x: auto; }
}

@media screen and (min-width: 768px) {
    hr { margin-top: 30px; margin-bottom: 30px; }
    figure { width: auto; }
    .colsHalf .col { width: 48%; float: left; margin-right: 3%; }
    .colsHalfCustom .col { width: 30%; float: left; }
    .colsHalfCustom .endCol { width: 70%; }
    .colsHalfCustomRight .col { width: 70%; float: left; }
    .colsHalfCustomRight .endCol { width: 25%; }
    .colsThird .col { width: 32%; float: left; margin-right: 2%; }
    .colsFourth .col { width: 23%; float: left; margin-right: 2.5%; word-wrap: break-word; }
    .colsFifth .col { width: 16.8%; float: left; margin-right: 4%; }
    .colsSixthCustom { border-bottom: 0; }
    .colsSixthCustom .col { width: 250px; float: left; }
    .colsSixthCustom .colSpan { width: 100%; }
    .colsSixthCustom .colsThirdCustom .endCol { float: left; }
    .cols .endCol { float: right; margin-right: 0; }
    .bannerLeft { float: right; }
}

@media screen and (min-width: 1024px) {
    .webForm div { margin-bottom: 20px; }
    .webForm div em { margin-left: 35%; }
    label { width: 35%; padding: 10px 0; }
    input.text, textarea, select { width: 65%; }
    .formList { padding: 8px 0; }
    .colsSixthCustom .col { width: 240px; }
    .colsSixthCustom .colSpan { width: 65%; }
    .colsSixthCustom .colsThirdCustom .col { width: 50%; }
    .colsSixthCustom .colsThirdCustom .endCol { width: auto; margin-top: 10px; }
    .bannerLeft { width: 22.7%; float: left; }
    .bannerRight { width: 31%; float: right; }
    .space { display: block; }
    .display { display: block; }
}

@media screen and (min-width: 1200px) {
    .colsSixthCustom .col { width: 240px; }
    .colsSixthCustom .colSpan { width: 66%; }
    .colsSixthCustom .colsThirdCustom .col { width: 37%; }
    .colsSixthCustom .colsThirdCustom .endCol { width: auto; margin-top: 10px; }
    .bannerLeft { width: auto; }
    .bannerRight { width: auto; }
    .leader { font-size: 1.375em; line-height: 1.4em; }
    .tick li { font-size: 1.1em; }
    .modBlue { padding: 30px 30px 0; }
    .modColour { padding: 30px 30px 0; }
    .modDownload { margin-bottom: 40px; padding: 20px; }
    .imageleft { float: left; margin: 0 30px 20px 0; }
    .imageright { float: right; margin: 0 0 20px 20px; }
}




/* == New styles to be tidied
----------------------------------------------------------------------------------------------------------------- */
section.grey .featText { width: 100%; margin: 15px 0 0; font-size: 110%; }
.coverSheet { background: url(/_img/lens-dark.png) left top; height: 100%; width: 100%; position: fixed; top: 0; left: 0; display: none; z-index: 1000; }

/* lightbox starts off flexible width to make it responsive */
.lightbox { position: fixed; overflow: visible; top: 50%; left: 50%; width: 90%; margin: 0 auto; padding: 10px; background: #fff; z-index: 1001; display: none; -webkit-transition: width 1s ease, height 1s ease; }
.lightbox h3 { color: #fff; padding: 10px 15px 7px; background: #46596a; }
.lightbox .close { position: absolute; top: -11px; right: -11px; width: 32px; height: 32px; background: url('/_img/icons/close-alt.png') 0 0 no-repeat; }
.lightbox.lightboxLoading { height: 100px; background: #fff url('/_img/lightbox/loading.gif') center center no-repeat; }

@media screen and (min-width: 768px) {
    /* once we exceed the required width fix the lightbox width to contain the contents */
    .lightbox { width: 690px; }
}

@media screen and (min-width: 1024px) {
    .lightbox { width: 910px; }
}