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