/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  color: #5a5a5a; 
  font-size:   12px;
}

  myCarousel carousel slide {
     margin-bottom: 100px;
  }


.reverse-text {
  color: #FFFFFF;
  background-color: #000000;
/*  font-weight: bold; */
  font-size:   100%;
}

.reverse-text a {
  /* color:  #dddddd; */
  color: #FFFFFF;
}

.centered-table td  {
  text-align: center;
}

.big-text {
  font-size:   160%;
}

/* for collapsing displays of text */
.ourless {
  max-height:200px;
  text-overflow:ellipsis;
  overflow:hidden;
}
.ourmore {
  max-height:20000px;
}
.ourhide {
  display:none;
  visibility:hidden;
}
.ourshow {
  display:block;
  visibility:visible;
}

/* fiddle with the menus */

.navbar {
   background-color: #000000;
   padding-bottom: 0px;
}

.navbar-collapse {
   background-color: #000000;
}

.navbar-nav li {
   padding-right: 20px;
}

.navbar-nav li a {
  /* color: #EEEEEE; */
  color: #FFFFFF;
   background-color: #000000;
   font-size: 130%;
/*   font-weight: bold; */
}

.dropdown-menu li,
.dropdown-menu li a {
  /* color: #DDDDDD; */
  color: #FFFFFF;
  background-color: #000000;
}

.dropdown:hover .dropdown-menu {
   display: block;
  /* color: #FFFFFF; */
  /* background-color: #000000; */
}

li.dropdown-header {
/*   font-weight: bold; */
   font-size: 130%;
   color: #000000;
   background-color: #FFFFFF;
}

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
.navbar-brand,
.navbar {
  height:     08px;
  min-height: 08px; 
/*
  height:     20px;
  min-height: 20px;  */
  padding-top: 2px;
  padding-bottom: 2px;
}
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  padding-bottom:20px;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right:   0;
  padding-left:    0;
  width:        100%;
}
.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar-wrapper .navbar .container {
  width: auto;
}


/* padding around the tab text is in .nav
------------------------- */
.nav > li > a {
  padding: 3px 5px;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
  margin-bottom: 20px;
  margin-top:    40px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

.carousel .item {
  background-color: #777;
  margin-top:    40px;
}
.carousel-inner > .item > a > img ,
.carousel-inner > .item > img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}


/* customize the breakpoint at which the menu collapses into a button
   from http://stackoverflow.com/questions/9405610/how-to-change-navbar-collapse-threshold-using-twitter-bootstrap-responsive
   after a bit of searching.  Also see http://getbootstrap.com/customize/ to customize @screen-sm (default 768).
   Or, include bootstrap-responsive.css and adjust the two thresholds (max-width and min-width) in it.
 */
@media (min-width: 768px) and (max-width: 1250px) {
        .navbar-collapse.collapse {
            display: none !important;
        }
        .navbar-collapse.collapse.in {
            display: block !important;
        }
        .navbar-header .collapse, .navbar-toggle {
            display:block !important;
        }
        .navbar-header {
            float:none;
        }
        .navbar-nav {
            float: none !important;
            margin: 0px;
        }
        .navbar-nav {
            margin: 7.5px -15px;
        }
        .nav > li {
            position: relative;
            display: block;
        }
        .navbar-nav > li {
            float: none !important;
        }
        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }
        .navbar-collapse {
            padding-right: 15px;
            padding-left: 15px;
            overflow-x: visible;
            border-top: 1px solid transparent;
            box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
        }
        .nav {
            padding-left: 0px;
            margin-bottom: 0px;
            list-style: outside none none;
        }
    }


/* MARKETING CONTENT
-------------------------------------------------- */

.tight {
  padding-bottom: 0px;
  margin-bottom: 0px;
}

/* Center align the text within the three columns below the hero slides */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}


