/*
Theme Name: Web App
Author: Andrew Masat - Bellevue University 2013
*/

body  {
  background-color:  #eaeaea !important;
  padding: 0px !important;
  font-family:  'Open Sans', sans-serif!important;
}

.stage  {
  padding: 0px !important;
}


/* Header sidebar */
.header  {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 14%;
  padding: 0px;
  background-color:  #232323;
  /*overflow-y:  auto;
  overflow-x:  hidden;
  */z-index: 1000;
}

.header,  .navToggle,  .subfooter,  .footer  {
  -webkit-transition:  0.3s all ease;
  -moz-transition:  0.3s all ease;
  -o-transition:  0.3s all ease;
  -ms-transition:  0.3s all ease;
  transition:  0.3s all ease;
}

.navToggle  {
  display: none;
  width: 54px;
  height: 50px;
  position:  fixed;
  z-index:  1001;
  top: 0px;
  left: 0px;
  background:  #000;
}

.navToggle a  {
  display: block;
}

.navToggle img  {
  margin:  13px 9px;
}

@media (max-width: 979px)  {
    
  .header  {
    left: -200px;
    width: 200px;
}

  .navToggle  {
    display:  block;
}

}

/* Custom Banner */
/*.banner  {
    height: 70px;
    width: 86%;
    margin-left: 14%;
    background: #232323;
    border-bottom: 1px solid #fff;
}
*/

.spacing  {
  margin:  0px 2%;
}

.logo  {
  max-width: 193px;
  height: 60px;
  margin: 10px auto 0px;
}

.logo img  {
  width: 100%;
}


ul.navigation  {
  list-style:  none;
  margin:  0px 0px 15px;
  padding: 0;
}

ul.navigation li  {
  position: relative;
  text-align:  center;
  padding: 0px;
  border-top:  1px solid #444;
  border-bottom:  1px solid #000;
}

ul.navigation li: first-child:before  {
  content:  '';
  border-top:  1px solid #000;
  position:  absolute;
  top:  -2px;
  left:  0px;
  width:  100%;
}

ul.navigation li: last-child:after  {
  content:  '';
  border-bottom:  1px solid #444;
  position:  absolute;
  bottom:  -2px;
  left:  0px;
  width:  100%;
}


ul.navigation li.active a: after  {
  content:  '';
  position:  absolute;
  top: 50%;
  right: 0px;
  width:  0;
  height:  0;
  border-top:  6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #eaeaea;
  margin-top: -5px;
}

ul.navigation li a {
  width: 100%;
  display: block;
  color:  #aaa;
  font-size:  14px;
  padding:  10px 0px;
  text-decoration:  none;
}

ul.navigation li.active a {
  color: #fff;
}

ul.navigation li a:hover {
  color:  #fff;
  text-decoration:  none;
  padding-bottom: 7px;
  border-bottom:  3px solid #08c;
}


ul.navigation .btn-success a,  ul.navigation .btn-danger a  {
  color:  #fff;
}

ul.navigation li.btn-success  {
  border-top: 1px solid #6CCA6C;
  border-bottom: 1px solid #387038;
}

ul.navigation li.btn-danger  {
  border-top: 1px solid #FF766F;
  border-bottom: 1px solid #802420;
}

ul.navigation li.btn-success a: hover {
  border-bottom:  3px solid #5AE95A;
}

ul.navigation li.btn-danger a: hover {
  border-bottom:  3px solid #F03027;
}

