body { margin: 0 ; padding: 0; background: #ffffff; font: 0.5em/1.5em Verdana, sans-serif; border: solid #616161; border-width: 0; text-align:center; } h1, h2, h3 { font-family: Verdana, sans-serif; font-weight: normal; color: #eb4e00; line-height: 1em; margin: 0; padding: 0; } h1 { font-size: 1.6em; color: #9f9e00;} h2 { font-size: 1.4em; color: #9f9e00; } h3 { font-size: 1.2em; color: #9f9e00; } p { line-height: 1.5em; margin: 0.5em 0 1em; } p:first-letter { font-size:1em; } p:first-line { line-height:1em; } #centre { width:950px; top:15px; text-align:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } /* General styles for the masthead and footer. They are the same on both pages. */ #masthead { } #masthead h1 { color: #ffff00; padding: 0.5em .5em; } #masthead h3 { color: #222222; font-family:Comic Sans MS; font-size:1.2em; margin-left:5em; padding-bottom:0.5em; } #footer { clear: both; width: 100%; font-size: 0.8em; text-align: center; color: #999; border: 1px solid #9f9e00; border-width: 1px 0; } #leftcol, #rightcol { background: #fff7de; font-size: 0.8em; font-family:Times New Roman; padding: 0 0.5%; height:100%; } #leftcol { width: 17%; float: left; padding: 0 0.5%; } #content { /*background: #ff0;*/ background-repeat: repeat-y; padding: 0% 0%; margin-left: 17%; } #content h2, #content h3 { padding: 0.25em 0 .75em; } /* This is where styling the comes into play. The "home" page will display all three columns while the "about me" will hide the right column. */ body.threecolumns #rightcol { width: 16%; float: right; padding: 0 0; } body.threecolumns #content { margin-right: 16%; } /* On a page with only two columns we'll hide the right column */ body.twocolumns #rightcol { display: none; } /* On a page with two columns the right column is hidden and therefore we adjust content to stretch all the way */ body.twocolumns #content { margin-right: 2%; } /* This rule simply demonstrates how you can use a id instead of its class to manupulate visibility of elements */ body#contact #footer { display: none; } /* ================================================================ ================================================================ */ .divider_hor { width:100%; height:1em; background-image:url(images/grey-dot.gif); background-repeat: repeat; margin:0.5em, 0.5em, 0.5em, 0.5em; } #divider_vert_l { width:1px; /*height:0px; background-image:url(images/grey-dot.gif);*/ background-repeat: repeat-y; float:left; } #divider_vert_r { width:1px; /*height:100em; background-image:url(images/grey-dot.gif);*/ background-repeat: repeat; float:right; margin-right:0.2em; }