/* * Zenn Web Agency (C) 2011 http://www.zenn.pt */ /****************************************************************** RESET CSS ******************************************************************/ body, img, input, p, h1, h2, h3, input, fieldset, textarea { margin: 0; padding: 0; border: 0; resize: none; } a { text-decoration: none; } input[type=submit] { cursor: pointer; } *:focus { outline: none;} ::selection { color: #fafafa; background: #183E43; /* Safari */ } ::-moz-selection{ color: #fafafa; background: #183E43; /* Firefox */ } /****************************************************************** General Html ******************************************************************/ body { font-family: Arial; font-size: 0.8em; } a { color: #3E95A0; outline: none; -webkit-transition: color 0.15s ease-in; -moz-transition: color 0.15s ease-in; } a:hover { color: #77C1CA; outline: none; } /* jQuery autocomplete */ .ui-menu-item {font-size:0.75em;} /****************************************************************** Master Page Structure ******************************************************************/ .Wrapper { width: 1000px; margin: auto; position: relative; } #Header { height: 188px; background: url('images/back-top.png') 0 0 repeat-x; } #Header .Wrapper { height: 187px; } #Header .Logo { width: 440px; height: 153px; background: url('images/stripes.png') 0 0 no-repeat; display: inline-block; margin-top: 15px; } #Header .UserPanel { width: 185px; height: 60px; position: absolute; right: 0px; top: 43px; } #Login {} #Login .LogoutBtn { padding: 2px 5px; background: #333; color: #fff; border-radius: 3px; } #LoginForm { position: relative; width: 290px; position: absolute; left: -230px; top: 0px; opacity: 0; filter:alpha(opacity=0); } #LoginForm label { width: 65px; color: #317279; display: inline-block; } #LoginForm input { width: 160px; height: 25px; border: 1px solid #D4ECEF; color: #444; text-indent: 5px; border-radius: 3px; } #LoginPassword { margin-top: 5px; } #LoginForm .Actions { margin-top: 4px; position: relative; } #LoginForm .Actions .Status { width: 167px; text-align: right; color: #cc0000; height: 20px; line-height: 20px; vertical-align: middle; display: none; position: absolute; left: 0px; top: 3px; } input#LoginSubmit { width: 60px; color: #fff; background: #444; border: none; text-indent: 0; vertical-align: middle; display: inline-block; position: absolute; right: 59px; top: 1px; } input#LoginSubmit:hover { opacity: 0.8; filter:alpha(opacity=80); } input#LoginSubmit:active { opacity: 1; filter:alpha(opacity=100); } #Header .UserPanel .Line-v { width: 1px; height: 56px; background: url('images/stripes.png') -440px 0px no-repeat; margin-right: 4px; display: inline-block; vertical-align: middle; } #Header .UserPanel .Right { display: inline-block; vertical-align: middle; } #Header .UserPanel .Admin {display:block; padding:5px 0px 5px 0px;color: #3E95A0; font-weight:bold; } #Header .UserPanel .Link { color: #3E95A0; cursor: pointer; } #Header .UserPanel .Link:hover { color: #77C1CA; } #MasterCart .CartIcon, #Login .UserIcon, #MasterCart .AddUserIcon { margin-right: 5px; } #Login { margin: 5px 0; } #Login .Link:hover .UserIcon { background: url(images/stripes.png) -441px -52px no-repeat; } #MasterCart .Link:hover .CartIcon { background: url(images/stripes.png) -441px -73px no-repeat; } #MasterCart .Link:hover .AddUserIcon { background: url(images/stripes.png) -660px -52px no-repeat;} #Header .Menu { height: 40px; line-height: 37px; position: absolute; right: 0px; bottom: 0px; border-top-left-radius: 3px; border-top-right-radius: 3px; } #Header .Menu a { height: 30px; line-height: 30px; padding: 0 7px; color: #D0EBEE; text-shadow: -1px -1px #358791; margin: 0 5px 0 3px; vertical-align: middle; display: inline-block; } #Header .Menu a:hover { color: #fff; text-shadow: 1px 1px 7px #fff; } #Header .Menu a:active, #Header .Menu a.On { border-radius: 3px; border-top: 1px solid #276169; text-shadow: 1px 1px 7px #fff; border-bottom: 1px solid #59B8C6; background: #317d88; /* Old browsers */ background: -moz-linear-gradient(top, #317d88 0%, #42afbe 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#317d88), color-stop(100%,#42afbe)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #317d88 0%,#42afbe 100%); /* Chrome10+,Safari5.1+ */ } #Header .Menu a .HomeIcon, #Header .Menu a .PuzzleIcon, #Header .Menu a .CatalogueIcon, #Header .Menu a .EmailIcon { margin-right: 5px; } #Header .Menu a:hover .HomeIcon {background: url(images/stripes.png) -470px -22px no-repeat;} #Header .Menu a:hover .PuzzleIcon {background: url(images/stripes.png) -486px -22px no-repeat;} #Header .Menu a:hover .CatalogueIcon {background: url(images/stripes.png) -506px -22px no-repeat;} #Header .Menu a:hover .EmailIcon {background: url(images/stripes.png) -526px -22px no-repeat;} #Header .Menu a span { vertical-align: middle; } #Header .Menu .Sep { width: 2px; height: 22px; background: url(images/stripes.png) -467px 0px no-repeat; display: inline-block; vertical-align: middle; margin-left: 2px; } #Main { min-height: 305px; position: relative; } #Main .Content-Top-Rep { width: 100%; height: 60px; background: url(images/content-top-rep.png) 0px 0px repeat-x; position: absolute; left: 0px; top: 0px; } #Main .Wrapper { } #Main .Blue-Rep { width: 100%; height: 6px; background: url(images/blue-rep.png) 0px 0px repeat-x; } #Footer { margin: 25px 0; } #Footer .Left, #Footer .Right { width: 49.5%; display: inline-block; vertical-align: top; } #Footer .Right { text-align: right; margin-left: 4px; } #Footer .Top { height: 36px; line-height: 36px; background: #333; opacity: 0.9; filter:alpha(opacity=90); border-radius: 3px; padding: 0 5px; } #Footer .Top a { text-shadow: -1px -1px #000; color: #D7D7D7; margin: 0 6px; } #Footer .Top a:hover { text-shadow: -1px -1px 10px #fff; } #Footer .Bottom { margin-top: 8px; color: #999; } #Footer .Bottom .DevelopedBy { width: 50px; height: 12px; opacity: 0.7; filter:alpha(opacity=70); background: url(images/stripes.png) -441px -40px no-repeat; display: inline-block; float: right; } #Footer .Bottom .DevelopedBy:hover { opacity: 0.9; filter:alpha(opacity=90); } /****************************************************************** Pages Structure ****************************************************************** /* Home */ #HomeAdminBanners {margin:0px auto 0px auto; width:1000px; position:relative; } #HomeAdminBanners .AdminCmsBtn {position:absolute; top:5px;} #Home { position: relative; } #HomeSlider { width: 100%; height: 305px; position: absolute; left: 0px; top: 0px; overflow: hidden; } #HomeSlider .Thumbs { height: 300px; overflow: hidden; text-align: center; } #HomeSlider .Thumbs .Item { display: inline-block; text-align: center; position: relative; left: 50%; } #HomeSlider .Thumbs .Item img { display: inline-block; margin-left: -100%; } #HomeSlider .Navigation { width: 100%; position: absolute; bottom: 10px; left: 0px; text-align: center; } #Home .BlueTop { position: absolute; top: 306px; } #Home .Welcome { height: 300px; position: relative; } #Home .Welcome .Message { display: inline-block; position: absolute; left: 30px; top: 70px; } #Home .Message .Title { font-size: 1.8em; padding: 2px 6px; font-family: 'Mako', Arial; color: #fff; font-weight: normal; text-transform: uppercase; text-shadow: 2px 2px 4px #000000; } #Home .Message .Title:hover { background: url("images/black-alpha.png") repeat scroll 0 0 transparent; color: #3E95A0; border-radius: 3px; } #Home .Message .Text { width: 400px; padding: 8px; margin-top: 3px; background: url(images/black-alpha.png) 0 0 repeat; color: #CCCCCC; text-shadow: -1px -1px #000; border-radius: 3px;display: block; margin-bottom: 3px; } #Home .Message h2 { color: #DE384D; font-family: 'Mako', Arial; font-weight: normal; } #Home .Socials { width: 185px; height: 30px; text-align: center; line-height:26px; background: url(images/black-alpha-20.png) 0 0 repeat; padding: 0 10px; color: #333; border-radius: 3px; } #Home .Socials span { display: inline-block; vertical-align: middle; } #Home .Socials .Twitter { width: 100px; text-align: center; } #Home .Socials .FacebookIcon { width: 16px; height: 16px; background: url(images/stripes.png) -469px -114px repeat; display: inline-block; vertical-align: middle; } #Home .Socials .GooglePlus { width: 60px; text-align: center; } .Search { width: 400px; height: 40px; background: url(images/black-alpha-20.png) 0 0 repeat; border-radius: 3px; position: relative; position: absolute; right: 23px; top: 10px; } .Search .Value { width: 390px; height: 28px; line-height: 28px; margin: 5px; *margin: 4px 0 0 0 ; text-indent: 5px; color: #666; background: #f7f7f7; border: 1px solid #000; border-radius: 3px; } .Search .SubmitBtn { width: 85px; height: 26px; background: #DE384D; color: #fff; text-shadow: -1px -1px #97202B; border-radius: 3px; position: absolute; right: 6px; top: 7px; } .Search .SubmitBtn:hover { opacity: 0.7; filter:alpha(opacity=70); } .Search .SubmitBtn:active { opacity: 1; filter:alpha(opacity=100); } #FeaturedProducts { margin-top: 40px; height: 347px; position: relative; } #FeaturedProducts .Shadow { width: 999px; height: 30px; background: url(images/stripes.png) 0px -155px repeat; text-align: center; position: relative; } #FeaturedProducts h1 { width: 1000px; font-family: 'Mako', Arial; font-size: 1.45em; font-weight: normal; letter-spacing: -0.5px; text-transform: uppercase; color: #2D7079; position: absolute; top: -9px; left: 0px; } #FeaturedProducts .SeeAll { padding: 4px 5px; background: white; border-bottom: 1px solid #DCE2E4; position: absolute; right: 45px; top: -8px; border-radius: 3px; } #FeaturedProducts .SeeAll .ArrowRight { width: 11px; height: 10px; background: url(images/stripes.png) -549px -23px repeat; display: inline-block; vertical-align: middle; margin-left: 5px; } #FeaturedProducts .SeeAll:active { background: #3E95A0; color: #fff; border-bottom: 1px solid #30737A; } #FeaturedProducts .Thumbs { width: 100%; margin: 10px 0 25px 0; height: 245px; display: inline-block; position: relative; overflow: hidden; text-align: center; } .Product { width: 235px; height: 245px; background: #202020; border-radius: 3px; display: inline-block; margin: 0 6px; } .Product:hover { background: #3E3E3E; } .Product:hover .Name { color: #fff; } .Product:active { background: #202020; } .Product .Image { width: 227px; height: 170px; text-align: center; line-height: 170px; background: #fff; border-radius: 2px; margin: 4px; vertical-align: middle; } .Product .Image img { vertical-align: middle; } .Product .Image span { display: inline-block; } .Product .Description { position: relative; } .Product .Description .Reference { background: #fff; border-top-right-radius: 2px; position: absolute; left: 4px; top: -24px; padding: 2px 5px; } .Product .Description .Name { width: 165px; height: 63px; line-height: 63px; margin-left: 5px; display: inline-block; float: left; text-align: left; } .Product .Description .Name .Text { vertical-align: middle; line-height: normal; display: inline-block; } .Product .Description .Name span { display: inline-block; } .Product .Description .Price { width: 91px; height: 71px; display: inline-block; position: absolute; right: -13px; top: 1px; } .Product .Description .Price .Old { color: #999; text-decoration: line-through; font-size: 1.2em; width: 75px; margin-bottom: -5px; text-align: center; display: block; } .Product .Description .Price .New { width: 91px; height: 52px; text-indent: -7px; text-shadow: 1px 1px #ededed; color: #333333; font-size: 1.3em; letter-spacing: -1px; line-height: 52px; text-align: center; display: inline-block; background: url(images/stripes.png) -569px 0px no-repeat; } .Product .Description .Price .New strong { font-weight: normal; } #FeaturedProducts .Navigation { } .Bullet { width: 10px; height: 10px; background: url(images/stripes.png) -549px -32px repeat; margin: 0 5px; display: inline-block; cursor: pointer; } .Bullet:hover { opacity: 0.7; filter:alpha(opacity=70); } .Bullet:active { opacity: 1; filter:alpha(opacity=100); } .Bullet.On { background: url(images/stripes.png) -559px -13px repeat; cursor: default; } .Bullet.On:hover { opacity: 1; filter:alpha(opacity=100); } #FeaturedProducts .Shadow.Nav { position: absolute; bottom: 0px; left: 0px; } #Home .Brands { height: 35px; position: relative; text-align: center; line-height: normal; margin-top: 10px; } #Home .Brands img { margin: 0 25px; display: inline-block; vertical-align: middle; } /* AlterBanner */ #AlterBanner { } #AlterBannerSlider { position: relative; overflow: hidden; height: 120px; } #AlterBannerSlider .Thumbs .Item { display: inline-block; text-align: center; position: relative; left: 50%; } #AlterBannerSlider .Thumbs .Item img { display: inline-block; margin-left: -100%; *margin-left: -57%; } #AlterBanner .Wrapper { height: 120px; margin-top: -120px; } #AlterBanner .Content { position: absolute; top: 35px; left: -20px; opacity: 0; filter:alpha(opacity=0); } #BreadCrumb { margin-bottom: -2px; font-size: 0.85em; color: #DE384D; margin-left: 2px; } #BreadCrumb a { color: #DE384D; } #BreadCrumb a:hover { color: #E87180; } #AlterBanner h1 { font-family: 'Mako', Arial; font-size: 2.4em; color: #fff; text-shadow: 2px 2px 4px #000000; font-weight: normal; text-transform: uppercase; } #AlterBanner .Search { width: 427px; top: 40px; right: 10px; } #AlterBanner .Search .Value { width: 417px; } /* Content */ #Content { position:relative; } .BlueTop { width: 100%; height: 48px; background: url(images/content-top-rep.png) 0px 0px repeat; margin-top: 0px; position: absolute; } #Content .Admin { position:absolute; top:10px; left:10px; } #Content .Text { width: 979px; display: inline-block; vertical-align: top; padding: 10px 10px 0; color: #555; margin-top: 27px; } #Content .Text p { margin-bottom: 15px; } #ContentSlider { width: 425px; height: 258px; position: relative; background: #A3D6DD; display: none; vertical-align: top; float: right; margin-left: 10px; border-radius: 3px; margin-bottom: 20px; } #ContentSlider .Thumbs { width: 409px; display: inline-block; padding: 4px; position: absolute; left: 4px; top: 4px; } #ContentSlider .Item { background: white; width: 417px; height: 250px; display: inline-block; text-align: center; line-height: 250px; } #ContentSlider .Item img { vertical-align: middle; } #ContentSlider .Item span { display: inline-block; } #ContentSlider .Navigation { width: 100%; text-align: center; margin-top: 5px; position: absolute; bottom: -20px; left: 0px; } /** Notices **/ #Notices { margin: 20px 0; position: relative; } #Notices > .Top { width: 1020px; height: 54px; background: url('images/stripes.png') 0px 0px no-repeat; margin-left: -10px; position: relative; z-index: 1; margin-bottom: -10px; } #Notices > .Top h1 { position: absolute; left: 50px; top: 9px; color: #FCFAF3; text-shadow: -1px -1px #597B2B; font-size: 1.7em; } #Notices > .Middle { width: 878px; min-height: 500px; background: white; border-left: 1px solid #F5ECD3; border-right: 1px solid #F5ECD3; padding: 0 30px 1px 30px; margin-left: 30px; } #Notices .NoticesList { padding-top: 15px; } #Notices .Notice { background: #fff; border-radius: 2px; padding: 8px; margin-bottom: 15px; border: 1px solid #ededed; } #Notices .Notice.Open { background: #F7F5F2; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1) inset; border: 1px solid #ccc; } #Notices .Notice.Open .Title { color: #3E95A0; } #Notices .Notice.Open .Date { color: #666; } #Notices .Notice.Open:hover { cursor: default; } #Notices .Notice.Open .CloseBtn { text-align: center; display: inline-block; } #Notices .Notice.Open .CloseBtn:hover { background: #DE384D; color: #fff; } #Notices .Notice:hover { background: #F7F5F2; cursor: pointer; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1) inset; border: 1px solid #ccc; } #Notices .Notice > .Top {position:relative;} #Notices .Notice .CloseBtn { width: 16px; height: 16px; color: #666; border-radius: 8px; text-align: center; line-height: 14px; cursor: pointer; display: none; position: absolute; right: 2px; top: 0px; background: white; } #Notices .Notice > .Top > .Admin {position:absolute; top:0px; right:15px; font-size:0.95em;} #Notices .Notice .Title { font-family: 'Mako', Arial; color: #3F7E2D; color: #B29951; color: #333; font-size: 1.8em; letter-spacing: -1px; font-weight: normal; } #Notices .Notice .Date { color: #DE384D; margin-top: -3px; } #Notices .Notice > .Middle { margin-top: 5px; } #Notices .Notice .NoticeShort { color: #666; text-shadow: 1px 1px #fff; margin-top: 5px; display: block; } #Notices .Notice .NoticeFull { color: #666; display: none; margin-top: 5px; background: white; padding: 10px; border-radius: 2px; line-height: 18px; } #Notices > .Bottom { width: 940px; height: 15px; background: url('images/stripes.png') 0px -242px no-repeat; margin-left: 30px; } /* Contacts */ #Contacts { position: relative; } #Contacts a { color: #3E95A0; } #Contacts a:hover { color: #DE384D; } #Contacts .Wrapper { padding-top: 35px; } #Contacts .Left, #Contacts .Right { width: 49%; display: inline-block; vertical-align: top; } #Contacts .Left { margin-left: 8px; margin-right: 60px; } #ContactForm { width: 427px; } #ContactForm input { margin-top: 8px; } #ContactForm textarea { font-family: Arial; font-size: 0.9em; height: 75px; margin-top: 8px; } #Contacts .Right { width: 300px; } #Contacts .Right .Title { margin-bottom: 10px; display: inline-block; } #Contacts h2 { font-family: 'Mako', Arial; font-size: 1.4em; font-weight: normal; text-transform: uppercase; } #ContactMapWrapper { width: 427px; height: 470px; border-radius: 3px; border: 1px solid #3E95A0; } #Contacts .Contacts {} /* Product-Index */ #Product-Index { padding-top: 30px; } #SideBar { width: 190px; border-radius: 3px; text-shadow: 1px 1px white; padding: 9px 5px; display: inline-block; vertical-align: top; } #SideBar h1 { color: #fff; font-family: 'Mako', Arial; text-shadow: -1px -1px #2E6F78; text-transform: uppercase; font-weight: normal; text-indent: 5px; text-align: left; padding: 8px 0; } #SideBar a, #SideBar .Button { width: 180px; cursor: pointer; color: #C6E6EA; display: block; text-shadow: -1px -1px #276169; padding: 9px 0; text-indent: 5px; border-radius: 3px; margin: 2px 0 5px 5px; } #SideBar a:hover, #SideBar a.On, #SideBar .Button:hover, #SideBar .Button.Selected { color: #1D4045; text-shadow: 1px 1px #DCEFF1; border-top: 1px solid #DEF1F3; padding: 7px 0 8px 0; margin: 4px 0 5px 5px; background: #BFE2E7; } #SideBar .Button.Selected { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } #SideBar a:active, #SideBar .Button:Active { box-shadow:inset 0 2px 10px -2px #000000; border-top: 1px solid #276169; color: #FFFFFF; text-shadow: -1px -1px #2B6A73; background: #388894; /* Old browsers */ background: -moz-linear-gradient(top, #43a3b1 0%, #337d88 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43a3b1), color-stop(100%,#337d88)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #43a3b1 0%,#337d88 100%); /* Chrome10+,Safari5.1+ */ } #SideBar .All { color: #1D3F45; text-shadow: 1px 1px #ADDAE0; width: 190px; height: 18px; line-height: 18px; padding-left: 10px; position: relative; margin: 5px 0 -8px -5px; background: #aedbe1; /* Old browsers */ background: -moz-linear-gradient(top, #aedbe1 0%, #8bc1c7 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aedbe1), color-stop(100%,#8bc1c7)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #aedbe1 0%,#8bc1c7 100%); /* Chrome10+,Safari5.1+ */ } #SideBar .All:hover, #SideBar .All.On { width: 190px; padding-left: 10px; height: 20px; line-height: 20px; background: #ACD9E0; margin: 5px 0 -8px -5px; } #SideBar .All:active { color: #1D3F45; text-shadow: 1px 1px #C8E6EA; box-shadow:inset 0 2px 10px -2px rgba(0, 0, 0, 0.5); } #SideBar .All .Icon { width: 15px; height: 16px; background: url('images/stripes.png') -660px -72px no-repeat; display: inline-block; position: absolute; right: 10px; top: 10px; } #SideBar .All.On .Icon { background: url('images/stripes.png') -660px -88px no-repeat; } #SideBar .All:hover .Icon { top: 9px; } #SideBar .All.On:hover .Icon { top: 10px; } #SideBar .Category { width: 180px; position: relative; margin-bottom: 4px; } #SideBar .SubCategory { width: 180px; display: none; background: #BFE2E7; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; margin: -5px 5px 0 5px; *margin-top: -10px; padding-bottom: 1px; } #SideBar .Category .Button { margin-bottom: 0px; } #SideBar .Category .Control { width: 9px; height: 9px; position: absolute; top: 13px; right: 0px; } #SideBar .Category .Control.Open { background: url(images/stripes.png) -543px -42px repeat; } #SideBar .Category .Control.Close { background: url(images/stripes.png) -552px -42px repeat; } #SideBar .SubCategory a { color: #1D4045; width: 170px; text-shadow: 1px 1px #DCEFF1; margin-bottom: 4px; border-bottom: 1px solid transparent; } #SideBar .SubCategory a:hover { background: #fff; text-shadow: none; box-shadow: none; border-bottom: 1px solid #9CD2DA; border-top: 1px solid transparent; } #SideBar .SubCategory a:active { background: #fff; box-shadow: none; border-top: 1px solid #9CD2DA; border-bottom: 1px solid transparent; } #SideBar .Sep { width: 180px; height: 3px; background: url(images/stripes.png) -700px -48px repeat; margin-left: 5px; } /* Top */ #Product-Index .Top { height: 45px; position: relative; line-height: normal; padding: 0 7px; } #Product-Index .Top h1 { font-family: 'Mako', Arial; color: #333; text-transform: uppercase; letter-spacing: -0.5px; font-weight: normal; } #ProductOrder { min-width: 150px; height: 20px; position: absolute; right: 9px; top: 3px; color: #fff; background: #555; border: none; padding: 5px; border-radius: 2px; } /* Middle */ #Product-Index .ProductList { width: 768px; display: inline-block; vertical-align: top; margin-left: 27px; } #Product-Index .ProductList .Middle { margin-bottom: -20px; } #Product-Index .ProductList a.Product { background: #333; margin: 0; margin-bottom: 29px; margin: 0 9px 29px 9px; *margin: 0 10px 29px 10px; } #Product-Index .ProductList a.Product:hover { background: #666; } #Product-Index .ProductList .Product .ReferenceEquiv { display: none; } #Product-Index .ProductList .Product .DescriptionText { display: none; } #Product-Index .ProductList .Product .Brand { display: none; } /* List View */ #Product-Index .ProductListTable { width: 750px; border: 1px solid #B0D4D8; margin: 10px 0; margin-left: 9px; } #Product-Index .ProductListTable thead { height: 30px; line-height: 30px; background: #DCEFF2; color: #1D3F45; } #Product-Index .ProductListTable td { text-align: center; padding: 5px 0; } #Product-Index .ProductListTable thead .Reference { width: 120px; color: #337D88; text-align: center; } #Product-Index .ProductListTable .Reference { color: #666; text-align: left; } #Product-Index .ProductListTable .Name { width: 400px; text-align: left; } #Product-Index .ProductListTable .Name p { text-align: left; } #Product-Index .ProductListTable .Name p.Description { color: #666; } #Product-Index .ProductListTable thead .ReferenceEquiv { color: #337D88; } #Product-Index .ProductListTable .ReferenceEquiv {color: #666; } #Product-Index .ProductListTable .Brand { color: #337D88; } #Product-Index .ProductListTable .Odd { background: #f1f1f1; } #Product-Index .ProductListTable tbody tr:hover { background: #DCEFF2; border: solid; } #Product-Index .ProductListTable tbody tr:hover .Reference { color: #337D88; } #Product-Index .ProductListTable tbody tr .MoreInfo { width: 15px; height: 15px; display: inline-block; vertical-align: middle; margin: 0 6px; } #Product-Index .ProductListTable tbody tr:hover .MoreInfo {background: url('images/stripes.png') -685px -32px no-repeat; cursor: pointer; } #Product-Index .ProductListTable tbody tr:hover .Name p { color: #337D88; } #Product-Index .ProductListTable tbody tr:hover .RefereceEquiv {color: #337D88; } #Product-Index .ProductList.List { } #Product-Index .ProductList.List .Middle { margin-bottom: 5px; } #Product-Index .ProductList.List .Product:first-child { border-top-left-radius: 2px; border-top-right-radius: 2px; } #Product-Index .ProductList.List .Product:last-child { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } #Product-Index .ProductList .Head { display: none; } #Product-Index .ProductList.List .Product.Head { display: block; height: 30px; line-height: 30px; background: #DCEFF2; } #Product-Index .ProductList.List .Product.Head span { color: #000; line-height: 30px; color: #1D3F45; } #Product-Index .ProductList.List .Product { background: #fff; border: 1px solid #B0D4D8; display: block; width: 749px; height: 40px; border-radius: 0px; margin: 0 9px; margin-bottom: -1px; } #Product-Index .ProductList.List .Product span { vertical-align: middle; } #Product-Index .ProductList.List .Product:hover { background: #DCEFF2; } #Product-Index .ProductList.List .Product:hover .Price .New { color: #fff; text-shadow: none; background: #409DAA; } #Product-Index .ProductList.List .Product .Image { display: none; } #Product-Index .ProductList.List .Product .Description { width: 100%; display: inline-block; height: auto; } #Product-Index .ProductList.List .Product .Reference { width: 100px; font-size: 0.9em; background: none; position: absolute; top: 0; text-align: center; display: inline-block; vertical-align: middle; color: #337D88; text-align: center; padding: 0;} #Product-Index .ProductList.List .Product .Name { width: 415px; font-size: 0.9em; height: auto; line-height: normal; color: #333333; margin-left: 120px; } #Product-Index .ProductList.List .Product .Name .Text { margin-top: 10px; } #Product-Index .ProductList.List .Product .Name .DescriptionText { display: block; color: #999; } #Product-Index .ProductList.List .Product .ReferenceEquiv { color: #666; width: 110px; display: inline-block; text-align: center; } #Product-Index .ProductList.List .Product .DescriptionText { display: none; } #Product-Index .ProductList.List .Product .Brand { width: 100px; color: #337D88; display: inline-block; text-align: center; } #Product-Index .ProductList.List .Product .Price { display: none; background: #DCEFF2; border-left: 1px solid #B0D4D8; height: 50px; width: 180px; top: 0; right: 0; padding-left: 3px; } #Product-Index .ProductList.List .Product .Price .Old { width: 50px; display: inline-block; margin-bottom: -10px; margin-top: 5px; } #Product-Index .ProductList.List .Product .Price .New { background: none; display: inline-block; width: 65px; text-indent: 0; height: 24px; border-radius: 2px; color: #337D88; text-align: center; text-shadow: none; line-height: 24px; text-shadow: 1px 1px white; margin: 12px 0px; } #Product-Index .ProductList .Product .AddToCart { display:none; } #Product-Index .ProductList.List .Product .AddToCart { width: 110px; position: absolute; right: 0px; top: 4px; display:block;} #Product-Index .ProductList.List .Product .AddToCart label { color: #44A7B5; font-size: 0.8em; display:block; } #Product-Index .ProductList.List .Product .AddToCartQuantity { width: 56px; height: 23px; line-height: 23px; text-align: center; padding: 0px; text-indent: 0; } #Product-Index .ProductList.List .Product .AddToCartSubmit { width: 40px; height: 30px; background: url('images/stripes.png') -525px -63px no-repeat; position: absolute; right: 6px; top: 7px; } #Product-Index .ProductList.List .Product .AddToCartSubmit:hover { background: url('images/stripes.png') -485px -94px no-repeat; } #Product-Index .ProductList.List .Product .AddToCartSubmit:active { background: url('images/stripes.png') -525px -94px no-repeat; } /* Bottom */ #Navigation { width: 100%; text-align: center; padding: 5px 0; margin-top: 20px; } #Navigation a { width: 19px; height: 19px; display: inline-block; vertical-align: middle; line-height: 19px; text-align:center; margin: 0 5px; } #Navigation a.On, #Navigation a:hover { background: #51858C; border-radius: 2px; color: #fff; cursor: pointer; } #Navigation a:active { opacity: 0.7; filter:alpha(opacity=70); } #Navigation .NavPrev { width: 11px; height: 17px; background: url(images/stripes.png) -532px -41px repeat; } #Navigation .NavPrev:hover { background: url(images/stripes.png) -532px -41px repeat; } #Navigation .NavNext { width: 11px; height: 17px; background: url(images/stripes.png) -521px -41px repeat; } #Navigation .NavNext:hover { background: url(images/stripes.png) -521px -41px repeat; } /* Product-Detail */ #Product-Detail { width: 768px; display: inline-block; margin-left: 18px; } #Product-Detail .Top { padding: 0; } #Product-Detail .Top h1 { display: inline; vertical-align: middle; } #Product-Detail .Top h2 { font-weight: normal; display: inline; vertical-align: middle; font-size: 1.3em; } #Product-Detail .Middle { } #Detail { border: 1px solid #B5DBE1; border-radius: 2px; } #Detail .Left { width: 450px; vertical-align: top; display: inline-block; border-right: 1px solid #D4ECEF; } #DetailSlider { height: 280px; position: relative; } #DetailSlider .Thumbs { height: 250px; } #DetailSlider .Thumbs .Item { width: 100%; display: inline-block; height: 250px; line-height: 250px; text-align: center; position: relative; } #DetailSlider .Thumbs .Item img { vertical-align: middle; } #DetailSlider .Thumbs .Item .ZoomIcon { position: absolute; right: 10px; bottom: -20px; z-index: 10; cursor: pointer; } #DetailSlider .Thumbs .Item ._block { display: inline-block; } #DetailSlider .Navigation { height: 30px; text-align: center; line-height: 30px; } #Detail .Right { width: 250px; vertical-align: top; display: inline-block; padding: 6px; } #Detail .Right h1 { width: 295px; font-family: 'Mako', Arial; font-weight: normal; font-size: 1.6em; line-height: 30px; letter-spacing: -1px; color: #2E6F78; padding-bottom: 8px; border-bottom: 1px solid #D4ECEF; } #Detail .Right .Description { padding: 8px 0; color: #555; } #Detail .Bottom { height: 45px; border-top: 1px solid #B5DBE1; } #Detail .Bottom .Left { width: 442px; height: 45px; padding-left: 8px; line-height: 45px; color: #666; background: #DCEFF2; text-shadow: 1px 1px #F5FBFC; display: inline-block; border-right: 1px solid #B5DBE1 } #Detail label { color: #317279; } #Detail .Bottom .Right { width: 303px; height: 33px; background: #C0E2E7; margin-left: -4px; position: relative; } #Detail .Bottom .Right .Price { width: 185px; height: 60px; display: inline-block; position: absolute; left: -78px; top: -5px; *left: 71px; } #Detail .Bottom .Right .Price .Old { color: #666; text-decoration: line-through; font-size: 1.2em; width: 75px; margin-bottom: -5px; text-align: center; display: inline-block; } #Detail .Bottom .Right .Price .New { width: 91px; height: 52px; text-indent: -7px; text-shadow: -1px -1px #2F7279; color: #fff; font-size: 1.3em; letter-spacing: -1px; line-height: 52px; text-align: center; display: inline-block; background: url(images/stripes.png) -569px -60px no-repeat; } #Detail .Bottom .Right .Price .New strong { font-weight: normal; } #Detail .Bottom .Right .Sep { width: 2px; height: 23px; background: url(images/stripes.png) -565px -53px no-repeat; display: inline-block; position: absolute; left: 140px; top: 10px; } #Detail .Bottom .Right .Actions { width: 140px; position: absolute; right: 0px; top: 5px; } #AddToCartForm { height: 32px; margin-top: 2px; } #ToCartQuantity { width: 57px; height: 30px; line-height: 30px; text-align:center; color: #317279; background: url(images/stripes.png) -468px -63px no-repeat; } #AddToCart { width: 40px; height: 30px; background: url(images/stripes.png) -525px -63px no-repeat; border-radius: 2px; } #AddToCart:hover { background: url(images/stripes.png) -485px -94px no-repeat; } #AddToCart:active { background: url(images/stripes.png) -525px -94px no-repeat; } #AddToCartForm .Status {position:absolute; top:6px; left:-25px; } /* Related Products */ #RelatedProducts { position: relative; height: 320px; } #RelatedProducts h1 { margin: 20px 0; padding: 4px 0; padding-left: 7px; background: #D4ECEF; color: #2C7079; font-family: 'Mako', Arial; font-size: 1.3em; font-weight: normal; text-shadow: 1px 1px #F5FBFC; text-transform: uppercase; border-radius: 2px; border: 1px solid #B1D4D8; } #RelatedProducts .Thumbs { position: relative; z-index: 5; } #RelatedProducts .Item { display: inline-block; } #RelatedProducts .Sep { width: 1px; background: url(images/stripes.png) -999px 0px repeat; } #RelatedProducts .Navigation { width: 100%; height: 20px; position: absolute; top: 160px; } #RelatedProducts .Navigation .NavPrev { position: absolute; left: -15px; top: 3px; cursor: pointer; width: 11px; height: 17px; background: url(images/stripes.png) -532px -41px repeat; } #RelatedProducts .Navigation .NavPrev:hover { opacity: 0.7; filter:alpha(opacity=70); background: url(images/stripes.png) -532px -41px repeat; } #RelatedProducts .Navigation .NavNext { position: absolute; right: -15px; top: 3px; cursor: pointer; width: 11px; height: 17px; background: url(images/stripes.png) -521px -41px repeat; } #RelatedProducts .Navigation .NavNext:hover { opacity: 0.7; filter:alpha(opacity=70); } /* Account-Dashboard */ #Account-Dashboard .Wrapper { padding: 15px 0; } #Account-Dashboard h1 { font-family: 'Mako', Arial; font-size: 2em; font-weight: normal; text-transform: uppercase; } #Account-Dashboard label { display: block; margin: 8px 0; font-weight: bold; } #Account-Dashboard .Actions { margin-top: 20px; } #Account-Dashboard .Actions input[type="submit"] { padding: 4px 5px; background: #333; color: #fff; border-radius: 3px; } #Account-Dashboard .Actions input[type="submit"]:hover { opacity: 0.7; filter:alpha(opacity=70); } #Account-Dashboard .Actions input[type="submit"]:active { opacity: 1; filter:alpha(opacity=100); background: #3E95A0; } #Account-Dashboard .Required { color: #666; margin-top: 20px; } #OrdersData, #CustomerData { width: 49%; display: inline-block; vertical-align: top; } #OrdersData { margin-left: 10px; } #OrdersData .Datatable { margin-top: 10px; } .AccountTables { width: 100%; display: inline-block;border-collapse:collapse } .AccountTables td { width: 115px; text-align: center; } .AccountTables .Date { width: 165px; } .AccountTables thead { color: #999; text-shadow: 1px 1px white; } .AccountTables thead { height: 30px; line-height: 20x; } .AccountTables thead tr td { background: #eee; } .AccountTables thead td:first-child { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .AccountTables thead td:last-child { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .AccountTables tbody { color: #666; } .AccountTables tbody tr { height: 30px; } .AccountTables tbody tr:hover { cursor: pointer; } .AccountTables tbody tr:nth-child(even) { background: #f7f7f7; } .AccountTables tbody tr:nth-child(odd) { background: #fff; } .AccountTables tbody tr:hover { background: #D0EBEE; color: #3E95A0; text-shadow: 1px 1px #E6F4F7; } /* Account-Basket */ #Account-Basket .Wrapper { padding: 15px 0; } #Account-Basket .Full {} #Account-Basket .Full .Tabs { text-align: center; margin-top: 10px; } #Account-Basket .Full .Tabs > .Tab { width: 295px; height: 34px; line-height: 34px; cursor: pointer; color: #fff; background: url(images/stripes.png) -700px -52px no-repeat; display: inline-block; } #Account-Basket .Full .Tabs > .Tab:hover { opacity: 0.7; filter:alpha(opacity=70); } #Account-Basket .Full .Tabs > .Tab:active, #Account-Basket .Full .Tab.Selected { opacity: 1; filter:alpha(opacity=100); border-radius: 3px; text-shadow: 1px 1px 7px #fff; background: url(images/stripes.png) -700px -86px no-repeat; } #Account-Basket .Full .Tab.Center { margin: 0 50px; } #Account-Basket .TabsFrame {} #Account-Basket .TabsFrame div {} #Account-Basket .TabsFrame div h1 { font-family: 'Mako', Arial; font-size: 1.8em; margin: 10px 0; font-weight: normal; text-transform: uppercase; } #Account-Basket .TabCart {} #OrderCart .Delete { width: 65px; } #OrderCart .CartProduct { width: 600px; text-align: left; } #OrderCart .Quantity { width: 60px; } #OrderCart .Quantity input { width: 60px; text-indent: 0; } #Account-Basket .InvoiceTab {} #Account-Basket .InvoiceTab label { display: block; margin: 8px 0; font-weight: bold; } #Account-Basket .DeliverData, #Account-Basket .InvoiceData { width: 49%; display: inline-block; vertical-align: top; } #Account-Basket .Required { color: #666; margin-top: 20px; } #Account-Basket .PaymentTab {} #Account-Basket .PaymentTab h2 { font-size: 1.3em; margin: 8px 0; } #OrderPaymentOptions { margin-bottom: 10px; } #TabsNavigation { text-align: center; margin: 25px 0; } #OrderBtn { background: #3E95A0; } #OrderBtn:over { opacity: 0.7; filter:alpha(opacity=70); } #OrderBtn:active { opacity: 1; filter:alpha(opacity=100); } /* Account-MyOrder */ #Account-MyOrder .Wrapper { padding: 15px 0; } #Account-MyOrder .Title { background: none repeat scroll 0 0 #3E95A0; color: #FFFFFF; text-indent: 5px; font-size: 1.1em; height: 25px; line-height: 25px; margin: 5px 0 11px; text-transform: uppercase; } #Account-MyOrder .Address .Title { width: 495px; text-indent: 5px; } #Account-MyOrder .Products { width: 100%; } #Account-MyOrder .Back a { color: #3E95A0; font-size: 0.9em; margin: 0; } #Account-MyOrder .Back a:hover { opacity: 0.7; } #Account-MyOrder .Status { color: #333333; font-size: 0.9em; margin: 10px 0; text-indent: 3px; } #Account-MyOrder .Status b { color: #3E95A0; } /* Account-Register */ #Account-Register {} #Account-Register h1 { font-family: 'Mako', Arial; font-size: 1.8em; margin: 10px 0; font-weight: normal; text-transform: uppercase; } #Account-Register label { display: block; margin: 8px 0; font-weight: bold; } #Account-Register .Create, #Account-Register .Recover .Recover { width: 49%; display: inline-block; vertical-align: top; } #Account-Register .Actions { height: 30px; line-height: 30px; margin-top: 10px; } #Account-Register .Required { color: #666; margin-top: 20px; } /****************************************************************** Elements /*****************************************************************/ .Btn { padding: 4px 5px; background: #333; color: #fff; border-radius: 3px; cursor: pointer; } .Btn:hover { opacity: 0.7; filter:alpha(opacity=70); } .Btn:active { opacity: 1; filter:alpha(opacity=100); background: #3E95A0; } .UserIcon { width: 26px; height: 21px; background: url(images/stripes.png) -441px 0px no-repeat; display: inline-block; vertical-align: middle; } .UserIcon:hover { background: url(images/stripes.png) -441px -52px no-repeat; } .AddUserIcon { width: 26px; height: 20px; background: url(images/stripes.png) -660px -31px no-repeat; display: inline-block; vertical-align: middle; } .AddUserIcon:hover { background: url(images/stripes.png) -660px -51px no-repeat; } .CartIcon { width: 26px; height: 19px; background: url(images/stripes.png) -441px -21px no-repeat; display: inline-block; vertical-align: middle; } .CartIcon:hover { background: url(images/stripes.png) -441px -73px no-repeat; } .HomeIcon { width: 16px; height: 18px; background: url(images/stripes.png) -470px -1px no-repeat; display: inline-block; vertical-align: middle; } .HomeIcon:hover, .HomeIcon.On { background: url(images/stripes.png) -470px -22px no-repeat; } .PuzzleIcon { width: 19px; height: 19px; background: url(images/stripes.png) -486px -1px no-repeat; display: inline-block; vertical-align: middle; } .PuzzleIcon:hover, .PuzzleIcon.On { background: url(images/stripes.png) -486px -22px no-repeat; } .CatalogueIcon { width: 20px; height: 19px; background: url(images/stripes.png) -506px -1px no-repeat; display: inline-block; vertical-align: middle; } .CatalogueIcon:hover, .CatalogueIcon.On { background: url(images/stripes.png) -506px -22px no-repeat; } .EmailIcon { width: 21px; height: 15px; background: url(images/stripes.png) -526px -1px no-repeat; display: inline-block; vertical-align: middle; } .EmailIcon:hover, .EmailIcon.On { background: url(images/stripes.png) -526px -22px no-repeat; } .ZoomIcon { width: 20px; height: 20px; background: url(images/stripes.png) -465px -94px no-repeat; display: inline-block; vertical-align: middle; } .ZoomIcon:hover { opacity: 0.8; filter:alpha(opacity=80); } .ZoomIcon:active { opacity: 1; filter:alpha(opacity=100); } input[type="text"], input[type="password"], textarea { line-height: 28px; border: 1px solid #ccc; border-radius: 3px; text-indent: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; } input[type="text"]:focus, input[type="password"]:focus, textarea:focus { color: #3E95A0; border: 1px solid #3E95A0; } .IptSmallGrey { width: 150px; height: 28px; } .IptMediumGrey { width: 250px; height: 28px; } .IptBigGrey { width: 350px; height: 70px; } .DeleteBtn { width: 15px; height: 15px; background: url(images/stripes.png) -661px -72px no-repeat; display: inline-block; vertical-align: middle; } /****************************************************************** CSS Gradients /*****************************************************************/ .grad-blue-lightblue { background: #3D9DA9; /* Old browsers */ background: -moz-linear-gradient(top, #42afbe 0%, #3b949f 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#42afbe), color-stop(100%,#3b949f)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #42afbe 0%,#3b949f 100%); /* Chrome10+,Safari5.1+ */ } .grad-blie-darkblue { background: #317d88; /* Old browsers */ background: -moz-linear-gradient(top, #317d88 0%, #42afbe 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#317d88), color-stop(100%,#42afbe)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #317d88 0%,#42afbe 100%); /* Chrome10+,Safari5.1+ */ } .grad-darkblue-darkblue { background: #388894; /* Old browsers */ background: -moz-linear-gradient(top, #43a3b1 0%, #337d88 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43a3b1), color-stop(100%,#337d88)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #43a3b1 0%,#337d88 100%); /* Chrome10+,Safari5.1+ */ } /****************************************************************** ZENN CMS /*****************************************************************/ #TitlePage { display:none; } /* Admin Controls */ .AdminCmsBtn { cursor:pointer; font-family:Tahoma, Verdana; font-weight:bold; font-size:0.9em; color:#A7743B; z-index:99; display:inline-block; margin-right:10px;} .AdminCmsBtn img { vertical-align:middle;} .Icon { display:inline-block; vertical-align:middle;} .Icon-Picture {background:url(images/backoffice/icons.png) no-repeat 0px 0px; width:24px; height:20px;} .Icon-Edit {background:url(images/backoffice/icons.png) no-repeat -25px 0px; width:20px; height:20px;} .Icon-Edit-Small {background:url(images/backoffice/icons.png) no-repeat -101px -26px; width:17px; height:17px;} .Icon-Download {background:url(images/backoffice/icons.png) no-repeat -50px 0px; width:19px; height:20px;} .Icon-Add {background:url(images/backoffice/icons.png) no-repeat -75px 0px; width:19px; height:20px;} .Icon-Add-Small {background:url(images/backoffice/icons.png) no-repeat 0px -25px; width:16px; height:17px;} .Icon-Delete {background:url(images/backoffice/icons.png) no-repeat -100px 0px; width:20px; height:20px;} .Icon-Email-Send {background:url(images/backoffice/icons.png) no-repeat -25px -25px; width:21px; height:20px;} .Icon-True {background:url(images/backoffice/icons.png) no-repeat -50px -25px; width:20px; height:20px;} .Icon-False {background:url(images/backoffice/icons.png) no-repeat -75px -25px; width:20px; height:20px;} .Icon-Users {background:url(images/backoffice/icons.png) no-repeat -100px -25px; width:20px; height:20px;} .Icon-UserEdit {background:url(images/backoffice/icons.png) no-repeat 0px -50px; width:20px; height:20px;} .Icon-UserDelete {background:url(images/backoffice/icons.png) no-repeat -25px -50px; width:20px; height:20px;} .Icon-Details {background:url(images/backoffice/icons.png) no-repeat -25px -47px; width:21px; height:20px;} .Icon-Highlight {width:21px; height:21px;} .Icon-Highlight.On {background:url(images/backoffice/icons.png) no-repeat 0px -89px;} .Icon-Highlight.Off {background:url(images/backoffice/icons.png) no-repeat -25px -89px;} /* Smiles */ .Smile { display:inline-block; vertical-align:middle;} .Smile-Crap {background:url(images/backoffice/smiles.png) no-repeat 0px 0px; width:19px; height:18px;} .Smile-Thumbup {background:url(images/backoffice/smiles.png) no-repeat 0px -53px; width:26px; height:18px;} .PopUpMsg { padding:30px 10px 30px 10px; font-size:12px;} #PopUpQuestionYes, #PopUpQuestionNo {text-decoration:none; cursor:pointer; display:inline-block; padding: 2px 3px; color:#555; background:#E6E6E6;border:1px solid; border-color: #ebebeb #d4d4d4 #d4d4d4 #ebebeb; font-family:Tahoma, Verdana; font-size:11px; font-weight:bold;} /* FACEBOX */ #facebox .b { background:url(images/facebox/b.png); } #facebox .tl { background:url(images/facebox/tl.png); } #facebox .tr { background:url(images/facebox/tr.png); } #facebox .bl { background:url(images/facebox/bl.png); } #facebox .br { background:url(images/facebox/br.png); } #facebox { position: absolute; top: 0; left: 0; z-index: 100; text-align: left; } #facebox .popup { position: relative; } #facebox table { border-collapse: collapse; } #facebox td { border-bottom: 0; padding: 0; } #facebox .body { padding: 10px; background: #fff; width: 370px; } #facebox .loading { text-align: center; } #facebox .image { text-align: center; } #facebox img { border: 0; margin: 0; } #facebox .footer { /*border-top: 1px solid #DDDDDD; padding-top: 5px; margin-top: 10px;*/ text-align: right; } #facebox .close { position:absolute; top:10px; right:15px; display:block; background:url(images/facebox/closelabel.gif); width:17px; height:22px; cursor:pointer;} #facebox .tl, #facebox .tr, #facebox .bl, #facebox .br { height: 10px; width: 10px; overflow: hidden; padding: 0; } #facebox_overlay { position: fixed; top: 0px; left: 0px; height:100%; width:100%; } .facebox_hide { z-index:-100; } .facebox_overlayBG { background-color: #000; z-index: 99; } * html #facebox_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); }