/* Defaults
    Black:          #333333 	rgb(51, 51, 51)
    Grey text:      #888888     rgb(255, 185, 185)
    Black highlight:#bbbbbb     rgb(187, 187, 187)
    Yellow border:  #f0f0dd     rgb(240, 240, 221)
    Dark yellow:    #dddd99     rgb(221, 221, 153)
    Main yellow:    #ffffdd     rgb(255, 255, 221)
    Light yellow:   #ffffee     rgb(255, 255, 238)
	  Dark red:       #cf0404     rgb(207, 4, 4)              (hover/active links)
    Mid red:        #cc3636     rgb(204, 54, 54)
    Light red:      #ffb9b9     rgb(255, 185, 185)
    Border blue:    #66afe9     
	  Dark blue:      #337ab7     rgb(51, 122, 183)            (links)
    Mid blue:       #85bbe9     rgb(133, 187, 233)
    Light blue:     #cbdefa     rgb(203, 222, 250)
    Dark green:     #3e8f3e     rgb(62, 143, 62)
    Light green:    #5cb85c     rgb(92, 184, 92)
================*/

/*INFORMATION*/

/*Colour Class tags*/
.dark-red {
  color: #cf0404;
}

/*Status-Message, Alert*/
.alert {
  background-image: none;
  -ms-border-radius: 0;
  border-radius: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 15px;
  font-weight: 700;
  color: #333333;
}

/*Vue & Vee Validate*/
.v-form-text {
  color: #337ab7;
  height: 35px;
  font-weight: 900;
  display: block;
  width: 100%;
}

.v-help {
  margin: 2px 0 10px 0;
}

.v-danger {
  color: #cf0404;
}

/*BASIC*/
.test-border,
.testBorder {
  border: 1px solid green;
}


.success {
  color: #3e8f3e;
}

.danger {
  color: #cf0404;
}

.warning {
  color: #dddd99;
}

.info {
  color: #337ab7;
}

.underline {
  text-decoration: underline;
}

#body {
  margin-top: 20px;
  min-height: 500px;
}

header {
  padding-top: 20px;
}

  header a, header a:hover, header a:focus {
    text-decoration: none;
    color: #ffffee;
  }

legend {
  margin-top: 25px;
}

  hr.spacer {
    padding: 0;
    margin: 0;
    margin-top: 10px;
    border: none;
    height: 0;
  }

.strong {
  font-weight: 600;
}

.disabled { /*important to override any later css*/
  color: #bbbbbb !important;
  cursor: not-allowed !important;
}

.light {
  color: #bbbbbb;
}

.form-control.disabled {
  background-color: #fafaee;
}

.disabledMessage, /*CamelCase version needed for Knockout*/
.disabled-message { /*important to override any later css*/
  color: #bbbbbb !important;
  cursor: help !important;
}



.log-in {
  cursor: pointer;
}






.admin-help, :hover.admin-help {
  text-decoration: none;
  cursor: pointer;
}

fieldset[disabled] .admin-help {
  visibility: hidden;
}

.top-spacer,
.topSpacer { /*phase out*/
  margin-top: 15px;
}
.right-spacer,
.rightSpacer {
  margin-right: 15px;
}
.bottom-spacer,
.bottomSpacer {
  margin-bottom: 15px;
}
.left-spacer,
.leftSpacer { /*phase out*/
  margin-left: 15px;
}

/*VUE helper css*/
[v-cloak] {
  display: none;
}

/*Basic comic pages tags 24/1/2016 */
.comic h1 {
  padding: 0 0 0 0;
  margin: 0 0 20px 0;
  font-size: 240%;
  font-weight: 900;
}

  .comic h1 small {
    padding-left: 20px;
    font-size: 70%;
    font-weight: 600;
    color: #333333;
    white-space: nowrap;
  }

  .comic h1.subheading {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    font-size: 110%;
    line-height: 140%;
    background: none;
    color: #333333;
  }

    .comic h1.subheading + p {
      margin-top: 15px;
    }

.comic h2 {
  padding: 0 0 0 0;
  margin: 20px 0 20px 0;
  font-size: 140%;
  font-weight: 900;
}

  .comic h2 small {
    padding: 0 0 0 50px;
    margin: 20px 0 20px 0;
    font-size: 70%;
    font-weight: 600;
  }

.comic h3 {
  padding: 0 0 0 0;
  margin: 10px 0 0 0;
  font-size: 100%;
  font-weight: 700;
  color: #337ab7;
}

.comic tr.separator td {
  border-top: solid 1px #cf0404 !important;
}

.comic tr.separator-light td {
  border-top: solid 1px #ffb9b9 !important;
}

.highlight {
  color: #cf0404;
}

.comic p {
  margin-left: 5px;
}

  .comic p.tight {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .comic p.first {
    font-weight: 900;
  }

.comic a {
  color: #337ab7;
  text-decoration: none;
}

  .comic a:hover,
  .comic a:focus {
    color: #cf0404;
  }

.comic blockquote {
  font-size: 100%;
  padding-top: 0;
  padding-bottom: 10px;
  margin: 0 0 0 0;
}


.comic .detail ul {
  margin-bottom: 0;
  margin-left: 0;
  padding-left: 30px;
}

.comic .detail li {
  display: block;
  margin-top: 0;
  margin-left: 0;
}

  .comic .detail li:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\e072";
    font-family: 'Glyphicons Halflings';
    float: left;
    margin-top: 0;
    margin-left: -30px;
    color: #cf0404;
  }

.comic dl {
  margin-top: 0;
}

.comic dt,
.comic dd {
  text-align: left;
  margin-left: 15px;
}

.comic dt {
  font-weight: 900;
}

.comic dd {
  margin-bottom: 15px;
  padding-left: 145px;
}

.comic .dl-horizontal dt,
.comic .dl-horizontal dd {
  text-align: left;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

.comic .dl-horizontal dt {
  max-width: 130px !important;
  font-weight: 900;
}

.comic .dl-horizontal dd {
  padding-left: 15px;
}

@media (min-width: 768px) {
  .comic .dl-horizontal dd {
    padding-left: 145px;
  }
}

.comic .brand {
  border: 1px solid #333333 !important;
}



/*Home page special design*/
.clearpadding {
  padding: 0 0 0 0;
}

.click-me {
  cursor: pointer;
}

@media (max-width: 992px) {
  .mobile-hide {
    display: none;
  }
}

.feature-random-image {
  padding: 0 0 0 0;
  margin: 0 0 -50px 0;
}

  .feature-random-image img {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    border: 2px solid #cf0404;
    background-color: #ffffdd;
    min-height: 200px;
    width: 100%;
    -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
  }

  .feature-random-image .subheading {
    position: relative;
    top: -55px;
    left: 2px;
    padding: 5px 5px 5px 15px;
    margin: 0 0 0 0;
    border: 0 solid #cf0404;
    height: 55px;
    background: #cf0404;
    background: -webkit-linear-gradient(left, rgba(207,4,4,0.1), rgba(207,4,4,0.8)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(207,4,4,0.1), rgba(207,4,4,0.8)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(207,4,4,0.1), rgba(207,4,4,0.8)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(207,4,4,0.1), rgba(207,4,4,0.8)); /* Standard syntax (must be last) */
    color: #ffffee;
    text-align: right;
    line-height: 80%;
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 3s; /* Firefox < 16 */
    -ms-animation: fadein 3s; /* Internet Explorer */
    -o-animation: fadein 3s; /* Opera < 12.1 */
    animation: fadein 3s;
  }

@keyframes fadein {
  from {
    -ms-opacity: 0;
    opacity: 0;
  }

  to {
    -ms-opacity: 1;
    opacity: 1;
  }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    -ms-opacity: 0;
    opacity: 0;
  }

  to {
    -ms-opacity: 1;
    opacity: 1;
  }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    -ms-opacity: 0;
    opacity: 0;
  }

  to {
    -ms-opacity: 1;
    opacity: 1;
  }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    -ms-opacity: 0;
    opacity: 0;
  }

  to {
    -ms-opacity: 1;
    opacity: 1;
  }
}

