/* Swatches: */ .red1 { background: #790010 } .red2 { background: #cd7d7b } .red3 { background: #dfa29f } .red4 { background: #e7b6b4 } .red5 { background: #efd3d3 } .red6 { background: #f2e1e2 } .blue1 { background: #475c7e } .blue2 { background: #9da9bd } .blue3 { background: #b9bfcf } .blue4 { background: #c7ccd9 } .blue5 { background: #dde0e7 } .blue6 { background: #e7e9ec } .green1 { background: #155f48 } .green2 { background: #87ad9c } .green3 { background: #a6c3b7 } .green4 { background: #b9cfc5 } .green5 { background: #d4e0db } .green6 { background: #e2e9e5 } .yellow1 { background: #794800 } .yellow2 { background: #c59d5d } .yellow3 { background: #d7b789 } .yellow4 { background: #e0c5a1 } .yellow5 { background: #eadbc7 } .yellow6 { background: #f0e6da } .bgbrown { background: #340408 } .uniyellow { background: #d5b45e } .uniyellow2 { background: #c7a351 } .uniyellow3 { background: #e6c670 } .textblue { color: #0059d5 } .textbrown { color: #340408 } .textred { color: #ff1d59 } .textgold { color: #fee1a2 } .textblack { color: #000 } .redload { color: #efd3d3; font-size: 22px } .blueload { color: #dde0e7; font-size: 22px } .greenload { color: #d4e0db; font-size: 22px } .yellowload { color: #eadbc7; font-size:22px } /* Titles: Optima, Trebuchet MS Content: Arial Unicode MS, Arial, Helvetica, sans-serif Bold Content: As above for IE6; for other browsers: Arial, Helvetica, AUMS, sans-serif */ html, { height: 100%; width: 100%; padding:0; margin: 0;} body { background: #340408 /*bgbrown*/; font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif; margin: 0; padding: 0; min-width: 930px; height: 100%; width: 100%; font-size: 14px; line-height: 136% } #body { height: 100%; width: 100%; min-width: 920px; position: absolute; top: 0; left: 0} table, td, h1, h2, p { margin: 0; padding: 0} a { color: #0059d5; text-decoration: none; outline: none } a:hover { color: white } img { border: none; -webkit-user-select: none } .textinput { border: none; height: 17px; margin-top: 3px; width: 98px; padding-left: 1px; padding-right: 1px; } .buttonholder /* workaround for Firefox bug */ { position: relative; display: inline-block } button, .button { position: relative; height: 18px; width: 120px; color: #340408; font-size: 11px; line-height: 18px !important; border: none; font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif; padding: 0; cursor: pointer; -moz-box-sizing: content-box; display:inline-block } button:hover, .button:hover { background : white; color: #340408} /* Those Firefox people must be nuts! Positioning of items within a button is based on the size of the content, not the size of the button. I can’t set the line-height of the inside of the button, because they have !important in the ua style sheet (?!). These two rules are to make buttons behave rationally. */ button::-moz-focus-inner { padding:0;border:0;margin:0 } button:before { height:18px;width:0;display:inline-block;vertical-align:middle;content:'' } .sp-below { margin-bottom: 10px } /* Top tabs */ .tab { font-weight: bold; font-family: Optima, "Trebuchet MS"; font-size: 14px; height: 35px; line-height: 35px } .bottomtab, .selbottomtab { font-weight: bold; font-family: Optima, "Trebuchet MS"; font-size: 14px; margin-bottom: 0px; height: 35px; padding-top: 1px; display: block } .selbottomtab { z-index: 50 } .tab-tiny { font-weight: normal; font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif; font-size: 10px; line-height: 136%;margin-top:0px } .unitext { font-weight: bold; font-family: Optima, "Trebuchet MS"; font-size: 12px; line-height: 136%} br { margin-top: 0px; margin-bottom: 0px } #about, #basket, #search { display: none; position: absolute; width: 100%; bottom: 0; ; border-bottom: solid 1px #340408 /* bgbrown */ } .up { margin: 11px 5px; display: none; float:left } .selbottomtab .up { display: inline } #about-tab { background: url(images/ECSnameplate.gif) top no-repeat } #about-tab, #search-tab, #basket-tab { background-color: #d5b45e /* uniyellow */; position:relative } #search-tab { width: 100%; cursor:pointer } #basket-tab { width:100%; color: #340408 } /* Home page */ #home-content { visibility: hidden } #home-tabs { visibility: visible } /* overrides the previous rule (the tabs are inside the content) */ .home-tab { height: 35px;background: #d5b45e; position:relative; display:block; color:#340408 /* textbrown */ } .home-tab-sel { height: 36px;background: #d5b45e; position:relative; display:block; color:#340408 /* textbrown */ } .home-tab-list-container { white-space:nowrap; margin-left: auto; margin-right: auto } .home-tab-list-column1 { position:relative; display:inline-block;vertical-align:top; overflow:hidden;margin-left:12px; white-space:normal } .home-tab-list-column2 { position:relative; display:inline-block;vertical-align:top; overflow:hidden; white-space:normal } .home-tab-list { width: 440px; margin: 0; list-style-type: none; padding: 0 0; overflow:hidden; } .home-tab-list li { padding: 2px 16px 1px; display: block; position:relative; } .home-tab-list li.top { padding-top: 14px;} .home-tab-list li.bottom { padding-bottom: 14px;} .home-tab-list .colitem1 { left:0; } .home-tab-list .colitem1 .price { top:-3px } .home-tab-list-add { position:absolute; bottom: 0; right:0 } .announcement { position:relative; background: #e6c670 /* uniyellow3 */; margin-bottom: 15px; padding: 15px } #home-festal, #home-supplies, #home-books,#home-fabrics { position:absolute; width: 461px; height: 273px; text-align: left } #home-festal, #home-festal-tab { background:#790010; left: 0px; } #home-fabrics,#home-fabrics-tab{ background:#155f48; left: 469px; text-align:right } #home-books, #home-books-tab { background:#475c7e; left: 0px; } #home-supplies,#home-supplies-tab{background:#794800; left: 469px;text-align:right} #home-festal, #home-fabrics { top: 30px} #home-books, #home-supplies { top: 342px} #home-festal-tab, #home-fabrics-tab { top: 0 } #home-books-tab, #home-supplies-tab { top: 312px} #home-festal-tab, #home-supplies-tab, #home-books-tab, #home-fabrics-tab { position:absolute; z-index: 10; width: 461px; } #home-festal-tab a, #home-supplies-tab a, #home-books-tab a, #home-fabrics-tab a { margin-left: 18px; margin-right: 18px; line-height: inherit; display:block; color: #fee1a2 /* textgold */ } .homeqlink { zoom: 100%; height: 308px; width: 461px; position:absolute } .hmred2, .hmblue2 { position:absolute; top: 5px; left: 15px; width: 371px; height: 253px } .hmyellow2, .hmgreen2 { position:absolute; top: 5px; left: 75px; width: 371px; height: 253px ; text-align: left } #home-logobox { position:absolute; top: 243px; left: 401px; z-index: 30; } #home-logobox:hover{background:url(images/ECSlogobigover.png)} #home-logobox:hover img { visibility: hidden } #home-logobox img {vertical-align:middle} * html #home-logobox img, * html #logobox img { visibility :hidden } * html #home-logobox { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ECSlogobig.png', sizingMethod='scale') } #counter { background: #d5b45e /* uniyellow */; height: 35px; line-height:35px; margin: -20px auto 30px; padding-left: 30px; padding-right: 30px; border-radius: 9px; -webkit-border-radius: 9px; -moz-border-radius: 9px; width: 400px; text-align: center } /* main logo box */ #logobox { position:absolute; width:80px;height:80px; left:-11px;top:0px; visibility:hidden; z-index: 51} * html #logobox { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ECSlogosmall.png', sizingMethod='scale') } /* --- CORNERS --- */ .tl { position:absolute; height: 29px; width: 29px; top: 0; left: 0; clip: rect(0 15px 15px 0) } .tr { position:absolute; height: 29px; width: 29px; top: 0; right: 0; clip: rect(0 29px 15px 15px) } .bl { position:absolute; height: 29px; width: 29px; bottom: 0; left: 0; clip: rect(15px 15px 29px 0px) } .br { position:absolute; height: 29px; width: 29px; bottom: 0; right: 0; clip: rect(15px 29px 29px 15px); } * html .tr { right: -1px } * html .bl { bottom: -1px; } * html .br { bottom: -1px; right: -1px } .brownfillet { background-image: url(images/brownfillet.png) } .uniyellowfillet { background-image: url(images/uniyellowfillet.png) } .uniyellow2fillet { background-image: url(images/uniyellow2fillet.png) } #festal-back .fillet1,.red1fillet { background: url(images/red1fillet.png) } #festal-back .fillet2,.red2fillet { background: url(images/red2fillet.png) } #festal-back .fillet3,.red3fillet { background: url(images/red3fillet.png) } #festal-back .fillet4,.red4fillet { background: url(images/red4fillet.png) } #festal-back .fillet5,.red5fillet { background: url(images/red5fillet.png) } #fabrics-back .fillet1,.green1fillet { background: url(images/green1fillet.png) } #fabrics-back .fillet2,.green2fillet { background: url(images/green2fillet.png) } #fabrics-back .fillet3,.green3fillet { background: url(images/green3fillet.png) } #fabrics-back .fillet4,.green4fillet { background: url(images/green4fillet.png) } #fabrics-back .fillet5,.green5fillet { background: url(images/green5fillet.png) } #books-back .fillet1,.blue1fillet { background: url(images/blue1fillet.png) } #books-back .fillet2,.blue2fillet { background: url(images/blue2fillet.png) } #books-back .fillet3,.blue3fillet { background: url(images/blue3fillet.png) } #books-back .fillet4,.blue4fillet { background: url(images/blue4fillet.png) } #books-back .fillet5,.blue5fillet { background: url(images/blue5fillet.png) } #supplies-back .fillet1,.yellow1fillet { background: url(images/yellow1fillet.png) } #supplies-back .fillet2,.yellow2fillet { background: url(images/yellow2fillet.png) } #supplies-back .fillet3,.yellow3fillet { background: url(images/yellow3fillet.png) } #supplies-back .fillet4,.yellow4fillet { background: url(images/yellow4fillet.png) } #supplies-back .fillet5,.yellow5fillet { background: url(images/yellow5fillet.png) } * html .brownfillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/brownfillet.png") } * html .uniyellow2fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/uniyellow2fillet.png") } * html #festal-back .fillet1,* html .red1fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/red1fillet.png") } * html #festal-back .fillet2,* html .red2fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/red2fillet.png") } * html #festal-back .fillet3,* html .red3fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/red3fillet.png") } * html #festal-back .fillet4,* html .red4fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/red4fillet.png") } * html #festal-back .fillet5,* html .red5fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/red5fillet.png") } * html #fabrics-back .fillet1,* html .green1fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/green1fillet.png") } * html #fabrics-back .fillet2,* html .green2fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/green2fillet.png") } * html #fabrics-back .fillet3,* html .green3fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/green3fillet.png") } * html #fabrics-back .fillet4,* html .green4fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/green4fillet.png") } * html #fabrics-back .fillet5,* html .green5fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/green5fillet.png") } * html #books-back .fillet1,* html .blue1fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/blue1fillet.png") } * html #books-back .fillet2,* html .blue2fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/blue2fillet.png") } * html #books-back .fillet3,* html .blue3fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/blue3fillet.png") } * html #books-back .fillet4,* html .blue4fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/blue4fillet.png") } * html #books-back .fillet5,* html .blue5fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/blue5fillet.png") } * html #supplies-back .fillet1,* html .yellow1fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/yellow1fillet.png") } * html #supplies-back .fillet2,* html .yellow2fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/yellow2fillet.png") } * html #supplies-back .fillet3,* html .yellow3fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/yellow3fillet.png") } * html #supplies-back .fillet4,* html .yellow4fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/yellow4fillet.png") } * html #supplies-back .fillet5,* html .yellow5fillet { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/yellow5fillet.png") } /* Mini Shopping Basket */ .minibasket-back, .minibasket-front { position:absolute; background: url(images/bskmiddle.png) repeat-x;top:13px;height:20px;left: 130px; right: 130px; text-align: center; white-space: nowrap} .minibasket-front { left:133px; right: 127px; z-index:55 } .selbottomtab .minibasket-back { left: 140px } .selbottomtab .minibasket-front { left: 143px } * html .minibasket-back, * html .minibasket-front { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bskmiddle.png", sizingMethod='crop') } /* #minibasket is the div inside
. It provides the padding. */ #minibasket { margin-left: 10px; margin-right: 32px; position: relative } /* items in the basket */ #minibasket img { position: absolute; width: 22px; height: 26px; -webkit-transition-property: left; -webkit-transition-duration: 750ms } #bskleft { width: 15px; height: 20px; position:absolute; left: -3px; top:-2px; background-image: url(images/bskleft.png)} #bskright { width: 15px; height: 20px; position:absolute; right: 0px; top:-2px; background-image: url(images/bskright.png)} * html #bskleft { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bskleft.png") } * html #bskright { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bskright.png"); right: -1px } /* Main shopping basket */ .basket-item { display: inline-block; font-size: 12px; position:relative; margin-left: 10px; width: 165px; padding-left: 65px; height: 110px; overflow:hidden; line-height: 80px; text-overflow: ellipsis; color: #340408 /* textbrown */; font-size: 0px; margin-top: 11px; vertical-align: middle; font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif; white-space: normal } .basket-imgbox { width: 60px; height: 80px; line-height: 80px; text-align: center; position: absolute; top: 0; left: 0; font-size: 0 } .basket-item img { vertical-align: middle } .basket-textbox { display: inline-block; vertical-align: middle; font-size: 10px; line-height: 136% } .basket-qty { font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif; font-size: 10px; height: 14px; width: 30px; margin: 0; padding: 0 } .qty-popup { height: 80px; width: 150px; position: absolute; background: url(images/qtypopup.png); } .qty-popup input { position: absolute; top: 19px; left: 56px} .qty-popup button { position: absolute; top: 39px; width: 50px; font-size: 11px} .qty-popup span { position: absolute; font-size: 10px; line-height: 136%; color: #340408 /* textbrown */; top: 19px; left: 11px; } .qty-cancel { left: 18px } .qty-ok { left: 74px } button.remove { position: absolute; top: 85px; left: 30px; font-size: 11px} .X { position: absolute; top:0; left: 0; z-index: 1 } .empty-basket-msg { line-height: 102px; text-align: center; font-size: 30px; color: #e6c670 /* uniyellow3 */; margin-left:102px } #basket-left, #search-left, #basket-right, #search-right { z-index: 2; cursor: pointer; position: absolute; top: 0; height: 120px; width: 27px; } #search-left, #search-right { height: 122px} #basket-left div, #search-left div, #basket-right div, #search-right div { height: 120px; width: 27px } #basket-left, #search-left { left: 0; background: url(images/uniyellowfadeleft.png) } #basket-right, #search-right { right: 0; background: url(images/uniyellowfaderight.png) } #basket-left div, #search-left div { background: url(images/arrowleft.gif) no-repeat center } #basket-right div, #search-right div { background: url(images/arrowright.gif) no-repeat center } * html #basket-left, * html #search-left { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/uniyellowfadeleft.png", sizingMethod='scale') } * html #basket-right, * html #search-right { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/uniyellowfaderight.png", sizingMethod='scale') } .adbox /*used by the search sheet*/ { height: 112px; width: 90px; display: inline-block; white-space:normal; vertical-align: top } .ad { display: inline-block; font-size: 12px; text-align: center; width: 90px; height: 112px; padding: 0 10px; overflow:hidden; line-height: 14px; text-overflow: ellipsis; vertical-align: top } .homead { height: 113px; width: 91px; padding: 30px 1px; } .ad div { width: 60px; height: 80px; line-height: 80px; text-align: center; font-size: 0; margin: auto } .ad img { vertical-align: middle } .ad:hover { color : white } .hoverer:hover #clickfor-fabrics, .hoverer:hover #clickfor-supplies, .hoverer:hover #clickfor-books, .hoverer:hover #clickfor-festal { color: white} #clickfor-festal, #clickfor-books, #clickfor-supplies, #clickfor-fabrics { padding-top:212px;text-align:center;height:23px; font-size: 15px; font-weight: normal; padding-left: 15px; padding-right: 15px; line-height: 20px; } #clickfor-festal { color: #e7b6b4 /* red4 */; } #clickfor-supplies { color: #e0c5a1 /* yellow4 */; } #clickfor-books { color: #c7ccd9 /* blue4 */; } #clickfor-fabrics { color: #b9cfc5 /* green4 */; } #festal-feature0, #books-feature0, #supplies-feature0, #fabrics-feature0 { margin:21px;height:173px;width:93px;position:absolute;top:3px;z-index:1 } #festal-feature1, #books-feature1, #supplies-feature1, #fabrics-feature1 { margin:21px;height:173px;width:93px;position:absolute;top:3px;left:116px;z-index:1 } #festal-feature2, #books-feature2, #supplies-feature2, #fabrics-feature2 { margin:21px;height:173px;width:93px;position:absolute;top:3px;left:233px;z-index:1 } /* ---------- CAT PAGES ------------ */ /* backdrops (aka column viewports) */ #festal-back, #fabrics-back, #supplies-back, #books-back { position:absolute;top:80px;left:0px;width: 100%;bottom:0; visibility:hidden; overflow: hidden } * html #festal-back, * html #fabrics-back, * html #supplies-back, * html #books-back { height:100%} /* left side back clickers */ .red-leftside, .green-leftside, .blue-leftside, .yellow-leftside { position:absolute; top:20px;left:-2px;width:27px;height:100%;z-index:100;vertical-align:middle } .red-leftside img, .green-leftside img, .blue-leftside img, .yellow-leftside img { position:absolute;top:45%;right:15px } .red-leftside { background: url(images/red1fadeleft.png) } .green-leftside { background: url(images/green1fadeleft.png) } .blue-leftside { background: url(images/blue1fadeleft.png) } .yellow-leftside { background: url(images/yellow1fadeleft.png) } /* crumbs ‘bar’ at the top of the category viewport */ .catbar { color: #fee1a2 /* textgold */; padding-left: 7px; padding-top:7px; white-space: nowrap; font-size: 10px; font-weight: bold; font-family: Arial, Helvetica, "Arial Unicode MS", sans-serif; line-height: 136%; } .catbar a { color: #fee1a2 /* textgold */ } .catbar a:hover { color: white } #sortby{ color: #fee1a2 /* textgold */; position: absolute; right: 7px; top: 87px; white-space: nowrap; z-index: 40; Font-famIly: /*OPtima*/Arial, Helvetica, "Arial Unicode MS", sans-serif; font-size: 11px } * html #sortby, * html .catbar { Font-famIly: "Arial Unicode MS", Arial, Helvetica, sans-serif } #sortby a { color: #fee1a2 /* textgold */ } #sortby a:hover { color: white } #sortby .sortsel { color: white } #festal-tab, #supplies-tab, #books-tab, #fabrics-tab { position: absolute; z-index: 10; visibility:hidden; top: 0; width: 25%; height: 35px} #festal-tab { left: 0 } #supplies-tab{ left: 25% } #fabrics-tab { left: 50% } #books-tab { right: 0 } #festal-tab .tab, #supplies-tab .tab, #books-tab .tab, #fabrics-tab .tab { position:relative; margin-right: 5px; display: block; color: #fee1a2 /* textgold */; } #festal-tab .tab { background:#790010} #fabrics-tab .tab{ background:#155f48} #supplies-tab .tab{background:#794800 } #books-tab .tab{ background:#475c7e; margin-right: 0} #festal-tab span, #supplies-tab span, #books-tab span, #fabrics-tab span { line-height: inherit; display:block; text-align: center } /* shuttles containing the columns */ #festal-shuttle, #fabrics-shuttle, #supplies-shuttle, #books-shuttle { min-width: 100%; position: absolute; right: 0; top: 38px; bottom:16px; white-space:nowrap } .shuttle-padding { width:21px; display: inline-block } /*If the following rule’s selector (‘.gollum’) is changed, the fix_gollum_heights function in stuff.js will need to be updated accordingly.*/ .gollum { white-space: normale; z-index: 5; width: 440px; height: 100%; display:inline-block; position:relative; overflow:hidden; margin-right: 21px; vertical-align: top } .clickable-gollum /* actually the link within the gollum */ { height: 100%; width: 100%; position:absolute; cursor: default } .clickable-gollum span /* sliver */ { position: absolute; width: 16px; height: 100%; right: 0; z-index: 3 } .vshuttle { position:absolute; top: 0; left: 0; width: 100%; margin: 0; list-style-type: none; padding: 0 } .vshuttle li { padding: 0; margin: 0; display: block } /* dfunnel means dark funnel; lfunnel means light; the t & b prefixes mean top&bottom */ .dfunnel, .lfunnel, .tdfunnel, .bdfunnel, .tlfunnel, .blfunnel { height: 79px; width: 21px; position: relative; top: 100px; z-index: 90; display: inline-block; left: -21px; margin-right:-21px; text-align: center; line-height: 106px; vertical-align: top } .dfunnel, .lfunnel { height: 106px; } .tdfunnel, .tlfunnel { line-height: 55px; } #festal-back .dfunnel { background: url(images/red2con.gif) } #festal-back .tdfunnel { background: url(images/red2contp.gif) } #festal-back .bdfunnel { background: url(images/red2conbt.gif) } #festal-back .lfunnel { background: url(images/red4con.gif) } #festal-back .tlfunnel { background: url(images/red4contp.gif) } #festal-back .blfunnel { background: url(images/red4conbt.gif) } #fabrics-back .dfunnel { background: url(images/green2con.gif) } #fabrics-back .tdfunnel { background: url(images/green2contp.gif) } #fabrics-back .bdfunnel { background: url(images/green2conbt.gif) } #fabrics-back .lfunnel { background: url(images/green4con.gif) } #fabrics-back .tlfunnel { background: url(images/green4contp.gif) } #fabrics-back .blfunnel { background: url(images/green4conbt.gif) } #books-back .dfunnel { background: url(images/blue2con.gif) } #books-back .tdfunnel { background: url(images/blue2contp.gif) } #books-back .bdfunnel { background: url(images/blue2conbt.gif) } #books-back .lfunnel { background: url(images/blue4con.gif) } #books-back .tlfunnel { background: url(images/blue4contp.gif) } #books-back .blfunnel { background: url(images/blue4conbt.gif) } #supplies-back .dfunnel { background: url(images/yellow2con.gif) } #supplies-back .tdfunnel { background: url(images/yellow2contp.gif) } #supplies-back .bdfunnel { background: url(images/yellow2conbt.gif) } #supplies-back .lfunnel { background: url(images/yellow4con.gif) } #supplies-back .tlfunnel { background: url(images/yellow4contp.gif) } #supplies-back .blfunnel { background: url(images/yellow4conbt.gif) } /* lozenges */ .colitem1,.colitem1sel, .colitem1sunk { position:absolute;height:37px; left: 16px; right: 16px; display: block; zoom: 100%; line-height: 9px; white-space: nowrap } .colitem1sel { width:424px } .colitem1 .name, .colitem1sel .name, .colitem1sunk .name { font-family: Optima, "Trebuchet MS"; font-size: 13px; padding-top: 8px; display: inline-block; /* to fix the clipping in IE 7: */ position:relative; top: -4px; line-height:17px} .colitem1 .descr, .colitem1sel .descr, .colitem1sunk .descr { font-style: italic; font-size: 9px; color: #000; position:relative; top:-6px; line-height:13px; white-space: nowrap } .colitem1 img, .colitem1sel img, .colitem1sunk img { float: left; height: 35px; width: 28px; margin: 1px 10px 1px 13px } .colitem1 .price, .colitem1sel .price, .colitem1 .count, .colitem1sunk .count { font-family: Optima, "Trebuchet MS"; font-size: 13px; font-weight: bold; display: block; position: absolute; right: 10px; top: -3px; padding-top: 8px; line-height:15px } .colitem1sel .price { right: 26px } .colitem1sel .tr, .colitem1sel .br { display: none } .colitem1 .count, .colitem1sunk .count { font-weight: normal } img.special { height: auto; width: auto; position:absolute; left: 280px; top: -3px; z-index: 1 } img.new { height: auto; width: auto; position:absolute; left: 280px; top: -7px; z-index: 1 } #festal-back .gollum { background: #cd7d7b /* red2 */ } #festal-back .colitem1 { background: #dfa29f /* red3 */ } #festal-back .colitem1sel, #festal-back .rightmost { background: #e7b6b4 /* red4 */ } #fabrics-back .gollum { background: #87ad9c /* green2 */ } #fabrics-back .colitem1 { background: #a6c3b7 /* green3 */ } #fabrics-back .colitem1sel, #fabrics-back .rightmost { background: #b9cfc5 /* green4 */ } #books-back .gollum { background: #9da9bd /* blue2 */ } #books-back .colitem1 { background: #b9bfcf /* blue3 */ } #books-back .colitem1sel, #books-back .rightmost { background: #c7ccd9 /* blue4 */ } #supplies-back .gollum { background: #c59d5d /* yellow2 */ } #supplies-back .colitem1 { background: #d7b789 /* yellow3 */ } #supplies-back .colitem1sel, #supplies-back .rightmost { background: #e0c5a1 /* yellow4 */ } #festal-back .colitem1sunk { background: url(images/fadebackr.gif) } #books-back .colitem1sunk { background: url(images/fadebackb.gif) } #supplies-back .colitem1sunk { background: url(images/fadebacky.gif) } #fabrics-back .colitem1sunk { background: url(images/fadebackg.gif) } .fadeon, .fadeoff { z-index: 2; cursor: pointer; position:absolute; left: 0; height: 27px; width: 440px; color: #340408 /* textbrown */; text-align: center; font: 12px/18px "Arial Unicode MS", Arial, Helvetica, sans-serif } .fadeon { top:0; } .fadeoff { bottom:0; } /* Firefox hack (the span is not clickable within a split second after its innerHTML is set: */ .fadeon div, .fadeoff div { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; } #festal-back .fadeoff { background: url(images/red2fadebt.png); } #fabrics-back .fadeoff { background: url(images/green2fadebt.png); } #books-back .fadeoff { background: url(images/blue2fadebt.png); } #supplies-back .fadeoff { background: url(images/yellow2fadebt.png); } * html #festal-back .fadeoff { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/red2fadebt.png", sizingMethod='scale') } * html #fabrics-back .fadeoff { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/green2fadebt.png", sizingMethod='scale') } * html #books-back .fadeoff { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/blue2fadebt.png", sizingMethod='scale') } * html #supplies-back .fadeoff { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/yellow2fadebt.png", sizingMethod='scale') } #festal-back .fadeon { background: url(images/red2fadetp.png); } #fabrics-back .fadeon { background: url(images/green2fadetp.png); } #books-back .fadeon { background: url(images/blue2fadetp.png); } #supplies-back .fadeon { background: url(images/yellow2fadetp.png); } * html #festal-back .fadeon { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/red2fadetp.png", sizingMethod='scale') } * html #fabrics-back .fadeon { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/green2fadetp.png", sizingMethod='scale') } * html #books-back .fadeon { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/blue2fadetp.png", sizingMethod='scale') } * html #supplies-back .fadeon { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/yellow2fadetp.png", sizingMethod='scale') } .gollum .fillet1 { z-index: 3 } /* ITEM COLUMNS */ .item-bg { position:absolute; top: 12px; bottom: 12px; left: 16px; right: 16px; white-space: normal; overflow:hidden } #festal-back .item-bg, #festal-back .circumulellorator-section { background: #efd3d3 /* red5 */ } #supplies-back .item-bg, #supplies-back .circumulellorator-section { background: #eadbc7 /* yellow5 */ } #books-back .item-bg, #books-back .circumulellorator-section { background: #dde0e7 /* blue5 */ } #fabrics-back .item-bg, #fabrics-back .circumulellorator-section { background: #d4e0db /* green5 */ } .img-box { float:left; margin-left: 18px; margin-top: 14px; margin-right: 10px; white-space: nowrap; text-align: center; margin-bottom: 10px } .img-box img { position: relative;margin-bottom: 14px } .img-box .enlarge { display: block; font-size: 10px; margin-top: -15px; margin-bottom: -10px} .item-bg .price { font-weight: bold; font-size: 23px; font-family: Optima, "Trebuchet MS"; color: #ff1d59 /* textred */; line-height:136% } .item-bg .currency { font-size: 10px } .item-bg .listprice { font-style: italic; font-size: 12px } .pricenote { font-size: 10px; margin-top: .5em; white-space: normal; width: 150px; line-height: 136% } .item-bg h3 { font-family: Optima, "Trebuchet MS"; font-size: 17px; margin: 0 18px 5px 7px; padding-top:14px /* We use padding, not margin, as it affects the measurements for showing and hiding the ‘Read more...’ link. */ } h4 { font-style: italic; font-size: 12px; line-height: 136%; margin: 0 0 5px; font-weight: normal } .info { font-size: 12px; line-height: 136%; margin: 0 7px 5px } .item-bg .descr { font-size: 12px; line-height: 136%; text-indent: 20px; margin: 0 7px 0 15px } .read-more { position:absolute; left: 0; right:7px; display:none; text-align:right } .read-more1 { bottom: 220px } .read-more2 { bottom: 252px } #festal-back .read-more { background: url(images/red5fade.png) } #supplies-back .read-more { background: url(images/yellow5fade.png) } #books-back .read-more { background: url(images/blue5fade.png) } #fabrics-back .read-more { background: url(images/green5fade.png) } .circumulellorator { overflow: auto; position: absolute; width: 100%; bottom: 30px; height: 254px; left:0 } ._2-sect-cmul { height: 222px } ._1-sect-cmul { height: 190px } .circumulellorator-section { height: 190px; } .circumulellorator-title{ height: 30px; font-size: 14px; font-weight: bold; padding-left: 15px; padding-right: 15px; color: #340408 /* textbrown */; line-height: 30px; font-family: Optima, "Trebuchet MS" } #festal-back .circumulellorator-title, #festal-back .circumulellorator-footer { background: #f2e1e2 /* red6 */ } #supplies-back .circumulellorator-title,#supplies-back .circumulellorator-footer { background: #f0e6da /* yellow6 */ } #books-back .circumulellorator-title, #books-back .circumulellorator-footer { background: #e7e9ec /* blue6 */ } #fabrics-back .circumulellorator-title, #fabrics-back .circumulellorator-footer { background: #e2e9e5 /* green6 */ } .circumulellorator-footer { height: 30px; bottom: 0; width: 100%; position: absolute; left: 0 } .qty { margin-left: 30px; height: 100px; position: absolute; top: 61px; width: 180px} .add { position: absolute; top: 61px;left:220px; } .add button { font-size: 14px; height: 100px; width: 140px; line-height: auto; } .add img { margin-top:0px} #body .add button:hover { background: white; color: #340408 /* textbrown */ } #festal-back .add button, #festal-back .add button:active { background: #f2e1e2 /* red6 */ } #fabrics-back .add button, #fabrics-back .add button:active { background: #e2e9e5 /* green6 */ } #supplies-back .add button, #supplies-back .add button:active { background: #f0e6da /* yellow6 */ } #books-back .add button, #books-back .add button:active { background: #e7e9ec /* blue6 */ } .ordernote { font-size: 12px; margin: 10px } p.media { padding: 15px 15px 0px; margin:0 } ul.media { padding: 0px 15px 15px 30px; margin:0 } /* POPUPS */ .popup-back { height: 100%; width: 100%; position: absolute; top:0;left:0; z-index:100} .popup-back td { text-align: center } div.popup-shadow { padding:20px; display:inline-block; position:relative; } img.popup-shadow { top:0;left:0;position:absolute;height:100%;width:100% } .popup { -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; position:relative; width: 550px; height:100% } .popup-margin { overflow:auto; position:absolute; top: 10px; right:10px; left:10px; bottom:60px; text-align:left } .festal.popup { background: #efd3d3 /* red5 */ } .supplies.popup { background: #eadbc7 /* yellow5 */ } .fabrics.popup { background: #d4e0db /* green5 */ } .books.popup { background: #dde0e7 /* blue5 */ } .festal.popup button { background: #f2e1e2 /* red6 */ } .supplies.popup button { background: #f0e6da /* yellow6 */ } .fabrics.popup button { background: #e2e9e5 /* green6 */ } .books.popup button { background: #e7e9ec /* blue6 */ } div.popup-button { text-align: center; width: 100%; position: absolute; bottom: 20px } .popup button:hover { background: white } .popup button {} #browser { background: #d5b45e /* uniyellow */; width: 400px; margin: 75px auto -35px; padding:10px; }