static/deadfoxjunction/css/screen.css

   1 /*@import url('../../modern/css/screen.css');*/
   2
   3 html, body {
   4         margin:0px;
   5         padding:0px;
   6 }
   7
   8
   9 html {
  10         background-color:#0a0000;
  11 }
  12
  13 /* Put some wooden boards behind the site */
  14 body {
  15         background-image: url('../img/background.jpg');
  16         background-repeat: repeat;
  17 }
  18
  19
  20 #header #logo {
  21         width: 329px;
  22         height: 162px;
  23         margin-top: 60px;
  24         margin-left: 45px;
  25 }
  26
  27 /* Build the main layout. The header is left, the page is right and the footer
  28  * ends up below both. We also clear #footerbottom so all of the floating
  29  * stuff in the footer will still stretch up the body element and get a
  30  * background. */
  31 #header {
  32         float: left;
  33         width: 400px;
  34 }
  35
  36 #page {
  37         float: left;
  38 }
  39
  40 #footer, #footerbottom {
  41         clear: both;
  42 }
  43
  44 /****************************************
  45  * Set up the menu bar at the left
  46  ****************************************/
  47
  48 ul#menubar {
  49         /* Disable all default list-style stuff */
  50         padding-left:0px;
  51         margin:0;
  52         list-style-type:none;
  53         list-style-position:outside;
  54
  55 }
  56
  57 ul#menubar li {
  58         /* Center the menu items */
  59         text-align: center;
  60
  61         /* Set a big font */
  62         font-family: serif;
  63         font-size: 35px;
  64         font-weight: bold;
  65
  66         /* And set up some spacing */
  67         height: 50px;
  68 }
  69
  70 /* Disable underlining */
  71 ul#menubar li a {
  72         text-decoration:none;
  73 }
  74
  75 /* Give the menu bar links a hover color */
  76 ul#menubar li a:hover {
  77         color:#FFD200;
  78 }
  79
  80
  81 /****************************************
  82  * Set up the fancy window around the content
  83  ****************************************/
  84
  85
  86 /* All of these parts have the same width, including the frame (actual window
  87  * will be smaller) */
  88 #page, #pagetop, #pagemiddle, #pagebottom {
  89         width: 730px;
  90 }
  91
  92 /* Set the background images and heights */
  93 #pagetop {
  94         height:390px;
  95         background-image:url('../img/frame/top.png');
  96 }
  97
  98 #pagemiddle {
  99         background-image:url('../img/frame/middle.png');
 100         background-repeat:repeat-y;
 101 }
 102
 103 #pagebottom{
 104         height: 204px;
 105         background-image:url('../img/frame/bottom.png');
 106         background-repeat: no-repeat;
 107 }
 108
 109 #pagemiddle {
 110         /* Add padding to prevent the margins from the stuff inside
 111          * #pagemiddle (div, p, h1) from sticking out at the top */
 112         padding-top: 1px;
 113 }
 114
 115 #window {
 116         /* Move the window div up 330 pixels, so it ends up in the black part
 117          * of the top frame image */
 118         position: relative;
 119         top: -330px;
 120         /* Shorten the window div by 330 + 140 pixels, since the rest of the
 121          * layout doesn't take the relative positioning into account, and we
 122          * also want the window to stick out 140 pixels, into the black part
 123          * of the bottom frame image. */
 124         margin-bottom: -470px;
 125
 126         /* Prevent near empty pages from looking silly. */
 127         min-height: 400px;
 128 }
 129
 130 /* Crop #page, since due to the relative positioning stuff, the background
 131  * image of #pagemiddle sticks out a few hundreds of pixels at the bottom.
 132  * This is a bit of a hack, but well. */
 133 #page {
 134         overflow: hidden;
 135 }
 136
 137 #window {
 138         /* Keep the window away from the frame edges */
 139         padding: 0 100px;
 140 }
 141
 142 /****************************************
 143  * Set up the content formatting
 144  ****************************************/
 145
 146 /* Set up a fallback color, used for text outside of the content area (login
 147  * link, editbar, etc.) */
 148 body, body a, body a:visited {
 149         color: #ffd200;
 150 }
 151
 152 /* Set up main text color */
 153 #content {
 154         color:#b79265;
 155 }
 156
 157 /* Set up header colors */
 158 #content h1,
 159 #content h2,
 160 #content h3 {
 161         color:#824900;
 162 }
 163
 164 #content a, #content a:visited {color: #9F2900;}
 165 #content a:hover, #content a:visited:hover {color: #ffd200;}
 166 #content a.nonexistent, #content a.badinterwiki {color: #cc8900;}
 167
 168
 169 /* Set up fonts */
 170 #content {
 171         font-family:verdana, sans-serif;
 172         font-size:11px;
 173 }
 174 #content h1 {
 175         font-size:17px;
 176 }
 177 #content h2 {
 178         font-size:15px;
 179 }
 180
 181 /* Disable the standard borders on tables, they are ugly */
 182 table {
 183         border:0px;
 184 }
 185
 186 /* Table with horizontal lines (historically classed "border") */
 187 table.border td {
 188         border:0px;
 189         border-bottom:1px solid #5A1800;
 190 }
 191
 192 /* Header rows */
 193 tr.kop1 {
 194         background-color:#BEAA76;
 195 }
 196
 197 tr.kop2 {
 198         background-color:#F1E5CB;
 199 }
 200
 201
 202 /****************************************
 203  * Set up the editor interface
 204  ****************************************/
 205
 206 /* Make sure that the text area and comment field don't flow out at the right.
 207  * Using width: 100% didn't work for some reason, so we'll fix this to the
 208  * width of #window minus its padding */
 209 #editor textarea, #editor input[type=text] {
 210         width: 530px;
 211 }
 212
 213 /* Put a bit of space between the buttons and the text area */
 214 #editor-textarea {
 215         margin-top: 0.5em;
 216 }
 217
 218 /* Help is more clear when monospaced */
 219 #editor-help {
 220         font-family: monospace;
 221 }
 222
 223
 224 /****************************************
 225  * Set up the stuff in the footer
 226  ****************************************/
 227
 228 /* Format the pageinfo bar. */
 229 #pageinfo {
 230         float: right;
 231         margin: 0px 12px;
 232 }
 233
 234 /* Format the username bar, copied from the modern theme */
 235 #username {
 236         float: left;
 237         display: inline;
 238         margin: 0px 12px;
 239         padding: 0;
 240         text-align: right;
 241         font-size: 0.82em;
 242         white-space: nowrap;
 243 }
 244
 245 #username li {
 246         display: inline;
 247         padding: 0 0.5em 0 0;
 248 }
 249
 250 #searchform {
 251         /* Put the searchform below the pageinfo / username bar */
 252         clear: both;
 253         float: right;
 254         /* Put a bit of offset between the pageinfo and searchform. Don't use
 255      * margin here, that collapses with the floating pageinfo. */
 256         padding-top: 10px;
 257 }
 258
 259 /****************************************
 260  * Set up the stuff in the footer (the thing that contains the edit link)
 261  ****************************************/
 262
 263 .editbar {
 264         /* Disable all default list-style stuff */
 265         list-style-type:none;
 266         list-style-position:outside;
 267         padding-left:0px;
 268         margin-top: 0px;
 269         margin-bottom: 0px;
 270
 271         /* And indent a bit to align with the content text (width of #header +
 272          * padding-left of #content) */
 273         margin-left: 500px;
 274 }
 275
 276 ul.editbar li {
 277         /* Put menu items horizontally */
 278         display:inline;
 279         /* But not completely squashed together */
 280         margin-right: 20px;
 281 }
 282
 283 /* Really put the more actions dropdown horizontally */
 284 .editbar form, .editbar form div {
 285         display: inline;
 286 }
 287
 288 /* Use a sane text color with all the below backgrounds */
 289 .diff {
 290         color: black;
 291 }
 292 /* Diff view, copied from modern/screen.css */
 293 .diff-header {
 294         font-weight: bold;
 295 }
 296
 297 .diff-title {
 298         background-color: #C0C0C0;
 299 }
 300
 301 .diff-added {
 302         background-color: #E0FFE0;
 303         vertical-align: sub;
 304 }
 305
 306 .diff-removed {
 307         background-color: #FFFFE0;
 308         vertical-align: sub;
 309 }
 310
 311 .diff-added span {
 312         background-color: #80FF80;
 313 }
 314
 315 .diff-removed span {
 316         background-color: #FFFF80;
 317 }
 318 /* vim: set sw=4 sts=4 expandtab */