article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {
display: block;
}
audio,canvas,video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
html {
font-size: 100%;
/* 1 */  -webkit-text-size-adjust: 100%;
/* 2 */  -ms-text-size-adjust: 100%;
/* 2 */ 
}
html,button,input,select,textarea {
font-family: sans-serif;
}
body {
margin: 0;
}
a:focus {
outline: thin dotted;
}
a:hover, a:active {
outline: 0;
}
h1 {
margin: 0.67em 0;
font: normal 3em/1 "trashhandregular", Calibri, sans-serif;
}
h2 {
margin: 0.83em 0;
font: normal 2em/1 "trashhandregular", Calibri, sans-serif;
}
h2 small{
display: block;
margin-top: .5em
}
.main h2{
font: 1.5em/1 "Raleway", Calibri, sans-serif;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
margin: 1.33em 0 0;
background: #222;
color: #eee;
text-transform: uppercase;
display: inline-block;
font-size: .8em;
padding: 3px 10px
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.75em;
margin: 2.33em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b, strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000;
}
p, pre {
margin: 1em 0;
}
pre,code,kbd,samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
q {
quotes: none;
}
q:before, q:after {
content: '';
content: none;
}
small {
font-size: 75%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
dl,menu,ol,ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
menu, ol, ul {
padding: 0 0 0 40px;
}
nav ul, nav ol {
list-style: none;
list-style-image: none;
}
img {
border: 0;
/* 1 */ -ms-interpolation-mode: bicubic;
/* 2 */ 
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
form {
margin: 0;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
/* 1 */ padding: 0;
white-space: normal;
/* 2 */ *margin-left: -7px;
/* 3 */ 
}
button,input,select,textarea {
font-size: 100%;
/* 1 */  margin: 0;
/* 2 */  vertical-align: baseline;
/* 3 */  *vertical-align: middle;
/* 3 */ 
}
button,input {
line-height: normal;
/* 1 */ 
}
button,input[type="button"],input[type="reset"],input[type="submit"] {
cursor: pointer;
/* 1 */ -webkit-appearance: button;
/* 2 */ *overflow: visible;
/* 3 */ 
}
button[disabled], input[disabled] {
cursor: default;
}
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
/* 1 */ padding: 0;
/* 2 */ *height: 13px;
/* 3 */ *width: 13px;
/* 3 */ 
}
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */ -moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */ box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
/* 1 */ vertical-align: top;
/* 2 */ 
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr{
display:none;
}
img{
max-width: 100%;
}
::-moz-selection {
background: #43959B;
color: #fff;
text-shadow: none;
}
::selection {
background: #43959B;
color: #fff;
text-shadow: none;
}
/***************************************** positioning */
/*
a,
a:visited{
color: #1d181e;
}
a:hover,
a:focus{
background: rgba(0,0,0,.5);
color: #fff;
text-decoration: none;
}
*/
body{
position: relative;
font: 120%/1.4 "Raleway", Calibri, sans-serif;
display: table;
color: #1d181e;
width: 100%;
background: #1E1E1E;
}
#content{
position: relative;
border-left: solid 1px #000;
}
/********************************************** header */
.side{
width: 100%;
max-width: 350px;
float: left;
padding: 30px 50px 200px;
/*overflow: hidden;*/
}
header{
width: 100%;
position: relative;
}
header p a,
header p a:visited,
header p a:active{
text-decoration: none;
text-transform: lowercase;
font: 5em/1 "delicious_heavyregular", Calibri, sans-serif;
color: #DAC64B;
}
header p a:hover,
header p i:hover{
color: #fff;
outline: 0;
}
header p i{
font-style: normal;
color: rgba(251,251,251,.8);
}
header p span{
text-transform: lowercase;
display: block;
font: 1.2rem/1 "Raleway";
color: #ccc;
}
header nav .text a,
header nav .text a:visited{
font: 1.6em/.9 "trashhandregular", Calibri, sans-serif;
color: #888;
text-decoration: none;
}
header nav .text a:hover,
header nav .text .active a:hover,
header nav .text a:hover i,
header nav .text .active a:hover i{
background: #fff;
color: #000;
}
header nav .text a:focus i,
header nav .text .active a:focus i,
header nav .text .active a i,
header nav .text .active a:active i,
header nav .text a:focus,
header nav .text .active a:focus,
header nav .text .active a,
header nav .text .active a:active{
outline: 0;
background: #DAC64B;
color: #000;
}
header nav ul.text{
overflow: hidden;
margin: 1em 0 2em;
padding: 0;
width: 40%;
float: left;
}
header nav ul.text:nth-of-type(2){
width: 60%;
}
header nav .text li{
float: left;
display: block;
width: 100%;
position: relative;
margin-bottom: .3em;
}
header nav .text li i{
font-family: calibri;
font-size: 1.2rem;
position: absolute;
}
/******************************************* mailchimp */
.mcform p{
margin-bottom: 0;
clear: both;
color: #ccc;
}
.mcform span a,
.mcform span a:visited{
display: inline-block;
font-size: 1rem;
color: #43959B;
}
#mc .error b{
background: #f00;
color: #fff;
}
.negative, .mc_result,
.negative p, .mc_result p,
.negative a, .mc_result a,
.negative a:visited, .mc_result a:visited{
font-size: 1rem;
color: #000;
font-family: inherit;
}
.negative a,
.negative a:visited{
text-decoration: underline;
}
.negative p, .mc_result p{
margin-top: .5em;
}
.mc_result{
background: red;
color: #fff;
padding: 1em 2em;
margin: 0;
border-bottom: solid 1em #DAC64B;
border-left: solid 1em #DAC64B;
border-right: solid 1em #DAC64B;
}
.negative p,
.negative a,
.negative a:visited{
color: #fff;
}
.negative a:hover,
.negative a:focus{
color: #000;
}
.mc_result h3{
margin: 0;
font-size: .9rem;
text-transform: uppercase;
}
div.negative{
padding: 2em 6em;
margin: 0;
background: red;
color: #fff;
}
.mc_result{
background: #DAC64B;
}
.mc_result h3{
color: #222;
}
#mc input[type="email"]{
border: 0;
padding: 3px;
margin-right: 6px;
background: #ddd;
}
#mc input[type="email"]:focus{
background: #fff;
}
#mc input[type="submit"]{
background: #222;
color: #DAC64B;
border: 0;
padding: 3px 8px;
}
#mc input[type="submit"]:focus,
#mc input[type="submit"]:hover{
background: #000;
}
/********************************* front page sections */
/* tune */
#index .intro{
padding: 30px 3em;
}
.tune{
overflow: hidden;
color: #a2a1a1;
position: relative;
display: block;
max-width: 852px;
}
.tune section{
position: relative;
margin: 0 300px 0 3em;
}
.intro a,
.intro a:visited{
color: #bbb;
text-decoration: underline;
}
.intro a:hover,
.intro a:focus{
background: #DAC64B;
text-decoration: none;
color: #000;
}
#index .intro h2,
.latest h2,
.currently h2{
font: 2em/1.4 "trashhandregular", Calibri, sans-serif;
color: #43959b;
margin-bottom: 0;
}
#index .intro h2{
margin: 0 0 .5em;
}
.tune small{
color: #717171;
}
.tune h3{
font-size: 1.2em;
margin: 0;
line-height: 1.2;
}
#index .tune .rating{
position: absolute;
top: .7em;
left: -3em;
}
.tune iframe{
float: right;
width: 260px;
}
.tune section + a,
.tune section + a:visited{
background: rgba(0,0,0,.13);
color: #999;
max-width: 200px;
padding: 1em 1.5em;
text-transform: uppercase;
font-size: .6em;
margin: 2em 0 0 0;
overflow: hidden;
display: block;
text-align: center;
}
.tune section + a:hover,
.tune section + a:focus{
background: rgba(67,149,155,1);
color: #fff;
}
.tune .rating.voted:before,
.tune .rating.voted:after,
.tune .rating a:before,
.tune .rating a:after{
color: #43959b;
}
/* latest */
.latest{
padding: 2em 3em;
color: #a2a1a1;
overflow: hidden;
border-bottom: solid 1px #333;
}
.latest div{
position: relative;
/*overflow: hidden;*/
}
.latest h2,
.currently h2{
margin: 0 0 .5em;
}
.no-js .last12{
display: none;
}
.last12{
position: absolute;
left: 6em;
top: 0.7em;
margin: 0;
padding: 0;
}
.last12 li{
display: block;
float: left;
margin-right: 1em;
}
.last12 li a,
.last12 li a:visited{
display: block;
padding: 2px 4px;
color: #717171;
text-decoration: none;
}
.last12 li a:focus,
.last12 li a:hover{
color: #eee;
}
.last12 li a.active,
.last12 li a.active:visited{
background: #43959b;
color: #0e0402;
}
.article_container{
margin: 0 0 0 -2em;
max-width: 900px;
}
.latest article{
position: relative;
float: left;
width: 260px;
min-height: 400px;
/*overflow: hidden;*/
margin: 0 0 2em 2em;
}
.latest article a,
.latest article a:visited{
color: #ccc;
text-decoration: none;
}
.latest article div{
/*
position: absolute;
top: 0;
left: 0;
z-index: -1;
padding: 15px;
transition: .6s;
width: 230px;
height: 230px;
font-size: .8em;
*/
}
.latest article a img{
opacity: .8;
}
.latest article a:hover img,
.latest article a:focus img{
z-index: 2;
background: rgba(0,0,0,.8);
opacity: 1;
transition: .3s;
}
.latest article h2{
font: normal 1rem/1.3 "Raleway", Calibri, sans-serif;
margin: .25em 0;
color: #ccc;
}
.latest article p{
line-height: 1.3;
margin: 0;
padding: 0;
font-size: 1rem;
color: #777;
font-style: italic;
}
.latest p em{
/*
position: absolute;
bottom: 15px;
left: 15px;
*/
font-size: .8em;
color: #43959B;
}
/* currently */
.currently{
clear: both;
padding: 2em 3em;
position: relative;
overflow: hidden;
max-width: 1000px;
}
.currently p{
color: #717171;
position: absolute;
left: 16em;
top: 2.7em;
margin: 0;
padding: 0;
}
.currently ul{
margin: 0 0 0 -2em;
padding: 0;
list-style: none;
}
.currently li{
display: block;
margin: 0 0 2em 2em;
float: left;
width: 260px;
min-height: 380px;
color: #ccc;
}
.currently li span{
font-size: 1rem;
clear: both;
display: block;
}
#lastfm .blog li span{
color: #ccc;
line-height: 1.2;
}
#lastfm .blog li span em,
.currently li span em{
color: #777;
}
.currently a,
.currently a:visited{
color: #717171;
}
.currently a:hover,
.currently a:focus{
color: #eee;
}
.currently img{
width: 260px;
opacity: .8;
transition: .3s;
}
.currently img:hover,
.currently img:focus{
opacity: 1;
transition: .3s;
}
#content{
overflow: hidden;
background-color:#111;
background: transparent;
}
#index #content,
.pn,
.blog,
.content{
overflow: hidden;
/*
background-color:#111;
background-image: linear-gradient(30deg, #1e1e1e 12%, transparent 12.5%, transparent 87%, #1e1e1e 87.5%, #1e1e1e),
linear-gradient(150deg, #1e1e1e 12%, transparent 12.5%, transparent 87%, #1e1e1e 87.5%, #1e1e1e),
linear-gradient(30deg, #1e1e1e 12%, transparent 12.5%, transparent 87%, #1e1e1e 87.5%, #1e1e1e),
linear-gradient(150deg, #1e1e1e 12%, transparent 12.5%, transparent 87%, #1e1e1e 87.5%, #1e1e1e),
linear-gradient(60deg, #222 25%, transparent 25.5%, transparent 75%, #222 75%, #222), 
linear-gradient(60deg, #222 25%, transparent 25.5%, transparent 75%, #222 75%, #222);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
background-attachment: fixed;
background: transparent;
*/
background: #111;
}
/*********************************************** intro */
.intro{
background: #111;
overflow: hidden;
padding: 15px 1em 15px 5em;
color: #bbb;
border-bottom: solid 1px #333;
}
.intro h1{
display: none;
}
.intro p{
max-width: 600px;
}
/********************************************** lastfm */
#lastfm .blog{
padding: 3em 5em;
}
#lastfm .blog ul{
margin: 0;
padding: 0;
}
#lastfm .blog li{
width: 260px;
display: block;
float: left;
margin: 0 1em 1em 0;
font-size: .9em;
min-height: 380px;
}
/********************************** blog landing pages */
.category .blog,
#tags .blog,
#search .blog{
padding: 3em 5em;
}
.category .blog article,
#tags .blog article,
#search .blog article{
float: left;
margin-bottom: 2em;
/*overflow: hidden;*/
width: 100%;
max-width: 700px;
}
.category .blog article img,
#tags .blog article img,
#search .blog article img{
float: left;
margin-right: 2em;
width: 260px;
height: 260px;
display: block;
line-height: 260px;
text-align: center;
background: #111111;
}
.category .blog article a,
.category .blog article a:visited,
#tags .blog article a,
#tags .blog article a:visited,
#search .blog article a,
#search .blog article a:visited{
display: block;
color: #717171;
text-decoration: none;
overflow: hidden;
border: dotted 1px transparent;
}
.category .blog article a:hover,
.category .blog article a:focus,
#tags .blog article a:hover,
#tags .blog article a:focus,
#search .blog article a:hover,
#search .blog article a:focus{
border: dotted 1px #43959b;
}
.category .blog article a h2,
#tags .blog article a h2,
#search .blog article a h2{
color: #43959b;
font-weight: normal;
line-height: 1;
margin: 0;
}
.category .blog p em,
#tags .blog p em,
#search .blog p em{
font-size: .9rem;
color: #43959b;
}
/*********************************************** posts */
.post .blog{
background: fixed #d0bd41 url("/images/site/content_bg.jpg") 430px 0 no-repeat;
background-size: 100%;
}
.post .header{
height: 300px;
width: 100%;
}
.post article{
float:left;
margin-left:0;
min-width: 868px;
}
.post .main{
margin: 3em 5em 3em 9em;
max-width: 600px;
position: relative;
}
.post .box{
float:left;
width:260px;
margin: -2em 3em 0 0;
z-index: 1000;
position: relative;
}
.box img{
display: block;
width: 260px;
height: 260px;
line-height: 260px;
background: #eee url("https://theletter.co.uk/images/site/broken-record.png") 0 0 no-repeat;
text-align: center;
color: #222;
overflow: hidden;
}
.post .main .rating{
top: -.2em;
position: relative;
display: inline-block;
font: 1.3rem/1 "Raleway", Calibri, sans-serif;
}
.post .main h1{
max-width: 500px;
line-height: 1 !important;
margin-bottom: 5px;
color: #111;
}
.byline p{
margin: 0 0 3em;
font-size: .8em;
clear: both;
}
.post article a,
.post article a:visited{
background: yellow;
color: #070707;
background: #EDD75A;
text-decoration: none;
}
.post article a:hover,
.post article a:focus{
background: #fff;
}
.pn{
clear: both;
background: #111;
}
.pn_cat{
overflow: hidden;
clear: both;
margin: 100px 0 0;
}
.pn h2,
.pn_cat h2{
display: none;
}
.pn ul{
margin: 0;
padding: 0;
list-style: none;
}
.pn_cat ul{
overflow: hidden;
margin: 0 0 1em 9em;
padding: 0;
list-style: none;
max-width: 600px;
}
.newer{
float: right;
text-align: right;
}
.older{
float: left;
}
.pn_cat li{
width: 49%;
}
.pn strong{
color: #717171;
}
.pn strong,
.pn_cat strong{
display: block;
text-transform: uppercase;
line-height: 1.2;
}
.pn small,
.pn_cat small{
font-weight: normal;
font-style: italic;
display: block;
font-size: .6em;
margin: 5px 0 10px;
color: #333;
}
.pn small{
color: #43959b;
}
.pn small:before{
content: "Category: ";
}
.pn small:before{
color: #43959b;
}
.pn a,
.pn a:visited{
display: block;
text-decoration: none;
padding: 1em;
color: #a2a2a2;
}
.pn_cat a,
.pn_cat a:visited{
display: block;
text-decoration: none;
padding: 1em;
color: #070707;
background: #EDD75A;
}
.pn a:hover,
.pn a:focus{
color: #fff;
}
.pn_cat a:hover,
.pn_cat a:focus{
background: #fff;
}
.tags{
margin-top: 2em;
}
.tags ul,
.related ul{
margin: 0;
padding: 0;
list-style: none;
}
.tags a,
.tags a:visited,
.related a,
.related a:visited{
background: yellow;
color: #070707;
background: #cab52c;
text-decoration: none;
display: block;
float: left;
margin: 0 10px 5px 0;
}
.related a,
.related a:visited{
clear: both;
}
.related a em,
.related a:visited em{
font-size: .8rem;
display: inline-block;
margin: 0 0 0 .5em;
}
.tags a:hover,
.tags a:focus,
.related a:hover,
.related a:focus{
background: #EDD75A;
}
/*********************************** loading animation */
.loader{
overflow: hidden;
font-size: 15px;
text-indent: -9999em;
width: 11em;
height: 11em;
border-radius: 50%;
background: #fff;
background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
position: relative;
-webkit-animation: load3 1.4s linear;
animation: load3 1.4s linear;
}
.related.loader{
width: 5em;
height: 5em;
margin-top: 1em;
}
.loader.hidden{
z-index: -1;
display: none;
}
.loader.visible{
display: block;
z-index: 10;
position: absolute;
}
.loader:before {
width: 50%;
height: 50%;
background: #FFF;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
.loader:after {
background: #43959b;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
@-webkit-keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.related{
clear: both;
margin-top: 1em;
overflow: hidden;
}
.tags h3,
.related h3{
margin-bottom: .5em;
padding: 0 2px;
display: inline-block;
background: #222;
color: #DAC64B;
text-transform: uppercase;
font-size: .9rem;
}
/********************************************** voting */
.rating,
.rating a{
display: block;
position: relative;
z-index: 9;
text-align: center;
color: #fff;
font-weight: bold;
width: 2.5em;
background: transparent !important;
line-height: 1.2 !important;
}

.rating:before,
.rating:after,
.rating a:before,
.rating a:after{
position: absolute;
content: "";
left: 1.25em;
top: -4px;
width: 1.25em;
height: 2em;
z-index: -1;
background: #A7090D;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
transition: .3s;
}


.rating:after,
.rating a:after{
left: 0;
z-index: -1;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}

.rating a:before,
.rating a:after{
background: #ddd;
}

.rating a,
.rating a:visited{
display: block;
color: #333;
text-decoration: none;
line-height: 1.25em;
background: transparent;
}
.rating a:hover:before,
.rating a:hover:after{
background: #A7090D;
transition: .3s;
}
section .rating a:focus,
section .rating a:hover{
color: #fff;
transition: .3s;
}

.rating .note{
position: absolute;
background: purple;
width: 0;
height: 0;
overflow: hidden;
text-align: center;
}

.rating:hover .note{
height: 1em;
top: 0;
left: 3em;
width: 11em;
overflow: visible;
padding: 5px;
line-height: 1.1;
border-radius: 3px;
}

/*
.rating span,
.post .manual_vote,
#index .manual_vote,
#radio .manual_vote{
background: lightgreen;
color: darkgreen;
border-radius: 2px;
position: absolute;
width: 200px;
padding: 5px;
top: -2px;
left: 70px;
display: inline-block;
z-index: 1000;
}
.post .manual_vote{
padding: 5px 15px;
top: 365px;
left: 9em;
width: auto;
animation: fade .5s 1 forwards 3s;
}
#index .manual_vote{
padding: 5px 15px;
top: 130px;
left: 6em;
width: auto;
animation: fade .5s 1 forwards 3s;
}
#radio .manual_vote{
position: fixed;
padding: 5px 15px;
top: 0;
left: 0;
width: auto;
animation: fade .5s 1 forwards 3s;
}
*/
@keyframes fade {
0%{opacity: 1;}
100%{opacity: 0;}
}
.vote_notice,
.manual_vote{
background: lightgreen;
color: darkgreen;
position: fixed;
z-index: 5000;
top: 0;
left: 50%;
width: 200px;
margin-left: -100px;
text-align: center;
display: block;
padding: 5px 0;
animation: fade 1s 1 forwards 3s;
}
.positive{
background: lightgreen;
color: darkgreen;
padding: 1em 5em 2em 5em;
}
/*********************************************** radio */
#radio .content{
color: #777;
}
#radio .intro p{
float: left;
}
.controls.hidden{
display: none;
}
.js .controls{
display: inline-block;
overflow: hidden;
margin: 1em 1em 0;
padding: 0;
list-style: none;
}
.controls li{
display: block;
float: left;
text-align: center;
}
.controls a,
.controls a:visited{
position: relative;
padding: .25em .5em;
margin-right: .5em;
display: block;
text-decoration: none;
background: #ddd;
color: #000;
line-height: 1;
padding-left: 30px;
text-transform: uppercase;
font-size: .9em;
transition: .3s;
}
.controls a:hover,
.controls a:focus{
background: #ccc;
transition: .3s;
}
.controls a span{
font-size: 1.2em;
position: absolute;
left: 7px;
top: 3px;
}
.controls :last-child a{
padding-right: 30px;
padding-left: .5em;
}
.controls :last-child a span{
left: inherit;
right: 7px;
}
#radiolist{
margin: 0;
padding: 0;
}
#radiolist li.tune{
max-width: 100%;
border-bottom: solid 1px #333;
}
#radiolist .rating{
margin: 10px 0 0 2em;
position: absolute;
font-size: .9rem;
}
#radiolist .rating,
#radiolist .rating a{
width: 34px;
line-height: 22px !important;
}
#radiolist .rating:before,
#radiolist .rating:after,
#radiolist .rating a:before,
#radiolist .rating a:after{
left: 17px;
top: 0;
width: 17px;
height: 28px;
}
#radiolist .rating:after,
#radiolist .rating a:after{
left: 0;
}
#radiolist h3{
margin: 0;
font-size: 1em;
font-weight: normal;
}
#radiolist .load,
#radiolist .load:visited{
outline: 0;
display: block;
padding: .5em 5em;
border-left: solid 1px #111;
text-decoration: none;
color: #bbb;
}
#radiolist .load:focus,
#radiolist .load:hover{
background: #1E1E1E;
border-left: solid 1px #000;
color: #fff;
}
#radiolist li section iframe{
margin: 0 0 1em 3em;
}
#radiolist li section{
margin: 0 0 0 5em;
max-width: 815px;
}
.js #radiolist li section{
height: 100%;
}
#radiolist li section{
transition: .5s;
overflow: visible;
}
#radiolist li.hide section{
height: 0;
overflow: hidden;
transition: .5s;
}
#radiolist section a,
#radiolist section a:visited{
color: #43959B;
}
#radiolist section a:hover,
#radiolist section a:focus{
color: #fff;
}
.js .listen{
display: none !important;
}
#radiolist h3 .error{
color: red;
margin-left: 1em;
}
.no-js #radiolist h3{
font: normal 2em/1 "trashhandregular", Calibri, sans-serif;
padding: .5em 2.4em .25em;
}
/********************************************** social */
.social{
list-style: none;
margin: 0;
padding: 0; 
}
.social li{
display: block;
float: left;
position: relative;
margin-right: 1rem;
}
.social .note{
position: absolute;
bottom: 5em;
left: 0;
background: #F07301;
width: 0;
height: 0;
overflow: hidden;
text-align: center;
border-radius: 100px;
}
.social li:hover .note{
min-height: 90px;
width: 100px;
overflow: visible;
border: solid 10px #111;
padding: 15px 10px;
}
.social li:nth-of-type(2) .note{
background: #2DAAE1;
}
.social span{
font-size: 3em;
display: block;
color: #444;
}
.social a,
.social a:visited{
display: block;
text-decoration: none;
text-align: center;
color: #444;
}
.social li a span,
.social li a:visited span{
color: #444;
}
.social li:nth-of-type(1) a:focus,
.social li:nth-of-type(1) a:hover,
.social li:nth-of-type(1) a:focus span,
.social li:nth-of-type(1) a:hover span{
color: #F07301;
}
.social li:nth-of-type(2) a:focus,
.social li:nth-of-type(2) a:hover,
.social li:nth-of-type(2) a:focus span,
.social li:nth-of-type(2) a:hover span{
color: #2DAAE1;
}
.social li:nth-of-type(3) a:focus,
.social li:nth-of-type(3) a:hover,
.social li:nth-of-type(3) a:focus span,
.social li:nth-of-type(3) a:hover span{
color: #DAC64B;
}
.social{
clear: both;
}
.no-js .social li:nth-of-type(3) a{
display: none;
}
.js .social form{
position: fixed;
width: 100%;
max-width: 50%;
left: 25%;
top: 45%;
z-index: 2000;
display: none;
}
.social form.active{
display: block;
}
.js .social input[type="search"]{
width: 71%;
height: 40px;
padding: 0 2%;
font-size: 1rem;
float: left;
border: 0;
outline: none;
}
.js .social input[type="submit"]{
clear: none;
background: #DAC64B;
border: 0;
width: 25%;
font-size: .9rem;
height: 40px;
color: #111;
text-transform: uppercase;
text-align: center;
padding: 0;
margin: 0;
}
.js .social input[type="submit"]:hover,
.js .social input[type="submit"]:focus{
background: #C9B43E;    
}
.js .social form p{
margin: 0;
}
.js .social form small{
font-size: .7em;
color: #DAC64B;
display: block;
}
.js .social form a[title="close"],
.js .social form a[title="close"]:visited{
position: absolute;
top: -30px;
right: 0;
color: #fff;
}
.js .social form a[title="close"]:hover,
.js .social form a[title="close"]:focus{
color: yellow;
}
/******************************************* subscribe */
#subscribe #content form{
background: #DAC64B;
color: #222;
padding: 2em;
position: relative;
}
#subscribe #content form p{
color: #222;
}
#subscribe #content form label{
display: block;
color: #222;
margin-top: 1em;
}
#subscribe .content li span,
#subscribe .mcform span{
font-size: 2em;
display: block;
margin-bottom: 10px;
}
#subscribe .content{
padding: 3em 5em 5em;
overflow: hidden;
}
#subscribe .content h2,
#subscribe .content p{
margin: 0;
}
#subscribe .content p{
font-size: 1rem
}
#subscribe .content ul{
list-style: none;
margin: 1em 0 0;
padding: 0;
}
#subscribe .content li{
width: 49%;
float: left;
margin-bottom: 1em;
min-height: 100px;
}
#subscribe .content li span{
color: #fff;
font-size: 2em;
display: block;
margin-bottom: 10px;
}
#subscribe .content li a,
#subscribe .content li a:visited{
display: block;
padding: 1em 2em;
text-decoration: none;
color: #fff;
transition: .3s;
opacity: .7;
}
#subscribe .content li:nth-child(odd){
margin-right: 1%;
}
#subscribe .content li:nth-child(even){
margin-left: 1%;
}
#subscribe .content li.rss a{
background: #FF7900;
}
#subscribe .content li.twi a{
background: #2DAAE1;
}
#subscribe .content li a:hover,
#subscribe .content li a:focus{
opacity: 1;
transition: .3s;
}
.sending{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0, .6);
}
.sending i{
display: block;
height: 100px;
width: 50px;
margin: 80px auto;
background: #DAC64B;
-webkit-animation: rotation 1s infinite linear;
-moz-animation: rotation 1s infinite linear;
-o-animation: rotation 1s infinite linear;
animation: rotation 1s infinite linear;
border-radius: 100%;
}
@-webkit-keyframes rotation {
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(359deg);}
}

