html, body { background-color: black; }
body { margin-top: 44px;  /* matches height of nav bar */
  font-family: 'trebuchet ms'; font-size: 11px;
  text-align: center;
  font-size: 0;
  margin-bottom: 0; padding-bottom: 0;
}



a, body { color: #b0b0b0; }

a { text-decoration: none; font-weight: bold; }
a:hover, a.active { color: white; }
.footer a:hover {text-decoration: underline; }
.nav h1 { display: inline; font-size: 1em; /*font-weight: normal;*/ }

a span.show-on-hover, a:hover span.hide-on-hover { display: none; }
a span.hide-on-hover, a:hover span.show-on-hover { display: inline; }

.total-indicator { font-size: 11px; }

img { border: 0; }
.prev-next img { max-width: 100px; }


ul { list-style: none; margin: 0; padding: 0; }
ul li { display: inline; }

ul.tags { margin-top: 2px; margin-bottom: 0; width: 1024px; margin: auto;}
ul.tags a:hover {  text-decoration: underline; }
ul.tags li { padding: 0 2px; }

.footer { font-weight: bold; margin-bottom: 1.5em; margin-top: .5em; clear: both; }


ul.list { border-top: 1px solid #666; }
ul.list li { display: block; float: left;

 }
ul.list li a { display: block; padding-top: 22px;  width: 120px; height: 102px; border: 1px solid #666; 
  border-left-width: 0;
  border-top-width: 0;
}
ul.list img { width: 75px; height: 75px; border: 1px outset #333; }
ul.list a:hover img { border-color: #fff; }
ul.list .total { font-weight: normal !important; font-size: 10px; text-align: right;
  padding-right: 23px;
  color: #666;
  line-height: 10px;
}
ul.list a:hover .total { color: #fff; }


/* THUMBNAIL SCROLLER */
#scroller.loaded { z-index: 100; }
#scroller { 
  position: fixed;
  bottom: 0;
  
  text-align: left; 
  width: 1024px; 
  left: 50%;
  margin-left: -512px; 
  
  /*left: auto;
  margin: auto;*/
 
  font-size: 0; 
  padding: 3px 0 22px 0; 
  
  z-index: 1;
  }
#scrollerinner { padding: 0 6px 0 6px; }
#scroller:hover, #scroller.loaded { 
  background: -moz-linear-gradient(bottom, black, rgba(0,0,0,.5), rgba(0,0,0,0));  /* firefox */
  background: -webkit-gradient(linear, left bottom, left top, from(#000), to(rgba(0,0,0,0)));  /* safari */
  }
#scroller a.scrollerthumb {
  opacity: .40;
  display: block; float: left; margin: 0;
  width: 112px; height: 82px;  /* to prevent misalignment of thumbnails of varying proportions */
  } 
#scroller a.row-has-square { height: 116px; }  /* adjust alignment for all thumbs in a row if row has a square thumb */
#scroller a.row-has-4-3 { height: 91px; }

#scroller:hover a.scrollerthumb, #scroller.loaded a.scrollerthumb { opacity: 1; }
#scroller a.scrollerthumb:hover { opacity: 1; }
#scroller a.scrollerthumb img { 
  visibility: hidden;
  margin: 0 !important; border-bottom: 0px solid black;
  margin: 6px !important;
  -webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 1);
  -moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 1);
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 1);
 }
#scroller.loaded a.scrollerthumbactive:hover img { /*position: relative; top: 1px; left: 1px;*/ }
#scroller a.scrollerthumb:hover img, #scroller.loaded a.scrollerthumbactive img  {
  -webkit-box-shadow: 1px 1px 6px rgba(255, 255, 255, 1);
  -moz-box-shadow: 1px 1px 6px rgba(255, 255, 255, 1);
  box-shadow: 1px 1px 6px rgba(255, 255, 255, 1);
  filter: progid:DXImageTransform.Microsoft.Shadow(color='White', Direction=135, Strength=4); /* IE */
  border: 1px solid white;
  border-color: rgba(255, 255, 255, .8);
  margin: 5px !important; }
  /*
#scroller.loaded a.scrollerthumbactive img { 
border-bottom: 1px solid white; 
}
*/
#scroller a.scrollerthumb img.loaded { visibility: visible; }
#scroller a.scrollerthumb:focus, .viewphotoholder a:focus { outline: none; }

