* { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; *behavior:url(boxsizing.htc); }

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	background: #000;
	line-height: 1;
	font-family: "Gill Sans", Lato, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: lighter;
	min-width: 1055px;  /* Side bar width */
}

/* Won't expand to with viewport on some browsers?? */
#navigation, #header h1 {
	min-width: 1055px;
}

h1, h2 {
	font-weight: lighter;
	text-transform: none;
}
p {
	font-size: 20px;
}
h1 {
	font-size: 48px;
}
h1, p, ul {
	margin: 0 0 22px;
	color: #333;
}
h2, h3 {
	margin: 0 0 22px;
	color: #333;
}
a, a .logo {
	color: rgb(149, 206, 227); /* blue-green */
	text-decoration: none;
	-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;	
}
a:hover {
	color: #d231d2; /* purple */
	text-decoration: none;
}

/* Header section (above fold) */
#header {
	height: 40%;
	overflow: hidden;
	display: block;
	clear: both;
}
#header h1 {
	position: absolute;
	top: 0;
	left: 0;	
	z-index: 998; /* One less than nav*/
	width: 100%;
	height: 40%;
	background: url('img/fanfarlo-header2.png') center -50px no-repeat;
	text-indent: -9999px;
}

body.home #header {
	height: 100%;
}
body.home #header h1 {
	height: 100%;
	background: url('img/fanfarlo-header2.png') center no-repeat;
}
/* 
#header video {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
}
 */
#header-bg {
	z-index: 0;
	position: fixed; 
	top: -50%; 
	left: -50%; 
	width: 200%; 
	height: 200%;
}
#header-bg img {
	position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	margin: auto; 
	min-width: 50%;
	min-height: 50%;
}

/* Front vs Inside pages */
body.page #content h1 {
	margin-top: 20px;
}

#navigation {
	z-index: 999;
	width: 100%;
	height: 27px;
	position: absolute;
	left: 0;
	bottom: auto;
	top: 35%;
	margin: 0 auto 0 auto;
	padding: 5px 32px;
	background: black;
	text-align: center;
}
body.home #navigation {
	bottom: 0;
	top: auto;
}
#navigation.sticky, body.home #navigation.sticky {
	position: fixed;
	top: 0;
	bottom: auto;
}
#sidebar.sticky {
	position: fixed;
	/* top: 5%; */
	width: 100%;
}


#header.front #navigation {
	background: #444;
	background: rgba(0,0,0,.4);
}

#navigation h2 {
	display: inline;
	/* font-style: italic; */
	/* margin-right: 52px; */
	/* font-weight: 900; */
	font-size: 18px;
	text-transform: uppercase;
}

/* Header text */
#navigation h2 a {
	color: #d231d2; /* purple */
	text-decoration: none;
}

#navigation h2 a:hover {
	color: rgb(149, 206, 227); /* blue-green */
	text-decoration: none;
}

#navigation h2 a.navCurrent { /* Current section */
	/* font-size: 30px; */
	text-decoration: none;
	color: white;
}

/* Main content section */
#main {
	width: 100%;
}

#content {
	background: whitesmoke;
	position: relative;
	padding: 0;
	-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;
}

.paging {
	width: 100%;
	text-align: center;
	font-size: 20px;
}

/* Sidebar (brick) */

#sidebar {
	height: 365px;
	padding: 10px 0;
	background: #333;
	text-align: center;
	z-index: 1;
}

/* Full size */
#sidebar-elements {
	width: 1055px;
	margin: 0 auto;
}
.sidebar-element {
	width: 345px;
	float: left;
	margin-right: 10px;
}
 .sidebar-element:last-child {
	margin-right: 0;
}

#sidebar-top-banner {
	border-radius: 5px;
	overflow: hidden;
}
#sidebar-top-banner img {
	width: 345px; /* width of sidebar */
}
#sidebar-top-banner .description-short {
	-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;	
	background: rgba(0,0,0,.5);
	position: absolute;
	display: block;
	margin-top: -52px;
	height: 52px;
	padding: 10px;
	width: 345px;
	font-size: 22px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	overflow: hidden;
	color: rgb(149, 206, 227); /* blue-green */
}

.description-short .description-more {
	margin-top: 20px;
	visibility: hidden;
}
#sidebar-top-banner:hover {
	color: #d231d2; /* purple */
}

/* Top banner: Hover to reveal */
#sidebar-top-banner:hover .description-short {
	background: rgba(53, 42, 50,.7);
	margin-top: -345px;
	height: 345px;
	border-radius: 5px;
	padding-top: 60px;
}
#sidebar-top-banner:hover .description-more {
	visibility: visible;
}
#sidebar-top-banner a.buylink, #sidebar-top-banner a.ts_buttonlink {
	border-color: white !important;
}

/* Socials inside sidebar */

