/*
 * Pragmatic Help Styles
 *
 * reset stuff... */
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol, ul {
    list-style: none;
  }
  blockquote, q {
    quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  /* end of reset */

  /* site structure... */
  body {
    text-align:center; 
    font:small arial, tahoma, sans-serif;  
    color:#666; 
    background-color:#ddefe3;
    }
  #center {
    width:1008px; 
    margin:0 auto;
    }
  #site {
    float:left; 
    clear:left; 
    width:100%;
    padding-bottom:24px;
    }

  /* panels... */
  .panel {
    float:left; 
    clear:left; 
    position:relative;
    padding:12px;
    width:984px; 
    text-align:left;
    border-radius:12px; 
    box-shadow:2px 2px 3px 0px #9a9;
    background-color:#fff; 
    }

  /* banner... */
  #banner {
    text-align:right; 
    height:140px; 
    padding:0 6px;
    margin-top:6px;
    }
  #banner img {
    margin:0 6px 0 0;
    }
    /* navigation... */
  .pp_navmain,
  #topnav  {
    position:absolute; 
    left:12px;    
    padding:0;
    margin:0;
    font-size:1.1em;
    }
  /* vertical positioning of navs appears to disregard the padding
     on the li a elements - perhaps because the lis are floating
     within the ul element. ???  */
  .pp_navmain {
    bottom:8px;
    }
  #topnav {
    top:8px;
    }
  .pp_navmain > li, 
  #topnav > li {
    float:left;
    padding:0;
    margin:0;
    list-style:none;
    }
  .pp_navmain > li > a, 
  #topnav > li > a {
    text-decoration:none; 
    padding:8px 15px 8px 15px; 
    margin:0;
    border:solid 1px #d6dcd8;
    }
  .pp_navmain > li > a{  
    border-bottom:none;
    border-radius:6px 6px 0 0;
    }
   #topnav > li > a {
    border-top:none;
    border-radius:0 0 6px 6px;
    }
 .pp_navmain li a, 
  #topnav li a {
    color:#666; 
    background-color:#fff;
    white-space:nowrap;
    transition:color 0.2s, background-color 0.2s;
    }
 .pp_navmain li a:hover, 
  #topnav li a:hover {
    color:#fff; 
    background-color:#678;
    }
  /* drop down nav buttons */  
  .pp_navdrop, 
  .pp_navdeep {
    position:absolute; 
    display:none; 
    margin:8px 0 0 0; 
    padding:0; 
    text-align:left;
    border-radius:0 0 6px 6px; 
    box-shadow:2px 2px 3px 0px #9a9;
    border:solid 1px #d6dcd8;
    color:#666; 
    background-color:#fff; 
    }
  .pp_navdeep {
    margin-left:2px; 
    border-radius:6px;
    }
  .pp_navdrop li, 
  .pp_navdeep li {
    list-style:none; 
    margin:0;
    padding:0;
    }
  .pp_navdrop a, 
  .pp_navdeep a {
    display:block; 
    color:#666; 
    text-decoration:none; 
    padding:6px 18px;
    margin:0;
    border:none;
    border-top:solid 1px #d6dcd8;
    border-radius:0;
    }
  .pp_navdrop li:first-child a, 
  .pp_navdeep li:first-child a {
    border-top:none;
    }
  .pp_navdeep li:first-child a {
    border-radius:6px 6px 0 0;
    }
  .pp_navdrop li:last-child a, 
  .pp_navdeep li:last-child a {
    border-radius:0 0 5px 5px;
    }
  .pp_navdrop a:hover, 
  .pp_navdeep a:hover {
    color:#fff; 
    background-color:#678;
    }
  .pp_navmain p {
    float:right; 
    margin:0; 
    padding:0;
    }
  
  /* search box... */
  #search {
    position:absolute;
    top:4px;
    left:96px;
    }
  #search input[type="text"] {
    float:left; 
    margin:1px 0 0 0; 
    padding:4px 6px; 
    font-size:16px;
    width:160px; 
    background-color:#f7f9f8; 
    border:solid 1px #d6dcd8; 
    border-radius:6px;}
  #search input[type="submit"] {
    float:right; 
    margin:1px 0 0 3px; 
    padding:6px;
    border-radius:6px;
    color:#666;
    background-color:#f7f9f8;
    border:solid 1px #d6dcd8;
    }
  #search input[type="submit"]:hover {
    color:#fff; 
    background-color:#678;
    }

  /* page heading... */
  #pageheading  {float:left; clear:left; width:100%; margin:24px 0 12px 0; text-align:center;}
    
  #main     {min-height:360px;}

  #pp_foot {float:left; clear:left; width:984px; padding:6px 12px; color:#666; font-size:0.9em;}

  /* columns... */
  .colFullWidth {float:left;  width:960px; margin:0 12px; clear:left;}
  .colLeftof2   {float:left;  width:468px; margin:0 12px; clear:left;}
  .colMidof2    {float:left;  width:468px; margin:0 12px; clear:left;}
  .colRightof2  {float:right; width:468px; margin:0 12px; }
  .colLeftof3   {float:left;  width:304px; margin:0 12px; clear:left;}
  .colMidof3    {float:left;  width:304px; margin:0 12px; }
  .colRightof3  {float:right; width:304px; margin:0 12px; }
  .colLeft2of3  {float:left;  width:632px; margin:0 12px; clear:left;}
  .colRight2of3 {float:right; width:632px; margin:0 12px; }
  .colLeftof4   {float:left;  width:222px; margin:0 12px; clear:left;}
  .colMidof4    {float:left;  width:222px; margin:0 12px; }
  .colRightof4  {float:right; width:222px; margin:0 12px; }
  .colLeft3of4  {float:left;  width:714px; margin:0 12px; clear:left;}
  .colRight3of4 {float:right; width:714px; margin:0 12px; }
  .clear        {clear:both;}

  /* items... */
  .itemFulWidth {}
  .pp_itemFold {cursor:pointer;}
  .pp_Fold     {overflow:hidden;}
  .pp_itemTick {overflow:hidden; position:relative; background-color:#efe3dd;}
  .pp_Tick     {white-space:nowrap; color:#c03; padding:3px 0;}

  /* text styles... */
  h1 {
    font-size:2.0em; 
    font-weight:bold; 
    float:left;
    clear:left;
    width:100%;
    text-align:center;
    margin:36px 0;
    }
  .panel h1 {margin:12px 0 24px 0;}
  h2 {font-size:1.4em; font-weight:bold; margin:18px 0 3px 0;}
  h3 {font-size:1.2em; font-weight:bold; margin:12px 0 0 0; text-align:left;}
  h4 {font-size:1.1em; font-weight:bold; font-style:italic; margin:10px 0 0 0;}
  .normal {font:small arial, tahoma, sans-serif;  color:#666; font-weight:normal; font-style:normal;}
  p  {margin:6px 0 0 0;}
  a  {color:#666;}
  a:hover {color:#aa33ff;}
  img {
    max-width:100%;
    }

  ul, ol {margin:3px 0 0 24px;}
  ul li {list-style:disc outside none; margin-top:6px;}
  ol li {list-style:decimal outside none; margin-top:6px;}
  strong {font-weight:bold;}
  em     {font-style:italic;}
  table  {padding:2px 0 0 0;}
  td     {padding:4px 6px; vertical-align:top; text-align:left; }


  /* sitemap... */
  table.pp_sitemap    {margin:0; padding:0;}
  table.pp_sitemap td {vertical-align:top; text-align:left; margin:0; padding:0;}
  table.pp_sitemap a, table.pp_sitemap span  {padding:1px; color:#66686a; background-color:#fff; text-decoration:none;}
  table.pp_sitemap a:hover {color:#28deff; background-color:#333435;}
  table.pp_sitemap td.top    {padding:0.1em 5px 0.5em 15px; background:url(sitemap_top.gif) left top no-repeat;}
  table.pp_sitemap td.topend {padding:0.1em 5px 0.5em 15px; background:url(sitemap_topend.gif) left top no-repeat;}
  table.pp_sitemap td.mid    {padding:0.1em 5px 0.5em 15px; background:url(sitemap_mid.gif) left top no-repeat;}
  table.pp_sitemap td.midend {padding:0.1em 5px 0.5em 15px; background:url(sitemap_midend.gif) left top no-repeat;}
  table.pp_sitemap td.onl    {padding:0.1em 5px 0.5em 15px; background:url(sitemap_onl.gif) left top no-repeat;}
  table.pp_sitemap td.onlend {padding:0.1em 5px 0.5em 15px; background:url(sitemap_onlend.gif) left top no-repeat;}
  table.pp_sitemap td.btm    {padding:0.1em 5px 0.5em 15px; background:url(sitemap_btm.gif) left top no-repeat;}
  table.pp_sitemap td.btmend {padding:0.1em 5px 0.5em 15px; background:url(sitemap_btmend.gif) left top no-repeat;}

  /* contact page stuff... */
  table.tblContact {padding:6px 0 0 0;}
  table.tblContact td {padding:9px 6px; vertical-align:top;}
  table.tblContact td:first-child {width:70px; text-align:right;}
  table.tblContact th {text-align:right; padding:2px 3px; vertical-align:top;}
  table.tblContact th:first-child {font-weight:bold;}
  /* contact form... */
  form input[type="text"], form textarea {width:300px; font:13px "courier new", fixed;
              background-color:#eeeeee; border:solid 1px #999; padding:2px 3px;}
  form textarea {resize:none;}
  form input[type="text"].short {width:160px;}
  form input[type="text"].veryshort {width:120px;}
  form input#submit {margin:9px 0 9px 8em;}
  form label {float:left; width:8em; text-align:right; padding-right:6px;}
  form label.lblReq {font-weight:bold;}
  form label.lblErr {font-weight:bold; color:#c00;}
  form .example {font-style:italic; font-weight:normal; color:#999;}

    
  /* new fullwidth slideshow rules */
  .pp_itemGallery,
  .pp_itemSimGal {
    position:relative;
    margin:0;
    overflow:hidden;
  }

  .pp_gallery {
    display: block;
    position:relative;
    margin:0;
    padding:0;
    white-space:nowrap;
    height:100%;
  }

  .bandCentered .pp_gallery {
    text-align:center;
    }

  .pp_quickedit:hover .pp_gallery {
    opacity:0.5;
  }

  .pp_gallery li {
    margin: 0;
    padding: 0;
    list-style:none;
    width:100%;
    height:100%;
  }

  .pp_gallery.slide li {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
    float: left;
  }

  .pp_gallery li a,
  .pp_gallery li div {
    display: block;
    text-align: center;
    outline: none;
  }

  .pp_gallery li div {
    background-repeat:no-repeat;
    width:100%;
    height:100%;
    position:static;
    line-height:0;
  }

  .bandFullWidth .pp_gallery li div {
    background-position:50% 20%;
    background-size:cover;
  }

  .bandCentered .pp_gallery li div {
    background-position:50% 50%;
    background-size:contain;
  }

  .pp_gallery img {
    visibility:hidden;
    }

  .bandFullWidth .pp_gallery img {
    display:none;
    }

  .pp_gallery.fade li {
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    height:100%;
    width:100%;
  }

  .pp_gallery.fade li:first-child {
    position:relative;
    top:0;
    opacity:1;
  }


  /* full width gallery heights are dependent on full width screen size */
  .bandFullWidth .pp_gallery {
    height:700px;
  }

  @media screen and (max-width:1279px) {
    .bandFullWidth .pp_gallery {
      max-height:500px;
    }
  }

  @media screen and (max-width:1023px) {
    .bandFullWidth .pp_gallery {
      max-height:400px;
    }
  }

  @media screen and (max-width:511px) {
    .bandFullWidth .pp_gallery {
      max-height:350px;
    }
  }

  .pp_gallery li p {
    position:absolute;
    width:30%;
    margin:0;
    padding:9px;
    text-align:center;
    font:16pt arial, sans-serif;
    white-space:normal;
    color:#ddd;
    background-color:rgba(0, 0, 0, 0.50);
  }

  .pp_itemGallery nav.controls span,
  .pp_itemSimGal nav.controls span {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.16);
    color: #ccc;
    font-size: 50px;
    text-align: center;
    margin-top: -50px;
    line-height: 100px;
    cursor: pointer;
    font-weight: normal;
    transition: color 0.3s, background-color 0.3s;
  }

  .pp_itemGallery nav.controls span:hover,
  .pp_itemSimGal nav.controls span:hover {
    color:#fff;
    background-color: rgba(0, 0, 0, 0.33);
  }

  .pp_itemGallery nav.controls span.next,
  .pp_itemSimGal nav.controls span.next {
    right: 0px;
  }

  .pp_itemGallery nav.controls span.prev,
  .pp_itemSimGal nav.controls span.prev {
    left: 0px;
  }

  .pp_itemGallery nav.markers,
  .pp_itemSimGal nav.markers {
    position: absolute;
    white-space: nowrap;
    width: 98%;
    margin:0 1% 3px 1%;
  }
  .pp_itemGallery .top,
  .pp_itemSimGal .top {
    top:0;
  }
  .pp_itemGallery .bottom,
  .pp_itemSimGal .bottom {
    bottom:0;
  }
  .pp_itemGallery .left,
  .pp_itemSimGal .left {
    left:0;
    text-align:left;
  }
  .pp_itemGallery .center,
  .pp_itemSimGal .center {
    text-align:center;;
  }
  .pp_itemGallery .right,
  .pp_itemSimGal .right {
    right:0;
    text-align:right;
  }
  .markers span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border:solid 2px rgba(255, 255, 255, 0.67);
    background-color: rgba(255, 255, 255, 0);
    margin:9px 6px 0 6px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: background-color, 0.2s border-color 0.2s;
    -moz-transition: background-color, 0.2s border-color 0.2s;
    transition: background-color 0.2s, border-color 0.2s;
  }

  .markers span:hover {
    border-color: rgba(255, 255, 255, 1.0);
    background-color: rgba(255, 255, 255, 1.0);
  }

  .markers span.current {
    background-color: rgba(0, 0, 0, 1.0);
    border-color: rgba(255, 255, 255, 1.0);
  }
  /* end of new slideshow rules */

  #pp_pagefoot {float:right;}
  #pp_sitefoot {float:left;}
  #pp_pagedate {float:right; color:#f02; text-align:right; font-size:0.9em;}

  /* odds n ends... */
  #pp_foot a       {color:#666; text-decoration:none;}
  #pp_foot a:hover {color:#000;}

  /* cookie law stuff... */
  #pp_cookielaw     {width:100%; display:none; padding:9px 0; color:#ddd;
                        background-color:#111; font-size:0.9em; text-align:center;
                        position:fixed; bottom:12px;}
  #pp_cookielaw div {margin:0 auto; text-align:left;}
  #pp_cookielaw p   {margin:0; padding:3px 9px;}
  #pp_cookielaw a   {display:inline-block; margin:0 0 0 12px; color:#ddd;
                        transition:color 0.3s, background-color 0.3s, border-color 0.3s;}
  #pp_cookielaw a:hover {color:#fff;}
  #pp_cookielaw a#pp_cookieagree  {margin:0 0 0 24px; padding:2px 9px 4px 9px; color:#000;
                      text-decoration:none; background-color:#ccc; border:solid 1px #eee;
                      border-bottom-color:#999; border-right-color:#999; border-radius:4px;}
  #pp_cookielaw a#pp_cookieagree:hover {color:#fff; background-color:#092; border-color:#3b6;
                      border-bottom-color:#061; border-right-color:#061;}

  /* quick edit bits... */
  div.pp_quickedit {
    text-decoration:none;
    display:block;
    cursor:crosshair!important;
    }
  .pp_quickedit:hover .pp_itemStd,
  .pp_quickedit:hover .pp_itemGallery,
  .pp_quickedit:hover .pp_itemRaw,
  .pp_quickedit:hover .pp_itemFold,
  .pp_quickedit:hover .pp_itemThumbs,
  .pp_quickedit:hover .pp_itemTick,
  .pp_quickedit:hover .panel,
  .pp_quickedit:hover h1,
  .pp_quickedit:hover h2,
  .pp_quickedit:hover h3 {
    background-image:none!important;
    border-radius:4px;
    color:#039!important;
    background-color:#fe9!important;
    }
  .pp_quickedit .pp_itemStd,
  .pp_quickedit .pp_itemGallery,
  .pp_quickedit .pp_itemRaw,
  .pp_quickedit .pp_itemFold,
  .pp_quickedit .pp_itemThumbs,
  .pp_quickedit .pp_itemTick,
  .pp_quickedit .panel,
  .pp_quickedit h1,
  .pp_quickedit h2,
  .pp_quickedit h3 {
    transition:color 0.3s, background-color 0.3s, border-color 0.3s;
    }
  div.pp_quickedit:hover img {
    opacity:0.5;
    }
  #pp_back {
    display:block;
    position:fixed;
    left:3px;
    top:3px;
    z-index:1001;
    padding:6px 12px;
    text-decoration:none;
    opacity:0.75;
    transition:opacity 0.3s;
    border:solid 1px #333;
    border-radius:4px;
    color:#039;
    border-color:#039;
    background-color:#fe9;
    }
  #pp_back:hover {
    opacity:1.0;
    }