| 0,0 → 1,232 |
|---|
| /* * * * * * * * * * */ |
| /* Generic elements */ |
| /* * * * * * * * * * */ |
| |
| body { |
| margin: 1em; |
| font: small sans-serif; |
| color: #000; |
| background-color: #fff; |
| } |
| |
| p, td, th, li, h4 { |
| font: small sans-serif; |
| } |
| |
| h1, h2, h3 { |
| color: #f60; |
| } |
| |
| h1 { |
| font-size: large; |
| } |
| |
| a:link, a:visited { |
| color: #09f; |
| text-decoration: underline; |
| } |
| |
| a:hover { |
| text-decoration: none; |
| } |
| |
| input, textarea, select, .inputbox { |
| border: 1px solid #f60; |
| color: #000; |
| background-color: #fff; |
| } |
| |
| input.radio { |
| border: none; |
| background-color: #fff; |
| } |
| |
| input.button { |
| font-weight: bold; |
| border: 1px outset #fff; |
| color: #fff; |
| background-color: #f60; |
| } |
| |
| a img { |
| border: 0; |
| } |
| |
| |
| /* * * * * * * * * * */ |
| /* Elements with IDs */ |
| /* * * * * * * * * * */ |
| |
| |
| /* header: image and/or title */ |
| #header { } |
| |
| /* crumb line: (You are here: ...) */ |
| #crumb { } |
| |
| /* footer: copyright notices */ |
| #footer { |
| text-align: center; |
| } |
| |
| |
| /* * * * * * * * * */ |
| /* Custom classes */ |
| /* * * * * * * * * */ |
| |
| |
| /* image or gallery name header */ |
| .sgTitle { |
| margin-bottom: 0; |
| } |
| |
| /* image or gallery artist subheader */ |
| .sgSubTitle { |
| margin-top: 0; |
| } |
| |
| /* image and artist name displayed beneath image */ |
| p.sgNameByArtist { } |
| |
| /* image and gallery details such as date, location, camera model, hits etc. */ |
| p.sgDetailsList { } |
| |
| /* language select box and template select box respectively */ |
| div.sgLanguageFlipper, div.sgTemplateFlipper { |
| float: right; |
| clear: right; |
| } |
| |
| div.sgClear { |
| clear: both; |
| } |
| |
| /* wraps the drop-shadow table to allow IE to center it */ |
| div.sgShadow { |
| text-align: center; |
| padding: 1em; |
| } |
| |
| /* the main content table that does the drop-shadow effect */ |
| table.sgShadow { |
| margin-left: auto; |
| margin-right: auto; |
| clear: both; |
| } |
| |
| table.sgShadow { |
| background-color: #f0f0f0; |
| padding: 0; |
| text-align: left; |
| } |
| |
| table.sgShadow td { |
| padding: 0; |
| margin: 0; |
| } |
| |
| /* div containing each gallery sub-gallery on a gallery page */ |
| div.sgGallery { |
| margin: 5px; |
| padding: 5px; |
| border: 1px solid #ccc; |
| background-color: #fff; |
| } |
| |
| /* the table cell containing the gallery thumbnail */ |
| td.sgGalleryThumb { |
| width: 100px; |
| text-align: center; |
| } |
| |
| /* the gallery thumbnail itself */ |
| img.sgGalleryThumb { |
| border: 1px solid #000; |
| } |
| |
| /* the descriptive text (title, summary, contents) */ |
| div.sgGallery p { |
| margin-top: 0; |
| margin-bottom: 2px; |
| } |
| |
| |
| /* full size image on an image page*/ |
| img.sgImage { |
| border: none; |
| } |
| |
| /* the preview thumbnails and previous, thumbnails, next links */ |
| p.sgTopNavBar, p.sgBottomNavBar { |
| text-align: center; |
| float: right; |
| } |
| |
| /* wraps the thumbnail and rounded-corner code on an album page */ |
| div.sgThumbnail { |
| width: 124px; |
| height: 124px; |
| margin: 10px 5px; |
| float: left; |
| padding: 0px; |
| text-align: center; |
| } |
| |
| div.sgThumbnail table { |
| width: 114px; |
| height: 114px; |
| margin: 0px; |
| text-align: center; |
| vertical-align: middle; |
| } |
| |
| .sgThumbnailContent { |
| background: #fff; |
| margin: 0px; |
| padding: 0px; |
| border: 1px solid #ccc; |
| } |
| |
| |
| /* the following code does the rounded corners of the 35mm slide effect on |
| the album pages. Taken from http://www.albin.net/CSS/roundedCorners/ */ |
| .roundedCornerSpacer { |
| margin: 0px; padding: 0px; border: 0px; |
| clear: both; |
| font-size: 1px; line-height: 1px; |
| } |
| .borderTL, .borderTR, .borderBL, .borderBR { |
| width: 5px; height: 5px; |
| padding: 0px; border: 0px; |
| z-index: 99; |
| } |
| .borderTL, .borderBL { float: left; clear: both; } |
| .borderTR, .borderBR { float: right; clear: right; } |
| .borderTL { margin: -1px 0px 0px -1px; } |
| .borderTR { margin: -1px -1px 0px 0px; } |
| .borderBL { margin: -5px 0px 0px 0px; } |
| .borderBR { margin: -5px 0px 0px 0px; } |
| |
| |
| /* appropriate background images for drop-shadow effect */ |
| table.sgShadow td.tabl { background-image: url('images/shadow-tabl.gif'); width: 16px; height: 16px; } |
| table.sgShadow td.tabm { background-color: #fff; } |
| table.sgShadow td.tabr { background-color: #fff; } |
| |
| table.sgShadow td.tl { background-image: url('images/shadow-tl.gif'); width: 32px; height: 16px; } |
| table.sgShadow td.tm { background-image: url('images/shadow-tm.gif');} |
| table.sgShadow td.tr { background-image: url('images/shadow-tr.gif');} |
| table.sgShadow td.ml { background-image: url('images/shadow-ml.gif');} |
| table.sgShadow td.mm { padding: 10px;} /* cell containing image */ |
| table.sgShadow td.mr { background-image: url('images/shadow-mr.gif');} |
| table.sgShadow td.bl { background-image: url('images/shadow-bl.gif');} |
| table.sgShadow td.bm { background-image: url('images/shadow-bm.gif');} |
| table.sgShadow td.br { background-image: url('images/shadow-br.gif'); width: 32px; height: 32px; } |
| |
| /* the bit with previous, next */ |
| table.sgShadow td.tabm div { |
| font-size: 13px; |
| background: #f0f0f0 url('images/shadow-tabm.gif') top right; |
| padding-right: 30px; |
| float: left; |
| } |
