/*
Theme Name: oldski multimedia 
Theme URI: http://oldski.net
Description: The theme for oldski multimedia.
Version: 1.0
Author: Kristopher Olds
Author URI: http://oldski.net/
Tags: fixed width
*/




/* 


font set up
----------------------------------------------------------------
*/



@font-face {
	font-family: 'KontrapunktBold';
	src: url('type/Kontrapunkt-Bold-webfont.eot');
	src: local('☺'), url('type/Kontrapunkt-Bold-webfont.woff') format('woff'), url('type/Kontrapunkt-Bold-webfont.ttf') format('truetype'), url('type/Kontrapunkt-Bold-webfont.svg#webfonthEqBly89') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'KontrapunktLightItalic';
	src: url('type/Kontrapunkt-LightItalic-webfont.eot');
	src: local('☺'), url('type/Kontrapunkt-LightItalic-webfont.woff') format('woff'), url('type/Kontrapunkt-LightItalic-webfont.ttf') format('truetype'), url('type/Kontrapunkt-LightItalic-webfont.svg#webfontAG1EACj7') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'KontrapunktLight';
	src: url('type/Kontrapunkt-Light-webfont.eot');
	src: local('☺'), url('type/Kontrapunkt-Light-webfont.woff') format('woff'), url('type/Kontrapunkt-Light-webfont.ttf') format('truetype'), url('type/Kontrapunkt-Light-webfont.svg#webfontW8TwLcf2') format('svg');
	font-weight: normal;
	font-style: normal;
}






/* 


structure
----------------------------------------------------------------
*/

html {
	background:#dcdcdc url('images/layout/bg-main.jpg') repeat-x;
	}
	
body {
	margin:0;
	padding:0;
	text-align:center;
	width: 100%;
	display: table;
	background: url('images/layout/bg-oldski.jpg') no-repeat top center;
	}
	
.home{
	margin:0;
	}
	
		
	.home #header{
		width:940px;
		height:140px;
		padding:10px;
		margin:0;
		position:relative;
		}
		
.page, .single, .archive{
	margin:0;
	
	}
	
	.page #header, .single #header, .archive #header, .blog #header{
		width:940px;
		height:140px;
		padding:10px;
		margin:0;
		position:relative;
		}
	
	.page .narrowcolumn, .single .narrowcolumn, .archive .narrowcolumn{
	
		}

	
#wrapper{
	padding:0;
	margin:0 auto;
	text-align:left;
	width:960px;
	}
	

#footer_wrap{
	width:100%;
	text-align:center;
	background: #111112; ;
	padding:20px 0;
	margin:0;
	color:#f9f6f6;
	}
	






/* 


globals
----------------------------------------------------------------
*/

body{
	color:#111112;
	font: 13px/20px "Helvetica Neue", 'HelveticaNeue', Arial, Helvetica, Geneva, "Lucida Grande";
	}
	
.clear{clear:both;}

h1 {font: 36px/54px "Helvetica Neue", Arial, Helvetica, Geneva, "Lucida Grande";
	letter-spacing: -2px;
	font-weight:bold;
	color:#022b4e;
	margin:5px 0;
	padding:0;
	}

	h1.title, h2.title{
		color:#f6f6f6;
		letter-spacing:normal;
		font-weight:bold;
		text-shadow: 0 1px 3px rgba(0,0,0,0.5);
		}
h2 {
	font: 24px/36px "Helvetica Neue", Arial, Helvetica, Geneva, "Lucida Grande"; 
	color:#16698d;
	margin:5px 0;
	padding:0;
	font-weight:bold;
	text-shadow: 0 1px 1px rgba(0,0,0,0.25);
	}
	
	h2.special{
		font: 32px/46px 'KontrapunktBold', Palatino, "Book Antiqua", serif; 			
		margin:20px 0 10px 0;
		padding:0;
		text-align:center;
		font-weight:bold;
		text-shadow: 0 1px 1px rgba(0,0,0,0.25);
		}

