/* 
   IMPORTANT NOTICE
   This HTML5 and CSS layout is COPYRIGHT 2010-2024 Design215 Inc. 
   
   It MAY NOT be copied or used for any other web site without the express
   written permission of Design215 Inc. 954-630-3695 www.design215.com

   Design215.com CSS/110 stylesheet, v01.16.2010 
   for naturalpoolconversion.com, NEW SITE v06.18.2025, updated 06.22.2025 
   -----------------------------------------------------------------------------
   
      
   Page Defaults and CSS Fixes
   ----------------------------------------------------------------------------- 
*/
html {
  line-height: 1.15; 
  -webkit-text-size-adjust: 100%; 
}
html,body {
  text-align:center; margin:0; padding:0; height:100%;
  box-sizing:border-box;
}

::-moz-selection {
  background: #ffffcc; color:#000;
  text-shadow: none;
}
::selection {
  background: #ffffcc; color:#000;
  text-shadow: none;
}

/*
   Fonts
   ----------------------------------------------------------------------------- 
   Define all fonts for the entire site in this section. 
*/
body {
  font-family:'source_sans_proregular',arial,sans-serif; font-size:12px; color:#fff;
  background:#222;
}
p,dl,ul,ol,table td,pre.p2,.xtitle,div.navlinks {
  font-family:'source_sans_proregular',arial,sans-serif; font-size:15px; color:#fff;
  margin:2px 2px 2px 4px;
}
p.p2,p.caption {
  font-family:'source_sans_proregular',arial,sans-serif; font-size:16px; color:#fff;
  line-height:130%;
  margin:4px 8px 0 8px; padding:0;
}
p.p4,p.blog,ul.blist li {
  font-family:'source_sans_proregular',arial,helvetica,sans-serif; font-size:16px; color:#fff;
  line-height:140%; letter-spacing:1px; 
  margin:2px 8px 2px 8px;
}  
p.p5,p.c1,ul.alist li {
  font-family:'source_sans_proregular',arial,helvetica,sans-serif; font-size:16px; color:#ddd;
  line-height:150%; letter-spacing:1px;
  text-align:left;
  margin:2px 16px 2px 8px;
} 
p.c1 {
  font-size:20px;
} 
p.p6,p.quote {
  font-family:arial,helvetica,sans-serif; font-size:24px; color:#fff;
  line-height:160%; letter-spacing:1px; text-align:center;
}
p.postlist {
  line-height:120%;
}  
p.quote {
  font-size:24px; text-transform:uppercase; color:#000;
  text-align:center; padding:0 0 20px 0;
} 
div.phone p {
  font-family:'source_sans_proregular',arial,sans-serif; font-size:20px; font-weight:bold; color:#fff;
  letter-spacing:1px;
}
h3 {
  font-family:'source_sans_proregular',arial,sans-serif; font-size:20px; font-weight:bold; color:#ff7f00;
  margin:2px 8px 2px 8px; padding:0;
}
h2 {
  font-family:'source_sans_proregular',arial,sans-serif; font-size:20px; font-weight:bold; color:#fff;
  margin:2px 8px 2px 8px; padding:0;
  text-transform:uppercase; letter-spacing:2px;
}
#menu h2 {
  font-size:30px; color:#e4701e; margin:2px 2px 2px 0;
  font-variant:small-caps;
}
  
h1 {
  font-family:'source_sans_proregular',arial,sans-serif; 
  font-size:32px; color:#fff; font-weight:normal;
  margin:2px 8px 4px 8px; padding:0; 
  text-transform:uppercase; letter-spacing:1px;
  text-shadow:2px 2px 2px #000;
}
h1.minmargin {
  margin:4px;
}
h2.blog,h1.blog {
  text-transform:none; 
}
span.postdate {
  font-family:'Source Sans Pro',arial,helvetica,sans-serif; font-weight:700; 
  font-size:18px; line-height:18px; margin:0 0 0 8px;
  text-transform:uppercase; letter-spacing:1px;
}

.center {
  text-align:center;
}  

a.projname {
  font-family:'source_sans_proregular',arial,sans-serif; 
  font-size:14px; color:#fff; font-weight:bold;
  margin:0; padding:0; 
  text-transform:uppercase; letter-spacing:2px;
  text-shadow:2px 2px 2px #000;
}

span.price2 {
  font-family:arial,helvetica,sans-serif; font-size:16px; font-weight:bold; color:#000;
}
pre,code,div.xbox3,.ckBox,.boxBlur,.boxFocus,.formula {
  font-family:courier new,courier,monospace; font-size:12px; color:#009900;
}
#footer p,.xsmall {
  font-family:'source_sans_proregular',arial,sans-serif; font-size:14px; color:#666;
}
#footer p.xnav {
  font-family:'source_sans_proregular',arial,sans-serif; font-size:14px; color:#666;
}
.fbutton,ul.alist li,.spopup {
  font-family:arial,helvetica,sans-serif; font-size:14px;
}
p.disclaimer {
  font-family:arial,helvetica; font-size:11px;
  margin:4px 12px 0 4px; padding:0;
}
div.navlinks {
  font-family:arial,helvetica,sans-serif; font-size:14px;
}
div.L_xlocation p {
  font-family:arial,helvetica,sans-serif; font-size:14px;
  line-height:160%;
  margin:0 0 0 12px;
}

