/******************************************************************
  spooky.css
  -------------------------------------------------------------------
  Stylesheet: HTML Styles
  -------------------------------------------------------------------

  These styles affect the HTML content styles.

  We're setting font-sizes in ems.
  DO NOT font-size with px because that's old-school.

  Use em Calculator because of relative sizes:
  http://riddle.pl/emcalc/

  ******************************************************************/

  /* --> HTML Content Container ------------------------------------*/

  .edtdiv {
  font-size: 1em;   /* Base font-size for HTML = 14px */
  line-height: 22px;
  padding: 20px;
  }

  /* Apply clearfix to .edtdiv so internal floats affect the height */
  .edtdiv:before,
  .edtdiv:after { content: " "; display: table; }
  .edtdiv:after { clear: both; }

  .first-edtdiv { margin: 0; }

  /* --> Lists -----------------------------------------------------*/

  .edtdiv ul,
  .edtdiv ol {
  margin-left: 30px;
  font-size: 1.4em;
  }

  .edtdiv ul li,
  .edtdiv ol li {
  margin-bottom: 15px;
  }

  .edtdiv ul li a,
  .edtdiv ol li a {
  font-size: inherit;
  }


  /* many variations of nested lists, font size set to inherit to avoid compounding em values.*/
  .edtdiv ul li ul,
  .edtdiv ol li ol,
  .edtdiv ol li ol li,
  .edtdiv ol li ul li,
  .edtdiv ul li ol,
  .edtdiv ol li ul {
  font-size: inherit !important;
  }

  /* Reset em for lists nested inside tables */
  .edtdiv table ul,
  .edtdiv table ol {
  font-size: inherit;
  }

  /* --> Images ----------------------------------------------------*/

  /*.edtdiv img {
  margin: 10px;
  vertical-align: top;
  }*/

  .edtdiv .left_image{
  float: left;
  margin: 0 15px 15px 0;
  }

  .edtdiv .right_image{
  float: right;
  margin: 0 0 15px 15px;
  }

  .edtdiv img.img-border {
  border: 2px solid #333;
  }

  /* Image Captions */

  .edtdiv .rightimg p {
  margin: 0 15px 15px 15px;
  font-size: 0.8em;
  line-height: 18px !important;
  }

  /* HTML EDITOR CLASSES - Do not remove.----------------------------------------*/

  .columns{}
  .large-1{} 
  .large-2{}
  .large-3{}
  .large-4{}
  .large-5{}
  .large-6{}
  .large-7{}
  .large-8{}
  .large-9{}
  .large-10{}
  .large-11{}
  .large-12{}


  /* --> Tables ----------------------------------------------------*/

  /*table tr.even,
  table tr.alt,
  table tr:nth-of-type(2n) {
  background: none repeat scroll 0 0 #e8e8e8;
  }
  */

  .edtdiv table tr.stripe { }

  .edtdiv .header{                                           
  background: none repeat scroll 0 0 #08bcd5;
  font-weight:bold; 
  color: #fff;
  }

  .edt-main-content, .edt-side-content-no-style,
  .edt-side-content-custom {font-size: 1.4em;}
  .edt-main-content p, .edt-main-content a, .edt-side-content-custom p, .edt-side-content-custom a,
  .edt-side-content-no-style p, .edt-side-content-no-style a {font-size: inherit;}

  /* no style table */
  .edtdiv table.no-style tr:nth-of-type(2n) { background: #fff; }

  .edt-side-content{ background: #f5f5f5; }
  .edt-side-content-custom{ background: #232323; color: #fff; }

  .edtdiv .center .header {
  text-align:center;
  }

  .edtdiv table.zebra tr.even {
  background-color: #;
  }

  .edtdiv table.zebra tr.alt {
  background-color: #;
  }

  .edtdiv table td {
  line-height: 22px;
  }

  .edtdiv table.table1 {
  border: solid 0px #fff;
  background: #fff;
  margin-bottom: 30px;
  }

  .edtdiv tr.table1_header {
  background: #104467 ;
  font-weight: bold;
  }

  .edtdiv tr.table1_header th,
  .edtdiv tr.table1_header td {
  color: #fff;
  }

  .edtdiv tr.table1_row0 {
  background: #fff;
  }

  .edtdiv tr.table1_row1 {
  background: #f0eddf
  }


  /* --> HTML Slide Shows -----------------------------------------------*/

  #HTMLSlider{
  border: 4px solid #01c6f1;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  }

  #carousel_image{
  margin: 0;
  position: relative !important;
  }

  #carousel_image img {
  margin:0;
  width: 100%;
  max-width: 100%;
  display: block;
  }

  #carousel_image ul li, #carousel_image ol li {margin-bottom: 0;}

  #HTMLSlider .bx-controls-direction {
  position: absolute;
  font-size: 0;
  z-index: 99;
  top: 0px;
  right: 0px;
  }

  #HTMLSlider ul.image {
  margin: 0;
  padding: 0;
  }

  #HTMLSlider .bx-controls-direction  a:hover {
  background-color: #01a9cd;
  cursor: pointer;

  transition: background-color .3s ease-in-out;
  -o-transition: background-color .3s ease-in-out;
  -moz-transition: background-color .3s ease-in-out;
  -webkit-transition: background-color .3s ease-in-out;
  }

  #HTMLSlider .bx-wrapper .bx-prev {
  background-color: #01c6f1;
  width: 34px;
  height: 32px;
  float: right;
  background-image: url('/img/00/rotator-arrows.jpg');
  background-position: 34px 0px;
  }

  #HTMLSlider .bx-wrapper .bx-next {
  background-color: #01c6f1;
  width: 34px;
  height: 32px;
  float: right;
  background-image: url('/img/00/rotator-arrows.jpg');
  background-position: 0px 0px;
  }

  /* --> Code Blocks -----------------------------------------------*/

  /* Style code examples */
  .edtdiv code.code-block {
  display: block;
  background-color: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  line-height: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px #ddd;
  overflow: auto;
  }

  .edtdiv code.code-block pre { white-space: pre; }


  /* --> Em Fixes --------------------------------------------------*/

  .edtdiv span,
  .edtdiv li span {
  font-size: inherit;
  }

  font a { font-size: inherit; }

  /*Styles for Waterbill calculator*/

  td.cell0 {
  font-weight:bold;
  }

  /* Spacing for secondary divs in the content area*/
  .vpadcontent-width-default
  {
  margin-top: 30px;
  }

  /* HTML EDITOR CLASSES - Do not remove.*/
  .columns{}
  .large-1{}
  .large-2{}
  .large-3{}
  .large-4{}
  .large-5{}
  .large-6{}
  .large-7{}
  .large-8{}
  .large-9{}
  .large-10{}
  .large-11{}
  .large-12{}