.feature-random-image .subheading h3 {
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  font-family: comic, "Comic Sans MS", cursive, sans-serif;
  font-size: 140%;
  text-shadow: 1px 1px #000000;
}

.feature-random-image .subheading h4 {
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  font-size: 90%;
  text-shadow: 1px 1px #000000;
}

.feature-welcome .feature-heading {
  margin-bottom: -5px;
}

.feature-redbox .feature-body {
  cursor: pointer;
}

.feature-comments h2,
.feature-redbox h2,
.feature-clear h2,
.feature-random-image h2,
.feature-welcome h2,
.feature-index h2 {
  padding: 20px 0 0 0;
  margin: 0 0 0 0;
  font-family: comic, "Comic Sans MS", cursive, sans-serif;
  text-shadow: 1px 1px #ffffee;
}

  .feature-comments h2 span,
  .feature-redbox h2 span,
  .feature-clear h2 span,
  .feature-random-image h2 span,
  .feature-welcome h2 span,
  .feature-index h2 span {
    display: inline-block;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    font-size: 200%;
    position: relative;
    top: 15px;
    left: -5px;
    z-index: 40;
  }

  .feature-comments h2 small,
  .feature-redbox h2 small,
  .feature-clear h2 small,
  .feature-random-image h2 small,
  .feature-welcome h2 small,
  .feature-index h2 small {
    display: inline-block;
    padding: 25px 0 0 0;
    margin: 0 0 0 0;
    font-size: 70%;
    font-weight: 100;
  }

.feature-comments .body-contents {
  border: 2px solid #cf0404;
  -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
}

.feature-comments .table {
  border: none;
}