div.insta p,
div.tagline p {font-size:22px; color:#3f1b13;}


/* 
   Type Selectors
   ----------------------------------------------------------------------------- 
   Define the defaults for HTML elements in this section. 
*/

a {text-decoration:underline; font-weight:bold; color:#f0cb00; cursor:pointer;}

a:link,
a:visited {text-decoration:underline; font-weight:normal; color:#f0cb00;}
a:hover {text-decoration:underline; font-weight:normal; color:#fff;}

form {
  margin:0; padding:2px 0 0 4px;
}
img {
  margin:0; padding:0; border:0;
}
ol li {
  padding:2px 0 4px 0;
}
p {
  margin:2px 6px 2px 0; padding:0;  /* default is no left margin */
}
pre {
  margin:0; padding:0;
}
table {
  margin:2px 6px 2px 4px; padding:0;
}
table td {  /* eliminates the need for valign="top" */
  line-height:130%; 
  vertical-align:top;
}
table td.rt {  /* eliminates the need for align="right" */
  text-align:right;
}
table td.ct {  /* eliminates the need for align="center" */
  text-align:center;
}
ul {
  list-style:none;
  margin:4px 0 0 4px; padding:0;
}
ul li {
  margin:2px 0 10px 0; padding:1px 0 0 18px; width:98%;
  background:transparent url(images/bullet.png) 0 4px no-repeat;
}
  

form table { /* no left margin for tables inside forms */
  margin:2px 6px 2px 0; padding:0;
}


/* 
   Custom Styles
   ----------------------------------------------------------------------------- 
*/

/* menu links */
div.navlinks a,
div.navlinks2 a {
  display:block; position:absolute; width:120px; height:19px;
  font-family:'source_sans_proregular',arial,sans-serif; font-size:16px; 
  text-transform:uppercase; letter-spacing:1px; margin:0; padding:0;
  text-decoration:none; font-weight:bold; color:#fff;
}
div.navlinks a:link,
div.navlinks a:visited {text-decoration:none; font-weight:bold; color:#fff;}
div.navlinks a:hover {text-decoration:none; font-weight:bold; color:#f0cb00;}
div.navlinks2 a:link,
div.navlinks2 a:visited {text-decoration:none; font-weight:bold; color:#fff;}
div.navlinks2 a:hover {text-decoration:none; font-weight:bold; color:#f0cb00;}

div.navlinks span,
div.navlinks2 span {display:none;}

/*
  positions must be set using id, not class
  
*/
a#a2 {width:60px; left:25px;}  /* about */
a#a4 {width:86px; left:120px;}  /* listings */
a#a5 {width:92px; left:230px;}  /* contact */

/* mobile */
a#a12 {width:60px; left:25px;}  /* about */
a#a14 {width:86px; left:120px;}  /* listings */
a#a15 {width:92px; left:230px;}  /* contact */

p.postlist a {
  letter-spacing:normal;
}
  

/* footer links */
#footer a:link,
#footer a:visited {text-decoration:none; color:#f0cb00;}
#footer a:hover {text-decoration:underline; color:#aaa;}
  
/* W3C validation links */
#footer a.w3:link,
#footer a.w3:visited {text-decoration:none; color:#222;}
#footer a.w3:hover {text-decoration:none; color:#aaa;}


  /* Style for link "buttons" like "Save", "Go", etc */
  input.btn2 {
    line-height:20px; vertical-align:middle;
    letter-spacing:1px; color:#000; font-weight:bold;
    margin:0 1px 0 4px; padding:10px 14px 10px 14px; background:#f0cb00;
    border-radius:4px; border:0;
    cursor:pointer;
  }

  a.btn2 {
    letter-spacing:1px; color:#000; text-decoration:none; font-weight:bold;
    margin:0 1px -4px 4px; padding:10px 14px 10px 14px; background:#f0cb00;
    border-radius:4px;
    cursor:pointer;
  }
  a.btn2:link,
  a.btn2:visited {text-decoration:none; font-weight:bold; color:#000;}
  a.btn2:hover   {
    text-decoration:none; font-weight:bold; color:#fff; background:#00cc00;
  }

  /* Style for button once submitted */
  a.btnfade {
    letter-spacing:1px; color:#444;
    margin:0 1px 0 4px; padding:10px 14px 10px 14px; background:#2c2c2c;
    border-radius:4px;
  }
  a.btnfade:link,
  a.btnfade:visited {text-decoration:none; font-weight:400; color:#444;}
  a.btnfade:hover   {
    text-decoration:none; font-weight:400; color:#444; background:#2c2c2c;
  }

  a.copybtn {
    margin:0 0 0 40px;
  }

br.clr {
  clear:both;
}
br.nb { /* use on mobile */
  display:none; 
}

/* blog */  
div.postlink {
  max-width:90%;
  padding:0 0 20px 0;
}
  
/* Separators to clear column floats */
div.xclear {
  position:relative; clear:both; height:1px; line-height:1px; 
  margin:0; padding:0;
}
div.xclearline { /* content under columns */
  position:relative; clear:both; width:90%; line-height:3px;
  margin:0; padding:0;
}


div.xbox1 { /* forms boxes */
  width:90%; 
  padding:4px 8px 4px 8px; 
  border:solid 1px #aaaaaa; background:#ffffff;
}
div.ffield { /* form fields */
  position:relative; float:left; margin:0; padding:2px 12px 4px 0;
} 
div.xbox2 { /* outline box */
  width:90%;
  margin:0 0 0 4px; padding:8px 2px 8px 2px; 
  border:solid 1px #aaaaaa; background:#ffffff;
}
div#googlemap {
  width:96%; height:400px; margin:0; padding:0; 
  background:#444; color:#000; border:4px solid #fff;
  box-shadow:2px 2px 5px rgba(0,0,0,0.75);
}
div.vendormap { /* map on dealer locator */
  width:96%; height:400px; margin:0; padding:0;
  background:#444; color:#000; border:4px solid #fff;
  box-shadow:2px 2px 5px rgba(0,0,0,0.75);
}

div.ithumb {
  position:relative; display:inline-block; vertical-align:top;
  text-align:center; width:248px; height:130px;
  background:#222;  
  margin:2px 6px 10px 6px; padding:0; overflow:hidden;
}  
  div.ithumb img {
    border:4px solid #fff;
    max-width:99%;
  }

div.pthumb {
  position:relative; display:inline-block; vertical-align:top;
  text-align:center; width:248px; height:152px;
  background:#222;  
  margin:4px 6px 12px 6px; padding:0; overflow:hidden;
  border:2px solid #222;
}
  div.pthumb a {
    text-transform:uppercase; font-size:14px;  
  }
  div.pthumb a:link,
  div.pthumb a:visited {text-decoration:none; font-weight:normal; color:#fff;}
  div.pthumb a:hover {text-decoration:none; font-weight:normal; color:#ff7f00;}
  
  div.pthumb img {
    border:4px solid #fff;
    max-width:99%;
  }

div.tthumb { /* team */
  position:relative; display:inline-block; vertical-align:top;
  text-align:center; width:170px; height:240px;
  background:#222;  
  margin:4px 2px 4px 0; padding:0; overflow:hidden;
  border:2px solid #222;
}
  div.tthumb a {
    text-transform:uppercase; font-size:14px; letter-spacing:0.5px;  
  }
  div.tthumb a:link,
  div.tthumb a:visited {text-decoration:none; font-weight:normal; color:#fff;}
  div.tthumb a:hover {text-decoration:none; font-weight:normal; color:#ff7f00;}
  
  div.tthumb img {
    border:4px solid #fff;
    max-width:99%;
  }


/* Social media buttons under photos, etc. */
div.social {
  position:relative; float:left; height:35px; width:80px;
  margin:0; padding:0;
}
div.social2 {
  position:relative; float:left; height:35px; width:120px;
  margin:0; padding:0;
}
div.socialclear {
  position:relative; clear:both; width:120px; 
  margin:0; padding:0;
}  

img.xpic {
  margin:0; padding:0;
}
img.npic {
  width:80%; border:6px solid #fff;
  margin:4px 0 0 15%; padding:0;
}
img.xthumb {
  margin:8px 5px 15px 20px; padding:10px;
  background:#ffffff; border:solid 1px #ffffff;
}
img.menu {
  width:300px; border:4px solid #fff;
  margin:10px 0 0 12px; padding:0;
}
img.xleft {  /* left aligned image */
  float:left; margin:2px 10px 2px 0;
}
img.xright {  /* right aligned image */
  float:right; margin:2px 0 2px 10px;
}
img.social {
  margin:4px 10px 0 0;
}
/* resize images that are wider than their container */
p.p2 img,
p.p4 img,
p.p5 img,
p.blog img {
  max-width:98%;
}
span.imgtxt {
  display:block; max-width:620px;
}

div.photo_main {
  position:absolute;
  left:304px; top:38px;
}
div.img_border {
  position:absolute;
  left:12px; top:4px;
  z-index:95;
}

table.hours,
table.cater1,
table.cater2 {
  width:90%; margin:0; padding:0;
}
  table.cater1 h2 {
    padding:4px 0 12px 0;
    border-bottom:4px dotted #000;
  }
  table.cater2 td {
    margin:0; padding:4px 0 4px 0; border-bottom:2px dotted #000;
  }
  
img.zthumb {
  margin:2px 4px 4px 0; padding:0;
  border:4px solid #fff;
  box-shadow:2px 2px 5px rgba(0,0,0,0.75);
}
img.cthumb {
  margin:0 0 4px 0; padding:0;
  border:4px solid #ffffff;
}
img.tleft {  /* left aligned thumbnail with border */
  float:left; margin:2px 15px 2px 0;
  border:4px solid #ffffff;
}

img.zteam {
  max-width:96%;
  margin:4px 4px 4px 0; padding:0;
  border:6px solid #fff;
  box-shadow:2px 2px 5px rgba(0,0,0,0.75);
}
img.ownerpic {
  width:200px; float:left;
  margin:4px 12px 4px 0; padding:0;
  border:6px solid #fff;
  box-shadow:2px 2px 5px rgba(0,0,0,0.75);
}


label.noshow,
h1.noshow,
h2.noshow,
span.tt,
span.noshow {display:none;}

p.c1 { /* centered */
  text-align:center; line-height:normal;
  margin:2px 6px 2px 4px; padding:0;
}
p.p1 { /* normal line height for narrow columns */
  line-height:110%;
  margin:2px 6px 2px 4px; padding:0;
}
p.location {
  line-height:130%;
  margin:4px 6px 0 4px; padding:0 0 0 12px;
}
p.p3 { /* normal right margin */
  line-height:150%;
  margin:4px 10px 0 4px; padding:0;
}
p.n1 { /* justified column like a newspaper */
  font-size:10px;
  margin:4px 2px 0 4px; padding:0; text-align:justify;
}
p.n2 { /* right column with vertical dashed line */
  font-size:10px;
  margin:0; padding:4px 2px 0 4px; border-left:1px dashed #aaaaaa;
}
p.r1 { /* used for the last updated date on links.php */
  text-align:right;
  line-height:normal;
  margin:-14px 2px 4px 0; padding:0;
}
p.r2 {
  text-align:right;
  line-height:150%;
  margin:4px 4px 4px 4px; padding:0;
}
p.nav {
  line-height:150%;
  color:#aaaaaa;
}

p.p5 img,
p.p2 img {
  max-width:98%;
}


#pagehead h1,#pagehead h2 {
  display:none;
}
#pagehead p {
  display:inline;
  text-align:left;
}
#footer p {
  position:relative;
  text-align:center; margin:8px 0 0 0; padding:0;
}
#footer p.xnav {
  position:relative;
  text-align:center; margin:0; padding:0;
}
  
pre.p2 {
  line-height:150%;
  margin:4px 4px 0 4px; padding:0;
}

table.t1 { /* no left margin */
  margin:2px 6px 2px 0; padding:0;
}
table.t2 {
  width:94%;
}
table.t3 {
  width:350px;
}

ul.alist {
}
ul.alist li {
  margin:2px 0 10px 8px; padding:1px 0 0 24px; width:98%;
  background:transparent url(images/mmbullet.png) 0 6px no-repeat;
}

span.bt {
  position:relative;
  display:inline-block;
  width:16px; height:16px;
  vertical-align:middle;
  background:transparent url(images/bullet2.png) no-repeat;
}
  
ul.clist {
  width:90%;
}
ul.clist li {
  margin:2px 0 10px 0; padding:1px 0 4px 28px; width:98%;
  background:transparent url(images/checkmark.png) 0 4px no-repeat;
}
  

/* Form fields */
.ckBox { /* checkboxes */
  margin:1px; padding:0;
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"] {
  vertical-align:top;
  margin-bottom:8px;
  /* max-width:60%; */
}
textarea {
  max-width:98%;
}
  
.boxBlur,
.boxBlurDisable,
.boxBlur:focus,.boxFocus,
.boxBlurR,
.boxBlurR:focus,.boxFocusR,
.boxError,
.boxRequired,.boxRequired:focus,
.boxClear {
  font-family:verdana,helvetica,sans-serif; font-size:22px; 
  padding:8px;
}
  
.boxBlur {
  border:1px solid #aaa; color:#000; background:#eee;
}
.boxBlurDisable {
  border:1px solid #555; color:#444; background:#aaa;
}
.boxBlur:focus,.boxFocus {
  border:1px solid #aaa; color:#000; background:#ffffcc;
}
.boxBlurR {
  border:1px solid #555; color:#ccff66; background:#212121;
  text-align:right;
}
.boxBlurR:focus,.boxFocusR {
  border:1px solid #ccff66; color:#fff; background:#003300;
  text-align:right;
}
  .boxError,.boxErrorR {
    border:1px solid #ff0000; background:#ffcccc; 
  }
  .boxErrorR {
    text-align:right;
  }
  .boxRequired,.boxRequiredR {
    border:1px solid #ff0000; color:#000; background:#eee; 
  }
  .boxRequiredR {
    text-align:right; 
  }
  .boxRequired:focus,.boxRequiredR:focus {
    border:1px solid #ff0000; color:#000; background:#ffffcc; 
  }
  .boxRrequiredR:focus {
    text-align:right;
  }
  .boxDisable {
    display:none;
  }
  .boxHidden {
    visibility:hidden;
  }
  .boxClear {
    text-align:right;
    border:1px solid #000; color:#fff; background:#212121;
  }
  

/* Form fields generated by makeFormField()  */
div.formfield {
  position:relative; display:inline-block; vertical-align:top;
  text-align:left; min-width:50px;
  margin:0 10px 15px 8px; padding:0;
}
div.formfield label,
div.formfield p,
div.formfield p b {
  font-weight:normal; color:#fff;
}
p.charcount {
  position:absolute; width:80px; top:0px; right:4px;
  text-align:right; margin:0; padding:0;
}
 
 
/* contact form "required" */
p.cfreq {
  font-size:95%;
  padding:0 0 0 8px; margin:0;
}
span.cfreq {
  position:relative;
  font-weight:bold; color:#f00; 
}
/* contact/guestbook forms */
div.cfmsg,
#cf1,
#cf2,
#cf6,
#cf7,
#cf15,
#cf17 {
  width:80%; max-width:420px;
}
#cf12 {
  width:100%;
} 

  
.hdate { /* dates under H2 headings (articles, etc) */
  position:relative; display:inline-block; font-size:16px; color:#ffcc00;
  margin:0 10px 4px 4px; padding:2px;
}
.sm {position:relative; top:-4px; font-size:9px; font-weight:normal;} /* service mark (sm) */
.super {position:relative; top:-4px; font-size:10px;} /* superscript */

.xred {color:#ff0000;} /* form errors */
.xword {font-weight:bold; color:#dddddd;}

.nbox {  /* remaining characters field */ 
  text-align:right; width:250px;
  border:0; color:#000000; background:transparent;
}

span.st2,
span.st7 {
  display:none;
}


/* 
   Containers for this layout
   -----------------------------------------------------------------------------
*/

#pagehead {
  position:fixed; left:0; top:0; height:72px; width:100%;
  text-align:left; margin:0; padding:0;
  overflow:visible; z-index:96; /* must be less than drop menu z-index */
}
  #headerbox {
    background:rgba(0,0,0,0.6);
    position:relative; min-width:480px; height:44px;
    text-align:center; margin:0; padding:0;
  }
    div.navbar {  /* width and height necessary for image replacement */
      position:absolute; top:8px; left:10px; width:198px; height:72px;
      text-align:center; margin:0; padding:0;
    }
    /* DIVs for navigation links */
    div.navlinks {
      position:absolute; top:12px; left:220px; width:500px; height:30px;
      text-align:left; margin:0; padding:0;
    }
    div.navlinks2 {
      display:none;  /* mobile navbar */
      position:absolute; top:12px; left:220px; width:500px; height:30px;
      text-align:left; margin:0; padding:0;
    }
    div.navlinks div,
    div.navlinks2 div {
      margin:0; padding:0; 
    }
    div.phone {
      position:absolute; top:10px; right:18px; width:180px; height:34px;
      text-align:right; margin:0; padding:0;
    }
      div.phone p {
        margin:0; padding:0;
      }

#headpic {
  position:relative; left:0; top:0; height:400px; width:100%;
  text-align:left; margin:0 0 10px 0; padding:50px 0 0 0;
}  
  
#container {
  position:relative; min-height:100%;
  text-align:center; margin:0; padding:0;
}
  /* Page body, full width of container */
  #pagebody {
    position:relative; 
    text-align:left; margin:0; padding:0;
  }
    /* Full width container CLASS for full width backgrounds */
    div.contentbg {
      position:relative; width:100%;
      text-align:left; margin:0; padding:0;
    }
      /* Inner content box for centered, fixed width content */
      div.contentbox {
        position:relative; max-width:980px;
        text-align:left; margin:0 auto 0 auto; padding:0;
      }
      div.contentbox2 {
        display:flex; flex-flow:row wrap; justify-content:center; 
        margin:0; padding:0;
      }
          
    /* exceptions */
    div.L_full2 {
      position:relative;
      width:100%; max-width:1000px; 
      margin:0 auto 60px auto; padding:0;
    }
           

    /* Footer, extends to bottom edge of window */
    #footer {
      position:relative; width:100%; height:120px; min-width:480px; left:0px; bottom:0px;
      text-align:center; margin:0; padding:25px 0 25px 0;
      background:#000;
    }

/* 
   Page specific styles
   -----------------------------------------------------------------------------
*/

div.ctitle,
div.ctitle2 {
  position:relative; text-align:center;
  margin:0 4px 0 4px; padding:0 0 20px 0; overflow:hidden;
}
  div.ctitle img {max-width:100%; height:auto;}
  
div.ntitle {
  position:relative; text-align:left;
  margin:0; padding:0 0 10px 0;
}
  div.ctitle h1,
  div.ntitle h1,
  div.ctitle h2,
  div.ntitle h2 {display:none;}
  div.ctitle img,
  div.ntitle img {margin:0; padding:0;}
  
div.C_small,
div.C_small2,
div.C_small3,
div.C_med { /* centered column that wraps @ min-width */
  position:relative; display:inline-block; vertical-align:top;
  text-align:left; max-width:620px; min-width:470px;
  margin:0 4px 0 4px; padding:0; overflow:hidden;
}
div.C_small2 {
  border-left:6px solid #c3cd4e; padding:0 0 0 20px;
}
div.C_small3 {
  max-width:300px; min-width:300px;
}
div.C_med {
  width:65%; max-width:650px;
}

/* flex group 2 - 70%, 1000px + 12px between */
div.C_small {
  position:relative; flex:45%; align-self:flex-start;
  max-width:750px; margin:0 0 4px 0; padding:0;
}
div.C_large {
  position:relative; flex:97%; align-self:flex-start;
  max-width:1000px; margin:0 4px 4px 4px; padding:0; 
  overflow:hidden;
}
div.C_flex {
  position:relative; flex:75%; align-self:flex-start;
  max-width:700px; margin:0 4px 4px 4px; padding:0;
}
div.C_flex1 {
  position:relative; flex:75%; align-self:flex-start; order:2;
  max-width:700px; margin:0 0 4px 0; padding:0;
}
div.C_flex2 {
  position:relative; flex:15%; align-self:flex-start; order:3;
  max-width:200px; min-width:200px; margin:4px 4px 4px 20px; /* 20px between cols when used as right sidebar */
}
div.C_flex3 {
  position:relative; flex:25%; align-self:flex-start; order:1;
  max-width:270px; min-width:270px; margin:4px 20px 4px 4px; /* 20px between cols when used as left sidebar */
}
div.C_flex4 {
  position:relative; flex:25%; align-self:flex-start; order:1;
  max-width:250px; min-width:250px; margin:4px 20px 4px 4px; /* 20px between cols when used as left sidebar */
}

div.tagline {
  text-align:center; padding:60px 0 40px 0;
  overflow:hidden;
}
  
#pag_home div.L_xsmall {width:320px;}
#pag_home div.L_small {width:360px;}

#pag_home #container {
  /* min-height:500px; */
}
#pag_home #pagehead {
  height:44px;
}
#pag_home #pagebody {
  padding:0;
}
#pag_home #headpic {
  display:none;
}

