@charset "utf-8";
/*
Title:	Imports for Screen media
Author:	Trevor Brennan
*/

/* import base design */
@import url("base.css");
@import url("content.css");


/*text heighlight colors
---------------------------------------*/
::-moz-selection{
	background:#767676;
	color: #ffffff;
} 
::selection {
	background: #767676;
	color: #ffffff;
}

#wrapper{
	width:970px;
	margin:0 auto;
}
.border{
	border-bottom:solid #CCCCCC 1px;
	padding-bottom:35px;
	margin-bottom:35px;
}
#header #info{
	float:left;
	width:40%;
	background-image: url(../layout/header-bg.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-left:190px;
}
#header #info h1{
	padding-bottom:5px;
	border-bottom:solid #CCCCCC 1px;
	margin-bottom:5px;
}
#header #info p{
	margin:0;
	line-height:1.4em;
}
#networks {
	position:relative;
	overflow:hidden;
	height:4em;
}
#networks li a {
	display: block;
	float:right;
	background-color:#f2f2f2;
	margin-left:8px;
	width:25px;
	height:25px;
	text-decoration:none;
	color:#767676;
	background-repeat: no-repeat;
	background-position: left top;
		-webkit-transition: background-position 200ms ease;
		-moz-transition: background-position 200ms ease;
		transition: background-position 200ms ease;	
}
#networks li a em {
	display:block;
	position:absolute;
	right:-100px;
	top:35px;
		-webkit-transition: right 240ms ease-in-out;
		-moz-transition: right 240ms ease-in-out;
		transition: right 240ms ease-in-out;
	font-style: normal;
	padding-right:2px;	
}
#networks li a:hover{background-position:left bottom;}
#networks li a:hover em{right:0px;}


.scrollable {
	position:relative;
	overflow:hidden;
	width: 100%;
	height:480px;
	background-color:#f1f1f1;
	border-bottom:solid 1px #cccccc;
	border-top:solid 1px #cccccc;		
}
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}
.scrollable .items .item {
	float:left;
	width:970px;
	height:480px;
	position:relative;
	overflow:hidden;

}
.scrollable .desc {
	position:absolute;
	background-color:#000000;
	background-color:rgba(0, 0, 0, 0.8);
	padding:0.5em 1.4em;
	color:#FFFFFF;
	bottom:10px;
	left:0;	
}
.scrollable .desc strong{
	font-weight:normal;
	display:block;
	border-bottom:#ffffff;
	border-bottom:solid 1px rgba(255,255,255,0.2);
	padding-bottom:0.3em;
	margin-bottom:0.2em;
}
.scrollable .desc em{
	font-size:0.8em;
	font-style:normal;
	display:block;
}
.scrollable .desc a{
	color:#ec7500;
		text-decoration:none;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	transition: all 500ms ease;
}
.scrollable .desc a[target="_blank"]:after{
	content: '\25B4';
}
.scrollable .desc a:hover, .scrollable .desc a:focus{
	color:#ffffff;
}
.scrollable .desc a:active{
	background-color:#ec7500;
	color:#FFF;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	transition: all 200ms ease;	
}
/*
a.browse{
	position:absolute;
	display:block;
	top:0;
	height:480px;
	width:33%;
	cursor:pointer;
	background-repeat: no-repeat;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	transition: all 200ms ease;	
}
a.browse:hover{background-color:rgba(0,0,0,0.5);}
a.browse:active{background-color:rgba(0,0,0,0.8);}
a.prev{left:0;background-image: url(../layout/scroll-nav-l.png); background-position:-320px 0;}
a.prev:hover{background-position:0 0;}
a.next{right:0;background-image: url(../layout/scroll-nav-r.png); background-position:320px 0;}
a.next:hover{background-position:0 0;}
*/
.navi {
	text-align:left;
	width:100%;
	display:block;
	padding:1em 0 0 0;
}
.navi a {
	width:0.7em;
	height:0.7em;
	margin:0 0.3em;
	background-color:#999999;
	display:inline-block;
		-moz-border-radius: 8px;
		border-radius: 8px;
		-webkit-transition: background-color 300ms ease;
		-moz-transition: background-color 300ms ease;
		transition: background-color 300ms ease;
}
.navi a:hover,.navi a:focus {
	background-color:#000000;
}
.navi a:active{
	background-color:#cccccc;
}
.navi a.active{
	background-color:#000000;
}

#testimonials{
	float:left;
	width:430px;
}
#testimonials p:last-child{
	margin-bottom:0;
}

#tweet ul{list-style:none; margin:0; word-wrap:break-word;}
#tweet li{margin-bottom:2em;}

#twitterLink{
	font-size:0.5em;
	font-family: 'Arvo', arial, serif;
	text-transform: lowercase;
	line-height:0.9em;	
}

#twitterCol{
	float:left;
	width:230px;
	margin-left:40px;
	word-wrap: break-word;
}

#highlights{
	float:right; width:230px;
}
#highlights ul{
	list-style:none;
	margin:0;
	font-size:0.75em;
	line-height:1em;
}
#highlights li{
	margin-bottom:1.2em;
}
#highlights li em{
	font-style:normal;
	font-size:0.9em;
	font-family:"Courier New", Courier, monospace;
}
#dribbbleShots ul{margin:0; padding:0;}
#dribbbleShots li{
	display:block;
	width:177px;
	height:133px;	
	margin:0;
	padding:0;
	float:left;
	border-bottom:solid 1px #cccccc;
	border-top:solid 1px #cccccc;
	margin-left:21px;
	background-color:#ffffff;
}
#dribbbleShots li:first-child{margin-left:0px;}

#dribbbleShots li a{
	opacity:0.2;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
transition: all 600ms ease;
	border:none;
}
#dribbbleShots li a:hover,#dribbbleShots li a:focus{opacity:1;}
#dribbbleShots li img{width:177px; height:133px;}

#dribbbleShots .overlay{display:none}
#friends{text-align:center;}
#friends p{margin-bottom:0}
#friends li {
	width: 159px;
	height: 107px;
	position: relative;
	display:inline-block;
}
#friends li i {
	width: 150px;
	top: 5px;
	left:75px;
	margin-left:-75px;
	position: absolute;
	z-index: 2;
	line-height:1.2em;
	font-style:normal;
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	opacity:0;

	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	transition: all 300ms ease;
	background-image: url(../layout/hint.gif);
	background-repeat: no-repeat;
	background-position: center bottom;
	padding-top: 4px;
	padding-right: 4px;
	padding-bottom: 15px;
	padding-left: 4px;
}
#friends li img {width:159px;}
#friends li:hover i,#friends li:focus i {
	top:-20px;
	opacity:1;	
}

#copy p{margin:0;}
#props{font-size:0.8em; margin-bottom:2em;	}
#props a{color:#767676;}
#props a:hover,#props a:focus{color:#000000;}