/* CSS Document */
/* Normalisation */
/* ------------------------------------------------------------------------ */
/* body {	font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana; } (normal favoured font face) */
/* Normalises margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td 
{ margin : 0; padding : 0; }

/* Normalises font-size and font for headers */
h1, h2, h3, h4, h5, h6 
{ font-size : 100%; font-family : helvetica, arial, sans-serif;}

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

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

/* Remove borders and spacing from tables */
table
{ border-collapse : collapse ; border-spacing : 0; }

/* Remove borders from field set and img */
fieldset, img
{ border :0; }

/* Left aligns text in caption and table headers */
caption, th
{ text-align : left; }

/* Remove quotation marks from quote */
q:before, q-after
{ content : ''; }

/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}
/* ------------------------------------------------------------------------ */
/* Structure */
html
{	text-align : center; height : 100%;	}
body 
{	height : 100%; width : 100%; font-size : 85%; font-family:trebuchet, 'trebuchet ms', helvetica, arial, sans-serif; }
ul#wrapper{
	position : relative;
	display: block;
	width : 972px;
	top : 0;
	bottom : 0;
	height : 100%;
	margin : 0 auto;
	padding: 0;
	background-color: #FFFFFF;
	text-align : left;
}
li#sectionTitle, li#content, li#sectionAbout, li#sectionContact, li#sectionShop, li#sectionOne, li#sectionTwo {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	height: 100%;
}
li#content{
	width : 750px;
	margin : 0 auto;
	height: 100%;
	padding: 30px 10px 0 10px;
	border-left : 1px dotted #D3D4D4;
	border-right : 1px dotted #D3D4D4;
	border-bottom : 1px dotted #D3D4D4;
}
li#sectionTitle, li#sectionAbout, li#sectionContact, li#sectionShop, li#sectionOne, li#sectionTwo {
	width: 25px;
	display: block;
}
li#sectionTitle img, li#sectionAbout a img, li#sectionContact a img, li#sectionShop a img, li#sectionOne a img, li#sectionTwo a img {
	margin: 0; padding: 0; border: 0; position: static; top:0px;
}
li#sectionAbout a, li#sectionContact a, li#sectionShop a, li#sectionOne a, li#sectionTwo a {
	margin: 0; padding: 0; display: block; background-color: transparent; height: 100%;
}
li#sectionShop {	left: 0; }
li#sectionOne { left: 35px; }
li#sectionTwo { left: 70px; }
li#sectionTitle { left: 104px; border-left : 1px dotted #D3D4D4; border-bottom: 1px dotted #D3D4D4; }
li#content {	 left: 130px; }
li#sectionAbout { left: 912px; }
li#sectionContact { left: 947px; }

div.intro {	padding-bottom: 4.5em; height: auto; margin: 0 ; }
/* ------------------------------------------------------------------------ */
/* Main Content */
/* ------------------------------------------------------------------------ */
/* Branding */
h1 {
	width: 310px;
	height: 53px;
	position: relative;
	left : 189px;
	overflow: hidden;
 	text-indent : -999px; 
}
h2 
{
	position : relative;
	left : 255px;
	width : 250px;
	margin : -8px 0 0 0;
	padding-bottom : 38px;
	font-size : 1.2em; 
	font-weight : normal;
	letter-spacing : 0.5px;
}
/* ------------------------------------------------------------------------ */
/* Font styles */
h3
{	font-size : 1.1em; font-weight : normal; margin : 8px 1px 1px 1px; }
h3.big
{	font-size: 2em; }
h3.about
{	position : absolute; top : 0; left : 0; }
h3.
h4
{	font-size : 1em; font-weight : normal; margin : 5px 1px 10px 1px; }
p 
{	letter-spacing: 0.5px; line-height : 1.2em; margin : 5px 5px 10px 0px;}
p.columnSpan
{	margin-left: 8px; width: 480px; }
p.text
{	margin : 8px 0 0 0; font-size : 95%; width : 369px; padding-left : 255px; }
p.expanded_text
{	margin : 8px 0 0 0; font-size : 90%; width : 490px; padding-left : 255px; }
p.expanded_text strong
{	font-size : 110%; display : block; }
p.addend
{	margin : 8px 0 0 0; font-size : 90%; width : 490px; padding-left : 255px; clear : both; }

