@import url(reset.css?111209);


/*-------------------------------------------------------------------

                                   xxxxx
  xxxx                             xxxxxx    xxxx
  xxxx                               xxxx    xxxx
                                     xxxx               xxxxxxxxx
xxxxx    xxxxxx  xxx           xxxxxxxxxx  xxxxxx      xxxxxxxxxxx  
xxxxxxx  xxxxxxxxxxxxxx      xxxxxxxxxxxx  xxxxxxx    xxxx     xxxx
   xxxx    xxxx     xxxx    xxxx     xxxx     xxxx    xxx      xxx 
   xxxx    xxxx     xxxx    xxxx     xxxx     xxxx    xxxx   xxxx
   xxxx    xxxx     xxxx    xxxx     xxxx     xxxx     xxxxxxxx
   xxxx    xxxx     xxxx    xxxx     xxxx     xxxx     xxxxxx  
   xxxx   xxxxx     xxxx   xxxxx     xxxx   xxxxxx   xxxxxxxx   xxxxx
    xxxxxxxxxxxx     xxxxxxx  xxxxxxxxxxxxxxxx xxxxxxxxx  xxxxxxxxxx
      xxxx   xxxx     xxxxx    xxxxxx   xxxx     xxxx       xxxxx
  
                            L   A   B   S

-------------------------------------------------------------------*/


/*===================================================================
 Essentials
===================================================================*/

body {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12px;
	color: #777;
	text-align: center;
	background: #fff;
	}

p, blockquote, li {
	font-size: 12px;
	line-height: 1.5em;
	color: #777;
	}

p, blockquote, ul, ol {
	margin-bottom: 1.5em;
	}

ul, ol {
	list-style-type: none;
	}

ol {
	list-style-type: none;
	}

strong {
	font-weight: bold;
	}
	
em {
	font-style: italic;
	}

input,
textarea {
	padding: 4px 3px 3px 3px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.3em;
	}

a	{
	text-decoration: none;
	}

a:link, a:visited {
	color: #61cdf5;
	}

a:hover, a:active {
	color: #1b99c8;
	}

a img	{border: none;}

img { -ms-interpolation-mode:bicubic; }



/*===================================================================
 Wrapper
===================================================================*/

#wrap {
	position: relative;
	width: 820px;
	margin: 0 auto;
	text-align: left;	
	}
	

/*===================================================================
 Header
===================================================================*/	

#header {
	float: left;
	position: relative;
	width: 820px;
	padding: 0;
	background: url(./../images/diags.gif) #fff;
	/*background-color: #f3f3f3;
	padding-bottom: 30px*/
	}
	

#header h1 {
	display: block;
	position: absolute;
	top: 24px;
	left: 32px;
	width: 69px;
	height: 134px;
	background: url(./../images/indie_logo.png) no-repeat;
	text-indent: -9999em;
	}

	
/*-- Mast --*/

#mast {
	float: left;
	margin: 58px 0 0 280px;
	padding-bottom: 7px;
	overflow: hidden;
	background: url(./../images/mast_arrow.gif) 24px bottom no-repeat;
	}
	
#mast p {
	float: left;
	margin: 0;
	padding: 6px 10px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 10px;
	line-height: 15px;
	color: #777;
	background: #fff;
	}
	
#mast p span {
	padding: 0 3px;
	}	


/*-- About --*/

#about {
	float: left;
	margin: 30px 0 0 280px;
	padding-bottom: 48px;
	overflow: hidden;
	}
	
#about h2 {
	display: none;
	}
	
#about p {
	float: left;	
	width: 466px;
	height: 178px;
	margin: 0;
	background: url(./../images/header_about.png) top left no-repeat;
	text-indent: -9999em;
	}
	


/*===================================================================
 Projects
===================================================================*/		
	
#projects {
	position: relative;
	clear: both;
	margin: 0;
	padding: 50px 0 40px 0;
	overflow: hidden;
	}
	
#projects h2 {
	float: left;
	width: 260px;
	height: 620px;
	text-indent: -9999em;
	background: url(./../images/header_projects.gif) no-repeat;
	}
	
.project {
	position: relative;
	float: left;
	width: 260px;
	margin: 0 0 20px 20px;
	background: #f9f9f9;
	}

#projects .empty {
	height: 302px;
	}
	
.project_info {
	padding: 22px 25px 22px 25px;
	background: #333;
	background-repeat: no-repeat;
	background-color: #333;
	}
	
.project_info h3 {
	margin: 0 0 7px 0;
	font-size: 14px;
	font-weight: bold;
	text-indent: -9999em;
	color: #61cdf5;
	}
	
.project_img {
	height: 118px;
	overflow: hidden;
	}
	
.project_rollover {
	position: absolute;
	z-index: 999;
	cursor: pointer;
	}	
	
#bigcartel .project_info{
	background-image: url(./../images/info_bigcartel.gif);
	}

#emptees .project_info {
	background-image: url(./../images/info_emptees.gif);
	}

#pulley .project_info {
	background-image: url(./../images/info_pulley.gif);
	}
	
.project_info p.byline {
	margin: 0;
	font-size: 10px;
	text-indent: -9999em;
	}	
	
.project_info p {
	margin-top: 32px;
	margin-bottom: 0;
	color: #ccc;	
	}	
	

/*-- Links --*/

ul.links  {
	position: absolute;
	top: 143px;
	right: 20px;		
	}

ul.links li {
	float: right;
	height: 21px;
	width: 21px;
	margin-right: 3px;
	text-indent: -9999em;
	}
	
ul.links li a {
	display: block;
	width: 31px;
	height: 21px;
	background-position: left top;
	background-repeat: no-repeat;
	}	
	
