/* 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;
}
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;
}

/*----------$links----------*/
a {
	color:#fff;
	text-decoration:none;
	font-family:oswald;
	font-weight:500;
}

a.listen, a.blog, a.mail, a.extLink {
	font-size:.9em;
	border-bottom:none;
}

a.listen {
	padding-left:22px; 
	background:url(../img/headphones.png) no-repeat left;

}	

a.blog {
	padding-left:22px; 
	background:url(../img/blog.png) no-repeat top left;
}

a.extLink {
	padding-left: 22px;
	background: url(../img/extLink.png) no-repeat 2px;
}

a.mail {
	padding-left: 30px;
	background: url(../img/email.png) no-repeat 4px center;
	margin-top:5px;
	display:block;
}

/*----------$typography----------*/
body { 
	font-family: 'Chivo', helvetica, trebuchet ms, verdana, arial, sans-serif;
	/*color:#C5C5CD;*/
	color:#fff;
	font-size:13px;
}

h1, h2, h3, h4 {
	font-family: oswald, georgia, verdana, arial, sans-serif;
}

h1 {
	font-size:1.84em;
}

h2 {
	font-size:1.61em;
	font-family: oswald;
}

h3 {
	font-size:1.38em;
}

h4 {
	font-size:1.1em
}

p {
	line-height:1.38em;
	letter-spacing:0.035em;
	font-weight:400;
}

img {
	border: 2px solid #444444;
    border-radius: 5px 5px 5px 5px;
		-moz-border-radius: 5px 5px 5px 5px;
    box-shadow: 1px 1px 10px #555555;
		-moz-box-shadow: 1px 1px 10px #555555;
}

span.lightTxt {
	font-weight:normal;
	display:inline;
}

span.name {
	/*display:block;
	margin-left:75px;
	margin-top:15px;
	margin-bottom:10px;*/
}	

/*----------$general Layout----------*/
body {
	background:#000 url(../img/bg.jpg) no-repeat top left fixed;
		background-size:cover;
		-webkit-background-size:cover;
		-o-background-size:cover;
		-moz-background-size:cover;
}
#container {
	width:1140px;
	margin: 0 auto;
	background-color: rgba(0,0,0,0.8);
	overflow:hidden;
}

#header {
	height:100px;
	overflow:hidden;
	padding:10px;
}

#mainContent {
	height:360px;
}

#content {
	width:830px;
	float:left;
	padding:10px 0px 0 10px;
}

#aside {
	width:280px;
	float:left;
	padding:10px 10px 10px 10px;
}
	
#footer {
	
}

/*$mainNav----------*/
#mainNav {
	width: 635px;
	float:left;
}

#mainNav li a {
  float:left;
  height:98px;
  margin-right:25px;
  text-indent:-900%;
  width:77px;
  border-bottom: none;
  background: url('../img/navSprite.png') no-repeat;
}

#mainNav li a:hover {
	opacity: .75;
}

#mainNav a.current {
	opacity:.5;
}

#mainNav a.home  {
	background-position: -10px 0;
}

#mainNav a.archives {
	background-position: -115px 0;
}

#mainNav  a.blog{
	background-position: -215px 0;
}

#mainNav a.studio {
	background-position: -315px 0;
}

#mainNav a.calendar {
	background-position: -415px 0;
}

#mainNav a.contact {
	background-position: -515px 0;
}

#mainNav a.home:hover {
  -webkit-transition-delay:initial;
	  -webkit-transition-duration:0.1s;
	  -webkit-transition-property:opacity;
	  -webkit-transition-timing-function:linear;
	-moz-transition-delay:initial;
	  -moz-transition-duration:0.3s;
	  -moz-transition-property:opacity;
	  -moz-transition-timing-function:linear;
	background-position: -10px -101px;
}

#mainNav a.archives:hover {
	-webkit-transition-delay:initial;
	  -webkit-transition-duration:0.1s;
	  -webkit-transition-property:opacity;
	  -webkit-transition-timing-function:linear;
	-moz-transition-delay:initial;
	  -moz-transition-duration:0.3s;
	  -moz-transition-property:opacity;
	  -moz-transition-timing-function:linear;
	background-position: -115px -101px;
}

#mainNav  a.blog:hover {
	-webkit-transition-delay:initial;
	  -webkit-transition-duration:0.1s;
	  -webkit-transition-property:opacity;
	  -webkit-transition-timing-function:linear;
	-moz-transition-delay:initial;
	  -moz-transition-duration:0.3s;
	  -moz-transition-property:opacity;
	  -moz-transition-timing-function:linear;
	background-position: -215px -101px;
}

#mainNav a.studio:hover {
	-webkit-transition-delay:initial;
	  -webkit-transition-duration:0.1s;
	  -webkit-transition-property:opacity;
	  -webkit-transition-timing-function:linear;
	-moz-transition-delay:initial;
	  -moz-transition-duration:0.3s;
	  -moz-transition-property:opacity;
	  -moz-transition-timing-function:linear;
	background-position: -315px -101px;
}

