/* HTML5 elements */
header, footer, nav, article, section {display:block;}

@font-face {
/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
font-family: 'DeliciousRoman';
font-style: normal;
font-weight: normal;
/* The New Bulletproof @Font-Face Syntax
   http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax */
src: url('delicious-roman-webfont.eot#') format('eot'),
     url('delicious-roman-webfont.woff') format('woff'),
     url('delicious-roman-webfont.ttf') format('truetype'),
     url('delicious-roman-webfont.svg#webfontYrxp2Yyp') format('svg');
}

body {
background:#f7f6f2 url(crazykira-resources_23.jpg);
color:#222;
font:normal 18px DeliciousRoman, Delicious, "Myriad Condensed Web", "Arial Narrow", Candara, sans-serif;
}

a:link,
a:visited,
a:hover,
a:active {
color:#222;
}

#container {
margin:1em auto 0;
width:46em;
}
section {
clear:both;
}

footer {
clear:both;
font-size:0.8888em;
text-align:center;
margin-bottom:3em;
}
#colophon {
opacity:.7;
font-size:.875em;
}
#colophon code {
font-size:.857em;
}

h1, h2, h3 {
font-weight:normal;
text-shadow:1px 1px 2px #fff;
}
header {
background:rgba(255, 255, 255, .8) url(fabian-meer78.jpg) 1em 1em no-repeat;
margin:0 -1em 2em;
padding:1em;
width:270px;
float:left;
}
h1 {
font-size:1.17em;
margin:0 0 2em 95px;
}
h1 small {
font-size:1em;
}
header p {
clear:both;
font-size:0.888em;
}

h2 {
margin:1.5em 0 1em;
text-shadow:1px 1px 1px #fff;
}

#cloud {
margin:0 -1em 0 17.25em;
text-align:justify;
line-height:150%;
text-shadow:1px 1px 1px #fff;
color:#bbb;
}

#cloud span {
padding:0.1em 0.2em;
padding-left:0;
color:#222;
}

#cloud .p1 { font-size:1em; }
#cloud .p2 { font-size:1em; }
#cloud .p3 { font-size:1em; opacity:0.7; }
#cloud .p4 { font-size:1em; opacity:0.4; }
#cloud .p5 { font-size:1em; opacity:0.2; }

#portfolio ul {
list-style:none;
margin:0 -1em;
padding:0;
}
#portfolio li {
overflow:hidden;
margin-bottom:3em;
}
#portfolio li header {
width:200px;
float:left;
font-size:1em;
margin:0 0 1em;
overflow:hidden;
background:rgba(255, 255, 255, .8);
padding:1em;
}
#portfolio li header h3 {
float:left;
margin:0 0 1em;
}
#portfolio li header > a {
color:#3cc;
}
#portfolio li img {
border:solid 10px #fff;
}
#portfolio p {
font-size:0.8888em;
}
#portfolio p a {
border:none;
text-decoration:underline;
}
#portfolio img {
float:right;
margin-bottom:3px;
}
#portfolio p.skills,
#portfolio p.tech,
#portfolio p.minor {
clear:both;
float:left;
background:rgba(255, 255, 255, .8);
margin:0 0 3px 244px;
padding:.25em .5em;
width:auto;
}

#contactform {
display:none;
background:rgba(255, 255, 255, .8);
margin:0 -1em;
}
#contactform small {
color:#222;
text-decoration:underline;
text-align:right;
cursor:pointer;
padding:.5em;
float:right;
}
#contactform iframe {
width:100%;
height:670px;
border:0;
}