Hello,
I was wondering if there are any CSS Gurus out there who would be able to glance at my styles and give me advice on how I can optimize and organize them better.
/* Global Elements
----------------------------------------------- */
html {
background: #c0bdb8 url(/i/bg.gif) repeat-y center top;
}
body {
margin: 0; padding: 0;
background: #c0bdb8 url(/i/header_bg_thick.gif) repeat-x top left;
font-family: "Stempel Garamond", Times, Georgia, Palatino, serif;
}
ul {
margin: 0; padding: 0;
}
/* Hidden Elements
----------------------------------------------- */
hr, #skipnav, #logo img {
display: none;
}
/* ID Elements
----------------------------------------------- */
#logo {
float: left;
background: url(/i/logo.gif) no-repeat;
}
#logo a {
display: block;
float: left;
width: 350px; height: 76px;
border: none;
}
#header {
width: 800px; height: 76px;
margin: 0 auto; padding: 0 0 25px 0;
}
#mainpg-one, #mainpg-two {
width: 800px;
margin: 0 auto; padding-bottom: 20px;
background: #fff url(/i/curl-one.jpg) no-repeat top right;
}
#mainpg-one { background: #fff url(/i/curl-one.gif) no-repeat top right; }
#mainpg-two { background: #fff url(/i/curl-two.gif) no-repeat top right; }
#sidenav-one, #sidenav-two {
float: left;
width: 240px;
}
#sidenav-one { padding: 0 0 0 71px; }
#sidenav-two { padding: 52px 0 0 71px; }
#content {
float: right;
font-size: 14px;
line-height: 18px;
width: 418px;
color: #666;
padding: 0 71px 0 0;
}
#writerslogo-one {
float: right;
padding: 93px 80px 0 0; margin-left: 506px;
}
#writerslogo-two {
float: right;
padding: 43px 80px 0 0; margin-left: 506px;
}
#writerslogo-one h1, #writerslogo-two h1 {
text-indent: -9000px;
width: 214px; height: 54px;
margin: 0; padding: 0;
background: url(/i/writers.gif) no-repeat left;
}
#frontimg {
width: 800px; height: 297px;
background: url(/i/frontimg.jpg) no-repeat 0 3px;
}
#clearimg {
width: 800px; height: 148px;
}
#clear {
clear: both;
}
#nav-one {
padding: 120px 0 0 80px;
}
#nav-two {
padding: 70px 0 0 80px;
}
#menu {
position: relative;
width: 291px; height: 22px;
background: url(/i/nav.gif) no-repeat;
}
#menu li {
position: absolute;
margin: 0; padding: 0;
list-style: none;
top: 0;
}
#menu li, #menu a {
height: 22px;
display: block;
text-decoration: none;
}
#menu a i, #menu i {
visibility: hidden;
}
#a-c { left: 67px; width: 30px; }
#d-g { left: 97px; width: 27px; }
#h-l { left: 124px; width: 25px; }
#m-p { left: 149px; width: 28px; }
#q-s { left: 177px; width: 26px; }
#t-z { left: 203px; width: 25px; }
#entirelist { left: 228px; width: 63px; }
/* #a-c a:hover { border-bottom: 4px solid #d8d8d8; }
#d-g a:hover { border-bottom: 4px solid #d8d8d8; }
#h-l a:hover { border-bottom: 4px solid #d8d8d8; }
#m-p a:hover { border-bottom: 4px solid #d8d8d8; }
#q-s a:hover { border-bottom: 4px solid #d8d8d8; }
#t-z a:hover { border-bottom: 4px solid #d8d8d8; }
#entirelist a:hover { border-bottom: 4px solid #d8d8d8; } */
#list li a:link { color: #37677F; }
#list li a:visited { color: #999; }
#list li a:hover { color: #1C4052; }
#list li a:active { color: #1C4052; }
.url p a:link { color: #37677F; }
.url p a:visited { color: #999; }
.url p a:hover { color: #1C4052; }
.url p a:active { color: #1C4052; }
#list-right {
float: right;
width: 192px;
padding: 0 25px 0 0;
}
#list-left {
float: left;
width: 195px;
padding: 0 5px 0 0;
}
#sidenav-one li, #sidenav-two li {
font-size: 12px;
line-height: 15px;
padding-left: 9px;
list-style-type: none;
background: url(/i/bullet-one.gif) no-repeat 0 3px;
}
#content li {
color: #999;
font-size: 16px;
line-height: 22px;
padding-left: 18px;
list-style-type: none;
background: url(/i/bullet-two.gif) no-repeat 0 3px;
}
#alphacontainer {
margin: 0; padding: 0;
height: 20px;
}
#alphacontainer ul {
border: 0;
margin: 0; padding: 0;
list-style-type: none;
text-align: center;
}
#alphacontainer ul li {
display: block;
float: left;
text-align: center;
padding: 0; margin: 0;
}
#alphacontainer ul li a {
background: #fff;
width: 15px; height: 20px;
border-top: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
border-right: none;
padding: 0; margin: 0;
color: #37677F;
text-decoration: none;
display: block;
text-align: center;
font: normal 9px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}
#alphacontainer ul li a:hover {
color: #1C4052;
background: #e6e6e6;
}
#alphacontainer a:active {
color: #1C4052;
background: #e6e6e6;
}
#alphacontainer #alphalast a {
border-right: 1px solid #e6e6e6;
}
/* CLASS Elements
----------------------------------------------- */
.heading h2 {
text-indent: -9000px;
width: 175px; height: 30px;
margin: 0; padding: 0;
}
.heading #ac { background: url(/i/a-c.gif) no-repeat top left; }
.heading #dg { background: url(/i/d-g.gif) no-repeat top left; }
.heading #hl { background: url(/i/h-l.gif) no-repeat top left; }
.heading #mp { background: url(/i/m-p.gif) no-repeat top left; }
.heading #qs { background: url(/i/q-s.gif) no-repeat top left; }
.heading #tz { background: url(/i/t-z.gif) no-repeat top left; }
.heading #entire { background: url(/i/entirelist.gif) no-repeat top left; }
.heading #about { background: url(/i/about.gif) no-repeat top left; }
.pic {
float: left;
padding: 8px; margin: 0;
width: 77px; height: 105px;
background: url(/i/pic-frame.gif) no-repeat;
}
.pic img {
width: 61px; height: 63px;
}
.info h3 {
font-size: 22px;
font-weight: normal;
color: #37677F;
margin: 2px 0 10px 0; padding: 0;
}
#content .info ul {
margin: 0; padding: 0;
list-style-type: none;
background: transparent;
}
#content .info li {
margin: 0; padding: 0;
list-style-type: none;
font-size: 14px;
line-height: 17px;
color: #666;
background: transparent;
}
.url p {
margin-top: 10px;
}
.url p a {
padding-left: 18px;
background: url(/i/bullet-two.gif) no-repeat 0 2px;
}
.dark-bg {
background: #f2f2f2;
padding: 15px; margin: 0;
}
.lite-bg {
background: #fafafa;
padding: 15px; margin: 0;
}
.rule {
margin: 0; padding: 7px 0;
background: url(/i/rule.gif) repeat-x;
}
/* Base Links
----------------------------------------------- */
a {
text-decoration: none;
}
a:link { color: #633; }
a:visited { color: #633; }
a:hover { color: #b31b1b; }
a:active { color: #b31b1b; }
