/*
@import url(layout.css);
@import url(color.css); 
@import url(typography.css);
*/

/*--------------------------------------------------------------------------------
Main Style Sheet

version:  1.0
author:   joseph colby
email:    thelettersabove@gmail.com
website:  http://www.josephcolby.com
--------------------------------------------------------------------------------*/

* {
	outline: none;
	padding: 0;
	margin: 0;
	border: 0;
}

.clear {
	clear: both;
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
}

/* =Typography 
--------------------------------------------------------------------------------*/
body {
	font-family:'helvetica neue',helvetica,arial,san-serif;
	font-family: Verdana, sans-serif;
	/*font-family:Georgia,Constantia,"Times New Roman",Times,serif;*/
}

h2 {
	font-family: Gill Sans, Verdana;
}

body {
	border-top: 1px solid #4F4F4F;
	font-size: 62.5%;
}

h2, .portfolio_piece h4 {
	font-size: 1.1em;
	line-height: 1.4em;
	font-weight: bold;
	text-transform: uppercase;
}

h3 {
	font-size: 2.5em;
}

#home h3 {
	padding: 0 0 0 10px;
	margin: 0 0 15px 0;
}

.bubble {
	font-style: italic;
	font-weight: bold;
	line-height: 1.4em;
}

#nav {
	font-size: 1.1em;
}

#main h2 {
	text-indent: 15px;
	letter-spacing: .2em;
}

#portfolio #main {
	width: auto;
	float: none;
	padding: 15px 0 15px 15px;
}

#portfolio .portfolio_piece .details {
	width: 400px;
	float: left;
	padding: 0 0 0 15px;
}

#portfolio .portfolio_piece {
	padding: 15px 0 15px 15px;
	margin: 0;
}

#portfolio .portfolio_piece p {
	font-size: 1.3em;
	padding: 0 100px 0 0;
}

#blog .postmetadata {
	height: 30px;
	margin: 15px 0;
	line-height: 30px;
	text-indent: 30px;
	border: 1px solid #999;
	background: url(../../img/lines_comment_bg.jpg);
}

#blog .sharebar {
	margin: 15px 0;
	padding: 5px 5px;
	border: 1px solid #999;
	background: url(../../img/lines_comment_bg.jpg);
}

#blog .content {
}

#blog .content p{
	margin: 0 0 15px 0;
	padding: 0 10px;
}

#blog .post ul, dl, ol {
	list-style-position: inside;
	text-indent: 15px;
}

h3 a:hover {
	border-bottom: 1px solid #999;
	/*background: #65c0f0;*/
}

#blog .post a.continue {
	display: block;
	text-align: right;
	margin: 15px 0 0 0;
	font-weight: bold;
	text-decoration: underline;
}

#blog .post a.continue:hover {
	color: #65c0f0;
}

#portfolio .portfolio_piece, #blog .post {
	float: none;
	width: auto;
	background: none;
	padding: 0 0 30px 0;
	margin: 0 0 30px 0;
	border-bottom: 1px solid #AFAFAF;
}

#portfolio .portfolio_piece .display {
	float: right;
	border: 0;
}

#portfolio .portfolio_piece .display img {
	border: 0;
}

#portfolio .portfolio_piece h4 {
	margin: 15px 0 5px 0;
}

#portfolio .portfolio_piece p {
	margin: 15px 0 0 0;
}

#spotlight h3, #portfolio_work h3, #latest_posts h3 {
	font-size: 5.0em;
}

#footer h3 {
	font-size: 2.5em;
	padding: 25px 0 4px 0;
}

h4 {
	letter-spacing: -.02em;
	font-size: 3.6em;
}

em {
	font-style: normal;
	font-weight: bold;
}

.no_text{
	text-indent: -9999px;
}

p, li, ul.skill_set li {
	font-size: 1.2em;
	line-height: 1.8em;
}

.new_line {
	font-size: .8em;
	line-height: .8em;
}

#sidebar h4 {
	font-size: 2.2em;
}

#footer p {
	line-height: 2.0em;
}

h2.snipit {
	line-height: 100px;
	font-size:2.0em;
	font-size-adjust:none;
	font-stretch:normal;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	text-align:center;
}

.image_details h4 {
	font-size: 1.4em;
	font-style: italic;
}								

.portfolio_piece h4 {
	font-size: 1.1em;
}

/* =Layout
--------------------------------------------------------------------------------*/
.portfolio_piece .image_holder {

}

.banner {
	display: block;
	position: absolute;
	height: 104px;
	width: 104px;
	top: -5px;
	right: 0px;
}

.banner_webdesign {
	background: url(../../img/banner_webdesign.png) no-repeat top left;
}

.banner_digitalart {
	background: url(../../img/banner_digitalart.png) no-repeat top left;
}

.banner_ecommerce {
	background: url(../../img/banner_ecommerce.png) no-repeat top left;
}

.mobileweb .banner{
	background: url(../../img/banner_mobileweb.png) no-repeat top left;
}

