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

body {
	font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
	font-size:13px;
	background-color:#FFFFFF;
	margin-top:35px;
}

#main {
	width:800px;
	height:529px;
	background-color:none;
	margin:auto;
}

#frame {
	width:550px;
	height:528px;
	background-color:#FFF;
	margin:13px 0px 0px 260px;
	position:absolute;
}

a img {border: none;}


.thumbnail {
   width:132px;
   height:132px;
   padding:2px;
   background-color:#FFFFFF;
   position:relative;
   float:left;
}

.thumbnail:hover {opacity:0.5; filter: alpha(opacity=50); }

#menu {
width:90px;
height:100px;
position:absolute;
margin:146px 0 0 10px;
z-index:1;
}

#logo {
	width:240px;
	height:501px;
	margin:20px 0px 0px -10px;
	position:absolute;
	z-index:0;
}

#logo:hover{background-position: 0 -123px;}

.freelance {
	width:211px;
	height:27px;
	background-image:url(images/freelance.gif);
	margin:212px 0px 0px 0px;
	position:absolute;}

#lolly{display: block; float:left; width: 28px; height: 25px; margin: 4px -4px; background: url("images/lolly.gif") no-repeat 0 0;}
#lolly:hover{background-position: 0 -25px;}

#flickr{display: block; float:left; width: 48px; height: 25px; margin: 4px 5px; background: url("images/flickr.gif") no-repeat 0 0;}
#flickr:hover{background-position: 0 -25px;}

#twitter{display: block; float:left; width: 20px; height: 25px; margin: 5px -1px; background: url("images/twitter.gif") no-repeat 0 0;}
#twitter:hover{background-position: 0 -25px;}

#behance{display: block; float:left; width: 24px; height: 25px; margin: 4px 7px; background: url("images/behance.gif") no-repeat 0 0;}
#behance:hover{background-position: 0 -25px;}


#footer {
	width:548px;
	height:25px;
	clear: both;
        z-index:1;
	
}

#blog{display: block; float:left; width: 31px; height: 21px; margin: 4px 0px; background: url("images/blog.gif") no-repeat 0 0;}
#blog:hover{background-position: 0 -21px;}
#client{display: block; float:left; width: 73px; height: 17px; margin: 5px -1px; background: url("images/client.gif") no-repeat 0 0;}
#client:hover{background-position: 0 -17px;}
#personal{display: block; float:left; width: 90px; height: 15px; margin: 8px 0px; background: url("images/personal.gif") no-repeat 0 0;}
#personal:hover{background-position: 0 -15px;}
#mail{display: block; float:left; width: 52px; height: 16px; margin: 9px 0px; background: url("images/mail.gif") no-repeat 0 0;}
#mail:hover{background-position: 0 -16px}
#design{display: block; float:left; width: 42px; height: 19px; margin: 1px 0px; background: url("images/design.gif") no-repeat 0 0;}
#design:hover{background-position: 0 -19px}
#illustration{display: block; float:left; width: 65px; height: 16px; margin: 4px 0px; background: url("images/illustration.gif") no-repeat 0 0;}
#illustration:hover{background-position: 0 -16px}
#photography{display: block; float:left; width: 80px; height: 19px; margin: 3px 0px; background: url("images/photography.gif") no-repeat 0 0;}
#photography:hover{background-position: 0 -19px}

.hide {position:absolute; left: -9000px;}


.toggle_container {
	width: 100px;
	clear: both;
}

.muse {
padding-top:40px;
padding-bottom:5px;
}

.iain {
padding-top:10px;
padding-bottom:10px;
}