/* ======================================== */
/* Designed by: Josh Jensen					*/
/* Contact: Josh@trakdesign.com				*/
/* Copyright: All Rights Reserved			*/
/* ======================================== */


/* Global Settings ========================================================== */

	* {margin: 0; padding: 0;}
	
	body {
		font-size: 62.5%;
		font-family: 'lucida grande',tahoma,sans-serif;
		background: #fff url(/_images/bg_body.gif);
		}

	a {text-decoration: none;}
	.clear {clear:both; margin:0; padding: 0; height: 1px;}

/* Header =================================================================== */

	#top_container {
		height: 347px;
		background: transparent url(/_images/bg_header.jpg) top center repeat-x;
		}
		
	h1 {
		position: relative;
		left: -196px;
		margin: 0 auto;
		width: 591px;
		height: 314px;
		text-indent: -5000px;
		overflow: hidden;
		background: transparent url(/_images/h1_main.jpg) top center no-repeat; 
		}
		
/* Container =============================================================== */
		
	#container {
		position: relative;
		top: -33px;
		margin: 0 auto;
		width: 816px;
		background: transparent url(/_images/bg_content.gif) top center repeat-y;
		}
		
	#left_column {
			float: left;
			width: 360px;
			}
			
		#left_column p {
			margin: 0 50px;
			position: relative;
			font-size: 1.3em;
			color: #666;
			line-height: 1.6em;
			}
			
		#left_column h3 {	
			position: relative;
			padding: 0 50px;
			font-size: 1.6em;
			color: #ff9933;
			margin: 0 0 15px 0;
			}
			
	#right_column {
		float: left;
		width: 440px;
		}
		
		

	/* Menu ================================================================ */

		#menu_bar {
			position: relative;
			margin: 0 auto;
			top: -33px;
			width: 816px;
			height: 56px;
			background: transparent url(/_images/bg_menu.jpg) top center no-repeat;
			}
		
			#menu_bar ul {
				float: right;
				list-style: none;
				margin: 0 8px 0 0;
				}
			
			#menu_bar li {
				float: left;
				}
			
			#menu_bar li a {
				text-align: center;
				font-weight: lighter;
				line-height: 36px;
				display: block;
				width: 84px;
				padding: 0 3px 0 0;
				font-size: 12px;
				color: #fff;
				height: 46px;
				background: transparent url(/_images/button_nav2.gif) top left no-repeat;
				}
				
				#menu_bar li a:hover {background-position: bottom;}
				
		
/* Projects ================================================================= */

	#projects h2 {
		position: relative;
		width: 95px;
		height: 26px;
		text-indent: -5000px;
		overflow: hidden;
		background: transparent url(/_images/h2_projects.gif) top center no-repeat; 
		margin: 0 0 10px 0;
		}
			
			
	#projects {
		margin: 10px 20px 0 25px;
		padding: 0 0 0 0;
		background: transparent url(/_images/bg_sidebar_left.jpg) center right no-repeat; 
		}
		 
		#projects ul {
			list-style: none;
			border-left: 3px solid #ff9933;
			padding-left: 7px;
			}
			
		#projects li {margin: 0 0 7px 0;}	
		
		#projects li a {
			display: block;
			width: 270px;
			height: 55px;
			padding: 3px;
			border: 1px solid #ccc;
			}
			
			#projects li a img {border: 0;} 
			
			#projects li a:hover {
				border: 1px solid #333;
				background: #333;
				}
			
/* Bottom Area ============================================================== */


	#content_bottom {
		background: transparent url(/_images/bg_content_bottom.gif) no-repeat;
		width: 816px;
		height: 23px;
		clear: both;
		}
		
		#bottom_area p {
			position: relative;
			float: left;
			margin: 20px 0 10px 25px;
			padding: 35px 0 0 3px;
			display: block;
			width: 350px;
			font-size: 1.3em;
			color: #666;
			line-height: 1.6em;
			}
			
			#bottom_area a {
				color: #ff9933;
				}			

				#bottom_area a:hover {
					text-decoration: underline;
					}
					
					
/* Catagories =============================================================== */

	#portfolio_categories {
		margin: 20px 0 0 35px;
		width: 200px;
		float: left;
		}
		
		#portfolio_right {
			float: left;
			width: 550px;
			margin: 20px 0 0 0px;
			padding-left: 25px;
			border-left: 1px solid #ccc;
			}
		
		#portfolio_categories ul {
			list-style: none;
			font-size: 1.1em;
			}
	
		#portfolio_categories ul.nav_categories li a {
			display: block;
			width: 150px;
			height: 25px;
			background: #fff url(/_images/category_main.gif) top right no-repeat;
			line-height: 23px;
			padding-left: 15px;
			color: #fff;
			}
			
			#portfolio_categories ul.nav_categories ul li a {
				display: block;
				margin: 0 0 0 29px;
				width: 120px;
				height: 25px;
				background: #fff url(/_images/category_sub.gif) top right no-repeat;
				line-height: 23px;
				padding-left: 15px;
				color: #fff;
				}
			
			
			#portfolio_categories ul.nav_categories li a:hover,
			#portfolio_categories ul.nav_categories ul li a:hover,
			#portfolio_categories ul.nav_categories li a.selected,
			#portfolio_categories ul.nav_categories ul li a.selected {background-position: bottom; color: #fff;}
			
