@charset "UTF-8";
/* CSS Document */

/*============================================================
  Shared Styles
============================================================*/
 
html, body {
	height: 100%;
}
 
body {
	width: 100%;
	height: 100%;
	margin: 40px 0 0 0;
	font-family: "Helvetica Neue", Helvetica, Arial sans-serif;
	font-size: 11px;
	color: #222;
	background: #e3e3e3;
	}
 
h1, h2, h3, h4, h5, h6 {
	margin-bottom: .4em;
	font-weight: normal;
	color: #333;
	text-transform: lowercase;
	}
 
h1 { font-size: 20px; line-height: 1.4em; font-weight: bold;}
h2 { font-size: 24px; line-height: 1.4em; }
h3, h4 { font-size: 16px; margin-bottom: .8em;}
h5, h6 { font-size: 12px; }
 
p, blockquote, ul, ol {
	font-size: 11px;
	line-height: 1.5em;
	margin-bottom: 1.5em;
	}
 
ul, ol {
	list-style-type: none;
	}
 
ol {
	list-style-type: decimal;
	}
 
strong {
	font-weight: bold;
	}
 
em {
	font-style: italic;
	}
 
a,
a:link,
a:visited {
	position: relative;
	color: #999;
	text-decoration: none;
	outline: none;
	cursor: pointer;
	}
 
a:hover,
a:active {
	color: #f40000;
	}
 
a img {
	display: block;
	text-decoration: none;
	}
 
img {
	-ms-interpolation-mode: bicubic;
	}
 
 
/*============================================================
  Structural 
============================================================*/
 
#container {
	height: 800px;
	height: 100%; 
	width: 1150px;
	min-height: 800px;
	text-align: left;
	overflow: hidden;
}
 
 
 
/*============================================================
  Side Bar 
============================================================*/
 
 
/* Header
------------------------------------------------------------*/
 
#side_bar {
	float: left;
	z-index: 10;
	position: relative;
	width: 210px;
	padding: 0 0 80px;
	height: 800px;
	min-height: 100%;
	background: #fff;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 18px;
	-moz-box-shadow: 1px 1px 3px #ccc;
    -webkit-box-shadow: 1px 1px 3px #ccc;
    box-shadow: 1px 1px 3px #ccc;
}
 
#side_bar .header {
	padding: 25px 30px 22px 30px;
	border-bottom: 1px solid #e3e3e3;
}
 
#side_bar .header h1 {
	margin: 10px 0 0 0;
	line-height: 1em;
	letter-spacing: -.02em;
	font-size: 12px;
	font-weight: normal;
	color: #f40000;	
}
 
#side_bar .header h1 a { color: #f40000; }
#side_bar .header h1 a:hover { color: #f40000; text-decoration: underline; }
 
 
#side_bar .header p {
	min-width: 150px;
	max-width: 150px;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: lighter;
	color: #aaa;
}
 
/* About
------------------------------------------------------------*/
 
#about {
	min-width: 150px;
	max-width: 150px;	
	margin: 30px 0 30px 30px;
}
 
#about p, #about ul {
	color: #aaa;
}

#about ul {
	padding: 0 0 0 14px;
}

#about ul li {
	list-style: disc;
}
 
/* Category list
------------------------------------------------------------*/
 
.category_list {
	border-top: 1px solid #e3e3e3;
}
 
.category_list li {
	position: relative;
	background: transparent url(/images/category_icon.png) no-repeat 10px center;
	border-bottom: 1px solid #e3e3e3;	
}
 
.category_list li:hover {
	background: #f40000 url(/images/category_icon.png) no-repeat 10px center;
}
 
.category_list li a {
	display: block;
	padding: 15px 15px 15px 30px;
	font-size: 14px;
	color: #222;
	text-transform: lowercase;
}
 
.category_list li a:hover {
	color: #fff;
	background: transparent url(/images/arrow_right.png) no-repeat 190px center;
}
 
.category_list li.selected  {
	color: #fff;
	background-color: #f40000;
}
 
.category_list li.selected a {
	color: #fff;
	background: transparent url(/images/arrow_right.png) no-repeat 190px center;
}
 