h3 {font: 18px/27px "Helvetica Neue", Arial, Helvetica, Geneva, "Lucida Grande";font-weight:bold;}

h4 {font: 14px/21px 'KontrapunktLight', Arial, Helvetica, Geneva, "Lucida Grande";font-weight:bold;}

p {}

strong{font: 13px/20px "Helvetica Neue", Arial, Helvetica, Geneva, "Lucida Grande"; font-weight:bold;}
	strong.power{text-transform:uppercase;}

em{font: 13px/20px "KontrapunktLightItalic", Arial, Helvetica, Geneva, "Lucida Grande"; font-style:italic;}
		
		
a{ color:#022b4e; text-decoration:none;}

a:hover{text-decoration:underline;}

a img{border:none;}

.site_link{
	font: 13px/20px "KontrapunktLight", Arial, Helvetica, Geneva, "Lucida Grande";
	}

big{
	font: 18px/27px "Helvetica Neue", Arial, Helvetica, Geneva, "Lucida Grande";
	font-weight:bold;
	padding:5px;
	background:#eef5bc;
	-webkit-border-radius: .3em;
	-moz-border-radius: .3em;
	border-radius: .3em;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	}
	
medium{
	font: 16px/24px 'KontrapunktLight', Arial, Helvetica, Geneva, "Lucida Grande"; 
	}
	
small{
	font: 12px/18px 'KontrapunktLight', Arial, Helvetica, Geneva, "Lucida Grande";
	font-weight:bold;
	text-transform:uppercase;
	padding:3px 8px;
	color:#414243;
	}
	
	

.light{
	font: 12px/18px "KontrapunktLight", Arial, Helvetica, Geneva, "Lucida Grande";
	}

/* font colors */

.limes{color:#c3d94b;}
.greens{color:#8fa834;}
.grays{color:#414243;}
.blacks{color:#111112;}0
.blues{color:#16698d;}
.reds{color:#a92929;}
	
	

/* layouts */	
	
.ctr{text-align:center;}
	
.rt{text-align:right;}
	
.lt{text-align:left;}

.fright{float:right;}
.fleft{float:left;}
	
img.rt{ float:right; padding:10px;}
img.lt{ float:left; padding:10px;}

.padding_wipe{padding:0;}

hr {width:100%; margin:5px 0 20px 0; background:#565e60;}

ul{list-style-type:none}

/* 


header
----------------------------------------------------------------
*/

	
#branding{
	position:absolute;
	top:20px;
	left:110px;
	}
	
	

#header .slides_wrap{
	position:absolute;
	bottom:0px;
	left:10px;
	width:940px;
	height:150px;
	}

/* -- navigation -- */

#nav{
	position:absolute;
	right:30px;
	top:60px;
	}
	
	#nav ul{
		list-style-type:none;
		margin:0;
		padding:0;
		}
		
		#nav ul li{
			float:left;
			}
			
			#nav ul li a{
				color:#f9f6f6;
				font-size:16px;
				padding:5px 10px;
				margin:0px 3px;
				display:block;
				font-weight:bold;
				text-decoration:none;
				text-shadow: 0 1px 1px rgba(0,0,0,0.25);
			}
			
			#nav ul li a:hover{
				text-decoration:none;
				color:#111112;
				background:#f9f6f6 url(images/layout/bg-box.jpg) repeat-x bottom left;
				-webkit-border-radius: 3px;
				-moz-border-radius:3px;
				border-radius:3px;
				-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
				-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
				box-shadow: 0 1px 3px rgba(0,0,0,0.5);
				border-bottom: 1px solid rgba(0,0,0,0.25);
				}
			
#nav_client{
	position:absolute;
	top:0px;
	right:30px;
	}
	
	#nav_client ul{
		list-style-type:none;
		margin:0;
		padding:0;
		}
		
	#nav_client ul li a{
		color:#f9f6f6;
		padding:5px 10px;
		display:block;
		font-weight:normal;
		text-decoration:none;
		text-shadow: 0 1px 1px rgba(0,0,0,0.25);
		}
			
	#nav_client ul li a:hover{
		text-decoration:none;
		background:#8fa834;
		-webkit-border-top-left-radius: 0px;
		-webkit-border-top-right-radius: 0px;
		-webkit-border-bottom-right-radius: 4px;
		-webkit-border-bottom-left-radius: 4px;
		-moz-border-radius-topleft: 0px;
		-moz-border-radius-topright: 0px;
		-moz-border-radius-bottomright: 4px;
		-moz-border-radius-bottomleft: 4px;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 4px;
		border-bottom-left-radius: 4px;
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
		-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
		box-shadow: 0 1px 3px rgba(0,0,0,0.5);
		border-bottom: 1px solid rgba(0,0,0,0.25);
		}
	
	
				
