pbcss

Understanding screen-dot-css

Page history last edited by Kernigh 2 yrs ago

Understanding screen.css

Return to the FrontPage
How to use this Site

The following is a copy of the themes/skin5/screen.css file at http://static2.pbwiki.com/themes/skin5/screen.css, associated with the Snakeskin Theme. Snakeskin is the default skin for new wikis; you can look at Snakeskin. There are actually other screen.css files, one for each skin, but all interact with the same html elements.

This page is divided into sections, each section explaining how that section works. Some aspects of the screen.css file can be Altered/Customized if it is Copy/Pasted onto the end of your wiki.css File.

If you have a custom CSS Script that works well with PBWiki, then please refer to the page for More Custom CSS for PBWiki, and post it there to share with others!

Understanding screen.css

/****************************************************************
COMMON GRID ELEMENTS
****************************************************************/
body {
background:url("images/bg_pattern.gif") 0 0 repeat;
color:#000000;
font:100% Verdana, Tahoma, sans-serif;
margin:0;
min-width:700px;
padding:0;
text-align:center;
}

The "body" is the outermost rectangle containing the entire web page. So the CSS on the body affects the entire page. It sets up the default black color:#000000; sans-serif font for the entire page. The margin:0; and padding:0; abolishes the space that browsers normally put in between the viewport edge and the body. So if you log in with a PBwiki identity, the "my PBwiki" bar will appear flush against the top-right of the viewport.

The url to the background image is relative to the stylesheet (see CSS 2.1: URLs and URIs). Because the stylesheet is at http://static2.pbwiki.com/themes/skin5/screen.css, the background image is the one at http://static2.pbwiki.com/themes/skin5/images/bg_pattern.gif, presently a 1x7 white (not transparent) gif, which becomes the white background of the page.

You change these defaults by using a body { ... } clause in your wiki.css file.

#root {
text-align:left;
margin: 10px;
border-top:4px solid #c2cdad;
}

PBwiki wraps everything (except the My PBwiki bar) in a div id="root" element. This represents the big box of Snakeskin, the one with 10px margins around it. However, though this draws a snake-scale border for the top of the box, but not the left, right, or bottom borders. Note that PBwiki wraps the div id="root" in a div id="wrapper-root" element.

Top

header

/****************************************************************
SUBPAGE SPECIFIC ELEMENTS
****************************************************************/
/*
Header
*/
#header {
background:#fff;
position: relative;
padding: 8px 17px 8px;
border-bottom: 1px solid #e8e8e8;
border-left:4px solid #c2cdad;
border-right:4px solid #c2cdad;
}
#header:after {
content: "."; 
display: block; 
height:0; 
clear: both; 
visibility: hidden;
}
#header {
display:block;
}

The div id="header" element appears at the top of the page and contains the wiki name, page name, and search box. There are some simple things that you could do in wiki.css, for example #header { background: yellow; } to change the color of the header.

The invisible #header:after { ... } exists only to set the clear: both; attribute. This guarantees that the next thing under the header will be completely underneath floating elements in or before the header, such as the search box. (Otherwise, there is that chance that the search box protrudes down and messes up everything else on that page, especially if for some reason you go use CSS to make the search box very tall.)

Though Snakeskin does not use it, there is also a div id="wrapper-header" around the header. For example, if you wanted the header to have two borders, then in your wiki.css you could write #wrapper-header { border: ...; } for the outer border and #header { border: ...; } for the inner border.

Top

header h1 (useless)

#header h1 {
display:block;
/* TODO - put this back in sensibly */
background: url("images/logo_small.gif") 0 0 no-repeat;
position:absolute;
right: 20px;
top:15px;
margin: 0;
padding: 0;
}
#header h1 a {
display:block;
height:20px;
width:19px;
}
#header h1 a span {
display:none;
}

There is no h1 element anywhere in the header, so this CSS is useless. The web browser will ignore these declarations because there is nothing to apply them to.

