/******************************************************************************
 * This site was created by:
 * - Eamonn, Paul and Clinton at One Ltd. (www.oneltd.co.uk)
 * - Dave at Alberon (www.alberon.co.uk)
 * - Chris, Max, Andy and Paolo at Oxford Physics (www.physics.ox.ac.uk)
 *
 * Table of Contents
 * =================
 *
 * 1. Fonts - General fonts
 * 2. Layout - Particular regions of a page
 * 3. Pages - Particular pages on the site (including Views) and edit pages
 * 4. Blocks - Particular blocks
 *
 *****************************************************************************/



/******************************************************************************
 * 1. Fonts
 * ========
 * 1.0 Text
 * 1.1 Links
 * 1.2 Headers
 * 1.3 Colours
 *
 *
 * Fonts for a specific area (e.g. the primary-links at the top/bottom of the
 * page) can usually be found in the specific definition rather than here.
 * This spot is mainly for the overarching generic font style and colours which
 * are easily overridden.
 *****************************************************************************/

/******************************************************************************
 * 1.0 Fonts -> Text
 *
 * How the general feel of the website should look. Is split up into different
 * sizes, small, medium and large, which can be switched via javascript
 *
 *****************************************************************************/
body /* i.e. the default font size */
{
    font-size: 13px;
    text-align: center; /* IE6 */
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    line-height: 1.5em;
    color: #333;
}

.small-font
{
    font-size: 13px;
}

.medium-font
{
    font-size: 15px;
}

.large-font
{
    font-size: 17px;
}

.italic
{
    font-style:italic;
}

/******************************************************************************
 * 1.1 Fonts -> Links
 *
 * Links are almost font like, even if some of the rules here are absolutely
 * nothing to do with fonts!
 ******************************************************************************/
a
{
    color: #002147;
    text-decoration: none;
}
  a:hover
  {
      color: #d31245;
  }
  a.nounderline
  {
      text-decoration: none;
  }
  body.not-front a.underline,
  body.not-front .underline-links a
  {
      text-decoration: underline;
  }

.fullstorylink a,
a.fullstorylink
{
    font-weight: bold;
    text-decoration: none;
    background-image: url("images/read-more-arrow.gif");
    background-position: right;
    background-repeat: no-repeat;
    color: #555;
    font-size: 1.25em;
    font-weight: bold;
    padding-right: 10px;
    text-decoration: none;
}

.fullstorylink a:hover,
a.fullstorylink:hover
{
    color: #D31245;
}

body .arrowlink a
{
    background: #002147 url(images/home-section-arrow.png) no-repeat right center;
    color: #fff;
    font-size:0.9em;
    display: block;
    line-height: 1.3em;
    padding: 6px 8px;
    text-transform: uppercase;
    text-decoration:none;
}
    .arrowlink a:hover
    {
        background-color: #cf013b;
    }
    .home-red .arrowlink a
    {
        background-color: #cf013b;
    }
    .home-red .arrowlink a:hover
    {
        background-color: #002147;
    }
    .home-blue .arrowlink a,
    .medium-blue .arrowlink a
    {
        background-color: #467593;
    }
    .home-blue .arrowlink a:hover
    {
        background-color: #002147;
    }
    .home-vanilla .arrowlink a
    {
        background-color: #a19588;
    }
    .home-vanilla .arrowlink a:hover
    {
        background-color: #002147;
    }

    .light-blue .arrowlink a
    {
        background-color: #698CA8;
    }
    .light-blue .arrowlink a:hover,
    .medium-blue .arrowlink a:hover
    {
        background-color: #cf013b;
    }

body a.arrow {
  font-size: 0.9em;
  text-decoration: none;
}

body a.arrow::before {
  content: "> ";
  color: red;
  font-weight: bolder;
}


/******************************************************************************
 * 1.2 Fonts-> Headers
 *****************************************************************************/
h1, h2, h3, h4, h5, h6
{
    color: #002147;
    font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Tahoma, sans-serif;
}

h1
{
    font-size: 2.3em;
    margin: 0 0 0.7em 0;
    letter-spacing: -1px;
    line-height: 1.2em;
}

h2
{
    font-size: 1.8em;
    letter-spacing: -1px;
    line-height: 1.2em;
}

h3
{
    font-size: 1.3em;
    letter-spacing: -1px;
    line-height: 1.4em;
}

h4, h5, h6
{
    font-size: 1em;
}

ul, ol{
    padding: 0 0 0 3em;
}

ul ul,
ul ol,
ol ul,
ol ol
{
    /* Nested lists */
    margin: 0;
}

.field-field-lead,
p.lead
{
    font-size: 16px;
    font-weight: bold;
    line-height: 1.3em;
    margin-top: 19px;
}

/* Hack for Linux systems overflowing in inputs */
input
{
    font-family:Arial,Helvetica,Verdana,Tahoma,sans-serif;
    font-size:12px;
}

/*******************************************************************
 * 1.3 Fonts -> Colours
 *
 * Some helper classes to colour up fonts
 *******************************************************************/

.grey
{
    color:#555;
}

.light-grey
{
    color: #888;
}



/********************************************************************
 * 2. Layout
 * =========
 *
 * This is divided up into (fairly) logical sections of the page.
 *
 * From top to bottom, left to right:
 *  2.1 .header (and .footer common elements)
 *     * header.search-box
 *     * header.blue
 *     * header.grey
 *     * header.white.titlebar
 *  2.2 .main-text
 *     * .left-column
 *     * .main-content
 *     * .middle-right-column-column
 *     * .right-column
 *  2.3 .footer
 *     * .white
 *     * .grey
 *     * .blue
 *  2.4 Miscellaneous
 *     * Collapsible sections
 *     * Images
 *     * Messages
 *       * Revisioning Information
 *     * Tables
 *     * Forms
 *     * Pagination
 *     * Comments
 *     * Tag clouds
 *
 *  Things to note
 *  ==============
 *
 *  1. The .footer.grey is different from .header.grey because
 *  it is not encased in a container
 *
 *  2. The whole layout assumes a six column structure as defined
 *  in grid.css. If you want to change the global width of the
 *  container, you can achieve it by editing grid.css
 *
 *******************************************************************/
