@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@300&display=swap');

body {
    margin: 350px auto 0;
    text-align: center;
    background-color: #eee;
    font-family: 'Averia Serif Libre', serif;
    font-size: small;
    line-height: 1.4;
    overflow-y: scroll;
}

.frontPagePicture { width: 400px; }
.releases td { vertical-align: top; }
.release img.releaseCover {
    border: outset 1px;
    width: 160px;
    float: left;
    margin: 0 40px 100px 0;
}
div.release { width: 600px; clear: both; margin: 40px auto; }
h2 { font-size: 100%; }

body.releases {
    background-color: #eee;
    font-size: 80%;
}

ol li { margin-left: 3em }
ol { padding-left: 0 }
body.index { text-align: center; }
.index #menu {
    background-image: url("img/sarviperhosymbol_by3_alpha_15c_prog.png");
    background-position: top center;
    background-repeat: no-repeat;
    height: 500px;
    width: 700px;
    margin: auto;
}
.index #menu a:link, .index #menu a:visited {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    color: #333;
    font-size: 70%;
    letter-spacing: .4em;
}
.index #menu a:visited { color: #666; }
.index #menu a:hover { color: #000; }
#menuLeft {
    float: left;
    margin-top: 170px;
    text-align: left;
    line-height: 60px;
}
#menuRight {
    float: right;
    margin-top: 170px;
    text-align: right;
    line-height: 60px;
}
/*
#topCenterTitle {
    position: absolute; left: 370px;
    top: 121px;
    font-weight: bold;
    letter-spacing: .6em;
    XXXborder: thin pink dashed;
/*    width: 100%;        /* ie centring hack, kill not */
/*
    color: #eee;
    font-size: 75%;
}
*/
.underMenu {
    font-size: 80%;
    text-align: justify;
    width: 700px;
    margin: 3em auto;
}

body.harmaa, body.harmaaLyrics { margin-top: 0 }
body.harmaa ol {
    text-align: left;
    padding-left: 70px; /* padding-left & width mediated between... */
    width: 440px;       /* ...ie6 w98 medium and fx linux */
}
.nameEn { color: #888; font-style: italic; }
body.harmaa img { margin: 2em; }
h1 { margin-top: 1.2em; margin-bottom: 1.2em; }
body.harmaa p { width: 500px; margin-left: auto; margin-right: auto; }
body img.harmaaLogo { margin: 1em 0 -1em; }
p.quote { font-style: italic; font-size: 90%; margin: 2em; }
div.newsItem {
    width: 500px;
    text-align: left;
    margin: 4em auto;
    clear: both;
}
body.news {
    background-color: #eee;
    /*
    font-size: 80%;
   */
}

#navigation a:link, #navigation a:visited {
    text-decoration: none;
    color: #333;
}
#navigation a:visited { color: #666; }
#navigation a:hover { color: #000; }

#navigation img { vertical-align: middle }

#navigation {
    background-image: url("img/head-s1.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-color: black;
    color: white;
    height: 260px;
    position: absolute; top: 0; left: 0; right: 0;
    width: 100%;        /* ie6 doesn't know left:0; right:0; implies this */
}

#logo { display: none; margin-top: 55px }

#navMenu {
    position: absolute; bottom: 6px; left: 0; right: 0;
    width: 100%;        /* ie6 doesn't know left:0; right:0; implies this */
    font-size: 15px;
    font-family: "milton mnff", serif;
    padding: 10px 0;
}

#navMenu a { color: #fff }
#navMenu a:link, #navMenu a:visited { color: #bbb }
#navMenu a { margin: 0 5px }

#navigation a, #navigation a:link, #navigation a:visited  {
    color: #666;
    text-shadow: 0 0 3px #bbb;

    transition: color 1.6s ease-in-out;
    -o-transition: color 1.6s ease-in-out;
    -moz-transition: color 1.6s ease-in-out;
    -webkit-transition: color 2.6s ease-in-out;
}

#navigation a:hover {
    color: #aaa;
    text-decoration: none;

    transition: color .4s ease-in-out;
    -o-transition: color .4s ease-in-out;
    -moz-transition: color .4s ease-in-out;
    -webkit-transition: color .4s ease-in-out;
}

#navigation a::before { content: "· "; visibility: hidden }
#navigation a::after { content: " ·"; visibility: hidden }

#navigation a.selected::before { visibility: visible }
#navigation a.selected::after { visibility: visible }

