/* ========================================================================== STYLE.CSS | CSS FRAMEWORK -------------------------- Main Project specific styles - STRAKER 07 - author: Richard Morris [richard@fueldesign.co.nz] version: - 16.07.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 7 - Page Specific styles ========================================================================== */ @import url("/tracker/app_templates/coretemplates/stylesheets/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: Arial, Helvetica, sans-serif; color: #666; line-height: 1.6em; } body { font-size: 62.5%; } address {margin:0; padding:0;} div#container { font-size: 1.2em;} p, ul, dl, ol, form, blockquote { margin-bottom: 10px; } h1 { font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 17px; margin-bottom: 15px; color: #333; } h2 { font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; margin-bottom: 10px; font-weight: normal; color: #333; } h3 { font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 10px; font-weight: normal; } h4 { font-size: 1.3em; margin-bottom: 1em; } h5 { font-size: 1.2em; margin-bottom: 1em; } /* ========================================================================== 2 - Global Styles for types ========================================================================== */ a:link, a:visited { color: #00ADEF; border-bottom: 1px solid #00ADEF; } h2.leadin { text-align: justify; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; color: #959595; display: block; margin-bottom: 15px; line-height: 1.3em; } .current a, .current { cursor: default; } #primaryContent p em, #primaryContent li em, .leadin em { background-color: #FFC; font-style: normal; color: #666; } #primaryContent ul li { list-style-type: disc; margin-left: 25px; } /* ========================================================================== 3 - Main Structural Divs ========================================================================== */ html, body { height: 100%; } html { cbackground: transparent url(/tracker/app_templates/coretemplates/images/bg/grid.gif) top center repeat-y; } body { background: transparent url(/tracker/app_templates/coretemplates/images/bg/bg.gif) top left repeat-x; text-align: center; } div#container { width: 980px; margin-left: auto; margin-right: auto; text-align: left; } #taskbar { padding: 0 10px; height: 38px; line-height: 38px; position: relative; } #navbar { padding: 0 10px; height: 38px; line-height: 38px; background: #035584 url(/tracker/app_templates/coretemplates/images/bg/navbar.gif) top left repeat-x; position: relative; } #main { background: transparent url(/shadozoom/images/bg/main.gif) top right no-repeat; min-height: 670px; } #sidebar { padding-top: 10px; width: 235px; float: right; } #footer { padding: 10px; position: relative; background: #EEE; border-top: 3px solid #DDD; } #primaryContent { padding-left: 10px; padding-right: 10px; margin-bottom: 15px; padding-top: 15px; } body#index #primaryContent { padding-left: 0; } body#index h1, body#index .leadin { margin-left: 10px; } body#twoCol #primaryContent { width: 715px; float: left; } body#index #main { background: none; } /* ========================================================================== 4 - #taskbar ========================================================================== */ #logo { border: none; margin-top: 1px; display: block; position: absolute; line-height: 35px; top: 13px; width: 131px; height: 14px; } /*background: transparent url(/tracker/app_templates/coretemplates/images/bg/logo-straker.gif) center left; */ /*a:hover#logo { background-position: bottom right; }*/ #topNav { position: absolute; right: 5px; margin-bottom: 0; margin-top: 1px; } #topNav li { display: inline; margin-left: 15px; } #topNav a { border: none; font-size: 14px; color: #820360; line-height: 38px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; } #topNav a:hover { color: #00ADEF; } #topNav li.current a { color: #00ADEF; } /* ========================================================================== 5 - #banner ========================================================================== */ /* ========================================================================== 6 - #navbar ========================================================================== */ #nav { margin-bottom: 0;} #nav li { display: block; height: 38px; float: left; margin-right: 15px; list-style: none; } #nav li.current { background: transparent url(/tracker/app_templates/coretemplates/images/bg/nav-current.gif) bottom center no-repeat; } #nav .current a { color: #FFF; } #nav a { border: none; color: #E8A9DD; font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; display: block; float: left; line-height: 38px; height: 38px; background-position: left center; background-repeat: no-repeat; } #nav a:hover { color: #FFF; } /* #nHome { background-image: url(/shadozoom/images/bg/nav/home.gif); width: 40px; } #nShadocms { background-image: url(/shadozoom/images/bg/nav/shadocms.gif); width: 77px; } #nZoomflex { background-image: url(/shadozoom/images/bg/nav/zoomflex.gif); width: 71px; } #nTour { background-image: url(/shadozoom/images/bg/nav/tour.gif); width: 95px; } #nCasestudies { background-image: url(/shadozoom/images/bg/nav/case-studies.gif); width: 91px; } #nFreetrial { background-image: url(/shadozoom/images/bg/nav/free-trial.gif); width: 65px; } #nOrder { background-image: url(/shadozoom/images/bg/nav/order-now.gif); width: 73px; } a:hover#nHome, li.current a#nHome { background-image: url(/shadozoom/images/bg/nav/homeO.gif); } a:hover#nShadocms, li.current a#nShadocms{ background-image: url(/shadozoom/images/bg/nav/shadocmsO.gif); } a:hover#nZoomflex, li.current a#nZoomflex { background-image: url(/shadozoom/images/bg/nav/zoomflexO.gif); } a:hover#nTour, li.current a#nTour { background-image: url(/shadozoom/images/bg/nav/tourO.gif); } a:hover#nCasestudies, li.current a#nCasestudies { background-image: url(/shadozoom/images/bg/nav/case-studiesO.gif); } a:hover#nFreetrial, li.current a#nFreetrial { background-image: url(/shadozoom/images/bg/nav/free-trialO.gif); } a:hover#nOrder, li.current a#nOrder { background-image: url(/shadozoom/images/bg/nav/order-nowO.gif); } */ #languageSelect { position: absolute; left: 10px; top: 10px; } #languageSelect li { display: inline; } #languageSelect img { display: inline; } #languageSelect a { border: none; padding-right: 5px; } /* ========================================================================== 7 - #primarycontent ========================================================================== */ .header { background: transparent url(/tracker/app_templates/coretemplates/images/bg/underline.gif) bottom left repeat-x; margin-bottom: 10px; position: relative; font-size: 0.8em; height: 25px; line-height: 25px; color: #AAA; } em#crumbs { font-style: normal; background: #FFF; } .header a { border: none; color: #00ADEF; } #pageOptions { line-height: 25px; position: absolute; right: 0; top: 0; margin: 0; } #pageOptions li { display: inline; margin-left: 10px; } #pageOptions img { display: inline; vertical-align: middle; margin-right: 4px; } #featured { float: left; margin-bottom: 15px; width: 245px; padding-top: 10px; background: #e2f4f9 url(/shadozoom/images/bg/featured.gif) top left repeat-x;} #featured h3 a:link, #featured h3 a:visited { border: none; display: block; color: #035584; font-size: 14px; color: display: block; background: transparent url(/shadozoom/images/bg/clickthru.gif) top right no-repeat; } #featured h3 a:hover { color: #00ADEF; background: transparent url(/shadozoom/images/bg/clickthruO.gif) top right no-repeat } #featured p, #featured h3, #primaryContent #featured li, #featured img { margin-left: 10px; margin-right: 10px; } #primaryContent #featured li { list-style-type: none; } ul.listing { clear: right; margin-bottom: 0; margin-bottom: 10px; } #primaryContent .listing li { list-style: none; margin-left: 0; width: 705px; float: left; padding-top: 10px; margin-right: 20px; position: relative; } h3 a:link, h3 a:visited { border: none; font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Arial, Helvetica, sans-serif; } .listing h3 { font-size: 14px; } .listing img, #featured img { margin: 0 auto; background: none; } .listing h3 a { color: #333333; display: block; background: transparent url(/shadozoom/images/bg/clickthru.gif) top right no-repeat; line-height: 20px; } .listing h3 a:hover { color: #00ADEF; background: transparent url(/shadozoom/images/bg/clickthruO.gif) top right no-repeat } .listing ul li { margin: 0; background: none; padding: 0; } .listing ul a { color: #666; border: none; z-index: 100; display: block; background: transparent url(/shadozoom/images/bg/pointer.gif) 0 5px no-repeat; padding-left: 13px; } a.view { border: 3px solid #DDD; margin-bottom: 10px; display: block; position: relative; } a:hover.view { border-color: #00ADEF; } .view strong { position: absolute; bottom: 5px; left: 5px; padding: 2px 7px 2px 22px; background: #CCC url(/shadozoom/images/bg/chips/zoom.png) 3px center no-repeat; font-size: 13px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: normal; filter:alpha(opacity=0.6); -moz-opacity: 0.6; opacity: 0.6;} a:hover.view strong { filter:alpha(opacity=1.0); -moz-opacity: 1.0; opacity: 1.0; } .view em { position: absolute; bottom: -3px; right: -3px; display: none; text-indent: -5000px; } a:hover.view em { display: block; width: 83px; height: 82px; } a.presentation em { background: transparent url(/shadozoom/images/bg/chips/presentation.png) bottom right no-repeat; } a.screenshot em { background: transparent url(/shadozoom/images/bg/chips/screenshot.png) bottom right no-repeat; } a.demo em { background: transparent url(/shadozoom/images/bg/chips/demo.png) bottom right no-repeat; } a.website em { background: transparent url(/shadozoom/images/bg/chips/website.png) bottom right no-repeat; } #news li { border-top: 1px solid #FFF; border-bottom: 1px solid #e2f4f9; display: block; } #news a { color: #666; border: none; display: block; padding-bottom: 3px; padding-top: 3px; z-index: 100; display: block; background: transparent url(/shadozoom/images/bg/pointer.gif) 0 8px no-repeat; padding-left: 13px;} #news a:hover { background: transparent url(/shadozoom/images/bg/pointer-blue.gif) 0 8px no-repeat; color: #00ADEF; } #tertiaryNav { width: 130px; padding: 10px; float: right; background: #e2f4f9; margin-left: 20px; } #primaryContent #tertiaryNav li { list-style: none; } #tertiaryNav h3 { color: #035584; } #primaryContent #tertiaryNav li { margin: 0; } #tertiaryNav ul { margin-bottom: 5px; } #tertiaryNav a { color: #666; border: none; margin:0; display: block; padding-bottom: 3px; padding-top: 3px; z-index: 100; display: block; background: transparent url(/shadozoom/images/bg/pointer.gif) 0 8px no-repeat; padding-left: 13px; } #tertiaryNav a:hover { background: transparent url(/shadozoom/images/bg/pointer-blue.gif) 0 8px no-repeat; color: #00ADEF; } /* ========================================================================== 8 - #sidebar ========================================================================== */ ul#subNav { } #subNav li { list-style: none; padding: 0 15px; } #subNav a { border: none; display: block; padding: 5px 0; color: #666; font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS" Arial, Helvetica, sans-serif; font-size: 13px; } #subNav a:hover { color: #00ADEF; } #subNav ul { margin-bottom: 0; background: transparent url(/shadozoom/images/bg/underline.gif) bottom left repeat-x; } #subNav ul li { padding-left: 25px; margin-left: -15px;vertical-align: top; } #subNav ul li a { color: #333; display: block; background: transparent url(/shadozoom/images/bg/pointer.gif) center left no-repeat; padding: 2px 10px 2px 12px; } #subNav ul li.folder a { background-image: url(/shadozoom/images/bg/arrow_right.gif) ;} #subNav ul li.current a { background-image: url(/shadozoom/images/bg/pointer-blue.gif) } #subNav img { display: inline; background: none; vertical-align: middle; margin-right: 5px;} #subNav ul li.current { background: #FFF; } #subNav ul li.current a { color: #00ADEF; } #sidebar .header h2, #sidebar .header h3 { font-weight: normal; margin: 0; padding-left: 15px; color: #333; font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS" Arial, Helvetica, sans-serif; font-size: 14px; } /* ========================================================================== 9 - #footer ========================================================================== */ .footNav { float: left; width: 112px; margin-right: 10px; font-size: 0.9em; } .footNav a { border: none; } .footNav li { list-style: none; } #footNav1 a { color: #666; } #footNav2 a { color: #888; } #footNav3 a { color: #AAA; } #footNav1 li.current a, #footNav2 li.current a, #footNav3 li.current a { color: #00ADEF; } .footNavLast { float: left; width: 212px; margin-right: 10px; font-size: 0.9em;margin-left:80px; } .footNavLast li { list-style: none; color: #AAA; } ul#sitemap, #sitemap ul { list-style-type: none; background: #FFF url(/shadozoom/images/bg/vline.png) repeat-y; margin: 0; padding: 0; } #sitemap ul { margin-left: 10px; } #sitemap li { margin: 0; padding: 0 12px; line-height: 20px; background: url(/shadozoom/images/bg/node.png) no-repeat; } #sitemap li.last { background: #FFF url(/shadozoom/images/bg/lastnode.png) no-repeat; } #sitemap a { border-bottom: none; } /* ========================================================================== 10 - Forms ========================================================================== */ input { font-size: 1.2em; padding: 2px; font-family: Arial, "Lucida Grande","Lucida Sans Unicode", "Trebuchet MS", Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif; color: #666; } form { padding-bottom: 12px; } form fieldset { position: relative; display: block; border: none; padding: 10px 20px; background: #EEE url(/shadozoom/images/bg/fieldset.gif) top left repeat-x; border: 2px solid #DDD; } form input, #primaryContent form label, #primaryContent form select, #primaryContent form textarea { vertical-align: middle; } input.field, #primaryContent select.field, #primaryContent textarea.field { background-color: #FFF; width: 250px; } form label { padding-top: 3px; display: block; float: left; width: 200px; margin: 0 10px 0 0; color: #666; } label.required { color: #00AFED; } form fieldset div { vertical-align: middle; padding: 3px 0; clear: both; border-top: 1px solid #FFF; border-bottom: 1px solid #EEE; } input.button { margin-top: 10px; } form p { margin-left: 210px;} form p input{ margin-left: 10px; } form table { width: 100%; background: #FFF; } form td, form th { padding: 5px; border: 2px solid #EEE; } form th { background: #CCC; color: #FFF; font-weight: normal; } form .small { width: 30px; } #primaryContent form li { list-style: none; margin: 0; } form ul { margin-left: 210px; margin-bottom: 0; } form li input { margin-right: 5px; } form#search { position: absolute; right: 10px; top: 10px; } form#search fieldset, form#search input, form#search label, form#search label { margin:0; padding: 0;} form#search .field { width: 100px; } .searchResult {background: transparent url(/shadozoom/images/bg/underline.gif) bottom left repeat-x; } .button { cursor: pointer} .code, code { font-family: Monaco, "Courier New", Courier, monospace; color: #035584; border: 1px solid #CCC; background-color: #eee; overflow: auto; max-height: 200px; padding: 5px; } .blogcomment{ color: #E6E6E6; border-left: 5px solid #CCC; background-color: #eee; overflow: auto; padding: 5px; margin-bottom: 10px; } .blogposter { font-size: 10px; color: #999; }