/* 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;
}

/* if there's no top navbar add in a margin so the banner doesn't touch the top */
.mainnavpos-bottom .jumbotron,
.mainnavpos-none .jumbotron,
.mainnavpos-bottom .logo-outer,
.mainnavpos-none .logo-outer {
      margin-top:20px;
}

#mainContent {
    margin-bottom:20px;
}

.col.top {
  margin-bottom:20px;
}

/* banner rules are:
 * if there's a logo in the banner:
 *   left align big
 *   centre small
 * no logo
 *   centre always
 */

.jumbotron,
.container .jumbotron,
.container-fluid .jumbotron {
    padding:0;
    margin-bottom:20px;
}
.banner-inner {
    padding:0 0 20px;
}
#banner h1 {
    font-size:45px;
    margin-top:15px;
}
#banner h2 {
    font-size:35px;
}
.banner-html {
    margin-top:10px;
}
#banner h1,
#banner h2,
#banner .banner-html {
    text-align: center;
}

@media (max-width: 767px) {
    .jumbotron,
    .container .jumbotron,
    .container-fluid .jumbotron {
        padding:0;
        padding-right: 0;
        padding-left: 0;
    }
    .banner-inner {
        padding:0 15px 15px;
    }
    .banner-html p {
        font-size:16px;
    }
}
@media (min-width: 768px) {
    .container .jumbotron,
    .container-fluid .jumbotron {
        padding-right: 0;
        padding-left: 0;
    }
    .haslogo.logobanner #banner h1,
    .haslogo.logobanner #banner h2,
    .haslogo.logobanner #banner .banner-html {
        text-align: left;
    }
}

/* use the colour specified in bg-primary style */
.bg-primary h1.community-name {
  color: inherit;
}

/* fix the spacings around the navs depending on the banner type */
.hasfullbanner #banner-inner {
  padding-bottom: 20px;
}
.hasfullbanner .topnav {
  margin-bottom: 0;
}
.hasfullbanner .navbar {
  border-radius: 0;
}
/* always 20 not theme default so it's easy to remove if you want a touching image */
.navbar {
  margin-bottom: 20px;
}

/* to add 'Menu' word and align it nicely */
/* uses navbar-text to get colour/styling, but override margin */
.navbar-toggle .toggle-text {
  display: inline-block;
  margin: 0 5px 0 0;
  vertical-align: middle;
}
.navbar-toggle .toggle-bars {
  display: inline-block;
  vertical-align: middle;
}

/* tabs/pills don't need extra margin unless we have the full size banner with image or primary colour
   (i.e., no margin if it's an empty white space or if it's a jumbotron) */
.hasfullbanner.hasprimarybanner .nav-block,
.hasfullbanner.hasbannerimage .nav-block {
    margin-top: 20px;
}
.hasfullbanner.hasprimarybanner.navstyle-none .page-content,
.hasfullbanner.hasprimarybanner.navstyle-list .page-content,
.hasfullbanner.hasprimarybanner.navstyle-list-well .page-content,
.hasfullbanner.hasbannerimage.navstyle-none .page-content,
.hasfullbanner.hasbannerimage.navstyle-list .page-content,
.hasfullbanner.hasbannerimage.navstyle-list-well .page-content {
      margin-top: 20px;
}

/* ...or no banner, so it doesn't touch the top of the browser */
.navstyle-tabs.nobanner .nav-block,
.navstyle-pills.nobanner .nav-block,
.navstyle-pills-right.nobanner .nav-block,
.navstyle-pills-well.nobanner .nav-block,
.navstyle-pills-well-right.nobanner .nav-block {
    margin-top: 20px;
}
/* ...unless there's a logo that *isn't* in the nav in which case the logo's margins are sufficient! */
.navstyle-tabs.nobanner.logobanner .nav-block,
.navstyle-pills.nobanner.logobanner .nav-block,
.navstyle-pills-right.nobanner.logobanner .nav-block,
.navstyle-pills-well.nobanner.logobanner .nav-block,
.navstyle-pills-well-right.nobanner.logobanner .nav-block {
    margin-top: 0;
}


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

.well .nav-block .nav-logo #logoImage {
    margin:-6px 10px -6px 0;
}
.nav-list .nav-logo #logoImage {
    padding:10px;
}
.well.nav-list .nav-logo #logoImage {
    padding:0 0 10px 0;
}
.nav-list .nav-logo-outer {
  text-align: center;
}

#navCollapse {
    clear: right;
}
#navCollapse ul.pull-right {
    float: none !important;
}
.nav-block-collapse {
    margin-bottom: 2px;
}

#searchCollapse .search {
    margin-bottom: 20px;
}

.nav > li > a {
    cursor: pointer; /* a bug where it isn't a cursor on the search collapse button */
}

#topnav .nav-buttons {
  text-align: right;
} 

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

/* centre the pills nav (if not configured to right) */
@media (min-width: 992px) {
  .nav-block .nav-pills:not(.pull-right) {
    text-align: center;
  }
  .nav-block .nav-pills:not(.pull-right) > li {
    display: inline-block;
    float: none;
  }
}

/* title style depending on position */

.titlepos-abovecontent .title-teaser .page-title,
.titlepos-abovecontent .title-teaser .page-subtitle {
  text-align: center;
  margin: 0 0 20px 0;
}

.titlepos-content .title-teaser .page-title,
.titlepos-content .title-teaser .page-subtitle {
  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;
}

.container.nav-block,
.container-fluid.nav-block {
    margin-bottom:20px;
}
.container.nav-block .well,
.container-fluid.nav-block .well {
    margin-bottom: 0;
}


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

.panel {
  margin: 20px 0;
}

/* 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;
    color: #eee;
    border-color: #333;
    background-image: none;
    /* extend colour to bottom of screen */
    background-color: #555;
    box-shadow: 0 50vh 0 50vh #555;
}
.footer a,
.footer a:visited {
    color: #fff;
    font-weight: bold;
}
/* so when it wraps the links don't get too close together to tap on */
#footerLinks a {
    line-height: 2em;
    white-space: nowrap;
}
#footerImage {
    max-width:100%;
    height:auto;
    margin-bottom:20px;
}

.social-media {
    font-size: 40px;
    margin-bottom: 10px;
}
.social-media a:not(:last-child) {
    margin-right: 20px;
}

#manage {
    border-radius: 0;
    margin-bottom: 0;
}

/* extra space to fix bottom navbar to bottom of page/browser */
body.isadmin #footer,
body.mainnavpos-bottom #footer {
  padding-bottom: 100px;
}


@media (max-width: 767px) {
   #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%;
}
.embed-responsive.embed-responsive-4by1 {
  padding-bottom: 25%;
}
.embed-responsive.embed-responsive-5by1 {
  padding-bottom: 20%;
}