status-bar.css

@charset "UTF-8";

/* 
 *  CSS styles inspired by the 'alert' class from twitter bootstrap. 
 *
 *  As we didn't want to conclift with Bootstrap it's all granted it's own namespace.
 *
 *  We try and adhere to the http://codeguide.co/ guidelines for code formatting
 *  where possible.
 */

/*
 * OpenSans
 *
 * We use the OpenSans font to create consistant and readable content
 * on all the notices.
 */

/* Light */
@font-face {
  font-family: 'sorry-status-bar-open-sans';
  src:  url("./fonts/Light/OpenSans-Light.eot?v=1.1.0");
  src:  url("./fonts/Light/OpenSans-Light.eot?#iefix&v=1.1.0") format("embedded-opentype"),
        url("./fonts/Light/OpenSans-Light.woff2?v=1.1.0") format("woff2"),
        url("./fonts/Light/OpenSans-Light.woff?v=1.1.0") format("woff"), 
        url("./fonts/Light/OpenSans-Light.ttf?v=1.1.0") format("truetype"), 
        url("./fonts/Light/OpenSans-Light.svg?v=1.1.0#Light") format("svg");
  font-weight: 300;
  font-style: normal;
}

/* Semibold */
@font-face {
  font-family: 'sorry-status-bar-open-sans';
  src:  url("./fonts/Semibold/OpenSans-Semibold.eot?v=1.1.0");
  src:  url("./fonts/Semibold/OpenSans-Semibold.eot?#iefix&v=1.1.0") format("embedded-opentype"),
        url("./fonts/Semibold/OpenSans-Semibold.woff?v=1.1.0") format("woff"), 
        url("./fonts/Semibold/OpenSans-Semibold.ttf?v=1.1.0") format("truetype"), 
        url("./fonts/Semibold/OpenSans-Semibold.svg?v=1.1.0#Semibold") format("svg");
  font-weight: 500;
  font-style: normal;
}

/* Bold */
@font-face {
  font-family: 'sorry-status-bar-open-sans';
  src:  url("./fonts/Bold/OpenSans-Bold.eot?v=1.1.0");
  src:  url("./fonts/Bold/OpenSans-Bold.eot?#iefix&v=1.1.0") format("embedded-opentype"), 
        url("./fonts/Bold/OpenSans-Bold.woff2?v=1.1.0") format("woff2"),
        url("./fonts/Bold/OpenSans-Bold.woff?v=1.1.0") format("woff"),
        url("./fonts/Bold/OpenSans-Bold.ttf?v=1.1.0") format("truetype"),
        url("./fonts/Bold/OpenSans-Bold.svg?v=1.1.0#Bold") format("svg");
  font-weight: bold;
  font-style: normal;
}

/*
 * Icons
 *
 * Built using Fontastic.me and derived from FontAwesome
 * this is a simple icon set for use on the bar.
 */

