/*******************************************************************
 * GLOBALS
 *******************************************************************/

html 							{ box-sizing: border-box; }
*, *:before, *:after 			{ box-sizing: inherit; }

HTML,BODY 						{ margin:0; background:#000; }

#wrapper 						{ padding:8px; }
#wrapper > .inner				{ position:relative; width:800px; min-height:600px; margin:0 auto;
								  background:#000; /*background:url(../images/page_bg.png) top center no-repeat #000;*/ }

#background						{ position:absolute; top:0; left:0; width:800px; height:800px; }

/* clearfix */
.clearfix:after 				{ clear:both; display:block; content:" "; float:none; overflow:hidden; height:0; }
.clear 							{ clear:both; }

/*******************************************************************
 * TYPEFACES
 *******************************************************************/

/* Ghettout */
#logo 							{ font-family:"ghettoutregular"; }

/* droid serif */
#main-menu						{ font-family: 'Droid Serif', serif; }

/* droid sans */
/*#main	 						{ font-family: 'Droid Sans', sans-serif; } */

/* Philosopher */
#main 							{ font-family: 'Philosopher', sans-serif; }

/* Arial */
#footer 						{ font-family:Arial,Helvetica,sans-serif; }




/*******************************************************************
 * LOGO
 *******************************************************************/

#logo 							{ position:absolute; left:45px; top:45px; opacity:0.7; line-height:16px;
								  color:#FFF; text-decoration:none; }
#logo .site-title 				{ display:block;
								  font-size:25px; }
#logo .site-description			{ display:block; padding-left:20px;
								  font-size:22px; }

/*******************************************************************
 * MAIN MENU
 *******************************************************************/

#main-menu 						{ position:absolute; top:110px; left:75px; z-index:999;
								  font-size:14px; }
#main-menu UL 					{ margin:0; padding:0; list-style:none; }
#main-menu UL.menu				{ margin-top:5px; }
#main-menu UL.menu LI 			{ padding:1px 0; }
#main-menu A 					{ display:block; opacity:0.5; cursor:pointer; padding:5px 20px 5px 30px; margin-top:-9px;
								  color:#FFF; text-decoration:none; }
#main-menu UL.menu LI.current-menu-item A,
#main-menu UL.menu LI.current-page-ancestor A,
#main-menu UL.menu A:hover
								{ background:url(../images/menu_highlight.png)  center center no-repeat; }

#main-menu LI.activator			{ padding:20px 0; background:none;
								  transition:background 0.5s linear; }
#main-menu LI.activator:hover	{ width:194px; height:243px;
								  background:url(../images/menu_bg.png) 0 0 no-repeat; }
#main-menu LI.activator > A 	{ margin-left:-5px; }
#main-menu LI.activator > UL 	{ opacity:0;
								  transition:opacity 0.5s linear; }
#main-menu LI.activator:hover > UL
								{ opacity:1; }

/*******************************************************************
 * MAIN (content)
 *******************************************************************/

#main 							{ position:absolute; top:105px; left:290px; width:420px; height:410px;
								  color:#c6b4b3; font-size:14px; word-wrap:break-word; 	}
#main H1 						{ display:none; }
#main H1.visible 				{ display:block; }
#main A 						{ color:#FFF; text-decoration:underline; }

/* homepage promo */
#main .home-promo				{ width:200px; height:200px; position:absolute; bottom:0; right:0; }


#content 						{ position:relative; width:460px; height:500px; overflow:hidden; }
#content .scroll-inner 			{ padding:0 20px 10px 0; position:absolute; width:100%; }
/*#content.has-filter				{ height:400px; }*/

#content.regions 				{ overflow:visible; width:500px; }
#content .region 				{ position:absolute; width:300px;
								  transform: scale(0.7); opacity:0.2;
								  transition:all 0.85s; }
#content .region.active 		{ transform:scale(1); opacity:1; z-index:100; }

/* 2 region template */
#content.regions2				{ height:440px; }
#content.regions2 .region1		{ top:0; left:0; width:350px; }
#content.regions2 .region2		{ bottom:0px; right:0; }

/* 3 region template */
#content.regions3 .region1 		{ top:-60px; right:0; width:350px; }
#content.regions3 .region2		{ bottom:0px; left:-50px; width:500px; }
#content.regions3 .region3		{ top:-100px; left:-80px; }

/* post list */
.post-item						{ padding:0 0 20px 0; }

.jump-list 						{ }
.jump-list P					{ position:relative; }
.jump-list SMALL 				{ float:left; width:65px; }
.jump-list A 					{ display:block; margin-left:70px; }

/* filters */
#filters 						{ position:absolute; top:-60px; left:0; width:420px; }

/* explanation */
#explanation 					{ position:absolute; top:70px; left:-200px; width:180px;
								  font-size:12px; }
#explanation 					{ margin:10px 0 0 0; clear:both; }
#explanation dt 				{ color:#FFF; }
#explanation dd 				{ margin:0 0 10px 0; }

