/********** =core | =layout **********/

html, body {background: #298ea0;}

body 
{
font-size: 62.5%;
line-height: 1.385;
font-family: "Lucida Grande", "Lucida Sans Unicode", Corbel, Arial, Helvetica, sans-serif;
background: url("/img/noisy.jpg") repeat-x fixed;
}

body, 
.work li a span 
{
color: #acdde5;
}

h1, 
#intro a span, 
.vcard .work, 
.vcard .web
{
display: block;
position: absolute;
left: -200em;
}


/* =sections | =contents */

.section 
{
max-width: 100em;
margin: 30px auto;
position: relative;
}

.contents em {font-style: normal;}


/* =links | =selections */

a, a:link, 
.work li a span strong
{
text-decoration: none;
color: #4de4ff;
}

a:hover, 
#top .tel:hover, 
.work li a:hover .caption
{
background-color: #18408c;
color: #fff;
-border-radius: 3px; 
-moz-border-radius: 3px; 
-o-border-radius: 3px; 
-webkit-border-radius: 3px;
}

.preamble a:hover 
{
-border-radius: 5px; 
-moz-border-radius: 5px; 
-o-border-radius: 5px; 
-webkit-border-radius: 5px; 
}

a:active
{
margin-top: 1px; /* Doffs cap to http://timvandamme.com */
}

::selection {background: #18408c; color: #fff;}
::-moz-selection {background: #18408c; color: #fff;}
::-o-selection {background: #18408c; color: #fff;}
::-webkit-selection {background: #18408c; color: #fff;}



/********** =typography **********/

#intro 
{
font-size: 410%;
font-family: "museo-1", "museo-2", "Lucida Grande", "Lucida Sans Unicode", Corbel, Arial, Helvetica, sans-serif;
font-weight: 100 !important;
line-height: 1.1;
color: #acdde5;
}

h2, .h2, 
h3, .h3, 
.preamble
{
font-family: "museo-1", "museo-2", "Lucida Grande", "Lucida Sans Unicode", Corbel, Arial, Helvetica, sans-serif;
font-weight: 500 !important;
line-height: 1.33;}

h2, .h2 {font-size: 207.7%; }
h3, .h3 {font-size: 138.46%; margin-top: 0.67em;}
h4, .h4 {font-size: 115.38%; font-weight: bold;}



/********** =top **********/

#top {background: url("/img/top_bg.png") repeat-x 0 100%;}

#top:hover {color: #fff;}

#top .section {height: 50px; margin-top: 0;}

#top #header 
{
position: absolute;
top: 5px; 
right: 60px;
font-size: 150%;
width: 29em;
overflow: hidden;
}

#top strong, 
#top ul, 
#top li, 
#top .tel span, 
#top .tel a
{
display: block; 
float: left;
}

#top strong {margin: 6px 4px;} 
#top strong:after {content: ": ";}

#top .tel, #top .tel:hover {padding-right: 7px;}
#top .tel a {margin-top: 6px;}

#top .email a, 
#top .tel span, 
#top .vcard a, 
#top .web a 
{
display: block; 
width: 44px; 
height: 34px;
text-indent: -200em;
background-image: url("/img/icns_top.png");
background-repeat: no-repeat;
}

#top .email a:hover {background-position: 0 -50px;}

#top .tel span {background-position: -50px 0;}
#top .tel span:hover {background-position: -50px -50px;}

#top .vcard a  {background-position: -100px 0;}
#top .vcard a:hover  {background-position: -100px -50px;}

#top .web a    {background-position: -150px 0;}
#top .web a:hover    {background-position: -150px -50px;}



/********** =preamble | intro/outro **********/

.preamble {padding: 0 10px;}

#intro {padding: 80px 50px 0;}

#intro strong 
{
color: white;
font-weight: 500 !important;
}

#intro .cap 
{
display: block;
float: left;
position: relative;
top: -80px;
left: -50px;
margin: 0 -45px -80px 0;
width: 214px;
height: 214px;
background: url("/img/brand.png") no-repeat;
text-indent: -200em;
}

#outro {color: #b0ffc4;}



/********** =work **********/

.work 
{
margin-left: 60px;
font-size: 130%;
}

.work h2 
{
margin-top: 40px;
margin-right: 60px;
border-top: 3px dashed #57abb8;
padding-top: 10px;
}

.work p 
{
font-size: 123.1%;
line-height: 1.5;
color: #fff;
margin: 0.63em 60px 1.25em 0;
}

.work ul 
{
width: 100%;
overflow: hidden;
}

.work li 
{
float: left;
padding-right: 20px;
width: 430px;
text-align: center;
position: relative;
}

.work img 
{
background: url("/img/black_20.png");
padding: 20px;
margin-bottom: 7px;
-border-radius: 16px;
-moz-border-radius: 16px;
-o-border-radius: 16px;
-webkit-border-radius: 16px;
}

.work li a .overlay 
{
display: none;
position: absolute;
top: 20px;
left: 20px;
width: 390px;
height: 230px;
}

.work li a:hover .overlay 
{
display: block;
background: transparent url("/img/overlay_blue.png");
}

.work li .caption 
{
display: inline-block;
padding: 3px 5px;
}


/********** =footer **********/

#footer 
{
margin-top: 75px;
border-top: 6px solid #57abb8;
background: url("/img/black_50.png");
}

#footer a:hover {background-color: #011029;}

#footer .contents 
{
max-width: 88em;
padding-bottom: 100px;
overflow: hidden;
margin: auto;
position: relative;
/* 
-o-opacity: 0.5;
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
opacity: 0.5;
}

#footer .contents:hover 
{
opacity: 1;
-o-opacity: 1;
-moz-opacity: 1;
-webkit-opacity: 1;
*/
}

#footer .vcard, 
#elsewhere, 
#techspec
{
font-size: 130%; 
padding-top: 80px;
}

.column 
{
float: left;
width: 23%;
padding-right: 2%;
}

.half  {width: 48%;}
.third {width: 31%;}

#jonathan {max-width: 250px;}
#liz {width: 44%;}

#footer li {margin-top: 0.462em;}


/* =elsewhere */

#elsewhere h2, 
#elsewhere h3, 
#elsewhere p
{
padding-left: 5px;
}

#footer #elsewhere li 
{
margin-top: 3px;
}

#elsewhere a, 
#elsewhere a:hover 
{
display: block;
padding: 6px 4px 6px 34px;
background-image: url("/img/icns_elsewhere.png"); 
background-repeat: no-repeat; 
}

#elsewhere .delicious a  {background-position: 0 0;}
#elsewhere .delicious a:hover  {background-position: 0 -100px;}

#elsewhere .facebook a   {background-position: -250px 0;}
#elsewhere .facebook a:hover   {background-position: -250px -100px;}

#elsewhere .gplus a   {background-position: -1750px 0;}
#elsewhere .gplus a:hover   {background-position: -1750px -100px;}

#elsewhere .lastfm a     {background-position: -500px 0;}
#elsewhere .lastfm a:hover     {background-position: -500px -100px;}

#elsewhere .linkedin a   {background-position: -750px 0;}
#elsewhere .linkedin a:hover   {background-position: -750px -100px;}

#elsewhere .thenews a    {background-position: -1000px 0;}
#elsewhere .thenews a:hover    {background-position: -1000px -100px;}

#elsewhere .posterous a  {background-position: -1250px 0;}
#elsewhere .posterous a:hover  {background-position: -1250px -100px;}

#elsewhere .twitter a    {background-position: -1500px 0;}
#elsewhere .twitter a:hover    {background-position: -1500px -100px;}


/* =vcard | =techspec | =go_top*/

#footer #get_vcard, 
#footer #go_top 
{
display: block; 
position: absolute;
top:20px;
left: 0; 
width: 174px;
height: 50px;
text-indent: -200em;
background: transparent url("/img/get_vcard.png") no-repeat;
}

#footer #go_top 
{
left: 66%; 
width: 174px;
height: 50px;
background: transparent url("/img/go_top.png") no-repeat;
}

#footer #get_vcard:hover, 
#footer #go_top:hover 
{
background-position: 0 -60px;
}

#footer .vcard p, 
#techspec ul, 
#jonathan p
{
margin-top: 1.23em;
}

.vcard .org {font-weight: bold;}

#footer .vcard .adr {margin-top: 0;}

.vcard .country-name {white-space: nowrap;}