/*                                     LAYOUT + TYPOGRAPHY 
__________________________________________________________
*/

	body {
		background: #fff url(../img/bg-texture.gif) repeat-x fixed;
		font: 15px Georgia, Palatino, serif;
		line-height: 22px;
		color: #202020;
	}
	
	div#navbar {
		position: fixed;
		z-index: 50;
		top: 0;
		left: 0;
		width: 100%;
		height: 44px;
		background: url(../img/navbar.png) no-repeat left top;
	}
	
	div#container {
		width: 420px;
		margin: 0 auto;
		padding: 0 0 15px;
	}
	
	div#work, div#services, div#contact, div#extras {
		width: 390px;
		margin: 10px auto 0;
		padding: 2px;
		background: url(../img/bg-line.gif) no-repeat 0 115px;
	}
	
	div#about, div#work, div#services, div#contact, div#extras {
		padding-top: 75px;
		min-height: 300px;
	}
	
	div#headline {
		position: absolute;
		z-index: 10;
		width: 410px;
		height: 300px;
		margin-left: 12px;
		background: url(../img/h1-headline.png) no-repeat 0 8px;
	}
	
	div#bio {
		position: absolute;
		z-index: 12;
		width: 370px;
		height: 314px;
		margin: -8px 0 0 5px;
		padding: 20px 21px;
		background: url(../img/bg-bio.gif) no-repeat;
	}
	
	div#gallery {
		padding-top: 12px;
	}
	
	h2 {
		padding: 0 0 16px;
		width: auto;
		height: 29px;
	}
	
	div#bio h2 {
		width: auto;
		height: 37px;
		background: url(../img/h2-oh_what_up.png) no-repeat;
		padding: 0 0 2px;
	}
	
	div#work h2 {
		background: url(../img/h2-my_work.png) no-repeat;
	}
	
	div#services h2 {
		background: url(../img/h2-what_i_can_do.png) no-repeat;
	}
	
	div#contact h2 {
		background: url(../img/h2-message_me.png) no-repeat;
	}
	
	div#headline h1, h2 span {
		display: none;
		visibility: hidden;
	}
	
	h1 {
		font: 32px 'Arial Narrow', Arial, sans-serif;
		color: #fff;
		text-transform: uppercase;
	}
	
	p {
		font: 15px Georgia, Palatino, serif;
		color: #202020;
		line-height: 22px;
		padding: 5px 0 8px;
		text-shadow: 1px 1px #f8f8f8;
		filter: Shadow(Color=#ffffff,Direction=135,Strength=1);
		text-align: justify;
	}
	
	div#bio p {
		width: 370px;
		text-align: left;
	}



/*                                                   LINKS
__________________________________________________________
*/

	a {
		color: #0066a9;
		text-decoration: none;
		outline: none;
		font-weight: normal;
	}

	a:hover {
		color: #0066a9;
		border-bottom: 1px solid #0066a9;
	}



/*                                              TOP NAVBAR
__________________________________________________________
*/

	div#navbar ul {
		width: 450px;
		margin: 0 auto;
		padding: 2px 0 0 13px;
	}

	div#navbar ul li {
		list-style: none;
		display: block;
		float: left;
		padding: 8px 16px;
	}
	
	div#navbar li a {
		display: block;
		font: 14px 'Arial Narrow', Arial, sans-serif;
		color: #fff;
		text-transform: uppercase;
		border: none;
	}

	div#navbar li a span {
		display: none;
	}
	
	div#navbar a#this-guy {
		height: 25px;
		width: 63px;
		display: block;
		background: transparent url(../img/navbar-this_guy.png) no-repeat 5px 5px;
	}
	
	div#navbar a#my-work {
		height: 25px;
		width: 64px;
		display: block;
		background: transparent url(../img/navbar-my_work.png) no-repeat 5px 5px;
	}
	
	div#navbar a#what-i-can-do {
		height: 25px;
		width: 97px;
		display: block;
		background: transparent url(../img/navbar-what_i_can_do.png) no-repeat 5px 5px;
	}
	
	div#navbar a#message-me {
		height: 25px;
		width: 83px;
		display: block;
		background: transparent url(../img/navbar-msg_me.png) no-repeat 5px 5px;
	}

	div#navbar li a:active {
		margin-top:1px;
	}
	


