CSS Code for the CSS Beauty Home Page, circa August 2008
Discussed @ https://perishablepress.com/css-implementations-of-the-rich-and-famous/
/* - - - - - - - - - - - - - - - - - - - - -
Title : CSS Beauty Version 2
Author : Hector A. Giron
URL : www.cssbeauty.com
- - - - - - - - - - - - - - - - - - - - - */
body {
margin:0;
padding:0;
background:#fff;
font: 76% "Lucida Sans Unicode", verdana, helvetica, sans-serif;
color: #418FA5;
line-height: 130%;
}
abbr, acronym { /* acronym and abbr aren't styled in IE per default */
border-bottom: 1px dotted #58B2CB;
cursor: help;
}
code {
color: #7FC4D8;
font-family: "Lucida Sans Unicode", verdana, helvetica, sans-serif;
}
a {
color: #DCB20C;
text-decoration: none;
}
a:active { outline: none; }
a:hover {
color:#CC9933;
text-decoration: underline;
outline: none;
}
a img { border: 0; }
h2 {
font-size: 1.1em;
margin:0;
line-height: 100%;
}
hr { display:none; }
/* Global Form Styles */
input, textarea{
background: #fff;
border: 1px solid #83cde1;
border-top: 3px solid #83cde1;
}
input:hover, textarea:hover {
background: #F0FDE2;
border-top: 3px solid #b1e77a
}
input:focus, textarea:focus {
background: #FCFFEC;
border-top: 3px solid #b1e77a
}
.submit { border: 0; width: auto; }
.submit:hover, .submit:active { border:0; }
.radio { background: none; border: 0; }
/* ClearFix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
.clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
#container {
width: 100%;
padding:0;
margin:0;
background: url(../img/content-bg.gif) bottom right no-repeat;
position: relative;
}
#header {
background: #7BC2D6 url("../img/headertop.gif") bottom repeat-x;
margin:0;
height: 76px;
padding:0;
}
#header h1 {
background: url(../img/logo.gif) 10px 0px no-repeat;
height: 76px;
margin:0;
float: left;
width: 200px;
position: absolute;
}
#header h1 a {
position: relative;
display: block;
top: 10px;
left: 10px;
width: 200px;
height: 55px;
}
#header h1 a span {
display: none;
}
#header h3 { display: none; }
#header a#award {
position: absolute;
top: 12px;
left: 180px;
display: block;
height: 20px;
width: 23px;
}
#search {
padding:0 0 5px 0;
position: absolute;
right: 15px;
top: 5px;
width: 190px;
}
#search form { margin: 0; }
#search form fieldset {
border: 0;
margin:0;
padding:0;
}
#search form fieldset legend {
display: none;
}
#search label{
background: url(../img/search.gif) no-repeat;
height: 40px;
width: 32px;
float: left;
text-indent: -4000px;
position: relative;
display: block;
cursor: pointer;
}
#search .searchbox {
border: 1px solid #47A4BE;
font-size: 14px;
padding: 3px 0 3px 20px;
color: #303030;
float: left;
width: 150px;
margin: 10px 0 0 -20px;
}
#content {
margin:0;
background: transparent;
padding: 10px 0 20px 20px;
width: 35%;
float: left;
border-left: 1px dotted #BBE0EB;
}
#content h2 {
font-size: 1.7em;
margin:0;
font-weight: normal;
padding: 10px 0 0 0;
color: #83CDE1;
}
#content h3 {
padding: 15px 0 0 0;
clear: both;
margin: 0;
color: #83CDE1;
font-size: 1.1em;
}
#content label {
font-size: 0.9em;
cursor: pointer;
}
#content p {
margin:0;
padding: 10px 0 5px 0;
line-height: 150%;
}
#leftcol {
float:left;
width: 50%;
min-width:340px;
margin:0;
padding: 10px 0 15px 0;
}
#news, #jobs {
margin:0 0 10px;
padding:0 15px 5px 10px;
border-bottom: 1px dotted #BBE0EB;
}
#jobs p { margin: 10px 15px 10px 15px; }
#leftcol #jobs h2 {
font-size: 1.7em;
margin:0;
font-weight: normal;
padding: 10px 0 15px 10px;
color: #83CDE1;
}
#leftcol #recommended {
width: 155px;
min-width: 140px;
float: right;
margin: 0 15px 0 5px;
text-align: right;
}
#leftcol #categories {
width: 170px;
float: right;
margin: 0 5px 10px 5px;
}
#leftcol #bydate {
width: 170px;
float: right;
padding: 0;
margin: 0 5px 0 20px;
}
#leftcol h2, #rightcol h2 {
padding: 10px 0 10px 0;
clear: both;
margin: 0;
color: #83CDE1;
}
#rightcol h2#features {
background: url(../img/features.gif) left no-repeat;
text-indent: -3000px;
margin: 13px 0 2px 5px;
padding: 0;
}
#leftcol #recommended ul li p {
float: right;
margin:0 5px 0 0;
width: 60%;
}
#leftcol #recommended ul {
margin: 0;
font-size: 0.85em;
padding:0;
list-style: none;
}
#leftcol #recommended ul li {
margin: 5px 0 5px 0;
clear: both;
border-bottom: 1px dotted #BBE0EB;
padding: 0 0 10px 0;
}
#leftcol #recommended ul li img {
border: 1px solid #BBE0EB;
padding:3px;
width: 40px;
height: 50px;
float: right;
margin: 3px 5px 0 0;
}
#leftcol #categories ul, #leftcol #bydate ul {
font-size: 1.0em;
margin:0;
padding:0 0 10px;
list-style: none;
}
#leftcol #categories li, #leftcol #bydate li {
margin: 0;
padding: 0;
border-bottom: 1px dotted #BBE0EB;
}
#leftcol ul li a { color: #4896AC; }
#leftcol #categories a,
#leftcol #bydate a {
display: block;
text-decoration: none;
padding: 3px 5px 3px 10px;
height: 17px;
}
#leftcol #categories a:hover,
#leftcol #bydate a:hover { background:#F0FDE2; }
/* Main Content Area */
.content {
float:left;
width:230px;
margin:0;
padding:5px 0 5px 0;
color: #fff;
background: url(../img/entrybg.gif) top left no-repeat;
border-right: 1px solid #47A4BE;
border-bottom: 1px solid #47A4BE;
}
#content dd {
margin:0;
padding: 0 0 10px 0;
}
.content h2 {
padding: 4px 0 2px 0;
font-size: 1.0em;
margin: 0 0 0 10px;
}
#content .content-ind {
width:339px;
margin:0 0 10px 0;
padding:0 0 10px 0;
border-bottom: 1px dotted #BBE0EB;
}
#content .ad {
text-align: center;
border: 0;
padding: 20px 0 10px 0;
}
#content .content-ind h2 {
margin: 0 0 5px 0;
line-height: 130%;
}
#content .content-ind p {
padding: 5px 10px 0 0;
margin: 0 0 10px 0;
}
#content .content-ind .img img {
border: 3px solid #BBE0EB;
}
#content .content-ind .posted a {
color: #4896AC;
}
#content .content-ind .posted {
margin-top: 5px;
width: 300px;
}
#content .content-search {
width:319px;
margin:0;
padding:0 10px 10px 10px;
border-bottom: 1px dotted #BBE0EB;
}
#content .content-search img {
margin: 15px 0 0 0;
border: 3px solid #BBE0EB;
}
#content .content-search .posted a {
color: #4896AC;
}
#entries .posted, #content .posted {
margin:0 10px 0 10px;
padding: 2px 4px 3px 5px;
text-align:left;
width: 200px;
font-size: 0.9em;
}
#entries .img {
padding-left:10px;
padding-right:10px;
}
#entries .img img {
padding: 3px;
border: none;
background: #fff;
}
.content a { color: #fff; }
.posted a { color: #4896AC; }
/* ----- Icons, etc ----- */
.date {
background:url(../img/date.gif) left no-repeat;
padding-left:18px;
padding-right: 3px;
float:right;
}
.time {
background:url(../img/clock.gif) left no-repeat;
padding-left:16px;
float:right;
margin-right:10px;
}
.permalink {
background:url(../img/permalink.gif) left no-repeat;
padding-left:18px;
}
.permalink_recent {
background:url(../img/permalink.gif) right no-repeat;
padding-right:18px;
}
.comments {
background:url(../img/comment.gif) left no-repeat;
padding-left:16px;
float:left;
}
.comments a { color: #fff; }
#rightcol {
float: left;
width:20%;
padding: 0;
}
#jobs ul, #rightcol ul, #content ul {
margin:0;
padding:10px 0 10px 20px;
}
#jobs li, #rightcol li, #content li {
list-style: none;
background: url(../img/bullet.gif) 0px 6px no-repeat;
padding: 0 15px 8px 13px;
font-size: 0.9em;
}
#rightcol p {
margin:0;
color: #4896AC;
}
/* NAVIGATION =========================================== */
#nav {
font-size: 0.9em;
margin: 0;
float: left;
margin: 0;
position: absolute;
top: 44px;
left: 215px;
width: 580px;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0 2px 0 0;
padding:0;
}
#nav a {
float:left;
background: transparent url("../img/tabs-left.gif") no-repeat left top;
background-position: -1000px 0%;
margin:0 1px 0 0;
padding:0 0 0 2px;
text-decoration:none;
color: #fff;
}
#nav a span, #nav #current span {
float:left;
display:block;
background: transparent url("../img/tabs-right.gif") right top no-repeat;
padding:3px 9px 3px 6px;
}
/* hide from Mac IE5 \*/
#nav a span {float:none;}
/* end hack */
#nav #monster, #nav #share {
padding:3px 0 3px 0;
overflow: hidden;
}
#nav #monster {
background: url(../img/monstab.gif) no-repeat;
width: 65px;
text-indent: -3000px;
}
#nav #share {
background: url(http://www.cssbeauty.com/img/sharetab.gif) 0 0 no-repeat;
width: 85px;
text-indent: -3000px;
}
#nav #monster:hover { background-position: 0 -22px; }
#nav #share:hover { background-position: 0 -22px; }
#nav #current a { background-position:0 -300px; }
#nav #current a span, #nav #current span {
background-position:100% -300px;
padding-bottom:3px;
color:#fff;
}
#nav #current #monster { background-position: 0 -44px; }
#nav a:hover { background-position:0% -150px; }
#nav a:hover span {
color: #fff;
background-position:100% -150px;
}
#nav #current a:hover { background-position:0% -300px; }
#nav #current a:hover span {
color: #fff;
background-position:100% -300px;
}
/* Sub Nav*/
#subnav {
font-size: 0.9em;
margin: 0;
width: 100%;
border-top: 1px solid #A8DCEA;
position: relative;
z-index: 10;
}
#subnav ul {
margin:0;
padding:3px 0 0 0;
list-style:none;
text-align: center;
background: #83CDE1;
height: 20px;
}
#subnav li {
display:inline;
margin:0;
padding: 0 10px 0 10px;
}
#subnav li a {
color: #fff;
padding: 0 4px 1px 4px;
}
#subnav #onjobs a { font-weight: bold; }
#subnav #onjobs a:hover { text-decoration: none; }
/* TagCloud */
#cloud {
float: right;
width: 120px;
margin: 0 15px 0 0;
text-align: right;
}
#cloud ul {
list-style: none;
margin:0
}
#cloud ul li {
background: none;
padding: 2px 3px 2px 0;
height: auto;
float: none;
}
#cloud a { display: block; }
#cloud a:hover {
text-decoration: none;
color: #dcb20c !important;
}
#cloud a.cloud1 {font-size: 2em; color: #7cc92d;}
#cloud a.cloud2 {font-size: 1.6em; color: #80cb31;}
#cloud a.cloud3 {font-size: 1.4em; color: #88d13f;}
#cloud a.cloud4 {font-size: 1.2em; color: #99da56;}
#cloud a.cloud5 {font-size: 1.1em; color: #8fd448;}
#cloud a.cloud6 {font-size: 1em; color: #8fd448;}
#cloud a.cloud7 {font-size: 1em; color: #8fd448;}
#cloud a.cloud8 {font-size: 1em; color: #8fd448;}
#cloud a.cloud9 {font-size: 1em; color: #8fd448;}
#cloud a.cloud10 {font-size: 1em; color: #8fd448;}
/* Extra Info Boxes on FOoter */
#scontent {
background: #7ECBDF;
border-top: 2px solid #46A4BE;
margin:0;
padding:0 0 25px 100px;
font-size: 0.9em;
}
#scontent a { color:#fff; }
#scontent #info1 #jobstable tr.row1 { background: none; }
#scontent #info1 #jobstable tr:hover,
#scontent #info1 #jobstable tr.row1:hover { background: #5AB6D0; }
#scontent #info1 {
width: 30%;
float: left;
padding: 0;
margin: 0;
}
#scontent #info1 #jobstable {
padding: 0;
border-collapse: separate;
border-spacing: 0;
color: #fff;
}
#scontent #info1 #jobstable a {
font-weight: bold;
display: block;
}
#scontent #info1 #jobstable td {
border-bottom: 1px dotted #fff;
padding: 3px;
vertical-align: top;
}
#scontent #info1 h2, #scontent #info2 h2, #scontent #info3 h2 {
padding: 0 0 3px 0;
margin: 20px 0 10px 0;
font-size: 1.4em;
font-weight: normal;
color: #ffffcc;
border-bottom: 1px dotted #ffffcc;
}
#scontent #info1 #jobstable th { display: none; }
#scontent #info1 #jobstable td.prevpage,
#scontent #info1 #jobstable td.jobdesc,
#scontent #info1 #jobstable td.nextpage,
#scontent #info1 #jobstable td.jobdate,
#scontent #info1 #jobstable td.jobdesc { display: none; }
#scontent #info1 #jobstable td.jobdate,
#scontent #info1 #jobstable td.jobloc { width: auto; }
#scontent #info2 {
width: 30%;
float: left;
padding:0;
margin: 0 0 0 35px;
}
#scontent #info3{
width: 15%;
float: left;
margin: 0 0 0 35px;
}
#scontent #info3 p { color:#fff; }
#scontent #info1 ul, #scontent #info2 ul, #scontent #info3 ul {
padding:0;
margin: 0 0 0 10px;
list-style: none;
}
#scontent #info1 ul li, #scontent #info3 ul li {
background: url(../img/news-icon.gif) 0 5px no-repeat;
padding: 0 0 3px 17px;
}
#scontent #info2 ul li {
background: url(../img/bubble.gif) 0 4px no-repeat;
padding: 0 0 2px 17px;
}
#scontent #info2 ul li a { display: block; }
/* footer */
#footer {
margin:0;
padding:0;
border-top: 1px solid #BBE0EB;
clear: both;
font-size: 0.8em;
background: #47A4BE;
color: #A1DCEA;
}
#footer p {
padding: 15px 0 15px 0;
text-align: center;
margin:0;
border-top: 1px solid #83CDE1;
}
#footer a { color: #fff; }
a.top-btn {
position: relative;
bottom: 25px;
left: 90%;
display: block;
width: 24px;
text-indent: -3000px;
background: url(../img/top.gif) no-repeat;
}
a.top-btn:hover {
background: url(../img/tophover.gif) no-repeat;
text-decoration: none;
}
a#mediatemple {
position:absolute;
top: 12px;
left: 212px;
background: url(../img/mediatemple.gif) 0 0 no-repeat;
display: block;
width: 115px;
height: 14px;
text-indent: -5000px;
line-height: 0px;
}
a#mediatemple:hover { background-position: 0 -14px; }
#leftcol {
width: 55%;
}
#news h2 {
background: url(../img/news-announc.gif) 50% 0 no-repeat;
text-indent: -3000px;
margin: 5px 0 8px 0;
padding: 0;
}
#newswrap {
margin:0;
}
#news-left, #news-right {
float: right;
width: 48%;
max-width: 330px;
}
#news .more {
clear: both;
margin:0;
padding: 0 15px 0 0;
font-size: 0.85em;
text-align: right;
line-height: 1em;
}
#news .more img {
vertical-align: bottom;
border: 0;
margin: 0 0 0 5px;
}
#news-right p, #news-left p {
font-size: 0.85em;
padding: 0 5px 0 0;
margin: 0 0 0 12px;
}
#news-right p a, #news-left p a {
font-weight: bold;
}
#news-right p a.continue, #news-left p a.continue {
font-weight: normal;
}
#news p.author {
color: #83cde1;
border: 0;
padding: 0 0 5px 0;
margin: 0 10px 10px 12px;
border-bottom: 1px dotted #BBE0EB;
}
#news p.author a {
color: #86d734;
font-weight: normal;
}
#news p.author a:hover {
text-decoration: underline;
}
#news p.author:hover {
background: none;
}
#entries {
float:left;
width: 233px;
margin:0;
font-size: 0.9em;
}
#entries h1 {
display: none;
}
#entries div.content img {
width: 205px;
height: 96px;
}
#entries .more {
clear: both;
margin:0;
padding: 10px 0 10px 0;
font-size: 0.9em;
text-align: center;
}
#entries .more img {
border: 0;
}
#rightcol #skillshare {
width: 195px;
height: 81px;
background: url(../img/skillshare.gif) 5px 5px no-repeat;
text-indent: -3000px;
padding: 0 0 10px 0;
}
#rightcol #cssshuffle {
width: 195px;
height: 81px;
background: url(../img/cssshuffle.gif) 5px 5px no-repeat;
text-indent: -3000px;
}
#rightcol #cssmonster {
width: 195px;
height: 81px;
background: url(../img/cssmonster.gif) 5px 5px no-repeat;
}
#rightcol #cssmonster h3, #rightcol #cssshuffle h3, #rightcol #skillshare h3 {
display: none;
}
#rightcol #cssmonster span, #rightcol #cssshuffle span, #rightcol #skillshare span {
display: none;
}
#rightcol #cssmonster a, #rightcol #cssshuffle a, #rightcol #skillshare a {
position: relative;
display: block;
left: 5px;
top: 5px;
width: 185px;
height: 76px;
}
#rightcol #cssmonster a {
height: 45px;
}
#rightcol #cssmonster a:hover, #rightcol #cssshuffle a:hover, #rightcol #skillshare a:hover {
text-decoration: none;
}
#rightcol #cssmonster #jobcount {
display: inline;
position: relative;
top: 58px;
color: #fff;
font-size: 0.8em;
font-weight: bold;
left: 30px;
}
#rightcol #cssmonster #jobcount a {
color: #fff;
}
#rightcol #advertisement {
width: 99%;
padding: 0 0 0 5px;
}
/* front page monster (job number) link */
#cssmonster p#number {
margin-top: 12px;
}
#cssmonster p#number a {
font-size: 0.8em;
color: #fff;
display: block;
text-align:right;
width: 170px;
margin: 0 5px 3px 5px;
padding: 0 10px 0 0;
background: url(../img/arrow-down.gif) 52px 7px no-repeat;
height: auto;
}
#cssmonster p#number a:hover {
text-decoration: underline;
}
/* Events Table */
#events {
width: 185px;
font-size: 0.9em;
border-collapse: separate;
margin: 0 0 0 5px;
border-bottom: 1px dotted #E2FACB;
}
#events th {
text-align: left;
font-size: 1.1em;
color: #83CDE1;
border-bottom: 1px dotted #E2FACB;
padding: 0 0 2px 1px;
}
#events tr.even {
background: #E7FAD5;
}
#events .edate {
width: 60px;
}
#events .event {
width: 125px;
}
#events td {
padding: 2px 4px;
color: #78B094;
vertical-align: top;
}
#events td a {
color: #78B094;
}