@font-face {
  font-family: "status-bar-icons";
  src:  url("./fonts/Icons/status-bar-icons.eot");
  src:  url("./fonts/Icons/status-bar-icons.eot?#iefix") format("embedded-opentype"),
        url("./fonts/Icons/status-bar-icons.woff") format("woff"),
        url("./fonts/Icons/status-bar-icons.ttf") format("truetype"),
        url("./fonts/Icons/status-bar-icons.svg#status-bar-icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="sorry-status-notice-icon-"]:before,
[class*=" sorry-status-notice-icon-"]:before {
  font-family: "status-bar-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
}

.sorry-status-notice-icon-times-circle:before {
  content: "\61";
}
.sorry-status-notice-icon-bullhorn:before {
  content: "\62";
}

/*
 * Status Bar
 *
 * This element wraps around the individual notices and groups
 * them logicaly together.
 */

.sorry-status-bar {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  width: 100%;

  font-family: "sorry-status-bar-open-sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Switch to open sans if possible? */
  font-size: 16px;
  font-weight: 300;

  background-color: #ccc;
  color: #fff;
}

/*
 * Status Notice
 * 
 * Each bar may contain multiple notices.
 */

.sorry-status-notice {
  position: relative; /* Contain the close icon. */

  padding: 12px 24px;
}
.sorry-status-notice:first-child { padding-top: 24px; }
.sorry-status-notice:last-child { padding-bottom: 24px; }
.sorry-status-notice:after {
  visibility: hidden;
  
  display: block;
  clear: both;
  height: 0;

  font-size: 0;

  content: " ";
}

/*
 * Resets
 *
 * Reset any margins or paddings which may be applied
 * to generic paragraphs and suchlike.
 */
.sorry-status-notice-header, 
.sorry-status-notice-text, 
.sorry-status-notice-link {
  margin: 0;
  padding: 0;
}

/*
 * Notice Header
 *
 * Contains the 'Ongoing' and the 'Bullhorn' Icon.
 */
.sorry-status-notice-header {
  margin-bottom: 16px;

  font-weight: 700;
  font-size: 18px;
}
.sorry-status-notice-header 
.sorry-status-notice-icon { margin-right: 5px; }

/*
 * Notice Content
 *
 * This is the core text of the notice, pulled dynamicly
 * from the status page, could be any length.
*/

.sorry-status-notice-content {
  padding-right: 24px;

  color: #333;
}

.sorry-status-notice-text {
  margin-bottom: 16px; 

  /* Truncate the text */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.sorry-status-notice-subject {
  font-weight: 500;
  margin-right: 5px;
}

/*
 * Notice Schedule
 *
 * Soften the text a little, just to give a subtle distinct
 * style outside of the usual content.
 */
.sorry-status-notice-schedule {
  opacity: 0.8;
  font-style: italic;
} 

/*
 * Notice Link
 *
 * Each notice is acompanies by a link through to the status
 * page should someone wish to read more.
 */

.sorry-status-notice-link {
  display: inline-block;
  padding: 5px 10px;

  font-size: 14px;
  text-decoration: none;

  border: 1px solid #2980b9;
  border-radius: 4px;
  color: #2980b9;

  opacity: .7;
}
.sorry-status-notice-link:hover, 
.sorry-status-notice-link:visited, 
.sorry-status-notice-link:active {
  text-decoration: none;
  opacity: 1;
}

/*
 * Close / Dismiss Button
 *
 * Each notice has a [x] icon which allows
 * the user to dismiss the notice.
 */

button.sorry-status-notice-close {
  position: absolute;
  right: 24px;

  font-size: 16px;

  color: #333;

  opacity: .2;
  filter: alpha(opacity=20);
}

button.sorry-status-notice-close:hover,
button.sorry-status-notice-close:focus {
  text-decoration: none;

  cursor: pointer;
  
  opacity: .75;
  filter: alpha(opacity=75);
}

button.sorry-status-notice-close {
  padding: 0;

  cursor: pointer;
  background: transparent;
  border: 0;

  -webkit-appearance: none;
}

/*
 * Large Screen Styles
 *
 * When on bigger screens we want to drop the box look
 * and go for an inline narrow bar with trimmed content.
 *
 * Usualy I'd not block media queries like this at the bottom
 * of the stylesheet but as it's only small I feel it's fair.
 */
@media (min-width: 972px) {
  .sorry-status-notice {
    line-height: 34px;
  }

  .sorry-status-notice-content {
    margin: 0 auto;
    padding-right: 0;
    line-height: inherit;

    text-align: center;
  }

  .sorry-status-notice-details {
    display: inline-block;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    padding-right: 14px;
  }

  .sorry-status-notice-header,
  .sorry-status-notice-schedule,
  .sorry-status-notice-details { margin-right: 14px; }


  .sorry-status-notice-details * { display: inline; }

  .sorry-status-notice-link { 
    line-height: initial;
    max-width: 20%;
  }

  .sorry-status-notice-close { line-height: inherit; }
}