@import url('reset.css');

body {
	text-align:center;
	font:12px Georgia, "Times New Roman", Times, serif;
	color:#000000;
	background:url(../images/wallpaper.jpg) center repeat;
}
/* Layout
-------------------------------------------------- */

html, body{
	height:100%;
	min-height:200px;
	} 
html,body {
	margin:0;
	padding:0
	} 
#wrapper {
	width:100%;
	text-align:left;
	min-height:100%;
	height:auto;
	}
* html #wrapper{
	height:100%;
	} 
*html #main {
	height:300px;
	}
#main {
	float:left;
}
.home #wrapper{
	background:url(../images/bg.jpg) center bottom repeat-x;
	}
.home #main{
	background:none;
	}

/* Menu
-------------------------------------------------- */

#menu {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}
#menu span {
	display: none;
	position: absolute;
}
#menu a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}
#menu a:hover {
	background-position: left bottom;
}
#menu a:hover span{
	display: block;
}

#menu .home {
	width: 322px;
	height: 123px;
	background: url(../images/home.png) no-repeat;
	left: 48px;
	top: 32px;
	z-index: 999;
}
#menu .about {
	width: 179px;
	height: 46px;
	background: url(../images/about.png) no-repeat;
	left: 102px;
	top: 174px;
	z-index: 999;
}
#menu .about span {
	width: 110px;
	height: 25px;
	background: url(../images/about-over.png) no-repeat;
	left: -10px;
	top: -20px;
	z-index: 999;
}
#menu .portfolio {
	width: 179px;
	height: 46px;
	background: url(../images/portfolio.png) no-repeat;
	left: 102px;
	top: 224px;
	z-index: 999;
}
#menu .portfolio span {
	width: 110px;
	height: 25px;
	background: url(../images/portfolio-over.png) no-repeat;
	left: 145px;
	top: -7px;
	z-index: 999;
}
#menu .contact {
	width: 179px;
	height: 46px;
	background: url(../images/contact.png) no-repeat;
	left: 102px;
	top: 273px;
	z-index: 999;
}
#menu .contact span {
	width: 110px;
	height: 25px;
	background: url(../images/contact-over.png) no-repeat;
	left: 36px;
	top: 45px;
	z-index: 999;
}





/* Elements
-------------------------------------------------- */

#elements {
	width:1000px;
	position:absolute;
	left:50%;
	margin-left:-640px;
	bottom:0;
	text-align:left; 
}

#anims {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}
#anims span {
	display: none;
	position: absolute;
}
#anims a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
	left: 7px;
	top: -71px;
	
}
#anims a:hover {
	background-position: left bottom;
}
#anims a:hover span{
	display: block;
}

#anims .clyde {
	position:absolute;
	width: 104px;
	height: 79px;
	background: url(../images/clyde.gif) no-repeat;
	left: 617px;
	top: -346px;
}
#anims .clyde span {
	width: 110px;
	height: 25px;
	background: url(../images/clyde-over.png) no-repeat;
	left: 12px;
	top: -28px;
}
#anims .treerat {
	position:absolute;
	width: 38px;
	height: 75px;
	background: url(../images/treerat.gif) no-repeat;
	left: 790px;
	top: -341px;
}
#anims .treerat span {
	width: 110px;
	height: 25px;
	background: url(../images/treerat-over.png) no-repeat;
	left: 40px;
	top: 0px;
}




#anims .clockanim {
	position:absolute;
	width: 36px;
	height: 110px;
	background: url(../images/clockanim.gif) no-repeat;
	left: 973px;
	top: -244px;
}

#anims .budgies {
	position:absolute;
	width: 68px;
	height: 60px;
	background: url(../images/budgies.gif) no-repeat;
	left: 234px;
	top: -296px;

}
#anims .budgies span {
	width: 110px;
	height: 25px;
	background: url(../images/budgies-over.png) no-repeat;
	left: 65px;
	top: -45px;
}

#anims .twitteranim {
	position:absolute;
	width: 60px;
	height: 60px;
	background: url(../images/twitteranim.gif) no-repeat;
	left: 484px;
	top: -339px;
}
#anims .twitteranim span {
	width: 110px;
	height: 25px;
	background: url(../images/twitter-over.png) no-repeat;
	left: -12px;
	top: -28px;
}


/* Footer
-------------------------------------------------- */

#footer {
	width:1000px;
	height:1px;
	position:absolute;
	left:50%;
	margin-left:-640px;
	bottom:0;
	text-align:left; 
}
#siteby{
	position:absolute;
	left:855px;
	bottom:53px;
	font-size:10px;
	color:#efefef;
	}
#siteby a{
	text-decoration:none;
	color: #fff
	}
#siteby a:hover{
	text-decoration:none;
	color:#ff7f00;
	}
	

#menubottom {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}
#menubottom span {
	display: none;
	position: absolute;
}
#menubottom a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}
#menubottom a:hover {
	background-position: left bottom;
}
#menubottom a:hover span{
	display: block;
}

#menubottom .thankyou {
	position:absolute;
	width: 88px;
	height: 29px;
	background: url(../images/thankyou.png) no-repeat;
	left: 285px;
	top: -170px;
}

/* Fancybox
-------------------------------------------------- */

.boxaboutme {
	width:500px;
	height:450px;
	background: url(../images/notepadaboutme.gif) no-repeat;
	overflow:auto;
	text-align:left; 
}

.boxcontactme {
	width:500px;
	height:450px;
	background: url(../images/notepadcontactme.gif) no-repeat;
	overflow:auto;
	text-align:left; 
}


.boxthankyou {
	width:500px;
	height:450px;
	background: url(../images/notepadthankyou.gif) no-repeat;
	overflow:auto;
	text-align:left; 
}

.boxoverportfolio {
	width:500px;
	height:450px;
	background: url(../images/notepadthankyou.gif) no-repeat;
	overflow:auto;
	text-align:left; 
}


.contentbox {
	margin: 78px 0 0 70px;
}


.h1bold {
	line-height: 180%;
	font-size: 12px;
	font-weight: bold;
	font-family: Arial;
}

.h1normal {
	line-height: 180%;
	font-size: 12px;
	font-family: Arial;
}



a {
	outline: none;
}

a img {
	border: 1px solid #BBB;
	padding: 2px;
	margin: 10px 20px 10px 0;
	vertical-align: top;
}

a img.last {
	margin-right: 0;	
}