/* #imagewall, #logo, #left, #right, #content { border: 1px solid black; } */
body { 
  background: white; 
  text-align: center; 
  font: 12px 'Trebuchet MS', Arial, Helvetica, sans-serif; 
  color: silver; 
}
p.error { 
  margin: 50px auto; 
  font-size: 14px; 
}
a img { border: none; }

div#top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  z-index: 10;
  background-image: rgb(0, 0, 0);
  background-image: rgba(0, 0, 0, 1.0);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, 
    color-stop(0.00, rgb(68, 68, 68)),
    color-stop(0.10, rgb(0, 0, 0)),
    color-stop(0.90, rgb(0, 0, 0)),
    color-stop(1.00, rgb(68, 68, 68))
  );
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 1.0)); 
  background-image:    -moz-linear-gradient(top, rgba(0, 0, 0, 0.75) 5%, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.75) 95%);
  background-image:     -ms-linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 1.0));
  background-image:      -o-linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 1.0));
  font-family: 'Droid Sans', arial, serif;
  font-size: 9pt;
  letter-spacing: 1pt;
  line-height: 15pt;
  text-shadow: 1px 1px 3px #888;
}

span#title { color: #fff; color: rgba(255, 255, 255, 0.8); float: left; margin-left: 10px; margin-top: 3px; }
span#link { float: right; margin-right: 10px; margin-top: 3px; }
span#link a { color: #ddd; color: rgba(255, 255, 255, 0.5); text-decoration: none; }
span#link a:hover, span#link a:focus { color: #e205dd; color: rgba(226, 5, 221, 0.9); text-decoration: none; }

#content { margin: 50px auto 0px auto; }

#logo { background: url(../images/logo.png) no-repeat center; margin-bottom: 15px; height: 59px; left: 100px; }

#imagewall { margin: 0 auto; text-align: center; overflow: auto; }
#imagewall-container { text-align: center; padding: 0; margin: 0 auto; }
#imagewall-container li { position: relative; float: left; list-style: none; margin: 1.5px; } 
#imagewall-container li a img { float: left; }

#right-button a img, #left-button a img{
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  -moz-transition: -moz-transform 0.2s ease-in-out;
  -o-transition: -o-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
}

#right-button a:hover img, #right-button a:focus img {
  -webkit-transform-origin: 0 50% 0;
  -moz-transform-origin: 0 50% 0;
  -o-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
  -webkit-transform: translateX(10px);
  -moz-transform: translateX(10px);
  -o-transform: translateX(10px);
  transform: translateX(10px);
}
#left-button a:hover img, #left-button a:focus img {
  -webkit-transform-origin: 0 100% 0;
  -moz-transform-origin: 100% 50% 0;
  -o-transform-origin: 100% 50% 0;
  transform-origin: 100% 50% 0;
  -webkit-transform: translateX(-10px);
  -moz-transform: translateX(-10px);
  -o-transform: translateX(-10px);
  transform: translateX(-10px);
}

#nav { margin: 0; padding: 0; text-align: center;}
#nav li { display: inline; list-style: none; margin: 0; padding: 0;}
#nav li a img { 
  padding: 0; 
  -webkit-transition: -webkit-transform 0.2s linear;
  -moz-transition: -moz-transform 0.2s linear;
  -o-transition: -o-transform 0.2s linear;
  transition: transform 0.2s linear;
}
#nav li a img.lower:hover {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#nav li a img.higher:hover {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#footer, #footer a { 
  text-align: center; 
  text-decoration: none; 
  color: silver; 
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; 
  font-size: 11px; 
  font-style: italic; 
}

#left { float: left; }
#right { float: right; }
#update { display:block; padding-top: 20px; }




/* Generic screen ---------------- */
@media screen {
  body { margin: 25px 25px; }
  #content { width: 900px; }
  #imagewall { width: 840px; height: 100%; overflow:auto; margin-bottom: 10px; }
  #imagewall-container { width: 815px; }
  #imagewall-container li a img { width: 160px; height: 160px; }
  #footer { width: 840px; margin: 5px auto 5px auto; }
  #left { width: 30px; height: 560px; }
  #right { width: 30px; height: 560px; }
  #right-button, #left-button { margin-top: 300px; width: 30px; height: 30px; }
  #logo, #left, #right, #right-button, #left-button { display: block; }
  p.error { width: 550px; }
  #nav li { margin: 0px 0.5px; }
  #nav li img, #nav li a img { width: 10px; height: 10px; }
}

/* Generic screen ---------------- */
@media screen and (max-width: 480px) and (orientation: landscape) {
  body { margin: 10px 0px 10px 0px; }
  #content { width: 90%; }
  #imagewall { width: 100%; height: 100%; overflow: auto; margin-bottom: 10px; }
  #imagewall-container { width: 100%; }
  #imagewall-container li a img { width: 100px; height: 100px; }
  #footer { margin: 0px auto 0px auto; width: 100%; }
  #logo, #left, #right, #right-button, #left-button { display: none; height: 0;}
  p.error { width: 550px; }
  #nav li { margin: 0px 1px; }
  #nav li img, #nav li a img { width: 20px; height: 20px; }
}

/* Smartphones (portrait) ------------ */
@media screen and (max-width: 320px) and (orientation: portrait) {
  body { margin: 10px 0px 10px 0px; }
  #content { width: 310px; }
  #imagewall { width: 300px; height: 100%; overflow: auto; margin-bottom: 10px; }
  #imagewall-container { width: 300px; }
  #imagewall-container li a img { width: 97px; height: 97px; }
  #footer { width: 100%; margin: 0px auto 0px auto; }
  #logo, #left, #right, #right-button, #left-button { display: none; height: 0;}
  p.error { width: 300px; }
  #nav li { margin: 0px 1px; }
  #nav li img, #nav li a img { width: 20px; height: 20px; }
}