/********************************************************************
 * Layout->Reset
 *******************************************************************/
html
{
    margin: 0;
    padding: 0;
    overflow-y: scroll;
}

body
{
    margin: 0;
    padding: 0;
}

/********************************************************************
 * 2.1 Layout->Header and Footer
 * -----------------------------
 * 2.1.1 Search box
 * 2.1.2 Grey
 * 2.1.3 White
 * 2.1.4 Breadcrumbs
 * 2.1.5 Tabs
 *
 * A lot of styling is duplicated with headers and footers so the
 * duplication is moved into a joint header/footer styling here.
 *
 * This only applies for the navigation bit. Everything else
 * is segregated, and conversely, things that are different about
 * navigation are still under this subsection for clarity
 *******************************************************************/
.header .blue
{
    min-height: 53px;
    background-color: #002147;
    margin: 0;
    height:62px;
    padding: 0 0 12px 0;
}

/**
 * Hide font chooser if no JS
 *
 * ".no-js" breaks sliders. Don't know why and didn't care enough to investigate but
 * TODO: make it no-js for parity with .has-js.
 */
body.nojs .header .blue .font-chooser
{
    display: none;
}

.header .blue .font-chooser
{
    float:left;
    padding-right:20px;
}
    .header .blue .font-chooser a
    {
        color: #ddd;
    }
        .header .blue .font-chooser a.small-font
        {
            font-size:13px;
        }
        .header .blue .font-chooser a.medium-font
        {
            font-size:17px;
            line-height:1.5em;
        }
        .header .blue .font-chooser a.large-font
        {
            font-size:22px;
        }

        .header .blue .font-chooser a.current
        {
            text-decoration: underline;
        }


ul.navigation
{
    float: left;
    margin: 0;
    padding: 0;
    max-width: 780px;
    list-style-type: none;
}

ul.navigation li
{
    float: left;
    margin: 0 4px 0 0;
}
    .header ul.navigation li
    {
        border-left: 1px solid #002147; /* Ensures the widths match the footer */
        border-right: 1px solid #002147;
    }

.navigation li a,
.navigation li span
{
    display: block;
    padding: 13px 10px 0 10px;
    font-family: DINCondensedA, "Tw Cen MT Condensed", "Arial Narrow Bold", "Arial Narrow", Arial, sans-serif;
    font-size: 18px;
    line-height: 40px;
}

.navigation li span
{
    cursor: default;
}

.din-loaded .navigation li a,
.din-loaded .navigation li span
{
    text-transform: uppercase;
    font-size: 21px;
}

    .header .navigation li a,
    .header .navigation li span
    {
        color: #fff;
        padding-top: 22px;
    }

    .footer .navigation li a,
    .footer .navigation li span
    {
        background: #fff;
        border: 1px solid #ddd;
        color: #002147;
        padding-top: 0;
    }

.navigation li.active-trail a,
.navigation li a:hover
{
    background: #D31245;
}

.footer .navigation li.active-trail a,
.footer .navigation li a:hover
{
    color:#fff;
}

/* Dropdown menus */
.navigation li.submenu {
    position: relative;
}

.header .navigation li.submenu:hover {
    background: #dfdfdf;
}

.header .navigation li.submenu span {
    height: 52px;
}

.header .navigation li.submenu:hover span {
    color: #002147;
}

.footer .navigation li.submenu:hover span {
    color: #002147;
    background: #dfdfdf;
    border-color: #b3b3b3;
    border-top: none;
    padding-top: 1px;
    position: relative;
    z-index: 20; /* Above the menu to make it look like there's no border */
}

.navigation li.submenu ul {
    background: #dfdfdf;
    border-left: 1px solid #b3b3b3;
    border-right: 1px solid #b3b3b3;
    border-bottom: 1px solid #b3b3b3;
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}

.header .navigation li.submenu ul {
    left: -1px;
    top: 74px;
}

.footer .navigation li.submenu ul {
    border-top: 1px solid #b3b3b3;
    bottom: 41px;
    left: 0;
}

.navigation li.submenu:hover ul {
    display: block;
}

.navigation li.submenu ul li {
    border: none;
    float: none;
    margin: 0;
    padding: 0;
}

.navigation li.submenu ul li:first-child {
    border-top: none;
}

.navigation li.submenu ul a {
    background: #dfdfdf;
    border: none;
    color: #002147;
    display: block;
    font-size: 20px;
    line-height: 34px;
    margin: 0;
    min-width: 150px;
    padding: 0 9px;
    text-transform: none;
}

.navigation li.submenu li.active-trail a {
    color: #D31245;
}

.navigation li.submenu ul a:hover {
    background: #ededed;
    color: #D31245;
}

/******************************************************************************
 * 2.1.1 Layout -> Header -> Right Hand side (inc. Search box)
 *****************************************************************************/
.header .rhs
{
    float: right;
    padding-top:31px;
}

.header .search-box
{
    float:right;
   /* GA: added when porting to Drupal 7 version */
   min-width: 175px; */
}

.header .search-box .form-item
{
    float: left;
    /*margin: 0 5px 0 0; */
    margin: -13px 5px 0 0;
}

.header .search-box .form-item input
{
    width:120px;
    background: #002147;
    border: 2px solid #4d647f;
    color: #fff;
    padding: 3px 5px;
}

.header .search-box .form-submit
{
    background: #467593;
    border: none;
    color: #fff;
    float: left;
    font-weight: bold;
    padding: 4px 5px;
    text-transform: uppercase;
    /* GA: added wehn porting theme to D7*/
    margin: -13px 0 0 0;
}

/******************************************************************************
 * 2.1.2 Layout -> Header -> Grey
 *
 * Below the blue top.
 *****************************************************************************/
.header .grey
{
    background-color:#EDEDED;
    color:#002147;
    font-size:1.25em;
    min-height: 1.25em;
    margin: 0 auto;
    padding: 10px;
}