.category_list li#all {
	background: transparent url(/images/icon_all.png) no-repeat 8px center;
	border-bottom: 1px solid #e3e3e3;	
}
 
.category_list li#all:hover {
	background: #f40000 url(/images/icon_all.png) no-repeat 8px center;
}
 
.category_list li#all.selected  {
	color: #fff;
	background: #f40000 url(/images/icon_all.png) no-repeat 8px center;
}
 
.category_list li#all.selected a {
	color: #fff;
	background: transparent url(/images/arrow_right.png) no-repeat 190px center;
}
 
/* Loading Icon */
.category_list li.loading,
.category_list li#all.loading,
.category_list li#all.loading_tags:hover {
	background-image: url(/images/loading.gif);
}

.category_list li#all.loading_tags {
	background-image: url(/images/loading_image.gif);
}
 
.category_list li span.cover {
	width: 210px;
	height: 46px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	background: url(/images/blank.gif);
}
 
/* Link list
------------------------------------------------------------*/
 
#side_bar .link_list {
	margin: 50px 0 50px 28px;
}
 
#side_bar .link_list li {
	font-size: 10px;
	text-indent: 14px;
	line-height: 0;
}
 
#side_bar .link_list li a {
	display: block;
	margin: 6px 0 0 0;
	padding: 4px 0;
	color: #ccc;
	background: transparent url(/images/link_icon.gif) no-repeat 0 0;
}
 
#side_bar .link_list li a:hover {
	color: #999;
	background: transparent url(/images/link_icon.gif) no-repeat 0 -20px;
}
 
 
/*============================================================
  Thumbnail list
============================================================*/
 
#thumbnail_list {
	float: left;
	position: relative;
	top: 14px;
	width: 140px;
	min-height: 100%;
	height: 786px;
	background: #f5f5f5;
	-moz-border-radius-topleft: 4px;
	-webkit-border-top-right-radius: 18px;
	-moz-box-shadow: 1px 1px 3px #ccc;
    -webkit-box-shadow: 1px 1px 3px #ccc;
    box-shadow: 1px 1px 3px #777;	
}
 
#thumbnail_list h3 {
	font-size: 16px;
	margin: 15px 0 0 20px;
	color: #f40000;
	text-transform: lowercase;
	cursor: pointer;
}
 
#thumbnail_list h3:hover {
	color: #f40000;
}
 
#thumbnail_list ul {
	float: left;
	margin-top: 15px;
	border-top: 1px solid #e3e3e3;
}
 
#thumbnail_list ul li {
	position: relative;
	margin: 10px 16px;
	float: left;
	height: 55px;
}
 
#thumbnail_list ul li a {
	display: block;
}

#thumbnail_list ul li a img {
	display: block;
	text-indent: -99999px;
	border: 3px solid #f5f5f5;
	background-image: url(/images/loading_image.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
 
#thumbnail_list ul li a span.thumbnail_title {
	width: 130px;
	height: 25px;
	line-height: 20px;
	overflow: hidden;
	position: absolute;
	left: -10px;
	font-size: 12px;
	text-align: center;
	display: none;
	-webkit-transition-duration: 2s, 4s;
	-moz-transition-duration: 2s, 4s;
}

#thumbnail_list ul li:hover a span.thumbnail_title {
	display: block;
	color: #000;
	-webkit-transition-duration: 2s, 4s;
	-moz-transition-duration: 2s, 4s;
}
 
#thumbnail_list ul li a.loading_thumb {
	background-image: url(/images/loading_image.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
 
#thumbnail_list ul li a:hover img,
#thumbnail_list ul li.selected a img {
	border-color: #f40000;
}
 
 
/*============================================================
  Return 
============================================================*/
 
#return {
	position: relative;
	z-index: 5;
	float: left;
	width: 40px;
	min-height: 100%;
	background: #fff;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-box-shadow: 1px 1px 3px #ccc;
    -webkit-box-shadow: 1px 1px 3px #ccc;
    box-shadow: 1px 1px 3px #777;		
}
 
#return a {
	display: block;
	width: 40px;
	height: 42px;
	background: #222 url(/images/arrow_left.png) no-repeat 15px 14px;
	text-indent: -9999px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
}
 
