/* main site */

html {
    height: 100%;
    /* can't set a colour here as full-width images then break putting image behind content */
}
body {
    overflow-x: hidden;
    position: relative;
}

body.mainnavpos-bottom {
    margin-top:20px;
}
body.mainnavpos-bottom.navstyle-bar,
body.mainnavpos-bottom.navstyle-bar-inverse,
body.mainnavpos-bottom.navstyle-bar-right-inverse {
    margin-top:0;
}

.jumbotron,
.container .jumbotron {
    padding:0;
    margin-bottom:20px;
}
.jumbotron .header-inner {
    padding:0 0 20px;
}
.jumbotron h1 {
    font-size:45px;
    margin-top:15px;
}
.jumbotron h2 {
    font-size:35px;
}

.banner-html {
    text-align:right;
}

#mainContent {
    margin-bottom:20px;
}

@media (max-width: 767px) {
    .jumbotron,
    .container .jumbotron {
        padding:0;
        padding-right: 0;
        padding-left: 0;
    }
    .jumbotron .header-inner {
        padding:0 15px 15px;
    }
    .jumbotron h1,
    .jumbotron h2 {
        text-align:center;
    }
    .banner-html {
        text-align:center;
        margin-top:10px;
    }
    .banner-html p {
        font-size:16px;
    }
}
@media (min-width: 768px) {
    .container .jumbotron {
        padding-right: 0;
        padding-left: 0;
    }
    .logonav .jumbotron h1,
    .logonav .jumbotron h2 {
        margin-left:20px;
    }
}

.logo {
  text-align:center;
  overflow:hidden;
  margin:20px 15px 0 15px;
}
#logoImage {
    max-width:100%;
}
.navbar .nav-logo #logoImage {
    float: left;
    margin-top: 5px;
    padding: 0 15px;
    max-height: 40px;
    width: auto;
}
@media (min-width: 768px) {
  .navbar > .container .nav-logo #logoImage,
  .navbar > .container-fluid .nav-logo #logoImage {
    padding-left: 0;
  }
}

.nav-type-block .nav-logo #logoImage {
    float: left;
    max-height: 40px;
    margin-right:15px;
    width: auto;
}
.well .nav-type-block .nav-logo #logoImage {
    margin:-6px 10px -6px 0;
}
.nav-type-list .nav-logo #logoImage {
    margin-bottom:10px;
}

#banner {
  overflow:hidden; /* so bg on inner doesn't protrude rounded corners */
  background-repeat:no-repeat;
  -ms-behavior:url(/resources/PIE.htc);
}

/* general gubbins */

.content h2.page-title {
    margin: 0 0 20px 0;
}

/* remove top margin on first thing in main column (header usually!) */
.maincol > *:first-child {
  margin-top:0;
}

/* navigation */

ul.nav li.title {
  padding:10px 15px;
  font-weight:bold;
}

ul.nav a.dropdown-name {
  padding-right:5px;
}
ul.nav a.dropdown-caret {
  padding-left:5px;
}

/* hide unselected bits of list navs */
ul.sidenav li ul {
  display:none;
  padding-left:15px;
  margin-top:2px;
  font-size:90%;
}
ul.sidenav li.active ul {
  display:block;
}
/* fix for pulling right the carets */
ul.sidenav .fa.pull-right {
    line-height: inherit;
}

.nav-block {
    margin-bottom:20px;
}

ul.nav-tabs {
    margin-bottom:15px;
}

/* centre images in carousel */
.carousel-inner > .item img {
    margin:auto;
    width:auto;
    max-height: 400px; /* just to stop it getting waay to tall */
}

.carousel-inner > .item.embed-responsive img {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    height: auto;
    width: auto;
}

/* one or other is set in js depending on aspect ratio of image */
.carousel-inner > .item.embed-responsive img.wide,
.embed-responsive img.wide {
    max-width: 100%;
    height: auto;
}

.carousel-inner > .item.embed-responsive img.tall,
.embed-responsive img.tall {
    max-height: 100%;
    width: auto;
}

.carousel-inner .slider-description img {
    display:none;
}

/* panels in Highlighted area need to be unstyled but full width */
.highlighted .panel {
    background: none;
    border: none;
    border-radius: 0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    box-shadow:none;
    -webkit-box-shadow:none;
    margin:0;
    
    /* from .container */
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.highlighted .panel-heading {
    background: none;
    border: none;
}

.page-content {
    min-height: 300px;
}
.footer {
    border-radius:0;
    min-height:200px;
    border-left:0;
    border-right:0;
    border-bottom:0;
    margin-bottom:0;
    margin-top:60px;
    /* same colour as well, exend colour to bottom of screen */
    box-shadow: 0 50vh 0 50vh #f5f5f5;
}
#footerImage {
    max-width:100%;
    height:auto;
    margin-bottom:20px;
}
.social-media {
    font-size: 20px;
    margin-bottom: 5px;
}
#manage {
    border-radius: 0;
    margin-bottom: 0;
}

/* Experiments in full width imagery */
/*
.full-width {
  position: relative; /* for the child pseudo-elements
  padding: 10px 0 20px;
}
.full-width::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5000px;
  left: -1000px;
  background: pink;
  z-index:-10;
}
.full-width-content {
  padding: 10px 0 20px;
}
.full-width-wrapper {
  position: absolute; 
  background: url(/demosite/assets/images/summer-leaves?attr=image_12col);
  background-position: center center;
  background-size: cover;
  z-index:-10;
}
*/

/* fix bottom navbar to bottom of page/browser */
body.isadmin #footer,
body.mainnavpos-bottom #footer {
  padding-bottom: 60px;
}
#manage {
  position: absolute;
  bottom: 0;
  width: 100%;
}

@media (max-width: 768px) {
   #footer {
       text-align:center;
   }
}

/* some extra aspect ratios */
.embed-responsive.embed-responsive-1by1 {
  padding-bottom: 100%;
}
.embed-responsive.embed-responsive-2by1 {
  padding-bottom: 50%;
}
.embed-responsive.embed-responsive-3by1 {
  padding-bottom: 33.33%;
}