.header .grey a:hover
{
    color:#D31245;
}


.header .grey ul.login-buttons
{
    float:right;
    margin:0;
    padding:0;
}

.header .grey ul.login-buttons li
{
    float:left;
    list-style-type:none;
    margin:0 0.7em;
}

.header .grey ul li:last-child
{
    margin-right:0.5em;
}

/******************************************************************************
 * 2.1.3 Layout -> Header -> White Title Bar
 *****************************************************************************/
.header .titlebar
{
    padding-top:30px;
    zoom: 1; /* For IE7 */
}

.header .titlebar .site-title
{
    color: #002147;
    display: block;
    float: left;
    font-family: DINCondensedA, "Tw Cen MT Condensed", "Arial Narrow Bold", "Arial Narrow", Arial, sans-serif;
    font-size: 63px;
    line-height: 1em;
    letter-spacing: -2px;
    margin-bottom: 16px;
    margin-top: 3px;
    font-weight: normal;
}
    .header .titlebar .site-title:hover
    {
        color: #d31245;
    }

.header .titlebar .logo
{
    float: right;
}
    .header .titlebar .logo img
    {
        display: block;
    }


/******************************************************************************
 * 2.1.4 Layout -> Header-> White Title Bar -> Breadcrumbs
 *
 * This is taken pretty much as is from the original CSS because
 * I assume it is about as lean as it could possibly get.
 *
 * you can also use these classes by
 *  <div class="medium-blue"><a class="arrowlink"></a></div>
 *****************************************************************************/

.header .titlebar ul.breadcrumbs
{
    clear: both;
    margin: 0;
    padding: 0;
    list-style-type: none;
    /*border-top: 1px solid #000;*/ /*GA removed*/
    margin-bottom:28px;
    overflow: hidden;
    background-color: #ededed;
    position: relative; /* For IE7 */
}
.header .titlebar ul.breadcrumbs li
{
    float: left;
    margin-top: 1px;
}
    .header .titlebar ul.breadcrumbs li a,
    .header .titlebar ul.breadcrumbs li span
    {
        background-image: url(images/breadcrumbs.png);
        background-position: 0 -198px;
        color: #fff;
        display: block;
        font-size: 13px;
        font-weight: bold;
        height: 32px;
        left: -18px;
        line-height: 32px;
        margin-right: -30px;
        padding-left: 32px;
        padding-right: 47px;
        position: relative;
    }
    .header .titlebar ul.breadcrumbs li.breadcrumb-1 a,
    .header .titlebar ul.breadcrumbs li.breadcrumb-1 span
    {
        background-position: 0 -66px;
    }
    .header .titlebar ul.breadcrumbs li.breadcrumb-2 a,
    .header .titlebar ul.breadcrumbs li.breadcrumb-2 span
    {
        background-position: 0 -99px;
    }
    .header .titlebar ul.breadcrumbs li.breadcrumb-3 a,
    .header .titlebar ul.breadcrumbs li.breadcrumb-3 span
    {
        background-position: 0 -132px;
    }
    .header .titlebar ul.breadcrumbs li.breadcrumb-4 a,
    .header .titlebar ul.breadcrumbs li.breadcrumb-4 span
    {
        background-position: 0 -165px;
    }
    .header .titlebar ul.breadcrumbs li.breadcrumb-5 a,
    .header .titlebar ul.breadcrumbs li.breadcrumb-5 span,
    .header .titlebar ul.breadcrumbs li.breadcrumb-6 a,
    .header .titlebar ul.breadcrumbs li.breadcrumb-6 span,
    .header .titlebar ul.breadcrumbs li.breadcrumb-7 a, /* Just in case, hopefully there will never be this many */
    .header .titlebar ul.breadcrumbs li.breadcrumb-7 span,
    .header .titlebar ul.breadcrumbs li.breadcrumb-8 a,
    .header .titlebar ul.breadcrumbs li.breadcrumb-8 span,
    .header .titlebar ul.breadcrumbs li.breadcrumb-9 a,
    .header .titlebar ul.breadcrumbs li.breadcrumb-9 span
    {
        background-position: 0 -198px;
    }
    .header .titlebar ul.breadcrumbs li a:hover
    {
        background-position: 0 0;
    }
    .header .titlebar ul.breadcrumbs li span
    {
        cursor: default;
    }
div.no-breadcrumbs
{
    /*background-color: #002147; */ /* GA removed */
    clear: both;
    height: 1px;
    margin-bottom:28px;
}


/******************************************************************************
 * 2.1.5 Layout -> Tabs
 *
 * These tabs are the ones that Drupal define by default (e.g. Edit, View)
 * and those found on the profile pages
 *****************************************************************************/

/* Container */
.tabs-container
{
    clear: both;
    padding-bottom: 21px;
}
    .tabs-container.primary-tabs
    {
        height:31px;
        background: url(images/tabs-bg-primary.gif);
    }
    .tabs-container.secondary-tabs
    {
        height:22px;
        background: url(images/tabs-bg-secondary.gif);
    }

/* List */
ul.tabs
{
    border: none;
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
    white-space: normal;
}

ul.tabs.secondary
{
    padding-left: 30px;
}

/* Tabs */
ul.tabs li
{
    float: left;
    margin-right: 2px;
    padding: 0;
    white-space: nowrap;
}
    ul.tabs.primary li
    {
        height: 31px;

    }
    ul.tabs.secondary li
    {
        height: 29px;
    }

ul.tabs.secondary li,
ul.tabs.secondary li.active,
ul.tabs.secondary li.ui-tabs-selected
{
    border-color: #fff;
}

/* Links */
ul.tabs li a
{
    background-color: #eee;
    border: none;
    color: #666;
    float: left;
    font-weight: bold;
    margin: 0;
    text-decoration: none;
}
    ul.tabs.primary li a
    {
        font-size: 14px;
        height: 24px;
        line-height: 24px;
        padding: 1px 14px 0 14px;
    }

    ul.tabs.secondary li a
    {
        font-size: 12px;
        line-height: 22px;
        height: 22px;
        padding: 1px 12px 0 12px;
    }

