@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,500,500i,700,700i');
* {
    --bg: #ffffff;
    --bg-field: #ffffff;
    --bg-accent: #f8f7f6;
    --bg-accent-secondary: #dddddd;
    --bg-accent-tertiary: #cccccc;
    --bg-outside: #808080;
    --line: #000000;
    --line-light: #666666;
    --line-lighter: #999999;
    --line-inverse: #ffffff;
    --link: #2f67b9;
    --link-active: #547db9;
    --font: Roboto, sans-serif;
    --font-variant: 'Playfair Display', serif;
    --pagewidth: 110rem;
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    margin: 0;
    background: var(--bg-accent-secondary);
    color: var(--line);
    font-size: 100%;
}

:hover {
    transition: all linear 0.1s;
}

h1 {
    font-family: var(--font-variant);
    font-size: 1.75rem;
    font-weight: 500;
    margin: 2rem 0 1rem 0;
}

h2 {
    font-family: var(--font-variant);
    font-size: 1.25rem;
    font-weight: 500;
    margin: 1rem 0 0.5rem 0;
}

p {
    margin: 0 0 0.5rem 0;
}

p.social {
    margin-top: 2rem;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    color: var(--link-active);
    text-decoration: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#content {
    width: var(--pagewidth);
    margin: 0 auto;
    background: var(--bg-accent);
    padding: 3rem 2rem;
}

#content.home.index {
    display: grid;
    grid-template-columns: 74fr 32fr;
}

#content.home.contact {
    padding-right: 33.5rem;
}

#content.home.contact article {
    margin-bottom: 5rem;
}

#content.books.index, #content.authors.index, #content.details, #content.article, #content.contact, #content.search {
    padding: 4rem 8.5rem;
}

#content.details, #content.article {
    display: grid;
    grid-template-columns: 1fr 25rem;
}

#content.details #main, #content.article #main {
    padding-right: 8.5rem;
}

#content.details #main p, #content.article #main p, #content.contact article p {
    font-size: 1.125rem;
    line-height: 150%;
    margin-bottom: 1rem;
}

#content.details #main li, #content.article #main li {
    font-size: 1.125rem;
    line-height: 150%;
    margin-bottom: 0;
}

#content.details #main h1, #content.article #main h1 {
    margin: 0;
}

#content.details #main section.title, #content.article #main section.title {
    margin-bottom: 4rem;
}

#content.details #main h2, #content.article #main h2 {
    margin-top: 4rem;
}

#sidebar .edition {
    margin: 2rem 0;
}

#sidebar img {
    width: 100%;
}

#sidebar .secondaryimages {
    margin-top: 4rem;
    width: 50%;
}

#sidebar .secondaryimages li {
    margin-top: 2rem;
}

#sidebar img.person.thumbnail {
    border-radius: 50%;
}

#sidebar h2 {
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0;
}

#sidebar p, #sidebar li {
    font-size: 0.875rem;
    margin: 0;
}

#sidebar p.download {
    margin-top: 0.5rem;
}

#sidebar .thumbnail p.photographer {
    text-align: center;
}

#booklists h1 {
    margin: 0 0 1rem 0;
}

#booklists .linkcardlist {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 4rem;
}

#articles {
    padding: 0 0 0 3rem;
}

#articles article {
    display: block;
    padding: 0;
    margin-bottom: 4rem;
}

#articles article h1 {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
}

#articles article img {
    width: 7.5rem;
    margin: 0 0 1.25rem 1.25rem;
    float: right;
}

#articles article img.person {
    border-radius: 50%;
}

#articles article p {
    line-height: 135%;
    margin-bottom: 1rem;
}

#articles article li {
    line-height: 135%;
}

#content.books.index .linkcardlist, #content.authors.index .linkcardlist, #content.home.search .linkcardlist {
    grid-template-columns: repeat(5, 1fr);
}

/* COMPONENTS */

.linkcardlist {
    display: grid;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
}

.linkcardlist li {
    margin: 0;
    padding: 0;
}

.linkcardlist li.groupingkey {
    background: var(--bg-accent-secondary);
    color: var(--line-inverse);
    padding: 2rem;
    text-align: right;
    font-family: var(--font-variant);
    font-size: 4em;
}

