body {
	background: url(../images/hg.jpg) repeat;
	margin: 0;
	padding: 0;
	color: #333;
	text-align:center;
}

@font-face {
    font-family: 'QlassikMediumRegular';
    src: url('../webfont/Qlassik_TB-webfont.eot');
    src: url('../webfont/Qlassik_TB-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfont/Qlassik_TB-webfont.woff') format('woff'),
         url('../webfont/Qlassik_TB-webfont.ttf') format('truetype'),
         url('../webfont/Qlassik_TB-webfont.svg#QlassikMediumRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QlassikBoldRegular';
    src: url('../webfont/QlassikBold_TB-webfont.eot');
    src: url('../webfont/QlassikBold_TB-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfont/QlassikBold_TB-webfont.woff') format('woff'),
         url('../webfont/QlassikBold_TB-webfont.ttf') format('truetype'),
         url('../webfont/QlassikBold_TB-webfont.svg#QlassikBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1, h2, h3, h4, h5, h6 {
	margin:0;
	padding:0;
	text-indent:-99999px;
}

h6 {
	font-family:'QlassikMediumRegular';
	text-indent:0px;
	color:#fff;
	font-size:21px;
	margin:0 0 10px 0;
	text-shadow: 1px 1px 2px #000;
	font-weight:normal;
}

h5 {
	text-indent:-99999px;
	width:89px;
	height:46px;
	background:url(../images/projects_heading.jpg) no-repeat;
}

p, ol, a, ul {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height:1.7em;
	text-decoration:none;
	color:#333;
	outline:none;
	margin:10px 0;padding:0;
}

ol, ul {
	list-style:none;
	margin:0;
	padding:0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

#maincontainer {
	padding-left:8px;
	background:url(../images/main_hg.jpg) top center no-repeat;
	width:1000px;
	height:700px;
	position:relative;
	text-align:left;
    margin:0 auto;
}

#maincontainer header#top {
	height:134px;
	width:100%;
}

#maincontainer header#top h1  a{
	margin:0;
	position:absolute;
	top:49px;
	left:395px;
	width:208px;
	height:64px;
	background:url(../images/logo.jpg) no-repeat;
}

#maincontainer section {
	width:950px;
	padding-left:50px;
	position:relative;
}

#maincontainer section h2 {
	margin:0;padding:0;
	position:absolute;
	top:23px;
	left:147px;
	width:562px;
	height:46px;
	background:url(../images/teaser.jpg) no-repeat;
	z-index:2;
}

#maincontainer article {
	float:left;
	width:240px;
	height:454px;
	padding:35px 22px 35px 35px;
	position:relative;
	z-index:1;
}

#maincontainer article header {
	height:17px;
}

#maincontainer article#abtme {
	margin-top:69px;
	background:url(../images/about_me.jpg) no-repeat;
}

#maincontainer article#abtme li {
	padding-left:50px;
}

#maincontainer article#abtme li span {
	margin-left:-50px;
	float:left;
	font-weight:bold;
}

#maincontainer article#ref {
	margin-top:69px;
	background:url(../images/references.jpg) no-repeat;
}

#maincontainer article#ref #slides {
	width:207px;
	height:180px;
	overflow:hidden;
	margin:20px 0px 0px 9px;
}

#maincontainer article#ref #slides li {
	padding:6px;
	width:195px;
	height:168px;
	background:url(../images/ref_hg.png) no-repeat;
	position:relative;
}

#maincontainer article#ref #slides li img {
	width:194px;
	height:134px;
	margin:6px;
	position:absolute;
	left:0;
	top:0;
	color:#FFF;
	z-index:1;
}

#maincontainer article#ref #slides li div.information p {
	margin:0;
	color:#FFF;
}

#maincontainer article#ref #slides li div.information p:before {
	content:"+ ";
}

#maincontainer article#ref #slides li div.information {
	position:relative;
	z-index:2;
	padding:10px;
	width:174px;
	height:114px;
	opacity:0.95;
	background:#333;
	display:none;
}

#maincontainer article#ref #slides li div.information a.img {
	position:absolute;
	top:-10px;left:0px;
	background:url(../images/preview.png) no-repeat bottom right;
	width:183px;height:125px;
}

#maincontainer article#ref .prev, #maincontainer article#ref .next {
	width:25px;
	height:26px;
	text-indent:-9999px;
	display:inline-block;
	position:absolute;
	top:120px;
	background:url(../images/button_prev.png) no-repeat;
	opacity:0.5;
}

#maincontainer article#ref .prev {
	left:17px;
}

#maincontainer article#ref .next {
	right:20px;
	background:url(../images/button_next.png) no-repeat;
}

#maincontainer article#ref .prev:hover, #maincontainer article#ref .next:hover {
	opacity:1;
}

#maincontainer article#ref footer {
	margin-top:53px;
	margin-left:-4px;
}

#maincontainer article#ref footer li {
	padding-left:50px;
}

#maincontainer article#ref footer li span {
	margin-left:-50px;
	float:left;
	font-weight:bold;
}

#maincontainer article#abtmepic {
	background:url(../images/about_me_pic.jpg) no-repeat;
}

#maincontainer article#abtmepic a {
    width:20px;
    height:20px;
    text-indent:-9999px;
    position:absolute;
    bottom:130px;
}

#maincontainer article#abtmepic a#facebook {
    background:url(../images/icons/facebook.png) no-repeat;
    left:100px;
}

#maincontainer article#abtmepic a#xing {
    background:url(../images/icons/xing.png) no-repeat;
    left:130px;
}

#maincontainer article#abtmepic a#twitter {
    background:url(../images/icons/twitter.png) no-repeat;
    left:160px;
}

footer#overlayfooter {
	margin: 0 auto;
	width:100%;
	z-index:4;
	position:fixed;
	bottom:0;
	left:0;
	padding-top:20px;
	background:url(../images/footer_top.png) top center no-repeat;
	opacity:0.8;
	cursor:pointer;
}

* html footer#overlayfooter { 
	position: absolute;
}

footer#overlayfooter div.content {
	width:100%;
	padding-bottom:10px;
	background:#FFF;
	text-align:left;
}

footer#overlayfooter div.content div {
	margin:0 auto;
	width:818px;
	display:none;
}

footer#overlayfooter  a  {
	font-weight:bold;
}

footer#overlayfooter  a:hover {
	border-bottom:1px solid #333;
}