/* ------- UPSETTING CSS ------- */
/* So you come back to mash up my code, hey? But I say be still! */


/* ------- FONTFACE DECLARATIONS ------- */
/* Police and CSS in the street, oh yeah. */

@font-face {
  font-family: notoserif-regular;
   src: url('fonts/notoserif-regular-webfont.woff2') format('woff2'),  url('fonts/notoserif-regular-webfont.woff') format('woff'), url('fonts/notoserif-regular-webfont.ttf') format('truetype');
   font-weight: normal; font-style: normal;
}
@font-face {
  font-family: notoserif-regular;
   src: url('fonts/notoserif-italic-webfont.woff2') format('woff2'),  url('fonts/notoserif-italic-webfont.woff') format('woff'), url('fonts/notoserif-italic-webfont.ttf') format('truetype');
   font-weight: normal; font-style: italic;
}
@font-face {
  font-family: notoserif-regular;
   src: url('fonts/notoserif-bold-webfont.woff2') format('woff2'),  url('fonts/notoserif-bold-webfont.woff') format('woff'), url('fonts/notoserif-bold-webfont.ttf') format('truetype');
   font-weight: bold; font-style: normal;
}
@font-face {
  font-family: notoserif-regular;
   src: url('fonts/notoserif-bolditalic-webfont.woff2') format('woff2'),  url('fonts/notoserif-bolditalic-webfont.woff') format('woff'), url('fonts/notoserif-bolditalic-webfont.ttf') format('truetype');
   font-weight: bold; font-style: italic;
}

@font-face {
  font-family: Clarendon-Bold;
   src: url('fonts/Clarendon-Bold-webfont.woff2') format('woff2'),  url('fonts/Clarendon-Bold-webfont.woff') format('woff'), url('fonts/Clarendon-Bold-webfont.ttf') format('truetype');
   font-weight: normal; font-style: normal;
}


/* -------- SITE TEXT -------- */
/* Not only by the words of my CSS, but the meditation of my style sheet. */

