@charset "UTF-8";

* {
  outline: none; 
  box-sizing: border-box;
  }

body 
{
 background: #888;
 background: var(--body-back-color);
 color: #000;
 color: var(--body-text-color); 
 font: 0.875rem Verdana, sans-serif;
}

h1 {font-family: Georgia, serif; font-weight: normal; font-size: 180%; text-indent: 0.3rem;  
   margin: 0.3rem auto 0 0.3rem; padding: 0;
   text-shadow: #0007 0.2rem 0.2rem 0.3rem;
   text-shadow: var(--dark-shadow) 0.2rem 0.2rem 0.3rem; }
h2 {font-family: Verdana, sans-serif; font-weight: normal; font-size: 120%; text-indent: 0.3rem; 
   margin: 0 auto 0.5rem 0.3rem; padding: 0 0 0.3rem 0;
   border-bottom: solid 1px #eee;
   border-bottom: solid 1px var(--lite-bdr-color); }
h3 {font-family: Georgia, serif; font-weight: normal; font-size: 150%; 
   margin: 0.3rem auto 0.5rem 0; padding: 0;}
h4 {font-family: Georgia, serif; font-weight: normal; font-size: 135%; 
   margin: 0 auto 0 auto; padding: 0;}

ul {
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  }

.main a:link 
   {
   transition: 150ms ease-in-out; 
   color: #07e;
   color: var(--alink-text-color); 
   text-shadow: none; 
   text-decoration: underline;
   }

.main a:visited    
   {
   color: #07e;
   color: var(--alink-text-color); 
   text-shadow: none; 
   text-decoration: underline;
   }

.main a:hover 
   {
   color: #077;
   color: var(--alink-hover-color); 
   text-shadow: #077c 1px 0 0; 
   text-shadow: var(--alink-shadow) 1px 0 0; 
   text-decoration: underline;
   }

.clearfloat
   {
    clear: both;
   }

.singlephoto 
   {
     width: 95%;
     clear: both;
     background: #ddd;
     background: var(--rightbox-back-color);
     margin: 0.5rem auto 0.5rem auto;
     box-shadow: 0 0 0.9rem #0007;
     box-shadow: 0 0 0.9rem var(--dark-shadow);
   }

.singlepara 
   {
     width: 95%;
     clear: both;
     background: #ddd;
     background: var(--rightbox-back-color);
     margin: 1.8rem auto 1.8rem auto;
     padding: 0.2rem 0.5rem;
     box-shadow: 0 0 0.9rem #0007;
     box-shadow: 0 0 0.9rem var(--dark-shadow);
   }


iframe
   {
     width: 90%;
     height: 15rem;
     margin: 1.8rem auto 1.8rem auto;
     box-shadow: 0 0 0.9rem #0007;
     box-shadow: 0 0 0.9rem var(--dark-shadow);
     border: 1px solid #000;
     border: 1px solid var(--dark-bdr-color);
   }

.gallery-item
    {
    float: left; 
    width: 11rem; 
    height: 8rem; 
    overflow: hidden; 
    margin: 0px;
    padding: 0px;
    border: none;
    }

.gallery-item img
    {
    width: 98%;
    height: auto; 
    /*border: 1px solid #000;*/
    }


blockquote {
  background: #eee;
  color: #222;
  border-left: 10px solid darkkhaki;
  margin: 1.5rem 0.7rem;
  padding: 0.5rem 0.7rem;
}

blockquote:before {
  color: darkkhaki;
  content: "\201C";
  font-family: Georgia, serif;
  font-size: 4.0rem;
  line-height: 0.1rem;
  margin-right: 0.25rem;
  vertical-align: -1.8rem;
}

/* .addr 
  {
  background: ----;
  width: 70%;
  border: 1px solid ----;
  font-size: 120%;
  margin: 1.25rem auto 1.25rem 4.0rem;
  padding: 0.5rem;
  white-space: pre;
  }  */