ul.links li a:hover {
	background-position: left bottom;
	}
	
ul.links li.twitter a {
	background-image: url(./../images/icon_twitter.png);
	}
	
ul.links li.email a {
	background-image: url(./../images/icon_email.png);
	}
	
ul.links li.link a {
	background-image: url(./../images/icon_link.png);
	}				


/*-- Stream --*/

.stream ul {
	position: relative;
	padding: 0;
	}
	
ul.feed {
	margin-top: 0;
	margin-bottom: 0;
	}	
	
.arrow {
	position: absolute;
	left: 23px;
	z-index: 999;
	display: block;
	width: 14px;
	height: 5px;
	background: transparent url(./../images/stream_arrow.gif) no-repeat 0;
	}	

#projects ul.feed {
	margin-top: 0;
	margin-bottom: 0;
	}
	
ul.feed li:first-child {
	background: none;
	}
	
ul.feed li {
	position: relative;
	margin: 0;
	height: 98px;
	padding: 25px 25px 0 25px;
	cursor: pointer;
	}
	
ul.feed li.hover {
	background-color: #eee;
	}
	
ul.feed li p.content {
	line-height: 1.3em;
	margin-bottom: 10px;
	}	
	
ul.feed li img {
	height: 49px;
	}	
	
ul.feed li p.date {
	margin-top: 0;
	font-size: 10px;
	color: #ccc;
	line-height: 0;
	}


/*-- Netflix - Flickr - Emptees --*/	
	
ul.feed li.netflix li,
ul.feed li.feed li {
	margin-top: 15px;
	}	
	
ul.feed li.flickr li {
	}	
	
ul.feed li.netflix img,
ul.feed li.flickr img {
	float: left;
	margin: 0 0 0 0;
	height: 74px;
	}
	
ul.feed li.feed img {
	height: 50px;
	float: left;
	}
	
ul.feed li.netflix .content,
ul.feed li.feed .content {
	width: 100px;
	margin-left: 62px;
	line-height: 1.3em;
	}	
	
ul.feed li.flickr .content,
ul.feed li.flickr .date {
	margin-left: 82px;
	}	
	
ul.feed li.netflix .date,
ul.feed li.feed .date {
	margin: 0 0 15px 62px;
	}	
	
ul.feed li.feed .content,	
ul.feed li.feed .date {
	margin-left: 108px;
	}	



/*===================================================================
 People
===================================================================*/		
	
#people {
	position: relative;
	clear: both;
	width: 820px;
	padding: 30px 0 40px 0;
	border-top: 3px solid #333;
	overflow: hidden;
	}

#people h2 {
	float: left;
	width: 260px;
	height: 820px;
	text-indent: -9999em;
	background: url(./../images/header_people.gif) no-repeat;
	}

.dood {
	position: relative;
	float: left;
	width: 260px;
	overflow: hidden;
	margin: 0 0 20px 20px;
	background: #f9f9f9;
	}

#people .empty {
	height: 190px;
	}
	
.dood_info {
	width: 260px;
	height: 72px;
	text-indent: -9999em;
	background-color: #333;
	background-repeat: no-repeat;
	}
	
#matt .dood_info {
	background-image: url(./../images/info_matt.gif);
	}	
	
#eric .dood_info {
	background-image: url(./../images/info_eric.gif);
	}	
	
#jd .dood_info {
	background-image: url(./../images/info_jd.gif);
	}
	
#chance .dood_info {
	background-image: url(./../images/info_chance.gif);
	}

#scott .dood_info {
	background-image: url(./../images/info_scott.gif);
	}

#karen .dood_info {
	background-image: url(./../images/info_karen.gif);
	}	

#dan .dood_info {
	background-image: url(./../images/info_dan.gif);
	}

	
	
/*===================================================================
 People
===================================================================*/		
	
#jobs {
	position: relative;
	clear: both;
	width: 820px;
	margin: 0;
	padding: 30px 0 0 0;
	border-top: 3px solid #333;
	overflow: hidden;
	}

#jobs h2 {
	float: left;
	width: 260px;
	height: 17px;
	text-indent: -9999em;
	background: url(./../images/header_jobs.gif) no-repeat;
	}

.job {
	float: right;
	width: 540px;
	}

.job h3 {
	margin-bottom: .75em;
	font-size: 20px;
	color: #333;
	}

.job ul {
	margin: 0 0 30px 17px;
	list-style: disc;
	}

.job li, .job p {
	font-size: 13px;
	}

.job_synops li {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	}

.job_synops {
	margin: 3px 0 30px 0;
	}

.job_synops h3 {
	font-size: 15px;
	font-weight: bold;
	color: #61cdf5;
	text-transform: uppercase;
	}

.job_description {
	border-top: 1px solid #ddd;
	padding-top: 30px;
	padding-bottom: 15px;
	}


	
/*===================================================================
 Footer
===================================================================*/

#footer {
	width: 820px;
	min-height: 80px;
	margin-top: 60px;
	padding: 25px 0 0 0;
	font-size: 10px;	
	border-top: 3px solid #333;
	}
	
#logo_indie {
	float: left;
	display: block;
	width: 39px;
	height: 14px;
	margin: -2px 0 0 0;
	padding-right: 7px;
	background: transparent url(./../images/indie_logo_sm.png) no-repeat;
	}

#footer p {
	float: left;
	width: 260px;
	margin: 0 0 0 20px;
	font-size: 10px;		
	}

p#footer_copyright {
	margin-left: 0;
	}
	
#footer p strong{
	margin-right: 7px;
	font-weight: bold;
	color: #333;
	}	
	
#footer p span.icon {
	padding: 0 5px;
	color: #999;
	}

#footer em {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	}