/*  Colors
	Blue Hover 	- 05a2e9
	Green 		- 7EB300
	Pink 		- FF007D
	Light Gray	- D7D7D7
*/

/* Basics */

	html, body {
		margin: 0;
		font: 1em georgia, sans-serif;
		background-color: #FFF;
		}

	p		{ margin: .5em 0; padding: 1em 0; line-height: 130%; }
	hr		{ height: 1px; margin: 5px 0; clear: both; border: none; background-color: #D7D7D7; }
	h1		{ color: #303030; margin: 0; padding: 0; font-size: 1.2em; font-family: Arial, "MS Trebuchet", sans-serif; }
	h2		{ color: #37ACE9; margin: 0; padding: 0; font-size: 1em; font-family: Arial, "MS Trebuchet", sans-serif; }
	img	{ border: 0; vertical-align: middle; }

	a				{ outline: 0; color: #303030; text-decoration: none; }
		a:visited	{ color: #303030; }
		a:hover		{ color: #FF007D; }
		a:active	{ color: #F0A608; }

	ul, ol	{ margin: .5em 0 0 .5em; padding: 0 0 0 1em; }
		li		{ margin: 0; padding: 2px 0 1em 0; }

	table 	{ border-collapse: collapse; }
		th		{ text-align: left; }
		td		{ padding: .1em .6em; }

	ul li form { display: inline; }

	.editor_ok_button { margin: 0 .5em; }

	.left		{ float: left; margin-right: 1em; }
	.right	{ float: right; }
	
		
/* Base Layout */

	#wrapper {
		position: relative;
		width: 868px;
		margin: 0 auto;
	}
	
	#header {
		float: left;
		width: 100%;
		height: 85px;
		margin: 1em 0 0 0;
		background: url('../images/layout-light/header.png') 0 0 no-repeat;
		}
		#logo { float: left; width: 113px; height: 35px; }
			#logo a { display: block; width: 113px; height: 35px; background: url('../images/layout-light/styledev-logo.png') 0 0 no-repeat; }
			#logo a:hover { display: block; width: 113px; height: 35px; background: url('../images/layout-light/styledev-logo.png') 0 -36px no-repeat; }
		
		#menu { float: right; padding-top: .5em;}
			#menu a { padding-left: 1em; font-size: 0.9em; font-style: italic; }
	
	#statement, .content-box { clear: both; padding-top: 20px; text-align: center; }	
		#statement .title, .content-box .title { font-size: 1.2em; font-weight: bold; border-bottom: 5px solid #D7D7D7; cursor: default;}
		#statement p, .content-box p { margin: 5px 0 0 0; padding: 0; }
	
	#profile p { margin-top: 1em; line-height: 170%; }
	#statement a, #statement a:visited, #profile a, #profile a:visited { padding: .2em .5em; text-transform: uppercase; color: #fff; background-color: #FF007D; }
		#statement a:hover, #profile a:hover { padding: .2em .5em; color: #fff; background-color: #05a2e9; }
	
	
	#content { clear: both; margin: 2em auto 0 auto; width: 98%; }
		#content ul { margin: .5em 0 0 0; padding: 0 0 0 1em; list-style-type: none; }
		#content ul li { padding: .25em 0; }
		#content ul li img { margin-right: .5em; }
		#content #projecttypes { margin-left: 1em; }
			#content #projecttypes input#projecttype_title { padding: .5em; font-size: .6em; border: 0; border-bottom: 1px solid #CFCFCF; }
	
	#contact { 
		position: absolute; z-index: 200; 
		width: 244px; height: 545px;
		top: 1px; left: 344px;
		color: #303030;
		background: transparent url('../images/layout-light/styledev-id.png') no-repeat scroll 0 0;
		}
		#contact .close {
			position: absolute; z-index: 300;
			top: 231px; right: 3px;
			}
		#contact .gravatar {
			position: absolute;
			top: 339px; left: 72px;
			}
		#contact .name {
			position: absolute;
			top: 313px; left: 22px;
			width: 200px; text-align: center;
			font: normal small-caps normal 1em georgia, sans-serif;
			}
		#contact .phone {
			position: absolute;
			top: 443px; left: 22px;
			width: 200px; text-align: center;
			font: normal small-caps normal .8em georgia, sans-serif;
			}
		#contact .email {
			position: absolute;
			top: 460px; left: 22px;
			width: 200px; text-align: center;
			font: normal small-caps normal .8em georgia, sans-serif;
			}
	
	#work { clear: both; margin-top: 2em; }
		#work ul { margin: 0 .25em; padding: 0 .25em; list-style-type: none; }
			#work ul li { float: left; position: relative; padding: 0 2.5px 2em 2.5px; }
				#work ul li .title { width: 201px; font-weight: bold; font-size: 0.8em; }
				#work ul li a  { display: block; padding: 1px 0 0 1px; width: 201px; height: 127px; background: url('../images/work-bg.jpg') no-repeat; border-right: 4px solid #CFCFCF; border-bottom: 4px solid #ebebeb; }
					#work ul li a:hover  { border-right: 4px solid #05a2e9; border-bottom: 4px solid #05a2e9; }
	
				#work ul li .type {
					position: absolute;
					top: .5em; right: 1em;
					padding: .1em .5em .2em .5em;
					color: #fff;
					letter-spacing: .2em;
					font: normal small-caps bold .8em georgia, sans-serif;
					background-color: #05a2e9;
					}
	
 	#manage-work { float: right; width: 630px; }
		#manage-work h2 { margin-bottom: .5em; }
		#manage-work ul { margin: 0 .25em; padding: 0 .25em; list-style-type: none; }
			#manage-work li { float: left; padding: 0 2.5px 2em 2.5px; }
				#manage-work a  { display: block; padding: 1px 0 0 1px; width: 201px; height: 127px; background: url('../images/work-bg.jpg') no-repeat; border-right: 4px solid #ebebeb; border-bottom: 4px solid #ebebeb; }
					#manage-work a:hover  { border-right: 4px solid #05a2e9; border-bottom: 4px solid #05a2e9; }
				#manage-work li .title { width: 201px; font-weight: bold; font-size: 0.8em; }
	
	#footer {
		clear: both;
		margin-bottom: 1em;
		padding-top: 2.2em;
		font-size: .75em;
		text-align: right;
		color: #353535;
		background: url('../images/layout-light/bar.png') 0 1.2em no-repeat;	
		}

		#footer input.transparent { border: medium none; }
		#footer input.clear { color: #fff; border: medium none; background-color: transparent; }
		#footer .flash { clear: both; }
		
/* ROR Classes & IDs */
	
	#flash_notice {
		margin: 0;
		padding: 0;
		font-size: 0.8em;
		color: #EB4747
		}
	
	.editor_field {
		width: 78px;
		color: #333;
		border: 1px solid #CFCFCF;
		}
	
	#errors {
		margin-bottom: 1em;
		padding: 7px;
		padding-top: 12px;
		border: 1px solid #999;
		background: #EEEEEE;
		}

	#errorExplanation h2 {
		display: inline;
		margin: -7px;
		padding: 5px 5px 5px 15px;
		color: #EB4747;
		text-transform: capitalize;
		font-weight: bold;
		text-align: left;
		}

	#errorExplanation p {
		display: inline;
		padding: 5px;
		margin-left: .5em;
		margin-bottom: 0;
		color: #333;
		font-size: .8em;
		}
	
	#errorExplanation ul {
		margin-left: 1em;
		}
	
	#errorExplanation ul li {
		font-size: .9em;
		list-style: square;
		}