Sample CSS Stylesheet

/* CSS Document */
/* Browser Reset */
html { font-family: "Palatino Linotype", Palatino, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Copperplate, "Copperplate Gothic Light", Geneva, Arial, Verdana, sans-serif;
font-weight: normal; font-size: 62.5%; color: #000; background-color: transparent; line-height: 1.6 }

body, span, div, a, p, img, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5,
h6, pre, big, cite, code, del, dfn, em, ins, kb, q, s, samp, small, strike, strong, sub, sup,
tt, var, u, i, center, caption, acronym, abbr, address, form, fieldset, legend, applet, object, iframe,
p, blockquote, table, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; }

form, input, button, textarea, fieldset, legend, code, th, td, span, acronym, abbr, address { vertical-align: baseline; }

html, body { height: 100%; }

/* tables need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }

:link, :visited, :hover, :focus, :active  { outline: 0; }

:visited { color: #0000ee; }

img { line-height: 0; display: block; vertical-align: bottom; border: 0; }

/* remember to highlight inserts somehow! */
a, ins { text-decoration: none; }

del { text-decoration: line-through; }

ol, ul { list-style: none outside none; }

blockquote:before, blockquote:after, q:before, q:after
{ content: ""; }

caption, th { text-align: left; font-weight: normal; }

blockquote, q { quotes: none; }

