/*####################
	IMPORTS
####################*/
@import url("reset.css");
@import url("fancybox-1.3.1.css");


/*####################
	BASICS
####################*/
body {
	background: url(../images/bg_body.jpg) repeat-x fixed top #B4B4B4;
	border-top: 5px solid #151515;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 0.625em;
	color: #222;
}

em {
	font-style: inherit;
	font-weight: bold;
}

.line900 {
	width: 900px;
	height: 2px;
	margin: 15px 0;
	background: url(../images/line_900.png);
}
.bottom {
	margin-bottom: 30px;
}

.line580 {
	width: 580px;
	height: 2px;
	margin: 15px 0;
	background: url(../images/line_580.png);
}

::-moz-selection {
	background: #48A89B;
	color: #CCC;
}
::-webkit-selection {
	background: #48A89B;
	color: #CCC;
}
::selection {
	background: #48A89B;
	color: #CCC;
}


/*####################
	CLEARFIX
####################*/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}


/*####################
	MAIN-NAV
####################*/
#main-nav {
	float: right;
}

#main-nav li {
	display: block;
	list-style-type: none;
	float: left;
	margin-left: 1px;
}

/* LINKS */
#main-nav li a.ueber-mich, #main-nav li a.portfolio, #main-nav li a.fotos, #main-nav li a.kontakt {
	position: relative;
	display: block;
	height: 88px;
 	text-indent: -9999px;
}
#main-nav li a.ueber-mich {
	width: 74px;
	background: url(../images/main-nav.png) no-repeat 0 0;
}
#main-nav li a.portfolio {
	width: 78px;
	background: url(../images/main-nav.png) no-repeat -75px 0;
}
#main-nav li a.kontakt {
	width: 53px;
	width: 69px;
	background: url(../images/main-nav.png) no-repeat -154px 0;
}

/* SPAN */
.ueber-mich span.hover, .portfolio span.hover, .fotos span.hover, .kontakt span.hover {
	display: block;
	position: absolute;
	height: 88px; 
	top: 0; 
}
.ueber-mich span.hover {
	background: url(../images/main-nav.png) no-repeat 0 -88px;
	left: 0;  
	width: 74px; 
}
.portfolio span.hover {
	background: url(../images/main-nav.png) no-repeat -75px -88px;
	left: 75;
	width: 78px; 
}
.kontakt span.hover {
	display: block;
	background: url(../images/main-nav.png) no-repeat -154px -88px;
	left: 155;  
	width: 53px; 
	width: 69px;
}

/* ACTIVE */
#main-nav li.active {
	position: relative;
	display: block;
	height: 88px;
	text-indent: -9999px;
	list-style-type: none;
}
#main-nav li.ueber-mich {
	width: 74px;
	background: url(../images/main-nav.png) no-repeat 0 -88px;
}
#main-nav li.portfolio {
	width: 78px;
	background: url(../images/main-nav.png) no-repeat -75px -88px;
}
#main-nav li.kontakt {
	width: 53px;
	width: 69px;
	background: url(../images/main-nav.png) no-repeat -154px -88px;
}


/*####################
	TYPO
####################*/
h1 {
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1.8em;
	font-weight: normal;
	color: #222;
	line-height: 1.5em;
	text-shadow: 0 1px 0 #FFF;
}

h2 {
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	color: #222;
	line-height: 1em;
	text-shadow: 0 1px 0 #FFF;
	margin-bottom: 15px;
}

h1 + h2 {
	font-weight: normal;
	line-height: 1.8em;
	margin-bottom: 8px;
}

li h2 {
	margin-bottom: 4px;
}

h2 em {
	font-family: Georgia, Times, serif;
	color: #48A89B;
}

h3 {
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	color: #CCC;
	text-shadow: 0 1px 0 #000;
	margin-bottom: 15px;
}

p {
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #222;
	line-height: 1.8em;
	text-shadow: 0 1px 0 #FFF;
}
a, a:visited {
	font-weight: bold;
	color: #48A89B;
	text-decoration: none;
}
a:hover {
	color: #56CBBA;
}

p #tooltip {
	text-shadow: 0 1px 0 #000;
}

em {
	font-style: normal;
	font-weight: bold;
}


/*####################
	TOOLTIP
####################*/
#tooltip {
	position: absolute;
	padding: 3px 9px 3px 18px;
	display: none;
	background: url(../images/bg_tooltip.png) left top no-repeat;
	z-index: 100;
}

