/**
 * global.css
 *
 * Styles applied to all form factors.
 */

#page { overflow: hidden }

@media (min-width: 768px) {

    /* tablet.css */

    /* ---------------------- Content header ------------------------- */

    #content-header .column {
        width: 49.16%;          /* 6 of 12 */
    }

    /* ------------------------- Preface ----------------------------- */

    #preface .column {
        width:  32.2%;          /* 4 of 12 */
    }

    /* -------------------------- Main ------------------------------- */

    #main .first.column  { width: 23.78%; }
    #main .last.column   { width: 23.78%; }
    #main .middle.column { width: 100%; }
    .two-sidebars #main .middle.column { width: 49.16%; }
    .one-sidebar  #main .middle.column { width: 74.54%; }

    /* ------------------------- Diptych ----------------------------- */

    #diptych .column {
        width: 49.16%;          /* 6 of 12 */
    }

    /* ------------------------- Triptych ---------------------------- */

    #triptych .column {
        width:  32.2%;
    }

    /* -------------------------- Footer ----------------------------- */

    #footer-columns .column {
        width:  49.16%;         /* 6 of 12 */
    }
    #footer-columns .column:nth-child(2n+1) {
        clear: both;
        margin-left: 0; /* At tablet sizes, we use two footer columns. This */
                        /* makes the third column the first in its row.     */
    }

    /* ----------------------- Slideshow ----------------------------- */

    .slide .caption {
        border: thin solid black;
        width: 33.3%;
        margin: 0.5em;
        max-height: 98%;
        height: auto;
        padding: 1% 1.6%;
    }

    .slide .hidden.caption {
        bottom: -100%;
    }

    .slide .caption {
        display: block;
    }

    /* ------------------------- Sidebar ----------------------------- */

    @media only screen and (max-width:768px) {
        #main .first.column  { width: 30%; }
        #main .last.column   { width: 30%; }
        #main .middle.column { width: 100%; }
        .two-sidebars #main .middle.column { width: 40%; }
        .one-sidebar  #main .middle.column { width: 60%; }
    }

    #main .sidebar {
        margin: 0;
        padding-top: 1em;
    }

    /* ---------------- Header ------------------- */

    #logo {
      background: none;
      position: absolute;
      margin: 0;
      padding: 0;
      height: auto;
      width: auto;
    }

    #logo img {
      top: 0;
    }

    #header {
      height: 100px;
    }

    #site-name {
        float: left;
        font-size: 2em;
        line-height: 0.5;
        margin: 0.5em 0.3em 0.5em 0;
        padding: 0;
    }

    #site-slogan {
        float: left;
        margin-top: 1.78em;
        font-weight: normal;
    }

    /* ------------------- Search ---------------- */

    #search-control {
      display: none;
    }

    .region-search {
        height: auto;
        position: absolute;
        top: 0;
        right: 0;
        text-align: left;
        overflow: visible;
        left: auto;
    }

    #global-search fieldset {
        margin: 0;
        padding: 0 0 10px;
    }

    #global-search fieldset input {
        margin: 2px 0 2px 5px;
    }

    #global-search #searchtextlabel {
        position: static !important;
        clip: auto;
        overflow: visible;
        height: auto;
    }

    #global-search #searchsubmit {
        top: 5px;
        right: 25px;
    }

    #header.show-search {
        padding-top: 0;
    }

    /* ----------------- Main Menu --------------- */

    #main-menu-wrapper {
      display: block;
      height: 48px;
    }

    /* --------------- Secondary Menu ------------ */

    #secondary-menu-control {
      display: none;
    }

    #secondary-menu {
      height: 100px !important;
      padding: 0;
    }

    #secondary-menu-links {
      float: right; /* LTR */
      margin: 62px 0 0;
    }

    /* At desktop resolutions, switch the secondary menu
     * from vertical blocks to horizontal tabs. */
    #secondary-menu-links li {
      float: left;
    }

    #secondary-menu-links a {
      padding: 5px 16px 1.230769230769231em;
      margin: 0;
      font-size: 1em;
      font-weight: bold;
      border: 1px solid transparent;
      border-bottom-style: none;
      text-shadow: 1px 1px 0 black, -1px -1px 0 black,
        1px -1px 0 black, -1px 1px 0 black;
      letter-spacing: -0.1em;
    }

    #secondary-menu-links a:hover,
    #secondary-menu-links a:focus {
      text-decoration: none;
      border: 1px solid rgba(0, 0, 0, 0.5);
      border-radius: 15px 15px 0 0 !important;
      background-color: rgba(0, 0, 0, 0.1);
      border-bottom-style: none;
    }

    /* ------------- Site Navigation ------------- */

    #nav-wrapper {
      font-weight: bold;
      text-shadow: 1px 1px 1px black;
    }

    #nav-control {
      display: none;
    }

    #nav {
      height: auto !important;
      clear: none;
      float: right;
      display: inline-block;
      margin: 0;
      overflow: visible;
    }

    #nav > ul > li {
      display: block;
      float: left;
      border-right: 1px dotted #999999;
      border-top: 1px solid #555555;
      border-bottom: 1px solid #555555;
      text-align: center;
    }
    #nav > ul > li.first {
        border-left: 1px dotted #999999;
    }
    #nav > ul > li.last {
      display: block;
      float: left;
    }

    #nav ul li a {
      text-decoration: none;
      border-top: none;
      padding: 1em 1.2em;
      margin: 0;
    }
    /*#nav ul li a:active {
        text-decoration: none;
    }

    #nav ul li a:hover {
        text-decoration: none;
    }*/

    #nav ul > li > ul {
      right: 0;
    }

    /* The following code prevents the megamenu from
    getting squashed when a user is logged in */
    div.region-nav div.contextual-links-region {
        position: static;
    }

    input[type=text], input[type=password] {
        max-width: 300px;
    }

} /* END tablet.css */


@media (min-width: 1024px) {

    /* desktop.css */

    /* --------------- Global styles -------------- */

    /* Reduce line height on a non-touch (i.e. mouse-supported) device */
    html.no-touch  p {
        line-height: 1.4;
    }
    html.no-touch  #nav > ul > li > ul > li {
        line-height: 1em;
    }

    #logo {
        width: auto;
    }

    /* ------------ Main Content ----------------- */

    h1#page-title {
      margin: 1em 0;
    }

    #sidebar-second {
        padding: 1em;
    }

    /* -------------- Footer ------------------------ */

    #footer-columns ul.menu li a {
        border-top: 1px dotted #666666;
    }
    #footer-columns ul.menu li.first a {
        border-top: none;
    }
    #footer-columns .column {
        width:  23.8%;
    }
    #footer-columns .column:nth-child(2n+1) {
        clear: none;
    }

    /* -------------- Misc ------------------------ */

    fieldset{
        background-color:#ffffff;
    }

} /* END desktop.css */