/* This file will hold styles for the mobile version of your website (mobile first). */
/* This also can include ANY global CSS that applies site-wide. Unless overwritten by a more specific style rule, CSS declarations in global.css will apply site-wide. */


/**********************
Table of Contents
-----------------

*Same order applies to all queensweb-queensbase-alpha-default* CSS files

- core HTML elements
- special elements
    - box
    - callouts
    - funfacts
    - accessibility tips
    - labour news button links
    - news feeds
- Special styling features
    - shadows
- Main page areas
    - Content zone/regions
    - breadcrumbs
    - Header zone/regions
        - Superfish Menus
        - Queen's admin menus
        - Emergency Messages
        - Labour News Messages
    - Preface zone/regions 
- Slideshows
    - general styling
    - embedded image slideshows
    - embedded text slideshows
    - embedded Flickr slideshows
- navigation menus
- feedback form
- media queries
- webforms

***********************/

h3.chart-heading {
    margin-top: 2em;
    margin-bottom: 1.5em;
    color: #9D1939;
}

.box {
    border-radius: 7px;
    border: 2px solid #CCCCCC;
    padding: 8px;
    margin-bottom: 17px;
    color: #555;
    background: #F2F2F2;
}

.box-title {
    line-height: 1.214;
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 17px;
}

.box.dark {
    background: #555;
    color: #FFF;
    border: 2px solid #999999;
}

div[class^="callout"] p {
    font-size: 12px;
}


div.callout-container {
    clear: both;
    margin-bottom: 17px;
}

div.callout-container div[class^="callout"] {
    float: right;
    margin-left: 10px;
}


div.callout {
    background: #FFF url("../images/callout.png") no-repeat scroll right top;
    border-radius: 0 17px 17px 0;
    padding-bottom: 4px;
    min-width: 196px; /* 200px - 4px total border */
}


div.callout-large {
    background: #FFF url("../images/callout_large.png") no-repeat scroll right center;
    border-radius: 0 33px 33px 0;
    height: 62px;
}

div[class^="callout"] {
    border: 2px solid #DDD;
    display: inline-block;
    line-height: 20px;
    margin-bottom: 10px;
}


/* large callouts only */
div[class^="callout-"] {
    width: 196px; /* 200px - 4px total border */
}


/* social media callouts only */
div.callout-twitter,
div.callout-facebook,
div.callout-youtube,
div.callout-flickr,
div.callout-linkedin,
div.callout-blog,
div.callout-wordpress,
div.callout-pinterest,
div.callout-instagram {
    padding: 7px 0 0 0;
    background-position: 8px 8px;
    background-repeat: no-repeat;
    background-color: #FFF;
    min-height: 42px;
}

div.callout-twitter {
    background-image: url("../images/callout_twitter.png");
}

div.callout-facebook {
    background-image: url("../images/callout_facebook.png");
}

div.callout-youtube {
    background-image: url("../images/callout_youtube.png");
}

div.callout-flickr {
    background-image: url("../images/callout_flickr.png");
}

div.callout-linkedin {
    background-image: url("../images/callout_linkedin.png");
}

div.callout-blog {
    background-image: url("../images/callout_blog.png");
}

div.callout-wordpress {
    background-image: url("../images/callout_wordpress.png");
}

div.callout-pinterest {
    background-image: url("../images/callout_pinterest.png");
}

div.callout-instagram {
    background-image: url("../images/callout_instagram.png");
}


div.callout p {
    padding: 7px 0 5px;
    margin: 0 35px 0 6px;
}

div[class^="callout-"] p {
    margin-bottom: 10px;
    margin-left: 40px; /* social only */
    padding: 0 10px 0; /* social only */
}

div.callout-large p {
    margin-left: 8px;
    margin-right: 48px;
    margin-top: 6px;
    height: 48px;
    padding: 0 10px 0 0;
    overflow: hidden;
}

div.callout-social-account {
    background-color: transparent;
    border: none;
    width: auto;
    background-position: 0 8px;
    padding-top: 0;
}

div.callout-social-account p {
    padding-top: 14px;
    margin-left: 32px;
}



/* Funfacts */
.funfact {
    color: #FFF;
    background: url(../images/funfact_arrow.png) no-repeat top right #8d8d8d;
    border: 3px solid #777;
}

.funfact-light {
    color: #444;
    background: url(../images/funfact_arrow.png) no-repeat top right #F0BE3C;
    border: 3px solid #efdf83;
}