.feature-comments .table-hover {
  margin: 0 0 0 0;
}

  .feature-comments .table-hover > tbody > tr {
    color: #333333;
    background: #cf0404;
    background: -webkit-linear-gradient(bottom, rgba(255, 255, 221,0.0), rgba(255, 255, 221,1.0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(top, rgba(255, 255, 221,0.0), rgba(255, 255, 221,1.0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, rgba(255, 255, 221,0.0), rgba(255, 255, 221,1.0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to top, rgba(255, 255, 221,0.0), rgba(255, 255, 221,1.0)); /* Standard syntax (must be last) */
    border: none;
  }

    .feature-comments .table-hover > tbody > tr > td {
      padding: 15px 15px 15px 5px;
      border: none;
    }

    .feature-comments .table-hover > tbody > tr:hover td {
      background-color: #cf0404;
      color: #ffffee;
      cursor: pointer;
    }

  .feature-comments .table-hover > tfoot {
    padding: 5px 15px 5px 5px;
    color: #ffffee;
    background-color: #cf0404; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left,#cf0404, #ffb9b9); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #cf0404, #ffb9b9); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #cf0404, #ffb9b9); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #cf0404, #ffb9b9); /* Standard syntax */
  }

    .feature-comments .table-hover > tfoot > tr > td {
      padding: 5px 5px 5px 5px;
    }

      .feature-comments .table-hover > tfoot > tr > td > a {
        display: inline-block;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        float: right;
        color: #cf0404;
        vertical-align: top;
      }

        .feature-comments .table-hover > tfoot > tr > td > a:hover {
          color: #cc3636;
          text-shadow: 1px 1px 3px #ffffee;
        }

        .feature-comments .table-hover > tfoot > tr > td > a > span.clickable-glyph {
          padding: 0 0 0 0;
          margin: 0 0 0 0;
        }

.feature-comments .comment-commenter {
  font-weight: 900;
}

.feature-comments .comment-text {
  padding-bottom: 3px;
  font-weight: 600;
}

.feature-comments .comment-detail {
  background-color: #ffffff;
  color: #000000;
  padding: 15px 15px 15px 35px;
  text-indent: -20px;
  border: 1px solid #f0f0dd;
}

.feature-comments .comment-message {
  font-style: italic;
}

  .feature-comments .comment-message .fas {
    color: #cf0404;
    text-indent: 0; /*Remove text indent imposed in .comment-detail*/
  }

.feature-comments .comment-created {
  font-size: 80%;
  display: inline-block;
  padding-top: 4px;
  padding-left: 10px;
  float: right;
}

.feature-redbox h3 {
  padding: 10px 0 10px 15px;
  margin: 0 0 0 0;
  border-color: #cf0404;
  color: #ffffdd;
  display: block;
  font-weight: 900;
  font-size: 120%;
  background: #cf0404; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left,#cf0404, #ffb9b9); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #cf0404, #ffb9b9); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #cf0404, #ffb9b9); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #cf0404, #ffb9b9); /* Standard syntax */
}

  .feature-redbox h3 small {
    margin-left: 20px;
    color: #ffb9b9;
    display: inline-block;
    font-weight: 900;
    font-size: 80%;
  }

.feature-redbox .body-contents {
  border: 2px solid #cf0404;
  background: #ffffdd;
  -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
}

.feature-clear .body-contents {
  background: #ffffee;
}

.feature-redbox .text {
  padding: 0px 15px 15px 0px;
}

@media (max-width: 767px) {
  .feature-redbox .text {
    padding-left: 15px;
  }
}

.feature-redbox p {
  padding: 0 0 0 0;
  margin: 15px 0 15px 0;
}

.feature-redbox img {
  margin: 15px 0 15px 0;
  border: 2px solid #ffb9b9;
}

@media (max-width: 767px) {
  .feature-redbox .aligncentre {
    text-align: center;
  }
}

.welcome-leader {
  margin: 0 0 0 0;
  padding: 15px 0 0 0;
  border-top: 10px solid #cf0404;
  width: 100%;
}

div.square-box {
  margin: 0 0 0 0;
  width: 100%;
  padding-top: 0;
  padding-bottom: 100%;
}

  div.square-box > div.square-box-insert {
    position: absolute;
    top: 0;
    bottom: 10px;
    left: 10px;
    right: 0;
    overflow: hidden;
    border: 2px solid #cf0404;
    cursor: pointer;
    -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
  }

div.square-box-insert.box-main {
  display: block;
}

div.square-box-insert.box-detail {
  display: none;
  background-color: rgba(255, 255, 238, 0.85);
}

  div.square-box-insert.box-main p,
  div.square-box-insert.box-detail a {
    position: absolute;
    padding: 5px 5px 0 5px;
    margin: 0 0 0 0;
    left: 0;
    bottom: 0;
    right: 0;
    font-size: 100%;
    font-weight: 900;
    color: #ffffff;
    text-align: right;
    text-shadow: 1px 1px 5px #000000;
    background: #cf0404;
    background: -webkit-linear-gradient(left, rgba(207,4,4,0), rgba(207,4,4,0.9)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(207,4,4,0), rgba(207,4,4,0.9)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(207,4,4,0), rgba(207,4,4,0.9)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(207,4,4,0), rgba(207,4,4,0.9)); /* Standard syntax (must be last) */
  }

  div.square-box-insert.box-detail p {
    padding: 10px 1px 0 5px;
    margin: 0 0 0 0;
    font-weight: 900;
    font-size: 85%;
    line-height: 125%;
    color: #cf0404;
    text-shadow: 1px 1px 10px #ffffff;
  }
/*Special arrangement for the awkward size between mobile and desktop that gets too large for feature spotlight.*/
@media (min-width: 500px) and (max-width: 767px) { /*768 is precisely iPad and creates a problem if applied on iPad.*/
  .visible-xs-sm {
    display: block !important;
    max-width: 450px;
  }

  .col-xs-6 {
    width: 33%;
  }

  div.square-box-insert.box-detail p {
    font-size: 100%;
    line-height: 130%;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  div.square-box-insert.box-detail p {
    font-size: 100%;
    line-height: 140%;
  }
}

/*Forms controls and buttons*/
label.required::before {
  content: "*";
  width: 10px;
  font-family: 'Glyphicons Halflings';
  font-size: 80%;
  margin-left: -15px;
  padding-right: 4px;
  color: #cf0404;
}

form.btn {
  display: inline-block;
  padding: 0 0 0 0;
  margin: 0 15px 0 0;
}

a.btn,
button.btn {
  text-align: left !important;
  background-image: none;
  text-decoration: none;
  display: inline-block;
  font-weight: 900;
  text-shadow: none;
}

a.btn-default {
  border: 1px solid #337ab7;
  background-color: #cbdefa;
  background-image: none !important;
  /*height: 35px;*/
}

  a.btn-default:hover,
  a.btn-default:focus {
    background-color: #cf0404;
    border-top-color: #cf0404;
    border-bottom-color: #cf0404;
    color: #ffffff;
    background-image: none !important;
    text-shadow: none;
  }


button.btn .glyphicon,
a.btn .fa,
button.btn .fa {
  width: auto; /*previously had extra space - 25px. Monitor impacts.*/
}

.input-group-btn button.btn .glyphicon, /*remove extra spacing if part of input group*/
.input-group-btn button.btn .fa,
button.btn-link .glyphicon, /*remove extra spacing if it is only displayed as a link*/
a.btn-link .fa,
button.btn-link .fa {
  width: auto;
}

  button.btn-link .glyphicon:hover,
  button.btn-link .fa:hover {
    color: #cf0404 !important;
  }

.btn .badge {
  font-size: 10px;
  margin-left: 3px;
}

.btn.strong {
  font-weight: 900 !important;
}

.btn-success[disabled],
.btn-danger[disabled] {
  background-color: #888888;
  border: 1px solid #333333;
}

.form-border {
  border: 1px solid #cbdefa;
  padding: 15px 0px 0 15px;
}

/*Attractive checkbox, using fontawesome - Needs carefully structured HTML
    <div class="checkbox">
        <input type="checkbox">
        <div></div>
    </div>              */
.checkbox {
  margin-top: 0;
}

  .checkbox input[type=checkbox] {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 5px; /*Magic numbers to get the icon to align*/
    width: 40px;
    height: 20px;
    z-index: 100;
    padding: 0;
    margin: 0;
  }

    .checkbox input[type=checkbox] ~ div,
    .checkbox input[type=checkbox]:checked ~ div {
      font-size: 25px;
      line-height: .8;
      position: absolute;
      top: 0;
      left: 0;
      padding: 0 0 0 15px;
      color: #337ab7;
    }

      .checkbox input[type=checkbox] ~ div::after {
        font-family: "Font Awesome 5 Pro";
        font-weight: 300;
        content: "\f0c8";
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
      }

      .checkbox input[type=checkbox]:checked ~ div::after {
        font-family: "Font Awesome 5 Pro";
        font-weight: 300;
        content: "\f14a";
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
      }



/*Navigation - pagination - forms*/

.input-group-addon {
  border: 1px solid #337ab7;
  background-color: #cbdefa;
  color: #337ab7;
  font-weight: 900;
  height: 35px;
}

.input-group-btn .btn {
  border: 1px solid #337ab7;
  background-color: #cbdefa;
  background-image: none !important;
  height: 35px;
}

  .input-group-btn .btn:hover,
  .input-group-btn .btn:focus {
    background-color: #cf0404;
    border-top-color: #cf0404;
    border-bottom-color: #cf0404;
    color: #ffffff;
    background-image: none !important;
    text-shadow: none;
  }

.control-label {
  margin-bottom: 3px !important;
}

.form-control {
  border: 1px solid #337ab7;
  color: #337ab7;
  height: 35px; /*Fixes height variation in the original 34px. WATCH because the cause of the issue is not clear*/
}

select.form-control {
  padding: 2px 5px 2px 5px;
  font-size: 100%;
}

  select.form-control option {
    height: 20px;
  }

.navigation .btn-group {
  margin-right: 5px;
  margin-bottom: 5px;
}

.navigation .btn-default {
  text-shadow: none;
  color: #337ab7;
}

.navigation .btn {
  border: 1px solid #337ab7;
  background-color: #ffffff;
  background-image: none !important;
}

  .navigation .btn:hover,
  .navigation .btn:focus {
    background-color: #cf0404;
    border-top-color: #cf0404;
    border-bottom-color: #cf0404;
    color: #ffffff;
    background-image: none !important;
    text-shadow: none;
  }

.withCaret {
  display: inline-block;
  margin-right: 15px;
}

.dropdown-toggle {
  color: #337ab7;
}

  .dropdown-toggle:hover,
  .dropdown-toggle:focus {
    color: #cbdefa !important;
  }

  .dropdown-menu .badge,
  .dropdown-toggle .badge {
    background-color: #337ab7;
  }

.dropdown-menu .disabled .badge {
  background-color: #888888;
}

.dropdown-header {
  font-weight: bold;
  color: #337ab7;
}

.navigation {
  margin-top: 25px;
  margin-bottom: 25px;
}

  .navigation li a {
    font-weight: bold;
    background-color: #ffffff;
    color: #337ab7;
  }

    .navigation li a:hover,
    .navigation li a:focus {
      background-color: #337ab7 !important;
      color: #cbdefa !important;
      background-image: none !important;
    }

  .navigation li.disabled a {
    font-weight: normal;
    color: #888888 !important;
  }

    .navigation li.disabled a:hover,
    .navigation li.disabled a:focus {
      background-color: #ffffff !important;
      color: #888888 !important;
    }

  .navigation .active {
    background-color: #337ab7;
    color: #cbdefa;
    background-image: none;
    cursor: default;
  }

  .navigation .disabled {
    color: #888888;
    background-color: #f7f7d7;
  }
/*Key meaning string*/
div.dl-horizontal {
  padding-bottom: 5px;
}

.kms {
  /*display: inline-block;*/
}

  .kms div {
    padding-left: 0px;
    padding-bottom: 5px;
  }

  .kms .main {
    font-weight: 600;
  }

  .kms .icon {
    display: inline-block;
    margin-left: 15px;
  }

.mimicDt {
  font-weight: 900;
}

/*Search*/
@media (min-width: 768px) {
  .search-terms .form-control {
    width: 580px !important;
  }
}

#search-submit .glyphicon {
  margin: 0;
}

.search-limits {
  margin-top: 10px;
  margin-bottom: 10px;
}

#search-clear {
  display: none;
  z-index: 5;
  position: absolute;
  right: 45px;
  top: 0;
  bottom: 0;
  height: 20px;
  margin: auto;
  font-size: 20px;
  cursor: pointer;
  color: #ffb9b9;
}

.search-results b {
  font-weight: 600;
  color: #888888;
}



/*Image partial view page/cover */
.innerContainer {
  vertical-align: top;
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 15px;
}

.image-control {
  border: 2px solid #cf0404;
}

.image-control-header {
  background-color: #cf0404;
  padding: 5px 5px 5px 5px;
  color: #ffffee;
  font-weight: 900;
}

  .image-control-header .header-text {
    display: table-cell;
    width: 100%;
  }

  .image-control-header .header-pointer {
    display: table-cell;
    text-align: right;
    height: 100%;
    width: 10%;
    vertical-align: middle;
  }

  .image-control-header a,
  .image-control-header a:hover {
    color: #ffffee;
  }

.image-control-body img,
.image-control-body img:hover,
.highslide img,
.highslide:hover img {
  border: 0px solid #cf0404 !important;
}

.image-control-footer {
  border-top: 2px solid #cf0404;
  padding: 15px 5px 15px 10px;
  font-size: 80%;
  background-color: #ffffff;
}

  .image-control-footer p {
    padding: 0px 0px 0px 0px;
    display: inline;
  }
/*Highslide gallery*/
/* Three styles: .highslide-slideshow .highslide-single .highslide-simple */

.highslide-thumbstrip-horizontal .highslide-marker {
  border-left-width: 25px !important;
  border-right-width: 25px !important;
  border-bottom: 25px solid white !important;
}

.highslide-wrapper {
  background-color: #cf0404 !important;
}

.highslide-loading {
  background-color: #ffffff !important;
}

.highslide-controls .disabled {
  display: none; /*This could be converted to faded, rather than hidden*/
}

.highslide-thumbstrip .image-control-footer {
  display: none;
}

.highslide-caption {
  width: 100%;
  text-align: center;
  background-color: #ffffff;
}

.text-controls span {
  display: none !important;
}

.highslide-simple .highslide-controls {
  display: none;
}

.highslide-simple .highslide-caption {
  display: none !important; /*important needed to override inline style*/
}

.text-controls {
  display: inline-block !important;
  top: 0 !important;
  left: 0 !important;
  margin: -32px 0 0 0 !important;
  padding: 2px 5px 2px 10px !important;
  width: 100% !important;
}

  .text-controls li {
    background-image: none !important;
  }

  .text-controls a {
    background: none !important;
  }

.highslide-controls,
.highslide-controls div,
.highslide-controls ul {
  width: 100%;
}

.text-controls a::after {
  display: inline-block !important;
  font-family: 'Glyphicons Halflings';
  font-size: 20px;
  color: #ffffee;
}

.highslide-controls li.highslide-previous a::after {
  content: "\e071";
}

.highslide-controls li.highslide-play a::after {
  content: "\e072";
}

.highslide-controls li.highslide-pause a::after {
  content: "\e073";
}

.highslide-controls li.highslide-next a::after {
  content: "\e075";
}

.highslide-controls li.highslide-move a::after {
  content: "\e068";
}

.highslide-controls li.highslide-full-expand a::after {
  content: "\e140";
}

.highslide-controls li.highslide-close a::after {
  content: "\e014";
}

.highslide-controls li.highslide-full-expand {
  position: absolute;
  right: 35px;
}

.highslide-controls li.highslide-close {
  position: absolute;
  right: 0px;
}

.highslide-single .highslide-caption { /*Check - could kill captions sometimes when it is needed on a single*/
  display: none !important;
}

.highslide-single .highslide-number {
  display: none !important;
  padding-top: 0px;
  height: 0px;
}

.highslide-number {
  display: inline-block;
  padding-top: 1px;
  padding-right: 10px;
  color: white;
  height: 20px;
  color: #cf0404 !important;
}

.highslide-single .highslide-thumbstrip,
.highslide-simple .highslide-thumbstrip {
  display: none !important;
}

.highslide-slideshow img,
.highslide-single img,
.highslide-simple img {
  border: 2px solid #cf0404 !important;
}

.highslide-slideshow .closebutton,
.highslide-single .closebutton,
.highslide-simple .closebutton {
  display: none;
}

.highslide-slideshow .highslide-caption {
  width: 100%;
  font-size: 80%;
  font-weight: 400;
  text-align: left;
  border: 2px solid #cf0404 !important;
  border-top: 0px solid #cf0404 !important;
}

.highslide-heading {
  background-color: #cf0404;
  margin: 0px 0px 0px 0px !important;
  padding: 0px 0px 0px 0px !important;
  height: 35px;
}




/*Flag on issue page */
.icon-flag-lg {
  border: 1px solid #333333;
  padding: 0px 0px 0px 0px;
  margin: 4px 0px 0px 0px;
  width: 60px;
  height: 35px;
}

.icon-flag-md {
  border: 1px solid #333333;
  padding: 0 0 0 0;
  margin: 3px 0 0 0;
  width: 40px;
  height: 25px;
}

.icon-flag-sm {
  border: 1px solid #333333;
  display: inline-block;
  line-height: inherit;
  vertical-align: middle;
  width: 28px;
  height: 17px;
  margin-right: 10px;
}
/*Boxes to match ShowHide items*/
.sidebarBox,
.sidebar-box {
  padding: 0 0 0 0;
  margin: 0 0 30px 0;
  border-left: 1px solid #cf0404;
  border-right: 1px solid #cf0404;
  border-bottom: 1px solid #cf0404;
  background-color: #ffffff;
  font-size: 90%;
}

.sidebarInsert,
.sidebar-insert {
  border-top: 1px solid #cf0404;
  padding: 10px 10px 15px 0;
  margin: 0 0 0 0;
}

  .sidebarInsert .btn-link,
  .sidebar-insert .btn-link {
    padding: 0px 0px 0px 15px;
    font-weight: normal;
    font-size: 100%;
    text-decoration: none;
    vertical-align: top;
  }

  .sidebarInsert .text,
  .sidebar-insert .text {
    display: block;
    width: 80%;
    text-align: left;
    white-space: normal;
    display: inline-block;
    vertical-align: top;
  }

  .sidebarInsert .static,
  .sidebarInsert .static:hover,
  .sidebar-insert .static,
  .sidebar-insert .static:hover {
    cursor: default;
    color: #333333;
  }

  .sidebarInsert .active:hover,
  .sidebar-insert .active:hover {
    color: #cf0404;
  }

  .sitebarInsert .btn-link .clickable-glyph,
  .sidebar-insert .btn-link .clickable-glyph {
    display: block;
    float: left;
    margin: 0 0 0 0;
    padding: 0 10px 0 0;
  }

.sidebarBox h1,
.sidebar-box h1 {
  display: block;
  padding: 10px 0 10px 15px;
  margin: 0 0 0 0;
  border: 1px;
  border-color: #cf0404;
  color: #ffffdd;
  background: #cf0404;
  display: block;
  font-weight: 900;
  font-size: 100%;
}

.sidebarBox h2,
.sidebar-box h2 {
  padding: 0 0 0 15px;
  margin: 0 0 10px 0;
  color: #cc3636;
  font-weight: 900;
  font-size: 100%;
}

.sidebarBox p,
.sidebar-box p {
  padding: 0px 0px 0px 15px;
  margin: 0px 0px 0px 0px;
}

  .sidebarBox p b,
  .sidebar-box p b {
    color: #cc3636;
    font-weight: 600;
  }

.sidebarBox ul,
.sidebar-box ul {
  padding: 0px 0px 0px 15px;
  margin: 0px 0px 0px 0px;
}

.sidebarBox li,
.sidebar-box li {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 5px 15px;
  display: block;
  padding-left: 0px;
}

  .sidebarBox li:before,
  .sidebar-box li:before {
    content: "\e072";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    float: left;
    padding-left: 0px;
    margin-top: 2px;
    margin-left: -15px;
    color: #cc3636;
  }

  .sidebarBox li.disabled:before,
  .sidebar-box li.disabled:before {
    color: #888888;
  }

.solidBox {
  margin: 15px 0 15px 0;
  border-left: 1px solid #cf0404;
  border-right: 1px solid #cf0404;
  border-bottom: 1px solid #cf0404;
}

  .solidBox h2 {
    display: block;
    padding: 10px 0 10px 15px;
    margin: 0 0 0 0;
    border: 1px;
    border-color: #cf0404;
    color: #ffffdd;
    background: #cf0404;
    display: block;
    font-weight: 900;
    font-size: 100%;
  }

  .solidBox p {
    padding: 10px 10px 10px 15px;
    margin: 0 0 0 0;
    font-size: 100%;
  }

.lightBox {
  margin: 15px 0 15px 0;
  padding: 15px 15px 15px 15px;
  border: 1px solid #f0f0dd !important;
  background-color: #ffffff;
}

  .lightBox h1 {
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
    color: #cf0404;
    font-size: 100%;
    font-weight: 900;
  }

  .lightBox h2 {
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
    font-size: 100%;
    font-weight: 900;
  }

  .lightBox p {
    margin: 0 0 10px 0;
    padding: 0 0 0 0;
    font-size: 90%;
    font-weight: normal;
  }
/*Approvals*/
#review-list .formatted p {
  margin-left: 0;
}

/*Comments*/
.new-comment {
  background-color: #cbdefa;
  border-color: #337ab7;
  -ms-border-image: none;
  -o-border-image: none;
  border-image: none;
  border-style: solid;
  border-width: 1px;
  padding: 15px 0 15px 0;
  margin: 0 0 15px 0;
}

.commentBody {
  vertical-align: top;
  display: table-cell;
  width: 100%;
  padding: 10px 0 0 0;
}

  .commentBody label {
    float: left;
    margin: 0 0 0 0;
  }

    .commentBody label span {
      float: left;
      display: inline-block;
      padding-bottom: 15px;
    }

    .commentBody label b {
      vertical-align: top;
      display: inline;
    }

  .commentBody .comment-message-holder {
    min-height: 42px;
  }

  .commentBody .comment-message {
    display: inline-block;
    padding-bottom: 10px;
    /*    min-height: 41px;*/
  }

@media (max-width: 767px) {
  .commentBody .comment-message {
    display: inline-block;
    margin-left: 30px;
  }
}

.autosize-base {
  height: 30px;
  min-height: 30px;
  max-height: 300px;
  resize: none;
}

.msgTextArea {
  padding: 3px 3px 0 7px;
  width: 100%;
  -ms-border-radius: initial;
  border-radius: initial;
  border-color: #85bbe9;
  border-width: 1px;
  border-style: solid;
  resize: none;
}

.msgTextArea:focus {
    outline: none;
    box-shadow: rgb(133, 187, 233) 0 0 5px;
  }

.editResponseText,
.editCommentText {
  margin: 0 0 0 0;
  padding: 3px 3px 0 7px;
  width: 100%;
  -ms-border-radius: initial;
  border-radius: initial;
  border-color: #cf0404;
  resize: none;
  outline: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.editResponseText:focus,
  .editCommentText:focus {
    outline: none;
    box-shadow: rgb(207, 4, 4) 0 0 5px;
  }

button.updateComment {
  float: right;
  vertical-align: top;
  display: none;
  padding: 4px 0 4px 7px;
  margin: 0 0 0 5px;
}

#btnComment {
  color: #337ab7;
}

#msgHolder {
  padding: 0 0 15px 0;
  margin: 0 0 0 0;
}

  #msgHolder a {
    cursor: pointer;
    text-decoration: none;
    color: #337ab7;
  }

    #msgHolder a:hover {
      color: #cf0404;
      text-decoration: none;
    }

