/* --------------------------------------------------------------------------------------------------------------------------------------
== To be tidied
----------------------------------------------------------------------------------------------------------------------------------------*/

/* used on listing as well */
.meta { color: #787878; font-size: 90%; }

/* repeater */
ul.repeater { margin: 0; padding-bottom: 10px; list-style: none; clear: both; }



/* == News pages styles
----------------------------------------------------------------------------------------------------------------------*/

/* News module */
.modNews .repeaterWrap { width: 100%; overflow: hidden; margin: 20px 0; }
.modNews ul.repeater { width: 103%; margin-bottom: 10px; }
.modNews ul.repeater:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }
.modNews ul.repeater li { position: relative; float: left; width: 98%; padding-right: 0; overflow: hidden; }
.modNews ul.repeater li h2 { line-height: 1em; }
.modNews ul.repeater li h2 a,
.modNews ul.repeater li h4 a { color: #4b5c66; }
.modNews ul.repeater li h2 a:hover,
.modNews ul.repeater li h4 a:hover { color: #000; }
.modNews ul.repeater li h2 a { font-size: 80%; }
.modNews ul.repeater li .thumb { position: relative; margin: 0 0 20px; }
.modNews ul.repeater li .thumb img { width: 100%; }
.modNews ul.repeater li .thumb img.author { position: absolute; bottom: 0; left: 0; width: auto; max-width: 100%; }
.modNews ul.repeater li .cont { margin-bottom: 20px; }
.modNews ul.repeater li .cont img { max-width: 100%; }
.modNews ul.repeater li .cont h4 { margin: 10px 0; }
.modNews ul.repeater li .cont p { margin: 0 0 5px; }
.modNews ul.repeater li .cont .meta { position: absolute; top: 0; left: 0; padding: 3px 8px; background: url('/_img/lens.png') top left repeat; color: #fff; }

@media screen and (min-width: 450px) {
    .modNews ul.repeater li { width: 46%; padding-right: 4%; }
    .modNews ul.repeater li.mod2 { clear: both; }

    .modNews ul.repeaterFeat li { width: 98%; padding-right: 0; }
    .modNews ul.repeaterFeat li .thumb { float: left; width: 40%; margin-right: 20px; }
    .modNews ul.repeaterFeat li .cont { overflow: hidden; }
}

@media screen and (min-width: 700px) {
    .modNews ul.repeater li h2 a { font-size: 100%; }
    .modNews ul.repeater li { width: 30%; padding-right: 3%; }
    .modNews ul.repeater li.modImp { clear: none; }
    .modNews ul.repeater li.mod3 { clear: both; }

    .modNews ul.repeaterFeat li { width: 98%; padding-right: 0; }
}

@media screen and (min-width: 900px) {
    .modNews .repeaterWrap { margin: 0 0 20px; }
}


/* News view styling */
.newsView .meta { position: relative; margin: -10px 0 10px; }
.newsView .meta .back { position: absolute; top: 0; right: 0; }
.newsView .share { margin: 20px 0; min-height: 50px; }
.newsView .share a { display: inline-block; margin: 0 10px 5px 0; }
.newsView .img { float: left; margin: 0 20px 15px 0; max-width: 50%; }
.newsView .img img { max-width: 100%; }
.newsView hr { margin: 30px 0; }
.newsView .tags strong { color: #4b5c66; }



/* == Styles for the London logo menus
----------------------------------------------------------------------------------------------------------------------*/
.templatePartner .tabs .inner { position: relative; }
.templatePartner .menuLogos { position: relative; top: 0; left: 0; margin: 0 0 30px; padding: 8px 5px 5px; background: #eee; }
.templatePartner .menuLogos ul.inline { margin: 0; text-align: center; }
.templatePartner .menuLogos li { display: inline-block; margin: 0; }
.templatePartner .menuLogos li a { display: inline-block; opacity: 0.8; margin: 4px; width: 102px; height: 50px; background: url('/_img/logos/menu/30.png') 0 0 no-repeat; text-indent: -9999px; overflow: hidden; }
.templatePartner .menuLogos li.liLondon a { width: 159px; background-image: url('/_img/logos/menu/25.png'); }
.templatePartner .menuLogos li.liBirkbeck a { background-image: url('/_img/logos/menu/30.png'); }
.templatePartner .menuLogos li.liGoldsmiths a { background-image: url('/_img/logos/menu/31.png'); }
.templatePartner .menuLogos li.liQueenMary a { background-image: url('/_img/logos/menu/32.png'); }
.templatePartner .menuLogos li.liRoyalHolloway a { background-image: url('/_img/logos/menu/33.png'); }
.templatePartner .menuLogos li.liIOE a { background-image: url('/_img/logos/menu/34.png'); }
.templatePartner .menuLogos li.liRVC a { background-image: url('/_img/logos/menu/35.png'); }
.templatePartner .menuLogos li.liCourtauld a { background-image: url('/_img/logos/menu/36.png'); }
.templatePartner .menuLogos li.liHeythrop a { width: 102px; background-image: url('/_img/logos/menu/336.png?1'); }
.templatePartner .menuLogos li.liOn a,
.templatePartner .menuLogos li a:hover { opacity: 1.0; }
.templatePartner .menuLogos li.liOn a { margin: 0; border: solid 4px #512178; }

@media screen and (min-width: 1200px) {
    .templatePartner .menuLogos { left: -2px; position: absolute; top: -90px; padding: 5px; background: transparent; text-align: left; }
}



/* == Auto complete styling
----------------------------------------------------------------------------------------------------------------------*/
.search input { font-size: 90%; padding: 4px 35px 5px 10px; }
.ui-autocomplete { max-height: 200px; overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; }
.searchAutoComp { max-width: 360px; font-size: 80%; background: #a6b2bd; border-color: #a6b2bd; color: #fff; }
.ui-widget-content.searchAutoComp a,
.ui-widget-content.searchAutoComp a:hover { color: #fff; }
.searchAutoComp .ui-state-focus { background: #4b5c66; border-color: #4b5c66; font-weight: normal; }



/* == Search results
----------------------------------------------------------------------------------------------------------------------*/
.searchResults ul.medObjs li { border-bottom: solid 1px #d5dbe0; }
.searchResults ul.medObjs li:first-child { border-top: solid 1px #d5dbe0; padding-top: 20px; }
.searchResults ul.medObjs li .thumb a { float: left; width: 80px; padding: 40px 10px; background: #4b5c66; color: #fff; font-weight: bold; text-align: center; }
.searchResults ul.medObjs li.type2 .thumb a { background: #d5dbe0; }



/* == Responsive Image Mapping
----------------------------------------------------------------------------------------------------------------------*/
img[usemap] { border: none; height: auto; max-width: 100%; width: auto; }

@media screen and (min-width: 1200px) {
    .colsImageMaps { }
    .colsImageMaps .col { width: 659px; }
    .colsImageMaps .col img { width: 100%; }
    .colsImageMaps .endCol { width: 505px; }
}



/* == Meet the students styling
----------------------------------------------------------------------------------------------------------------------*/
.meetStudents .filter h2 { margin-bottom: 10px; }
.meetStudents .filter select { margin-bottom: 10px; margin-top: 0; }
.meetStudents ul.repeater li.modImp { clear: none; margin-left: 4.5%; }
.meetStudents ul.repeater li.mod2 { margin-left: 0; clear: both; }
.meetStudents ul.repeater li .photo { position: relative; }
.meetStudents ul.repeater li .logos { position: absolute; bottom: 5px; left: 5px; }
.meetStudents ul.repeater li .logos img { width: 100%; max-width: 100%; margin-left: -2px; }
.meetStudents ul.repeater li .logos span { position: absolute; top: 0; left: -5px; width: 5px; height: 100%; background: #fff; }
.meetStudents ul.repeater li .logos span.alt { left: auto; right: 0; }
.meetStudents ul.repeater li .profile { display: none; }

@media screen and (min-width: 600px) {
    .meetStudents .filter { padding: 20px; }
    .meetStudents .filter select { width: 30%; }
    .meetStudents ul.repeater li { width: 31%; }
    .meetStudents ul.repeater li.modImp { clear: none; margin-left: 3%; }
    .meetStudents ul.repeater li.mod3 { margin-left: 0; clear: both; }
}

@media screen and (min-width: 770px) {
    .meetStudents ul.repeater li { width: 23%; }
    .meetStudents ul.repeater li.modImp { clear: none; margin-left: 2.5%; }
    .meetStudents ul.repeater li.mod4 { margin-left: 0; clear: both; }
}

@media screen and (min-width: 900px) {
    .meetStudents { margin-bottom: 40px; }
    .meetStudents .filter { margin-bottom: 40px; }
}

@media screen and (min-width: 1200px) {
    .meetStudents .filter select { width: 26%; margin-bottom: 0; }
    .meetStudents ul.repeater li { width: 18%; }
    .meetStudents ul.repeater li.modImp { clear: none; margin-left: 2.5%; }
    .meetStudents ul.repeater li.mod5 { margin-left: 0; clear: both; }
}

/* Student progile light box */
.lightboxProfile .img { float: left; margin: 0 15px 0 0; }
.lightboxProfile .txt { overflow: hidden; }
.lightboxProfile .txt h3 { margin-bottom: 10px; }


/* == Responsive Video Styles
----------------------------------------------------------------------------------------------------------------------*/
.videoHolder { position: relative; padding-bottom: 56.25%; padding-top: 60px; overflow: hidden; background: #000 url('/_img/loader.gif') center center no-repeat; }
.videoHolder iframe,
.videoHolder object,
.videoHolder embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



/* == Coursefinder content
----------------------------------------------------------------------------------------------------------------------*/
.courseFinderContent .col { margin-bottom: 50px; }
.courseFinderContent select { margin-bottom: 10px; }
.courseFinderContent .degreesWrap .msgAssist { padding: 20px 20px 15px 20px; margin: 0 0 30px; font-size: 90%; }
.courseFinderContent .degreesWrap .msgAssist h3 { margin: 0 0 5px; }
.courseFinderContent .degreesWrap .msgAssist p { line-height: 2em; margin-bottom: 10px; }

@media screen and (min-width: 900px) {
    .courseFinderContent .col { margin-bottom: 80px; }
}


/* == Add This Styles
----------------------------------------------------------------------------------------------------------------------*/
.addthis_default_style .at300b, .addthis_default_style .at300bo, .addthis_default_style .at300m { padding: 0; }
.addthis_button_facebook,
.addthis_button_twitter,
.at16nc.at16t_facebook,
.at16nc.at16t_twitter { float: left; background: url('/_img/ctas/share-on-facebook.png') 0 0 no-repeat; width: 187px !important; height: 37px; margin: 4px 0 0; }
.addthis_button_twitter,
.at16nc.at16t_twitter { background-image: url('/_img/ctas/tweet.png'); width: 98px; }
.addthis_button_facebook span,
.addthis_button_twitter span,
.at16nc.at16t_facebook span,
.at16nc.at16t_twitter span { visibility: hidden; }


/* == Full page stylised button
----------------------------------------------------------------------------------------------------------------------*/
a.btnFullPage { float: left; width: 100%; margin: 0 0 50px; background: #77ac3a; color: #fff; font-family: 'DIN Next W01'; font-size: 2.2em; font-weight: 200; text-transform: uppercase; background: -webkit-linear-gradient(#8dbd4d, #78a338); background: -o-linear-gradient(#8dbd4d, #78a338); background: -moz-linear-gradient(#8dbd4d, #78a338); background: linear-gradient(#8dbd4d, #78a338); }
a.btnFullPage:hover { background: #77ac3a; }
a.btnFullPage > span { display: block; width: 100%; margin: 0 0 0 -20px; padding: 25px 0; background: url('/_img/coursefinder/US-banner-degrees.png') center right no-repeat; }
a.btnFullPage > span > span { display: inline-block; padding: 15px 75px 15px 60px; background: url('/_img/coursefinder/arrow.png') center right no-repeat; }

@media screen and (min-width: 900px) {
    a.btnFullPage { font-size: 2.3em; }
}

@media screen and (min-width: 900px) {
    a.btnFullPage > span { display: block; margin: 0 0 0 -20px; padding: 25px 0; background: url('/_img/coursefinder/US-banner-degrees.png') center right no-repeat; }
}

@media screen and (min-width: 1200px) {
    a.btnFullPage { font-size: 2.5em; }
}

@media screen and (min-width: 1300px) {
    a.btnFullPage { font-size: 2.8em; }
    a.btnFullPage > span { margin: 0 auto; }
}


/* == Set the centre infographic columns to full width up to 1024px
----------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    .colsProgInfoGraphic .col,
    .colsProgInfoGraphic .endCol { width: 100%; }
}


/* == Stretch the image to only as big as its container but don't oversize
----------------------------------------------------------------------------------------------------------------------*/
img.maxWidthFull,
img.panzoom { max-width: 100%; height: auto; }




/* == Stretch the image to only as big as its container but don't oversize
----------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1025px) {
    .menu .menuHover { left: 1%; width: 98%; }
}

@media screen and (min-width: 1350px) {
    .menu .menuHover { left: 50%; width: 1300px; margin-left: -650px; }
}


/* == 
----------------------------------------------------------------------------------------------------------------------*/
.degreesWrap .highlight { display: inline-block; padding: 0 2px; background: #b6c0c6; color: #000; }


/* == 
----------------------------------------------------------------------------------------------------------------------*/
.flex-control-thumbs { display: none; position: absolute; bottom: 30px; left: 0; width: 100%; margin: 0; text-align: center; }
.flex-control-thumbs li { display: inline-block; margin: 0 15px 0 0; list-style: none; border: solid 3px #fff; -webkit-box-shadow: 0px 0px 6px 0px #666; -moz-box-shadow: 0px 0px 6px 0px #666; box-shadow: 0px 0px 6px 0px #666; }
.flex-control-thumbs li:hover { border-color: #eee; }
.flex-control-thumbs li img { width: 60px; height: 40px; cursor: pointer; }

@media screen and (min-width: 1200px) {
    .flex-control-thumbs { display: block; }
    .templatePartner .flex-control-thumbs { display: none; }
}

.flexsliderStandard .flex-viewport { transform: translateZ(1px); -moz-transform: translateZ(1px); -webkit-transform: translateZ(1px); }


/* == 
----------------------------------------------------------------------------------------------------------------------*/
.featureBtn { display: none; position: absolute; top: 25px; right: 120px; }

@media screen and (min-width: 1025px) {
    .featureBtn { display: block; }
}




/* == Apply Online Styling
----------------------------------------------------------------------------------------------------------------------*/
.progress { width: 100%; }
.progress ul.progressBar { float: left; width: 99.5%; padding: 0 0 0 0.5%; margin: 0 0 30px 0; border: solid 1px #d7d7d7; background: #fcfcfc url('/_img/progress.gif') repeat-x left bottom; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.progress ul.progressBar li { float: left; margin: 0; padding: 0 30px 0 10px; height: 48px; line-height: 48px !important; list-style: none; background: url('/_img/progress-arrow.gif') no-repeat right top; color: #46596a; }
.progress ul.progressBar li a { color: #46596a; }
.progress ul.progressBar li.on a { font-weight: bold; color: #d17c28; }
    
.infoBar { float: left; width: 100%; margin: 20px 0; background: #edf3f8; border: solid 1px #d6dbe2; vertical-align: middle; }
.infoBar div { float: left; width: 15%; padding: 10px 2%; border-left: solid 1px #d6dbe2; }
.infoBar div:first-child { border-width: 0; }
.infoBar .call { width: 34.5%; }
.infoBar .email { width: 38%; }
.infoBar h2,
.infoBar p { margin: 0; }
.infoBar h2 { font-size: 1.7em; }
.infoBar p { font-size: 90%; }
.infoBar p span { display: block; font-size: 120%; font-weight: bold; }
    
    

/* = Apply Online
----------------------------------------------------------------------------------------------------------------- */
.applyOnline { float: left; width: 100%; margin: 0 0 30px; }
    
.applyOnline .progress ul.progressBar li { width: 23%; padding: 0 1%; }
.applyOnline .progress ul.progressBar li.end { width: 23%; padding: 0 1%; background-image: none; }
    
.applyOnline .box { margin: 0 0 30px; border: solid 1px #cdd2d9; background: #edf3f8; }
.applyOnline .box > h3 { padding: 15px 25px; margin: 0; background: #4b5c66; color: #fff; font-size: 1.4em; }
.applyOnline .box > h3 span { font-size: 80%; }
.applyOnline .box .boxContent { margin: 25px 30px 30px; }
.applyOnline .box .boxContent hr { border-top-width: 2px; margin: 25px 0; }
.applyOnline .box .btnRow { margin: 15px 0; }
.applyOnline .box .buttons { float: left; width: 100%; margin: 10px 0; }
.applyOnline .box .buttons .btn { clear: both; margin: 20px 0; padding-bottom: 15px; padding-top: 15px; width: 24%; text-align: left; }
.applyOnline .box .buttons .btnNext { float: right; text-align: right; }
.applyOnline .stepTerms .box .buttons .btnNext { background: #22b473; }
.applyOnline .stepTerms .box .buttons .btnNext:hover { background: #19a356; }

    
.applyOnline .centreSelect .col select { width: 95%; }         
        
.applyOnline .box { zoom: 1; }
.applyOnline .box:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; overflow: hidden; }
.applyOnline .box .row { clear: both; }
.applyOnline .box label { clear: both; width: 25%; margin: 0 15px 10px 0; text-align: right; }
.applyOnline .box select,
.applyOnline .box textarea,
.applyOnline .box .text { width: 40%; margin-bottom: 15px; }
.applyOnline .box .info { display: inline-block; width: 40%; margin: 10px 0 15px; }
.applyOnline .box .rad { float: left; width: 60%; margin: 5px 0 0; }
.applyOnline .box .rad label { float: none; display:inline-block; width: auto; }
.applyOnline .box label em { color: #777; line-height: 1.3em; }
.applyOnline .box table { border: 1px solid #d6dbe2; } 
.applyOnline .box table tr td label { width: 35%; margin-bottom: 0; }
.applyOnline .box table tr td input[type="file"] { margin: 7px 0 0 10px }
.applyOnline .box .row .extra em { display: inline-block; margin: 0 0 5px; }

.applyOnline .box .inputError { border: solid 2px red; }
.applyOnline .box .inputError.radWrap { padding:5px 5px 0; margin: 0 0 20px; width:auto; display:inline-block }

.applyOnline .stepThanks .socialLink { display: inline-block; margin-right: 20px; }
.applyOnline .stepThanks .socialLink img { margin: 0 5px; vertical-align: -15px; }
.applyOnline .stepThanks .socialLink:first-child img { margin-left: 0; }


.ui-datepicker { font-size: 90%; }
.ui-datepicker-title select { font-size: 90%; padding: 3px; }


/* = Debug pane
----------------------------------------------------------------------------------------------------------------- */
.debugPane { position: fixed; top: -2px; right: -2px; width: 250px; padding: 20px; background: #fff; line-height: 1.4em; font-size: 90%; border: 10px solid #87b831; z-index: 9999; }
.debugPane div { width: 100%; display:inline-block; margin: 5px 0; padding-bottom: 5px; border-bottom: solid 1px #eee; }
.debugPane strong { display: inline-block; width: 90px; font-weight: bold; }