#fullphoto {
  position:relative; width:100%;
  margin:0; padding:0; 
  text-align:center;
  background:#111;
  overflow:hidden;
}
#fullphoto img.leafpic {
  width:100%; margin:0; padding:0;
}
#photocredit {
  position:absolute; width:100%;
  left:0px; top:90px; margin:0; padding:0;
  z-index:95;
}
#photocredit img.slidecover {
  width:100%;
}

#mainphoto {
  position:relative;
  margin:0; padding:0; 
  text-align:center;
  overflow:hidden;
}
  #mainphoto img {
    width:auto; height:auto; max-height:100vh; max-width:100%; margin:0; padding:0;
  }
  #mainphoto img.port {
    width:auto; height:auto; max-height:100vh; max-width:100%; margin:0; padding:0;
  }

#imgprev {
  position:absolute; left:15px; top:50%; width:50px; height:100px; margin:-50px 0 0 0;
  z-index:98;
}
#imgnext {
  position:absolute; right:15px; top:50%; width:50px; height:100px; margin:-50px 0 0 0;
  z-index:98;
}
#imgprev a,
#imgnext a {
  font-family:arial,sans-serif;
  display:block; padding:30px 20px 30px 10px;
  border-radius:4px; font-size:30px;
}
#imgprev a:link,
#imgprev a:visited,
#imgnext a:link,
#imgnext a:visited {
  text-decoration:none; font-weight:bold; color:rgba(255,255,255,0.8); background:rgba(0,0,0,0.2);
  border:1px solid rgba(0,0,0,0.2);
}
#imgprev a:hover,
#imgnext a:hover {
  text-decoration:none; font-weight:bold; color:rgba(255,255,255,1); background:rgba(0,0,0,0.6); 
  border:1px solid rgba(255,255,255,1);
}