[class^="funfact"] {
    font-size: 0.923em;
    margin: 0 0 17px 0;
    padding: 10px;
    border-radius: 22px 0 0 0;
    max-width: 184px;
}

.funfact-highlight {
    color: #eebd31;
    font-size: 1.385em;
    font-weight: bold;
}

.funfact-light .funfact-highlight {
    color: #FFF;
}

.funfact-red {
    color: #FFF;
    background: url(../images/funfact_arrow.png) no-repeat top right #a86460;
    border: 3px solid #9d1939;
}
.funfact-gold {
    color: #11335d;
    background: url(../images/funfact_arrow.png) no-repeat top right #efdf83;
    border: 3px solid #eebd31;
}
.funfact-blue {
    color: #FFF;
    background: url(../images/funfact_arrow.png) no-repeat top right #88909e;
    border: 3px solid #11335d;
}

.funfact-red .funfact-highlight {
    color: #eebd31;
}
.funfact-gold .funfact-highlight {
    color: #9d1939;
}
.funfact-blue .funfact-highlight {
    color: #eebd31;
}


.funfact-title {
    font-size: 1.846em;
    font-weight: bold;
    margin-bottom: 5px;
    margin-right: 30px;
    display: block;
    overflow: hidden;
}



.accessibility-tip {
    border-radius: 7px;
    border: 3px solid #0C70AF;
    color: white;
    background: url(../images/accessibility_icon.png) no-repeat 8px 8px #084C76;
    padding: 8px;
    margin-bottom: 17px;
    max-width: 92%; /* less than 100 to account for padding */
    min-height: 38px;
}

.accessibility-tip .accessibility-tip-title {
    font-weight: bold;
    margin-bottom: 10px;
}

.accessibility-tip p {
    margin-bottom: 0;
    margin-left: 46px;
}

.accessibility-tip a:link,
.accessibility-tip a:visited {
    color: #FFF;
    text-decoration: underline;
}

.accessibility-tip a:hover,
.accessibility-tip a:active {
    color: #EEBD31;
}


a.labour-news-link {
    display: block;
    width: 247px;
    height: 70px;
    background-image: url("../images/labour_news_button.jpg");
    background-repeat: no-repeat;
    background-position: left top;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    word-wrap: normal;
}

.fa-flickr {
    color: #FFF;
    background-image: url("../images/flickr_color.png");
    background-repeat: no-repeat;
    background-position: left top;
    border: 1px solid #ddd;
}


/* News Feeds */

.block-aggregator {
    background: #F5F5F5;
    border-radius: 7px;
    padding-bottom: 10px;
    margin-bottom: 20px;
}


.block-aggregator h2.block-title {
    margin: 0 0.5em;
    padding: 0.5em 0 0.1em;
    border-bottom: 1px solid #BBBBBB;
    font-weight: normal;

}

.block-aggregator div.content {
    padding-top: 0.8em;
}

.block-aggregator .feed-item {
    clear: both;
}

.block-aggregator .feed-item-date {
    float: left;
    text-align: center;
    width: 2em;
    margin-top: 4px;
    color: #000;
}

.block-aggregator .feed-item-month {
    font-size: 10px;
    background-color: #EEE;
    text-transform: uppercase;
    line-height: 1.1;
}

.block-aggregator .feed-item-day {
    font-size: 18px;
    background-color: #DDD;
    line-height: 1.1;
}

.block-aggregator a:hover  {
    text-decoration: none;
}

.block-aggregator .feed-item-title {
    margin-left: 32px;
    font-size: 0.923em;
}

.block-aggregator .feed-item-title:hover {
    text-decoration: underline;
}

.block-aggregator .item-list ul li {
    margin: 0 0.8em 0.25em 0.8em
}


/* Shadows */
.box-shadow {
    box-shadow: 0px 5px 5px rgb(200, 200, 200);
    -moz-box-shadow: 0px 5px 5px rgb(200, 200, 200);
    -webkit-box-shadow: 0px 5px 5px rgb(200, 200, 200);
}


/* Page */


#zone-content {
    margin: 0 auto;
}

#region-content-wrapper {
    padding-top: 20px;
}

#breadcrumb {
    background: #FFF;
    margin-bottom: 20px;
}

.breadcrumb {
    border-bottom: 1px solid #DDDDDD;
    font-size: 1em;
    padding-bottom: 2px;
}


