html,body,div,span,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,blockquote,pre,form,fieldset,table,th,td {
margin: 0;
padding: 0
}
html {
height: 101%
}
body {
width: 100%;
overflow-x: hidden;
font: normal 16px/20px Arial,Helvetica,sans-serif;
color: #72726e;
background-color: #f9f9f2
}
h1 {
margin: 0;
padding: 0;
background-color: #181818;
color: #01a3b2;
font: normal 300px/300px Arial,Helvetica,sans-serif;
text-shadow: 0 1px 0 #999
}
a {
outline: none;
color: #01a3b2;
text-decoration: none
}
a:hover {
color: #323130;
text-decoration: underline
}
a:active {
position: relative;
top: 1px
}
:focus {
-moz-outline-style: none
}
.clear {
clear: both
}
embed#detectionExample {
z-index: 1;
display: block
}
table {
border-collapse: collapse;
width: 100%;
margin: 0 10px
}
td {
border: none 0;
padding: 10px;
font-size: 14px;
height: 30px;
vertical-align: middle;
color: #9a9a91
}
td.td1,td.td2,td.td3,td.td4 {
border-bottom: 2px dotted #ddddd2
}
td.td1,td.td1 a {
font: italic 22px/24px Georgia,Palatino,Times New;
color: #72726E;
text-decoration: none
}
td.td1 a:hover {
color: #01A3B2
}
td.td1 span {
display: block;
font: 12px/22px Arial,Helvetica,sans-serif;
color: #9a9a91
}
td.td1 span a {
font: 12px/22px Arial,Helvetica,sans-serif;
text-decoration: none;
color: #9a9a91
}
td.td1 span a:hover {
color: #01A3B2
}
td.td2 p,td.td3 p {
border-right: 1px solid #ddddd2
}
td.td2 p {
border-left: 1px solid #ddddd2;
text-align: center
}
td.td4 {
border-right: none 0
}
td.td4 a {
display: block;
width: 20px;
height: 20px;
background: url('../images/layout/complete_list_link.png') no-repeat top left;
text-indent: -10000px
}
thead {
text-align: left;
background: #ebebe6;
border-bottom: 1px solid #ddddd2
}
th {
padding: 10px;
text-transform: uppercase;
font-size: 11px
}
.slim {
width: 88px
}
.hover {
background-color: #ebebe6
}
#wrapper {
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow-x: hidden;
display: none
}
#mask {
width: 1800%
}
.kick-me-to- {
width: 5.0%;
float: left
}
#inner_wrapper {
width: 960px;
margin: 0 auto;
margin-top: 40px;
position: relative
}
.inner_wrapper_portfolio {
width: 960px;
margin: 0 auto;
position: relative
}
#language_select {
z-index: 100;
width: 400px;
height: 200px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
background: #FFF;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px
}
#language_select ul {
display: block;
width: 310px;
height: 175px;
background: url('../images/layout/language_select_bg.jpg') no-repeat top left;
margin: 15px 47px 0 47px
}
#language_select ul li {
float: left;
margin-top: 127px;
list-style: none
}
#language_select ul li a span {
display: none
}
#language_select ul li.english a {
display: block;
width: 137px;
height: 40px;
margin-right: 26px;
background: url('../images/layout/language_select_english.jpg') no-repeat top left
}
#language_select ul li.english a:hover {
background: url('../images/layout/language_select_english_rol.jpg') no-repeat top left
}
#language_select ul li.deutsch a {
display: block;
width: 147px;
height: 40px;
background: url('../images/layout/language_select_deutsch.jpg') no-repeat top left
}
#language_select ul li.deutsch a:hover {
background: url('../images/layout/language_select_deutsch_rol.jpg') no-repeat top left
}
.black_overlay {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 1800px;
background-color: black;
z-index: 99;
-moz-opacity: 0.9;
opacity: .90;
filter: alpha(opacity=90)
}
#header {
height: 70px
}
#header .left_column {
width: 383px;
height: 70px;
display: block;
float: left;
border-left: 2px solid #f4f0e7
}
#header .left_column img {
margin: 15px 0 0 15px
}
#header .middle_column {
width: 383px;
height: 70px;
display: block;
float: left;
border-left: 2px solid #f4f0e7
}
#header .middle_column img {
margin: 41px 0 0 15px
}
#header .right_column {
width: 188px;
height: 70px;
display: block;
float: left;
border-left: 2px solid #f4f0e7
}
#header .right_column .twitter ul {
list-style: none
}
#header .right_column .twitter ul li a {
position: absolute;
text-indent: -10000px;
margin-left: 15px;display block;
width: 167px;
height: 104px;
background: url(../images/layout/twitter.gif) top left no-repeat
}
#header .right_column .twitter ul li a:hover {
background: url(../images/layout/twitter_roll.gif) top left no-repeat
}
.block_title {
width: 960px;
height: 24px;
display: block;
margin: 35px 0 25px 0;
font-size: 10px;
color: #252323;
text-transform: uppercase;
border-bottom: 2px solid #f4f0e7
}
.block_title .left_column {
width: 770px;
display: block;
float: left
}
.block_title .right_column {
width: 190px;
display: block;
float: left
}
.block_title_last {
width: 960px;
height: 24px;
display: block;
margin: 0 0 25px 0;
font-size: 10px;
border-bottom: 2px solid #f4f0e7
}
.me {
display: block
}
.me .left_column_de {
width: 325px;
display: block;
float: left;
padding-right: 45px;
margin-left: 15px;
display: none
}
.me .middle_column_de {
width: 340px;
display: block;
float: left;
padding-right: 45px;
display: none
}
.me .left_column_en {
width: 325px;
display: block;
float: left;
padding-right: 45px;
margin-left: 15px
}
.me .middle_column_en {
width: 340px;
display: block;
float: left;
padding-right: 45px
}
.me .right_column {
width: 190px;
display: block;
float: left
}
.me .right_column .photo_me {
display: block;
padding-bottom: 25px;
border-bottom: 2px solid #f4f0e7
}
.me .right_column .nerdie_skills {
display: block;
margin-top: 15px;
font-size: 10px;
color: #252323;
text-transform: uppercase
}
.me .right_column .nerdie_skills ul {
margin-top: 15px;
display: block;
width: 190px;
height: 187px;
background: url(../images/layout/stat_nerdie_skills.jpg) top left no-repeat;
list-style: none
}
.me .right_column .nerdie_skills ul li {
margin: 5px 0 10px 15px
}
.portfolio {
display: block
}
.portfolio .left_column {
width: 725px;
display: block;
float: left;
padding-right: 45px
}
.portfolio .left_column ul {
list-style: none
}
.portfolio .left_column ul li {
background: transparent url(../images/layout/imgshadow.jpg) no-repeat scroll center top;
display: inline;
float: left;
margin: 6px;
padding: 6px 13px 12px 15px;
text-align: center
}
.portfolio .left_column ul li a {
color: #777;
display: block;
text-decoration: none;
border: none
}
.portfolio .left_column ul li a.thumb {
cursor: pointer;
height: 140px;
width: 140px
}
.portfolio .left_column ul li span {
width: 140px;
height: 140px;
overflow: hidden;
display: block
}
.portfolio .left_column .complete_list_box {
display: none;
width: 725px;
float: left;
padding-right: 45px
}
.portfolio .right_column {
width: 190px;
display: block;
float: left;
margin: 15px 0 60px 0;
line-height: 24px
}
.portfolio .right_column ul.catpicker {
list-style: none
}
.portfolio .right_column ul.catpicker li {
margin-right: 10px;
float: left
}
.portfolio .right_column ul.catpicker li a {
text-decoration: none;
display: block;
margin: 0 5px 5px 0;
color: #72726e;
font-size: 16px
}
.portfolio .right_column ul.catpicker li a:hover {
color: #01A3B2
}
.portfolio .right_column ul.catpicker li a.current {
color: #01A3B2
}
ul.list_overview li {
list-style: none;
display: block;
margin-top: 10px;
border-top: 2px solid #F4F0E7;
}
a#complete_list {
display: block;
margin-top: 5px;
font-size: 12px;
text-decoration: none;
color: #72726e
}
a:hover#complete_list {
font-size: 12px;
text-decoration: none;
color: #01A3B2
}
.portfolio_content_wrapper {
width: 960px;
margin: 0 auto;
position: relative;
background-color: #000
}
.portfolio_content_wrapper a:hover {
color: #01A3B2
}
.portfolio_content_wrapper .column_left {
display: block;
float: left;
width: 45px;
padding-top: 500px;
background: #323130;
height: 1250px
}
.portfolio_content_wrapper .column_left a {
display: block;
background: url(../images/layout/portfolio_arrow_left.jpg) no-repeat top left;
width: 45px;
height: 110px
}
.portfolio_content_wrapper .column_left a:hover {
background: url(../images/layout/portfolio_arrow_left_roll.jpg) no-repeat top left
}
.portfolio_content_wrapper .column_right a {
display: block;
background: url(../images/layout/portfolio_arrow_right.jpg) no-repeat top left;
width: 45px;
height: 110px
}
.portfolio_content_wrapper .column_right a:hover {
background: url(../images/layout/portfolio_arrow_right_roll.jpg) no-repeat top left
}
.portfolio_content_wrapper .column_middle {
display: block;
float: left;
width: 820px;
padding: 25px 25px 0 25px;
background-color: #000
}
.portfolio_content_wrapper .column_middle .column_left_top {
display: block;
float: left;
width: 525px;
height: 35px;
padding-right: 20px
}
.portfolio_content_wrapper .column_middle .column_right_top {
display: block;
float: left;
width: 35px;
height: 35px;
margin-left: 240px
}
.portfolio_content_wrapper .column_middle .column_left_text_de {
display: none;
float: left;
width: 480px;
padding-right: 40px;
margin: 20px 0 25px 0;
font: normal 14px/18px Arial,Helvetica,sans-serif;
color: #FFF
}
.portfolio_content_wrapper .column_middle .column_left_text_en {
display: block;
float: left;
width: 480px;
padding-right: 40px;
margin: 20px 0 25px 0;
font: normal 14px/18px Arial,Helvetica,sans-serif;
color: #FFF
}
.portfolio_content_wrapper .column_middle .column_right_text {
display: block;
float: left;
width: 279px;
padding-left: 20px;
border-left: 1px solid #fff;
margin: 20px 0 25px 0;
font: normal 14px/18px Arial,Helvetica,sans-serif;
color: #FFF
}
.portfolio_content_wrapper .column_middle .column_middle_images {
display: block;
width: 820px;
height: 1540px
}
.portfolio_content_wrapper .column_middle .column_middle_images img {
margin-bottom: 25px
}
.portfolio_content_wrapper .column_right {
display: block;
float: left;
width: 45px;
padding-top: 500px;
background: #323130;
height: 1250px
}
#footer {
width: 100%;
height: 570px;
background: #323130
}
.footer_content {
padding: 0;
position: absolute;
width: 960px;
left: 50%;
margin-left: -480px;
text-align: left
}
.footer_content .left_column {
display: block;
float: left;
width: 580px
}
.footer_content .left_column ul {
margin: 50px 0 70px 55px
}
.footer_content .left_column li {
margin-bottom: 25px;
list-style: none
}
.footer_content .left_column li.blog a {
text-indent: -1000px;
margin-bottom: -10px;
display: block;
width: 170px;
height: 85px;
text-decoration: none;
background: url('../images/layout/footer_blog.gif') no-repeat top left
}
.footer_content .left_column li.blog a:hover {
background: url('../images/layout/footer_blog_roll.gif') no-repeat top left
}
.footer_content .left_column li.behance a {
text-indent: -1000px;
display: block;
width: 339px;
height: 65px;
text-decoration: none;
background: url('../images/layout/footer_behance.gif') no-repeat top left
}
.footer_content .left_column li.behance a:hover {
background: url('../images/layout/footer_behance_roll.gif') no-repeat top left
}
.footer_content .left_column li.flickr a {
text-indent: -1000px;
display: block;
width: 209px;
height: 64px;
text-decoration: none;
background: url('../images/layout/footer_flickr.gif') no-repeat top left
}
.footer_content .left_column li.flickr a:hover {
background: url('../images/layout/footer_flickr_roll.gif') no-repeat top left
}
.footer_content .left_column li.linkedin a {
text-indent: -1000px;
display: block;
width: 323px;
height: 61px;
text-decoration: none;
background: url('../images/layout/footer_linkedin.gif') no-repeat top left
}
.footer_content .left_column li.linkedin a:hover {
background: url('../images/layout/footer_linkedin_roll.gif') no-repeat top left
}
.footer_content .left_column li.xing a {
text-indent: -1000px;
display: block;
width: 171px;
height: 84px;
text-decoration: none;
background: url('../images/layout/footer_xing.gif') no-repeat top left
}
.footer_content .left_column li.xing a:hover {
background: url('../images/layout/footer_xing_roll.gif') no-repeat top left
}
.footer_content .right_column {
display: block;
float: left;
width: 380px
}
#contactable {
text-indent: -100000px;
margin-top: 30px
}
#contactForm {
height: 450px;
width: 360px;*width:394px;
z-index: 99
}
form#contactForm input,textarea {
background: #464543 none repeat scroll 0 0;
width: 325px;
padding: 10px;
border: 0px!important;
border-color: #20201e;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 10px;
color: #72726E;
font-size: 25px;
font-family: Arial,Helvetica,sans-serif
}
form#contactForm .submit {
background: #464543 none repeat scroll 0 0;
border: 0px!important;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 200px;
padding: 5px;
cursor: pointer;
color: #72726E;
font-size: 25px;
text-transform: uppercase;
font-weight: bolder;
margin-top: 10px
}
form#contactForm p {
width: 325px;
font-size: 0.9em
}
form#contactForm .disclaimer {
display: none
}
#contactForm .red {
color: #01A3B2
}
#overlay {
background-color: #666;
display: none;
height: 100%;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0
}
.error {
background-color: #EDBE9C
}
#name.error {
background-color: #9b4c46
}
#email.error {
background-color: #9b4c46
}
#comment.error {
background-color: #9b4c46
}
form#contactForm label {*margin-left:20px;
display: block;
margin: 12px 0 -10px 0;
font-size: 25px
}
form#contactForm label.error {
margin: 0;
padding: 0
}
form#contactForm #loading {
background: url(../images/layout/ajax-loader.gif) no-repeat;
width: 55px;
height: 55px;
margin-top: 52px;
display: none
}
#callback {
font-size: 25px;
width: 325px;
margin-top: 52px;
display: none
}
.holder {
margin: 0 auto;*margin-left:20px;
padding-top: 20px
}
noscript div {
width: 100%;
overflow: hidden;
background-color: #a02424;
color: #FFF;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 30px;
text-align: center
}
noscript div a {
color: #FFF
}
noscript div a:hover {
color: #000
}