/****************************************************************  all  */

html, body, span, a, table, td, form, textarea, h1, h2, h3, p, ul, li, label {
	margin: 0;
	padding: 0;
	font-family: verdana, helvetica, sans-serif;
	border: 0;
	background: 0;
}

body {
	background: url(img/bg-january.gif) top left repeat-x;
	margin: 0;
	padding: 0;
}

.hidden {
	height: 0;
	width: 0;
	overflow: hidden;
	position: absolute;  /* for the benefit of IE5 Mac */
}

.clearit {
	clear: both;
}

img {
	border: 0;
}

a, img {
	outline: none;
}

a {
	color: #338ac3;
	text-decoration: underline;
}

a:focus, a:hover, a:active {
	text-decoration: none;
}

/****************************************************************  divs  */

#main {
	width: 900px;
	margin: 0 auto;
	padding: 0;
}

#header {
	width: 900px;
	background: none;
	margin: 0;
	padding: 0;
}

/******************************************************  navigation  */

ul#navigation {
	width: 427px;
	height: 41px;
	background: url(img/bg-navigation.gif) no-repeat;
	list-style: none;
	position: relative;
	left: 238px;
}

ul#navigation  li {
	height: 41px;
	float: left;
}

ul#navigation  a {
	display: block;
	text-decoration: none;
	text-indent: -10000px;
	height: 41px;
}

a#navigation-today		{ background: url(img/navigation-today.gif) no-repeat; width: 143px; height: 41px;}
a#navigation-about		{ background: url(img/navigation-about.gif) no-repeat; width: 142px; height: 41px;}
a#navigation-contact	{ background: url(img/navigation-contact.gif) no-repeat; width: 142px; height: 41px;}

ul#navigation a:hover, ul#navigation a.act {background-image: none;}

/******************************************************  content  */

#content {
	width: 900px;
	background-color: white;
	margin: 0;
	padding: 0;
}	

/******************************************************  box jump-to-month  */

#box-jump-to-month {
	width: 238px;
	float: left;
}

ul#jump-to-month {
	width: 238px;
	height: 240px;
	background: url(img/bg-jump-to-month.jpg) no-repeat;
	margin: 0;
	list-style: none;
}

ul#jump-to-month  li {
	width: 238px;
}

ul#jump-to-month  a {
	display: block;
	text-decoration: none;
	text-indent: -10000px;
	height: 20px;
}

a#jump-to-month-january		{ background: url(img/jump-to-month-january.gif) no-repeat left top;}
a#jump-to-month-february	{ background: url(img/jump-to-month-february.gif) no-repeat left top;}
a#jump-to-month-march		{ background: url(img/jump-to-month-march.gif) no-repeat left top;}
a#jump-to-month-april		{ background: url(img/jump-to-month-april.gif) no-repeat left top;}
a#jump-to-month-may			{ background: url(img/jump-to-month-may.gif) no-repeat left top;}
a#jump-to-month-june		{ background: url(img/jump-to-month-june.gif) no-repeat left top;}
a#jump-to-month-july		{ background: url(img/jump-to-month-july.gif) no-repeat left top;}
a#jump-to-month-august		{ background: url(img/jump-to-month-august.gif) no-repeat left top;}
a#jump-to-month-september	{ background: url(img/jump-to-month-september.gif) no-repeat left top;}
a#jump-to-month-october		{ background: url(img/jump-to-month-october.gif) no-repeat left top;}
a#jump-to-month-november	{ background: url(img/jump-to-month-november.gif) no-repeat left top;}
a#jump-to-month-december	{ background: url(img/jump-to-month-december.gif) no-repeat left top;}

ul#jump-to-month a:hover, ul#jump-to-month a.act {background-image: none;}

#box-today-img {
	width: 428px;
	height: 302px;
	float: left;
}

#box-today-text {
	width: 234px;
	height: 302px;
	float: left;
	text-align: left;
	color: #000000;
	font-size: 10px;
	line-height: 12px;
	background: url(img/bg-box-today-txt.gif) no-repeat left top;
}

#box-today-text-inline {
	width: 205px;
	position: relative;
	top: 33px;
	left: 22px;
}

#dropshadow-content {
	width: 900px;
	height: 30px;
	background: url(img/img-dropshadow-content.gif) no-repeat left top;
}

