html {
    height: 100%;
}
body {
    background-color: #F0F0F0;
    font-family: Avenir;
    text-align: center;
    height: 100%;
}
#contentBody {
    background-color: white;
    text-align: left;
}
#contentBody a {
    text-align: left;
}
#contentBody ul li {
    font-family: Georgia, Book Antiqua, Avenir;
    font-size: 0.9em;
    margin-top: 3px;
}
h1 {
    margin-top: 40px;
}
h2 {
    margin-top: 15px;
}
a {
    text-decoration: none;
    background-color: white;
    color: #505050;
    padding: 2px 5px;
    border-radius: 4px;
    display: inline-block;
    font-weight: 500;
}
a:hover {
    background-color: #F0F0F0;
}
a:active {
    background-color: #E8E8E8;
    font-weight: 600;
}

/*
    || //  ||   || ||\\   /|||\  /|||\  || ||    ||  /|||\  ||||||    /\  
    ||//   ||   || || || ||     ||      || ||    || ||        ||     //\\
    | /    ||   || ||//   \|||\  \|||\  || ||    ||  \|||\    ||    //__\\
    | \    ||   || ||\\       ||     || || ||    ||      ||   ||   / –––– \
    ||\\    \\_//  || ||      ||     || || ||    ||      ||   ||  //      \\
    || \\    \_/   || ||  \|||/  \|||/  || ||||| ||  \|||/    || //        \\
*/

#kurssilista {
    background-color: white;
    max-width: 600px;
    font-size: 12px;
    margin: 50px auto;
    padding: 20px;
}
#kurssilista * {
    text-align: left;
}
#kurssilista h4 {
    margin-top: 10px;
}
#kurssilista ul li {
    margin: 3px;
}
#kurssilista ul li a {
    background-color: #F4F4F4;
    padding: 0px 3px;
    border: 1px solid #E8E8E8;
    font-size: 1em;
    color: #303030;
}
#kurssilista ul li a:hover {
    background-color: #E8E8E8;
}
#kurssilista ul li a:active {
    background-color: #E8E8E8;
}

/*
    XXXX:   :XXX:   XXXX:   XXXXX   XXXXX   :XXX:   X::::   :XXX:   :XXX:   
    X:::X   X:::X   X:::X   ::X::   X::::   X:::X   X::::   ::X::   X:::X   
    XXXX:   X:::X   XXXX:   ::X::   XXX::   X:::X   X::::   ::X::   X:::X   
    X::::   X:::X   X::X:   ::X::   X::::   X:::X   X::::   ::X::   X:::X   
    X::::   :XXX:   X:::X   ::X::   X::::   :XXX:   XXXXX   :XXX:   :XXX:   
*/

#portfolio {
    background-color: white;
    margin: 50px auto 0 auto;
    width: calc(600px + ((100% - 600px) * 0.6));
    height: calc(100% - 180px);
    display: flex;
}

#sidebar {
    background-color: white;
    margin: 20px;
    width: calc( 30% - 100px ) ;
    font-size: 13px;
    text-align: left;
    padding-right: 20px;
    border-right: 1px solid #F0F0F0;
}

#sidebar h4 {
    text-align: left;
}


#sidebar a {
    background-color: white;
    padding: 0px 3px;
    font-size: 1em;
    text-align: left;
}
#sidebar a:hover {
    background-color: #E0E0E0;
}
#sidebar a:active {
    background-color: #E0E0E0;
}
#contentLink {
    border: none;
    background-color: inherit;
    display: block;
}

#content {
    background-color: white;
    margin: 20px;
    width: 70%;
}

#contentFrame {
    width: 100%;
    height: 100%;
    border: none;
}