@charset "utf-8";
/* CSS Document */

body {margin: 0; padding: 0; height: 100%;}
#wrapper {width: 960px; margin:auto; height: 200px; padding: 5% 0 0 0;}
#options {margin: 50px 0 0 0;}
#options ul {margin: 0; padding: 0; display: inline;}
#options ul li {display: inline-block; width:215px; height:150px; border: 5px solid #00a9dc; margin: 5px;}
#options ul li:hover {box-shadow:  0 0 5px #00a9dc;}

#option1_button {background: url(images/option01_aboutme.jpg);}
#option2_button {background: url(images/option02_oldsite.jpg);}
#option3_button {background:url(images/option03_showreel.jpg)}
#option4_button {background:url(images/option04_work.jpg);}

div.hidden {visibility: hidden; display:block; width:215px; height: 150px; position: relative;}
div.hidden a {background:#00a9dc; display:block; width:205px; position: absolute; bottom: 0; text-decoration:none; color:#fff; font-family:Helvetica, sans-serif; font-size:12px; padding: 5px 5px 0 5px; font-weight: bold;}

#about_me {width: 100%; background:#00a9dc; padding: 10px 0;}
#about_me_wrap {margin: auto; width: 940px; text-align:right;}
#about_me a {color: #fff; text-decoration:none; font-weight: bold;}
#about_me a:hover {text-decoration: underline;}

div.slide {float: right; background: #00a9dc; margin: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 5px 10px 10px 10px; color:#fff; font-family: Helvetica, sans-serif; font-size: 10px; text-transform:uppercase;}
div.view {width: 960px; text-align: left;}
div.view p {color: #fff; font-family:Arial, Helvetica, sans-serif; font-size: 11px; margin: 0 0 5px 0;}
div.view p.heading {color: #fff; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight: bold; margin: 0 0 5px 0;}

div.col {float: left; width:360px; margin: 0 30px 0 0;}
div.clear {clear: both;}
img.portrait {float: left; margin: 0 20px -10px 0;}

#footer {margin: 50px 0 0 0; text-align: center;}
#footer ul {margin: auto; display: inline-block; list-style-type: none; padding:0;}
#footer ul li {display: inline-block; padding: 0 10px;}

a.f_link {display: block;}
a.steam {width: 54px; height:25px; background:url(images/steam.png);}
a.steam:hover {background: url(images/steam_ro.png);}
a.quakelive {width: 102px; height:25px; background:url(images/quakelive.png);}
a.quakelive:hover {background: url(images/quakelive_ro.png);}
a.lastfm {width: 79px; height:25px; background:url(images/lastfm.png);}
a.lastfm:hover {background: url(images/lastfm_ro.png);}
a.facebook {width: 60px; height:25px; background:url(images/facebook.png);}
a.facebook:hover {background: url(images/facebook_ro.png);}
a.twitter {width: 61px; height:25px; background:url(images/twitter.png);}
a.twitter:hover {background: url(images/twitter_ro.png);}
a.deviantart {width: 54px; height:25px; background:url(images/deviantart.png);}
a.deviantart:hover {background: url(images/deviantart_ro.png);}