/* songlight 2, (c) 2015 dylan harris, licensed by GPL 3 
   mind you anyone would be daft to reuse this! :-) */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,time,mark,audio,video { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; }
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote::before,blockquote::after,q::before,q::after { content:'';content:none; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse;border-spacing:0; }
table, tr, td, thead, tbody { border-width:0; }
tr, td { vertical-align:top; }

.mod::after, .section::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

body
{   font: normal 100%/1.25 "Lucida Sans", Helvetica, Arial, sans-serif;
    font-stretch: normal; padding: 1em; overflow: auto; background-color: black; border-color: black;
	color: gray; height: 100%; letter-spacing: -0.015em; overflow-y: scroll; text-rendering: optimizeLegibility;
    font-variant-ligatures: common-ligatures; font-feature-settings: "kern"; font-kerning: normal; }

@media print
{ body { font: normal 11pt/1.25 "Lucida Sans", Helvetica, Arial, sans-serif; } }
@media screen and (max-width: 768px)
{ body { font: normal 95%/1.23 "Lucida Sans", Helvetica, Arial, sans-serif; } }
@media screen and (max-width: 668px)
{ body { font: normal 90%/1.20 "Lucida Sans", Helvetica, Arial, sans-serif; } }
@media screen and (max-width: 590px)
{ body { font: bold 85%/1.18 "Lucida Sans", Helvetica, Arial, sans-serif; } }
@media screen and (max-width: 520px)
{ body { font: bold 80%/1.15 "Lucida Sans", Helvetica, Arial, sans-serif; } }
@media screen and (max-width: 460px)
{ body { font: bold 75%/1.10 "Lucida Sans", Helvetica, Arial, sans-serif; } }
@media screen and (max-width: 400px)
{ body { font: bold 70%/1.05 "Lucida Sans", Helvetica, Arial, sans-serif; } }

