Show sourcecode

/* Just detta pixelvärde har valts eftersom navigationsmenyn och nyckelorden vid denna bredd börjar få gått om plats på den högra sidan av headern. */
@media (min-width: 1000px)
{
    div#logo
    {
        width: 276px;
        height: 65px;
        margin-left: 12%;
    }

    nav
    {
        position: absolute;
        top: 30px;
        left: 50%; /*450px;*/
    }

    nav a
    {
        font-family: arial, sans-serif; font-weight: bolder; font-size: 16px; color: rgb(83,83,83);
    }

    div#keywords
    {
        font-size: 20px;
        top: 15%;
        left: 50%;
    }
}

/*
@media (min-width: 700px) was 550px and (max-width: 1118px)
{
    div.column_main_c
    {
        margin-top: 130px;
    }
}
*/

/* Just detta pixelvärde har valts eftersom det är vid detta värde som enbart en kolumn får plats på bredden, i och med den bredd jag givit kolumnerna. */
@media (min-width: 770px)
{
    header
    {
        height: 500px;
    }

    footer
    {
        height: 140px;
    }

    div#columns_main
    {
        flex-direction: row;
        -webkit-flex-direction: row;
    }

    /* Genom order-egenskapen byter jag här ordning på HTML-elementen som gestaltas som kolumnerna. */
    div.column_main_a
    {
        order: 2; /* Kolumn A, sätts på plats #2, eftersom den skall vara mittersta kolumnen i desktop-versionen. */
        -webkit-order: 2; /* Samma som ovan, fast för Safari. */
    }

    div.column_main_b
    {
        order: 1; /* Kolumn B, sätts på plats #1, eftersom den skall vara den vänstra kolumnen i desktop-versionen. */
        -webkit-order: 1; /* Samma som ovan, fast för Safari. */
    }

    div.column_main_c
    {
        order: 3; /* Kolumn C får fasthålls plats #3, eftersom den skall vara den högra kolumnen i desktop-versionen. */
        -webkit-order: 3; /* Samma som ovan, fast för Safari. */
    }

    div.column_footer
    {
        height: 100%;
        margin: 0 auto;
        padding-top: 30px;
        display: inline-block;
    }

    address strong
    {
        font-family: arial, sans-serif; font-weight: bold; font-size: 22px; color: rgb(0,0,0);
        font-style: normal;
    }

    address p
    {
        font-family: arial, sans-serif; font-size: 16px; color: rgb(0,0,0);
        font-style: normal;
    }
}

@media (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)
{
    div.column_main_a, div.column_main_b, div.column_main_c
    {
        max-width: 255px; /* En justering för att få plats med max tre kolumner på en rad i en iPads landskapsvy. */
    }
}

@media print
{
    header, nav
    {
        display: none !important;
    }

    footer /* Jag vill skriva ut footern eftersom den har kontaktinformation i sig. */
    {
        background: none; /* Sätter bakgrund till none för säkerhets skull, utifall att någon webbläsare inte automatiskt tar bort bakgrundsfärg. */
    }

    img
    {
        max-width: 100% !important;
        page-break-inside: avoid !important;
    }

    div#columns_main
    {
        display: block; /* Jag byter från "flex" till "block" eftersom endast Google Chrome verkar skriva ut bra med "flex". */
        overflow-y: hidden;
        overflow-x: hidden; /* Jag lade till den här inställningen för att dölja en horisontell scroll-bar som annars kan skrivas ut av en webbläsare, ex. Google Chrome. */
    }

    div.column_main_a, div.column_main_b, div.column_main_c
    {
        background: none; /* Sätter bakgrund till none för säkerhets skull, utifall att någon webbläsare inte automatiskt tar bort bakgrundsfärg. */
        min-width: 90%; /* För att (så gott som) maximalt nyttja pappersutrymmet för att skriva ut sidans huvudsakliga innehåll har jag satt width på kolumnerna till "90%", vilket medför att de hamnar ovanför/under varandra. */
        min-height: 0px; /* För att inte slösa på pappersutrymme har jag har nollställt det för mobil-/desktop-versionen valet att för estetikens skull ha en viss minimi-höjd på kolumnerna. */
        height: 100%;
        margin-top: 50px; /* Margin-inställning ser till att iaf första kolumnens bild inte kapas av vid toppen av första sidan. */
    }

    img.center_top, img.left_top, img.right_top
    {
        position: absolute;
        top: -120px;
        left: 33%;
    }

    img.noprint
    {
        display: none !important;
    }

    body
    {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /*@page
    {
        margin: 0cm;
    }*/
}