@-moz-keyframes rotation {
  from {-moz-transform: rotate(0deg);}
  to {-moz-transform: rotate(359deg);}
}

@-o-keyframes rotation {
  from {-o-transform: rotate(0deg);}
  to {-o-transform: rotate(359deg);}
}

@keyframes rotation {
  from {transform: rotate(0deg);}
  to {transform: rotate(359deg);}
}
/*********************************************** pulse */
.pulse{
background: #111;
padding: 30px 5em;
position: relative;
}
.pulse iframe{
width: 100% !important;
}
.pulse a,
.pulse a:visited{
color: #DAC64B;
}
/********************************************** tables */
table{
border-collapse: collapse;
font-size: .8em;
margin-bottom: 1em;
}
tr{
border-bottom: solid 1px #333;
}
th{
text-align: left;
}
td{
vertical-align: top;
padding: 10px 10px 10px 0;
line-height: 1;
}
/************************************************ misc */
img{
max-width: 100%;
}
ul.i{
padding: 0;
margin: 0;
list-style: none;
}
.i li{
margin-bottom: 3em;
clear: both;
overflow: hidden;
}
.i li img{
float: right;
margin-left: 1em
}
#best-albums-of-2013 .i p a,
#best-albums-of-2013 .i p a:visited,
a.buy,
a.buy:visited{
display: inline-block;
background: #A7090D !important;
color: #eee !important;
text-decoration: none;
font-size: .9em;
padding: .25em;
border-radius: 3px;
}
#best-albums-of-2013 .i p a:hover,
#best-albums-of-2013 .i p a:focus,
a.buy:focus,
a.buy:hover{
background: darkred !important;
}
.i h2{
margin-top: 0;
}
.post article ol{
margin: 0;
padding: 0;
}
section iframe{
width: 100%;
}
hr{
display: none;
}
blockquote{
text-align: left;
margin: 1em 100px 1em 0;
padding-left: 1.5em;
position: relative;
overflow: hidden;
font-style: italic;
border-top: dotted 1px;
border-bottom: dotted 1px;
width: 100%;
}
blockquote:before{
position: absolute;
top: 10px;
left: 0;
content: open-quote;
font: normal 2.5em/1 "trashhandregular", Calibri, sans-serif;
}
.no-js .js{
display: none;
}
.separator div{
width: 100%;
height: 25px;
display: block;
background-color: #DBCD53;
background-color: #43959b;
background-image: repeating-linear-gradient(45deg, transparent, transparent 50px, rgba(255,255,255,.5) 50px, rgba(255,255,255,.5) 70px);
-webkit-animation: barberpole 0.5s infinite linear;
-moz-animation: barberpole 0.5s infinite linear;
-o-animation: barberpole 0.5s infinite linear;
animation: barberpole 0.5s infinite linear;
transition: .3s;
}
@-webkit-keyframes barberpole {
from {
background-position: -50px 0;
}
to   {
background-position: 50px 0;
}
}
@-moz-keyframes barberpole {
from {
background-position: -50px 0;
}
to   {
background-position: 50px 0;
}
}
@-o-keyframes barberpole {
from {
background-position: -50px 0;
}
to   {
background-position: 50px 0;
}
}
@keyframes barberpole {
from {
background-position: -50px 0;
}
to   {
background-position: 50px 0;
}
}
.noresults,
.loadmore{
display: block;
background: rgba(251,251,251,.1);
text-align: center;
padding: 1em;
text-decoration: none;
color: #eee;
transition: .3s;
}
.loadmore:hover,
.loadmore:focus{
background: rgba(251,251,251,.2);
transition: .3s;
color: #fff;
}
.separator,
.noresults,
.loadmore{
clear: both;
}
.visuallyhidden{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.hiddentags{
display: none;
}
.top,
.top:visited{
clear: both;
background: #111;
border-top: dotted 1px #666;
display: block;
text-align: center;
color: #aaa;
text-transform: uppercase;
text-decoration: none;
font-size: .8em;
padding: 1em 0;
position: relative;
z-index: 100;
}
.top:focus,
.top:hover{
background: #222;
color: #fff;
}
.overlay.hidden{
display: none;
}
.overlay{
background: rgba(0,0,0,.7);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.archive,
.archive:visited{
overflow: hidden;
clear: both;
display: block;
font-size: .85em;
color: #666;
margin-top: 140px;
}
.archive:hover,
.archive:focus{
color: #999;
}
.numbers{
background: #bc0000;
display: inline-block;
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.4;
margin: 0;
font-size: 1.5em;
color: #fff;
font-weight: bold;
}
/*********************************************** fonts */
@font-face {
font-family: 'delicious_heavyregular';
src: url('/fonts/delicious-heavy-webfont.eot');
src: url('/fonts/delicious-heavy-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/delicious-heavy-webfont.woff') format('woff'),
url('/fonts/delicious-heavy-webfont.ttf') format('truetype'),
url('/fonts/delicious-heavy-webfont.svg#delicious_heavyregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'trashhandregular';
src: url('/fonts/trashhand-webfont.eot');
src: url('/fonts/trashhand-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/trashhand-webfont.woff') format('woff'),
url('/fonts/trashhand-webfont.ttf') format('truetype'),
url('/fonts/trashhand-webfont.svg#trashhandregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
    font-family: 'icomoon';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'),
         url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAqEAAoAAAAACjwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAABs8AAAbPfBJkWU9TLzIAAAfEAAAAYAAAAGAIIvzEY21hcAAACCQAAABMAAAATBpVzGVnYXNwAAAIcAAAAAgAAAAIAAAAEGhlYWQAAAh4AAAANgAAADYA3ngNaGhlYQAACLAAAAAkAAAAJAPkAfNobXR4AAAI1AAAAEwAAABMHwAB4W1heHAAAAkgAAAABgAAAAYAE1AAbmFtZQAACSgAAAE5AAABOUQYtNZwb3N0AAAKZAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lfh0BR0AAADKDx0AAADPER0AAAAJHQAABsYSABQBAQgPERMWGyAlKi80OT5DSE1SV1xhaWNvbW9vbmljb21vb251MHUxdTIwdUU2MDB1RTYwMXVFNjAydUU2MDN1RTYwNHVFNjA1dUU2MDZ1RTYwN3VFNjA4dUU2MDl1RTYwQXVFNjBCdUU2MEN1RTYwRHVFNjBFAAACAYkAEQATAgABAAQABwAKAA0AwADmAP8BDQErAZ8B+wKFA1MDbwOMA+sEkAVHBc38lA78lA78lA77lA73lGsV9yGL9wf3B4v3IYv3IfsH9wf7IYv7IYv7B/sHi/shi/sh9wf7B/chiwiL+GQV9weL6C6L+weL+wcuLvsHi/sHiy7oi/cHi/cH6Oj3B4sI+xT7BBWLnZmZnYudi5l9i3mLeX19eYt5i32Zi50I91SLFYudmZmdi52LmX2LeYt5fX15i3mLfZmLnQj7NPt6FWKjBae6vqrFi8WLvmynXAhicwV3q2ihYotii2h1d2sIDqv4FBX4VIuLK/xUiwWLaxX4VIuLK/xUiwWLaxX4VIuLK/xUiwUO+ET4NBX7hPuE+wT3BDs791T7VPfU99QFDuv4NBX31PtU+9T7VAUOy/g0Ffc0i4v8FPs0iwX3dPgUFfc0i4v8FPs0iwUO9wX3lBXIi75Zi02LTVhZTotNi1m9i8kIipsFi/cQ7+/3EIsIi0sFYItjem1thYWGhYaFkYyRi5GLCPe0ixXIi75Zi02LTVhZTotNi1m9i8kIipsFi/cQ7+/3EIsIi0sFYItjem1thYWGhYaFkYyRi5GLCA74hnkVeHhti3ieCDbgBWh1Yn1ei/sQiyfwi/cQi/cQ7+/3EIv3EIvwJ4v7EItefWJ1aAjgNgWeeItteHgI+6b4RhUzi0NDizOLMtND44vki9PTi+SL40PTMosIDviU+BMVeIJ3hnaIoJicoJOjd390g3OGeJ9wmGyLUYtcXItRi4OMg42DNI89tVjLgnuFeYt4CItnnmqneXqLe5B9k4uKi4uLiotZr2C7gYKJgoqBi4SLhYuEjZlhsmy5i2duXXtaiwiDi4KLg4y5bcN6xov3VYv19zSL9x+Lj4uQi4+fmp2emaAIDviP0BWLi4uLi4sI+y/3L/cv9y8Fi4uLi4uLjY2MjYyNjZGKkYaQCELUBYaQhYyFiYmKiYqJiYuLi4uLiwj7L/sv+y/3LwWLi4uLi4uJjYmMiYyFjYWKhoYIQkIFhoaKhY2FjImMiY2Ji4uLi4uLCPcv+y/7L/svBYuLi4uLi4mJiomKiYmFjIWQhgjUQgWQhpGKkY2NjI2MjY2Li4uLi4sI9y/3L/cv+y8Fi4uLi4uLjYmNio2KkYmRjJCQCNTUBZCQjJGJkYqNio2JjQgO9xSrFYv4FMuLi/tE9zT3NIv79Ps09zSL+0QFDvgU+DQVi/wUS4uL90T7NPs0i/f09zT7NIv3RAUOz/QVZotsbItli2aqbbCLsYupqYuwi7FtqmWLCEf3XRWLKQXLi8dyuF64XaRPi0sI7osFi/dO+yz3LPtOiwiL90IViykF93iL9077Tov7eAjtiwWL9677evd6+66LCA73lPh0Ffshi/sH+weL+yGL+yH3B/sH9yGL9yGL9wf3B4v3IYv3IfsH9wf7IYsI+xT7FBX3lIsFkIuPio+JCPsh+zj7Ifc4BY+Nj4yQiwhr+3QVi/dUBYuMi4uLjAjp+wEuLgWKjYuOi44I97RrFfuUiwWIi4iLiYwI5ua4VrjA5jAFiYqIi4iLCKurFYuIi4iKiQgu6On3AQWLiouLi4oIi/tUBQ73lPh0Ffshi/sH+weL+yGL+yH3B/sH9yGL9yGL9wf3B4v3IYv3IfsH9wf7IYsI9yf7SRWLiIuIi4iLJj/7B/sgi2CLZJdpoZGKkYuRi6+Lq5eln2qMb6GBqZCKkIuQi5KLkYuSjQhoknGqi7CLi4uLi4yVhZeIl4p3mX2ii6WLmY+YkpawXsNsyoiKkYqQi5GLta2ttYsIoYufgpl8nI+bkZqUhXl/fHuCm42Zj5mRgXx+fXyACA73lPh0Ffshi/sH+weL+yGL+yH3B/sH9yGL9yGL9wf3B4v3IYv3IfsH9wf7IYsIK/wUFXmLfZmLnYudmZmdi52LmX2LeYt5fX15iwjjixWLzVXBSYsIi7sF6IvWQIsuCFuLBeuLFYvFdcFitGK0VaFRiwiLuwXSi81wvVm9WaZJi0QIW4sFDviUFPiUFYsMCgAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmDgHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYO//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAAHJ/yNVfDzz1AAsCAAAAAADP3xuoAAAAAM/fG6gAAP/gAgEB4AAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAA//8CAQABAAAAAAAAAAAAAAAAAAAAEwAAAAAAAAAAAAAAAAEAAAACAAAAAgAAIAIAAAACAABgAgAAQAIAAAACAAAAAgAAAAIAAAECAACAAgAAoAIAAAACAAAAAgAAAAIAAAAAAFAAABMAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwBpAGMAbwBtAG8AbwBuAFYAZQByAHMAaQBvAG4AIAAxAC4AMABpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuAFIAZQBnAHUAbABhAHIAaQBjAG8AbQBvAG8AbgBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
    content: "\e606";
}
.icon-quotes-left:before {
    content: "\e605";
}
.icon-menu:before {
    content: "\e601";
}
.icon-sad:before {
    content: "\e600";
}
.icon-close:before {
    content: "\e608";
}
.icon-checkmark:before {
    content: "\e602";
}
.icon-play:before {
    content: "\e603";
}
.icon-pause:before {
    content: "\e604";
}
.icon-previous:before {
    content: "\e609";
}
.icon-next:before {
    content: "\e60a";
}
.icon-mail:before {
    content: "\e60c";
}
.icon-twitter:before {
    content: "\e607";
}
.icon-twitter2:before {
    content: "\e60d";
}
.icon-feed:before {
    content: "\e60b";
}
.icon-feed2:before {
    content: "\e60e";
}

@media screen and (min-height: 530px) and (min-width: 1450px){

#content{
margin-left: 450px;
}
.side{
width: 450px;
}
header{
width: 350px;
position: fixed;
height: 100%;
}

.post .main .rating{
position: absolute;
left: -3em;
top: .5em;
}

}






@media screen and (max-width: 1655px) {

body{
/*border-top: solid 10px lime;*/
}

.post .main{
margin: 3em 5em 3em 7em;
}

.post .box{
margin: -2em 1em 0 0;
}

.post article{
min-width: 1px;
width: auto;
}

.pn_cat ul{
margin-left: 7em;
}

/*
.post article{
float:left;
margin-left: 0;
}

.post .main{
margin: 3em 5em 3em 10em;
max-width: 600px;
position: relative;
}
*/

}





@media screen and (max-width: 1580px) {

body{
/*border-top: solid 10px cyan;*/
}

.post .main{
margin: 3em 2em 3em 5em;
}

.pn_cat ul{
margin-left: 5em;
}

.post .main .rating{
left: -3em;
}

}















@media screen and (max-width: 1490px) {

body{
/*border-top: solid 10px orange;*/
}

.post .main{
margin: 0 2em 3em 3em;
}

.post .main .rating{
position: relative;
left: 0;
top: -10px;
bottom: 0;
right: 0;
}

.pn_cat ul{
margin-left: 3em;
}

}














@media screen and (max-width: 1450px) {

body{
/*border-top: solid 10px purple;*/
}

#content{
margin-left: 20%;
}

.post .main{
padding-right: 1em;
}

.side{
width: 100%;
max-width: 250px;
}

header > p{
font-size: 80%;
margin-bottom: 3em;
}

header nav ul.text,
header nav ul.text:nth-of-type(2){
float: none;
width: auto;
margin: 0;
}

header nav ul.text:nth-of-type(2){
margin: 0 0 2em;
}

.last12{
left: 4.5em;
}

.last12 li{
margin-right: .25em;
}

.post .blog{
background-position: 250px 0;
}

}





@media screen and (max-width: 1370px) {

body{
/*border-top: solid 10px #fff;*/
}

.post .box{
width:auto;
margin: 0 3em 3em;
}

}













@media screen and (max-width: 1340px) {

body{
/*border-top: solid 10px #ddd;*/
}

.tune iframe{
float: none;
width: 100%;
margin-bottom: 1em;
}

#radio iframe{
height: 70px;
float: none;
}

#radiolist li section{
width: 80%;
}

#radiolist li section iframe{
margin: 0;
}