div.comx
  {
  background: #ddd;
  background: var(--rightbox-back-color);
  width: 90%;
  box-shadow: 0 0 0.125rem #0007;
  box-shadow: 0 0 0.125rem var(--dark-shadow);
  border-radius: 0.25rem;
  margin:0.3rem auto 0.6rem auto;
  padding:0.3rem;
  }

div.comx .auth
  {
  text-align: left;
  }

div.comx .date
  {
  float: right;
  }

div.comx .post
  {
  font-size: 90%;
  top: 3.5rem;
  margin: 0.5rem;
  }


a.llk:link 
    {
    color: #999;
    color: var(--llk-text-color); 
    text-shadow: none; 
    text-decoration: underline;
    }

a.llk:visited 
    {
    color: #999;
    color: var(--llk-text-color); 
    text-shadow: none; 
    text-decoration: underline;
    }

a.llk:hover 
    {
    transition: 150ms ease-in-out;
    color: #777;
    color: var(--llk-hover-color); 
    text-shadow: #0007 1px 0 0; 
    text-shadow: var(--dark-shadow) 1px 0 0; 
    text-decoration: underline;
    }

a.wwk:link 
    {
    color: #38a;
    color: var(--wwk-text-color); 
    text-shadow: none; 
    text-decoration: underline;
    }

a.wwk:visited 
    {
    color: #3ab; 
    color: var(--wwk-text-color); 
    text-shadow: none; 
    text-decoration: underline;
    }

a.wwk:hover 
    {
    transition: 150ms ease-in-out;
    color: #9bb; 
    color: var(--wwk-hover-color); 
    text-shadow: #fff7 1px 0 0; 
    text-shadow: var(--bright-halo) 1px 0 0; 
    text-decoration: underline;
    }


#mainbox {
   background: #fff;
   background: var(--mainbox-back-color);
   width: 100%;
   min-width: 20rem;
   max-width: 150rem;
   border: none;
   margin: 0.9rem auto 0 auto;
   border-radius: 0.5rem;
   }

#menuback {
   height: 0rem;
   width: 100%;
   background: #000;
   background: var(--menu-back-color);
   }

.clockwk-logo {
   display: block;
   float:right; 
   margin:5px;
  }

@media screen and (max-width: 750px) {
   .clockwk-logo {display: none;}
   }

#leftpane {
  display: none;            /* leftpane turned OFF by default */
  width: 0%;
  background: #eee;
  color: #000;
  background: var(--leftpane-back-color);
  color: var(--leftpane-text-color);
  left: 0;
  float: left;
  clear: left;
  padding:0.2rem;
  }

#leftpane img {
  width: 92%;
  margin: 0 auto 0.3rem auto;
  float: left;
  }

#centerpane
  {
  margin: 0.9rem 0 0.3rem 0;
  background: #fff;
  color: #000;
  background: var(--centerpane-back-color);
  color: var(--centerpane-text-color);
  width: 70%;
  padding: 0.3rem 0.6rem 0.3rem 0.9rem;
  overflow: auto;
  }

#rightpane
  {
  background: #f9f9f9;
  color: #000;
  background: var(--rightpane-back-color);
  color: var(--rightpane-text-color);
  width: 29%;
  min-width: 6rem;
  float: left;
  padding: 0.5rem;
  overflow: auto;
  }

.togb img
      {
      border: 0.125rem solid 000;
      border: 0.125rem solid var(--tog-bdr-color);
      transition: border 300ms ease-in-out;
      }

.togb:hover img 
      {
      border: 0.125rem solid 000;
      border: 0.125rem solid var(--alttog-bdr-color);
      }

#rightpane ul {
  list-style-type: square;
  /* list-style-position: inside; */
  padding-left: 0.5rem;
  margin: 0 0.3rem 0 0;
  }