/*                                           LAYOUT SWITCH
__________________________________________________________
*/

	a#switch {
		width: 25px;
		height: 27px;
		display: block;
		float: right;
		margin: 6px 10px 0 0;
		background-image: url(../img/icon-switch.gif);
		background-repeat: no-repeat;
		background-position: top left;
	}
	
	a#switch:hover {
		border-bottom: none;
		background-position: top right;
	}



/*                                            WORK GALLERY
__________________________________________________________
*/
	
	div#work select {
		float: right;
		margin-top: 3px;
	}
	
	select#sortwork {
		font: 14px Georgia, Palatino, serif;
		color: #303030;
		padding: 3px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border: 1px solid #cacaca;
	}
	
	div.webwork, div.logowork { 
		display: block;
		height: 166px;
		width: 380px;
		border: 6px solid #cacaca;
		margin-bottom: 22px;
		position: relative;
		zoom: 1;
		float: left;
	}
	
	div.webwork a, div.logowork a { 
		border-bottom: none;
	}
	
	div.webwork .caption, div.logowork .caption {
		background-color: #303030; 
		background: rgba(30,30,30, .9) !important;
		height: 54px;
		width: 380px;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	
	div.webwork .caption .left, div.logowork .caption .left {
		display: block;
		padding: 6px 10px 0 10px;
		float: left;
	}
	
	div.webwork .caption .right, div.logowork .caption .right {
		display: block;
		padding: 6px 10px 0 10px;
		float: right;
	}
	
	div.webwork .caption h3, div.logowork .caption h3 {
		font-size: 16px;
		line-height: 16px;
		padding: 3px 0 7px;
		color: #fff;
	}
	
	div.webwork .caption span, div.logowork .caption span {
		display: block;
		padding: 0;
		margin: 0;
		font-size: 11px;
		line-height: 11px;
		color: #808080;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	
	div.webwork .caption span.date, div.logowork .caption span.date {
		text-align: right;
		padding: 2px 0 1px;
		font-size: 16px;
		line-height: 16px;
		color: #505050;
		text-transform: lowercase;
	}
	
	
	div.webwork .caption a, div.logowork .caption a  {
		color: #808080;
		text-transform: uppercase;
		font-size: 11px;
		line-height: 11px;
		padding: 7px 0 2px;
		border-bottom: 1px solid #404040;
		float: right;
		display: block;
	}
	
	
	div.webwork .caption a:hover, div.logowork .caption a:hover {
		color: #fff;
		border-bottom: 1px solid #707070;
	}
	
/*                                          DESIGNER STATS
__________________________________________________________
*/

	div#stats {
		width: 96%;
		margin: 0 auto;
	}

	div#stats div#stats_head, div.error, div#success {
		display: block;
		width: 100%;
		height: 35px;
		margin: 14px 0 7px;
		background: url(../img/bg-texture_sm.png) repeat;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-top: 1px solid #c7c7c7;
		border-right: 1px solid #ffffff;
		border-bottom: 1px solid #ffffff;
		border-left: 1px solid #c7c7c7;
	}
	
	div#stats div#stats_head h3 {
		display: block;
		width: 100%;
		height: 35px;
		background: url(../img/h3-designer_stats.png) no-repeat center 4px;	
	}
	
	div#stats div#stats_head h3 span {
		display: none;
		text-align: center;
	}

	div#needs_work {
		width: 115px;
		height: 40px;
		padding-left: 3px;
		float: left;
		text-align: left;
		font-size: 14px;
		font-style: italic;
		color: #929292;
		background: url(../img/stats-left_arrow.gif) no-repeat left 22px;	
	}
	
	div#perfect {
		width: 215px;
		height: 40px;
		padding-right: 2px;
		float: right;
		text-align: right;
		font-size: 14px;
		font-style: italic;
		color: #323232;
		background: url(../img/stats-right_arrow.gif) no-repeat right 22px;	
	}

	div#stats ul li {
		list-style: none;
		background-color: #636363;
		margin: 2px 0 10px;
		padding: 5px 0 2px;
		-moz-border-radius-topright: 4px;
		-moz-border-radius-bottomright: 4px;
		-webkit-border-top-right-radius: 4px;
		-webkit-border-bottom-right-radius: 4px;
	}
	
	div#stats ul li img {
		padding: 3px 0 0 7px;
	}
	
	div#stats ul li span {
		float: right;
		display: block;
		padding: 1px 8px 0 0;
		color: #202020;
		text-shadow: 0 -1px #767676;
		filter: Shadow(Color=#767676,Direction=-45,Strength=1);
	}
	
	div#stats ul li#html_css {
		width: 99%;
		background-color: #3d3d3d;
	}

	div#stats ul li#html_css span {
		text-shadow: 0 -1px #585858;
		filter: Shadow(Color=#585858,Direction=-45,Strength=1);
	}
	
	div#stats ul li#js_jquery {
		width: 90%;
		background-color: #636363;
	}

	div#stats ul li#js_jquery span {
		text-shadow: 0 -1px #828282;
		filter: Shadow(Color=#828282,Direction=-45,Strength=1);
	}
	
	div#stats ul li#wordpress {
		width: 87%;
		background-color: #797979;
	}

	div#stats ul li#wordpress span {
		text-shadow: 0 -1px #a4a4a4;
		filter: Shadow(Color=#a4a4a4,Direction=-45,Strength=1);
	}

	div#stats ul li#creative_suite {
		width: 97%;
		background-color: #4f4f4f;
	}

	div#stats ul li#creative_suite {
		text-shadow: 0 -1px #757575;
		filter: Shadow(Color=#757575,Direction=-45,Strength=1);
	}

	div#stats ul li#flash_actionscript {
		width: 80%;
		background-color: #919191;
	}

	div#stats ul li#flash_actionscript span {
		text-shadow: 0 -1px #bdbdbd;
		filter: Shadow(Color=#bdbdbd,Direction=-45,Strength=1);
	}