#index .tune{
max-width: 560px;
}

.tune section{
position: relative;
margin: 0 0 0 3em;
}

.pn_cat ul{
margin: 0 3em 1em;
}

.pn li{
width: 49%;
}

#lastfm .blog li{
width: 50%;
margin: 0 0 1em 0;
min-height: 370px;
}

#lastfm .blog li span{
display: block;
clear: both;
max-width: 260px;
}

#lastfm .blog li img{
max-width: 260px;
margin-right: 1em;
}

#subscribe .content li:nth-child(odd){
float: left;
clear: left;
}
#subscribe .content li:nth-child(even){
float: right;
clear: right;
}

}




@media screen and (max-width: 1250px) {

body{
/*border-top: solid 10px red;*/
}

.js .controls{
margin: 0 0 1em;
display: block;
clear: both;
}


}








@media screen and (max-width: 1050px) {

body{
/*border-top: solid 10px brown;*/
}

.intro{
padding: 15px 1em;
}

.intro p{
max-width: 100%;
}

div.positive{
padding: 1em;
}

.category .blog,
#tags .blog,
#search .blog,
#lastfm .blog{
padding: 2em 1em;
}

.article_container,
.currently,
.currently ul{
margin: 0;
}

.currently ul{
max-width: 560px;
}

.latest article{
width: 47.5%;
height: 50%;
max-width: 260px;
max-height: 260px;
margin: 0 5% 3% 0;
}

