/* All content Copyright Thursday Design. Written by Owen Roberts */

/* --------------- default values -------------- */

#hide { display: none; }

* { /* For all elements */
	margin: 0; padding: 0; border: 0;
}

.clear { clear:both; height: 10px; font-size: 1%; }
.replace { display: none; }

a:link { color: #333399; text-decoration: underline; }
a:visited { color: #6c6caa; text-decoration: underline; }
a:hover { color: #4d4de6; text-decoration: underline; }

body {
	background-color:#fff;
	font-size: 12px;
	line-height: 1.2em;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	color: #000;
}

p { padding: 0 0 1.2em 0; color: #000; }
p.green { color: #333399; }

/* --------------- Basic Layout Elements -------------- */

#frame {
	margin: 0 auto;
	width: 750px;
	position: relative;
	padding: 25px 0 50px 50px;
	text-align: left;
	background: url('../_img/bg.jpg') no-repeat top left;
}

#framenobg {
	margin: 0 auto;
	width: 750px;
	position: relative;
	padding: 25px 0 50px 50px;
	text-align: left;
	background: url('../_img/bg_light.jpg') no-repeat top left;
}

#frame #header, #framenobg #header { width: 650px; height: 100px; }
#frame #header h1, #framenobg #header h1 { width: 650px; height: 100px; background: url('../_img/header_logo.gif') no-repeat top left; }
#header h1 a { width: 480px; height: 78px; display: block; }
#header h2 { width: 480px; height: 17px; }
#header h2 a { width: 480px; height: 17px; display: block; }

#header #subheader p a { width: 480px; height: 17px; display: block; color: #00ff00}


#frame #box h2, #framenobg #box h2 { color: #333399; font-size: 20px; line-height: 26px; padding-bottom: 10px; }
#frame #box h3, #framenobg #box h3 { color: #333399; font-size: 14px; line-height: 18px; padding-bottom: 10px; }
#frame #box h4, #framenobg #box h4 { color: #333399; font-size: 14px; line-height: 18px; padding-bottom: 5px; }
#frame #box h5, #framenobg #box h5 { color: #ca0303; font-size: 12px; line-height: 16px; padding-bottom: 10px; }

#frame #content #box h4.blue { color: #00a0ba; }



/* --------------- Side Navigation -------------- */

#frame ul#topnav, #framenobg ul#topnav {
	display: block;
	height: 15px;
	padding: 10px 0 30px 0;
	list-style-type: none;
}

#frame ul#sidenav, #framenobg ul#sidenav {
	display: block; 
	width: 150px;
	padding: 4px 100px 0px 0; 
	list-style-type: none;
	float: right;
}


#frame ul#sidenav li, #framenobg ul#sidenav li { height: 50px; display: block; float: right; padding-bottom: 10px;}
#frame ul#sidenav li a, #framenobg ul#sidenav li a { height: 50px; display: block; float: right;  }

#frame ul#sidenav li#home a, #framenobg ul#sidenav li#home a { background: url('../_img/sidenav_home.gif') no-repeat top left; width: 150px; }
#frame ul#sidenav li#home a:hover, #frame ul#sidenav li#home a.active, #framenobg ul#sidenav li#home a:hover, #framenobg ul#sidenav li#home a.active { background: url('../_img/sidenav_home.gif') no-repeat 0 -50px; }

#frame ul#sidenav li#photo a, #framenobg ul#sidenav li#photo a { background: url('../_img/sidenav_photo.gif') no-repeat top left; width: 150px; }
#frame ul#sidenav li#photo a:hover, #frame ul#sidenav li#photo a.active, #framenobg ul#sidenav li#photo a:hover, #framenobg ul#sidenav li#photo a.active { background: url('../_img/sidenav_photo.gif') no-repeat 0 -50px; }

#frame ul#sidenav li#graphics a, #framenobg ul#sidenav li#graphics a { background: url('../_img/sidenav_graphics.gif') no-repeat top left; width: 150px; }
#frame ul#sidenav li#graphics a:hover, #frame ul#sidenav li#graphics a.active, #framenobg ul#sidenav li#graphics a:hover, #framenobg ul#sidenav li#graphics a.active { background: url('../_img/sidenav_graphics.gif') no-repeat 0 -50px; }

#frame ul#sidenav li#illustration a, #framenobg ul#sidenav li#illustration a { background: url('../_img/sidenav_illustration.gif') no-repeat top left; width: 150px; }
#frame ul#sidenav li#illustration a:hover, #frame ul#sidenav li#illustration a.active, #framenobg ul#sidenav li#illustration a:hover, #framenobg ul#sidenav li#illustration a.active { background: url('../_img/sidenav_illustration.gif') no-repeat 0 -50px; }

#frame ul#sidenav li#typography a, #framenobg ul#sidenav li#typography a { background: url('../_img/sidenav_typography.gif') no-repeat top left; width: 150px; }
#frame ul#sidenav li#typography a:hover, #frame ul#sidenav li#typography a.active, #framenobg ul#sidenav li#typography a:hover, #framenobg ul#sidenav li#typography a.active { background: url('../_img/sidenav_typography.gif') no-repeat 0 -50px; }

#frame ul#sidenav li#fishfilms a, #framenobg ul#sidenav li#fishfilms a { background: url('../_img/sidenav_fishfilms.gif') no-repeat top left; width: 150px; }
#frame ul#sidenav li#fishfilms a:hover, #frame ul#sidenav li#fishfilms a.active, #framenobg ul#sidenav li#fishfilms a:hover, #framenobg ul#sidenav li#fishfilms a.active { background: url('../_img/sidenav_fishfilms.gif') no-repeat 0 -50px; }

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

#frame #content #box {
	float: left;
	width: 425px;
	height: 367px;
	background: url('../_img/box_bg.gif') no-repeat top left;
	padding: 15px;
}

#framenobg #content #box {
	float: left;
	width: 425px;
	height: 367px;
	background: url('../_img/box_bg_transpa.gif') no-repeat top left;
	padding: 15px;
}

#frame #content #right {
	width: 265px;
	height: 278px;
	float: right;
	position: relative;
	margin-top: 100px;
}

#frame #footer, #framenobg #footer { padding-top: 5px;  }
#frame #footer p, #framenobg #footer p { color: #666; font-size: 90%; }
#frame #footer p.copyright, #framenobg #footer p.copyright { float: left; width: 300px; }

p.half { width: 180px; float: left; padding: 5px 10px; }
p.quarter { width: 96px; float: left; padding: 5px 5px; }
p.middle { width: 180px; float: center; padding: 5px 5px; }

#contactme p a {
	position: absolute;
	top: 424px;
	left: 100px;
	background: url('../_img/contact_me.gif') no-repeat top left;
	width: 150px;
	height: 110px;
}

#contactme p a:hover {
	background: url('../_img/contact_me.gif') no-repeat 0 -110px;
}

#cv p a {
	position: absolute;
	top: 424px;
	left: 300px;
	background: url('../_img/view_my_cv.gif') no-repeat top left;
	width: 150px;
	height: 110px;
}

#cv p a:hover {
	background: url('../_img/view_my_cv.gif') no-repeat 0 -110px;
}