/*------------------------------------------
	
	Hi and welcome to Blackfish style.css
	
	If you find something usefull here,
	feel free to copy it as much you like.
	
	You can send me feedback to
		
	...........................	
		jesse@blackfish.fi
	...........................
	
------------------------------------------*/

body										{ font-size: 62.5%; text-align: center; }

/*------------------------------------------
				#wrapper
------------------------------------------*/
											
#wrapper									{ color: #353535; font: 1.2em/1.9em Georgia, sans-serif; margin: 0 auto; text-align: left; width: 907px; }

/*------------------------------------------
				#logo
------------------------------------------*/
											
#logo										{ margin: 6em 0; text-align: center; width: 907px; }

/*------------------------------------------
				#nav
------------------------------------------*/
										
ul#nav										{ margin: 0 0 0 14em; }
											
	ul#nav li a								{ margin: 0 3em 0 0; }
											
	ul#nav li#work a						{ background: transparent url(../images/nav.png) -65px -28px no-repeat scroll;
											  float: left; height: 28px; overflow: hidden; width: 65px; }
	ul#nav li#work a:hover					{ background: transparent url(../images/nav.png) -65px -56px no-repeat scroll;
											  float: left; height: 28px; overflow: hidden; width: 65px; }
											
	ul#nav li#blog a						{ background: transparent url(../images/nav.png) -130px -28px no-repeat scroll;
											  float: left; height: 28px; overflow: hidden; width: 65px; }
	ul#nav li#blog a:hover					{ background: transparent url(../images/nav.png) -130px -56px no-repeat scroll;
											  float: left; height: 28px; overflow: hidden; width: 65px; }

/*------------------------------------------
				.header
------------------------------------------*/
											
.header										{ background: transparent url(../images/header_bg.png) top left no-repeat scroll;
											  height: 33px; margin: 2em 0 0 0; overflow: hidden; padding: 11px 0 0 2em; width: 907px; }
											
	.arrowRight								{ background-position: 0 -44px; }
	.header span,							
	.arrowright span						{ color: white; font-style: italic; }
	#madSkillsHeader						{ margin: 0 28em 0 0; }

/*------------------------------------------
				#infoText
------------------------------------------*/
									
#infoText									{ font-size: 2.5em; padding: 1em 1em .5em; line-height: 1.5em; }
	
	#infoText a								{ color: #74b8c8; border-bottom: 1px dashed #74b8c8; text-decoration: none; }
	#infoText a:hover						{ color: #df7575; border-bottom: 1px dashed #df7575; text-decoration: none; }
	#infoText p								{ margin: .5em 0 1em 0; }
	#infoText p span						{ color: #df7575; font-style: italic; font-weight: bold; }

/*------------------------------------------
			.infoColumn
------------------------------------------*/

	.infoColumn								{ float: left; margin: 2em 1em 0 0; width: 372px; }
	.infoColumn h2							{ font-size: 1.3em; margin: 0 0 1em 0; line-height: 1.5em; width: 372px; }
	.infoColumn h2.feedbackInfo				{ margin: 0 0 1em 1.8em; }
	.infoColumn h2 span.small				{ font-size: .5em; vertical-align: top; }
	#madSkills								{ float: right; margin: 2em 0 0 0; }
	#madSkills #theSkills p					{ font-size: 1em; margin: -.6em 0 1em 0; }
	#madSkills h2							{ margin: 0 0 2em 0; }
	
	#theSkills ul li						{ font-size: 1em; margin: 1.5em 0 0 0; text-transform: uppercase; }
	#theSkills ul li span					{ border-bottom: 1px dashed #353535; }
	#theSkills ul li.dropDown				{ margin: 1em 0 0 1.5em; }
	#theSkills ul ul li						{ border: none; background: transparent url(../images/skillsmark.png) top left no-repeat scroll;
											  margin: 0 0 0 1.5em; padding: 0 0 0 2em; text-transform: none; }

/*------------------------------------------
			#contactMe form
------------------------------------------*/
									
form#contactMe								{ margin: 0 0 0 1.8em; width: 200px; }
	
	form#contactMe label					{ font-size: 1em; font-weight: bold; margin: 0 0 0 .2em; line-height: 2em; }
	
	form#contactMe .error					{ background-color: #c87474; color: white; font-size: 1em; margin: -.6em 0 1em 0;
											  line-height: .4em; padding: 10px 15px; text-align: center; width: 342px; }
	
	form#contactMe input,
	form#contactMe textarea					{ border: none; color: white; font-family: Georgia; margin: 0 0 1em 0; padding: 9px 0 0 10px; }
	
	form#contactMe input[type=text]			{ background: transparent url(../images/input.png) 0 0 no-repeat scroll;
											  height: 22px; overflow: hidden; width: 362px; }
											  
	form#contactMe input[type=submit]		{ background-color: transparent; color: #545454; float: right; }
											  
	form#contactMe textarea					{ background: transparent url(../images/textarea.png) 0 0 no-repeat scroll; font-size: .9em;
											  height: 134px; overflow: auto; width: 362px; }
	form#contactMe textarea.examples		{ color: #a4a4a4; font-style: italic; }
											  
	form#contactMe select					{ margin: 0 0 1em 0; width: 372px; }
	
	form#contactMe #message					{ margin: 10em 0 0 0; text-align: center; width: 372px; }
	form#contactMe #message p				{ font-size: .9em; margin: 1em 0 0 0; }

/*------------------------------------------
				Works
------------------------------------------*/
										
#printWorks									{ margin: 0 0 0 4em; }
											
.workColumn									{ padding: 1em 0 0 2em; float: left; width: 400px; }
											
	.workColumn .work						{ margin: 0 0 5em 0; }
	.workColumn h2							{ font-size: 1.7em; margin: 1em 0 2em 0; padding: .2em .8em; }
	.workColumn img							{ margin: 0 0 1em 0; }
	.workColumn	.work p						{ color: black; padding: 2px 10px; }
	.workColumn .work p.workName			{ font-size: 1.2em; margin: 0 0 .1em 0; }
	.workColumn .work p.workInfo			{ float: left; font-size: .9em; }
	.workColumn .work a.workLink			{ color: #74b8c8; font-size: .9em; float: right; line-height: 1em; padding: .7em 0 0 0; margin: 0 1.5em 0 0; text-decoration: none; }
	.workColumn .work a:hover.workLink		{ border-bottom: 1px dashed #df7575; color: #df7575; font-size: .9em; float: right; text-decoration: none; }

/*------------------------------------------
				#footer
------------------------------------------*/

#footer										{ padding: 20px 30px; height: 20px; width: 847px; }
	#footer .footerColumn					{ float: left; margin: 0 2em 7em 0; width: 250px; }
	#footer ul								{ margin: 0 0 0 0; }
	#footer ul li							{ background: transparent url(../images/linkdot.png) top left no-repeat scroll;
											  font-size: 1em; margin: 1.5em 0 0 0; }
	#footer ul li a							{ color: #74b8c8; font-size: 1.1em; margin: 0 0 0 1.5em; text-decoration: none; }

/*------------------------------------------
				Misc tags
------------------------------------------*/
											
.clear										{ clear: both; }
.lineTrough									{ text-decoration: line-through; }
.floatRight									{ float: right; }
.floatLeft									{ float: left; }
.pinkFont									{ color: #df7575; }