The background image http://static2.pbwiki.com/themes/skin5/images/logo_small.gif also does not exist. The skin6 (Minimalist) version http://static2.pbwiki.com/themes/skin6/images/logo_small.gif does exist, and the current Minimalist screen.css does use it.

Top

header h2

#header h2 {
color:#d13123;
font:175% Georgia, "Times New Roman", Times, serif;
margin:0 18px 0 0;
padding:0;
float: left;
}
#header h2 a {
color:#d13123;
text-decoration: none;
}
#header h2 a:hover {
text-decoration: none;
}

The header does have an h2 element; it is that name of the wiki in red. This element contains an a element that links to the wiki's FrontPage. Since normally links are a different color and underlined, the CSS turns that off.

You could underline the link with #header h2 a { text-decoration: underline;} in your wiki.css, or make it turn green on hovering with #header h2 a:hover { color: green; }.

Top

header h3

#header h3 {
color: #ba7112;
font:175% Georgia, "Times New Roman", Times, serif;
border-left:2px solid #ba7112;
margin:0;
padding:0 0 0 20px;
float: left;
}

This here is a target for customisation; in wiki.css put #header h3 { ... } and change the appearance of the text that names your wiki page. The default font is brown. You could go italic with #header h3 { font-style: italic; } or Small Caps with #header h3 { font-variant: small-caps; }.

header p.premium (useless)

#header p.premium {
float: left;
margin:5px 10px 0 -3px;
padding:0;
background:url("images/button_premium_small.gif") 0 0 no-repeat;
width:66px;
height:25px;
}
#header p.premium a {
display:block;
height:25px;
}
#header p.premium a span {
display:none;
}

There does not seem to be a p class="premium" anywhere in the header, so this CSS is useless and extra. The image http://pbcss.pbwiki.com/images/button_premium_small.gif also does not exist.

Top

search-box

/* search-box */
.search-box {
position: absolute;
float: right;
text-align: right;
right: 11px;
top: 13px;
width: 80px;
}
.search-box form {
margin:0;
padding:0;
}
.search-box form div .input-search {
height: 21px;
height: 15px;
width: 80px;
width: 76px;
padding: 2px;
margin: 0 1px 0 0;
vertical-align: middle;
border: 1px solid #838383;
background: #fff;
font: normal 68.75% Verdana, Arial, "Times New Roman", Times, serif;
color: #666;
}
.search-box form div .input-search:focus {
background: #fffacc;
}

The div class="search-box" id="search-box" in the header contains a form representing the "search here" widget. This div contains a form, which contains a div, which contains an input class="input-search" id="input-search" for text input. Though the CSS uses classes, you could easily use the ids with #search-box { ... } and #input-search { ... } clauses in your wiki.css or getElementById in your JavaScript. In fact, it is useless to write another class="search-box" element into a wiki page, since it would only appear on top of the existing search-box.

Top

menu (useless)

/*
Menu
*/
#menu {
background: #f6f6f6;
border-bottom: 1px solid #c5d89f;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul:after {
content: "."; 
display: block; 
height:0; 
clear: both; 
visibility: hidden;
}
#menu ul {
display:block;
}
#menu ul li {
margin: 0;
padding: 0;
float: left;
background: url("images/bg_menu.gif") 100% 4px no-repeat;
}
#menu ul li a,
#menu ul li span {
text-decoration: none;
color: #646464;
font: normal 68.75% Tahoma, Verdana, Arial, "Times New Roman", Times, serif;
padding:7px 16px 8px 12px;
display: block;
}
#menu ul li span {
text-decoration: underline;
color:#000000;
}
#menu ul li a:hover,
#menu ul li a:hover span {
color:#000000;
text-decoration: underline;
cursor:pointer;cursor:hand;
}
/* first tab */
#menu ul li.first a,
#menu ul li.first span {
padding-left:22px;
}
#menu ul li.first a span {
padding-left:0;
}
/* last tab */
#menu ul li.last a,
#menu ul li.last span {
padding-right:30px;
}
#menu ul li.last a span {
padding-right:0;
}
#menu ul li a span {
font-size: 100%;
background: none;
padding:0;
text-decoration: none;
color: #646464;
}

