@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');
 /*
  * Panpage Multi-Colour Theme: 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... */
  html {
    color:#eee;
    background-color:#245184;
    }
  
  body {
    font-family:"Open Sans", sans-serif;   /* font for ALL text unless otherwise specified */
    font-weight:300;
    font-size:12pt;
    } 
  .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 */
    background-color:#fff;
    color:#333;
    }
  .band#mainpic,
  .band#pp_foot {
    color:#eee;
    background-color:#245184;
    }  
  #banner {
    position:fixed;
    top:0;
    background-color:transparent;
    background-image:url("bannerbkgnd.png");  /* bkgnd white with drop shadow */
    background-repeat:repeat-x;           
    background-position:bottom;               /* shadow is visible if banner shrinks */
    line-height:0;   
    }
  #banner .pp_item,
  #below-banner .pp_item {
    line-height:0;                            /* avoid spurious vertical space at top */
    margin:0 0 35px 0;;
    text-align:left;
    }
  #banner .pp_item img,
  #below-banner .pp_item img {
    max-width:30%;
    margin:6px 0;
    }   
  #below-banner {
    visibility:hidden;    /* push remainder of page below banner */
    }   
  .section {
    text-align:left;      /* content is generally left aligned */   
    margin:0 auto;        /* auto centers a .section within a .band */
    width: 100%;          /* images can be full width */
    }
  .section.centered {  
    margin:0 auto;        /* auto centers a .section within a .band */
    width: 98%;           /* images can be full width */
    max-width: 1008px;    /* keep text to reasonable width */
    }

  /* column in layered layout... */
  .pp_col {
    float:left; 
    width:100%; 
    margin:0; 
    clear:left;
    }
  /* items in layered layout... */
  .itemSingle    {float:left;  width:100%; clear:left;}
  .itemLeftof2   {float:left;  width:46%; margin-right:4%; clear:left;}
  .itemRightof2  {float:right; width:46%; margin-left:4%;  clear:right;}
  /* items with spaced apart images (margin 12px top & btm) */
  .m12 img {
    max-width:92%;
    margin:12px 4%;
    }

  /* page content... */
  h1, h2, h3 {
    color:#555;
    font-weight:400;
    }
  h1 a, h2 a, h3 a {
    text-decoration:none;
    }
  h1 {
    font-size:2.5em;
    margin:24px 0 6px 0;
    }
  h2 {
    font-size:1.5em;
    margin:15px 0 3px 0;
    }
  h3 {
    font-size:1.2em;
    margin:12px 0 0 0;
    }
  p {
    font-size:1.05em;
    margin:9px 0 0 0;
    }
  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 images don'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;
    color:#245184;                /* rgb(36, 81, 132);*/
    text-decoration:none;
    }
  a:hover {
    color:#122942;
    }  

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


  /* 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 */


  /* footer... */
  #pp_foot {
    font-size:0.8em;
    text-align:left;
    padding-bottom:36px;
    padding-top:9px;
    }
  #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   {color:#eee}
  #pp_foot a:hover {color:#fff}
  #pp_foot #byeline a {text-decoration:none;}

  /* small screen tweaks... */
  @media screen and (max-width:819px)
    {
    .itemSingle,
    .itemLeftof2,
    .itemRightof2 {
      float:left;
      width:96%;
      margin-left:2%;
      margin-right:2%;
      clear:left;
      }
    /* items with spaced apart images (margin 12px top & btm) */
    .m12 img {
      max-width:92%;
      margin:12px 4%;
      }
    .only-large {
      display:none;
      }
    .we-move {
      max-width:30%;
      }
    #foot-right {
      text-align:left;
      padding-top:12px;
      }  
    }
  /* large screen tweaks... */
  @media screen and (min-width:820px)
    {
    .only-small {
      display:none;
      }
    #foot-right {
      text-align:right;
      }  
    }