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

body {
background:#222;
color:#f4f4f4;
font:bold 143.75% Delicious, Candara, "Myriad Condensed Web", Calibri, "Arial Narrow", "Helvetica Neue LT Std", "Helvetica Neue", Arial, Helvetica, sans-serif;
}

a#skip {
position:absolute;
left:-9999px;
top:1em;
width:1px;
height:1px;
overflow:hidden;
}
a#skip:active, a#skip:focus {
left:1em;
width:auto;
height:auto;
border:dotted 1px orange;
} 

a:link,
a:visited,
a:hover,
a:active {
color:inherit;
text-decoration:none;
border-bottom:solid 3px #222;
}
a:hover {
border-color:#f4f4f4;
}

#container {
margin:2em auto 0;
width:36em;
}

footer {
clear:both;
font-size:0.75em;
color:#000;
text-align:center;
margin-bottom:3em;
}

h1, h2 {
text-shadow:1px 3px 1px #111;
}
h2 {
margin:1.5em 0 0.75em;
}

#cloud {
background:#111;
padding:0.5em 1em;
margin:0 -1em;
text-align:justify;
line-height:175%;
}

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

html.js #cloud span {
visibility:hidden;
}

#cloud .p1 { font-size:1.8em; }
#cloud .p2 { font-size:1.3em; }
#cloud .p3 { font-size:.9em; opacity:0.7; }
#cloud .p4 { font-size:.7em; opacity:0.4; }
#cloud .p5 { font-size:.65em; opacity:0.2; }

.iam { color:#f1092a; }
.idea { color:#98ef4d; }
.skill { color:orange; }

#contactcontent {
background:#111;
padding:0.5em 1em;
margin:0 -1em;
line-height:150%;
}

#portfolio ul {
list-style:none;
margin:0 -1em;
padding:0;
}
#portfolio ul li {
overflow:hidden;
background:#111;
padding:0 1em 1em;
margin-bottom:2em;
}
#portfolio li header {
font-size:1em;
text-shadow:1px 3px 1px #222;
margin:1.25em 0 1.5em;
overflow:hidden;
}
#portfolio li header h3 {
float:left;
margin:0;
}
#portfolio li header a {
float:right;
color:#3cc;
opacity:0.8;
padding-top:0.15em;
}
#portfolio li header a:hover {
opacity:1;
}
#portfolio p {
font-size:0.75em;
width:12.5em;
}
#portfolio p.minor {
font-size:0.6em;
width:14.875em;
}
#portfolio p a {
border:none;
text-decoration:underline;
}
#portfolio img {
float:right;
}
#portfolio p.skills { color:orange; }
#portfolio p.tech { color:#f1092a; }

#contactform {
display:none;
background:#fff;
margin:1.5em 0 .5em;
}
#contactform small {
color:#444;
text-decoration:underline;
text-align:right;
cursor:pointer;
padding:.5em;
float:right;
}
#contactform iframe {
width:100%;
height:670px;
border:0;
}

#cloud, #contact div, #portfolio li {
box-shadow:0 0 30px #333;
-moz-box-shadow:0 0 30px #333;
-webkit-box-shadow:0 0 30px #2c2c2c;
border-radius:.5em;
-moz-border-radius:.5em;
-webkit-border-radius:.5em;
}