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