/*                                            CONTACT FORM
__________________________________________________________
*/

	div#contact {
		min-height: 300px;
	}
	
	div#contact_form {
		margin: 10px auto;
		width: auto;
	}
	
	div#contact_form label input {
		padding: 6px;
		margin: 2px 10px 12px 0;
		width: 175px;
		float: left;
		font: 15px Georgia, Palatino, serif;
		color: #707070;
		border-top: 2px solid #959595;
		border-right: 1px solid #c3c3c3;
		border-bottom: 1px solid #dddddd;
		border-left: 1px solid #c3c3c3;
	}
	
	div#contact_form label input.second {
		margin-right: 0;
	}
	
	div#contact_form label textarea {
		padding: 6px;
		margin: 2px 10px 14px 0;
		width: 374px;
		font: 15px Georgia, Palatino, serif;
		float: left;
		color: #707070;
		border-top: 2px solid #959595;
		border-right: 1px solid #c3c3c3;
		border-bottom: 1px solid #dddddd;
		border-left: 1px solid #c3c3c3;
	}

	div.error, div#success {
		width: auto;
		height: auto;
		margin: 12px 0;
		padding: 3px 0 2px 12px;
	}
	
	div#success strong {
		font-weight: bold;
	}
	
	#form_contain button {
		height: 35px;
		width: 130px;
		display: block;
		border: none;
		background: transparent url(../img/btn-sendmsg.png) no-repeat;
		background-position: top center;
	}
	
	#form_contain button:active {
		background-position: bottom center;
		outline: none;
	}
	
	#form_contain button span {
		display: none;
	}


/*                                                  EXTRAS
__________________________________________________________
*/
	
	div#extras {
		background-position: 0 192px;
		min-height: 135px;
	}

	div#social {
		width: 303px;
		padding: 15px 0 12px 18px;
		margin: 60px auto 0;
	}

	div#social ul {
		margin: 0 auto;
	}

	div#social ul li {
		list-style: none;
		display: block;
		float: left;
		height: 45px;
		width: 32px;
		padding-right: 18px;
		margin: 0 auto;
	}
	
	div#social ul li a {
		border: none;
	}

	p#copyright {
		text-align: center;
		font-size: 12px;
		color: #404040;
	}