/* Custom styles go here
	Last change: NF 16/05/2017 11:07:38 AM
*/


/** Move content down to leave room for fixed position nav bar.
 *  @see http://getbootstrap.com/components/#navbar-fixed-top
 */
body{
  padding-top: 67px;    /* Note: .singlePageNav( { offset: nn } must be the same as the value here. And .navbar-fixed-top { n-height: } below */
}

/** Overide Set the navbar color. White doesn't offer any contrast and the original bottom shadow isn't visually dstinctive enough.
 */
.navbar-fixed-top{
  background-color: #ebf4fa;

  min-height: 67px;     /* needed when navbar flips to use a button -> dropdown menu. See body.padding-top above */

  /* Orig shadow under navbar. See cmt above.
  -webkit-box-shadow: 0 0 5px #cccccc;
  box-shadow: 0 0 5px #cccccc;
  */
}

/** Highlights the current Nav bar menu item. This is a copy of the Bootstrap nav a:focus css and is used by
 *  singlePageNav() currentClass option. ie. On menu item selection and when the user scrolls the page.
 *  This has the added benefit that the menu item stays highlighted when the Browser looses focus.
 */
.navbar-default-item-focus {
  color: #555555;
  background-color: #80cbd9;
}

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

/** I've lost the .owl-carousel css but kepts .home-carousel as it has too many rules we'd need to replace.
 */

/** Overide some .home-carousel .dark-mask css
 */
.home-masthead .dark-mask {
    /* darker bg and less opaque */
    background: #056f82; /* #38a7bb; */
    opacity: 0.79;     /* 0.90 */
    filter: alpha(opacity=90);
}

/** Replaces .owl-carousel css.
 */
.home-carousel .masthead {
    padding-top: 60px;
    padding-bottom: 20px;
}

/** Shift text box left a smidge to try and prevent it's right edge ending on a background image column boundary.
 */
.home-carousel .col-sm-5.right{
  margin-left: -12px
}

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


/** Add a nice line (border) above each section heading excluding those before the 'features' section.
 */
section:nth-child(n+4) .heading{
    border-top: 1px solid #e1e6e9;
    padding-top: 12px;
}


.box-image-text .image {
  min-height: 200px;
  max-height: 200px;
}

.box-simple {
  min-height: 230px;
}

/* NF Hacks 25/04/2017 */

.bar {
  padding: 10px 0;      /* top/bottom padding between home page sections. It is 60px in style.default.css */
}


/** New style for <span> logo + Site .Title
 */
.navbar-brand.home .site-title{
  padding-left: 6px;     /* padding|margin top/bottom do zip! */
  vertical-align: bottom;
}


/** Overide TBS responsive styles so nav logo + text remain in line.
 *  Only needed if we have different size logo images, which I don't think we will have. 26/04/2017
 *  NOTE: If these are needed we need to ensure they don't effect any markup other than nav logo.
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: inline !important;
  }
}

@media (max-width: 767px) {
  .visible-xs {
    display: inline !important;
  }
}
 */

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

/** Home page Features items
 *  Used by features.html
 */

/** Overide and add-to tbs .box-simple rule.
 */

/** When we have 3 x box clms and width > 992px && < 1200px we move text under the heading down so the first <li> item
 *  is vertical aligned in each clm regardless of whether the heading spans 2 or 3 lines.
 */
@media (min-width: 992px) and (max-width: 1200px){
    .box-simple h3{
      min-height: 80px;
    }
}

/** Don't want default h3 .margin-bottom in features section.
 */
.box-simple h3{
  margin-bottom: 0px;
}

.box-simple li{
  text-align: left;
  margin-bottom: 6px;
}

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

/** Home page screen shots.
 *  Used by screen_shots.html
 */

/** Leave v-space under image in single clm view.
 */
.screen-shot-vspace{
  margin-top: 26px;
}

.screen-shots .image{
  margin-top: 20px;
}

.screen-shots .screen-shot-text{
  font-size: 18px;
}

/** Overide {{< figure src="img/screen_shots/web-clipper-context-menu-sel.png" caption="Web Clipper Context menu" >}}
 */
.screen-shots figcaption{
  font-size: 14px;
  text-align: center;
  margin-bottom: 20px;
}

/** Center 'figure' images horizontally
 *  ref: https://www.w3schools.com/css/css_align.asp
 *       https://www.thoughtco.com/center-images-with-css-3466389
 */
.screen-shots figure img{
    margin: auto;
    display: block;
}

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

/** Extra css for the pages using single.html ie. All pages except the home page.
 */
.other-pages h1{
  margin-top: 30px;
}

.other-pages li{
  font-size: 16px;
  margin-bottom: 4px;
}

.other-pages p{
  font-size: 16px;
}

/** User bigger font on bigger screen.
 *  @see .load in style.default.css
 */
@media (min-width: 768px) {
  .other-pages li{
    font-size: 18px;
    margin-bottom: 4px;
  }

  .other-pages p{
    font-size: 18px;
  }
}

/** Leave a gap above the footer.
 */
div.other-pages{
  margin-bottom: 30px;
}

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

.twitter-btn{
  margin-top:16px;
}


/** Overide style.default.css
 */
#footer .social a {
  margin: 0px;
  font-size: 18px;
  color: #fff;
}

#shareBox{
  padding-top: 12px;
}

ul.social {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: right;
  float: left;
}

ul.social li {
  display: inline-block;
}

ul.social li a {
  width: 34px;
  height: 34px;

  text-align: center;
  line-height: 34px;

/*   background-color: rgba(255, 255, 255, 0.2);  */
  color: #fff;
  background-color: #1b95e0;    /* match twitter btn color */

  display: inline-block;
}