/*@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;
}

#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 */