.scrollertext { opacity: .40; padding-left: 5px; color: white; display: none; font-size: 12px; text-shadow: 1px 1px 0px black; }
.scrollertext-without-thumbs { padding-bottom: 14px; }
#scroller:hover .scrollertext, #scroller.loaded .scrollertext { opacity: .75; }
.scrollertext h1 { margin: 0; margin-left: -2px; font-family: 'trebuchet ms'/*'MEgalopolis Extra'*/; text-transform: uppercase; text-shadow: 2px 2px 2px black; font-size: 32px; line-height: 34px; font-weight: normal; }
.scrollertext ul { margin: 0; padding: 0;  }
.scrollertext ul li:after { content: ","; } 
.scrollertext ul li:last-child:after { content: ""; }
.scrollertext ul li.non-tag:after { content: ""; padding-right: .5em; } 
.scrollertext a { color: white; }
.scrollertext a:hover { text-decoration: underline; }
.scrollertext .description a { /*border-bottom: 1px dashed white; font-style: italic;*/ text-decoration: underline;  }

/* the . . . dots in lower-left */
#scrollerindicator { display: none; position: fixed; bottom: 22px; left: 50%; margin-left: -512px; z-index: 200; border: 0px dotted red; width: 1024px; height: 50px; text-align: left; padding-left: 10px; }
#scrollerindicator span { opacity: .2; font-size: 38px; color: white; text-shadow: 1px 1px 0px black; }
#scrollerindicator span.active { opacity: .8; }
#scrollerindicator.total-photos-1 span.active { display: none; /*opacity: .40;*/ }





.columnholder { margin: 0 auto;
  margin-top: 48px; /* push content down to prevent nav dropshadow overlaying photo titles of top row */
  width: 980px; }
.column { text-align: center; margin: 0; font-size: 0; padding: 0; /*background-color: #669;*/ float: left;
  width: 244px; }
.column li { margin-bottom: 4px; }


  
.column img { font-size: 11px; } /* for alt params visible while loading */
.info  { display: none; /*background: -moz-linear-gradient(top left, black, rgba(0,0,0,0));*/  }
.info  { 
  position: absolute; top: 0; left: 0;
  padding-left: 5px;
  padding-right: 3px;
}
.column a:focus div.info { display: block; }
.column a h2, .column a h3 { margin: 0; text-align: left; font-size: 13px; font-weight: bold; 

}
.column a h2 { font-style: italic; }
.column a h3 { font-size: 11px; }




.column a:hover .info { display: block; }
.more-indicator { 
  margin: 0;
  display: block;
  position: absolute;
  bottom: 0; 
  right: 5px;
  opacity: 1;
  text-align: right;
}

.more-indicator, .non-startpage .info {
  color: white;
  font-size: 13px;
  font-weight: bold; 
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
  filter: progid:DXImageTransform.Microsoft.Shadow(color='Black', Direction=135, Strength=1); 
}


/*
  http://www.fontsquirrel.com/fonts/MEgalopolis-Extra 
*/
/*
@font-face {
  font-family: "MEgalopolis Extra";
  src: url("/g/MEgalopolisExtra.otf") format("opentype");
  }
*/

.size-s-or-bigger .column .info,  .list-sets .column .info { /*display: block;*/ } /* always show titles, not just on hover */
.source-flickr .column .info { display: none; }     /* for flickr /all/ or /tags/.. urls, show titles only on hover */
.list-sets .column .info { display: block; }
.size-s-or-bigger .column img { font-size: 0; }     /* hide alt params while loading, looks ugly below custom titles */
.size-s-or-bigger .info { padding-left: 2px; top: -1px; }
.size-s-or-bigger .first-in-column .info { padding-left: 2px; top: 1px; }
.size-s-or-bigger .column .info h2, .size-s-or-bigger .more-indicator { color: #777;
  text-shadow: 1px 1px 0px black;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='Black', Direction=135, Strength=2); 
  }
.size-s-or-bigger a:hover .more-indicator { color: white; }
.size-s-or-bigger .column .info h3 { display: none; }
.size-s-or-bigger .column a:hover .info { opacity: 1;  }
.size-s-or-bigger .column a:hover .info h3 { display: block; }
.size-s-or-bigger .column a h2 { font-family: 'trebuchet ms',  /*'MEgalopolis Extra',*/ 'arial black'; font-size: 18px; /*font-weight: bold;*/ text-transform: uppercase; font-style: normal;  font-weight: normal;
line-height: 17px; }
.size-s-or-bigger .column .title-short a h2 { font-size: 28px; line-height: 26px; }
.size-s-or-bigger .column a:hover h2 { color: white; text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);

  }