This CSS is completely useless, because there is no element id="menu" anywhere on the page. Because in your wiki.css you can invent as many ids and classes you want, you can ignore the above code.

Top

wrapper-functional

/*
wrapper-functional
*/
.wrapper-functional {
padding: 7px 17px 7px;
background: #c2cdad;
position: relative;
border-left:4px solid #c2cdad;
border-right:4px solid #c2cdad;
}
.wrapper-functional:after {
content: "."; 
display: block; 
height:0; 
clear: both; 
visibility: hidden;
}
.wrapper-functional {
display:block;
}

Top

sub-menu

/* sub-menu */
.sub-menu {
padding: 0 215px 0 0;
}
.sub-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.sub-menu ul:after {
content: "."; 
display: block; 
height:0; 
clear: both; 
visibility: hidden;
}
.sub-menu ul {
display:block;
}
.sub-menu ul li {
margin: 0 3px 0 0;
padding: 0;
float: left;
}
.sub-menu ul li a,
.sub-menu ul li span {
text-decoration: none;
color: #fff;
font: normal 75% Verdana, Arial, "Times New Roman", Times, serif;
padding:3px 10px 4px;
display: block;
background: #0367ad;
cursor:pointer;cursor:hand;
border:2px solid #c2cdad;
}
.sub-menu ul li span {
color:#fff;
background: #889471;
}
.sub-menu ul li a:hover,
.sub-menu ul li.active a{
text-decoration: none;
border:2px solid #fffdc5;
}
.sub-menu ul li a span {
font-size: 100%;
background: none;
border:none;
padding:0;
text-decoration: none;
color: #fff;
}

Now this is very interesting. Customise this and you can change the appearance of Snakeskin's two rows of blue buttons. The div class="sub-menu" contains one ul element with several li elements, each containing an a element containing a span element. With .sub-menu ul li a span { ... } rules you can actually style the button text whichever way you want, overriding the browser default for hyperlinks (a elements).

Do not bother adding more div class="sub-menu" elements inside wiki pages, as those would conflict with #displaycontent rules later in this screen.css.

sub-menu-2

/* sub-menu-2 */
.sub-menu-2 {
position: absolute;
top: 0;
right:0;
width: 215px;
width: 211px;
padding:11px 4px 0 0;
text-align: right;
font: normal 68.75% Verdana, Arial, "Times New Roman", Times, serif;
}
.sub-menu-2 a {
background: url("images/arrow1.gif") 0 50% no-repeat;
padding:0 0 0 10px;
margin:0 10px 0 0;
color:#0367ad;
}

This makes the menu that contains the "settings" and "help" links (or "log in" and "help" if you are not logged in). By applying your own .sub-menu-2 { ... } and .sub-menu-2 a { ... } rules you can change their appearance.

There is a .sub-menu-2 { position: absolute; } rule above, but the .wrapper-functional { position: relative; } rule higher up affects it. Following the spec for CSS, the sub menu is absolutely positioned within the element class="wrapper-functional", not the body.

Top

last-modified

