/* 
    Created on : May 18, 2016, 1:40:10 AM
    Author     : pantelis
    based on css of 20/6/13
*/
html, body {
  color: #505050;
  font-family: "GFS Didot", serif;
  margin: 0px;
  padding: 0px; }

.noHeight {
  height: auto !important;
  max-height: none !important; }

.shadow {
  box-shadow: 1px 1px 1px silver; }

.rounded {
  border-radius: 5px; }

.spin {
  background-image: url(../images/lazyload-spin.gif);
  background-position: center 30%;
  background-repeat: no-repeat; }

#container {
  margin: 0px;
  padding: 0px; }
  #container h2, #container h5 {
    text-align: center;
    font-weight: normal; }
  #container h5 {
    margin-top: -20px; }

#intro {
  text-align: center;
  margin-top: -10px; }
  #intro img {
    width: 160px;
    opacity: 0.8;
    filter: alpha(opacity=40);
    /* For IE8 and earlier */ }

#main {
  background-color: #f8f8f0; }

#header, #content {
  margin: auto auto;
  /*width: 1000px;*/
  max-width: 1000px;
  padding: 0;
  overflow: hidden;
  padding-bottom: 20px; }

#content {
  padding-bottom: 30px; }
  #content .page {
    clear: both;
    overflow: hidden;
    /*background-color: rgb(252, 252, 250);*/
    padding: 5px;
    border-bottom: thin solid #ebebeb; }
    #content .page:last-child {
      border-bottom: none; }
    #content .page h4 {
      /*margin-left: 20px;*/
      text-align: center;
      font-weight: normal; }
    #content .page .pics {
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-align-items: flex-end;
      align-items: flex-end;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap; }
      #content .page .pics .pic {
        -webkit-flex: 0 1 auto;
        flex: 0 1 auto;
        position: relative;
        overflow: hidden;
        /*float: left;*/
        width: 170px;
        /*height: 170px;*/
        padding: 8px;
        border: thin solid #ebebeb;
        margin: 5px;
        background-color: white;
        box-shadow: 3px 3px 10px silver; }
        #content .page .pics .pic img {
          width: 160px;
          padding: 4px 4px 0px;
          /*max-height: 120px;*/
          border: thin solid transparent;
          /* 
              box-shadow: 3px 3px 10px silver;*/ }
        #content .page .pics .pic a:hover img {
          border: thin dotted #ED8794; }
        #content .page .pics .pic .caption {
          /*position: absolute;*/
          display: bock;
          /*padding: 0px 4px;*/
          margin-bottom: 2px;
          font-size: small;
          text-align: center;
          bottom: 2px;
          height: 3.2em;
          line-height: 1.2em;
          /*text-overflow: ellipsis;*/ }

#arrange {
  padding: 0px 2px;
  font-size: 1.5em;
  z-index: 100;
  background-color: rgba(250, 250, 250, 0.2);
  box-shadow: 2px 2px 8px silver;
  border: thin solid silver;
  border-radius: 3px; }
  #arrange:hover {
    border-color: #ED8794; }
  #arrange:active {
    box-shadow: none; }
  #arrange a {
    text-decoration: none;
    color: silver; }
    #arrange a:hover {
      color: #ED8794; }

#cerabox .cerabox-title {
  bottom: auto !important;
  top: 99% !important;
  background: rgba(255, 255, 255, 0.7) !important;
  color: black !important; }
#cerabox .cerabox-title span {
  font-family: inherit !important;
  color: black !important; }

/* TODO finish up media queries */
/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 2) {
  #intro img {
    width: 160px; }

  #arrange {
    display: none; }

  #qbPrev:hover, #qbNext:hover {
    background-size: 10px 10px; } }
@media only screen and (max-device-width: 480px) and (orientation: portrait) {
  #intro img {
    width: 160px; }

  #container {
    width: 480px;
    margin: auto auto; }

  #arrange {
    display: none; }

  #qbPrev:hover, #qbNext:hover {
    background-size: 10px 10px; } }
@media only screen and (max-device-width: 480px) and (orientation: landscape) {
  #intro img {
    width: 160px; }

  #container {
    width: px;
    margin: auto auto; }

  #arrange {
    display: none; }

  #qbPrev:hover, #qbNext:hover {
    background-size: 10px 10px; } }