#tooltip a {
	text-decoration: none;
}

.tipBody {
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	font-weight: bold;
	color: #CCC;
	line-height: 1.3em;
	text-indent: 0;
}


/*####################
	TOP
####################*/
span.top {
	padding-right: 15px;
	display: block;
	margin-bottom: 15px;
	text-align: right;
	text-shadow: 0 1px 0 #FFF;
}



/*####################
	BASIC-CONTENT
####################*/
#wrap {
	width: 900px;
	margin: 0 auto 0;
}

#header {
	width: 900px;
	height: 125px;
	background: url(../images/shadow_900.png) no-repeat center top;
}

#header-logo {
	float: left;
	margin-top: 54px;
}

#content {
	width: 900px;
	margin-top: 25px;
}
#content-head {
	width: 900px;
}
#content-left {
	width: 595px;
	float: left;
	margin: 0;
	padding: 0;
	top: 0;
}
#content-right {
	width: 290px;
	float: right;
}
#content-right-small {
	width: 275px;
	float: right;
}

/* TYPO: HEAD */
#content-head h1 {
	font-family: Georgia, Times, serif;
	font-size: 6.0em;
	margin-left: -3px;
}
#content-head h1.small {
	font-family: Georgia, Times, serif;
	font-size: 3.6em;
	line-height: 1.2em;
	margin-top: 10px;
	margin-bottom: 8px;
}
#content-head h1.portfolio {
	float: left;
	margin: 0;
}
#content-head h2 {
	font-family: Georgia, Times, serif;
	font-size: 1.8em;
}
#content-head p {
	margin-bottom: 1.2em;
}
p.wide {
	width: 575px;
}



/*####################
	START
####################*/
.start {
	height: 416px;
	background: url(../images/bg_start.png) no-repeat 0 0;
	margin-bottom: 5px;
}

/* INFOTEXT LINKS: AUCH BEI UEBER-MICH */
#content-head-info {
	position: absolute;
	width: 295px;
	margin: 13px 15px;
}

/* SLIDER */
#content-head-slider-wrap {	
	position: absolute;
	width: 275px;
	height: 175px;
	margin-left: 489px;
	margin-top: 100px;
}
#content-head-slider {
	width: 275px;
	height: 175px;
}
#content-head-slider .nivo-controlNav {
	position: absolute;
	left: 98px;
	bottom: -15px;
}
#content-head-slider .nivo-controlNav a {
	display: block;
	width: 10px;
	height: 10px;
	background: url(../images/nivo_bullets.png) no-repeat;
	text-indent: -9999px;
	margin-right: 3px;
	float: left;
	position: relative;
	z-index: 99;
}
#content-head-slider .nivo-controlNav a.active {
	background-position: -10px 0;
}

#content-head-slider a {
	display: block;
}

.nivoSlider {
	position: relative;
	background: url(../images/nivo_loading.gif) no-repeat 50% 50% #2A2A2A;
}
.nivoSlider img {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.nivoSlider a {
	border: 0;
}
.nivoSlider a.nivo-imageLink {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	z-index: 60;
	display: none;
}
.nivo-slice {
	display: block;
	position: absolute;
	z-index: 50;
	height: 100%;
}


/*####################
	ABOUT
####################*/
.ueber {
	height: 435px;
	background: url(../images/bg_ueber.png) no-repeat 0 0;
	margin-bottom: 5px;
}

div.skills-wrap {
	width: 900px;
	display: none;
	margin-top: 15px;
}
div.skills {
	margin: 0;
}

ul.skills a, ul.programms a {
	color: #222;
}

ul.skills #tooltip, ul.programms #tooltip { /* IMPORTANT FOR TOOLTIP */
	text-shadow: 0 1px 1px #000;
}