ul.navigation li i  {
  position:  absolute;
  top:  0px;
  right:  6px;
}


  ul.navigation li span{color:#fff;}

/* Prev Next Buttons */
.prev,  .next  {
  width: 10%;
  font-size:  40px;
  color:  #ccc;
  top:  0;
  bottom:  35px;
}

@media (max-width:  480px)  {
  .prev,  .next {
  font-size:  20px;
  }
}
.prev: hover,  .next:hover  {
  color:  #343434;
}

.prev  {
  position:  fixed;
  left:  14%;
}

.prev span  {
  position:  absolute;
  top:  40%;
  left:  50%;
  margin-left:  -20px;
}

@media (max-width:  979px)  {
  .prev {
  left: 0;
  }
}

@media (max-width:  480px)  {
  .prev span {
    margin-left: -10px;
  }
}
.next  {
  position:  fixed;
  right:  0;
}

.next span  {
  position:  absolute;
  top:  40%;
  right:  50%;
  margin-right:  -20px;
}

@media (max-width:  979px)  {
  .next {
  }
}

@media (max-width:  480px)  {
  .next span {
    margin-right: -10px;
  }
}

/* Subfooter - Tools */
.subfooter  {
  position:  fixed;
  z-index: 10;
  bottom:  0px;
  height:  35px;
  width:  86%;
  margin-left:  14%;
  padding: 0px 10%;
  background:  #fff;
  border-top:  1px solid #ccc;
}

 @media (max-width: 979px)  {
  .subfooter  {
    margin: 0px;
    width: 100%;
    height: 35px;
    padding: 0px 10%;
  }
}
.subfooter.opened  {
  height:  300px;
}

@media (max-width: 979px)  {
  .subfooter.opened  {
    height:  200px;
  }
}

  .subfooter .close  {
    position: relative;
    z-index: 1001;
    margin-top: 10px;
    font-size:  30px;
}
.subfooter .panels  {
  position:  absolute;
  width: 76%;
  height:  264px;
  opacity:  0;
  -webkit-transition:  opacity 0.3s linear,  top 0.3s ease-out;
  -moz-transition:  opacity 0.3s linear,  top 0.3s ease-out;
  -o-transition:  opacity 0.3s linear,  top 0.3s ease-out;
  transition:  opacity 0.3s linear,  top 0.3s ease-out;
}

@media (max-width:  979px)  {
  .subfooter .panels  {
    height:  164px;
  }
}

.subfooter .panels.active  {
  opacity:  1;
  z-index: 1000;
}

.subfooter .panels.row  {
  margin: 0px !important;
}


/* Subfooter Panels */
.notesPanel  {
  margin-top:  20px;
  width: 98%;
  height: 214px !important;
}

@media (max-width:  979px)  {
  .notesPanel  {
    margin-top:  10px;
    width: 100%;
    height: 140px !important;
  }
}

.createPDFBtn  {
  position:  absolute;
  top:  90px;
  left:  50%;
  margin-left:  -80px;
}

@media (max-width:  979px)  {
  .createPDFBtn  {
    top:  60px;
  }
}

.createPDFWait  {
  display: none;
  position: absolute;
  top: 100px;
  width:  100%;
}

@media (max-width:  979px)  {
  .createPDFWait  {
    top: 55px;
    width:  100%;
    margin-left:  -15px;
  }
}

.createPDFComplete  {
  display: none;
  position: absolute;
  top: 90px;
  left:  50%;
  margin-left:  -182px;
}

@media (max-width:  979px)  {
  .createPDFComplete  {
    top:  60px;
    left:  50%;
    width:  auto;
    margin-left:  -178px;
  }

  .createPDFComplete .btn  {
    margin-bottom:  10px;
  }
}

@media (max-width:  768px)  {
  .createPDFComplete  {
    margin-left:  -101px;
  }
}

.tourBtn  {
  position: absolute;
  top: 90px;
  left: 50%;
  margin-left: -70px;
}

.tourStart  {
  display: none;
  position: absolute;
  top: 95px;
  width:  100%;
}

#downloadPDF  {
  float:  left;
  margin:  0px;
  width:  202px;
  height:  46px;
}

.recreatePDFBtn  {
  float:  left;
  margin:  0px 5px;
}


/* Footer */
.footer  {
  position:  fixed;
  z-index: 2000 !important;
  bottom:  0px;
  height:  35px;
  width:  86%;
  margin-left:  14%;
  background:  #232323;
  border-top:  1px solid #000;
}

 @media (max-width: 979px)  {
  .footer  {
    margin: 0px;
    width: 100%;
    height: 35px;
  }
}

/* Controls - Footer */
.footer ul.controls,  .subfooter ul.controls  {
  position:  absolute;
  z-index:  1;
  list-style:  none;
  margin:  0;
  padding:  0;
  top:  0;
}

@media (max-width:  979px)  {
  ul.controls {
  }
}

.footer ul.controls li  {
  position: relative;
  float:  left;
  padding:  8px 0px;
  border-left:  1px solid #444;
  border-right:  1px solid #000;
}

.footer ul.controls li: first-child:before  {
  content:  '';
  border-right:  1px solid #000;
  position:  absolute;
  left:  -2px;
  top:  0px;
  height:  100%;
}

.footer ul.controls li: last-child:after  {
  content:  '';
  border-left:  1px solid #444;
  position:  absolute;
  right:  -2px;
  bottom:  0px;
  height:  100%;
}