ul.tabs li a:hover
{
    color: #D31245;
}

ul.primary li.active a,
ul.secondary li.active a,
ul.primary li.ui-tabs-selected a,
ul.secondary li.ui-tabs-selected a
{
    background-color: #fff;
    color: #D31245;
    border: 1px solid #ccc;
    border-bottom: none;
    padding: 0 13px 1px 13px;
}

ul.secondary li.active a,
ul.secondary li.ui-tabs-selected a
{
    padding: 0 11px 1px 11px;
}


/******************************************************************************
 * 2.2 Layout -> Main Text
 * -----------------------
 * 2.2.1 Left Column
 * 2.2.2 Main Text
 * 2.2.3 Middle-Right Column
 * 2.2.4 Right Column (inc. right blocks)
 *
 *
 * There is an id #main-text that can be used to select objects in the HTML,
 * but from past experience, many of the blocks want to override too much
 * behaviour for this to be viable so the class .main-text is used as an
 * equivalent
 *****************************************************************************/

/******************************************************************************
 * 2.2.1 Layout -> Main Text -> Left Column
 *
 * Almost all of these styling rules apply to the left navigation
 * that shows up on the left. It is very generic so that any other
 * lists are styled similarly, for whatever reason
 *****************************************************************************/
.main-text .left-column
{
}
    /* Headings */
    .main-text .left-column h2
    {
        border-bottom: 1px solid #ddd;
        font-size: 18px;
        margin: 0;
        padding: 0 5px 12px 5px;
    }

    .main-text .left-column h2 a
    {
        display: block;
        text-decoration: none;
    }

    .main-text .left-column h2 a:hover
    {
        color: #d31245;
    }

    /* Lists */
    .main-text .left-column ul.menu
    {
        line-height: 1.2;
        margin: 0 0 25px 0;
        padding: 0;
    }
    .main-text .left-column ul ul.menu
    {
        margin-bottom: 0;
    }

    /* List items */
    .main-text .left-column li.leaf,
    .main-text .left-column li.collapsed,
    .main-text .left-column li.expanded
    {
        border-bottom: 1px solid #ddd;
        list-style: none;
        margin: 0;
        padding: 4px 0;
    }
    .main-text .left-column li li.leaf,
    .main-text .left-column li li.collapsed,
    .main-text .left-column li li.expanded
    {
        border-bottom: none;
        padding: 0 0 0 10px;
    }

    /* Links */
    .main-text .left-column ul a
    {
        color: #467593;
        display: block;
        padding: 4px 13px 4px 5px;
        text-decoration: none;
    }
    .main-text .left-column ul a:hover
    {
        color: #d31245;
    }
    .main-text .left-column ul a.active
    {
        color: #002147;
        background: url(images/left-nav-selected.gif) no-repeat right 7px;
    }


/******************************************************************************
 * 2.2.2 Layout -> Main Text -> Main Text
 *****************************************************************************/
.help, #block-system-help
{
    /* Page help text (block), e.g. on Create Event page */
    background-color: #ededed;
    border: 1px solid #ddd;
    color: #555;
    margin: 0 0 19px 0;
    padding: 5px 8px;
}

.help p
{
    margin: 0;
}

.help a
{
    color: #555;
}

.node-unpublished
{
    /* Remove Drupal's pink background from unpublished nodes */
    background: #fff;
}

/* Images and the like should not flow out the main-content if there is a right block
 * otherwise it should be OK (although the container has an overflow:hidden
 * as well so it won't help much anyway).
 */
.main-content.three-col
{
    overflow:hidden;
}

.main-content a
{
    text-decoration: underline;
}

    /* Headers should not be underlined, even in the main-content section */
    .main-content a h1, .main-content h1 a,
    .main-content a h2, .main-content h2 a,
    .main-content a h3, .main-content h3 a,
    .main-content a h4, .main-content h4 a,
    .main-content a h5, .main-content h5 a,
    .main-content a h6, .main-content h6 a
    {
        text-decoration: none;
    }

/******************************************************************************
 * 2.2.3 Layout -> Main Text -> Middle-Right Column
 *****************************************************************************/
.middle-right-column div.block
{
    border-top: 10px solid #ddd;
    padding: 1em 0;
}
    .middle-right-column div.block:last-child
    {
        border-bottom: 2px solid #ddd;
    }

    .middle-right-column div.block ul
    {
        list-style-type: none;
        padding: 0;
        margin: 2em 0 1em 0;
    }
    .middle-right-column div.block li
    {
        border-bottom: 1px solid #ddd;
        padding: 1.02em 0;
    }
    .middle-right-column div.block li.clickable:hover
    {
        background-color: #e1e1e1;
        outline: 3px solid #e1e1e1;
        cursor: pointer;
    }
        .middle-right-column div.block li.clickable:hover a
        {
            color: #d31245;
        }

    .middle-right-column h1,
    .middle-right-column h2,
    .middle-right-column h3,
    .middle-right-column h4,
    .middle-right-column h5,
    .middle-right-column h6
    {
        padding-top: 0;
        margin-top: 0;
    }

/******************************************************************************
 * 2.2.4 Layout -> Main Text -> Right Column
 *
 * Basically you can only have blocks here for the moment, but if anything
 * non-block comes along, put it here
 *****************************************************************************/
/******************************************************************************
 * 2.2.3.1 Layout -> Main Text -> Right Column -> Blocks
 *****************************************************************************/
/*See 2 col blocks in blocks section */


/******************************************************************************
 * 2.2.3.1.1 Layout -> Main Text -> Right Column -> Blocks -> Lists
 *
 * Lists in blocks on the right column are common. They are styled
 * here
 *****************************************************************************/

/* Views do their own thing with styling so need to be reset */
.main-text .right-column ul
{
    margin-left:0;
    margin-right:0;
    padding-left:0;
}

