Example of our CSS code
/*******************************************************************************
CSS on Sails Framework
Title: Blinksale
Author: XHTMLized (http://www.xhtmlized.com/)
Date: June 2010
********************************************************************************
1. BASE
1.1 Reset
1.2 Accessibility Navigation & Hide
1.3 Clearfix
1.4 Default Styles
1.5 Image replacement 1
1.6 Image replacement 2
2. COMMON
2.1 Container
2.2 Announcement
2.3 Main
2.4 Header
2.5 Navigation
2.6 Content
2.7 Sidebar
2.8 Footer
3. PAGES
3.1 Home page
3.2 Sign up
3.3 Blog
*******************************************************************************/
/* 1. BASE
--------------------------------------------------------------------------------
==============================================================================*/
/* 1.1 Reset
------------------------------------------------------------------------------*/
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
q {
quotes: none;
}
q:before, q:after {
content: "";
content: none;
}
a, ins, del {
text-decoration: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
th, td {
vertical-align: top;
}
th {
text-align: left;
}
/* 1.2 Accessibility Navigation & Hide
------------------------------------------------------------------------------*/
#accessibility-nav, .hide {
position: absolute;
top: -999em;
left: -999em;
height: 1px;
width: 1px;
}
/* 1.3 Clearfix
------------------------------------------------------------------------------*/
.clearfix:after,
#main .container:after,
#footer .container:after,
#footer ul ul:after,
#home-bottom .container:after,
#home-bottom .features:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
/* 1.4 Default Styles
------------------------------------------------------------------------------*/
body {
background: #012148;
color: #fff;
font: 81.25%/1.38 Helvetica, Arial, sans-serif;
}
hr {
display: none;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
del {
text-decoration: line-through;
}
th {
font-weight: normal;
}
address, cite, dfn {
font-style: normal;
}
li {
list-style: none;
}
abbr, acronym {
border-bottom: 1px dotted #999;
cursor: help;
}
input, textarea, select {
font-family: Helvetica, Arial, sans-serif;
}
a, a:visited {
color: #006e96;
text-decoration: none;
}
a:hover, a:active {
color: #006e96;
text-decoration: underline;
}
/* 1.5 Image replacement 1 - transparent images
------------------------------------------------------------------------------*/
.ir-t {
display: block;
position: relative;
overflow: hidden;
text-indent: -999em;
font-size: 1em;
}
.ir-t a {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
.ir-t a span, a.ir span {
cursor: pointer;
}
/* 1.6 Image replacement 2 - non-transparent images
------------------------------------------------------------------------------*/
.ir {
display: block;
position: relative;
overflow: hidden;
font-size: 1em;
}
.ir span {
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
background-repeat: no-repeat;
}
.ir a {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
.ir a span, a.ir span {
cursor: pointer;
}
/* 2. COMMON
--------------------------------------------------------------------------------
==============================================================================*/
/* 2.1 Container
------------------------------------------------------------------------------*/
.container {
width: 940px;
position: relative;
margin: 0 auto;
}
/* 2.2 Announcement
------------------------------------------------------------------------------*/
#announcement {
padding: 7px 0 8px 0;
text-align: center;
border-bottom: 1px solid #1c6a79;
background: #01162e url(../images/bg_announcement.png) repeat-x;
color: #fff;
}
#announcement a {
color: #ffb400;
}
/* 2.3 Main
------------------------------------------------------------------------------*/
#main-wrapper {
background: #01234a url(../images/bg_main_wrapper.png) repeat-x;
color: #fff;
}
#main {
background: url(../images/bg_main.jpg) top center no-repeat;
}
#main .container {
min-height: 480px;
padding-bottom: 20px;
}
/* 2.4 Header
------------------------------------------------------------------------------*/
#header {
position: relative;
height: 103px;
}
#header .site-name {
position: absolute;
top: 13px;
left: -3px;
width: 148px;
height: 31px;
background: url(../images/sprite_logos.png) no-repeat;
}
#header h1 {
position: absolute;
top: 48px;
left: -3px;
width: 270px;
height: 23px;
background: url(../images/sprite_logos.png) 0 -35px no-repeat;
}
/* 2.5 Navigation
------------------------------------------------------------------------------*/
#navigation {
position: absolute;
top: 0;
right: 0;
padding-bottom: 12px;
background: url(../images/sprite_bg_transparent.png) 100% 15px no-repeat;
}
#navigation li {
float: left;
}
#navigation a {
display: block;
padding: 28px 19px 10px 19px;
text-transform: uppercase;
color: #fff;
}
#navigation a span {
display: block;
width: 40px;
height: 12px;
background: url(../images/sprite_navigation.png) no-repeat;
text-indent: -999em;
cursor: pointer;
}
#navigation a.active,
#navigation a:hover {
text-decoration: none;
background: url(../images/sprite_bg_transparent.png) 50% -50px no-repeat;
}
#navigation .blog a span {
width: 36px;
background-position: -77px 0;
}
#navigation .contact a span {
width: 85px;
background-position: -151px 0;
}
#navigation .signup {
margin-left: 13px;
}
#navigation .login {
margin-right: 6px;
}
#navigation .signup a,
#navigation .login a {
padding-left: 12px;
padding-right: 12px;
}
#navigation .signup a span {
width: 57px;
background-position: -280px 0;
}
#navigation .login a span {
width: 44px;
background-position: -361px 0;
}
/* 2.6 Content
------------------------------------------------------------------------------*/
#content {
width: 700px;
float: left;
background: #fff;
color: #666;
}
.section {
padding: 20px;
background: transparent url(../images/bg_section.png) no-repeat 50% 5px;
}
.section-details {
padding: 20px;
background: #e8e9e9 url(../images/bg_section_details.png) repeat-x 0 0;
}
/* 2.7 Sidebar
------------------------------------------------------------------------------*/
#sidebar {
width: 220px;
float: right;
}
/* 2.8 Footer
------------------------------------------------------------------------------*/
#footer-wrapper {
clear: both;
border-top: 1px solid #15447b;
background: url(../images/bg_footer_wrapper.png) repeat-x;
}
#footer {
background: url(../images/bg_footer.jpg) top center no-repeat;
}
#footer .container {
padding: 18px 0;
}
#footer a {
color: #fff;
}
/* Double Wide */
#footer .double-wide {
float: left;
width: 540px;
}
#footer .double-wide h2 {
float: left;
width: 142px;
height: 46px;
margin-top: 2px;
background: url(../images/sprite_logos.png) 0 -60px no-repeat;
}
#footer .double-wide p {
margin-left: 160px;
line-height: 1.85;
}
/* vCard */
#footer .vcard {
float: right;
width: 300px;
font-size: 0.92em;
line-height: 2.0;
}
#footer .vcard li li {
float: left;
padding-left: 8px;
margin-left: 7px;
background: url(../images/sprite_bg.png) 0 -226px no-repeat;
}
#footer .vcard li li.first {
padding: 0;
margin: 0;
background: none;
}
/* 3. PAGES
--------------------------------------------------------------------------------
==============================================================================*/
/* 3.1 Home page
------------------------------------------------------------------------------*/
/* Common */
.homepage a, .homepage a:visited {
color: #ffc537;
}
.homepage #main-wrapper {
background-image: url(../images/home/bg_main_wrapper.png);
}
.homepage #main .container {
padding: 0 65px;
min-height: 617px;
background: url(../images/home/screenshot_top.jpg) bottom right no-repeat;
}
/* Header */
.homepage #header {
height: 183px;
}
.homepage #header h1 {
top: 101px;
left: 0;
width: 939px;
height: 54px;
background: url(../images/home/sprite_txt.png) no-repeat;
}
/* Content */
.homepage #content {
float: none;
width: 340px;
margin-left: -10px;
background: transparent;
color: #fff;
}
.homepage #content .intro {
padding: 0 20px 0 10px;
font: 1.08em/1.57 Georgia, "New York", utopia, serif;
}
.homepage #content .sign-up {
margin: 20px 0 24px 0;
padding-top: 28px;
background: url(../images/home/bg_home_transparent.png) no-repeat;
}
.homepage #content .sign-up .button {
margin: 0 0 3px 10px;
width: 303px;
height: 59px;
background: url(../images/home/sprite_txt.png) -945px 0 no-repeat;
}
.homepage #content .sign-up .no-card {
margin-left: 75px;
font-size: 0.85em;
}
.homepage #content .list li {
padding: 10px 0 8px 40px;
background: url(../images/home/bg_home_transparent.png) -340px 0 no-repeat;
}
/* Home bottom */
#home-bottom {
background: #135865 url(../images/home/bg_bottom.png) repeat-x;
border-bottom: 1px solid #22977b;
}
#home-bottom .container {
width: 960px;
padding: 48px 20px 34px 20px;
background: url(../images/home/screenshot_bottom.jpg) no-repeat;
}
#home-bottom .ir-t {
background: url(../images/home/sprite_txt.png) no-repeat;
}
/* Home bottom: Features */
#home-bottom .features {
margin-bottom: 25px;
padding-bottom: 22px;
border-bottom: 1px solid #1b7b75;
}
#home-bottom .features h2 {
margin: 0 0 24px 12px;
width: 327px;
height: 18px;
background-position: 0 -60px;
}
#home-bottom .features li {
float: left;
margin-left: 14px;
}
#home-bottom .features li.first {
margin-left: 7px;
}
#home-bottom .features img {
display: block;
margin-bottom: 5px;
padding: 3px;
background: url(../images/home/bg_home_transparent.png) -682px 0 no-repeat;
}
#home-bottom .features span {
margin-left: 5px;
}
#home-bottom .features a:hover {
text-decoration: none;
}
#home-bottom .features a:hover span {
text-decoration: underline;
}
/* Home bottom: FAQs */
#home-bottom .faqs {
float: left;
width: 300px;
margin-left: 10px;
}
#home-bottom .faqs h2 {
margin-bottom: 13px;
width: 56px;
height: 22px;
background-position: -356px -60px;
}
#home-bottom .faqs h3 {
margin-bottom: 9px;
font-size: 1.39em;
line-height: 1.0;
font-weight: normal;
}
#home-bottom .faqs li {
margin-bottom: 15px;
}
#home-bottom .faqs li p {
font-size: 0.92em;
line-height: 1.5;
}
/* Home bottom: Testimonials */
#home-bottom .testimonials {
float: left;
width: 300px;
margin: 0 20px;
}
#home-bottom .testimonials h2 {
margin-bottom: 15px;
width: 134px;
height: 18px;
background-position: -448px -60px;
}
#home-bottom .testimonials li {
margin-bottom: 20px;
}
#home-bottom .testimonials blockquote {
font: italic 1.08em/1.43 Georgia, "New York", utopia, serif;
}
#home-bottom .testimonials blockquote .author {
font: normal 0.86em/1.67 Helvetica, Arial, sans-serif;
}
#home-bottom .testimonials blockquote .author a {
color: #fff;
}
/* Home bottom: News */
#home-bottom .news {
float: left;
width: 300px;
}
#home-bottom .news h2 {
margin-bottom: 12px;
width: 171px;
height: 21px;
background-position: -614px -60px;
}
#home-bottom .news .message h3 {
margin-bottom: 6px;
}
#home-bottom .news .message h3 a {
text-decoration: underline;
}
#home-bottom .news .message p {
margin-bottom: 18px;
}
#home-bottom .news .latest-tweets {
padding-top: 20px;
border-top: 1px solid #1b7b75;
}
#home-bottom .news .latest-tweets h2 {
margin-bottom: 20px;
width: 133px;
height: 13px;
background-position: -798px -60px;
}
#home-bottom .news .latest-tweets li {
margin-bottom: 18px;
padding-left: 50px;
background: url(../images/home/ico_twitter_blinksale.jpg) 0 3px no-repeat;
}
/* 3.2 Sign up
------------------------------------------------------------------------------*/
#signup {
position: relative;
background-image: url(../images/bg_section_signup.jpg);
}
#signup h1 {
margin: 0 0 5px;
width: 419px;
height: 28px;
color: #056ea0;
font-size: 2.308em;
}
#signup h1 span {
background-image: url(../images/sprite_bg.png);
}
#signup .headline {
margin: 0 0 35px;
width: 420px;
color: #666666;
font-family: Georgia,'Times New Roman',sans-serif;
font-style: italic;
}
#signup .headline .ir-t {
position: absolute;
right: 64px;
top: -14px;
width: 147px;
height: 208px;
background-image: url(../images/badge_free.png);
}
#signup form {
margin: 35px 0 0;
}
#signup form div {
margin: 0 0 16px;
}
#signup form div:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#signup label {
margin: 0 0 4px;
display: block;
font-weight: bold;
}
#signup input {
padding: 7px;
width: 344px;
color: #666666;
font: normal bold 1.385em/1.1 Helvetica, Arial, sans-serif;
}
#signup .info {
padding: 0 0 0 20px;
float: right;
width: 260px;
background: transparent url(../images/sprite_bg.png) no-repeat 0 -128px;
}
#signup .site-address input {
margin: 0 5px 0 0;
width: 216px;
}
#signup .site-address span {
font-weight: bold;
font-size: 1.385em;
vertical-align: middle;
}
#signup .agreement {
margin: 24px 0 0;
border-top: 1px solid #CCC;
padding: 18px 0 1em;
}
#signup .agreement label {
display: inline;
font-weight: normal;
vertical-align: middle;
}
#signup .agreement input {
padding: 0;
width: auto;
vertical-align: middle;
}
#signup .agreement p {
margin: 0 0 1.4em;
}
#signup .actions {
margin: 0;
border-top: 1px solid #CCC;
padding: 12px 0 0;
}
#signup .actions input {
width: auto;
padding: 0;
margin: 0;
border: none;
cursor: pointer;
}
/* Plans */
#plans {
margin-top: -10px;
}
#plans h2 {
margin: 0 0 34px;
width: 344px;
height: 18px;
color: #056ea0;
font-size: 1.385em;
}
#plans h2 span {
background-image: url(../images/sprite_bg.png);
background-position: 0 -100px;
}
#plans table {
width: 100%;
font-size: 0.923em;
}
#plans th, #plans td {
border-bottom: 1px solid #CCC;
padding: 6px 0;
}
#plans thead th {
padding: 0 0 5px;
text-align: center;
font-weight: bold;
font-size: 1.167em;
}
#plans tbody th {
width: 300px;
}
#plans tbody td {
width: 120px;
text-align: center;
}
#plans .account-option th, #plans .account-option td {
padding: 5px 0;
font-weight: bold;
font-size: 1.167em;
}
.section-help {
margin: 20px 0;
}
.section-help h3 {
margin: 0 0 18px;
width: 119px;
height: 18px;
background-image: url(../images/sprite_bg_transparent.png);
background-position: 0 -160px;
}
.section-help dt {
margin: 0 0 7px;
font-size: 1.385em;
line-height: 1.0;
}
.section-help dd p {
margin: 0 0 1.4em;
}
/* 3.3 Blog
------------------------------------------------------------------------------*/
/* hentry */
.hentry {
border-top: 1px solid #CCC;
padding: 1.4em 0 0 0;
margin: 1em 0 0;
line-height: 1.38;
}
.hentry.first {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.hentry .entry-title {
margin: 0 0 5px;
color: #006e96;
font-size: 1.385em;
font-weight: normal;
}
.hentry p {
margin: 0 0 1.4em;
}
.hentry .author {
margin: 0 0 1.4em;
}
.hentry .author .fn {
display: block;
font-style: normal;
}
.hentry .comments {
padding: 0 16px 0 0;
background: transparent url(../images/ico_comments.png) no-repeat 100% 50%;
}
/* Comments */
#comments h2 {
margin: 0 0 3px;
font-size: 1.385em;
}
#comments .hfeed {
margin: 0;
padding: 0;
margin: 0 0 17px;
background: none;
}
#comments .hfeed li {
list-style: outside none none;
}
#comments .hentry {
margin: 0;
padding: 20px 0 1px 50px;
border: 1px solid #CCC;
border-width: 0 0 1px;
}
#comments .hentry:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#comments .photo {
margin: 0 0 0 -50px;
float: left;
}
#comments .entry-title {
margin: 0 0 7px;
color: #666666;
font-size: 1em;
line-height: 1.1em;
font-weight: bold;
}
/* Add comment form */
#respond h3 {
margin: 0 0 12px;
font-size: 1.385em;
}
#respond div {
margin: 0 0 15px;
}
#respond .actions {
margin: 0;
}
#respond label {
margin: 0 0 2px;
display: block;
font-weight: bold;
}
#respond input, #respond textarea {
padding: 3px 6px;
width: 348px;
color: #666666;
font: normal normal 1em/1.2em Helvetica, Arial, sans-serif;
}
#respond textarea {
padding: 6px;
width: 648px;
height: 154px;
}
/* Sidebar categories */
.section-categories {
margin: 18px 0;
}
.section-categories h3 {
margin: 0 0 8px;
width: 126px;
height: 18px;
background-image: url(../images/sprite_bg_transparent.png);
background-position: 0 -100px;
}
.section-categories ul {
margin: 0 0 0 -20px;
border-bottom: 1px solid #4f78a8;
}
.section-categories li {
border-top: 1px solid #4f78a8;
list-style: outside none none;
}
.section-categories a {
padding: 6px 5px 6px 20px;
display: block;
color: #FFF;
}
#blog-subscribe {
width: 124px;
height: 32px;
background-image: url(../images/sprite_bg_transparent.png);
background-position: 0 -120px;
}