/*
====== © Paul Cripps / www.paulcripps.com ======

	0: Re-Set
	1: Globals
	2: Typography
	3: Layouts
	4: Tables
	
============
*/


/* ====== 0: START: Re-set ====== */

	/* link underlines tend to make hypertext less readable, 
	   because underlines obscure the shapes of the lower halves of words */
	:link,:visited {color: #666666; border-bottom : 1px solid #666666; text-decoration:none; }
	
	/* no list-markers by default, since lists are used more often for semantics */
	/*ul,ol { list-style:none;}*/
	
	/* avoid browser default inconsistent heading font-sizes */
	/* and pre/code too */
	h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
	
	/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
	/* the default spacing on headings does not match nor align with 
	   normal interline spacing at all, so let's get rid of it. */
	/* zero out the spacing around pre, form, body, html, p, blockquote as well */
	/* form elements are oddly inconsistent, and not quite CSS emulatable. */
	/*  nonetheless strip their margin and padding as well */
	/*ul,ol,dl,li,dd,*/
	h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin:0; padding:0; }
	
	ul,ol {
		padding : 0 0 0 1.2em;
		margin : 0 0 0 1.2em;	
	}
	
	/* whoever thought blue linked image borders were a good idea? */
	a img,:link img,:visited img { border:none; }
	
	/* remove whitspace from beneath images */
	img { display: block; }
	
	/* de-italicize address */
	address { font-style:normal; }	




/* ====== 1: START: Globals CORE Body HTML elements ====== */

/*	
	COLORS:
	
			Green (Design / Work)	 					: #669900;
			Blue (Hobbies, Intrests & Personal / Other)	: #3399FF;
			Orange	(Music)								: #FF9900;
			
	50%
			
			Green (Design / Work)	 					: #B2CC7F;
			Blue (Hobbies, Intrests & Personal / Other)	: #99CCFF;
			Orange	(Music)								: #FFCC7F;
			
*/


body {
	font-family				: "Times New Roman", Times, serif;
	text-align				: center;	
	color					: #666666;
	/**/	
	background				: #FFFFFF url(/assets/img2008/body_bg.png);
	background-repeat		: no-repeat;	
	background-position		: -300px 0;
	background-attachment	: fixed;
}

* { font-weight:normal; }

code{
	display				: block;
	white-space			: pre;
	font-size			: 88%;
	margin				: 0.8em 0;
	padding				: 6px;
	padding-left		: 140px;
	padding-right		: 80px;	
	letter-spacing		: 0em;
}


#warning{ 
	font-size				: 120%;
	color					: red;
	text-align				: center;
	padding 				: 1em;
	border 					: 1px solid red;
	clear					: both;	
	margin					: 0 0 2em 0;
	background-color		: #FFF0F0;
}

/* ====== 2: START: Typography ====== */

b, strong { font-weight : bold; }

p{
	
	font-weight:normal;
	line-height:1.6em;
}

/* h1 My name*/
#header h1{
	font-family			: "Garamond", "Times New Roman", Times, serif;
	font-size			: 500%;
	color				: #669900;	
	line-height			: 80%;		
	padding 			: 0;
	margin	 			: 0 0 10px 0;
	width				: 210px;
}

#header h1 .nickname{
	display				: none;	
}

#header h1 a, #header h1 a:link, #header h1 a:visited, #header h1 a:hover, #header h1 a:active {
	color				: #669900;
	border-bottom		: none;
	text-decoration		: none;
}

/* My title */
#header h2{
	font-size 			: 150%;
	color				: #3399FF;	
}
#header h2 .designer {
	position			: relative;
	top					: -82px;
	left 				: 220px;
}
#header h2 .developer {
	position			: relative;
	top					: -62px;
	left 				: 150px;
} 
#header h2 .dj {
	position			: relative;
	top					: -42px;
	left 				: 45px;
}
/* Hide the & */
#header h2.title span { display : none; }

/* hCard/vCard address */
#header .adr, #header .tel, #header .adr div{
	font-size 			: 110%;
	color				: #3399FF;
	display				: inline;
}

#header .adr .street-address, #header .adr .region, #header .adr .country-name{ display : none; }