/* Node level blocks need a little bit more styling to look right because
 * they are in a content div which has padding. */
.main-text .right-column ul
{
    list-style-type: none;
    background-color: #fff;
    padding:0;
}
.main-text .right-column .content ul
{
    margin-left:-15px;
    margin-right:-15px;
}

.main-text .right-column .content ul li
{
    border-bottom: 1px solid #ddd;
}

.main-text .right-column .clickable:hover a, /* != Views */
.main-text .right-column .clickable:hover a h3, /* != Views */
.main-text .right-column li:hover .clickable a /* == Views */
{
    color: #d12456;
    text-decoration:none;
}

/* Created fields should be slightly greyed out */
.views-field-created
{
    color: #555555;
}

.main-text .right-column .block ul li
{
    list-style-type:none;
    margin:0;
}

.main-text .right-column .block ul li.first-child
{
    border-top: 1px solid #ddd;
}
    /* Override this for slide content */
    .main-text .right-column .block div.slider ul li.first-child
    {
        border-top: 0;
    }

.main-text .right-column .block li div.list-container
{
    margin:0;
    padding:7px 15px;
}

/******************************************************************************
 * 2.3 Layout -> Footer
 * --------------------
 * Not much styling here, so all in one lump, although it generally follows
 * white, then grey, then blue
 *****************************************************************************/

.footer .white
{
    border-top: 1px solid #CCCCCC;
    color: #666666;
    font-size: 11px;
    margin: 20px 0 0 0;
    padding: 0 0 5px 0;
}

.footer .grey
{
    border-top: 1px solid #ddd;
    background-color: #ededed;
    margin: 10px 0 0 0;
    padding:10px;
}

.footer .footer-nav-links {
  list-style-type: none;
  padding: 0px;
}

.footer .grey-no-mb {
  border-top: 0px;
  margin: 0px;
}

.footer .grey .footer-links
{
    margin-top:10px;
}

.footer img.site-logo
{
    float:right;
    position: relative;
    top: 4px;
}

.footer .blue
{
    background-color: #002147;
    padding: 10px 0 0px 0;
}

.footer > div:last-of-type {
  padding-bottom: 10px;
}

.footer .blue p
{
    margin: 0;
    padding:0;
    color: #fff;
}
.footer .blue a
{
    color: #fff;
    text-decoration: none;
}
.footer .blue a:hover
{
    text-decoration: underline;
}

.footer .blue .footer-links
{
    float: right;
}
.footer .blue .footer-links ul
{
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
}
.footer .blue .footer-links li
{
    color: #fff;
    float: left;
    font-weight: bold; /* Make &middot;s bold */
}
.footer .blue .footer-links li a
{
    color: #fff;
    font-weight: normal;
}

.footer .titlebar {
  padding-top: 10px;
  margin-top: 10px;
  zoom: 1;
}

.footer .titlebar .site-title {
  color: #fff;
  display: block;
  float: left;
  font-family: DINCondensedA, "Tw Cen MT Condensed", "Arial Narrow Bold", "Arial Narrow", Arial, sans-serif;
  font-size: 63px;
  line-height: 1em;
  letter-spacing: -2px;
  margin-bottom: 16px;
  margin-top: 3px;
  font-weight: normal;
}

.footer .titlebar .site-title:hover {
  text-decoration: none;
}

.footer .home-footer-heading {
  line-height: 1.5;
  font-size: 1.5em;
  text-transform: uppercase;
  font-family: DINCondensedA, "Tw Cen MT Condensed", "Arial Narrow Bold", "Arial Narrow", Arial, sans-serif;
  color: #002147;
}

.footer .footer-list {
  list-style-type: none;
  padding: 0px;
  text-transform: capitalize;
  list-style-position: outside;
}

.footer .footer-list li {
  margin-bottom: 4px;
}

.footer .footer-list-new {
  list-style-type: none;
  padding: 0px;
  text-transform: capitalize;
  list-style-position: outside;
}

.footer .footer-list-new li {
  margin-bottom: 5px;
  margin-left: 12px;
  position: relative;
  font-weight: bold;
}
.footer .footer-list-new li::before {
  position: absolute;
  left: -12px;
  color: red;
  content: ">";
  font-weight: bold;
} 

.footer .item-list .footer-contact-details li {
  margin: 0px;
  font-size: 0.95em;
}

.footer .social-links li {
  display: inline;
}

.footer .social-links li img {
  width: 16px;
}

.footer .footer-award-logos img {
  filter: opacity(50%) grayscale(100%);
}

.footer .footer-award-logos div:first-child {
  padding-top: 20px;
} 
/*****************************************************************************
 * 2.4 Layout -> Miscellaneous
 * ---------------------------
 * 2.4.1 Collapsible Sections
 * 2.4.2 Images
 * 2.4.3 Messages
 * 2.4.4 Tables
 * 2.4.5 Lists
 * 2.4.6 Forms
 * 2.4.7 Pagination
 * 2.4.8 Comments
 * 2.4.9 Tag clouds
 *
 * The odds and sods that can't fit anywhere else but are undisputedly to
 * do with the website's layout
 ****************************************************************************/
.clearboth, .clear
{
    display: block;
    clear:both;
}