li#content a 
{	letter-spacing: 0.5px; width : 243px; text-decoration : none; }
li#content a:hover
{	text-decoration : underline; }
li#content a.blue, li#content a.pink, li#content a.orange, li#content a.purple
{	margin: 0 0 10px 0; }
/* ------------------------------------------------------------------------ */
/* Navigation */
ol#navigation{
	position : relative;
	width : 750px;
	height : 44px;
	margin : 0;
	margin-bottom : 10px;
}
ol#navigation li
{	display : inline; }
ol#navigation li a
{	position : absolute; left : 0; top : 10px; height : 34px; width : 119px; display : block; text-indent : 5px;}
ol#navigation li a:hover
{	text-decoration : none; }
ol#navigation li a#selected
{ background-image: url(/images/colour-block.gif); background-repeat : no-repeat; background-position : bottom left; }
ol#navigation li#navback a
{	left : 23px; color : #D3D4D4; }


ol#navigation li#navback
{	position : absolute; left : 0; width : 119px; height : 44px; background-image: url(/images/arrow.gif); background-repeat: no-repeat; background-position: top left; }
ol#navigation li#nav1
{	position : absolute; left : 255px; width : 119px; height : 44px;}
ol#navigation li#nav2
{	position : absolute; left : 380px; width : 119px; height : 44px;}
ol#navigation li#nav3
{	position : absolute; left : 505px; width : 119px; height : 44px;}
ol#navigation li#nav4
{	position : absolute; left : 630px; width : 119px; height : 44px;}

ol#navigation li#navback a:hover
{	background-image: url(/images/white-block.gif); background-repeat : no-repeat; background-position : bottom left; }
ol#navigation li#nav1 a:hover
{	background-image: url(/images/blue-block.gif); background-repeat : no-repeat; background-position : bottom left; }
ol#navigation li#nav2 a:hover
{	background-image: url(/images/pink-block.gif); background-repeat : no-repeat; background-position : bottom left; }
ol#navigation li#nav3 a:hover
{	background-image: url(/images/orange-block.gif); background-repeat : no-repeat; background-position : bottom left; }
ol#navigation li#nav4 a:hover
{	background-image: url(/images/purple-block.gif); background-repeat : no-repeat; background-position : bottom left; }

/* ------------------------------------------------------------------------ */
/* main content - 3 column */
ul.three_col
{	position : relative; width : 750px; height : auto; clear: both; margin-top: 0px; }
ul.three_col li.col1, ul.three_col li.col2, ul.three_col li.col3
{	height : auto; top : 0; bottom : 0; margin : 0 0 10px 0; padding-top : 260px; }
ul.three_col li.col1
{	width : 241px;  float : left;  margin-right : 12px; }
ul.three_col li.col2
{	width : 242px; float : left; }
ul.three_col li.col3
{	width : 243px; float : right; }

ul.three_col h3
{	margin-left : 5px; margin-right : 5px; }
ul.three_col p
{	margin : 5px 5px 10px 5px;  width : 230px; font-size : 90%; line-height : 1.5em; }

ul.basic
{	margin-left : 5px; margin-bottom : 10px;}
ul.basic li
{	margin : 2px; list-style-type: square; list-style-position: inside; }
ul.basic li p
{	display : inline; }

ul.links
{	margin-left : 0; }
ul.links li{
	margin : 2px 2px 2px 0;
	background: transparent url(/images/arrow.png) no-repeat center left;
	text-indent : 24px;
}
/* ------------------------------------------------------------------------ */
/* Projects / sections */
ul#my_projects{
	position : relative;
	margin : 0;
	width : 750px;
	height : auto;
	padding-bottom : 50px;
}

