Show sourcecode

@font-face {
    font-family: 'museo_sans500';
    src:    url('../fonts/museosans_500_macroman/MuseoSans_500-webfont.eot');
    src:    url('../fonts/museosans_500_macroman/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
            url('../fonts/museosans_500_macroman/MuseoSans_500-webfont.woff2') format('woff2'),
            url('../fonts/museosans_500_macroman/MuseoSans_500-webfont.woff') format('woff'),
            url('../fonts/museosans_500_macroman/MuseoSans_500-webfont.ttf') format('truetype'),
            url('../fonts/museosans_500_macroman/MuseoSans_500-webfont.svg#museo_sans500') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1{font-family: museo_sans500, arial, sans-serif; font-weight: bold; font-size: 18px; color: #009;}

h2{font-family: 'Roboto Condensed', arial, sans-serif; font-weight: bold; font-size: 26px; color: #009;} /* letter-spacing: 8px; border-style: solid; border-width: thin; border-color: rgb(211,211,211); text-shadow: 2px 2px rgb(211,211,211);} */

h3, h4, h5, h6 {font-family: 'Roboto Condensed', arial, sans-serif; font-weight: bold; font-size: 14px; color: #009;}

h1, h2, h3, h4, h5, h6 {margin-top: 1em; margin-bottom: 1em;}

a {color: rgb(83,83,83); text-decoration: none;}

p {font-family: helvetica, arial, sans-serif; font-size: 14px; color: #222; line-height: 1.5em; margin-top: 0px; margin-bottom: 16px;}
em {font-weight: normal; font-style: italic;}
strong {font-weight: bolder;} /* För att strong skulle ge fetstil på text även i Google Chrome var jag här tvungen att ange "font-weight: bolder". */

ul {list-style-type: square;}
ol {list-style-type: upper-roman;}

em {font-weight: bold;}

/* Ett wrapper-element som är tänkt att omsluta allt i sajtens body-element */
div#wrapper
{
    width: 1180px;
    max-width: 100%; /* Angivandet av en procentuell max-width gör så att bredden anpassas efter webbläsarfönstrets bredd, så att elementet kan anpassas efter skärmstorlek till viss del utan bruk av media queries. */
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}

div#logo
{
    width: 276px;
    height: 65px;
    background-image: url("../images/logo_nicolasDubray.png");
    background-size: cover;
    margin-left: 10%;
}

header
{
    width: 100%; /* Elementets bredd är wrapper-divisionens varierande bredd. */
    height: 360px;
    font-family: arial, sans-serif; font-weight: bold; font-size: 18px; color: rgb(0,0,0);
    background-image: url("../images/theThinkerPrintableModel.jpg");
    background-size: 1180px;
    position: relative;
}

nav
{
    position: relative;
    top: 20px;
    left: 20px;
}

nav a
{
    padding-right: 12px;
    font-family: arial, sans-serif; font-weight: bolder; font-size: 12px; color: rgb(83,83,83);
    text-decoration: none;
}

div#keywords
{
    font-family: arial, sans-serif; font-weight: bold; font-size: 18px; color: rgb(0,0,0);
    position: relative;
    top: 25%;
    left: 3%;
}

div#columns_main
{
    width: 100%; /* Elementets bredd är wrapper-divisionens varierande bredd. */

    padding-top: 75px;
    padding-bottom: 100px;

    background-color: rgb(245,245,245);

    /* flex nyttjar jag bland annat för att det tillåter mig att smidigt byta plats på HTML-element genom bruk av order-
    egenskapen, som kan sättas på innehåll i element med flex. */
    display: flex;
    display: -webkit-flex; /* Safari */

    flex-wrap: wrap; /* För att få mina kolumner att wrappas runt skärmen. */
    -webkit-flex-wrap: wrap;

    flex-direction: column; /* Kolumn-visning för att stapla mina "kolumner" ovanpå varandra för mobil-versionen. */
    -webkit-flex-direction: column; /* Safari */

    /* Centerings-inställningar för mina "kolumner". */
    vertical-align: top;
    align-items: center;
    justify-content: center;
    -webkit-align-items: center; /* Safari 7.0+ */
}

div.column_main_a, div.column_main_b, div.column_main_c
{

    min-height: 512px;

    max-width: 300px;

    margin-left: 20px;
    margin-right: 20px;
    padding: 135px 12px 10px 10px;

    border: solid 1px rgb(220,220,220);

    background-color: rgb(255,255,255);

    position: relative;
}

div.column_main_a, div.column_main_b, div.column_main_c
{
    margin-bottom: 130px; /* En inställning för att sära på kolumnerna när de är ovan och under varandra. Jag försökte först ordna särandet med CSS + operator, men det gick inte för mig så smidigt som jag hade hoppats. */
}

img.center_bottom
{
    position: absolute;
    bottom: -40px;
    left: 70%;
}

img.center_top
{
    position: absolute;
    top: -120px;
    left: 13%;
}

img.left_top
{
    position: absolute;
    top: -120px;
    left: -1%;
}

img.right_top
{
    position: absolute;
    top: -120px;
    left: 26%;
}

footer
{
    margin-top: -120px; /* En justering för 130px margin-bottom-värdet på varje column_main-element, så att sajten bättre följer mallen som givits. */
    width: 100%; /* Elementets bredd är wrapper-divisionens varierande bredd. */
    min-height: 140px;

    background-image: url("../images/theThinkerPrintableModel_footer.jpg");
    background-size: cover;
    text-align: center;
}

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

address
{
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}

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

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

img.circled
{
    max-width: 100%;
    height: 210px;
    width: 210px;
    border-radius: 50%;
    border: solid white 10px;
}

article
{
    width: 90%; /* Elementets bredd är 90% av wrapper-divisionens varierande bredd. */
    margin: 40px 40px 40px 40px;
    text-align: justify;
}

.center
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}