/* .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 { 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;} /* 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; } #skipnav a.screenreader:focus, #skipnav a.screenreader:active { background-color: #000000; 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:#e8e8e8;} .bkgnd-dark-grey, .bkgndDarkGrey {background:#393a3c} .bkgnd-green { background:#669966; } .purple-text {color:#000000!important} .white-text {color:white!important} .black-text {color:black!important} .green-text { color:#669963!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:20px 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;} .content {padding:0; overflow:hidden;} .leftMenuContainer {display:none; float:left; width:22%; 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 input[type="button"] {float:left; margin:0; padding:10px 15px 10px 30px; border:0; border-radius:4px; color:white; background:#000000 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, .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 label { margin: 4px 15px 4px 0; display: inline-block; font-weight: 400; } .searchFilterWrapper2 input[type="radio"] { margin: 0 5px 0 0; background: 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:0px;} /* 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.homeItem {padding-right: 20px;} .primaryNav ul.megaMenu li.menuItem a.home {display: block;width:27px; padding:10px 0 0 0; height:40px; overflow:hidden;background:url(../images/design/icon-home.png) 50% 62% no-repeat; text-indent:-999px} .primaryNav ul.megaMenu li.menuItem a.home:hover {background-image:url(../images/design/icon-home.png);} .megaContent {position:absolute; top:-9999px; left:0; width:100%; background:#f0f0f0; color:white; 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 .no-touch .primaryNav ul.megaMenu li.menuItem:hover a.megaLink {position:relative; color: #000; background:#f0f0f0; z-index:999999} .no-js .no-touch .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 .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 .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:#6a2c91; font-size: 0.9375em; font-weight: 600; line-height:1; padding-bottom: 0; margin-bottom: 20px; } .megaSubPanel p a {color:#6a2c91; 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} .breadcrumbNav li a:hover, .breadcrumbNav li.active a {} /* NAV - LEFT */ .primaryLeftNav {margin:0 0 10px;} /* UL */ .primaryLeftNav li {margin:0; font-size:1.538462em;} .primaryLeftNav li a:hover {text-decoration: underline;} .primaryLeftNav li a, .primaryLeftNav li span {display:block; padding:15px 0 15px 0; border-left:5px solid white; text-decoration:none; color:#343536;} .primaryLeftNav li span, .primaryLeftNav li a.currentsection {padding-left: 10px; font-weight: 600; color: #000000; border-left: 5px solid #000000; } .primaryLeftNav li.activeMenuLink a {border-left:5px solid #000000; color:#000000; font-weight:600} /* 1st level */ .primaryLeftNav ul {} .primaryLeftNav ul li {border-top:1px solid #ddd} .primaryLeftNav ul li.currentmainbranch { border-left: 1px solid #ccc; } .primaryLeftNav ul li.currentmainbranch > a {color:#000000; } .primaryLeftNav ul li a {padding-left:10px; font-weight:400} /* 2nd Level */ .primaryLeftNav ul ul {display:block; border-left:0px solid #ccc; border-top:0px solid #ccc;} .primaryLeftNav li li {font-size:0.8em; border-top:0} .primaryLeftNav ul ul li a, .primaryLeftNav ul ul li a, .primaryLeftNav ul ul li span {padding-left:25px;} /* 3rd Level */ .primaryLeftNav ul ul ul {border:0} .primaryLeftNav li li li {font-size:0.9375em;} .primaryLeftNav ul ul ul li a, .primaryLeftNav ul ul ul li a, .primaryLeftNav ul ul ul li span {padding-left:40px;} /* 4th Level */ .primaryLeftNav ul ul ul ul {} /* .primaryLeftNav li li li li {font-size:0.933333em}*/ .primaryLeftNav li li li li {font-size:1em} .primaryLeftNav ul ul ul ul li a, .primaryLeftNav ul ul ul ul li a, .primaryLeftNav ul ul ul ul li span {padding-left:55px} /* 5th Level */ .primaryLeftNav ul ul ul ul ul {} .primaryLeftNav li li li li li {font-size:1em} .primaryLeftNav ul ul ul ul ul li a, .primaryLeftNav ul ul ul ul ul li a, .primaryLeftNav ul ul ul ul ul li span {padding-left:70px} /* 6th Level */ .primaryLeftNav ul ul ul ul ul ul {} .primaryLeftNav li li li li li li {font-size:1em} .primaryLeftNav ul ul ul ul ul ul li a, .primaryLeftNav ul ul ul ul ul ul li a, .primaryLeftNav ul ul ul ul ul ul li span {padding-left:85px} /* 7th Level */ .primaryLeftNav ul ul ul ul ul ul ul {} .primaryLeftNav ul ul ul ul ul ul ul li a, .primaryLeftNav ul ul ul ul ul ul ul li a, .primaryLeftNav ul ul ul ul ul ul ul li span {padding-left:100px} /* 8th Level */ .primaryLeftNav ul ul ul ul ul ul ul ul {} .primaryLeftNav ul ul ul ul ul ul ul ul li a, .primaryLeftNav ul ul ul ul ul ul ul ul li a, .primaryLeftNav ul ul ul ul ul ul ul ul li span {padding-left:115px} /*------------------------------------------------------------------------------------------------------------*/ /* 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 0 0 0; width:auto!important;} /* 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: #808184;*/ 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; width:100%; -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 li, .squareBullets li {margin:0; padding-left: 24px; list-style:none; background:url('../images/design/icon-purple-square.gif') 0 10px no-repeat; /*font-size:1.2em; line-height:2em*/} .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:400; 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: #525355; } 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: #525355; } /* Table */ table {display:block; margin:0 0 30px; overflow:auto; color: #343536;} table tr {border: 0px solid #ccc;} table 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 { 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:600; font-size:3.230769em; line-height:1.1; margin:0; padding:0 0 0.5em; color:#000000; } .inPageH1 {font-weight:600; 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 {font-weight:300;} /* General Rules */ li {font-size:1.230769em; line-height:1.5; color:#000; font-weight:400; /*color: #808184;*/ color: #343536; } li li {font-size:1em; } p {font-size:1.230769em; line-height:1.5; padding:0 0 1em; /*color: #808184;*/ 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:#000000} p.navTitle a {display:block; color:#000000; 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:#000000; font-weight:400; text-decoration:underline;} .mainContentContainer a:visited {color:#669963;} .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, .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:#000000; padding:0 20px 0 0; background:url(../images/design/icon-moreArrow-right-green.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:#ffffff; 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;} .moreBlack {color:#000000; padding:0 20px 0 0; background:url(../images/design/icon-moreArrow-right-black.png) 100% 50% no-repeat} .moreBlack a {text-decoration:none!important; color: #fff; } .moreBlack a:hover {text-decoration:underline!important;} a:hover .moreBlack {text-decoration:underline;} .moreGreen {color:#669963; padding:0 20px 0 0; background:url(../images/design/icon-moreArrow-right-green.png) 100% 50% no-repeat} .moreGreen a {text-decoration:none!important; color: #fff; } .moreGreen a:hover {text-decoration:underline!important;} a:hover .moreGreen {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: 69px; 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:600; line-height:0.9; padding:0 0 20px 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: #000000; } .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; box-sizing: border-box; -moz-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: #000000; 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: #000000; } .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: #000000; } .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; } 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 #c00; background-color: #fcc; } 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; } /* 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;} .twocol, .threecol, .fourcol, .fourcolRigid, .fivecol, .sixcol, .eightcol {margin-right:3.8%; float:left; overflow:hidden; position:relative;margin-bottom:20px;} .threecol.floatRight, .fourcol.floatRight, .fourcolRigid.floatRight, .fivecol.floatRight, .sixcol.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%;} .sixcol {width:100%;} .eightcol {width:100%;} .twelvecol {width:100%!important; float:left; position:relative;} .fivecol.newsImage {min-width: 200px;} .twocol.biogImage {float:none;width:100px;} .lastAtMobile {margin-right:0px;} .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;} 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;} figure {display:block; position:relative;} /* figure img.lazy {display:block; width:100%; margin:0; padding:0}*/ figure img { width:100%; height:auto; margin:0; padding:0;} figure img.content { margin: 0 0 -5px 0; } figcaption {position:absolute; z-index:1000; z-index:2000} .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:#9fa617;} /* 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:#000000} .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;} /* 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:500px; 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-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 */ #wrapper {width:90%; margin:0 auto;max-height:400px;} #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;} #prev, #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:#000000} /* Course Finder */ .courseFinder {width:100%; background:#000000} .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; /*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} /* 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} /*
EPSRC Knowledge Transfer funded workwith Eagle Genomics built the capacity to support industrial research and development activities. The partnership was a springboard for building a lasting collaboration between the University and Business. Professor Carole Goble / School of Computer Science, The University of Manchester
*/ .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: #000000; font-size: 1.230769em; line-height: 1.5; } .pullQuote blockquote p { text-transform: none; color: #000000; 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.sixcol img { display: block; margin: 0 auto 20px; } /* Grid/list page */ .gridList 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;float:left; 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:57px; height:57px; background:url(../images/design/icon-play-button.gif) 0 0 no-repeat;} /*------------------------------------------------------------------------------------------------------------*/ /* Forms */ /*------------------------------------------------------------------------------------------------------------*/ fieldset {margin:0 0 20px; padding:0; border: 0px solid #ccc; } .lt-ie8 fieldset {width:95%;} legend { padding: 0; margin: 0 0 20px 0; font-size: 1.538462em; color: #343536; } .fieldsetInnerContainer {margin:0; padding:0} .formRowContainer {margin:0 0 20px; padding:0px; width:100%; font-size:1.230769em; color: #343536; } /* Helper classes */ .extraRow {margin:5px 0 0 0} /* multi line address input */ .counterContainer {margin:0px 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 {/*background:#fffdd4;*/ 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, select:focus { border: 1px solid #000000; } 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; } .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: #000000; 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: #669963; } 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} .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:20px; 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:5px 0 0; padding:6px 5px 5px 30px; } .messageContainer p {margin:0; padding:0; font-size:1em} .errorContainer {border:1px solid #df8f90; background:#ffd2d3 url(formImages/cross.png) 5px 8px no-repeat} .helpContainer {border:1px solid #9fc7f5; background:#dbecff url(formImages/help.png) 5px 8px no-repeat} /* 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;} .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; } 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; } .youtube-container { position: relative; margin-bottom: 2em; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .youtube-container iframe { position: absolute; top: 0; left: 0; border: none; width: 100%; height: 100%; } /*------------------------------------------------------------------------------------------------------------*/ /* 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;} .search-options {top:80px;} .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-pagination {display:table; border-collapse:separate; border-spacing:10px; width:100%; 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:#000000} .masthead-pagination td a, .masthead-pagination td a:visited {color:#000000;} .masthead-pagination td.active a {color:white} .masthead-pagination td:hover {/*background:#000000*/} .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;} /* 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; } #wrapper.explore { height:320px; } .explore .slide {margin:0 5px 0 5px!important;} /*News Carousel*/ #wrapper {position: relative; width: 100%; overflow: hidden;background:none;max-height:400px;} #wrapper.explore {margin-bottom:20px;} .no-js #wrapper {width:90%; max-width:1140px; height:auto; margin:0 auto} #carousel .slide {display:block; position:relative; float: left;} .explore .slide {margin:0 0 20px 0;} .no-js #carousel .slide {width:48%; margin:0 4% 20px 0} .no-js #carousel .slide:nth-child(2n) {margin-right:0} #carousel .slide span, #carousel .slide figure {display:block; margin:0 auto;} #carousel .slide span { width:90%; } #carousel .slide figure { width:100%; } .no-js #carousel .slide span, .no-js #carousel .slide figure {width:100%;} #carousel .slide .carouselContent {margin:0 auto; width:90%;} .no-js #carousel .slide .carouselContent {width:100%;} #prev, #next {display: block; position: absolute; top: 1; width: 10%; height: 100%; z-index:3001; background-color: rgba(255,255,255,0.7); background-color: rgba(255,255,255,0.6); } .no-js #prev, .no-js #next {display:none;} #prev:hover, #next:hover { background-color: rgba(255,255,255,0.95); } #prev {left: 0; background-image:url(../images/design/icon-carousel-left.png); background-position: 50% 20%; background-repeat:no-repeat} #next {right: 0; background-image:url(../images/design/icon-carousel-right.png); background-position: 50% 20%; background-repeat:no-repeat} .explore#prev, .explore#next { top: 0; width: 10%; height: 100%; z-index:3001; background-color:none!important;} .explore#prev {background-position: 50% 50%;} .explore#next {background-position: 50% 50%;} .ie7 #prev, .ie8 #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 #next, .ie8 #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);} } @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; } .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%} .exploreManchester .description {display:none;} /* Masthead Carousel */ .masthead-pagination td a { padding: 10px; } /* 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;} /* 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 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 */ } /* ============================ <-----------------------------------------------------------> For Media Queries, please see whitworth.css <-----------------------------------------------------------> ============================ */ #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;} }