/*
 * This is what bootstrap applies to body, but given we wrap bootstrap within a .bootstrap
 * scope controller, then we repeat it here...
 */
body {
  margin:           0;
  color:            #515166;
  // Possible alternative
  //color:            #445566;
  background-color: #ffffff;
}

.bootstrap {
  font-family:      "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size:        13px;
  line-height:      18px;
}

/* page specific styles */
.bootstrap   .msbtutorial a        { font-weight: bold; }

.bootstrap   .btn.calltoaction     {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  font-weight: bold;
}

.bootstrap   .ifready              { display: none;  }
.bootstrap   .notready             { display: block; }
.bootstrap   .ready .ifready       { display: block; }
.bootstrap   .ready .notready      { display: none;  }

.bootstrap   .incomplete .ifcomplete  { display: none; }
.bootstrap   #tab5       .ifcomplete  { display: block; }
.bootstrap   .complete   .notcomplete { display: none; }

/* This (and .hideOnStart) are shown by fadeout actions */
.bootstrap       .showOnStart   { display: none; }

.bootstrap .navbar .navbar-inner           { font-size: 14px; font-weight: bold; }
.bootstrap .navbar .navbar-inner   li      { border-left: solid 1px  #515166;
                                             border-right: solid 1px #333342; }
// Possible alternative
//.bootstrap .navbar .navbar-inner   li      { border-left: solid 1px  #445566;
//                                             border-right: solid 1px #364452; }

.bootstrap .navbar .nav > li > a {
  /*change padding for additional spacing*/
  padding: 10px 18px 11px;
  /*added text shadow effect*/
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  -webkit-transition: text-shadow 0.15s linear, color 0.15s linear;
  -moz-transition: text-shadow 0.15s linear, color 0.15s linear;
  -ms-transition: text-shadow 0.15s linear, color 0.15s linear;
  -o-transition: text-shadow 0.15s linear, color 0.15s linear;
  transition: text-shadow 0.15s linear, color 0.15s linear;
}

.bootstrap .navbar .nav > li > a:hover {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
}

/*new style - logo glow effect*/
.bootstrap .navbar .brand:hover {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
}

@media (max-width: 979px) {
  .bootstrap .navbar-under {
    display: none;
  }
}

.bootstrap .navbar-under {
   height:     40px;
   background: #454558;
}


.bootstrap .head-unit {
  /*added padding to move head-unit up*/
  margin-top: -20px;
  height: 300px;
}

.bootstrap .hero-unit h1 {
  /* reduced font size */
  font-size: 36px;
}

.bootstrap .trynow {
  font-size: 22px;
}

@media screen and (max-width: 979px) {
  /* when the responsive layout makes the navbar fixed, we don't want the 
     bottom margin becaus of out head-unit at the top,
     and we don't want the inner margin either
     */
  .bootstrap .navbar.navbar-fixed-top {
    margin-bottom: 0px !important;
  }
  .bootstrap .navbar .navbar-inner {
    padding: 0px;
  }
}

html.browserBad .bootstrap  .browserOk         { display: none; }
html.browserOk  .bootstrap  .browserBad        { display: none; }

.bootstrap   .script               { display: none; }

.bootstrap   .moreabout            { display: none; border: solid 1px #4e4e66; }

.bootstrap   .tellmemore.open      { display: none; }

.bootstrap   footer {
  margin-top: 45px;
  padding: 35px 0 36px;
  border-top: 1px solid #e5e5e5;
}
.bootstrap   footer p {
  margin-bottom: 0;
  color: #555;
}

@media (max-width: 979px) {
  .bootstrap .nav-pills > li > a {
    /* our nav-pills are more like a heading, so slightly larger */
    font-size: 14px;
    line-height: 15px;
  }
  .bootstrap .tab-pane h2.page-header {
    padding-bottom: 3px;
  }
}

@media (min-width: 980px) {
  #toptrynow {
    position:relative;
    top: 40px;
    left: 250px;
  }

  .bootstrap .nav-pills > li > a {
    /* our nav-pills are more like a heading, so slightly larger */
    font-size: 16px;
    line-height: 18px;
  }

  .bootstrap .nav-pills > li {
    /* and put a bit of a gap between them */
    margin-right: 4px;
  }

}

/* We scope bootstrap, so our popovers are contained within their triggers.
   So we have to reset certain styles like this, and also take care not to
   place popovers inside items that clip content (eg carousels) */
.bootstrap .popover {
  text-shadow:     none !important;
  text-align:      left !important;
  text-decoration:  none !important;
}

.bootstrap .popover .popover-content,
.bootstrap .popover .popover-content p {
  color:       black  !important;
  font-size:   13px   !important;
  font-weight: normal !important;
  line-height: 18px   !important;
  white-space: normal !important;
  text-decoration: none !important;
}

/*
 * This is how wikipedia marks external links, we could apply this to links that appear in a new window
 * but we've actually done it by adding a boostrap icon
.bootstrap   .msbtutorial  a[target='_blank'] {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat;
  background: url(//bits.wikimedia.org/static-1.20wmf6/skins/vector/images/external-link-ltr-icon.png?2012-06-25T15:43:20Z) center right no-repeat!ie;
  padding-right: 13px;
}
*/

#tsteps {
  /* stops the page bouncing about as steps expand and contract */
  min-height: 600px;
}