/* -- features -- */

#feature{
	position:relative;
	margin-top:-30px;
	margin-left:510px;
	width:420px;
	height:250px;
	overflow:hidden;
	}
			
	#feature #slide-1, #feature #slide-2, #feature #slide-3, #feature #slide-4{
		position:absolute;
		top:0;
		left:0;
		opacity:0;
		}
		
		#feature #slide-1{background:url(images/content/slides/web.png) no-repeat bottom center;}
		#feature #slide-2{background:url(images/content/slides/graphic_design.png) no-repeat bottom center;}
		#feature #slide-3{background:url(images/content/slides/internet_marketing.png) no-repeat bottom center;}
				
	#feature .slide{
		width:396px;
		height:230px;
		padding:10px;
		position:relative;
		}
		
	#feature .slide p {
		float:right;
		width:230px;
		margin:4px 0;
		padding:0 10px;
		}
		#feature .slide p strong{
			color:#16698d;
			}
		
	#feature .slide a.action {
		margin:4px 0;
		padding:0 10px;
		position:absolute;
		bottom:10px;
		right:20px;
		}
		
	#feature .slide h2 {
		float:right;
		width:230px; 
		padding:0 10px;
		margin:50px 0 0 0;
		line-height:28px;
		display:block;
		color:#022b4e;
		}

	#feature #slide-nav{
		position:absolute;
		top:10px; 
		right:10px;
		display:none;
		}
		
		#slide-nav li a{
			font-weight:normal;
			color:#555;
			}
				
		#slide-nav li a:hover, #slide-nav li a.active{
			font-weight:bold;
			color:#000;
			}


/* 


content
----------------------------------------------------------------
*/


#content{
	padding:10px;
	width:940px;
	}

#content.widecolumn{
	width:940px;
	}
	
	.widecolumn .column1, .widecolumn .column2, .widecolumn .column3{
		width:285px;
		float:left;
		padding:0;
		margin:10px 40px 10px 0px;
		}
		
	.widecolumn .column3{
		float:right;
		margin:10px 0px;
		}
	
		
#content.narrowcolumn{
	width:700px;
	float:left;
	}
	


.box_sm, .box_med, .box_la, .box_lg, .box_xl{
	margin:0 10px 5px 10px;
	float:left;
	padding:5px 0 10px 0;
	}
	
.box_sm{
	width:220px;
	}
	
.box_med{
	width:460px;
	}

.box_la, .box_lg{
	width:700px;
	}
	
.box_xl{
	width:940px;
	margin:0;
	padding:0;
	}
	
.first_box{
	margin-left:0;
	}
	
.last_box{
	float:right;
	margin-right:0;
	}
	
