/*

Totally Spun
Web Consultancy & Design
http://totallyspun.com
Copyright 2010 Totally Spun
Design by Paul Reynolds
contact: paul@totallyspun.com

*/


	/* GENERAL LAYOUT & STYLE */

		* {
			margin: 0;
			padding: 0;
		}

		body, html {
			height: 100%;
		}

		body {
			background: #ffffff;
			text-align: center;
			font-size: 75%;
			overflow: auto;
			font-family: Helvetica, Arial, sans-serif;
			letter-spacing: 2px;
			line-height: 1.6em;
			color: #aaa;
		}

		#positioning {
			width:1px;
			height:50%;
			margin-bottom:-18em; /* half of container's height */
		}


		#container {
			margin: 0 auto;
			position: relative; 
			height: 36em;
			text-align: center;
		}
		
		.navigation {
			height: 100px;
			text-align: left;
		}
		
		li {
			display: inline;
			float: left;
			margin-right: 35px;
			padding-top: 25px;
		}
		
		li.logo {
			padding-top: 0px;
			padding-bottom: 0px;
			width: 500px;
		}
		
		li.last {
			margin-right: 15px !important;
		}
		
		li a {
			display: block;
			width: 50px;
			height: 50px;
		}
		
		li a span {
			display: none;
		}
		
		a#link_home {
			background: url('images/wordmark.jpg') no-repeat 0 0;
			margin-top: none; 
			width: 500px;
			height: 100px; }
		
		a#link_web {
			background: url('images/web.png') no-repeat 0 0; }
		a:hover#link_web {
			background: url('images/web.png') 0 -50px; }
			
		a#link_bike {
			background: url('images/bike.png') no-repeat 0 0; }
		a:hover#link_bike {
			background: url('images/bike.png') 0 -50px; }
		
		a#link_music {
			background: url('images/music.png') no-repeat 0 0; }
		a:hover#link_music {
			background: url('images/music.png') 0 -50px; }

		a#link_love {
			background: url('images/love.png') no-repeat 0 0; }
		a:hover#link_love {
			background: url('images/love.png') 0 -50px; }

		a#link_mail {
			background: url('images/email.png') no-repeat 0 0; }
		a:hover#link_mail {
			background: url('images/email.png') 0 -50px; }
			
		#slider {
			width: 950px;
			margin: 0 auto;
			position: relative;
		}

		.scroll {
			width: 875px;
			overflow: auto;
			position: relative; /* fix for IE to respect overflow */
			clear: left;
		}
		
		.scrollContainer { 
			padding: 50px; 
			margin-top: -15px;
		}
		
		.scrollContainer div.panel {
			width: 850px;
			text-align: left;
		}
		
		.scrollButtons {
			position: absolute;
			top: 60px;
			cursor: pointer;
		}		

		.scrollButtons.left {
			left: -20px;
		}

		.scrollButtons.right {
			right: -40px;
		}

		.info_regular {
			margin: 0 auto;
			padding-left: 190px;
			width: 560px;
			overflow: hidden;
			text-align: left;
		}
		
		.info_regular p {
			margin-bottom: 1.5em;
		}
		
		.portfolio_item {
			float: left;
			width: 150px;
			font-size: 0.75em;
			margin-right: 50px;
			margin-bottom: 3em;
		}
		
		.portfolio_item img {
			clear: both;
			margin-bottom: 0.5em;
			border: 1px solid;
		}
		
		.portfolio_item.last {
			margin-right: 0px !important;
		}
		
		#portfolio_list a {
			color: #aaa;
		}
		
		#portfolio_list a:hover {
			color: #888;
		}
		
		.portfolio_item a img {
			filter:alpha(opacity=40);
			-moz-opacity:0.4;
			-khtml-opacity: 0.4;
			-webkit-opacity: 0.4;
			opacity: 0.4;
		}
				
		.info {
			font-size: 0.75em;
			width: auto;
		}
		
		.left {
			float: left;
		}
		
		.right {
			float: right;
			margin-right: 25px;
		}
		
		#portfolio_list {
			overflow: auto;
			margin-bottom: 2em;
		}
		
		#shirts_info {
			float: left;
			width: 250px;
			margin-right: 20px;
		}
		
		#events_info {
			float: left;
			width: 165px;
			margin-right: 0px;			
		}
		
		#shirts_image img {
			width: 125px;
		}
		
		#shirts_image img.last {
			padding-left: 25px;
		}
		
		#events_mix {
			float: right;
			width: 375px;
		}
		
		#events_mix div object{
			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
			filter: alpha(opacity=50);
			-moz-opacity: 0.5;
			-khtml-opacity: 0.5;
			-webkit-opacity: 0.5;
			opacity: 0.5;
		}
		
		#events_mix div:hover object {
			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			filter: alpha(opacity=100);
			-moz-opacity: 1;
			-khtml-opacity: 1;
			-webkit-opacity: 1;
			opacity: 1;
		}
		
		#events_mix div p {
			margin-bottom: 1em !important;
		}
		
		#events_mix p {
			font-size: 0.75em;
		}
		
		#events_mix p a {
			font-weight: bold;
		}
		
		#events_mix h3 {
			font-size: 0.9em;
		}
		
		#shirts_image img {
			filter:alpha(opacity=70);
			-moz-opacity:0.7;
			-khtml-opacity: 0.7;
			-webkit-opacity: 0.7;
			opacity: 0.7;
		}
		
		a {
			color: #888;
			text-decoration: none;
		}
		
		a:hover {
			text-decoration: underline;			
		}
		
		.love {
		}
		
		.love h2 {
			margin-top: -1px;
			font-size: 4.5em;
			font-weight: bold;
			line-height: 1em;
			margin-bottom: 25px;
		}
		
		#love img {
			width: 50px;
			float: right;
			margin-left: 25px;
			margin-right: 5px;
			filter:alpha(opacity=50);
			-moz-opacity:0.5;
			-khtml-opacity: 0.5;
			-webkit-opacity: 0.5;
			opacity: 0.5;
		}
		
		#love p {
			width: 400px;
		}
		
		#contact {
			float: right;
			width: 200px;
		}
				
		img {
			border: none;
		}

		.hidden {
			display: none; 
		}
		
		#contact_text {
			float: left;
			width: 275px;
		}
		
		#contact_form_holder {
		    width:250px; /* setting a fixed width of the contact form holder will make things easier later (like aligning and such) */
			float: right;
		}

		#contact_form_holder input, #contact_form_holder textarea {
		    width: 165px; /* make all the inputs and the textarea same size (100% of the div they are into) */
			float: right;
			font-family: inherit;
		    padding:1px; /* and make a custom padding, you can set whatever you like */
			font-size: 1em;
		}
		
		#contact_form_holder textarea {
			padding: 3px;
		}

		#contact_form_holder textarea {
		    height:75px; /* i never liked small textareas, so make it 100px in height */
		}

		#send_message {
		    width:173px !important; /* the width of the submit button  */
		    font-variant: small-caps; /* nicer font-variant (like explained before) */
		    border:1px solid black; /* remove the default border and put a normal black one */
		    cursor:pointer;
		    cursor:hand;
		}

		#cf_submit_p { text-align:right; } /* show the submit button aligned with the right side */

		/* styling */

		.error {
		    display: none; /* hide the errors */
		    /* add some styling */
		    padding:5px;
		    color: #D8000C;
		    font-size:12px;
		    background-color: #FFBABA;
			margin-bottom: 1.0em;
			-moz-border-radius: 5px;  
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;  
			-webkit-border-radius: 5px;
			border-radius: 5px;
		}
		.error img {
			margin-right: 5px;
		}
		.success {
		    display: none; /* hide the sucess div */
		    /* add some styling */
		    padding:10px;
		    color: #044406;
		    font-size:12px;
		    background-color: #B7FBB9;
		}

		#contact_logo { vertical-align: middle; }
		.error img { vertical-align:top; }
		
		.input {
			margin-bottom: 1em;
			overflow: hidden;
		}
		
		.input label {
			float: left;
		}
		
		.mix h3{
			font-size: 1.0em;
			font-weight: bold;
		}
		
		.mix p {
			float: right;
			clear: both;
		}		
		
		#player_container {
			position:relative;
			float: left;
			border: 1px solid #aaa;
			-moz-border-radius: 5px;  
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;  
			-webkit-border-radius: 5px;
			border-radius: 5px;
			width: 150px;
			height: 53px;
			margin-top: 0.25em;
			margin-bottom: 0.5em;
		}

		ul#icons {margin: 0; padding: 0; position: absolute; top: 12px; left: 28px;}
		ul#icons li {margin: 15px 2px; position: relative; padding: 0; cursor: pointer; list-style: none; }
		ul#icons span.ui-icon {float: left; margin: 0;}

		#sliderVolume {
			position:absolute;
			top:32px;
			right:13px;
			width:55px;
			height:.4em;
		}

		#sliderVolume .ui-slider-handle {
			height:.8em;
			width:.8em;
		}

		#bars_holder {
			position:absolute;
			top:7px;
			left:12px;
			width:125px;
		}
		
		#loaderBar {
			margin: 0 1px;
			padding: 0;
		}

		#sliderPlayback .ui-slider-handle {
			height:1.1em;
			margin-top: 2px;
		}

		#loaderBar.ui-progressbar {
			height:.1em;
			border:0;
		}