.commentSection {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

  .commentSection ul {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0 0 0 0;
  }

  .commentSection li {
    margin: 0 0 0 0;
    padding: 0 0 5px 0;
    width: 100%;
  }

.commentHolder {
  clear: both;
  font-size: 100%;
  margin: 15px 0 0 0;
  padding: 0 0 15px 0;
  border-bottom: 1px solid #cbdefa;
  list-style: none;
}

  .commentHolder:last-child {
    border-bottom: none;
  }

  .commentHolder b {
    color: #337ab7;
    font-weight: 900;
  }

.responseHolder {
  display: inline-block;
  padding: 0 0 0 0;
  margin: 0 0 2px 0;
  text-align: left;
  background-color: #cbdefa;
  list-style: none;
}

.commentInApprovals {
  background-color: #dddddd;
  border: 1px solid #bbbbbb;
  padding-bottom: 0;
}

  .commentInApprovals:last-child {
    border-bottom: 1px solid #bbbbbb;
  }

  .commentInApprovals .responseHolder {
    background-color: #efefef;
    border-bottom: 2px solid #dddddd;
  }

.comment-approvals {
  text-align: right;
  padding: 10px 10px 0 10px;
  display: table-cell;
}

  .comment-approvals > div {
    width: 30px;
  }

.commentFooter {
  text-align: right;
  font-size: 90%;
  margin-left: 55px;
}

  .commentFooter a {
    display: inline-block;
    font-weight: normal;
  }

    .commentFooter a:hover {
      text-decoration: none;
    }

.publishResponse {
  padding: 10px 0 10px 0;
  margin: 0 0 0 0;
  text-align: right;
  width: 100%;
  display: none;
}

.responseTextArea {
  padding: 3px 3px 3px 7px;
  width: 90%;
  -ms-border-radius: 0;
  border-radius: 0;
  height: 40px;
}

.comment-instructions {
  border: 1px solid #337ab7;
  padding: 3px 3px 3px 7px;
  margin: 0 0 15px 0;
}

  .comment-instructions h1 {
    margin: 5px 0 3px 0;
    padding: 0 0 0 0;
    color: #337ab7;
    font-weight: 900;
    font-size: 90%;
  }

  .comment-instructions p {
    font-size: 80%;
  }

  .comment-instructions a {
    font-weight: 900;
  }
/*Submissions*/
.submit-container {
  z-index: 50;
  border-top: 3px solid #cf0404;
  border-bottom: 6px solid #333333;
  background-color: #ffffdd;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}

.submit-buttons {
  border-top: 8px solid #dddd99;
  padding: 20px 20px 20px 30px;
}








    /*ShowHide/Accordion item*/
    .showHideContainer {
      padding: 0 0 0 0;
      margin: 20px 0 0 0;
      border-left: 1px solid #cf0404;
      border-right: 1px solid #cf0404;
      border-bottom: 1px solid #cf0404;
    }

  .showHideContainer h1 {
    display: block;
    padding: 12px 0 5px 15px;
    margin: 0 0 0 0;
    border: 1px;
    border-color: #cf0404;
    color: #ffffdd;
    background: #cf0404;
    display: block;
    font-weight: 900;
    font-size: 100%;
    cursor: pointer;
  }

  .showHideContainer img.minmax {
    float: right;
    padding: 0 10px 5px 10px;
    margin: -2px 0 0 0;
  }

  .showHideContainer .showHideHeading {
    padding: 15px 5px 15px 5px;
    margin: 0 0 0 0;
    border-top: 1px solid #cf0404;
    border-bottom: 1px solid #ffffdd;
    background-color: #ffffdd;
    cursor: pointer;
  }

  .showHideContainer .listIcon {
    margin-right: 10px;
    font-weight: 900;
    font-size: 100%;
  }

  .showHideContainer .listNumber {
    margin-right: 10px;
    font-weight: 900;
    font-size: 100%;
  }

  .showHideContainer .listHeading {
    color: #cf0404;
    font-weight: 900;
    font-size: 100%;
  }

  .showHideContainer .listFeature {
    margin-left: 10px;
  }

.showHideDetail,
.showHideReplica {
  /*padding: 5px 5px 20px 15px;*/
  margin: 0 0 0 0;
  border-top: 1px solid #f0f0dd;
  border-bottom: 1px solid #ffffdd;
  background-color: #ffffee;
}

.showHideReplica {
  padding-top: 0;
  border-top: none;
}

  .showHideReplica > div {
    padding-left: 0;
  }

  .showHideDetail h2,
  .showHideReplica h2 {
    margin-top: 10px;
    color: #cf0404;
    font-weight: 900;
    font-size: 100%;
  }

    .showHideDetail h2 + p,
    .showHideReplica h2 + p {
      font-weight: 900;
    }

  .showHideDetail p,
  .showHideReplica p {
    line-height: 170%;
  }

  .showHideDetail ul.triangle li,
  .showHideReplica ul.triangle li {
    list-style-type: none;
  }

    .showHideDetail ul.triangle li:before,
    .showHideReplica ul.triangle li:before {
      /*Using a Bootstrap glyphicon as the bullet point*/
      content: "\e072";
      font-family: 'Glyphicons Halflings';
      float: left;
      margin-top: 0;
      margin-left: -30px;
      color: #cf0404;
    }

  .showHideDetail .dl-horizontal,
  .showHideReplica .dl-horizontal {
    margin-left: 15px;
  }

    .showHideDetail .dl-horizontal dt,
    .showHideDetail .dl-horizontal dd,
    .showHideReplica .dl-horizontal dt,
    .showHideReplica .dl-horizontal dd {
      text-align: left;
      padding: 0 0 0 0;
      margin: 0 0 0 0;
    }

    .showHideDetail .dl-horizontal dt,
    .showHideReplica .dl-horizontal dt {
      max-width: 110px !important;
      font-weight: 900;
    }

.ignore {
  display: none !important;
}

.showHideDetail .dl-horizontal dt.ignore + dd,
.showHideReplica .dl-horizontal dt.ignore + dd {
  padding-left: 0;
}

.showHideDetail .dl-horizontal dd,
.showHideReplica .dl-horizontal dd {
  margin-left: 0;
  padding-left: 15px;
}

.showHideDetail dl dd,
.showHideReplica dl dd {
  padding-left: 15px;
}
/*for larger screens only*/
@media (min-width: 768px) {
  .showHideDetail .dl-horizontal,
  .showHideReplica .dl-horizontal {
    padding-left: 15px;
  }

    .showHideDetail .dl-horizontal dt,
    .showHideReplica .dl-horizontal dt {
      max-width: 110px !important;
      font-weight: 900;
    }

    .showHideDetail .dl-horizontal dd,
    .showHideReplica .dl-horizontal dd {
      padding-left: 110px;
    }
}

.showHideDetail .samplePage,
.showHideReplica .samplePage {
  margin: 15px 0 15px 0;
  float: left;
}

@media (min-width: 992px) {
  .showHideDetail .samplePage,
  .showHideReplica .samplePage {
    float: right;
  }
}


/*Provide extra spacing to match bootstrap columns when items are grouped without new col*/
.bootstap-spacer {
  display: block;
  margin-top: 15px;
}
/*Bootstrap - Remove horizontal space when columns need to be tighter*/
@media (max-width: 768px) {
  .col-xs-tight-right {
    padding-right: 1px;
  }

  .col-xs-tight-left {
    padding-left: 1px;
  }

  .col-xs-tight-both {
    padding-right: 1px;
    padding-left: 1px;
  }
}

@media (min-width: 768px) {
  .col-sm-tight-right {
    padding-right: 1px;
  }

  .col-sm-tight-left {
    padding-left: 1px;
  }

  .col-sm-tight-both {
    padding-right: 1px;
    padding-left: 1px;
  }
}

@media (min-width: 992px) {
  .col-md-tight-right {
    padding-right: 1px;
  }

  .col-md-tight-left {
    padding-left: 1px;
  }

  .col-md-tight-both {
    padding-right: 1px;
    padding-left: 1px;
  }
}

@media (min-width: 1200px) {
  .col-lg-tight-right {
    padding-right: 1px;
  }

  .col-lg-tight-left {
    padding-left: 1px;
  }

  .col-lg-tight-both {
    padding-right: 1px;
    padding-left: 1px;
  }
}


/*Progress meter*/
#progress-count {
  padding-left: 20px;
}


/*Format bootstrap table for comments*/
.table-comments {
  border-bottom: none !important;
  margin-left: 20px;
}

  .table-comments > thead > tr > th,
  .table-comments > tbody > tr > th,
  .table-comments > tfoot > tr > th {
    padding: 0;
    padding-top: 10px;
    border: none;
  }

  .table-comments > thead > tr > td,
  .table-comments > tbody > tr > td,
  .table-comments > tfoot > tr > td {
    padding: 0;
    border: none;
  }

/*Replace standard Bootstrap values*/
.col-form-label {
  line-height: 100%;
}

.dl-horizontal dt, .dl-horizontal dd {
  padding-top: 20px;
}

.table {
  border-bottom: 1px solid #cf0404;
}

  .table > thead > tr > th {
    font-weight: 900;
    border-top: 1px solid #cf0404;
    border-bottom: 1px solid #cf0404;
  }

.table-hover.middle > tbody > tr > td {
  vertical-align: middle !important;
}

.table-hover > tbody > tr.ajax-data-href:hover,
.table-hover > tbody > tr:hover {
  background-color: #ffffdd;
  cursor: pointer;
}

.table-hover > tbody > tr > td.ajax-data-href-exclude:hover,
.table-hover > tbody > tr > td.ajax-data-href-exclude a:hover {
  cursor: default;
}

.table-hover > tbody > tr > td.ajax-data-href-button button:hover {
  cursor: default;
  color: #337ab7 !important;
}

.table-hover > tbody > tr > td.zoom:hover,
.table-hover > tbody > tr > td.zoom a:hover {
  cursor: zoom-in;
}

/*@media (min-width: 768px) {     
    .form-inline .input-group {
    width: 100%;
    }
} */ /*Attempt for list of issues on series page - makes group split up at high resolution*/


.ajax-spinner {
  background-image: url(/Areas/Shared/Content/images/ausreprints/loading-icon-red.gif);
  background-repeat: no-repeat;
  background-position: 50% 150px;
  z-index: 999;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffee;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}
/*glyphicon-popover*/
.glyphicon-popover {
  font-size: 120%;
  line-height: 100%;
  color: #337ab7;
  cursor: pointer;
}

  .glyphicon-popover:hover,
  .glyphicon-popover:focus {
    color: #cf0404;
  }

.popover {
  font-size: 90%;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  border-radius: 0;
  border: 1px solid #cf0404;
}

  .popover.top .arrow {
    border-top-color: #cf0404;
  }

  .popover.right .arrow {
    border-right-color: #cf0404;
  }

  .popover.bottom .arrow {
    border-bottom-color: #cf0404;
  }

  .popover.left .arrow {
    border-left-color: #cf0404;
  }

  .popover h3 {
    border-radius: 0;
    padding: 10px 0px 10px 15px;
    margin: 0px 0px 0px 0px;
    font-weight: 900;
    background-color: #cf0404;
    color: #ffffdd;
  }

  .popover popover-content {
    padding: 10px 15px 10px 15px;
    margin: 0px 0px 0px 0px;
  }

  .popover .popover-content p {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 8px 0px;
  }

  .popover .popover-content dl { /*Based on sidebar box*/
    width: 100%;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
  }

  .popover .popover-content dt {
    width: 100%;
    max-width: none !important;
    color: #cc3636;
    font-weight: 500;
  }

  .popover .popover-content dd {
    display: block;
    width: 100%;
    padding-left: 0px;
  }

    .popover .popover-content dd:before {
      display: inline-block;
      content: "\e072";
      font-family: 'Glyphicons Halflings';
      font-size: 9px;
      color: #cc3636;
      padding: 0px 5px 0px 15px;
    }




/*Replace Bootstrap modal values*/
#arModal {
  outline: #cf0404;
  z-index: 10000;
  top: 25%;
}

  #arModal .modal-icon {
    font-weight: 500;
    font-size: 170%;
    color: #cf0404;
  }

  #arModal .modal-header {
    padding-bottom: 10px;
    background-color: #cf0404;
  }

  #arModal h1.modal-title {
    color: #ffffee;
    font-size: 120%;
    font-weight: 900;
  }

  #arModal h1 {
    color: #333333;
    font-size: 120%;
    font-weight: 900;
  }

  #arModal h2 {
    color: #337ab7;
    font-size: 100%;
    font-weight: 900;
  }

  #arModal .modal-body,
  #arModal .modal-footer {
    color: #333333;
    background-color: #ffffee;
    font-size: 100%;
    font-weight: 500;
    padding: 25px 20px 30px 20px;
  }

  #arModal .close {
    color: #ffffee;
  }

    #arModal .close:hover,
    #arModal .close:focus {
      color: #ffffff;
    }

  #arModal .modal-footer {
    padding: 10px 15px 15px 15px;
    border-top: 2px solid #f0f0dd;
  }

  #arModal a {
    text-decoration: none;
  }

    #arModal a:hover {
      color: #cf0404 !important;
    }

  #arModal .modal-footer button {
    background-color: #337ab7;
    background-image: none;
    border: 1px solid #337ab7;
    border-radius: initial;
    color: #ffffee;
    padding: 5px 15px 5px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 100%;
    font-weight: 900;
    text-shadow: none
  }

    #arModal .modal-footer button:hover,
    #arModal .modal-footer button:focus {
      background-color: #cf0404;
      color: #ffffff;
      border: 1px solid #cf0404;
    }