.page_intro{
	position:relative;
	}
	
	.page_intro h2{
		position:absolute;
		top:0;
		left:0;
		height:39px;
		width:400px;	
		text-align:center;
		}
		
		.page_intro h2 span{
			display:none;
			}
		.page_intro.home h1{
			position:absolute;
			top:30px;
			left:20px;
			width:413px;
			height:97px;
			text-indent:-9000px;
			background:url(images/layout/welcome.png) no-repeat top center;
			}
		
		.page_intro.home .greetings{
			position:absolute;
			width:180px;
			height:30px;
			top:-50px;
			left:20px;
			padding:14px 10px 12px 10px;
			text-align:center;
			background:url(images/layout/bg-greeting.png) no-repeat center left;
			}
			
				
				.greetings li{
					width:200px;
					text-align:center;
					position:absolute;
					top:22px;
					left:0px;
					}
					
			

		h2.title-services{background:url(images/content/titles/services.png) no-repeat center center;}
		h2.title-work{background:url(images/content/titles/work.png) no-repeat center center;}
		h2.title-contact{background:url(images/content/titles/contact_us.png) no-repeat center center;}
		h2.title-about{background:url(images/content/titles/about.png) no-repeat center center;}
		h2.title-blog{background:url(images/content/titles/blog.png) no-repeat center center;}
		
	.page_intro .intro{
		position:absolute;
		top:-30px;
		color:#f9f6f6;
		right:20px;
		width:460px;	
		font: 20px/28px 'KontrapunktLight', "Helvetica Neue", Arial, Helvetica, Geneva, "Lucida Grande";
		}
		
		
		
	

.pow{
	font: 20px/28px 'KontrapunktBold', "Helvetica Neue", Arial, Helvetica, Geneva, "Lucida Grande";
	text-shadow: 0 1px 1px rgba(0,0,0,0.25);
	}	
		
	
	
	
.about, .contact{height:130px;}
.services, .blog{height:160px;}
.work{
	background:url(images/layout/bg-work.png) bottom center no-repeat;
	height:380px;
	}
	
.cans{
	background:url(images/layout/bg-contact.png) top right no-repeat;
	height:225px;
	}
	
	
.bg{
	background:url(images/layout/bg-box.jpg) repeat-x bottom left;
	}

.couch{
	padding-top:215px;
	background:url(images/layout/couch-sm.png) no-repeat top center;
	}

.couch p{
	text-align:center;
	}

#sidebar{
	width:220px;
	float:right;
	}
	
	
	
	
	
#footer{
	width:940px;
	margin:0 auto;
	padding:0 10px;
	font-size:10px;
	line-height:15px;
	position:relative;
	}
	
	#footer a{
		text-decoration:none;
		color:#f9f6f6;
		}
		
	#footer a:hover{
		text-decoration:underline;
		color:#71b022;
		}
		

	#footer .site_info{
		width:220px;
		margin-right:10px;
		text-align:center;
		}
		
		#footer .site_info img{
			float:left;
			display:block;
			}
			
		#footer .footer_col_sm{
			width:180px;
			float:left;
			margin-right:30px;
			}
			
			#footer .footer_col_sm a{ color:#f6f6f5;}
			#footer .footer_col_sm a:hover{ color:#0c4b6f;}
			
		
#nav_footer{
	display:inline-table;
	margin-left:30px;
	margin-bottom:10px;
	height:20px;
	}
	
	#nav_footer ul{
		list-style-type:none;
		margin:0;
		padding:0;
		}
		
		#nav_footer ul li{
			float:left;
			}
			
			#nav_footer ul li a{
				color:#f9f6f6;
				font-size:12px;
				padding:5px 10px;
				display:block;
				font-weight:normal;
				text-decoration:none;
				text-shadow: 0 1px 1px rgba(0,0,0,0.25);
				border-bottom: 1px solid rgba(0,0,0,0);
			}
			
			#nav_footer ul li a:hover{
				text-decoration:none;
				color:#111112;
				background:#f9f6f6 url(images/layout/bg-box.jpg) repeat-x bottom left;
				-webkit-border-radius: 3px;
				-moz-border-radius:3px;
				border-radius:3px;
				-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
				-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
				box-shadow: 0 1px 3px rgba(0,0,0,0.5);
				border-bottom: 1px solid rgba(0,0,0,0.25);
				}
		
			
