@charset "utf-8";
/* CSS Document */
/* Default Jolson Site CSS */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*a {
  -webkit-transition: all 0.2s ease;
  -moz-transition:    all 0.2s ease;
  -ms-transition:     all 0.2s ease;
  -o-transition:      all 0.2s ease;
}*/

/* Begin Styles */

/* Begin general document styles */
html,body {
	width:100%;
	height:100%;
}

body {
	font-family: arial,sans-serif;
	color:#fff;
	background:#1f1f1f;
	font-size:14px;
}

p {
	margin-right:20px;
	margin-bottom:10px;
}

a {
	color:#fff;
}
a:hover {
	color:#fff;
}
a.selected {
	color:#fff;
}

img {
	vertical-align:bottom;
}

h1 {

}

h2 {

}

h3 {

}

h4 {

}

h5 {

}

strong {
	font-weight:bold;
}
em {
	font-style:italic;
}
label {
	display:block;
}
/* End general document styles */

/* Begin outer template styles */

/* Site container and main content area */

#menutoggle {
	position:fixed;
	left:0px;
	top:0px;
	width:50px;
	height:50px;
	cursor:pointer;
	background:url(menu-sprite.png);
	background-position:0px 0px;
	z-index:103;
}
#menutoggle:hover {
	background:url(menu-sprite.png);
	background-position:50px 0px;
}
#mainmenu {
	position:fixed;
	left:0px;
	top:55px;
	width:114px;
	height:187px;
	padding:23px 0px 0px 16px;
	background:rgba(0,0,0,0.5);
	z-index:102;
}
#submenu {
	position:fixed;
	left:0px;
	top:270px;
	width:114px;
	min-height:52px;
	padding:20px 0px 20px 16px;
	background:rgba(0,0,0,0.5);
	z-index:101;
}
#subsubmenu {
	position:fixed;
	left:0px;
	top:380px;
	width:114px;
	min-height:52px;
	padding:23px 0px 23px 16px;
	background:rgba(0,0,0,0.5);
	z-index:101;
}

#projectlist {
	position:fixed;
	left:134px;
	top:270px;
	width:134px;
	height:353px;
	padding:20px 0px 20px 16px;
	background:rgba(0,0,0,0.5);
	z-index:101;
	opacity:0;
}

#categorieslist {
	position:fixed;
	left:134px;
	top:270px;
	width:134px;
	height:303px;
	padding:20px 0px 20px 16px;
	background:rgba(0,0,0,0.5);
	z-index:101;
	opacity:0;
}

.listclosebutton {
	width:20px;
	height:20px;
	background:url(close-button-sprite.png);
	background-position:0px 0px;
	position:absolute;
	right:15px;
	bottom:15px;
	-webkit-transform:translateZ(1px);
	-moz-transform:translateZ(1px);
	-o-transform:translateZ(1px);
	transform:translateZ(1px);
}
.listclosebutton:hover {
	background:url(close-button-sprite.png);
	background-position:20px 0px;
}

ul.menu li {
	margin-bottom:3px;
}
ul.menu li.subscribe-button {
	width:26px;
	height:19px;
	margin-top:96px;
	background:url(subscribe-sprite.png);
	background-position:0px 0px;
	cursor:pointer;
}
ul.menu li.subscribe-button:hover {
	background:url(subscribe-sprite.png);
	background-position:26px 0px;
}
ul.menu li.subscribe-button.selected {
	background:url(subscribe-sprite.png);
	background-position:26px 0px;
}
.menuitem {
	text-decoration:none;
	font-size:14px;
}
.menuitem:hover {
	color:#999;
}
.menuitem.selected {
	color:#999;
}
#logo {
	position:fixed;
	right:0px;
	top:0px;
	width:112px;
	height:50px;
	z-index:103;
	cursor:pointer;
}
#logo a {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
}
#logo img {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	display:none;
}

/* End outer template styles */

/* Begin inner content styles */
/* page content */
#pagecontent {
	position:fixed;
	left:134px;
	top:55px;
	width:644px;
	min-height:141px;
	padding:23px 16px 46px 16px;
	background:rgba(0,0,0,0.5);
	z-index:105;
}

.closebutton.open {
	width:20px;
	height:20px;
	background:url(close-button-sprite.png);
	background-position:0px 0px;
}
.closebutton.open:hover {
	width:20px;
	height:20px;
	background:url(close-button-sprite.png);
	background-position:20px 0px;
}
.closebutton.closed {
	width:20px;
	height:20px;
	background:url(open-button-sprite.png);
	background-position:0px 0px;
}
.closebutton.closed:hover {
	background:url(open-button-sprite.png);
	background-position:20px 0px;
}
.videoclosebutton {
	width:20px;
	height:20px;
	background:url(close-button-sprite.png);
	background-position:0px 0px;
}
.videoclosebutton:hover {
	background:url(close-button-sprite.png);
	background-position:20px 0px;
}

