/*--------------------------------------------------------------
## 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
              415px when header starts to wrap with floats
  line 175 -- 482px starts 2 columns
  line 186 -- 712px starts 3 columns
  line 198 -- 942px starts 4 columns
  line 210 -- 1172px starts 5 columns
  line 220    1402px starts 6 columns
  line 262 -- print to remove menu
--------------------------------------------------------------*/

/*--------------------------------------------------------------
##  Static Layout
--------------------------------------------------------------*/
/* ------------------------------- */
/* Font import                     */
/* ------------------------------- */
  @font-face {font-family:"RitzFLF";
    src: url('font/RitzFLF.eot');
    src: url('font/RitzFLF.eot?#iefix') format('embedded-opentype'),
         url('font/RitzFLF.woff') format('woff'),
         url('font/RitzFLF.ttf') format('truetype'),
         url('font/RitzFLF.svg#RitzFLF') format('svg');
    font-weight:normal;
    font-style:normal;
  }
/* ------------------------------- */
/* Standard Elements               */
/* ------------------------------- */
  *           { box-sizing: border-box; }
  html        { font-size: 9pt; /* same as 12px */ }
  body        { max-width: 1402px; 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: 11pt; 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; }
  figure      { display: inline-block; position: relative; margin: 0; }
  figcaption  { width: 200px; margin-left: 10px; border: 1px solid black; padding: 5px 0;
                border-top: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
                background-color: #cccccc; text-align: center;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  div.section { margin-left: 40px; }

  a           { font-family: arial, verdana, sans-serif; color: #3300FF; }
  a:link      { text-decoration: none; }
  a:hover     { text-decoration: underline; }
  a:active    { text-decoration: none; }
  a:visited   { text-decoration: none; }

/*--------------------------------------------------------------
##  Mobile Devices ( < 599px )
--------------------------------------------------------------*/
  /* ------------------------------- */
  /* Mobile First Base Style         */
  /* ------------------------------- */

  header,
  section,
  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;*/
    background-image: url("../images/storage-boxes.jpg");
    background-position-y: 10%;
  }
  header #title {
    text-align: center;
    text-shadow: 2px 2px 2px black;
  }
  header #title h1 {
    margin-bottom: 0;
    font-size: 40pt;
    font-weight: normal;
    font-family: RitzFLF, Broadway, 'Arial Black', sans-serif;
  }
  header #subtitle {
    font-size: medium;
    text-align: center;
    color: white;
    text-shadow: 2px 2px 2px black;
  }

  section {
    /*display: flex;
    flex-flow: wrap;
    justify-content: space-between;*/
    padding: 0 1em;
	  clear: both;
  }
  /*
  section#thumbs::after {
    content: '';
    flex: auto;
  }
  #thumbs {
    overflow-x: hidden;
  }
  */
  img.thumb {
    position: relative; aspect-ratio: 4 / 3; object-fit: cover;
    margin: 10px 10px 0 10px;
    border: 1px solid black; border-bottom: 0;
    border-top-left-radius: 10px; border-top-right-radius: 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: RitzFLF, Broadway, 'Arial Black', sans-serif;
  }

  /* ------------------------------- */
  /* 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:0px 1.515151515152% 20px;*/
    margin:0px auto 20px;
    padding-bottom: 18px;
  }

  /* ------------------------------- */
  /* Tabs                            */
  /* ------------------------------- */
  #tabcontainer      { position: relative; left: -1em;
                       width: calc( 100% + 2em ); height: 23px; 
                       margin: 0 auto; border-bottom: 1px solid #000000;
                       clear: left; background-color: #ffffff; }
  ol#tabs            { padding-left: calc( 1em + 10px); }
  ol#tabs li         { float: left; width: 102px; height: 23px;
                       margin: 0 4px 0 0; border: 1px solid #000000; border-radius: 8px 8px 0 0;
                       list-style-type: none; cursor: pointer;
                       text-align: center; background-color: #c0c0c0; }
  ol#tabs li.current { border-bottom: 1px solid #ffffff; background-color: #ffffff; }

  /* ------------------------------- */
  /* Initial View                    */
  /* ------------------------------- */
  #tabcontainer {
    display: none;
  }
  form {
    display: block;
  }

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

  header, section {
    width: 467px;
  }
  #tabcontainer {
    display: block;
  }
  form {
    display: none;
  }

}

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

  header, section {
    width: 690px;
  }

}

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

  header, section {
    width: 913px;
  }

}

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

  header, section {
    width: 1136px;
  }

}

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

  section#thumbs {
    width: 1359px;
  }

}

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