#navStripe {
    border-color: #eee;
    border-style: solid;
    border-width: 2px 0;
    position: absolute; bottom: 1px; left: 0; right: 0; height: 1px;
    width: 100%;        /* ie6 doesn't know left:0; right:0; implies this */
    line-height: 0;     /* ie6 wants to make a line without even ws content */
}

img { border: none; }
#contentbox, .contentbox { width: 500px; margin: auto; text-align: justify; }
.background #contentbox img {
    width: 500px;
    margin-top: 2em;
    margin-bottom: 2em;
}
.background p { margin-top: 5em }

body.standard { background-color: #eee; font-size: 80%; margin: auto; }

a:link, a:visited { text-decoration: none; color: #776 }
a:visited { color: #998 }
a:hover { text-decoration: underline; }

body.listen #navigation { background-image: url("img/head-s3.jpg"); }
body.background #navigation { background-image: url("img/head-s3.jpg"); }
body.news #navigation { background-image: url("img/head-s1.jpg"); }
body.releases #navigation { background-image: url("img/head-s1.jpg"); }
body.ordering #navigation { background-image: url("img/head-s2.jpg"); }
body.forum #navigation { background-image: url("img/head-s3.jpg"); }
body.history #navigation { background-image: url("img/head-s2.jpg"); }
body.images #navigation { background-image: url("img/head-s3.jpg"); }
body.video #navigation { background-image: url("img/head-s2.jpg"); }
body.discography #navigation { background-image: url("img/head-s1.jpg"); }
body.live #navigation { background-image: url("img/head-s2.jpg"); }
body.lyrics #navigation { background-image: url("img/head-s3.jpg"); }

.harmaa ul { text-align: left; margin: 2em auto; width: 240px; }
.lyricsBox { width: 600px; margin: 2em auto; clear: both; }
.lyricsFi { text-align: right; border-right: 1px #888 solid; }
.lyricsEn { text-align: left; }
.lyricsOne { text-align: center; }
.lyricsOneTitle { text-align: center; margin: 3ex 0 -1ex; }

.lyricsBox .lyricsEn, .lyricsBox .lyricsFi {
    padding: 0 10px;
    width: 279px;
    float: left;
}

.clear { clear: both; } /* cough, hack */
body.ordering .release img { width: 100px; margin: 0 40px 40px 0; }
body.ordering div.release input, body.ordering div.totals input {
    float: right;
    clear: right;
    width: 6em;
    margin-left: 1em;
}
body.ordering div.release { width: 500px; margin-top: 0; }
body.ordering div.totals {
    clear: both;
    margin-left: 140px;
    width: 360px;
    margin-bottom: 40px;
}
body.ordering table { font-size: 100%; }
body.ordering div.release { margin-left: 0; }
/*
* { -moz-outline: 1px red dashed; }
* { border: 1px red dotted; }
*/
body.ordering .page2 .release img { width: 60px; margin: 0 20px 0 0; }
body.ordering .page2 div.totals { margin-left: 80px; width: 420px; }
body.ordering .page1 span.price { float: right; }
.price { font-weight: bold; }
/*
table { width: 100%; }
body.ordering p { width: 500px; }
*/
select { width: 14em; }
body.ordering input { float: right; }
body.ordering .page2 h2 { margin-bottom: 0; }
body.ordering table.items td { text-align: left; vertical-align: top; }
body.ordering table.items td.title { font-weight: bold; }
body.ordering table.items td.price { font-weight: bold; text-align: right; }
body.ordering table.items td { padding-bottom: 1em; }
body.ordering table.inputs { margin-left: 80px; }
body.ordering table.inputs textarea, body.ordering table.inputs input {
    width: 17em;
    font-family: sans-serif;
    font-size: medium;
}
body.ordering table.inputs textarea { height: 6em; }
.complain { color: red; }
img.smallImg { float: right; height: 100px; margin: 0 0 1em 1em; }
img.bigImg, .post img { float: right; width: 62%; margin: 0 0 20px 20px; }
img.autowidth { width: auto; }

body.harmaa h2 { margin-top: 3em; }
.trackDesc { font-style: italic; font-size: 90%; margin: 2em; }

.order { white-space: nowrap }

.order a {
    border: #ccc 1px solid;
    background: #fff;
    color: #666;
    padding: .5em;
}

.order img { height: 2em; vertical-align: middle }

.skiplink { display: none }

body.history h1 { text-align: center }

body.images h4 { line-height: 100px; margin: 0 }
body.images h5 { float: right; margin: 0 }

.discography-item {
    padding: 40px 0;
    text-align: left;
    margin: 0;
}

.discography-item img {
    display: block;
    height: auto;
    width: 100%;
    margin: auto;
    padding-bottom: 2em;
}

.discography-item img.kertomuksia { width: auto; height: 400px; margin-left: 0 }

.discography h4, .discography h5, .discography h6 {
    font-size: inherit;
    margin: 0 0 1em;
}
.discography h4 { font-size: 110% }
.discography h4 small { font-weight: normal }
.discography h6 { font-weight: normal; text-decoration: underline }

.discography-item .musicians { font-size: 85%; margin: 1.5em 0 0}
.discography-item .sessionians { font-size: 85%; margin-top: 0 }
.discography-item ul {
    /*
    list-style-type: "\2B29";
    padding-left: 2em;
   */
    padding-left: 0;
    list-style-type: none;
}
.discography-item li {
    /*
    padding-left: 1em;
   */
    padding-left: 0;
}



.langCol td:first-child { text-align: right }
.langCol td:first-child, .langColOut td:first-child { padding-right: .5em }
.langCol, .langColOut { white-space: nowrap }
.langCol, .langColOut { border-collapse: collapse }
.langColOut td:last-child { text-align: right }

.editioncover { float: right }
ul.editions li { clear: both; list-style: none; border-top: white thin solid }
ul.editions { padding: 0; border-bottom: white thin solid }

.compilation tr {
    vertical-align: top;
    text-align: center;
    white-space: nowrap;
}

.live h6 { border-bottom: #999 solid 1px }

.lyricsDual, .lyricsLinks { border-collapse: collapse; width: 100% }
.lyricsDual td, .lyricsLinks td { width: 50% }
.lyricsDual .lyricsFi, .lyricsLinks .lyricsFi { padding-right: 11px }
.lyricsDual .lyricsEn, .lyricsLinks .lyricsEn { padding-left: 10px }
.lyricsDual h3 { margin: -1em 0 0 }
.lyricsDual { margin: 3em 0; white-space: pre-wrap }
.lyricsFi, .lyricsEn { vertical-align: top }

.lyrics h2 { margin: 3em; font-size: 120%; text-align: center }

.lyrics .albumlink {
    display: block;
    text-align: center;
    padding: 1em;
    font-weight: bold;
}

.lyrics #contentbox { width: 600px }
.lyricsLinks :link, .lyricsLinks :visited { color: #666 }

.lyricsDual br { display: none }

/* BLOG STYLES SPECIFIC TO UTUSTUDIO */

.post h3 a:link, .post h3 a:visited { color: black }
.post h3 { font-size: 100% }
.postmetadata strong { color: #ccc }
.postmetadata { clear: both }

#menu { float: none; width: auto }
#menu * { display: inline }
#menu > ul > li { display: none }
#menu li.feeds, #menu li.meta { display: inline }
#menu {
    border-left: none;
    border-right: none;
    border-bottom: none;
    margin: 3em 0;
    padding: 1em;
}

#content h2 { width: 100% }     /* ie float fuckup prevention hack */

/* requested that images don't run alongside earlier posts. clearing first post
   drops under sidebar, establishing a flow root tends to mess up centring to
   viewport rather than vp minus sidebar, so just clear non-first posts*/
h2 ~ h2 { clear: right }

#content { margin-top: 3em }
.gallery br { clear: left !important } /* kill clear:both attr sidebar fail */
.navigation { padding-bottom: 2em } /* wp footer navigation */

iframe[width="560"] { margin-left: -30px } /* center the fb watch embeds */

#navMenuCheck { display: none }
#navMenuLabel {
    display: none;
    font-size: 400%;
    color: #999;
    font-weight: bold;
    width: 3ex;
    height: 3ex;
    z-index: 2;
    user-select: none;
}

/* k mobile safari on 13 is between 600 and 700 portrait */
/* mbp reports 192dpi, ip13 288dpi, that's 240dpi in the middle */
/* fx puts ip se 2nd and kindle fire at 190 too so that's kinda problematic */
@media (min-resolution: 280dpi), (max-width: 700px),  {
    body { font-size: x-large }
    .lyrics #contentbox { font-size: smaller }
    .lyricsDual br { display: inherit }

    #navMenuLabel { display: block; position: fixed; top: 0; right: 0 }
    #navMenu {
        display: none;
        position: fixed;
        bottom: auto;
        font-size: 133%;
        background: black;
        padding: 2.5em 0;
        z-index: 1;
        opacity: 90%;
        line-height: 3;
    }
    #navMenu > * { display: block; max-height: 7vh }
    #navMenuCheck:checked + #navMenu { display: block }
}