body { background-color: #000; margin: 0; padding: 20px 0 0 0; }
#wrapper { width: 710px; margin-left: auto; margin-right: auto; position: relative; }

#hpNav { height: 20px; margin-bottom: 10px; }
#hpNav ul { list-style: none; margin: 0; padding: 0; float: right; }
#hpNav ul li { float: left; margin-left: 15px; }
#hpNav ul a { text-indent: -9999px; display: block; height: 20px; background-image: url(../images/nav-btns.gif); background-repeat: no-repeat; outline: none; }
#hpNav ul a#navHome { background-position: -3px 0; width: 47px; }
#hpNav ul a#navPast { width: 45px; background-position: -98px 0; }
#hpNav ul a#navRecent { width: 68px; background-position: -190px 0; }
#hpNav ul a#navContact { width: 80px; background-position: -305px 0; }
#hpNav ul a#navHome:hover { background-position: -3px -20px; }
#hpNav ul a#navPast:hover { background-position: -98px -20px; }
#hpNav ul a#navRecent:hover { background-position: -190px -20px; }
#hpNav ul a#navContact:hover { background-position: -305px -20px; }
#hpSubNav { display: none; position: absolute; list-style: none; margin: 0; padding: 0; }
#hpSubNav a { text-indent: -9999px; display: block; height: 26px; width: 117px; background-image: url(../images/nav-btns-sub.png); background-repeat: no-repeat; outline: none; }
#hpSubNav a#navCollages { background-position: 0 0; }
#hpSubNav a#navDrawings { background-position: 0 -26px; }
#hpSubNav a#navPaintings { background-position: 0 -52px; }
#hpSubNav a#navPrints { background-position: 0 -78px; }
#hpSubNav a#navCollages:hover { background-position: -137px 0; }
#hpSubNav a#navDrawings:hover { background-position: -137px -26px; }
#hpSubNav a#navPaintings:hover { background-position: -137px -52px; }
#hpSubNav a#navPrints:hover { background-position: -137px -78px; }

#navFilms { width: 58px; float: left; }
#navFilms a { display: block; width: 58px; height: 33px; text-indent: -9999px; background-image: url(../images/nav-shortfilms.gif); background-repeat: no-repeat; outline: none; }
#navFilms a:hover { background-position: 0 -33px; }

#footer { height: 58px; width: 710px; margin-left: auto; margin-right: auto; font: normal 13px 'trebuchet ms', arial, sans-serif; margin-top: 10px; }
#footer .txtFooter { float: right; color: #fff; width: 250px; text-align: right; }

.section {
	padding: 10px 0;
}

.thumbnail{
	padding: 3px 3px 8px 3px;
	background-color: #222;
	border: 1px solid #2a2a2a;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}	

/* clearing
----------------------------------------------- */

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}	

/* =homepage */
#szprengiel-home #hpNav { position: absolute; top: 15px; left: 385px; }
#szprengiel-home #hpNav ul a#navHome { background-position: -3px -20px; }
#szprengiel-home #navFilms { padding-left: 50px; } 

/* =contact */
#szprengiel-contact #hpNav ul a#navContact { background-position: -305px -20px; }
#contact { background: url(../images/contact1.jpg) no-repeat; height: 280px; }
#contact .contact-photo { float: right; }
#contact .txt { float: left; margin-top: 118px; margin-left: 19px; }

/* =recent */
#szprengiel-recent #hpNav ul a#navRecent { background-position: -190px -20px; }
#statement { text-indent: -9999px; width: 710px; height: 850px; background: url(../images/statement.gif) no-repeat; }
#szprengiel-recent .section { width: 380px; margin: auto; }

/* =past */
#szprengiel-collages #hpNav ul a#navPast, #szprengiel-drawings #hpNav ul a#navPast, #szprengiel-paintings #hpNav ul a#navPast, #szprengiel-prints #hpNav ul a#navPast { background-position: -98px -20px; }
#szprengiel-paintings .section { width: 480px; margin: auto; }
#szprengiel-prints .section { width: 590px; margin: auto; }

/* =films */
#szprengiel-films #navFilms a { background-position: 0 -33px; }
#films { width: 710px; height: 506px; position: relative; }
#films #film { position: absolute; width: 452px; height: 370px; top: 56px; left: 59px; }
#films #film-nav { position: absolute; top: 244px; left: 570px; list-style: none; margin: 0; padding: 0; }
#films #film-nav li { padding-bottom: 12px; }
#films #film-nav a { color: #fff; text-decoration: none; font: normal 12px 'trebuchet ms', arial, sans-serif; }