#xthumb1 {
  padding:0 0 0 10px;
}
#thumbbar {
  position:relative; max-height:150px; 
  overflow-x:auto; overflow-y:hidden;
  text-align:center;
  padding:4px;
  white-space:nowrap;
}
  

#pag_404 #headpic {
  background:transparent url(images/mm-header9514.jpg) center center;
  background-size:cover;
}
#pag_contact #headpic,
#pag_about #headpic,
#pag_article #headpic,
#pag_gallery #headpic,
#pag_image #headpic,
#pag_sitemap #headpic,
#pag_profile #headpic,
#pag_blog #headpic,
#pag_blogpost #headpic {
  background:none;
  height:60px;
}

div#slogan div {
  position:relative; text-align:center; vertical-align:middle;
  margin:0; padding:0;
}
 
#menu div.ctitle {
  padding:20px 0 20px 0;
}
#madefresh {
  padding:40px 0 60px 0;
}

#infobar div.contentbox {
  max-width:960px;
}
          
#pag_image div.L_small {width:420px;}
#pag_image div.L_xsmall {width:320px;}    

#categories {
  min-height:400px;
}

/* Content Backgrounds */
.paper {
  color:#000;
  background:transparent url(images/paperbg.jpg) left top repeat;
}
.orange {
  color:#fff;
  background:#e4701e;
}
.orange p {color:#000;}

.green {
  background:#c3cd4e;
}
.green div p {color:#fff;}

.black {
  background:#111;
}
.about1 {
  background:#222;
}
.bg-cover { 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.fullpic img {
  width:100%; margin:0; padding:0; 
  vertical-align:top; /* gets rid of "mystery space" */
}

/* Tables used for charts */
.gray1 {background:#aaaaaa;}
table.gray1 td {background:#ffffff;}
table.gray1 td.ht1 {background:#eeeeee;}  /* td hightlight */
table.gray1 td.ht2 {background:#eeeeff;}  /* td hightlight */
table.gray1 h2 {margin:0;}

/* Design215 Guestbook/Comments v01.27.06 */
.xguest {  /* outside table */
  width:640px; margin:0;
}
table.xguest table {
  margin:0;
}
table.xtopics {
  width:90%; 
  margin:0 0 0 12px;
}
table.xtopics td {
  width:auto;
  margin:0 10px 0 0;
}
table.xtopics td p {
  margin:0 10px 0 0;
  border-bottom:1px dashed #888888;
} 

p.gb1 {
  font-family:verdana,helvetica,sans-serif; font-size:11px;  color:#ffdf4d;
  margin:2px 2px 0 12px; padding:0;
}

.gbox {  /* remaining characters field, guestbook */ 
  text-align:right; width:320px;
  border:0; color:#aaaaaa; background:transparent;
}
.cbox {  /* remaining characters field, comments */ 
  width:250px;
  border:0; color:#aaaaaa; background:transparent;
}
.guestErr {
  font-weight:bold; color:#ff8800; 
}
.gline { /* user entries separator */
  position:relative; display:block; line-height:4px;
  margin:0 20px 4px 20px; padding:0;
  border-bottom:1px dashed #888888;
}
.xquote1 {
  font-family:serif; font-size:12px; color:#274627;
  background:transparent url(/images/quote1.gif) no-repeat;
  padding:0 0 0 8px;
}
.xquote2 {
  font-family:serif; font-size:12px; color:#274627;
  background:transparent url(/images/quote2.gif) no-repeat;
  padding:0 0 0 8px; margin:0 0 0 2px;
}
p.gst1 {margin:4px 0 8px 12px; font-size:11px; color:#000000; line-height:120%;}
p.gst2 {margin:4px 60px 0 12px; font-size:11px; color:#000000; line-height:130%;}


/* Design215 Slideshow, index.php */
#pag_home #xssw1,
#pag_home #xssw2 {
  /* 2012 update: opacity set with css on slideshow page */
  position:absolute; visibility:hidden;
  background:transparent;
  margin:0; padding:0;
  text-align:center; /* slideshow image will be centered in the div */
  width:100%; /* div will be the full width of its container */ 
}
#pag_home #xssw1 img,
#pag_home #xssw2 img {
  width:100%;
}
#pag_home #xslidetext,
#pag_home #xslidenum ,
#pag_home #slidecontrols {
  display:none;
}


/* Design215 Drop Menu, v11.22.2012 */
#xtooltip {
  position:absolute; left:-200px; top:5px; z-index:98;
  margin:0; padding:0 0 7px 0;
  background:transparent url(images/tooltip_pointer.png) 14px bottom no-repeat;
}
#xtooltip p.tt1,
#xtooltip p.tt2 {
  color:#ffffff; text-align:left; margin:0; padding:6px 8px 8px 8px;
  font-family:arial,helvetica,sans-serif; font-size:14px;
  background:transparent url(images/tooltip.png);
  border-radius:4px; border:2px solid #000000;
}

#menu1 {  /* mobile menu */
  position:fixed; visibility:hidden; z-index:99;
  width:320px; left:-999em; /* removes the extra vertical space from the long menu */
  background:rgba(0,0,0,0.8); color:#fff; padding:4px;
  border-radius:2px; border:1px solid #666;
  box-shadow:8px 8px 24px rgba(0,0,0,0.5);
}
#menu1 p {
  width:100%; /* necessary for IE7 or menu height bug */
  margin:0; padding:4px 4px 2px 4px;
}
#menu1 p span {
  display:none;
}
  /* Fix 2px whitespace under images, 04.14.2015 */
  div.dropx img,div.dropz img {
    vertical-align:top;
  }

  div.dropx {
    text-align:left;
    margin:0; padding:0;
  }
  #menu1 a {
    font-family:'source_sans_proregular',arial,sans-serif; font-size:22px; 
    position:relative; display:block; height:22px;
    font-weight:bold; color:#ffffff; text-transform:uppercase;
    margin:0 16px 0 6px; padding:16px 3px 16px 12px;
    border-bottom:1px dotted #666;
  }
  #menu1 a:link,
  #menu1 a:visited {text-decoration:none; color:#ccc;}
  #menu1 a:hover {
    text-decoration:none; color:#000; background:#f0cb00;
  }

