/*------------------------------------------------------------------------------------------------------------*/ /* 1. RESET & BOILER PLATE */ /*------------------------------------------------------------------------------------------------------------*/ /* RESET EVERYTHING */ 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;} /*------------------------------------------------------------------------------------------------------------*/ /* 1.1 New Defaults */ /*------------------------------------------------------------------------------------------------------------*/ html {} body {background:white; font:0.75em "Trebuchet MS", "Arial", "Helvetica", sans-serif;} /* ALL font sizes are a % of this */ 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;} /* Links */ a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none} a:hover {text-decoration:underline} a:link {-webkit-tap-highlight-color:#FF5E99;} /* Form */ legend {margin-left:1em} input, select {vertical-align:middle;} input[type=text]:focus {outline:none; border:1px solid #ED008C} .selectFocus {border:1px solid #ED008C!important; border-radius: 7px;} input, select, textarea, button {margin:0; font:100% sans-serif;} input:invalid, textarea:invalid {border-radius:1px; [-moz- | -webkit-]box-shadow:0px 0px 2px red; box-shadow:0px 0px 2px red;} textarea {overflow:auto;} button {width:auto; overflow:visible;} input[type=submit], button {cursor:pointer;} ::-webkit-input-placeholder {color:#666;} input:-moz-placeholder {color:#666;} /* Lists */ ul, ol {margin-left:1.8em; color: #555} ol {list-style-type:decimal;} nav ul, nav li {margin:0;} nav ul, nav ol {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;} /* D= >:) =pwned */ .ie7 .radioLabel, .ie7 .checkBoxLabel, .ie8 .radioLabel, .ie8 .checkBoxLabel, .ie9 .radioLabel, .ie9 .checkBoxLabel {vertical-align:top} .ie7 img {-ms-interpolation-mode:bicubic;} /* @font-face {font-family: 'Liberation'; src: url('/fonts/LiberationSerif-Regular.eot?#iefix') format('embedded-opentype'), url('/fonts/LiberationSerif-Regular.ttf') format('truetype'), url('/fonts/liberationserifregular.svg') format('svg');} */ /*------------------------------------------------------------------------------------------------------------*/ /* 2. SITE WIDE GENERIC */ /*------------------------------------------------------------------------------------------------------------*/ /* Floats */ .imgFloatLeft {float:left; margin:0 10px 10px 0} .imgFloatRight {float:right; margin:0 0 10px 10px} .floatLeft {float:left!important} .floatRight {float:right!important} aside.floatLeft {float:left; margin:0 10px 10px 0} aside.floatRight {float:right; margin:0 0 10px 10px} /* Float collapse fix */ .clearBoth {clear:both} .clearFix:after {content:"\0020"; display:block; height:0; clear:both; visibility:hidden; overflow:hidden;} /*.clearFix {display:block; *zoom: 1;}*/ .overflowHidden {overflow:hidden} /* Alignment */ .textLeft {text-align:left!important} .textRight {text-align:right!important} .center {text-align:center!important} /* Positioning */ .absBotRight {position:absolute; bottom:0; right:0;} /* Split the page */ .leftHalfContainer {float:left; width:49%;} .rightHalfContainer {float:right; width:49%;} .leftThirdContainer {float:left; width:32%;} .middleThirdContainer {float:left; width:32%; margin:0 1.5%;} .twoThirdsContainer {float:left; width:64%; margin:0 3% 0 0;} .rightThirdContainer {float:left; width:32%;} /* Info Container - Left */ .infoContainerLeft {overflow:hidden;} .infoContainerLeft img {float:left;} /* Info Container - Right */ .infoContainerRight {overflow:hidden;} .infoContainerRight img {float:right;} /* Info details no image */ .noImage {margin:0!important} .offScreen {position:absolute; top:-9999px; left:-9999px} .hidden {display:none} .marginTop {margin-top:40px;} .shortdate {color:#666} .fullDate {color:#666; /*font-style:italic*/} .imgTop {vertical-align:top} /* overrides default baseline alignment */ .inputNormalSize {margin:0 10px 0 0; padding:3px} .inputOversized {margin:0 10px 0 0; padding:5px; font-weight:bold; height:30px;} .noBorder {border:0!important} .headlineSize {font-size:150%; margin:20px 0} .redBorder {border:1px solid red} /*------------------------------------------------------------------------------------------------------------*/ /* 2.1 Colours */ /*------------------------------------------------------------------------------------------------------------*/ .whiteText {color:white} .avocadoBkgnd {background:#c5d456!important} .avocadoBkgndTint {background:#e2e9aa!important} .avocadoTopBorder {border-top:6px solid #c5d456!important} .avocadoBottomBorder {border-bottom:6px solid #c5d456!important} .blueBkgnd {background:#98e2fc!important} .blueBkgndTint {background:#daf5fe!important} .blueTopBorder {border-top:6px solid #98e2fc!important} .blueBottomBorder {border-bottom:6px solid #98e2fc!important} .orangeBkgnd {background:#ff9316!important} .orangeBkgndTint {background:#ffdab1!important} .orangeTopBorder {border-top:6px solid #ff9316!important} .orangeBottomBorder {border-bottom:6px solid #ff9316!important} .pinkBkgnd {background:#ed008c!important} .pinkBkgndTint {background:#ffeaf6!important} .pinkTopBorder {border-top:6px solid #ed008c!important} .pinkBottomBorder {border-bottom:6px solid #ed008c!important} .purpleBkgnd {background:#c07fff!important} .purpleBkgndTint {background:#e5cbff!important} .purpleTopBorder {border-top:6px solid #c07fff!important} .purpleBottomBorder {border-bottom:6px solid #c07fff!important} .redBkgnd {background:red!important} /*------------------------------------------------------------------------------------------------------------*/ /* 2.2 Rounded Boxes */ /*------------------------------------------------------------------------------------------------------------*/ .buttonContainer {overflow:hidden; margin:0 0 20px} .buttonContainer .roundedButton {margin:0 10px 0 0} .blueButton {background:#00adef;} .blueButton:hover {background:#008abf;} .blueButton.inactive {background:#888;} .blueButton.inactive:hover {background:#888;} .roundedInput {width:96%; margin:0 0 10px; padding:0 0 0 5px; [-moz- | -webkit-]border-radius:5px; border-radius:5px;} /*overrides*/ .formRowContainer .roundedInput {margin:0;} .ie7 .roundedInput {padding:3px 0 0px 5px} .ie8 .roundedInput {padding:3px 0 0px 5px;} .roundedButton {padding:0px 10px; /*height:23px;*/ border:0; color:white; font-weight:bold; [-moz- | -webkit-]border-radius:5px; border-radius:5px; position: relative;} .ie7 .roundedButton {padding:0 5px; height:23px;} .ie8 .roundedButton {height:22px; position:relative;} .roundedCorners {[-moz- | -webkit-]border-radius:5px; border-radius:5px; } .roundedTop {[-moz- | -webkit-]border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; } .roundedBottom {[-moz- | -webkit-]border-radius:0 0 5px 5px; border-radius:0 0 5px 5px; } /*------------------------------------------------------------------------------------------------------------*/ /* 3. STRUCTURE */ /*------------------------------------------------------------------------------------------------------------*/ body {} #pageContainer {position:relative; margin:0 auto; min-width:960px} form {} .localisationBar {position:fixed; top:-200px; left:0; width:100%; padding:10px; background:black; background:rgba(0,0,0,0.8); z-index:999999} .localisationBar p {margin:10px 0; padding:0 100px 0 0; color:white; float:left;} .localisationBar .roundedButton {position:absolute; bottom:15px; right:30px} #headerContainer {position:relative; z-index:2000;} #headerContent {width:960px; margin:0 auto; padding:10px 0 20px; position:relative;} #logoContainer {float:left; margin:0; padding:0;} #logoContainer a {display:block; padding:0; color:#e2007a; text-transform:title; text-align:center; font-weight:bold; text-decoration:none;} #logoContainer a img {display:block; margin:0 0 7px; padding:0;} #logoContainer a span {position:absolute; left:-100%} #contentContainer {position:relative; z-index:500; width:100%; overflow:hidden; margin:20px 0 0;} /* DIV */ #content {width:960px; margin:0 auto;} /* ASIDE */ #leftMenuContainer {float:left; width:160px; margin-right:10px;} /* HOME / LANDING PAGES */ #topRow {clear:both; margin:0; overflow:hidden} #bottomRow {clear:both; margin:0} #leftHalfContainer {float:left; margin:0 20px 0 0; padding:0; width:370px;} #rightHalfContainer {float:right; margin:0; padding:0; width:370px;} #leftThirdContainer {float:left; margin:0 20px 0 0; padding:0; width:240px;} #middleThirdContainer {float:left; margin:0 20px 0 0; padding:0; width:240px;} #rightThirdContainer {float:right; margin:0; padding:0; width:240px;} /* INTERNAL PAGES */ #noColLayoutContainer {position:relative; width:960px;} #noColLayoutContainer #mainContentContainer, #noColLayoutContainer .mainContentContainer {position:relative;} #oneColLayoutContainer {position:relative; margin-left:200px; width:760px;} #oneColLayoutContainer #mainContentContainer, #oneColLayoutContainer .mainContentContainer {position:relative;} #twoColLayoutContainer {position:relative; margin-left:200px; width:760px;} #twoColLayoutContainer #mainContentContainer, #twoColLayoutContainer .mainContentContainer {position:relative; float:left; width:520px;} #twoColLayoutContainer #rightColContainer {position:relative; float:right; width:220px;} #footerContainer {padding:150px 0 0; background:#e6e6e6 url(../images/design/footer-bkgnd.png) 50% 0 repeat-x} #footerContent {overflow:hidden; width:960px; margin:0 auto;} /*------------------------------------------------------------------------------------------------------------*/ /* 4. NAVIGATION */ /*------------------------------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------*/ /* headerToolsNav = toolsNav+regionNav, visually 1 design for desktop resolutions */ /*--------------------------------------------------------------------------------*/ /* NAV */ #headerToolsNav {float:right; margin:0; padding:0; overflow:hidden;} /* Mobile menu replacement*/ #uniform-regions-Select {display:none} #regions-Select {display:none} /* Region Options*/ ul#regionNav {float:left; margin:0; padding:0; overflow:hidden;} ul#regionNav li {float:left; margin:0; list-style:none; padding:0; background:url('/images/design/topMenuMiddle.png') 0 100% repeat-x;} ul#regionNav li.first {background:url('/images/design/topMenuLeft.png') 0 100% no-repeat;} ul#regionNav li.last {padding:0 10px} ul#regionNav li a {display:block; margin:0 0 8px; padding:4px 12px; color:#e2007a; font-weight:bold; border-left:1px dotted #ddd;} ul#regionNav li.active a {color:#00ADEF} ul#regionNav li.first a {border-left:0} ul#regionNav li.last a {border-left:1px dashed #00adef; border-right:1px dashed #00adef} /* Accessibility Tools*/ ul#toolsNav {float:left; margin:0; padding:0; overflow:hidden;} ul#toolsNav li {float:left; margin:0; list-style:none; padding:0; background:url('/images/design/topMenuMiddle.png') 0 100% repeat-x;} ul#toolsNav li.last {padding:0 0 0 20px; background:url('/images/design/topMenuRight.png') 100% 100% repeat-x;} ul#toolsNav li a {display:block; margin:0; padding:4px 15px 12px; color:#e2007a; font-weight:bold;} ul#toolsNav li a.blueButton {float:none; color:white; height:auto; margin:2px 0 7px; padding:3px 6px 4px; position:relative; text-decoration:none; text-align:center} ul#toolsNav li #accessibility-colours p a {text-indent: 0; width: auto; height: auto; border: none; margin-top: 0px !important; } #accessibility-colours {margin: 0px; overflow:hidden;} #accessibility-colours p {float:left; margin:0; padding:4px 15px 12px; font-weight:bold; color:black;} ul#toolsNav li #accessibility-colours a {border: 1px solid #BBB; float:left; display:block; margin:0; padding:0!important; width:14px; margin-top: 4px; margin-right: 4px; height:14px; text-indent:100%; white-space:nowrap; overflow:hidden;} ul#toolsNav li #accessibility-colours #accessibility-siteDefault {background:url(/images/design/icon-accessibility-siteDefault.gif) 0 0px no-repeat;} ul#toolsNav li #accessibility-colours #accessibility-blackWhite {background:url(/images/design/icon-accessibility-blackWhite.gif) 0 0px no-repeat} ul#toolsNav li #accessibility-colours #accessibility-blackYellow {background:url(/images/design/icon-accessibility-blackYellow.gif) 0 0px no-repeat} ul#toolsNav li #accessibility-colours #accessibility-blackPink {background:url(/images/design/icon-accessibility-blackPink.gif) 0 0px no-repeat} ul#toolsNav li #accessibility-colours #accessibility-blueWhite {background:url(/images/design/icon-accessibility-blueWhite.gif) 0 0px no-repeat} /* accessibility colours -active states */ .siteDefault #accessibility-siteDefault, .blackText-whiteBackground #accessibility-blackWhite, .blackText-yellowBackground #accessibility-blackYellow, .blackText-pinkBackground #accessibility-blackPink, .blueText-whiteBackground #accessibility-blueWhite { border: 1px solid #000 !important;} /* hide colour changer if js is disabled */ html.no-js ul#toolsNav { display: none; } /* NAV */ #primaryNav {margin:90px 0 0 160px;position:relative;} #primaryLeftNav ul ul {margin:0 0 0 18px} /* Mobile menu replacement*/ #uniform-megaMenu-Select {display:none} #megaMenu-Select {display:none} /* UL */ #primaryNav ul#megaMenu {margin:0; padding:0; z-index:10000;} /* LI */ #primaryNav li.menuItem {float:left; margin:0; padding:0; list-style:none; border-right:1px solid #CCCCCC;} #primaryNav li.last {border:0;} /* LI > A */ #primaryNav li.menuItem a.megaLink {display:block; padding:5px 15px; font-size:140%; font-weight:bold; text-decoration:none; z-index:10001; color:#315468;} #primaryNav li.menuItem a:hover {color:#ed008c; text-decoration:underline} /* LI > DIV */ #primaryNav li.menuItem div.megaContent {display:none; position:absolute; top:32px; z-index:10002;} .ie7 #primaryNav li.menuItem div.megaContent, .ie8 #primaryNav li.menuItem div.megaContent, .ie9 #primaryNav li.menuItem div.megaContent {top:28px;} /* LI Hover > A */ #primaryNav li.menuItem.hoverOn a.megaLink, #primaryNav li.menuItem:focus a.megaLink {position:relative; padding:4px 14px; z-index:10003; background:white; border:1px solid #ccc; border-bottom:1px solid white;} #primaryNav li.menuItem a.active {color:#ed008c} /* DIVs */ #about-megaMenu {left:-20px;} #funding-megaMenu {left:0px;} #community-megaMenu {left:0px;} #research-megaMenu {left:0px;} #news-megaMenu {left:0px;} #community-megaMenu {left:0px;} /* NAV */ #breadcrumbNav {margin:0 0 20px;} /* UL */ #breadcrumbNav ul, #breadcrumbNav ol {margin:0; padding:0; overflow:hidden;} #breadcrumbNav li {float:left; padding:0 8px 0 0;} #breadcrumbNav li a {display:block; padding:0 13px 0 0; color:#e2007a; background:url(/images/design/icon-rightArrow-grey.png) 100% 50% no-repeat} #breadcrumbNav li a:hover, #breadcrumbNav li.active a {background:#ddd; color:black} /* NAV */ #primaryLeftNav {margin:0 0 10px; padding:0 0 15px; border-bottom:2px dotted #00adef;} /* Mobile menu replacement*/ #uniform-leftMenu-Select {display:none} #leftMenu-Select {display:none} /* UL */ #primaryLeftNav ul {margin:0; padding:0; overflow:hidden;} /* LI */ #primaryLeftNav li {margin:0; padding:0; list-style:none;} #primaryLeftNav li a {font-size:120%; display:block; padding:5px 0 5px 20px; background:url(/images/design/icon-menu-bullet-off.gif) 0 8px no-repeat; zoom:1} #primaryLeftNav li a:hover {color:#e2007a; text-decoration:none;} #primaryLeftNav li.active a {color:black; text-decoration:none; background:url(/images/design/icon-menu-bullet-on.gif) 0 8px no-repeat;} /* NAV */ .secondaryLeftNav {margin:0 0 10px; padding:0 0 15px;} /* UL */ .secondaryLeftNav ul {margin:0; padding:0; overflow:hidden;} .secondaryLeftNav li {margin:0; padding:0; list-style:none; } .secondaryLeftNav li a {display:block; padding:5px 0 5px 20px; color:#e2007a; background:url(/images/design/icon-rightArrow-pink.png) 0 7px no-repeat;} .ie7 .secondaryLeftNav li a {zoom:1} .secondaryLeftNav li.active a {color:#e2007a; text-decoration:none;} /* NAV */ #footerNav {margin:10px 0 0 50px; float:left;} /* UL */ #footerNav ul {margin:0; padding:0; overflow:hidden;} #footerNav li {float:left; margin:0 0 10px; padding:0; list-style:none; border-right:1px solid #bbbbbb;} #footerNav li.last {border:0} #footerNav li a {display:block; padding:0px 10px; color:#e2007a; font-weight:bold} /*------------------------------------------------------------------------------------------------------------*/ /* 5. CONTENT */ /*------------------------------------------------------------------------------------------------------------*/ /* GENERAL RULES */ h1, .styleAsH1 {margin:0 0 5px; padding:0; font-size:230%; color:#222222; font-weight:normal;} h2, .standfirst {margin:0 0 10px; font-size:150%; color:#222222; font-weight:normal;} h3 {margin:0 0 10px; font-size:140%; color:#222222; font-weight:normal;} #mainContentContainer h2, #mainContentContainer h3, #mainContentContainer h4, #mainContentContainer h5, #mainContentContainer h6 { color:#E2007A; } .mainContentContainer h2, .mainContentContainer h3, .mainContentContainer h4, .mainContentContainer h5, .mainContentContainer h6 { color:#E2007A; } #mainContent h2 {color:#ED008C} address {margin-bottom:1em} p {color:#555; margin:0 0 10px} p.title, h3.title {font-size:120%} /* errors */ .errorSummary {display:block; margin:0 0 20px} .errorTitle {background:red; margin:0 0 10px; padding:6px} .errorTitle p {margin:0; color:white!important; font-weight:bold} .errorSummaryList {margin:0; padding:0 0 0 30px; color:red} p.errorText {color:red} .showErrors {display:block} .hideErrors {display:none} /* end errors */ a {color:#0075AC; text-decoration:none; font-family:"Trebuchet MS", Arial!important} a:hover {text-decoration:underline;} a img {vertical-align:middle} a.iconCamera {display:block; padding:0 0 0 25px; background:url(/images/design/icon-camera.gif) 0 0 no-repeat} a.iconPlay {display:block; padding:0 0 0 25px; background:url(/images/design/icon-play.gif) 0 0 no-repeat} a.iconSpeaker {display:block; padding:0 0 0 25px; background:url(/images/design/icon-speaker.gif) 0 0 no-repeat} a.icon-showContent {padding:0 0 0 15px; background:url(/images/design/icon-cross-pink.gif) 0 45% no-repeat} a.icon-hideContent {padding:0 0 0 15px; background:url(/images/design/icon-minus-pink.gif) 0 45% no-repeat} a.morePink {color:#e2007a; display:block; background:url(/images/design/icon-rightArrow-pink.png) no-repeat;} a.moreWhite {color:white; display:block; background:url(/images/design/icon-rightArrow-white.png) no-repeat;} a.moreLinkPinkArrow {display:block; padding:3px 0 5px 15px; font-size:130%; background:url('/images/design/link-arrow-right-pink.png') 0 8px no-repeat;} a.moreLinkPinkArrow img {display: inline; border:none !important;} a.moreLinkPinkArrow:hover img {display: inline !important; border:none !important;} a.moreButtonPinkArrow {display:block; padding:5px 0 5px 25px; font-size:120%; background:url('/images/design/button-arrow-right-pink.png') 0 4px no-repeat;} a.roundedButton, .ie7 a.roundedButton {display:block; margin:0; padding:5px 10px 7px; cursor:pointer; color:white} input.roundedButton, .ie7 input.roundedButton {margin:0; height: 23px; /*padding:5px 10px 7px;*/ cursor:pointer; color:white} .claimBox input.roundedButton { } .claimBox input.roundedButton, .ie7 .claimBox input.roundedButton {margin: 0 0 7px 9px !important;} /* input.roundedButton, .ie7 input.roundedButton {display:block; margin:0; height: 23px; cursor:pointer; color:white} */ a.roundedButton:hover {text-decoration:none;} ul.rightPinkArrow {margin:0 0 10px; padding:0;} ul.rightPinkArrow li {margin:0; padding:0; list-style:none;} ul.rightPinkArrow li a {display:block; padding:5px 0 5px 25px; color:#325f74; background:url('/images/design/button-arrow-right-pink.png') 0 4px no-repeat;} .mandatory {vertical-align:top; margin:3px 0 0} .mandatoryNotice {position:absolute; top:10px; right:50px} .verification {display:none;} .responsiveImageContainer img {width:100%; height:auto;} .videoContainerSpotLightThird {overflow:hidden;} .responsiveVideoContainer {float:left; position:relative; width:100%; height:100%; margin:0; padding:25px 0 53%; border:1px solid #ccc} .responsiveVideoContainer iframe {position:absolute; top:0; left:0; width:100%; height:100%} /* Focus styling on uniform styled select boxes */ div.selector span.selectFocus {border:1px solid #ED008C!important} .noResponsive {width:auto!important; height:auto!important} .imageGalleryContainer {overflow:hidden;} .thirdSpotlight .thirdInner img.imageGallery {width:90px!important; height:90px!important; float:left; margin:0 8px 8px 0} .blogComments {margin:30px 0 6px; padding:3px; border:1px solid #ed008c; border-radius:3px; background:#ffeaf6} .blogComments span {margin:0 5px; padding:8px 12px; background:#ed008c; color:white; font-size:150%; font-weight:bold; border-radius:3px} /* QUOTE */ .quoteContainer {} .quote {padding:0 0 0 30px; color:#777777; font-size:160%; line-height:30px; background:url('/images/design/icon-quoteLeft.png') 0 0 no-repeat;} .quote span {display:block; padding:0 30px 0 0; background:url('/images/design/icon-quoteRight.png') 100% 100% no-repeat;} .quoteSource-name {margin:10px 0 0; font-size:120%; font-weight:bold; color:#444444} .quoteSource-title {font-style:italic} /* END QUOTE */ /* TITLE BAR */ #titleBar, .titleBar {overflow:hidden; padding:20px 0 0 0; margin:0 0 20px; border-bottom:1px dotted #00adef; position:relative;} #titleBar h1 , .titleBar h1 {max-width: 490px;} #titleBar h2 , .titleBar h2 {/* float:left; */ /* DC - i took this float out to fix issue 42074 but it may cause problems elsewhere */} #titleBar h3 , ..titleBar h3 {float:left;} #titleBar .socialMediaTitleBar, .titleBar .socialMediaTitleBar {position:absolute; top:0; right:0; /* float:right; */margin:0; overflow: hidden; /* display: none; */} /* TABLE */ table {margin:0; padding:0; width:100%} table th {padding:6px 3px} table td {padding:3px; text-align:center} /* END GENERAL RULES */ /* OFFSCREEN (Tab) ACCESSIBILITY MENU */ #accessibilityMenuContainer {position:absolute; top:-999px; left:-999px; opacity:0; padding:20px; z-index:99999; background:white; border:3px solid #e2007a} #accessibilityMenuContainer.accessMenuOn {position:fixed; top:0px; left:0px;} #accessibilityMenuContainer p.title {font-weight:bold; font-size:120%;} #accessibilityMenu {margin:10px 0 0; padding:0; overflow:hidden} #accessibilityMenu li {margin:0 10px 0 0; padding:0; list-style:none; float:left;} #accessibilityMenu li a {display:block; padding:10px 20px; background:#00adef; color:white; font-weight:bold} #accessibilityMenu li a:hover, #accessibilityMenu li a:focus, #accessibilityMenu li a:active {background:#e2007a;} /* END OFFSCREEN (Tab) ACCESSIBILITY MENU */ /* SEARCH BOX BAR*/ #searchHelpGuidesContainer {overflow:hidden; margin:0; padding:0; background:#c3e6f4;} #searchHelpGuidesInnerContainer {overflow:hidden; width:960px; margin:0 auto; padding:0;} .ie7 #searchHelpGuidesInnerContainer {padding:0 0 6px;} #searchHelpGuidesContainer ul {float:right; margin:0; padding:0;} #searchHelpGuidesContainer ul li {float:left; margin:7px 0; padding:0; list-style:none;} #searchHelpGuidesContainer ul li a {float:left; display:block; margin:3px 0 0; padding:1px 10px; font-weight:bold} #searchHelpGuidesContainer ul li.first a {border-right:1px dotted #555} #siteSearchContainer {margin:0; z-index:1; overflow:hidden;} #siteSearchContainer .formRowContainer {margin:0;} #siteSearchContainer .roundedInput {width:100px; margin:0 10px 0 0; float:left} #siteSearchContainer select {width:150px; margin:0 10px 0 0; float:left;} div#uniform-searchType {width:150px; z-index:1} #siteSearchContainer div.selector {width:150px; z-index:1} #siteSearchContainer a.roundedButton {display:block; margin:0; padding:3px 10px 4px; font-weight:bold; position:relative;} .ie8 #siteSearchContainer a.roundedButton {padding:3px 10px 0px; height:20px} /* END SEARCH BOX BAR */ /* MEGA MENU */ .megaContent {background:white; padding:20px 15px; [-moz- | -webkit-]box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.3); border:1px solid #ccc; border-radius:4px; } .ie7 .megaContent, .ie8 .megaContent {box-shadow:0} .megaContent p.title {padding:0 0 5px; font-weight:bold;} .megaContent p.menuTitle {padding:0 0 5px; font-size:150%} .megaContent nav ul {margin:0; padding:0; overflow:hidden;} .megaContent nav ul li {margin:0; float:none;} .megaContent nav ul li a {display:block; padding:15px 0 15px 20px; color:#e2007a; background:url(/images/design/icon-rightArrow-pink.png) 0 16px no-repeat;} /*TOP ROW*/ .mega-top-row {overflow:hidden;} /* Col 1*/ .mega-top-row .mega-col1 {float:left; width:260px; padding:0 20px 0 0; border-right:1px dotted #00adef;} .mega-top-row .mega-col1 p {margin:0 0 0 90px; padding:0;} .mega-top-row .mega-col1 img {float:left;} .mega-top-row .mega-col1 a.morePink {margin:10px 0 0; padding:5px 0 5px 15px; color:#e2007a; background-position:0 7px;} /* col1 TOP block */ .mega-top-row .mega-col1-top {overflow:hidden; margin:0 0 20px; padding:0 0 20px; border-bottom:1px dotted #00adef;} /* col1 BOTTOM block */ .mega-top-row .mega-col1-bottom {overflow:hidden; padding:0 0 20px;} /* Col 2*/ .mega-top-row .mega-col2 {float:left; width:220px; padding:0 10px;} /* Col 3*/ .mega-top-row .mega-col3 {float:left; width:220px; padding:0 10px; /*border-left:1px dotted #00adef;*/} /*BOTTOM ROW*/ .mega-bottom-row {margin:20px 0 0; overflow:hidden} .mega-bottom-row .promo {position:relative; border:1px solid #ccc; overflow:hidden;} .mega-bottom-row .promo p {margin:0; padding:10px; position:absolute; left:0; bottom:0; width:100%;} .mega-bottom-row .promo p a {padding:0 0 0 20px } .mega-bottom-row .promo a {display:block;} .ie7 .mega-bottom-row .promo p {margin:0 0 -1px; width:100%;} /*COL 1*/ .mega-bottom-row .mega-col1 {float:left; width:280px;} .mega-bottom-row .mega-col1 .promo {width:265px; height:152px; margin:0 auto} /*COL 2*/ .mega-bottom-row .mega-col2 {float:left; width:240px;} .mega-bottom-row .mega-col2 .promo {width:211px; height:152px; margin:0 auto} /*COL 3*/ .mega-bottom-row .mega-col3 {float:left; width:240px;} .mega-bottom-row .mega-col3 .promo {width:211px; height:152px; margin:0 auto} /* MEGA MENU */ /* PAGINATION */ .paginationContainer {overflow:hidden; margin-bottom:25px;} .paginationContainer p {float:left; margin:6px 0 0; font-size:14px; font-size:120%;} .paginationContainer .formRowContainer {width:100%;} .paginationContainer #main_0_mid_0_sorting {width:250px!important;} .paginationContainer .selector {width:250px!important; margin:0 10px 0 0; float:left} .pagination {float:right; overflow:hidden; padding:8px 0;} .pagination li {float:left; margin:0; padding:0 2px; list-style:none; color:#555} .pagination a {float:left; color:#555; font-size:120%;} .pagination li.active a, .pagination a:hover {color:black; font-weight:bold} .pagination li a.pagination-previous {display:block; height:15px; padding:0 0 0 5px; background:url('/images/design/arrow-singleLeft-pink.png') no-repeat 0 75%;} .pagination li a.pagination-next {display:block; height:15px; padding:0 5px 0 0; background:url('/images/design/arrow-singleRight-pink.png') no-repeat 100% 75%;} .pagination li a.pagination-previous span {margin:0 0 0 3px;} .pagination li a.pagination-next span {margin:0 3px 0 0;} .pagination li a.pagination-first {display:block; height:15px; padding:0 0 0 15px; background:url('/images/design/arrow-doubleLeft-pink.png') no-repeat 0 75%;} .pagination li a.pagination-last {display:block; height:15px; padding:0 15px 0 0; background:url('/images/design/arrow-doubleRight-pink.png') no-repeat 100% 75%;} .paginationContainer .formRowContainer {margin: 0 0 10px;} /* Filter for pagination */ #newsFilterSelect, #main_0_mid_0_ddlFilter, #uniform-main_0_mid_0_ddlFilter, #uniform-newsFilterSelect {width:250px;} /* END PAGINATION */ /* HOME PAGE */ #leftTwoThird {float:left; width:700px;} #rightOneThird {float:right; width:220px;} /* END HOME PAGE */ /* LANDING PAGE */ #topRow {margin:0 0 20px;} /* Top Spotlight */ .videoContainerSpotLight {float:left; padding:3%; width:630px; background:#f6f5f0;} .videoContainerSpotLight .responsiveVideoContainer {width:60%; margin-right:3%; padding:25px 0 36.25%;} /* override rule */ .videoContainerSpotLight .responsiveImageContainer {float:left; position:relative; width:60%; margin-right:3%;} .videoContainerSpotLight .responsiveImageContainer img {width:100%; height:auto} .videoContainerSpotLight ul {float:left; width:35%; margin:0; padding:0} .videoContainerSpotLight ul li {margin:0 0 10%; padding:0; list-style:none;} .videoContainerSpotLight ul li.last {margin:0;} .videoContainerSpotLight ul li a {display:block; padding:6px 0 6px 25px; font-size:130%; background:url('/images/design/button-arrow-right-pink.png') 0 4px no-repeat;} .videoContainerSpotLight ul li p {padding:0 0 0 25px} .topRowRightContainer {float:right; width:220px;} /*Top 2 spotlights for news landing page*/ #spotlightContainer {overflow:hidden;} /* Newsroom Filter */ #searchNewsroomFilter {} #newsroomFilterBasicSearch {overflow:hidden;} #newsroomFilterBasicSearch .roundedInput {width:80%} #newsroomFilterBasicSearch #advancedSearchToggle {float:left; display:block; margin:0 0 0 5px;} .no-js #newsroomFilterBasicSearch #advancedSearchToggle {display:none;} .js #newsroomFilterAdvancedSearch {display:none; margin:20px 0 0; /* display: block !important; */} #searchNewsroomFilter input.submit {position: absolute; right: 10px; top: 11px;} /* Date Range */ #dateRangeContainer {overflow:hidden; margin:0 0 20px} #dateRangeContainer .formRowContainer {margin:0 0 5px 0} #dateRangeContainer .fromDate {padding-right:30px;} #dateRangeContainer .formRowContainer label {float:left; padding:4px 5px 0 0;} #dateRangeContainer .formRowContainer input {float:left; width:80px;} #dateRangeContainer .formRowContainer img {float:left; margin:5px 0 0 3px} .embargoHeadline {background:#E2007A; color:white; margin:0 0 20px; padding:5px; text-align:center; font-weight:bold; font-size:120%;} .embargoTitle {position:absolute; top:0; left:10px; margin:0; padding:1px 4px; background:#E2007A; color:white;} /* Programme results list */ .programmeList {position:relative; margin:0 0 20px; padding:10px 20px 20px; border:1px solid #ddd; [-moz- | -webkit-]border-radius:0 0 10px 10px; border-radius:0 0 10px 10px; } .programmeListTitleBar {padding:10px 0 0;overflow:hidden;} .programmeListTitleBar h3 {float:left; width:75%;} .programmeList .infoDetailsLeft {margin:0 0 0 110px;} .programmeList .taxonomy-keyFacts {margin:10px 0 0} .programmeList .taxonomy-keyFacts dt {clear:left; width:110px;} .programmeList .taxonomy-keyFacts dd {width:auto;} .programmeList-small {margin:0 0 20px; padding:10px 20px 20px; border:1px solid #ddd; [-moz- | -webkit-]border-radius:0 0 10px 10px; border-radius:0 0 10px 10px; } .programmeList-small .infoDetailsLeft {margin: 0 0 0 70px;} .programmeList-small img { height: auto; margin: 0 0 10px 0; } /* END LANDING PAGE */ /* LISTING PAGE */ /* Top Spotlight */ .topSpotlight {margin:0 0 30px; width:760px; overflow:hidden;} .topSpotlight .topSpotlightImageContainer {float:left; width:480px; height:229px;} .topSpotlight .topSpotlight-content {float:right; width:240px; height:209px; padding:20px 20px 0; background:#ededec;} .topSpotlight .topSpotlight-content a.morePink {margin:20px 0 0; padding:5px 0 5px 15px; color:#e2007a; background-position:0 7px;} /* Spotlight */ .spotlight {position:relative; width:330px; margin:0 0px 30px 0; padding:10px 15px 15px; border:2px dotted #ccc} .spotlightFloatLeft {float:left} .spotlightFloatRight {float:right} .spotlight h2 {font-size:160%; font-weight:normal; color:#555; margin:0; padding:0 0 5px; color: #0075AC!important;} .spotlight .imageSpotlightContainer {width:330px; height:121px} .spotlight .spotlight-content a.morePink {margin:0; padding:5px 0 5px 15px; color:#e2007a; background-position:0 7px;} .spotlight .spotlight-content {overflow:hidden; position:absolute; bottom:15px; left:15px; width:330px; height:23px; background:rgba(255,255,255,0.8); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff, endColorstr=#ccffffff); /* IE 5.5 - 7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff, endColorstr=#ccffffff)"; /* IE 8 */} .spotlight .spotlight-content p {margin:0; padding:5px 20px 0 5px; color:black} .spotlight .icon-showContent {position:absolute; top:3px; right:0px; display:block; width:20px; height:20px; text-indent:100%; margin:0; padding:0; background:url(/images/design/icon-cross-pink.gif) center center no-repeat} .spotlight .icon-hideContent {position:absolute; top:3px; right:0; display:block; width:20px; height:20px; text-indent:100%; margin:0; padding:0; background:url(/images/design/icon-minus-pink.gif) center center no-repeat} /* END LISTING PAGE */ /* CONTENT PAGE */ /* Slideshow */ #slideshowContainer {margin:0 0 20px} #slideshow {width:100%!important; margin:0 0 10px; padding:0; overflow:hidden; border:1px solid #ccc} #slideshow .slide {width:100%!important; margin:0; padding:0; float:left; display:block; position:relative;} #slideshow img {width:100%!important; height:auto!important; display:block;} #slideshow img.responsiveImage {width:100%!important; height:auto!important; display:none} /* visibility:hidden - doesn't work @ build */ .slide .quoteContainer {position:absolute; top:0px; left:0; width:80%; padding:20px 10%; background:rgba(255,255,255,0.8); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff, endColorstr=#ccffffff); /* IE 5.5 - 7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff, endColorstr=#ccffffff)"; /* IE 8 */} #slideshowThumbnail {margin:0 0 0 10px; padding:0;} #slideshowThumbnail ul {margin:0; padding:0; overflow:hidden;} #slideshowThumbnail li {float:left; margin:0 5px 5px 0; padding:0; list-style:none; border:2px solid #ddd;} #slideshowThumbnail li.activeSlide {border:2px solid #e2007a;} #slideshowThumbnail li a {display:block;} .contentDetails {margin:0 0 20px; clear:both; overflow:hidden;} /* generic container for text on content pages */ /* Tags */ .tags {margin:0 0 20px} .tags ul {margin:0; padding:0; overflow:hidden} .tags ul li {margin:0 10px 10px 0; padding;0; list-style:none; float:left} .tags ul li span {display:block; padding:5px; background:#999; color:white; border-radius:3px; white-space:nowrap} .tags ul li a, .tags ul li.tag {display:block; padding:5px; background:#999; color:white; border-radius:3px;} /* Taxonomy / Key Facts */ dl.taxonomy-keyFacts {overflow:hidden; margin:0 0 40px} .taxonomy-keyFacts dt {float:left; width:20%; display:block; margin:0 0 5px;} .taxonomy-keyFacts dd {float:left; width:29%; display:block; margin:0 0 5px; font-weight:bold} /*.taxonomy-keyFacts dt {float: left; width: 30%; display: block; margin: 0 0 5px;} .taxonomy-keyFacts dd {width: 29%; display: block; margin: 0 0 5px; font-weight: bold;}*/ dl.organisationKeyFacts {margin:0 0 10px;} .notesToEditor {margin:0 0 40px} /* Programme Page - Taxonomy / Key Facts */ #programmeKeyFacts {background-color:#c2e6f4; clear:both; overflow:hidden;} #programmeKeyFacts-noButton {background-color:#c2e6f4; margin:0 0 20px 0; clear:both; overflow:hidden;} dl.programmeFacts {padding:10px; overflow:hidden; margin:0 ; overflow:hidden; } .programmeFacts dt {float:left; width:20%; display:block; margin:0; width:50%; margin-bottom:4px;} .programmeFacts dd {float:left; width:29%; display:block; margin:0; width:50%; margin-bottom:4px; font-weight:bold;} .programmeFacts dt.last {margin-bottom:0;} .programmeFacts dd.last {margin-bottom:0;} /* Programme Page - Taxonomy / Key Facts */ .applyButton {background-color: #ec018c; height:94px; color:#fff; background-image:url("../images/design/arrow-apply.png"); background-repeat:no-repeat; background-position:right;} .applyButton a {display:block; padding:35px 10px 35px 10px; color:#fff; font-size:1.5em; text-align:center; margin-right:28px;} /* Related Docs*/ #relatedDocsContainer {padding-top:20px;} .relatedDocsList {margin:0; padding:0} .relatedDocsList li {margin:0 0 10px; padding:0; list-style:none;} .relatedDocsList li a img {margin:0 10px 0 0; padding:0} /*Corporate Docs lists*/ ul.corporateDocuments {overflow:hidden; padding-top:10px; clear:left; } ul.corporateDocuments li {list-style-image:url('images/icon-pdf-doc-small.png');} /* END CONTENT PAGE */ /* FORM PAGE */ #login {} #login .formRowContainer {float:left; width:50%} #register {} #register .formRowContainer {float:left; width:50%} /* END FORM PAGE */ /* PREVIOUS PROJECTS SEARCH */ /* Left Half*/ #previousProjectsSearchFilter {width:70%; margin:10px auto 30px} #previousProjectsSearchFilter .formRowContainer {width:100%;} #previousProjectsSearchFilter .label {width:20%; margin-right:3%;} #previousProjectsSearchFilter .roundedInput {width:73%} #previousProjectsSearchFilter .placeHolderWrapper {margin-left:23%;} #previousProjectsSearchFilter .selector, #previousProjectsSearchFilter select {width:74%;} #previousProjectsSearchFilter select { width: 99% !important; } .ie7 #previousProjectsSearchFilter select { width: 70% !important; } #previousProjectsSearchFilter .formInputContainer .selector, #previousProjectsSearchFilter .formInputContainer select {width:96%;} #previousProjectsSearchFilter .roundedButton {margin:0 20px 0 0} /* Right Half*/ /*#previousProjectsSearchResults {display:none; float:left; width:60%; margin:10px 0;}*/ #previousProjectsSearchResults {float:left; width:60%; margin:10px 0;} .filterAndPagination {overflow:hidden} .searchResultsOrderByContainer {float:left; margin:10px 0 30px!important;} .ie8 .searchResultsOrderByContainer .roundedButton {height:23px} .searchResultsOrderByContainer .label {width:0em;} .searchResultsOrderByContainer .selector {width:270px!important} #previousProjectsSearchResults .selector, #previousProjectsSearchResults select {width:60%;} #previousProjectsSearchResults .projectShortSummary {margin:0 0 15px; padding:0 0 15px; border-bottom:1px solid #ccc;} #previousProjectsSearchResults .projectShortSummary a {color:#0075AC!important} #previousProjectsSearchResults .projectShortSummary a:hover {color:#ED008C} #previousProjectsSearchResults .projectShortSummary p { width: 84%; } #previousProjectsSearchResults .taxonomy-keyFacts {margin:0 0 15px} #previousProjectsSearchResults .taxonomy-keyFacts dt {clear:left; width:130px;} #previousProjectsSearchResults .taxonomy-keyFacts dd {width:auto;} #previousProjectsSearchResults a.moreLinkPinkArrow {font-size:100%} #previousProjectsSearchResults .projectFullSummary {clear:both; overflow:hidden; margin:25px 0 0; padding:10px; background:#eee; border:1px solid #ccc} #previousProjectsSearchResults .paginationContainer {margin:0} #mapContainer {clear:both; width:100%; height:350px; margin:0 auto 20px;} #mapContainer2 {clear:both; width:100%; height:350px; margin:0 auto 20px;} #mapContainer iframe {width:100%; height:100%; margin:0 0 10px} .mapButtons {overflow:hidden; margin:0 0 30px} #confirmLocationContainer {padding:10px} #incorrectMapDetailsContainer {margin:20px 0 0; padding:10px; display:block!important; position:absolute; top:-9999px; left:-9999px} #incorrectMapDetailsContainer .formRowContainer {float:left; width:200px; margin:0 10px 15px 0} #incorrectMapDetailsContainer #mapContainer {width:535px; height:280px; margin:0} #incorrectMapDetailsContainer textarea {clear:both; width:530px; height:80px; margin:0 0 10px} #incorrectProgrammeDetailsContainer {clear:both; margin:20px 0 0; padding:10px} #incorrectProgrammeDetailsContainer h3 {margin:0 0 20px} #incorrectProgrammeDetailsContainer .formRowContainer {width:100%; margin:0 10px 15px 0} #incorrectProgrammeDetailsContainer .roundedInput {width:60%} #incorrectProgrammeDetailsContainer .programmeWrongDetails {width:60%; height:150px} #incorrectProgrammeDetailsContainer .confirmationNotice, #incorrectProgrammeDetailsContainer .alreadyNotice, #incorrectProgrammeDetailsContainer .invalidNotice {margin-left:10em; width:59%} .no-js #main_0_mid_0_aConfirmLocation { display:none; } .no-js #main_0_mid_0_aEditLocation { display:none; } .js .js-hidden { display:none; } .alreadyNotice {display:none; clear:both; padding:6px; margin:0 0 10px;} .alreadyNotice p {margin:0; color:white!important; font-weight:bold} .confirmationNotice {display:none; clear:both; padding:6px; margin:0 0 10px;} .confirmationNotice p {margin:0; color:white!important; font-weight:bold} .invalidNotice {display:none; clear:both; padding:6px; margin:0 0 10px;} .invalidNotice p {margin:0; color:white!important; font-weight:bold} /* END PREVIOUS PROJECTS SEARCH */ /* PREVIOUS PRJECTS FULL DETAILS */ /* Taxonomy / Key Facts */ #previousProjects-fullDetails {float:left; width:38%; margin:0 20px 0 0;} #previousProjects-Map {float:left; width:38%;} #previousProjects-rightCol {float:right; width:20%;} #previousProjects-fullDetails dl.taxonomy-keyFacts {overflow:hidden; margin:0 0 20px;} #previousProjects-Map .taxonomy-keyFacts dt, #previousProjects-fullDetails .taxonomy-keyFacts dt {clear:left; width:48%;} #previousProjects-fullDetails .taxonomy-keyFacts dd {float:left; display:block; width:48%;} #previousProjects-Map .taxonomy-keyFacts dd { width:48%; } /* END PREVIOUS PRJECTS FULL DETAILS */ /* SPREADSHEET DOWNLOAD */ .spreadsheetDownloadContainer {overflow:hidden; padding:10px; border:1px solid #ccc} .spreadsheetDownloadContainer .multiRow input { height: 21px; } /* END SPREADSHEET DOWNLOAD */ /* ORGANISATION PAGE */ .organisationKeyFacts dt {clear:left} .organisationProject {margin:0 0 30px} /* END ORGANISATION PAGE */ /* Calendar events */ #eventsCalendarContainer {overflow:hidden; position:relative; margin:0 0 20px;} #eventsCalendarContainer .paginationContainer {margin:0} /* ROUNDABOUT GENERAL RULES */ .roundabout {position:relative; margin:0 auto 30px; padding:0px;} .roundabout ul {margin:0 auto; padding:0;} .roundabout li {position:relative; list-style:none; cursor:pointer; overflow:hidden; background-color:white; [-moz- | -webkit-]box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);} .roundabout li img {/*width:100%!important; height:auto*/} .roundabout li.roundabout-in-focus {cursor:default;} .roundaboutNav {position:absolute; bottom:75%; left:0; z-index:10000; width:100%;} .roundaboutPrev {position:absolute; left:0; display:block; width:60px; height:60px; text-indent:100%; white-space:nowrap; overflow:hidden; background:url(/images/design/roundabout-leftArrow.png) 0 0 no-repeat;} .roundaboutNext {position:absolute; right:0; display:block; width:60px; height:60px; text-indent:100%; white-space:nowrap; overflow:hidden; background:url(/images/design/roundabout-rightArrow.png) 0 0 no-repeat;} .blips {overflow:hidden; width:250px;margin:15px auto 0} .blips a {float:left; display:block; margin:0 5px 0 0; width:21px; height:21px; text-indent:100%; white-space:nowrap; overflow:hidden; background:url(/images/design/icon-blips-off.gif) 0 0 no-repeat} .blips a.active-blip {background:url(/images/design/icon-blips-on.gif) 0 0 no-repeat} .no-js .roundabout ul {} .no-js .roundabout li {overflow:hidden} .no-js .roundaboutPrev, .no-js .roundaboutNext, .no-js .blips {display:none} .no-js #homepageTopRoundabout .roundaboutInfoContainer, .no-js #homepageBottomRoundabout .roundaboutInfoContainer {height:auto; bottom:1px; border-bottom: 2px solid #ccc; [-moz- | -webkit-]box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);} .no-js #homepageBottomRoundabout {overflow:hidden} /* END ROUNDABOUT GENERAL RULES */ /* HOMEPAGE TOP ROUNDABOUT */ #homepageTopRoundabout ul {width:60%; height:280px;} #homepageTopRoundabout li {width:100%; height:280px; border:1px solid #ccc;} #homepageTopRoundabout span {display:block;} #homepageTopRoundabout .roundaboutInfoContainer {position:absolute; bottom:0px; left:0; width:100%; height:0px; text-align:left; background-color:white} #homepageTopRoundabout .roundabout-in-focus .roundaboutInfoContainer {height:auto; -webkit-transition:0.5s linear; -moz-transition:0.5s linear; transition:0.5s linear;} .ie9 #homepageTopRoundabout .roundabout-in-focus .roundaboutInfoContainer, .ie8 #homepageTopRoundabout .roundabout-in-focus .roundaboutInfoContainer, .ie7 #homepageTopRoundabout .roundabout-in-focus .roundaboutInfoContainer {/*height: 147px;*/} #homepageTopRoundabout .roundaboutInfoContent {margin:10px;} #homepageTopRoundabout .roundaboutInfoContent .title {font-size:200%; color:#00ADEF; font-weight:bold; line-height:normal} #homepageTopRoundabout .roundaboutInfoContent p {line-height:160%} #homepageTopRoundabout .roundaboutInfoContent a {} /* END HOMEPAGE TOP ROUNDABOUT */ /* HOMEPAGE BOTTOM ROUNDABOUT */ #homepageBottomRoundabout ul {width:45%; height:200px;} #homepageBottomRoundabout li {width:100%; height:200px; background-color:white; border:1px solid #ccc;} #homepageBottomRoundabout span {display:block;} #homepageBottomRoundabout .roundaboutInfoContainer {position:absolute; bottom:0; left:0; width:100%; height:36px; text-align:left; background-color:rgba(255,255,255,0.8); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff, endColorstr=#ccffffff); /* IE 5.5 - 7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff, endColorstr=#ccffffff)"; /* IE 8 */} #homepageBottomRoundabout .roundabout-in-focus .roundaboutInfoContainer {height:auto; -webkit-transition:0.5s linear; -moz-transition:0.5s linear; transition:0.5s linear;} #homepageBottomRoundabout .roundaboutInfoContent {padding:10px;} #homepageBottomRoundabout .roundaboutInfoContent .title {font-size:140%; color:black; font-weight:bold; margin:0 0 3px} /* END HOMEPAGE BOTTOM ROUNDABOUT */ /* THIRD CONTAINER */ .thirdContainer {overflow:hidden; margin:0 0 20px; padding:0 0 40px; background:url(/images/design/fullWidth-dropShadow.jpg) 50% 100% no-repeat;} .thirdContainer h1 {margin:0; padding:10px; font-size:180%; color:#222222} .third {float:left; width:33%;} .thirdLast {float:right; width:33%;} .third h2 {margin:0; padding:5px 0 5px 10px; font-size:150%; font-weight:normal; color:#222222!important; width:110%; border-left:1px solid #ccc; background:#e0e0e0!important;} .thirdLast h2 {width:auto; border-right:1px solid #ccc;} .thirdInner {overflow:hidden; padding:10px 10px 0; border-left:1px solid #ccc;} #jobsRegionsCommunity .thirdInner {min-height:260px; position:relative; padding-bottom:40px} .thirdLast .thirdInner {border-right:1px solid #ccc} .thirdInner img {display:block; border:1px solid #555;} .thirdSpotlight .thirdInner img {width:100%; height:auto; border:0} .thirdSpotlight .thirdInner a img {border:1px solid white} .thirdInner a:hover img {display:block; border:1px solid #ed008c;} .thirdInner .smallThumbnail {margin:0 0 10px;} .thirdInner .smallThumbnail .infoDetailsLeft {margin:0 0 0 65px;} .thirdInner .largeThumbnail {padding:0 0 10px;} .thirdInner .largeThumbnail .infoDetailsLeft {margin:0 0 0 110px;} .thirdInner .infoDetailsLeft a {display:block; padding:0px 0 6px 0px;} .thirdInner .thirdContainerBottomRow {overflow:hidden; padding:10px 0 0;} /* used on jobRegionsCommunity */ #jobsRegionsCommunity .thirdInner .thirdContainerBottomRow {position:absolute; bottom:0} /* END THIRD CONTAINER */ /* BOXES */ .formBox {overflow:hidden; margin: 0 0 20px; padding:10px; background:#ddd; [-moz- | -webkit-]border-radius:10px; border-radius:10px; position: relative; } .components {margin:0 0 20px; padding:0; [-moz- | -webkit-]box-shadow: 0px 15px 10px -10px rgba(128, 128, 128, 0.3); box-shadow: 0px 15px 10px -10px rgba(128, 128, 128, 0.3);} .ie7 .components, .ie8 .components {padding:0 0 10px; background:url(/images/design/component-dropShadow.jpg) 50% 100% no-repeat} .components .imageContainer img {width:100%; height:auto} .components h2 {margin:0; padding:10px; font-size:140%; font-weight:normal; color:#222222!important;} .components ul {margin:0 0 10px; padding:0 0 0 20px;} .avocadoCorner h1, .avocadoCorner h2 {background:#c5d456 url(../images/design/topCorner-avocado.gif) 100% 0 no-repeat} .avocadoBox {overflow:hidden; padding:10px; background:#f3ff99!important; border:0!important; [-moz- | -webkit-]border-radius:0 0 10px 10px; border-radius:0 0 10px 10px;} .tabContainer ul li.ui-state-active .avocadoTab {background:#f3ff99!important;} .blueCorner h1, .blueCorner h2 {background:#98e2fc url(../images/design/topCorner-blue.gif) 100% 0 no-repeat; } .blueBox {overflow:hidden; padding:10px; background:#daf5fe!important; border:0!important; [-moz- | -webkit-]border-radius:0 0 10px 10px; border-radius:0 0 10px 10px;} .tabContainer ul li.ui-state-active .blueTab {background:#daf5fe!important;} .orangeCorner h1, .orangeCorner h2 {background:#ff9316 url(../images/design/topCorner-orange.gif) 100% 0 no-repeat; color:white} .orangeBox {overflow:hidden; padding:10px; background:#ffdab1!important; border:0!important; [-moz- | -webkit-]border-radius:0 0 10px 10px; border-radius:0 0 10px 10px;} .tabContainer ul li.ui-state-active .orangeTab {background:#ffdab1!important;} .pinkCorner h1, .pinkCorner h2 {background:#ed008c url(../images/design/topCorner-pink.gif) 100% 0 no-repeat; color:white!important;} .pinkBox {overflow:hidden; padding:10px; background:#ffeaf6!important; border:0!important; [-moz- | -webkit-]border-radius:0 0 10px 10px; border-radius:0 0 10px 10px;} .tabContainer ul li.ui-state-active .pinkTab {background:#ffeaf6!important;} .purpleCorner h1, .purpleCorner h2 {background:#c07fff url(../images/design/topCorner-purple.gif) 100% 0 no-repeat; color:white!important;} .purpleBox {overflow:hidden; padding:10px; background:#e5cbff!important; border:0!important; [-moz- | -webkit-]border-radius:0 0 10px 10px; border-radius:0 0 10px 10px;} .tabContainer ul li.ui-state-active .purpleTab {background:#ffeaf6!important;} /* END BOXES */ /* SOCIAL MEDIA ICONS BAR */ #socialMediaHomepage {float:right} .socialMediaTitleBar {margin:0 0 10px; padding:0;} .socialMediaTitleBar ul {margin:0; padding:0; overflow:hidden; float: right;} .socialMediaTitleBar li {float:left; margin:0 5px 0 0; padding:0 10px 0 0; list-style:none;} #socialMediaHomepage li {margin:0 -2px 0 0;} .ie7 #socialMediaHomepage li {margin:0 -4px 0 0;} .socialMediaTitleBar li a {display:block; white-space: nowrap; overflow: hidden;} .socialMediaTitleBar li a.iconRss {text-indent:-9999px} #footerContent .socialMediaTitleBar li a {text-indent:-9999px} .socialMediaTitleBar .iconBigBlog {width:76px; height:24px; background:url(/images/design/social-media-big-blog.jpg) 0 0 no-repeat} .socialMediaTitleBar .iconBigBlogWales {width:49px; height:24px; background:url(/-/media/Images/BlogIcons/blogwales.jpg) 0 0 no-repeat} .socialMediaTitleBar .iconBigBlogNI {width:49px; height:24px; background:url(/-/media/Images/BlogIcons/niblog.jpg) 0 0 no-repeat} .socialMediaTitleBar .iconBigBlogScotland {width:49px; height:24px; background:url(/-/media/Images/BlogIcons/scotlandblog.jpg) 0 0 no-repeat} .socialMediaTitleBar .iconBigBlogWelsh {width:49px; height:24px; background:url(/-/media/Images/BlogIcons/welshblog.jpg) 0 0 no-repeat} .socialMediaTitleBar .iconTwitter {width:25px; height:25px; background:url(/images/design/social-media-twitter.png) 0 0 no-repeat} .socialMediaTitleBar .iconFacebook {width:25px; height:25px; background:url(/images/design/social-media-facebook.png) 0 0 no-repeat} .socialMediaTitleBar .iconFlickr {width:25px; height:25px; background:url(/images/design/social-media-flickr.png) 0 0 no-repeat} .socialMediaTitleBar .iconYouTube {width:25px; height:25px; background:url(/images/design/social-media-youTube.png) 0 0 no-repeat} .socialMediaTitleBar .iconDigg {width:25px; height:25px; background:url(/images/design/social-media-digg.jpg) 0 0 no-repeat} .socialMediaTitleBar .iconFacebookCounter {width:39px; height:25px; background:url(/images/design/icon-facebookCounter.gif) 0 50% no-repeat} .socialMediaTitleBar .iconPrint {width:40px; height:25px; background:url(/images/design/icon-print.gif) 0 2px no-repeat; margin:0; padding:1px 0 0 25px; font-size:120%} .socialMediaTitleBar .iconRss {width:25px; height:25px; background:url(/images/design/social-media-rss.jpg) 0 0 no-repeat; margin-right: 20px;} /*.fb_iframe_widget iframe {width: 85px !important;} .fb_edge_widget_with_comment {width: 77px !important;}*/ iframe.twitter-share-button {width: 75px !important;} /* END SOCIAL MEDIA ICONS BAR */ /* SOCIAL FEED */ .feedUpdateStatusContainer {margin:0 0 10px; overflow:hidden;} .feedUpdateStatusContainer .formRowContainer {float:left; width:80%; margin:0} .socialFeed {height:210px; background:white!important; border:1px solid #aaa!important; overflow:hidden;} .thirdContainer .socialFeed {border:0!important} .socialFeed p {margin:10px;} .ie7 #twitterFeed h2, .ie7 #facebookFeed h2, .ie7 .twitterFeedBox h2 {position: relative;} #twitterFeed h2 img, #facebookFeed h2 img, .twitterFeedBox h2 img {display: block; position: relative; top: -2px;} .ie8 #twitterFeed h2 img, .ie8 #facebookFeed h2 img, .ie8 .twitterFeedBox h2 img {display: block; position: relative; top: -3px;} .ie7 #twitterFeed h2 img, .ie7 #facebookFeed h2 img, .ie7 .twitterFeedBox h2 img {position: absolute; right: 10px; top: 6px;} #facebookFeedContainer {height:150px; overflow:hidden;} #twitterFeedContainer, .twitterFeedContainer {overflow:hidden;} #twitterFeedContainer p, .twitterFeedContainer p {clear: both;} #twitterFeedContainer p img , .twitterFeedContainer p img {float: left; margin-right: 10px; margin-bottom: 10px; border:0;} /* END SOCIAL FEED */ /* Twitter feed */ .twitterFeed {} .thirdInner .twitterFeed a {display:inline; margin:0; padding:0;} .thirdInner .twitterFeed .twitterFooterLinks a {font-size:90%} /* END Twitter feed */ /* FIND A FUND NEAR YOU OLD ACCORDIAN STYLE */ #findFundNearYou {} #fundTypes-accordian-wrapper {[-moz- | -webkit-]border-radius:0 0 10px 10px; border-radius:0 0 10px 10px; padding:10px; background:#c1ecff;} #fundTypes-accordian h3 {margin:0 0 10px; padding:0; font-weight:normal; height:27px; border:0} #fundTypes-accordian h3 span.stateIcon {display:block; margin:0 0 0 27px; background:url(/images/design/findFund-accordian-collapsed.png) 100% 0 no-repeat} #fundTypes-accordian h3 a {display:block; height:21px; margin:0 23px 0 0; padding:6px 0 0 5px; text-decoration:none; color:#555; background:url(/images/design/accordion-title-bkgnd.gif) 0 0} /* Title Icons */ #fundTypes-accordian h3#fundButton-whereProject {background:url(/images/design/button-bkgnd-whereIsTheProject.png) 0 0 no-repeat} #fundTypes-accordian h3#fundButton-typeOrganisation {background:url(/images/design/button-bkgnd-typeOfOrganisation.png) 0 0 no-repeat} #fundTypes-accordian h3#fundButton-projectHelps {background:url(/images/design/button-bkgnd-theProjectHelps.png) 0 0 no-repeat} #fundTypes-accordian h3#fundButton-amount {background:url(/images/design/button-bkgnd-amount.png) 0 0 no-repeat} #fundTypes-accordian .fund-type-accordian-panel {margin:0; padding:0;} /* Funding counter */ #funding-counter {float: left; } #funding-counter span {display: block; float: left; width: 27px; height: 27px; background: #ED008B; margin-right: 1px; [-moz- | -webkit-]border-radius:5px; border-radius: 5px; color: #fff; font-size: 24px; font-weight: bold; text-align: center; line-height: 27px; cursor: default;} /* END Funding counter */ /* RESEARCH FILTER */ .research-filter-page {width: 100% !important;} .research-filter {/*float: left; width: 45%*/margin:0 0 60px} .research-filter input.searchInput {padding: 5px; font-size: 1.2em; margin-bottom: 10px; height: auto; width: 100%;} .research-filter span {display: block;} .research-filter span.child {margin-left: 19px;} .research-filter span input {margin-right: 5px;} .research-filter span.hidden {display: none;} .research-filter .blueButton {margin-top: 10px;} .research-listing {/*float: right; width: 50%*/ clear:both} .searchOptionsContainer {} .clearButton {border:1px solid #00adef; margin:10px 0 0 10px; padding:0 10px; border-radius:5px; display:block; float:left} .ie .clearButton {padding:2px 10px} /* END RESEARCH FILTER */ /* jQueryUI OVERRIDES */ .ui-widget {font-family:"Trebuchet MS", "Arial", "Helvetica", sans-serif;} .ui-widget-content a {color:#0075AC} .ui-widget-content a.roundedButton {color:white} /* Tabs Styling Rules */ .tabContainer {margin:0 0 20px;} .ie7 .tabContainer, .ie8 .tabContainer {margin:0 0 0px; font-family:"Trebuchet MS", "Arial", sans-serif} .tabContent {overflow:hidden} /* jQueryUI override rules for tabs*/ .tabContainer .ui-widget {font-size:0.99em!important; font-family:"Trebuchet MS", "Arial", sans-serif!important} .tabContainer .ui-widget-content {background:none; margin:0; padding:0px; border:0;} /* main container & tabs */ .tabContainer .ui-tabs .ui-tabs-nav {padding:0} .tabContainer .ui-widget-header {background:none; border:0} /* header */ .tabContainer .ui-corner-top {[-moz- | -webkit-]border-radius:10px 10px 0 0; border-radius:10px 10px 0 0;} .tabContainer .ui-corner-bottom {[-moz- | -webkit-]border-radius:0 0 10px 10px; border-radius:0 0 10px 10px;} .tabContainer ul li.ui-state-default {margin:0; background:none; border:0;} /* default LI tab */ .tabContainer ul li.ui-state-default a {padding:5px 8px; color:#777; font-weight:normal; background:#eee; [-moz- | -webkit-]border-radius:10px 10px 0 0; border-radius:10px 10px 0 0;} /* default A in tab */ .tabContainer ul li.ui-state-active {background:none;} /* active LI tab */ .tabContainer ul li.ui-state-active a {background:#ddd; color:black} /* active A in tab */ .tabContainer .ui-tabs-panel {margin:0; padding:10px; border:1px solid #ddd} /* content areas */ /* END jQueryUI OVERRIDES */ /* Claim project */ .claimProjectContainer {margin-top:30px} .claimProjectContainer .roundedInput {width:98.5%} .claimProjectContainer .roundedButton {margin:0 3px 0 0} /* END Claim project */ /* FOOTER */ #adviceLineDetails {float:left; margin:0 0 20px} #adviceLineDetails img {float:left;} #adviceLineDetails p {margin:4px 0 0 40px; font-weight:bold; font-size:140%} #footerTelNum {color:#e2007a} #nationalLotteryAndFooterMenu {margin:0 0 30px; clear:both; overflow:hidden;} #nationalLotteryAndFooterMenu img {float:left; } /* END FOOTER */ /*------------------------------------------------------------------------------------------------------------*/ /* 5.1 Forms */ /*------------------------------------------------------------------------------------------------------------*/ /* PLACEHOLDER FIX - FAKE LABEL OVER INPUT */ /*placeholder color for webkit*/ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color:#666;} /*placeholder color for moz*/ input:-moz-placeholder, textarea:-moz-placeholder {color:#666;} .formFocusTextColor {color:black} /* proper text colour for input & textarea tags */ .placeHolderWrapper {position:relative;} .placeHolderWrapper label {position:absolute; top:4px; left:5px; color:#666; z-index:1} .placeHolderWrapper label.offScreen {position:absolute; left:-9999px} /* END PLACEHOLDER FIX - FAKE LABEL OVER INPUT */ fieldset {margin:1em; border:1px solid #ccc;} legend {border:1px solid #ccc} .fieldsetInnerContainer {overflow:hidden; margin:1em; padding:1em; background:#ccc} .fieldsetInnerContainer h2 {margin:0 0 10px} select, input, textarea {position:relative; border:1px solid #ccc;} .searchOptionsContainer input {border:0} select {width:98%} label {cursor:pointer; color:#555} input {height:21px;} .ie7 input {height:18px;} .ie8 input {height:18px;} input.checkbox {border:0} /* DO NOT ALTER UNLESS YOU ***REALLY*** HAVE TO */ .formRowContainer {overflow:hidden; margin:0 0 10px; padding:0;} .formRowContainer p.errorText {padding:3px 0 0 23%;} .extraRow {margin:0.5em 0 0 10em;} .leftHalfContainer .extraRow {margin:0.5em 0 0 0;} .label {position:relative; float:left; width:10em; padding:0.2em 0 0; color:#555} /* default label style */ .label span {font-size:90%; font-weight:normal} /* used for small text */ .required {/* background:url('/images/design/IMAGE NAME') repeat-x 0 center; */} .radioLabel, .checkBoxLabel {margin:0px 10px 0 3px; display:inline-block; vertical-align:middle} .formInputContainer {overflow:hidden} /*used for floated content, eg. columns, on the input side */ .multiRow {display:block; margin:0 0 0.5em 0; overflow:hidden; clear:both;} .multiRow input {float:left; margin:1px 0 0 0; border:0; height:auto} .multiRow input[type=radio] { height: 21px; } .multiRow label {display:block; margin-left:1.5em;line-height: 2.1em;} .inputExtend {display:inline; margin-left:8px;} .inputExtend .checkBoxLabel {margin:0; padding:0;} /* END OF STERN WARNING ;-) */ /* Stacked form overrides */ .stackedFormInputs {margin:0 0 18px; padding:0 0 1px; border:0} .stackedFormInputs legend {display:none} .stackedFormInputs .fieldsetInnerContainer {margin:0; padding:0; background:none} .stackedFormInputs .label {float:none; width:auto; display:block; margin:0 0 3px} .stackedFormInputs .inputExtend {display:block; margin:0} .stackedFormInputs p {margin:0 0 3px} .stackedFormInputs .tags {margin:0} .stackedFormInputs p.errorText {margin:0; padding:0} /* Form Validation */ label.formInputError {margin:-1px 0 0 5px; padding:3px 0 0 23px; display:inline-block; vertical-align:top; height:17px; background:url('/images/design/cross.png') 0 0 no-repeat; color:red;} /* auto generated */ label.formInputCorrect {margin:-1px 0 0 5px; padding:3px 0 0 23px; display:inline-block; vertical-align:top; height:17px; background:url('/images/design/tick.png') 0 0 no-repeat;} #downloadColorboxContent { padding:40px; text-align:center; } #downloadColorboxContent h2 { margin:0; padding:0; } #downloadColorboxContent .fileDownloadCancel { margin:0 0 0 10px; } #downloadColorboxContent .downloadButtons { width: 160px; margin: 15px auto 0; position: relative; overflow: hidden; } .popupOverlay { position: fixed; left: 0; top: 0; background:#000; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; width: 100%; height: 100%; z-index: 10000; display:none; } .content { background:#fff; padding: 28px 26px 33px 25px; } .popup { border-radius: 3px; background:#6b6a63; margin:30px auto 0; padding:3px; position:fixed; width:250px; top: 40%; left: 50%; margin-left: -125px; margin-top: -40px; z-index: 10001; text-align:center; display:none; } /*------------------------------------------------------------------------------------------------------------*/ /* jQuery Libraries */ /*------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------*/ /* Media Queries */ /*------------------------------------------------------------------------------------------------------------*/ body {padding-top:0px;} #responsiveColourBar {z-index:10000; position:fixed; top:0; height:20px; width:100%; background:aqua; display:none} #headerToolsNav .selector, #headerToolsNav select {display: none;} @media only screen and (max-width: 1190px) { #pageContainer {width:100%;} } @media only screen and (max-width: 980px) { #responsiveColourBar {background:red} #pageContainer {width:100%; min-width:0} #headerContent {margin:0 auto; padding:0 0 10px; width:98%; position:relative;} #logoContainer {margin:10px 0 20px 10px; padding:0;} #headerToolsNav {margin:2% 3% 20px 0;} /* Region */ #headerToolsNav ul#regionNav {float:none; margin:0 0 30px;} .ie7 #headerToolsNav ul#regionNav {float:right;} #headerToolsNav ul#regionNav li.last {background:url('/images/design/topMenuRight.png') 100% 100% no-repeat;} /* Tools */ #headerToolsNav ul#toolsNav {float:right;} .ie7 #headerToolsNav ul#toolsNav {clear:right; width:350px} #headerToolsNav ul#toolsNav li {background:none} #headerToolsNav ul#toolsNav li.last {background:none} #primaryNav {clear:both; margin:0 0 20px 0px;} /* Three cols */ .three .mega-top-row .mega-col1, .three .mega-bottom-row .mega-col1 {width:31%; padding:0 1% 0 0;} .three .mega-top-row .mega-col2, .three .mega-bottom-row .mega-col2 {width:31%; padding:0 1%;} .three .mega-top-row .mega-col3, .three .mega-bottom-row .mega-col3 {width:31%; padding:0 1%;} /* Two cols */ .two .mega-top-row .mega-col1, .two .mega-bottom-row .mega-col1 {width:48%; padding:0 1% 0 0;} .two .mega-top-row .mega-col2, .two .mega-bottom-row .mega-col2 {width:48%; padding:0 1%;} .mega-bottom-row .promo {border:0} .mega-bottom-row .promo img {display:none;} .mega-bottom-row .mega-col1 {width:34%; padding:0 1% 0 0;} .mega-bottom-row .mega-col1 .promo {margin:0 auto; width:95%; height:auto;} .mega-bottom-row .mega-col1 .promo p {position:relative; width:auto} .mega-bottom-row .mega-col2, .mega-bottom-row .mega-col3 {width:30%; padding:0 1%;} .mega-bottom-row .mega-col2 .promo, .mega-bottom-row .mega-col3 .promo {margin:0 auto; width:95%; height:auto} .mega-bottom-row .mega-col2 .promo p, .mega-bottom-row .mega-col3 .promo p {position:relative; width:auto} #searchHelpGuidesContainer {margin:0 auto; width:95%;} #searchHelpGuidesInnerContainer {width:auto; margin:0 1% 0 0;} #content {width:95%; margin:0 auto; padding:0;} /*#socialMediaHomepage {width:280px; float:none; margin: 0 auto 20px; position: relative; overflow: hidden;}*/ #socialMediaHomepage {width:auto; float:none; margin: 0 auto 20px; position: relative; overflow: hidden;} #breadcrumbNav {width:99%; padding:0 0 0 1%;} #leftMenuContainer {width:22%;} #noColLayoutContainer {width:100%;} #oneColLayoutContainer {width:74%; margin-left:26%;} #twoColLayoutContainer {width:74%; margin-left:26%;} #twoColLayoutContainer #mainContentContainer, #twoColLayoutContainer .mainContentContainer {float:none; width:100%; margin:0 0 20px;} #twoColLayoutContainer #rightColContainer {float:none; width:100%;} /* TITLE BAR */ #titleBar .socialMediaTitleBar, .titleBar .socialMediaTitleBar {position:relative; float:right; margin:20px 0 5px;} /* HOME PAGE */ #leftTwoThird {float:none; width:100%; margin:0 auto;} #rightOneThird {float:none; width:100%; margin:0 auto;} #rightOneThird #askBig {width:100%;} #rightOneThird #askBig ul {overflow:hidden;} #rightOneThird #askBig li {float:left; width:33%;} #rightOneThird #signUpNewsLetter {float:left; width:48%;} #rightOneThird #pastProjects {float:right; width:48%;} /* END HOME PAGE */ /*LANDING PAGE*/ .videoContainerSpotLight {float:none; width:94%; margin:0 auto; padding:3%; overflow:hidden;} .videoContainerSpotLight #videoContainer {margin:0 3% 0 0;} /*Change accordion to normal layout*/ .topRowRightContainer {float:none; width:100%; margin:10px auto 0;} .accordion-panel-wrapper-top {overflow:hidden; margin:0 0 1%} .accordion-panel-wrapper-top .accordion-panel-wrapper-left {float:left; width:47%;} .accordion-panel-wrapper-top .accordion-panel-wrapper-right {float:right; width:47%;} .accordion-panel-wrapper-bottom {overflow:hidden} .accordion-panel-wrapper-bottom .accordion-panel-wrapper-left {float:left; width:47%;} .accordion-panel-wrapper-bottom .accordion-panel-wrapper-right {float:right; width:47%;} /*END LANDING PAGE*/ /* LISTING PAGE */ .topSpotlight {position:relative; width:100%;} .topSpotlight .topSpotlight-content {float:none; position:absolute; top:0; right:0; width:30%; height:100%; padding-bottom:10px} .topSpotlight .topSpotlight-content .quote {line-height:22px} .spotlight {width:42%; margin:0 0 2%} .spotlight .imageSpotlightContainer {width:100%; height:auto;} .spotlight .imageSpotlightContainer img {width:100%; height:auto;} .spotlight .spotlight-content {overflow:hidden; position:static; width:100%; height:auto;} .spotlight .icon-showContent {display:none} /* END LISTING PAGE */ /*Previous Search Full Details */ /* Left Half */ #previousProjects-fullDetails {float:none; width:95%; margin:0 auto; overflow:hidden;} /* Left Half */ #previousProjects-Map {float:none; width:95%; margin:20px auto; overflow:hidden; } /* Right Col */ #previousProjects-rightCol { float:none; width:95%; margin:20px auto; overflow:hidden;} /* Previous Projects Page */ #previousProjectsSearchFilter {float:none!important; width:100%!important;} #previousProjectsSearchResults {float:none; width:100%; clear:both} /* END Previous Projects Page */ /* Third Container*/ .thirdContainerInner .smallThumbnail img {float:none;} .thirdContainerInner .smallThumbnail .infoDetailsLeft {margin:5px 0 0;} .thirdContainerInner .largeThumbnail img {float:none;} .thirdContainerInner .largeThumbnail .infoDetailsLeft {margin:5px 0 0;} /* END Third Container*/ /* listing fix - past grant search */ #previousProjectsSearchResults .projectShortSummary p { width: 62%; } #footerContent {width:95%;} } @media only screen and (max-width: 860px) { .ie7 #primaryNav {width:100%} } @media only screen and (max-width: 745px) { #responsiveColourBar {background:grey} #primaryNav, .ie7 #primaryNav {float:right; margin:0 20px 20px 0; width:225px; clear:none} #megaMenu {display:none;} #megaMenu-Select {display:block;} #uniform-megaMenu-Select {display:block;} #searchHelpGuidesContainer ul li.first {margin-left:50px} #searchHelpGuidesContainer ul li.last {float:none; clear:left} /* Landing Page */ .imageGallery {width:45%; margin:0 0 5% 5%;} /* END Landing Page */ #incorrectMapDetailsContainer .formRowContainer { width: 60%; } #incorrectMapDetailsContainer .incorrectMapPostcode { width:95%; } } @media only screen and (max-width: 660px) { #responsiveColourBar {background:blue} #headerToolsNav .selector, #headerToolsNav select {display: block; margin-bottom: 20px;} #breadcrumbNav {display:none} #leftMenuContainer {float:none; width:100%;} #primaryLeftNav {display:none} #uniform-leftMenu-Select {display:block; margin:0 0 10px} #leftMenu-Select {display:block} .secondaryLeftNav ul {overflow:hidden;} .secondaryLeftNav li {float:left; width:33%} #oneColLayoutContainer {float: none; width:100%; margin-left:0;} #twoColLayoutContainer {float:none; width:100%; margin-left:0} #mainContentContainer, .mainContentContainer {float:none; width:100%; margin:0 0 20px;} #rightColContainer {float:none; width:100%;} /* HOMEPAGE */ #twitterBlogLatest .thirdContainer {float:none; width:100%; margin:0 auto; border:0} #newsEvents .thirdContainer {float:none; width:100%; margin:0 auto; border:0} .emptyContent {display:none} #rightOneThird #askBig {float:none; width:100%} #rightOneThird #signUpNewsLetter {float:none; width:100%;} #rightOneThird #pastProjects {float:none; width:100%} /* END HOMEPAGE */ /*LANDING PAGE*/ .videoContainerSpotLight {float:none; width:90%; margin:0 auto; padding:3%; overflow:hidden;} .videoContainerSpotLight .responsiveVideoContainer {float:none; width:100%; padding-bottom:50%; margin:0;} .videoContainerSpotLight .responsiveImageContainer {float:none; width:100%; margin:0} .videoContainerSpotLight ul {float:none; width:100%; margin:2% 0 0;} .videoContainerSpotLight ul li {float:left; margin:0 0 1%} .third {float:none; width:100%} .third h2 {border:0;} .thirdLast {float:none; width:100%} .thirdInner {border:0; padding:10px 0 0} .thirdLast .thirdInner {border:0;} #jobsRegionsCommunity {border:0} #jobsRegionsCommunity .third h2 {border:0; padding-left:0} #jobsRegionsCommunity .thirdInner {border:0;} #jobsRegionsCommunity .thirdLast .thirdInner {border:0} /*END LANDING PAGE*/ /* Third Container*/ .thirdContainerInner .smallThumbnail img {display:none;} .thirdContainerInner .largeThumbnail {margin:0} .thirdContainerInner .largeThumbnail img {display:none;} .thirdContainerInner .largeThumbnail .infoDetailsLeft {margin:5px 0 0;} /* END Third Container*/ /* Pagination */ .searchResultsOrderByContainer {margin-bottom:0!important} #previousProjectsSearchResults .paginationContainer {clear:both} .pagination {float:none} /* End Pagination */ #footerNav {margin:20px 0 0;} } @media only screen and (max-width: 640px) { #responsiveColourBar {background:lime} ul#regionNav {display:none} #uniform-regions-Select {display:block; margin:0 0 25px; float:right; width:100px;} #regions-Select {display:block; margin:0 0 25px; float:right; width:100px;} .ie7 #headerToolsNav {width:230px;} ul#toolsNav {clear:right;} ul#toolsNav #accessibility-colours p {display:none} #primaryNav {clear:right} /* LISTING PAGE */ .topSpotlight .topSpotlightImageContainer {width:100%; height:auto} .topSpotlight .topSpotlightImageContainer img {width:100%; height:auto} .topSpotlight .topSpotlight-content {float:none; position:relative; float:left; width:97%; height:auto; padding:3%} .topSpotlight .topSpotlight-content .quote {line-height:22px} .spotlight {float:none; width:92%; margin:0 auto 3%; padding:3%} /* END LISTING PAGE */ /* CONTENT PAGE */ /* Taxonomy / Key Facts */ dl.taxonomy-keyFacts {overflow:hidden; margin:0 0 40px} .taxonomy-keyFacts dt {float:left; width:45%; display:block; margin:0;} .taxonomy-keyFacts dd {float:left; width:50%; display:block; margin:0;} /* END CONTENT PAGE */ /* SEARCH PAST GRANTS FILTER */ .searchResultsOrderByContainer { width: 100%; } #tabContainerPreviousProjectsResults .filterAndPagination .selector { width: 60% !important; } #tabContainerPreviousProjectsResults .filterAndPagination select { width: 100% !important; } } @media only screen and (max-width: 450px) { #responsiveColourBar {background:violet} #uniform-regions-Select {margin:0 0 10px;} .ie7 #headerToolsNav {width:100px;} ul#toolsNav li {width:100px; display:block; float:none; margin: 0 0 15px 0;} ul#toolsNav li.last {width:122px; padding:0 0 0 7px} .ie7 ul#toolsNav li a.blueButton {width:80%;} ul#toolsNav li a { border: 0; padding: 0 4px 0 0; text-align: right; } #primaryNav {margin:20px 15px 10px 0} .ie7 #primaryNav {clear:both; float:left; width:95%; margin:10px auto} #searchHelpGuidesContainer ul li.first {margin-left:0px} #searchHelpGuidesContainer ul li.last {float:none; clear:left} #siteSearchContainer .roundedInput {width:100px} #homepageTopRoundabout .roundabout-in-focus .roundaboutInfoContainer {height:100%;} #homepageTopRoundabout .roundaboutInfoContent {width:95%; margin:0 auto} #homepageBottomRoundabout .roundabout-in-focus .roundaboutInfoContainer {height:100%;} #homepageBottomRoundabout .roundaboutInfoContent {width:95%; margin:0 auto} .roundaboutNav {bottom:15%; left:0; z-index:10000; width:100%;} .accordion-panel-wrapper-top .accordion-panel-wrapper-left {float:none; width:100%} .accordion-panel-wrapper-top .accordion-panel-wrapper-right {float:none; width:100%} .accordion-panel-wrapper-bottom .accordion-panel-wrapper-left {float:none; width:100%} .accordion-panel-wrapper-bottom .accordion-panel-wrapper-right {float:none; width:100%} /* Newsroom search filter*/ #newsroomFilterBasicSearch .roundedInput {width:70%} #dateRangeContainer .formRowContainer label {width:40px;} #previousProjectsDateRange #dateRangeContainer .formRowContainer label {width:20%;} /* Filter for pagination */ #uniform-newsFilterSelect {margin:5px 0 0; width:170px;} /* Form Page */ #login .formRowContainer {float:none; width:100%} #register .formRowContainer {float:none; width:100%} /* END Form Page */ /* News & Events page */ .newsEventsFilter .leftThirdContainer {width:48%} .newsEventsFilter .middleThirdContainer {width:48%} .newsEventsFilter .rightThirdContainer {width:48%} /* END News & Events page */ } @media only screen and (max-width: 350px) { #responsiveColourBar {background:orangered} #adviceLineDetails {float:none;} #footerTelNum {display:block; font-size:150%;} #socialMediaFooter {float:none; overflow:hidden} #nationalLotteryAndFooterMenu img {float:none;} /* News & Events page */ .newsEventsFilter .leftThirdContainer {float:none; margin:0 auto; padding:0; width:95%} .newsEventsFilter .middleThirdContainer {float:none; margin:0 auto; padding:0; width:95%} .newsEventsFilter .rightThirdContainer {float:none; margin:0 auto; padding:0; width:95%} /* END News & Events page */ #footerNav {float:none} #footerNav li {clear:left; float:none; border:0} } /* Accessibility Colours */ /* Colours to be set for accessibility choice */ body.blackText-whiteBackground {background:white!important; color:black!important} body.blackText-whiteBackground h1, body.blackText-whiteBackground h2, body.blackText-whiteBackground h3, body.blackText-whiteBackground p {color:black!important} body.blackText-whiteBackground a {color:blue!important} body.blackText-yellowBackground {background:yellow!important; color:black!important} body.blackText-yellowBackground h1, body.blackText-yellowBackground h2, body.blackText-yellowBackground h3, body.blackText-yellowBackground p, body.blackText-yellowBackground a {color:black!important} body.blackText-yellowBackground a {text-decoration: underline;} body.blackText-pinkBackground {background:pink!important; color:black!important} body.blackText-pinkBackground h1, body.blackText-pinkBackground h2, body.blackText-pinkBackground h3, body.blackText-pinkBackground p, body.blackText-pinkBackground a {color:black!important} body.blackText-pinkBackground a {text-decoration: underline;} body.blueText-whiteBackground {background:white!important; color:blue!important} body.blueText-whiteBackground h1, body.blueText-whiteBackground h2, body.blueText-whiteBackground h3, body.blueText-whiteBackground p, body.blueText-whiteBackground a {color:blue!important} body.blueText-whiteBackground a {text-decoration: underline;} /* Parital Show Hide Content */ .partialShowHideContent {height:0px; overflow:hidden} /* END Parital Show Hide Content */ .inactive {background:#ccc!important; color:#888!important; cursor:default !important; } .askBig {border:0; padding:0 15px; } .scWebEditInput { border:1px dotted red; } a#fdbk_tab { background-image: url("../images/feedback_trans_tab.png"); color: white; cursor: pointer; height: 102px; right: 0; overflow: hidden; position: fixed; text-indent: -100000px; top: 25%; width: 36px; z-index: 9000; } a#fdbk_tab, a#fdbk_tab_w { top: 70% !important; } a .fdbk_tab_right { left: auto !important; margin-left: auto !important; margin-right: 0 !important; right: 0 !important; width: 35px !important; } a#fdbk_tab_w, a#fdbk_tab_w { background-image: url("../images/feedback_trans_tab.png"); color: white; cursor: pointer; height: 102px; overflow: hidden; position: fixed; right: 0; text-indent: -100000px; top: 25%; width: 36px; z-index: 100505; } a#fdbk_tab_w { background-image: url("../images/feedback_trans_tab_welsh.png"); } .externalsite, .newwindow { margin-left:3px; width:auto !important; width:9px !important; height:9px !important; } #mapPinContainer { background: #ebe3d8; border: 1px solid #9e9891; width: 340px; margin-bottom:0px; } #mapPinContainer #mapPinContent { padding: 20px; overflow: hidden; padding-bottom:5px; } #mapPinContainer #mapPinContent h1 { color:#E2007A; display: block; margin: 0; padding: 0 0 20px 0; font-size: 1.6em; border:none !important; } #mapPinContainer #mapPinContent img { border: 3px solid #fff; box-shadow: 0px 0px 3px 3px #c5bfb5; float: left; margin: 0 17px 11px 0; } #mapPinContainer #mapPinContent p { padding: 0; margin: 0; } #mapPinContainer a.more { clear: both; display: block; border-top: 1px solid #ddd6c4; color: #E2007A; padding: 20px 47px 20px 20px; text-align: right; font-weight: bold; text-decoration: none; } #mapPinContainer a.more:hover { text-decoration: underline; } /*.infoBox { background-image: url('/images/design/map-container-tail.png'); background-position: center bottom; background-repeat:no-repeat; }*/ /*PAGES - SEARCH*/ .searchSwitch a {display: block; border-top: 2px dotted #00ADEF; padding-top: 12px; padding-bottom: 12px;} .searchSwitch a.last {padding-bottom: 0px;} .searchSwitch a.active {font-weight: bold; color: #000;} .searchSwitch a span {background: url('/b8e20a85176a4405befeee35beedc8c4/files/link-arrow-right-pink.png') right 50% no-repeat; padding-right: 10px; } .searchSwitch a.active span {background: url('/b8e20a85176a4405befeee35beedc8c4/files/link-arrow-right-black.png') right 50% no-repeat; padding-right: 10px; } /*tabs*/ .tabs {margin-top: 20px;} .tabs ul {padding: 0; clear: both;} .tabs ul li {float: left; display: block;} .tabs ul li a, .tabs ul li span {background: #eee; padding: 5px 10px; display: block; border-radius: 10px 10px 0 0; margin-right: 1px; color: #777; font-size: 110%;font-weight: normal;} .tabs ul li.active a, .tabs ul li.active span {background: #ddd; color: #000; cursor: default;} .tab-panes { border: 1px solid #ccc; padding: 20px 10px; clear: both;} .tab-panes a.moreLinkPinkArrow {/* font-size: 120%; */ margin-left: 0px;} .telligent a {border-left: 1px dotted #ddd; margin-left: 5px; padding-bottom: 5px; margin-bottom: 7px; padding-left: 12px; padding-right: 12px;} #mapContainer img{max-width: inherit;} .mailingListCheck label { padding-left:5px; } /* from 2015Prot - from screen.css*/ .content-fragment.login-and-create-user fieldset.join-details, .content-fragment.login-and-create-user fieldset.join-account, .content-fragment.login-and-create-user fieldset.join-password { float: none; background-color: transparent; border: none; padding: 0; } fieldset.field-list { border: none; margin: 1em 0; padding: 0; } ul.field-list { list-style-type: none; margin: 0; padding: 0; clear: both; } li.field-item { margin: 0; padding: .5em 0; } .field-list .field-item-input>input[type=text] { height: 29px; width: 306px; } .blueButtonOuter a, .roundedButton { padding: 0 10px; border: 0; color: #fff; font-weight: 700; border-radius: 5px; position: relative; } .table-header-column { border-top: dotted 1px #ccc; border-bottom: solid 1px #999; padding: 8px; font-size: 9px; margin: 0; text-transform: uppercase; white-space: nowrap; text-align: left; } .table-header-column .internal-link.sort-descending, .table-header-column .internal-link.sort-ascending { background-image: url('/b8e20a85176a4405befeee35beedc8c4/files/descending.gif'); background-repeat: no-repeat; width: 10px; height: 0px; padding: 6px 0 0 0; margin: 0; overflow: hidden; line-height: 9px; display: inline-table; display: -moz-inline-box; display: inline-block; position: relative; top: -1px; } .table-header-column .internal-link.sort-ascending { background-image: url('/b8e20a85176a4405befeee35beedc8c4/files/ascending.gif'); } .table-column { border-bottom: dotted 1px #ccc; padding: 8px; margin: 0; } td.table-column.application-title { max-width:200px; } .table-list td { text-align: left; } .table-header-column { border-top: dotted 1px #ccc; border-bottom: solid 1px #999; padding: 8px; font-size: 9px; margin: 0; text-transform: uppercase; white-space: nowrap; text-align: left; } .common-login .content-fragment.login-and-create-user fieldset { background-color: #F6F5F0; } .content-fragment.login-and-create-user fieldset { padding: 5px; background-color: #e6e6e6; border: 3px solid #ffffff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin: 0px; margin-bottom: 10px; margin-right: 10px; margin-top: 10px; display: inline; } ul.field-list { list-style-type: none; margin: 0; padding: 0; clear: both; } li.field-item { list-style: none; } /* from 2015Prot - new css */ .itv-container { width: 700px; overflow: hidden; } .itv-logo-container { float: left; width: 220px; min-height: 200px; } .itv-intro-container h2 { color: #0075AC; font-size: 190%; } .itv-intro-container { float: left; margin-bottom: 1em; margin-top: 0px; } .itv-intro-container.claimProject { float: right; width:450px; margin-bottom: 1em; margin-top: 0px; } .itv-intro { width: 480px; float: left; padding: 0 50px 0 0; box-sizing: border-box; } .itv-registration-form { width: 440px; float: left; margin-bottom: 50px; } .itv-container fieldset.field-list .field-list-description span{ width: 100%; } .itv-container fieldset.field-list.floatLeft { width: 440px; border-radius: 0; padding: 10px; box-sizing: border-box; } .itv-container.itv-blog-post fieldset.field-list.floatLeft { width: 700px; } .itv-login-error-msg { float: left; background-color: #FCF1F7; width: 440px; border-radius: 0; padding: 10px; box-sizing: border-box; } span.error-title { font-size: 11pt; font-weight: bold; color: rgba(255, 0, 0, 0.61); padding: 0 0 10px; } .radio-toggle { margin: 1em 0; display: block; float: left; width:100% } .radio-toggle label { float:left; margin-right:5px; } .radio-toggle label > input{ /* HIDE RADIO */ display:none; } .radio-toggle label > input ~ span{ cursor:pointer; } .radio-toggle span.radio-btn { padding: 5px 12px; } .radio-toggle label > input:checked ~ span{ background-color: #e2007a; } .creating-project .field-list .field-item-input>input[type=text]{ width: 95%; } .creating-project .field-list .field-item-input>select { background-color: white; height: 33px; width: 98%; } .join-account .field-list-description > span, .join-account .field-list-description > span { font-size: 20px !important; font-weight: normal !important; } .join-manual select { width: 310px; height: 33px; background: white; } .field-list .field-item-input>input[type=password] { height: 29px; width: 306px; } /* password meter */ .passwordmeter { height: 54px; margin: 2px 0; } #passwordDescription { border: 0 !important; color: rgb(182, 182, 182); } #passwordStrength { height:29px; display:block; float:left; } .strength0{ width:306px; background:#F7F7F7; } .strength1 { width:50px; background:#ff0000; } .strength2 { width:100px; background:#ff5f5f; } .strength3 { width:150px; background:#b77f00; } .strength4 { background:#D5D500; width:200px; } .strength5 { background:#4dcd00; width:250px; } /* end password meter */ fieldset.field-list.join-account.no-details.profile-picture { float: right; width: 200px; } .field-image-holder { width: 190px; height: 200px; background: white; margin: 10px 0; position:relative; overflow: hidden; } #profilePicture { display:none; } #profilePicture { width: 200px; } input#uploadProfilePicture { border: 0 !important; } .profile-picture .field-item-input { position: relative; overflow: hidden; margin: 2px 0; width: 170px; text-align: left; padding: 5px 10px; box-sizing: border-box; } #avatars-list-opener { cursor: pointer; } .profile-picture .field-item-input input#uploadProfilePicture { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); -webkit-filter: alpha(opacity=0); } /* TRYING AVATAR SELECTION */ .avatars-list { width: 190px; height: 200px; float: left; } .avatar { width: 85px; height: 90px; margin: 5px; float: left; cursor: pointer; background: white; background-repeat: no-repeat; background-size: 100%; } #profileCanvas, #captureProfile, #profilePicture { position: absolute; }