#box-about {
	width: 428px;
	height: 302px;
	float: left;
	text-align: left;
	color: #000000;
	font-size: 10px;
	line-height: 12px;
	background: #ffffff;
}

#box-about-inline {
	width: 325px;
	position: relative;
	top: 20px;
	left: 40px;
}

#box-about-links {
	width: 234px;
	height: 302px;
	float: left;
	text-align: left;
	color: #000000;
	font-size: 10px;
	line-height: 12px;
	background: #ffffff;
}

#box-about-links-inline {
	width: 210px;
	position: relative;
	top: 22px;
	left: 40px;
	line-height: 16px;
}

#box-contact-impressum-inline {
	width: 215px;
	position: relative;
	top: 22px;
	left: 13px;
	line-height: 12px;
	color: #808080;
}

#done-rss-feed {
	width: 158px;
	height: 60px;
	background: url(img/img-done-rss-feed.jpg) no-repeat;
	text-indent: -10000px;
	display: block;
	text-decoration: none;
	margin-bottom: 0;
}

#done-downloads {
	width: 158px;
	height: 71px;
	background: url(img/img-done-doneload-badge.jpg) no-repeat;
	text-indent: -10000px;
	display: block;
	text-decoration: none;
	margin-bottom: 59px;
}

#behance-badge {
	width: 158px;
	height: 60px;
	background: url(img/img-behance-badge.jpg) no-repeat;
	text-indent: -10000px;
	display: block;
	text-decoration: none;
	margin-bottom: 4px;
}

#stockphotos-badge {
	width: 158px;
	height: 60px;
	background: url(img/img-stockphotos-badge.jpg) no-repeat;
	text-indent: -10000px;
	display: block;
	text-decoration: none;
	margin-bottom: 22px;
}

#back-to-calendar {
	width: 900px;
	height: 85px;
	background: url(img/img-back-to-calendar.jpg) no-repeat;
	text-indent: -10000px;
	display: block;
	text-decoration: none;
}

#doneloads-title {
	float: left;
	width: 427px;
	height: 302px;
}

p.about {
	margin-bottom: 17px;
}

p.impressum {
	margin-bottom: 8px;
}

/******************************************************  calendar  */

.month-box {
	width: 900px;
	margin: 0 0 24px 5px;
}

.month-row {
	height: 80px;
	width: 900px;
}

.day-box {
	width: 80px;
	float: left;
	border-right: 1px white solid;
}

.img-placeholder-day {
	width: 80px;
	height: 55px;
	background: url(img/img-placeholder-day.gif) no-repeat left top;
}

.img-works {
	width: 80px;
	height: 55px;
}

