/*
Theme Name: The Side Street Project
Theme URI: http://www.thesidestreetproject.com
Author: Moe
Author URI: http://wordpress.org/
Description: Custom theme for The Side Street Project, built on the TwentyEleven.
Version: 0.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: dark, black, gray
*/

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

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, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
	outline: 0;
}
body {
	/*background: #000;*/
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 




/* =Structure
----------------------------------------------- */

/************
Custom Styles
************/

body{
	background: url('images/bg.jpg') #000 no-repeat;
	background-size: 100% auto;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 100;
}

a{
	text-decoration: none;
}

#wrap{
	background: url(images/wrap_bg.jpg);
	margin: 0 auto 20px auto ;
	/*padding: 0 12px;*/
	width: 889px;
}


/************
Header Styles
************/

#banner{	
	background: url(images/header.jpg);
	display: block;
	height: 105px;
}

header nav{
	display: block;
	height: 43px;
	margin: auto;
	padding: 11px 0;
	width: 869px;
}
	
	header nav ul{
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	
	header nav li{
		display: inline-block;
		float: left;
		list-style: none;
		margin: 0 0 0 4px;
		width: 105px;
	}

		header nav li:first-child{
			margin: 0;
		}

		header nav ul li ul{
			display: none;
		}

			header nav ul li ul > li{
				margin: 0;
			}

		header nav ul li:hover ul{
			display: block;
			position: absolute;
			float: left;
			z-index: 500;
			width: 155px;
		}



		.covers a{
			background: url(images/covers.jpg) no-repeat 0 0;
			display: block;
			height: 48px;
			transition: all .2s fade;
			width: 105px;
		}

			.covers-art a{
				background: url(images/covers_art.jpg) no-repeat 0 0;
				display: block;
				height: 48px;
				transition: all .2s fade;
				width: 105px;
			}

			.covers-songs a{
				background: url(images/covers_songs.jpg) no-repeat 0 0;
				display: block;
				height: 48px;
				transition: all .2s fade;
				width: 105px;
			}

		.originals a{
			background: url(images/originals.jpg) no-repeat 0 0;
			display: block;
			height: 48px;
			width: 105px;
		}

		.artists a{
			background: url(images/artists.jpg) no-repeat 0 0;
			display: block;
			height: 48px;
			width: 105px;
		}

		.backstage a{
			background: url(images/backstage.jpg) no-repeat 0 0;
			display: block;
			height: 48px;
			width: 105px;
		}

		.imggallery a{
			background: url(images/gallery.jpg) no-repeat 0 0;
			display: block;
			height: 48px;
			width: 105px;
		}

		.about a{
			background: url(images/about.jpg) no-repeat 0 0;
			display: block;
			height: 48px;
			width: 105px;
		}

		.navtw a{
			background: url(images/navtw.jpg) no-repeat 0 0;
			display: block;
			height: 48px;
			width: 105px;
		}

		.navfb a{
			background: url(images/navfb.jpg) no-repeat 0 0;
			display: block;
			height: 48px;
			width: 105px;
		}


		.covers a:hover, 
		.originals a:hover,
		.artists a:hover,
		.backstage a:hover,
		.imggallery a:hover,
		.about a:hover,
		.navtw a:hover,
		.navfb a:hover,
		.covers-art a:hover,
		.covers-songs a:hover{
			background-position: 0 -48px;
		}


/*************
Content Styles
*************/
.entry-header{
	display: none;
}
#pagetitle{
	float: left;
	line-height: 90px;
	font-size: 2.5em;
	font-family: 'PT Sans Narrow', sans-serif;
	font-weight: 700;
	margin: 0 0 0 15px;
	text-transform: uppercase;
	width: 669px;
}

	#pagetitle span{
		color: rgb(255,255,255);
		color: rgba(255,255,255,1);
		border-bottom: 6px solid #fff;
		padding: 0 36px 0 0;
	}

#postback{
	float: right;
	line-height: 90px;
	float: right;
	font-size: 2.5em;
	font-family: 'PT Sans Narrow', sans-serif;
	font-weight: 700;
	margin: 0 15px 0 0;
	text-transform: uppercase;
	
}

	#postback span a{
		color: rgb(255,255,255);
		color: rgba(255,255,255,1);
		border-bottom: 6px solid #fff;
		padding: 0 0 0 36px;
	}


#content{
	background: url(images/content_bg.png) repeat-y;
	color: #fff;
	clear: both;
	margin: 20px auto;
	padding: 32px 44px;
	width: 707px;
}

	#content h2{
		color: #fff;
		font-family: 'PT Sans Narrow', sans-serif;
		font-size: 1.5em;
	}

	#content h2 > b{
		color: #eba809;
		font-weight: 700;
	}


	#content iframe{
		clear: both;
		display: block;
		float: left;
		height: 422px;
		width: 707px;
	}

	#content p{
		font-family: Helvetica, Arial, sans-serif;
		font-size: .8em;
		padding: .2em 0 .8em 0;
		font-weight: 100;
	}

	#content p em{
		font-style: italic;
	}


	#content hr ~ h2{
		clear: both;
		/*float: left;*/
		/*outline: 1px solid pink;*/
	}

	#content p hr{
		color: #e5e5e5;
		height: 1px !important;
		width: 100%;
	}


	.entry-content p{
		font-family: Helvetica, Arial, sans-serif;
		text-align: left;
		letter-spacing: .1em;
		line-height: 16px;
		font-weight: 100;

	}

		.entry-content p a{
			color: #eba809;
		}

		.entry-content p strong{
			font-weight: 700;
			font-size: 1.2em;
		}

		.entry-content h1{
			font-size: 35px;
			font-family: "PT Sans", sans-serif;
		}

		.entry-content h3{
			font-family: 'PT Sans Narrow', sans-serif;
			color: #eba809;
			font-size: 2.4em;
			text-transform: uppercase;
			font-weight: 700;
		}

		/*.entry-content hr{
			clear: both;
		}*/


	.entry-content img.alignleft{
		float: left;
		margin: 10px 20px 20px 0;
	}

	.entry-content img.aligncenter{
		text-align: center;
		clear: both;
		margin: auto;
	}


