/* Global Helpers and Basic Reset */ *{ margin: 0; padding: 0; text-align: left; } .clear{ clear: both; } .right{ text-align: right; } .left{ text-align: left; } .center{ text-align: center; } .justify{ text-align: justify; } .floatRight{ float: right; } .floatLeft{ float: left; } a{ color: #666; text-decoration: none; outline: none; } a:hover{ color: #004eff; text-decoration: underline; } /* Layout */ html{ background: #149145 url( ../_graphics/background_tileX.png ) center top repeat-x; } body{ background: url( ../_graphics/backgroundWithJournal.jpg ) center top no-repeat; color: #67563e; font: normal 62.5% "Trebuchet MS", Arial, Verdana, sans-serif; text-align: center; padding: 142px 0 0 0; } #header { position: absolute; left: 50%; top: 20px; height: 142px; } a#gtkheader, a#gtkheaderfr { position: absolute; left: -410px; display: block; width: 360px; height: 142px; text-indent: -9999px; background: url('../_graphics/title_getToKnow.png') no-repeat; } a#gtkheaderfr{ background: url('../_graphics/title_faitesConnaissance.png') no-repeat; } h1#bbheader{ position: absolute; left: 50px; display: block; width: 360px; height: 142px; text-indent: -9999px; background: url('../_graphics/title_BioBlitz.png') no-repeat; } div#fieldJournal{ display: block; width: 932px; height: 730px; margin: 15px auto 0; position: relative; } div#fieldJournal.debug{ background-color: aqua; opacity: 0.7; } /* Main Menu */ ul#mainMenu{ list-style: none; position: absolute; left: 200px; top: 8px; display: block; width: 234px; height: 218px; background: url( ../_graphics/stickyNote.png ) no-repeat; } ul#mainMenu li{ display: block; float: left; position: absolute; top: 35px; left: 18px; width: 182px; height: 33px; background-repeat: no-repeat; background-position: 0 0; } ul#mainMenu li a{ display: block; width: 182px; height: 33px; } ul#mainMenu li a:hover, ul#mainMenu li a:active { background-position: 0 -33px; } ul#mainMenu li.current a{ background-position: 0 -66px; cursor: default; } /* Button: Welcome */ ul#mainMenu li#item_welcome, ul#mainMenu li#item_bienvenue { top: 35px; } ul#mainMenu li#item_welcome a{ background-image: url( ../_graphics/button_welcome.png ); text-indent: -9999px; } ul#mainMenu li#item_bienvenue a{ background-image: url( ../_graphics/button_bienvenue.png ); text-indent: -9999px; } /* Button: Locations */ ul#mainMenu li#item_locations, ul#mainMenu li#item_lieux { top: 70px; } ul#mainMenu li#item_locations a{ background-image: url( ../_graphics/button_locations.png ); text-indent: -9999px; } ul#mainMenu li#item_lieux a{ background-image: url( ../_graphics/button_lieux.png ); text-indent: -9999px; } /* Button: Gallery */ ul#mainMenu li#item_gallery, ul#mainMenu li#item_galerie{ top: 105px; } ul#mainMenu li#item_gallery a{ background-image: url( ../_graphics/button_gallery.png ); text-indent: -9999px; } ul#mainMenu li#item_galerie a{ background-image: url( ../_graphics/button_galerie.png ); text-indent: -9999px; } /* Button: Share your Photos */ ul#mainMenu li#item_share, ul#mainMenu li#item_partagez { top: 152px; width: 200px; height: 47px; } ul#mainMenu li#item_share a{ background-image: url( ../_graphics/button_share.png ); text-indent: -9999px; height: 47px; width: 200px; } ul#mainMenu li#item_share a:hover, ul#mainMenu li#item_share a:active { background-position: 0 -47px; } ul#mainMenu li#item_share.current a{ background-position: 0 -94px; cursor: default; } ul#mainMenu li#item_partagez a{ background-image: url( ../_graphics/button_partagez.png ); text-indent: -9999px; height: 47px; width: 200px; } ul#mainMenu li#item_partagez a:hover, ul#mainMenu li#item_partagez a:active { background-position: 0 -47px; } ul#mainMenu li#item_partagez.current a{ background-position: 0 -94px; cursor: default; } /* When is it? */ div#whenIsIt{ display: block; width: 396px; height: 294px; background: url( ../_graphics/whenIsIt.jpg ) no-repeat; position: absolute; top: 275px; left: 50px; } div#whenIsIt *{ display: none; } div#whenIsItFR{ display: block; width: 396px; height: 294px; background: url( ../_graphics/whenIsIt-fr.jpg ) no-repeat; position: absolute; top: 275px; left: 50px; } div#whenIsItFR *{ display: none; } /* Download Support Material */ div#downloads{ display: block; width: 382px; height: 145px; position: absolute; top: 523px; left: 63px; } div#downloads h3{ display: block; width: 377px; height: 36px; text-indent: -9999px; background: url( ../_graphics/header_downloads.jpg ) no-repeat; } div#downloads a#button_leadersGuide{ display: block; width: 89px; height: 110px; background: url( ../_graphics/button_leadersGuide.jpg ) no-repeat 0 0; text-indent: -9999px; float: left; } div#downloads a#button_leadersGuide:hover{ background-position: -89px 0; } div#downloads a#button_fieldJournal{ display: block; width: 110px; height: 110px; background: url( ../_graphics/button_fieldJournal.jpg ) no-repeat 0 0; text-indent: -9999px; float: left; margin-left: 17px; } div#downloads a#button_fieldJournal:hover{ background-position: -110px 0; } div#downloads a#button_promotionalMaterial{ display: block; width: 147px; height: 110px; background: url( ../_graphics/button_promotionalMaterial.jpg ) no-repeat 0 0; text-indent: -9999px; float: left; } div#downloads a#button_promotionalMaterial:hover{ background-position: -147px 0; } div#downloads.fr h3{ background-image: url( ../_graphics/header_telechargements.jpg ); } div#downloads.fr a#button_leadersGuide{ background-image: url( ../_graphics/button_guideAnimateurs.jpg ); } div#downloads.fr a#button_fieldJournal{ background-image: url( ../_graphics/button_journalDebord.png ); } div#downloads.fr a#button_promotionalMaterial{ background-image: url( ../_graphics/button_materielpromotion.jpg ); } /* Page Content */ div.pageContent{ display: block; width: 376px; height: 620px; position: absolute; top: 44px; left: 500px; line-height: 1.3em; } div.pageContent .optionBar{ display: block; width: 374px; height: 46px; background: url( ../_graphics/optionBar.png ) no-repeat; line-height: 48px; padding-left: 20px; margin-bottom: 18px; } div.pageContent .optionBar select{ width: 280px; margin-left: 5px; } div.pageContent .optionBar select:focus{ outline: none; } div.pageContent img { border: 0 none; /* fix IE border default */ } /* Footer */ div#footer{ margin:0 auto; padding-left:80px; font-size:14px; width:130px; height:30px; } /* Welcome Page */ div#welcome{ font-size: 1.3em; } div#welcome h2{ display: block; width: 99px; height: 30px; background: url( ../_graphics/header_welcome.png ) no-repeat; text-indent: -9999px; margin-bottom: 18px; } div#welcome h3.underline{ border-bottom: 1px #c7ab69 dotted; padding-bottom: 4px; margin-bottom: 7px; padding-top: 15px; } div#welcome p{ margin-bottom: 10px; text-align: justify; } div#welcome #batemanQuote{ position: relative; padding-top: 0px; padding-left: 130px; } div#welcome #batemanQuote #batemanTape{ display: block; width: 143px; height: 182px; background: url( ../_graphics/batemanTape.png ) no-repeat; position: absolute; top: 0; left: -20px; float: left; } div#welcome #batemanQuote h4{ color: #42600c; } div#welcome #batemanQuote p{ font-size: 0.88em; line-height: 1.4em; font-style: italic; } /* Bienvenue Page */ div#bienvenue{ font-size: 1.3em; } div#bienvenue h2{ display: block; width: 99px; height: 30px; /*background: url( ../_graphics/header_welcome.png ) no-repeat; text-indent: -9999px; */ margin-bottom: 18px; } div#bienvenue h3.underline{ border-bottom: 1px #c7ab69 dotted; padding-bottom: 4px; margin-bottom: 7px; padding-top: 15px; } div#bienvenue p{ margin-bottom: 10px; text-align: justify; } /* Locations Page */ div#locations{ font-size: 1.3em; width: 386px; } div#locations h2#locationsHeader{ display: block; width: 183px; height: 44px; background: url( ../_graphics/header_locations.png ) no-repeat; text-indent: -9999px; margin-bottom: 0px; } div#locations div#locationHelper{ position: relative; height: 550px; overflow: hidden; } div#locations div#locationHelper div#bottomFade{ position: absolute; bottom: 0; left: 0; width: 360px; height: 13px; background: url( ../_graphics/bottomLocationFade.png ) no-repeat; } div#locations div#locationHelper div#topFade{ position: absolute; top: 0; left: 0; width: 360px; height: 13px; background: url( ../_graphics/topLocationFade.png ) no-repeat; } div#locations div#locationList{ position: relative; overflow-y: scroll; height: 540px; padding-top: 10px; } div#locations div.locationEntry{ width: 340px; margin-bottom: 20px; padding: 6px 10px 0; min-height: 10px; background: url( ../_graphics/locationsBackground.png ) repeat-y; position: relative; } div#locations div.locationEntry h4{ color: #000; } div#locations div.locationEntry ul{ margin: 8px 0 0 20px; padding-bottom: 5px; } div#locations div.locationEntry hr{ border-top: 1px #dbcca3 dotted; border-bottom: 0; margin-bottom: 8px; } div#locations div.locationEntry p.viewLocation{ margin-left: 20px; } div#locations div.locationEntry p.viewLocation a{ color: #1156ab; } div#locations div.locationEntry div.topCornerSet{ width: 360px; height: 6px; background: url( ../_graphics/locationCorners.png ) no-repeat 0 0; position: absolute; top: -6px; left: 0; } div#locations div.locationEntry div.bottomCornerSet{ width: 360px; height: 6px; background: url( ../_graphics/locationCorners.png ) no-repeat 0 -6px; position: absolute; bottom: -6px; left: 0; } div#locations a { text-decoration: underline; color: #67563e; } div#locations a:hover { color: #004eff; } div#locations p { margin: 6px 0; } /* Lieux Page */ div#lieux{ font-size: 1.3em; width: 386px; } /*div#lieux h2#locationsHeader{ display: block; width: 109px; height: 34px; background: url( ../_graphics/header_locations.png ) no-repeat; text-indent: -9999px; margin-bottom: 8px; }*/ div#lieux div#locationHelper{ position: relative; height: 590px; overflow: hidden; } div#lieux div#locationHelper div#bottomFade{ position: absolute; bottom: 0; left: 0; width: 360px; height: 13px; background: url( ../_graphics/bottomLocationFade.png ) no-repeat; } div#lieux div#locationHelper div#topFade{ position: absolute; top: 0; left: 0; width: 360px; height: 13px; background: url( ../_graphics/topLocationFade.png ) no-repeat; } div#lieux div#locationList{ position: relative; overflow-y: scroll; height: 580px; padding-top: 10px; } div#lieux div.locationEntry{ width: 340px; margin-bottom: 20px; padding: 6px 10px 0; min-height: 10px; background: url( ../_graphics/locationsBackground.png ) repeat-y; position: relative; } div#lieux div.locationEntry h4{ color: #000; } div#lieux div.locationEntry ul{ margin: 8px 0 0 20px; padding-bottom: 5px; } div#lieux div.locationEntry hr{ border-top: 1px #dbcca3 dotted; border-bottom: 0; margin-bottom: 8px; } div#lieux div.locationEntry p.viewLocation{ margin-left: 20px; } div#lieux div.locationEntry p.viewLocation a{ color: #1156ab; } div#lieux div.locationEntry div.topCornerSet{ width: 360px; height: 6px; background: url( ../_graphics/locationCorners.png ) no-repeat 0 0; position: absolute; top: -6px; left: 0; } div#lieux div.locationEntry div.bottomCornerSet{ width: 360px; height: 6px; background: url( ../_graphics/locationCorners.png ) no-repeat 0 -6px; position: absolute; bottom: -6px; left: 0; } div#lieux a { text-decoration: underline; color: #67563e; } div#lieux a:hover { color: #004eff; } div#lieux p { margin: 6px 0; } /* Gallery Page */ div#gallery{ font-size: 1.3em; } div#gallery h2{ margin-bottom: 18px; } div#gallery a.button_previousImages{ display: block; float: left; width: 23px; height: 76px; background: url( ../_graphics/button_imageNav.png ) no-repeat 0 0; text-indent: -9999px; visibility: hidden; } div#gallery a.button_previousImages:hover{ background-position: -23px 0; } div#gallery a.button_previousImages:active{ background-position: -46px 0; } div#gallery a.button_previousImages.visible{ visibility: visible; } div#gallery a.button_nextImages{ display: block; float: left; width: 23px; height: 76px; background: url( ../_graphics/button_imageNav.png ) no-repeat -115px 0; text-indent: -9999px; } div#gallery a.button_nextImages:hover{ background-position: -92px 0; } div#gallery a.button_nextImages:active{ background-position: -69px 0; } div#gallery a.button_nextImages.hidden{ visibility: hidden; } div#gallery ul#thumbnailBrowser{ list-style: none; overflow: hidden; display: block; width: 328px; height: 76px; float: left; margin-bottom: 20px; position: relative; } div#gallery ul#thumbnailBrowser li{ position: absolute; top: 0; left: 0; display: block; } div#gallery ul#thumbnailBrowser li a.blitzPhoto{ display: block; width: 76px; height: 76px; background-color: #fff; } div#gallery ul#thumbnailBrowser li a.blitzPhoto span{ display: none; width: 74px; height: 74px; background: #fff url( ../_graphics/ajax-loader.gif ) no-repeat center center; border: 1px #cebc9c solid; } div#gallery ul#thumbnailBrowser li a.blitzPhoto.loading span{ display: block; } div#gallery ul#thumbnailBrowser li a.blitzPhoto img{ display: block; width: 70px; height: 70px; padding: 2px; border: 1px #cebc9c solid; } div#gallery ul#thumbnailBrowser li a.blitzPhoto:hover img{ border: 1px #9b7f4d solid; } div#gallery div.userSubmission{ position: relative; clear: both; } div#gallery div.userSubmission div.currentThumbArrow{ display: block; width: 20px; height: 10px; position: absolute; top: -9px; left: 56px; background: url( ../_graphics/thumbArrow.png ) no-repeat; } div#gallery div.userSubmission.secondEntry div.currentThumbArrow{ left: 137px; } div#gallery div.userSubmission.thirdEntry div.currentThumbArrow{ left: 215px; } div#gallery div.userSubmission.fourthEntry div.currentThumbArrow{ left: 298px; } div#gallery a#midPreview{ display: block; width: 374px; min-height: 100px; max-height: 340px; margin-bottom: 15px; } div#gallery a#midPreview img{ display: block; margin: 0 auto; max-width: 362px; min-height: 100px; background-color: #fff; max-height: 330px; padding: 5px; border: 1px #cebc9c solid; } div#galerie{ font-size: 1.3em; } div#galerie h2{ display: block; width: 84px; height: 34px; background: url( ../_graphics/header_gallery.png ) no-repeat; text-indent: -9999px; margin-bottom: 18px; } div#galerie a.button_previousImages{ display: block; float: left; width: 23px; height: 76px; background: url( ../_graphics/button_imageNav.png ) no-repeat 0 0; text-indent: -9999px; visibility: hidden; } div#galerie a.button_previousImages:hover{ background-position: -23px 0; } div#galerie a.button_previousImages:active{ background-position: -46px 0; } div#galerie a.button_previousImages.visible{ visibility: visible; } div#galerie a.button_nextImages{ display: block; float: left; width: 23px; height: 76px; background: url( ../_graphics/button_imageNav.png ) no-repeat -115px 0; text-indent: -9999px; } div#galerie a.button_nextImages:hover{ background-position: -92px 0; } div#galerie a.button_nextImages:active{ background-position: -69px 0; } div#galerie a.button_nextImages.hidden{ visibility: hidden; } div#galerie ul#thumbnailBrowser{ list-style: none; overflow: hidden; display: block; width: 328px; height: 76px; float: left; margin-bottom: 20px; position: relative; } div#galerie ul#thumbnailBrowser li{ position: absolute; top: 0; left: 0; display: block; } div#galerie ul#thumbnailBrowser li a.blitzPhoto{ display: block; width: 76px; height: 76px; background-color: #fff; } div#galerie ul#thumbnailBrowser li a.blitzPhoto span{ display: none; width: 74px; height: 74px; background: #fff url( ../_graphics/ajax-loader.gif ) no-repeat center center; border: 1px #cebc9c solid; } div#galerie ul#thumbnailBrowser li a.blitzPhoto.loading span{ display: block; } div#galerie ul#thumbnailBrowser li a.blitzPhoto img{ display: block; width: 70px; height: 70px; padding: 2px; border: 1px #cebc9c solid; } div#galerie ul#thumbnailBrowser li a.blitzPhoto:hover img{ border: 1px #9b7f4d solid; } div#galerie div.userSubmission{ position: relative; clear: both; } div#galerie div.userSubmission div.currentThumbArrow{ display: block; width: 20px; height: 10px; position: absolute; top: -9px; left: 56px; background: url( ../_graphics/thumbArrow.png ) no-repeat; } div#galerie div.userSubmission.secondEntry div.currentThumbArrow{ left: 137px; } div#galerie div.userSubmission.thirdEntry div.currentThumbArrow{ left: 215px; } div#galerie div.userSubmission.fourthEntry div.currentThumbArrow{ left: 298px; } div#galerie a#midPreview{ display: block; width: 374px; min-height: 100px; max-height: 340px; margin-bottom: 15px; } div#galerie a#midPreview img{ display: block; margin: 0 auto; max-width: 362px; min-height: 100px; background-color: #fff; max-height: 330px; padding: 5px; border: 1px #cebc9c solid; } textarea#theNewCaption { width: 380px; height: 85px; font-size: 13px; } /* Share Photos Page */ div#share{ font-size: 1.3em; } div#share h2{ display: block; width: 223px; height: 35px; background: url( ../_graphics/header_share.png ) no-repeat; text-indent: -9999px; margin-bottom: 29px; } div#share h4{ border-bottom: 2px #7b6524 solid; padding-bottom: 3px; margin-left: -25px; } div#share div.shareStep{ margin-bottom: 35px; margin-left: 25px; } div#share form label{ display: block; margin-top: 8px; } div#share form label input{ height: 20px; line-height: 20px; } div#share form label input.textInput{ font-size: 1.1em; outline: none; margin-left: 5px; } div#share form label input.placeHolder{ color: #bcbcbc; } div#share form label input.small{ width: 50px; } div#share form label input.medium{ width: 150px; } div#share form label input.large{ width: 250px; } div#share form label select.dropDown{ width: 280px; } div#share form textarea{ outline: none; font-size: 1.1em; padding: 5px; margin: 5px 0 0 25px; width: 320px; height: 100px; } div#share form input#buttonSubmitShare{ display: block; width: 83px; height: 39px; background: url( ../_graphics/button_shareSubmit.png ) no-repeat 0 0; border: 0; font-size: 0; line-height: 0; text-indent: -9999px; cursor: pointer; margin-left: 25px; position: relative; top: -15px; } div#share form input#buttonSubmitShare:hover{ background-position: 0 -39px; } div#share form input#buttonSubmitShare.disabled, div#share form input#buttonSubmitShare.disabled:hover{ cursor: default; background-position: 0 -78px; } /* SWF Uploader:*/ div#share .uploadprogressbox { border: 1px solid #67563e; width: 325px; height: 25px; position: relative; margin-bottom: 2px; } div#share .uploadprogressbox .name { position: absolute; left: 0; top: 0; width: 325px; height: 25px; font-size: 14px; line-height: 24px; text-align: center; z-index: 5; } div#share .uploadprogressbox .progress { z-index: 2; background-color: #c7b69e; position: absolute; left: 1px; top: 1px; width: 0px; height: 23px; } /* After a successful upload:*/ div#share img.uploadthumbnail { float: left; border: 2px solid #67563e; width: 160px; height: 120px; padding: 2px; margin: 5px; } div#partagez{ font-size: 1.3em; } div#partagez h2{ margin-bottom: 15px; } div#partagez h4{ border-bottom: 2px #7b6524 solid; padding-bottom: 3px; margin-left: -25px; } div#partagez div.shareStep{ margin-bottom: 35px; margin-left: 25px; } div#partagez form label{ display: block; margin-top: 8px; } div#partagez form label input{ height: 20px; line-height: 20px; } div#partagez form label input.textInput{ font-size: 1.1em; outline: none; margin-left: 5px; } div#partagez form label input.placeHolder{ color: #bcbcbc; } div#partagez form label input.small{ width: 50px; } div#partagez form label input.medium{ width: 150px; } div#partagez form label input.large{ width: 250px; } div#partagez form label select.dropDown{ width: 280px; } div#partagez form textarea{ outline: none; font-size: 1.1em; padding: 5px; margin: 5px 0 0 25px; width: 320px; height: 100px; } div#partagez form input#buttonSubmitShare { font-weight: bold; margin: 5px; } /* SWF Uploader:*/ div#partagez .uploadprogressbox { border: 1px solid #67563e; width: 325px; height: 25px; position: relative; margin-bottom: 2px; } div#partagez .uploadprogressbox .name { position: absolute; left: 0; top: 0; width: 325px; height: 25px; font-size: 12px; line-height: 24px; text-align: center; z-index: 5; } div#partagez .uploadprogressbox .progress { z-index: 2; background-color: #c7b69e; position: absolute; left: 1px; top: 1px; width: 0px; height: 23px; } /* After a successful upload:*/ div#partagez img.uploadthumbnail { float: left; border: 2px solid #67563e; width: 160px; height: 120px; padding: 2px; margin: 5px; } /* Promo Materials Page */ div#promo-materials {} div#promo-materials #materialList > li { padding-left: 150px; width: 200px; height: 105px; } div#promo-materials #materialList > li h3{ font-size: 15px; margin-bottom: 2px; } div#promo-materials #materialList > li { opacity: 0.8; } div#promo-materials #materialList > li:hover { opacity: 1; } div#promo-materials #materialList li a.preview { position: absolute; left: 12px; height: 100px; width: 120px; padding-right: 220px; } div#promo-materials #materialList li a.preview img{ display: block; margin: 0 auto; height: 100px; max-width: 130px; } div#promo-materials #materialList li p.preview { position: absolute; left: 12px; height: 100px; width: 120px; padding-right: 220px; } div#promo-materials #materialList li p.preview img{ display: block; margin: 0 auto; height: 100px; max-width: 130px; } div#promo-materials #materialList li p.size { font-size: 11px; } div#promo-materials #materialList li p.download { font-size: 12px; margin-top: 25px; } /* Matériel de promotion */ div#materiel-de-promotion {} div#materiel-de-promotion #materialList > li { padding-left: 150px; width: 200px; height: 105px; } div#materiel-de-promotion #materialList > li h3{ font-size: 15px; margin-bottom: 2px; } div#materiel-de-promotion #materialList > li { opacity: 0.8; } div#materiel-de-promotion #materialList > li:hover { opacity: 1; } div#materiel-de-promotion #materialList li a.preview { position: absolute; left: 12px; height: 100px; width: 120px; padding-right: 220px; } div#materiel-de-promotion #materialList li a.preview img{ display: block; margin: 0 auto; height: 100px; max-width: 130px; } div#promo-materials #materialList li p.preview { position: absolute; left: 12px; height: 100px; width: 120px; padding-right: 220px; } div#promo-materials #materialList li p.preview img{ display: block; margin: 0 auto; height: 100px; max-width: 130px; } div#materiel-de-promotion #materialList li p.size { font-size: 11px; } div#materiel-de-promotion #materialList li p.download { font-size: 12px; margin-top: 25px; } /* Generic Elements */ .BBFancyListHolder{ position: absolute; left: 0px; top: 42px; height: 590px; width: 385px; overflow: hidden; } .BBFancyListHolder div.bottomFade{ position: absolute; bottom: 0; left: 0; width: 360px; height: 13px; background: url( ../_graphics/bottomLocationFade.png ) no-repeat; } .BBFancyListHolder div.topFade{ position: absolute; top: 0; left: 0; width: 360px; height: 13px; background: url( ../_graphics/topLocationFade.png ) no-repeat; } .BBFancyListHolder .BBFancyList{ position: relative; overflow-y: auto; height: 580px; padding-top: 10px; } .BBFancyList > li { margin-bottom: 20px; padding: 6px 10px 0; min-height: 10px; background: url( ../_graphics/locationsBackground.png ) repeat-y; position: relative; } .BBFancyList > li div.topCornerSet{ width: 360px; height: 6px; background: url( ../_graphics/locationCorners.png ) no-repeat 0 0; position: absolute; top: -6px; left: 0; } .BBFancyList > li div.bottomCornerSet{ width: 360px; height: 6px; background: url( ../_graphics/locationCorners.png ) no-repeat 0 -6px; position: absolute; bottom: -6px; left: 0; } div#report { position:absolute; width:111.5px; height:126px; margin-top:151px; margin-left:55px; } div#report a#button_report{ display: block; width: 111.5px; height: 126px; background: url( ../_graphics/button_2011report.png ) no-repeat 0 0; text-indent: -9999px; float: left;} div#report a#button_report:hover{ background-position: -113px 0;}