/* Portfolio ============================================================= */		
		
		#portfolio_right {}
		
		#portfolio_right  a.thumbnail_sized img {border: 2px solid #333;}	
						
					#portfolio_right a {
						display: block;
						width: 152px;
						background: #fff;
						text-align: center;
						font-size: 1.2em;
						line-height: 1.5em;
						color: #ccc;
						padding: 3px;
						float: left;
						margin: 0 20px 20px 0;
						}
					
						#portfolio_right ul li a img {
							border: 1px solid #333;
							}
						
					 #portfolio_right ul li a:hover {
						color: #666;
						}
				
			#portfolio_right h3 {
				font-size: 1.6em;
				color: #ff9933;
				margin: 0 0 15px 0;
				}
				
			#portfolio_right .paginate p {}
				
				#portfolio_right .paginate p span {
					float: left;
					margin: 0 7px 0 0;
					line-height: 20px;
					font-size: 1.2em;
					color: #999;
					}
			
			#portfolio_right .paginate a,
			#portfolio_right .paginate b {
				display: block;
				margin: 0 3px 0 0;
				float: left;
				height: 20px;
				width: 20px;
				line-height: 20px;
				text-align: center;
				font-size: 1.4em;
				color: #fff;
				background: transparent url(/_images/paginate_orange.gif) center center no-repeat;
				}
				
				#portfolio_right .paginate b {background: transparent url(/_images/paginate_sea.gif) center center no-repeat;}
				
/* Portfolio ============================================================= */

		#full_screenshot {}
		
		#comany_info {margin: 20px 0 0 0;}
					
		#company_icon {
			float: left;
			}
			
			#company_icon img {
				padding: 3px;
				border: 1px solid #ccc;
				}
		
		.aboutthecompany {
			width: 350px;
			float: left;
			margin: 0 0 0 20px;
			}
			
			.aboutthecompany h4 a {
				margin: 0 0 10px 0;
				color: #333;
				font-size: 1.3em;
				}
				
				.aboutthecompany h4 a:hover {
				text-decoration: underline;
				}
				
				
				
			.aboutthecompany p { 
				font-size: 1.3em;
				color: #666;
				line-height: 1.6em;
				}
		
		#completion_status h4 {
			font-size: 1.3em;
			line-height: 16px;
			color: #3f321f;
			margin: 5px 0 5px 0;
			}
		
		
		#completion_status p {
			font-size: 1.2em;
			line-height: 16px;
			padding-left: 25px;
			}
			
		#completion_status {
			width: 200px;
			}
			
		#completion_status .beginning {
			color: #2c67af;
			background: #fff url(/_images/layout_add.gif) left center no-repeat;
			}
		
		#completion_status .in_progress {
			color: #d09d46;
			background: #fff url(/_images/layout_edit.gif) left center no-repeat;
			}
		
		#completion_status .completed {
			color: #64b04c;
			background: #fff url(/_images/accept.gif) left center no-repeat;
			}
			
		#completion_status .owner {
			color: #333;
			background: #fff url(/_images/user_orange.gif) left center no-repeat;
			}
			
		#completion_status .exit_link {
			background: #fff url(/_images/link_go.gif) left center no-repeat;
			}
			
			#completion_status .exit_link a {
				color: #333;
				text-decoration: none;
				}
				
				#completion_status .exit_link a:hover {
					text-decoration: underline;
					}
			
/* contactus ============================================================= */

		#contactus p,
		#contactus fieldset p,
			#contactus label {
				text-align: left;
				color: #333;
				font-size: 1.3em;
				line-height: 1.5em;
				}
				
				#contactus label {display: block; width: 150px; float: left;}
				
				#contactus span {}
							
		#contactus fieldset div {
			margin: 5px 0;
			}
			
			#contactus fieldset div span { 
				color: #ff9900;
				font-size: 1.0em;
				line-height: 1.5em;
				margin: 0 0 0 10px;
				}
		
			#contactus fieldset {
				border: 0;
				margin: 5px 0 0 10px;
				padding-left: 10px;
				/* border-left: 3px solid #ff9900; */
				}
				
				#contactus input {
					float: left;
					margin: 0 0 5px 0;
					font-size: 1.3em;
					color: #ff9900;
					}
		
			#contactus div.emailformat {
				width: 79%;
				padding: 5px;
				border: 1px solid #333;
				background: #cccc99;;
				}
				
				#contactus div.emailformat input {float: none;}
		
			#contactus .emailformat label {
				display: block;
				width: 250px;
				}
		
			#contactus h4 {
				width: 80%;
				margin: 0 0 0 -10px;
				padding: 3px 10px;
				color: #fff;
				font-size: 1.4em;
				background: #ff9900;
				}

/* Footer ============================================================= */

	#footer {
		margin: 0 0 20px 0;
		text-align: center;
		color: #333;
		}
		
		#footer a {
			color: #fff;
			}
			
			#footer a:hover {
				text-decoration: underline;
				}