#mainNav a.calendar:hover {
	-webkit-transition-delay:initial;
	  -webkit-transition-duration:0.1s;
	  -webkit-transition-property:opacity;
	  -webkit-transition-timing-function:linear;
	-moz-transition-delay:initial;
	  -moz-transition-duration:0.3s;
	  -moz-transition-property:opacity;
	  -moz-transition-timing-function:linear;
	background-position: -415px -101px;
}

#mainNav a.contact:hover {
	-webkit-transition-delay:initial;
	  -webkit-transition-duration:0.3s;
	  -webkit-transition-property:opacity;
	  -webkit-transition-timing-function:linear;
	-moz-transition-delay:initial;
	  -moz-transition-duration:0.3s;
	  -moz-transition-property:opacity;
	  -moz-transition-timing-function:linear;
	background-position: -515px -101px;
}

/*$mailingList----------*/
#mailingList {
	float:left;
	width:200px;
}	

#mailingList * {
	display:block; /*easy way to have make label block level without own selector*/
	margin-bottom:5px;
}

/*$missionStatement----------*/
#missionStatement {
	float:right;
	width:270px;
}

#missionStatement h3 {
	margin-bottom:.75em;
}


/*$featured----------*/
#marquee {
	position:relative;
}

#marqueeNav {
	position:absolute;
	width:260px;
	top:0;
	right:0;
}

#marqueeNav div {
	color: #000;
	position:relative;
	height:83px; 
	margin-bottom: 8px;
	overflow:hidden;
	background: rgba(211, 211, 211, .45);
	border-radius:5px;
		-moz-border-radius:5px;
		-o-border-radius:5px;
	box-shadow: -1px 1px 5px #555;
		-moz-box-shadow: -1px 1px 5px #555;
		-o-box-shadow: -1px 1px 5px #555;
}

#marqueeNav div.selected {
	background:#222;
	background:rgba(100, 100, 100, .5);
	color:#fff;
	left:-15px;
	border:1px solid #555;
}

#marqueeNav div h3 {
	padding: 5px 10px 5px 5px;
	font-size:16px;
	letter-spacing:1px;
}

#marqueeNav div a {
	display:block;
	color:inherit;
	-webkit-transition-delay:initial;
	  -webkit-transition-duration:.3s;
	  -webkit-transition-property:left;
	  -webkit-transition-timing-function:easeIn;
	padding: 0px 10px 10px 5px;
	letter-spacing:0px;
}

#marqueeNav div a span {
	position:absolute; 
	width:100%; 
	height:100%; 
	top:0; left: 0;
	z-index: 999;
}

#marqueeNav div:hover {
	left:-15px;
	z-index:99;
	background:#dedede;
	opacity:.7;
	box-shadow: inset 1px 1px 3px #555;
		-moz-box-shadow: inset 1px 1px 5px #555;
	-webkit-transition-delay:initial;
	  -webkit-transition-duration:.3s;
	  -webkit-transition-property:left;
	  -webkit-transition-timing-function:easeIn;
	-moz-transition-delay:initial;
	  -moz-transition-duration:2s;
	  -moz-transition-property:left;
	  -moz-transition-timing-function:linear;
	-ms-transition-delay:initial;
	  -ms-transition-duration:2s;
	  -ms-transition-property:left;
	  -ms-transition-timing-function:linear;
}

#marqueeContent {
	position:relative;
	height:360px;
	overflow:hidden;
	width:547px;
}

#marqueeContent .container {
	width:2188px;
	position:relative;
}

.marqueePost {
	float:left;
	width:547px;
	position:relative;
}

.marqueePost img {
	height:355px;
	width:543px;
}

.marqueePost div.infoContainer {
	position:relative;
}

.marqueePost div.info {
	background:#000;
	background: rgba(0, 0, 0, 0.7);
	border-top:2px solid #555;
    border-radius: 0 0 3px 3px;
		-moz-border-radius: 0 0 3px 3px;
    padding: 10px;
	position:absolute;
    bottom:2px;
	left:2px;
	width:523px;
}

.marqueePost div.info h2 {
		margin-bottom:10px;
		font-size:1.61em;
}

.marqueePost div.info h3 {
	display:inline-block;
	width:150px;
	margin-top:10px;
}

.marqueePost div.info p {
	line-height:1.2em;
}

.marqueePost ul.links li {
	display:inline;
	margin-left:10px;
}

.marqueePost ul.links {
	position:absolute;
	top:15px;
	right:10px;
}

.marqueePost .facebook {
	position:absolute;
	bottom: 7px;
	right: 100px;
}

.marqueePost .twitter {
	position:absolute;
	bottom: 5px;
	right: 0px;
}

/*$sheaDuJour $guestList----------*/
#sheaDuJour, #guestList {
	border-top:1px solid #555;
	margin-top:30px;
	padding-top:10px;
}

#sheaDuJour .sc-player a, #guestList .sc-player a {
	font-family: 'Oswald', helvetica, sans-serif;
	font-size:11px;
}

#sheaDuJour {
	padding-right:25px;
	float:left;
	width:389px;
	border-right: 1px solid #555;
}

#guestList {
	width:390px;
	padding-left:15px;
	float:left;
}

