/* ========================================================================== STYLE.CSS | CSS FRAMEWORK -------------------------- Main Project specific styles - IT DIRECT - author: Richard Morris [richard@fueldesign.co.nz] version: - DECEMBER '06 - 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 7 - Page Specific sty;es ========================================================================== */ @import url("base.css"); @import url("thickbox.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: "Lucida Grande", "Trebuchet MS", Trebuchet ,Verdana, Geneva, Arial, Helvetica, sans-serif; color: #666; line-height: 1.6em; } html { background: transparent url(../images/img/loadingAnimation.gif) center center no-repeat; } body { font-size: 62.5%; } div#container, div#TB_window { font-size: 1.2em;} address, p, ul, dl, ol, form, blockquote { margin-bottom: 0.5em; } h1 { font-size: 1.7em; margin-bottom: 10px; color: #6098D1; } h2 { font-size: 1.3em; margin-bottom: 5px; border-bottom: 1px dotted #CCC; position: relative; } h3 { font-size: 1.3em; margin-bottom: 5px; font-weight: normal; } h4 { font-size: 1.3em; margin-bottom: 5px; } h5 { font-size: 1.2em; margin-bottom: 5px; } h1, h2, h3, h4, h5, legend, dl.faq dt, .box strong, #TB_ajaxWindowTitle, a:link.pdf, a:visited.pdf, a:link.txt, a:visited.txt, a:link.msi, a:visited.msi { font-family: "Myriad Pro, Bold", Helvetica, "Lucida Grande", "Trebuchet MS", Trebuchet ,Verdana, Geneva, Arial, Helvetica, sans-serif; } /* ========================================================================== 2 - Global Styles for types ========================================================================== */ #primaryContent a:link, #primaryContent a:visited { border-bottom: 1px dotted #AAA; } #primaryContent a:hover, #primaryContent a:active { border-bottom: 1px solid #6098D1; color: #6098D1; } a:link.external, a:visited.external { background: transparent url(../images/bg/external.gif) top right no-repeat; padding-right: 12px;} ol li { list-style-type: lower-alpha; list-style-position: inside; } dl.faq dt { font-size: 1.3em; margin-bottom: 5px; border-bottom: 1px dotted #CCC; position: relative; line-height: 25px; font-weight: bold; padding-right: 30px; } #primaryContent dt a:link.top, #primaryContent dt a:visited.top, #primaryContent h2 a:link.top, #primaryContent h2 a:visited.top { border: none; font-weight: normal; display: block; position: absolute; top: 0; right: 0; background: transparent url(../images/bg/top.gif) top right no-repeat; width: 39px; height: 19px line-height: 19px; color: #FFF; font-size: 12px; text-align: center; } dl.faq dd { margin-bottom: 15px; } strong.error { color: #F00; } em.required { color: #F00; font-weight: bold; font-style: normal; } #primaryContent ul li, #TB_window ul li { margin-left: 5px; padding-left: 13px; background: transparent url(../images/bg/bullet.gif) top left no-repeat; margin-bottom: 5px; } /* ========================================================================== 3 - Main Structural Divs ========================================================================== */ html, body { height: 100%; } body { background: #FFF url(../images/bg/bg.gif) top left repeat-x; text-align: center; } div#container { width: 760px; margin-left: auto; margin-right: auto; text-align: left; } div#header { background: transparent url(../images/bg/header_bg.jpg) top right no-repeat; height: 159px; width: 100%; position: relative; } div#primaryContent { float: right; width: 545px; margin-top: 10px; } div#sidebar { width: 200px; float: left; margin-top: 10px; } div#footer { clear: both; border-top: 1px solid #EEE; width: 760px; padding-top: 5px; } /* ========================================================================== 4 - Header styles ========================================================================== */ ul#nav { position: absolute; bottom: 0; right: 0; margin: 0; } #nav li { float: left; height: 34px; margin-left: 11px; } #nav a { text-transform: uppercase; color: #598DC3; font-weight: bold; display: block; height: 34px;} a#home { background: transparent url(../images/bg/nav/home.gif) left center no-repeat; width: 39px; } a#features { background: transparent url(../images/bg/nav/features.gif) left center no-repeat; width: 64px; } a#screenshots { background: transparent url(../images/bg/nav/screenshots.gif) left center no-repeat; width: 91px; } a#downloads { background: transparent url(../images/bg/nav/downloads.gif) left center no-repeat; width: 85px; } a#faq { background: transparent url(../images/bg/nav/faq.gif) left center no-repeat; width: 25px; } a#order { background: transparent url(../images/bg/nav/order.gif) left center no-repeat; width: 44px; } a#support { background: transparent url(../images/bg/nav/support.gif) left center no-repeat; width: 60px; } a#contact { background: transparent url(../images/bg/nav/contact.gif) left center no-repeat; width: 59px; } #nav a:hover { background-position: right center; } #nav li.current { background: transparent url(../images/bg/nav_current.gif) bottom center no-repeat; } #nav li.current a { cursor: default; background-position: right center; } a#logo { position: absolute; top: 15px; border: none; } /* ========================================================================== 5 - Main content styles ========================================================================== */ a:hover.box strong { color: #000; } a:hover.box em { color: #6098d1; } /* primaryContent */ #primaryContent a.box { 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; } #primaryContent .box strong { display: block; font-size: 1.3em; margin-bottom: 5px; padding-bottom: 8px; } #primaryContent a:hover.box strong { } #primaryContent .box em { display: block; margin-top: 5px; font-style: normal; } #userAccountBox { } .box#userAccountBox strong { padding: 0; margin: 0; } #userAccountBox 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; } a:hover#userAccountBox { color: #666; } ul.gallery { width: 545px; margin-bottom: 10px; } #primaryContent ul.gallery li { background: none; padding: 0; margin: 0; float: left; margin-right: 6px; margin-bottom: 10px; width: 266px; height: 100px; position: relative; } #primaryContent ul.gallery li a:link, #primaryContent ul.gallery li a:visited { display: block; border: none; } ul.gallery img { background: transparent url(../images/img/loadingAnimation.gif) center center no-repeat; } .gallery a img { filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; } .gallery a:hover img { filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; } .gallery li span.poke { text-indent: -5000px; position: absolute; width: 65px; height: 33px; background: transparent url(../images/bg/poke.png) top left no-repeat; top: -6px; right: 15px; z-index: 100px; display: none; } ul.gallery li a:hover span.poke { display: block;} /* sidebar */ #sidebar a.box { display: block; border: 3px solid #EEE; background: #FFF url(../images/bg/grey_gradient.gif) top left repeat-x; padding: 10px; margin-bottom: 10px; width: 174px; } #sidebar a:hover.box { border: 3px solid #E1EBF6; background: #E1EBF6 url(../images/bg/blue_gradient.gif) top left repeat-x; } #sidebar .box strong { display: block; font-size: 1.3em; margin-bottom: 5px; background: transparent url(../images/bg/grey_underline.gif) bottom left repeat-x; padding-bottom: 8px; } #sidebar a:hover.box strong { background: transparent url(../images/bg/blue_underline.gif) bottom left repeat-x; } #sidebar .box em { display: block; margin-top: 5px; font-style: normal; } #sidebar blockquote { background: #F5F5F5 url(../images/bg/blockquote_bg.gif) bottom right no-repeat; padding: 10px; } blockquote h2 { background: transparent url(../images/bg/grey_underline.gif) bottom left repeat-x; border: none; padding-bottom: 8px; } #sidebar blockquote p { font-family: georgia, "times new roman", serif; color: #AAA; font-size: 1.2em; margin: 10px; } #sidebar blockquote cite { color: #666; display: block; font-style: normal; font-size: 11px; margin-top: 10px; font-family: "Lucida Grande", "Trebuchet MS", Trebuchet ,Verdana, Geneva, Arial, Helvetica, sans-serif; line-height: 14px; } #sidebar blockquote cite a { display: block; } a.screenshot { background: transparent url(../images/bg/screen.gif) top right no-repeat; padding-right: 14px; } #primaryContent a:link.pdf, #primaryContent a:visited.pdf, #TB_window a:link.pdf, #TB_window a:visited.pdf { margin-bottom: 8px; color: #666; font-size: 1.3em; font-weight: bold; background: transparent url(../images/bg/pdf.gif) top left no-repeat; display: block; height: 71px; padding-left: 80px; line-height: 71px; border: none; } #primaryContent a:link.txt, #primaryContent a:visited.txt, #TB_window a:link.txt, #TB_window a:visited.txt { margin-bottom: 8px; color: #666; font-size: 1.3em; font-weight: bold; background: transparent url(../images/bg/txt.gif) top left no-repeat; display: block; height: 71px; padding-left: 80px; line-height: 71px; border: none; } #TB_window a:link.msi, #TB_window a:visited.msi { color: #666; font-size: 1.3em; font-weight: bold; background: transparent url(../images/bg/msi.gif) top left no-repeat; display: block; height: 58px; padding-left: 60px; line-height: 60px; border: none; } #primaryContent a:hover.pdf, #primaryContent a:hover.txt, #primaryContent a:hover.msi, #primaryContent a:hover.pdf { color: #6098D1; } /* ========================================================================== 6 - Footer styles ========================================================================== */ em#copyright { font-style: normal; float: left; width: 205px; margin-left: 10px; } em#copyright a { color: #CCC; } ul#footNav { position: relative; padding-bottom: 10px; } #footNav li{ display: inline; color: #EEE; } #footer a { border: none; color: #CCC; } #footer a:hover { color: #666; } #footNav li.current a { border-bottom: 3px solid #EEE; } #footNav li.current a:hover { color: #CCC; cursor: default; } #footer a.top { border: none; font-weight: normal; display: block; background: transparent url(../images/bg/top2.gif) top right no-repeat; width: 39px; height: 19px line-height: 19px; color: #FFF; font-size: 12px; text-align: center; position: absolute; top: 0; right: 0; } /* ========================================================================== 7 - Page specific styles ========================================================================== */ ul#sitemap li { background: transparent url(../images/bg/required.gif) top left no-repeat; padding-left: 20px; } ul#sitemap ul { margin: 0; } ul#sitemap ul li { background: none; padding: 0; margin-left: 10px; } div#success { background: #e3fce5; border: 3px solid #9ae49e; padding: 10px; } #success h2, #success p { color: #28a82e; } #success h2 { border-bottom: 1px dotted #28a82e; } div#error { background: #fed3d6; border: 3px solid #fc9ca3; padding: 10px; } #error h2, #error p { color: #e3535d; } #error h2 { border-bottom: 1px dotted #e3535d; }