/*

			Theme Name: Sort Creative
			Author: Katy Grans
			Theme URI: http://www.sortcreative.com
			Author URI: http://www.sortcreative.com
			
			
			Green: #87b459
			Gray: #414042
			Light Gray: #d8d8d0
			Blue: #4baaae
			Pale White: #fbfdf6
			Light Blue: #b7e1e7
			
			
*/



/*
	RESET
*/		


*							{	margin: 0px; padding: 0; }

html						{	overflow-y: scroll; }


html, body					{	height: 100%; }
body						{	font-size: 100%; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #414042; 
								background: url(images/wood_grain.png); background-color: #d8d8d0; background-repeat: repeat; }
ul							{ 	list-style: none; }
ol							{	list-style: none; }

a							{	outline: none; text-decoration: none; }
a img						{	border: none; }

img							{	vertical-align: middle; }

img 					{ 	behavior: url(http://www.sortcreative.com/iepngfix.htc); }



/*
	TYPOGRAPHY
*/


p, li						{	font-size: 1.0em; line-height: 1.2em; margin: 0; list-style: none;  }

p.intro						{	font-size: 1.2em; line-height: 1.0em; font-weight: normal; margin: 5px 0 0px 0; }
h1.intro					{	font-size: 1.7em; color: #4baaae; line-height: 1.2em; font-weight: bold; }

h3.blue	{
		color: #4baaae;
		margin: 0 0px 5px 0;
		font-size: 1.0em;
		
}

ul.indent					{	margin-left: 10px; }

a							{	color: #87b459; font-weight: bold;  }
a:hover						{	color: #4baaae; font-weight: bold; }

/*
	UTILITY
*/

.floatLeft					{	float: left; }
.floatRight					{	float: right; }
.clear						{	clear: both; }
.button						{	background: #414042; border: none; padding: 4px 8px; color: white;  }
.button:hover				{	background: #4baaae; }

/*
	STRUCTURE
*/

#page_wrap					{	width: 960px; margin: 0px auto; min-height: 100%; height: auto !important; height: 100%;  }
#left_wrap					{	width: 650px; margin: 0px; float: left; }
#right_wrap					{	width: 310px; margin: 0px; float: right; }


#main_col_home				{	width: 650px; height: 288px; background-color: #fbfdf6; margin: 0px 0px 0px 0px; float: left;  }
#main_col_projects			{	width: 650px; background-color: #fbfdf6; margin: 0px 0px 0px 0px; float: left;  }


#left_col_services			{	width: 325px; height: 490px; background-color: #fbfdf6; margin: 0px 0px 0px 0px; float: left; }
#right_col_services			{	width: 325px; height: 490px; background-color: #fbfdf6; margin: 0px 0px 0px 0px; float: left; }
#top_services				{	width: 650px; background-color: #fbfdf6; margin: 0px 0px 0px 0px; float: left; }


p#recent 					{	background: url(images/side_recent.gif); height: 50px; width: 100px; margin: 195px 0 0 0;   }
p#services 					{	background: url(images/side_services2.gif); height: 50px; width: 100px; margin: 335px 0 0 0;   }
p#projectlist				{	background: url(images/side_projectlist2.gif); height: 50px; width: 100px; margin: 25px 0 0 0;   }

#left_sidebar				{	width: 100px; background-color: none; margin: 0px 0 0 0; float: left; }
#project_sidebar			{	width: 100px; background-color: none; margin: 0px 0 0 0; float: left; }
#main_col					{	width: 650px; background-color: #fbfdf6; margin: 0px 0px 0px 0px; float: left; position: relative;
 }
.inside						{	margin: 25px 25px 25px 25px; }
.inside_nobot			{	margin: 25px 25px 3px 25px;}

#link_sidebar				{	width: 310px; height: 170px; background-color: #414042;  float: right; margin: 0;  }
#project_sidebar			{	width: 310px; min-height: 150px; background-color: #414042;  float: right; margin: 0;  }


img#project					{	margin: 0px 0px 10px 0px; }
img#project_thumb			{	margin: 0px 20px 10px 0px; }


#recentwork_sidebar	 {
	width: 310px; float: right; margin: 0; 
}


#rightbar_project_list {
	width: 310px; height: 28px; background: url('images/right_bar_project_list3.gif'); margin: 0px; float: right; 
}


#rightbar_blog {
	width: 310px; height: 28px; background: url('images/right_bar_blog3.gif'); margin: 0px; float: right; 
}


#rightbar_recent_work {
	width: 310px; height: 28px; background: url('images/right_bar_recent_work3.gif'); margin: 0px; float: right; 
}

#bottombar {
	width: 650px; height: 198px; background: url('images/bottom_bar2.gif'); margin: 0px; float: left; 
}


ul#bottombar a  {	
	color: #fbfdf6; line-height: 2.2em; font-size: 1.0em; background-color: #87b459; padding: 5px 10px 5px 12px; position: relative; bottom: -160px; 
	font-weight: bold;  
}

ul#bottombar a:hover {
	background-color: #4baaae; color: #fbfdf6; padding: 5px 10px 5px 12px; font-size: 1.0em; font-weight: bold; 
}


