/*------------------------------------------------------------ CSS by Rod Miles of Hybrid Forge www.HybridForge.com January 2009 CSS Sections Below: - Global Reset - HTML Items - Layout Items - Menus - Content Items - Left Panel - Forms - Base Classes - SuckerFish - Modal Box -------------------------------------------------------------*/ /*------------------------------------------------------------ Global Reset -------------------------------------------------------------*/ * { margin:0; padding:0; } h1,h2,h3,h4,h5,h6,blockquote,form,label,ol,dl,fieldset,address { margin:0.5em 0; } dd { margin-left:1em; } fieldset { padding:.5em; } img { border: none; } p { padding: 0; margin: 0.6em 0 0.8em 0; } /*------------------------------------------------------------ HTML Items -------------------------------------------------------------*/ body { margin: 0; padding: 0; font: 100.01%/120% arial,helvetica,geneva,verdana,sans-serif; color: #fff; text-align: center; background: #5c5c5c url('http://images.hybridforge.com/images/body-bg.gif') repeat-x 0 0; } h1,h2,h3 { font: normal bold 2.3em arial,helvetica,sans-serif; } h1 { margin: 0 0 0.5em 0; padding: 0 0 0.8em 0; background: url('http://images.hybridforge.com/images/h1-bg.gif') repeat-x 0 bottom; } h2 { font-size: 1.7em; margin: 0.8em 0 0.5em 0; padding-bottom: 0; border-bottom: 1px solid #ccc; } h2.med { width: 67%; } h2.short { width: 45%; } h3 { font-size: 1.4em; font-weight: bold; margin: 0.8em 0 0.5em 0; padding-bottom: 0; } a { color: #c8451d; } a:hover { color: #aaa; } a:active { color: #777; text-decoration: none; } /*------------------------------------------------------------ Layout Items -------------------------------------------------------------*/ #mainWrapper { position: relative; width: 100%; margin: 0 auto; padding: 0; text-align: center; font-size: 75%; } #header, #content, #footer { position: relative; width: 960px; height: auto; text-align: left; margin: 0 auto; padding: 0; } #header { position: relative; z-index: 100; } #topMenu { clear: right; float: right; margin-right: 10px; margin-top: -10px; padding: 50px 0 0 0; background: url('http://images.hybridforge.com/images/header-bg2.gif') no-repeat right 27px; min-width: 326px; } * html #topMenu { width: 326px; } #theLogo { position: relative; float: left; width: 412px; height: 102px; background: url('http://images.hybridforge.com/images/hybrid-forge-logo.gif') no-repeat 10px 0; } #mainMenu { position: relative; clear: both; z-index: 200; width: 100%; height: 69px; margin: 15px 0 0 0; padding: 0; text-align: left; } #content { clear: both; padding: 0 0 1px 0; z-index: 0; overflow: auto; background: #fff url('http://images.hybridforge.com/images/content-bg.gif') repeat-y 0 0; color: #333; } #content.wide { overflow: hidden; background: #fff url('http://images.hybridforge.com/images/content-bg-main.gif') repeat-y 0 0; } #contentTopper { border: 1px solid #333; border-width: 0 1px; background: url('http://images.hybridforge.com/images/contenttopper-bg.gif') repeat-x 0 0; height: 31px; } #breadcrumbs, #dateTime { text-transform: uppercase; font-size: 0.8em; } #breadcrumbs { float: left; color: #f96; min-width: 400px; } #dateTime { float: right; line-height: 29px; padding-right: 10px; color: #fff; } #contentBody { position: relative; padding: 1em 0 2em 0; line-height: 1.5em; float: right; right: 15px; width: 685px; } #contentBody.style01 { background: url('http://images.hybridforge.com/images/wheel-01.gif') no-repeat right 1em; } #contentBody.style02 { background: url('http://images.hybridforge.com/images/wheel-02.gif') no-repeat right 1em; } #contentBody.style03 { background: url('http://images.hybridforge.com/images/wheel-03.gif') no-repeat right 1em; } #contentBody.style04 { background: url('http://images.hybridforge.com/images/wheel-04.gif') no-repeat right 1em; } #contentBody p a, #contentBody ul a, .customerBox a, .msgBox a { text-decoration: none; border-bottom: 1px dotted #888; } #contentBody p a:hover, #contentBody ul a:hover, .customerBox a:hover, .msgBox a:hover { border-bottom: 1px solid #c8451d; } .wide #contentBody { float: none; width: 940px; right: 0; left: 10px; padding: 1em 0 0 0; } #leftPanel { position: relative; float: left; left: 1px; width: 238px; margin: 0; padding: 0.6em 0 1.5em 0; background: #f5f5f5 url('http://images.hybridforge.com/images/lm-bg.gif') repeat-x 0 0; min-height: 350px; } #footer { border-top: 1px solid #333; color: #fff; padding: 0; font-size: 1em; overflow-y: auto; overflow-x: hidden; } #footerInside { margin: 0 auto; padding: 0; } #footerMenu { position: relative; width: 100%; color: #fff; line-height: 1.4em; padding: 1em 0; background: url('http://images.hybridforge.com/images/footer-bg.gif') no-repeat 0 bottom; overflow-y: auto; overflow-x: hidden; } #footerInfo { clear: both; padding: 0.5em 15px 1em 0; color: #bbb; margin: 0; line-height: 1.5em; font-size: 0.9em; text-align: right; } /*------------------------------------------------------------ Menus (excluding mainmenu, see mainmenu.css) -------------------------------------------------------------*/ /*/// Extras Menu ///*/ #extraMenu { z-index: 100; position: relative; float: right; right:10px; text-align: center; font-size: 1em; background: url('http://www.hybridforge.com/images/extra-menu-bg.gif') repeat-x 0 0; } #extraMenu #em1 { background: url('http://www.hybridforge.com/images/extra-menu-bg-r.gif') no-repeat right 0; } #extraMenu ul { height: 21px; margin: 0; padding: 0 15px 0 10px; list-style: none; background: url('http://www.hybridforge.com/images/extra-menu-bg-l.gif') no-repeat left 0; } #extraMenu ul li { margin: 0; padding: 0 3px 0 5px; display: inline; line-height: 16px; } #extraMenu ul li a { color: #fff; font-weight: bold; text-decoration: none; font-size: 0.9em; padding-left: 11px; background: url('http://www.hybridforge.com/images/arrow-01.gif') no-repeat 0 center; } #extraMenu ul li a:hover { color: #ccc; } #extraMenu ul li a:active { color: #333; } /*/// Topmenu Items ///*/ #topMenu ul { margin: 1px 0 0 0; padding: 0; list-style: none; } #topMenu ul li { margin: 0; padding: 0 0 0 1em; display: inline; } #topMenu ul li.first { padding: 0; } #topMenu ul li a { text-decoration: none; color: #333; padding: 2px 3px; } #topMenu ul li a:hover { background: url('http://www.hybridforge.com/images/extra-menu-bg.gif') repeat-x 0 top; color: #fff; } #topMenu ul li a:active { text-decoration: none; color: #555; } /*/// Breadcrumbs ///*/ #breadcrumbs ul { margin: 0 0 0 5px; padding: 7px 0 0 0; list-style: none; } #breadcrumbs ul li { margin: 0; padding: 0 0 0 0.5em; display: inline; } #breadcrumbs ul li a { padding-right: 1em; text-decoration: none; color: #fff; background: url('http://www.hybridforge.com/images/bc-separator.gif') no-repeat right center; } #breadcrumbs ul li a:hover { color: #ccc; } #breadcrumbs ul li a:active { color: #aaa; } /*/// Left Menu Items ///*/ .leftMenu { width: 228px; margin: 0 auto 0.5em auto; padding: 0; font-size: 1em; } .leftMenu ul { padding: 0; margin: 0; list-style: none; } .leftMenu ul li { padding: 0; list-style: none; } .leftMenu ul li.first { } .leftMenu .topLevel { color: #fff; background: url('http://www.hybridforge.com/images/lm-bot.gif') no-repeat 0 bottom; padding-bottom: 5px; margin-bottom: 0.5em; } .leftMenu .topLevel li { font-weight: bold; line-height: 22px; font-size: 1.1em; background: url('http://www.hybridforge.com/images/lm-heading-bg.gif') no-repeat 0 0; } .leftMenu .mainLevel { padding: 0.5em 0; background-color: #f4f4f4; border: 1px solid #b1b1b1; border-width: 0 1px; font-weight: bold; } .leftMenu .mainLevel li { background: transparent; font-size: 0.9em; margin-bottom: 0; line-height: 1.5em; } .leftMenu .subLevel, .leftMenu .subLevel .innerLevel { font-weight: normal; padding: 0 0 0.3em 15px; font-size: 1.1em; } .leftMenu .innerLevel li { border-left: 1px solid #c8451d; } .leftMenu .subLevel .innerLevel li a { background: none; } .leftMenu ul li a { background-color: transparent; padding-left: 10px; text-decoration: none; } .leftMenu .topLevel a { color: #fff; } .leftMenu .mainLevel a { color: #333; } .leftMenu .subLevel a { font-weight: normal; } #leftPanel .leftMenu ul li a.selected { color: #c8451d; } .leftMenu .subLevel li a.selected { background: url('http://www.hybridforge.com/images/lm-dots.gif') no-repeat 0 5px; } .leftMenu .subLevel li a:hover { background: url('http://www.hybridforge.com/images/lm-dots.gif') no-repeat 0 -75px; } .leftMenu .subLevel li a:active { background: url('http://www.hybridforge.com/images/lm-dots.gif') no-repeat 0 5px; } #leftPanel .leftMenu ul li a:hover { color: #aaa; } .leftMenu ul li a:active { color: #c8451d; } /*/// Footer Menu/Info Items ///*/ .footerMenu { float: left; width: 240px; color: #000; } .footerMenu ul { margin: 0 0 0 15px; } .footerMenu#fm01, .footerMenu#fm02, .footerMenu#fm03 { } .footerMenu#fm04 { background: url('http://www.hybridforge.com/images/footer-logo.png') no-repeat right 0; width: 220px; margin-right: 15px; margin-top: -2px; text-align: right; padding: 25px 0 0 0; line-height: 1.4em; } #footerInfo a { color: #aaa; } #footerInfo a:hover { text-decoration: none; } #footerMenu a { color: #000; text-decoration: none; } #footerMenu a:hover { color: #777; background-color: transparent; } #footerMenu a:active { color: #aaa; } #footerMenu .mainLevel a { font-weight: bold; } #footerMenu .subLevel { margin-left: 5px; } #footerMenu .subLevel a { font-weight: normal; } .footerMenu ul { list-style: none; } .footerMenu ul li { margin: 0; padding: 0; } /*------------------------------------------------------------ Content Body -------------------------------------------------------------*/ .padLeft { padding-left: 40px; } #contentBody ul { padding: 0; margin: 0 0 0 4em; } #contentBody ul li { padding-bottom: 5px; } #contentBody ul.imageList { text-align:center; margin: .8em 0; padding: 0; list-style: none; } #contentBody ul.imageList li { display: inline; margin: 0; padding: 0 .7em; } /*/// Twitter Widget ///*/ #twtr-widget-1 { margin: 0 auto; width: 225px; } /*///Google Map (contact.php)///*/ #mapOuter { width: 660px; padding: 58px 0 0 0; margin: 0 auto; background: url('http://images.hybridforge.com/images/map-header.gif') no-repeat 0 0; overflow: hidden; } #map { width: 658px; height: 300px; margin: 0; background-color: transparent; border: 1px solid #999; border-width: 0 1px 3px 1px; } #mapFrame { overflow: hidden; } /*///Cart logos///*/ ul#cartLogos { margin: 0; padding: 0; list-style: none; } ul#cartLogos li { margin: 0; padding: 0 15px 0 0; float: left; } #contentBody ul#cartLogos a { display: block; width: 150px; height: 80px; border: none; } ul#cartLogos a span { display: none; } ul#cartLogos a#adnsfLogo { width: 170px; background: url('http://images.hybridforge.com/images/logo-adnsf-sm.gif') no-repeat 0 center; } ul#cartLogos a#magentoLogo { background: url('http://images.hybridforge.com/images/logo-magento-sm.gif') no-repeat 0 center; } ul#cartLogos a#storefrontLogo { background: url('http://images.hybridforge.com/images/logo-storefront-sm.gif') no-repeat 0 center; } ul#cartLogos a#customLogo { background: url('http://images.hybridforge.com/images/logo-custom-sm.gif') no-repeat 50% center; } /*///Mid page boxes///*/ .midBox { background: url('http://images.hybridforge.com/images/midbox-bg.gif') no-repeat 0 0; padding: 10px 0 0 20px; min-height: 180px; } .midBox span { font-weight: bold; } .midBox ul { margin-top: 0.8em; font-weight: bold; } #contentBody .hfMenu ul { list-style: none; margin-left: 20px; padding-left: 0; } .midBox ul ul { margin-top: 1em; margin-left: 55px; padding-left: 0; } .midBox ul ul li { background: url('http://images.hybridforge.com/images/midbox-link-bg.gif') no-repeat 0 5px; padding-left: 12px; } #contentBody .hfMenu ul ul { margin-top: 0.3em; margin-left: 25px; padding-left: 0; } /*///Notebox///*/ .noteBox { clear: both; background: #8e8e8e url('http://images.hybridforge.com/images/notebox-bg.gif') repeat-x 0 0; border: 1px solid #575757; min-height: 180px; margin-top: 1.5em; padding: 20px 0; line-height: 1.3em; font-size: 0.9em; border-radius: 1em; -moz-border-radius: 1em; } .noteBox .noteBody { color: #fff; background-color: #939393; border: 1px solid #c5c5c5; width: 430px; padding: 1em; margin-left: 20px; border-radius: 0.6em; -moz-border-radius: 0.6em; } .noteBody h2 { font-size: 1.3em; margin: 0; padding: 0; border: none; } #contentBody .noteBox a { color: #f3f3f3; border-bottom: 1px solid #c8451d; } #contentBody .noteBox a:hover { color: #ccc; } .noteBox a.noteBoxContactLink span { display: none; } #contentBody .noteBox a.noteBoxContactLink { position: relative; background: url('http://images.hybridforge.com/images/notebox-logo.gif') no-repeat 0 0; float: right; display: block; width: 137px; height: 179px; right: 40px; border: none; text-decoration: none; } /*///Msgbox///*/ .msgBox { clear: both; border:1px solid #c30; padding:0.8em; margin:1.5em 0 1em 0; background-color:#f7f7f7; } .msgBox h3 { margin-top: 0; padding-top: 0; } /*///Gallery Images///*/ #contentBody .gallery { text-align: center; width: 93%; } #contentBody .gallery a { text-decoration: none; border: none !important; } /*///Twitter Link///*/ a#twitterLink { line-height: 25px; border-width: 0px !important; display: block; width: 150px; height: 25px; background: url('http://images.hybridforge.com/images/twitter-icon-sm.png') no-repeat 0 center; padding-left: 30px; } /*///Profile Page///*/ .profileHeading { border-bottom: 1px solid #999; height: 26px; width: 100%; margin-top: 1.8em; } .profileHeading span { display:none; } .profileHeading#profGeoff { background: url('http://images.hybridforge.com/images/profile-geoff-kliza.gif') no-repeat 0 0; } .profileHeading#profChad { background: url('http://images.hybridforge.com/images/profile-chad-smith.gif') no-repeat 0 0; } .profileHeading#profRod { background: url('http://images.hybridforge.com/images/profile-rod-miles.gif') no-repeat 0 0; } .profileHeading#profScott { background: url('http://images.hybridforge.com/images/profile-scott-hryniuk.gif') no-repeat 0 0; } .profileTitle { font-size: 0.9em; font-weight: bold; color: #777; } .profileTitle + p { margin-top: 0; padding-top: 0.2em; } .profileLinks { width: 214px; background: url('http://images.hybridforge.com/images/profile-link-bg.gif') no-repeat 0 bottom; float: right; margin: 0 0 1em 1em; min-height: 50px; } #contentBody .profileLinks ul { list-style: none; margin: 0.3em 1em; padding: 0; } .profileLinks ul li { line-height: 1.6em; } #contentBody .profileLinks ul li a { color: #0783B6; border-width: 0; } #contentBody .profileLinks ul li a:hover { color: #aaa; } #contentBody .profileLinks ul li a:active { color: #777; } .profileLinks ul li a.twitter { background: url('http://images.hybridforge.com/images/twitter-icon-mini.gif') no-repeat 0 center; padding-left: 18px; } .profileLinks ul li a.linkedIn { background: url('http://images.hybridforge.com/images/linkedin-icon-mini.gif') no-repeat 0 center; padding-left: 18px; } /*///Client Image Mockups///*/ #contentBody ul.imgList { margin: 0; padding: 0; list-style: none; } #contentBody ul.imgList li { margin: 0 0 1.5em 0; padding: 0 1em 0 0; float: left; text-align: center; } /*///Customers///*/ .customerBox { clear: both; overflow: auto; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #ccc; } .customerBox .imgR { text-align:center; margin-right: 5px; } .customerBox .cbTitle { font-size: 1.3em; font-weight: bold; } .customerBox .cbWeb { font-size: 0.9em; color: #999; border: none; } /*------------------------------------------------------------ Left Panel -------------------------------------------------------------*/ .lmBtn { margin: 2em auto; display: block; width: 227px; } .lmBtn b { display: none; } #lmBtn01 { height: 51px; background: url('http://images.hybridforge.com/images/lm-btn-contact.gif') no-repeat 0 0; } #lmBtn02 { height: 131px; background: url('http://images.hybridforge.com/images/lm-btn-getting-started.gif') no-repeat 0 0; } #TwitterWidget { margin: 0 0 0 10px; } ul.miniRss { list-style: none; margin: 0; padding: 0; } ul.miniRss li { margin: 0 0 0.5em 0; } #hfSearch { margin-bottom: 10px; } #hfSearch #hfsearch { width: 180px; padding: 3px 2px; margin-right: 4px; float: left; } #hfSearch #hfsearchbtn { float: left; margin-top: 1px; width: 27px; height: 23px; border: none; background: url('http://images.hybridforge.com/images/btn-search.gif') no-repeat 0 0; cursor: pointer; } #hfSearch #hfsearchbtn span { display: none; } /*------------------------------------------------------------ Forms -------------------------------------------------------------*/ /*///General///*/ #fname { display: none; } .forms { font-size: 1em; /*background: url('http://images.hybridforge.com/images/form-bg.png') repeat-y 0 0;*/ overflow: visible; } .forms input, .forms textarea, .forms select { font-size: 1.1em; padding: 2px; } .forms textarea { font-size: 1.3em; } .formHeader { /*height: 70px;*/ } .formFooter { /*background: url('http://images.hybridforge.com/images/form-bot.png') no-repeat 0 bottom; height: 15px;*/ } /*///Specific Forms///*/ #contactForm { font-size: 75%; } #contactFormHeader { /* background: url('http://images.hybridforge.com/images/form-top-contact.png') no-repeat 0 0; */} #contactFormTable { width: 95%; margin: 0 auto; } #contactFormTable td { padding-bottom: 0; } #loginForm { width: 300px; background-color: #eee; border: 1px solid #ccc; margin: 0 auto; padding: 0 1em 1em 1em; } #MB_content #loginForm { font-size: 75%; background-color: #fff; } /*///Form Items///*/ .formLabel { padding-right: 5px; } .formSpacer { padding: 2px 0; height: 5px; } .formHeading { font-size: 1.1em; border-bottom: 1px dotted #ccc; font-weight: bold; padding-top: 0.5em; } .required { color: #c03; font-weight: bold; } .submit { padding-top: 10px; text-align: right; } .submit input { margin-right: 10px; font-size: 1.1em; } .submit #submitButton { font-weight: bold; } .formField { /*background: #fff url('http://images.hybridforge.com/images/form-field-bg.gif') repeat-y 0 0;*/ border: 1px solid #999; } .formThanksMsg { font-size: 0.9em; } /*------------------------------------------------------------ Base Classes -------------------------------------------------------------*/ /*///Misc.///*/ .adobe { background: url('http://www.hybridforge.com/images/adobe.gif') no-repeat 1px 0; padding-left: 20px; } .zip { background: url('http://www.hybridforge.com/images/zip-icon.png') no-repeat 0 0; padding-left: 20px; } .clear { clear: both; } .pipe { padding: 0 0.5em; color: #aaa; } .required { color: #F11B25; font-weight: bold; } .noShow, #theLogo b { display: none; } .orange { color: #c8451d; } .blue { color: #09c; } .yellow { color: #c90; } .green { color: #090; } #contentBody a.noBorder { border-width: 0 !important;} /*///Text Alts///*/ .tBold { font-weight: bold; } .tItalic { font-style: italic; } .tSmall { font-size: 0.8em; } .tLarge, .tBig { font-size: 1.2em; } .tExLarge { font-size: 1.5em; } .tCenter { text-align: center; } .tUnder { text-decoration: underline; } .tStrike { text-decoration: line-through; } .tNormal { font-weight: normal; font-style: normal; } /*///Images///*/ .imgR { float: right; margin: 0.8em 0 1em 1em; } .imgL { float: left; margin: 0.8em 1em 1em 0; } /*///Borders///*/ .horizBorder { border-top: 1px solid #ccc; height: 1px; } .horizDouble { border-top: 3px double #ccc; height: 3px; } /*------------------------------------------------------------- SuckerFish Drop-Down Menu -------------------------------------------------------------*/ /*/// General Menu Styles ///*/ #mainMenuItems, #mainMenuItems ul { float: left; width: 960px; list-style: none; line-height: 1; font-weight: bold; padding: 0; margin: 0; } /*/// General styles ///*/ #mainMenuItems a { display: block; width: 240px; color: #fff; text-decoration: none; line-height: 22px; } * html #mainMenuItems a { min-height: 1%; } /*/// Flyout Parent ///*/ #mainMenuItems a.daddy { } #mainMenuItems a.daddy:hover { } /* Mainlevel Styles -------------------------------------------------------------*/ /*/// Mainlevel
  • Styles ///*/ #mainMenuItems li { float: left; padding: 0; width: 240px; } #mainMenuItems li#mm01 { height: 69px; background:url('http://images.hybridforge.com/images/mm-01.gif') no-repeat 0 0; } #mainMenuItems li#mm02 { height: 69px; background:url('http://images.hybridforge.com/images/mm-02.gif') no-repeat 0 0; } #mainMenuItems li#mm03 { height: 69px; background:url('http://images.hybridforge.com/images/mm-03.gif') no-repeat 0 0; } #mainMenuItems li#mm04 { height: 69px; background:url('http://images.hybridforge.com/images/mm-04.gif') no-repeat 0 0; } #mainMenuItems li#mm01 a span, #mainMenuItems li#mm02 a span, #mainMenuItems li#mm03 a span, #mainMenuItems li#mm04 a span { display: none; } #mainMenu #mainMenuItems li:hover, #mainMenu #mainMenuItems li.sfhover { background-position: 0 -80px; } #mainMenuItems a.mainlevel { height: 69px; } /* Sublevel Styles -------------------------------------------------------------*/ /*/// Sublevel