themes/printable/css/default.css
author Dan
Fri, 05 Oct 2007 01:57:00 -0400
changeset 162 e1a22031b5bd
parent 161 bed9d04fa144
child 650 e45183014778
permissions -rw-r--r--
Major revamps to the template parser. Fixed a few security holes that could allow PHP to be injected in untimely places in TPL code. Improved Ux for XSS attempt in tplWikiFormat. Documented many functions. Backported much cleaner parser from 2.0 branch. Beautified a lot of code in the depths of the template class. Pretty much a small-scale Extreme Makeover.

/**
 * Printable page theme for Enano
 * Designed by Dan Fuhry, (C) 2006
 * This theme is Free Software; see the file "GPL" included with this package for details.
 */
 
/* The basics */
html,body                          { height: 100%; }
body                               { /* color added in 1.0.2 to fix light text in dark desktop themes */ color: #202020; margin: 0; padding: 0; background-color: #FFFFFF; font-family: trebuchet ms, verdana, arial, helvetica, sans-serif; font-size: 9pt; }
.holder                            { border: 1px solid #CCCCCC; padding: 1px; background-color: #FFFFFF; color: #444444 }
div.pad                            { padding: 10px; }                         
table#title                        { margin: 0; padding: 0; height: 100px; background-color: #90B0D0; text-align: center; }

/* Sidebar */
td.mdgSidebarHolder                { width: 140px; }
div.sidebar, .dbx-group            { width: 138px; background-color: #F8F8F8; border-left: 1px solid #CCC; border-right: 1px solid #CCC; padding: 1px 0px 0px 0px; }
div.sidebar .head, .dbx-handle             { background-color: #F0F0F0;  display: block; margin: 0px 1px 1px 1px; font-family: Trebuchet MS, Arial, helvetica, sans-serif; font-size: 7pt; cursor: pointer; text-decoration: none; color: #111; padding: 5px; font-weight: bold; }
div.sidebar .head:hover, .dbx-handle:hover { background-color: #F4F4F4;  display: block; margin: 0px 1px 1px 1px; font-family: Trebuchet MS, Arial, helvetica, sans-serif; font-size: 7pt; cursor: pointer; text-decoration: none; color: #111; padding: 5px; font-weight: bold; }
div.sidebar div.slideblock a, .dbx-content li             { background-color: #DDD;     display: block; margin: 0px 1px; border-bottom: 1px solid #FFF; font-family: Trebuchet MS, Arial, helvetica, sans-serif; font-size: 7pt; cursor: pointer; text-decoration: none; color: #666; padding: 5px 5px 5px 9px; list-style-type: none; }
div.sidebar div.slideblock a:hover, .dbx-content li:hover { background-color: #EEE;     display: block; margin: 0px 1px; border-bottom: 1px solid #FFF; font-family: Trebuchet MS, Arial, helvetica, sans-serif; font-size: 7pt; cursor: pointer; text-decoration: none; color: #666; padding: 5px 5px 5px 9px; }
div.recttop                        { width: 140px; height: 12px; margin: 0; padding: 0; }
td.recttoptop                      { width: 100%;  height: 12px; background-image: url(../images/bleu/border-menu-t.gif);   background-repeat: repeat-x;  margin: 0; padding: 0; }
td.recttoptop:hover                { width: 100%;  height: 12px; background-image: url(../images/bleu/border-menu-t-h.gif); background-repeat: repeat-x;  margin: 0; padding: 0; cursor: pointer; }
div.rectbot                        { width: 140px; height: 12px; margin: 0; padding: 0; }  
td.rectbottop                      { width: 100%;  height: 12px; background-image: url(../images/bleu/border-btm.gif); background-repeat: repeat-x;  margin: 0; padding: 0; }
div.slideblock, .dbx-content       { overflow: hidden; background-color: #DDD; }
div.slideblock2                    { overflow: hidden; background-color: #DDD; margin: 0px 1px 0px 1px; }
.dbx-handle                        { cursor: move !important; }

/* The credits thingy at the bottom */
div#credits                        { margin: 10px; border-top: 1px solid #C0C0C0; padding: 10px 0; color: #AAA; font-size: 7pt; }
div#credits a                      { color: #B0B0B0; text-decoration: underline; }
div#credits a:hover                { color: #B0B0B0; text-decoration: underline; }

/* The link hidden in plain "site" at the top of the page */
td#mainhead a                      { text-decoration: none; color: #000000; }
td#mainhead a:hover                { text-decoration: none; color: #000000; border-bottom: 1px dotted #406080; }

/* Text, headings, and links inside the main div (usually #ajaxEditContainer but used some other places as well) */
div.contentDiv h2                                                                    { border-bottom: 1px solid #B0B0B0; margin-bottom: 0; }
div.contentDiv h3                                                                    { font-size: 11pt; font-weight: bold; }
div.contentDiv li                        , div#messageBox li                         { list-style: url(../images/bullet.gif); }
div.contentDiv p                         , div#messageBox p                          { margin-left: 1.0em; }
div.contentDiv blockquote                , div#messageBox blockquote                 { background-color: #F4F4F4; border: 1px dotted #406080; margin: 1em; padding: 10px; max-height: 250px; overflow: auto; }
div.contentDiv                           , div#messageBox                            { font-size: 9pt; }
div.contentDiv a                         , div#messageBox a                          { color: #909090; }
div.contentDiv a:hover                   , div#messageBox a:hover                    { color: #B0B0B0; }
div.contentDiv a[href ^="http://"]       , div#messageBox a[href ^="http://"]        { color: #A0A0A0; }
div.contentDiv a[href ^="https://"]      , div#messageBox a[href ^="https://"]       { color: #A0A0A0; }
div.contentDiv a[href ^="mailto:"]       , div#messageBox a[href ^="mailto:"]        { color: #A0A0A0; }
div.contentDiv a[href ^="irc://"]        , div#messageBox a[href ^="irc://"]         { color: #A0A0A0; }
div.contentDiv a[href ^="http://"]:hover , div#messageBox a[href ^="http://"]:hover  { color: #C0C0C0; }
div.contentDiv a[href ^="https://"]:hover, div#messageBox a[href ^="https://"]:hover { color: #C0C0C0; }
div.contentDiv a[href ^="mailto:"]:hover , div#messageBox a[href ^="mailto:"]:hover  { color: #C0C0C0; }
div.contentDiv a[href ^="irc://"]:hover  , div#messageBox a[href ^="irc://"]:hover   { color: #C0C0C0; }

/* Wikilinks to pages that don't exist */
div.contentDiv a.wikilink-nonexistent       { color: #707070; border-bottom: 1px dotted #B05020; text-decoration: none; }
div.contentDiv a.wikilink-nonexistent:hover { color: #707070; border-bottom: 1px dotted #B05020; text-decoration: none; }

/* Well, not Midget and not comments (usually), but that's what the class is called ;-). Basically an informational window or used as a wrapper for tables. */
.mdg-comment, .mdg-infobox        { margin-left: 1em; padding: 7px; border: 1px solid #AAAAAA; background-color: #E8E8E8; }

.tblholder                        { margin: 10px 0 0 0; padding: 0; border-width: 0 0 1px 1px; border-style: solid; border-color: #AAAAAA; background-color: #E8E8E8; }

/* The beautiful tables inside what may not obviously be mdg-comment divs */
div.tblholder td.row1             { padding: 4px; border-color: #E0E0E0; border-width: 1px 1px 0 0; border-style: solid; background-color: #FFFFFF; }
div.tblholder td.row2             { padding: 4px; border-color: #F0F0F0; border-width: 1px 1px 0 0; border-style: solid; background-color: #FFFFFF; }
div.tblholder td.row3             { padding: 4px; border-color: #E8E8E8; border-width: 1px 1px 0 0; border-style: solid; background-color: #FFFFFF; }
div.tblholder th                  { padding: 4px; border-color: #7080A0; border-width: 1px 1px 0 0; border-style: solid; background-color: #FFFFFF; font-weight: bold; text-align: center; color: #000000; }
div.tblholder th.subhead          { padding: 4px; border-color: #90A0B0; border-width: 1px 1px 0 0; border-style: solid; background-color: #FFFFFF; font-weight: bold; text-align: center; color: #000000; }
div.tblholder table               { background-color: #FFFFFF; width: 100%; }

/* The "page tools" bar below the site logo but above the page content 
div.pagebar                       { background-color: #B0D0F0; margin-top: 0px; padding: 3px; font-size: 7pt; }
div.pagebar a                     { cursor: pointer; padding: 3px; margin-left: 3px; margin-right: 3px; text-decoration: none; color: #406080; }
div.pagebar a.selected            { background-color: #FFFFFF; color: #000040; font-weight: bold; }
div.pagebar a:hover               { cursor: pointer; padding: 3px; margin-left: 3px; margin-right: 3px; text-decoration: none; color: #406080; background-color: #D0F0FF; }
div.pagebar input                 { font-family: Bon Apetit, sans-serif; font-size: 7pt; border: 0; margin: 0px 0px 0px 0px; text-decoration: none; color: #406080; background-color: #E0F0FF; } 
div.pagebar input:hover           { font-family: Bon Apetit, sans-serif; font-size: 7pt; border: 0; margin: 0px 0px 0px 0px; text-decoration: none; color: #406080; background-color: #D0F0FF; }
div.pagebar input:focus           { font-family: Bon Apetit, sans-serif; font-size: 7pt; border: 0; margin: 0px 0px 0px 0px; text-decoration: none; color: #406080; background-color: #F0F0FF; }
*/

/*
 * jBox menu system
 */

div.menu {
  background-color: #B0D0F0;
  font-size: 7pt;
  border-width: 0;
}
div.menu a, div.menu div.label {
  padding: 2.5pt 5px;
  margin-right: 3px;
  text-decoration: none;
  display: block;
  float: left;
  color: #406080;
}
div.menu div.label {
  color: #001020;
  cursor: default;
}
div.menu span.sep {
  display: block;
  float: left;
  width: 5px;
}
div.menu div.multopts {
  line-height: 17pt;
}
div.menu div.multopts a, div.menu div.multopts div.label {
  float: none;
  display: inline;
}
div.menu a.liteselected, div.menu a.liteselected:hover, div.menu a:hover {
  color: #406080;
  background-color: #D0F0FF;
}
div.menu input[type ^="text"], div.menu input[type ^="password"] {
  border-width: 0;
  font-size: 9pt;
  padding: 4px 5px;
  max-width: 70px;
  background-color: #D0F0FF;
}
div.menu input[type ^="text"]:hover, div.menu input[type ^="password"]:hover {
  background-color: #E0F0FF;
}
div.menu input[type ^="text"]:focus, div.menu input[type ^="password"]:focus {
  background-color: #F0F0FF;
}
div.menu input[type ^="button"], div.menu input[type ^="submit"] {
  border-width: 0;
  font-size: 9pt;
  padding: 3px 5px;
  max-width: 70px;
}
div.menu a.current, div.menu a.current:hover, div.menu a.selected, div.menu a.selected:hover {
  color: #000040;
  background-color: #FFFFFF;
}
div.menu ul {
  display: none;
  position: absolute;
  padding: 0;
  margin: 0;
  background-color: #B0D0F0;
  border-width: 0;
  min-width: 120px;
}
div.menu ul li {
  list-style: none;
}
div.menu ul a {
  float: none;
  margin: 0;
}
span.menuclear {
  font-size: 1px;
  height: 0px;
  width: 0px;
  clear: left;
  line-height: 0px;
  display: block;
}

/* Rounded corners on nearly everything */
td#mdg-tl                         { width: 12px; height: 12px;     background: url(../images/bleu/border-tl.gif);    }
td#mdg-tr                         { width: 12px; height: 12px;     background: url(../images/bleu/border-tr.gif);    }
td#mdg-top                        {                                background: url(../images/bleu/border-top.gif);   }
td#mdg-l                          { width: 12px; height: 12px;     background: url(../images/bleu/border-l.gif);     }
td#mdg-r                          { width: 12px; height: 12px;     background: url(../images/bleu/border-r.gif);     }
td#mdg-bl                         { width: 12px; height: 12px;     background: url(../images/bleu/border-tb-l.gif);  }
td#mdg-br                         { width: 12px; height: 12px;     background: url(../images/bleu/border-tb-r.gif);  }
td#mdg-ml                         { width: 12px; height: 12px;     background: url(../images/bleu/border-m-l.gif);   }
td#mdg-mr                         { width: 12px; height: 12px;     background: url(../images/bleu/border-m-r.gif);   }
td#mdg-brl                        { width: 12px; height: 1px;      background: url(../images/bleu/border-m-l.gif);   }
td#mdg-brr                        { width: 12px; height: 1px;      background: url(../images/bleu/border-m-r.gif);   }
td#mdg-btl                        { width: 12px; height: 1px;      background: url(../images/bleu/border-btm-l.gif); }
td#mdg-btr                        { width: 12px; height: 1px;      background: url(../images/bleu/border-btm-r.gif); }
td#mdg-btcl                       { width: 12px; height: 12px;     background: url(../images/bleu/border-bl.gif);    }
td#mdg-btcr                       { width: 12px; height: 12px;     background: url(../images/bleu/border-br.gif);    }
td#mdg-btm                        {              height: 12px;     background: url(../images/bleu/border-btm.gif);   }
td.mdg-menu-top                   { width: 84%;  height: 12px;     background: url(../images/bleu/border-menu-t.gif); margin: 0; padding: 0; background-repeat: repeat-x; font-size: 2px; }
td.mdg-menu-tl                    { width: 12px; height: 12px;     background: url(../images/bleu/border-menu-l.gif); background-position: left  top; background-repeat: no-repeat; }
td.mdg-menu-tr                    { width: 12px; height: 12px;     background: url(../images/bleu/border-menu-r.gif); background-position: right top; background-repeat: no-repeat; }
td.mdg-menu-bl                    { width: 12px; height: 12px;     background: url(../images/bleu/border-bl.gif);    }
td.mdg-menu-br                    { width: 12px; height: 12px;     background: url(../images/bleu/border-br.gif);    }
td.mdg-menu-btm                   {              height: 12px;     background: url(../images/bleu/border-btm.gif);   }

/* Buttons and textboxes - these settings are used almost everywhere */
input, textarea, select                   { border: 1px solid #406080; background-color: #F2F2F2; padding: 3px; font-family: arial, helvetica, sans-serif; font-size: 9pt; }
input:hover, textarea:hover, select:hover { border: 1px solid #6080A0; background-color: #F8F8F8; padding: 3px; }
input:focus, textarea:focus, select:focus { border: 1px solid #90B0D0; background-color: #FFFFFF; padding: 3px; }
label                                     { padding: 3px; cursor: pointer; }
label:hover                               { padding: 3px; cursor: pointer; background-color: #F0F0F0; }
input#pageheading                         { font-size: 14pt; border-bottom: 1px solid #90B0D0; margin-bottom: 0; }

/* JWS window theming */
div.jswindow                      { border: 2px solid #7090B0; border-top: 5px solid #7090B0; padding: 0px; font-family: Trebuchet MS, tahoma, verdana, arial, sans-serif; font-size: 9pt; display: none; position: absolute; background-color: #FFFFFF; }
div.titlebar                      { background-color: #7090B0; color: #FFFFFF; font-family: Trebuchet MS, tahoma, verdana, arial, sans-serif; font-size: 9pt; padding-bottom: 4px; cursor: default; }
div.titlebar div.closebtn         { width: 16px; height: 16px; border: 1px solid #B0D0F0; background-color: #90B0D0; display: block; }
div.titlebar div.closebtn:hover   { width: 16px; height: 16px; border: 1px solid #FFFFFF; background-color: #B0D0F0; display: block; }
div.titlebar table, div.titlebar td { margin: 0; padding: 0; }
div.jswindow div.content          { padding: 10px; margin: 0; background-color: #FFFFFF; }

/* The Wordpress-like fills behind checkboxes and their labels */
.catCheck                         { padding: 3px; }
.catCheck:hover                   { padding: 3px; background-color: #F0F0F0; }

/* Information, warning, question, error, and wait boxes */
div.error-box                     { background-image: url(../../../images/error.png);    background-repeat: no-repeat; background-color: #FFF4F4; border: 1px dashed #406080; padding: 10px 10px 10px 50px; margin: 1em 0 0 1em; min-height: 25px; }
div.info-box                      { background-image: url(../../../images/info.png);     background-repeat: no-repeat; background-color: #F4F4FF; border: 1px dashed #406080; padding: 10px 10px 10px 50px; margin: 1em 0 0 1em; min-height: 25px; }
div.warning-box                   { background-image: url(../../../images/warning.png);  background-repeat: no-repeat; background-color: #FFFFF4; border: 1px dashed #406080; padding: 10px 10px 10px 50px; margin: 1em 0 0 1em; min-height: 25px; }
div.question-box                  { background-image: url(../../../images/question.png); background-repeat: no-repeat; background-color: #F4FFF4; border: 1px dashed #406080; padding: 10px 10px 10px 50px; margin: 1em 0 0 1em; min-height: 25px; }
div.wait-box                      { background-image: url(../../../images/wait.png);     background-repeat: no-repeat; background-color: #FFF4FF; border: 1px dashed #406080; padding: 10px 10px 10px 50px; margin: 1em 0 0 1em; min-height: 25px; }

/* This stuff is mostly unused, left in for compatibility */
div#ajaxEditContainer table       { border: 0px solid #FFFFFF; }
div#ajaxEditContainer td          { margin: 1px; }
/* div#ajaxEditContainer             { overflow: auto; } /* Makes ajaxEditContainer scroll horizontally in firefox if the content is too wide - prevents that ugly clipping effect */
div#ajaxEditContainer pre         { margin-left: 1em; background-color: #F8F8F8; border: 1px dashed #90B0D0; padding: 10px; overflow: auto; max-height: 150px; }

/* Tables where diffs are shown */
table.diff, td.diff-otitle, td.diff-ntitle { background-color: white; }
td.diff-addedline { background: #cfc; font-size: smaller; }
td.diff-deletedline { background: #ffa; font-size: smaller; }
td.diff-context { background: #eee; font-size: smaller; }
span.diffchange { color: red; font-weight: bold; }

/* toolbar */
div.toolbar {
  border-bottom: 1px solid #909090;
  background-color: #D0D0D0;
  padding: 2px 0;
  height: 22px;
  font-family: arial, sans-serif;
  font-size: 8pt;
}
div.toolbar ul {
  margin: 0;
  padding: 0;
}
div.toolbar ul li {
  list-style: none;
  margin: 0;
  float: left;
}
div.toolbar a img {
  opacity: 0.6;
  /*filter: alpha(opacity=60);*/
}
div.toolbar a:hover img {
  opacity: 1;
  /*filter: alpha(opacity=100);*/
}
div.toolbar a {
  display: block;
  padding: 2px;
  border: 1px solid transparent;
  cursor: default;
  width: auto;
  color: #000000;
  margin: 0 2px;
  max-height: 16px;
  text-decoration: none;
}
div.toolbar a:hover {
  border: 1px solid #202090;
  background-color: #ceceed;
  color: #000000;
  text-decoration: none;
}
div.toolbar a:active {
  border: 1px solid #A0A0A0;
  background-color: #E0E0E0;
}
div.toolbar img {
  margin: 0;
  padding: 0;
  display: inline;
  border-width: 0px;
}
div.toolbar a span {
  position: relative;
  top: -4px;
}
div.toolbar li span {
  padding-left: 2px;
  padding-right: 5px;
}

/* vertical toolbar */
div.toolbar_vert {
  border: 1px solid #909090;
  background-color: #D0D0D0;
  padding: 2px 0;
}
div.toolbar_vert ul {
  margin: 0;
  padding: 0;
}
div.toolbar_vert ul li {
  list-style: none;
  margin: 0;
}
div.toolbar_vert a img {
  opacity: 0.6;
  /*filter: alpha(opacity=60);*/
}
div.toolbar_vert a:hover img {
  opacity: 1;
  /*filter: alpha(opacity=100);*/
}
div.toolbar_vert a {
  display: block;
  padding: 2px;
  border: 1px solid transparent;
  cursor: default;
  width: auto;
  color: #000000;
  margin: 0 2px;
  max-height: 16px;
  text-decoration: none;
}
div.toolbar_vert a:hover {
  border: 1px solid #202090;
  background-color: #ceceed;
  color: #000000;
  text-decoration: none;
}
div.toolbar_vert a:active {
  border: 1px solid #A0A0A0;
  background-color: #E0E0E0;
}
div.toolbar_vert img {
  margin: 0;
  padding: 0;
  display: inline;
  border-width: 0px;
}
div.toolbar_vert a span {
  position: relative;
  top: -4px;
}
div.toolbar_vert li span {
  padding-left: 2px;
  padding-right: 5px;
}