abbr, acronym { font-variant: normal; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

address, caption, cite, code, dfn, em, strong, th,
var, h1, h2, h3, h4, h5, h6 { font-style: normal; font-weight: normal; }

/* insert the wordbreak equivalent HTML entity for Opera and Safari */
wbr:after { content: "0200B"; }

wbr { white-space: nowrap; }

/* End Browser Reset */

/* Positioning */

#branding, #overlay, #chapter1, .nav, .header, .footer, .business_caption { position: absolute; } 

#container, #search, #title_text, .nav_bar, .press_header, .pages { position: relative; }

/* Use left: 50% to always center these elements in any resolution */
#branding, #overlay, .nav, .header, .footer { left: 50%; } 

.nav { top: 135px; }

/* Glue the header and footer to their respective edges of the screen */
.footer { bottom: 0; }

.header { top: 10px; } 

.links_list a, .side_header, .street, .sentence, .spec, .navitem, .onepage, .pagenum { display: block; }

/* Inner blocks need inline-block to display in a column format */
#contact, .ads, .field, .links, .blurb, .column, .nav a, .nav_list, .sitemap li { display: -moz-inline-box; -moz-box-orient:vertical; display: inline-block; vertical-align: top; } 

.links_list img, #search, .pages, .business_caption { display: inline; }

#business_photo, .onepage { float: left; }

/* End Positioning */

/* Typography */

.no_list { list-style-type: decimal; }

.list { list-style-type: square; }

#container { font-size: 160%; }

.nav, .links { font-size: 75%; }

.fine_print, .error, .success { font-size: 85%; }

.sitemap_link { font-size: 65%; }

.press_headline, .choice, .sitemap_link { text-transform: uppercase; }

.slogan { font-size: 50%; }

.blurb_title { color: #F8CBDF; }

.success { font-weight: normal; }

.teaser, .side_header, .onepage, .pagetext, .column, .column_title, .fine_print { font-size: 120%; }

#branding, .footerlink, .nav, .copyright, .slogan, .thanks, .page_title, .section_title, .choice, .sitemap { text-align: center; }

#branding { font-size: 200%; letter-spacing: 1px; }

#branding, .emphasis, .column_title, .term, .thanks, .nav a, .side_header, .fine_print, .section, h1, h2, h3, h4, h5, h6 { font-weight: bold; }

.pages { text-align: left; }

.press_header { text-align: right; }

.disclaimer, .blurb_title { font-style: italic; }

#branding, .footer, .sample, .fine_print, .page_title { color: #822785; }

.input_name { color: #D6D6D6; }

#container, .slogan { color: #000; }

#request, .nav a, .nav a:visited, .error { color: #f7f7f7; }

.wrapped_paragraph { white-space: pre; }

.sitemap_link { font-family: Arial; }

/* End Typography */

/* Box Model */

/* Center the page content and the header background */
#main_header, .content, #overlay, .nav_bar, .copy, .no_list, .sitemap { margin: 0 auto; overflow: hidden; }

.main { margin-left: auto; margin-right: auto; }

/* Add padding and margin to unconditionally separate the page content from the footer */
.content { padding-bottom: 80px; }

/* Set margin-left for centered absolute or relatively positioned elements equal to half the width */
/* This will space the left and right margins an equal distance from the center of the parent block */
#branding { margin-left: -198px; }

#business_photo, .copy, .media, .sample, .no_list > li, .page_title, .sentence, .instruction, .list_footer { padding-bottom: 24px; }

.nav { margin-left: -323.5px; } 

.footer { margin-left: -498px; }

/* Push the content away from the absolutely positioned header */
.main, .ads, .links { margin-top: 50px;}

.business_caption { margin-top: 300px; margin-left: 190px; }

.side_header, .nav a { margin-bottom: 4px; }

.main { padding: 0 24px; }

.sample { margin-left: 32px; margin-right: 32px; }

.links { margin-left: 4px; margin-right: -4px; }

.nav a { padding: 10px 0; margin: 0; }

.links_list img { margin-right: 4px; }

.list li { margin-left: 20px; }

#branding { margin-bottom: -10px; }

#request { border: 2px #F8CBDF outset; }

.onepage { border: 1px solid #000; }

.caption_text { padding-right: 4px; border-right: 1px solid #000; }

.pages { margin-left: -5px; }

.side_header { border-top:1px solid #F8CBDF; border-bottom: 1px solid #F8CBDF; }

.emphasis { border-bottom: 1px solid #000; }

.error, .sitemap_link { margin-left: 8px; }

/* End Box Model */

/* Graphic Effects */

/* Hide the SEO text for images */
.pagetext, .ads, .sub_item { display: none; }

/* .ads { visibility: hidden; } */

.links_list a:hover { font-weight: bold; color: #E3006D; }

.fine_print:before, .instruction:before { content: "***"; }

#request:hover { border-style: inset; }

/* Anti-Rollover for un-hovered nav links */
.nav:hover a { -khtml-opacity: 0.5; -webkit-opacity: 0.5; opacity: 0.5; }

/* Rollover for nav links */
.nav a:hover { color: #f7f7f7; background-color: #86618C; -webkit-opacity: 0.9; opacity: 0.9; }

.nav_list:hover .sub_item { display: list-item; }

.onepage:hover, .onepage:hover .pagenum img { width: 432px; }

/* #fade { filter: alpha(opacity=20); -khtml-opacity: 0.2; -webkit-opacity: 0.2; opacity :0.2; } */

#sender:hover:focus, #sender:focus, #email:hover:focus, #email:focus, #message:hover:focus, #message:focus { background-color: #fff; border: 2px solid #F8CBDF; }

#sender:hover, #email:hover, #message:hover { background-color: #f7f7f7; }

/* End Graphic Effects */

/* Dimensions */

/* Push the footer to the bottom of the screen at any resolution */
#container { min-height: 100%; }

/* Set width and height for images in CSS, not inline */

.onepage, .pagenum img { width: 8px; height: 648px; }

.nav_bar { height: 39px; }

#logo img { width: 100px; height: 100px; }

#banner img { width: 150px; height: 29px; }

#icon img { width: 31px; height: 31px; }

#book_ad img { width: 80px; height: 121px; }

#book_promo img { width: 288px; height: 435px; }

#business_photo img { width: 200px; height: 300px; }

.links_list img { width: 16px; height: 16px; }

.portfolio_thumb img { width: 200px; height: 155px; }

.portfolio_mag_thumb img { width: 249px; height: 309px; }

/* Set width for inner divs and relatively positioned text to avoid overflow */
#branding { width: 396px; }

#main_header { height: 135px; }

.blurb { width: 300px; height: 435px; overflow: scroll; }

#contact, #po_box, #contact p, #contact label, .form_heading { width: 300px; }

.blurb_title, .sentence, .spec, .street, .column_title, .form_border, .form_border p { width: 250px; }

.nav, .copy, .media, .sitemap, .no_list, .list, .press_header { width: 647px; }

.nav a, .navitem, .nav_list { width: 100px; }

.ads, .links, .ads_list, .links_list { width: 143px; }

.footer, .parent_item, .sub_item { height: 39px; }

/* Set width of content equal to the font-size */
.main, .footer, .nav_bar, .content { width: 996px; }

#main_header { width: 100%; }

/* End Dimensions */

/* Backgrounds */

#request, .nav a, .nav_bar { background-color: #822785; }

.side_header { background-color: #86618C; }

.error { background-color: #ff0000; }

#container { background-image: url(../images/canvas.gif) } 

#main_header { background-color: #fff; }

#logo img { background-image: url(../images/logo.gif); background-color: transparent; }

#banner img { background-image: url(../images/banner.gif); background-color: transparent; }

.coverpage img { background-image: url(../images/transparent-pixel.gif); }

.pageone img { background-image: url(../images/transparent-pixel.gif); }

.pagetwo img { background-image: url(../images/transparent-pixel.gif); }

.pagethree img { background-image: url(../images/transparent-pixel.gif); }

.pagefour img { background-image: url(../images/transparent-pixel.gif); }

.pagefive img { background-image: url(../images/transparent-pixel.gif); }

#business_photo img { background-image: url(../images/transparent-pixel.gif); }

#sender, #email, #message { background-color: #e8e8e8; }

#contact, .content , .main { background-color: #f8cbdf; }

/* End Backgrounds */

/* IE Specific Styles */

    /* Positioning */

    /* Container divs need inline-block to align inner divs in column format */
    .ie .sitemap, .ie .nav, .ie .content { display: inline-block; } 

    /* Inner divs need inline and vertical-align properties to be symmetrical */
    .ie .sitemap li, .ie .nav a, .ie .pages, .ie #contact, .ie #po_box, .ie #book_promo, .ie .ads, .ie .main, .ie .links, .ie .nav_list, .ie .navitem, .ie .blurb, .ie .blurb_title, .ie .column_title { display: inline; vertical-align: top; }

    .ie .footer { bottom: -1px; }

    .ie #title_text { bottom: 24px; }

    /* End Positioning */

    /* Typography */

    .ie .wrapped_paragraph { word-wrap: break-word; }

    /* End Typography */

    /* Effects */

    /* Anti-Rollover for un-hovered nav links */
    .ie .nav:hover a { filter:alpha(opacity = 50); }

    /* Rollover for nav links */

    .ie .nav a:hover { filter:alpha(opacity = 90); }

    /* End Effects */

    /* Box Model */

    /* buttons need overflow and auto width to avoid extra padding */
    .ie button { overflow: visible; width: auto; }

    /* negative margins to center content are slightly smaller in IE */
    .ie .nav { margin-left: -312px; }

    /* .footer { margin-left: -308px; } */

    /* IE doesn't add enough padding between the content and the footer by default */
    .ie .content { padding-bottom: 120px; }

    /* IE doesn't support the descendant selector, so redefine these styles */
    .ie .no_list li { padding-bottom: 24px; }

    .ie .list li { margin-left: 20px; }

    /* End Box Model */

    /* Dimensions */

    /* IE needs the container to be height:100% since min-height is unsupported */
    .ie #container { height: 100%; }

    /* End Dimensions */

    /* Backgrounds */

    /* End Backgrounds */

/* End IE Specific Styles */

TrackBack URI

Blog at WordPress.com. | Theme: Pool by Borja Fernandez.
Entries and comments feeds.