/*--------------------------------------------------------------
## Responsive Resets
-------------------------------------------------------------- */
@-webkit-viewport {width: device-width;}
@-moz-viewport {width: device-width;}
@-ms-viewport {width: device-width;}
@-o-viewport {width: device-width;}
@viewport {width: device-width;}
html { overflow-y: auto; }
img, audio, video, canvas { max-width: 100%; }

/*--------------------------------------------------------------
##  breakpoints
  line  25 -- mobile fist base style
  line 222 -- 464px starts 2 columns
  line 243 -- 695px starts 3 columns
  line 295 -- 898px starts 4 columns
  line 398 -- 1024px when header starts to wrap with floats
              1123px starts 5 columns
              1263px starts 6 columns
              1474px starts 7 columns
              1815
  line 616 -- print to remove menu
--------------------------------------------------------------*/

/*--------------------------------------------------------------
##  Static Layout
--------------------------------------------------------------*/
/* ------------------------------- */
/* Standard Elements               */
/* ------------------------------- */
  html        { font-size: 9pt; /* same as 12px */ }
  body        { margin: 0 auto;
                font: 100%/1.5 sans-serif;
                background-color: #cccccc; }
  section     { margin-bottom: 2em; }
  h1, h2,
  h3, h4      { font-family: arial, verdana, sans-serif; color: #d42020; }
  h1          { font-size: 24pt; text-align: center; }
  h2          { font-size: 16pt; font-weight: normal; }
  h3          { font-size: 12pt; }
  h4          { font-size: 9pt; margin-bottom: 0; }
  p, td, dl,
  ol, ul, li  { font-size: 9pt; font-family: arial, verdana, sans-serif; color: black; }
  pre         { margin-top: 0; }
  i           { font-style: italic; }
  sup         { position: relative; top: -0.3em; font-size: 0.83em; vertical-align: top; }
  li ul       { margin-bottom: 12px; }
  ul.tight    { position: relative; top: -12px; list-style-type: square; }
  dt          { font-weight: bold; }
  dd          { margin-bottom: 1em; }
  dd ul       { padding-left: 0; }
  hr          { height: 2px; border: 0; color: #888; background-color: #888; clear: both; }
  img         { border: 0; }
  div.section { margin-left: 40px; }

  a           { font-family: arial, verdana, sans-serif; color: black; }
  a:link      { color: #336699; text-decoration: none; }
  a:hover     { color: #0066cc; text-decoration: underline; }
  a:active    { color: #336633; text-decoration: none; }
  a:visited   { color: #77a2c7; text-decoration: none; }

/*--------------------------------------------------------------
##  Mobile Devices ( < 599px )
--------------------------------------------------------------*/
  /* ------------------------------- */
  /* Mobile First Base Style         */
  /* ------------------------------- */
  a.hovertext {                   /* index.php; camp.php */
    position: relative;
    width: 200px;
    text-decoration: none !important;
    text-align: center;
  }
  a.hovertext::after {            /* index.php; camp.php */
    content: attr(data-hovertext);
    position: absolute;
	  top: 2rem;
    /*left: 50%;*/
    /*left: 10px;*/
    /*bottom: 39px;*/
    /*bottom: calc(50% - 2rem);*/
    /*bottom: calc(75px - 1rem);*/
    /*transform: translate(-50%, -50%);*/
    width: 175px;
    padding: 5px;
    border: 1px solid black;
    background: #ffffff;
    /*font-size: 2rem;*/
    text-decoration: none !important;
    color: #000000;
    /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
    opacity: 0;
    z-index: 10;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
  }
  a.hovertext:hover::after,
  a.hovertext:focus::after {      /* index.php; camp.php */
    opacity: 1.0;
  }
  a.hovertext.noaction {          /* index.php */
    pointer-events: none;
  }
  a.hovertext.noaction img {      /* index.php */
    opacity: 0.2;
    filter: grayscale(100%);
  }
  a.hovertext span {              /* index.php */
    position: absolute;
    right: 25px;
    top: 55px;
    width: 20px;
    height: 20px;
    border: 1px solid black;
    border-radius: 10px;
    color: #000000;
    background-color: #ffffff;
    line-height: 20px;
  }
  /* CSS for tooltip.js (hover thumbnail) */
  a.tooltip       { border-bottom: unset; text-decoration: none; }
  a.tooltip:hover { color: #d42020; text-decoration: none; }
  #tooltip {                      /* generated by tooltip.js */
    display: none;
    position: absolute;
    max-width: 240px;
    border: 1px solid #cccccc;
    padding: 5px;
    background: #333;
    color: #ffffff;
  }

  header,
  footer {
    border-top: initial;
    padding-bottom: 0;
    border: 1px solid black;
    border-radius: 10px;
    font-size: 0.9em;
    background-color: #ffffff;
  }
  header {
    min-height: 168px;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  header #title {
    text-align: center;
  }
  header #title h1 {
    margin-bottom: 0;
    font-size: 40pt;
    font-weight: normal;
    font-family: 'Fredericka the Great', fantasy;
  }
 header #subtitle {
    font-size: larger;
    text-align: center;
  }
 header a img#bull {
    display: none;
  }
  header div.about {                   /* index.php only */
    display: none;
    float: right;
    width: 240px;
    padding: 0.75em;
  }
  header div.about p:first-of-type {   /* index.php only */
    display: none;
  }
  header div.about p:last-of-type {    /* index.php only */
    position: relative;
    top: 102px;
    text-align: right;
  }
  footer div.about {                   /* index.php only */
    float: right;
    width: 240px;
    padding: 0.75em;
  }
  footer div.about p:last-of-type {    /* index.php only */
    text-align: right;
  }
  section#thumbs {
    /*display: flex;
    flex-flow: wrap;
    justify-content: space-between;*/
    margin: 0 auto;
    margin-top: 1em;
    margin-bottom: 1em;
	  margin-left: 1em;
    margin-right: 1em;
	  clear: both;
  }
  /*
  section#thumbs::after {
    content: '';
    flex: auto;
  }
  #thumbs {
    overflow-x: hidden;
  }
  */
  img.sample {
    margin: 10px;
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 150px;
    vertical-align: middle;
  }
  img#board {
    width: auto;
  }
  h2.subtitle {
	text-align: center;
    font-size: 25pt;
    font-family: 'Fredericka the Great', fantasy;
  }

  /* ------------------------------- */
  /* Layout                          */
  /* ------------------------------- */
  .container {
    width: 98%;
    margin: 0px auto;
    background-color: #ffffff;
    box-shadow: 0 0 20px #000;
  }
  .grid-2,
  .grid-4,
  .grid-full {
    float: left;
    width:96.969696969697%;
    margin:0 1.515151515152% 1em;
  }

/*--------------------------------------------------------------
##  Tablet portrait ( 600px - 900px )
--------------------------------------------------------------*/
/* breakpoint at 464px start 2 columns */
@media only screen and (min-width: 464px) {
  /* body { background-color: #cccccc; } */

  section#thumbs {
    /*width: 440px;*/
  }

}

/*------------------------------------------------------------*/
@media only screen and (min-width: 620px) {
/* breakpoint of 620px for minimum title width with no about */
  /* body { background-color: #aaaaaa; } */

  header {
    background-image: none;
  }
  header a img#bull {
    display: block;
    float: left;
    margin: 2.5em 0 0 20px;
    padding: 0.75em;
  }
  header div.about {                   /* index.php only */
    /*width: 161px;*/
  }

}

