/* ========================================================================== STYLE.CSS | CSS STYLESHEET -------------------------- Main Project specific styles - TxtStream - author: Richard Morris [richard@fueldesign.co.nz] version: - May 07 - Contents: -------------------------- 1 - Default Typography Sizing, Colours and Margins 2 - Global Stlyes for types 3 - Main Structural Divs 4 - Header styles 5 - Main body Styles 6 - Footer Styles ========================================================================== */ @import url("base.css"); /*@import url("sifr.css");*/ @import url("forms.css"); /* ========================================================================== 1 - Default Typography Sizing, Colours and Margins ========================================================================== */ html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address, abbr, input, select, textarea, table, td, th, a:link, a:visited { /* For Nescape 4.0 and other inheritance intolerant browsers */ font-family: "Trebuchet MS", Trebuchet, Verdana, Geneva, Arial, Helvetica, sans-serif; color: #666; line-height: 1.6em; } body { font-size: 62.5%; } div#container { font-size: 1.2em;} p, ul, dl, ol, form, blockquote { margin-bottom: 10px; } h1 { font-size: 1.2em; margin-bottom: 10px; text-transform: uppercase; color: #004c77;} h2 { font-size: 1.2em; margin-bottom: 10px; font-weight: normal; text-transform: uppercase; } h3 { font-size: 1.1em; margin-bottom: 10px; } h4 { font-size: 1.3em; margin-bottom: 1em; } h5 { font-size: 1.2em; margin-bottom: 1em; } /* ========================================================================== 2 - Global Styles for types ========================================================================== */ #primaryContent a, #sidebar a { text-decoration: underline; } a:hover{ color:blue } .leadin { font-weight: bold; } /* ========================================================================== 3 - Main Structural Divs ========================================================================== */ html, body { height: 100%; } body { background: #FFF; text-align: center; padding-top: 10px; } div#container { width: 728px; margin-left: auto; margin-right: auto; text-align: left; position: relative; } div#footer { clear: both; } .note { color: red;} /* ========================================================================== 4 - Header styles ========================================================================== */ a#logo { margin: 5px 0 10px 30px; display: block; width: 287px; height: 85px; border: none; background: none; } #taskbar { position: absolute; right: 0; top: 78px; } #taskbar li { display: inline; margin-left: 10px; } #taskbar a { font-size: 1em; margin-bottom: 10px; text-transform: uppercase; color: #004c77; background: transparent url(../images/bg/tickbox.gif) top left no-repeat;padding-left: 20px; } #taskbar li.current a { background-position: 0 -86px; } #taskbar a:visited { background-position: 0 -43px;} #banner { margin-top: 5px; } div#nav { width: 314px; height: 128px; overflow: hidden; float: left; background: #EEE } url(../images/bg/nav.jpg) top left no-repeat;} #nav ul { margin: 5px 10px 10px 40px; } #nav a { font-size: 1.2em; margin-bottom: 10px; text-transform: uppercase; color: #004c77; text-decoration: none; background: transparent url(../images/bg/tickbox.gif) top left no-repeat;padding-left: 20px; } #nav li.current a { background-position: 0 -86px; } #nav a:visited { background-position: 0 -43px;} div#header { margin-top: 10px; } ul#clickThrus { float: left; height: 129px; width: 414px; position: relative; margin-bottom: 0; } ul#clickThrus li { width: 128px; display: inline; } a#btnWhat { display: block; background: transparent url(../images/bg/buttons/what-is.gif) top left no-repeat; width: 129px; height: 129px; position: absolute; top: 0; left: 10px;} a#btnDownload { display: block; background: transparent url(../images/bg/buttons/download.gif) top left no-repeat; width: 129px; height: 129px; position: absolute; top: 0; left: 149px;} a#btnRegister { display: block; background: transparent url(../images/bg/buttons/sign-up.gif) top left no-repeat; width: 129px; height: 129px; position: absolute; top: 0; right: 0;} #clickThrus a:hover { background-position: bottom left; } #sidebar img { display: block; margin: 0 auto; margin-bottom: 20px; } #primaryContent a.box { text-decoration: none; display: block; border: 3px solid #E1EBF6; background: #FFF url(../images/bg/blue_gradient.gif) bottom left repeat-x; padding: 10px; margin-bottom: 10px; } #primaryContent3 a.box { text-decoration: none; display: block; border: 3px solid #E1EBF6; background: #FFF url(../images/bg/blue_gradient.gif) bottom left repeat-x; padding: 10px; margin-bottom: 10px; } #primaryContent a:hover.box { border: 3px solid #C4DCF3; background: #FFF url(../images/bg/blue_gradient2.gif) top left repeat-x; } .box strong { display: block; font-size: 1.3em; padding: 0; margin: 0; } #primaryContent3 a:hover.box { border: 3px solid #C4DCF3; background: #FFF url(../images/bg/blue_gradient2.gif) top left repeat-x; } .box strong { display: block; font-size: 1.3em; padding: 0; margin: 0; } a:hover.box strong { } .box em { display: block; margin-top: 5px; font-style: normal; } .box img { background: none; display: inline; float: left; margin-right: 10px; background: transparent url(../images/bg/blue_border.gif) top right repeat-y; padding: 10px 20px 10px 0; } .box span { font-weight: bold; color: #004c77; } /* ========================================================================== 5 - Main content styles ========================================================================== */ div#primaryContent { margin-top: 10px; float: left; width: 453px; background: transparent url(../images/bg/primaryContent.gif) top left no-repeat; padding-top: 5px; margin-bottom: 10px; } div#primaryContent2 { margin-top: 10px; float: left; width: 728px; background: transparent url(../images/bg/primaryContent2.gif) top left no-repeat; padding-top: 5px; margin-bottom: 10px; } div#primaryContent3 { margin-top: 10px; float: left; width: 353px; background: transparent url(../images/bg/primaryContent.gif) top left no-repeat; padding-top: 5px; margin-bottom: 10px; } #primaryContent .lining { padding: 10px 15px 15px 40px; background: transparent url(../images/bg/primaryContentLining.gif) bottom left no-repeat; } #primaryContent2 .lining { padding: 10px 15px 15px 40px; background: transparent url(../images/bg/primaryContent2Lining.gif) bottom left no-repeat; } #primaryContent3 .lining { padding: 10px 15px 15px 40px; background: transparent url(../images/bg/primaryContentLining.gif) bottom left no-repeat; } #primaryContent2 img { display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto; border: 2px solid #EEE; } #primaryContent3 img { display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto; border: 2px solid #EEE; } div#sidebar { margin-top: 10px; float: left; width: 265px; margin-left: 10px; background: transparent url(../images/bg/sidebarLining.gif) bottom left no-repeat; margin-bottom: 10px; } #sidebar .lining { background: transparent url(../images/bg/sidebar.jpg) top left no-repeat; padding: 15px; } ul.bulleted li { list-style-image: url(../images/bg/bullet.gif); margin-left: 20px; } #primaryContent ul#sitemap, #primaryContent #sitemap ul { list-style-type: none; background: url(../images/bg/vline.png) repeat-y; margin: 0; padding: 0; } #sitemap ul { margin-left: 10px; } #sitemap li { list-style-type: none; background: none; padding: 0 12px; line-height: 20px; background: url(../images/bg/node.png) no-repeat; } #sitemap li.last { background: #fff url(../images/bg/lastnode.png) no-repeat; } #sitemap a { border-bottom: none; } /* ========================================================================== 6 - Footer styles ========================================================================== */ ul#footNav { float: right; } #footNav li{ display: inline; margin-left: 10px; } #footNav a { font-size: 1em; margin-bottom: 10px; text-transform: uppercase; color: #004c77; background: transparent url(../images/bg/tickbox.gif) top left no-repeat;padding-left: 20px; } #footNav li.current a { background-position: 0 -86px; } #footNav a:visited { background-position: 0 -43px;}