ul.skills, ul.programms {
	width: 595px;
	display: block;
	overflow: hidden;
}
ul.skills {
	margin-bottom: 30px;
}
ul.programms {
	margin-bottom: 0;
}
ul.skills li, ul.programms li {
	width: 595px;
	font-weight: bold;
	color: #222;
	text-align: right;
	text-shadow: 0 1px 0 #CCC;
	background: #48A89B;
	margin-bottom: 3px;
	padding: 12px 15px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
ul.skills li.last, ul.programms li.last {
	margin-bottom: 0;
}

ul.skills li.xhtml {
	width: 540px;
	margin-left: -570px;
}
ul.skills li.css {
	width: 520px;
	margin-left: -550px;
}
ul.skills li.js {
	width: 345px;
	margin-left: -375px;
}
ul.skills li.as {
	width: 130px;
	margin-left: -160px;
}
ul.skills li.phpmysql {
	width: 210px;
	margin-left: -240px;
}

ul.programms li.photoshop {
	width: 530px;
	margin-left: -560px;
}
ul.programms li.illustrator {
	width: 410px;
	margin-left: -440px;
}
ul.programms li.indesign {
	width: 480px;
	margin-left: -510px;
}
ul.programms li.fireworks {
	width: 270px;
	margin-left: -300px;
}
ul.programms li.flash {
	width: 160px;
	margin-left: -190px;
}
ul.programms li.aperture {
	width: 545px;
	margin-left: -575px;
}

ul.skills li:hover, ul.programms li:hover {
	background: #56CBBA;
	text-shadow: 0 1px 0 #FFF;
}

div.worksample-wrap {
	width: 290px;
	background: url(../images/shadow_290.png) no-repeat center bottom;
	margin-bottom: 18px;
	padding-bottom: 15px;
}
div.worksample {
	position:relative;
	border: 10px solid #FFF;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
div.worksample-description {
	background: #222;
	display: none;
	height: 165px;
	left: 0;
	padding: 10px;
	position: absolute;
	top: 0;
	width: 250px;
}
div.worksample-description span {
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #48A89B;
	line-height: 1.8em;
	text-shadow: 0 1px 0 #000;
}

div.worksample-description span.title {
	font-weight: bold;
}


/*####################
	PORTFOLIO
####################*/
ul#filter {
	list-style: none;
	float: right;
	margin-top: 68px;
}

ul#filter li {
	float: left;
	margin-left: 15px;
}
ul#filter li.last {
	margin-right: 0;
}
ul#filter a, ul#filter span {
	font-size: 1.1em;
	font-weight: bold;
	color: #48A89B;
	text-decoration: none;
	text-shadow: 0 1px 0 #FFF;
}
ul#filter span {
	color: #222;
}
ul#filter a.active, ul#filter a:hover {
	font-weight: bold;
	color: #56CBBA;
	text-decoration: none;
	text-decoration: underline;
}
ul#filter a.active {
	text-shadow: 0 1px 0 #FFF;
}

ul#projects {
	list-style: none;
	margin-left: 0;
}
ul#projects li.alle, ul#projects li.web, ul#projects li.print, ul#projects li.foto, ul#projects li.motion, ul#projects li.design { 
	margin-bottom: 15px;
}

.project-wrap {
	width: 900px;
	margin-top: 15px;
}

.project-description {
	float: left;
}
.project-description ul.description li {
	border-bottom: 1px solid #BBB;
	margin: 5px 0;
	padding-bottom: 5px;
	line-height: 1.8em;
	text-shadow: 0 1px 0 #FFF;
}
.project-description ul.description li em {
	margin-right: 5px;
}

.project-images {
	float: right;
}

.project-image-wrap {
	float: right;
	background: url(../images/shadow_100.png) no-repeat center bottom;
	margin-left: 15px;
	margin-bottom: -15px;
	padding-bottom: 15px;
}

.project-images img {
	width: 102px;
	height: 102px;
	border: 5px solid #FFF;
	opacity: 0.7;
	-moz-opacity: 0.7;
}
.project-images img:hover {
	opacity: 1;
	-moz-opacity: 1;
}


/*####################
	CONTACT-FORM
####################*/
#status {
	width: 581px;
}
#status h2 {
	color: #48A89B;
}
#status h2.error {
	color: red;
}

form {
	margin-bottom: 15px;
}