/*Overwrite standard PagedList color values*/
.pagination > li > a,
.pagination > li > span {
  background-color: #ffffff;
  border-color: #0066FF !important;
  color: #000000 !important;
}

  .pagination > li > a:hover,
  .pagination > li > span:hover,
  .pagination > li > a:focus,
  .pagination > li > span:focus {
    background-color: #eeeeee;
    color: #0033cc !important;
  }

.pagination > .active > a,
.pagination > .active > span {
  color: #ffffff !important;
}

  .pagination > .active > a:hover,
  .pagination > .active > span:hover,
  .pagination > .active > a:focus,
  .pagination > .active > span:focus {
    color: #dddddd !important;
  }

  .pagination > .active > a,
  .pagination > .active > span,
  .pagination > .active > a:hover,
  .pagination > .active > span:hover,
  .pagination > .active > a:focus,
  .pagination > .active > span:focus {
    background-color: #0033cc !important;
    border-color: #0033cc !important;
  }

.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #999999;
  background-color: #ffffff;
  border-color: #dddddd;
}

.pager li > a,
.pager li > span {
  background-color: #ffffff;
  border-color: #dddddd;
}

  .pager li > a:hover,
  .pager li > a:focus {
    background-color: #eeeeee;
  }

.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
  color: #999999;
  background-color: #ffffff;
}