.linkcardlist li a {
    background: var(--bg-accent);
    display: block;
    position: relative;
    padding: 1rem;
    border-radius: 1rem;
    color: var(--line);
    height: 100%;
}

.linkcardlist li a:hover {
    box-shadow: 0 0 1rem -0.25rem black;
    background: var(--bg-accent);
}

.linkcardlist li a img {
    width: 100%;
}

.linkcardlist li a.person img {
    border-radius: 50%;
}

.linkcardlist li a .imageplaceholder {
    background: var(--bg);
    display: block;
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
}

.linkcardlist li a p {
    margin: 0;
    color: var(--line-light);
}

.linkcardlist.editions p.people {
    color: var(--line);
    font-family: var(--font-variant);
    font-size: 1rem;
    margin-top: 0.5rem;
}

.linkcardlist.editions p.title {
    color: var(--line);
    font-family: var(--font-variant);
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.linkcardlist.people p.name {
    color: var(--line);
    font-family: var(--font-variant);
    font-size: 1.25rem;
    font-weight: 500;
    margin: 1rem 0.5rem 0.5rem 0.5rem;
    text-align: center;
}

.linkcardlist.editions p.isdebut {
    background: var(--line);
    color: var(--line-inverse);
    opacity: 0.85;
    padding: 0;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 4rem;
    line-height: 4rem;
    text-align: center;
    border-radius: 50%;
    transform: rotate(15deg);
}

span.score {
    text-indent: -9999em;
    display: inline-block;
    height: 0.9375rem;
    width: 0.9375rem;
    background: url(dice.png) no-repeat;
    position: relative;
    top: 0.3rem;
}

span.score.level1 {
    background-position: 0 -15px;
}

span.score.level2 {
    background-position: 0 -30px;
}

span.score.level3 {
    background-position: 0 -45px;
}

span.score.level4 {
    background-position: 0 -60px;
}

span.score.level5 {
    background-position: 0 -75px;
}

span.score.level6 {
    background-position: 0 -90px;
}

/* PAGE STRUCTURE */

#header {
    width: var(--pagewidth);
    margin: 0 auto;
    padding: 4rem 2rem 2rem 2rem;
    background: var(--bg-accent-secondary);
    position: relative;
}

#header h1 {
    margin: 0;
    padding: 0;
    font-family: var(--font-variant);
    font-size: 1rem;
    font-weight: normal;
}

#header h1 a {
    display: block;
    width: 10.225rem;
    height: 6rem;
    text-indent: -9999rem;
    background: url(kolon_tittelark_logo.svg) no-repeat;
    background-size: cover;
    color: var(--line);
}

#header h1 a:hover {
    color: var(--line-light);
}

#searchform {
    margin: 0 0 2rem 0;
    padding: 0;
}

#searchform fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

#searchform p {
    margin: 0;
    padding: 0;
}

#searchform input {
    font-family: var(--font);
    font-size: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#searchform input[type=search] {
    width: 27rem;
    padding: 0.5rem;
    border: 0.0625rem solid var(--line-lighter);
}

#searchform input[type=submit] {
    display: inline-block;
    padding: 0.5rem 2rem;
    border: 0.0625rem solid var(--line-light);
    background: var(--line-light);
    color: var(--line-inverse);
    text-transform: uppercase;
}

#searchform input[type=submit]:hover {
    border-color: var(--line);
    background-color: var(--line);
}

#header #searchform {
    position: absolute;
    right: 2rem;
    top: 4rem;
    padding: 0;
    margin: 0;
}

#sitemenu {
    width: var(--pagewidth);
    margin: 0 auto;
    padding: 0;
    background: var(--bg-accent-secondary);
    display: flex;
    justify-content: center;
}

#sitemenu li {
    display: inline-block;
    font-family: var(--font);
    font-size: 1.125rem;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0 2rem 0 0;
}

#sitemenu li:last-child {
    margin-right: 0;
}

#sitemenu li.selected {
    font-weight: 500;
    background: var(--bg-accent);
}

#sitemenu li a {
    display: block;
    color: var(--line);
    padding: 1rem;
}

#sitemenu li a:hover, #sitemenu li a:active {
    color: var(--line);
    background: var(--bg-accent);
}

#submenu {
    padding: 2rem 0;
}

#submenu ul {
    display: flex;
    justify-content: center;
}

