@charset "utf-8";
/* david.css */

/*normalizez margin, padding*/
body, div, dl, dt, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

/*normalizes font-size for headers*/
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

/*Removes list-style from lists*/
ol, ul {
	list-style: none;
}

/*Normalizes font-style and font-weight to normal*/
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}

/*Removes border from fieldset and img*/
fieldset, img {
	border: 0;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX GENERAL LAYOUT XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

body {
	background-color: #282734;/*deep inky blue*/
	color: #cad6f1;/*light/white blue*/
	font: 12px "Lucida Sans Unicode", "Lucida Grande", sans-serif
}

/*container for the whole site*/
div#container {
	position: relative;
	width: 656px;
	height: 3000px;/*also change <div#nav>'s height*/
	margin: 0 auto;
	background: url(../assets/body_tile.png) 0 0 repeat-y;
}

/*styling <a> for all links going to an external site "http://"*/
a[href^="http://"], a[href^="mailto:"] {
	color: #eee075;/*golden*/
	text-decoration: none;
}

/*styling <a:hover> for all links going to an external site "http://"*/
a:hover[href^="http://"], a:hover[href^="mailto:"] {
	color: #fff;/*white*/
	text-decoration: underline;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <div#header> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*container for <h1>*/
div#header {
	padding: 20px;
}

/*centering <h1> within <div#header>*/
div#header h1 {
	font: 36px Myriad, Arial, Helvetica, sans-serif;
	color: #eee075;/*golden*/
	text-align: center;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <div#nav> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*setting up an absolute position for the nav column on the left of the page from top to bottom*/
div#nav {
	position: absolute;
	width: 81px;
	height: 3000px;/*also change <div#container>'s height*/
	background: url(../assets/menucol.png) 0 0 repeat-y;
	margin-top: -82px;
}

/*setting the font styles for nav(ul) with positioning the <ul> down the <nav> and placing top and bottom borders*/
div#nav ul {
	position: fixed;
	width: 81px;
	background: url(../assets/menucol_nav.png) 0 0 repeat-y;
	font: 14px Myriad, Arial, Helvetica, sans-serif;
	color: #eee075;/*golden*/
	text-align: center;
	padding-top:30px;
	margin-top: 100px;
	border-top: 1px solid #033;/*deep green/blue*/
	border-bottom: 1px solid #033;/*deep green/blue*/
}

/*positioning <li> centre of <ul>*/
div#nav ul li {
	margin: 0 auto 30px;
}

/*styling <a>*/
div#nav ul li a {
	color: #eee075;/*golden*/
	text-decoration: none;
}

/*styling <a:hover>*/
div#nav ul li a:hover {
	color: #cad6f1;/*light blue*/
	border-right: 1px solid #cad6f1;/*light blue*/
	border-left: 1px solid #cad6f1;/*light blue*/
	padding: 0 5px; 
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <div#footer> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*placing <div#footer> always at the base of the viewport*/
div#footer {
	width: 656px;
	height: 40px;
	background: #282734 url(../assets/footer_tile.png) 0 0 repeat-y;/*deep inky blue- though 'footer_tile.png's transparency makes it look mushroom */;
	position: fixed;
	bottom: 0px;
	border-top: 2px solid #898260;/*deep green*/
}

/*styling and centering 'copyright'*/
div#footer p {
	text-align: center;
	text-shadow: #000 2px 2px 1px;
}

/*positioning email and telephone info*/
div#footer ul#contact {
	position: absolute;
	top: 1px;
	left: 20px;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <div#main> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
div#main {
	background-color: #282734;/*deep inky blue*/
	width: 400px;
	margin: 20px 0 20px 128px;
	padding-top: 30px;
	padding-bottom: 0px;
	-moz-border-radius: 20px;/*firefox*/
	-webkit-border-radius: 20px;/*safari,chrome*/
	border-radius: 20px;/*opera10.5*/
	behaviour: url(border-radius.htc);/*IE hack*/
}

/*positioning and styling <img>*/
div#main img {
	margin: 0 0 0 47px;/*for <div#home>img*/
	border: 3px solid #000;/*black*/
}