table { font-size:inherit; font-size: 100%; }
select, input, textarea { font-size: 99%; font-family: sans-serif; }
a {	transition: color 0.1s linear;
    text-decoration: none; font-stretch: condensed; color: #989898; }
a:hover { color: silver; }
a:focus { outline: none; }
sup { vertical-align: super; font-size: smaller; }
sub { vertical-align: sub; font-size: smaller; }


input.text, input[type=text], p, ul, ol { margin-bottom: 1em; }
abbr[title], dfn[title]
{	border-bottom: 1px dotted #666;
	border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
	cursor: help; }
hr, .skip, .ineffable { left: -1000em; overflow: hidden; position: absolute; top: 0; width: 0; }

img, embed, object, video { max-width: 100%; border-color: black; }

table, tr, td, thead, tbody { border-spacing: 0; border-width: 0; }
tr, td { vertical-align: top; }

h1, h2, h3, h4, h5, h6
{   color: silver; margin-bottom: 0.8em; margin-top: 0; font-weight: normal; font-size: 100%; }

h1 { font-size: 150%; letter-spacing: 0.25em; font-family: "Lucida Sans", Helvetica, Arial, sans-serif; font-weight: 200; font-variant-ligatures: discretionary-ligatures; }
h2 { font-size: 130%; letter-spacing: 0.2em; }
h3 { font-size: 110%; letter-spacing: 0.1em; }
h4 { font-size: 105%; }
h5 { font-size: 95%; }
h6 { font-size: 90%; }
p { margin-top: 0; margin-bottom: 0.4em; }
em { text-decoration: none; }
ol,ul { padding: 0; padding-left: 2.5%; margin: 0; margin-bottom: 0.4em; }
ul { list-style-type: circle; }
ol { list-style-type: decimal; }
li { padding: 0; margin: 0; padding-left: 0; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: silver; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: white; }

cite { font-style: normal; }

.choice { width: 20%; max-width: 160px; margin: 0 auto; float: right; font-size: 90%; }
.shot, .image, .front, .blog, .terms, .index, .general, .log, .products, .music, .poem, .wurm, .podcast, .potato, .sampled, .thumb, .chewed, .sa, .banner
{ max-width: 80%; min-width: 125px; margin: 0 auto; position: relative; float: left; }
.shot { max-width: 78%; padding-right: 2%; }
.clover { width: 100%; min-width: 125px; margin: 0 auto; position: relative; }

@media screen and (min-width: 1300px) {
  .choice { width: 15%; max-width: 250px; }
  .site { margin: 0 auto; max-width: 1300px; }
  .shot, .image, .front, .blog, .terms, .index, .general, .log, .products, .music, .poem, .wurm, .podcast, .potato, .sampled, .thumb, .chewed, .sa, .banner
  { width: 85%; max-width: 1000px; } }
@media screen and (min-width: 1000px) { .clover { max-width: 1000px; } }
@media screen and (max-width: 520px) { h1, h2, h3, h4, h5, h6 { font-weight: bold; } }

.image img, .shot img, .general img, .thumb img, .chewed img, .sa img, .blog img, .products img, .banner img { padding: 0.5em; }
.thumb img { height: 150px; }
.sa img { width: 200px; }
.image img { height: 100px; }

.image a:hover img, .front a:hover img
{ transform: scale(1.02); }

.thumb a:hover img, .sa a:hover img
{ transform: scale(1.01); }

.image h1, .thumb h1, .chewed h1, .sa h1, .banner h1 { margin: 0em 1% 2em 0; }
.image h3, .thumb h3, .chewed h3, .sa h3, .banner h3 { margin: 1em 0 0 0; }
.shot h1 { margin: 0em 1% 2em 1%; }

.index p { margin: 0em 1%; text-align: justify; }
.index h1 { margin: 0 1%; }
.index h2 { margin: 1.5em 1% 0 1%; }
.index h3, .index h4 { margin: 1.5em 1% 0 1%; }
.index h5 { margin: 1em 1% 0 1%; font-size: 90%; }
.index h6 { margin: 1em 1% 0 1%; font-size: 80%; }

.products p { margin: 0em 1% 0.5em 1%; }
.products h1 { text-align: left; margin-left: 1%; }

.music h1 { text-align: left; margin-left: 1%; margin-bottom: 1em; }

.sampled img { padding-top: 0.5em; padding-bottom: 0.5em; }

.blog h1, .general h1, .log h1, .podcast h1, .sampled h1, .products h1, .terms h1 { margin-left: 1%; margin-bottom: 1em; }
.blog p, .general p, .log p, .podcast p, .sampled p, .products p, .terms p { margin: 0em 1% 0.5em 1%; }
.blog p, .products p, .terms p { text-align: justify; }
.blog blockquote  { margin: 0em 5% 0.5em 5%; }
.blog ol, .blog ul, .blog li  { margin: 0em 1% 0.2em 1%; text-align: justify; }
.terms ol, .terms ul, .terms li  { margin: 0 1% 0 0; text-align: justify; }
.general h2, .general h3, .general h4, .general h5, .general h6 { margin: 0.8em 0 0 1%; }
.blog h2, .blog h3, .blog h4, .blog h5, .blog h6 { margin: 0.8em 0 0 1%; }
.terms h2, .terms h3, .terms h4, .terms h5, .terms h6 { margin: 0.8em 0 0 1%; }
.log td, .sampled td { padding: 1% 0.25em; }
.log h1, .sampled h1 { text-align: left; }
.blog td { padding-right: 1em; padding-left: 0.5em; font-size: 90%; width: 25%; vertical-align: top; }
.blog td p { margin: 0; }

.poem p, .poem h1, .poem h2, .poem h3, .poem h4, .poem h5, .poem h6 { text-align: left; }
.poem h1 { margin: 2% 10% 4% 2%; }
.poem p, .poem h2  {  margin: 2% 10% 2% 2%; }
.poem h3, .poem h4, .poem h5, .poem h6 { margin: 2% 10% 0 2%; }
.poem h3, .poem h4 { color: gray; }
.poem h3 + p, .poem h4 + p { margin: 0 10% 0 2%; }
.poem p { letter-spacing: 0.02em; line-height: 125%; margin-bottom: 1.25em; }

.potato td { padding: 1% 0.25em; }
.potato h1 { text-align: left; margin-left: 1%; margin-bottom: 1.25em; }
.potato p { margin: 0em 1% 0.5em 1%; text-align: justify; }

.vispo-left { letter-spacing: 0.05em; width: 40%; font-size: 90%; }
.vispo-centre { letter-spacing: 0.02em; width: 60%; font-size: 90%; }

.inline_illustration_left { float: left; padding: 0.4em 1em 1em 0; }
.inline_illustration_right { float: right; padding: 0.4em 0 1em 1em; }
img.inline_illustration_left { float: left; padding: 0.4em 1em 0 0; }
img.inline_illustration_right { float: right; padding: 0.4em 0 0 1em; }
.illustration { float: none; padding: 1em 0em 1em 0em; display: block; margin-left: auto; margin-right: auto; }
.inline_product { float: left; padding: 0.4em 1em 0 0; }
.choice .illustration { float: none; padding: 1em 0em 1em 0em; display: block; margin-left: auto; margin-right: 0; }
.products .illustration { float: none; padding: 1em 0em 1em 0em; display: block; margin-left: 0; margin-right: auto; }

.artsego, .corrupt { text-align: right; font-style: normal; font-size: 90%; color: #666666; }
h1.artsego, h1.corrupt { text-align: right; font-style: italic; }

@media screen and (max-width: 520px)
{ h1.artsego, h1.corrupt { font-size: 80%; } }

p.question { color: silver; font-size: 90%;  margin-top: 1em; margin-bottom: 0; }
p.answer { margin-top: 0; margin-bottom: 0.4em; }
p.comment { margin-top: 0; margin-bottom: 0.5em; margin-left: 5%; }
.subtitle { color: gray; font-size: 70%; letter-spacing: 0.1em; font-style: italic; }
.poster p { margin-top: 3em; margin-bottom: 3em; text-align: center; }
.separator { color: #303030; }

.navigate, .navigate-name { font-size: 95%; }
.navigate-copy { font-size: 75%; }
.navigate, .navigate-centre { letter-spacing: 0.15em; }
.navigate-name, .navigate-copy, .subnav { letter-spacing: 0em; font-family: "Lucida Sans", Helvetica, Arial, sans-serif; }
.navigate a, .navigate-name a, .navigate-copy a, .navigate-centre a { color: #777777; }
.navigate a:hover, .navigate-name a:hover, .navigate-copy a:hover, .navigate-centre a:hover { color: silver; }
p.navigate, p.navigate-centre { letter-spacing: 0.15em; font-family: "Lucida Console", Monaco, monospace; }
p.navigate { font-size: 90%; }
p.navigate, p.navigate-name, p.navigate-copy, p.navigate-centre { color: #606060; margin-bottom: 0.8em; text-align: right; font-style: normal; }
h1.navigate, h4.navigate { font-size: 90%; color: #606060; font-style: normal; letter-spacing: 0em; text-align: right; margin: 0;
                           font-family: "Lucida Sans", Helvetica, Arial, sans-serif; }
p.navigate-centre { text-align: center; }

@media screen and (max-width: 520px)
{ .navigate-copy { font-size: 70%; } }

.sprache, .cymraig, .deutsch, .english, .francais, .italiano, .latin, .letzebuergesch, .nederlands { font-style: italic; }
.cloud { padding: 0 40px; font-style: oblique; }
.jazz { font-style: oblique; }
.fotosub { text-align: left; font-style: normal; font-size: 50%; color: gray; margin: 0; margin-bottom: 1em; letter-spacing: 0.1em; }
.fotosub a { color: gray; }
.quoted-prose { padding-left: 3em; font-style: italic; font-size: 95%; }
.quoted_poem { font-style: italic; }

.shout-loudly { font-size: 250%; font-weight: bold; padding: 1em 0 0.5em 0; }
.warn { color: red; }
.arsehat { font-variant: small-caps; }

.published-title { font-weight: bold; font-size: 110%; }
.published-press { font-style: italic; }
.published-details { font-size: 90%; }
.published-quote { padding-bottom: 0.5em; font-style: italic; }
.published-quoted { font-style: normal; }
.published-more { padding-bottom: 0; }

td.session { text-align: center; padding-right: 1em; font-size: 90%; width: 50%; vertical-align: top; }
.session p { letter-spacing: 0.02em; line-height: 120%; padding-bottom: 1em; }
.album-note { font-style: italic; font-size: 90%; }
td.tracks { text-align: center; letter-spacing: 0.02em; width: 24%; padding-right: 0.6em; }
a.track-poem { padding: 0; margin: 0; border-width: 0; font-size: 80%; }

.dated { text-align: right; font-style: italic; font-size: 90%; }
.poem .dated { text-align: left; font-style: italic; font-size: 90%; margin-top: 3em; color: #606060; }
.blog .dated { text-align: right; font-style: italic; font-size: 90%; margin-right: 1em; color: #606060; }

.shot .flow, .shot .first_flow { color: gray; font-size: 140%; }
.photo_poem { text-align: left; margin: 0; font-size: 85%; }
.new_gallery { width: 100%; margin: 0; text-align: center; }
.new_gallery td { padding: 1em; }
.chapbook { color: #606060; }

.sequence { font-size: 95%; color: #606060; }
.sequence, .flow { font-style: italic; }

.footnote em { color: #606060; }
.footnote a { color: #606060; padding: 0; margin: 0; border-width: 0; }
.footnote a:hover { color: gray; }
.footnote a:focus { outline: none; }
p.footnote { padding: 1em 0 0 0; font-size: 85%; color: #606060; }

.topnote em { color: #606060; }
p.topnote { padding: 0 0 1em 4em; font-size: 85%; color: #606060; }
p.harmonic { padding: 0 4em; font-style: italic; }

.reviewed { font-size: 90%; font-style: italic; }

.member { font-size: 90%; }

td.colleft {
    text-align: right;
    width: 100px;
    min-width: 100px;
    padding: 0 3%;
    margin: 0;
    vertical-align: top;
}
td.colright {
    text-align: left;
    width: 100px;
    min-width: 100px;
    padding: 0 3%;
    margin: 0;
    vertical-align: top;
}