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; |
} |