.latest article:nth-of-type(even){
margin-right: 0;
}   

.latest article div{
padding: 0;
width: 100%;
}

article div img{
max-width: 100% !important;
width: 100%;
}

.currently li{
display: block;
float: left;
min-height: 320px;
width: 47.5%;
margin: 0 5% 3% 0;
}

.currently li:nth-of-type(even){
margin-right: 0;
}
    
.currently h2{
margin-bottom: 0
}    
    
.currently p{
position: relative;
left: inherit;
top: inherit;
margin: 0 0 1em;
}

#index .intro{
padding: 30px 1em;
}

.positive{
background: lightgreen;
color: darkgreen;
padding: 1em;
}

.currently,
.latest{
padding: 2em 1em;
}

#subscribe .content{
padding: 1em;
}
#subscribe .content li{
width: 100%;
float: none;
}
#subscribe .content li:nth-child(odd){
margin-right: 0;
}
#subscribe .content li:nth-child(even){
margin-left: 0;
}
.pulse{
padding: 0 50px;
}

#radiolist li section{
width: 70%;
}


}











@media screen and (max-width: 960px) {

body{
/*border-top: solid 10px crimson;*/
}

.side{
width: 230px;
padding: 0 1em;
}

header p a,
header p a:visited,
header p a:active{
font-size: 4.5em;
}

.post .box{
margin: 0 1em 2em;
}

.post .main{
margin: 0 1em;
}

.post .main ol,
.post .main ul{
margin: 0 0 1em 1.5em;
}

.pn_cat ul{
margin: 0 1em 1em;
}

.latest h2{
margin: 0;
}

.last12{
position: relative;
left: inherit;
top: inherit;
margin: 0 0 1em;
overflow: hidden;
padding: 0;
clear: both;
}


}








