/* Chase Paymentech Screen Stylesheet version: 1.0 date: 10/15/07 updated: 10/08/08 */ /* Background: #fdfdfe SideBar Background: #fff SideBar Border: #c4c4c6 Gray Text: #999 Masthead Links: #2179be Headers/Links: #198cca Orange Text/Hover: #e35915 MainContent Copy: #231f20 Promo Blue Background: #6399be Promo Blue Text: #b8d2e3 Promo White Text: #fff Footer Copy: #000 Thank You Blue Background: #198cca */ /* Global Whitespace Reset */ * { margin: 0; padding: 0; } body { background: #fdfdfe url(../images/background.gif) repeat-x; color: #000; font: 62.5%/1.5 Verdana, sans-serif; /* 62.5% x 16px default font size = 10px */ padding: 20px 0; text-align: center; } #Wrapper { margin: 0 auto; position: relative; text-align: left; width: 800px; } .ClearAll { clear: both; height: 1px; font-size: 1px; border: none; margin: 0; padding: 0; background: transparent; } img { border: none; } /* -- General Styles -- */ /* -- Headers -- */ h1 { font-size: 2.4em; color: #999; } /* 24px */ h2 { font-size: 2.4em; color: #e35915; text-transform: uppercase; } h3 { font-size: 1.8em; line-height: 1.0em; color: #198cca; padding: 0 0 10px 0; } /* 18px */ h4 { font-size: 1.1em; color: #198cca; text-transform: uppercase; } /* 11px */ h5 { font-size: 1.8em; color: #198cca; text-transform: uppercase; } h6 { font-size: 1.2em; color: #198cca; } /* 12px */ p, q, cite { font-size: 1.2em; padding: 0 0 1em 0; } /* -- Forms -- */ /* -- Added by Alice 080723-- */ form { background: #fff; margin: 0 10px; } #Codes { display: none; } /* Hides input element inserted by ASP.Net code for Firefox */ fieldset { border: none; } #__VIEWSTATE, #__EVENTVALIDATION { display: none; } /* Hides input element inserted by ASP.Net code for Firefox */ /* -- Lists -- */ ul, dl { list-style: none; } ol { list-style-position: outside; margin-left: 2.5em; padding-left: 0; } /* -- Links -- */ a { color: #198cca; text-decoration: none; } a:link { color: #198cca; } a:visited { color: #074e86; } a:hover { color: #e35915; } a:active { color: #198cca; } /* -- Masthead -- */ #Masthead h1 { float: left; margin-left: 10px; } #Masthead ul { float: right; margin: 0 0 10px 20px; text-transform: uppercase; } #Masthead ul li { float: left; font-size: 1.1em; margin: 7px 4px 0 0; } #Masthead ul li a { color: #2179be; text-decoration: none; white-space: nowrap; } /* -- Content -- */ #Content { clear: both; } /* -- Main Content -- */ #MainContent { color: #231f20; float: left; } #MainContent .Item { clear: both; margin: 6px 0; border-bottom: 1px dotted #ccc; } #MainContent .Item dt { font-size: 1.4em; font-weight: 900; margin: 5px 0 5px 0; } #MainContent .Item dl { font-size: 1.2em; } #MainContent .Item h4 { background: url(../images/button_learnmore120x26.gif) 0 center no-repeat; height: 26px; padding: 5px 0 0 15px; margin: 10px 0 10px 0; } #MainContent .Item h4 a { color: #fff; text-decoration: none; } /* -- Second Level Page MainNav -- */ #MainNav { float: left; padding-top: 159px; text-transform: uppercase; width: 202px; } #MainNav li { margin: 0 0 1px 0; } #MainNav li a { display: block; color: #000; font-weight: bold; text-decoration: none; height: 26px; padding: 13px 0 0 8px; } #MainNav li a:hover { color: #fff; text-decoration: none; } /* Set the background image/color for inactive and hover states */ #MainNav #NavHome a { background: #d0d0d0 url(../images/nav/button_top_bg.gif) top no-repeat; } #MainNav #NavHome a:hover { background: #888 url(../images/nav/button_top_bg.gif) top no-repeat; } #NavProducts a { background: #cecece; } #NavProducts a:hover { background: #808080; } #NavMerchant a { background: #cacaca; } #NavMerchant a:hover { background: #777; } #NaveCommerce a { background: #c6c6c6; } #NaveCommerce a:hover { background: #707070; } #NavPOS a { background: #c2c2c2; } #NavPOS a:hover { background: #666; } #NavIndustries a { background: #bebebe; } #NavIndustries a:hover { background: #606060; } #NavOnline a { background: #bbb; } #NavOnline a:hover { background: #555; } #NavRetail a { background: #b6b6b6; } #NavRetail a:hover { background: #505050; } #NavRestaurants a { background: #b3b3b3; } /* -- Modified by Alice 080722-- */ #NavRestaurants a:hover { background: #444; } /* -- Modified by Alice 080722-- */ #NavLogos a { background: #b1b1b1 url(../images/nav/button_bottom_bg.gif) bottom no-repeat; } /* -- Added by Alice 080722-- */ #NavLogos a:hover { background: #333 url(../images/nav/button_bottom_bg.gif) bottom no-repeat; } /* -- Added by Alice 080722-- */ /* Set the active state based on body ID */ #Home #NavHome a { background: #f18652; color: #fff; } #Products #NavProducts a { background: #e17744; color: #fff; } #Merchant #NavMerchant a { background: #da713d; color: #fff; } #eCommerce #NaveCommerce a { background: #d16734; color: #fff; } #POS #NavPOS a { background: #d16734; color: #fff; } #Industries #NavIndustries a { background: #c75e2a; color: #fff; } #Online #NavOnline a { background: #be5421; color: #fff; } #Retail #NavRetail a { background: #b64c19; color: #fff; } #Restaurants #NavRestaurants a { background: #b04613; color: #fff; } /* -- Modified by Alice 081006-- */ #Logos #NavLogos a { background: #b04613 url(../images/nav/button_bottom_bg.gif) bottom no-repeat; color: #fff; } /* -- Added by Alice 081006-- */ /* -- Promos -- */ #Promos ul { clear: both; float: left; } #Promos ul .Promo { float: left; padding-top: 10px; } #Promos ul .Promo .PromoCopy a { display: block; color: #fff; } #Promos ul .Promo .PromoCopy a h5 { color: #fff; line-height: 1; } #Promos #Promo1 { background: url(../images/topbtpromo_495x10.gif) top no-repeat; margin-right: 15px; width: 495px; } #Promos #Promo1 .PromoCopy { background: #6399be url(../images/btpromo_woman_152x97.gif) top left no-repeat; } #Promos #Promo1 .PromoCopy a { padding-bottom: 28px; } #Promos #Promo1 h5 { padding-top: 15px; margin-left: 165px; } #Promos #Promo1 .BottomCap { background: url(../images/bottonbtpromo_343x10.gif) 152px 0 no-repeat; margin-top: -10px; height: 10px; } #Promos #Promo2 { background: url(../images/top_orangepromo290x10.gif) no-repeat; width: 290px; } #Promos #Promo2 .PromoCopy { background: #e56119 url(../images/arrow_orangepromo53x87.gif) left 0 no-repeat; } #Promos #Promo2 .PromoCopy a { padding-left: 53px; } #Promos #Promo2 .PromoCopy p { background: #e97022 url(../images/center_orangepromo237x87.gif) top no-repeat; font-size: 1.3em; margin: 0; padding: 22px 0 0 0; } #Promos #Promo2 .PromoCopy h5 { background: #e97022 url(../images/center_orangepromo237x87.gif) bottom no-repeat; font-size: 2.4em; padding-bottom: 21px; } #Promos #Promo2 .BottomCap { background: url(../images/bt_orangepromo_290x10.gif) no-repeat; height: 10px; } /* -- SideBar -- */ #SideBar { margin-bottom: 10px; padding-top: 10px; float: right; width: 160px; } #SideBarLinks { background: #fff; border-left: 1px solid #c4c4c6; border-right: 1px solid #c4c4c6; padding: 0 10px; } /* Detail Level Pages */ .Detail #MainContent { background: url(../images/middle_top414x12.gif) no-repeat; margin-left: 12px; padding-top: 12px; width: 414px; } .Detail #MainContent #Middle { background: #fff; border-left: 1px solid #ccc; border-right: 1px solid #ccc; padding-bottom: 10px; } .Detail #MainContent #Middle h2 { margin: 0 10px; } .Detail #MainContent #Middle h3 { margin: 0 10px; } .Detail #MainContent #Middle p { margin: 0 10px; padding-bottom: 1.2em; clear: both; } .Detail #MainContent #Middle .ProductImage { float: left; width: 133px; height:133px; padding: 20px 0; } .Detail #MainContent #Middle .IndustryImage { float: left; width: 112px; height:112px; padding: 20px 0 20px 10px; } .Detail #MainContent #Middle .Description { float: right; padding-right: 10px; width: 260px; } .Detail #MainContent #Middle .Bullets h5 { font-size: 1.5em; margin: 0 10px; text-transform: none; } .Detail #MainContent #Middle .Bullets ul { font-size: 1.5em; list-style: disc; margin: 10px 10px 20px 30px; color: #e35915; } .Detail #MainContent #Middle .Bullets ul li { margin: 10px 0 0 0; line-height: 1.0em; } .Detail #MainContent #Middle .Bullets ul li span { font-size: .85em; color: #000; } .Detail #MainContent h4.Apply { background: url(../images/button_176x36.gif) right center no-repeat; height: 36px; padding: 10px 20px 0 0; margin: 10px 10px 0 0; text-align: right; } .Detail #MainContent h4.Apply a { font-size: 1.6em; color: #fff; padding: 0 0 0 25px; } .Detail .BottomCap { background: url(../images/middle_bottom414x12.gif) no-repeat; } .Detail #SideBar a { display: block; height: 600px; width: 160px; margin-top: -10px; } .Detail #SideBar div { font-size: 1.8em; color: #fff; font-weight: 900; line-height: 1.1em; padding: 20px 10px 0px 10px; color: #fff; } .Detail #SideBar strong { color: #333; } .Detail #Footer { border-top: 1px solid #c4c4c6; padding-top: 5px; } /* -- Footer -- */ #Footer { clear: both; margin-top: 15px; width: 800px; } /* Disclaimers | Modified by Alice 081008-- */ #Home #Footer p span, #Products #Footer p span, #POS #Footer p span, #eCommerce #Footer p span, #Merchant #Footer p span, #Industries #Footer p span, #Online #Footer p span, #Retail #Footer p span, #Restaurants #Footer p span, #Sitemap #Footer p span, #Logos #Footer p span { display: none; } /* hides asterisk on all other pages */ #Contact #Footer #FormNote { display: none; } /* hides asterisked footnote on Contact page since it's in the MainContent */ /* Only eCommerce page gets eCommerceNote | Modified by Alice 081008-- */ #Home #Footer #eCommerceNote, #Products #Footer #eCommerceNote, #POS #Footer #eCommerceNote, #Merchant #Footer #eCommerceNote, #Industries #Footer #eCommerceNote, #Online #Footer #eCommerceNote, #Retail #Footer #eCommerceNote, #Restaurants #Footer #eCommerceNote, #Sitemap #Footer #eCommerceNote, #Contact #Footer #eCommerceNote, #Logos #Footer #eCommerceNote { display: none; } /* Specific Pages */ /* Home Page */ #Home #MainContent { position: relative; width: 495px; } #Home #MainContent h2 { background: url(../images/main/hp_495x243.jpg) no-repeat; color: #198cca; font-size: 1.3em; height: 243px; padding: 20px 0 0 30px; } #Home #MainContent h2 strong { display: block; font-size: 1.6em; line-height: 1; margin-left: -20px; } #Home #MainContent h2 span { float: right; margin: 0 250px 0 0; } #Home #MainContent h5 { position: absolute; top: 210px; right: 30px; } #Home #MainContent h5 a { color: #fff; text-decoration: none; } #Home #SideBar { background: url(../images/rightcolumn_top290x10.gif) no-repeat; width: 290px; } #Home #SideBar h4 { color: #999; } #Home #SideBar dt { color: #231f20; font-size: 1.4em; font-weight: bold; margin-top: 5px; padding-left: 79px; } #Home #SideBar dd { font-size: 1.1em; padding: 0 0 15px 79px; margin: -69px 10px 0 0; } #Home #SideBar #Merchant { background: url(../images/merchant_69x59.jpg) no-repeat; padding-bottom: 65px; } #Home #SideBar #eCommerce { background: url(../images/ecommerce_69x59.jpg) no-repeat; padding-bottom: 65px; } #Home #SideBar #PoS { background: url(../images/pos_69x59.jpg) no-repeat; padding-bottom: 65px; } #Home #SideBar #Online { background: url(../images/online_69x59.jpg) no-repeat; padding-bottom: 65px; } #Home #SideBar #Retail { background: url(../images/retail_69x59.jpg) no-repeat; padding-bottom: 65px; } #Home #SideBar #Restaurants { background: url(../images/restaurants_69x59.jpg) no-repeat; padding-bottom: 65px; } #Home #SideBar .BottomCap{ background: url(../images/rightcolumn_bottom290x10.gif) bottom no-repeat; height: 10px; } /* Products Page */ #Products #MainNav { background: url(../images/main/products_202x147.jpg) no-repeat; } #Products #SideBar { background: url(../images/sidebar/merchantaccount_160x600.jpg) top no-repeat; } #Products #SideBar strong { color: #e35918; } /* POS Page */ #POS #MainNav { background: url(../images/main/pos_202x147.jpg) no-repeat; } #POS #MainContent #Middle .ProductImage { float: right; } #POS #MainContent #Middle p { clear: none; } #POS #SideBar { background: url(../images/sidebar/ccprocessing_160x600.jpg) top no-repeat; } /* eCommerce Page */ #eCommerce #MainNav { background: url(../images/main/products_202x147.jpg) no-repeat; } #eCommerce #SideBar { background: url(../images/sidebar/ccprocessing_160x600.jpg) top no-repeat; } #eCommerce #SideBar strong { color: #e35918; } /* Merchant Accounts Page */ #Merchant #MainNav { background: url(../images/main/merchant_202x147.jpg) no-repeat; } #Merchant #SideBar { background: url(../images/sidebar/posolutions_160x600.jpg) top no-repeat; } /* Industies Page */ #Industries #MainNav { background: url(../images/main/industries_202x147.jpg) no-repeat; } #Industries #SideBar { background: url(../images/sidebar/posolutions_160x600.jpg) top no-repeat; } /* Online Page */ #Online #MainNav { background: url(../images/main/online_202x147.jpg) no-repeat; } #Online #SideBar { background: url(../images/sidebar/ccprocessing_160x600.jpg) top no-repeat; } /* Retail Page */ #Retail #MainNav { background: url(../images/main/retail_202x147.jpg) no-repeat; } #Retail #SideBar { background: url(../images/sidebar/merchantaccount_160x600.jpg) top no-repeat; } #Retail #SideBar strong { color: #e35918; } /* Restaurants Page */ #Restaurants #MainNav { background: url(../images/main/restaurants_202x147.jpg) no-repeat; } #Restaurants #SideBar { background: url(../images/sidebar/merchantaccount_160x600.jpg) top no-repeat; } /* Sitemap */ #SiteMap #MainNav { background: url(../images/main/online_202x147.jpg) no-repeat; } #SiteMap #SideBar { background: url(../images/sidebar/merchantaccount_160x600.jpg) top no-repeat; } /* Lead Form */ #Contact #MainNav { background: url(../images/main/products_202x147.jpg) no-repeat; } #Contact #SideBar { background: url(../images/sidebar/merchantaccount_160x600.jpg) top no-repeat; } /* Contact */ /*#Contact #MainContent #Middle form { background: #fff; margin: 0 10px; }*/ /* -- Modified by Alice 080723-- */ /*#Contact #MainContent #Middle #Codes { display: none; }*/ /* -- Modified by Alice 080723-- */ /*#Contact #MainContent #Middle fieldset { border: none; }*/ /* -- Modified by Alice 080723-- */ #Contact #MainContent #Middle legend { color: #2179be; font-size: 1.2em; font-weight: bold; padding: 10px 0 10px 5px; text-transform: uppercase; } #Contact #MainContent #Middle #LeadForm { position:relative; } #Contact #MainContent #Middle #LeadForm #buttonClick {position:absolute; bottom:78px; left:185px; width:222px; height:38px; background-color:#fff; display:none;} #Contact #MainContent #Middle #LeadForm h4 { float: right; margin: -25px 0 0 0; padding-right: 8px; } #Contact #MainContent #Middle #genericError { color: #f00; display: block; padding-left: 10px; } /*#Contact #MainContent #Middle #__VIEWSTATE, #__EVENTVALIDATION { display: none; }*/ /* -- Modified by Alice 080723-- */ #Contact #MainContent #Middle label, input, select { display: block; float: left; margin: 0 0 5px 0; width: 260px; } #Contact #MainContent #Middle label { font-weight: bold; padding-left: 15px; padding-right: 10px; line-height: 2; text-align: right; width: 90px; } #Contact #MainContent #Middle input { font-size: 1em; height: 18px; } #Contact #MainContent #Middle select, option { font-size: 1.1em; } #Contact #MainContent #Middle .errorMessage { color: #f00; display: block; margin-left: 114px; } #Contact #MainContent #Middle br { clear: left; } #Contact #MainContent #Middle hr { border: none; border-top: 1px solid #dfeffb; height: 1px; width: 100%; } /* Height is for IE browsers */ #Contact #MainContent #Middle #create { background: url(../images/button_applynow_176x36.gif) 0 no-repeat; width: 176px; height: 36px; float: right; margin: 10px 0; padding-right: 20px; } /* -- Thank You -- */ #Contact #MainContent #Middle .ThankYou form { margin: 0; } #Contact #FirstName { font-weight: bold; padding-top: 0.5em; } /* #Contact #AppDetails { background: #198cca; color: #fff; margin-bottom: 12px; padding: 12px 0; } */ /* -- Modified by Ed 080320-- */ #Contact #appId { color: #000; } #Contact .ThankYou #AppDetails p { margin-bottom: 1em; padding-bottom: 0; } /* -- Modified by Ed 080320-- */ #Contact .ThankYou ul { font-size: 1.2em; list-style: disc; margin: 0 40px 12px; } /* -- Modified by Alice 100224-- */ #Contact .ThankYou ul li { margin-top: 1em; } /* -- Modified by Ed 080320-- */ #Contact #messages { display: none; } /* Link To Us Page | Added by Alice 080722-- */ #Logos #MainNav { background: url(../images/main/merchant_202x147.jpg) no-repeat; } #Logos #MainContent { background: url(../images/topcap_585x12.gif) no-repeat; width: 585px; } #Logos #MainContent #Middle legend { color: #e35915; font-size: 1.4em; font-weight: bold; padding: 10px 0 10px 5px; text-transform: uppercase; } #Logos #MainContent #Middle label, #Logos #MainContent #Middle select { display: block; float: left; margin: 0 0 5px 0; width: 294px; } #Logos #MainContent #Middle label { padding-left: 15px; padding-right: 10px; line-height: 2; text-align: right; width: 180px; } #Logos #MainContent #Middle input { font-size: 1em; height: 18px; width: 290px; } #Logos #MainContent #Middle br { clear: left; } #Logos #MainContent #Middle hr { border: none; border-top: 1px solid #ccc; height: 1px; margin-top: 20px; width: 100%; } /* Height is for IE browsers */ #Logos #MainContent #Middle #PaymentechLogo { float: left; padding: 10px; } #Logos #MainContent #Middle #Preview { float: right; padding-right: 10px; width: 380px; } #Logos #MainContent #Middle #Preview ul { list-style: disc; margin: 0 0 12px 25px; } #Logos button { margin: 10px 0 0 274px; width: 270px; } #Logos .BottomCap { background: url(../images/bottomcap_585x12.gif) no-repeat; } #Logos .errorMessage { color: #f00; } /* -- Added by Alice 081007-- */ /* -- Click To Call Buttons | Added by Ed 080320-- */ #ClickToCallLeftNav { padding: 10px 0 0 0; } #ClickToCallContact { padding: 10px 0 0 0; } #ClickToCallThankYou{ padding: 10px 0 10px 0; }