hr
{
    background: #ccc;
    border: none;
    color: #ccc;
    height: 1px;
    margin: 19px 0;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, div.codeblock, div.field-field-lead, div.field-field-researchgroup-heads, div.collapse, table {
    margin: 0 0 19px;
}

.left
{
    float:left;
}

.right
{
    float:right;
}


/*****************************************************************************
 * 2.4.1 Layout -> Miscellanous -> Collapsible Sections
 *
 * For want of a better place to put it.
 *
 * Copied as is from the old stylesheet
 ****************************************************************************/
.collapse
{
    border-bottom: 1px solid #ddd;
}

.collapse.simple-collapse
{
    margin-bottom: 3em;
}

div.collapsed.collapse-expand-link,
div.collapse-expand-link
{
    display: block;
    cursor: pointer;
}

.collapse h3.collapse-expand-link
{
    border-top: 1px solid #ddd;
    color: #4b7593;
    font-size: 12px;
    letter-spacing: 0;
    margin: 0 0 11px 0;
    padding: 11px 0;
}

.collapse-expand-link span.more-less-image
{
    background:url(images/more-less.png) no-repeat  10px 0 #fff;
    width:80px;
    height: 13px;
    margin: -5px 0 0 20px;
    padding: 0 10px;
    display: block;
    position: absolute;
}


.collapse h3.collapse-expand-link.collapsed,
.collapse h3.collapse-expand-link.expanded
{
    /* These classes are only added if JS is enabled */
    background: url(images/collapsible-arrows.png) no-repeat;
    cursor: pointer;
    margin: 0;
    padding-right: 115px;
}

.collapse h3.collapse-expand-link.collapsed
{
    background-position: right 15px;
}

.collapse-expand-link.expanded span.more-less-image
{
    background-position: 10px -15px;
}

.collapse h3.collapse-expand-link.expanded
{
    background-position: right -169px;
}

div.collapsed
{
    display: none;
}


div.collapsible-inner
{
    padding-top: 3px;
    padding-bottom: 1px; /* To prevent jumping during slide effect */
}



/*******************************************************************************
 * 2.4.2 Layout -> Miscellaneous -> Images
 ******************************************************************************/

span.inline-left
{
    display: block;
    float: left;
    margin: 5px 20px 15px 0;
}

span.inline-right
{
    display: block;
    float: right;
    margin: 5px 0 15px 20px;
}

span.inline-center
{
    display: block;
    text-align: center;
}

span.inline .caption
{
    display: block;
}

.image-clear
{
    display: block;
    clear: both;
    height: 1px;
    line-height: 0px;
    font-size: 0px;
    margin-bottom: -1px;
}

/*******************************************************************************
 * 2.4.3 Layout -> Miscellaneous -> Messages
 *
 * You know those annoying popups that appear at the top of pages/blocks to
 * display information? Well, the styling of those goes here
 ******************************************************************************/
.messages
{
    background: #dae2eb;
    border: 1px solid #b1c3d4;
    color: #002046;
    margin: 0 0 19px 0;
    padding: 5px 9px;
}

.messages ul
{
    list-style: none;
    margin: 0;
    padding: 1px 0 0 0;
}

.messages li
{
    border-top: 1px solid #b1c3d4;
    margin-top: -1px;
    padding: 5px 0;
}

.messages li:first-child
{
    border-top: none;
}

.messages a
{
    text-decoration: underline;
}

/*******************************************************************************
 * 2.4.3.1 Layout -> Miscellaneous -> Messages -> Revisioning Information
 ******************************************************************************/
.revisioning-information
{
    margin-bottom: 19px;
}

.block .revisioning-information
{
    margin-bottom: 10px;
}

.revisioning-information .showing-unpublished-revision,
.revisioning-information .showing-published-revision
{
    line-height: 22px;
    padding: 3px 3px 3px 13px;
}

  .revisioning-information .showing-unpublished-revision
  {
      background: #ff0;
      border: 1px solid #ee0;
  }

  .revisioning-information .showing-published-revision
  {
      background: #7f0;
      border: 1px solid #6b0;
  }

.revisioning-information a
{
    text-decoration: underline;
}

.revisioning-information img.bullet-flashing
{
    padding-right:5px;
}

.revisioning-information .menu-change
{
    background: #ff0;
    border: 1px solid #ee0;
    border-top: 2px solid #ff0;
    line-height: 22px;
    padding-left:3.1em;
    font-weight:bold;
}


.revisioning-information a.show-published-button,
.revisioning-information a.publish-button,
.revisioning-information a.revert-button
{
    color: #fff;
    float: right;
    font-weight: bold;
    margin-left: 3px;
    padding: 0 5px;
    text-decoration: none;
}

.revisioning-information a.publish-button
{
    background: #d31245;
}

.revisioning-information a.show-published-button,
.revisioning-information a.revert-button
{
    background: #bbb;
}

/*******************************************************************************
 * 2.4.4 Layout -> Miscellaneous -> Tables
 ******************************************************************************/

th,
td
{
    padding: 4px 8px;
}

th.active, td.active
{
    background: #eeeeee;
}


/*******************************************************************************
 * 2.4.5 Layout -> Miscellaneous -> Forms
 *
 * Mainly for the node/profile editing forms on the site.
 ******************************************************************************/

/* Fieldsets */
fieldset
{
    border: 1px solid #ddd;
}

fieldset legend
{
    border: 1px solid #ccc;
    color: #D31245;
    font-weight: bold;
    padding: 2px 7px 1px 7px;
}

fieldset.collapsible legend
{
    padding: 0;
}

#content fieldset legend a
{
    color: #D31245;
    padding: 2px 7px 1px 15px;
    text-decoration: none;
}

#content fieldset.collapsed legend a
{
    color: #002147;
}

/****************************************************************************
 * Searchbox
 ***************************************************************************/
.header .search-box .form-submit,
.red-button,
.red-button:hover,
.form-submit.red
{
    background: #cf013a;
    border: none;
    color: #fff;
    float: left;
    font-weight: bold;
    padding: 4px 5px;
    text-transform: uppercase;
    cursor:pointer;
}


/*******************************************************************************
 * 2.4.6 Layout -> Miscellaneous -> Lists
 *
 * Some styling for lists is done in the Right Block section
 ******************************************************************************/
.has-js li .clickable:hover,
.has-js li.clickable:hover
{
    background-color: #d9d9d9;
}
    .has-js li .clickable:hover a,
    .has-js li.clickable:hover a
    {
        color: #d31245;
    }

/*******************************************************************************
 * 2.4.7 Layout -> Miscellaneous -> Pagination
 *
 * Some styling for pagination
 ******************************************************************************/

.item-list .pager
{
    line-height: 1em;
    text-align: left;
}

.item-list .pager li
{
    float: left;
    margin: 0 3px 3px 0;
    padding: 0;
    white-space: nowrap;
}

.item-list .pager li a,
.item-list .pager li.pager-current,
.item-list .pager li.pager-ellipsis
{
    float: left;
    font-weight: normal;
    padding: 6px 6px;
    text-decoration: none;
}

.item-list .pager li.pager-ellipsis
{
    padding-left: 2px;
    padding-right: 2px;
}

.item-list .pager li a,
.item-list .pager li.pager-current
{
    background: #ededed;
    border: 1px solid #ddd;
    color: #4678a5;
}

.item-list .pager li a:hover,
.item-list .pager li.pager-current
{
    background: #cf013a;
    border-color: #cf013a;
    color: #fff;
}

/*******************************************************************************
 * 2.4.7 Layout -> Miscellaneous -> Comments
 *
 * Some styling for comments
 ******************************************************************************/

#comments
{
    margin-top: 14px;
}

#comments .content
{
    padding: 0;
}

div.comment
{
    padding: 15px;
    border-bottom: 1px solid #d6d6d6;
}
    div.comment.last-child,
    div.comment:last-child
    {
        border-bottom: 0;
    }

.comment div.comment.last-child,
.comment div.comment:last-child
{
    border-top:0px;
}

div.comment ul.links,
div.comment div.links,
div.comment ul.links li
{
    padding: 0;
    margin: 0;
}

.comment-comment p:last-child
{
    margin-bottom:0;
}

div.comment .submitted a
{
    text-decoration: none;
    color: #333;
}

ul.links li.comment_add
{
    padding: 0;
    margin: 0;
    font-weight: bold;
}

#comments h2
{
    padding-bottom:0.5em;
    margin:0;
}

.comment h3 a
{
    text-decoration:none;
}

.comment h3
{
    font-size: 1.1em;
}

.comment .profile-image
{
  float:left;
  padding-right: 15px;
}

.comment .comment-comment
{
    padding-top:0.5em;
}

.comment .new
{
    color:#888;
}

/*******************************************************************************
 * 2.4.7.1 Layout -> Miscellaneous -> Comments -> Form
 *
 * Some styling for comments submit form
 ******************************************************************************/

body.page-comment
{}
    body.page-comment .box
    {
        margin-top:19px;
        padding:19px;
        border: 1px solid #eee;
    }

    body.page-comment .comment-preview
    {
        border-bottom: 1px solid #ddd;
    }

    body.page-comment form
    {
        margin-bottom:38px;
    }
/*******************************************************************************
 * 2.4.9 Layout -> Miscellaneous -> Tag Clouds
 *
 * Some styling for tag clouds
 ******************************************************************************/

.tag-cloud
{
    line-height:2.2em;
    margin-left:19px;
}

.tag-cloud span
{
    margin-right:8px;
}


/*******************************************************************************
 * 2.4.9.1 Layout -> Miscellaneous -> Tag Clouds -> Diigo
 *
 * Some styling for Diigo clouds
 ******************************************************************************/

.main-text .right-column ul.diigo-cloud
{
    margin-left: 0;
    margin-right: 0;
}

.main-text .right-column .block .diigo-cloud li,
.main-text .right-column .block .diigo-cloud li:first-child
{
    border-top:none;
    border-bottom:none;
}

/*******************************************************************
 * 2.4.10 Layout -> Miscellaneous -> Code blocks
 *******************************************************************/

a.click-to-expand,
a.click-to-collapse
{
    font-family: Arial,Helvetica,Verdana,Tahoma,sans-serif; /* SMELL: Should this be in the fonts section? */
    font-size: 0.9em;
}

a.click-to-expand
{
    margin-top: -19px;
    float:right;
}

a.click-to-collapse
{
    display:block;
    margin-left: 400px;
}

pre, .codeblock
{
    width: 100%;
    overflow-x: auto;
}

.injected-floater
{
    display: none;
}


/*******************************************************************************
 * 3. Pages
 * ========
 * 3.1 Views
 * 3.2 Search Results
 * 3.3 Edit pages
 *
 * The following rules are for specific pages on the website (TODO: Move some
 * out to the physics_mpw.css file)
 *
 ******************************************************************************/


/******************************************************************************
 * 3.1 Pages -> Views
 * ------------------
 * 3.1.1 Subdepartment
 *
 * Some pages display views as a page. This is a generic catchall for all of
 * these instances, like research highlights, case studies and related research
 * groups
 *
 * If you want to create another one:
 *   TODO: Make instructions on what fields are required.
 * ***************************************************************************/


/*Override underline in content div*/
.view .arrowlink a
{
    font-size: 0.9em;
    text-decoration: none;
}
.view .views-row a
{
    text-decoration: none;
}

.view .views-row .views-field-teaser a
{
    text-decoration: underline;
}

.listing-grid div.views-row, li.views-row
{
    padding-left:150px;
    padding: 1em 0 0 138px;
}

.listing-grid .views-row h3
{
    margin-bottom: 0.5em;
    color: #D31245;
}
    .listing-grid .views-row a h3
    {
        text-decoration:none;
    }
    .listing-grid .views-row a h3:hover
    {
        text-decoration:underline;
    }



.listing-grid div.views-row, li.views-row
{
    border-bottom:1px #ddd solid;
}

.listing-grid div.views-row:first-child
{
    border-top:1px #ddd solid;
}

.listing-grid li.views-row
{
    padding-left:0;
}

/******************************************************************************
 * 3.1.1 Pages -> Views -> Subdepartment Pages
 *
 * The subdepartment pages show lists of research groups and external
 * research groups. Style them here.
 *****************************************************************************/

div.view-researchexternal-subdepartment div.views-row:hover,
div.view-research-subdepartment div.views-row:hover
{
    background:#ddd;
}

.listing-grid .views-field-field-image
{
    float: left;
    margin: 3px 0 10px -138px;
}

/*The research subdepartment is a clickableBlock, so needs slightly different margins so as the hover looks nice */
.view-researchexternal-subdepartment .views-field-field-image-fid,
.view-research-subdepartment .views-field-field-image-fid
{
    float: left;
    margin: 3px 0 10px -127px;
}


/*******************************************************************************
 * 3.2 Search Results
 *
 ******************************************************************************/
dl.search-results
{
    margin: 19px 0;
}

.search-results dt,
.search-results dd
{
    margin: 0;
    padding: 0;
}

.search-results dt.title
{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

.search-results dd
{
    margin-bottom: 19px;
}

.search-results p
{
    margin-bottom: 5px;
}

.search-results .search-url a
{
    color: #888;
    text-decoration: none;
}

.search-results .search-url a:hover
{
    text-decoration: underline;
}

/* GSA sometimes brings back unwanted keymatches that bear no relevance to us */
.google-appliance-keymatches
{
    display: none;
}

/******************************************************************************
 * 3.3 Edit pages
 *****************************************************************************/
/* BUEditor dropdowns */
.bue-popup-body {
    background-color: #ededed !important;
}

a.choice-link {
    background-color: #fff !important;
    border: 1px solid #ddd;
    color: #002149 !important;
    display: block;
    font-size: 1.5em;
    padding: 4px;
    text-align: center;
}

a.choice-link:hover,
a.choice-link:hover * {
    background-color: #CF013A !important;
    color: #fff !important;
}

a.choice-link.symbol {
    width: 20px;
}

/* Override taxonomy-super-select-checkboxes module */
.taxonomy-super-select-checkboxes .form-item label.option
{
    float: none;
}

/*******************************************************************************
 * 4. Blocks
 * =========
 * 4.1 Block Borders (and two-col)
 * 4.2 Scrollable Content
 * 4.3 Left Navigation (see 2.2.1)
 * 4.4 Masquerade
 * 4.5 Blank Block
 * 4.6 Links Block
 *
 *
 * The following rules are for specific blocks on the website. For the styling
 * blocks in general for a particular region, see the layout section of that
 * region.
 *
 *
 *
 ******************************************************************************/

/******************************************************************************
 * 4.1 Blocks -> Block Borders
 *
 * In the right column and whenever the content is reduced to two column width
 * the block should be styled with borders. Also, you can also add borders using
 * the class "bordered".
 *****************************************************************************/
.two-col .block,
.block.bordered
{
    background-color: #ededed;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 1.3em;
    position: relative;
}

.two-col .block h2,
.right .block.bordered h2
{
    margin: 0;
    line-height: 1em;
    font-size: 24px;
}

.two-col .block h2:first-child,
.block.bordered h2:first-child
{
    padding-top: 2px;
    padding-bottom: 0.5em;
}

/* Fix for texty content blocks */
.two-col .content p:last-child,
.two-col .content table:last-child,
.two-col .block p:last-child,
.two-col .block-block p:last-child,
.two-col .clear-block p:last-child,
.two-col .clearfix p:last-child

{
    margin-bottom: 0;
}

.two-col .block h3,
.block.bordered h3
{
    font-size: 1em;
    letter-spacing: 0;
    margin: 0;
}

.two-col .block .content,
.block.bordered .content
{
    background-color: #fff;
    padding: 15px;
    overflow:hidden;
}
    .two-col .block a
    {
        text-decoration: none;
    }

.two-col .block .block-list-content
{
    background-color: #fff;
    padding: 0 15px;
    overflow:hidden;
}

.two-col .block .left-column
{
    /* Display image field as left float in right sideblock */
    float:left;
    margin-top:2px;
}

.wo-col .block .right-column
{
    /* Text associated with image field above is shifted the appropriate amount */
    margin-left: 95px;
    padding:0;
}

/*******************************************************************************
 * 4.2 Blocks -> Scrollable Content
 *
 * Since we only have an image for two-cols, we can only style that. If
 * it's needed for anything else, then it'll break horribly
 ******************************************************************************/
.slidercontrol
{
    display: block;
    position: absolute;
    width: 284px;
    height: 27px;
    background-image: url(images/infobox-navigators.png);
    background-repeat: no-repeat;
    /*top: 88px;*/
    z-index:10;
}
    .slidercontrolup
    {
    }
    .slidercontroldown
    {
        background-position: bottom left;
        bottom: 10px;
    }

.slidercontrolup.canmove,
.slidercontroldown.canmove
{
    cursor: pointer;
}
.slidercontrolup.canmove:hover
{
    background-position: top right;
}
.slidercontroldown.canmove:hover
{
    background-position: bottom right;
}


/*******************************************************************************
 * 4.3 Blocks -> Left Navigation
 ******************************************************************************/

/*This block is so ingrained with the layout of the site I chose to put it direct
 * into the layout section above under "Main Text -> Left Column"
 */

/*******************************************************************************
 * 4.4 Blocks -> Masquerade
 *
 * Assumes the block is placed in the footer region. Will not style it otherwise
 *
 ******************************************************************************/

.footer .block-masquerade
{
    background: #dae2eb;
    border: 1px solid #b1c3d4;
    clear: both;
    color: #002046;
    margin-top: 10px;
    padding: 5px 9px;
}

.footer .block-masquerade h2,
.footer .block-masquerade form,
.footer .block-masquerade div,
.footer .block-masquerade ul,
.footer .block-masquerade .item-list ul li
{
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer .block-masquerade h2
{
    font-size: 12px;
    letter-spacing: 0;
    margin-right: 5px;
}

.footer .block-masquerade input.form-text
{
    width: 200px;
}

.footer .block-masquerade div.description
{
    display: block;
}

.footer .block-masquerade .item-list ul li
{
    margin-left: 3px;
}
/********************************************************************************
 * 4.5 Blocks -> Blank block
 *
 *
 * When you want to push the layout around a bit, you need to add blank blocks.
 * For the right column, this needs to be styled to remove the grey background
 * ******************************************************************************/
#block-block-8
{
    background-color:inherit;
    border:0;
}

/********************************************************************************
 * 4.6 Blocks -> Links block
 *
 * You can find this under Right Column Blocks 2.2.3.1.1
 *
 * ******************************************************************************/

/*empty*/