@media screen and (max-width: 860px) {

body{
/*order-top: solid 10px lightblue;*/
}

h1{
font-size: 2.5em;
}

.category .blog article img,
#tags .blog article img,
#search .blog article img{
width: 200px;
height: 200px;
margin-right: 1em;
line-height: 200px;
}

#lastfm .blog li span{
max-width: 200px;
}

#lastfm .blog li img{
max-width: 200px;
}

.social form{
max-width: 90%;
left: 5%;
}

#radio iframe{
height: 140px;
width: 100%;
}

#radiolist h3{
width: auto;
}

.latest article{
width: 100%;
max-width: 260px;
max-height: 260px;
margin: 0 0 3% 0;
}

.currently li{
width: 100%;
margin: 0 0 3% 0;
line-height: 1.2;
min-height: 350px;
}

.currently li span{
font-size: 1rem;
}

#lastfm .blog li span{
max-width: 260px;
}

#lastfm .blog li img{
max-width: 260px;
margin: 0;
}

#lastfm .blog li{
width: 100%;
}

.category .blog article img,
#tags .blog article img,
#search .blog article img{
float: none;
width: 260px;
height: 260px;
margin: 0 0 1em;
line-height: 260px;
}

.rating{
font-size: 1rem !important;
}
.rating,
.rating a{
width: 34px;
}
.rating:before,
.rating:after,
.rating a:before,
.rating a:after{
left: 17px;
top: -4px;
width: 17px;
height: 30px;
}
.rating a,
.rating a:visited{
line-height: 1.25em;
}
.rating:after,
.rating a:after{
left: 0;
}