li input, li textarea {
	background: #F5F5F5;
	width: 556px;
	margin-bottom: 10px;
	padding: 12px;	
	border: none;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #999;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

li input:hover, li textarea:hover, li input:focus, li textarea:focus {
	background-color: #FFF;
	color: #222;
}

span.red {
	color: red;
	margin-left: 3px;
}

button.submit {
	background: #48A89B;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #222;
	text-shadow: 0 1px 0 #AAA;
	border: none;
	cursor: pointer;
	display: block;
	padding: 12px;
	width: 580px;
	
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

button.submit:hover {
	background: #56CBBA;
	color: #222;
	text-shadow: 0 1px 0 #CCC;
}

label {
	display: block;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	color: #222;
	line-height: 1.0em;
	text-shadow: 0 1px 0 #FFF;
	margin: 0 3px 5px 5px;
}
label.error {
	color: red;
	margin-bottom: 15px;
}
input.error{
	background: #F5F5F5;
	color: #222;
}

span.requiered {
	display: block;
	width: 571px;
	text-align: right;
	margin-top: -8px;
	margin-bottom: 30px;
}

/* INFO: RIGHT */
.info {
	width: 275px;
	font-size: 1.1em;
	line-height: 1.8em;
	text-shadow: 0 1px 0 #FFF;
	margin: 0 0 10px 0;
}
.info-left {
	display: block;
	float: left;
	width: 95px;
	font-weight: bold;
}
.info-right {
	display: block;
	float: right;
	width: 180px;
}
.info-right #tooltip {
	text-shadow: 0 1px 0 #000;
}

#content-right-small h2 {
	font-family: Georgia, Times, serif;
	font-size: 1.8em;
	font-weight: normal;
	margin: 25px 0 20px;
}


/*####################
	FOOTER
####################*/
#footer {
	width: 900px;
	margin-bottom: 45px;
}

#footer-top-wrap {
	background: url(../images/shadow_900.png) bottom center no-repeat;
	padding-bottom: 15px;
}

.footer-top {
	width: 900px;
	height: 180px;
	background: url(../images/bg_structure.png) repeat #222;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.footer-box-wrap {
	width: 290px;
	margin-right: 15px;
	float: left;
}

.last {
	margin-right: 0;
}

.footer-box {
	padding: 15px;
}

.footer-bottom {
	width: 870px;
	margin-left: 15px;
}
.footer-bottom p, .footer-bottom a {
	text-shadow: 0 1px 0 #FFF;
}

#social {
	width: 440px;
	float: left;
}
#copyright {
	float: right;
}
#copyright p {
	margin-top: -2px;
}

.footer-box p {
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	line-height: 1.8em;
	color: #CCC;
	text-shadow: 0 1px 1px #000;
}

#footer li a { /* IMPORTANT FOR TOOLTIP */
	text-decoration: none;
	text-indent: 0;
	text-shadow: 0 1px 1px #000;
}

#social li {
	display: block;
	float: left;
	margin-right: 5px;
	list-style-type: none;
}

#social li.facebook a, #social li.flickr a, #social li.vimeo a, #social li.xing a {
	display: block;
	height: 16px;
	width: 16px;
	text-indent: -9999px;
}
#social li.facebook a {
	background: transparent url(../images/social.png) no-repeat 0px 0px;
}
#social li.flickr a {
	background: transparent url(../images/social.png) no-repeat -16px 0px;
}
#social li.vimeo a {
	background: transparent url(../images/social.png) no-repeat -32px 0px;
}
#social li.xing a {
	background: transparent url(../images/social.png) no-repeat -48px 0px;
}

#social li.facebook a:hover {
	background-position: 0 -16px;
}
#social li.flickr a:hover {
	background-position: -16px -16px;
}	
#social li.vimeo a:hover {
	background-position: -32px -16px;
}
#social li.xing a:hover {
	background-position: -48px -16px;
}



/*####################
	FLICKR
####################*/
.flickr-thumbs {
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.flickr-thumbs li {
	list-style: none;
	float: left;
	margin-right: 13px;
	margin-bottom: 13px;
}
.flickr-thumbs li.last {
	margin-right: 0;
}
.flickr-thumbs li.bottom {
	margin-bottom: 0;
}
.flickr-thumbs li img {
	display: block;
}
.flickr-thumbs li a img {
	opacity: 0.7;
	-moz-opacity: 0.7;
}
.flickr-thumbs li a img:hover {
	opacity: 1;
	-moz-opacity: 1;
}


/*####################
	TWITTER
####################*/
.tweet-wrap {
	width: 260px;
	height: 123px;
	background: url(../images/bg_twitter.png) no-repeat;
}
.tweet {
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	color: #CCC;
	line-height: 1.8em;
	padding: 11px 15px;
}
.tweet a {
	font-weight: bold;
	color: #48A89B;
	text-decoration: none;
}
.tweet a:hover {
	color: #56CBBA;
}

.follow {
	margin-left: 135px;
 	margin-top: -25px;
}
.follow a {
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	font-weight: bold;
	font-weight: normal;
	color: #48A89B;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}
.follow a:hover {
	color: #56CBBA;
}