/* ===================================================================================== */ /* 24.2.2016: iframe-elementtien lisäksi myös div- ja img-elementtien maksimileveydeksi 100%. Samalla img-elementtien korkeudeksi auto. (Nämä tarvittiin sivuprojektisivun kapeaa näkymää varten.) */ /* 7.3.2016: .levynkansi sai skarpin läpikuultavan harmaan varjon. Nille sivuille joilla ei toimi (iiris, Suljettu, singlet), erilliset kiellot. */ /* 28.1.2016: uusi luokka .tyhjia sellaisille taulukoille, joissa tyhjät kohdat halutaan eri näköisiksi kuin dataa sisältävät. */ /* 7.-9.10.2015: Ensimmäistä kertaa iso taustakuva bodylle, kun ikkuna on tosi leveä. */ /* 4.9.2015: uusi luokka .jokatoinen taulukoille, joiden joka toinen rivi on tummempi (ekana Tommin soolokeikat) */ /* 7.4.2015: .metatiedon margin-top padding-topiksi (ja pienemmäksi) jotta toimii myös leivujan sisällön kanssa kuten lammaspaitakuvasivulla. */ /* Tiedosto jatkuu.css päivitetty vastaavasti. Onneksi oli sellainen käytössä! */ /* 27.3.2015: Nyt vasta .koristeelle float:right, kääk. Sivustolla siis runsaahkosti asettelua tyylii align=right ... */ /* 2.3.2015: iOS:n (ja ehkä muidenkin) automaattisen, virheellisen puhelinnumerotunnituksen kumoaminen */ /* 22.1.2015: blockquote.sitaattikoristeella otettu käyttöön ensimmäisen kerran Valo paistaa rummun läpi -sivun takakansitekstissä. Tekee siis taustalle isot lainausmerkit. */ /* 10.12.2014: p:lle annettu ensimmäistä kertaa (!) ylä- ja alamarginaali. */ /* marraskuuu 2014: Fikausta mobiilikäyttöä varten (tämän tiedoston ensimmäisille ja viimeisille riveille). */ /* 2.11.2014: Sivut lopultakin keskitetty. Enimmäisleveytenä 65em. (Iiris-sivuille piti sanoa erikseen iiris-css:ssä.) */ /* Otsikkokoot määritelty. Otsikoiden väri harmaasta yläpalkin ruskeaksi. */ /* 25.10.2014: Googlen webfontit käyttöön. Olipa kivutonta! Rokkitt on varsin lähellä Rockwellia, mutta jätin (itseäni varten?) Rockwellin silti ensimmäiseksi. */ /* 29.4.2014: ots-luokka otsikonomaisille teksteille (kuten Suljettu-sivulla) */ /* 28.8.2013: Yläpalkki harmaasta uudenlaiseksi ruskeaksi uuden etusivukuvan myötä. */ /* 20.4.2013: Valkoreunuksisille "paperikuville" foto-tyyli lammaspaitakuvien tapaan (niitä ei kytketty tähän tyylisääntöön) */ /* IV/2013: q-elementti otettu käyttöön (sivulla summerhits.html) ja q:n tuottamat lainaismerkit määritelty */ /* 2.12.2012: Uusi luokka (lohkosaton elementeille) .ilmoitus - perus laatikko lievällä värikorostuksella. */ /* 20.11.2012: a-elementin sisällä oleva strong saa nyt (lopultakin) värinsä a:n mukaan, ei srong:n */ /* 6.11.2012: Vihdoinkin otsikoille myös tavallisempi fontti (Courier New), */ /* joka sopiikin varsin hyvin Rockwellin sijaiseksi. */ /* Etusivun fonttisäädöt tänne missä otsikot määritellään yleisestikin. */ /* 14.10.2012: .aines 50em -> 53em (samalla levyjen kannet 300x300 -kokoon) */ /* 10.10.2012: Otsikoidenkin ensimmäisenä ehdotetuksi fontiksi Rockwell. */ /* Jotta sen seurauksena strong-korostettu teksi ei hyppäisi silmille, */ /* viimeksimainitun väriksi sama #333 kuin otsikoilla. */ /* 5.4.2012: div.laatikko Suljetturaitakisasivun myötä. */ /* 20.2.2012: kysymys voi nyt olla myös divissä (jonka sisällä eka- ja sis-kappaleita), */ /* http://absoluuttinennollapiste.fi/bandi/vastaukset/2012-02-15.html */ /* varten - toivottavasti mikään ei hajonnut samalla... */ /* 24.11.2011: Etusivun pallurat (ei tässä tiedostossa) ja kontekstipalkin >:t */ /* harmaalla (#888) */ /* Etusivulla tumma taustaharmaa ja vaaleampi palluraväri ovat */ /* hieman tummempia kuin muiden sivujen yläpalkissa */ /* (TFT-efektien kompensoimiseksi */ /* 15.11.2011: .jasen Jäsen-sivujen kuville (ettei teksti tule liian lähelle */ /* kuvaa) */ /* 5.11.2011: codelle määritelty sama fontti kuin pre:lle */ /* 18.5.2011: spotify-linkkien muotoilu ja väritys */ /* 6.4.2011: .kirjoituskoneen line-height kasvatettu 0.95 -> 1 */ /* 8.9.2010: osiositaatin (nyt vain keikkasivulla) tyylit tähän tiedostoon */ /* 27.3.2010: osastolinkki-perusväriksi ruskea (linkittömän tekstit ja "|":t) */ /* 27.2.2010: uusi luokka .harva (mm. kirjallisuus-sivua varten) */ /* 9.2.2010: uusi luokka div.arv-lehdet levyarvostelusivujen sis.luett. vart. */ /* 27.8.2009: uusi luokka .asteriski settilistoja varten (Aaken soolo) */ /* aika fonttiriippuvainen juttu kyllä (ei testattu muilla) */ /* 4.2.2009: .kirjoituskoneelle kooksi 100% mutta riviväliksi 0.95 */ /* 20.1.2008: .kontekstille (ja .osastolinkeille) padding-leftiä */ /* 25.7.2007: pre sai fonttimäärityksen ("Courier New"). */ /* Näyttää isommalta - jopa isommalta kuin leipätekstit Georgia... */ /* 9.4.2007: h1 ja h2 saivat ylämarginaalin (IE7:n takia) */ /* 3.4.2007: .kirjoituskoneen fonttikoko kasvatettu 95:een */ /* 28.3.2007: .levynkansi sai myös ylämarginaalin (ei vaikuta */ /* kappaleisiin, koska niillä on se jo) */ /* 23.3.2007: maksimileveys div.ainekselle ja lievä vas. marginaali */ /* 17.4.2006: lisätty luokka .normaali (kysymyksiä varten) */ /* 31.1.2006: h3.kirj lisätty h4.kirj:n kaveriksi */ /* 13.11.2005: .kirjoituskone p:lle vähemmän marginaalia ja */ /* .kirjoituskone h4:lle reilummin ylämarginaalia */ /* 3.11.2005: taulukko-otsikko-h4:n ylämarginaaliksi 0 (ennen ei määr.) */ /* 2.11.2005: taulukko-otsikko-säännöt biisisivulta tänne */ /* ja table.smallin line-height 1.0sta 1.1seen */ /* 28.10.2005: hr margin:0 ; padding:0 */ /* 17.9.2005: säännöt .kontekstille ja .metatiedoille (ja .palkki pois) */ /* 15.8.2005: a:active saman väriseksi kuin a:visited (oli sama kuin a:link) */ /* 31.5.2005: .aikataulukko td.pvm width:5em (ennen 6em) */ /* 30.5.2005: Taustaksi hillitympi #fffbe9 */ /* 30.5.2005: Kysymykset kursiivilla. Taulukot #efefef -> #fff */ /* 29.5.2005: Otsikot mustan sijaan (hyvin) tumman ruskealla (#410). */ /* Taustaan enemmän väriä (ennen #fffdf5, tilalle #fcf7d6). */ /* 20.5.2005: Kysymykset ei enää bold. Sisennys 1.5em */ /* 16.3.2005: Lisää vaihtoehtoisia korvaavia fontteja */ /* 16.3.2005: Otsikoiden fonttia ei enää määritelty = sama kuin leipäteksti */ /* 5.2.2005: Palatino Linotypen kirjoitusvirhe */ /* 7.11.2004: text-indent kasvatettu vähän, nyt 1.5em */ /* [aikaisempia päivityksiä ei dokumentoitu - eikä tässäkään kaikkia myöhempiä] */ /* ===================================================================================== */ @import url(advanced.css); /* Vanhoja Netscape-ajan peruja; voisi tuoda tähänkin tiedostoon. */ @import url(css/taulukot-kapeana.css); @import url(http://fonts.googleapis.com/css?family=Bigshot+One|Alegreya+SC:700|Rokkitt:700,400); @-ms-viewport {width:device-width;} @-webkit-viewport {width:device-width;} @-moz-viewport {width:device-width;} @-o-viewport {width:device-width;} @viewport {width:device-width;} .konteksti, .osastolinkit, .sivut-osasto, h2, h3, h4, .muutsivut, .ots { font-family: Rokkitt, Rockwell, Courier, monospace; font-weight:bold;} h1 { font-family: "Bigshot One", Rockwell, Courier, monospace; font-weight:normal;} /* SEURAAVA PALKIN TAUSTAA JA "NUOLIA" VARTEN */ .konteksti {color: #8f705d; background: #362317 none;} /* TÄSSÄ PALKIN LINKIT */ .konteksti a:link, .konteksti a:active, .konteksti a:hover, .konteksti a:visited { color: #fff; background: #362317 none; } .konteksti a:link, .konteksti a:active, .konteksti a:hover, .konteksti a:visited { font-weight:bold;} .konteksti { padding: 0.1em 1em 0.2em 0.4em;} .osastolinkit { padding:0 0 0 0.3em;float: left;} .sivut-osasto { text-align: right;} div.aines { margin-left:0.3em; margin-right:0.3em; min-height:20em;} /* sivun alussa oleville pitkille vuosilukulinkeille tms. joita ei haluta rajoittaa .aineksen leveyteen */ div.esi-aines {margin-left:0.3em;} .metatieto {padding-top: 3em; text-align: right; clear:both;} .metatieto hr {margin-bottom: 0.2em;} body { color: #000; background: #fffbe9 none; font-family: Georgia, "Bookman Old Style", "Book Antiqua", "New Century Schoolbook", Garamond, "Palatino Linotype", Sylfaen, "Times New Roman", serif; } pre, code { font-family:"Courier New", monospace; font-size:92%;} h1 {font-size:200%;} h2 {font-size:160%;} h3 {font-size:125%;} h4 {font-size:118%;} h1, h2, h3, h4 {color:#38281E; line-height:1;} h2 {margin-top:0.5em;} h1 {margin-top:0.3em;margin-bottom:0.4em;} h1+h2, h1+h3, h1+p {margin-top:0} h3,h4 {margin-bottom:0.5em} p,ul,ol,blockquote {margin-top:0.6em;} li ul, li ol {margin-top:0;} p {margin-top:0.7em; margin-bottom:0.7em;} a[href^=tel] { color:inherit !important; text-decoration:none !important;} blockquote.sitaattikoristeella { margin-left:2em;} blockquote.sitaattikoristeella p { padding-left:10px;} blockquote.sitaattikoristeella p:first-child { background: url(/img/lainausmerkit.png) no-repeat top left; padding-top:10px;} p.sitaattikoristeella {background: url(/img/lainausmerkit.png) no-repeat top right;} /* tämä edellämainittu käytössä vasta sivut-sivulla */ table {margin-bottom:1em;} a:link strong, a:link { color : #660; background : transparent none } a:link img { border-color : #660 } a:visited strong, a:visited { color : #330; background : transparent none } a:visited img { border-color : #330 } a:active strong, a:active { color : #330; background : transparent none } a:active img { border-color : #330 } a:hover img { border-color : #630 } a:link, a:visited, a:active {text-decoration: underline; } a:hover {text-decoration: none; } a img {border:2px solid;} img.kuvakartta {border-color:#000;} ul.palloton, ol.palloton { list-style-type: none } /* arvosteluita ja muita lehtijuttujen näköisiä tekstejä varten */ p.sis { text-indent : 1.5em; margin-top: 0; margin-bottom: 0 } p.eka { margin-top: 0; margin-bottom: 0 } h4.kirj, h3.kirj { margin-top: 3.5ex; margin-bottom: 0.9ex} p.sis-loppu { text-indent : 1.5em; margin-top: 0 } p.sis-alku { text-indent : 1.5em; margin-bottom: 0 } p.eka-alku { margin-bottom: 0 } p.keski { margin-top: 0; margin-bottom: 0 } /* joo, sama kuin p.eka, mutta jatkon varalta erikseen */ p.sis-ainoa { text-indent : 1.5em; } .kirje { margin-top: 3.5ex; } /* sarjis-luetteloa varten */ li.lehti { list-style-type: none } li.tarina { list-style-type: disc } table tr.einyt td { color: #999; } .einyt { color: #999; background : transparent none; } /* tr.ohi, tr.ohi td {text-decoration:line-through;} */ tr.ohi, tr.ohi td, tr.ohi strong, tr.ohi a, tr.ohi .huom { color: #999; background : transparent none;} tr.ohi strong {font-weight:normal;} .kommentti { color: #555; background : transparent none; } .huom { color: #900; background : transparent none; } /* tekstitason huomautus */ #huomio {border: 1px solid #900; padding: 0.2em 0 0.2em 0.4em; background: #fff;} /* lohkohuomautus (kappale) */ hr + p.kysymys {margin-top:0.8em;} p.kysymys, div.kysymys { margin-left: 1.5em;} ul.kysymys {margin-left: 1em;} .kysymys { color: #500; background : transparent none; font-style: italic;} .vastaus { color: #050; background : transparent none; } .normaali { font-style: normal; color: #000;} .koriste { margin-left: 1.5em; float:right;} /* Pan Alley -biisilistausta varten */ p.ots-listassa { margin-left: -2em ; margin-top: 0.5em; margin-bottom: 0.5em } blockquote.muovikasetti { font-size: 80% } .kirjoituskone { font-family : "Courier New", monospace; font-size: 100%; line-height:1.03; } .kirjoituskone pre {font-size: 100%;} .kirjoituskone h3 { text-transform: uppercase; font-family : "Courier New", monospace; font-size: 100%; margin-top: 2.5em; margin-bottom: 1em; font-weight: normal} .kirjoituskone h4 { font-family : "Courier New", monospace; font-size: 100%; margin-top: 1.2em; margin-bottom: 0 ; font-weight: normal; text-indent: 2em;} .kirjoituskone p {margin-top:1em;margin-bottom:1em;} .kirjoituskone p.ingressi {margin-left:2em;margin-right:4em;} .kirjoituskone div.piirros {float:right; margin-left:1.5em; margin-bottom:0.5em;} .kirjoituskone h3, .kirjoituskone h4 {color: #000; background: transparent none; } .kirjoituskone p.eka {margin-bottom: 0;} .kirjoituskone p.sis {text-indent: 1.2em; margin-top: 0; margin-bottom: 0 ;} table.taulukko {border-collapse: collapse; } table.taulukko td {color: #000; background: #fff none; border: solid #ccc thin;} table.taulukko td, table.taulukko th {vertical-align: top; padding: 0.2em; font-size: 90%; } table.taulukko th {border-top: solid #ccc thin;} table.taulukko tr.sarakkeet th {color: #000 ; background: transparent none; vertical-align:bottom; border: none; } table.taulukko td.pvm {text-align: right;} table.taulukko th h4 { margin-bottom: 0; margin-top: 0;} table.taulukko th.otsikko-eka, table.taulukko th.otsikko {text-align: left; border-top:none;} table.taulukko th.otsikko {padding-top: 2em;} table.taulukko th.otsikko, table.taulukko th.otsikko-eka {font-size:100%;} table.jokatoinen {border-collapse:collapse;} table.jokatoinen td {padding:2px 3px;} /* table.jokatoinen tr:nth-child(odd) {background-color:#F8F7DF;} */ table.jokatoinen tr:nth-child(even) {background-color:rgba(255,255,255,1)} th { font-weight: normal } .lomakelohko {margin-bottom:1.5em;} .lomakelohko p {margin-bottom:0.5em;} .levynkansi { float:right; margin-left:1em;margin-top:1em; border:1px solid #333; box-shadow:5px 5px 0px rgba(100,100,100,0.2); } div.small p {font-size:80%; margin-top:0.5em; margin-bottom:0.5em;} .small li {font-size:80%; margin-top:0; margin-bottom:0;} .small li li {font-size: 100%;} .small ul {margin-top: 0;} table.small td, table.small th {font-size:80%; padding:0 0.7em 0 0; line-height: 1.1 ;} li.small {font-size:80%;} div.navi {font-style:italic;} .aikataulukko table {margin-bottom:1em;} .aikataulukko td.pvm {width:5.5em;} .aikataulukko td, .aikataulukko-etusivu td {vertical-align:top;} .aikataulukko td.pvm, .aikataulukko-etusivu td.pvm { text-align:right; padding-right:0.3em;} .aikataulukko-etusivu td.pvm {padding-left:0.5em;} hr {clear:both; height:3px; border: 0; color:#85613C; background:#85613C; margin:0;padding:0;} p.oik-kuva {float:right; margin-left:1.2em;} p.vas-kuva {float:left; margin-right:1.2em;} p.vas-kuva, p.oik-kuva {margin-bottom:0.5em; margin-top:0;} img.eireunaa {border-style:none;} /* kiinnostavaa juuri nyt -listauksia varten: */ .listaus p {margin:0.2em 1em;} /* käytössä vasta kisakisasivulla mutta miksei jatkossa muuallakin: */ div.author {text-align:right; font-style:italic;} img.miuku {padding:0 1px 0 1px; vertical-align:-0.1em;} .asteriski {vertical-align:-0.4ex;line-height:0;} div.arv-lehdet {float:right;width:50%; margin:2em 0.5em 1em 4em; padding:0.2em 0.4em 0.3em 0.2em; text-align:right; background-color:#fffbe9; border: 1px #bbb solid; } ul.harva li, ul.tiivis {margin-bottom:0.4em;margin-top:0.4em;} ul.tiivis li {margin-bottom:0;margin-top:0;} blockquote.osiositaatti {font-style:italic; margin: 0em;} p.kunniataulu { background:#F9F4E1; border:double 4px #410; padding: 0.5em 0.9em; margin-bottom:1.5em; text-align:center; } p.kunniataulu span {padding-right:0.9em;} .beta {text-transform:uppercase; font-size:10pt; color:#999; vertical-align:-5px; font-family:Arial, sans-serif; font-weight:normal; } .diuc-kansi p.spotify-kuuntele a:link, .diuc-kansi p.spotify-kuuntele a:visited, .diuc-kansi p.spotify-kuuntele a:hover, .diuc-kansi p.spotify-kuuntele a:active, a.spotify-kuuntele { border-radius: 5px; font-family: Arial, sans-serif; font-weight:bold; padding:0 2px; text-decoration:none; background:#78b900; color:#fff; } .diuc-kansi p.spotify-kuuntele a:hover, a.spotify-kuuntele:hover { background:#3c8f00; color:#fff; } .jasen {padding-left:1em;} .jasen img {border-radius:15px;} div.laatikko { background: #ffe; width: 504px; margin:0.5em; padding:5px 15px; border: solid 1px #410; } .soundcloud { border: none; padding-left:4px; } td.sijoitus { background:#fff; border:#333 1px solid; padding:0 0.1em 0 0.3em; border-radius: 5px; text-align:center; } td.sijoitus + td {padding-left:0.5em;} .ilmoitus { padding:0.4em; border:#410 1px solid; background:#F9F4E1; } /* Lehtiartikkeleita varten tämä ja seuraava: */ .lehtileike { float: right; border: #a9a9a9 solid 1px; margin: 3px 0 0 15px;} .kainalo {font-size:85%; float:right; width:30%; margin-left:0.8em; padding-left:0.5em; margin-bottom:1em; border-left:8px #F9F4E1 solid; } .kainalo h3 {font-size:115%; margin-bottom:0;} .kainalo h2 {font-size:135%; margin:0;} /* Vertailun vuoksi: yleisesti on määritelty näin h1 {font-size:200%;} h2 {font-size:160%;} h3 {font-size:125%;} h4 {font-size:118%;} */ q:lang(fi) { quotes: '"' '"' "'" "'"; } q:before { content: open-quote; } q:after { content: close-quote; } div.foto { border: #ddd solid 1px; border-right-color:#ccc; border-bottom-color:#bbb; } div.foto img { border:12px #fff solid;} /* sivusto-sivun lomakkeille alun perin tehty */ form.pikkulomake, p.haku, #skartta, .kyselyvaihtoehdot { background:#F9F4E1;border:#ddc 1px solid; margin:1em 0 1em 0; padding:0.2em 0 0.5em 0.3em;} #skartta {padding:0.1em 0.3em 0.3em 0.3em;} small.petiitti, div.petiitti p, div p.petiitti {font-size:65%;} strong.arvosana { font-family:Helvetica, Arial, sans-serif;} nobr {white-space:nowrap;} /* sanotaan nyt varmuuden vuoksi erikseen, koska elementti ei kuulu mihinkään viralliseen määrittelyyn */ iframe, img, div {max-width:100%} img {height:auto;} .tyhjia td:empty { background-color:rgba(255,255,255,0.5)} /* sisällön maksimileveys oli pitkään 53em, ja se oli annettu .ainekselle */ @media (min-width:68em) { body {position:relative; background-color:hsl(45, 68%, 92%); margin:0;padding:0; height:100%;} html {height:100%;} div.sivu { border:10px solid #fffbe9; border-top-width:8px; background-color:#fffbe9; /* max-width:56em;*/ max-width:916px; /* pikseleinä taustakuvan vuoksi */ margin-top:0;margin-bottom:0; margin-left:auto; margin-right:auto; position:relative; /*right:2em;*/ /* sittenkin keskelle, taustakuvan vuoksi */ min-height:100%; box-sizing:border-box} .diskografia div.levy {width:148px;} } @media (max-width:700px) { .osiokoriste {width:40%;} .osiokoriste img { max-width:100%; height:auto;} .oik-kuva.jasen, .oik-kuva.jasen img { max-width:100%; height:auto; margin-left:0; margin-right:0; padding-left:0; padding-right:0; float:none;} } @media (max-width:38em) { .osiokoriste {display:none;} .osastolinkit, .sivut-osasto { font-weight:normal; float: none; text-align:left; padding-left:0.3em;} .sivut-osasto {margin-bottom:0.5em;} ul { margin-left:0; padding-left:2em;} blockquote {margin-left:2em;} .levynkansi { margin:0 0 0.5em 0; float:none; display:block; box-shadow:none;} } @media (max-width:36em) { div.arv-lehdet { float:none; width:95%; text-align:left; margin:1em 0 0 0; padding:0.6em; line-height:1.3;} ul.small { margin-left:0; padding-left:1em;} div.diuc-kansi {float:none;} .koriste { float:none; margin:0;} blockquote {margin-left:1.2em;} /* seuraava mallailtu kirjallisuus.html-sivun avulla */ div.kuvake-koriste { float:none; text-align:center; margin:0;} div.kuvake-koriste img { width:33%; height:auto; margin-bottom:-1em; padding-right:1em;} } @media (max-width:25em) { .osastolinkit, .sivut-osasto { font-weight:normal; font-family:sans-serif; font-size:85%; word-spacing:0.2em;} .kainalo { width:37%; border-left:1px solid hsl(25, 36%, 30%); } } input[type=text], textarea {max-width:96%;} @media (min-width:1500px) { html body { background-image:url(/img/tausta/hiso_2014_1_tausta.jpg); background-repeat:no-repeat; background-position:50% top; background-color: #f2ead4;} }