[matthijs/projects/wipi.git] / static / deadfoxjunction / css / screen.css

/*@import url('../../modern/css/screen.css');*/

html, body {
        margin:0px;
        padding:0px;
}


html {
        background-color: black;
}

/* Put some wooden boards behind the site */
body {
        background-image: url('../img/background.jpg');
        background-repeat: no-repeat;
}


/* Build the main layout. The header is left, the page is right and the footer
 * ends up below both. We also clear #footerbottom so all of the floating
 * stuff in the footer will still stretch up the body element and get a
 * background. */
#header {
        float: left;
        width: 320px;
}

#page {
        float: left;
        width: 730px;
}

body {
        /* Ensure that both floats fit next to each other, even on small
         * screens */
        min-width: 1080px;
        /* Leave a bit of space open at the top */
        padding-top: 60px;
}

#footer, #footerbottom {
        clear: both;
}

/****************************************
 * Set up the menu bar at the left 
 ****************************************/

#header {
        padding-left: 30px;
        padding-top: 60px;
}


/* Make the menubar and the logo the same width, so the menu items are nicely
 * centered between the logo. Note that this width is a bit more than the
 * width of #header, so the logo and menu will "stick out" (but end up in the
 * margin of the "window" to the right, so it will look fine). */
#header #logo, #menubar {
        width: 344px;
}

#menubar {
        /* Put the logo and the menu a bit closer (they both have some empty
         * space at the bottom resp. top). */
        margin-top: -40px;
}

#menubar ul {
        /* Disable all default list-style stuff */
        padding-left:0px;
        margin:0;
        list-style-type:none;
        list-style-position:outside;
}

#menubar li {
        /* Center the menu items */
        text-align: center;

        /* Set a big font */
        font-family: serif;
        font-size: 35px;
        font-weight: bold;

        /* And set up some spacing */
        height: 60px;
}

#menubar li img {
}

/* Disable underlining */
#menubar li a {
        text-decoration:none;
}

/* Give the menu bar links a hover color */
#menubar li a:hover {
        color:#FFD200;
}


/****************************************
 * Set up the fancy window around the content
 ****************************************/


/* All of these parts have the same width, including the frame (actual window
 * will be smaller) */
#pagetop, #pagemiddle, #pagebottom {
        width: 730px;
}

/* Set the background images and heights */
#pagetop {
        height:390px;
        background-image:url('../img/frame/top.png');
} 

#pagemiddle {
        background-image:url('../img/frame/middle.png');
        background-repeat:repeat-y;
}

#pagebottom{
        height: 204px;
        background-image:url('../img/frame/bottom.png');
        background-repeat: no-repeat;
}

#pagemiddle {
        /* Add padding to prevent the margins from the stuff inside
         * #pagemiddle (div, p, h1) from sticking out at the top */
        padding-top: 1px;
}

#window {
        /* Move the window div up 330 pixels, so it ends up in the black part
         * of the top frame image */
        position: relative;
        top: -330px;
        /* Shorten the window div by 330 + 140 pixels, since the rest of the
         * layout doesn't take the relative positioning into account, and we
         * also want the window to stick out 140 pixels, into the black part
         * of the bottom frame image. */
        margin-bottom: -470px;

        /* Prevent near empty pages from looking silly. */      
        min-height: 400px;
}

/* Crop #page, since due to the relative positioning stuff, the background
 * image of #pagemiddle sticks out a few hundreds of pixels at the bottom.
 * This is a bit of a hack, but well. */
#page {
        overflow: hidden;
}

#window {
        /* Keep the window away from the frame edges */
        padding: 0 100px;
}

/****************************************
 * Set up the content formatting
 ****************************************/

/* Set up a fallback color, used for text outside of the content area (login
 * link, editbar, etc.) */
body, body a, body a:visited {
        color: #ffd200;
}

/* Set up main text color */
#content {
        color:#b79265;
}

/* Set up header colors */
#content h1,
#content h2,
#content h3 {
        color:#824900;
}

#content a, #content a:visited {color: #9F2900;}
#content a:hover, #content a:visited:hover {color: #ffd200;}
#content a.nonexistent, #content a.badinterwiki {color: #cc8900;}


/* Set up fonts */
#content {
        font-family:verdana, sans-serif;
        font-size:11px;
}
#content h1 {
        font-size:17px;
}
#content h2 {
        font-size:15px;
}

/* Disable the standard borders on tables, they are ugly */
table {
        border:0px;
}

/* Table with horizontal lines (historically classed "border") */
table.border td {
        border:0px;
        border-bottom:1px solid #5A1800;
}

/* Header rows */
tr.kop1 {
        background-color:#BEAA76;
}

tr.kop2 {
        background-color:#F1E5CB;
}


/****************************************
 * Set up the editor interface
 ****************************************/

/* Make sure that the text area and comment field don't flow out at the right.
 * Using width: 100% didn't work for some reason, so we'll fix this to the
 * width of #window minus its padding */
#editor textarea, #editor input[type=text] {
        width: 530px;
}

/* Put a bit of space between the buttons and the text area */
#editor-textarea {
        margin-top: 0.5em;
}

/* Help is more clear when monospaced */
#editor-help {
        font-family: monospace;
}


/****************************************
 * Set up the stuff in the footer
 ****************************************/

/* Format the pageinfo bar. */
#pageinfo {
        float: right;
        margin: 0px 12px;
}

/* Format the username bar, copied from the modern theme */
#username {
        float: left;
        display: inline;
        margin: 0px 12px;
        padding: 0;
        text-align: right;
        font-size: 0.82em;
        white-space: nowrap;
}

#username li {
        display: inline;
        padding: 0 0.5em 0 0;
}

#searchform {
        /* Put the searchform below the pageinfo / username bar */
        clear: both;
        float: right;
        /* Put a bit of offset between the pageinfo and searchform. Don't use
     * margin here, that collapses with the floating pageinfo. */
        padding-top: 10px;
}

/****************************************
 * Set up the stuff in the footer (the thing that contains the edit link)
 ****************************************/

.editbar {
        /* Disable all default list-style stuff */
        list-style-type:none;
        list-style-position:outside;
        padding-left:0px;
        margin-top: 0px;
        margin-bottom: 0px;

        /* And indent a bit to align with the content text (width of #header +
         * padding-left of #content) */
        margin-left: 500px;
}

ul.editbar li {
        /* Put menu items horizontally */
        display:inline;
        /* But not completely squashed together */
        margin-right: 20px;
}

/* Really put the more actions dropdown horizontally */
.editbar form, .editbar form div {
        display: inline;
}

/* Use a sane text color with all the below backgrounds */
.diff { 
        color: black; 
}
/* Diff view, copied from modern/screen.css */
.diff-header {
        font-weight: bold;
}

.diff-title {
        background-color: #C0C0C0;
}

.diff-added {
        background-color: #E0FFE0;
        vertical-align: sub;
}

.diff-removed {
        background-color: #FFFFE0;
        vertical-align: sub;
}

.diff-added span {
        background-color: #80FF80;
}

.diff-removed span {
        background-color: #FFFF80;
}
/* vim: set sw=4 sts=4 expandtab */