.header{
background-position: 50% 0 !important;
}

#index .intro,
.latest,
.currently{
padding: 1em;
}

.post .blog{
background-position: 0 350px;
}

.side{
float: none;
width: 100%;
height: 95px;
padding: 0 0 0 1em;
overflow: visible;
}
    
#content{
margin: 0;
}

.side nav{
width: 100%;
position: absolute;
top: 0;
left: -1000px;
transition: .2s;
}

.side nav.display{  
left: 0;
top: 0;
margin: 0;
padding: 15px 20px;     
z-index: 900;
min-height: 1px;
min-width: 100%;
background: rgba(0,0,0,.9);
outline: dotted 1px #DAC64B;
transition: .2s;
}

/*
.mcform{
width: 100%;
position: absolute;
bottom: 0;
left: -1000px;
}
*/ 

.menu,
.menu:visited{
display: block;
position: absolute;
top: 30px;
right: 20px;
font-size: 1.5em;
text-decoration: none;
color: #ccc;
padding: 5px 10px;
background: #343434;
line-height: 1.4;
}

.menu:hover,
.menu:focus{
background: #444;
color: #fff;
outline: 0;
}

.category article,
#lastfm .blog li,
#tags article,
#search article{
width: 47.5% !important;
margin: 0 5% 3% 0;
}