#header a.email, #header a:link, #header a:visited, #header a:hover, #header a:active{
	color				: #3399FF;
	border-bottom		: none;
}
#header a.email{
	font-size 			: 110%;
}



/* h3 body title / intro about  me */
#content h3.about {
	font-size			: 150%;
	line-height			: 1.2em;
	width				: 485px;
	float				: left;
}

#content h3.about a { color : #666666; }

.hobbyPhotography h3{
	color 				: #3399FF; 
	font-family			: Helvetica, Arial, sans-serif;
	font-weight			: bold;
	font-size			: 108%;
	line-height			: 1.2em;
	margin 				: 0 0 0.2em 0;
}

.hobbyPhotography .overview p, .entriesColumn p, a.readMore {
	/*float				: left;*/
	width				: 300px;
	color 				: #666666;
	font-size 			: 90%;
	line-height			: 1.55em;
	margin				: 0 0 0.4em 60px;
}

.date {
	float 				: left;
	clear				: left;
	width 				: 50px  !important;
	font-weight			: bold;
	margin 				: 0 0.4em 0.4em 0 !important;
}

.hobbyPhotography .overview .date {
	float 				: left;
	width 				: 50px;
	font-weight			: bold;
	color				: #3399FF;
	margin 				: 0 0.4em 0.4em 0;
}




/* ====== 3: START: Layouts ====== */

.clearBoth{
	clear				: both;
}

.floatLeft{ float: left;}
.floatRight{ float: right;}

.entry img.floatRight{ 
	margin: -80px 0 0 6px;
	float: right;
}

#page {
	width				: 939px;
	margin				: 0 auto;
	padding 			: 20px 0;	
	text-align			: left;
		
	/*background				: url(/assets/img2008/grid_bg.jpg);	*/
}

#header {
	background-color	: #000000;
	margin				: 0 0 40px 0;
	padding				: 30px 40px;
	color				: #669900;	
	height				: 170px;
	overflow			: visible;
}

#content {
	padding 			: 0 40px;
	margin				: 0 0 0 0;
}

#header .photo{
	position			: relative;
	top					: -190px;
	left 				: 560px;
}

/**/
#recommendation {
	font-size 			: 102%;
	line-height			: 1.55em;
	color				: #669900;
	
	margin				: 28px 0 0 0;
	
	width				: 320px;
	float				: right;
	
	background:url(/assets/img2008/quo-left.gif) no-repeat;	
}

#recommendation blockquote p{ padding: 0 0 0 18px; font-style:italic;}
#recommendation blockquote .lquote, #recommendation blockquote .rquote{	color : #666666; }
#recommendation blockquote .lquote{	display:none; }

#recommendation a {
	font-family			: Arial, Helvetica, sans-serif;
	color				: #999999;
	font-size 			: 60%;
	line-height			: 1.55em;
	text-align			: right;
	float				: right;
}
#recommendation a strong{
	font-size 			: 120%;
}


/* div.*/
div.hobbyPhotography {
	clear				: both;	
	padding				: 60px 0 0 0;
}

.hobbyPhotography .overview{
	float				: right;
	width				: 360px;
}

.hobbyPhotography img{
	border				: 5px solid #ffffff;
}

.favImg{
	width				: 455px;
	margin 				: 0 40px 0 0;
	float				: left;
}

.favImgSummary {
	/* layout */
	/*
	position:absolute;
	top:123px; 
	*/
	position			: relative;
	margin				: -45px 0 0 5px;
	padding 			: 5px;
	background-image	: url(/assets/img2008/favImgSummaryBg.png);
	width				: 435px;	
	height				: 30px;

	vertical-align		: middle;
	/* typography */
	

}

.favImgSummary p {
	color				:#FFFFFF;
	font-size			: 80%;
	line-height			: 1.2em !important;	
}

.randomQuote{
	clear						: both;
	margin						: 60px 0 20px 0;	
	padding						: 1em 0.4em;
	text-align					: center;
	font-style					: italic;
}

.randomQuote.big{
	font-size					: 300%;
}
.randomQuote.medium{
	font-size					: 200%;
}
.randomQuote.small{
	font-size					: 120%;
}