/************
Slider Styles
************/


#slider{
	display: block;
	height: 430px;
	margin: 0 auto 12px auto ;
	width: 868px;
}

	#slider .cycloneslider-caption{
		position: absolute;
		left: auto;
		right: 0;
		height: 100%;
		width: 30% !important;
	}

	#slider .cycloneslider-pager{
		bottom: 20px;
		position: absolute;
		top: auto;
		z-index: 400;
	}

/************
Social Styles
************/

#social{
	background-color: rgb(255,255,255);
	background-color: rgba(255,255,255,1);
	height: 340px;
	margin: auto;
	padding: 15px 0;
	width: 865px;
}

	#twitter{
		float: left;
		border-right: 2px solid #e8e8e8; 
		padding: 0 2%;
		width: 46%;
	}

		#twitter #theader{
			background: url(images/twitter_header.jpg) no-repeat;
			display: block;
			float: left;
			height: 43px;
			width: 397px;
		}

	#facebook{
		float: right;
		padding: 0 2% 0 0;
		width: 46%;
	}

		#facebook #fheader{
			background: url(images/facebookheader.jpg) no-repeat;
			display: block;
			float: left;
			height: 43px;
			width: 397px;
		}

/**************
Featured Styles
**************/

#featArtists{
	height: 250px;
	padding: 1em 0;
	margin: auto;
	width: 865px;
}	

	#featArtists a{
		float: left;
		margin-left: 1.73%;
		width: 23.7%;
	}

		#featArtists a:first-child{
			margin-left: 0px;
		}

/*************
Artists Styles
*************/

#content-artists{
	margin: auto;
	width: 800px;
}
	
		#content-artists a{
			margin: 0 0 1em 1.202263084%;
			color: #eba809;
			display: inline-block;
			font-family: 'PT Sans Narrow', sans-serif;
			font-size: 1.5em;
			font-weight: 700;
			text-transform: uppercase;
			position: relative;
			width: 32.531824611%;
			/*padding: 0 0 0 .5em;*/
			/*outline: 1px solid green;*/
		}

			#content-artists a img{
				height: auto;
				width: 100%;
			}

			#content-artists a:nth-child(3n+1){
				margin-left:0;
				padding-left: 0;
			}

			.artists-roster{
				position: absolute;
				bottom: 0;
				width: 95.75%;
				background: #000;
				float: right;
				right: 0;
				/*height: 50px;*/
				line-height: 2em;
				padding: 0 0 0 4.25%;
			}

		.artistfeat{
			float: left;
			margin: 0 2em 0 0;
			width: 253px;
		}

		.artist_links{
			clear: both;
			/*float: left;*/
			height: 4em;
			margin: 1em 2em 2em 0;
			/*outline: 1px solid pink;*/
			width: 253px;
		}

			.artist_links > a{
				color: rgb(255,255,255);
				font-family: 'PT Sans Narrow', sans-serif;
				font-weight: 900;
				font-size: .8em;
				line-height: 1.5em;
				text-transform: uppercase;
			}

			.artist_links a.site_link{
				background: url(images/site.png) no-repeat;
				padding: 0 0 0 1.4em; 
			}

			.artist_links a.t_link{
				background: url(images/twitr.png) no-repeat;
				padding: 0 0 0 1.4em; 
			}

			.artist_links a.facebook_link{
				background: url(images/fbook.png) no-repeat;
				padding: 0 0 0 1.4em; 
			}

/*************
Gallery Styles
*************/
.gallery-item{
	background: url(images/polaroid.png) no-repeat center;
	height: 253px;
	text-align: center;
	width: 205px;
}

.gallery-icon{
	text-align: center;
	margin: auto;
}
	#gallery-1 img,
	#gallery-2 img{
		height: 190px;
		width: 190px;
		margin: 10px 0 0 0;
	}

/************
Footer Styles
************/
#colophon{
	background-color: rgba(0,0,0,1);
	border-top: 1px solid #3f3f3f;
	color: #aba9aa;
	font-size: .8em;
	float: left;
	padding: 20px 0;
	width: 100%;
}

	#colophon #footerwrap{
		margin: auto;
		padding: 0 15px;
		width: 850px;
	}

	#colophon #footerwrap ul li{
		line-height: 1.5em;
	}

	#colophon #footerwrap a{
		color: #aba9aa;
	}

		#colophon #footerwrap a:hover{
			color: #fff;
		}

	#colophon ul{
		float: left;
		width: 30%;
	}

	#footerright{
		float: right;
		font-size: .9em;
		text-align: right;
		width: 30%;
	}

	#footerright p{
		float: right;
		display: block;
	}
	
	#flogo{
		background: url(images/ssp_footer.jpg) no-repeat;
		display: block;
		float: right;
		height: 39px;
		width: 208px;
	}