a {
    text-decoration: none;
}

body {
    font-family: josefin-sans, Helvetica Neue, Helvetica, Arial, Sans-serif;
    width: calc(100% - 20px);
    max-width: 500px;
    margin: 10;
    background-color: black;
}

header {
    text-align: center;
    background-image: url("https://backpackers.fi/wp-content/uploads/2021/02/aurora.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    color: white;
    text-shadow: 0 0 10px black;
}

header a {
    color: white;
}

header h1 {
    margin-top: auto;
    padding-top: 13px;
    margin-bottom: 0;
    font-size: 30px;
}

header h3 {
    margin-top: 0;
}

nav {
    position: absolute;
    top: 181px;
    left: 0;
    height: 18px;
    padding: 6px;
    background-color: black;
}

nav * img {
    height: 18px;
    margin-left: 3px;
}

.pageHeader {
    text-align: center;
    margin: 10px 0 0 0;
    color: #383838;
}

content {
    width: 100%;
    color: white;
}

content * a {
    color: white;
    text-decoration: underline;
}

#linkki-bybanen {
    background-image: url(http://bergenbase.aulismanuel.com/liikenne/trikk.png)
}

#linkki-bussit {
    background-image: url(http://bergenbase.aulismanuel.com/liikenne/bussit.png)
}

#linkki-bybanen:hover, #linkki-bybanen:active {
    background-image: url(http://bergenbase.aulismanuel.com/liikenne/bybanen2.png)
}

#linkki-bussit:hover, #linkki-bussit:active {
    background-image: url(http://bergenbase.aulismanuel.com/liikenne/bussi2.png)
}

/*
    ()()            ()()()()    ()()      ()()    ()()    ()()
    ()()            ()()()()    ()()()    ()()    ()()  ()()
    ()()              ()()      ()()()()  ()()    ()()()()
    ()()              ()()      ()()()()()()()    ()()()
    ()()              ()()      ()()  ()()()()    ()()()()
    ()()()()()()    ()()()()    ()()    ()()()    ()()  ()()
    ()()()()()()    ()()()()    ()()      ()()    ()()    ()()
*/

.link {
    width: calc(50% - 5px);
    background-color: #383838;
    display: inline-block;
    margin-top: 10px;
}

.link h2 {
    text-align: center;
    color: white;
    font-weight: normal;
    font-size: 15px;
    text-shadow: 0 0 3px black;
}

.link:hover, .link:active {
    background-color: grey;
}

.wide {
    padding-left: calc(25% + 2.5px);
    padding-right: calc(25% + 2.5px);
}

/*
    XXXXXX- -XXXXX- XX----XX 
    XX---XX XX---XX -XX--XX- 
    XX---XX XX---XX --XXXX-- XXXXXX -XXXXX
    XXXXXX- XX---XX ---XX--- XX---- XX----
    XX---XX XX---XX --XXXX-- XXXX-- -XXXX-
    XX---XX XX---XX -XX--XX- XX---- ----XX
    XXXXXX- -XXXXX- XX----XX XXXXXX XXXXX-
*/
    

.box {
    width: calc(50% - 5px);
    height: 165px;
    background-color: grey;
    display: inline-block;
    margin-top: 10px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.box:hover, .box100:hover, .box:active, .box100:active {
    opacity: 0.5;
}

.left {
    float: left;
}

.right {
    float: right;
}

.box h2 {
    text-align: center;
    color: white;
    margin-top: 130px;
    font-weight: bold;
    font-size: 18px;
    text-shadow: 0 0 10px #333;
}

.textbox {
    width: calc(100% - 20px);
    padding: 10px;
    background-color: lightgrey;
    font-size: 0.9em;
}

.box100 {
    width: calc(100% - 20px);
    padding: 10px;
    background-color: grey;
    margin-top: 10px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: white;
    text-shadow: 0 0 5px black;
}

.box50 {
    width: calc(50% - 25px);
    padding: 10px;
    background-color: grey;
    margin-top: 10px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: white;
    text-shadow: 0 0 5px black;
    font-size: 0.7em;
}

.box10050 {
    width: calc(100% - 20px);
    padding: 10px;
    background-color: grey;
    margin-top: 10px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: white;
    text-shadow: 0 0 5px black;
    font-size: 0.8em;
}

.box100 img, .box50 img {
    width: 100%;
}

.box10050 img {
    width: calc(40% - 7px);
    display: inline-block;
}

.box10050 p {
    width: calc(60% - 7px);
    display: inline-block;
    margin-left: 10px;
}

/*
    ()()    ()()      ()()()()      ()()    ()()    ()()()()()      ()()()()()()
    ()()  ()()      ()()()()()()    ()()    ()()    ()()()()()()    ()()()()()()
    ()()()()        ()()    ()()    ()()    ()()    ()()    ()()    ()()
    ()()()          ()()    ()()    ()()()()()()    ()()    ()()    ()()()()
    ()()()()        ()()    ()()    ()()()()()()    ()()    ()()    ()()()()
    ()()  ()()      ()()    ()()    ()()    ()()    ()()    ()()    ()()
    ()()    ()()    ()()()()()()    ()()    ()()    ()()()()()()    ()()()()()()
    ()()    ()()      ()()()()      ()()    ()()    ()()()()()      ()()()()()()
*/

.kohde {
    width: 100%;
    background-color: #383838;
    margin: 10px 0;
    padding-top: 10px;
}

.kohde h2 {
    color: white;
    margin: 0 10px;
    font-weight: bold;
    font-size: 19px;
    text-shadow: 0 0 5px black;
}

.kohde-contr {
    width: calc(100% - 20px);
    display: flex;
    justify-content: space-between;
    padding: 10px;
    flex-wrap: nowrap;
}

.kohde-img-contr {
    width: calc(35% - 10px);
}

.kohde-img-contr img {
    width: 100%;
    margin: 0;
}

.kohde-p-contr {
    width: 65%;
    font-size: 0.9em;
}

.kohde-p-contr p {
    margin: 0;
    color: white;
}

/*
        ()()        ()()()()()      ()()()()()()    ()()    ()()    ()()    ()()    ()()    ()()()()()()    ()()            ()()
      ()()()()      ()()()()()()    ()()()()()()    ()()    ()()  ()()      ()()  ()()      ()()()()()()    ()()            ()()
    ()()    ()()    ()()    ()()        ()()        ()()    ()()()()        ()()()()        ()()            ()()            ()()
    ()()()()()()    ()()()()()          ()()        ()()    ()()()          ()()()          ()()()()        ()()            ()()
    ()()()()()()    ()()()()            ()()        ()()    ()()()()        ()()()()        ()()()()        ()()            ()()
    ()()    ()()    ()()  ()()          ()()        ()()    ()()  ()()      ()()  ()()      ()()            ()()            ()()
    ()()    ()()    ()()    ()()        ()()        ()()    ()()    ()()    ()()    ()()    ()()()()()()    ()()()()()()    ()()
    ()()    ()()    ()()    ()()        ()()        ()()    ()()    ()()    ()()    ()()    ()()()()()()    ()()()()()()    ()()
*/

.artikkeli {
    width: 100%;
    color: #383838;
    margin: 10px 0;
    padding-top: 10px;
}

.artikkeli h2 {
    font-weight: bold;
    font-size: 19px;
    text-shadow: 0 0 5px lightgrey;
}

.artikkeli p {
    font-size: 0.9em;
}

/*
        ()        ()()()    ()      ()      ()      ()()()()()      ()      ()      ()  ()          ()      ()
      ()  ()        ()      ()    ()      ()  ()        ()        ()  ()    ()      ()  ()          ()      ()
    ()      ()      ()      ()  ()      ()      ()      ()      ()      ()  ()      ()  ()          ()      ()
    ()()()()()      ()      ()()        ()()()()()      ()      ()()()()()  ()      ()  ()          ()      ()
    ()      ()      ()      ()  ()      ()      ()      ()      ()      ()  ()      ()  ()          ()      ()
    ()      ()      ()      ()    ()    ()      ()      ()      ()      ()  ()      ()  ()          ()      ()
    ()      ()    ()()()    ()      ()  ()      ()      ()      ()      ()    ()()()    ()()()()()    ()()()
*/

.at {
}

.at-vkp {
    font-size: 0.8em;
    font-weight: bold;
}

.at-ots {
    font-size: 0.6em;
    font-weight: bold;
}

.at-body {
    
}

.at-h {
    border-spacing: 0;
    font-size: 0.7em;
    font-weight: bold;
}

.at-m {
    border-spacing: 0;
    font-size: 0.7em;
}

.at-br {
    width: 10px;
}



footer {
    
}