body,td,th,input,button,select,textarea {
   font: normal 11px/1.5 Verdana,sans;
}

html, body { height:100%; }

* {
   padding:0;
   margin:0;
}

input {
   line-height:1.2;
}

b {font-weight:bold;}

body {
   background:#CCC;
   color:#000;
   margin:0;
}

hr {
   background:#000;
   height:1px;
   margin:0.1em 0;
   border:none;
   width:100%;
}

#header {
   background: #FFF;
   border-bottom: solid 1px #000;
   position:fixed;
   width:100%;
   min-height:3em;
   z-index:1000;
}

#header h1 {
   margin:0.2em 0.4em;
   font-size:14px;
   font-weight:bold;
   float:left;
}


#footer {
   background: #FFF;
   border-top: solid 1px #000;
   position:fixed;
   left:0;
   bottom:0;
   width:100%;
   z-index:999;
   text-align:right;
   font-size:9px;
   height:1.8em;
}

#filter {
   margin: 0.2em 0.5em 0.2em 120px;
}

#filter input#query {
   width:460px;
}

#filter input.date {
   width:110px;
}

#filter button {
   font-size:10px;
   padding:0 2px;
   margin:0;
   vertical-align:top;
}

#filter div.fltgrp {
   float:left;
   height:20px;
   white-space:nowrap;
   margin: 1px 0 1px 1em;
}

#filter div.fltgrp.right {
   float:right;
}

.pager {
   line-height:2em;
}

.pager a {
   border:solid 1px #000;
   padding:0.1em 0.2em;
   background:#EEE;
   color:#000;
   text-decoration:none
}

.pager a.current {
   font-weight:bold;
   background-color:#FFF;
}

.pager a.prev {
   margin-right:1em;
}

.pager a.next {
   margin-left:1em;
}

.pager a:hover {
   background:#FFF;
}

.index div.pagerPosition {
   position:fixed;
   bottom:0.2em;
   z-index:1000;
   width:100%;
   text-align:center;
}

.index div.summary {
   position:fixed;
   margin-left:0.5em;
   z-index:1000;
   left:0;
   bottom:0;
}

.clear { clear:both; }

#container {
   padding:5px;
}

#headerPadding { height:3em; }
#footerPadding { height:2em; }

body.thumbView #header, body.thumbView #footer,
body.thumbView #headerPadding, body.thumbView #footerPadding {
   display:none;
}

body.thumbView #container {
   width:200px;
   float:right;
}

body.fullView #container, body.thumbView div.pagerPosition {
   display:none;
}

h1 a {
   text-decoration: none;
   color: #000;
}

#modalbox {
   position:fixed;
   z-index:2000;
   width:100%;
   height:100%;
   right:0;top:0;
}

div.modalboxBoundary {
   position:fixed;
   width:100%;
   height:100%;
   right:0;top:0;
   overflow:hidden;
}

div.modalboxBoundaryInner {
   height:100%;
}

#modalboxOverlay {
   height:100%;
   background:#888;
}

body.thumbView #modalbox,
body.thumbView div.modalboxBoundary {
   right:208px;
}

body.thumbView div.modalboxBoundary #modalboxOverlay, 
body.thumbView div.modalboxBoundary div.modalboxBoundaryInner {
   margin-left:208px;
}

#modalboxTable {
   width:100%;
   height:100%;
   left:0;top:0;
   border-collapse:collapse;
}

#modalboxContent {
   text-align:center;
   vertical-align:middle;
}

table {
   border-spacing:0;
   border-collapse:collapse;
}

div.exception {
   width:auto;
   height:auto;
   position:absolute;
   font: bold 11px/1.5 Verdana,sans;
   margin:1em 2em;
   padding:0.5em 1em;
   border:solid 4px #800;
   color: #800;
   background: #FCC;
   z-index:9000;
}