/*Special formatting for icons*/
ul.icon-list {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

  ul.icon-list li {
    padding: 0px;
    margin: 10px 0px 0px 10px;
  }

    ul.icon-list li span {
      margin-right: 15px;
    }



/*Fix location of livicons for inline with text*/
.livicon-inline {
  position: relative;
  top: 3px;
  left: -2px;
  color: green;
  display: inline-block;
}
/*Fix location of livicons for buttons*/
.btn .livicon {
  display: inline-block;
  line-height: inherit;
  vertical-align: middle;
  height: 18px !important;
  margin-right: 10px;
}
/*Create a list for livicons as indivicual bullets*/
li .livicon {
  display: inline-block;
  line-height: inherit;
  vertical-align: middle;
  height: 18px !important;
  margin-right: 10px;
  text-indent: -10px;
}

.list-livicon {
  text-indent: -10px;
  margin-left: 0px;
  list-style: none;
}

  .list-livicon li {
    margin-top: 5px;
    text-indent: -30px;
    padding-left: 0px;
  }

/* Layout header */
header {
  height: 100px;
}

.theme-background {
  background-color: #cf0404;
  background-image: url(/Images/skin/header.gif);
  background-position: left bottom;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .navbar-brand img.logo {
    margin-top: -15px;
    margin-left: -30px;
    margin-right: -40px;
    width: 170px;
    height: 161px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
  }

  .navbar-brand img.logo-sm {
    margin-top: -15px;
    margin-left: -25px;
    margin-right: 25px;
    width: 70px;
    height: 66px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
  }




  .logo-margin {
    margin-left: 170px;
  }
}

@media (max-width: 767px) {
  .navbar-brand img.logo {
    margin-top: -15px;
    margin-left: -25px;
  }
}


.slogan {
  margin: 15px 0 120px 0;
  padding: 0 0 0 0;
  font-family: comic, "Comic Sans MS", cursive, sans-serif;
  color: #ffffee;
}

  .slogan h1 {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-size: 300%;
    font-weight: 500;
  }

  .slogan h2 {
    margin: 0 0 0 15px;
    padding: 0 0 0 0;
    font-size: 110%;
  }


/*Navigation header*/
.navbar-fixed-top {
  z-index: 50;
}
/*Multi-level menu*/
.dropdown-submenu {
  position: relative;
}

.dropdown-menu > li > a,
.dropdown-menu > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
}
/*.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:active {
    background-color: #ffb9b9 !important;       /*only affects dropdown in mobile size
} */
.dropdown-menu > .unlinked > a:hover {
  cursor: default;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
  /*display: block;*/
}

