/* RESET */
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: 100%; font: inherit; }

#admin { position: fixed; bottom: 0; width: 100%; font-size: 12px; text-align: center; color: #999; background: #000; padding: 10px 0; }
hr { width: 100%; height: 9px; background: url(/assets/images/divider.png) no-repeat center; border: 0; margin: 1.5em 0 3em 0; overflow: hidden; clear: both; }

/* 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; }
img { max-width: 100%; height: auto;  }

body { font-family: Georgia, arial, helvetica, sans-serif; font-size: 100%; color: #DDD; background: #000 url(/assets/images/dark_brick_wall.png) fixed; }
h1,h2,h3,h4,h5,h6 { font-family: "Special Elite", Roboto, arial, helvetica, sans-serif; }
h1 { font-size: 1.8em; margin: 0 0 1em 0; }
h2 { font-size: 1.4em; margin: 0 0 0.75em 0; }
h3 { font-size: 1.2em; margin: 0 0 0.75em 0; }
h4,h5,h6 { font-size: 1.0em; margin: 0 0 10px 0; }
p {  line-height: 1.5; margin: 0 0 1.5em 0; }
ul { line-height: 1.5; list-style: square; margin: 0 0 1.5em 1.5em; }
.nobullet { list-style: none; margin: 0 0 1.5em 0; }
.inline li { display: inline-block; }
ol { line-height: 1.5; list-style: decimal; margin: 0 0 1.5em 1.5em; }
li { margin: 0 0 0.25em 0; }
dl { line-height: 1.5; margin: 0 0 1.5em 0; }
dt { font-weight: bold; }
table { width: 100%; line-height: 1.5; border-bottom: 1px dotted #CCC; margin: 0 0 1em 0; }
th { text-align: left; font-weight: bold; }
td { padding: 5px 0; border-top: 1px dotted #CCC;  }
blockquote { line-height: 1.5; font-style: italic; color: #BBB; padding: 0 1.5em; border-left: 2px solid #800000; margin: 0 1.5em 1.5em 1.5em; }
figure { text-align: center; margin: 0 0 1.5em 0; }
figcaption { font-family: Roboto, arial, helvetica, sans-serif; font-size: 0.85em; font-style: italic; color: #666; padding: 0.25em 0; }

b,strong { font-weight: bold; }
i,em { font-style: italic; }
i { margin-right: 0.5em; }
small { font-size: 0.75em; color: #CCC; }
a { transition: 0.5s; }
a:link { color: #00BFFF; text-decoration: none; }
a:visited { color: #00BFFF; text-decoration: none; }
a:hover { color: #FF8C00; text-decoration: underline; }
a:active { color: #FF8C00; text-decoration: underline; }
a:focus { color: #FF8C00; text-decoration: underline; }
.center { text-align: center; }

#wrapper {  }
#top { background: rgba(0,0,0,0.3); transition: 0.5s; }
#top:hover { background: rgba(0,0,0,0.5); }
    .top { max-width: 1280px; padding: 2em 1em; margin: 0 auto; overflow: hidden; clear: both; }
    #nav { float: right;  }
#content { max-width: 1280px; padding: 5% 1em; margin: 0 auto; overflow: hidden; clear: both; }
    #main { float: left; width: 65%; }
    #sidebar { float: right; width: 30%; }
    	#sidebar section { padding: 1.5em; background: #000; background: rgba(0,0,0,0.1); margin: 0 0 1.5em 0; border-radius: 7px; overflow: hidden; }
#bottom { background: rgba(0,0,0,0.3); 2.overflow: hidden; clear: both; }
    #footer { max-width: 1280px; padding: 2em 1em; margin: 0 auto; overflow: hidden; clear: both; }

.social-links { text-align: right; height: 30px; margin: 0; }
.social-links a { display: inline-block; height: 24px; font-size: 0.85em; color: #FFF; text-decoration: none; margin: 0 0.15em; line-height: 24px; background: #FFA500; border-radius: 16px; }
.social-links a:hover { text-decoration: none; background: #800000; }
.social-links a.text { padding: 0 1em; }
.social-links a.social { width: 24px; height: 24px; text-align: center; }
.social-links i { margin: 0; }
.social-links span { display: none; }

.logo { float: left; margin: 0; }

#nav-link { display: none; }
.nav { list-style: none; line-height: 30px; margin: 0; }
.nav li { display: inline-block; margin: 0 0 0 1em; }
.nav a { display: block; font-family: "Special Elite", Roboto, arial, helvetica, sans-serif; font-weight: normal; text-transform: none; text-decoration: none; transition: 0.5s; }
.nav a:hover, .nav a.current {  }

.subnav { list-style: none; line-height: 2; border-bottom: 1px dotted #CCC; margin: 0 0 1.5em 0; }
.subnav li { border-top: 1px dotted #CCC; }
.subnav a { display: block; }


/* GRID */
.section-grid {}
.section-heading { font-size: 1.2em;text-transform: uppercase; margin: 0 0 1em 0; clear: both; }
.section-heading span {  display: inline-block; padding: 0.5em; background: rgba(0,0,0,0.3); }
.grid-center { text-align: center; }
.grid-thumb { float: left; width: 140px; margin: 0 1em 0.5em 0; }
	.grid-thumb img { width: 140px; padding: 3px; background: #171717; }
.grid-description { overflow: hidden; }
	.grid-heading { font-size: 1em; font-weight: 500; margin: 0 0 0.5em 0; }
	.grid-date { font-family: Roboto, arial, helvetica, sans-serif; font-size: 0.85em; color: #CCC; text-transform: uppercase; margin: 0 0 0.5em 0; }
	.grid-summary { margin: 0.5em 0 0 0; }
	.grid ul { list-style: none; margin: 0.5em 0 0 0; }
	.grid-cta { font-family: Roboto, arial, helvetica, sans-serif; font-weight: bold;  }
.grid1-1 { clear: both; width: 100%; }
.grid2 { float: left; width: 48%; margin-bottom: 1.5em; }
.grid2-1 { margin-right: 4%; clear: left; }
.grid2-2 {  }
.grid3 { float: left; width: 30%; margin-bottom: 1.5em; }
.grid3-1 { margin-right: 5%; clear: left; }
.grid3-2 { margin-right: 5%; }
.grid3-3 {  }
.grid4 { float: left; width: 22%; margin-bottom: 1.5em; }
.grid4-1 { margin-right: 4%; clear: left; }
.grid4-2 { margin-right: 4%; }
.grid4-3 { margin-right: 4%; }
.grid4-4 { margin-right: 0; }
.grid6 { float: left; width: 15%; margin-bottom: 1.5em; }
.grid6-1 { margin-right: 2%; clear: left; }
.grid6-2 { margin-right: 2%; }
.grid6-3 { margin-right: 2%; }
.grid6-4 { margin-right: 2%; }
.grid6-5 { margin-right: 2%; }
.grid6-6 { margin-right: 0; }
.grida { float: left; width: 30%; margin-bottom: 1.5em; }
.grida-1 { margin-right: 5%; clear: left; }
.grida-2 { margin-right: 5%; }
.grida-3 { margin-right: 0; }
.grida-4 { margin-right: 5%; clear: left; }
.grida-5 { margin-right: 5%; }
.grida-6 { margin-right: 0; }


/* ENTRIES */
.entries { padding: 0 0 1.5em 0; overflow: hidden; clear: both; }
.entries-thumb { float: left; width: 25%; text-align: center; margin-right: 1em; }
.entries-description { overflow: hidden; }
.entries-heading { font-size: 1.2em; line-height: 1.25; margin: 0; }
.entries-meta { font-family: Roboto, arial, helvetica, sans-serif; font-size: 0.75em; font-weight: 300; color: #aaa; text-transform: uppercase; margin: 0.5em 0; }
.entries-category { font-size: 0.938em; color: #FFF; padding: 0.25em 1em; background: #B22222; border-radius: 7px; }
.entries-subtitle { font-family: Roboto, arial, helvetica, sans-serif; font-size: 0.938em; color: #CCC; margin: 0.25em 0 0 0; }
.entries-summary { font-size: 0.938em; margin: 0.25em 0 0 0; }

/* SINGLE ENTRY */
.entry { margin: 0 0 1.5em 0; }
.entry-heading { font-size: 1.8em; text-transform: uppercase; margin: 0 0 0.25em 0; }
.entry-subtitle { font-size: 1.125em; font-style: italic; margin: 0 0 0.5em 0; }
.entry-meta { font-family: Roboto, arial, helvetica, sans-serif; font-size: 0.75em; font-weight: 300; color: #aaa; text-transform: uppercase; }
    .entry-date, .entry-duration, .entry-download { margin-right: 1em; }
.entry-audio { margin: 0 0 1.5em 0; }
.entry-description { padding: 0 0 0.5em 0; }
.entry-shownotes { padding: 0 0 0.5em 0; }

.share { font-family: Roboto, arial, helvetica, sans-serif; font-size: 12px; list-style: none; line-height: 16px; margin: 0 0 1em 0; }
.share li { display: inline-block; margin: 0; }
.share li a { display: block; font-size: 12px; font-weight: bold; color: #FFF; padding: 4px 0.75em ; background: rgb(30,144,255); border-radius: 4px; }
.share li i { font-size: 16px; vertical-align: top; }
.share li a:hover { background: rgb(65,105,225); }
.share li a.rss { background: #FF6600; }
.share li a.facebook { background: #3B579D; }
.share li a.twitter { background: #00ACED; }
.share li a.linkedin { background: #007BB6; }

.podcast-bands-list { list-style: none; text-align: center; margin: 0 0 1.5em 0; }
.podcast-bands-list li { display: inline-block; padding: 0 0.5em 0.5em 0.5em; }
.podcast-bands-list li.first { display: block; }
.podcast-description { overflow: hidden; clear: both; }
.podcast-albums { overflow: hidden; clear: both;  }
.podcast-albums-list { list-style: none; margin: 0 0 1.5em 0; }
.podcast-albums-list li { float: left; width: 300px; margin: 0 0 1.5em 0; }
.podcast-albums-list img { float: left; margin: 0 10px 0 0; }

.albums-list { margin: 0; }
.albums-list dt { font-family: "Germania One", Roboto, arial, helvetica, sans-serif; font-size: 1em; font-weight: normal; }
.albums-list dd { margin: 0.25em 0 0 0; }
.album-label { font-size: 0.75em; font-style: italic; }
.album-artist { font-size: 0.85em; padding: 0 0 0.25em 0; }
.album-band { font-size: 0.85em; }

/* audio player */
.audiojs { position: relative; width: auto; height: 40px; overflow: hidden; font-family: monospace; font-size: 12px; background: #2646ea; background: rgba(38,70,234,0.3); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); }

.audiojs .play { background-position: -2px 1px; }
.audiojs .loading { background-position: -2px -29px; }
.audiojs .error { background-position: -2px -59px; }
.audiojs .pause { background-position: -2px -89px; }

.audiojs .scrubber { position: absolute; top: 0; left: 27px; right: 100px; width: auto; background: #000; margin: 13px; border: 0; overflow: hidden; }
.audiojs .loaded { background: #444; }
.audiojs .progress { background: #00BFFF; }
.audiojs .time { float: right; width: 93px; height: 40px; line-height: 40px; text-align: center; }

@keyframes prog {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* The element to apply the animation to */
.audiojs .progress {
    animation-name: prog;
     animation-duration: 12s;
    animation-iteration-count: infinite;
}

/* RANDOM SINGLE QUOTES */
.quote { padding: 0; border: 0; margin: 0 0 1.5em 0; }
.quote-text { font-size: 1.1em; color: #EEE; margin: 0 0 0.25em 0; }
.quote-author { font-family: Roboto, arial, helvetica, sans-serif; font-size: 0.75em; font-style: normal; color: #BBB; text-transform: uppercase; margin: 0; }
.quote-prompt { font-family: Roboto, arial, helvetica, sans-serif; font-size: 0.75em; font-style: italic; color: #757575; padding: 1em; border: 1px dotted #555; margin: 0; }

/* PAGINATION */
.pagination { list-style: none; text-align: center; margin: 0 0 1.5em 0; oveflow: hidden; clear: both; }
.pagination li { display: inline-block; margin-right: 4px; }
.pagination a { display: inline-block; width: 40px; height: 40px; line-height: 40px; color: #FFF; text-align: center; background: #000; border-radius: 4px; }
.pagination a:hover { background: #666; }
.pagination a.active { color: #666; background: #171717; }

/* TWEETS */
.tweets { font-family: arial, helvetica, sans-serif; font-size: 0.875em; list-style: none; margin: 0; }
.tweets li { padding: 0 0 1em 0; border-bottom: 1px dotted #666; margin: 0 0 1em 0; }
.tweets li:last-child { border: 0; margin: 0; }

/* BOTTOM */
.footer-heading { font-size: 1.25em; text-transform: uppercase; }
.footer-links { list-style: none; line-height: 2; margin: 0 0 1em 0; }
.footer-links li { display: inline-block; width: 150px; }
.social-icons { float: right; }
.social-icons a {  }
.legal { font-family: arial, helvetica, sans-serif; font-size: 0.75em; text-align: center; clear: both; }
.legal a { text-decoration: none; }
.legal a:hover { color: #B22222; }

/* MISC */
.map { margin: 0 0 1.5em 0; }
.map iframe { width: 100%; }

/* BUTTONS */
.center { text-align: center; clear: both; }
.btn { display: inline-block; font-family: Roboto, arial, helvetica, sans-serif; font-weight: 400; color: #FFF; line-height: 1; margin: 0; border: 0; border-radius: 4px; cursor: pointer; transition: 0.5s; }
a.btn { color: #FFF; text-decoration: none; line-height: 1; }
.btn:hover { background: #800000;  }
.btn-l { font-size: 18px; padding: 1em 1.5em; }
.btn-m { font-size: 15px; padding: 0.85em 1.25em; }
.btn-s { font-size: 11px; font-weight: bold; padding: 0.75em 1em; }
.btn-pri { background: #FF9900; background: -moz-linear-gradient(top, #FFA500, #FF6600); background: -webkit-linear-gradient(top, #FFA500, #FF9900); background: linear-gradient(top, #FFA500, #FF9900); }
.btn-pri:hover { background: #FF6600; background: -moz-linear-gradient(top, #FF9900, #FF3300); background: -webkit-linear-gradient(top, #FF9900, #FF3300); background: linear-gradient(top, #FF9900, #FF3300); }
.btn-sec { background: #A9A9A9; }
.btn-block { display: block; }

/* FORMS */
form { max-width: 600px; margin: 0 0 1em 0; overflow: hidden; }
.contact form { margin-bottom: 1.5em; }
.form-filter { float: right; margin: 0; }
form p { margin: 0 0 1em 0; }
fieldset { margin: 0 0 1.5em 0; }
legend { font-family: Roboto, arial, helvetica, sans-serif; font-size: 0.85em; color: #07A8B2; text-transform: uppercase; line-height: 1; margin: 0 0 1em 0; }
label { display: block; cursor: pointer; }
select { font-size: 16px; padding: 5px 0; background: #FFF; background: rgba(255,255,255,0.3); border: 0; }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"] { width: 100%; font-size: 16px; height: 40px; background: #FFF; background: rgba(255,255,255,0.3); border: 0; transition: 0.5s; }
textarea { width: 100%; height: 160px; font-size: 16px; background: #FFF; background: rgba(255,255,255,0.3); border: 0; }
input:focus,textarea:focus,select:focus { background: #FFF; transition: 0.5s; }

@media screen and (max-width: 960px) {

	h1 { font-size: 1.5em; }
    .top { padding: 1em; }
    #main { float: none; width: 100%; }
    #sidebar { float: none; width: 100%; }
    	#sidebar section { padding: 0; background: transparent; }
        
	.logo { float: none; text-align: center; margin: 0 0 1em 0; }
	.social-links { text-align: center; height: auto; margin: 0 0 1em 0; }
    #nav { float: none; }
    #nav-link { display: block; height: 40px; line-height: 40px; font-size: 1em; text-transform: uppercase; background: #800000; margin: 0; }
    #nav-link a { display: block; color: #FFF; text-decoration: none; padding: 0 1em; }
    .nav { display: none; }
    .nav { position: relative; width: 100%; float: none; line-height: 16px; background: #B22222; margin: 0; }
    .nav li { float: none; display: block; padding: 0; border-top: 1px solid #000; margin: 0; }
    .nav a { display: block; color: #FFF; padding: 0.75em 1em; background: #B22222; }
    .nav a:hover { background: #000; }
    .grid4 { float: left; width: 48%; margin-bottom: 1.5em; }
    .grid4-1 { margin-right: 4% 30px 0; clear: left; }
    .grid4-2 { margin-right: 0; }
    .grid4-3 { margin-right: 4%; clear: left; }
    .grid4-4 { margin-right: 0; }
    .grid6 { float: left; width: 30%; text-align: center; margin-bottom: 1.5em; }
    .grid6-1 { margin-right: 5%; clear: left; }
    .grid6-2 { margin-right: 5%; }
    .grid6-3 { margin-right: 0; }
    .grid6-4 { margin-right: 5%; clear: left; }
    .grid6-5 { margin-right: 5%; }
    .grid6-6 { margin-right: 0; }

	.grida { float: left; width: 48%; margin-bottom: 1.5em; }
	.grida-1 { margin-right: 4%; clear: left; }
	.grida-2 { margin-right: 0; }
	.grida-3 { margin-right: 4%; clear: left; }
	.grida-4 { margin-right: 0; clear: none; }
	.grida-5 { margin-right: 4%; clear: left; }
	.grida-6 { margin-right: 0; }

	.entry-heading { font-size: 1.5em; margin: 0 0 0.25em 0; }

}

@media screen and (max-width: 800px) {

	.grid3 { float: none; width: 100%; margin-bottom: 1.5em; }
    .grid3-1 { margin-right: 0; clear: left; }
    .grid3-2 { margin-right: 0; }
    .grid3-3 { margin-right: 0; }

}

@media screen and (max-width: 640px) {

	#content { padding: 10% 1em; }
	.grid2 { floar: none; width: 100%; margin-bottom: 1.5em; }
    .grid2-1 { margin-right: 0; }
    .grid4 { float: left; width: 100%; }
    .grid4-1 { margin-right: 0; clear: left; }
    .grid4-2 { margin-right: 0; }
    .grid4-3 { margin-right: 0; clear: left; }
    .grid4-4 { margin-right: 0; }
    
	.grida { float: left; width: 100%; margin-bottom: 1.5em; }
	.grida-1 { margin-right: 0; clear: left; }
	.grida-2 { margin-right: 0; }
	.grida-3 { margin-right: 0; clear: left; }
	.grida-4 { margin-right: 0; clear: none; }
	.grida-5 { margin-right: 0; clear: left; }
	.grida-6 { margin-right: 0; }
    
}

@media screen and (max-width: 480px) {

    .grid6 { float: left; width: 48%; text-align: center; margin-bottom: 1.5em; }
    .grid6-1 { margin-right: 4%; clear: left; }
    .grid6-2 { margin-right: 0; }
    .grid6-3 { margin-right: 4%; clear: left; }
    .grid6-4 { margin-right: 0; clear: none; }
    .grid6-5 { margin-right: 4%; clear: left; }
    .grid6-6 { margin-right: 0; }
    
    .form-filter { float: none; margin: 0 0 1.5em 0; }
    .form-filter select { width: 100%; }

}