#sheaDuJour h2, #guestList h2 {
	margin-bottom: 12px;
}

#sheaDuJour img {
	float:left;
	width:140px;
	margin-right:10px;
	margin-bottom:5px;
}

#sheaDuJour p {
	line-height:1.4em;
}

#sheaDuJour .meta, #guestList .meta {
	clear:both;
	margin:15px 0;
}

.meta ul.links {
	width:150px;
	float:left;
	margin-right:20px;
}
.meta ul.links li {
	margin-bottom: 10px;
}

.meta .socialMedia {
	width:210px;
	float:right;
	margin-top:40px;
	position:relative;
}

.meta .socialMedia .twitter, .meta .socialMedia .facebook {
	display:inline-block;
}

.meta .socialMedia .facebook {
	position:absolute;
	bottom:1px;
	right:0;
}

#sheaDuJour .soundcloud{
	clear:both;
	padding-top:20px;
}

/*$archives----------*/
#archives {
	overflow:hidden;
	background: rgba(211, 211, 211, .45);
	border-radius:5px;
		-moz-border-radius:5px;
		-o-border-radius:5px;
	box-shadow: -1px 1px 5px #555;
		-moz-box-shadow: -1px 1px 5px #555;
		-o-box-shadow: -1px 1px 5px #555;
		width:280px;
		position:relative;
		border:1px solid black;
		height:684px;
}

#archives > ul {
	overflow:hidden;
	border-bottom:1px solid black;
	border-radius: 5px 5px 0 0;
		-moz-border-radius:5px 5px 0 0;
}

#archives > ul li {
	display:block;
	font-size:1.5em;
	width:140px;
	float:left;
}

#archives > ul li a {
	color:#000;
	display:block;
	padding: 5px 0 5px 10px;
	height:25px;
	letter-spacing:1px;
}

#archives > ul li a:hover {
	background:#dedede;
	opacity:.7;
	border-radius:0 5px 0 0;
		-moz-border-radius:0 5px 0 0
}

#archives > ul li a.selected {
	background:#444;
	color:#fff;
	border-radius:inherit;
	-moz-border-radius:inherit;
}

#latest {
	border-right:1px solid #000;
	border-radius:5px 0 0 0;
		-moz-border-radius: 5px 0 0 0;
}

#faves {
	border-left: 1px solid #777;
		border-radius:0 5px 0 0;
		-moz-border-radius:0 5px 0 0
}

#archives #tabsContainer {
	width:580px;
	clear:both;
}

#archives div#latestTab, #archives div#favesTab {
	width:280px;
	float:left;
}

#archives div#latestTab li, #archives div#favesTab li {
	padding: 3px 0px 3px 10px;
	border-bottom:1px solid #000;
	border-top:1px solid #777;
}

#archives div#latestTab li:first-child, #archives div#favesTab li:first-child {
	border-top:none;
}

#archives div#latestTab li:last-child, #archives div#favesTab li:last-child {
	border-bottom:none;
}	

#archives div#latestTab li a, #archives div#favesTab li a {
	display:block;
	color: #000;
	height:17px;
}

#archives div#latestTab li:hover, #archives div#favesTab li:hover {
	background:#dedede;
	opacity:.7;
}

/*$footer----------*/
#footer {
	clear:both;
	position:relative;
	border-top: 1px solid #555;
	height:130px;
}

#footer address {
	display:block;
	position: absolute;
	left:10px;
	top:10px;
}

#footer .organization-name {
	display:block;
	margin-top:10px;
	font-size:1.2em;
}

#footer span.organization-name {
padding-bottom: 5px;
}

#footer span.Contact {
font-size: .9em;
}

#footer .links {
	margin-top:10px;
	position:absolute;
	top:10px; left: 440px;
}

#footer div.links li {
	margin-top:5px;
	margin-right:15px;
}

#footer div.links li a {
	margin-top:5px;
}

/********************************************************
$individual page styles								
********************************************************/
#content #contact, #content #studio, #content #calendar  {
	width:850px;
	height:320px; 
}

/*$contact------------------------*/
#content #contact h1 {
	margin-bottom: 10px;
	margin-left:10px;
}

#content #contact #columnOne {
	width:250px;
	float:left;
	margin-left:10px;
}

#content #contact #columnTwo {
	width:400px;
	float:left;
}

#content #contact h3 {
	margin:20px 0 10px 0;
}

#content #contact h4 {
	margin: 20px 10px 10px 10px;
	font-family: 'Oswald', verdana, arial, sans-serif;
}

#content #contact a {
	margin: 0 0 0 10px;
}

/*$studio------------------------*/
#content #studio {
	padding: 0px 10px;
}

#content #studio h1 {
	margin-bottom: 20px;
}

#content #studio h4 {
	line-height:1.7em;
}

#content #studio a {
	display:block;
	margin:10px 20px;
	letter-spacing:1px;
}

/*$calendar------------------------*/
#content #calendar *{
	line-height: 18px;
	margin-left:10px;
}

#content #calendar h3{
	margin: 20px 0 5px 0px;
}

#content #calendar #columnOne, #content #calendar #columnTwo {
	width:400px;
	float:left;
}