#sidebar-socials {
	background: rgb(53, 42, 50);
	height: 345px;
	border-radius: 5px;
	text-align: center;
	overflow: hidden;
}
#sidebar .fb-like {
	background-color: #eee;
	padding: 5px;
	margin: 5px 0;
}
#sidebar #tweets {
	list-style: none;
	padding: 0px;
}
#sidebar-socials a.social-link {
	display: inline-block;
	text-indent: -9999px;
	height: 80px;
	width: 80px;
	margin: 65px 10px 0 0;
	line-height: 80px;
	color: white;
}
#sidebar-socials a.social-link:last-of-type .logo {
	margin-right: 0;
}
#sidebar-socials a.social-link .logo {
	display: block;
	height: 80px;
	width: 80px;
	float: left;
	margin-right: 20px;
}
#sidebar-socials a.social-link:hover {
	color: #d231d2; /* purple */
}
#sidebar-socials a.social-link:hover .logo {
	opacity: .5;
}
#sidebar-socials #fanfarlo-facebook .logo {
	background: url(img/facebook.png) left center no-repeat;
}
#sidebar-socials #fanfarlo-twitter .logo {
	background: url(img/twitter.png) left center no-repeat;
}
#sidebar-socials #fanfarlo-instagram .logo {
	background: url(img/instagram.png) left center no-repeat;
}
#widget-container {
	width: 100%;
	background: white;
	height: 185px;
	margin-top: 20px;
}

/* Medium-size (1000px is nice cut-off) */
@media all and (max-width: 1000px) {

	/* Won't expand to with viewport on some browsers?? */
	#navigation, #header h1, html, body {
		min-width: 800px;
	}

	#sidebar {
		height: 590px; /* Two rows */
	}
	#sidebar-elements {
		width: 710px;
		margin: 0 auto;
	}
	.sidebar-element {
		margin-bottom: 10px;
	}
	#sidebar-socials {
		float: none;
		width: 100%;
		height: 210px;
	}
	#sidebar-socials a.social-link {
		margin-top: 20px;
	}
	#sidebar-socials #widget-container div {
		float: left;
		margin-left: 10px;
	}
		
	/* Front page scroll hack */
	body.sticky-nav #maincolumn {
		/* margin-top: 590px !important; */	/* Fill room left by top sidebar */
	}
}


/* Socials when at bottom of page */

#socials-footer {
	width: 100%;
	height: 120px;
	text-align: center;
	background-color: rgb(149, 206, 227); /* blue-green */
	color: white;
	font-size: 20px;
}
#socials-footer a {
	display: inline-block;
	height: 80px;
	margin-top: 20px;
	margin-right: 40px;
	line-height: 80px;
	color: white;
}
#socials-footer a:last-child {
	margin-right: 0;
}
#socials-footer a .logo {
	display: block;
	height: 80px;
	width: 80px;
	float: left;
	margin-right: 20px;
}
#socials-footer a:hover {
	color: #d231d2; /* purple */
}
#socials-footer a:hover .logo {
	opacity: .5;
}
#socials-footer #fanfarlo-facebook .logo {
	background: url(img/facebook.png) left center no-repeat;
}
#socials-footer #fanfarlo-twitter .logo {
	background: url(img/twitter.png) left center no-repeat;
}
#socials-footer #fanfarlo-instagram .logo {
	background: url(img/instagram.png) left center no-repeat;
}

/* Main content */
#maincolumn {
	width: 800px;
	margin: 0 auto;
	clear: both;
	z-index: 2;
	position: relative;
 	background: whitesmoke;
	padding: 20px 0;
	color: #333;
}
body.home #maincolumn {
	border-top: 3px solid #333; /* dark-grey */
}

/* Front page scroll hack */
body.sticky-nav #maincolumn {
	/* margin-top: 385px; */	/* Fill room left by top sidebar */
}
body.home #maincolumn {
	width: 100%;
}
body.home #maincolumn article {
	width: 800px;
	margin: 0 auto;
}

/* Embeds & article images */
#maincolumn iframe {
	margin-bottom: 20px;
}
#maincolumn .tweetEntry iframe {	/* Tweet button doesn't need margin */
	margin-bottom: 0px;
}
#maincolumn article iframe {	/* Will also apply to tweet button... ok for now */
	display: block;
	margin: 0 auto;
}
#maincolumn article img {
	display: block;
	margin: 0 auto;	
}

#content h1 {
	font-size: 36px;
}
#content h2 {
	color: rgb(149, 206, 227); /* blue-green */
	font-size: 20px;
}
#content p {
	font-family: Georgia, serif;
	line-height:1.8;
}
#sidebar h1, #sidebar h2, #sidebar h3 {
	color: #fff;
	font-weight: 200;
}