/*------------------------------------------------------------*/
/* breakpoint of 695px start 3 columns */
@media only screen and (min-width: 695px) {

  section#thumbs {
    /*width: 660px;*/
  }

}

/*--------------------------------------------------------------
##  Tablet landscape ( 900px - 1200px )
--------------------------------------------------------------*/
/* breakpoint of 927px start 4 columns */
@media only screen and (min-width: 927px) {

  section#thumbs {
    /*width: 880px;*/
  }

}

/*------------------------------------------------------------*/
/* breakpoint of 990px for minimum title width with about */
@media only screen and (min-width: 990px) {
  body {
    /* max-width: 1158px; */
    /* background-color: #888888; */
  }

  header div.about {                   /* index.php only */
    display: block;
    width: 240px;
  }
  header div.about p:first-of-type {   /* index.php only */
    display: block;
    text-align: left;
  }
  header div.about p:last-of-type {    /* index.php only */
    position: relative;
    top: 0;
  }
  footer {                             /* index.php only */
    border: none;
  }
  footer div.about {                   /* index.php only */
    display: none;
  }
  .grid-2     { width: 30.30303030303%; }
  .grid-4     { width: 63.636363636364%; }

}

/*--------------------------------------------------------------
##  Desktop ( 1200px - 1800px )
--------------------------------------------------------------*/
/* breakpoint of 1158px start 5 columns */
@media only screen and (min-width: 1158px) {

  section#thumbs {
    /*width: 1100px;*/
  }

}

/*------------------------------------------------------------*/
/* breakpoint of 1390px start 6 columns */
@media only screen and (min-width: 1390px) {

  section#thumbs {
    /*width: 1320px;*/
  }

}

/*------------------------------------------------------------*/
/* breakpoint of 1621px start 7 columns */
@media only screen and (min-width: 1621px) {

  section#thumbs {
    /*width: 1540px;*/
  }

}


/*--------------------------------------------------------------
##  Static Layout
-------------------------------------------------------------- */
.blkquote   { margin: 16px 40px; }
.small      { font-size: 8pt; font-style: italic; }
.indent     { margin-left: 40px; line-height: 11px; }
.indentred  { margin-left: 40px; line-height: 11px; color: #ff0000; }
.lastmod    { margin-top: -21px; text-align: center; font-size: 7pt; }
.olddropcap { float: left; margin-right: 3px; font-size: 60px; font-size: 400%; line-height: 48px; font-family: times; }
.dropcap    { float: left; margin-right: 3px; padding-top: 2px; font-size: 5em; line-height: 0.7em; font-family: times; }
.name          { font-weight: bold; color: #d42020; }



.ad_banner     { float:right; width:468px; height:60px; margin-top:1em; /*background-color:grey; opacity:0.7;*/ }
.ad_skyscraper { width:120px; height:600px; margin-top:1em; margin-right:10px; margin-left:10px; /*background-color:grey; opacity:0.7;*/ }

/*
** ^= specifies a match that begin with the string
** $= specifies a match that end with the string
** *= specifies a match that contains a string
*/

@media print {
  blockquote, .blkquote   {margin:16px 0;}
  #tabcontainer           {display:none;}
}