.footer ul.controls li a  {
  padding:  8px 16px 9px;
  margin:  0px;
  color: #fff;
}

.footer ul.controls li a: hover  {
  text-decoration: none;
  background-color:  #000;
}

@media (max-width:  979px)  {

  .footer ul.controls li a: hover  {
    background:  none;
  }
}

.footer ul.controls li.active: after  {
  content:  '';
  position:  absolute;
  top: -1px;
  right: 50%;
  width:  0;
  height:  0;
  border-left:  6px solid transparent;
  border-top: 6px solid #fff;
  border-right: 6px solid transparent;
  margin-right: -5px;
}

.footer ul.controls.tools  {
  left: 12%;
}

@media (max-width:  979px)  {    
  .footer ul.controls.tools  {
    left: 50%;
    margin-left: -83px;
  }
}

.footer ul.controls.extra  {
  right: 12%;
}

.footer ul.controls i  {
  margin-top: 3px;
}

/* Controls - Subfooter */
.subfooter ul.controls li  {
  position: relative;
  float:  left;
  padding:  8px 0px;
  /*border-left:  1px solid #ccc;
  */border-right:  1px solid #ccc;
}

.subfooter ul.controls li: first-child:before  {
  content:  '';
  border-right:  1px solid #ccc;
  position:  absolute;
  left:  -1px;
  top:  0px;
  height:  100%;
}

/*.subfooter ul.controls li: last-child:after  {
  content:  '';
  border-left:  1px solid #ccc;
  position:  absolute;
  right:  -2px;
  bottom:  0px;
  height:  100%;
}
*/
.subfooter ul.controls li a  {
  padding:  9px 16px 8px;
  margin:  0px;
}

.subfooter ul.controls li a:hover  {
  text-decoration: none;
  background-color:  #eaeaea;
}

.subfooter ul.controls.extra  {
  left:  12%;
}


.copyright  {
  position:  absolute;
  right: 5px;
  bottom: 0px;
  font-size: 10px;
  color: #ccc;
  text-transform:  uppercase;
}


/* Content */
.content {
  position:  absolute;
  z-index:  1;
  top: 80px;
  bottom: 35px;
  left:  24%;
  right:  10%;
}

@media (max-width: 979px)  {
  .content {
    top: 15%;
    left: 10%;
    right: 10%;
  }
}
.content .post  {
  position:  absolute;
  z-index: 2;
  width: 100%;
  height: 0px;
  margin:  0px;
  padding:  0px;
  overflow:  hidden;
  opacity:  0;
  -webkit-transition:  opacity 0.3s linear,  top 0.3s ease-out;
  -moz-transition:  opacity 0.3s linear,  top 0.3s ease-out;
  -o-transition:  opacity 0.3s linear,  top 0.3s ease-out;
  transition:  opacity 0.3s linear,  top 0.3s ease-out;
}

.content .post.active  {
  opacity:  1;
  z-index: 1000;
  height:  auto;
  padding-bottom:  35px;
}

.content .post h1  {
  border-bottom: 3px solid #232323;
  padding-bottom: 10px;
  margin-bottom:  30px;
}

.question  {
  font-size: 16px;
}

textarea.form-control  {
  height: 150px !important;
  margin: 0px 0px 20px;
}



#loading .modal-dialog  {
  position:  absolute;
  left:  50%;
  top: 50%;
  width:  300px;
  margin-left:  -150px;
  margin-top:  -100px;
}

#loading .modal-content  {
  background-color:  #000;
  color:  #fff;
  text-align:  center;
}

@media (max-width: 979px)  {
  
  #loading .modal-dialog  {
    top: 20%
  }
}
#loading .modal-header  {
  border-bottom:  none;
  padding: 0px;
}

#loading .modal-body  {
  background: url(../img/ajax-loader.gif) no-repeat center;
}  

/* Scroll */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(100, 100, 100, 0.8); 
  -webkit-box-shadow: rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(48, 48, 48, 0.8); 
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
  
}

/* Large desktop */

@media (min-width: 1200px) {


}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
  
}

/* Landscape phone to portrait tablet */
@media (max-width: 768px) {
  
}
 
/* Landscape phones and down */
@media (max-width: 480px) {
  
}

@media print,
  (-o-min-device-pixel-ratio: 5/4),
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

.download{
  width:100%;
  height:90px;
  font-size: 40px;
}