.day-01 { background: url(img/day-01.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-02 { background: url(img/day-02.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-03 { background: url(img/day-03.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-04 { background: url(img/day-04.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-05 { background: url(img/day-05.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-06 { background: url(img/day-06.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-07 { background: url(img/day-07.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-08 { background: url(img/day-08.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-09 { background: url(img/day-09.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-10 { background: url(img/day-10.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-11 { background: url(img/day-11.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-12 { background: url(img/day-12.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-13 { background: url(img/day-13.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-14 { background: url(img/day-14.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-15 { background: url(img/day-15.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-16 { background: url(img/day-16.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-17 { background: url(img/day-17.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-18 { background: url(img/day-18.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-19 { background: url(img/day-19.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-20 { background: url(img/day-20.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-21 { background: url(img/day-21.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-22 { background: url(img/day-22.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-23 { background: url(img/day-23.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-24 { background: url(img/day-24.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-25 { background: url(img/day-25.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-26 { background: url(img/day-26.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-27 { background: url(img/day-27.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-28 { background: url(img/day-28.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-29 { background: url(img/day-29.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-30 { background: url(img/day-30.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}
.day-31 { background: url(img/day-31.gif) no-repeat left top; width: 27px; height: 16px; margin: 0 0 0 53px; text-indent: -10000px;}

.back-to-top {
	width: 81px;
	height: 16px;
	text-decoration: none;
	position: relative;
	top: 55px;
	left: 80px;
}

.back-to-top-29 {
	width: 81px;
	height: 16px;
	text-decoration: none;
	position: relative;
	top: 55px;
	left: 242px;
}

.back-to-top-30 {
	width: 81px;
	height: 16px;
	text-decoration: none;
	position: relative;
	top: 55px;
	left: 161px;
}

.download-images {
	float: left;
	width: 117px;
	height: 117px;
	padding: 0 11px 11px 0;
}



/******************************************************  gallery  */

/******************************************************  footer  */

#footer {
	width: 900px;
	height: 50px;
	background: url(img/bg-footer.gif) no-repeat left top;
	text-align: left;
	color: #ffffff;
	font-size: 10px;
}

a.footer {
	color: white;
}

#footernavigation {
	width: 200px;
	position: relative;
	left: 113px;
	top: 23px;
}

#copyrightbox {
	position: relative;
	top: 12px;
	left: 692px;
	width: 185px;
	text-align: right;
}

/****************************************************************  typography  */

h1#logo a {
	width: 152px;
	height: 108px;
	background: url(img/h1-logo-done.jpg) no-repeat;
	text-indent: -10000px;
	display: block;
	text-decoration: none;	
	position: relative;
	left: 50px;
	margin: 0;
	padding: 0;
}

h1#logo a:hover {background-position: -152px;}

h2 {
	width: 238px;
	height: 50px;
	background: url(img/h2-jump-to-month.gif) no-repeat;
	text-indent: -10000px;
	display: block;
	text-decoration: none;	
	margin: 0;
	padding: 0;
}

h2#is-it-done-yet {
	width: 141px;
	height: 31px;
	background: url(img/h2-about-is-it-done-yet.gif) no-repeat;
	text-indent: -10000px;
	display: block;
	text-decoration: none;	
	margin: 0;
	padding: 0;
}

h2#i-did-it {
	width: 70px;
	height: 28px;
	background: url(img/h2-about-I-did-it.gif) no-repeat;
	text-indent: -10000px;
	display: block;
	text-decoration: none;	
	margin: 0;
	padding: 0;
}

h2#they-did-it {
	width: 110px;
	height: 28px;
	background: url(img/h2-about-they-did-it.gif) no-repeat;
	text-indent: -10000px;
	display: block;
	text-decoration: none;	
	margin: 0;
	padding: 0;
}

h2#who-is-doing-this {
	width: 184px;
	height: 29px;
	background: url(img/h2-contact-who-is-doing-this.gif) no-repeat;
	text-indent: -10000px;
	display: block;
	text-decoration: none;	
	margin: 0 0 2px 0;
	padding: 0;
}

h2#last-update {
	width: 108px;
	height: 27px;
	background: url(img/h2-last-update.gif) no-repeat;
	text-indent: -10000px;
	display: block;
	text-decoration: none;	
	margin: 0 0 2px 0;
	padding: 0;
}

h2#impressum {
	width: 108px;
	height: 27px;
	background: url(img/h2-contact-impressum.gif) no-repeat;
	text-indent: -10000px;
	display: block;
	text-decoration: none;	
	margin: 0;
	padding: 0;
}

h3 {
	text-align: left;
	color: #000000;
	font-size: 11px;
	line-height: 18px;
	padding: 0 0 12px 0;
}

h3.doneloads {
	text-align: left;
	color: #000000;
	font-size: 11px;
	line-height: 18px;
	padding: 0 0 4px 0;
}


h4 {
	width: 900px;
	height: 38px;
	text-indent: -10000px;
	display: block;
	text-decoration: none;
	margin: 0;
	padding: 0;
}

#calendar-january		{ background: url(img/h4-january.gif) no-repeat left top;}
#calendar-february		{ background: url(img/h4-february.gif) no-repeat left top;}
#calendar-march			{ background: url(img/h4-march.gif) no-repeat left top;}
#calendar-april			{ background: url(img/h4-april.gif) no-repeat left top;}
#calendar-may			{ background: url(img/h4-may.gif) no-repeat left top;}
#calendar-june			{ background: url(img/h4-june.gif) no-repeat left top;}
#calendar-july			{ background: url(img/h4-july.gif) no-repeat left top;}
#calendar-august		{ background: url(img/h4-august.gif) no-repeat left top;}
#calendar-september		{ background: url(img/h4-september.gif) no-repeat left top;}
#calendar-october		{ background: url(img/h4-october.gif) no-repeat left top;}
#calendar-november		{ background: url(img/h4-november.gif) no-repeat left top;}
#calendar-december		{ background: url(img/h4-december.gif) no-repeat left top;}

.copyright {
	font-size: 9px;
}

/****************************************************************  lightbox  */

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(img/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(img/prev.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(img/next.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}