html, body{ height: 100%; }
body{ margin: 0; padding: 1em; font-family: "Arial Unicode MS", "Lucida Grande", Arial, sans-serif; background-color: #fff; color: #222; }

a{ text-decoration: none;}
a:link{ color: #1111cc; border-bottom: thin dotted #bebebe }
a:visited{ color: #551a8b; border-bottom: thin dotted #bebebe; }
a:hover{ color: red; border-bottom: thin solid #494949; }
a:active{ color: orange; border-bottom: thin solid #000000; }

img{ max-width: 100%; max-height: 100%; border: none; }

#header{ margin-bottom: 2em; }
.trailSeparator{ color: silver; }
#footer{ clear: both; }

#view, #video{ text-align: center; height: 80%; }
#view img{ max-width: 100%; max-height: 100%; }
.preview{ background: #e8e8e8; display: block; float: left; width: 128px; height: 128px; padding: .5em; margin: .5em; text-align: center; word-wrap: break-word; }
.preview{ -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; border: 1px solid #e0e0e0; }
.preview:hover{ box-shadow: 0em 0em 1em 0 #a4a4a4; -moz-box-shadow: 0em 0em 1em 0 #a4a4a4; -webkit-box-shadow: 0em 0em 1em 0 #a4a4a4; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=2, offY=2, positive=true);}

.preview img{ max-width: 100%; max-height: 100%; border: 1px solid #e6e6e6; }
.preview a{ border: none; }
#files{ padding: 2em; }

.index .folder{ font-weight: bold; }
.index .preview{ float: none; width: 32px; height: 32px; }

.time, .date{ color: #666; font-size: small; }

form{ margin: 0; padding: 0; }
input,textarea,select{ border: thin solid whitesmoke; background: #e7e7e7; padding: .2em; }
 input,textarea,select{ -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; }
label{ color: black; }

blockquote{ background: #f3f3f3; padding: 1em; }
blockquote{ -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; }
hr{ color: #555555; height: 1px; }