/* TEMPORARY - HIDES BREADCRUMBS ON SEARCH PAGE */
body.context-search #breadcrumb {
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

/* Header Section */


#region-header-first {
    margin-bottom: 10px;
}

#region-header-first img {
    width: 100% !important;
    height: auto !important;
}

#region-header-first p {
    padding: 0;
    margin: 0;
}

/* Superfish Menus */

.sf-accordion-toggle a {
    background-color: #302f2e;
    color: #FFF;
}

/* Menu for Queen's Web Administrators */

.queensweb-admin-menu-block {
    margin: 17px 0;
    background-color: #FFF;
    border: 3px solid #444;
    padding: 0 12px 10px;
}

.queensweb-admin-menu-block ul {
    margin-top: 12px;
}

.queensweb-admin-menu-block ul.menu li {
    background-color: #FFF;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    box-shadow: 0 1px 2px #555;
    float: left;
    padding: 0;
    margin: 0 12px 12px 0;
}

.queensweb-admin-menu-block ul.menu li.leaf {
    list-style: none outside none;
}

.queensweb-admin-menu-block ul.menu li.active-trail {
    background-color: #EEE;
}
.queensweb-admin-menu-block ul.menu li a
{
    display: block;
    color: #555;
    padding: 4px 8px;
}

.queensweb-admin-menu-block ul.menu li.active-trail a {
    color: #000;
}

/* Emergency Messages */

.block-special-messages-emergency-alert-block {
    clear: both;
}

/* Hide title of container block used by sites other than main site */
#block-views-emergency-messaging-block > .block-inner > .block-title {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

#block-emergency-emergency-alert {
    margin: 5px 2px 14px;
    padding: 8px 8px 8px 78px;
    color: #444;
}

#block-emergency-emergency-alert.emergency-alert-level-none {
    display: none;
}

#block-emergency-emergency-alert.emergency-alert-level-notice {
    position: relative;
    background-color: #F2F2F2;
}

#block-emergency-emergency-alert.emergency-alert-level-notice {
    border: 6px solid #FFD721;
    background-image: url("../images/info_yellow.png");
    background-repeat: no-repeat;
    background-position: 16px 12px;
}

#block-emergency-emergency-alert.emergency-alert-level-emergency,
#block-emergency-emergency-alert.emergency-alert-level-emergency-lowload {
    position: relative;
    background-image: url("../images/emergency_red.png");
    background-repeat: no-repeat;
    background-position: 16px 12px;
    background-color: #F5F5F5;
    border: 6px solid #EE3035;
}


#block-emergency-emergency-alert h2 {
    color: #444;
    font-size: 18px;
    padding-top: 0.167em;
    margin: 0;
}


#block-emergency-emergency-alert div.content {
    margin-top: 10px;
    font-size: 1.077em;
    line-height: 1.308em;
}

#block-emergency-emergency-alert p {
    margin-bottom: 5px;
    margin-top: 0;
}

#block-emergency-emergency-links {
    border-radius: 7px;
    border: 2px solid #CCCCCC;
    padding: 8px;
    margin-bottom: 17px;
    color: #555;
    background: #F2F2F2;
}

#block-emergency-emergency-links,
#block-emergency-emergency-links h2
{
    font-family: "Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
}

#block-emergency-emergency-links .block-title {
    font-size: 1em;
    color: #555555;
    font-weight: normal;
    text-transform: uppercase;
    margin: 0 6px;
    padding: 4px 2px 0;
    margin-bottom: 10px;
}

#emergency-links-list ul {
    margin-bottom: 0.5em;
}

#emergency-links-list li {
    font-size: 1.231em;
}


/* Labour News Messages */

.block-labour-news-block {
    margin-bottom: 20px;
    background: #EEE;
}

.block-labour-news-block .block-title {
    background-image: url("../images/labour_news_info_mobile.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #003366;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    word-wrap: normal;
    height: 75px;
}

.block-labour-news-block .message-title {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 4px;
}    
    
.block-labour-news-block .message-content {
    padding: 6px;
}

.block-labour-news-block .message-link {
    text-align: right;
    margin-right: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* Flags Lowered Messages */

.block.block-flags-lowered-block {
    font-size: 13px;
}

.block.block-flags-lowered-block h2.block-title {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);    
}
   

.flags-lowered-image {
    background-image: url("../images/flags_lowered.jpg");
    width: 100%;
    vertical-align: middle;
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;        
    margin-bottom: 6px;
}

.flags-lowered-image-inner {
    padding-bottom: 58.33%;
    height: 0;    
}


/* Preface Zone */
#zone-preface {
    margin-bottom: 20px;
}


