*
{ margin:0px; padding:0px; border:0px; }

html, body 
{ height:100%; }

body
{ background:#fff; text-align:center; }

a
{ display:block; position:absolute; background:none; height:14px; line-height:100%; font-size:1%; }

a:hover
{ background:url(hover.gif) left 50% no-repeat; }

#distance 
{ width:1px; height:50%; background-color:#fff; margin-bottom:-340px; float:left; }

#container 
{ margin:0px auto; position:relative; text-align:left; height:720px; width:744px; clear:left; background:url(background.jpg) 50% 50% no-repeat; padding:40px; }

.films
{ width:58px; top:138px; left:214px; }

.commercials
{ width:110px; top:154px; left:206px; }

.documentaries
{ width:124px; top:168px; left:222px; }

.shorts
{ width:66px; top:182px; left:222px;}

.stills
{ width:66px; top:196px; left:214px; }

.clubbing
{ width:82px; top:202px; left:528px; }

.dj
{ width:34px; top:216px; left:544px; }

.mixing
{ width:66px; top:231px; left:534px; }

.projects
{ width:82px; top:496px; left:344px; }

.screenwriting
{ width:126px; top:510px; left:334px;}

.journalism
{ width:100px; top:524px; left:364px; }

.blog, .myspace, .youtube, .facebook, .mail
{ height:24px; line-height:100%; font-size:1%; }

a.blog:hover
{ background:url(blog.jpg) top left no-repeat }

a.myspace:hover
{ background:url(myspace.jpg) top left no-repeat }

a.youtube:hover
{ background:url(youtube.jpg) top left no-repeat }

a.facebook:hover
{ background:url(facebook.jpg) top left no-repeat }

a.mail:hover
{ background:url(mail.jpg) top left no-repeat }

.blog
{ width:58px; top:637px; left:183px; }

.myspace
{ width:78px; top:637px; left:294px; }

.youtube
{ width:104px; top:637px; left:413px; }

.facebook
{ width:84px; top:637px; left:564px; }

.mail
{ width:180px; top:684px; left:316px; }