.rightbox {
  float: left;
  background: #ddd;
  background: var(--rightbox-back-color);
  width: 95%;
  max-width: 18rem;
  min-width: 6rem;
  min-height: 4rem;
  padding: 0.5rem 1.0rem 0.5rem 1.0rem;
  margin: 0.75rem 0.5rem 0.75rem 0.5rem;
  border: 1px solid #000;
  border: 1px solid var(--dark-bdr-color);
  border-radius: 0.5rem;
  box-shadow: 0 0 0.9rem #0007;
  box-shadow: 0 0 0.9rem var(--dark-shadow);
  }

.rightbox .openicon {
  padding: 0.5rem 0.25rem;
  display: none;
}

#foot {
  background: #ddd;
  background: var(--rightbox-back-color);
  width: 100%;
  height: 3.0rem;
  padding: 0;
  clear: left;
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  }

div.hh {
 height: 0;
 margin: 0.3rem 0 0.6rem 0;
 background-color: #000;
 border-top: 1px solid #000;
 background-color: var(--dark-bdr-color);
 border-top: 1px solid var(--dark-bdr-color);
 width: 100%;
 clear: both;
 }

div.bl {
 border-left-color: #eee;
 border-left-color: var(--lite-bdr-color);
 border-left-style: solid; 
 border-left-width: 1px;
 }

div.bt {
 border-top-color: #999;
 border-top-color: var(--grey-bdr-color);
 border-top-style: solid; 
 border-top-width: 1px;
 }

div.br
 {
 border-right-color: #eee;
 border-right-color: var(--lite-bdr-color);
 border-right-style: solid; 
 border-right-width: 1px;
 }

div.bb
 {
 border-bottom-color: #999;
 border-bottom-color: var(--grey-bdr-color);
 border-bottom-style: solid; 
 border-bottom-width: 1px;         
 }

p.copyrt
  {
  font: 0.875rem/normal Tahoma, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0.3rem;
  }

button[type="submit"] 
  {
  cursor: pointer;
  width: 20%;
  min-width: 8rem;
  border: none;
  background: #777;
  color: #eee;
  background: var(--lesser-btn-back-color);
  color: var(--contact-form-back-color);
  margin: 0;
  padding: 0.3rem;
  border-radius: 0.25rem;
  }

button[type="submit"]:hover 
  {
  background: #999;
  background: var(--lesser-btn-hover-color);
  transition: background-color 150ms ease-in-out;
  }

button[type="submit"]:active 
  {
  box-shadow: inset 0 1px 0.125rem #0007;
  box-shadow: inset 0 1px 0.125rem var(--dark-shadow);
  }

/* --------contact-form--------- */
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
  font: 0.875rem/0.875rem Verdana, Helvetica, sans-serif;
  }

#contact-form {
  border-radius: 0.5rem;
  background: #eee;
  box-shadow: 0 0 0.25rem #0007;
  background: var(--contact-form-back-color);
  box-shadow: 0 0 0.25rem var(--dark-shadow);
  padding: 0.5rem;
  margin: 1.5rem;
  }

#contact-form h3 {
  color: #222;
  color: var(--contact-form-text-color);
  display: block;
  font-size: 1.25rem;
  }

#contact-form h4 {
  margin: 0.3rem 0 0.9rem;
  display: block;
  font-size: 10.125rem;
  }

#contact-form label span {
  cursor: pointer;
  color: #222;
  color: var(--contact-form-text-color);
  display: block;
  margin: 0.3rem 0;
  font-weight: 900;
  }

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
  width: 75%;
  box-shadow: inset 0 1px 0.125rem #ddd, 0 1px 0 #fff;
  border: 1px solid #999;
  background: #fff;

  box-shadow: inset 0 1px 0.125rem var(--inputfield-inset-color), 0 1px 0 var(--inputfield-back-color);
  border: 1px solid var(--grey-bdr-color);
  background: var(--inputfield-back-color);
  margin: 0 0 0.3rem;
  padding: 0.6rem;
  border-radius: 0.25rem;
  }

#contact-form textarea {
  height: 10rem;
  width: 100%;
  }