/* We have a graphic (green arrow) that breaks out of this tab/column
   so we need overflow, and then place the arrow absolutely WRT backstory
 */
#tsteps .tab-content {
 overflow: visible;
}
#tsteps .tab-content .backstory {
  position: relative;
}
#tsteps .tab-content .backstory .arrowImg {
  position: absolute;
  left: -65px;
  top: -15px;
}

#stepsspan {
  /* stop the steps text running out too far */
  max-width: 650px;
}

.bootstrap [rel=tooltip] {
  /* Needed to make boostrap tooltips work... see comment below */
  position: relative;
}

.bootstrap abbr[rel=tooltip] {
  /* Needed to make boostrap tooltips work... see comment below */
  font-weight:   bold;
  cursor:        help;
  color:         #0a2;
  white-space:   nowrap;
  border-bottom: 1px dashed #0a2;
}

.bootstrap abbr[rel=tooltip] .tooltip {
  white-space:   normal;
}

.bootstrap .tab-pane h2 {
  font-size:   22px;
  line-height: 30px;
  color:       #515166;
  margin-bottom: 18px;
}

/* if preferred, this makes the controls simple arrows (no circle border)
  and outside the carousel item rather than inside
*/
.bootstrap .msbtutorial .carousel.outerCtrls .carousel-control {
  top: 15px;
  color: #4E4E66;
  background: none;
  border: none;
}

.bootstrap .msbtutorial .carousel.outerCtrls .carousel-control.left {
  left: -30px;
}

.bootstrap .msbtutorial .carousel.outerCtrls .carousel-control.right {
  right: -30px;
}


/* our carousel items aren't the same height, so anchor the buttons
   to the top instead of jumping up and down */
.bootstrap .msbtutorial .carousel-control {
  top: 22px;
}

.bootstrap .msbtutorial .carousel-control.left {
  left: 2px;
}

.bootstrap .msbtutorial .carousel-control.right {
  right: 2px;
}

/* normally a carousel rotates thru all items, but as we only have 
   2 items, we add classes to show and hide the controls */
.bootstrap .carousel.atfirst .carousel-control.left {
  display: none;
}
.bootstrap .carousel.atlast .carousel-control.right {
  display: none;
}

.bootstrap .yourtask {
   border:    solid 1px #4e4e66;
}

/* This was used when yourtask wasn't an alert but its own div type
.bootstrap .xxyourtask h2 {
   font-size: 12pt;
   color:     #4e4e66;
   /*margin-top:    20px;*/
   margin-bottom: 20px;
   padding-left:  10px;
   padding-right: 10px;
   background-color: #ddd;
}*/

.bootstrap .yourtask p {
   padding-left:  10px;
   padding-right: 10px;
}

.bootstrap .yourtask h2 {
  font-size: 20px;
}

/* container is already with an alert with margins etc
   so we can afford to reduce the padding */
.bootstrap .yourtask .container-fluid {
  padding-left:  10px;
  padding-right: 10px;
}

.bootstrap .backstory p,
.bootstrap .yourtask p,
.bootstrap .yourtask .row-fluid [class*="span"]
 {
  font-size: 16px;
  color:     #4e4e66;
}

.bootstrap .yourtask .row-fluid [class*="span"] p {
  font-weight: bold;
  margin-bottom: 0px;
}

.bootstrap .yourtask .row-fluid [class*="span"] p img {
  margin-right: 3px;
  margin-bottom: 3px;
}

.bootstrap i.icon-msbtask {
  width:  18px;
  height: 20px;
  padding-right: 2px;
  .ie7-restore-right-whitespace();
  line-height: 20px;
  background-image: url("/images/task_icon.png");
  background-position: 0px 0px;
}

.bootstrap i.icon-msbtick {
  width:  18px;
  height: 20px;
  padding-right: 2px;
  .ie7-restore-right-whitespace();
  line-height: 20px;
  background-image: url("/images/tick22.png");
  background-position: 0px 0px;
}

.bootstrap .ifcomplete.alert {
  /*margin-top: 15px;*/
}

.bootstrap .ifcomplete .alert-heading {
  font-size:   22px;
  line-height: 30px;
  text-align: center;
  /* added margin bottom */
  margin-bottom: 20px;
}

.bootstrap .browserBad .alert {
  font-size: 16px;
}

.bootstrap .browserBad .alert a {
  font-weight: bold;
}

.bootstrap .ifcomplete p {
  font-size: 16px;
}

.bootstrap .msbtutorial .alert {
  font-size: 16px;
}

.bootstrap .msbtutorial .ifcomplete a.btn {
   font-size:  20px;
   /*increased button padding */
   padding: 10px 20px 10px;
   /*added margin bottom*/
   margin-bottom: 20px;
   /*increased margin top*/
   margin-top: 20px;
}

.bootstrap .msbtutorial a.btn-warning {
   font-size:  20px;
   /*increased button padding */
   padding: 10px 20px 10px;
   /*added margin bottom*/
   margin-bottom: 20px;
   /*increased margin top*/
   margin-top: 20px;
}