/*
  * Panpage Theme: PT Multi - common stylesheet
  *
  * 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, font, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td
  {margin:0; padding:0; border:0; outline:0; vertical-align: baseline;
        font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit;}
  :focus {outline:0;}
  img {font-size:0;}
  ol, ul {list-style:none outside none;}
  /* tables still need 'cellspacing="0"' in the markup */
  table {border-collapse:separate; border-spacing:0;}
  caption, th, td {text-align:left; font-weight:normal;}
  blockquote:before, blockquote:after, q:before, q:after {content:"";}
  blockquote, q {quotes:"" "";}

  /* basic structure... */
  body {
    font:medium helvetica, arial, sans-serif;   /* font for ALL text unless otherwise specified */
    }
  .band {
    min-width:100%;       /* a band is always full width of browser window */
    text-align:center;    /* this is what centers the site content in the window */
    float:left;           /* content floats so containers must float too */
    clear:left;           /* bands always slip under previous */
    }
  .section {
    text-align:left;      /* content is generally left aligned */   
    margin:0 auto;        /* auto centers a .section within a .band */
    }

  /* columns & items: itemFulWidth in column based layouts, 
                      colFullWidth in layer based layouts... */
  .itemFullWidth,
  .colFullWidth {
    float:left; 
    width:100%; 
    margin:0; 
    clear:left;
    }

  /* folding items and tickers... */
  .pp_itemFold {
    cursor:pointer;     /* a hint that something happens if you click! */
    }
  .pp_Fixed {
    }
  .pp_Fold {
    overflow:hidden;    /* ensure that folded items are hidden until unfolded */
    }
  .pp_itemTick {
    overflow:hidden;    /* content mustn't scroll beyond container */
    position:relative;  /* so absolutepositioning can be used for content */
    margin:0; 
    padding:0; 
    }
  .pp_Tick, 
  .pp_Tick p {
    white-space:nowrap; 
    margin:0; 
    padding:0;
    }

  /* page content... */
  h1 
    {font-size:2.5em; font-weight:normal; margin:24px 0 6px 0; border:none; }
  h2 
    {font-size:1.5em; font-weight:normal; margin:15px 0 3px 0;}
  h3 
    {font-size:1.2em; font-weight:normal; margin:12px 0 0 0;}
  p  
    {margin:9px 0 0 0;}
  h1 a, h2 a, h3 a  
    {text-decoration:none;}
  ul, ol  
    {margin:3px 0 0 24px;}
  ul li   
    {list-style:disc outside none; margin-top:6px;}
  ul.tick li
    {list-style-image:url(tick.png); }
  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; }
  table p 
    {margin-top:0;}
  img {
    max-width:100%;     /* ensure large image sdon't overflow (not supported by IE!) */
    }
  a {
    transition:color 0.3s,        /* links change gently on mouse-over */
        background-color 0.3s, 
        border-color 0.3s, 
        background-position 0.3s;
    }

  /* images that allow text to flow around them... */
  .imgLeft  
    {float:left; margin-right:6px;}
  .imgRight 
    {float:right; margin-left:6px;}

  /* slideshow galleries... */
  .pp_itemGallery p {
    margin:0;
    }
  .pp_itemGallery img {
    border:none!important;    /* any borders required must be applied to the gallery not the image */
    }
  .pp_galleryframe    
    {position:relative; overflow:hidden; font-size:0; line-height:0;}
  .pp_galleryslide    
    {position:relative; overflow:visible; text-align:center;}
  .pp_thumbs   
    {float:left; clear:left; display:inline; width:100%; margin:0; padding:0;}
  .pp_thumbs a 
    {background-color:transparent;}
  #page .pp_thumbs img {
    float:left;                   /* thumbs will wrap to next line as needed */
    display:inline;               /* ensures even alignment with no surprises */
    cursor:pointer;               /* you can click it! */
    padding:1px;                  /* effectively a 1px border */
    border:solid 1px transparent; /* the real border is transparent until needed */ 
    margin:0;
    transition:background-color 0.3s, border-color 0.3s;    /* change gently on mouse-over */
    } 
  #page .pp_thumbs img:hover {
    }                           /* all in screen_clr.css */
    
  /* overlay controls... */
  .pp_galleryoverlay {
    position:absolute; 
    top:0; left:0;              /* real value is set later by javascript */
    width:100%; height:100%; 
    text-align:center;
    background:url(blank.gif) left top no-repeat; /* bkgnd is a fudge so IE10 and below will display ctrls on mouseover! */
    }
  .pp_galleryovlctrls {
    display:none;               /* revealed by js on mouse-over */
    width:100%; 
    position:absolute;          /* absolute within the slideshow image area */
    top:40%; left:0;            /* crude vertical centering */
    }
  .pp_galleryovlprev {
    position:absolute; 
    left:6px; top:0;            /* prev-stop control is on the left */
    }
  .pp_galleryovlplay, 
  .pp_galleryovlpause {
    position:absolute; 
    top:0; left:45%;            /* pause/play is crudely centered */
    }
  .pp_galleryovlnext {
    position:absolute; 
    right:6px; top:0;           /* next-run is on right */
    }
  .pp_galleryovlctrls a:hover {
    cursor:pointer;             /* give Sir a clue he can click here */
    }
  /* image markers... */
  .pp_galleryovlmarkers         {width:98%; padding:1%; text-align:center; font-size:0; line-height:0;}
  .pp_galleryovlmarkers.top     {position:absolute; left:0; top:0;}
  .pp_galleryovlmarkers.bottom  {position:absolute; left:0; bottom:0;}
  .pp_galleryovlmarkers.left    {text-align:left;}
  .pp_galleryovlmarkers.right   {text-align:right;}
  .pp_galleryovlmarkers a:hover {cursor:pointer;}
  /* caption... */
  .pp_gallerycaption.pp_top,
  .pp_gallerycaption.pp_bottom
                                {margin:3px 1%; width:98%; font-size:1.3em;}
  .pp_gallerycaption.pp_overlay
                                {position:absolute; top:0; width:20%; height:100%; margin:0;}
  .pp_gallerycaption.pp_overlay.pp_left  {left:0; margin-left:0;}
  .pp_gallerycaption.pp_overlay.pp_right {right:0; margin-right:0;}
  .pp_gallerycaption.pp_overlay p {position:absolute; left:0; bottom:5%; width:90%; margin:0 5% 0 5%;
                                      font-size:24px; line-height:30px;}
  .pp_gallerycaption.pp_overlay.pp_right p  {text-align:right;}
  .pp_gallerycaption.pp_overlay p em        {font-size:0.6em; font-style:italic;}

  /* special items... */
  /* panels... */
  .panel  
      {padding:3px 12px 12px 12px; border-left:solid 6px #ccc; margin-top:24px;}
  /* button links... */
  a.btn, 
  input[type='submit']
      {display:inline-block; padding:10px 12px 8px 12px; border-radius:6px; text-decoration:none;
          transition:color 0.2s, background-color 0.3s, background-position 0.3s;}

  /* sitemap - this is a table with background images showing tree structure... */
  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 3px 3px 3px; text-decoration:none;}
  table.pp_sitemap a:hover 
    {}
  table.pp_sitemap td.top    
    {padding:0.3em 5px 0.3em 15px; background:url(sitemap_top.gif) left top no-repeat;}
  table.pp_sitemap td.topend 
    {padding:0.3em 5px 0.3em 15px; background:url(sitemap_topend.gif) left top no-repeat;}
  table.pp_sitemap td.mid    
    {padding:0.3em 5px 0.3em 15px; background:url(sitemap_mid.gif) left top no-repeat;}
  table.pp_sitemap td.midend 
    {padding:0.3em 5px 0.3em 15px; background:url(sitemap_midend.gif) left top no-repeat;}
  table.pp_sitemap td.onl    
    {padding:0.3em 5px 0.3em 15px; background:url(sitemap_onl.gif) left top no-repeat;}
  table.pp_sitemap td.onlend 
    {padding:0.3em 5px 0.3em 15px; background:url(sitemap_onlend.gif) left top no-repeat;}
  table.pp_sitemap td.btm    
    {padding:0.3em 5px 0.3em 15px; background:url(sitemap_btm.gif) left top no-repeat;}
  table.pp_sitemap td.btmend 
    {padding:0.3em 5px 0.3em 15px; background:url(sitemap_btmend.gif) left top no-repeat;}

  /* contact page stuff - a table to align address and contact detaisl nicely... */
  table.tblContact 
    {padding:6px 0 0 0;}
  table.tblContact td 
    {padding:9px 6px; vertical-align:top;}
  table.tblContact td:first-child 
    {text-align:right;}               /* first column, legend, aligns right */
  table.tblContact th
    {text-align:right; padding:2px 3px; vertical-align:top;}
  table.tblContact th:first-child 
    {font-weight:bold;}
  table.tblContact td p 
    {margin-top:0;}                   /* cell padding does this so don't need it here */

  /* contact form... */
  form
      {width:100%;}
  form div                 
      {float:left; padding-top:6px; width:100%;}
  form div p
      {margin-top:0;}
  form p.instr                        /* instructions to site visitor to fill in form */
      {margin-top:9px; font-size:0.8em;}
  input[type="text"], 
  textarea                            /* size and style of form elements */
      {float:left; clear:left; width:95%;
          font:14px "courier new", fixed; padding:6px 2%;
          background-color:#f8f8f8; 
          border:solid 1px #999; border-radius:3px;}
  textarea                      
    {resize:vertical;}
  input[type="text"].short      
    {width:60%; min-width:180px;}
  input[type="text"].veryshort  
    {width:40%; min-width:120px;}
  input#submit                  
    {float:left; clear:left; margin:0;}
  label                         
    {float:left; clear:left; font-size:0.8em; margin:0 0 1px 2px;}
  form .req                     
    {border-color:#000;}
  form .err                     
    {border-color:#c03;}
  form .example                 
    {font-style:italic; font-weight:normal; color:#999;}

  /* footer... */
  #pp_foot     {font-size:0.8em; text-align:left;}
  #pp_foot h1  {font-size:2.0em;}
  #pp_foot h2  {font-size:1.6em;}
  #pp_foot h3  {font-size:1.2em;}
  #pp_foot p   {margin:3px 0 0 0;}
  #pp_foot a   {text-decoration:none;}
  #pp_foot a:hover {color:#f5ff}
  #pp_foot #byeline a {text-decoration:none;}

  /* cookie law stuff - small panel at bottom of browser window for cookie warning... */
  #pp_cookielaw {             /* the cookie law panel */
    display:none;             /* revealed by js if required */
    position:fixed; 
    bottom:6px; left:6px;     /* sticks to bottom of browser window */
    z-index:990;              /* appears on top of anything else except nav */
    width:24em; 
    padding:9px 0; 
    border-radius:6px;        /* pretty! */
    color:#ddd; 
    background-color:rgba(16, 16, 16, 0.75);    /* semi-transparent, 75% opacity */
    font-size:0.9em; 
    text-align:left;
    }
  #pp_cookielaw p {           /* text within cookie law panel */
    margin:0; 
    padding:3px 9px;
    }
  #pp_cookielaw a#pp_cookieagree {  /* 'agree' button */
    display:block; 
    float:right; 
    margin:12px 0 0 0;
    color:#000; 
    background-color:rgba(16, 16, 16, 1.0); 
    padding:2px 9px 4px 9px;
    text-decoration:none; 
    background-color:#ccc; 
    border:solid 1px #eee;          /* top & left borders are light */
    border-bottom-color:#999;       /* bottom & right borders are dark */  
    border-right-color:#999;        /* so light comes from top left */  
    border-radius:4px;
    transition:color 0.2s, background-color 0.3s;   /* change gently on mouse-over */
    }
  #pp_cookielaw a#pp_cookieagree:hover {
    color:#fff;             
    background-color:#092;          /* agree button on hover - change colour incl borders */
    border-color:#3b6;
    border-bottom-color:#061; 
    border-right-color:#061;
    }
  @media screen and (max-width:850px)
    {
/*
 * Panpage Theme: PT Multi - small screen / mobile stylesheet
 *
 * structure... */
  body {
    min-width:320px;    /* display won't shrink below this width */
    }
  .section {
    width:100%;         /* all content is full width */    
    }
  #banner {
    }
  #page {
    min-height:400px; 
    padding:12px 0 12px 0;
    }
  #pp_foot {
    padding:3px 0 24px 0;
    }

  /* banner stuff... */
  /* don't display large screen banner stuff here */
  #banner_lrg,
  #nav_lrg
      {display:none;}
  #banner_sml {
    position:relative;      /* allows absolute position of contained elements */
    width:100%;             /* and fills screen width */
    text-align:right;
    }
  #banner_sml p {
    margin:0; padding:0;    /* handled by position:absolute instead */
    }
  #banner_sml a {
    text-decoration:none;   /* no nasty underlines! */
    color:inherit;          /* and no surprise colours either! */
    }
  #banner_sml .logo {
    margin:6px 3px 0px 0; /* top right and overlaps nav/page */ 
    font-size:0;            /* it's an image! */
    max-width:70%;
    }
  #banner_sml .pp_orgphone {
    position:absolute;
    top:3px; left:6px;        /* on left of banner area */ 
    font-size:21px;
    }
  #banner_sml .pp_orgmblphone {
    position:absolute; 
    top:36px; left:6px;       /* on left of banner area */ 
    font-size:21px;
    }
  #banner_sml .pp_orgemail {
    display:none;
    position:absolute; 
    top:72px; left:6px;       /* on left of banner area */ 
    font-size:21px;
    }
  #banner_sml p img {
    margin:3px 3px -3px 0;    /* phone or email icons align with text */
    } 
  #pp_navmobbtn {
    position:absolute;        /* position at bottom right */ 
    left:3px; 
    top:6px; 
    cursor:pointer;
    opacity:0.67; 
    transition:opacity 0.3s;
    }
  #pp_navmobbtn:hover {
    opacity:1.0;
    }
  /* small screen title varies with screen width... */
  @media screen and (max-width:720px) 
    {
    }
  @media screen and (max-width:520px) 
    {
    }
  @media screen and (max-width:420px) 
    {
    }

  /* columns & items... */
  .colSingle,    .itemSingle,
  .colLeftof2,   .itemLeftof2,
  .colMidof2,    .itemMidof2,
  .colRightof2,  .itemRightof2,
  .colLeftof3,   .itemLeftof3,
  .colMidof3,    .itemMidof3,
  .colRightof3,  .itemRightof3,
  .colLeft2of3,  .itemLeft2of3,
  .colRight2of3, .itemRight2of3,
  .colLeftof4,   .itemLeftof4,
  .colMidof4,    .itemMidof4,
  .colRightof4,  .itemRightof4,
  .colLeft3of4,  .itemLeft3of4,
  .colRight3of4, .itemRight3of4 {float:left; width:96%; margin:0 2%; clear:left;}
  
  /* columns displayed only on large screens... */
  .colLargeOnly
      {display:none;}

  /* panels need a little vertical margin... */
  .panel  {width:91%; padding:3px 2% 12px 2%; margin-top:24px;}

  /* page content... */
  h1 
    {font-size:2.0em; font-weight:normal; margin:0 0 6px 0; border:none; }
  h2 
    {font-size:1.4em; font-weight:normal; margin:12px 0 3px 0;}
  h3 
    {font-size:1.2em; font-weight:normal; margin:9px 0 0 0;}
  img     {max-width:100%;}
  #pgHome h1 {font-size:1.4em; margin:6px 0 0 0;}

  /* slideshow gallery - ensure slide images fill screen width */
  .pp_galleryslide img   {width:100%;}
  .pp_gallerycaption.pp_overlay p     {font-size:16px; line-height:21px; bottom:5%;}
  .pp_gallerycaption.pp_overlay p em  {font-size:0.7em;}
  @media screen and (max-width:499px)
    {
    .pp_gallerycaption.pp_overlay p {font-size:12px; line-height:16px; margin:3px 3%;}
    .pp_galleryovlmarkers           {display:none;}
    }
  @media screen and (max-width:399px)
    {
    .pp_gallerycaption.pp_overlay p {font-size:9px; line-height:13px;}
    }

  /* contact form... */
  form p                        {clear:left;}
  input[type="text"], textarea  {clear:left; float:none; width:90%;}
  input[type="text"].short      {width:50%;}
  input[type="text"].veryshort  {width:30%;}
  input#submit                  {clear:left; margin:9px 0;}
  label                         {clear:left; float:none; display:block; text-align:left;}

  /* navigation menu... */
  ul.pp_navmob  {width:100%;}
  /* navigation... */
  ul.pp_navmob, .pp_navmob ul {display:none; width:100%; clear:both; margin:-12px 0 0 0; padding:0;}
  ul.pp_navmob                {border-bottom:solid 1px #333; line-height:0;}
  .pp_navmob li   {width:100%; float:none; clear:both; margin:0; padding:0;
                        border-top:solid 1px #333; list-style:none; }
  .pp_navmob li a {color:#eee; text-decoration:none; display:inline-block;
                        -moz-box-sizing:border-box; box-sizing:border-box; width:74%;
                        padding:9px 0 9px 12px; font-size:18px; line-height:18px;
                        transition:color 0.3s, background-color 0.3s, background-position 0.3s;}
  .pp_navmob li a:hover           {}
  .pp_navmob .pp_navthis          {}
  .pp_navmob .pp_navthis li       {}
  .pp_navmob .pp_navthis>a        {}
  .pp_navmob .pp_navthis>a:hover  {}

  span.pp_dropbtn {display:block; float:right; cursor:pointer;  width:64px;
                      -moz-box-sizing:border-box; box-sizing:border-box;
                      text-align:right; transition:background-color 0.3s, background-position 0.3s;}
  span.pp_dropbtn:hover {}
  span.pp_dropbtn img   {padding:0 12px 0 12px;}

  /* footer stuff... */
  #pp_foot p   {margin:12px 0 0 0;}
    }

  @media screen and (min-width:851px)
    {
/*
 * Panpage Theme: PT Multi - large screen stylesheet
 *
 * structure... */
  body {
    min-width:1008px;     /* won't shrink smaller than this */
    }
  .section {
    width:1008px;         /* site content is centered in 'sections' */
    }
  /* the banner band is fixed to the top of the browser screen and a fixed height */    
  #banner {
    position:fixed; top:0;  /* sticks the banner to the top of the window */
    z-index:990;           /* ensure page scrolls behind banner */
    }
  /* nav_lrg is also fixed - just below te banner and also fixed height */    
  #nav_lrg {
    position:fixed; 
    top:142px;
    z-index:990;           /* ensure nav drops OVER slideshows etc, not behind */
    }
  /* page starts below nav and scrolls up behind it */    
  #page {
      margin-top:189px;       /* start below banner & nav */
      padding:12px 0 24px 0;  /* minimal padding @ top as headings have top margins, 24px @ bottom */  
      min-height:600px;       /* the white bit in the middle would look silly if too short! */
      }
  #pp_foot {
      padding:3px 0 24px 0; 
      min-height:120px;
      }

  /* banner stuff... */
  /* don't display small screen banner stuff here */
  #banner_sml,
  .pp_navmob
      {display:none;}
  /* large screen banner */
  #banner_lrg {
    height:142px;           /* must be fixed height so nav menu appears just below */
    position:relative;      /* because content is position:absolute */
    }
  #banner_lrg p {
    position:absolute;      /* everything in the banner is absolute */
    margin:0; padding:0;    /* handled by position:absolute instead */
    }
  #banner_lrg a {
    text-decoration:none;   /* no nasty underlines! */
    color:inherit;          /* and no surprise colours either! */
    }
  #banner_lrg .logo {
    position:absolute;
    top:6px; right:0px;     /* position logo relative to top & left */
    margin:0; padding:0;    /* handled by position:absolute instead */
    z-index:1005;           /* ensure logo drops over nav menu */
    }
  #banner_lrg .title {
    top:0px; left:0px;      /* on the left */ 
    font-size:48px;         /* nice big text */
    font-weight:bold;
    }
  #banner_lrg .strap {
    top:0px; left:0px;      /* on the left */ 
    font-size:18px;         /* moderate text */
    font-weight:bold;
    width:50%;
    }
  #banner_lrg .pp_orgphone {
    position:absolute;
    top:3px; right:6px;     /* on right of banner area */ 
    font-size:21px;
    }
  #banner_lrg .pp_orgmblphone {
    position:absolute; 
    top:36px; right:6px;    /* on right of banner area */ 
    font-size:21px;
    }
  #banner_lrg .pp_orgemail {
    position:absolute; 
    bottom:6px; left:0;     /* on left of banner area */ 
    font-size:21px;
    text-align:left;
    }
  #banner_lrg p img {
    margin:3px 3px -3px 0;  /* small icons align vertically with text */
    }
    
  #nav_lrg {
    height:40px;            /* nav menu is fixed position so must be fixed height too */
    }                       /* so page content can start neatly below */
      
  /* page / content stuff */
  #page .section {
    }


  /* columns & items... */
  .colSingle,    .itemSingle    {float:left;  width:1008px; clear:left;}
  .colLeftof2,   .itemLeftof2   {float:left;  width:480px; margin-right:24px; clear:left;}
  .colMidof2,    .itemMidof2    {float:left;  width:480px; margin-left:24px; margin-right:24px;}
  .colRightof2,  .itemRightof2  {float:right; width:480px; margin-left:24px; clear:right;}
  .colLeftof3,   .itemLeftof3   {float:left;  width:304px; margin-right:24px; clear:left;}
  .colMidof3,    .itemMidof3    {float:left;  width:304px; margin-left:24px; margin-right:24px;}
  .colRightof3,  .itemRightof3  {float:right; width:304px; margin-left:24px; clear:right;}
  .colLeft2of3,  .itemLeft2of3  {float:left;  width:656px; margin-right:24px; clear:left;}
  .colRight2of3, .itemRight2of3 {float:right; width:656px; margin-left:24px; clear:right;}
  .colLeftof4,   .itemLeftof4   {float:left;  width:216px; margin-right:24px; clear:left;}
  .colMidof4,    .itemMidof4    {float:left;  width:216px; margin-left:24px; margin-right:24px;}
  .colRightof4,  .itemRightof4  {float:right; width:216px; margin-left:24px; clear:right;}
  .colLeft3of4,  .itemLeft3of4  {float:left;  width:744px; margin-right:24px; clear:left;}
  .colRight3of4, .itemRight3of4 {float:right; width:744px; margin-left:24px; clear:right;}
  /* cols in layered layout and items in column layout... */
  .colFullWidth, .itemFullWidth {float:left;  width:100%; margin:0; clear:left;}

  /* panels... */
  .panel  {padding:3px 12px 12px 12px; margin-top:24px;}

  .colSingle .panel,   .itemSingle.panel      {width:978px;}
  .colLeftof2 .panel,   .itemLeftof2.panel,
  .colMidof2 .panel,    .itemMidof2.panel,
  .colRightof2 .panel,  .itemRightof2 .panel  {width:450px;}
  .colLeftof3 .panel,   .itemLeftof3.panel,
  .colMidof3 .panel,    .itemMidof3.panel,
  .colRightof3 .panel,  .itemRightof3.panel   {width:274px;}
  .colLeft2of3 .panel,  .itemLeft2of3.panel,
  .colRight2of3 .panel, .itemRight2of3.panel  {width:626px;}
  .colLeftof4 .panel,   .itemLeftof4.panel,
  .colMidof4 .panel,    .itemMidof4.panel,
  .colRightof4 .panel,  .itemRightof4.panel   {width:186px;}
  .colLeft3of4 .panel,  .itemLeft3of4.panel,
  .colRight3of4 .panel, .itemRight3of4.panel  {width:714px;}


  /* navigation menu... */

  /* banner & nav... */
  ul.pp_navmain {
    font:16px helvetica, arial, sans-serif;   /* font spec for large screen navigation */
    float:left; 
    clear:left; 
    margin:0; 
    padding:0;
    }
  .pp_navmain > li {
    float:left; 
    list-style:none; 
    margin:0 0 -6px 0;        /* allows nav btn border to overlap nav bar border */
    padding:0 1px 0 0;
    position:relative;
    border-bottom-style:solid;
    border-bottom-width:6px;
    transition:border-color 0.3s;
    }
  .pp_navmain > li:first-child {
    padding-left:1px;         /* dark line at left of first nav item */
    }
  .pp_navmain a {
    display:block;
    margin:0;
    padding:0 24px 0 24px;
    line-height:40px;         /* this sets the height of the entire nav_lrg band */ 
    text-decoration:none; 
    white-space:nowrap;
    transition:color 0.3s, border-color 0.3s,
                  background-color 0.3s, background-position 0.3s;
    }
  /* this is the arrow pointer for 'this page' */  
  .pp_navmain > .pp_navthis::after {
    content:"";
    width:0;
    height:0;                       /* it's a zero sized element */
    border:solid 9px transparent;   /* with 9px borders, all but one of which are transparent */
    position:absolute;
    bottom:0;                       /* positoned over the bottom and... */ 
    left:40%;                       /* ..roughly centered on the parent nav element */
    z-index:1001;
    transition:border-bottom-color 0.3s;
    }
  /* drop down nav menus... */
  .pp_navmain ul {
    position:absolute; 
    display:none; 
    padding:0; 
    font-size:16px;
    margin:1px 0 0 0;
    border:none;
    }
  .pp_navmain ul li {
    float:none; 
    list-style:none;
    position:relative;
    margin:0;
    padding:0;
    border-bottom-width:0;
    border-left-style:solid;
    border-left-width:6px;
    transition:border-color 0.9s;
    }
  .pp_navmain ul.pp_navdeep {
    margin:3px 0 0 1px;
    }
   /* drop menu arrow pointer for 'this page' */  
  .pp_navmain ul li.pp_navthis::after {
    content:"";
    width:0;
    height:0;                       /* it's a zero sized element */
    border:solid 9px transparent;   /* with 9px borders, all but one of which are transparent */
    position:absolute;
    left:0;                         /* positoned inside the left border and... */ 
    top:11px;                       /* ..vertically centered on the nav element */
    z-index:1001;
    transition:border-color 0.9s;
    }
   
    
  /* contact form... */


  /* footer stuff... */
  #pp_sitefoot  {}
  #subfoot      {width:1002px; padding:0 3px;}
    }