.dropdown-submenu > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #888888;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
  border-left-color: #cc3636;
}

.dropdown-submenu.pull-left {
  float: none;
}

  .dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
  }
/*Multi column menu*/
.dropdown-menu {
  min-width: 200px;
}

  .dropdown-menu.columns-2 {
    min-width: 420px;
  }

  .dropdown-menu.columns-3 {
    min-width: 630px;
  }

  .dropdown-menu li a {
    padding: 5px 15px;
    font-weight: 300;
  }

.multi-column-dropdown {
  list-style: none;
}

  .multi-column-dropdown li a {
    display: block;
    clear: both;
    line-height: 1.428571429;
    color: #333333;
    white-space: normal;
  }

    .multi-level li a:hover,
    .multi-column-dropdown li a:hover {
      text-decoration: none;
      color: #333333;
      background-color: #f5f5f5; /* #hover highligh;*/
    }

.dropdown-icon {
  display: inline-block;
  width: 25px;
}

/*Search in navigation bar*/
.navbar-inverse {
  background-image: none !important;
  background-color: #333333 !important;
}

.navbar-searchicon {
  font-size: larger;
  position: relative;
  float: right;
  padding: 9px 0px;
  margin-top: 7px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  color: #ffffee;
}

.navbar-search:hover {
  color: #ffb9b9;
}

