Click Here to go back to Tutorial

View Source and copy for the final css properties for your gallery.css

@charset "utf-8"; /* CSS Document */ #body { background-color: #399; background-repeat: repeat; margin-right: auto; margin-left: auto; padding-top: 50px; padding-bottom: 50px; height: 1500px; } #wrapper { background-color:#000; width:1050px; height: 650px; padding-top: 50px; background-position: center; padding-bottom: 75px; margin: auto; } .lower_text { color: #FFF; padding-top: 25px; padding-left: 800px; } .page_container { padding: 0px; width: 1040px; margin-top: 20px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } .gallery_credit { float: left; width: 425px; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 15px; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .gallery_type { text-align: right; float: left; width: 500px; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 20px; padding-right: 0px; padding-bottom: 0px; padding-left: 70px; font-size: 1.4em; color: #CCC; font-family: Arial, Helvetica, sans-serif; } .gallery_top { background-image: url(../images/templates/top_tile.jpg); margin: 0px; padding: 0px; height: 20px; background-repeat: no-repeat; background-position: 0px 0px; } .gallery_content { background-image: url(../images/templates/middle_tile.jpg); background-repeat: repeat-y; background-position: 0px 0px; margin: 0px; padding-top: 15px; padding-right: 0px; padding-bottom: 1px; padding-left: 0px; } .gallery_thumbnails { margin: 0px; float: left; width: 612px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 30px; } a img { } .gallery_thumbnails a:hover { border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; } .gallery_thumbnails a.selected { border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; } .gallery_preview { background-color: #000; margin: 0px; padding: 0px; float: left; height: 300px; width: 375px; } .gallery_preview a { display: block; margin: 0px; padding: 0px; height: 300px; width: 375px; border: 1px solid #999; } .gallery_preview a:hover { border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; } a img { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } .gallery_thumbnails a { display: block; padding: 0px; float: left; height: 60px; width: 75px; margin-top: 0px; margin-right: 20px; margin-bottom: 20px; margin-left: 0px; border: 1px solid #999; } .gallery_contact { background-position: 0px 0px; text-align: right; float: left; width: 600px; background-color: #000; margin: 0px; padding: 0px; height: 40px; } h1 { font-size: 1.75em; font-weight: normal; color: #FFF; letter-spacing: 2px; margin: 0px; padding: 0px; } hh { font-size: 1.25em; font-weight: normal; text-transform: uppercase; color: #999; letter-spacing: 23px; margin: 0px; padding: 0px; } .gallery_caption { float: left; width: 375px; background-color: #000; color: #FFF; text-decoration: none; padding-right: 0px; padding-bottom: 0px; padding-left: 45px; margin-top: -70px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .gallery_bottom { background-image: url(../images/templates/bottom_tile.jpg); background-repeat: no-repeat; background-position: 0px 0px; margin: 0px; padding: 0px; height: 20px; } bodyg { background-color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 0.75em; color: #FFF; } .clear_both { line-height: 1px; clear: both; } .gallery_preload_area { display: none; } a.contactlink { text-transform: uppercase; color: #FFF; text-decoration: none; background-image: url(../images/templates/link_email.png); background-repeat: no-repeat; background-position: right 0px; margin: 0px; padding-top: 0px; padding-right: 50px; padding-bottom: 50px; padding-left: 0px; height: 40px; } p { color: #999; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 12px; margin-left: 0px; } a.zoom { color: #FFF; text-decoration: none; background-image: url(../images/templates/link_zoom.png); background-repeat: no-repeat; background-position: 0px 0px; margin: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 50px; padding-left: 50px; }

Click Here to go back to Tutorial