/*
.mobileweb a.image_link:hover{
	background: #0078a3;
}*/

.banner_actionscript {
	background: url(../../img/banner_actionscript.png) no-repeat top left;
}

.banner_illustration {
	background: url(../../img/banner_illustration.png) no-repeat top left;
}

a.fb_share {

}

#crumbs {
	margin: 0 0 15px 0;
	background: url(../../img/lines_bg.jpg);
	font-size: 1.0em;
	font-weight: bold;
	height: 25px;
	padding: 0 10px;
	text-transform: uppercase;
	color: #eee;
	line-height: 25px;
}

#crumbs a {
	color: #65c0f0;
}

#crumbs a:hover {
	color: #eee;
}

a.image_link {
	overflow: hidden;
	margin: 5px;
	padding: 10px;
	background: #000 url(../../img/lines_bg.jpg);
	/*background: #D1D8DF;*/
	display: block;
	/*border: 1px solid #E0E8EF;*/
	border: 1px solid #444;
}

a.image_link:hover {
	background: #333 url(../../img/lines_bg_oposite.jpg);
	border: 1px solid #A4A9AF; 
}

.portfolio_piece img,  #spotlight img {
	display: block;
	padding: 0;
	margin: 0;
	border: 1px solid #000;
}

html {
	background: #0e0e0e url(../../img/lines_bg.jpg);
}

body {
	background: url(../../img/bg.jpg) repeat-x top left;
}

#wrapper, #footer_wrapper {
	width: 1013px;
	margin: 0 auto;
}

/* Floats */
#main, 
#main_col, 
#nav li, h1, 
#spotlight .image_details,  
ul.skill_set li, 
div.flickr_badge_image, 
div.portfolio_piece {
	float: left;
} 

#sidebar, #secondary_col, #nav, #sitemap ul li  {
	float: right;
}

#main {
	padding: 15px 15px 0 15px;
}

#spotlight p {
	padding: 15px;
}

.link_list a {
	border-bottom: 1px dotted #3F3F3F;
}

.new_line {
	display: block;
}

#sidebar h4.twitter {
	background: url(../../img/twitter_icon.jpg) no-repeat bottom center;
	height: 140px;
}

.bubble {
	padding: 0 10px;
}

#sidebar p, #sidebar ul {
	margin: 0 0 15px 0;
}

#sidebar h4 {
	border-top: 1px solid #C6CFC2;
	margin: 30px 0 0 0;
	padding: 30px 0 15px 0;
	/*background: url(../../img/lines_light_bg.jpg);*/
}

#hire_me p {
	margin: 0 0 10px 0;	
}

#hire_me li {
	text-indent: 15px;
	font-weight: bold;
	font-style: italic;
}

#sidebar h4.first {
	padding: 0 0 15px 0;
	border: none;
	margin: 15px 0 0 0;
}

.image_holder {
	position: relative;
}

.image_holder .options {
	position: absolute;
	border-top: 1px solid #272e33;
	border-bottom: 1px solid #272e33;
	border-left: 1px solid #272e33;
	top: 180px;
	right: 15px;
	font-size: 1.0em;
	font-weight: bold;
	height: 25px;
	padding: 0 10px;
	text-transform: uppercase;
	color: #eee;
	line-height: 25px;
	background: url(../../img/lines_bg.jpg);
}

.options a {
	color: #65c0f0;
}

.options {
	overflow: hidden;
}

.options a:hover {
	color: #eee;
}

#blog #sidebar li {
	margin: 0 0 5px 5px;
	border-bottom: 1px dotted #888;
}

#sidebar li a {
	font-weight: bold;
	color: #222;
	border: none;
}

a.mobileweb {
	color: #65c0f0;
}

a.mobileweb:hover {
	color: #eee;
}

ul.bookmarklets {
	margin: 0 20px 20px 20px;
}

ul.bookmarklets a:hover {
	color: #222;
	text-decoration: underline;
}

#sidebar a {
	color: #000;
	border-bottom: 1px solid #999;
}

#sidebar a:hover {
	color: #65c0f0;
}

#footer a:hover {
	color: #65c0f0;
}

.image_details h4 {
	padding: 20px 10px 10px 10px;
}

.image_details ul {
	padding: 0 20px 10px 20px;
	list-style-image: url(../../img/list_style-3.png);
	list-style-position: inside;
}

#spotlight{
	padding: 10px;
}


div.portfolio_piece {
	width: 332px;
	margin: 0 15px 15px 0;
	padding: 10px;
}

div.portfolio_piece.last {
	margin: 0 0 15px 0;
}

#header {
	height: 134px;
}

#header_wrapper {
	height: 97px; 
	margin: 18px 0 20px 12px;
}

#nav {
}

.navigation a {
	display: block;
	padding: 30px 30px 0 30px;
	height: 67px;
}

#nav li a:hover, #sitemap ul li a:hover {
}

#content {
	/*padding: 0 0 0 12px;
	background: #E6E8E5 url(../../img/body_bg_repeat.jpg) repeat-y top left;
	border-right: 1px solid #696969;*/
	background: #E6E8E5;
}

