Rev 229 Rev 239
1 /* * * * * * * * * * */ 1 /* * * * * * * * * * */
2 /* Generic elements */ 2 /* Generic elements */
3 /* * * * * * * * * * */ 3 /* * * * * * * * * * */
4   4  
5 body { 5 body {
6 margin: 1em; 6 margin: 1em;
7 font: small sans-serif; 7 font: small sans-serif;
8 color: #000; 8 color: #000;
9 background-color: #fff; 9 background-color: #fff;
10 } 10 }
11   11  
12 p, td, th, li, h4 { 12 p, td, th, li, h4 {
13 font: small sans-serif; 13 font: small sans-serif;
14 } 14 }
15   15  
16 h1, h2, h3 { 16 h1, h2, h3 {
17 color: #f60; 17 color: #f60;
18 } 18 }
19   19  
20 h1 { 20 h1 {
21 font-size: large; 21 font-size: large;
22 } 22 }
23   23  
24 a:link, a:visited { 24 a:link, a:visited {
25 color: #09f; 25 color: #09f;
26 text-decoration: underline; 26 text-decoration: underline;
27 } 27 }
28   28  
29 a:hover { 29 a:hover {
30 text-decoration: none; 30 text-decoration: none;
31 } 31 }
32   32  
33 input, textarea, select, .inputbox { 33 input, textarea, select, .inputbox {
34 border: 1px solid #f60; 34 border: 1px solid #f60;
35 color: #000; 35 color: #000;
36 background-color: #fff; 36 background-color: #fff;
37 } 37 }
38   38  
39 input.radio { 39 input.radio {
40 border: none; 40 border: none;
41 background-color: #fff; 41 background-color: #fff;
42 } 42 }
43   43  
44 input.button { 44 input.button {
45 font-weight: bold; 45 font-weight: bold;
46 border: 1px outset #fff; 46 border: 1px outset #fff;
47 color: #fff; 47 color: #fff;
48 background-color: #f60; 48 background-color: #f60;
49 } 49 }
50   50  
51 a img { 51 a img {
52 border: 0; 52 border: 0;
53 } 53 }
54   54  
55   55  
56 /* * * * * * * * * * */ 56 /* * * * * * * * * * */
57 /* Elements with IDs */ 57 /* Elements with IDs */
58 /* * * * * * * * * * */ 58 /* * * * * * * * * * */
59   59  
60   60  
61 /* header: image and/or title */ 61 /* header: image and/or title */
62 #header { } 62 #header { }
63   63  
64 /* crumb line: (You are here: ...) */ 64 /* crumb line: (You are here: ...) */
65 #crumb { } 65 #crumb { }
66   66  
67 /* footer: copyright notices */ 67 /* footer: copyright notices */
68 #footer { 68 #footer {
69 text-align: center; 69 text-align: center;
70 } 70 }
71   71  
72   72  
73 /* * * * * * * * * */ 73 /* * * * * * * * * */
74 /* Custom classes */ 74 /* Custom classes */
75 /* * * * * * * * * */ 75 /* * * * * * * * * */
76   76  
77   77  
78 /* image or gallery name header */ 78 /* image or gallery name header */
79 .sgTitle { 79 .sgTitle {
80 margin-bottom: 0; 80 margin-bottom: 0;
81 } 81 }
82   82  
83 /* image or gallery artist subheader */ 83 /* image or gallery artist subheader */
84 .sgSubTitle { 84 .sgSubTitle {
85 margin-top: 0; 85 margin-top: 0;
86 } 86 }
87   87  
88 /* image and artist name displayed beneath image */ 88 /* image and artist name displayed beneath image */
89 p.sgNameByArtist { } 89 p.sgNameByArtist { }
90   90  
91 /* image and gallery details such as date, location, camera model, hits etc. */ 91 /* image and gallery details such as date, location, camera model, hits etc. */
92 p.sgDetailsList { } 92 p.sgDetailsList { }
93   93  
94 /* language select box and template select box respectively */ 94 /* language select box and template select box respectively */
95 div.sgLanguageFlipper, div.sgTemplateFlipper { 95 div.sgLanguageFlipper, div.sgTemplateFlipper {
96 float: right; 96 float: right;
97 clear: right; 97 clear: right;
98 } 98 }
99   99  
100 div.sgClear { 100 div.sgClear {
101 clear: both; 101 clear: both;
102 } 102 }
103   103  
104 /* wraps the drop-shadow table to allow IE to center it */ 104 /* wraps the drop-shadow table to allow IE to center it */
105 div.sgShadow { 105 div.sgShadow {
106 text-align: center; 106 text-align: center;
107 padding: 1em; 107 padding: 1em;
108 } 108 }
109   109  
110 /* the main content table that does the drop-shadow effect */ 110 /* the main content table that does the drop-shadow effect */
111 table.sgShadow { 111 table.sgShadow {
112 margin-left: auto; 112 margin-left: auto;
113 margin-right: auto; 113 margin-right: auto;
114 clear: both; 114 clear: both;
115 } 115 }
116   116  
117 table.sgShadow { 117 table.sgShadow {
118 background-color: #f0f0f0; 118 background-color: #f0f0f0;
119 padding: 0; 119 padding: 0;
120 text-align: left; 120 text-align: left;
121 } 121 }
122   122  
123 table.sgShadow td { 123 table.sgShadow td {
124 padding: 0; 124 padding: 0;
125 margin: 0; 125 margin: 0;
126 } 126 }
127   127  
128 /* div containing each gallery sub-gallery on a gallery page */ 128 /* div containing each gallery sub-gallery on a gallery page */
129 div.sgGallery { 129 div.sgGallery {
130 margin: 5px; 130 margin: 5px;
131 padding: 5px; 131 padding: 5px;
132 border: 1px solid #ccc; 132 border: 1px solid #ccc;
133 background-color: #fff; 133 background-color: #fff;
134 } 134 }
135   135  
136 /* the table cell containing the gallery thumbnail */ 136 /* the table cell containing the gallery thumbnail */
137 td.sgGalleryThumb { 137 td.sgGalleryThumb {
138 width: 100px; 138 width: 100px;
139 text-align: center; 139 text-align: center;
140 } 140 }
141   141  
142 /* the gallery thumbnail itself */ 142 /* the gallery thumbnail itself */
143 img.sgGalleryThumb { 143 img.sgGalleryThumb {
144 border: 1px solid #000; 144 border: 1px solid #000;
145 } 145 }
146   146  
147 /* the descriptive text (title, summary, contents) */ 147 /* the descriptive text (title, summary, contents) */
148 div.sgGallery p { 148 div.sgGallery p {
149 margin-top: 0; 149 margin-top: 0;
150 margin-bottom: 2px; 150 margin-bottom: 2px;
151 } 151 }
152   152  
153   153  
154 /* full size image on an image page*/ 154 /* full size image on an image page*/
155 img.sgImage { 155 img.sgImage {
156 border: none; 156 border: none;
157 } 157 }
158   158  
159 /* the preview thumbnails and previous, thumbnails, next links */ 159 /* the preview thumbnails and previous, thumbnails, next links */
160 p.sgTopNavBar, p.sgBottomNavBar { 160 p.sgTopNavBar, p.sgBottomNavBar {
161 text-align: center; 161 text-align: center;
162 float: right; 162 float: right;
163 } 163 }
164   164  
165 /* wraps the thumbnail and rounded-corner code on an album page */ 165 /* wraps the thumbnail and rounded-corner code on an album page */
166 div.sgThumbnail { 166 div.sgThumbnail {
167 width: 124px; 167 width: 124px;
168 height: 124px; 168 height: 124px;
169 margin: 10px 5px; 169 margin: 10px 5px;
170 float: left; 170 float: left;
171 padding: 0px; 171 padding: 0px;
172 text-align: center; 172 text-align: center;
173 } 173 }
174   174  
175 div.sgThumbnail table { 175 div.sgThumbnail table {
176 width: 114px; 176 width: 114px;
177 height: 114px; 177 height: 114px;
178 margin: 0px; 178 margin: 0px;
179 text-align: center; 179 text-align: center;
180 vertical-align: middle; 180 vertical-align: middle;
181 } 181 }
182   182  
183 .sgThumbnailContent { 183 .sgThumbnailContent {
184 background: #fff; 184 background: #fff;
185 margin: 0px; 185 margin: 0px;
186 padding: 0px; 186 padding: 0px;
187 border: 1px solid #ccc; 187 border: 1px solid #ccc;
188 } 188 }
189   189  
190   190  
191 /* the following code does the rounded corners of the 35mm slide effect on 191 /* the following code does the rounded corners of the 35mm slide effect on
192 the album pages. Taken from http://www.albin.net/CSS/roundedCorners/ */ 192 the album pages. Taken from http://www.albin.net/CSS/roundedCorners/ */
193 .roundedCornerSpacer { 193 .roundedCornerSpacer {
194 margin: 0px; padding: 0px; border: 0px; 194 margin: 0px; padding: 0px; border: 0px;
195 clear: both; 195 clear: both;
196 font-size: 1px; line-height: 1px; 196 font-size: 1px; line-height: 1px;
197 } 197 }
198 .borderTL, .borderTR, .borderBL, .borderBR { 198 .borderTL, .borderTR, .borderBL, .borderBR {
199 width: 5px; height: 5px; 199 width: 5px; height: 5px;
200 padding: 0px; border: 0px; 200 padding: 0px; border: 0px;
201 z-index: 99; 201 z-index: 99;
202 } 202 }
203 .borderTL, .borderBL { float: left; clear: both; } 203 .borderTL, .borderBL { float: left; clear: both; }
204 .borderTR, .borderBR { float: right; clear: right; } 204 .borderTR, .borderBR { float: right; clear: right; }
205 .borderTL { margin: -1px 0px 0px -1px; } 205 .borderTL { margin: -1px 0px 0px -1px; }
206 .borderTR { margin: -1px -1px 0px 0px; } 206 .borderTR { margin: -1px -1px 0px 0px; }
207 .borderBL { margin: -5px 0px 0px 0px; } 207 .borderBL { margin: -5px 0px 0px 0px; }
208 .borderBR { margin: -5px 0px 0px 0px; } 208 .borderBR { margin: -5px 0px 0px 0px; }
209   209  
210   210  
211 /* appropriate background images for drop-shadow effect */ 211 /* appropriate background images for drop-shadow effect */
212 table.sgShadow td.tabl { background-image: url('images/shadow-tabl.gif'); width: 16px; height: 16px; } 212 table.sgShadow td.tabl { background-image: url('images/shadow-tabl.gif'); width: 16px; height: 16px; }
213 table.sgShadow td.tabm { background-color: #fff; } 213 table.sgShadow td.tabm { background-color: #fff; }
214 table.sgShadow td.tabr { background-color: #fff; } 214 table.sgShadow td.tabr { background-color: #fff; }
215   215  
216 table.sgShadow td.tl { background-image: url('images/shadow-tl.gif'); width: 32px; height: 16px; } 216 table.sgShadow td.tl { background-image: url('images/shadow-tl.gif'); width: 32px; height: 16px; }
217 table.sgShadow td.tm { background-image: url('images/shadow-tm.gif');} 217 table.sgShadow td.tm { background-image: url('images/shadow-tm.gif');}
218 table.sgShadow td.tr { background-image: url('images/shadow-tr.gif');} 218 table.sgShadow td.tr { background-image: url('images/shadow-tr.gif');}
219 table.sgShadow td.ml { background-image: url('images/shadow-ml.gif');} 219 table.sgShadow td.ml { background-image: url('images/shadow-ml.gif');}
220 table.sgShadow td.mm { padding: 10px;} /* cell containing image */ 220 table.sgShadow td.mm { padding: 10px;} /* cell containing image */
221 table.sgShadow td.mr { background-image: url('images/shadow-mr.gif');} 221 table.sgShadow td.mr { background-image: url('images/shadow-mr.gif');}
222 table.sgShadow td.bl { background-image: url('images/shadow-bl.gif');} 222 table.sgShadow td.bl { background-image: url('images/shadow-bl.gif');}
223 table.sgShadow td.bm { background-image: url('images/shadow-bm.gif');} 223 table.sgShadow td.bm { background-image: url('images/shadow-bm.gif');}
224 table.sgShadow td.br { background-image: url('images/shadow-br.gif'); width: 32px; height: 32px; } 224 table.sgShadow td.br { background-image: url('images/shadow-br.gif'); width: 32px; height: 32px; }
225   225  
226 /* the bit with previous, next */ 226 /* the bit with previous, next */
227 table.sgShadow td.tabm div { 227 table.sgShadow td.tabm div {
228 font-size: 13px; 228 font-size: 13px;
229 background: #f0f0f0 url('images/shadow-tabm.gif') top right; 229 background: #f0f0f0 url('images/shadow-tabm.gif') top right;
230 padding-right: 30px; 230 padding-right: 30px;
231 float: left; 231 float: left;
232 } 232 }