.category article img,
#lastfm .blog li img,
#tags article img,
#search article img{
width: 100% !important;
height: 100% !important;
}

.category article:nth-of-type(even),
#lastfm .blog li:nth-of-type(even),
#tags article:nth-of-type(even),
#search article:nth-of-type(even){
margin-right: 0;
}

#lastfm .blog li{
min-height: 300px;
}

.latest article{
width: 47.5%;
height: 50%;
max-width: 260px;
max-height: 260px;
margin: 0 5% 3% 0;
}

.latest article:nth-of-type(even){
margin-right: 0;
}   

.latest article div{
padding: 0;
width: 100%;
}

.currently li{
display: block;
float: left;
min-height: 320px;
width: 47.5%;
margin: 0 5% 3% 0;
}

.currently li:nth-of-type(even){
margin-right: 0;
}
    
.currently h2{
margin-bottom: 0
}    
    
.currently p{
position: relative;
left: inherit;
top: inherit;
margin: 0 0 1em;
}

.pn li:nth-of-type(1),
.pn_cat li:nth-of-type(1){
margin-right: 0;
}

.table_overflow table{
table-layout:fixed;
width:100%;
word-wrap:break-word;
}

















#content{
clear: both;
}

header p a,
header p a:visited,
header p a:active{
font-size: 3.5em;
}

