/* BODY/WRAPPERS --------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */

	* { margin: 0; padding: 0; border: 0px; outline: 0px; }
	.clear { clear: both; }

	body {
		background: #f1f1f1 url('images/bg.jpg') repeat-x;
		color: #999999; font: italic 12px/18px Georgia, sans-serif;
	}
	body#page_home { background: #f1f1f1 url('images/bg_feature.jpg') repeat-x; }
	#wrapper { position: relative; width: 850px; margin: 0 auto; }
	
	#overlay { 
		display: none;
		position: absolute; left: 0px; top: 0px; 
		width: 100%; height: 100%; z-index: 0; 
		background-color: #000; 
	}

	.sorry {
		padding: 6px 15px 8px 15px; text-align: center;
		font: bold italic 16px Georgia, Arial, sans-serif; color: #6b6b6b;
	}	
	
/* TYPOGRAPHY ------------------------------------------------------------------------------------------------------------ */
/* ----------------------------------------------------------------------------------------------------------------------- */	

	/* STYLED HEADINGS ---------- */
	h2 { clear: left; height: 50px; text-indent: -9999px; position: relative; left: -17px; }
	h2#h2_contact { background: url('images/h2_contact.jpg') no-repeat; }
	h2#h2_services { background: url('images/h2_services.jpg') no-repeat; }
	h2#h2_projectdocs { background: url('images/h2_projectdocs.jpg') no-repeat; }

	/* TEXT HEADINGS ---------- */	
	h3, dt { font: 16px/12px Georgia, sans-serif; text-transform: uppercase; color: #363636; padding: 5px 0 0 0; }
	h4 { font: 12px/12px Georgia, sans-serif; text-transform: uppercase; padding: 3px 0 0 0; }

	p { padding: 3px 0 7px 0; }
	.details { color: #868686; font-style: italic; }

	strong { color: #686868; }
	em { color: #dedede; }	

	a { color: #ccb456; text-decoration: none; }
	a:hover { color: #b39b3c; text-decoration: none; }	

		/* CSS3 TRANSITIONS */
		a { -webkit-transition: color .4s ease-in; }

		/* TEXT SELECTION */
		::selection { background: #dedede; /* Safari */ }
		::-moz-selection { background: #dedede; /* Firefox */ }	
	
/* HEADER/NAVIGATION ----------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */

	#header { height: 80px; }
	#header h1 { 
		width: 100px; height: 80px; float: left;
		background: url('images/logo.png') no-repeat left top; 
		text-indent: -9999px;
	}

	#navigation { 
		width: 515px; height: 52px; padding: 0 10px; float: right; position: relative; right: -20px;
		background: url('images/bg_nav.jpg') no-repeat left top; 
	}
	#navigation li { float: left; list-style-type: none; }
	#navigation li a { display: block; height: 52px; text-decoration: none; text-indent: -9999px; }
	
	#nav_home, #nav_home a { width: 80px; }
	#nav_projects, #nav_projects a { width: 105px; }
	#nav_freebies, #nav_freebies a { width: 105px; }
	#nav_services, #nav_services a { width: 105px; }
	#nav_contact, #nav_contact a { width: 100px; }

	#nav_home a:hover { background: url('images/bg_nav.jpg') no-repeat -10px -70px; }
	#nav_projects a:hover { background: url('images/bg_nav.jpg') no-repeat -90px -70px; }
	#nav_freebies a:hover { background: url('images/bg_nav.jpg') no-repeat -195px -70px; }
	#nav_services a:hover { background: url('images/bg_nav.jpg') no-repeat -300px -70px; }
	#nav_contact a:hover { background: url('images/bg_nav.jpg') no-repeat -405px -70px; }

	#nav_home.current a { background: url('images/bg_nav.jpg') no-repeat -11px -140px; }
	#nav_projects.current a { background: url('images/bg_nav.jpg') no-repeat -91px -140px; }
	#nav_freebies.current a { background: url('images/bg_nav.jpg') no-repeat -196px -140px; }
	#nav_services.current a { background: url('images/bg_nav.jpg') no-repeat -301px -140px; }
	#nav_contact.current a { background: url('images/bg_nav.jpg') no-repeat -406px -140px; }
	
/* CONTENT CONTAINERS ---------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
	
	#featured { clear: both; height: 220px; margin: 50px 10px; position: relative; top: -29px; }
	#featured #slider { width: 830px; }
	
	#content { padding: 30px 0 0 0; }
	#featured + #content { padding: 0; }
		
	.column_small { width: 300px; }
	.column_large { width: 510px; }
	div[class^="column"] { float: left; padding: 0 15px 0 0; margin: 3px 0 0 0; }
	div[class^="column"] + div[class^="column"] { padding: 0 0 0 15px; margin: 0 0 0 0; }

	.module_window {
		display: none; position: absolute; top: 200px; left: 175px;
		width: 500px; padding: 15px 15px 0 15px;
		background: #252525; color: #f1f1f1; z-index: 1000;
	}

/* LATEST NEWS BLOG ------------------------------------------------------------------------------------------------------ */
/* ----------------------------------------------------------------------------------------------------------------------- */

	#blog { margin: 14px 0 0 0; background: url('images/container_news.jpg') no-repeat left top; }
	
	.news { position: relative; padding: 0 35px 0 65px; }
	.news + .news { padding: 17px 35px 10px 65px; }
	h2 + .news + .news { background: url('images/news_item2.jpg') no-repeat 19px top; }
	
	.news h5 { 
		position: absolute; left: -14px; top: 0px; width: 50px; height: 50px; padding: 11px 15px 0 15px;
		background: url('images/tag_date.png') no-repeat center top; 
		color: #bcbcbc; font: bold 13px/13px Georgia, sans-serif; text-transform: uppercase;
		text-align: center;
	}
	.news + .news h5 { top: 9px; }	
	.news h5 strong { display: block; color: #ccb456; }

	/* PAGINATION ------------------------------------------------------------------------- */
	/* ------------------------------------------------------------------------------------ */

		.page_nav { 
			padding: 30px 10px 0 100px; float: right; font-size: 11px;
			background: url('images/news_navigation.jpg') no-repeat right top; 
		}
		.page_nav li { float: left; list-style-type: none; }
		.page_nav li:first-child { 
			margin-right: 7px; padding: 3px 6px; word-spacing: 2px;
			border: solid 1px #c7c7c7;	
		}
		.page_nav li a { display: block; margin: 4px 2px; padding: 0px 6px; color: #999999; }
		.page_nav li a:hover { color: #a6b842; }
		.page_nav li a.current, .page_nav li a.current:hover { background-color: #666666; color: #F1F1F1; border: solid 1px #c7c7c7; }

		.page_nav li.ellipsis { 
			background-color: transparent; 
			margin: 8px 2px 0px 2px; font-weight: bold; 
		}

/* DOWNLOADS or PROCESS -------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */

	#downloads { 
		width: 275px; float: left; margin: 0px 0 0 0; padding: 55px 25px 0 25px; 
		background: url('images/container_freebies.jpg') no-repeat center top; 
	}	
	#downloads li { list-style-type: none; }
	#downloads img { border: none; }

	#advert_cms { 
		position: relative; width: 275px; float: left; margin: 10px 0 0 0; padding: 70px 25px 0 25px; 
		background: url('images/container_cms.jpg') no-repeat center top; 
		z-index: -1;
	}
	#advert_cms #slider { 
		position: relative; width: 255px; margin: 0 auto; 
		border: solid 10px #F9F9F9; 
		z-index: -1;
		
		box-shadow: 0 0 5px #ccc;
		-moz-box-shadow: 0 0 5px #ccc;
		-webkit-box-shadow: 0 0 5px #ccc;
	}
	#advert_cms + a {
		display: block; width: 305px; height: 115px; position: absolute; right: -15px; top: 185px;
		background: url('images/tag_view.png') no-repeat right 55px; 
		text-indent: -9999px; cursor: pointer;
	}
	#advert_cms + a:hover { background: url('images/tag_view.png') no-repeat right -90px; }

/* PROJECTS --------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------ */

	.project { clear: both; position: relative; padding: 25px 0 0 0; }
	.project.alt { background: url('images/bg_project_alt.jpg') repeat-y center top; }
	
	.project .clear { height: 10px; padding: 25px 0 0 0; background: url('images/bg_project_border.png') no-repeat -130px 29px; }
		
	img { display: block; border: solid 1px #efefef; }
	.thumbnail {
		display: block; position: relative; width: 480px; border: solid 10px #F9F9F9;
		float: left; padding: 0; margin: 5px 30px 5px 10px;

		box-shadow: 0 0 5px #ccc;
		-moz-box-shadow: 0 0 5px #ccc;
		-webkit-box-shadow: 0 0 5px #ccc;		
		-webkit-transition: border .4s ease-in;
	}
	/* .thumbnail:hover { border: solid 10px #1b1818; }
	.thumbnail:hover img { border: solid 1px #d9c05e; } */
		
	.thumbnail.new { border: solid 10px #252525; }
	.thumbnail.new img { border: solid 1px #333333; }
	
	
	.thumbnail a {
		display: block; width: 515px; height: 152px; position: absolute; right: -35px; bottom: 0px;
		background: url('images/tag_view.png') no-repeat right 90px; 
		text-indent: -9999px; cursor: pointer;
	}
	.thumbnail a:hover { background: url('images/tag_view.png') no-repeat right -55px; }
	
	#page_freebies .thumbnail a { background: url('images/tag_download.png') no-repeat right 90px; }
	#page_freebies .thumbnail a:hover { background: url('images/tag_download.png') no-repeat right -55px; }	
	
	
	.project_details { width: 290px; float: right; padding: 10px 0 0 0; }
	.project h3 { font-size: 18px }
	.project h4 { padding-bottom: 6px; background: url('images/bg_project_title.png') no-repeat left bottom; }
	.project_details p + h4 { margin: 35px 0 5px 0; }
	.project_details h4 + p { margin: 5px 0 0 0; }
	
	.project_details li {  
		list-style-type: none; padding: 0 0 0 25px;
	}
	.project_details ul + p { margin: 35px 0 5px 0; }
	

	/* THUMBNAILS PAGE ----------------------------------------- */
	.project_thumbnails { width: 500px; float: left; }
	.project_thumbnails p {
		width: 480px; border: solid 10px #F9F9F9; padding: 0; margin: 5px 30px 15px 10px;

		box-shadow: 0 0 5px #ccc;
		-moz-box-shadow: 0 0 5px #ccc;
		-webkit-box-shadow: 0 0 5px #ccc;		
	}

	a.site { 
		display: block; width: 150px; height: 60px; position: relative; left: -12px;
		background: url('images/button_site.png') no-repeat left top; border: none;
		text-indent: -9999px; cursor: pointer;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	a.site:hover { background: url('images/button_site.png') no-repeat left -60px; }
	a.site:active { background: url('images/button_site.png') no-repeat left -120px; }

/* SERVICES --------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------ */

	dl { margin: 30px 0 0 0; }
	dt[id^="service"] { padding: 0 0 3px 120px; }	
	#service_solutions + dd { 
		position: relative; top: -20px; padding: 20px 0 40px 120px; 
		background: url('images/service_solutions.jpg') no-repeat left top; 
	}
	#service_design + dd { 
		position: relative; top: -20px; padding: 20px 0 40px 120px; 
		background: url('images/service_design.jpg') no-repeat left top; 
	}
	#service_web + dd { 
		position: relative; top: -20px; padding: 20px 0 40px 120px; 
		background: url('images/service_web.jpg') no-repeat left top; 
	}	

/* FORMS ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */


	form { margin: 10px 0 0 0; }
	
	form p { margin: 0 0 15px 0; }
	.errormsg { padding: 10px; background: #252525; color: #d9c05e; font-style: italic; }

	form label { display: block; padding: 0 3px 2px 3px; color: #363636; }
	form label strong { color: #d9c05e; }

	.formfield input, .formfield textarea { 
		width: 95%; padding: 10px; background-color: #fafafa; color: #969696; font-style: italic;
		background: #fafafa url('images/bg_input.jpg') repeat center bottom;
		border: solid 1px #dedede; 
		-moz-box-shadow: inset 0 0 3px 3px #fafafa;
		-webkit-box-shadow: inset 0 0 3px 3px #fafafa;
		box-shadow: inset 0 0 3px 3px #fafafa;
	}
	.formfield input:hover, .formfield textarea:hover { 
		border: solid 1px #d5d5d5; 
		-moz-box-shadow: inset 0 0 3px 3px #f5f5f5;
		-webkit-box-shadow: inset 0 0 3px 3px #f5f5f5;
		box-shadow: inset 0 0 3px 3px #f5f5f5;
	}
	.formfield input:focus, .formfield textarea:focus { 
		background: #fafafa; outline: solid 2px #d9c05e; color: #666666; 
		-moz-box-shadow: inset 0 0 3px 1px #eaeaea;
		-webkit-box-shadow: inset 0 0 3px 1px #eaeaea;
		box-shadow: inset 0 0 3px 1px #eaeaea;
	}
	
	input#submit { 
		width: 130px; height: 60px; position: relative; left: -12px;
		background: url('images/button_submit.png') no-repeat left top; border: none;
		text-indent: -9999px; cursor: pointer;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	input#submit:hover { background: url('images/button_submit.png') no-repeat left -60px; }
	input#submit:active { background: url('images/button_submit.png') no-repeat left -120px; }	

/* FOOTER ---------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */

	#footer { 
		clear: both; margin: 60px 0 30px 0; padding: 27px 20px 15px 50px;
		background: url('images/bg_footer.jpg') no-repeat center top;
		color: #969696; font: italic 11px/18px Arial, sans-serif;
	}
	#footer p { padding: 0 0 2px 0; }

	#footer .contact { 
		width: 180px; float: right; padding: 0 0 0 0;
		background: url('../images/interface/email.png') no-repeat 60px top; 
		text-align: right;
	}

	#footer ul { width: 90px; margin: 0 30px 0 0; float: right; }
	#footer li { list-style-type: none; }
	#footer li a {
		display: block; padding: 3px 5px 3px 5px;
		color: #969696; text-decoration: none;
	}
	#footer li a:hover { background-color: #2a2a2a; color: #f1f1f1; }