/* 4-columns: center the ball and the title
------------------------- */
.four-cols .img-circle {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.four-cols h2 {
  text-align: center;
}


/* Featurettes
------------------------- */

.featurette-divider {
/*  margin: 80px 0; */ /* Space out the Bootstrap <hr> more */
/*  margin: 40px 0; */ /* Space out the Bootstrap <hr> not as much */
  margin: 20px 0;   /* Space out the Bootstrap <hr> even less given doubling around sign-up button */
}

/* Thin out the marketing headings */
.featurette-heading {
  line-height: 1;
  letter-spacing: -1px;
}

/* top margin of body below menus */
.containerppc{
    position: relative;
}
@media (min-width: 1201px) {
  .containerppc{
      margin-top: 80px;
  }
}
@media (max-width: 1250px) {
  .row {
    margin-right: 0px;  /* neutralize the default -15 for margin-right/left in .row */
    margin-left: 0px;
  }

}
@media (max-width: 1200px) {
  .containerppc{
      margin-top: 100px;
  }
  .navbar-nav li {
     padding-right: 15px;
  }
}
@media (max-width: 1000px) {
  .containerppc{
    margin-top: 150px;
  }
  .navbar-nav li {
     padding-right: 10px;
  }
  .carousel {
     margin-bottom: 10px;
  }
  body {
    font-size:   14px;
  }
  .ourless {
    max-height:150px;
  }
}
@media (max-width: 970px) {
  .navbar-nav li {
     padding-right: 0px;
  }
}

/* for small Android phones */
@media (max-width: 700px) {
  .containerppc{
    margin-top: 80px;
  }
  .navbar-nav li {
     padding-right: 0px;
  }
  .carousel {
     margin-bottom: 5px;
  }
  body {
    font-size:   11px;
  }
  .ourless {
    max-height:100px;
  }
  p {
     margin-left:   5%; 
     margin-right:  5%; 
  } 
 .big-text {
     font-size:   100%;
  }
} 


/* RESPONSIVE CSS
-------------------------------------------------- */
/* this is set to nowrap in bootstrap.min.css */
@media (max-width: 767px) {
.table-responsive > .table > tbody > tr > td, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > td, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > thead > tr > th {
    white-space: normal;
}
}

/* @media (min-width: 768px) {
  / * Navbar positioning foo * /
  .navbar-wrapper {
/ *    margin-top: 20px; * /
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  / * The navbar becomes detached from the top, so we round the corners  * /
  .navbar-wrapper .navbar {
    border-radius: 4px;
  } 

  .featurette-heading {
    font-size: 50px;
  }
} */

.navbar-inverse .navbar-nav > li > a {
   color: #CCCCCC;
}

 /* parameters that have "transparent" background-color in default bootstrap.css */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus,
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .navbar-nav > .disabled > a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus
 {
   color: #FFFFFF;
   background-color: #000000;
 }


/* for the toggable tabs */
/*
    .tab-pane img {
       height:600px;
    }
    @media all and (max-width: 1800px) {
      .tab-pane img {
         height:600px;
      }
    }
    @media all and (max-width: 1650px) {
      .tab-pane img {
         height:550px;
      }
    }
    @media all and (max-width: 1500px) {
      .tab-pane img {
         height:500px;
      }
    }
    @media all and (max-width: 1400px) {
      .tab-pane img {
         height:450px;
      }
    }
    @media all and (max-width: 1250px) {
      .tab-pane img {
         height:400px;
      }
    }
    @media all and (max-width: 1100px) {
      .tab-pane img {
         height:350px;
      }
    }
    @media all and (max-width: 950px) {
      .tab-pane img {
         height:300px;
      }
    }
    @media all and (max-width: 750px) {
      .tab-pane img {
         height:250px;
      }
    }
    @media all and (max-width: 600px) {
      .tab-pane img {
         height:200px;
      }
    }

 .nav-tab-item {
     border: 1px solid #000;
     margin-bottom: 10;
 }
 
 li.nav-tab-item.active {
     border: 2px solid #00F;
     background-color: #BBBBFF;
     color: #fff;
 }
 .nav-tabs > li.active a:focus,
 .nav-tabs > li.active a:hover,
 .nav-tabs > li.active a {
     border: 0px solid #00F;
     background-color: #BBBBFF;
     color: #fff;
     font-size: 100%;
 } */