/* composition meta */
.composition-meta 				{ }
.composition-meta dt			{ float:left; width:80px; color:#FFF; text-align:right; padding:0 0 5px 0; }
.composition-meta dd			{ float:left; width:300px; margin:0 0 0 20px; padding:0 0 5px 0; }

/* media list */
.media-list 					{ margin:0 0 20px 0; }
.media-list dd 					{ padding:0 0 10px 0; margin:0 0 0 20px; min-height:22px; }

/* media table */
.media-table 					{ margin:0 0 20px 0; width:100%; }
.media-table TD 				{ min-height:22px; padding:0 0 10px 0; }
.media-table .media-label		{ padding-right:20px; width:50%; text-align:right; }

HR 								{ height:0; border-top:1px solid #FFF; border-bottom:none; }

.post-featured-image 			{ float:right; margin:0 0 20px 20px; }

/*******************************************************************
 * FOOTER
 *******************************************************************/

#footer 						{ position:relative; width:800px; margin:0 auto; padding:0 0 20px 0; z-index:100;
								  text-align:center;}
#footer .menu 					{ list-style:none; margin:0; padding:0; }
#footer	.menu UL				{ padding:0; margin:0; list-style:none; }
#footer	.menu LI 				{ display:inline-block; padding:0 10px; }
#footer	.menu LI A 				{ color:#999; font-size:12px; text-decoration:none; }

/*******************************************************************
 * AUDIO JS
 *******************************************************************/
#header-audio-wrap 				{ position:absolute; top:0; right:0; }

.audiojs 						{ height: 22px; background: #9c351f; border-radius:10px; width:140px;
						          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5b150e), color-stop(0.5, #852619), color-stop(0.51, #5b150e), color-stop(1, #5b150e));
						          background-image: -moz-linear-gradient(center top, #5b150e 0%, #852619 50%, #5b150e 51%, #5b150e 100%);
						          -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
						          -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); }
.audiojs .play-pause 			{ width: 25px; height: 20px; padding: 0px 8px 0px 0px; opacity:0.5; }
.audiojs p 						{ width: 25px; height: 20px; margin: -3px 0px 0px -1px; }
.audiojs .scrubber 				{ background: #5a5a5a; width: 100px; height: 10px; margin: 5px; }
.audiojs .progress 				{ height: 10px; width: 0px; background: #333;
							      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444));
							      background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%); }
.audiojs .loaded 				{ height: 10px; background: #000;
							      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222));
							      background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); }
.audiojs .time 					{ float: left; height: 25px; line-height: 25px; display:none; }
.audiojs .error-message 		{ height: 24px;line-height: 24px; }

/*******************************************************************
 * CUSTOM SCROLLBARS
 *******************************************************************/

/* scrollbars */
/* Styled scrollbars */

.iScrollHorizontalScrollbar {
	position: absolute;
	z-index: 9999;
	height: 16px;
	left: 2px;
	right: 2px;
	bottom: 2px;
	overflow: hidden;
}

.iScrollHorizontalScrollbar.iScrollBothScrollbars {
	right: 18px;
}

.iScrollVerticalScrollbar {
	position: absolute;
	z-index: 9999;
	width: 12px;
	bottom: 2px;
	top: 2px;
	right: 2px;
	overflow: hidden;
	background:rgba(255,255,255,0.1);
	border-radius:6px;
}

.iScrollVerticalScrollbar.iScrollBothScrollbars {
	bottom: 18px;
}

.iScrollIndicator {
	position: absolute;
	background: #cc3f6e;
	border-width: 1px;
	border-style: solid;
	border-color: #EB97B4 #7C2845 #7C2845 #EB97B4;
	border-radius: 8px;
	height:16px; width:16px;
}

.iScrollHorizontalScrollbar .iScrollIndicator {
	height: 100%;
	background: -moz-linear-gradient(left,  #A8563F 0%, #AF5C3E 100%);
	background: -webkit-linear-gradient(left,  #A8563F 0%,#AF5C3E 100%);
	background: -o-linear-gradient(left,  #A8563F 0%,#AF5C3E 100%);
	background: -ms-linear-gradient(left,  #A8563F 0%,#AF5C3E 100%);
	background: linear-gradient(to right,  #A8563F 0%,#AF5C3E 100%);
}

.iScrollVerticalScrollbar .iScrollIndicator {
	width: 100%;
	background: -moz-linear-gradient(top, #A8563F 0%, #AF5C3E 100%);
	background: -webkit-linear-gradient(top,  #A8563F 0%,#AF5C3E 100%);
	background: -o-linear-gradient(top, #A8563F 0%,#AF5C3E 100%);
	background: -ms-linear-gradient(top, #A8563F 0%,#AF5C3E 100%);
	background: linear-gradient(to bottom,  #A8563F 0%,#AF5C3E 100%);
}