#main {
	width:719px;
}

#blog #main {
	padding: 30px;
	width:690px;
}

#spotlight {
	border: 1px solid #A4A9AF; 
}

#spotlight .portfolio_piece {
	width: auto;
	margin: 0;
	padding: 10px;
	float: none;
}

#spotlight .options {
	right: 11px;
	top: 140px;
}

#spotlight img {
	width: 460px;
	overflow: hidden;
}
#spotlight .image_holder {
	background: #D1D8DF;
	border: 1px solid #E0E8EF;
	float: left;
	position: relative;
	padding: 5px;
}

#spotlight a.image_link {
	display: block;
	padding: 0px;
	border: 1px solid #222;
}

#recent_work {
	padding: 15px 0 0 0;
}

#sidebar {
	width: 235px;
	padding: 15px 15px 0 0;
}

#main_col {
	width: 570px;
	margin: 0 30px 0 0;
}

#secondary_col{
	width: 400px;
}

h1 {
	width: 201px;
	height: 97px;
	background: url(../../img/logo.png) no-repeat top left;
}

h1 a {
	display: block;
	width: 201px;
	height: 97px;
}

h2.snipit {
	background: url(../../img/secondary_header-bg.jpg) repeat-x top left;
}

#sidebar .resume {
	display: block;
	height: 125px;
	width: 230px;
	background: url(../../img/view_resume.jpg) no-repeat top left;
	border: none;
}

#footer p, #footer li, img {
	margin: 5px;
}

ul.skill_set li {
	width: 255px;
	padding: 10px 0 10px 15px;
	background: #101010;
	border: 1px solid #1D1E1F;
}

div.flickr_badge_image img {
	padding: 5px;
	background: #101010;
	border: 1px solid #1D1E1F;
}

div.flickr_badge_image img:hover {
	background: #171D1F;
	border: 1px solid #2F3A3F;
	
}

#footer {
	background: #000 url(../../img/darkgray_bg.jpg) repeat-x top left;
}

#footer_wrapper {
	padding: 0 0 40px 12px;
}

#sitemap {
	height: 100px;
	background: url(../../img/secondary_header-bg.jpg) repeat-x top left;
	border-top: 1px solid #B5C7DF;
}

#sitemap ul {
	width: 1000px;
	margin: 0 auto;
}

#contact .contact_info {
	float: left;
	margin: 15px 0 0 20px;
	width: 425px;
	background: url(../../img/lines_bg.jpg);
}

#contact dl {
	padding: 20px 15px 15px 15px;
	color: #65c0f0;
}

#contact dd {
	margin: 0 0 20px 0;
	font-size: 1.2em;
	color: #eee;
	letter-spacing: .1em;
}

#contact dt {
	
}

#contact form {
	float: left;
	margin: 0 5px;
}

#contact .input:focus, #contact textarea:focus {
	background: #d5e0ee;
}

#contact .input, #contact textarea {
	border: 1px solid #fff;
	background: #e6e8e5;
}

#contact .input {
	display: block;
	padding: 10px;
	margin: 15px 0 0 0;
	width: 500px;
}

#contact textarea {
	height: 200px;
}

#contact .button {
	padding: 10px;
	margin: 15px 0 0 0;
}

/* =Colors 
--------------------------------------------------------------------------------*/

#main h2 {
	color: #eee;
	/*color: #65c0f0;*/
}

#footer p, #footer li, #footer a {
	color: #d4d4d4;
}

#spotlight {
	background-color: #99A4AF;
	border-color: #81909F;
}

.portfolio_piece {
	background-color: #B3B9BF; 
}

body, a {
	color: #0e0e0e;
}

#content , #sitemap ul li a .new_line {
	color: #0e0e0e;
}

.new_line {
	color: #777;
}

#nav a, #footer h3, .bubble a {
	color: #65c0f0;
}

#nav a:hover {
	color: #d4d4d4;
}

h2, #sitemap ul li a {
	color: #95cbde;
}

h2.snipit em {
	color: #00384F;
}

#nav li a:hover, #sitemap ul li a:hover {
	/*background: #2B2C2B;*/
}

/* =CSS3 Enhancements 
--------------------------------------------------------------------------------*/
#nav {
	background-color: rgba(97, 98, 96, 0.2);
}

#nav li a:hover, #sitemap ul li a:hover {
	background-color: rgba(0, 0, 0, 0.2);
}

ul.skill_set li, .portfolio_piece {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

#nav, #spotlight {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#spotlight p {
	text-shadow: 0 2px 3px #C2CFCC;
}

#main h3 {
	text-shadow: 0px 2px 3px #0F0F0F;
}

h2, #sitemap ul li a {
	text-shadow: 0 2px 3px #00384F;
}

h2 {
	
}

#sitemap ul li a .new_line , h2 em  {
	text-shadow: 0 2px 3px #2393BF;
} 

#footer h3 {
	text-shadow: 0 2px 3px #000;
}