.size-s-or-bigger .column a:hover h3 { color: white; text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);  }
/*
.size-s-or-bigger a:hover .more-indicator { color: white; }
.size-s-or-bigger .column .islight .info { color: black; }
.size-s-or-bigger .column .islight a:hover h2, .size-s-or-bigger .column .islight a:hover h3 { text-shadow: 1px 1px 0px rgba(255, 255, 255, 1); }
*/
.size-s-or-bigger .title-right .info { width: 100%; }
.size-s-or-bigger .title-right .info h2, .size-s-or-bigger .title-right .info h3 { text-align: right; padding-right: 7px; }

.test .title-bottom .more-indicator { display: none; }
.test .title-bottom a:hover h3 { display: none !important; }
.test .title-bottom .info { bottom: 0; vertical-align: bottom; border: 0px dotted red; width: 100%; }
.test .title-bottom .info h2 { position: absolute; bottom: 0; }



.column li, .column a { display: block; position: relative; }
.column li ol { display: none; } /* hide alternates */


/* override widths to fit non-240px image sizes */
.size-sq .columnholder  { width: 926px; }
.size-sq .column        { width: 77px; }
.size-sq .column li     { margin-bottom: 2px; }
.size-sq .column a div.info { padding-left: 2px; }
.size-sq .column a h2   { font-size: 11px; line-height: 11px; }
.size-sq .column a h3   { font-size: 11px; line-height: 11px; }
.size-sq .more-indicator { font-size: 9px; bottom: -1px; right: 3px; }

.size-t .columnholder   { width: 920px; }
.size-t .column         { width: 102px; }
.size-t .column li      { margin-bottom: 2px; }
.size-t .column a div.info { padding-left: 2px; }
.size-t .column a h2   { font-size: 11px; line-height: 12px; }
.size-t .column a h3   { font-size: 11px; line-height: 12px; }
.size-t .more-indicator { font-size: 9px; bottom: -1px; right: 3px; }

.size-m .columnholder   { width: 1008px; }
.size-m .column         { width: 504px; }
/*.size-m .more-indicator { display: none; }*/

.size-l .columnholder   { width: 1024px; }
.size-l .column         { width: 1024px; }
.size-l .more-indicator { display: none; }

.size-z .columnholder { width: 640px; }
.size-z .info { display: none; width: 640px; }
.size-z .info h2 .at-part { display: none; }
.size-z .info h3 { display: none !important; }
.size-z ul.column li:first-child { margin-top: 60px; }
.size-z ul.column li { margin-bottom: 96px; }


.viewphotoholder { width: 1024px; margin: auto; }
.viewphotoholder a { display: block; margin-top: 4px; }
.viewphotoholder a:first-child { margin-top: 0; }

ul.paging {  clear: both; padding-top: 14px; font-size: 14px; text-transform: lowercase; /*margin-bottom: 2em;*/ }


/* fuzzy edge at bottom of window */
.softbottom { width: 100%; height: 20px; position: fixed; left: 0; bottom: 0;
  background-color: transparent;
  background-image: url(/g/shadow_bottom_black_20px.png);
  background-repeat: repeat-x;
  background-position: 0 0;
  z-index: 0; }


.test .topnav .active { border: 0px solid white;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-bottom-width: 0; background-color: #666; }
.test .subnav li { border: 0px solid white; background-color: #666; }


/* exceptions for http://milov.nl/photos/portfolio/ */
.mode-portfolio .column .info h2 { padding: 0 0 0 2px; color: white; text-shadow: 2px 2px 0px rgba(0, 0, 0, 1); }
.mode-portfolio .total-indicator { color: white; display: none; }
.mode-portfolio .column li { height: 180px; margin: 24px 0 24px 0;}
/*
.mode-portfolio .column li {   -webkit-transform: rotate(-2.5deg); }
.mode-portfolio .column li img { border: 4px solid white; }
*/
.mode-portfolio .column li img { border: 4px solid black; }
.mode-portfolio .column li a:hover img { border-color: white; }
.mode-portfolio .column { margin: 0 22px;  }
.mode-portfolio .columnholder  { width: 884px; }
.mode-portfolio .column li span.hide-on-hover { display: none; }

/* hide fuzzy shadow at top  */
/* .navholder { background-image: none !important; } */


/* don't show fuzzy bottom edge and dots on touch devies */
@media handheld {
	.softbottom, #scrollerindicator {
		display: none; }
}