/************************************************************* Crucial Paradigm CSS Stylesheet Copyright © 2008, All Rights Reserved By pure8 Creative Media //////// *************************************************************/ @import url(icons.css); /************************************************************* Page Style //////// *************************************************************/ * { margin: 0; padding: 0; } html, body { height: 100%; } body { background: url("images/BG.gif") repeat-x #590608; font-family: "Arial", Helvetica; font-size: 0.7em; text-align: left; } img { vertical-align: middle; } a img { border: none; } .floatRight { float: right !important; } /********************************* Text *********************************/ a, p { text-decoration: none; } p { padding-bottom: 15px; line-height: 1.5em; } h2, h4 { padding: 0 30px; font-weight: normal; } h2 { font-weight: bold; padding-bottom: 20px; font-size: 2em; } h3 { font-size: 1.3em; text-transform: uppercase; } h4 { font-size: 1.2em; line-height: 1.5em; } h2 strong, h3 strong, h4 strong { color: #D4300C; } span.date { color: #898989; font-size: 0.8em; } span.highlight { color: #D4300C; font-weight: bold; } span.title { font-weight: bold; padding: 0; display: block; clear: both; } a { color: #ED1C24; margin: 0; border: none; cursor: pointer; outline: none; } /********************************* Forms *********************************/ ul { list-style-type: none; margin: 0; } /************************************************************* Content //////// *************************************************************/ /********************************* 00. Global *********************************/ #wrapper { position: relative; width: 960px; min-height: 100%; margin: 0 auto -380px auto; padding: 0 20px; background: url("images/gfxHeaderBase.gif") no-repeat #FFFFFF; } /********************************* 01. Header Content *********************************/ #headerWrapper { float: left; width: 960px; height: 400px; display: inline; } #headerWrapper h1 { float: left; width: 395px; height: 115px; margin-top: 40px; background: url("images/gfxCrucialParadigm.gif") no-repeat; display: inline; } #headerWrapper h1 span { display: none; } #locationSelector { float: right; width: 110px; height: 60px; text-align: right; } /********************************* Main Navigation *********************************/ #mainNavigation { float: left; width: 960px; height: 35px; background: url("images/gfxMainNavigation.gif") 0 -35px no-repeat; } #mainNavigation li { float: left; position: relative; z-index: 100; } #mainNavigation li a { height: 35px; display: block; } #mainNavigation li a:hover { background-image: url("images/gfxMainNavigation.gif"); background-repeat: no-repeat; } #mainNavigation li a span { display: none; } li.home a { width: 143px; } li.company a { width: 166px; background-position: -143px 0; } li.services a { width: 159px; background-position: -309px 0; } li.support a { width: 160px; background-position: -468px 0; } li.contact a { width: 161px; background-position: -628px 0; } li.partners a { width: 171px; background-position: -789px 0; } /********************************* DropDown Menu *********************************/ li>ul { left: auto; top: auto; } #mainNavigation li ul { position: absolute; left: 0; top: 30px; width: 220px; padding-top: 20px; line-height: 0; background: url("images/gfxDropDownMenuBG.png") no-repeat; display: none; z-index: 100; } #mainNavigation li ul.narrow { position: absolute; left: 0; top: 30px; width: 160px; padding-top: 20px; line-height: 0; background: url("images/gfxDropDownMenuBG.png") no-repeat; display: none; z-index: 100; } #mainNavigation li:hover ul, #mainNavigation li.over ul { display: block; } #mainNavigation li ul li { width: 180px; height: 22px; padding: 0 10px; display: block; background: url("images/gfxDropDownMenu.png") repeat-y; } #mainNavigation li ul li a { float: left; width: 155px; height: 28px; padding: 4px 0 0 20px; color: #000000; line-height: 1em; background: url("images/gfxDropDownMenuArrow01.gif") no-repeat; } #mainNavigation li ul.narrow li { width: 140px; height: 22px; padding: 0 10px; display: block; background: url("images/gfxDropDownMenu.png") repeat-y; } #mainNavigation li ul.narrow li a { float: left; width: 115px; height: 28px; padding: 4px 0 0 20px; color: #000000; line-height: 1em; background: url("images/gfxDropDownMenuArrow01.gif") no-repeat; } #mainNavigation li ul li a.category { font-weight: bold; background: url("images/gfxDropDownMenuArrow02.gif") no-repeat; } #mainNavigation li ul li a.indented { padding-left: 30px; } #mainNavigation li ul li a:hover, #mainNavigation li ul li a.category:hover, #mainNavigation li ul li a.selected { color: #FFFFFF; background: url("images/gfxDropDownMenuHover.gif") no-repeat; } #mainNavigation li ul.narrow li a:hover, #mainNavigation li ul.narrow li a.category:hover, #mainNavigation li ul.narrow li a.selected { color: #FFFFFF; background: url("images/gfxDropDownMenuHoverNarrow.gif") no-repeat; } #mainNavigation li ul li.footer { width: 200px; height: 25px; background: url("images/gfxDropDownMenuFooter.png") no-repeat; } #mainNavigation li ul.narrow li.footer { width: 200px; height: 25px; background: url("images/gfxDropDownMenuFooterNarrow.png") no-repeat; } #mainNavigation li ul li .category { margin-left: 5px; font-weight: bold; } /********************************* Contact Wrapper *********************************/ #contactWrapper { float: right; width: 490px; height: 55px; margin-top: 35px; display: inline; } #contactWrapper ul { padding-top: 12px; } #contactWrapper h3{ float: right; width: 210px; padding-top: 2px; text-align: right; } /********************************* Featured Content *********************************/ #featureWrapper { float: left; position: relative; width: 960px; height: 210px; background: url("images/gfxFeatureBG.gif") no-repeat; overflow: hidden } #featureSlider { position: absolute; width: 960px; height: 200px; left: 0; top: 0; } #featureNavigation { position: absolute; width: 140px; height: 30px; left: 800px; top: 150px; z-index: 90; } #featureNavigation a { float: left; width: 30px; height: 25px; margin-left: 5px; padding-top: 5px; color: #FFFFFF; font-size: 1.4em; font-weight: bold; text-align: center; background: url("images/btnFeature.png") no-repeat; display: inline; } #featureNavigation a.activeSlide, #featureNavigation a:hover { background-position: 0 -30px; } /********************************* 02. Main Content *********************************/ #mainWrapper { float: left; width: 630px; display: inline; } .subImage { float: left; margin: 0 30px; display: inline; } /********************************* Main Content Box *********************************/ .mainContentBox { float: left; width: 630px; background: url("images/gfxMainBoxBG.gif") no-repeat; display: inline; } .mainContentBox .hr { float: left; width: 630px; height: 60px; background: url("images/gfxDivider_Horizontal.gif") no-repeat; } .mainContentBox .footer { float: left; width: 630px; height: 50px; line-height: 0; background: url("images/gfxMainBoxFooter.gif") no-repeat; } .mainContentBox h3 { padding: 0 30px 10px; } .mainContentBox .oneColumn { float: left; padding: 0 30px; font-size: 1em; } .mainContentBox .oneColumn strong { color: #D4300C; } .bodyContent { float: left; padding: 0 30px; } .visa { width: 239px; margin: 0 155px 0; } .visa img { margin: 10px 5px; } .changingContent { width: 570px; } /********************************* Main Content Box (Two Column) *********************************/ .mainContentBox2C { float: left; width: 310px; padding-top: 10px; background: url("images/gfxMainBoxTwoColumnBG.gif") no-repeat; display: inline; } .mainContentBox2C.two { margin-left: 10px; } .mainContentBox2C .footer { float: left; width: 310px; height: 20px; line-height: 0; background: url("images/gfxMainBoxTwoColumnFooter.gif") no-repeat; } .mainContentBox2C h3 { padding: 0 0 10px 15px; } .mainContentBox2C p { padding: 0 15px 15px; } /********************************* Category Navigation *********************************/ .mainContentBox ul.categoryNavigation { float: left; width: 609px; height: 70px; padding-left: 21px; background: url("images/gfxCategoryNavigation.gif") no-repeat; } .categoryNavigation li { float: left; padding-right: 21px; } .categoryNavigation li a { height: 50px; display: block; } .categoryNavigation li a:hover, .categoryNavigation li.selected a { background-position: 0 -50px; } .categoryNavigation li a span { display: none; } /********************************* Category Navigation Icons *********************************/ .categoryNavigation li.home a { width: 35px; background-image: url("./images/sub-navigation/btnHome.gif"); } .categoryNavigation li.mydetails a { width: 63px; background-image: url("./images/sub-navigation/btnDetails.gif"); } .categoryNavigation li.myservices a { width: 70px; background-image: url("./images/sub-navigation/btnServices.gif"); } .categoryNavigation li.domains a { width: 54px; background-image: url("./images/sub-navigation/btnDomains.gif"); } .categoryNavigation li.invoices a { width: 51px; background-image: url("./images/sub-navigation/btnInvoices.gif"); } .categoryNavigation li.getsupport a { width: 50px; background-image: url("./images/sub-navigation/btnSupport.gif"); } .categoryNavigation li.myemails a { width: 62px; background-image: url("./images/sub-navigation/btnEmails.gif"); } .categoryNavigation li.affiliate a { width: 55px; background-image: url("./images/sub-navigation/btnAffiliate.gif"); } .categoryNavigation li.logout a { width: 48px; background-image: url("./images/sub-navigation/btnLogout.gif"); } /********************************* Blog Posts *********************************/ .post_title { float: left; margin-left: -30px; width: 500px; } .post_date { width: 30px; } .post_body { float: left; width: 100%; } .post_tags { float: left; width: 100%; } .post_comments { float: left; width: 49%; } .post_category { width: 50%; } .oneColumn ul { margin-top: -5px; padding-bottom: 15px; } .oneColumn ul li { padding-left: 20px; background: url("images/gfxFaqArrow.gif") no-repeat; } .oneColumn ol { margin-top: -5px; padding-bottom: 15px; } .oneColumn ol li { margin-left: 15px; padding-left: 10px; } .commentlist { margin-top: 5px; } .commentlist li { margin-left: 50px; padding-left: 10px; } .comments { float: left; margin-top: 30px; } .right_aligned { float: right; text-align: right; margin-right: 5px; } /********************************* Sub Navigation *********************************/ .mainContentBox ul.subNavigation { padding: 20px 15px 35px; } ul.subNavigation { line-height: 0; } .subNavigation li { padding-right: 20px; display: inline; } .subNavigation li a { padding-left: 10px; color: #898989; background: url("images/gfxContentLinksArrow01.gif") no-repeat; } .subNavigation li a:hover, .subNavigation li.selected a { color: #000000; background: url("images/gfxContentLinksArrow02.gif") no-repeat; } .subNavigation li.selected a { font-weight: bold; } /********************************* 03. Side Content *********************************/ #sideWrapper { float: left; width: 320px; padding-left: 10px; display: inline; } #sideWrapper h3 { padding-left: 15px; } .sideContentBox { float: left; width: 320px; padding-top: 10px; background: url("images/gfxSideBoxBG.gif") no-repeat; display: inline; } .sideContentBox .hr { float: left; width: 320px; height: 30px; clear: both; background: url("images/gfxDivider_Horizontal2.gif") no-repeat; } .sideContentBox .footer { float: left; width: 320px; height: 15px; line-height: 0; background: url("images/gfxSideBoxFooter.gif") no-repeat; } .sideContentBox h3 { padding-bottom: 20px; } .sideContentBox p { padding: 0 15px 15px; } .sideContentBox img { float: left; padding: 0 15px 15px; } .sideContentBox.icon p, .sideContentBox.icon ul { padding: 0 15px 0 0; } .sideContentBox.icon ul { padding: 0 15px 15px 0; } .sideContentBox.icon img { float: left; padding: 0; } .sideContentBox ul { margin-bottom: 10px; } .sideContentBox ul li { line-height: 1.5em; margin-left: 15px; } /********************************* 04. Footer Content *********************************/ .footerClear { height: 475px; clear: both; } #footerWrapper { position: relative; width: 100%; height: 475px; background: url("images/gfxFooterBG.gif") repeat-x #9D0B0F; } #footerContent { position: relative; width: 1000px; height: 475px; margin: auto; background: url("images/gfxFooterBase.gif") no-repeat; } #footerContent p { height: 43px; padding-top: 12px; color: #818181; text-align: center; } #footerContent .vendorLinks { float: left; width: 1000px; height: 100px; } #footerContent .vendorLinks ul { line-height: 0; } #footerContent .navigation ul { float: left; width: 240px; } #footerContent .navigation li { margin-left: 40px; line-height: 1.5em; } #footerContent .navigation li ul li { margin-left: 10px; } #footerContent .navigation li a { padding-left: 10px; color: #FFFFFF; background: url("images/gfxFooterLinksArrow02.gif") no-repeat; } #footerContent .navigation a.category { font-size: 1em; font-weight: bold; background: url("images/gfxFooterLinksArrow01.gif") no-repeat; } /********************************* Button Rollovers *********************************/ a.button { float: left; background-repeat: no-repeat; display: inline; } a.button span { display: none; } /********************************* Small Buttons *********************************/ a.mainHelpNow { background-image: url("images/btnHelpNow.gif"); } a.mainVisitNow { background-image: url("images/btnVisitNow.gif"); } /********************************* Small Buttons *********************************/ a.small { width: 120px; height: 25px; } a.small:hover { background-position: 0 -25px; } a.backToTop { float: right !important; margin: 35px 32px 0 0; background-image: url("images/btnBackToTop.gif"); } a.helpNow2 { margin: 0 0 15px 15px; background-image: url("images/btnHelpNow2.gif"); } a.memberLogin { float: right !important; background-image: url("images/btnMemberLogin.gif"); } a.moreNews { margin-left: 15px; background-image: url("images/btnMoreNews.gif"); } a.viewBlog { margin: 0 0 15px 15px; background-image: url("images/btnViewBlog.gif"); } /********************************* Long Buttons *********************************/ a.long { width: 255px; height: 40px; } a.long:hover { background-position: 0 -40px; } a.overviewRecommended { background-image: url("images/btnOverviewRecommended.gif"); } a.overviewAdvanced { background-image: url("images/btnOverviewAdvanced.gif"); } /********************************* Vendor Buttons *********************************/ a.vendors { width: 100px; height: 65px; background-image: url("images/gfxVendors.gif"); } a.cisco { width: 110px; } a.cisco:hover { background-position: 0 -65px; } a.intel { width: 80px; background-position: -110px 0; } a.intel:hover { background-position: -110px -65px; } a.amd { background-position: -190px 0; } a.amd:hover { background-position: -190px -65px; } a.supermicro { background-position: -290px 0; } a.supermicro:hover { background-position: -290px -65px; } a.microsoft { background-position: -390px 0; } a.microsoft:hover { background-position: -390px -65px; } a.xen { background-position: -490px 0; } a.xen:hover { background-position: -490px -65px; } a.citrix { background-position: -590px 0; } a.citrix:hover { background-position: -590px -65px; } a.plesk { background-position: -690px 0; } a.plesk:hover { background-position: -690px -65px; } a.cpanel { background-position: -790px 0; } a.cpanel:hover { background-position: -790px -65px; } a.equinix { background-position: -890px 0; } a.equinix:hover { background-position: -890px -65px; } /********************************* Misc. Buttons *********************************/ a.info { width: 25px; height: 16px; background-image: url("images/btnInfo.gif"); } a.moreInfo { float: right !important; width: 105px; height: 40px; margin: 5px 15px 0 0; background-image: url("images/btnMoreInfo.gif"); } a.moreInfo:hover { background-position: 0 -40px; } a.signup { width: 70px; height: 40px; background-image: url("images/btnSignup.gif"); } a.signup:hover { background-position: 0 -40px; } /********************************* Flags *********************************/ a.flags { float: right !important; width: 40px; height: 40px; } a.flags:hover, a.flags.selected { background-position: 0 -40px; } a.Australia { background-image: url("images/gfxFlagsAustralia.gif"); } a.USA { background-image: url("images/gfxFlagsUSA.gif"); } /************************************************************/ *********************** Template specifics *********************** .heading { font-family: Tahoma; font-size: 18px; font-weight: normal; color: #65A5E6; } .heading2 { font-family: Tahoma; font-size: 16px; font-weight: bold; text-decoration: none; color: #000000; } .heading3 { font-family: Tahoma; font-size: 12px; font-weight: bold; color: #16679F; } .clientarealinks { background-color: #FDFCDD; padding: 10px; } .clientarealinks a { color: #555555; } table.frame { width: 100%; border: 1px solid #8FBCE9; padding: 0px; } .fieldarea { background-color: #EFF2F9; text-align: right; } .clientareatable { width: 100%; background-color: #cccccc; } tr.clientareatableheading { background-color: #efefef; font-weight: bold; text-align: center; } tr.clientareatableactive { background-color: #ffffff; text-align: center; } tr.clientareatablepending { background-color: #FFFFE2; text-align: center; } tr.clientareatablesuspended { background-color: #E9FFD2; text-align: center; } tr.clientareatableterminated { background-color: #FFE1E1; text-align: center; } tr.supportticketsheading { background-color: #efefef; } tr.supportticketscontent { background-color: #ffffff; } .clientareatable td { padding: 4px; } .contentbox { width: 75%; text-align: center; background-color: #f7f7f7; border: 1px dashed #cccccc; padding: 8px 5px; margin-bottom: 15px; } .errorbox { border: 1px dashed #cc0000; font-weight: bold; background-color: #FBEEEB; text-align: center; width: 90%; padding: 10px; color: #cc0000; margin-left: auto; margin-right: auto; } .domaincheckeravailable { color: #669900; } .domaincheckerunavailable { color: #cc0000; } tr.orderheadingrow { background-color: #5AB9F1; color: #ffffff; } tr.orderrow1 { background-color: #E8F0F9; color: #000000; } tr.orderrow2 { background-color: #D6E4F6; color: #000000; }