/*
Design215.com CSS/110 stylesheet, v01.20.06, Copyright (c) 2006, Design215 Inc.
All Rights Reserved.
for Linkatopia.com site, updated 06.08.07
What's This?
-----------------------------------------------------------------------------
This is a heavily commented version of the default Linkatopia.com stylesheet.
It is for you to copy and use to make your own custom stylesheet for your
Linkatopia page. If you make a really nice one, we may add it to our site
and give you credit!! For more info, see http://www.Linkatopia.com/contest
For a CSS quick reference, see http://design215.com/toolbox/css_guide.php
Container layout:
-----------------------------------------------------------------------------
Containers are basically boxes that contain content. Text within a container
will flow inside it. Each container can be positioned RELATIVELY inside its
parent container or it can be positioned ABSOLUTELY to the page itself. Each
container can have width, height, padding, and borders. It can be transparent,
have a background image, or both.
The diagram below shows the containers used on each Linkatopia.com page and
how they are arranged inside of each other. More comments further down...
body
#container
#pagehead
.navbar
.navlinks
.navlinks2
#pagebody
#titlebar
#contentbg
#contentbox
#contenthead
.L_xxlarge (or other column classes)
.minheight
.R_xxsmall (or other column classes)
.xclearline
#endcap
#footer
Fonts
-----------------------------------------------------------------------------
Because I like to have all my fonts in one place rather than scattered
throughout the stylesheet, all fonts for the entire site are set here.
For various reasons, there may be an exception here and there. You don't
have to follow this method, but when you're designing a stylesheet for an
entire web site, I think it helps to be a little organized.
*/
body,.counter,div.dropx a,a.btn {
font-family:verdana,helvetica,sans-serif; font-size:10px; color:#555555;
}
p,dl,ul,ol,table td,pre.p2,.xword,.xtitle,#footer a,blockquote {
font-family:verdana,helvetica,sans-serif; font-size:11px; color:#555555;
}
h2,h3,div.obox h1,#footer a.w3 {
font-family:verdana,helvetica,sans-serif; font-size:12px; font-weight:bold; color:#000000;
}
h1 {
font-family:arial,helvetica,sans-serif; font-size:18px; font-weight:bold; color:#000099;
}
.boxBlur,.boxFocus,.ckBox {
font-family:courier new,courier,monospace; font-size:12px; color:#000000;
}
pre,code,.formula {
font-family:courier new,courier,monospace; font-size:12px; color:#006000;
}
#footer p,#footer p.xnav,p.xsmall {
font-family:arial,helvetica,sans-serif; font-size:10px; color:#666666;
}
.xsmall {
font-family:arial,helvetica,sans-serif; font-size:11px; color:#555555;
}
.fbutton {
font-family:arial,helvetica,sans-serif; font-size:11px; font-weight:bold;
}
a.k,a.k1,a.k2 {
font-family:arial,helvetica,sans-serif; font-size:12px;
}
.xgo2 {font-family:verdana,helvetica,sans-serif; font-size:12px;}
/*
Font sizes for the Tag Cloud, these are font sizes used with the "Popular"
tags. The more popular a tag, the bigger the font. If you didn't want a tag
cloud, you could just set them all to the same size.
*/
.sz1 {}
.sz2 {}
.sz3 {font-size:14px;}
.sz4 {font-size:15px;}
.sz5 {font-size:15px;}
.sz6 {font-size:16px;}
.sz7 {font-size:16px;}
.sz8 {font-size:18px;}
.sz9 {font-size:18px;}
/*
Type Selectors
-----------------------------------------------------------------------------
Define the defaults for HTML elements in this section.
*/
body {
text-align:center; margin:0; padding:0;
color:#000000; background:#cccccc;
}
a:link,
a:visited {text-decoration:none; font-weight:bold; color:#0047EA;}
a:hover {text-decoration:underline; font-weight:bold; color:#000000;}
acronym {
font-weight:bold; color:#888888;
border-bottom:dashed 1px #000000; cursor:help;
}
blockquote {
line-height:120%;
margin:4px 12px 0 24px; padding:0;
}
form {
margin:0; padding:2px 0 0 12px;
}
h1 {
margin:4px 4px 0 12px; padding:0; letter-spacing:1px;
}
h2 {
margin:2px 2px 2px 12px; padding:0; letter-spacing:1px;
}
h3 {
position:relative; text-align:right;
margin:-12px 4px 0 0; padding:0;
}
img {
margin:0; padding:0; border:0;
}
p {
line-height:120%;
margin:2px 6px 2px 0; padding:0; /* default is no left margin */
}
pre {
margin:0; padding:0;
}
table {
margin:2px 6px 2px 12px; padding:0;
}
table td {
line-height:130%;
}
/* this tag is used to hide text that should be visible when no stylesheet is available */
tt {display:none;}
ul {
list-style:none;
}
form table { /* no left margin for tables inside forms */
margin:2px 6px 2px 0; padding:0;
}
/*
Class and ID Selectors
-----------------------------------------------------------------------------
Define styles for all elements except the layout containers
*/
/* Navbar menu links, both left and right navbars inside the header */
a.a1 {
font-size:11px; margin:0; padding:0;
}
a.a1:link,
a.a1:visited {text-decoration:none; font-weight:bold; color:#0047EA;}
a.a1:hover {text-decoration:underline; font-weight:bold; color:#000000;}
//* Style for browser toolbar "buttons" */
a.btn {
height:20px;
line-height:20px; font-weight:normal; color:#000000;
margin:0 1px 0 0; padding:4px 8px 4px 8px; background:#D4D0C8;
border-top:1px solid #ffffff;
border-left:1px solid #ffffff;
border-bottom:1px solid #808080;
border-right:1px solid #808080;
}
a.btn:link,
a.btn:visited {text-decoration:none; font-weight:normal; color:#000000;}
a.btn:hover {
text-decoration:none; font-weight:normal; color:#000000; background:#b4b4b4;
}
* cancel text-decoration for misc image buttons */
a.btn2:link,
a.btn2:visited {text-decoration:none;}
a.btn2:hover {text-decoration:none;}
/* User Links
Styles for the URLs to other sites that you've saved in your Linkatopia.
Note: the "lock" icons on each link are handled with bulleted lists!
*/
a.k:link {text-decoration:underline; font-weight:normal; color:#0000aa;}
a.k:visited {text-decoration:underline; font-weight:normal; color:#6600aa;}
a.k:hover {text-decoration:underline; font-weight:normal; color:#000000;}
/* Tags
Styles for your tag links.
There are two different sets here:
tg0, tg1, tg2 are the normal links you see when all of your tags appear
on your page and you can click any of them to display the URLs with that tag.
sg0, sg1, sg2 are the tag links you see when you are adding or editing a
URL and you are listing the tags that go with that link. When you select a tag
from the list of your tags, it should change color to show that you've
selected it. If you click it again to deselect it, it should change back to
the "tg" set of styles.
[Note: at the time this stylesheet was created, the functionality of the "sg"
styles is not in place. Since it will be soon, it has been included here]
*/
/* tag links, public */
a.tg0 {
margin:0; padding:2px 0 2px 0px;
background:transparent;
}
a.sg0 { /* selected */
margin:0; padding:2px 0 2px 0px; color:#000000;
background:transparent;
}
/* tag links, shared */
a.tg1 {
margin:0; padding:2px 0 2px 16px;
background:transparent url(http://linkatopia.com/images/lock01a.gif) no-repeat;
}
a.sg1 { /* selected */
margin:0; padding:2px 0 2px 16px; color:#000000;
background:transparent url(http://linkatopia.com/images/lock01a.gif) no-repeat;
}
/* tag links, private */
a.tg2 {
margin:0; padding:2px 0 2px 16px;
background:transparent url(http://linkatopia.com/images/lock02a.gif) no-repeat;
}
a.sg2 { /* selected */
margin:0; padding:2px 0 2px 16px; color:#000000;
background:transparent url(http://linkatopia.com/images/lock02a.gif) no-repeat;
}
/* Tag links under each user link
When your links are listed on a page, the tags associated with each link
are listed under the link. In the default stylesheet, they are green and
bold.
*/
a.a2:link,
a.a2:visited {text-decoration:none; font-weight:bold; color:#008000;}
a.a2:hover {text-decoration:underline; font-weight:bold; color:#008000;}
/* Links with a folder icon,
used for sections or categories in profile preferences and help.
*/
a.f1 {
margin:0; padding:2px 0 6px 18px; line-height:18px;
background:transparent url(http://linkatopia.com/images/folder.gif) no-repeat;
}
a.f1:link,
a.f1:visited {text-decoration:none; font-weight:bold; color:#0047EA;}
a.f1:hover {
text-decoration:underline; font-weight:bold; color:#000000;
background:transparent url(http://linkatopia.com/images/folder2.gif) no-repeat;
}
/* default stylesheet link icons */
a.style_normal,a.style_mobile,a.style_print,a.style_none {
margin:0; padding:2px 0 2px 18px; line-height:16px;
background:transparent url(http://linkatopia.com/images/style_normal.gif) no-repeat;
}
a.style_mobile {
background:transparent url(http://linkatopia.com/images/style_mobile.gif) no-repeat;
}
a.style_print {
background:transparent url(http://linkatopia.com/images/style_print.gif) no-repeat;
}
.navlinks2 a.style_print:hover {text-decoration:none;}
a.style_none {
background:transparent url(http://linkatopia.com/images/style_none.gif) no-repeat;
}
/* footer links */
#footer a:link,
#footer a:visited {text-decoration:none; color:#2f6e00;}
#footer a:hover {text-decoration:underline; color:#000000;}
/* W3C validation links */
#footer a.w3:link,
#footer a.w3:visited {text-decoration:none; color:#aaaaaa;}
#footer a.w3:hover {text-decoration:none; color:#000000;}
br.clr {
clear:both;
}
/* Separators to clear column floats
I use float:left and float:right for the main columns and having an extra DIV
after the columns is still the easiest way I know to have everything work
normally in all browsers.
*/
div.xclear {
clear:right; height:1px; line-height:1px;
margin:0; padding:0;
}
div.xclearline { /* content under columns */
position:relative; clear:both; width:620px;
margin:0; padding:0;
}
/* Sets the minimum height of the page content, or can be a column divider
If you have a page with little or no content and your layout involves a "box"
with a drop shadow and whatnot, its nice to have something that gives the
page a little height. This DIV could be used for other things like a graphic
or whatever you like.
*/
div.minheight {
position:relative; float:right; text-align:right;
width:5px; height:500px;
}
/* misc accent line, might be used in the future */
div.xline {
height:1px; line-height:1px;
margin:3px; padding:0 0 3px 0;
border-top:solid 1px #aaaaaa;
}
/* Box 1 - login form on the welcome page */
div.xbox1 {
width:90%;
padding:4px 8px 4px 8px;
border:solid 1px #aaaaaa; background:#ffffff;
}
/* Box 2 - user tags */
div.xbox2 {
position:relative;
margin:0 6px 0 12px; padding:2px 2px 4px 2px;
border:solid 1px #000099; background:#E2E7FF;
}
div.xbox2 table,div.xbox3 table {
margin:2px 2px 2px 0; padding:0;
}
div.xbox2 table td,div.xbox2 p.xblock {
color:#9999bb; /* numbers next to tags */
}
/* Box 3 - friends list */
div.xbox3 {
position:relative;
margin:0 6px 0 12px; padding:2px 2px 4px 2px;
border:solid 1px #006600; background:#BCEA9B;
}
div.xbox3 p {
margin:4px 2px 4px 2px;
}
/* Box 4 - popular/suggested tags box */
div.xbox4 {
position:relative;
margin:0 6px 0 12px; padding:2px 2px 4px 2px;
border:solid 1px #000099; background:#ffffcc;
}
div.xbox4 p.xblock {
color:#999988;
}
div.gadvert { /* Google ads */
margin:0 0 0 12px;
}
div.gsearch { /* Google search box */
position:absolute; width:500px; left:250px; top:20px;
}
/* User Link Dictionary Lists
...
...
...
Lists are used to display user links. The default list has no bullet.
The two variations have either a "friends only" lock icon or a "private"
lock icon as a bullet.
*/
dl.alist {
margin:0; padding:4px 10px 0 0;
}
dl.alist dt {
line-height:150%;
margin:0; padding:0 0 0 30px;
}
/* user links, shared */
dl.alist dt.k1 {
margin:0; padding:0 0 0 30px;
background:transparent url(http://linkatopia.com/images/lock01.gif) 12px 2px no-repeat;
}
/* user links, private */
dl.alist dt.k2 {
margin:0; padding:0 0 0 30px;
background:transparent url(http://linkatopia.com/images/lock02.gif) 12px 2px no-repeat;
}
/* The first
element contains any notes and/or website thumbnail
generated by whatever service Linkatopia is currently using.
*/
dl.alist dd {
line-height:120%;
margin:0; padding:0 0 0 36px;
}
/* The second
element contains all of the info (tags, date, rating, etc)
about the URL.
*/
dl.alist dd.mm {
color:#008000; line-height:120%;
margin:0; padding:2px 0 8px 36px;
}
h1.m1 {
margin:2px 2px 0 12px;
}
h2.f1 { /* h2 inside forms */
margin:2px 2px 2px 0;
}
img.xpic {
margin:1px 3px 3px 1px; padding:0;
border:solid 1px #888888;
}
img.xleft { /* left aligned image */
float:left; margin:2px 10px 2px 0;
}
img.tleft,img.avatar { /* website thumbnails, avatars */
float:left; margin:2px 10px 2px 0;
border:solid 1px #888888;
}
img.xright { /* right aligned image */
float:right; margin:2px 0 2px 10px;
}
img.dleft { /* left aligned image for use with ul.dlist */
float:left; margin:2px 10px 2px 12px;
border:1px solid #666666;
}
img.banner {
margin:1px 4px 4px 1px; padding:0;
}
img.favico {
margin:0 0 -2px 0; padding:0;
}
img.noshow,iframe.noshow {visibility:hidden;}
label.noshow,
span.noshow {display:none;}
p.c1 {
position:relative; text-align:center;
}
p.p1 { /* normal line height for narrow columns */
margin:2px 6px 2px 12px; padding:0;
}
p.p2 {
line-height:130%;
margin:4px 6px 0 12px; padding:0;
}
p.p3 { /* normal right margin */
line-height:150%;
margin:4px 10px 0 12px; padding:0;
}
p.n1 { /* justified column like a newspaper */
font-size:10px;
margin:4px 2px 0 12px; padding:0; text-align:justify;
}
p.n2 { /* right column with vertical dashed line */
font-size:10px;
margin:0; padding:4px 2px 0 12px; border-left:1px dashed #aaaaaa;
}
/*
Sorting options for links under a specific tag.
the negative margin moves it up to the same line as the
.
height is necessary in IE or else the links can't be clicked.
*/
p.r1 {
text-align:right;
line-height:16px; height:16px;
margin:-16px 4px 4px 0; padding:0;
}
p.r2 {
text-align:right;
line-height:150%;
margin:4px 4px 4px 12px; padding:0;
}
p.xblock {
line-height:normal; /* so different sized fonts each find their own line height */
margin:0; padding:2px 4px 2px 4px;
}
#pagehead p {
text-align:left; padding:8px 0 0 10px; /* padding for folder icon */
}
#footer p {
position:relative; width:720px;
text-align:center; margin:0 auto 0 auto; padding:0;
}
#footer p.xnav {
position:relative; width:720px;
text-align:center; margin:0 auto 0 auto; padding:12px 0 0 0;
color:#666666;
}
pre.p2 {
line-height:150%;
margin:4px 4px 0 12px; padding:0;
}
/* displaying lock icons within a paragraph for help, features, etc */
span.lock1 {
margin:0; padding:0 0 2px 18px;
background:transparent url(http://linkatopia.com/images/lock01.gif) 0 -1px no-repeat;
}
span.lock2 {
margin:0; padding:0 0 2px 18px;
background:transparent url(http://linkatopia.com/images/lock02.gif) 0 -1px no-repeat;
}
/* lock icons next to tags under each link */
span.tlock1 {
margin:0; padding:0 0 2px 10px;
background:transparent url(http://linkatopia.com/images/lock01a.gif) 0 -1px no-repeat;
}
span.tlock2 {
margin:0; padding:0 0 2px 10px;
background:transparent url(http://linkatopia.com/images/lock02a.gif) 0 -1px no-repeat;
}
/* stars for rating links */
span.st1 {
margin:0; padding:0 0 2px 13px;
background:transparent url(http://linkatopia.com/images/stars01.gif) 0 -1px no-repeat;
}
span.st2 {
margin:0; padding:0 0 2px 26px;
background:transparent url(http://linkatopia.com/images/stars02.gif) 0 -1px no-repeat;
}
span.st3 {
margin:0; padding:0 0 2px 39px;
background:transparent url(http://linkatopia.com/images/stars03.gif) 0 -1px no-repeat;
}
span.st4 {
margin:0; padding:0 0 2px 52px;
background:transparent url(http://linkatopia.com/images/stars04.gif) 0 -1px no-repeat;
}
span.st5 {
margin:0; padding:0 0 2px 65px;
background:transparent url(http://linkatopia.com/images/stars05.gif) 0 -1px no-repeat;
}
/* Linkatopia folder icon */
span.fldr1 {
margin:0; padding:0 0 2px 15px;
background:transparent url(http://linkatopia.com/images/linkatopia_folder.gif) no-repeat;
}
span.xl {font-weight:bold; color:#0047EA;}
table.t1 { /* no left margin */
margin:2px 6px 2px 0; padding:0;
}
table.t2 {
width:94%;
}
table.tt {
margin:0 4px 0 0; padding:0; border:0;
width:98%;
}
table.tt h2 {
margin:0 0 0 12px; padding:0;
}
/* Google Search box */
table.gsearch {
width:480px;
border:0; margin:0; padding:0;
}
table.gsearch table {
margin:0; padding:0;
}
/* used for putting tags in columns */
table.xtags {
width:98%;
}
table.xtags td {
padding:0 10px 2px 4px;
}
table.xtags td.rt {
padding:0 0 2px 4px;
}
ul.alist,ul.clist {
margin:4px 0 0 12px; padding:0;
}
ul.alist li {
margin:2px 0 6px 0; padding:1px 0 0 18px; width:90%;
background:transparent url(http://linkatopia.com/images/stars01.gif) no-repeat;
}
ul.blist {
margin:4px 0 0 0; padding:0;
}
ul.blist li,ul.clist li {
margin:2px 0 2px 0; padding:2px 0 2px 20px; width:90%;
background:transparent url(http://linkatopia.com/images/check.gif) no-repeat;
}
ul.alist li.blank,ul.blist li.blank {
background:transparent;
}
/* left aligned image with bullet list on the right */
ul.dlist {
margin:4px 0 0 0; padding:0;
}
ul.dlist li {
margin:2px 0 2px 0; padding:1px 0 0 12px; width:250px;
background:transparent url(http://linkatopia.com/images/bullet04.gif) 0 2px no-repeat;
}
#pagehead ul {
display:none;
}
/* Form fields */
.ckBox { /* checkboxes */
margin:1px; padding:0;
}
.boxBlur {
border:1px solid #aaaaaa; color:#000000; background:#eeeeee;
margin:0 0 2px 0; padding:1px;
}
.boxFocus {
border:1px solid #aaaaaa; color:#000000; background:#ffffcc;
margin:0 0 2px 0; padding:1px;
}
.fbutton {
border:1px solid #666666; color:#0047EA; background:#eeeeee;
margin:0; padding:0;
}
/* Misc Classes */
.border1 { /* used for images instead of border="1" */
border:1px solid #666666;
}
.counter {color:#aaaaaa;}
.dash2 {
position:relative; display:block; color:#000099;
margin:0 10px 4px 12px; padding:0 0 2px 0;
border-bottom:1px dashed #888888;
}
.hdate { /* dates under H2 headings (articles, etc) */
position:relative; display:block; color:#000099;
margin:0 10px 4px 12px; padding:0 0 2px 0;
}
.norm {color:#555555; font-weight:normal;}
.sm {position:relative; top:-4px; font-size:9px; font-weight:normal;} /* service mark (sm) */
.super {position:relative; top:-4px; font-size:10px;} /* superscript */
.xbig {
font-size:14px; color:#000099;
}
.xdash {border:1px dashed #000000;}
.xline {
position:relative; display:block; line-height:4px;
margin:0 2px 8px 12px; padding:0;
border-bottom:1px solid #888888;
}
.xred {color:#ff0000;} /* form errors */
.xword {font-weight:bold; color:#dddddd;}
.xgo {color:#008000;} /* confirmation messages */
.xgo2 { /* accent text */
color:#429a00; font-weight:bold;
}
.nbox { /* remaining characters field, add.php */
text-align:right; width:250px;
border:0; color:#000000; background:transparent;
}
.nbox2 { /* remaining characters field, add_popup.php */
text-align:right; width:50px;
border:0; color:#000000; background:transparent;
}
/*
Div's and "Containers" for this layout
-----------------------------------------------------------------------------
For this site, #container needs a fixed width so all of the backgrounds and other
divs inside it line up. Otherwise there are some 1px rounding issues depending on the
size of the browser window. Refer to the layout diagram at the top of the
stylesheet to see how the div's are organized.
One reason for multiple nested div's is for consistency in different browsers.
This is called the "box model" and it can be annoying. If you set a div to width:100px;
and then give it padding:5px; it will be 110px wide in one browser
and 100px wide in another. Some browsers add padding to the outside and others
add it to the inside. The same applies to margins and borders. It messes things up
if you need pieces or backgrounds to match up next to each other with no gaps.
The solution is to have one div inside another. You set the width on the outer div
and you set the padding or border on the inner one. The inner one also needs to have
position:relative; so it will fill the div that its inside of.
*/
#container {
position:relative; width:796px;
text-align:center; margin:0 auto 0 auto; padding:6px 0 0 0;
}
/* Page Header, full width of container */
#pagehead {
position:relative; height:115px;
text-align:left; margin:0; padding:0;
background:transparent url(http://linkatopia.com/images/topbg.gif) top center no-repeat;
}
#pagehead div.navbar { /* width and height necessary for image replacement */
position:absolute; top:7px; right:10px; width:245px; height:75px;
text-align:left; margin:0; padding:0;
}
/* DIVs for navigation links */
div.navlinks {
position:absolute; top:92px; left:16px; width:400px; height:28px;
text-align:left; margin:0; padding:0;
}
div.navlinks div {
margin:0; padding:0;
}
div.navlinks2 {
position:absolute; top:86px; right:16px; width:300px; height:28px;
text-align:right; margin:0; padding:0;
background:transparent;
}
div.navlinks2 div {
margin:0; padding:6px 10px 0 0;
}
/* Page body, full width of container */
#pagebody {
position:relative;
text-align:left; margin:0; padding:0;
background:transparent url(http://linkatopia.com/images/bodybg01.gif) center repeat-y;
}
/* Titlebar, content above content box */
#titlebar {
position:relative;
text-align:left; margin:0 13px 0 5px; line-height:1px; /* removes 2px space under leaf.jpg */
background:#cccccc;
}
/* Outer content box, defines outer width of content (use width:??px ), NO MARGINS */
#contentbg {
position:relative; width:783px;
text-align:left; margin:0; padding:0;
}
/* Inner content box for MARGINS and a second background (do NOT define a width) */
#contentbox {
position:relative;
color:#555555; line-height:normal;
text-align:left; margin:0 0 0 5px; padding:0;
}
/* Content above columns */
#contenthead {
position:relative; margin:0; padding:0;
}
/*
Columns:
--------
The following is a convenient structure for just about any layout.
First you start with the inner width of the #contentbox container,
minus any padding or margins. In this case it is 760px, which is a
good standard.
Next, look at the following list. You'll notice there are LEFT and
RIGHT columns for 6 sizes plus a "Full Width" column. The widths of
these columns have been set so different combinations of sizes add
up to less than 760px.
For example, the _blank.php page has a wide column on the left and a narrow
column on the right for a sidebar. Column 1 div has class="L_xxlarge" and
Column 2 div has class="R_xxsmall":
L_xxlarge 580px
R_xxsmall 170px
------
750px
On different pages in your site, simply change the class names to suit
the style of columns you need on that page. If you need a third column,
just copy/paste one of the other div's and use xsmall + xsmall + xsmall
(250 + 250 + 250 = 750).
If you want one full column, use class="L_full" on the first column and
just delete the second column completely.
Columns don't have padding because of the "box model" problem (read the
comments in the previous section). Set padding on the containers you use
within the columns, like