article, .comments-area {
	/* width: 800px; */
	margin: 10px auto 20px auto;	
	padding: 10px;
	border-bottom: 1px dashed #333;
}

.form-allowed-tags {
	font-size: 12px;	/* Small text */
}

/* video embeds (http://webdesignerwall.com/tutorials/css-elastic-videos) */
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Entries */
#maincolumn article, #maincolumn .music-item {
}
.entry-title-details {		/* Date etc underneath the name of a post */
	display: block;
	font-size: 16px;
	color: #999; /* grey */
	text-transform: none;
	padding-top: 10px;
}
.entry-content {
	margin-bottom: 20px;
}
/* 
.entry-content img {
	width: 100%;
	height: auto;
}
 */

/* Comments */
.commentlist div.comment, .commentlist .comment-author, .commentlist .reply {
	padding: 10px;
	background: rgba(255, 255, 255, .1);
	margin-bottom: 10px;
}
.comment-author span, .comment-author cite { /* author name */
	color: white;
	padding-bottom: 10px;
}
label[for="comment"] {
	display: block;
}

/*  Music page entry  */
#nav-music-mini {
	z-index: 3;
	position: absolute;
	right: 20px;
	top: 20px;
	width: 70px;
	padding: 5px;
	border-radius: 5px;
	background-color: #eee;
}
#nav-music-mini.sticky {
	position: fixed;
	top: 27px;
	margin-top: 20px;
}

.nav-mini-item {
	margin-bottom: 10px;
}
.nav-mini-item:last-child {
	margin-bottom: 0;
}
.nav-mini-item img {
	width: 60px;
}

.nav-mini-item a:hover img {
	opacity: .5;
	border: 2px solid white;
}

.music-item {
	background: rgba(255, 255, 255, .1);
	margin-bottom: 20px;
	border-bottom: 1px dashed #333;
}
#maincolumn .music-item header h2 {
	color: #d231d2; /* purple */
	font-size: 36px;
	margin-bottom: 0;
	margin-top: 40px;
}
.music-info {
	padding-left: 335px;
}
.packshot {
	float: left;
}
.music-buy {}
.music-more {
	padding-top: 20px;
	clear: left;
}
#maincolumn .music-more iframe {
	width: 100%;
	margin-bottom: 0;
}

.press-fourstars {
	display: inline-block;
	height: 20px;
	width: 80px;
	margin: 0 10px;
	background: url(img/stars.png) left top no-repeat;
}
.press-score {
	font-weight: bold;
}

/* Buy links */
.music-info a.ts_buttonlink, .music-info a, #sidebar-top-banner a.ts_buttonlink, a.buylink {
	font-size: 30px;
	line-height: 56px;
	margin-bottom: 10px;
	background: none;
	border: 3px solid black;
	border-radius: 5px;
	padding: 5px;
	color: rgb(149, 206, 227); /* blue-green */
	font-weight: lighter;
	font-family: "Gill Sans", sans-serif;
}
.music-info a.ts_buttonlink:hover, .music-info a:hover, #sidebar-top-banner a.ts_buttonlink:hover, a.buylink:hover {
	color: #d231d2; /* purple */
	border-color: #666; /* light-grey */
}

a.itunes-link {
	text-indent: -2000px;
	display: block;
	background: url('img/itunes-logo.png');
	border: none;
	line-height: normal;
	height: 78px;
	width: 211px;
}
a.itunes-link:hover {
	opacity: .5;
}
a.roughtrade-link {
	text-indent: -2000px;
	display: block;
	background: url('img/roughtrade-logo.jpg');
	border: none;
	line-height: normal;
	height: 78px;
	width: 108px;
	margin: 16px 16px 16px 0;
	float: left;
}
a.roughtrade-link:hover {
	opacity: .5;
}

/* Footer section */

#footer {
	position: relative;
	z-index: 1;
	clear: both;
	xbackground: #333;
}

/* Tour dates footer */
#tourdates {
	width: 800px;
	margin: 0 auto;
	list-style: none;
	padding: 10px 0;
}
#tourdates .gigpress-sidebar-date {
	color: white;
	border: 3px solid white;
	border-radius: 5px;
	display: inline;
	padding: 10px;
	font-size: 36px;
	float: left;
	margin-right: 20px;
}

#tourdates .summary {
	color: rgb(149, 206, 227); /* blue-green */
	display: block;
	font-size: 36px;
	padding: 0;
}
#tourdates li {
	margin: 20px 0;
	padding: 5px;
}
#tourdates .dtstart {
	font-size: 20px;
}

/* Tour dates page */

table.gigpress-table {
	font-size: 20px;
	color: #333; /* dark-grey */
	border-bottom: 1px dashed #333;
}
table.gigpress-table gigpress-header th {
	font-weight: normal
}
.gigpress-subscribe {
	margin-bottom: 40px;
}