/* General stuff for all pages */
html, body {
  font-size: 14px;
  color: lightslategray;
  font-family: 'Open Sans', sans-serif;
  height: 100%;
}

a { color: lightslategray;}
a:link { text-decoration: none;}
a:visited { text-decoration: none;}
a:hover { text-decoration: none; color: red}
a:active { text-decoration: none; }

/* FLASH */
.flash { margin: 1em 0; 
  padding: 1em; 
  background: #cae6f6; 
  border: 1px solid #377ba8; 
  font-size: 16px;
  color: #424949;
}

/* Breadcrumb stuff here */
.bcrumb {
  background-color: rgb(241, 233, 219);
  padding: 2px; 
  font-size: 12px;
  padding-left: 20px;
  overflow: hidden;
  text-overflow: ellipsis; 
  margin-bottom: 0px;
}
/* Class for headers */
.oswald {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  color: rgb(69, 224, 224);
}
/* Clear float so text below flows normally */
.clear {
  clear: both;
}

/* Set color for active nav link underline*/
.navActive { border-bottom: 5px solid teal;}

/* Set color for inactive nav link underline*/
.navInactive { border-bottom: 5px solid #424949;}


/* and setting the help toggle indicator*/
.helpLeft { 
  border-bottom: 5px dotted teal;
}
/* orange used in multiple places*/
.orange {
  color: orangered;
}

img { max-width: 100%; height: auto;}

/* Site Nav */
div #top-strip {
  background-color: white;
  padding: 10px;
  border-bottom: 1px solid #cec6c6;
}
div #top-strip span {
  float: right;
}
div #top-strip span:last-child {
  margin-right: 10px;
}
div #mid-strip {
  border-bottom: 1px solid #cec6c6;
  margin-bottom: 10px;
}
/* Set box for surrounding logged in user*/
.thin-yellow {
  border-radius: 5px;
  border: dotted 1px darkgoldenrod;
  padding: 2px; 
}

/* SCREEN SIZE RELATED CSS */
@media screen and (max-width: 575px) {
  /* Main column margin to lift from LH edge xs only*/
  /* padding not margin as otherwise viewport is zoomed*/ 
  #main-grid { padding-left: 20px; }
}
@media screen and (max-width: 991px) {
  /* semi-transparent background for drop down 24h/48hr */
  .semiTrans { background: rgba(255, 255, 255, 0.70); }

}
/* Blog stuff */
.post .about { color: lightslategray; font-style: normal; font-size: 10px; }
.post .body { color: darkslategray; white-space: pre-line; font-size: 12px; }



/* Horizontal scrolling*/
.item {
  padding: 2px 0px 2px 0px;
  margin-right: 30px;
  margin-left: 20px;
  /*top padding is 25px
  right padding is 50px
  bottom padding is 75px
  left padding is 100px*/

}
#navItems {
  margin-left: 6px;
}
#navItems a:hover { 
  border-bottom: 5px solid teal;
  color: lightslategray;
}

.item, .middle {
  font-size: 1rem;
  display: inline-block;
  /*vertical-align: middle;*/
}
.scroll {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.scroll::-webkit-scrollbar {
  display: none;
}
/* h4 for logged in username*/
h4 {
  display: inline-block;
  font-size: 14px;
  color: lightslategray;
  margin-left: 4px;
  margin-right: 24px;
}
h4:hover {
  color: red;
}

/* Help animations*/
.animated {
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}


/* Change cursor on hover */
.item:hover {
  cursor: pointer;
}
/* margin after i image in help*/
[id^=help] img {
  margin-right: 4px;
}


/* FOOTER */
.page-wrap {
min-height: 91%;
/* equal to footer height */
  margin-bottom: -180px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
  height: 180px; 
}
.site-footer {
  color: white;
  border-top: 1px lightslategrey dashed;
  /* border color same as Telegraph */
}
.footer-info-single {
  margin-top: 15px;
  padding: 10px;
}
.footer-cent {
  align-items: center;
}
.footer-info-single ul li a {
  display: inline-block;
  font-size: 1rem;
  color: #aaa;
}
.footer-info-single ul li a:hover {
  color: #b78c33; 
}
.footer-info-version {
  margin-top: 10px;
  margin-left: 10px;
  padding: 8px;
  color: lightslategray;
  font-size: 12px;
}
.footer-copy {
  margin-left: 20px;
}

.footer-version {
  float: right;
  margin-right: 20px;
}