/* Styling shared across the site --------------------------------------------------------------- */ body { margin-top: 0px; text-align: center; background: url(images/page_bg.png); font-family: verdana; font-size: 11px; } p { font-size: 11px; margin-top: 0px; margin-bottom: 12px; } h1 { color: #fff; font-weight: bold; font-size: 12px; } .section-title { color: #fff; font-weight: bold; font-size: 12px; } .address-scru { color: #fff; font-weight: bold; } .note { font-size: 11px; color: #666; } .redText { color: red; } .imgFloatLeft { float: left; margin: 10px; } .imgFloatRight { float: right; margin: 10px; } #main { width: 1000px; height: 550px; margin: 20px auto; text-align: left; position: relative; } #main-bg { width: 1000px; height: 530px; position: absolute; top: 0px; left: 0px; z-index: 0; } /* Navigation */ #nav { width: 698px; height: 16px; background: #272727; position: absolute; top: 20px; left: 270px; padding: 2px 0px 1px 2px; border-left: 1px solid #272727; border-right: 1px solid #272727; z-index: 1; text-align: center; } #nav-lower { width: 680px; height: 3px; background: url(images/metal.gif); position: absolute; top: 44px; left: 270px; padding: 0px 0px 0px 20px; overflow: hidden; border: 1px solid #000; z-index: 2; } #nav a:link, #nav a:visited { background: #272727; text-align: center; padding: 2px 8px 4px 8px; font-size: 11px; color: #ffcc66; text-decoration: none; } #nav a:hover, #nav a:visited:hover { background: #666; text-align: center; padding: 2px 8px 4px 8px; font-size: 11px; color: #fff; text-decoration: none; } .selected { background: #3e3e3e; text-align: center; padding: 2px 8px 4px 8px; font-size: 11px; color: #fff; } /* Nav below for store */ #nav-store { width: 760px; height: 16px; background: #272727; position: absolute; top: 20px; left: 200px; padding: 2px 0px 1px 10px; border-left: 1px solid #272727; border-right: 1px solid #272727; z-index: 1; } #nav-lower-store { width: 760px; height: 3px; background: url(images/metal.gif); position: absolute; top: 44px; left: 200px; padding: 0px 0px 0px 10px; overflow: hidden; border: 1px solid #000; z-index: 2; } #nav-store a:link, #nav-store a:visited { font-weight: bold; background: #272727; text-align: center; padding: 2px 8px 4px 8px; font-size: 11px; color: #ffcc66; text-decoration: none; } #nav-store a:hover, #nav-store a:visited:hover { font-weight: bold; background: #666; text-align: center; padding: 2px 8px 4px 8px; font-size: 11px; color: #fff; text-decoration: none; } /* Subscribe | sub-navigation */ #subscribe { width: 140px; height: 16px; position: absolute; top: 54px; left: 780px; padding: 2px 25px 1px 25px; border-left: 1px solid #272727; border-right: 1px solid #272727; overflow: hidden; z-index: 2; text-align: right; background-color: #272727; text-align: center; color: #999; } #subscribe a:link, #subscribe a:visited { background: #272727; text-align: center; padding: 2px 7px 4px 7px; font-size: 11px; color: #fff; text-decoration: none; } #subscribe a:hover, #subscribe a:visited:hover { background: #666; text-align: center; padding: 2px 7px 4px 7px; font-size: 11px; color: #fff; text-decoration: none; } /* Store only navigation */ .thisStep { background: #3e3e3e; text-align: center; padding: 2px 8px 4px 8px; font-size: 11px; color: #fff; } .otherStep { background: #272727; text-align: center; padding: 2px 8px 4px 8px; font-size: 11px; color: #ffcc66; text-decoration: none; } /* Logo and Address */ #logo { width: 140px; height: 250px; background: #272727; position: absolute; top: 124px; left: 20px; padding: 5px 10px; color: #ccc; text-align: center; z-index: 3; } #address { width: 160px; height: 95px; background: url(images/address.gif); position: absolute; top: 400px; left: 20px; z-index: 4; } /* Footer/Copyright */ #copyright { width: 522px; height: 16px; background: #272727; position: absolute; top: 536px; left: 410px; z-index: 13; padding: 2px 20px 2px 20px; color: #ccc; font-size: 10px; z-index: 5; overflow: hidden; background: url(images/footer_cardlogos.gif) right no-repeat #272727; } #copyright a { color: #ccc; text-decoration: none; } #copyright a:hover { color: #fafafa; text-decoration: underline; } /* End of shared styling ------------------------------------------------------------------------- */ #right { width: 160px; height: 160px; background: #272727; position: absolute; top: 124px; left: 812px; z-index: 6; color: #ccc; } #right a { color: #ffcc66; text-decoration: none; } #right a:hover { color: #fff; text-decoration: underline; } #right-lower { width: 140px; height: 146px; background: #272727; position: absolute; top: 284px; left: 812px; padding: 10px; color: #ccc; z-index: 6; } #right-lower a { color: #ffcc66; text-decoration: none; } #right-lower a:hover { color: #fff; text-decoration: underline; } /* Home Page */ #home-centre { width: 440px; /*height: 270px;*/ background: url(images/home_glass.gif) bottom left no-repeat #272727; position: absolute; top: 124px; left: 266px; padding: 10px; color: #ccc; z-index: 6; } #home-prop { width: 1px; height: 270px; overflow: hidden; float: right; } #home-clear { display: block; height: 1px; overflow: hidden; margin: 0px; } #home-centre a, #home-centre a:visited{ color: #ffcc66; text-decoration: none; } #home-centre a:hover, #home-centre a:visited:hover{ color: #fff; text-decoration: underline; } #home-centre p { padding-left: 90px; } /* About Page */ #about-centre { width: 460px; /*height: 306px;*/ background: url(images/home_glass.gif) bottom left no-repeat #272727; position: absolute; top: 124px; left: 256px; padding: 10px; color: #ccc; z-index: 6; overflow: hidden; } #about-prop { width: 1px; height: 306px; overflow: hidden; float: right; } #about-clear { display: block; height: 1px; overflow: hidden; margin: 0px; } #about-centre a, #about-centre a:visited{ color: #ffcc66; text-decoration: none; } #about-centre a:hover, #about-centre a:visited:hover{ color: #fff; text-decoration: underline; } #about-centre p { padding-left: 90px; } /* Private Celler Wines Page */ #privatecellar-centre { width: 316px; height: 270px; background: url(images/home_glass.gif) bottom left no-repeat #272727; position: absolute; top: 124px; left: 256px; padding: 10px; color: #ccc; z-index: 6; } #privatecellar-centre a, #privatecellar-centre a:visited{ color: #ffcc66; text-decoration: none; } #privatecellar-centre a:hover, #privatecellar-centre a:visited:hover{ color: #fff; text-decoration: underline; } #privatecellar-centre p { padding-left: 90px; } #privatecellar-right { width: 290px; height: 270px; background: #272727; position: absolute; top: 124px; left: 670px; padding: 10px; color: #ccc; z-index: 6; } #privatecellar-right a { color: #ffcc66; text-decoration: none; } #privatecellar-right a:hover { color: #fff; text-decoration: underline; } #privatecellar-right img { float: left; margin-right: 8px; margin-bottom: 10px; } #privatecellar-right-clear{ clear: both; height: 1px; overflow: hidden; } /* Private Cellar Info and Product Info Pages */ .productEntry { width: 700px; border: 1px solid #000; font-size:10px; margin-bottom: 10px; } .productDetails1 { width: 150px; float: left; display: inline; } .productDetails2 { width: 450px; float: left; display: inline; } .productDetails2 p { padding-left: 10px; padding-right: 10px;} .product-name { color: #fff; font-weight: bold; } .productDetails3 { width: 100px; float: left; display: inline; } .productServices{ width: 700px; background: #666; border-bottom: 2px solid #636c7c; border-top: 1px solid #a3adb7; height: 25px; display: block; padding-left: 2px; } .productEntryClear { clear: both; height: 1px; overflow: hidden; width: 600px; } #productinfo { width: 756px; height: 351px; background: #272727; position: absolute; top: 124px; left: 196px; padding: 10px; color: #ccc; z-index: 6; overflow: auto; } #productinfo a, #productinfo a:visited { color: #ffcc66; text-decoration: none; } #productinfo a:hover, #productinfo a:visited:hover { color: #fff; text-decoration: underline; } .productinfo-clear { clear: both; height: 10px; overflow: hidden; width: 680px; margin: 0px auto; border-top: 1px solid #000; } /* Sommeliers Page */ #sommelier-main { width: 320px; height: 300px; background: #272727; position: absolute; top: 124px; left: 230px; padding: 10px; color: #ccc; z-index: 6; overflow: auto; } #sommelier-main a, #sommelier-main a:visited{ color: #ffcc66; text-decoration: none; } #sommelier-main a:hover, #sommelier-main a:visited:hover{ color: #fff; text-decoration: underline; } #sommelier-people { width: 320px; height: 300px; background: #272727; position: absolute; top: 124px; left: 630px; padding: 10px; color: #ccc; z-index: 6; overflow: auto; } .sommelier-person { width: 290px; padding: 4px; /*background: #000;*/ display: block; margin-bottom: 14px; border: 1px solid #000; } .sommelier-thumbnail { width: 50px; height: 50px; background: #313131; float: left; display: inline; margin-right: 4px; } .sommelier-name { color: #fff; } .sommelier-person a, .sommelier-person a:visited{ color: #fff; text-decoration: none; } .sommelier-person a:hover, .sommelier-person a:visited:hover{ color: #fafafa; text-decoration: none; } .sommelier-person-prop { width: 1px; height: 50px; overflow: hidden; float: right; } .sommelier-clear { clear: both; height: 1px; overflow: hidden; } /* Partner Offers Page */ #partner-centre { width: 404px; height: 300px; background: url(images/home_glass.gif) bottom left no-repeat #272727; position: absolute; top: 124px; left: 213px; padding: 10px; color: #ccc; z-index: 6; } #partner-centre a, #partner-centre a:visited{ color: #ffcc66; text-decoration: none; } #partner-centre a:hover, #partner-centre a:visited:hover{ color: #fff; text-decoration: underline; } #partner-centre p { padding-left: 90px; } #partner-right { width: 290px; height: 300px; background: #272727; position: absolute; top: 124px; left: 670px; padding: 10px; color: #ccc; z-index: 6; } #partner-right a { color: #ffcc66; text-decoration: none; } #partner-right a:hover { color: #fff; text-decoration: underline; } #partner-right img { float: left; margin-right: 8px; margin-bottom: 50px; } #partner-right-clear { clear: both; height: 1px; overflow: hidden; } /* Contact/Subscribe/Unsubscribe Page */ #contact-text { width: 377px; height: 300px; background: #272727; position: absolute; top: 124px; left: 222px; padding: 10px; color: #ccc; z-index: 6; } #contact-text a, #contact-text a:visited { color: #ffcc66; text-decoration: none; } #contact-text a:hover, #contact-text a:visited:hover { color: #fff; text-decoration: underline; } #contact-form { width: 292px; height: 300px; background: #272727; position: absolute; top: 124px; left: 660px; padding: 10px; color: #ccc; z-index: 6; } #contact-form a { color: #ffcc66; text-decoration: none; } #contact-form a:hover { color: #fff; text-decoration: underline; } .smallprint { font-size: 11px; color: #999; } /* Start of Form styling ------------------------------------------------------------------------*/ .form-element { float: right; margin-right: 16px; margin-bottom: 6px; display: inline; } .form-top { float: right; margin-right: 16px; margin-top: 6px; margin-bottom: 6px; display: inline; font-size: 11px; color: #666; } .form-textbox { padding: 3px; background: #313131; border: 1px solid #666; font-size: 11px; color: #fff; width: 160px; font-family: verdana; } .form-textarea { /*height: 140px;*/ padding: 3px; background: #313131; border: 1px solid #666; font-size: 11px; color: #fff; width: 260px; font-family: verdana; } .form-textbox-red { padding: 3px; background: #313131; border: 1px solid #990033; font-size: 11px; color: #fff; width: 160px; font-family: verdana; } .form-textarea-red { /*height: 140px;*/ padding: 3px; background: #313131; border: 1px solid #990033; font-size: 11px; color: #fff; width: 260px; font-family: verdana; } .button { background: #666; border: 1px solid #000; color: #000; } .button:hover { background: #3e3e3e; border: 1px solid #000; color: #ccc; } #form-response { width: 340px; margin: 20px auto; } .required { color: #cc3333; } /* End of Form styling ------------------------------------------------------------------------ */ /* Terms Page */ #terms { width: 756px; height: 306px; background: #272727; position: absolute; top: 124px; left: 196px; padding: 10px; color: #ccc; z-index: 6; overflow: auto; } #terms a, #terms a:visited{ color: #ffcc66; text-decoration: none; } #terms a:hover, #terms a:visited:hover{ color: #fff; text-decoration: underline; } /* On-line store styling --------------------------------------------------------------------- */ /* Logo and Address for store only. Further to the left than the main site. */ #logo-store { width: 140px; height: 250px; background: #272727; position: absolute; top: 124px; left: 20px; padding: 5px 10px; color: #ccc; text-align: center; z-index: 3; } #address-store { width: 160px; height: 95px; background: url(images/address.gif); position: absolute; top: 400px; left: 20px; z-index: 4; } #store { width: 770px; height: 410px; background: #272727; position: absolute; top: 80px; left: 196px; padding: 10px; color: #ccc; z-index: 6; overflow: auto; } #store a, #store a:visited{ color: #ffcc66; text-decoration: none; } #store a:hover, #store a:visited:hover{ color: #fff; text-decoration: underline; } #buildOrder-div { width: 750px; margin: 0px auto; } #store-buildOrder-top { width: 770px; height: 380px; background: #272727; position: absolute; top: 80px; left: 196px; padding: 10px; color: #ccc; z-index: 6; overflow: auto; } #store-buildOrder-bottom { width: 752px; height: 20px; background: #272727; position: absolute; top: 480px; left: 196px; padding: 10px 38px 10px 0px; color: #ccc; z-index: 6; text-align: right; } #buildOrderLower-div { width: 750px; margin: 0px auto; border: 1px dashed blue;} #buildOrderTable { width: 740px; background: #313131; border: 1px solid #000; } #buildOrderTable td { color: #ccc; } .buildOrderName { color: #fff; font-weight: bold; } #custDetails-div { width: 750px; margin: 0px auto; } #custDetailsTable { width: 740px; background: #313131; border: 1px solid #000; } #custDetailsTable td { vertical-align: top; color: #ccc; } .custDetails-formLeft { width: 140px; color: #666; font-size: 11px; vertical-align: top; text-align: right; } .custDetails-formRight { width: 300px; } .custDetails-check { background: #404040; } #orderConfirm-div { width: 750px; margin: 0px auto; } .orderConfirmTable { width: 740px; background: #313131; border: 1px solid #000; } .orderConfirmTable td { color: #ccc; } .dashedTop { border-top: 1px dashed #999; text-align: right; } .total { font-weight: bold; color: #fff; text-align: right; } #tempConfBox { width: 700px; height: 220px; background: #fff; border: 1px dashed #333; overflow: auto; font-size: 10px; } /* Used in testing only. */ #successerror { width: 700px; margin: 0px auto; } .subheader { font-size: 11px; color: #fff; background-color: #313131; border-bottom: 1px solid #000; font-weight: bold; } .greybar { background-color: #313131; font-weight: bold; } .warning { font-size: 12px; color: red; } .smalltext { font-size: 11px; color: #666; } .smallheader { font-size: 11px; color: #000; background-color: #ccc; } .formLeft { width: 230px; color: #ccc; font-size: 11px; vertical-align: top; text-align: right; } .formRight { width: 420px; } ul { font-family: Verdana; font-size: 10px; color: #666; } td { font-family: Verdana; font-size: 11px; color: #666; } /* Look at assigning the necessary table an id to avoid this being inherited outside of the store pages. */ .imgBorder { border: 1px solid #000; } .input70 { width: 70px; padding-left: 3px; background: #404040; border: 1px solid #666; font-size: 11px; color: #fff; font-family: verdana; } /* For buildOrder select boxes. */ .input140 { width: 140px; padding-left: 3px; background: #404040; border: 1px solid #666; font-size: 11px; color: #fff; font-family: verdana; } .input200 { width: 200px; padding-left: 3px; background: #404040; border: 1px solid #666; font-size: 11px; color: #fff; font-family: verdana; } .input280 { width: 280px; padding-left: 3px; background: #404040; border: 1px solid #666; font-size: 11px; color: #fff; font-family: verdana; } /* End of On-line store --------------------------------------------------------------------- */