body { padding: 0; margin: 0; line-height: 1.5em; font-size: 75%; /* gives us 12px in most browsers */ font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; background: #aefe05 url('../img/side_top.jpg') repeat-x top; /* body background from ui.jquery.com */ color: 222; } /* ================================ =LAYOUT ================================ */ h1 { padding: 0 0 0 52px; margin: 0; font-size: 1.5em; /* 18px */ line-height: 2em; /* 36px */ background: url('../img/photos_gold_32.gif') no-repeat 8px 50%; /* Thanks to Iconbuffet.com */ color: #fff; } #body_wrap { width: 960px; margin: 0 auto; background: #fff url('../img/body_wrap_bg.gif') repeat-y; } #content { float: left; width: 632px; } #sidebar { float: right; width: 320px; } #footer { clear: both; background: #32342f; color: #fff; } /* ================================ =SECTIONS ================================ */ /* ---------------- =HEADER ---------------- */ /* ---------------- =CONTENT ---------------- */ #content h2 { padding-left: 25px; } /* =gallery -------- */ .gallery { min-height: 108px; padding: 0; margin: 18px 0; list-style: none; } * html .gallery { height: 108px; /* min-height for lte IE6 */ } .gallery.active { background: #eee; } .gallery li { float: left; width: 160px; padding: 0 25px; margin: 0 0 8px; } .gallery img { display: block; padding: 7px; border: 1px solid #ccc; background: #fff; } .displayBox img { border: 25px solid #222; } /* img title */ .gallery p { float: left; padding: 0; margin: 0; } /* img toolbar */ .gallery div { float: right; } .gallery div a { float: left; width: 24px; height: 24px; background-repeat: no-repeat; background-position: center; text-indent: -9999px; /* Phark revisited image replacement */ } .gallery div a:focus { outline: 0; } .tb_supersize { background-image: url('../img/search_16.gif'); /* Thanks to Iconbuffet.com */ } .tb_trash { background-image: url('../img/trash_16.gif'); /* Thanks to Iconbuffet.com */ } /* ---------------- =SIDEBAR ---------------- */ .box, .box2 { margin: 18px; border: 1px solid #ccc; background: #fff; } .box h2, .box2 h2 { padding: 0 8px; margin: 0; font-size: 1.5em; line-height: 2em; background: #525252 url('../img/header_bg.png') repeat-x bottom; color: #fff; } .box div { min-height: 128px; border: 2px solid #fff; } * html #sidebar .box div { height: 128px; /* min-height for lte IE6 */ } #trash div.active { border-color: green; } #shred div.active { border-color: red; } #trash div img { float: left; margin: 4px; } /* ---------------- =FOOTER ---------------- */ #footer p { margin: 0; text-align: right; } /* ================================ =FLOAT CLEARING ================================ */ #body_wrap, ul.gallery, #trash div { display: inline-block; } #body_wrap:after, ul.gallery:after, #trash div:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html #body_wrap, * html ul.gallery, * html #trash div { height: 1%; } #body_wrap, ul.gallery, #trash div { display: block; }