/* -- last.fm --

#lfmRecentTracks {
	width:180px; 
	border-collapse:collapse
	}

#lfmRecentTracks tbody tr{
	padding:5px 0;	
	border-top:1px solid #c7cfb2;
	border-bottom:2px solid #232323;
	}
 td.lfmTrackImageCell {
	 text-align:center;
	 padding-right:3px;
	 width:55px;
	 background:transparent url(http://cdn.last.fm/flatness/icons/res/3/track.png) no-repeat scroll 50% 50%
	 }
 img.lfmTrackImage { width:34px; height:34px}
 td.lfmTrackInfoCell { padding-left:3px}
 a.lfmTrackTitle {}
 span.lfmTrackArtist,  span.lfmTrackDate {display:block;}
 
 */
 
 
/* -- twitter feed -- */

.twit-list {
	margin: 10px 0;
	padding: 0;
	list-style: none;
	}

.twit-list li {
	padding: 10px 20px 10px;
	margin-bottom:5px;
	border-top:1px solid #c7cfb2;
	border-bottom:2px solid #232323;
	cursor: pointer;
	}

.twit-list li:hover {
	background: #f6f7f2 url(images/layout/bg-hover.jpg) repeat-x bottom left;
	border-top:1px solid #c7cfb2;
	border-bottom:2px solid #0e4b6f;
	color:#232323;
}

	.twit-list li:hover a{ color:#0c4b6f;}


		
/* 


images
----------------------------------------------------------------
*/


/*-- thumbnails -- */
	
.thumb_wrap{
	width:220px;
	height:190px;
	overflow:hidden;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius:4px;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	border-bottom:1px solid rgba(0,0,0,0.25);
	position:relative;
	margin:20px 0;
}

.thumb_wrap img{
		border:none;
		position:absolute;
		top:-85px;
		left:-25px;
		}

#show_title{
	background: url(images/layout/thumb_overlay.png) repeat top left;
	border-top:1px solid rgba(0,0,0,0.25);
	position:absolute;
	top:200px;
	width:200px;
	padding:4px 10px;
	left:0;
	height:200px;
	z-index:1;
	caption-side:#fff;
}

	#show_title h3, #show_title p, #show_title a{
		text-shadow: 0px -1px 1px rgba(0,0,0,0.25);;
		color:#f9f6f6;
		margin:3px 0;
		padding:2px;
		}
		
	#show_title h3{
		font-size:16px;
		line-height:24px;
		}
		
	
	
	
	
/* 


testimonials 
----------------------------------------------------------------
*/	
	
	

	
	.testimonial p{
		margin:0;
		padding:0 5px;
		font: 15px/25px 'KontrapunktLight', "Book Antiqua", Palatino, serif; 
		}
	
	.testimonial p.author{
		background:url(images/layout/testimonial-bottom.png) no-repeat top center;
		padding-top:25px;
		font:inherit;
		color:#16698d;
		}
		
		p.author a, p.author a:hover{color:#8fa834; font-family:'KontrapunktLight', "Book Antiqua", Palatino, serif;}
		
	



/*


buttons 
----------------------------------------------------------------
*/

.button, button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 18px/27px 'KontrapunktBold', "Book Antiqua", Palatino, serif; 
	padding:5px 10px;
	-webkit-border-radius: .3em;
	-moz-border-radius: .3em;
	border-radius: .3em;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	}
	
.button:hover, button:hover {
	text-decoration: none;
	}
	
.button:active {
	position: relative;
	top: 1px;
	}