#menu2,#menu3,#menu4 {
  position:fixed; visibility:hidden; z-index:99;
}
#menu2 {width:186px;} /* about */
#menu3 {width:240px;} /* blog */
#menu4 {width:186px;} /* listings */

#menu2 p,#menu3 p,#menu4 p {
  width:100%; /* necessary for IE7 or menu height bug */
  background:rgba(0,0,0,0.8);
  margin:0; padding:6px;
}

  div.dropx {
    text-align:left;
    margin:0; padding:0;
  }
  div.dropx a {
    font-family:'source_sans_proregular',arial,sans-serif; font-size:16px; 
    letter-spacing:1px;
    position:relative; display:block; height:16px;
    font-weight:bold; color:#ffffff; text-transform:uppercase;
    margin:0; padding:16px 3px 16px 12px;
  }
  div.dropx a:link,
  div.dropx a:visited {text-decoration:none; color:#ccc;}
  div.dropx a:hover {
    text-decoration:none; color:#000; background:#f0cb00;
  }
div.xclearmenu { /* content under columns */
  position:relative; clear:both; width:400px; 
  margin:0; padding:0;
}

  
/* replace or resize images */

img.rp50 { /* small footer logo v12.29.2009 */
  position:relative; margin:-12px 0 0 0; top:12px;
}

@media only screen and (max-width:1000px) {
  /* Style adjustments for viewports that meet the condition */
  #slogan,
  h1 span,
  div.phone,
  div.navlinks {
    display:none;
  }
  div.navlinks2 {
    display:block;
    left:130px; top:16px;
  }
  #pag_home #container { /* add padding to move slideshow below navbar */
    padding:52px 0 0 0;
    min-height:100%;
  }
  #pagehead {
    height:60px;
  }
  #headerbox {
    height:52px;
  }
  #headpic {
    height:200px;
  }
  #fullphoto {
    top:52px;
  }
  #pagebody {
    padding:0;
  }
  div.contentbg {
    width:auto; 
  }
  div.contentbox {
    width:80%; max-width:98%; min-width:480px;
  }
  #footer {
    position:relative;
  }
  #pag_blogpost #headpic,
  #pag_gallery #headpic,
  #pag_image #headpic,
  #pag_profile #headpic {
    height:10px;
  }
  #pag_blogpost div.C_flex,
  #pag_blogpost div.C_flex1 {
    max-width:800px;
  }
  #pag_blogpost div.C_flex3 {
    order:3;
    max-width:740px; margin:0 0 4px 0; padding:0;
  }
  div.mobilemenu {
    display:none; top:6px;
  }
  div.socialicons {
    top:64px;
  }
  div.navbar {
    display:block; position:relative; width:140px; left:0; top:0px;
    margin:0; text-align:left;
  }
  div.navbar img {
    width:120px;
  }
  form#newsletter #email {
    width:130px;
  }
  div.C_small2 {
    border-left:none; padding:40px 0 0 0;
  }
  div.C_small3 {
    max-width:620px; min-width:470px;
  }
  div.pthumb {
    width:200px;
  }
    div.pthumb img {
      max-width:192px; height:auto; max-height:96px;
    }
  div.ithumb {
    width:200px;
  }
    div.ithumb img {
      max-width:192px; height:auto; max-height:96px;
    }
  img.zthumb {
    width:138px;
  }
  img.ownerpic {
    width:150px;
  }
  div.art img {
    background:none; padding:0;
  }
  #mainphoto {
    height:100%;
  }
  #imgprev {
    display:none;
    position:absolute; left:5px; top:30%; width:50px;
  }
  #imgnext {
    display:none;
    position:absolute; right:5px; top:30%; width:50px;
  }
  .be1,.be2 {
    font-size:70px;
  }
  h1 {
    font-size:26px;
  }
  p.p5,
  p.blog,
  p.p6,
  p.quote {
    font-size:18px;
    line-height:1.5; /* recommended */
    margin:0 16px 0 8px;
  }
  p.caption {
    font-size:18px;
  }
  br.nb {display:block;}
}

@media all and (orientation:landscape) and (max-width:640px) {
  #pagehead,#menu1 {
    position:absolute;
  }
}