div.photo {
   margin: 1px;
   float: left;
   border: solid 1px #DDD;
   width: 200px;
   height:200px;
   overflow:hidden;
   text-align:center;
   background:#888;
   color:#FFF;
   position:relative;
}

div.photo.toBeLoaded {
   background:#CCC;
}

.photo a {
   color:#FFF;
   text-decoration:none;
   font-weight:bold;
}

.camera {
   white-space:nowrap;
}

.photo div.thumbnail {
   width:200px;
   height:200px;
   position:absolute;
   left:0;top:0;
   background: transparent center no-repeat;
}

.photo div.overlay {
   width:200px;
   height:200px;
   position:absolute;
   left:0;top:0;
}

.photo.active .overlay {
   background:#000;
   opacity:0.6;
   filter: alpha(opacity=60);
}

.photo:hover .overlay, .photo.hover .overlay {
   background:#800;
   opacity:0.3;
   filter: alpha(opacity=30);
}

.photo div.thumbActions {
   display:block;
   background:url(empty.gif);
   position:absolute;
   left:0;top:0;
   width:200px;
   height:200px;
   cursor:default;
   text-align:left;
   overflow:hidden;
}

.photo .thumbActions a:hover {
   color:#FF8;
   text-decoration:underline;
}


.photo div.topBackground {
   width:200px;
   position:absolute;
   left:0;top:0;
   font-weight:bold;
}

.photo div.topInfo {
   width:200px;
   left:0;top:0;
   font-weight:bold;
}


.photo div.name {
   font-weight:bold;
   padding:0 0.5em 0.2em 0.5em;
}

.photo div.info1 {
   width:200px;
   display:none;
}

.photo div.info2 {
   width:200px;
   position:absolute;
   left:0px; bottom:18px;
   display:none;
}

.photo.active div.info1, .photo.active div.info2,
.photo:hover div.info1, .photo:hover div.info2,
.photo.hover div.info1, .photo.hover div.info2 {
   display:block;
}

.photo div.info1 div {
   margin:0 0.5em;
}

.photo div.info2 div {
   margin:0 0.5em;
   text-align:right;
}

.photo div.bottomBackground, .photo div.bottomInfo {
   width:200px;
   position:absolute;
   left:0;bottom:0;
}

.photo div.status {
   float:left;
   margin:0 0.5em;
   font-weight:bold;
}

.photo a.date {
   float:right;
   margin:0 0.5em;
}

.shadow {
   text-shadow: #000 1px 1px 1px;
   filter: shadow(color=#000000,Direction=135,Strength=1);
}

#photoView {
   text-align:center;
   cursor:default;
}


#photoView #photoPrev, #photoView #photoNext, #photoView #photoClose, #photoView #photoSwitch{
   width:128px;
   height:128px;
   cursor:pointer;
   position:absolute;
   background:url(empty.gif);
}

#photoView #photoPrev, #photoView #photoNext {
   bottom:0;
}

#photoView #photoClose, #photoView #photoSwitch {
   top:0;
}

#photoView #photoPrev, #photoView #photoClose {
   left:0;
}

#photoView #photoNext, #photoView #photoSwitch {
   right:0;
}

body.thumbView #photoView #photoPrev, body.thumbView #photoView #photoClose {
   left:208px;
}

#photoView.loaded #photoPrev, #photoView #photoPrev:hover {
   background:url(prev.png) no-repeat left bottom;
}
#photoView.loaded #photoNext, #photoView #photoNext:hover {
   background:url(next.png) no-repeat right bottom;
}

#photoView.loaded #photoClose, #photoView #photoClose:hover {
   background:url(thumbnails.png) no-repeat left top;
}
#photoView.loaded #photoSwitch, #photoView #photoSwitch:hover {
   background:url(thumbview.png) no-repeat right top;
}

body.thumbView #photoView.loaded #photoSwitch, body.thumbView #photoView #photoSwitch:hover {
   background:url(fullview.png) no-repeat right top;
}


#photoView img.photo {
   border:solid 1px #000;
}