#page-closebutton {
	position:absolute;
	right:20px;
	bottom:16px;
	-webkit-transform:translateZ(1px);
	-moz-transform:translateZ(1px);
	-o-transform:translateZ(1px);
	transform:translateZ(1px);
}
.credits {
	position:absolute;
	left:16px;
	bottom:16px;
	color:#999;
	font-size:11px;
}
.credits a {
	text-decoration:none;
	color:#999;
}
.credits a:hover {
	text-decoration:underline;
}

/* subscribe */

#subscribecontent {
	position:fixed;
	left:134px;
	top:55px;
	width:644px;
	height:4px;
	padding:23px 16px 23px 16px;
	background:rgba(0,0,0,0.5);
	z-index:100;
	display:none;
}
#subscribeformcontainer {
	position:absolute;
	top:102px;
}
#subscribemessage {
	position:fixed;
	left:134px;
	top:270px;
	min-width:298px;
	height:4px;
	padding:17px 36px 29px 16px;
	background:rgba(0,0,0,0.5);
	z-index:110;
	display:none;

}
#subscribespinner {
	
	margin-left:5px;
	display:inline-block;
	display:none;
}
#subscribe-closebutton {
	position:absolute;
	right:20px;
	bottom:20px;
}
#message-closebutton {
	position:absolute;
	right:20px;
	bottom:15px;
	display:none;
}

input[type=text] {
	width:295px;
	background:transparent;
	border: 1px solid #fff;
	border-width: 0px 0px 1px 0px;
	color:#fff;
	padding-bottom:5px;
	outline:none;
}
input[type=submit] {
	border:none;
	width:80px;
	background:#fff;
	color:#1f1f1f;
	font-size:14px;
	padding:3px 0px 3px 0px;
	margin-top:10px;
	outline:none;
	cursor:pointer;
}

/* project content */
#projectcontrols {
	position:fixed;
	width:auto;
	height:50px;
	left:0px;
	bottom:0px;
	z-index:103;
}
#infotoggle {
	position:relative;
	width:50px;
	height:50px;
	cursor:pointer;
	background:url(info-button-sprite.png);
	background-position:0px 0px;
	z-index:103;
	float:left;
	margin-right:5px;
}
#infotoggle:hover {
	background:url(info-button-sprite.png);
	background-position:50px 0px;
}
#infotitle {
	position:relative;
	float:left;
	height:32px;
	padding-top:18px;
	padding-left:20px;
	padding-right:20px;
	width:auto;
	background:rgba(0,0,0,0.5);
	margin-right:5px;
	display:none;
}
#projectclose {
	position:relative;
	width:50px;
	height:50px;
	cursor:pointer;
	background:url(project-close-button-sprite.png);
	background-position:0px 0px;
	z-index:103;
	float:left;
}
#projectclose:hover {
	background:url(project-close-button-sprite.png);
	background-position:50px 0px;
}

#projectcontent-closebutton {
	position:absolute;
	right:20px;
	bottom:20px;
}

#projectcontent {
	position:fixed;
	left:55px;
	bottom:55px;
	width:676px;
	/*min-height:253px;*/
	padding:20px 20px 50px 20px;
	background:rgba(0,0,0,0.5);
	z-index:100;
	display:none;
}

#socialmediabuttons {
	position:absolute;
	right:40px;
	bottom:20px;
	width:auto;
}

.socialmediabutton {
	position:relative;
	width:15px;
	height:14px;
	margin-right:2px;
	display:inline-block;
}
#facebookbutton {
	background:url(facebook-button.png);
}
#facebookbutton:hover {
	background:url(facebook-button-over.png);
}
#twitterbutton {
	background:url(twitter-button.png);
}
#twitterbutton:hover {
	background:url(twitter-button-over.png);
}
#tumblrbutton {
	background:url(tumblr-button.png);
}
#tumblrbutton:hover {
	background:url(tumblr-button-over.png);
}
#sharethisbutton {
	background:url(sharethis-button-sprite.png);
	background-position:0px 0px;
}
#sharethisbutton:hover {
	background:url(sharethis-button-sprite.png);
	background-position:15px 0px;
}

/* list view content */
#listviewcontent {
	position:relative;
	width:66%;
	margin:auto;
	outline: 1px none white;
}
.listviewcolumn {
	width:32.5%;
	margin-right:1%;
	margin-bottom:5px;
	outline: 1px none white;
	float:left;
}
.listviewcolumn.omega {
	margin-right:0px;
}
.listviewitem {
	position:relative;
	margin-bottom:3%;
	cursor:pointer;
}