h1 {font-family: "Clarendon-Bold", Arial, Helvetica, sans-serif; color: #630; line-height: 32px; letter-spacing:-1px;}
h2 {font-family: "Clarendon-Bold", Arial, Helvetica, sans-serif; color: #630; padding: 3px 0 3px 0; margin-top:20px;} 
h3 {font-family: "Clarendon-Bold", Arial, Helvetica, sans-serif; color: #630; font-size:22px; line-height: 26px; }

.standard {font-family: 'notoserif-regular', Arial, Helvetica, sans-serif; font-size: 16px; color: #333; line-height: 24px;}
.standard a:link {text-decoration: none; color: #C00;}
.standard a:visited {text-decoration: none; color: #C00;}
.standard a:hover {text-decoration: none; color: #C00; border-bottom: 1px dotted #C00;}
.standard a:visited {text-decoration: none; color: #C00;}
.standard a:visited:hover {text-decoration: none; color: #C00; border-bottom: 1px dotted #C00;}

.newslead {font-family: 'notoserif-regular', Arial, Helvetica, sans-serif; font-size: 20px; color: #333; line-height: 26px;}
.newslead a:link {text-decoration: none; color: #C00;}
.newslead a:visited {text-decoration: none; color: #C00;}
.newslead a:hover {text-decoration: none; color: #C00; border-bottom: 1px dotted #C00;}
.newslead a:visited {text-decoration: none; color: #C00;}
.newslead a:visited:hover {text-decoration: none; color: #C00; border-bottom: 1px dotted #C00;}

.playlist /* Podcast section only */ {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000; font-weight: normal; line-height: 18px;}
.playlist a:link {text-decoration: none; color: #C00;}
.playlist a:visited {text-decoration: none; color: #C00;}
.playlist a:hover {text-decoration: underline; color: #C00;}
.playlist a:visited:hover {text-decoration: underline; color: #C00;}

.wordstext {font-family: 'notoserif-regular', Arial, Helvetica, sans-serif; font-size: 18px; color: #333; line-height: 26px;}

.wordscallout {font-family: "Clarendon-Bold", Arial, Helvetica, sans-serif; font-size: 26px; color: #900; font-weight: normal; line-height: 30px; letter-spacing:-1px;}


/* -------- DISCOGRAPHY TEXT -------- */
/* DIV tags in moonlight, font-weight at sunrise. */

/* Track listings in the discography */
.discotext {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333; font-weight: normal; line-height: 18px; padding-bottom:10px;}
.discotext a:link {text-decoration: none; color: #C00;}
.discotext a:visited {text-decoration: none; color: #C00;}
.discotext a:hover {text-decoration: none; color: #C00; border-bottom: 1px dotted #C00;}
.discotext a:visited:hover {text-decoration: none; color: #C00; border-bottom: 1px dotted #C00;}

/* Headlines in the discography */
.discohead {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: #630; font-weight: bold;}

/* Album titles in the discography */
.discotitle {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #630; font-weight: bold; line-height: 18px;}
.bogustitle {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #630; font-weight: bold; line-height: 18px;}

/* Matrix numbers in the discography */
.matrix {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #660000; font-weight: normal; margin:0;}

/* 7" single pages in the discography */
#singlehead {width: 520px; border-bottom: 1px solid #630; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #630; font-weight: bold; padding-bottom: 5px; margin-bottom:20px;}

/* Side navigation in the discography */
#sidemenuhead {width: 172px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #630; font-size: 14px; font-weight: bold; background-color: #D9CA91; padding: 5px 0 5px 8px; margin: 0 0 0 0;}

/* New discography entries */
.newdisco {font-family: Verdana, Arial, Helvetica, sans-serif; color: #660000; font-size: 11px; line-height: 16px; width: 164px; border: 1px solid #CCCCCC; padding: 6px; margin-top:20px;}
.newdisco a:link {text-decoration: none; color: #900;}
.newdisco a:visited {text-decoration: none; color: #900;}
.newdisco a:hover {text-decoration: none; color: #900; border-bottom: 1px dotted #900;}
.newdisco a:visited:hover {text-decoration: none; color: #900; border-bottom: 1px dotted #900;}


/* -------- MAGAZINE TEXT -------- */
/* You are the DIV tag, but I am the vampire! */

.mag {font-family: 'notoserif-regular', Arial, Helvetica, sans-serif; font-size: 16px; color: #333; line-height: 24px;}
.mag a:link {text-decoration: none; color: #900;}
.mag a:visited {text-decoration: none; color: #900;}
.mag a:hover {text-decoration: none; color: #900; border-bottom: 1px dotted #900;}
.mag a:visited {text-decoration: none; color: #900;}
.mag a:visited:hover {text-decoration: none; color: #900; border-bottom: 1px dotted #900;}

.maghead {font-family: "Clarendon-Bold", Arial, Helvetica, sans-serif; font-size: 32px; color: #333; margin-top:50px; margin-bottom:12px; line-height:32px;}

.magsubhead {font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size: 20px; color: #89322B; margin-bottom:20px;}

.magfirst {font-family: 'notoserif-regular', Arial, Helvetica, sans-serif; font-size: 20px; color: #333; line-height: 30px;}
.magfirst a:link {text-decoration: none; color: #C00;}
.magfirst a:visited {text-decoration: none; color: #C00;}
.magfirst a:hover {text-decoration: none; color: #C00; border-bottom: 1px dotted #C00;}
.magfirst a:visited {text-decoration: none; color: #C00;}
.magfirst a:visited:hover {text-decoration: none; color: #C00; border-bottom: 1px dotted #C00;}

.magcolumn {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000; font-weight: normal; line-height: 16px; padding: 0 10px 0 10px;}
.magcolumn a:link {text-decoration: none; color: #89322B;}
.magcolumn a:visited {text-decoration: none; color: #89322B;}
.magcolumn a:hover {text-decoration: none; color: #89322B; border-bottom: 1px dotted #89322B;}
.magcolumn a:visited:hover {text-decoration: none; color: #89322B; border-bottom: 1px dotted #89322B;}

.featurehead {font-family: Arial, Helvetica, sans-serif; color: #FFF; font-size: 16px; font-weight: bold; background-color: #89322B; padding: 3px 0 3px 6px; margin: 0 0 0 0;}

.columnhead {font-family: Arial, Helvetica, sans-serif; color: #630; font-size: 16px; font-weight: bold; background-color: #DED3BC; padding: 3px 0 3px 6px; margin: 0 0 0 0;}


/* -------- LAYOUT -------- */
/* There's a place called #bannerdisco, far, far away. */

#container {width:820px; margin:0 auto; background:#FFF;}

#content {overflow:hidden; width:760px; margin:0 auto; text-align:left; background:#FFF; clear:both;}

#intro {width:746px; margin:0 auto; text-align:left; padding:6px; margin-top:20px; margin-bottom:20px; background-color:#FDFAF7; border: 1px solid #E3C2A8; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;}
#intro a:link {text-decoration: none; color: #900;}
#intro a:visited {text-decoration: none; color: #900;}
#intro a:hover {text-decoration: none; color: #900; border-bottom: 1px dotted #900;}
#intro a:visited:hover {text-decoration: none; color: #900; border-bottom: 1px dotted #900;}

#bannermain {width:820px; height:145px; margin:0 auto; background: url("../images/layout/banner-main.png") no-repeat;}
#bannerdisco {width:820px; height:145px; margin:0 auto; background: url("../images/layout/banner-disco.png") no-repeat;}
#bannermag {width:820px; height:145px; margin:0 auto; margin: 0 0 30px 0; background: url("../images/layout/banner-mag.png") no-repeat;}
#bannerbio {width:820px; height:145px; margin:0 auto; background: url("../images/layout/banner-bio.png") no-repeat;}
#bannerpodcast {width:820px; height:145px; margin:0 auto; background: url("../images/layout/banner-podcast.png") no-repeat;}
#bannerwords {width:820px; height:145px; margin:0 auto; background: url("../images/layout/banner-words.png") no-repeat;}
#bannerabout {width:820px; height:145px; margin:0 auto; background: url("../images/layout/banner-about.png") no-repeat;}

#footer {width:820px; height:40px; margin-bottom:30px; background: url("../images/layout/footer.png") no-repeat;}

#wordscallout {padding: 8px; border: 1px solid #D9CA91; margin-bottom:20px; clear:both;}

#divider750 {width:750px; margin-top:20px; margin-bottom:10px; border-top: 1px dotted #CCC; clear:both;}

#divider520 {width:520px; margin-top:10px; margin-bottom:10px; border-top: 1px dotted #CCC; clear:both;}

.blank {display:block; float:left; width: 270px; height: 90px; color:#993300;} /* To ensure navigation is positioned properly */

.main {display:block; width:600px; height: 80px; margin-left:130px; padding-top:20px;} /* Blank DIV to position home page link on banners */

.photo {float: left; margin: 0px 12px 6px 0px;}

.discophoto {float:left; clear:both; margin: 0px 10px 5px 0px; border:solid 1px #EBEBEB;} /* For album covers in the discography */

.recordphoto {float:left; clear:both; margin: 0px 10px 5px 0px;} /* For records in the discography */


/* -------- MAGAZINE LAYOUT -------- */
/* Uptown DIV tags don't cry. */

#station {width:780px; height:90px; margin:0 auto; background: #0F9 url("../images/layout/station.png") no-repeat;}

#magcontainer {overflow:hidden; width:758px; margin:0 auto; background:#FFF; padding: 0 10px 0 10px; border:1px solid #89322B;} /*#EFEBE2*/

#magfront {display:block; float:left; width:520px; text-align:left; background:#FFF;}

#magfeature {float:right; width:210px; border: 2px solid #89322B; background:#F8F4E9; margin:50px 0 20px 10px;}

#magcolumn {float:right; width:210px; border: 2px solid #DED3BC; background:#FFF; margin: 0 0 10px 10px;}

#magcalloutleft {width:300px; float:left; margin:0px 30px 15px 0px; padding:8px; border-right: 6px solid #EFEBE2;  font-family: 'Clarendon-Bold', serif; font-size: 24px; color: #89322B; text-align:left; line-height: 28px; font-weight:bold;}

#magcalloutright {width:300px; float:right; margin:0px 0px 15px 30px; padding:8px; border-left: 6px solid #EFEBE2;  font-family: 'Clarendon-Bold', serif; font-size: 24px; color: #89322B; line-height: 28px; font-weight:bold;}


/* -------- DISCOGRAPHY LAYOUT -------- */
/* The padding is rough, the floating is tough, down here in #discobogus. */

#discocontent {overflow:hidden; width:780px; margin:0 auto; margin-bottom:30px; text-align:left; background:#FFF; clear:both;}

#discoheader {width:530px; padding:0px; margin-top:-8px; margin-bottom:10px; float:left;}

#discolisting {width:530px; padding: 8px 0 8px 0; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; float:left; clear:both;} /* To provide tidy track listings */

#discoinfo {width:530px; float:left; clear:both;}

#discobogus {width:530px; float:left; clear:both; border-bottom: 1px solid #CCC; margin-bottom:15px;} /* To provide DIVs that stack properly */

.sidemenu {width: 180px; border-right: 1px solid #D9CA91;}

.sidemenulast {width: 180px; border-bottom:none !important;}


/* -------- NAVIGATION -------- */
/* Row CSS man, row, keep on rowing your background-positions. */

a.disco {display: block; float:left; width: 120px; height: 27px; margin-left:272px; background: url("../images/nav/discography.png") 0 0 no-repeat; text-decoration: none;}
a:hover.disco {background-position: 0 -27px;}

a.mag {display: block; float:left; width: 90px; height: 27px; background: url("../images/nav/magazine.png") 0 0 no-repeat; text-decoration: none;}
a:hover.mag {background-position: 0 -27px;}

a.podcast {display: block; float:left; width: 80px; height: 27px; background: url("../images/nav/podcast.png") 0 0 no-repeat; text-decoration: none;}
a:hover.podcast {background-position: 0 -27px;}

a.bio {display: block; float:left; width: 100px; height: 27px; background: url("../images/nav/bio.png") 0 0 no-repeat; text-decoration: none;}
a:hover.bio {background-position: 0 -27px;}

a.words {display: block; float:left; width: 65px; height: 27px; background: url("../images/nav/words.png") 0 0 no-repeat; text-decoration: none;}
a:hover.words {background-position: 0 -27px;}

a.about {display: block; float:left; width: 60px; height: 27px; background: url("../images/nav/about.png") 0 0 no-repeat; text-decoration: none;}
a:hover.about {background-position: 0 -27px;}

a.main {text-decoration: none;}

.library {font-family: Verdana, Arial, Helvetica, sans-serif; color:#89322B !important; font-size: 12px; font-weight: bold; margin-top:15px;}
a.library {
 background: #F0F0F0; text-decoration: none; border: 1px solid #DBDAD2; padding:4px; margin-right:3px;
 -webkit-transition-property:color, background;
 -moz-transition-property:color, background;
 -ms-transition-property:color, background;
 -o-transition-property:color, background;
 -webkit-transition-duration: 0.1s, 0.1s;
 -moz-transition-duration: 0.1s, 0.1s;
 -ms-transition-duration: 0.1s, 0.1s;
 -o-transition-duration: 0.1s, 0.1s;
 -webkit-transition-timing-function: linear, ease-in;
 -moz-transition-timing-function: linear, ease-in;
 -ms-transition-timing-function: linear, ease-in;
 -o-transition-timing-function: linear, ease-in;
}
a:hover.library {background:#E8E7E1; border: 1px solid #BEBCAD !important;}
a:visited.hover.library {background:#E8E7E1; border: 1px solid #BEBCAD !important;}

.libraryactive {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000; font-size: 12px; font-weight: bold; padding:4px; margin-right:3px; background:#E8E7E1; border: 1px solid #BEBCAD;}

/* -------- DISCOGRAPHY NAVIGATION -------- */
/* Roast fish and unordered HTML lists. */

ul#discomenu {list-style-type: none; width: 200px; margin: 0; padding: 0;}
ul#discomenu ol {list-style-type: none; display: none; text-align: left; margin: 0; padding: 5px;}
ul#discomenu li, ul#menu a {font-size: 11px;}
ul#discomenu a:visited {color: #900; text-decoration: none;}
ul#discomenu li {line-height: 16px;}
ul#discomenu ol li {border-bottom: none;}
ul#discomenu a {text-decoration: none; color: #900;}
ul#discomenu a:hover {text-decoration: none; color: #900; border-bottom: 1px dotted #900;}
ul#discomenu a.active {color: #900;}