/*
FILE NAME: stylesheet.css
WRITTEN BY: all group members
WHEN: November 2016
PURPOSE: Define CSS rules for site
*/

/* Deletes all margin and padding */
* {
    margin:             0;
    padding:            0;
}

/* Makes sure page is using full height of viewport */
body {
    display:            flex;
    height:             100%;
    flex-direction:     column;
}

/* Makes footer stick to bottom */
main {
    flex:               1 1 auto;
    background-color:   #f6f6f6;
}

/* Properties for image in header */
header {
    width:              100%;
    height:             200px;
    overflow:           hidden;
}

/* Limits header image */
.header_pic {
    width:              100%;
}

/* Constructs navbar */
nav {
    width:              100%;
    font-size:          1.5em;
    text-align:         center;
    background-color:   darkslategray;
}

/* Properties for links in navbar */
.navbar a {
    text-decoration:    none;
    display:            block;
    padding:            1em;
    color:              #eaeaea;
}

/* On hover, navbar button changes color */
.navbar a:hover {
    background-color:   #4CAF50;
}

/* Uses flex to center navbar elements */
.navbar {
    display:            flex;
    flex-flow:          row wrap;
    /* This aligns items to the end line on main-axis */
    justify-content:    center;
    list-style:         none;
}

/*Properties for the dropdown button */
li a, .dropbutton {
    display:            inline-block;
    color:              white;
    text-align:         center;
    padding:            14px 16px;
    text-decoration:    none;
}

/*Properties for the box and the shadow in dropdown*/
.dropdown-content{
    display:            none;
    position:           absolute;
    background-color:   darkslategrey;
    width:              7.6em;
    box-shadow:         10px 10px 20px 0 rgba(0,0,0,0.2)
}

/*Properties for the links*/
.dropdown-content a{
    color:              white;
    padding:            12px 16px;
    text-decoration:    none;
    display:            block;
    text-align:         left;
}

/*Changes colour on hover in the dropdown*/
.dropdown-content a:hover {
    background-color:   mediumseagreen;
}

/*Show the driodown menu on hover*/
.dropdown:hover .dropdown-content{
    display:            block;
}

.fallback_images {
    display:            none;
}

/* Properties for aside element to the right */
aside {
    display:            inline-block;
    right:              0;
    float:              right;
    background-color:   #f6f6f6;
    padding:            3em;
}

/* Properties for main content (article) of page */
article {
    min-height:         100%;
    background-color:   #f6f6f6;
}

/* Properties for each section in article */
.content {
    display:            inline-block;
    max-width:          75%;
    padding:            3em 1em 3em 5%;
    margin:             auto;
}

/* Properties for each paragraph in content */
.section_paragraph {
    margin:             7em auto;
    width:              500px;
}

/* provides left margin for paragraphs at index.html */
.index_section_paragraph {
    display:            block;
    max-width:          500px;
    margin-left:        25em;
}

.styre_liste {
    list-style:         none;
    line-height:        1.5em;
    font-family:        Verdana, Tahoma, sans-serif;
    padding-top:        0.5em;
}

.slideshow_section {
    width:              900px;
    margin:             1em auto;
}

label {
    display:            block;
    font-family:        Verdana, Tahoma, sans-serif;
    font-size:          1.5em;
    width:              500px;
    margin-left:        auto;
    margin-right:       auto;
}

/* Changes properties for form */
.form {
    margin-top:         1em;
    padding:            1em;
    border:             2px solid darkslategray;
    border-radius:      2em;
    width:              500px;
}
/*Changes properties for submit button */
#submit {
    width:              150px;
    height:             50px;
    display:            block;
    margin:             5px auto;
}

/* Properties of images in article */
.round_images {
    display:            block;
    float:              left;
    height:             17em;
    width:              17em;
    border-radius:      50%;
    border:             2px solid darkslategray;
    margin:             0 0.5em 0.5em 0;
}

/* Properties of square images in article */
.square_images {
    display:            block;
    float:              left;
    height:             17em;
    width:              17em;
    border:             2px solid darkslategray;
    margin:             0 0.5em 0.5em 0;
}

/* Properties for p and h2 in article */
article p, h2 {
    font-family:        Verdana, Tahoma, sans-serif;
    display:            inline;
    line-height:        150%;
}

a {
    font-family:        Verdana, Tahoma, sans-serif;
}

/* Gjør footer-tekst hvit */
footer p {
    color:              white;
}

/* Properties for paragraph-text */
p {
    font-family:        Verdana, Tahoma, sans-serif;
}

/* Properties for footer */
footer {
    background-color:   darkslategray;
    padding:            0.5em 10px 0.5em 10px;
    text-align:         center;
}

/* Changes appearance of buttons */
button {
    background-color:   white; /* goes green on hover */
    border:             none;
    border-radius:      8px;
    color:              black;
    padding:            15px 30px;
    text-align:         center;
    text-decoration:    none;
    display:            inline-block;
    font-family:        Verdana, Tahoma, sans-serif;
    font-size:          1em;
    margin:             5px 0;
    cursor:             pointer;
    -webkit-transition-duration:    0.4s; /* Safari */
    transition-duration:            0.4s;
}

/* :onhover of  buttons */
button:hover {
    background-color:   #4CAF50;
    color:              white;
}

/* on clicked properties of buttons */
button:active {
    background-color:   #3e8e41;
}

/* Special properties of slideshow buttons */
.pic_button {
    display:            inline-block;
    width:              448px;
    height:             4em;
    border:             1px solid darkslategray;
    border-radius:      0;
    margin:             0 0 3px 0;
}

/* Special properties of trekant in to-top button*/
.trekant {
    height:             0;
    width:              0;
    border:             0 solid transparent;
    border-right-width: 14px;
    border-left-width:  14px;
    border-bottom:      14px solid black;
}

/* Properties for text in footer. */
footer span {
    font-family:        Verdana, Tahoma, sans-serif;
    color:              lightgray;
    line-height:        150%;
    margin:             0 auto;
}

/* Properties for URL in footer */
footer a {
    text-decoration:    none;
    color:              #eaeaea;
}

#sitemap {
    margin:             0.5em auto;
}

#closeSitemap {
    margin:             0.5em auto;
}

header span {
    position:           absolute;
    top:                0.5em;
    left:               auto;
    right:              auto;
    padding-left:       15%;
    width:              85%;
    font-family:        Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,Georgia,serif; /* Many fallbacks */
    font-weight:        bold;
    font-size:          2em;
    letter-spacing:     1em;
    color:              darkslategray;
}

@media (max-width: 1275px) {
    aside {
        display: none;
    }

    .index_section_paragraph {
        width: 80%;
    }
}
/* Makes page mobile friendly for devices with screen width 900px */
@media (max-width: 919px) {
    header {
        display:        none;
    }

    .round_images {
         display:       none;
    }

    .square_images {
        display:        none;
    }

    aside {
        display:        none;
    }

    .slideshow_section {
        display:        none;
    }

    .fallback_images {
        display:        block;
    }

    .fallback_images img {
        width:          100%;
    }

    .fallback_images h2 {
        display:        block;
        margin:         10px;
    }

    nav {
        top:            0;
    }

    .content {
        min-width:          95%;
        padding:        1em 0 1em 5%;
        margin:         0;
    }

    .section_paragraph {
        margin:         5%;
        padding:        0;
        max-width:      90%;
    }

    .index_section_paragraph {
        max-width:      100%;
        margin:         auto;
    }

    .form {
        width:          90%;
    }

    textarea {
        width:          30%;
    }
}