/*centering <h2> within <div#main>*/
div#main h2 {
	font: 20px Myriad, Arial, Helvetica, sans-serif;
	color: #eee075;/*golden*/
	text-align: center;
	margin-top: 10px;
}

/*placing <h3> within <div#main> to the left*/
div#main h3 {
	font: 16px Myriad, Arial, Helvetica, sans-serif;
	color: #eee075;/*golden*/
	margin: 0 0 10px 10px;
}

/*to keep text within set width*/
div#main p {
	padding: 5px 20px 10px;	
}

/*to give enough distance between <div#home> and <div#biog> so that latter doesn't show on the screen whilst the former is diplayed
if possible in most screen sizes*/
div#biog {
	margin-top: 500px;
}

/*this creates the distance at the top of the viewport for <div#biog> and <div#gallery>*/
div#bg:after, div#gal:after {
	content:".";/*put a 'period' in the div to prevent it collapsing due to no content in the actual html*/
	padding-bottom: 10px;/* to push the content in <div#biog> and <div#gallery> away from the top of the page*/
	display: block;/* to be able to use padding*/
	color: #282734;/*deep inky blue...to blend 'period' into the background*/
	/*border: 1px dotted #f00;*/
}

/*to give enough distance between <div#home> and <div#biog> so that latter doesn't show on the screen whilst the former is diplayed
if possible in most screen sizes*/
div#gallery {
	margin-top: 500px;
	width: 400px;
	/*height: 300px;/*to help extend the dk blue bg for all sections further down, due to floated content of gallery*/
	/*border: 1px dotted #f00;/*TEMP*/
}

/*to enable the <div#gallery> to include the floating <ul>'s to be covered by the bg colour of the <div#main>*/
div#gallery:after {
	content: ".";/*put a 'period' in the div to prevent it collapsing due to floating content of the <ul>'s*/
	display: block;
	clear: both;/*places 'period' below the <ul>'s*/
	height: 0;/*helps to hide 'period' in certain browsers*/
	line-height: 0;/*helps to hide 'period' in certain browsers*/
	visibility: hidden;/* hides 'period'*/
}

/*to place text in <ul> to the left of thmbs in <ul#imgs>*/
div#gallery ul {
	float: left;
	width: 205px;
	margin-bottom: 30px;/*puts distance between each group of 'Production' photos*/
	margin-left: 20px;/*puts <div#gallery ul's> in line with <div#biog p's>*/
}

div#gallery ul li {
	margin-bottom: 5px;
}

/*to highlight text finishing with a colon in <div#biog> and <div#gallery>*/
div#main span {
	color: #fff;
}

/*to place thmbs in <ul#imgs> to the right of text in <ul>*/
div#gallery ul#imgs {
	float: left;
	width: 140px;
	margin-left: 30px;
	/*border: 1px dotted #ff0;/*TEMP*/
}

/*to float thmbs in <ul#imgs>  to square them and divide them up equally*/
div#gallery ul#imgs li {
	float: left;
	width: 60px;
	margin: 3px 10px 0px 0;
}

/*looses inherited margin-left (from earlier <img>) to bring thmb imgs closer to text. also, reduce opacity to half*/
div#gallery ul#imgs li a img {
	margin: 0;
	opacity: 0.4;
	filter: alpha(opacity=40);
	border: 2px solid #000;
	-moz-box-shadow: #ddd 1px 1px 10px;
	-webkit-box-shadow: #ddd 1px 1px 10px;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}

/*raise opacity back up to full*/
div#gallery ul#imgs li a:hover img {
	opacity: 1;
	filter: alpha(opacity=100);
	-moz-transform: rotate(5deg) scale(1.2);
	-webkit-transform: rotate(5deg) scale(1.2);
	-moz-box-shadow: #fff 1px 1px 10px;
	-webkit-box-shadow: #fff 1px 1px 10px;
	/*border-color: #eee075;/*golden*/
}





/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <div#sidetitle> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*placing and styling the side image on the right*/
div#sidetitle {
	position: fixed;
	margin-top: 7px;
	margin-left: 610px;
	width: 38px;
	height: 344px;
	opacity: 0.5;
	background-image: url(../assets/sidetitle.png);
	z-index: 15;
}