/**
 * Grundlayout för Holgersidan.
 * Definierar den övergripande strukturen på sidan.  Ytterligare formattering
 * kan läggas i separata filer, men försök hålla den här till huvudelementen på
 * sidan.
 */


html {
    /* Definiera sidans bakgrundsfärg i html-elementet för att
     * slippa införa extra DIV:ar för layout senare.
     */
    background-color: #600;
    margin: 0px;
}

* {
    line-height: 1.2em;
}

body {
    /**
     * Vi snyltar på body-elementet för grundlayout, återigen för att slippa införa
     * extra DIV:ar enbart för layout.
     */

    /* Sätt lagom bredd på sidan och centrera den. */
    width: 67em;
    margin: auto;

    /* Lägg till en drop-shadow längs vänsterkanten. */
    background: url(/images/vanster.png) top left repeat-y;

    /* Grundinställningar för typsnitt och liknande */
    font-family: "Lucida Sans", Verdana, Arial, sans-serif;
    color: #000;
    font-size: 0.8em;
}

div#mainPage {
    /**
     * Omgivande DIV som innehåller hela sidan.
     *
     * Eftersom grundlayouten redan är fixad i body-elementet behöver
     * vi inte göra särskilt mycket här.  Vi sätter bara drop-shadow
     * för högerkanten (med padding pss som i body-elementet).
     */
    background: #600 url(/images/hoger.png) top right repeat-y;

    /* Flytta DIV:en 8px åt höger så att den inte täcker body-elementets
     * dropshadow på vänsterkanten */
    margin-left: 8px;

    /* Se till att skuggan längs högerkanten inte döljs av sidinnehållet */
    padding-right: 8px;
}

div#top {
    /**
     * Sidhuvud.  Innehåller holgerloggan samt eventuell banner med
     * aktuella föreställningsbilder eller liknande.
     */

    /*
     * Defaultversionen av sidhuvudet: Holgerblått(TM) samt en svart
     * border längs vänster- och högerkanten.
     */
    /* background: #371d68; */
    border-left: 1px solid #000;
    border-right: 1px solid #000;

    /* Justeringar för Arthur: En banner över hela sidan, med både
     * logga och föreställningsbilder.
     * Sätter höjden explicit eftersom vi inte längre har någon
     * img-tag för loggan som tar upp höjd.
     */
    background: #000 url(/images/header-bakgrund-columbus.jpg) top left no-repeat;
    border-bottom: 1px solid #222;
    height: 110px;
}

div#bottomWrapper {
    /**
     * Det verkar knepigt att få till en drop-shadow längs underkanten
     * utan att använda ett extra-element, så det får gå för den här
     * gången...
     * Det här elementet fixar drop-shadow för vänsterdelen av underkanten
     * på sidan.
     */

    /* Drop-shadow */
    background: #600 url(/images/botten.png) top left no-repeat;

}

div#bottom {
    /* Och här kommer högerdelen av skuggan längs underkanten */
    height: 8px;

    margin-left: 8px;

    /* Drop-shadow */
    background: #600 url(/images/botten.png) top right no-repeat;
}

/**
 * Själva sidinnehållet.
 */
div#dynamicContent {
    padding-right: 17em;
    border: 1px solid #000;
    border-top: none;
    overflow: hidden;
    background-color: #dc8;
}

div#contentwrapper {
    float: left;
    width: 100%;
    background: #ffebb0;
    border-right: 1px solid #900;
    padding-bottom: 32767px;
    margin-bottom: -32760px;
}

/**
 * Affischbakgrund till förstasidan
 */
body#nu div#contentwrapper {
    background: #ffebb0;
}

div#content {
    position: relative;
    padding: 1em;
}

div#flash {
    /**
     * Tillfälliga meddelanden som visas mha rails flash-funktion.
     * Visas mellan menyerna och själva sidinnehållet.
     */
    margin-right: -19em;
    text-align: center;
    background-color: rgb(221, 204, 136);
    color: #000;
    border-bottom: 1px solid #900;
    padding: 0.3em;
    margin: 0;
}

/**
 * Diverse formattering.
 */

h1 {
    font-family: "Trebuchet MS", "Lucida Sans", Verdana, Arial, sans-serif;
    margin-top: 0px;
    text-align: center;
    margin-bottom: 0px;
}

h2 {
    font-family: "Trebuchet MS", "Lucida Sans", Verdana, Arial, sans-serif;
    margin-bottom: 0px;
}

.hidden {
    display: none;
}

h3, h4 {
    margin-bottom: 0;
}

td h3, td p {
    margin-top: 0.4em;
}

div.documentCategory {
    margin-left: 2em;
}


/**
 * FIXME: Ta bort, ersätt med specifika klasser för länkarna istället
 */
div.actionlinks {
    font-size: 0.75em;
}

div.actionlinks a {
    font-weight: bold;
}

.signedUp {
    font-weight: bold;
}

a {
    color: #00f;
    text-decoration: none;
}

a:hover {
    cursor: pointer;
    text-decoration: underline;
}

a:visited {
    color: #606;
}

/**
 * Länkar för att "göra saker" (lägg till/radera/redigera o dyl)
 * behöver inte ha en speciell färg för besökta länkar
 */
a.actionlink {
    font-size: 0.75em;
    font-weight: bold;
}

a.actionlink:visited {
    color: #00f;
}

/**
 * Diskretare actionlänkar
 */
a.notice, a.notice:visited {
    color: #666;
}

/**
 * Ersättare för a.noaction för actions som inte är tillgängliga,
 * t.ex. att ladda ner senaste versionen av en fil innan en första
 * version finns uppladdad.
 */
span.noaction {
    font-size: 0.75em;
    font-weight: bold;
    color: #666;
}

.time {
    font-weight: bold;
}
legend.time {
    font-size: 1.5em;
}

.infoText, .updateMark {
    font-size: 80%;
    font-weight: bold;
    background-color: #900;
    color: #fff;
    padding: 0 2px;
}


div#map-wrapper {
    width: 180px;
    margin: auto;
}

img.map {
    border: 1px solid #000;
}


div.user-image-area {
    text-align: center;
}

a img.user-thumbnail {
    border: 1px solid #900;
}

a:hover img.user-thumbnail {
    border: 1px solid #00f;
}

a.user-link:visited {
    color: #00f;
}

.people {
    padding-left: 2em;
}

.people li {
    list-style: none;
}

ul.horizontal {
    list-style: none;
    margin-left: auto;
    margin-right: auto;
}

.horizontal li {
    display: inline;
}