ul#my_projects li.project1, ul#my_projects li.project2, ul#my_projects li.project3, ul#my_projects li.project4
{	position : relative; margin : 15px 0 0 0; overflow : hidden; }
ul#my_projects li.project1
{ border-top : 1px solid #00AECF; }
ul#my_projects li.project2
{ border-top : 1px solid #E9296E; }
ul#my_projects li.project3
{ border-top : 1px solid #FFA800; }
ul#my_projects li.project4
{ border-top : 1px solid #663366; }
ul#my_projects li.project4 img.me
{ border : 1px solid #663366; border-top : 0; padding : 0; margin : 0; margin-left : 255px; }

/* ------------------------------------------------------------------------ */
/* zazzle */
div#zazzle{
	height : 340px;
	width : 750px;
	margin : 0 0 10px 0;
	clear : both;
}
div#zazzle h3
{	padding-left : 20px; padding-bottom : 5px; }
div#zazzle p.belowProds
{	position : relative; top : 245px; font-size : 80%; padding-left : 20px; width : 720px; }
ul.prods
{	position : relative; left : 15px; }
ul.prods li{
	margin : 5px;
	width : 110px;
	height : 110px;
	display : inline;
}
ul.prods li.row1
{	position : absolute; top : 0; }
ul.prods li.row2
{	position : absolute; top : 120px; }
ul.prods li#a, ul.prods li#g
{	left : 0; }
ul.prods li#b, ul.prods li#h
{	left : 120px; }
ul.prods li#c, ul.prods li#i
{	left : 240px; }
ul.prods li#d, ul.prods li#j
{	left : 360px; }
ul.prods li#e, ul.prods li#k
{	left : 480px; }
ul.prods li#f, ul.prods li#l
{	left : 600px; }

/* ------------------------------------------------------------------------ */
/* footer */
ol#footer
{	position : relative; display : block; width : 748px; margin : 0 -10px 0 -10px; text-align : right; padding-top : 20px; padding-left : 10px; padding-right : 10px; clear : both; }
ol#footer li, ol#footer li p
{	display : inline; }
ol#footer li
{	padding-left : 10px; }
ol#footer li p
{	font-size : 80%; }

/* ------------------------------------------------------------------------ */
/* Project menu - secondary navigation */
ol#projectMenu {
	width : 241px;
	float : left;
	margin : 0 12px 0 0;
	text-align : right;
	list-style-type: none;
	padding-bottom : 20px;
}
ol#projectMenu li.collection {
	display: block;
	padding : 5px 15px 5px 5px;
	border : 0;
	margin : 0;
}
ol#projectMenu li.collection h3 a
{	padding-right : 10px; }
ol#projectMenu li.blank {
	display: block;
	height : 5px;
	border : 0;
	margin : 0;
}
ol#projectMenu li.collection#selectedProj
{	margin-left : 23px; padding-right : 10px; }
ol#projectMenu li.collection#selectedProj h3 a
{	padding-right : 14px; margin-right : -10px; }
ol#projectMenu li.collection#lastProj
{	border : 0; margin : 0; }
ol#projectMenu li.collection#projHeader
{	text-align : right;	padding-right : 14px; }
/* ------------------------------------------------------------------------ */
ul.myProject
{	padding: 5px 0 5px 0; margin-left: -5px; display: block; }
ul.myProject li
{ 	position: relative; display:block; overflow: hidden; }
ul.myProject li a
{	 padding: 2px 5px 2px 0; margin: 0; display: block; }
ul.myProject li a p
{	margin: 0 40px 0 0; }
/* ------------------------------------------------------------------------ */
/* Portfolio - project displays */
ol#projectDisplays
{	width: 494px; float: left; margin: 0 0 1.5em 0; padding: 0; }

ol#projectDisplays li
{	padding: 110px 0 20px 0; position : relative; display : block; min-height : 250px; }
ol#projectDisplays li img.header
{	width : 494px; height : 100px; position : absolute; top : 0; left : 0;}
ol#projectDisplays li h3
{	padding-left : 15px; font-size : 150%; }
ol#projectDisplays li p 
{	padding: 0 7px 0 15px; width : 228px; margin: 15px 0 5px 0; }
ol#projectDisplays li a
{	padding: 0 7px 0 15px; width: 228px; }

ol#projectDisplays li img.first, ol#projectDisplays li img.second, ol#projectDisplays li img.third, ol#projectDisplays li img.fourth
{	position : absolute; width : 110px; height : 110px; }

ol#projectDisplays li img.first
{	left : 258px; top : 110px; }
ol#projectDisplays li img.third
{	left : 258px; top : 230px; }
ol#projectDisplays li img.second
{	left : 378px; top : 110px; }
ol#projectDisplays li img.fourth
{	left : 378px; top : 230px; }
/* ------------------------------------------------------------------------ */
/* Portfolio - selected project display */
ol#thisProject 
{	width : 494px; height : auto; float : right; margin-bottom: 1.5em; }
ol#thisProject li.headerProj
{	position : relative; display : block; padding-bottom : 10px; }
ol#thisProject li.headerProj h3
{	padding-left : 15px; width : 465px; }
ol#thisProject li.headerProj p
{	padding-left : 15px; margin: 15px 0 20px 0; width : 465px; }
ol#thisProject li p.gap
{	padding-left : 15px; margin: 10px 0 5px 0; width : 465px; font-size: 150%; }
ol#thisProject li.projView
{	width : 494px; position : relative; display : block; clear : both; }
ol#thisProject li.projView img.folioView
{	width : 242px; height : auto; float : left; padding-bottom : 25px; }
ol#thisProject li.projView h3
{	width : 240px; float : right; font-size: 150%; }
ol#thisProject li.projView p
{	width : 240px; height : auto; float : right; }
ol#thisProject li.projView p.tags
{	font-size : 90%; padding-top : 10px; }
ol#thisProject li.projView a.slideshow
{	width : 240px; float : right; padding-top : 10px; }
/* ------------------------------------------------------------------------ */
/* full width in content */
ul.full
{	width: 750px; margin-bottom: 30px; border: 1px dotted #CCCCCC; }
ul.full li
{	border-bottom: 1px dotted #CCCCCC; margin-bottom: 10px; padding: 10px 0 10px 0; width: 750px; }
ul.full li .left-block
{	float: left; margin: 0 5px 10px 0; padding-right: 11px; padding-left: 5px; width: 240px; border-right: 1px solid #CCCCCC; }
ul.full li .left-block p
{	color:#FF0066 }
ul.full li p
{	padding-top: 10px; }