#return a.hover {
	background: #555 url(/images/arrow_left.png) no-repeat 15px 14px;
}
 
 
 
/*============================================================
  Content main 
============================================================*/
 
#content_main {
	margin: 0px 0 0 50px;
		float: left;

}

body#default #content_main {
	margin: 40px 0 0 50px;
	width: 700px;
}

#content_main h1 {
	background: url(../images/logofrontpage.png) left top no-repeat;
	width: 600px;
	height: 125px;
	text-indent: -9999em;
}
 
#content_main .link_list {
	overflow: hidden;
	margin-top: 31px;
}
 
#content_main .link_list li {
	float: left;
	margin-right: 90px;
	height: 15px;
	text-indent: 22px;
}
 
#content_main .link_list li a {
	display: block;
	height: 15px;
	text-indent: 22px;
}
 
#content_main .link_list li.link_email {
	background: transparent url(http://static.tumblr.com/l3dtuf9/MoRl0ygfm/icon_email.png) no-repeat 0 3px; 
}
 
#content_main .link_list li.link_email:hover {
	background: transparent url(http://static.tumblr.com/l3dtuf9/MoRl0ygfm/icon_email.png) no-repeat 0 -81px; 
}
 
#content_main .link_list li.link_vimeo {
	background: transparent url(http://static.tumblr.com/l3dtuf9/ltul0ygg7/icon_vimeo.gif) no-repeat 0 3px; 
}
 
#content_main .link_list li.link_vimeo:hover {
	background: transparent url(http://static.tumblr.com/l3dtuf9/ltul0ygg7/icon_vimeo.gif) no-repeat 0 -21px; 
}


#content_main .link_list li.pixelunion {
	background: transparent url(http://static.tumblr.com/sxb41rv/BQEl7s4oz/icon_pixelunion.png) no-repeat 0 3px; 
}
 
#content_main .link_list li.pixelunion:hover {
	background: transparent url(http://static.tumblr.com/sxb41rv/BQEl7s4oz/icon_pixelunion.png) no-repeat 0 -81px; 
}


 
#content_main .link_list li.link_vimeo a {
	text-indent: 18px;
}
 
#content_main #intro_content p {
	width: 650px;	
	font-size: 24px;
	line-height: 1.3em;
	font-weight: lighter;
	
}
 
 
/* media content
------------------------------------------------------------*/
 
#media_content {
	position: relative;
	top: 0;
	left: 0;
	width: 732px;
	overflow: hidden;
}
 
#media_title {
	width: 100%;
	height: 71px;
	float: left;
}
 
#media_content h2 {
	margin-top: 18px;
	margin-bottom: 20px;
	font-weight: lighter;
	letter-spacing: 1px;
}
 
#media_content p {
	float: left;
	width: 186px;
	padding: 30px;
	color: #999;
	border-left: 1px solid #cfcfcf;
}
 
#media_content blockquote p {
	font-style: italic;
	color: #666;
}
 
#media_content p:last-child {
	border-right: 1px solid #cfcfcf;
}
 
#media {
	width: 732px;
	float: left;
	background: url(/images/loading_video.gif) no-repeat center center;	
}

#media object img {
	display: none;
}
 
#media span {
	width: 732px;
	height: 408px;
	float: left;
}
 
#media_caption p a {
	text-decoration: underline;
}
 
#media_caption p a:hover {
	text-decoration: none;
}
 
/* Pagination
------------------------------------------------------------*/
 
#pagination {
	position: absolute;
	top: 0;
	right: 0;
}
 
#pagination li {
	float: left;
}
 
#pagination li a {
	display: block;
	width: 40px;
	height: 42px;
	text-indent: -9999px;	
}
 
#pagination #next a {
	margin-left: 1px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	background: #f5f5f5 url(/images/pagination_arrow_right.png) no-repeat center center;
}
 
#pagination #next a:hover {
	background: #333 url(/images/pagination_arrow_right.png) no-repeat center center;
}
 
#pagination #previous a {
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	background: #f5f5f5 url(/images/pagination_arrow_left.png) no-repeat center center;
}
 
#pagination #previous a:hover {
	background: #333 url(/images/pagination_arrow_left.png) no-repeat center center;
}