/* * @file * global.styles * * Styles you add here will load for all device sizes, they are "global", as * opposed to "responsive" styles, which only load for a given breakpoint (media * query) that you set in theme settings. See the README for more details. * * * How to use this file: * -------------------- * * There are many empty selectors and some basic styles to act as a guide. * Nothing is set in stone and you can change anything - even delete all of it * and start with your own clean slate. * * See global.base also which includes normalize.css and some additional * helper classes and base styles. */ /* ============================================================================= * Base * ========================================================================== */ html { background: #fff; } body { font-family: "Trebuchet MS", "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 87.5%; } /* ============================================================================= * Branding * ========================================================================== */ /* * Wraps all the branding elements, logo, name and slogan */ #branding { float: left; padding: 10px 0; } /* * Logo */ #logo { float: left; padding: 10px 20px 5px 10px; } #logo img { vertical-align: bottom; } /* * Wrapper for the site name and slogan (hgroup) */ #name-and-slogan { float: left; padding-top: 0px; } /* * Site name (h1) */ #site-name { margin: 0; } #site-name a:link, #site-name a:visited { text-decoration: none; } #site-name a:hover, #site-name a:focus { text-decoration: underline; } /* * Site slogan (h2) */ #site-slogan { margin: 0; } /* ============================================================================= * Search block * ========================================================================== */ #block-search-form .inner .content { padding-top: 0; } #block-search-form .form-item input.form-text { padding: 0 5px; height: 24px; font-size: 14px; width: 80%; } /* Position only if in header */ #page #header #block-search-form { float: right; /* LTR */ width: 25%; min-width: 220px; margin-top: 20px; margin-right: 10px; } #block-search-form form input.form-submit { background: #666 url(images/search.png) center center no-repeat; border: 0; height: 26px; margin: 0px 4px 0 -5px; text-indent: -999em; width: 26px; z-index: 1; position: absolute; top: 1; border-radius: 0px; } .block-search .form-submit:hover, .block-search .form-submit:focus, .block-search .form-submit:active { cursor: pointer; } /* ============================================================================= * Regions * ========================================================================== */ #main { margin-top: 0px; } .region { padding-top: 10px; } /* ============================================================================= * Page content header * ========================================================================== */ /* * The main page title (h1) */ #page-title { margin: .5em 0; } /* ============================================================================= * Misc Global Styles * ========================================================================== */ /* * Aggregator feed source */ #aggregator .feed-source .feed-icon { display: inline; float: none; margin-right: 10px; } .feed-details dt, .feed-details dd { display: inline; margin: 0; } /* * Generic styles for links. See the ul.links declaration in node and comment stylesheets */ ul.links { margin: 0; padding: 0; } ul.links.inline { display: block; } ul.links li { display: inline; list-style: none; padding: 0 10px 0 0; } /* * Search results are an ordered list so reset the margin */ .search-results { margin: 0; } /* ============================================================================= * Links * ========================================================================== */ a { text-decoration: none; } a:link, a:visited {} a:active, a.active {} a:hover, a:focus { text-decoration: underline; } /* ============================================================================= * Menu Bar region menus * ========================================================================== */ /* * Use one of the following id's for granular control: * - #menu-bar (menu bar region) * - #primary-menu (main menu) * - #secondary-menu (secondary/user menu) * You can target all of these with #main-menu or div[id$="menu-bar"] */ #menu-bar { clear: both; margin: 0px 0px 0px 0px; } #menu-bar ul, #menu-bar ul.menu { margin: 0; padding: 0; } #menu-bar li, #menu-bar ul.menu li { display: inline; float: left; list-style: none; margin: 0; padding: 0; } #menu-bar li a, #menu-bar ul.menu li a { display: block; font-weight: bold; white-space: nowrap; border-left: 0; border-top: 0; padding: 0 15px; text-decoration: none; height: 2.5em; line-height: 2.5em; } #menu-bar li a:visited, #menu-bar ul.menu li a:visited {} #menu-bar li a:hover, #menu-bar li a:focus, #menu-bar ul.menu li a:hover, #menu-bar ul.menu li a:focus {} #menu-bar .block { margin-bottom: 0; } /* ============================================================================= * Superfish * ========================================================================== */ ul.sf-menu { margin-bottom: 0; } ul.sf-menu a { } ul.sf-menu li:hover, ul.sf-menu li.sfHover { outline: 0; } ul.sf-menu a:focus, ul.sf-menu a:hover, ul.sf-menu a:active { outline: 0; } .sf-menu li:hover > ul, .sf-menu li.sfHover > ul { left: 0; top: 2.5em; } .sf-menu li li:hover > ul, .sf-menu li li.sfHover > ul { left: 12em; top: 0; } /* * Superfish blocks */ .block-superfish ul { margin: 0 !important; padding: 0 !important; } .block-superfish li { margin: 0 !important; padding: 0 !important; } /* * Vertical style */ .sf-vertical { width: 100%; } .sf-vertical li { width: 100%; } .sf-vertical li:hover ul, .sf-vertical li.sfHover ul { left: 100%; top: 0; margin: 0; padding: 0; } .sf-vertical li a { padding: 0 10px; } /* * Navbar style */ .sf-navbar { padding-bottom: 0 !important; } /* * Sensible padding for the default style */ .sf-menu.sf-style-default a { padding: 0 10px; } /* ============================================================================= * Menus, usually blocks * ========================================================================== */ ul.menu { padding-left: 15px; } ul.menu ul { padding-left: 15px; } ul.menu li { margin: 0; } /* If li.content exists it's a problem, so reset the padding */ .block .menu li.content { padding: 0; } /* ============================================================================= * Book navigation menu * ========================================================================== */ .book-navigation .page-up { /* Prevent text wrapping to a new line, assumes English "up" is used (two characters) */ min-width: 2em; white-space: nowrap; } .book-navigation .menu { margin-left: 0; } /* ============================================================================= * Breadcrumbs * ========================================================================== */ #breadcrumb { margin: 0 0 0 10px; padding-top: 10px; } /* If the label is set to show in theme settings the label class is added */ #breadcrumb .breadcrumb-label { font-size: 1em; display: inline; padding-right: 10px; } #breadcrumb .breadcrumb-label:after { content: ":"; } #breadcrumb ol { margin: 0; padding: 0; } #breadcrumb .with-breadcrumb-label ol { display: inline; } #breadcrumb li { list-style: none; display: inline; } /* ============================================================================= * Pagers * ========================================================================== */ ul.pager { clear: both; margin: 0; text-align: center; } .item-list ul.pager li { margin: 0; } ul.pager li { background-image: none; display: inline; list-style-type: none; padding: .5em; } ul.pager li.pager-current { font-weight: 700; } .block ul.pager li { margin: 0; } /* ============================================================================= * Skip Navigation * ========================================================================== */ #skip-link { left: 50%; margin-left: -6.5em; margin-top: 0; padding: 0 0.5em; position: absolute; width: 12em; z-index: 50; } #skip-link a { background: #444; background: rgba(0,0,0,0.6); color: #fff; display: block; line-height: 2; padding: 0; text-align: center; text-decoration: none; } #skip-link a:link, #skip-link a:visited { background: #444; background: rgba(0,0,0,0.6); color: #fff; display: block; line-height: 2; padding: 0; text-align: center; text-decoration: none; } #skip-link a:hover, #skip-link a:focus, #skip-link a:active { outline: 0; } /* ============================================================================= * Tabs (local tasks) * ========================================================================== */ #tasks { margin-bottom: 15px; } ul.primary { border-bottom-color: #ccc; margin: 20px 0; padding: 0 0 0 5px; } ul.primary li { display: block; float: left; margin: 0 1px -1px; } ul.primary li a { background-color: #f5f5f5; border-color: #ccc; margin-right: 1px; padding: 0 10px; display: block; float: left; height: 1.5em; line-height: 1.5em; } ul.primary li a:hover, ul.primary li a:focus { background-color: #eee; border-color: #ccc; } ul.primary li.active a, ul.primary li.active a:hover, ul.primary li.active a:focus { background-color: #fff; border-bottom-color: #fff; } /* ============================================================================= * Action links * ========================================================================== */ ul.action-links { margin: 20px 0 0; list-style: none; } /* ============================================================================= * Field Styling * ========================================================================== */ /* * Labels are h2 in Adaptivetheme. Use a strong selector to mitigate unwanted ineritance issues */ .field-label { font-size: 1em; font-weight: 700; font-family: inherit; line-height: inherit; margin-bottom: 0; } /* * Taxonomy */ .field-type-taxonomy-term-reference { /* The same bottom margin as p, blockquote, ul, ol and dl */ margin-bottom: 1.5em; } .field-type-taxonomy-term-reference.field-label-inline .field-items { margin: 0; padding: 0; } .field-type-taxonomy-term-reference.field-label-inline .field-item { display: inline; list-style: none; padding: 0 10px 0 0; } /* * Float left setting */ .ia-l .field-type-image figure, .iat-l .field-type-image figure { margin: 5px 20px 15px 0; } /* * Centered setting */ .ia-c .field-type-image figure, .iat-c .field-type-image figure { margin: 5px auto 15px; } /* * Float right setting */ .ia-r .field-type-image figure, .iat-r .field-type-image figure { margin: 5px 0 15px 20px; } /* ============================================================================= * Block Styling * ========================================================================== */ /* * Main wrapper for most blocks, block_system_main does not have it */ .block { margin-bottom: 10px; } /* * Block title */ .block-title { margin: 0; padding: 5px 10px; } /* * Block content wrapper */ .block-content { padding: 10px; } .block-content ul, .block-content ol { padding: 0 0 0 15px; margin: 5px; } .block-content li { margin: 0; padding: 0 0 .3em 0; } /* center powered by drupal */ #block-system-powered-by .block-content { text-align: center; } /* ============================================================================= * Node Styling * ========================================================================== */ .node { margin-bottom: 20px; } .node .node-title { margin: 0; } .node ul.links.inline { padding: 5px 10px; } /* ============================================================================= * Comment Styling - Comments, comment wrapper, comment form * ========================================================================== */ /* * Wrapper for the list of comments and its titles */ #comments { margin: 1.5em 0; } #comments h2.comment-title { margin: 0; } #comments h2.comment-form { margin: 0; } /* * Wrapper for a single comment */ .comment { margin-bottom: 20px; } /* * Comment title */ .comment-title { margin: 0; } /* * "New" marker for comments that are new for the current user */ .new { color: #c00; } /* * Nested comments are indented */ .indented { margin-left: 40px; } /* ============================================================================= * Forms * ========================================================================== */ form input.form-submit { border: 1px solid #bbb; padding: .4em 1em; font-weight: bold; font-size: 1em; border-radius: 5px; margin-right: 10px; } /* Typography, background, borders, padding for form fields */ .form-item input, .form-item select, .form-item textarea { padding: 1px 5px; border: 1px solid #ccc; border-radius: 3px; } .form-item input.error, .form-item textarea.error, .form-item select.error { border: 1px solid #c00; } .form-item label { font-weight: 700; } /* * Highlight marks and form required mark */ .marker, .form-required { color: #c00; } .form-item .description { font-size: 0.85em; } .container-inline div, .container-inline label { display: inline; } /* * Define consistent borders */ fieldset { border: 1px solid #ccc; } /* * Buttons used by contrib modules like Media */ a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; } /* * Password confirmation */ .password-parent, .confirm-parent { margin: 0; } /* ============================================================================= * Tables * ========================================================================== */ table { margin: 10px 0; padding: 0; width: 100%; } table.sticky-header { z-index: 10; } table, thead, tbody, tr, th, td { border-color: #ccc; } table, td, th { vertical-align: middle; } caption, th, td { text-align: left; } thead tr { font-weight: 700; background-color: #e5e5e5; } td, th { border-bottom: 0; margin: 0; padding: 5px 7px; } tbody tr { border-top: 1px solid #ccc; } tr.odd { background: #fff; } tr.info, tr.even, tr:nth-child(2n+2) { border-bottom: 0; background-color: #f5f5f5; } tr.odd td.active { background-color: #eee; } tr.even td.active { background-color: #ebebeb; } /* * Forum tables * Core sets white-space to nowrap, which makes no sense */ #forum td .created, #forum td .posts, #forum td .topics, #forum td .last-reply, #forum td .replies, #forum td .pager { white-space: normal; } /* ============================================================================= * Messages * ========================================================================== */ /* Left and right margin are set by the global gutter width */ div.messages { margin: 0px 0px 0px 0px; } div.messages ul { margin-top: 0; margin-bottom: 0; } /* * Unpublished nodes */ .node-unpublished p.unpublished, .comment-unpublished p.unpublished { color: pink; color: rgba(239, 170, 170, 0.4); font-family: Impact,"Arial Narrow",Helvetica,sans-serif; font-size: 75px; font-weight: bold; height: 0; line-height: 1.2; margin: 0; padding: 0; overflow: visible; text-align: center; text-transform: uppercase; word-wrap: break-word; } /* * Otherwise these elements will appear below the "Unpublished" text */ .lt-ie8 {} .lt-ie8 .node-unpublished > *, .lt-ie8 .comment-unpublished > * { position: relative; } /* ============================================================================= * Maintenance pages * ========================================================================== */ .maintenance-page {} .maintenance-page .container { padding: 40px 0; } .maintenance-page #site-name, .maintenance-page #page-title { margin: 0; } .db-offline .container { margin: 0 auto; padding: 40px 0; width: 100%; max-width: 960px; } .db-offline div.messages { margin: 20px 0 0; } .db-offline #content { padding: 20px 0; } /* ============================================================================= * Misc overrides for contrib modules * ========================================================================== */ /* * Admin menu overrides */ #admin-menu { margin: 0; padding: 0; } /* Make Views slideshow responsive */ .views-slideshow-cycle-main-frame-row, .views-slideshow-cycle-main-frame { width: 100% !important; } /* ============================================================================= * CSS3 Options in Theme Config * ========================================================================== */ /* ROUND CORNERS */ /*3px*/ body.rc3 #menu-bar, body.rc3 .block-inner, body.rc3 .node ul.links { border-radius: 3px; } body.rc3 h2.block-title, body.wh-pbg.rc3 #menu-bar, body.tn-pbg.rc3 #menu-bar, body.gy-pbg.rc3 #menu-bar { border-radius: 3px 3px 0px 0px; } body.rc3 #menu-bar ul li.first a { border-radius: 3px 0 0 3px; /* LTR */ } body.wh-pbg.rc3 #menu-bar ul li.first a, body.tn-pbg.rc3 #menu-bar ul li.first a, body.gy-pbg.rc3 #menu-bar ul li.first a { border-radius: 3px 0 0 0; /* LTR */ } /*7px*/ body.rc7 #menu-bar, body.rc7 .block-inner, body.rc7 .node ul.links { border-radius: 7px; } body.rc7 h2.block-title, body.wh-pbg.rc7 #menu-bar, body.tn-pbg.rc7 #menu-bar, body.gy-pbg.rc7 #menu-bar { border-radius: 7px 7px 0px 0px; } body.rc7 #menu-bar ul li.first a { border-radius: 7px 0 0 7px; /* LTR */ } body.wh-pbg.rc7 #menu-bar ul li.first a, body.tn-pbg.rc7 #menu-bar ul li.first a, body.gy-pbg.rc7 #menu-bar ul li.first a { border-radius: 7px 0 0 0; /* LTR */ } /*11px*/ body.rc11 #menu-bar, body.rc11 .block-inner, body.rc11 .node ul.links { border-radius: 11px; } body.rc11 h2.block-title, body.wh-pbg.rc11 #menu-bar, body.tn-pbg.rc11 #menu-bar, body.gy-pbg.rc11 #menu-bar { border-radius: 11px 11px 0px 0px; } body.rc11 #menu-bar ul li.first a { border-radius: 11px 0 0 11px; /* LTR */ } body.wh-pbg.rc11 #menu-bar ul li.first a, body.tn-pbg.rc11 #menu-bar ul li.first a, body.gy-pbg.rc11 #menu-bar ul li.first a { border-radius: 11px 0 0 0; /* LTR */ } /* DROP SHADOWS */ body.ds2 #main .block-inner, #page .block.ds2 .block-inner { box-shadow: 1px 1px 2px #aaa; } body.ds4 #main .block-inner, #page .block.ds4 .block-inner { box-shadow: 2px 2px 4px #aaa; }