/*
 * PT Multi colour scheme


 * Colour scheme...
 *
 *  White:            #fff;     body bkgnd
 *  Mid Grey:         #767778   body text
 *  Shadow grey:      #545558;
 *  Keyline grey:     #cccdcf;
 *  Pale grey:        #ecedef;  footer/body bkgnd
 *
 *  Menu bkgnd colours...
 *
 *  Blue: #01b5eb;    Dark:   #00b0e5;  Light:   #17c9ff;
 *  Darker: #00a2d2;  Shadow: #007294;  Hilight: #95e7ff;
 *
 *  Purple: #8048ae;  Dark:   #743aa3;  Light:   #8b55b7;
 *  Darker: #521b7e;  Shadow: #411664;  Hilight: #af83d2;
 *
 *  Green:  #61ba34;  Dark:   #59ae2e;  Light:   #69c43a;
 *  Darker: #489a1e;  Shadow: #3f871a;  Hilight: #8cdb64;
 *
 *  Yellow: #ffe815;  Dark:   #efd700;  Light:   #ffeb35;
 *  Darker: #ead100;  Shadow: #dac300;  Hilight: #fff48e;
 *
 *  Red:    #d31d5a;  Dark:   #c91450;  Light:   #e22a67;
 *  Darker: #b6184d;  Shadow: #9d0a3b;  Hilight: #f16091;
 */

  /* structure... */
  body {
    color:#767778;
    background-color:#f4f6f8;  /* determines the footer colour since it extends to the bottom of the page */
    }
  .band {
    width:100%;
    }

  /* the 4 major, full screen width bands: banner, nav, page, foot... */
  #banner {
    color:#767778;
    background-color:#fff;
    }
  #nav_lrg {
    color:#767778;
    background:#fcfdff url(bkgndfade100x17.png) left 50% repeat-x;   /* that's 100px high with a
        white-black fade overlay at 17% opacity to create a subtle 3D bevel effect.
        There's also a 25% version for a stronger bevel: bkgndfade100x25.png */
    border-top: solid 1px #e4e6e8;
    border-bottom: solid 6px #cccdcf;
    }
  #page {
    color:#767778;             /* 'body text' colour & background */
    background-color:#fff;
    }
  #pp_foot {
    color:#333;             /* background-colour is unecessary - see 'body' above */
    border-top: 4px solid #cccdcf;
    }
  .blue #pp_foot {
    border-color:#17c9ff;
    }
  .purple #pp_foot {
    border-color:#8048ae;
    }
  .green #pp_foot {
    border-color:#69c43a;
    }
  .yellow #pp_foot {
    border-color:#ffeb35;
    }
  .red #pp_foot {
    border-color:#e22a67;
    }

  /* the bands contain centered 'sections' of fixed width for the site content... */
  /* banner stuff */
  /*#banner_lrg {
    background:url(banner_lrg.jpg) center top no-repeat;  /* bkgnd for the banner center section */
    }*/
  #banner_sml {
    /*background:url(banner_lrg.jpg) center top no-repeat;*/
    }
  #banner .title {
    color:#ff;
    text-shadow:-1px -1px 0 #c1570f, -1px 1px 0 #c1570f, 1px -1px 0 #c1570f, 1px 1px 0 #c1570f;
    }

  /* page content... */
  a
    {color:#666768;}
  a:hover
    {color:#323334;}
  h1, h2, h3
    {color:#323334;}
  h1 a, h2 a, h3 a
    {color:inherit; text-decoration:none;}
  h1 a:hover,
  h2 a:hover,
  h3 a:hover
    {color:#323334;}
  ul.tick li
    {list-style-image:url(tick_black.png); }
  ul.tick.colour li
    {list-style-image:url(tick_green.png); }
  /* blue page content... */
  .blue h1,
  .blue h2,
  .blue h3
    {color:#00a2d2;}
  /* purple page content... */
  .purple h1,
  .purple h2,
  .purple h3
    {color:#521b7e;}
  /* green page content... */
  .green h1,
  .green h2,
  .green h3
    {color:#489a1e;}
  /* yellow page content... */
  .yellow h1,
  .yellow h2,
  .yellow h3
    {color:#ead100;}
  /* red page content... */
  .red h1,
  .red h2,
  .red h3
    {color:#b6184d;}


  /* slideshow galleries... */
  .pp_gallerycaption.pp_overlay       {background-color:rgba(192, 194, 196, 0.75);}
  .pp_gallerycaption.pp_overlay p     {color:#656667;}
  .pp_gallerycaption.pp_overlay p em  {color:#545556;}
  #page .pp_thumbs img {
    background-color:#767778;          /* background colour is effectively the quiescent state border */
    border:solid 1px transparent;   /* the real border is transparent until needed */
    }
  #page .pp_thumbs img:hover {
    background-color:#f56606;   /* on mouse over the background and border become the same colour */
    border-color:#f56606;       /* effectively giving a 2px highlight border without changing any widths */
    }                           /* changing widths or borders can cause jumping when the browser scales its window */


  /* special items...
     panels: pale is grey, coloured is page colour */
  .panel.coloured {
      color:#fff;
      border-color:#333435;
      background: linear-gradient(150deg, #6c6d6f, #666668);
      }
  .panel.coloured h1,
  .panel.coloured h2,
  .panel.coloured h3 {
      color:#fff;
      }
  .panel.coloured a,
      {color:inherit;}
  .panel.coloured a:hover
      {color:#ff0;}

  .panel.pale {
      color:#333;
      border-color:#cccdcf;
      background: linear-gradient(150deg, #ecedef, #e0e1e3);
      }
  .panel.pale h1,
  .panel.pale h2,
  .panel.pale h3 {
      color:#323334;
      }
  .panel.pale h1,
  .panel.pale h2,
  .panel.pale h3,
  .panel.pale a
      {color:inherit;}
  .panel.pale a:hover
      {color:#000;}
  /* blue page panels */
  .blue .panel.pale
    {border-color:#01b5eb;}
  .blue .panel.coloured {
      color:#323334;
      border-color:#01b5eb;
      background: linear-gradient(150deg, #95e7ff, #95e7ff);
      }
  .blue .panel.coloured h1,
  .blue .panel.coloured h2,
  .blue .panel.coloured h3 {
      color:#323334;
      }
  .blue .panel.coloured a:hover
      {color:#007294;}
  /* purple page panels */
  .purple .panel.pale
    {border-color:#8048ae;}
  .purple .panel.coloured {
      color:#323334;
      border-color:#8048ae;
      background: linear-gradient(150deg, #af83d2, #af83d2);
      }
  .purple .panel.coloured h1,
  .purple .panel.coloured h2,
  .purple .panel.coloured h3 {
      color:#323334;
      }
  .purple .panel.coloured a:hover
      {color:#411664;}
  /* green page panels */
  .green .panel.pale
    {border-color:#61ba34;}
  .green .panel.coloured {
      color:#323334;
      border-color:#61ba34;
      background: linear-gradient(150deg, #8cdb64, #8cdb64);
      }
  .green .panel.coloured h1,
  .green .panel.coloured h2,
  .green .panel.coloured h3 {
      color:#323334;
      }
  .green .panel.coloured a:hover
      {color:#3f871a;}
  /* yellow page panels */
  .yellow .panel.pale
    {border-color:#ffe815;}
  .yellow .panel.coloured {
      color:#323334;
      border-color:#ffe815;
      background: linear-gradient(150deg, #fff48e, #fff48e);
      }
  .yellow .panel.coloured h1,
  .yellow .panel.coloured h2,
  .yellow .panel.coloured h3 {
      color:#323334;
      }
  .yellow .panel.coloured a:hover
      {color:#dac300;}
  /* red page panels */
  .red .panel.pale
    {border-color:#d31d5a;}
  .red .panel.coloured {
      color:#f8f8f8;
      border-color:#b6184d;
      background: linear-gradient(150deg, #d31d5a, #c91450);
      }
  .red .panel.coloured h1,
  .red .panel.coloured h2,
  .red .panel.coloured h3 {
      color:#eee;
      }
  .red .panel.coloured a
      {color:#eee;}
  .red .panel.coloured a:hover
      {color:#fff;}


  /* button links... */
  /* button pale is translucent/skeletal */
  a.btn.pale {
    color:#646668;
    background-color:rgba(192, 192, 192, 0.33);
    background-image:url(bkgndfade100x17.png);
    background-position:left 50%;
    background-repeat:repeat-x;
    border:solid 1px #ddd;
    border-bottom-color:#999;
    border-right-color:#999;}
  a.btn.pale:hover {
    color:#323334;
    background-color:rgba(192, 192, 192, 0.67);
    }
  /* button coloured is ... coloured to page */
  a.btn.coloured,
  input[type='submit'] {
    color:#eee;
    background:#646668 url(bkgndfade100x17.png) left 50% repeat-x;
    border:solid 1px #97999b;
    border-bottom-color:#323334;
    border-right-color:#323334;
    }
  a.btn.coloured:hover,
  input[type='submit']:hover {
    color:#fff;
    background-color:#323334;
    border-color:#646668;
    border-bottom-color:#000;
    border-right-color:#000;
    }
  /* blue page coloured button
  *  Blue: #01b5eb;    Dark:   #00b0e5;  Light:   #17c9ff;
  *  Darker: #00a2d2;  Shadow: #007294;  Hilight: #95e7ff;
  */
  .blue a.btn.coloured,
  .blue input[type='submit'] {
    color:#f8f8f8;
    background:#01b5eb url(bkgndfade100x17.png) left 50% repeat-x;
    border:solid 1px #95e7ff;
    border-bottom-color:#007294;
    border-right-color:#007294;
    }
  .blue a.btn.coloured:hover,
  .blue input[type='submit']:hover {
    color:#fff;
    background-color:#00a2d2;
    border-color:#95e7ff;
    border-bottom-color:#007294;
    border-right-color:#007294;
    }
  /* purple page coloured button
  *  Purple: #8048ae;  Dark:   #743aa3;  Light:   #8b55b7;
  *  Darker: #521b7e;  Shadow: #411664;  Hilight: #af83d2;
  */
  .purple a.btn.coloured,
  .purple input[type='submit'] {
    color:#f8f8f8;
    background:#8048ae url(bkgndfade100x17.png) left 50% repeat-x;
    border:solid 1px #a06ec8;
    border-bottom-color:#411664;
    border-right-color:#411664;
    }
  .purple a.btn.coloured:hover,
  .purple input[type='submit']:hover {
    color:#fff;
    background-color:#521b7e;
    border-color:#a06ec8;
    border-bottom-color:#411664;
    border-right-color:#411664;
    }
 /* green page coloured button */
  .green a.btn.coloured,
  .green input[type='submit'] {
    color:#f8f8f8;
    background:#61ba34 url(bkgndfade100x17.png) left 50% repeat-x;
    border:solid 1px #8cdb64;
    border-bottom-color:#3f871a;
    border-right-color:#3f871a;
    }
  .green a.btn.coloured:hover,
  .green input[type='submit']:hover {
    color:#fff;
    background-color:#489a1e;
    border-color:#8cdb64;
    border-bottom-color:#3f871a;
    border-right-color:#3f871a;
    }
 /* yellow page coloured button */
  .yellow a.btn.coloured,
  .yellow input[type='submit'] {
    color:#535557;
    background:#ffe815 url(bkgndfade100x17.png) left 50% repeat-x;
    border:solid 1px #fff48e;
    border-bottom-color:#dac300;
    border-right-color:#dac300;
    }
  .yellow a.btn.coloured:hover,
  .yellow input[type='submit']:hover {
    color:#222324;
    background-color:#ead100;
    border-color:#fff48e;
    border-bottom-color:#dac300;
    border-right-color:#dac300;
    }
 /* red page coloured button */
  .red a.btn.coloured,
  .red input[type='submit'] {
    color:#f8f8f8;
    background:#d31d5a url(bkgndfade100x17.png) left 50% repeat-x;
    border:solid 1px #f16091;
    border-bottom-color:#9d0a3b;
    border-right-color:#9d0a3b;
    }
  .red a.btn.coloured:hover,
  .red input[type='submit']:hover {
    color:#fff;
    background-color:#b6184d;
    border-color:#f16091;
    border-bottom-color:#9d0a3b;
    border-right-color:#9d0a3b;
    }

  /* contact page... */
  label.lblErr
      {color:#d64a32;}

  /* lists... */
  .tblList, .tblList td   {border-color:#192742;}
  .tblList tr:first-child td  {color:#fd0; background-color:#3f5886;}
  .tblList tr:nth-child(2n+1) td, .tblList td:first-child
                                  {background-color:#3f5886;}
  .tblList tr:hover td        {background-color:#4d6798;}
  .tblList tr:first-child:hover td {background-color:#3f5886;}

  /* sitemap... */
  table.pp_sitemap a  {color:#767778; background-color:#fff; border-radius:4px;}
  table.pp_sitemap a:hover {background-color:#f56606; color:#fff;}

  /* footer */
  #pp_foot   {color:#767778;}
  #pp_foot a {color:inherit;}
  #pp_foot a:hover {color:#000;}
  #pp_foot h1, 
  #pp_foot h2, 
  #pp_foot h3  {color:inherit;}
  #pp_foot h1 a, 
  #pp_foot h2 a, 
  #pp_foot h3 a  {color:inherit; text-decoration:none;}
  #pp_foot h1 a:hover, 
  #pp_foot h2 a:hover, 
  #pp_foot h3 a:hover  {color:#000;}


  /* navigation menu - large... */
  ul.pp_navmain
      {}
  .pp_navmain li {
      background:#e4e6e8 url(bkgndfade100x17.png) left 50% repeat-x;
      border-color:#cccdcf;
      }
  .pp_navmain li:hover {
      border-color:#9c9d9f;           /* bottom border changes colour on mouse over */
      }
  .pp_navmain > .pp_navthis::after {
      border-bottom-color:#cccdcf;    /* colour the 'this page' ptr to match the bottom border */
      }
  .pp_navmain > .pp_navthis:hover::after {
      border-bottom-color:#9c9d9f;    /* and change colour to match on mouse over */
      }
  .pp_navmain li a {
      color:#656667;
      background:#fcfdff url(bkgndfade100x17.png) left 50% repeat-x;
      }
  .pp_navmain li a:hover {
      background-position:left 67%;
      border-color:#9c9d9f;
      }
  /* repeat for blue nav item... */
  .pp_navmain .blue
      {border-color:#17c9ff;}
  .pp_navmain .blue:hover
      {border-color:#00b0e5;}
  .pp_navmain > .blue.pp_navthis::after
      {border-bottom-color:#17c9ff;}
  .pp_navmain > .blue.pp_navthis:hover::after
      {border-bottom-color:#00b0e5;}
  /* and for purple... */
  .pp_navmain .purple
      {border-color:#8048ae;}
  .pp_navmain .purple:hover
      {border-color:#743aa3;}
  .pp_navmain > .purple.pp_navthis::after
      {border-bottom-color:#8048ae;}
  .pp_navmain > .purple.pp_navthis:hover::after
      {border-bottom-color:#743aa3;}
  /* and for green... */
  .pp_navmain .green
      {border-color:#69c43a;}
  .pp_navmain .green:hover
      {border-color:#59ae2e;}
  .pp_navmain > .green.pp_navthis::after
      {border-bottom-color:#69c43a;}
  .pp_navmain > .green.pp_navthis:hover::after
      {border-bottom-color:#59ae2e;}
  /* and for yellow... */
  .pp_navmain .yellow
      {border-color:#ffeb35;}
  .pp_navmain .yellow:hover
      {border-color:#efd700;}
  .pp_navmain > .yellow.pp_navthis::after
      {border-bottom-color:#ffeb35;}
  .pp_navmain > .yellow.pp_navthis:hover::after
      {border-bottom-color:#efd700;}
  /* and for red... */
  .pp_navmain .red
      {border-color:#e22a67;}
  .pp_navmain .red:hover
      {border-color:#c91450;}
  .pp_navmain > .red.pp_navthis::after
      {border-bottom-color:#e22a67;}
  .pp_navmain > .red.pp_navthis:hover::after
      {border-bottom-color:#c91450;}
  .pp_navmain a:hover
    {color:#000; background:#fcfdff url(bkgndfade100x17.png) left 66% repeat-x;}
  /* drop down nav menus... */
  .pp_navmain ul
    {background-color:#f4f6f8; background-image:none;  margin-top:7px;}
  .pp_navmain ul li
    {}
  .pp_navmain ul a
      {color:#656667;}
  .pp_navmain ul .pp_navthis > a
    {background-color:#f6f8fa;}
  /* this page flag on left of drop menu items */
  .pp_navmain ul .pp_navthis::after {
      border-left-color:#cccdcf;    /* colour the 'this page' ptr to match the left border */
      }
  .pp_navmain ul .pp_navthis:hover::after {
      border-left-color:#9c9d9f;    /* and change colour to match on mouse over */
      }
  /* blue pages */
  .pp_navmain ul .blue.pp_navthis::after
      {border-left-color:#17c9ff;}
  .pp_navmain ul .blue.pp_navthis:hover::after
      {border-left-color:#00b0e5;}
  /* purple... */
  .pp_navmain ul .purple.pp_navthis::after
      {border-left-color:#7337a3;}
  .pp_navmain ul .purple.pp_navthis:hover::after
      {border-left-color:#5f298a;}
  /* and for green... */
  .pp_navmain ul .green.pp_navthis::after
      {border-left-color:#69c43a;}
  .pp_navmain ul .green.pp_navthis:hover::after
      {border-left-color:#59ae2e;}
  /* and for yellow... */
  .pp_navmain ul .yellow.pp_navthis::after
      {border-left-color:#ffeb35;}
  .pp_navmain ul .yellow.pp_navthis:hover::after
      {border-left-color:#efd700;}
  /* and for red... */
  .pp_navmain ul .red.pp_navthis::after
      {border-left-color:#e22a67;}
  .pp_navmain ul .red.pp_navthis:hover::after
      {border-left-color:#c91450;}

  /* navigation menu - small... */
  ul.pp_navmob
      {border-color:#aaabac; background-color:#cccdce;}
  .pp_navmob li
      {border-color:#aaabac;}
  .pp_navmob li a
      {color:#666;}
  .pp_navmob li a:hover
      {color:#333; background-color:#bbbcbd;}
  .pp_navmob .pp_navthis > a
      {color:#000; background-color:#c3c4c5;}
  .pp_navmob li a::before  
      {content: "► "; color:transparent;}
  .pp_navmob .pp_navthis > a::before
      {content: "► "; color:inherit;}
      
  span.pp_dropbtn:hover
      {background-color:#bbbcbd;}
  /* blue pages */
  .pp_navmob .blue > a
      {color:#0088ca;}
  .pp_navmob .blue > a:hover
      {color:#007294;}
  /* purple pages */
  .pp_navmob .purple > a
      {color:#8b55b7;}
  .pp_navmob .purple > a:hover
      {color:#8b55b7;}
  /* green pages */    
  .pp_navmob .green > a
      {color:#69c43a;}
  .pp_navmob .green > a:hover
      {color:#3f871a;}
  /* yellow pages */    
  .pp_navmob .yellow > a
      {color:#ffeb35;}
  .pp_navmob .yellow > a:hover
      {color:#ffeb35;}
  /* red pages */    
  .pp_navmob .red > a
      {color:#e22a67;}
  .pp_navmob .red > a:hover
      {color:#9d0a3b;}
  /* this page */
  /*.pp_navmob .pp_navthis > a
      {color:#fff;}*/

  /* quick edit bits... */
  div.pp_quickedit {text-decoration:none; display:block;}
  .pp_quickedit,
  .pp_quickedit .pp_itemStd,
  .pp_quickedit .pp_itemFold,
  .pp_quickedit .pp_itemTick,
  .pp_quickedit .pp_itemGallery,
  .pp_quickedit .pp_thumbs,
  .pp_quickedit .pp_itemRaw,
  .pp_quickedit h1,
  .pp_quickedit h2,
  .pp_quickedit h3
      {transition:background-color 0.2s, color 0.2s;}
  .pp_quickedit:hover,
  .pp_quickedit:hover .pp_itemStd,
  .pp_quickedit:hover .pp_itemFold,
  .pp_quickedit:hover .pp_itemTick,
  .pp_quickedit:hover .pp_itemGallery,
  .pp_quickedit:hover .pp_thumbs,
  .pp_quickedit:hover .pp_itemRaw,
  .pp_quickedit:hover h1,
  .pp_quickedit:hover h2,
  .pp_quickedit:hover h3
      {color:#046!important; background-color:#c6f5ff!important;
          background-image:none!important; cursor:crosshair;}
  .pp_quickedit:hover img  {opacity:0.5;}
  /* back to Panpage button.... */
  #pp_back          {display:block; position:fixed; left:3px; top:3px; padding:6px 12px;
                        text-decoration:none; opacity:1.0; transition:background-color 0.2s;
                        color:#046; border:solid 1px #046; background-color:#c6f5ff; border-radius:4px;}
  #pp_back:hover    {background-color:#76e7ff;}

/* Colour scheme...
 *
 *  White:            #fff;     body bkgnd
 *  Mid Grey:         #767778   body text
 *  Shadow grey:      #545558;
 *  Highlight grey:   #97999b;
 *  Pale grey:        #c2c4c6;  nav & body/footer bkgnd
 *
 *  Menu bkgnd colours...
 *
 *  Blue: #01b5eb;    Dark:   #00b0e5;  Light:   #17c9ff;
 *  Darker: #00a2d2;  Shadow: #007294;  Hilight: #95e7ff;
 *
 *  Purple: #8048ae;  Dark:   #743aa3;  Light:   #8b55b7;
 *  Darker: #521b7e;  Shadow: #411664;  Hilight: #af83d2;
 *
 *  Green:  #61ba34;  Dark:   #59ae2e;  Light:   #69c43a;
 *  Darker: #489a1e;  Shadow: #3f871a;  Hilight: #8cdb64;
 *
 *  Yellow: #ffe815;  Dark:   #efd700;  Light:   #ffeb35;
 *  Darker: #ead100;  Shadow: #dac300;  Hilight: #fff48e;
 *
 *  Red:    #d31d5a;  Dark:   #c91450;  Light:   #e22a67;
 *  Darker: #b6184d;  Shadow: #9d0a3b;  Hilight: #f16091;
 */