/*
----------------------------------------------------------------------------- 
HTML ELEMENTS
-----------------------------------------------------------------------------*/
	html {
		background: #EBEBEB;
		color: #000; }

	body {
		background: #EBEBEB url(../img/bg-metal-haze.jpg) no-repeat top center;
		color: #4E4E4E;
		color: #000;
		font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
		font-size: 62.5%;
		margin-bottom: 1em;  }

	.no-portfolio {
		background: #EBEBEB url(../img/no-portfolio.jpg) repeat-x 0 0 !important; }

	fieldset { 
		border: none; }

	fieldset legend { 
		display: none; }
	
	h1 {
		font-size:2.25em; }
		
	h2 {
		font-size:2em } 

	h3 {
		font-size:1.5em; }

	h4 {
		font-size:1.25em 
		font-weight: bold; }
	
	p {
		padding: .8em 0; }


/*
----------------------------------------------------------------------------- 
NAVIGATION
-----------------------------------------------------------------------------*/
	#logo {
		float: left; }
					
	#nav {
		float: right;
		text-align: right; }
		
	#nav ul,{
		list-style: none; }
	
	#nav li {
		float: left; }

	#nav a {
		background: inherit;
		color: #CCC;
		display: block;
		padding: .5em 1.25em;
		text-decoration: none; }

	#nav a:hover {
		background: inherit;
		color: #FFF; }
		
	#nav a.active {
		background: #111;
		color: #FFF; }
		
	#nav a:hover.active {
		background: #111;
		color: #FFF; }

/*
-----------------------------------------------------------------------------
PORTFOLIO
-----------------------------------------------------------------------------*/

	#portfolio {
		background: url(../img/computer_wo.png) no-repeat top right;
		height: 460px; 
		position: relative; }

	#portfolio h2 {
		color: #FFF;
		padding-top: 90px; }

	#portfolio p {
		color: #FFF;
		width: 50%; }

	#portfolio #display {
		/* background: #EFEFEF url(../img/thumb_k9.png) no-repeat 0 0; */
		height: 214px;
		position: absolute;
		right: 44px;
		top: 42px;
		width: 354px; }
		
	#portfolio #carousel-images ul li {width: 354px; height: 214px; overflow:hidden;}
	
	#portfolio #slider {
		background: url(img/bg-homeslider.png) no-repeat;
		top: 140px;
		left: 490px;
		padding: 10px;
		position: absolute;
		z-index: 100; }
		
	#portfolio #slider a {
		color: #FFF;
		padding: 0 0 10px 0; }

/*
----------------------------------------------------------------------------- 
CONTENT
-----------------------------------------------------------------------------*/
	#wrapper {
		clear: both;
		font-size: 1.25em;
		line-height: 1.8em;
		margin: 0 auto;
		padding-top: 30px;
		width: 960px; }
		
	#content {
		position: relative; }

	.no-portfolio #content {
		padding-top: 30px; }

	#content a {
		color: #808080; }

	#content a:hover {
		color: #000; }

	#content li {
		list-style: circle;
		margin: 0 0 0 3em; }

	#content img {
		border: solid 1px #CCC }

/*
----------------------------------------------------------------------------- 
LAYOUT: SIDEBAR, MAIN
-----------------------------------------------------------------------------*/

	.col-20 {
		float: left;
		margin-right: 38px;
		width: 192px; }

	.col-50-l {
		float: left;
		padding-right: 15px;
		width: 465px; }

	.col-50-r {
		float: left;
		padding-left: 15px;
		width: 465px; }
	
	.col-80 {
		float: left;
		width: 730px; }

	#sidebar ul {
		list-style: none;
		margin: 0;
		padding: 0; }

	#sidebar ul li {
		list-style: none;
		margin: 0;
		padding: 0; }

	#sidebar ul ul {
		padding-left: 2em; }

	#sidebar a {
		display: block;
		font-weight: bold;
		padding: 6px;
		text-decoration: none; }

	#sidebar a:hover {
		background: inherit;
		font-weight: bold; }

	#sidebar a.active {
		background: url(../img/active-arrow.gif) no-repeat center right; 
		color: #000;  } 

	#sidebar .split {
		border-bottom: solid 1px #CCC !important; 
		margin-bottom: 10px !important;
		padding-bottom: 10px !important; }

	#sidebar .split a {
		padding-bottom: 0 !important; }

	#clients {
		list-style-type: none; 
		padding-top: 10px; }

	#clients li {
		list-style-type: none;
		float: left; }

	#clients li span {
		display: none; }
/*
-----------------------------------------------------------------------------
TWITTER
-----------------------------------------------------------------------------
*/

	.group {
		position: relative; }
	
	.blog h3 {
		background: url(../img/icon-comments.png) no-repeat 2px 0; }

	.twitter h3 {
		background: url(../img/icon-twitter.png) no-repeat 2px 0; }

	.group h3 {
		border-bottom: solid 1px #999;
		padding: 0 0 10px 38px;
		margin-bottom: 10px; }

	.group h4 {
		font-weight: bold; }

	.group .more {
		position: absolute;
		margin: 0;
		padding: 0;
		right: 0;
		top: 5px; }

	.group .more a {
		border-bottom: none;
		text-decoration: none; }
	

/*
----------------------------------------------------------------------------- 
CONTACT
-----------------------------------------------------------------------------
*/
	#contactform {
		background: #252525;
		float: left;
		padding: 10px; }

	#contactform br {
		clear: left; }

	#contactform label {
		float: left;
		width: 140px; }

	#contactform input {
		background: #CCC;
		border: 0;
		padding: 2px; }

	#contactform textarea {
		background: #CCC;
		border: 0;
		clear: both;
		display: block;
		padding: 2px; }

	#address {
		float: left;
		padding: 0 0 0 20px; }

/*
----------------------------------------------------------------------------- 
FOOTER
-----------------------------------------------------------------------------
*/
	#footer {
		border-top: solid 1px #CCC;
		font-size: 85%; 
		margin-top: 20px; }

	#footer a {
		/* color: #AFAFAF; */
		color: #4E4E4E; 
		font-weight: bold; }

	#footer a:hover {
		/* color: #FFF; */ 
		color: #AFAFAF; }


/*
----------------------------------------------------------------------------- 
MISCELLANEOUS CLASSES
-----------------------------------------------------------------------------
*/
	.alert { 
		color: #BFA73B; }

	.left  {
		float: left; }

	.left img{
		margin-right: 20px; }

	.right {
		float: right; }
	
	.right img {
		margin-left: 20px; }

	.indent {
		padding-left: 20px; }
		
	.no-border {
		border: 0 !important; }

	.split {
		border-bottom: solid 1px #CCC; }

	.textright {
		text-align: right; }
		
	.textcenter {
		text-align: center; }

	.hidden {
		display: none;
		visibility: hidden; }

	.visible {
		display: block;
		visibility: visible; }

	.nl_r {
		clear: right; }

	.nl_l {
		clear: left; }

	.input {
		padding: 5px 5px; 
		background: #CCCCCC;
		border: 1px solid #666666;
		color: #000; }

	.cf:after {
    	content: "."; 
	    display: block; 
    	height: 0; 
	    clear: both; 
    	visibility: hidden; }

	.cf {display: inline-block;}

	/* Hides from IE-mac \*/
	* html .cf {height: 1%;}
	.cf {display: block;}
	/* End hide from IE-mac */