p.title {
	color						: #999999;
	font-size					: 12px;
	font-family					: Helvetica, Arial, sans-serif;
	font-weight 				: bold;
	margin 						: 0.5em 0;
	clear						: right;
}

.sub p.title {
	font-size : 12px;
}

/* Random quote section colors*/
.randomQuote.work {	
	color						: #669900;
	border-top					: 1px dashed #669900;
	border-bottom				: 1px dashed #669900;

}

.randomQuote.music, .section_music blockquote{
	color						: #FF9900;
	border-top					: 1px dashed #FF9900;
	border-bottom				: 1px dashed #FF9900; 
}

.randomQuote.everything-else, .section_everything-else blockquote{
	color						: #3399FF;
	border-top					: 1px dashed #3399FF;
	border-bottom				: 1px dashed #3399FF; 
}

.entriesColumn{ 
	float 						: left; 
	width						: 420px;	
}

.work .entriesColumn .entry p.date { color : #669900; }
.other .entriesColumn .entry p.date { color : #3399FF; }
.music .entriesColumn .entry p.date { color : #FF9900; }
.everything-else .entriesColumn .entry p.date { color : #3399FF; }


.entries h3, .entries h4,  .entries h5,  .entries h6{
	font-family					: Helvetica,Arial,sans-serif;
	font-size					: 120%;
	font-weight					: bold;
	line-height					: 1.2em;
	margin						: 0.6em 0 0.8em 0;
	text-decoration				: none;
	border-bottom				: none;
	width						: 420px;
}

.entries h5{
	font-size					: 80%;

}

.entries h6{
	font-size					: 70%;

}

.entries h4 {
	font-size:80%
}

.entries h3 a, .entries h3 a:link, .entries h3 a:visited, .entries h3 a:hover, .entries h3 a:active{
	font-weight					: bold;

	border-bottom				: none;
}

.entries h4 a, .entries h4 a:link, .entries h4 a:visited, .entries h4 a:hover, .entries h4 a:active{
	font-weight					: bold;

	border-bottom				: none;		
}

/* section colors*/
.entries.work h3,  .entries.work h4, .entries.work h5, .entries.work h6 { color : #669900; /*border-bottom : 1px solid #B2CC7F;*/}
.entries.music h3,  .entries.music h4, .entries.music h5, .entries.music h6 { color : #FF9900; /*border-bottom : 1px solid #FFCC7F;*/}
.entries.everything-else h3,  .entries.everything-else h4, .entries.everything-else h5, .entries.everything-else h6 { color : #3399FF; /*border-bottom : 1px solid #99CCFF;*/}

.entries p { 
	color						: #666666;
}

.entries ol{	
	padding						: 0 0 16px 16px;	
	margin						: 0 0 0 16px;	
	}
	
	.entries ol li{
		font-size				: 80%;
		list-style				: decimal;
		padding					: 0 0 6px 0;	
		}
					
		.entries ol li span{
			color				: #888888;
			}	
			
		.entries.music ol li{
			color				: #FF9900;
			}


/**/
.entries {
	clear						: both;
	overflow					: visible
}

.entry {
	margin						: 0px 0 20px 0;	
	padding						: 0;
}



.twitter { /*clear: both;*/}
.twitter .date{ padding: 3px 0 6px 0; font-family:"Times New Roman",Times,serif;}

.twitter .status{ 
	padding-bottom: 0px; 
	font-size:90%;
	line-height:1.55em;
	margin:0 0 0.4em 60px;
	width:300px;
	}


/* footer */

#footer {
	clear						: both;
	margin						: 60px 0;
	padding						: 40px 40px;
	font-style					: italic;
	color						: #666666;
	border-top					: 1px dashed #999999;
	/*border-bottom				: 1px dashed #999999;*/
	overflow					: visible;
	
	}
	
	
	#footer h6{
		color:#669900;
		border-bottom:medium none;
		font-family:Helvetica,Arial,sans-serif;
		font-size:100%;
		font-weight:bold;
		line-height:1.2em;
		margin:0pt 0pt 0.6em;
		text-decoration:none;
	}
	
	#footer p{	font-size: 90%}
	#footer a, #footer a:link, #footer a:visited; #footer a:hover, #footer a:active {color: #666666 !important; border-bottom: none !important;}
	
	
	#elsewhere{
		width	: 425px;
		float	: left;
	}
		#elsewhere p{			
			float			: left;
			width			: 120px;
			margin-right	: 40px;
			display			: block;
			text-align		: left;
		}
		#elsewhere a, #elsewhere a:link, #elsewhere a:visited, #elsewhere a:hover, #elsewhere a:active{ border-bottom 	: none; }

		
		.external{
			float		: left;
			width		: 160px;
			overflow	: visible;	
		}
		
		.external li { 
			display	: inline;	
		} 
		
		.external li a{
			float		: left;
			display		: block;
			width		: 30px;
			height		: 30px;
			margin		: 0 20px 10px 0;
			text-indent	: -9999px;
			
			}
			.external li a{
		
				}
				.external li a.ninefour{ background:url(/assets/icons/nine_four.gif) no-repeat center;}
				.external li a.ca{ background:url(/assets/icons/creative_assembly.gif) no-repeat center;}
				.external li a.linkedin{ background:url(/assets/icons/linkedin.gif) no-repeat center;}
				.external li a.twitter{ background:url(/assets/icons/twitter.gif) no-repeat center;}
				.external li a.flickr{ background:url(/assets/icons/flickr.gif) no-repeat center;}
				.external li a.lastfm{ background:url(/assets/icons/lastfm.gif) no-repeat center;}
				.external li a.facebook{ background:url(/assets/icons/facebook.gif) no-repeat center;}
				.external li a.myspace{ background:url(/assets/icons/myspace.gif) no-repeat center;}
				.external li a.youtube{ background:url(/assets/icons/youtube.gif) no-repeat center;}
				.external li a.vimeo{ background:url(/assets/icons/vimeo.gif) no-repeat center;}
			
	#credits{
		width		: 380px;
		float		: left;
		text-align	:justify;
	}
 

/*	
	COLORS:
	
			Green (Design / Work)	 					: #669900;
			Blue (Hobbies, Intrests & Personal / Other)	: #3399FF;
			Orange	(Music)								: #FF9900;
			
	50%
			
			Green (Design / Work)	 					: #B2CC7F;
			Blue (Hobbies, Intrests & Personal / Other)	: #99CCFF;
			Orange	(Music)								: #FFCC7F;
			
*/

/* colours */			
#content a.work, #content a:link.work, #content a:visited.work, #content a:hover.work, #content a:active.work,
.work a, .work a:link, .work a:visited, .work a:hover, .work a:active,
.section_work #content a, .section_work #content a:link, .section_work #content a:visited, .section_work #content a:hover, .section_work #content a:active
{ 
	color 			: #669900 !important;
	border-bottom 	: 1px solid #B2CC7F;
	text-decoration	: none;
}

#content a.music, #content a:link.music, #content a:visited.music, #content a:hover.music, #content a:active.music,
.music a, .music a:link, .music a:visited, .music a:hover, .music a:active,
.section_music #content a, .section_music #content a:link, .section_music #content a:visited, .section_music #content a:hover, .section_music #content a:active
{ 
	color 			: #FF9900; 
	border-bottom 	: 1px solid #FFCC7F;
	text-decoration	: none;
}

#content a.everything-else, #content a:link.everything-else, #content a:visited.everything-else, #content a:hover.everything-else, #content a:active.everything-else,
.everything-else a, .everything-else a:link, .everything-else a:visited, .everything-else a:hover, .everything-else a:active,
.section_everything-else #content a, .section_everything-else #content a:link, .section_everything-else #content a:visited, .section_everything-else #content a:hover, .section_everything-else #content a:active
{ 
	color 			: #3399FF; 
	border-bottom 	: 1px solid #99CCFF;
	text-decoration	: none;
}

.hobbyPhotography a, .hobbyPhotography a:link, .hobbyPhotography a:visited, .hobbyPhotography a:hover, .hobbyPhotography a:active{ 
	color 			: #3399FF; 
	border-bottom 	: 1px solid #99CCFF;
	text-decoration	: none;
}