.listviewitemoverlay {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.0);
	z-index:90;
	color:transparent;
	-webkit-transition: all 0.3s ease;
	-moz-transition:    all 0.3s ease;
	-ms-transition:     all 0.3s ease;
	-o-transition:      all 0.3s ease;
}
.listviewitemoverlay:hover {
	background:rgba(0,0,0,0.5);
	color:#fff;
}
.listviewitemtext {
	display:table;
	width:100%;
	height:100%;
}
.listviewitemtextvalue {
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}

#playercontainer {
	position:absolute;
	width:640px;
	height:360px;
	left:50%;
	top:50%;
	margin-left:-320px;
	margin-top:-180px;
}
/* End inner content styles */

/* Begin utility styles */

/* begin list magic */

.checkbox-list li,
.checkbox-list ul li {
  margin-bottom: 10px;
  padding-top: 1px;
  position: relative;
}
 
.checkbox-list label,
.checkbox-list ul label {
  display: block;
  font-weight: normal;
  padding-left: 20px;
}
 
.checkbox-list input,
.checkbox-list ul input {
  display: inline;
  margin: 0 5px 0 -18px;
  position: absolute;
  top: 2px;
}
 
.checkbox-list ul {
  margin: 5px 0 0 20px;
}
 
.checkbox-list p,
.checkbox-list ul p {
  color: #808080;
  padding-left: 21px;
  margin: 0;
}

/* ie 8 fix */
.ie8 .checkbox-list li,
.ie8 .checkbox-list ul li {
  margin-bottom: 10px;
  padding-top: 1px;
  position: relative;
}
 
.ie8 .checkbox-list label,
.ie8 .checkbox-list ul label {
  display: block;
  font-weight: normal;
  padding-left: 20px;
}
 
.ie8 .checkbox-list input,
.ie8 .checkbox-list ul input {
  display: inline;
  margin: 0 5px 0 -20px;
  position: absolute;
  top: -2px;
}
 
.ie8 .checkbox-list ul {
  margin: 5px 0 0 20px;
}
 
.ie8 .checkbox-list p,
.ie8 .checkbox-list ul p {
  color: #808080;
  padding-left: 21px;
  margin: 0;
}
/* end list magic */


/* Begin clearfix hack */
/* For modern browsers */
.cf:before,
.cf:after {
	content:"";
	display:table;
}
.cf:after {
	clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
	zoom:1;
}
/* End clearfix hack */

/* End utility styles */

/* begin buttons */
.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	font-weight:bold;
	padding: .5em 2em .55em;
	border:none;
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}
.button.disabled {
	opacity:.5;
	filter: alpha(opacity=50);
	cursor:default;
}

.bigrounded {

}
.medium {
	font-size: 12px;
	/*padding: .4em 1.5em .42em;*/
	padding: .5em 2em .55em;
}
.small {
	font-size: 11px;
	padding: .275em 1em .275em;
	/*padding: .5em 2em .55em;*/
}

/* gray */
.gray {
	color: #e9e9e9;
	background: #6e6e6e;
}
.gray:hover {
	color: #e9e9e9;
	background: #616161;
}
.gray:active {
	color: #afafaf;
}
.gray.disabled:hover {
	color: #e9e9e9;
	background: #6e6e6e;
}
.gray.disabled:active {
	color: #e9e9e9;
	background: #6e6e6e;
	position: relative;
	top: 0px;
}

/* blue */
.blue {
	color: #d9eef7;
	background: #0095cd;
}
.blue:hover {
	color: #d9eef7;
	background: #007ead;
}
.blue:active {
	color: #80bed6;
}

/* green */
.green {
	color: #e8f0de;
	background: #64991e;
}
.green:hover {
	color: #e8f0de;
	background: #538018;
}
.green:active {
	color: #a9c08c;
}

/* rosy */
.rosy {
	color: #fae7e9;
	background: #da5867;
}
.rosy:hover {
	color: #fae7e9;
	background: #ba4b58;
}
.rosy:active {
	color: #dca4ab;
}

/* orange */
.orange {
	color: #fef4e9;
	background: #f78d1d;
}
.orange:hover {
	color: #fef4e9;
	background: #f47c20;
}
.orange:active {
	color: #fcd3a5;
}

/* red */
.red {
	color: #faddde;
	background: #d81b21;
}
.red:hover {
	color: #faddde;
	background: #b61318;
}
.red:active {
	color: #de898c;
}
#fullscreen-overlay {
	position:fixed;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
	background:#000;
	background:rgba(0,0,0,.9);
	z-index:100000;
	display:none;
}