.leftbar  { 
	width: 310px; height: 18px; background-color: #414042; margin: 0px 15px 10px 0; float: left;  
}

p.leftbar { 
	color: white; padding: 5px 5px 5px 10px;  font-size: 1.1em;  text-transform: uppercase;    
}

#services_col {
	width: 325px; height: 170px; background-color: #414042; margin: 0px; float: left;
}

#contact_col {
	width: 325px; height: 170px; background-color: #414042; margin: 0px; float: left;
}




/*
	HEADER
*/

h1#logo	a					{	width: 168px; height: 71px; background: url(images/sort_logo3.png); float: left; margin: 0; position: relative; bottom: -25px;  }
#top_bar					{	width: 960px; margin: 0px auto;  }
#top_bar_inside				{	width: 860px;  height: 110px;  margin: 0 0 0 0px; float: left; }


/*
	MENU
*/
 

#menu_bar	{	
	margin: 11px 0px 0px 0px; 

}

ul#top_nav {
	margin: 0; padding: 0;
	list-style: none;
	float: left;
}

ul#top_nav li {
	float: left;
	margin: 0; padding: 0;
}


#right_nav {
	margin: 0; padding: 0;
	float: right;
}




/*--CSS Sprites - Default State--*/
ul#top_nav a {
	float: left;
	display: block;
	height: 28px; /*--Specify height of navigation--*/
	margin-right: 2px;
	text-indent: -99999px; /*--Shoot the text off the page--*/
	background-position: left top;
}
/*--CSS Sprites - Hover State--*/
ul#top_nav a:hover {
	background-position: left -28px;
}
/*--Assign an image and width to each link--*/
ul#top_nav li.projects a {
	background-image: url(images/menu_projects.gif);
	width: 106px;
}

ul#top_nav li.services a {
	background-image: url(images/menu_services.gif);
	width: 100px;
}

ul#top_nav li.about a {
	background-image: url(images/menu_about.gif);
	width: 78px;
}
ul#top_nav li.contact a {
	background-image: url(images/menu_contact.gif);
	width: 98px;
}
ul#top_nav li.blog a {
	background-image: url(images/menu_blog.gif);
	width: 65px;
}


#projects li.projects a, /*--Projects Page > Projects Link--*/
#services li.services a, /*--Projects Page > Projects Link--*/
#about li.about a, /*--About Page > About Link--*/
#contact li.contact a, /*--Contact Page > Contact Link--*/
#blog li.blog a /*--Blog Page > Blog Link--*/
{
	background-position: left bottom;
}


/*
	BLOG ENTRIES
*/


ul#recent_post a  {	
	color: #414042; line-height: 2.2em; font-size: 0.9em; background-color: #b7e1e7; padding: 5px; font-weight: normal;   
}

ul#recent_post a:hover {
	background-color: #4baaae; color: #fbfdf6; padding: 5px; font-size: 0.9em; font-weight: normal;
}

.datebox {
		
		float: left; 
		padding: 5px;
		background: #b7e1e7;
		margin: 0 0px 5px 0;
		font-size: 0.8em;
		text-transform: uppercase;
		font-weight: bold;
		
		 
}
.datebox2    { width: 90px; height: 40px; background: #414042;  position: absolute; left: -100px;  padding: 5px; color: #fbfdf6; }

.date	{text-transform: uppercase; text-align: right;   }

ol.commentlist  {
		font-size: 0.8em;
		line-height: 1.2em;  
}


.comment_bubble {
		background: #d8d8d0;
		padding: 10px;  		
}

.field {
		margin: 10px 0 10px 0;
}

h3#comments {
		margin: 20px 0 5px 0;
}

h3#respond {
		margin: 5px 0 0px 0;
}

/*
	FOOTER
*/

#footer {
	margin: 11px 0 11px 0px; }
	



/*
	SLIDESHOW
*/



#gallery {
	position:relative;
	height:260px
}
	#gallery a {
		float:left;
		position:absolute;
		
	}
	
	#gallery a img {
		border:none;
	}
	
	#gallery a.show {
		z-index:500
	}

	#gallery .caption {
		z-index:600; 
		background-color:#414042; 
		color:#ffffff; 
		height:100px; 
		width:100%; 
		position:absolute;
		bottom:0;
	}

	#gallery .caption .content {
		margin: 5px 25px 5px 25px;
	}
	
	#gallery .caption .content h3 {
		margin:0;
		padding:0;
		color:#1DCCEF;
		font-size: 1.0em;
	}