cvs: phpweb / sitewide.css userprefs.js /include layout.inc /styles mirror.css phpnet.css site.css
| From: | Gabor Hojtsy | Date: | Sun, 24 Aug 2003 11:45:55 +0000 |
| Subject: | cvs: phpweb / sitewide.css userprefs.js /include layout.inc /styles mirror.css phpnet.css site.css | ||
| Groups: | php.mirrors | ||
| Request: | Send a blank email to php-mirrors+get-20572@lists.php.net to get a copy of this message | ||
goba Sun Aug 24 07:45:55 2003 EDT
Added files:
/phpweb/styles mirror.css phpnet.css site.css
Removed files:
/phpweb sitewide.css
Modified files:
/phpweb userprefs.js
/phpweb/include layout.inc
Log:
Put CSS and JS to their own place, and stop using JS for constant
styling. Use mirror specific style sheets instead which will be cached,
and applied faster than JS, and also work with JS disabled browsers.
Index: phpweb/userprefs.js diff -u phpweb/userprefs.js:1.6 phpweb/userprefs.js:1.7 --- phpweb/userprefs.js:1.6 Sat Aug 23 13:33:20 2003 +++ phpweb/userprefs.js Sun Aug 24 07:45:53 2003 @@ -1,7 +1,6 @@ // Default document onload function function runOnLoad() { - addImages(); searchHistory(); } @@ -74,53 +73,6 @@ break; } } - } - } -} - -// Make images appear by the side of TOC items on the manual pages, -// and let sidebar background images properly display on all sites. -// This is not a user based function, but a mirror based one. Only -// php.net has images on a different server. For performance -// reasons, the code is implemented to run on the client side. -function addImages() -{ - // Check if we are on the master site or not - staticContent = (location.hostname == "www.php.net" || - location.hostname == "php.net") ? - "http://static.php.net/www.php.net/" : "/"; - - // If DOM is supported, get the <div>s - if (document.getElementsByTagName) { - - divs = document.getElementsByTagName("div"); - - // Change the style of every div tag which is in - // the "toci" or "toca" class, modifying the class - // according to the hostname - for (var i = 0; i < divs.length; i++) { - if (divs[i].className == "toci") { - divs[i].style.backgroundImage = "url(" + staticContent + "images/box-0.gif)"; - } else if(divs[i].className == "toca") { - divs[i].style.backgroundImage = "url(" + staticContent + "images/box-1.gif)"; - } - } - } - - // Check for an element with a given ID - if (document.getElementById) { - - layout_2 = document.getElementById("layout_2"); - layout_3 = document.getElementById("layout_3"); - - // Two column layout - if (layout_2) { - layout_2.style.backgroundImage = "url(" + staticContent + "images/leftbar.png)"; - } - - // Three column layout - else if (layout_3) { - layout_3.style.backgroundImage = "url(" + staticContent + "images/leftbar.png)"; } } } Index: phpweb/include/layout.inc diff -u phpweb/include/layout.inc:1.191 phpweb/include/layout.inc:1.192 --- phpweb/include/layout.inc:1.191 Sat Aug 23 13:33:20 2003 +++ phpweb/include/layout.inc Sun Aug 24 07:45:54 2003 @@ -1,5 +1,5 @@ <?php -/* $Id: layout.inc,v 1.191 2003/08/23 17:33:20 goba Exp $ */ +/* $Id: layout.inc,v 1.192 2003/08/24 11:45:54 goba Exp $ */ // Set the static content root differently on php.net $_SERVER['STATIC_ROOT'] = ($MYSITE == 'http://www.php.net/') ? @@ -98,13 +98,19 @@ $layout_helper = "<div id=\"layout_{$PAGE_COLUMNS}_helper\">"; } + // Choose name of mirror site specific CSS file + $mirror_specific_style = ($_SERVER['STATIC_ROOT'] ? 'phpnet' : 'mirror'); + print <<<END_HEADER <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>PHP{$title}</title> - <style type="text/css">@import url("{$_SERVER['STATIC_ROOT']}/sitewide.css");</style> + <style type="text/css"> + @import url("{$_SERVER['STATIC_ROOT']}/styles/site.css"); + @import url("{$_SERVER['STATIC_ROOT']}/styles/{$mirror_specific_style}.css"); + </style> <link rel="shortcut icon" href="{$_SERVER['STATIC_ROOT']}/favicon.ico" /> <script type="text/javascript" src="{$_SERVER['STATIC_ROOT']}/userprefs.js"></script>$base$meta </head> @@ -406,11 +412,15 @@ if (!empty($SEARCH_BASE)) { $PBASE = $SEARCH_BASE; } if (!empty($_SERVER['BASE_HREF'])) { $PBASE = $_SERVER['BASE_HREF']; } + // Choose name of mirror site specific CSS file + $mirror_specific_style = ($_SERVER['STATIC_ROOT'] ? 'phpnet' : 'mirror'); + ?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>PHP<?php if ($title) echo ": $title";?></title> <link rel="stylesheet" href="<?php echo $_SERVER['STATIC_ROOT']; ?>/style.css" /> + <link rel="stylesheet" href="<?php echo $_SERVER['STATIC_ROOT'] . "/styles/" . $mirror_specific_style; ?>.css" /> <link rel="shortcut icon" href="<?php echo $_SERVER['STATIC_ROOT']; ?>/favicon.ico" /> <script language="Javascript" type="text/javascript" src="<?php echo $_SERVER['STATIC_ROOT']; ?>/userprefs.js"></script> <?php echo (isset($PBASE) ? ' <base href="' . $PBASE . '" />' : ''); ?></head> Index: phpweb/styles/mirror.css +++ phpweb/styles/mirror.css /* TOC elements on manual pages ------------------------------------------- */ div.toci { background-image: url(/images/box-0.gif); } div.toca { background-image: url(/images/box-1.gif); } /* Left sidebar background ------------------------------------------------ */ #layout_2, #layout_3 { background-image: url(/images/leftbar.png); } Index: phpweb/styles/phpnet.css +++ phpweb/styles/phpnet.css /* TOC elements on manual pages ------------------------------------------- */ div.toci { background-image: url(http://static.php.net/www.php.net/images/box-0.gif); } div.toca { background-image: url(http://static.php.net/www.php.net/images/box-1.gif); } /* Left sidebar background ------------------------------------------------ */ #layout_2, #layout_3 { background-image: url(http://static.php.net/www.php.net/images/leftbar.png); } Index: phpweb/styles/site.css +++ phpweb/styles/site.css /* General page styles ---------------------------------------------------- */ body, html { margin: 0px; padding: 0px; color: black; background-color: white; } body, input, textarea, select, option { font-family: verdana, arial, helvetica, sans-serif; } code, pre, tt { font-family: Courier, "Courier New", monospace; } #content, #headmenu, #footnav, #copyright, #thismirror, #headsearch span, #headsearch input, #headsearch select { font-size: 85%; } a, a:visited, a:hover { color: #000099; background-color: transparent; } a:active { color: #0000ff; background-color: transparent; } h1, h2, h3, h4 { font-weight: bold; color: #000066; background-color: transparent; } h1 { font-size: 130%; } h2 { font-size: 125%; } h3 { font-size: 110%; } h4 { font-size: 100%; } input.max, textarea.max, select.max { width: 100%; } img { border: 0px; } div.tip { border: 1px solid #0000cc; color: #000066; background-color: #eeeeff; padding: 0px 8px; } p.formerror, p.warn { border: 1px solid #666600; color: #660000; background-color: #ffeeee; margin: 4px; padding: 6px; } hr { border: 0px; color: black; background-color: black; height: 1px; clear: both; } center { text-align: center; } center table { margin-left: auto; margin-right: auto; text-align: left; } center th { text-align: center; } newsdate { font-size: smaller; font-style: italic; color: #6666cc; background-color: transparent; } div.indent { margin-left: 50px; } li { padding-top: 3px; padding-bottom: 3px; } em { font-weight: bold; font-style: italic; } ul.simple { padding-left: 8px; } ul.simple li { padding: 0px; list-style-type: none; } /* Content are styles ----------------------------------------------------- */ #content { padding: 10px; } #content h1 { margin-top: 0px; } /* Layout styling and helpers --------------------------------------------- */ #layout_2, #layout_3 { /* Background image will be set in client side script */ background-position top left; background-repeat: repeat-y; } #layout_3_helper { /* TODO: Background to the right */ } cleaner { clear: both; height: 1px; font-size: 1px; } #leftbar { float: left; width: 186px; padding: 5px; font-size: smaller; } #layout_2 #content { margin-left: 196px; } /* Header navigation area ------------------------------------------------- */ #headnav { color: inherit; background-color: #9999cc; height: 67px; position: relative; } #headnav img { border: 0px; margin: 0px 3px; } #headmenu { position: absolute; bottom: 0px; right: 5px; text-align: right; padding-left: 126px; } #headsearch { background-color: #666699; border-width: 1px 0px; border-color: #333366; border-style: solid; text-align: right; padding-right: 6px; font-size: 75%; color: white; } #headsearch input.submit { vertical-align: baseline; } #headsearch form, #headsearch p { margin: 0px; } #headsearch span.shortkey { text-decoration: underline; } /* Footer navigation area ------------------------------------------------- */ #footnav { color: inherit; background-color: #9999cc; border-width: 1px 0px; border-color: #333366; border-style: solid; text-align: right; padding-right: 6px; } #pagefooter { position: relative; font-size: 75%; color: inherit; background-color: #cccccc; width: 100%; } #thismirror { text-align: right; margin-left: 50%; padding: 6px; } #copyright { position: absolute; top: 0px; left: 0px; padding: 6px; margin-right: 50%; } #footnav a, #headmenu a { font-size: 75%; text-decoration: none; } /* Credits page styles ---------------------------------------------------- */ e { background-color: #ccccff; color: inherit; font-weight: bold; } h { background-color: #9999cc; color: inherit; font-weight: bold; } v, .vr { background-color: #cccccc; color: inherit; } vr { text-align: right; } /* PHP source code highlighting ------------------------------------------- */ div.phpcode span.html { color: black; background-color: transparent; } div.phpcode span.comment { color: #FF8000; background-color: transparent; } div.phpcode span.default { color: #0000BB; background-color: transparent; } div.phpcode span.keyword { color: #007700; background-color: transparent; } div.phpcode span.string { color: #DD0000; background-color: transparent; } /* Standard tables -------------------------------------------------------- */ table.standard td { background-color: #eeeeee; color: inherit; } table.standard th { background-color: #cccccc; color: inherit; } table.standard td.sub, table.standard th.sub, table.standard th.subr { background-color: #dddddd; color: inherit; } table.standard th.subr { text-align: right; vertical-align: top; } /* Mirror listing tables -------------------------------------------------- */ table.mirrors td { background-color: #eeeeee; color: inherit; font-size: smaller; } table.mirrors th { background-color: #cccccc; color: inherit; } table.mirrors th.ch { text-align: left; } table.mirrors th img { border: 1px solid #000000; } table.mirrors th.flag { width: 45px; } table.mirrors tr.this td { background-color: #ffffcc; color: inherit; } table.mirrors td.caret { text-align: right; background-color: white !important; color: inherit; } /* Calendar table --------------------------------------------------------- */ table#cal { font-size: smaller; background-color: #a0a0a0; color: inherit; } table#cal td { background-color: #f0f0f0; color: inherit; vertical-align: top; } table#cal a { text-decoration: none; } table#cal a:hover { text-decoration: underline; } table#cal a.day { float: right; font-weight: bold; color: #666666; background-color: transparent; } table#cal div.event { margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px dashed #000000; } table#calnav td, table#cal td.notaday { background-color: #d0d0d0; color: inherit; } table#cal a.cat1 { color: green; background-color: transparent; } table#cal a.cat3 { color: black; background-color: transparent; } /* Logos table ------------------------------------------------------------ */ table#logos { background-color: #f0f0f0; color: inherit; } table#logos td { vertical-align: middle; } table#logos td.logo, table#logos td.logob { text-align: center; width: 33%; background-color: #ffffff; color: inherit; } table#logos td.logob { background-color: #000000; color: inherit; } table#logos td.star { width: 20px; } table#logos td ul { padding-left: 15px; list-style-type: square; } /* User notes on manual pages --------------------------------------------- */ div#usernotes { background-color: #e0e0e0; color; inherit; } div#usernotes div.head, div#usernotes div.foot { background-color: #d0d0d0; color: inherit; padding: 4px; } div#usernotes div.foot { text-align: right; } div#usernotes div.foot a, div#usernotes div.head a { color: black; background-color: transparent; } div#usernotes span.action { float: right; } div#usernotes div.note { padding: 4px; } div#usernotes div.text { background-color: #f0f0f0; color: inherit; padding: 2px; margin-top: 4px; }
Index: phpweb/userprefs.js diff -u phpweb/userprefs.js:1.6 phpweb/userprefs.js:1.7 --- phpweb/userprefs.js:1.6 Sat Aug 23 13:33:20 2003 +++ phpweb/userprefs.js Sun Aug 24 07:45:53 2003 @@ -1,7 +1,6 @@ // Default document onload function function runOnLoad() { - addImages(); searchHistory(); } @@ -74,53 +73,6 @@ break; } } - } - } -} - -// Make images appear by the side of TOC items on the manual pages, -// and let sidebar background images properly display on all sites. -// This is not a user based function, but a mirror based one. Only -// php.net has images on a different server. For performance -// reasons, the code is implemented to run on the client side. -function addImages() -{ - // Check if we are on the master site or not - staticContent = (location.hostname == "www.php.net" || - location.hostname == "php.net") ? - "http://static.php.net/www.php.net/" : "/"; - - // If DOM is supported, get the <div>s - if (document.getElementsByTagName) { - - divs = document.getElementsByTagName("div"); - - // Change the style of every div tag which is in - // the "toci" or "toca" class, modifying the class - // according to the hostname - for (var i = 0; i < divs.length; i++) { - if (divs[i].className == "toci") { - divs[i].style.backgroundImage = "url(" + staticContent + "images/box-0.gif)"; - } else if(divs[i].className == "toca") { - divs[i].style.backgroundImage = "url(" + staticContent + "images/box-1.gif)"; - } - } - } - - // Check for an element with a given ID - if (document.getElementById) { - - layout_2 = document.getElementById("layout_2"); - layout_3 = document.getElementById("layout_3"); - - // Two column layout - if (layout_2) { - layout_2.style.backgroundImage = "url(" + staticContent + "images/leftbar.png)"; - } - - // Three column layout - else if (layout_3) { - layout_3.style.backgroundImage = "url(" + staticContent + "images/leftbar.png)"; } } } Index: phpweb/include/layout.inc diff -u phpweb/include/layout.inc:1.191 phpweb/include/layout.inc:1.192 --- phpweb/include/layout.inc:1.191 Sat Aug 23 13:33:20 2003 +++ phpweb/include/layout.inc Sun Aug 24 07:45:54 2003 @@ -1,5 +1,5 @@ <?php -/* $Id: layout.inc,v 1.191 2003/08/23 17:33:20 goba Exp $ */ +/* $Id: layout.inc,v 1.192 2003/08/24 11:45:54 goba Exp $ */ // Set the static content root differently on php.net $_SERVER['STATIC_ROOT'] = ($MYSITE == 'http://www.php.net/') ? @@ -98,13 +98,19 @@ $layout_helper = "<div id=\"layout_{$PAGE_COLUMNS}_helper\">"; } + // Choose name of mirror site specific CSS file + $mirror_specific_style = ($_SERVER['STATIC_ROOT'] ? 'phpnet' : 'mirror'); + print <<<END_HEADER <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>PHP{$title}</title> - <style type="text/css">@import url("{$_SERVER['STATIC_ROOT']}/sitewide.css");</style> + <style type="text/css"> + @import url("{$_SERVER['STATIC_ROOT']}/styles/site.css"); + @import url("{$_SERVER['STATIC_ROOT']}/styles/{$mirror_specific_style}.css"); + </style> <link rel="shortcut icon" href="{$_SERVER['STATIC_ROOT']}/favicon.ico" /> <script type="text/javascript" src="{$_SERVER['STATIC_ROOT']}/userprefs.js"></script>$base$meta </head> @@ -406,11 +412,15 @@ if (!empty($SEARCH_BASE)) { $PBASE = $SEARCH_BASE; } if (!empty($_SERVER['BASE_HREF'])) { $PBASE = $_SERVER['BASE_HREF']; } + // Choose name of mirror site specific CSS file + $mirror_specific_style = ($_SERVER['STATIC_ROOT'] ? 'phpnet' : 'mirror'); + ?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>PHP<?php if ($title) echo ": $title";?></title> <link rel="stylesheet" href="<?php echo $_SERVER['STATIC_ROOT']; ?>/style.css" /> + <link rel="stylesheet" href="<?php echo $_SERVER['STATIC_ROOT'] . "/styles/" . $mirror_specific_style; ?>.css" /> <link rel="shortcut icon" href="<?php echo $_SERVER['STATIC_ROOT']; ?>/favicon.ico" /> <script language="Javascript" type="text/javascript" src="<?php echo $_SERVER['STATIC_ROOT']; ?>/userprefs.js"></script> <?php echo (isset($PBASE) ? ' <base href="' . $PBASE . '" />' : ''); ?></head> Index: phpweb/styles/mirror.css +++ phpweb/styles/mirror.css /* TOC elements on manual pages ------------------------------------------- */ div.toci { background-image: url(/images/box-0.gif); } div.toca { background-image: url(/images/box-1.gif); } /* Left sidebar background ------------------------------------------------ */ #layout_2, #layout_3 { background-image: url(/images/leftbar.png); } Index: phpweb/styles/phpnet.css +++ phpweb/styles/phpnet.css /* TOC elements on manual pages ------------------------------------------- */ div.toci { background-image: url(http://static.php.net/www.php.net/images/box-0.gif); } div.toca { background-image: url(http://static.php.net/www.php.net/images/box-1.gif); } /* Left sidebar background ------------------------------------------------ */ #layout_2, #layout_3 { background-image: url(http://static.php.net/www.php.net/images/leftbar.png); } Index: phpweb/styles/site.css +++ phpweb/styles/site.css /* General page styles ---------------------------------------------------- */ body, html { margin: 0px; padding: 0px; color: black; background-color: white; } body, input, textarea, select, option { font-family: verdana, arial, helvetica, sans-serif; } code, pre, tt { font-family: Courier, "Courier New", monospace; } #content, #headmenu, #footnav, #copyright, #thismirror, #headsearch span, #headsearch input, #headsearch select { font-size: 85%; } a, a:visited, a:hover { color: #000099; background-color: transparent; } a:active { color: #0000ff; background-color: transparent; } h1, h2, h3, h4 { font-weight: bold; color: #000066; background-color: transparent; } h1 { font-size: 130%; } h2 { font-size: 125%; } h3 { font-size: 110%; } h4 { font-size: 100%; } input.max, textarea.max, select.max { width: 100%; } img { border: 0px; } div.tip { border: 1px solid #0000cc; color: #000066; background-color: #eeeeff; padding: 0px 8px; } p.formerror, p.warn { border: 1px solid #666600; color: #660000; background-color: #ffeeee; margin: 4px; padding: 6px; } hr { border: 0px; color: black; background-color: black; height: 1px; clear: both; } center { text-align: center; } center table { margin-left: auto; margin-right: auto; text-align: left; } center th { text-align: center; } newsdate { font-size: smaller; font-style: italic; color: #6666cc; background-color: transparent; } div.indent { margin-left: 50px; } li { padding-top: 3px; padding-bottom: 3px; } em { font-weight: bold; font-style: italic; } ul.simple { padding-left: 8px; } ul.simple li { padding: 0px; list-style-type: none; } /* Content are styles ----------------------------------------------------- */ #content { padding: 10px; } #content h1 { margin-top: 0px; } /* Layout styling and helpers --------------------------------------------- */ #layout_2, #layout_3 { /* Background image will be set in client side script */ background-position top left; background-repeat: repeat-y; } #layout_3_helper { /* TODO: Background to the right */ } cleaner { clear: both; height: 1px; font-size: 1px; } #leftbar { float: left; width: 186px; padding: 5px; font-size: smaller; } #layout_2 #content { margin-left: 196px; } /* Header navigation area ------------------------------------------------- */ #headnav { color: inherit; background-color: #9999cc; height: 67px; position: relative; } #headnav img { border: 0px; margin: 0px 3px; } #headmenu { position: absolute; bottom: 0px; right: 5px; text-align: right; padding-left: 126px; } #headsearch { background-color: #666699; border-width: 1px 0px; border-color: #333366; border-style: solid; text-align: right; padding-right: 6px; font-size: 75%; color: white; } #headsearch input.submit { vertical-align: baseline; } #headsearch form, #headsearch p { margin: 0px; } #headsearch span.shortkey { text-decoration: underline; } /* Footer navigation area ------------------------------------------------- */ #footnav { color: inherit; background-color: #9999cc; border-width: 1px 0px; border-color: #333366; border-style: solid; text-align: right; padding-right: 6px; } #pagefooter { position: relative; font-size: 75%; color: inherit; background-color: #cccccc; width: 100%; } #thismirror { text-align: right; margin-left: 50%; padding: 6px; } #copyright { position: absolute; top: 0px; left: 0px; padding: 6px; margin-right: 50%; } #footnav a, #headmenu a { font-size: 75%; text-decoration: none; } /* Credits page styles ---------------------------------------------------- */ e { background-color: #ccccff; color: inherit; font-weight: bold; } h { background-color: #9999cc; color: inherit; font-weight: bold; } v, .vr { background-color: #cccccc; color: inherit; } vr { text-align: right; } /* PHP source code highlighting ------------------------------------------- */ div.phpcode span.html { color: black; background-color: transparent; } div.phpcode span.comment { color: #FF8000; background-color: transparent; } div.phpcode span.default { color: #0000BB; background-color: transparent; } div.phpcode span.keyword { color: #007700; background-color: transparent; } div.phpcode span.string { color: #DD0000; background-color: transparent; } /* Standard tables -------------------------------------------------------- */ table.standard td { background-color: #eeeeee; color: inherit; } table.standard th { background-color: #cccccc; color: inherit; } table.standard td.sub, table.standard th.sub, table.standard th.subr { background-color: #dddddd; color: inherit; } table.standard th.subr { text-align: right; vertical-align: top; } /* Mirror listing tables -------------------------------------------------- */ table.mirrors td { background-color: #eeeeee; color: inherit; font-size: smaller; } table.mirrors th { background-color: #cccccc; color: inherit; } table.mirrors th.ch { text-align: left; } table.mirrors th img { border: 1px solid #000000; } table.mirrors th.flag { width: 45px; } table.mirrors tr.this td { background-color: #ffffcc; color: inherit; } table.mirrors td.caret { text-align: right; background-color: white !important; color: inherit; } /* Calendar table --------------------------------------------------------- */ table#cal { font-size: smaller; background-color: #a0a0a0; color: inherit; } table#cal td { background-color: #f0f0f0; color: inherit; vertical-align: top; } table#cal a { text-decoration: none; } table#cal a:hover { text-decoration: underline; } table#cal a.day { float: right; font-weight: bold; color: #666666; background-color: transparent; } table#cal div.event { margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px dashed #000000; } table#calnav td, table#cal td.notaday { background-color: #d0d0d0; color: inherit; } table#cal a.cat1 { color: green; background-color: transparent; } table#cal a.cat3 { color: black; background-color: transparent; } /* Logos table ------------------------------------------------------------ */ table#logos { background-color: #f0f0f0; color: inherit; } table#logos td { vertical-align: middle; } table#logos td.logo, table#logos td.logob { text-align: center; width: 33%; background-color: #ffffff; color: inherit; } table#logos td.logob { background-color: #000000; color: inherit; } table#logos td.star { width: 20px; } table#logos td ul { padding-left: 15px; list-style-type: square; } /* User notes on manual pages --------------------------------------------- */ div#usernotes { background-color: #e0e0e0; color; inherit; } div#usernotes div.head, div#usernotes div.foot { background-color: #d0d0d0; color: inherit; padding: 4px; } div#usernotes div.foot { text-align: right; } div#usernotes div.foot a, div#usernotes div.head a { color: black; background-color: transparent; } div#usernotes span.action { float: right; } div#usernotes div.note { padding: 4px; } div#usernotes div.text { background-color: #f0f0f0; color: inherit; padding: 2px; margin-top: 4px; }