/* blue button */
.blue {
	color: #f6f6f6;
	border: solid 1px #16698d;
	background: #16698d;
	background: -webkit-gradient(linear, left top, left bottom, from(#7fadc0), to(#16698d));
	background: -moz-linear-gradient(top,  #7fadc0,  #16698d);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7fadc0', endColorstr='#16698d');
	}
	
.blue:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#508faa), to(#16698d));
	background: -moz-linear-gradient(top,  #508faa,  #16698d);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#508faa', endColorstr='#16698d');
	}

.blue:active {
	color: #44a4be;
	background: -webkit-gradient(linear, left top, left bottom, from(#2d7898), to(#16698d));
	background: -moz-linear-gradient(top,  #2d7898,  #16698d);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#2d7898', endColorstr='#16698d');
	
	border-bottom: solid 1px #022b4e;
	}


/* green button */
.green {
	color: #f6f6f6;
	border: solid 1px #8fa834;
	background: #8fa834;
	background: -webkit-gradient(linear, left top, left bottom, from(#c7d399), to(#8fa834));
	background: -moz-linear-gradient(top,  #c7d399,  #8fa834);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c7d399', endColorstr='#8fa834');
	}
	
.green:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#abbe67), to(#8fa834));
	background: -moz-linear-gradient(top,  #abbe67,  #8fa834);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#abbe67', endColorstr='#8fa834');
	}
	
.green:active {
	color: #bfcf73;
	background: -webkit-gradient(linear, left top, left bottom, from(#9ab148), to(#8fa834));
	background: -moz-linear-gradient(top,  #9ab148,  #8fa834);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9ab148', endColorstr='#8fa834');
	}



/* black button */
.black {
	color: #f6f6f6;
	border: solid 1px #414243;
	background: #414243;
	background: -webkit-gradient(linear, left top, left bottom, from(#a0a0a1), to(#414243));
	background: -moz-linear-gradient(top,  #a0a0a1,  #414243);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a0a0a1', endColorstr='#414243');
	}
	
.black:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#717172), to(#414243));
	background: -moz-linear-gradient(top,  #717172,  #414243);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#717172', endColorstr='#414243');
	}

.black:active {
	color: #818283;
	background: -webkit-gradient(linear, left top, left bottom, from(#545555), to(#414243));
	background: -moz-linear-gradient(top,  #545555,  #414243);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#545555', endColorstr='#414243');
	}
	
	
.small{font-size:12px; line-height:18px;}
	
.medium{font-size:14px; line-height:21px;}


	
	
#first ul.xoxo{
	margin:0;
	padding:0;
	list-style-type:none;
	}
	
	#first ul.xoxo li h3{
		float:left;
		display:inline;
		}
	
.twittr, .lastfm{
	width:458px;
	height:109px;
	border:1px solid #fff;	
	position:relative;
	padding:0;
	}
	
	.twittr{
		background:url(images/layout/bg-twitter.jpg) no-repeat top left;
	}
	
	.social_link{
		position:absolute;
		bottom:5px;
		left:5px;
		}
	
	ul.twitter{
		position:absolute;
		top:10px;
		height:89px;
		left:100px;
		padding:20px 20px 20px 0;
		margin:0;
		list-style:none;
		}
			
		ul.twitter li{
			padding-right:10px;
			}	
				
		ul.twitter li span.twitter-timestamp{display:block;font-style:italic;font-size:10px;}
		
		
.lastfm{
	background:url(images/layout/bg-lastfm.jpg) no-repeat top left;
	font-size:11px;
	}
	
	.lastfm_nav{
		position:absolute;
		right:5px;
		top:5px;
		}
		
	.form_nav{
		width:460px;
		text-align:center;
		}
		
	.lastfm_nav ul.tabs, .form_nav ul.tabs{
		margin:0;
		padding:0;
		list-style-type:none;
		}
		
		.lastfm_nav ul.tabs li{
			float:left;
			margin-left:5px;
			}
			.lastfm_nav ul.tabs li a{
				padding:3px 6px;
				}
				
				.lastfm_nav ul.tabs li a.heart{
					color:#930;	
					}
				
			.lastfm_nav ul.tabs li.active a, .lastfm_nav ul.tabs li a:hover{
				background:;
				font-size:11px;
				text-decoration:none;
				color:#f6f6f6;
				-webkit-border-radius: 3px;
				-moz-border-radius:3px;
				border-radius:3px;
				-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
				-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
				box-shadow: 0 1px 3px rgba(0,0,0,0.5);
				border-bottom: 1px solid rgba(0,0,0,0.25);
				}
			
			.lastfm_nav ul.tabs li a:hover, .form_nav ul.tabs li a:hover{
				background:#44a4be;
				}
			
			.lastfm_nav ul.tabs li.active a, .form_nav ul.tabs li.active a{
				background:#16698d;
				}
				
			.lastfm_nav ul.tabs li a.heart:hover, .lastfm_nav ul.tabs li.active a.heart{
				color:#fff;
				background:#930;
				}
				
			.form_nav ul.tabs li{
				float:left;
				margin:0;
				}
				
			.form_nav ul.tabs li a, .form_nav ul.tabs li.active a, .form_nav ul.tabs li a:hover{
				background:none;
				}
				
			
	.form_space{
		min-height:500px;
	}
	
	.lastfm .tab_content{
		position:absolute;
		}
		
	.lastfm .tab_content{
		width:375px;
		right:5px;
		bottom:5px;
		}
	
	.tab_content .lfm_float{display:none;}
	
	.tab_content .lfm_track{
		float:left;
		width:64px;
		margin-left:10px;
		}
		
		.tab_content .lfm_track .lfm_art{
			width:64px;
			height:64px;
			border:2px solid #f5f5f5;
			overflow:hidden;
			background:url(images/content/missing_cover.jpg) no-repeat top left;
			}
			.tab_content .lfm_track .lfm_art a{
				width:64px;
				height:64px;
				background:url('images/content/overlay.png') no-repeat top left;
				border:0;
				position:absolute; 
				z-index:1;
				}
			
.sidebar, .sidebar_sm{
	padding-left:20px;
	width:200px;
	}

.sidebar{
	background:url(images/layout/bg-sidebar.png) no-repeat top left;
	}
	
.sidebar_sm{
	background:url(images/layout/bg-sidebar-sm.png) no-repeat center left;
	min-height:175px;
	}


/* ---- services ---- */

.service{}

	.service img{
		float:left;
		padding-right:20px;
		}
		
ul#process{
	margin:0;
	padding:0;
	list-style-type:none;
	}
	
	ul#process li{
		width:180px;
		padding:10px;
		margin:5px 0;
		background:#ededed;	
		}

/* ---- portfolio ---- */


.filter_wrapper{
	position:absolute;
	bottom:10px;
	left:0;
	}
	
	.filter_wrapper h3{display:inline; padding-right:10px;}
	
	
ul#filter li{float:left;padding:0; margin-right:5px; line-height:27px;}
	ul#filter li a{
		font-size:14px;
		padding:5px 10px;
		}
		
	ul#filter li a:hover, ul#filter li.current a{
		font-size:14px;
		text-decoration:none;
		color:#f6f6f6;
		-webkit-border-radius: 3px;
		-moz-border-radius:3px;
		border-radius:3px;
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
		-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
		box-shadow: 0 1px 3px rgba(0,0,0,0.5);
		border-bottom: 1px solid rgba(0,0,0,0.25);
		}
		
	ul#filter li a:hover{
		background:#44a4be;
		}
	
	ul#filter li.current a{
		background:#16698d;
		}	
	

ul#filter,
ul#portfolio{
	margin:0;
	padding:0;
	list-style-type:none;
	}
	
	ul#portfolio li{
		position:relative;
		margin:10px 0;
		padding:10px 20px 20px 20px;
		width:898px;
		border:1px solid #fff;
		background:#f6f6f6 url(images/layout/bg-portfolio.jpg) repeat-x bottom left;
		-webkit-border-radius: 3px;
		-moz-border-radius:3px;
		border-radius:3px;
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
		-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
		box-shadow: 0 1px 3px rgba(0,0,0,0.5);
		border-bottom: 1px solid rgba(0,0,0,0.25);
		}
		
		ul#portfolio li img.in_production{
			position:absolute;
			top:0;
			right:0;
			}
		
		ul#portfolio li .portfolio_box, ul#portfolio li .img_wrap{
			float:left;
			}
		
		ul#portfolio li .portfolio_box{
			width:315px;
			margin:5px 10px;
			}
			ul#portfolio li h2 span{display:block;}
			ul#portfolio li h2 span a{
				color:#8fa834;
				text-decoration:none;
				font-weight:bold;
				text-shadow: 0px -1px 1px rgba(0,0,0,0.25);
				font: 14px/21px 'KontrapunktBold', Arial, Helvetica, Geneva, "Lucida Grande";
				}
				
			ul#portfolio li h2 span a:hover{
				text-decoration:underline;
				}
		
		ul#portfolio li .image_gallery_box{
			width:300px;
			padding:10px;
			background:#dcdcdc url(images/layout/bg-img_wrap.jpg) repeat-x bottom left;
			border:1px solid #bebebe;
			margin:5px 10px 5px 0;
			-webkit-border-radius: 3px;
			-moz-border-radius:3px;
			border-radius:3px;
			-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
			-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
			box-shadow: 0 1px 3px rgba(0,0,0,0.5);
			border-bottom: 1px solid rgba(0,0,0,0.25);
			}
		ul#portfolio li .image_gallery_box .img_wrap{
			border:1px solid #bebebe;
			float:left;
			overflow:hidden; /* this is important */
			position:relative; /* this is important too */
			background:#fff;
			}
			
			.first_img{width:300px; height:100px;}
			.full_img{width:300px; height:200px;}
			.img_thumbs, .last_thumb{
				width:90px; 
				height:80px;
				margin:10px 12px 0 0;
				}
			.last_thumb{margin:10px 0 0 0;}
	
		ul#portfolio li .image_gallery_box .img_wrap img{
			position:absolute;
			top:-100px;
			left:-150px;
			}
		
		ul#portfolio li .image_gallery_box .img_wrap.img_thumbs img{
			position:absolute;
			top:-200px;
			left:-350px;
			}
			
		ul#portfolio li .image_gallery_box .img_wrap.last_thumb img{
			position:absolute;
			top:-175px;
			left:-300px;
			}
		
		ul#portfolio li.identity .image_gallery_box .img_wrap img{
			position:absolute;
			top:0px;
			left:-116px;
			}
	
	
	.box_sm ul#skills_used{
		margin:0;
		padding:0;
		list-style-type:none;
		}
		
		.box_sm ul#skills_used li.skill{
			width:170px;
			margin:0;
			border:none;
			padding:5px 0 5px 30px;
			line-height:20px;
			background:url(images/layout/list-arrow.png) no-repeat left center;
			-webkit-border-radius: none;
			-moz-border-radius:none;
			border-radius:none;
			-webkit-box-shadow:none;
			-moz-box-shadow: none;
			box-shadow: none;
			}
	
.skills_title{
	font: 18px/27px 'KontrapunktLight', Arial, Helvetica, Geneva, "Lucida Grande";
	color:#44a4be;
	margin:0 0 15px 0;
	}



/* ---- the process (on services page) ---- */

ul#process{
	width:200px;
	margin:0;
	padding:0;
	}
	
	ul#process li{padding-bottom:20px;}
	
	ul#process li.step1, ul#process li.step3{
		background:url(images/layout/bg-list_left.png) no-repeat bottom center;
		} 
		
	ul#process li.step5{background:none;}
		
	ul#process li.step2, ul#process li.step4{
		background:url(images/layout/bg-list_right.png) no-repeat bottom center;
		} 
		
	ul#process li.step1 img, ul#process li.step3 img, ul#process li.step5 img{
		padding: 0 0 0 5px;
		float:right;
		}
		
	ul#process li.step2 img, ul#process li.step4 img{
		padding: 0 5px 0 0;
		float:left;
		}
	
	ul#process li h3{
		font-size:14px;
		line-height:18px;
		padding:0;
		margin:0 0 5px 0;
		}
		
	ul#process li p{
		padding:3px 0;
		margin:0;
		font-size:12;
		line-height:18px;
		}