@media (max-width: 768px) {
  .navbar-searchicon {
    display: inline-block;
  }

  #quick-search {
    display: none;
  }
}

@media (min-width: 768px) {
  .navbar-searchicon {
    display: none;
  }

  #quick-search {
    display: inline-block;
    position: relative;
    height: 30px;
    width: auto;
    top: 0px;
    padding: 0px 0px 0px 0px;
    margin: 10px 0px 0px 10px;
  }

    #quick-search #label {
      z-index: 10;
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;
      width: 30px;
      height: 30px;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      color: #9d9d9d;
      background-color: #333333;
      font-size: 0px;
    }

    #quick-search.active #label {
      display: none;
    }

    #quick-search label:hover {
      color: #ffb9b9;
    }

    #quick-search label::before {
      display: inline-block;
      padding: 2px 0px 0px 4px;
      margin: 0px 0px 0px 0px;
      font-family: 'Glyphicons Halflings';
      content: "\e003";
      font-size: 14pt;
      cursor: pointer;
    }

    #quick-search #input {
      position: absolute;
      top: 0;
      left: 0px;
      width: 0px;
      height: 30px;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      -webkit-transition: width 1s ease;
      -moz-transition: width 1s ease;
      -o-transition: width 1s ease;
      transition: width 1s ease;
      background-color: transparent;
    }

    #quick-search.active #input {
      background-color: #ffffee;
      width: 130px;
    }

    #quick-search #search-terms {
      z-index: 10;
      padding: 0px 8px 0px 8px;
      margin: 0px 0px 0px 0px;
      background-color: transparent;
      border: none;
      outline: none;
      font-size: 100%;
      width: 0px;
      height: 28px;
    }

    #quick-search.active #search-terms {
      transition: width 1s ease;
      width: 130px;
    }

    #quick-search #button {
      position: absolute;
      top: 0;
      -webkit-transition: left 1s ease;
      -moz-transition: left 1s ease;
      -o-transition: left 1s ease;
      transition: left 1s ease;
      left: 0px;
      height: 30px;
      background-color: transparent;
    }

    #quick-search.active #button {
      left: 130px;
    }

    #quick-search #search-button {
      display: none;
      width: 40px;
      height: 30px;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      border: none;
      outline: none;
      background-color: #cf0404;
      color: #ffffee;
    }

    #quick-search.active #search-button {
      display: inline-block;
    }

      #quick-search.active #search-button::after {
        display: inline-block;
        width: 40px;
        height: 30px;
        display: inline-block;
        padding: 2px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        font-family: 'Glyphicons Halflings';
        content: "\e003";
        font-size: 14pt;
        cursor: pointer;
        background-color: #cf0404;
        color: #ffffee;
      }
}
/*End non-iPhone display*/
/*Wider values for larger displays only*/
@media (min-width: 992px) {
  #quick-search.active #input,
  #quick-search.active #search-terms {
    width: 250px;
  }

  #quick-search.active #button {
    left: 250px;
  }
}




@media (max-width: 767px) {
  .dropdown-menu .multi-column-dropdown {
    min-width: 240px !important;
    overflow-x: hidden;
  }

  .multi-column-dropdown li a {
    display: block;
    clear: both;
    padding-left: 25px;
    line-height: 1.5;
    color: #9d9d9d;
    background-color: #333; /* #hover highlight;*/
    white-space: normal;
  }

    .multi-level li a:hover,
    .multi-column-dropdown li a:hover {
      text-decoration: none;
      color: #ffffff;
      background-color: #333; /* #hover highlight;*/
    }
}

@media (max-width: 480px) {
  .content {
    width: 90%;
    margin: 50px auto;
    padding: 10px;
  }
}


/*Convert tables to be readable on on small screens*/
@media only screen and (max-width: 992px) {
  .table-mobile table, /* Force table to not be like tables anymore */
  .table-mobile thead,
  .table-mobile tbody,
  .table-mobile th,
  .table-mobile td,
  .table-mobile tr {
    display: block;
  }

    .table-mobile thead tr { /* Hide table headers (but not display: none;, for accessibility) */
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

  .table-mobile tr {
    border-top: 2px solid #cf0404;
    border-bottom: 0 solid #cf0404;
  }

  .table-mobile td {
    border: none; /* Act like a row */
    border-top: 1px solid #f0f0dd;
    position: relative;
    padding-left: 120px !important;
    white-space: normal;
    text-align: left;
  }

    .table-mobile td:last-child {
      border-bottom: 0 solid #cf0404 !important;
    }

    .table-mobile td.mobile-hide {
      display: none;
    }

    .table-mobile td.mobile-strong {
      font-weight: 600;
    }

    .table-mobile td.ajax-data-href-button {
    }

      .table-mobile td.ajax-data-href-button button {
        padding: 0 0 0 0;
      }

        .table-mobile td.ajax-data-href-button button .clickable-glyph {
          padding: 0 0 0 0;
        }

    .table-mobile td:before {
      position: absolute; /* Act like a table header */
      top: 15px; /* Top/left values mimic padding */
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
      text-align: left;
      font-weight: bold;
    }

    .table-mobile td:before { /* Label the data */
      content: attr(data-title);
    }
}



/*Footer*/
.footer-box {
  line-height: 150%;
}

  .footer-box h1 {
    font-size: 100%;
    font-weight: 900;
    color: #dddd99;
  }

  .footer-box ul li {
    list-style-type: none;
  }

  .footer-box li:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    font-size: smaller;
    content: "\e072";
    font-family: 'Glyphicons Halflings';
    float: left;
    margin-top: 0px;
    margin-left: -30px;
    color: #dddd99;
  }

  .footer-box p {
    font-size: smaller;
    color: #ffffee;
    font-weight: 500;
  }

  .footer-box a {
    color: #dddd99;
    text-decoration: none;
  }

@media (max-width: 992px) {
  .footer-box {
    text-align: left;
  }
}

.black-background {
  background-color: #000000;
}

  .black-background p {
    padding: 30px 30px 250px 30px;
  }