h2{
font-size: 1.6em;
}

#radio #content ul{
font-size: 90%;
}

/*
.side{
height: 142px;
}
*/

/*
.menu,
.menu:visited{
display: block;
position: absolute;
top: 130px;
left: 0;
right: inherit;
text-align: center;
font-size: 1.2em;
padding: .25em 5%;
width: 90%;
height: 26px;
line-height: 1;
}
*/

.close,
.close:visited{
position: absolute;
top: 15px;
right: 10px;
font-size: 1.2em;
padding: .25em 5%;
color: #ccc;
text-decoration: none;
}
    
.close:hover,
.close:focus{
color: #eee;
}

#radiolist .rating{
margin: 10px 0 0 10px;
}

#radiolist li section{
margin: 0 auto;
width: 94%;
padding: 0 3%;
}

#radiolist .load,
#radiolist .load:visited{
padding: .5em .5em .5em 3em;
}

.i li img{
float: none !important;
margin: 0 0 1em !important;
}



}




















@media screen and (max-width: 340px) {

body{
/*border-top: solid 10px yellow;*/
}

h1{
font-size: 200%;
}

.related{
margin-bottom: 1em;
}

.latest article{
width: 100%;
max-width: 260px;
max-height: 260px;
margin: 0 0 3% 0;
}

.currently li{
width: 100%;
margin: 0 0 3% 0;
line-height: 1.2;
min-height: 350px;
}

.category .blog article,
#lastfm .blog li,
#tags .blog article,
#search .blog article{
width: 100% !important;
max-width: 260px;   
}

.category .blog article img,
#tags .blog article img,
#search .blog article img{
float: none;
width: 100%;        
max-width: 260px;
height: 260px;
margin: 0 0 1em;
line-height: 260px;
}

table{
font-size: .7em !important;
}

.post .box{
margin: 0 1em;
}

.post .box img{
width: 100%;
height: 100%;
max-width: 260px;
}

.js .controls{
font-size: 85% !important;
}
.controls a span{
left: 3px;
}
.controls :last-child a{
padding-right: 20px;
padding-left: 5px;
}
.controls :last-child a span{
right: 3px;
}
.controls a,
.controls a:visited{
padding-left: 20px;
}

.pulse{
padding: 0 10px;
}

.pulse iframe{
width: 340px !important;
}

.tune section{
position: relative;
margin: 0;
}

#index .tune .rating{
position: relative;
top: 0;
left: 3px;
height: 40px;
}

.header{
height: 150px !important;
background-size: auto 100% !important;
}

.loader{
font-size: 10px;
width: 150px;
height: 150px;
}

.js .social form{
max-width: 90%;
left: 5%;
}

.js .social form input,
.js .social form input[type="search"]{
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
-webkit-appearance: none;
}

.i li img{
float: none !important;
margin: 0 0 1em !important;
}

}