/* Embedded Flickr slideshow */

/* Necessary? */
.flexslider-embedded-flickr {
    margin: 0;
}

.flickr-slideshow-link {
    text-align: center;
    font-style: italic;
}


/* Text Slideshows */

/* For text slideshows we put the border around the content div instead*/
.node_embed-text_slideshow_container {
    border: none;
}

.flexslider-embedded-text {
    border-radius: 12px;
    -moz-border-radius:  12px;
    -webkit-border-radius: 12px;
}

.flexslider-embedded-text p {
    padding: 0px 12px 17px;
    margin-bottom: 0;
}

.flexslider-embedded-text div {
    height: auto !important;
    min-height: 200px;
    color: #FFF;
    background-color: #11335d;
    background-image: url("../images/quote_left_lg.png"), url("../images/quote_right_lg.png");
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    padding: 10px 40px 0;
    border: 2px solid #DDD;
    border-radius: 12px;
    -moz-border-radius:  12px;
    -webkit-border-radius: 12px;
}

.flexslider-embedded-text li > p {
    line-height: 0;
    margin: 0;
    padding: 0;
}


/* Postscript Zone */

#zone-postscript .region {
    margin-bottom: 25px;
}

/* Navigation menus */

.nav-menu {
    border-radius: 7px;
    font-size: 0.923em;
    margin-bottom: 20px;
    padding-bottom: 10px;
    background-color: #F5F5F5;
    color: #000;
    position: relative;

    behavior: url("/sites/all/themes/queensbase_omega/css/PIE.htc");
}

.nav-menu a,
.nav-menu a:link,
.nav-menu a:visited
{
   color: #444;
}

.nav-menu .content a.active,
.nav-menu .content a.active:link,
.nav-menu .content a.active:visited
{
    color: #9d1939;
}


.nav-menu h2 {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
    font-weight: normal;
    color: #555;
    margin: 0 6px;
    padding: 10px 5px 0;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    text-transform: uppercase;
    border-bottom: 2px solid #DDD;
}


.nav-menu .content {
    padding-top: 10px;
}

.nav-menu h2.block-title ~ .content {
    background-image: url('../images/nav_menu_header_arrow.png');
    background-repeat: no-repeat;
    background-position: 5px -2px;
}

.nav-menu ul.menu li {
    margin-left: 22px;
}

.nav-menu h2 a {
    margin: 0 -5px;
    padding: 3px 2px 2px 6px;
}


.nav-menu h2 a,
.nav-menu ul.menu a {
    display: block;
    border-radius: 7px;
    text-decoration: none;
}

.nav-menu ul.menu a {
    margin-left: -20px;
    margin-right: -4px;
    padding-left: 20px;
}

.nav-menu h2 a:hover,
.nav-menu ul.menu a:hover {
    background-color: #E8E8E8;
    color: #9d1939;
    text-decoration: none;
}


.nav-menu div.menu-name-main-menu {
    padding: 5px;
}

/* Footer */

/* Feedback Form */
#feedback-form {
    padding: 4px 8px;
}

#feedback-form-hints {
    border: 1px solid gray;
    width: 50em;
    margin: 0 5px;
    position: absolute;
}

#feedback-form-hints h2 {
    font-size: 1em;
    margin: 0;
    background-color: #FFC;
    text-align: center;
    padding: 3px;
    cursor: pointer;
}

#feedback-form-hints-body {
    border: 1px solid gray;
    padding: 4px;
    background-color: #FFC;
}

#feedback-form-hints-body li {
    margin-bottom: 30px;
}

#feedback-form-hints-body li dt {
    font-weight: bold;
    border: 1px solid rgba(0, 255, 255, 0.3);
    background-color: white;
    width: 18em;
    padding-left: 2px;
}

/* Webforms */

.webform-component-fieldset legend {
    padding: 6px;
    background-color: #EEE;
    border: 1px solid silver;
    font-weight: bold;
    font-size: 1.154em; /* 15px */
}

.webform-component-fieldset {
    padding: 6px;
    border: 1px solid silver;
}



@media screen and (min-width: 360px) {

    /* at viewport width 360px, we've got room for 340px (plus 10px left and right margin) */
    #zone-postscript .region {
        width: 340px;
        margin-left: auto;
        margin-right: auto;
    }
}