/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Labrum Design Co. ~~~ Feel free to use anything you see in here, but remember that full-on copying makes you dumber.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@font-face {
	font-family: 'MuseoSans500';
	src: url('museosans_500.eot');
	src: local('Museo Sans'), local('MuseoSans-500'), url('museosans_500.woff') format('woff'), url('museosans_500.ttf') format('truetype');
}

html{ margin: 0; padding: 0; height:100%; }
body{ margin: 0; padding: 0; height:100%; font-size: 12px; text-align: center; min-width: 960px; background:url(../images/mesh.png) repeat; color:#666; font-family: "MuseoSans500",sans-serif; line-height: 100%; }
	
/* Navigation ++++++++++++++++++++++++++++++++++++++++*/
#nav{ position: fixed; width:100%; z-index: 5; }
	#nav ul{ margin:0 auto; padding:0; width:100px; height:36px; background:url(../images/nav-bg.png) no-repeat; list-style-type: none; padding-left:11px; }
	#nav li{ float:left; margin-top:5px; }
	#nav ul li a{ height:20px; text-indent: -9999px; display:inline-block; background-image:url(../images/nav.png); outline:none; }
		li#nav-portfolio a{ width:30px; background-position: left top; }
		li#nav-portfolio a:hover{ background-position: left center; }
			li#nav-portfolio a.pressed{ background-position: left bottom; }
		li#nav-about a{ width:30px; background-position: center top; }
		li#nav-about a:hover{ background-position: center center; }
			li#nav-about a.pressed{ background-position: center bottom; }
		li#nav-contact a{ width:30px; background-position: right top; }
		li#nav-contact a:hover{ background-position: right center; }
			li#nav-contact a.pressed{ background-position: right bottom; }

/* Header ++++++++++++++++++++++++++++++++++++++++*/
#header{ height:150px; background:url(../images/glow-top.png) no-repeat center top; }
	#top-bar{ background:url(../images/top-bar.png) repeat-x; height:6px; }
	#header h1{ background:url(../images/logo-glow.png) no-repeat; width:291px; height:103px; display:block; position:absolute; margin-left:-50px; }
	#header h1 a, .labrumco{ background:url(../images/labrumco.png) no-repeat; width:200px; height:50px; text-indent: -9999px; display:block; position: absolute; margin:25px 0 0 50px; }
		.labrumco{ margin:0 auto !important; position: static !important; }
	#header strong{ background:url(../images/design-dev-apps.png) no-repeat; width:258px; height:23px; text-indent: -9999px; display:block; float:right; margin-top:47px; }
			
/* Portfolio ++++++++++++++++++++++++++++++++++++++++*/
#portfolio{ text-align: left; }
	#portfolio .container{ padding-left:1px; width:959px; }
	/*Apps*/
	#portfolio div.app{ position: relative; }
	#portfolio div.app a{ display:block; margin-bottom:58px; }
		#portfolio div.app img{ border:none; padding:7px; border:1px solid #000; -moz-border-radius:5px; -webkit-border-radius:5px; background:rgb(0, 0, 0); background:rgba(0, 0, 0, 0.3); -moz-box-shadow:#333 0px 1px 0px; -webkit-box-shadow:#333 0px 1px 0px; }
		#portfolio div.app em{ display:none; text-indent: -9999px; position: absolute; right:9px; top:8px; z-index: 4; background:url(../images/arrow.png) no-repeat; width:37px; height:37px; }
	/*Websites*/
#portfolio ul{ list-style-type: none; }
	#portfolio li{ float:left; position: relative; }
	#portfolio li a{ border:none; }
	#portfolio li img{ padding:7px; border:1px solid #000; -moz-border-radius:5px; -webkit-border-radius:5px; background:rgb(0, 0, 0); background:rgba(0, 0, 0, 0.3); -moz-box-shadow:#333 0px 1px 0px; -webkit-box-shadow:#333 0px 1px 0px; }
	#portfolio p{ display:none; position: absolute; left:8px; bottom:10px; margin:0; background:url(../images/title-bg.png) repeat-x; width:180px; height:19px; padding-top:7px; text-shadow: #000 0px -1px 0px; font-size:11px; color:#CCC; }
	#portfolio em{ display:none; text-indent: -9999px; position: absolute; right:-22px; top:8px; z-index: 4; background:url(../images/plus.png) no-repeat; width:37px; height:37px; }
	
	/*Card Carousel Structure*/
	.jcarousel-container { position: relative; width:196px; height:220px; float:left; margin-right:58px; }
	.last{ margin-right:0; }
	.jcarousel-clip { z-index: 2; padding: 0; margin: 0; overflow: hidden; position: relative; }
	.jcarousel-list { z-index: 1; overflow: hidden; position: relative; top: 0; left: 0; margin: 0; padding: 0; }
	.jcarousel-list li, .jcarousel-item { float: left; list-style: none; width: 196px; margin:0px 30px 0px 0px; padding:0; text-align: center; }
	.jcarousel-next { z-index: 3; display: none; }
	.jcarousel-prev { z-index: 3; display: none; }
	
	/*Carousel Skin*/
	.jcarousel-list li a{ border:none !important; text-decoration: none; }
		.jcarousel-list li a:hover{ }
		.jcarousel-list li span{ display:inline-block; }
	.jcarousel-container {  }
	.jcarousel-container-horizontal {  } 
	.jcarousel-item{ width: 196px; } 
	.jcarousel-item-horizontal { margin-right: 30px; } 
	
	.jcarousel-prev-horizontal{ position: absolute; top: 173px; left: 78px; width: 13px; height: 14px; cursor: pointer; background:url(../images/arrow-left.png) no-repeat left top; } 
	.jcarousel-next-horizontal{ position: absolute; top: 173px; left: 105px; width: 13px; height: 14px; display:block; cursor: pointer; background:url(../images/arrow-right.png) no-repeat left top; }
		.jcarousel-prev-horizontal:hover,.jcarousel-next-horizontal:hover{ background-position: top center; }
		#portfolio .pressed{ background-position: right top !important; }

/* About ++++++++++++++++++++++++++++++++++++++++*/
#about{ background:url(../images/mesh-dark.png) repeat; text-align: left; }
#about-A{ float:left; width: 280px; margin-right:50px; }
#about-B{ float:left; width: 330px; margin-right:50px; }
	.about-B-left{ float:left; width:170px; }
	.about-B-right{ float:left; width:170px; }
	.about-wrap{ width:350px; height:140px; }
#about-C{ float:left; width: 250px; margin-right:0px; }

h2.im-clifton{ background:url(../images/title-imclifton.png) no-repeat; width:145px; height:27px; text-indent: -9999px; }
h2.skills-experience{ background:url(../images/title-skills.png) no-repeat; width:195px; height:27px; text-indent: -9999px; }
h2.articles{ background:url(../images/title-articles.png) no-repeat; width:80px; height:27px; text-indent: -9999px; }
	h2.articles a{ display:block; width:80px; height:27px; }
#about h3{ color:#0CF; font-size:11px; text-transform: uppercase; text-shadow: #000 0px -1px 0px; font-weight: normal; letter-spacing:1px; margin:0 0 2px 0; }
#about h4{ font-size:12px; font-weight: normal; margin:8px 0 0 0; color:#DDD; }

#about ul{ list-style-type:none; margin:0; padding:0; }
	#about li{ margin-top:8px; color:#CCC; text-shadow: #000 0px -1px 0px; }

	#about-C li a{ text-shadow: #000 0px -1px 0px; color: #0C9; text-decoration: none; line-height: 120%; background:rgb(0, 0, 0); background:rgba(0, 0, 0, 0.5); padding:10px; -moz-box-shadow:#222 0px 1px 0px; -webkit-box-shadow:#222 0px 1px 0px; -moz-border-radius:5px; -webkit-border-radius:5px; display:block; border:1px solid #000; }
		#about-C li a:hover{ color: #CCC; background:#000; }

#about p{ color: #999; line-height: 130%; font-style: normal; text-shadow: #000 0px -1px 0px; }
	#about p a{ color: #0C9; text-decoration: none; text-shadow: #000 0px -1px 0px; }
	#about p a:hover{ color: #DDD; }
	p.subdued{ margin:0 0 10px 0; }
		p.subdued a{ color:#999 !important; }
	#about p img{ float:right; margin-left:10px; margin-bottom:5px; background:#000; padding:4px; border:1px solid #222; -moz-border-radius:5px; -webkit-border-radius:5px; }

/* Contact ++++++++++++++++++++++++++++++++++++++++*/
#contact{ padding-top:30px; text-align: left; background:url(../images/glow-top.png) no-repeat center top; }
	.title-contact{ width:475px; height:75px; background:url(../images/title-contact.png) no-repeat; text-indent: -9999px; margin:0 auto 50px auto; }
#contact-left{ float:left; width:600px; margin-right:27px; }

#contact-A, #contact-B{ float:left; width: 240px; margin-right:56px; }
#contact-C{ clear:both; }

h2.title-proposal{ background:url(../images/title-proposal.png) no-repeat; width:205px; height:27px; text-indent: -9999px; }

label{ color:#999; font-size:11px; text-transform: uppercase; text-shadow: #000 0px -1px 0px; display:block; letter-spacing:1px; margin-bottom:2px; }
	label em{ color:#444; font-style: normal; letter-spacing: 0px; }
input[type=text]{ width:205px; height:25px; padding:5px 10px; background:url(../images/input-bg.png) no-repeat; border:none; margin-bottom:20px; color:#DDD; font-size:12px; }
input:focus{ outline:none; color:#0CF; }
textarea{ width:500px; height:95px; padding:10px; background:url(../images/textarea-bg.png) no-repeat; border:none; color:#DDD;  font-family: "MuseoSans500",sans-serif; font-size:13px; margin-bottom:15px; }
	textarea:focus{ color:#0CF; }

#form-contact ul{ list-style-type: none; margin:0 0 20px 0; padding:0; }
#form-contact ul li{ margin-top:8px; }
#form-contact ul li a{ background:url(../images/radio-off.png) no-repeat left top; color:#666; text-decoration: none; padding-left:21px; outline:none; text-shadow: #000 0px -1px 0px; }
	#form-contact ul li a:hover{ color:#0CF; }
	#form-contact ul li a.selected{ background:url(../images/radio-on.png) no-repeat left top; color:#DDD; }

a.button-proposal{ background:url(../images/button-proposal.png) no-repeat left top; width:124px; height:33px; margin-right:10px; display:block; text-indent: -9999px; outline:none; float:left; }
	a.button-proposal:hover{ background-position: center top; }
	a.button-proposal.pressed{ background-position:right top; }

.sending, .success{ float:left; margin-top:3px; display:none; }

/*Validation & Processing*/
.error{ background:url(../images/error.png) no-repeat; width:19px; height:19px; display:none; }
.error-thename, .error-theemail{ position:absolute; margin-left:215px; margin-top:-62px; }
.error-thedescription{ position:absolute; margin-left:510px; margin-top:-137px; }
.error-thescope, .error-thetimeline, .error-theneed, .error-theexperience{ position:absolute; margin-left:3px; margin-top:-1px; }

#iphone{ float:right; position: relative; width:333px; height: 600px; display:block; background:url(../images/iphone.png) no-repeat; }
#iphone-home{ width:258px; height:295px; margin-left:39px; margin-top:120px; position: absolute; z-index: 1; display:none; }
	#iphone-home ul{ margin:14px 0px 0px 14px; list-style-type: none; overflow: auto; padding:0; }
	#iphone-home ul li{ float:left; margin:0px 14px 20px 0px; background:none; padding-left:0px; }
	#iphone-home ul li a, #iphone-home ul li a:visited{ height:57px; text-indent: -9999px; display:inline-block; position: relative; outline:none; }
		#iphone-home ul li a:active{ opacity: 0.7; }
	#iphone-dock{ width:258px; height:74px; margin-left:35px; margin-top:409px; position: absolute; z-index: 1; text-align: center; }
	#iphone-home-gtalk{ background:url(../images/message-gtalk.png) no-repeat; width:258px; height:386px; margin-left:39px; margin-top:106px; position: absolute; z-index: 2; }
	#iphone-email{ width:258px; height:386px; margin-left:39px; margin-top:106px; position: absolute; z-index: 2; background:url(../images/iphone-emailbg.jpg) no-repeat #FFF; }
	#iphone p{ position: absolute; bottom:0; text-align: center; width:333px; bottom:-20px; font-size:10px; font-style: italic; color:#555; }

a.twitter{ background:url(../images/icon-twitter.png) no-repeat; width:46px; left:-20px; top:-20px; }
a.facebook{ background:url(../images/icon-facebook.png) no-repeat; width:46px; left:-20px; top:-20px; }
a.gtalk{ background:url(../images/icon-gtalk.png) no-repeat; width:46px; left:20px; top:-20px; }
a.linkedin{ background:url(../images/icon-linkedin.png) no-repeat; width:46px; left:20px; top:-20px; }
a.delicious{ background:url(../images/icon-delicious.png) no-repeat; width:46px; left:-20px; top:-20px; }
a.labrums{ background:url(../images/icon-labrums.png) no-repeat; width:46px; left:-20px; top:-20px; }
a.nt{ background:url(../images/icon-nt.png) no-repeat; width:46px; left:20px; top:-20px; }
a.lastfm{ background:url(../images/icon-lastfm.png) no-repeat; width:46px; left:20px; top:-20px; }
a.lala{ background:url(../images/icon-lala.png) no-repeat; width:46px; left:-20px; top:20px; }

a.dismiss{ background:url(../images/message-dismiss.png) no-repeat bottom left; width:174px; height:36px; display:inline-block; position: relative; margin-top:212px; margin-left:42px; text-indent: -9999px; }
a.dismiss-gtalk{ background:url(../images/message-dismiss.png) no-repeat bottom left; width:174px; height:36px; display:inline-block; position: relative; margin-top:212px; margin-left:40px; text-indent: -9999px; }
	a.dismiss:active,a.dismiss-gtalk:active{ opacity:0.7; }
a.email{ background:url(../images/icon-email.png) no-repeat left top; width:48px; height:66px; display:inline-block; margin-top:16px; text-indent: -9999px; outline: none; }
	a.email:active{ background-position: right top; }

#iphone-email input{ width:200px; background:none; color:#000; height:16px; border:none; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
#iphone-email textarea{ position:absolute; margin-left: 5px; margin-top: 162px; width:248px; height:183px; padding:0; display:block; background:none; border:none; outline: none; color:#000; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; -moz-box-shadow: none; -webkit-box-shadow: none; }
	#iphone-email input:focus, #iphone-email textarea:focus{ border:none; }
#iphone-email label{ display:none; }
	#iphone-email #name{ position: absolute; margin-left:45px; margin-top:91px; -moz-box-shadow: none; -webkit-box-shadow: none;}
	#iphone-email #email{ position: absolute; margin-left:45px; margin-top:126px; -moz-box-shadow: none; -webkit-box-shadow: none; }
	#iphone-email #sending{ position: absolute; margin-left:54px; margin-top:370px; }
	#iphone-email #sending-text{ position: absolute; margin-left:105px; margin-top:356px; background:url(../images/iphone-sending-text.jpg) no-repeat; display:block; width:48px; height:12px; }
	#iphone-email-success{ width:258px; height:386px; margin-left:39px; margin-top:106px; position: absolute; z-index: 3; background:url(../images/iphone-emailbg-success.jpg) no-repeat; }
		
a.send{ background:url(../images/button-send.jpg) no-repeat left; width:41px; height:24px; display:block; position: absolute; margin-left:212px; margin-top:22px; text-indent: -9999px; }
a.cancel{ background:url(../images/button-cancel.jpg) no-repeat left; width:49px; height:24px; display:block; position: absolute; margin-left:5px; margin-top:22px; text-indent: -9999px; }

/*Fine Print*/
#fine-print{ margin:30px 0 30px 0; clear:left; width:520px; }
#fine-print h3{ color:#888; font-weight: normal; text-transform: uppercase; font-size:9px; margin-bottom:5px; text-shadow: #000 0px -1px 0px; letter-spacing:1px; }
	#fine-print p{ font-size:10px; margin:5px 0px; color:#555; text-shadow: #000 0px -1px 0px; font-style: italic; }
	#fine-print em{ color:#777; }
	
/* Footer ++++++++++++++++++++++++++++++++++++++++ */
#footer{ background:url(../images/mesh-dark.png) repeat; height:45px; text-shadow: #000 0px -1px 0px; }
	#footer p{ color:#444; font-size:10px; text-transform: uppercase; float:left; text-align: left; margin:0; line-height: 120%; }
	#footer ul{ float:right; list-style-type: none; margin:0; }
		#footer ul li{ float:left; margin-left:20px; }
		#footer ul li a{ color:#444; text-decoration: none; font-size:10px; text-transform: uppercase; line-height: 120%; }
			#footer ul li a:hover{ color:#666; }

/* Misc ++++++++++++++++++++++++++++++++++++++++*/
.container{ margin:0 auto; width:960px; overflow:auto; }
#band-top{ background:url(../images/band-top.png) repeat-x; height:14px; }
	#shadow-top{ background:url(../images/shadow-top.png) repeat-x; height:16px; }
	
#band-bottom{ background:url(../images/band-bottom.png) repeat-x; height:14px; }
	#shadow-bottom{ background:url(../images/shadow-bottom.png) repeat-x; height:16px; }

a{ outline:none; }
.clear{ overflow:auto; }

#error{ text-align: center; }
	#error .container{ height:550px; }
	#error-box{ width:300px; margin:100px auto 0px auto; padding:40px; -moz-border-radius:25px; -webkit-border-radius:25px; background:url(../images/mesh-dark.png) repeat; -moz-box-shadow:#333 0px 1px 0px; -webkit-box-shadow:#333 0px 1px 0px; border:1px solid #000; }
	.ie{ width:380px !important;}
	#error-box h1{ font-weight: normal; color:#DDD; text-shadow:#000 0px -1px 0px; margin-bottom:25px; }
	#error-box p{ text-shadow:#000 0px -1px 0px; line-height: 130%; }
	#error-box ul{ list-style-type: none; margin:10px auto 0px auto; width:280px; height:80px; }
		#error-box li{ float:left; margin-right:20px; }
			#error-box li.last{ margin-right:0; }
			#error-box li img{ border:none; }
		#error-box del{ color:#666; }
		
/*Shadowbox*/
#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{ color:#999; }
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative; overflow:hidden; height:100px; padding:7px; border:1px solid #333; -moz-border-radius:5px; -webkit-border-radius:5px; background:rgb(0, 0, 0); background:rgba(0, 0, 0, 0.5); }
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{ border:none; }
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(../images/loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{ margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:30px;line-height:30px; }
#sb-info-inner{font-size:12px;}
#sb-nav{ height:16px;padding:5px; height:13px; width:50px; margin:5px auto 0px auto; background:url(../images/nav-back.png) repeat-x; -moz-border-radius:15px; -webkit-border-radius:15px; border:1px solid #000; }
#sb-nav a{background-repeat:no-repeat;}
#sb-nav-close{background-image:url(../images/close.png); position: absolute; top:14px; left:-13px; width:28px; height:28px; display:block; cursor:pointer; }
#sb-nav-next{background-image:url(../images/next.png); display:inline-block; height:14px;width:13px; cursor:pointer; float:right; }
#sb-nav-previous{background-image:url(../images/previous.png); display:inline-block; height:14px;width:13px; cursor:pointer; float:left; }
#sb-nav-play{background-image:url(../images/play.png);}
#sb-nav-pause{background-image:url(../images/pause.png);}
#sb-counter{float:left;width:45%; }
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}