#submenu li {
    display: inline-block;
    margin-right: 2rem;
}

#submenu li:last-child {
    margin-right: 0;
}

#submenu li a {
    color: var(--line-lighter);
}

#submenu li a:hover {
    color: var(--line);
}

#footer {
    width: var(--pagewidth);
    margin: 0 auto;
    padding: 2rem 2rem 4rem 2rem;
    text-align: center;
    background: var(--bg-accent-secondary);
}

#footer a {
    color: var(--line-light);
}

#footer a:hover {
    color: var(--link-active);
}

@media screen and (max-width: 1800px) {
    * {
        --pagewidth: 91rem;
    }
    #content.home.index {
        grid-template-columns: 55fr 32fr;
    }
    #content.details, #content.article {
        grid-template-columns: 1fr 20rem;
    }
    #content.details #main, #content.article #main {
        padding-right: 6rem;
    }
    #booklists .linkcardlist {
        grid-template-columns: repeat(3, 1fr);
    }
    #content.books.index .linkcardlist, #content.authors.index .linkcardlist, #content.home.search .linkcardlist {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 1496px) {
    * {
        --pagewidth: 72rem;
    }
    #content.home.index {
        grid-template-columns: 36fr 32fr;
    }
    #content.details, #content.article {
        grid-template-columns: 1fr 15rem;
    }
    #content.details #main, #content.article #main {
        padding-right: 4rem;
    }
    #booklists .linkcardlist {
        grid-template-columns: repeat(2, 1fr);
    }
    #content.books.index, #content.authors.index, #content.details, #content.article, #content.contact, #content.search {
        padding: 2rem;
    }
    #content.books.index .linkcardlist, #content.authors.index .linkcardlist, #content.home.search .linkcardlist {
        grid-template-columns: repeat(3, 1fr);
    }
    #content.books.index {
        padding: 4rem 0;
        grid-template-columns: repeat(3, 1fr);
    }
    #content.books.index .linkcardlist, #content.authors.index .linkcardlist {
        padding: 0 8.5rem;
    }
    #content.home.contact {
        padding-right: 8.5rem;
    }
}

@media screen and (max-width: 1192px) {
    * {
        --pagewidth: 100%;
    }
    body {
        font-size: 75%;
    }
    #header {
        padding: 0.5rem;
    }
    #header h1 a {
        width: 5.1125rem;
        height: 3rem;
    }
    #header #searchform {
        right: 0.5rem;
        top: 0.5rem;
    }
    #searchform input[type=search] {
        width: auto;
    }
    #searchform input[type=submit] {
        padding: 0.5rem;
    }
    #sitemenu {
        display: initial;
    }
    #sitemenu li {
        display: block;
        font-size: 1em;
        margin: 0;
    }
    #sitemenu li a {
        padding: 0.5rem;
    }
    #content.home.index {
        display: block;
    }
    #content.home.index #articles {
        padding-left: 0;
    }
    #content.home.index #articles h1 {
        font-size: 1rem;
    }
    #booklists .linkcardlist {
        grid-template-columns: repeat(2, 1fr);
    }
    .linkcardlist.editions p.people, .linkcardlist.editions p.title, .linkcardlist.people p.name {
        font-size: 1em;
    }
    #content.details, #content.article {
        display: block;
        padding: 2rem;
    }
    #content.details #main, #content.article #main {
        padding-right: 0;
    }
    #content.details #main h2, #content.article #main h2 {
        margin-top: 2rem;
    }
    #sidebar {
        margin-top: 4rem;
    }
    #sidebar section.cover, #sidebar section.mainimage, #sidebar section.image {
        width: 50%;
    }
    #sidebar section.secondaryimages {
        width: 40%;
    }
    #content.books.index .linkcardlist, #content.authors.index .linkcardlist, #content.home.search .linkcardlist {
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
    }
    #submenu {
        padding: 0 0 1rem 0;
    }
    #submenu ul {
        display: initial;
    }
    #submenu li {
        display: block;
        margin: 0.5rem 0 0 0;
        text-align: center;
        font-size: 1.25em;
    }
    .linkcardlist li a .imageplaceholder {
        display: none;
    }
    #content.books.index {
        padding: 2rem;
    }
    #content.home.contact {
        padding: 2rem;
    }
}