/* ========================================================================== 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 sty;es ========================================================================== */ @import url("/shadozoom/app_templates/_stylesheet/base.css"); /*@import url("sifr.css");*/ @import url("forms.css"); /* ========================================================================== 1 - Default Typography Sizing, Colours and Margins ========================================================================== */ /*html, body, form, fieldset, p, pre, blockquote, ol, dl, address, abbr, input, select, textarea, table, td, th, a:link, a:visited { font-family: "Arabic Transparent","Simplified Arabic",arial,verdana,sans-serif; color: #434343; line-height: 1.6em; font-size: 14px; }*/ body { background: #fff } #custom-doc { width:75.92em;*width:74.07em;min-width:998; margin:auto; text-align: right; } p, dl, ol, form, blockquote { margin-bottom: 10px;text-align: right; } /* ========================================================================== 2 - Global Styles for types ========================================================================== /*a:link, a:visited { color: #00ADEF; text-decoration: underline; } a:hover { color: #00ADEF; text-decoration: none; }*/ a img { border: 0; } a.no-underline { border-bottom: 0; } .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; } /* div#container { width: 980px; margin-left: auto; margin-right: auto; text-align: left; background-color:#fff;border-left:3px solid #ccc;border-right:3px solid #ccc;} */ #taskbar { padding: 0 10px; height: 60px; line-height: 60px; position: relative;} /* #navbar-red { padding: 0 10px; height: 38px; line-height: 38px; background: #035584 url(/shadozoom/images/bg/navbar-red.gif) top left repeat-x; position: relative} */ #navbar { padding: 0 10px; height: 38px; line-height: 38px; background: #035584 url(/shadozoom/images/bg/navbar.gif) top left repeat-x; position: relative} #navbar-green { padding: 0 10px; height: 38px; line-height: 38px; background: #035584 url(/shadozoom/images/bg/navbar-green.gif) top left repeat-x; position: relative} #lowernavbar { padding-right:15px;padding-left:20px; height: 29px;background-color: #fff; position: relative; } #lowernavbar-red {padding-right: 15px;padding-left:5px; /*height: 29px;*/ height: 15px; line-height: 29px; background-color: #3d3d3d; position: relative ;color:#fff ;/*text-transform: uppercase;*/} #lowernavbar-green { padding-right:15px;padding-left:5px; height: 29px; line-height: 29px; background-color: #3d3d3d; /*background: #858585 url(/shadozoom/images/bg/navbarlower-green.jpg) top left repeat-x;*/ position: relative ;color:#fff;/*text-transform: uppercase;*/ } #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; } /* ========================================================================== 4 - #taskbar ==========================================================================*/ #logo { border: none; margin-top: 0px; display: block; position: absolute; top: 0px; left: 9px; background: transparent url(/shadozoom/images/logo_straker.gif) no-repeat; width: 242px; height: 88px; } #topNav { position: absolute; right: 5px; margin-bottom: 0; margin-top: 1px; top:6px;} #topNav li { display: inline; margin-left: 6px;margin-right:6px; } #topNav a { border: none; color: #898989; line-height: 1px; font-family: "Arabic Transparent","Simplified Arabic",arial,verdana,sans-serif;font-size: 11px; } #topNav a:hover { color: #00ADEF; } #topNav li.current a { color: #00ADEF; } /* ========================================================================== 5 - #banner ========================================================================== */ #banner { width: 100%; height: 240px; background: url(/shadozoom/app_templates/images/home/banner.png) no-repeat 20px 0; } #banner-inner { position: relative; top: 100px; left: 52px; width: 510px; } #banner p { color: #FFF; line-height: 1.3em; font-size: 18px; } /* ========================================================================== 6 - #navbar ========================================================================== */ #nav { margin-bottom: 0;} #nav li { display: block; height: 32px; float: left; margin-right: 0px; list-style: none; } #nav li.current { background: transparent url(/shadozoom/images/bg/nav-current.gif) bottom center no-repeat; height: 32px; } #nav .current a { color:#fff; padding-left:10px; padding-right:10px; background-color:#858585;} #nav a { padding-left: 10px; padding-right: 10px; border: none; color: #FFF; font-family: "Arabic Transparent","Simplified Arabic",arial,verdana,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: #00ADEF; background-color: #06679f; padding-left:10px; padding-right:10px; } #lowernav { margin-bottom: 0;margin-top:0;} #lowernav li { display: block; height: 29px; float: left; margin-right: 15px; list-style: none; } #lowernav li.current { background: transparent url(/shadozoom/images/bg/nav-current.gif) bottom center no-repeat; } #lowernav .current a { color: #333; } #lowernav a { border: none; color: #333; font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; display: block; float: left; line-height: 29px; height: 29px; background-position: left center; background-repeat: no-repeat; } #lowernav a:hover { color: #333; } #lowernav-red { margin-bottom: 0;} #lowernav-red li { display: block; height: 29px; float: left; margin-right: 15px; list-style: none; } #lowernav-red li.current { background: transparent url(/shadozoom/images/bg/nav-current.gif) bottom center no-repeat; } #lowernav-red .current a { color: #fff; } #lowernav-red a { border: none; color: #fff; font-family: "Arabic Transparent","Simplified Arabic",arial,verdana,sans-serif;font-size: 12px; font-weight: bold; display: block; float: left; line-height: 29px; height: 29px; background-position: left center; background-repeat: no-repeat; } #lowernav-red a:hover { color: #fff; } #languageSelect { padding-bottom: 3px; text-align: right; margin-top: -25px; } #languageSelect a { border: none; color: #898989; padding-right: 5px; line-height: 1px; font-family: "Arabic Transparent","Simplified Arabic",arial,verdana,sans-serif; font-size: 11px; } #languageSelect a:hover { color: #00ADEF; } #languageSelect li { display: inline; } #languageSelect img { display: inline; } /* ========================================================================== 7 - #primarycontent ========================================================================== */ #breadcrumbs { background: transparent url(/shadozoom/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; } #breadcrumbs a { border: none; color: #00ADEF; } #featured { float: left; margin-bottom: 15px; width: 230px; 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; } .listing li { list-style: none; margin-left: 0; width: 225px; float: left; padding-top: 10px; margin-right: 20px; position: relative; } .listing h3 { font-size: 14px; } .listing img, #featured img { margin: 0 auto; display: block; background: none; } .listing h3 a { color: #333333; display: block;line-height: 20px; } .listing h3 a:hover { color: #00ADEF; } .listing ul li { margin: 0; background: none; padding: 0; } .listing ul a { color: #666; border: none; z-index: 100; display: block; 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: "Arabic Transparent","Simplified Arabic",arial,verdana,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 */ #news ul {margin-left:0 !important;padding-left:0 !important;} #news li { border-bottom: 1px solid #CCC; display: block;padding-left: 0px !important;margin-left:0px !important; } #news a { color: #666; border: none; display: block; padding-bottom: 3px; padding-top: 3px; font-size:85%; z-index: 100; display: block; text-decoration: none; }/* background: transparent url(/shadozoom/images/bg/pointer.gif) 0 8px no-repeat; */ #news a:hover { /* background: transparent url(/shadozoom/images/bg/pointer-blue.gif) 0 8px no-repeat; */ color: #00ADEF; } #news span { font-weight: bold; } #tertiaryNav { width: 125px; padding: 10px; float: right; background: #fff; margin-left: 20px; font-size:11px; } #tertiaryNav li { list-style: none; } #tertiaryNav h3 { color: #333; } #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; font-size:11px; } #tertiaryNav a:hover { background: transparent url(/shadozoom/images/bg/pointer-blue.gif) 0 8px no-repeat; color: #00ADEF; font-size:11px; } /* ========================================================================== 8 - #sidebar ========================================================================== */ ul#subNav { margin: 4em 0 0 0; } #subNav li, .subNav li { list-style: none; padding:2px 15px;} #subNav a { border: none; display: block; padding: 0; color: #666; font-family: "Arabic Transparent","Simplified Arabic",arial,verdana,sans-serif; font-size: 13px; text-decoration: none; } #subNav a:hover, .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; } #subNav ul li a { color: #333; display: block; background: transparent url(/shadozoom/images/bg/pointer.gif) 0px 10px no-repeat; padding: 2px 10px 2px 12px; margin-top:0; vertical-align: top; } #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; } #subNav li, .subNav li { padding-left: 25px; margin-left: -15px; } #subNav li a { color: #333; display: block; background: transparent url(/shadozoom/images/bg/pointer.gif) 0px 10px no-repeat; padding: 2px 10px 2px 12px; margin-top:0; vertical-align: top;} #subNav li.folder a { background-image: url(/shadozoom/images/bg/arrow_right.gif) ;} #subNav li.current a { background-image: url(/shadozoom/images/bg/pointer-blue.gif); } #subNav li.current { background: #FFF;} #subNav li.current a { color: #00ADEF;} #sidebar .header h2, #sidebar .header h3 { font-weight: normal; margin: 0; padding-left: 15px; color: #333; font-family: "Arabic Transparent","Simplified Arabic",arial,verdana,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; } #ft { border-top: 1px solid #CCC; padding-top: 10px; margin-top: 30px; background-color: #F3F3F3; margin-left: -10px; margin-right: -10px; margin-bottom: -10px; overflow: hidden; *zoom: 1; } /* ========================================================================== 10 - Forms ========================================================================== */ input { font-size: 0.9em; padding: 2px; font-family: "Arabic Transparent","Simplified Arabic",arial,verdana,sans-serif; color: #666; } form { padding-bottom: 12px; } form fieldset { position: relative; display: block; border: none; padding: 10px 20px; background: #EAEAEA; border: 1px solid #CCC; } 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; margin: 0 10px 0 0; color: #666; } label.required { color: #00AFED; } form fieldset div { vertical-align: middle; padding: 8px 0; clear: both;} input.button { margin-top: 0px; } .button { margin-top: 10px !important; } form p { margin-left: 210px;} form p input{ margin-left: 10px; } /*form table { width: 100%; background: #FFF; }*/ form td, form th { padding: 2px;/* 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: 6px; top: 6px; } form#search fieldset, form#search input, form#search label, form#search label { margin:0; padding: 0;} form#search .field { width: 100px; } #search {float:right;margin-top:-30px;margin-right:0;height:30px;} #search_ie {float:right;margin-right:0;height:30px;} .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; } .blockquote{ color: #666; border-left: 5px solid #035584; background-color: #e2f4f9; overflow: auto; padding: 5px; margin-bottom: 10px;font-size:110%; } /* roScripts Table Design by Mihalcea Romeo www.roscripts.com ----------------------------------------------- */ table { border-collapse:collapse; /*background:#E8F8FA url(/zoomflex/app_templates/images/teaser.gif) repeat-x;*/ border-left:1px solid #686868; border-right:1px solid #686868; font:100% 'Trebuchet MS',helvetica,arial,verdana; color: #333; font-family: "Arabic Transparent","Simplified Arabic",arial,verdana,sans-serif; } td, th { padding:5px; } caption { padding: 0 0 .5em 0; text-align: left; font-size: 1.4em; font-weight: bold; text-transform: uppercase; color: #333; background: transparent; } /* =links ----------------------------------------------- */ /* table a { color:#950000; text-decoration:none; } table a:link {} table a:visited { font-weight:normal; color:#00ADEF; } table a:hover { border-bottom: 1px dashed #bbb; } th, tfoot th, tfoot td { background:#333 url(/s/app_templates/coretemplates/images/bg/navbar.gif) repeat-x; color:#fff } tfoot td { text-align:right } */ /* =body ----------------------------------------------- */ /* tbody th { white-space: nowrap; } tbody th a { color:#333; } */ .odd {} .flvimg { border:0; text-decoration:none; } .flvlink { font-size:12px;border-bottom:0 !important; } .flvdescription{ } .monospace {font-family: Courier New,Courier,monospace;} /*.leadin {font-size: 14px; margin-bottom:20px;}*/ #ml_body {font-size:14px;} #ml_body ul {padding-left:0px;margin-left:0px} #ml_body li {padding-left:0px;margin-left:0px;font-size:13px; border-top: 1px solid #FFF; border-bottom: 1px solid #e2f4f9; display: block; padding-bottom: 3px; padding-top: 3px;color: #666;} #zoomflex_body {font-size:13px;} #zoomflex_body li {font-size:13px; border-top: 1px solid #FFF; border-bottom: 1px solid #e2f4f9; display: block; padding-bottom: 3px; padding-top: 3px;color: #666;padding-left:0px;margin-left:0px; } #zoomflex_body ul {padding-left:0px;margin-left:0px} .bqstart { float: left; font-size: 500%; color: #FF0000; } .bqend { float: right; font-size: 500%; color: #FF0000; } /* BASE FONTS */ h2.leadin {font-size: 100%; font-weight: normal !important;border-bottom:0; color: #434343; display: block; margin-bottom: 15px; line-height: 1.5em;background:#fff; } h2.leadin a:link, h2.leadin a:active, h2.leadin a:visited {font-size: 100%; font-weight: normal !important; color:#E2293B; line-height: 1.5em; text-decoration:none; } h2.leadin a:hover {font-size: 100%; font-weight: normal !important; color: #860000; line-height: 1.5em; text-decoration:none; } h2.leadin p {color: #434343;} h2.tagline { font-weight: normal; } h2.tagline a { font-weight: bold; font-style: Italic; border-bottom: 0; text-decoration: none; } h2.tagline a:hover { color: #00ADEF; } #header-wrapper { background: #990000 url(/shadozoom/app_templates/images/header-bg.png); } #header-wrapper, #sub-header-wrapper { width: 100%; background-color: #990000; } #header, #sub-header { position: relative; width: 73.076em; margin: auto; min-width: 750px; text-align: left; height: 70px; } #header { color: #FFF; } #header h1 { float: left; margin: 0; padding: 0; height: 100%; } #header ul { float: right; } #header ul, #header ul li { list-style-type: none; margin: 0; padding: 0; } #header ul li { float: left; margin-left: 6px; padding-top: 4px; } #header ul#tab-nav li { padding: 0; margin: 0; margin-left: 4px; background: #CCC url(/shadozoom/app_templates/images/top-nav-left-bg.png) left top no-repeat; } #header ul#top-nav li a { color: #FFF; text-decoration: none; border:0; padding-right:10px; } #header ul#tab-nav li a { display: block; color: #333; background: url(/shadozoom/app_templates/images/top-nav-right-bg.png) right top no-repeat; text-decoration: none; padding: 9px; /*-moz-border-radius-topleft: 4px;*/ /*-moz-border-radius-topright: 4px;*/ } #header ul#tab-nav li.selected { background: #EEE url(/shadozoom/app_templates/images/top-nav-left-bg-selected.png) left top no-repeat; } #header ul#tab-nav li.selected a { background: url(/shadozoom/app_templates/images/top-nav-right-bg-selected.png) right top no-repeat; } #header ul#tab-nav { position: absolute; bottom: 0; right: 0; } /*************************************** Sub Header ****************************************/ #sub-header-wrapper { background-color: #EEE; border-bottom: 2px solid #CCC; height:32px; } #sub-header { height: 32px; } #sub-header h2 { float: left; padding-top: 10px; font-size: 133.9%; font-weight: normal; } /*************************************** Tables ****************************************/ tr.table-header td { color: #FFF; } .table-header { background-color: #2086BB; } .table-odd-row { background-color: #FFF; } .table-even-row { background-color: #EBF6FF; } /*************************************** Frontpage ****************************************/ a.button { display: block; border-bottom: 0; margin-top: 3em; } a.button.first { float: left; margin-right: 9px; } blockquote { /*background: #f7f0ea url(/shadozoom/app_templates/images/quote.png) 4px 4px no-repeat; quotes: "\201C" "\201D"; margin: 3em 0; text-indent: 9px;*/ padding: 15px 9px 9px 15px; overflow: hidden; *zoom: 1; } blockquote p { font-family: "Arabic Transparent","Simplified Arabic",arial,verdana,sans-serif; font-size: 14px; color: #333; font-style:italic; } /*blockquote p:before { content: open-quote; font-size: 220%; font-weight: bold; color: #880000; float: left; } blockquote p:after { content: close-quote; font-size: 220%; font-weight: bold; color: #880000; }*/ blockquote cite { float: right; color: #A10000; font-size: 14px; margin-bottom:0px;} .section { margin-bottom: 3em; padding-right: 18px; background: url(../images/section-top.png) top right no-repeat; } .section .productLogo { margin-bottom: 9px; } .image-right { float: right; margin-left: 12px; margin-bottom: 9px; } .box-3col-header { padding-left: 30px; } .box-3col { width: 290px; background: url(/shadozoom/app_templates/images/home/box-3col.png) no-repeat; } .box-3col div { position: relative; left: 15px; width: 266px; } .box-3col h2 { background-color: transparent; color: #FFF; text-align: center; margin: 0; margin-bottom: 1em; padding: 0; padding-top: 4px; font-size: 14px; font-weight: normal; text-shadow: 1px 1px 1px #333; } .box-3col p { color: #333; }