/*------------------------------------------------------------------
Title: Portfolio of James Barwell
Author: James Barwell
Date: May 2008

[Index]
 =1 : GENERAL LAYOUT
 =2 : PORTFOLIO GRID LAYOUT
 =3 : TYPOGRAPHY
 =4 : IMAGE REPLACEMENT

[Colour]
Body:			#ffffff (white) / #333333 (dark grey) stripe
Text:			#333333 (dark grey)
Highlight: 		#EF430E  (orange for small text)

[Typography]
Title:			#EC5319 (orange for heavy text) Helvetica Neue 85
Intro:			bold 10pt/18pt georgia, 'times new roman', serif;
Body copy:		8pt/14pt tahoma, verdana, sans-serif;
H2 - H6:		bold 8pt/14pt tahoma, verdana, sans-serif;
-------------------------------------------------------------------*/

/* undo default styles */
:link,:visited {text-decoration:underline;}
ul,ol {list-style:none}
a img,:link img,:visited img {border:none;}
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {margin:0;padding:0;}
#skiptocontent {display: none;}


/* --- =1 : GENERAL LAYOUT --- */

body {
	background: #FAFAFA url(../stat/background.gif) 0 0 repeat-x;
	color: #222222;
	font: 8pt/14pt tahoma, verdana, sans-serif;
}

#content {
	margin: 50px auto 0 auto;
	width: 870px;
}

	#content p { margin-bottom: 1em; }

#aboutme {
	float: left;
	font: bold 10pt/18pt georgia, 'times new roman', serif;
	margin-left: 20px;
	width: 550px;
}

#portfoliowork, /* Content boxes */
#cv {
	clear: left;
	float: left;
	margin: 30px 0 20px 150px;
	width: 720px;
}

#footer {
	background: #333333;
	clear: left;
	height: 160px;
	width: 100%;
}

	#footerContainer {
		margin: 0 auto;
		width: 870px;
	}

	#footerContainer div {
		color: #FFFFFF;
		float: left;
		margin-bottom: 20px;
		padding-top: 10px;
		width: 185px;
	}

	#footerContainer div h3 { margin-bottom: 5px; }

	#footerContainer div img {
		margin-right: 5px;
		vertical-align: middle;
	}

		#footerContainer div#siteinfo { margin-left: 315px; }

a.backToTop,
a#back { float: right; }

/* CV page */
#cv h2 {
	clear: left;
	float: left;
	text-align: right;
	width: 150px;
}

#cv h3,
#cv p,
#cv ul { margin-left:170px; }

#cv ul {
	list-style: square;
	margin-bottom: 1em;
}

/* --- =2 : PORTFOLIO GRID LAYOUT --- */

#portfoliowork div.work {
	clear: left;
	height: 340px;
	margin-bottom: 20px;
	position: relative;
	text-align: right;
}

	#portfoliowork div.work h2 { /* Title */
		float: left;
		width: 150px;
	}

	#portfoliowork div.work p.description {
		clear: left;
		float: left;
		margin-bottom: 1em;
		width: 150px;
	}

	#portfoliowork div.work h3 { /* Date */
		clear: left;
		float: left;
		margin-bottom: 20px;
		width: 150px;
	}

	#portfoliowork div.work img { /* 548px x 308px */
		border: 1px solid #ccc;
		position: absolute;
		right: 0;
		top: 0;
	}

	#portfoliowork div.work ul {
		display: inline;
		left: 170px;
		list-style: none;
		position: absolute;
		top: 315px;
	}

		/* Skills demonstrated list */
		#portfoliowork div.work ul.skills {
			font-weight: bold;
			left: auto;
			right: 0;
			text-align: right;
		}

		#portfoliowork div.work ul.skills li:before { content:" / "; }
		#portfoliowork div.work ul.skills li:first-child:before { content:""; }

		/* Inner-navigation */
		#portfoliowork div.work ul li { display: inline; }

			#portfoliowork div.work ul li a {
				background: #666;
				color: #ffffff;
				padding: 0.3em 0.5em;
				text-decoration: none;
			}

			#portfoliowork div.work ul li:hover a{ background: #EF430E; }
			#portfoliowork div.work ul li.active a { background: #cccccc; }


/* --- =3 : TYPOGRAPHY --- */

a:link,
a:visited { color: #EF430E; }

a[rel=external] {
	padding-right: 13px;
	background: url(../stat/external.gif) center right no-repeat;
}

a:hover,
a[rel=external]:hover {
	background: #EF430E;
	color: #FFFFFF;
	text-decoration: none;
}

a[rel=external]:hover { background: #EF430E url(../stat/external_hover.gif) center right no-repeat; }

#footer div p#bookmarks a {
	background: none;
	padding: 0 0 0 5px;
}

h1, h2, h3, h4, h5, h6 {
	font: 8pt/12pt tahoma, verdana, sans-serif;
	font-weight: bold;
}

	#aboutme strong { color: #EF430E; }

h2#featured,
h2#cv {
	font: bold 20pt/28pt tahoma;
	margin: 0 0 10px 150px;
	text-transform: uppercase;
}


/* --- =4 : IMAGE REPLACEMENT --- */

h1#title {
	display: block;
	float: left;
	overflow: hidden;
	text-indent: -5000px;
}

h1#title {
	height: 180px;
	background: url(../stat/title_jamesbarwell.gif) 0 0 no-repeat;
	width: 300px;
}

h1#title a {
	display: block;
	height: 180px;
}

h1#title a:hover {
	background: none;
}