#contact-form input[type="text"]:hover,
#contact-form input[type="email"]:hover,
#contact-form textarea:hover {
  transition: border-color 150ms ease-in-out;
  border: 1px solid var(--dkgrey-bdr-color);
  }

#contact-form input:focus,
#contact-form textarea:focus {
  outline: 0;
  border: 1px solid #000;
  border: 1px solid var(--dark-bdr-color);
  }

/* --- OLD overlay form --- */
#overlay_form {
  position: absolute;
  border: 0.3rem solid #999;
  border: 0.3rem solid var(--grey-bdr-color);
  padding: 0.5rem;
  background: white;
  color: black;
  width: 18rem;
  height: 10rem;
  z-index: 500;
  }

#overlay_err {
  position: absolute;
  border: 0.3rem solid #999;
  border: 0.3rem solid var(--grey-bdr-color);
  padding: 0.5rem;
  background: white;
  color: black;
  width: 18rem;
  height: 10rem;
  z-index: 600;
  }

.keybutton
  {
    float: left;
    background: #259;
    background: var(--key-btn-back-color);
    border: none;
    border-radius: 0.5rem;
      width: 95%;
      max-width: 10rem;
      min-width: 4rem;
      min-height: 2rem;
    color: #000;
    color: var(--rightpane-text-color);
    padding: 0.5rem 0.75rem;
    margin: 0 0 1rem 0.5rem;
    text-align: center;
    text-decoration: none;
    /* display: inline-block; */
    font-size: 0.875rem;
    cursor: pointer;
    border: 1px solid #000;
    border: 1px solid var(--dark-bdr-color);
    border-radius: 0.5rem;
    box-shadow: 0 0 0.9rem #0007;
    box-shadow: 0 0 0.9rem var(--dark-shadow);
   }

.lesserkey
  {
    background: #777;
    background: var(--lesser-btn-back-color);
   }

.keybutton:hover 
  {
  background: #37b;
  color: #000;
  background: var(--key-btn-hover-color);
  color: var(--rightpane-text-color);
  transition: background-color 150ms ease-in-out;
  }

.lesserkey:hover 
  {
  background: #999;
  color: #000;
  background: var(--lesser-btn-hover-color);
  color: var(--rightpane-text-color);
  transition: background-color 150ms ease-in-out;
  }

@media screen and (max-width: 699px) {
  #pagetable {
    display: table;
    padding: 0 1rem 0 1rem;
    }
  #leftpane {
    display: table-caption;
    width: 97%;
    height: 3.2rem;
    overflow: hidden;
    padding: 0;
    }
  #leftpane img {
     width: 4rem;
     height: 3rem;
     padding: 0.25rem;
    }
  #centerpane  { 
    display: table-footer-group; 
    width: 97%;
    }
  #rightpane {
    display: table-header-group;
    width: 97%;
    padding: 0.5rem;
    }
  .rightbox {
    width: 30%;
    height: auto;
    min-width: 3.5rem;
    min-height: auto;
    margin: 0.2rem;
    }
  .rightbox ul {
    min-width: 7rem;
    display: none;
    }
  .rightbox h2 {font-family: Verdana, sans-serif; font-weight: normal; font-size: 100%; text-indent: 0rem; 
    margin: 0; 
    padding: 0; 
    border-bottom: none;
    text-align: left;
    }
  .h2box {
    margin: 0; 
    padding: 0; 
    width: 90%;
    overflow: hidden;
    }
  .keybutton {
    width: 30%;
    margin: 1.2rem 0.2rem 0.2rem 0.2rem;
    }
   .rightbox a.openicon {
     float: right;
     display: block;
     cursor: pointer;   
   }
   .rightbox {position: relative;}
   .rightbox .openicon {
     position: absolute;
     right: 0;
     top: 0;
   }
}


@media screen and (min-width: 700px) {
   #pagetable {
     display: block;
     padding: 0;
     }
   #centerpane {
     float: left;
     }
   #rightpane {
     float: left;
     }
   .rightbox ul {
     display: block;
     width: auto;
     }
}