/*
last-modified
*/
.last-modified {
border-bottom: 1px solid #c5d89f;
color: #606060;
padding: 5px 23px;
font-size: 62.5%;
}
.last-modified p a {
color: #606060;
}
/*
wrapper-information
*/
.wrapper-information {
color:#7a7a7a;
}
.wrapper-information table {
margin:0;
padding:0;
border:0;
width:100%;
background:#e3e3e3;
}
.wrapper-information table td {
background:#fff;
vertical-align:top;
width:33%;
font:normal 68.75% Verdana, Tahoma, sans-serif;
}
.wrapper-information #page-information,
.wrapper-information #wiki-information{
background:#ffffff;
}
.wrapper-information #wiki-premium {  
background:#FFFDDF; 
}
.wrapper-information a {     
color:#7f7f7f;  
} 
.wrapper-information h3 {
font-size:118.18%;
font-weight:bold;
margin:0 0 12px;
padding:10px 11px 9px;
border-bottom:1px solid #cfcfcf;
}
.wrapper-information #wiki-premium h3 {
font:normal 163.64% Georgia, Verdana, Tahoma, sans-serif;
color:#d13123;
margin:0 17px 12px;
padding:7px 0 7px;
border-bottom:1px solid #9d9d9d;
}
.wrapper-information p {
margin:0 17px 15px;
padding:0;
line-height:1.5em;
}
.wrapper-information p.learn-more {
font-weight:bold;
text-align:right;
margin:0 17px 10px;
}
.wrapper-information #wiki-premium {
color:#2d2d2d;
}
.wrapper-information ul {
margin:0 17px 15px;
padding:0;
line-height:1.5em;
}
.wrapper-information ul li {
list-style:none;
margin:0 0 4px;
padding:0 0 0 15px;
background: url("images/arrow1.gif") 0 7px no-repeat;
}
.wrapper-information ul.page li  {
padding:0 0 0 20px;
background: url("images/icon_page.gif") 0 3px no-repeat;
}
/*
Footer
*/
#footer {
padding: 8px 0 9px;
font-size: 62.5%;
color: #3a3a3a;
}
#footer:after {
content: "."; 
display: block; 
height:0; 
clear: both; 
visibility: hidden;
}
#footer {
display:block;
}
#footer p.f-menu {
text-align:right;
}
#footer p.f-menu a {
text-decoration:none; 
padding:0 0 0 8px;
background: url("images/arrow1.gif") 0 50% no-repeat;
color: #0367ad;
margin: 0 12px 0 0;
}
#footer p.f-menu a.rss {
margin: 0 6px 0 0;
}
#footer p.f-menu img {
margin:-2px 0 0 8px;
vertical-align:middle;
position:relative;
}
/*
Content
*/
#displaycontent {
background:#eaf3d9;
padding: 8px 17px 8px;
font-size:75%;
line-height:1.5em;
border-left:4px solid #c2cdad;
border-right:4px solid #c2cdad;
}
#displaycontent:after {
content: " ";
display: block;
height:0;
clear: both;
visibility: hidden;
}
#displaycontent {
display:block;
}
/****************************************************************
COMMON CONTENT ELEMENTS
****************************************************************/
img {
border:0;
}
/* Links */
a {
color:#0367ad;
text-decoration:underline;
}
a:hover {
text-decoration:none;
}
/* Typography */
p {
margin:0;
padding:0;
}
#displaycontent span.underlined {
text-decoration: underline;
}
#displaycontent span.box {
border: 1px solid #b8b7b7;
background:#fbfbfb;
color: #000000;
padding:0 4px;
}
#displaycontent h1 {
color: #000000;
font:2em Georgia, "Times New Roman", Times, serif;
font-weight:normal;
padding: 0;
margin: 0.67em 0;
}
#displaycontent h2 {
color: #63534c;
font:1.5em Georgia, "Times New Roman", Times, serif;
font-weight:bold;
padding: 0;
margin: 0.83em 0;
}
#displaycontent h3 {
color: #7d6c64;
font:1.17em Georgia, "Times New Roman", Times, serif;
font-weight:bold;
padding: 0;
margin: 1em 0;
}
#displaycontent h4 {
color: #7d6c64;
font:1em Georgia, "Times New Roman", Times, serif;
font-weight:bold;
padding: 0;
margin: 1.33em 0;
}
#displaycontent h5 {
color: #7d6c64;
font:0.83em Georgia, "Times New Roman", Times, serif;
font-weight:bold;
padding: 0;
margin: 1.67em 0;
}
#displaycontent h6 {
color: #7d6c64;
font:0.67em Georgia, "Times New Roman", Times, serif;
font-weight:bold;
padding: 0;
margin: 2.33em 0;
}
#displaycontent p {
padding: 0;
margin: 0 0 16px;
}
#displaycontent blockquote {
background:#fbfbfb;
border: 1px solid #b8b7b7;
color: #555555;
width: 85%;
margin: 0 auto 22px;
padding: 14px 18px 14px;
}
/* Lists */
#displaycontent ul {
margin-left: 16px;
padding: 0;
list-style: none;
}
#displaycontent ul li {
margin: 0;
padding: 0 0 0 12px;
background: url("images/dots1.gif") 0 8px no-repeat;
}
/****************************************************************
CONTENT SPECIFIC ELEMENTS
****************************************************************/
/*
SandBox
*/
#displaycontent p.random-text {
margin: 0 0 9px;
}
#displaycontent ul.examples-elements {
margin: 0;
padding: 0;
}
#displaycontent ul.examples-elements li {
margin: 0 0 1px;
padding: 0;
background: none;
}
#displaycontent ul.examples-elements ul {
margin: 10px 0 20px 12px;
padding: 0;
list-style: none;
}
#displaycontent ul.examples-elements ul li {
margin: 0;
padding: 0 0 0 12px;
background: url("images/dots1.gif") 0 8px no-repeat;
}
#displaycontent ul.gallery {
margin:9px 0 0;
padding: 0;
}
#displaycontent ul.gallery:after {
content: "."; 
display: block; 
height:0; 
clear: both; 
visibility: hidden;
}
#displaycontent ul.gallery {
display:block;
}
#displaycontent ul.gallery li {
margin:0;
padding: 0;
background: none;
float: left;
margin: 0 25px 14px 0;
}
#displaycontent ul.gallery li a {
border: 3px solid #889176;
display: block;
}
#displaycontent ul.gallery li a:hover {
border: 3px solid #000000;
}
#displaycontent ul.gallery li a img {
display: block;
}
#SideBar {
border-right: 2px solid #a6b190;
border-bottom: 2px solid #a6b190;
border-top:1px solid #a6b190;
border-left:1px solid #a6b190;
background-color: #c2cdad;
float: right;
clear:both; 
width: 200px;
padding:3px;
margin:10px 0px 0 20px;
font-size:0.8em;
color: #5a614c;
}
.SideBarTitle {
border-bottom: 1px solid #a6b190;
color:#5a614c;
font-size:1.5em;
font-weight:bold;
text-align:center;
padding:2px 0;
}
.SideBarTitle a {
color:#5a614c;
text-decoration:none;
}
.toc { 
background-color:#c2cdad;
border:1px solid #889176; 
float:left; 
padding:0 10px 0 30px;
margin-bottom: 10px;
}
.toc a { 
color:#5a614c; 
text-decoration:none; 
}
.toc a:hover {
text-decoration:underline;
}
.toc ol {
color:#5a614c; 
font-weight:bold; 
margin:0 0 0 10px; 
padding:0; 
}
.toc li ol { 
font-weight:normal; 
}
.toc li li ol { 
font-size:80% 
}
#displaycontent table {
border-collapse:collapse;
margin:10px 0;
}
#displaycontent table th,
#displaycontent table td {
background:#c2cdad; 
border:1px solid #889176;
padding:2px 4px;
}
#displaycontent table th {
background:#889176;
color:#fff;
font-weight: normal;
text-align: center;
}
#displaycontent table caption {
font-size: 83.33%;
margin:0;
padding:0;
text-align: right;
color: #63534c;
}
/*
Settings - toolbox
*/
#settings {
color: #747474;
font:11px Verdana, serif;
} 
#settings h3 {
color: #494949;
font:12px Verdana, serif;
font-weight:normal;
padding: 0 0 6px;
margin:0 0 7px;
border-bottom:1px solid #c2cdad;
position:relative;
}
#settings .active h3 {
color: #0367ad;
}
#settings-content input, label {
vertical-align:middle;
}
#settings-content input.text {
font:11px Verdana, serif;
color:#747474;
border:1px solid #a5acb2;
background:#ffffff;
height:20px;
height:16px;
padding:4px 0 0 5px;
}
#settings-content a {
color: #494949;
}
/* settings-menu */
#settings-menu {
float: left;
width:173px;
width:141px;
border:1px solid #c2cdad;
background:#fff;
padding:9px 15px 0;
}
#settings-menu h3 {
color: #232323;
font-weight:bold;
margin:0 0 10px;
}
#settings-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#settings-menu ul li {
margin: 0 0 12px;
padding: 0;
background:none;
color:#7c7c7c;
font-weight:bold;
}
#settings-menu ul li a {
font-weight:normal;
}
/* settings-content */
#settings-content {
margin:0 0 0 173px;
}
#settings-content .step {
border:1px solid #c2cdad;
background:#fff;
padding:9px 15px 4px;
margin: 0 0 10px 14px;
position:relative;
}
#settings-content .active {
border:3px solid #fffdc5;
background:#fff;
padding:7px 13px 2px;
margin: 0 0 10px 14px;
}
#settings-content .step p {
padding:0;
margin: 0 0 18px;
}
/* add-tags */
#settings-content .step h3 a.help {
position:absolute;
right:3px;
top:0;
background: url("images/icon_help.gif") 0 0 no-repeat;
width:15px;
height:15px;
}
#settings-content .step h3 a:hover.help {
background-position:0 -30px;
}
#settings-content .step h3 a.help span {
display:none;
}
#settings-content .step form.add-tags {
background: url("images/bg_line.gif") 50% 0 repeat-y;
margin: 0 0 19px;
padding:0;
}
#settings-content .step form.add-tags:after {
content: "."; 
/*display: block;*/ 
height:0; 
clear: both; 
visibility: hidden;
}
#settings-content .step form.add-tags {
display:block;
}
#settings-content .step form.add-tags .tag {
width:50%;
float:left;
}
#settings-content .step form.add-tags .tag label {
font-weight:bold;
width:13%;
float:left;
margin:4px 0 0;
}
#settings-content .step form.add-tags .tag input.text {
width:80%;
}
#settings-content .step form.add-tags .tag p.example {
font-size:10px;
width:80%;
margin:3px 0 8px 13%;
}
#settings-content .step form.add-tags .tag .row-submit {
text-align:center;
}
#settings-content .step form.add-tags .tag .row-submit #submit-1 {
margin:0 auto;
padding:0;
}
#settings-content .step form.add-tags .select {
width:50%;
float:left;
}
#settings-content .step form.add-tags .select div {
margin: 0 0 0 7%;
background:#fffdc5;
padding: 12px;
}
#settings-content .step form.add-tags .select div:after {
content: "."; 
display: block;
height:0; 
clear: both; 
visibility: hidden;
}
#settings-content .step form.add-tags .select div {
display:block;
}
#settings-content .step form.add-tags .select ul {
width:50%;
float:left;
margin: 0 0 0 0;
}
#settings-content .step form.add-tags .select ul li {
font-size:10px;
margin:0 10px 2px 0;
padding:0;
background:none;
}
#settings-content .step form.add-tags .select ul li a {
color:#272727;
text-decoration:none;
padding: 0 19px 0 0;
}
#settings-content .step form.add-tags .select ul li a:hover {
text-decoration:none;
}
/* submit-wiki */
#settings-content .step form.submit-wiki {
text-align:center;
margin: 17px 0 18px;
}
#settings-content .step form.submit-wiki label {
font-weight:bold;
margin:0 6px 0 0;
}
#settings-content .step form.submit-wiki input.text {
width:40%;
margin:0 14px 0 0;
}
/* invite-others */
#settings-content .step p.invite-others {
margin: 15px 0 14px;
}
#settings-content .step p.invite-others a {
color:#515151;
padding:0 0 0 8px;
background: url("images/arrow1.gif") 0 50% no-repeat;
font-weight:bold;
margin: 0 0 0 6px;
}
/* spread-the-word */
#settings-content .step table.spread-the-word {
margin: 0 0 10px;
width:100%;
border:none;
}
#settings-content .step table.spread-the-word th {
background: none;
color:#747474;
font-weight:bold;
text-align: center;
border:none;
padding:0 12px 4px;
font-size:11px;
}
#settings-content .step table.spread-the-word td {
background: #f1f2f4;
color:#444444;
text-align: center;
border:none;
border-bottom:1px solid #ffffff;
padding:8px 12px;
vertical-align:middle;
font-size:11px;
}
#settings-content .step table.spread-the-word td blockquote {
background: #ffffff;
color:#444444;
border:1px solid #c0cdab;
padding:14px 20px;
margin:0;
width:auto;
text-align:left;
}
#settings-content .step table.spread-the-word td blockquote p{
padding:0;
margin:0;
}
#settings-content .step table.spread-the-word td a.visit-pbwiki-1 {
width:171px;
height:60px;
display:block;
margin:0 auto;
}
#settings-content .step table.spread-the-word td a:hover.visit-pbwiki-1 {
background-position:0 -120px;
}
#settings-content .step table.spread-the-word td a.visit-pbwiki-1 span{
display:none;
}
#settings-content .step table.spread-the-word td a.visit-pbwiki-2 {
width:150px;
height:150px;
display:block;
margin:0 auto;
}
#settings-content .step table.spread-the-word td a:hover.visit-pbwiki-2 {
background-position:0 -300px;
}
#settings-content .step table.spread-the-word td a.visit-pbwiki-2 span{
display:none;
}
#settings-content .step table.spread-the-word tr.odd td {
background: #f7f8f9;
}
/* add-more */
#settings-content .step form.add-more {
margin: 0 auto 13px;
text-align:center;
}
#settings-content .step form.add-more div.row {
margin: 0 0 20px 0;
}
#settings-content .step form.add-more input.checkbox {
margin: 0 5px 0 0;
}
#settings-content .step form.add-more label {
color:#444;
margin: 0 14px 0 0;
padding:3px 0 3px 25px;
}
#settings-content .step form.add-more label.del {
background: url("/ficons/logo_small_del.icio.us.gif") 0 50% no-repeat;
}
#settings-content .step form.add-more label.digg {
background: url("/ficons/logo_small_digg.gif") 0 50% no-repeat;
}
#settings-content .step form.add-more label.reddit {
background: url("/ficons/logo_small_reddit.gif") 0 50% no-repeat;
padding:3px 0 3px 22px;
}
#settings-content .step form.add-more label.furl {
background: url("/ficons/logo_small_furl.gif") 0 50% no-repeat;
padding:3px 0 3px 23px;
}
#settings-content .step form.add-more label.spurl {
background: url("/ficons/logo_small_spurl.gif") 0 50% no-repeat;
padding:3px 0 3px 21px;
}
#settings-content .step form.add-more #submit-3 {
margin:0 auto;
padding:0;
}
/* saved-step */
#settings-content .saved-step {
background:#fffdcb;
width:100%;
position:absolute;
left:0;
top:0;
text-align:center;
-moz-opacity:0.8;
opacity:0.8;
}
#settings-content .saved-step div {
position:absolute;
left:50%;
width:80%;
}
#settings-content .saved-step h3 {
color:#655b2d;
font-size:14px;
font-weight:bold;
padding:2px 0 7px 0;
border-bottom:1px solid #d0cc9b;
text-align:center;
}
#settings-content .saved-step h3 img {
margin-right:8px;
vertical-align:middle;
}
#settings-content .saved-step p {
color:#4b4b4b;
font-size:12px;
clear:left;
margin:0;
}
.upsell { 
border:2px solid green;
background:#ccffcc;
padding:10px; 
}
.msg { 
padding-bottom:0px; 
spacing-bottom:0px;
margin-bottom: 10px; 
}

Top