Rev Author Line No. Line
228 kaklik 1 /*
2 Layout CSS for Modern - Singapore Template v1.3 (www.sgal.org)
3 by Ross Howard (www.abitcloser.com)
4 */
5  
6 /* Structure */
7 /* For editing and customisation read these notes */
8 body {
9 padding: 0;
10 margin: 0;
11 font-family: Arial, Helvetica, sans-serif; /* Set the font here to effect entire template */
12 }
13  
14 #sgContainer {
15 width: 740px; /* This is the page width, if you want a full-screen/liquid layout use 'auto' */
16 border-right: 4px solid; /* If you use full-screen/liquid layout you probably want to set all borders to 'none' */
17 border-left: 1px solid;
18 border-top: 1px solid;
19 border-bottom: 4px solid;
20 margin: 24px auto 0 auto;
21 }
22  
23 #sgHeader {
24 border-right: 1px solid;
25 }
26  
27 #sgOptions {
28 text-align: right;
29 float: right;
30 margin: 6px 0 0 0;
31 }
32  
33 #sgMain-nav {
34 border-right: 1px solid;
35 padding-top: 12px;
36 margin: 0 0 0 26px;
37 font-size: 11px;
38 }
39  
40 #sgContent {
41 border-right: 1px solid;
42 border-bottom: 1px solid;
43 border-top: 1px solid;
44 }
45  
46 #sgFooter {
47 width: 760px;
48 margin: 16px auto 0 auto;
49 padding: 0 0 16px 0;
50 text-align: center;
51 }
52  
53 #sgUpdate {
54 font-size: 11px;
55 padding: 8px 0 8px 0;
56 text-align: center;
57 border-bottom: 1px solid;
58 }
59  
60  
61 /* Page Elements */
62  
63 .sgCrumb {
64 font-size: 11px;
65 line-height: 16px;
66 padding: 20px 0 16px 26px;
67 }
68  
69 .sgGallery {
70 border: 1px solid;
71 margin: 18px 24px 24px 24px;
72 padding: 12px 12px 10px 12px;
73 }
74  
75 .sgGalleryFloat {
76 margin: 18px 4px 12px 24px;
77 float: left;
78 width: 304px;
79 }
80  
81 .sgAlbum {
82 border: 1px solid;
83 margin: 18px 24px 32px 24px;
84 padding: 22px 0 0 0;
85 clear: both;
86 }
87  
88 .sgImageBox {
89 margin: 24px auto 24px auto;
90 position: relative;
91 font-size: 11px;
92 padding: 5px;
93 border: 1px solid;
94 border-right: 1px solid;
95 border-bottom: 1px solid;
96 }
97  
98 img.sgImage {
99 display: block;
100 }
101  
102 .sgPreview {
103 text-align: center;
104 margin: 28px 0 24px 0;
105 }
106  
107 .sgFoot {
108 clear: both;
109 }
110  
111  
112 /* Typography */
113  
114 h2 {
115 font-size: 32px;
116 line-height: 32px;
117 font-weight: normal;
118 margin: 0 200px 0 24px;
119 padding: 0;
120 }
121  
122 h3 {
123 font-size: 16px;
124 line-height: 18px;
125 font-weight: normal;
126 margin: 0px 0 6px 130px;
127 padding: 0;
128 }
129  
130 h4 {
131 font-size: 11px;
132 line-height: 12px;
133 font-weight: normal;
134 margin: 0 0 0 26px;
135 padding: 0;
136 }
137  
138 p {
139 font-size: 11px;
140 line-height: 16px;
141 margin: 6px 16px 4px 16px;
142 }
143  
144 .sgGallery p {
145 border: none;
146 margin: 0 0 4px 130px;
147 }
148  
149 #sgFooter p {
150 text-align: center;
151 }
152  
153 p.sgLinks {
154 margin: 24px 0 -38px 24px;
155 padding: 0 0 6px 0;
156 }
157  
158 p.sgTab {
159 line-height: 16px;
160 text-align: right;
161 margin: -16px 32px 0 24px;
162 padding: 0 0 0 0;
163 clear: both;
164 }
165  
166 p.sgTab a{
167 margin-right: 0px;
168 }
169  
170 p.sgFullsize {
171 text-align: center;
172 margin: 0;
173 padding: 0;
174 }
175  
176 a {
177 text-decoration: none;
178 }
179  
180 a:hover {
181 text-decoration: underline;
182 }
183  
184 /* Links and Thumbnails */
185  
186 .sgAlbum a {
187 width: 134px; /* This equals template.ini 'thumb_width_album' + padding and borders of inside img */
188 height: 134px; /* This equals template.ini 'thumb_height_album' + padding and borders of inside img */
189 float: left;
190 text-align: center;
191 margin: 0 19px 20px 19px;
192 }
193  
194 .sgAlbum a img {
195 padding: 16px; /* 16px x 2 = 32px */
196 border: 1px solid ; /* 1px x 2 = 2px = 34px */
197 }
198  
199 .sgGallery a img {
200 padding: 16px;
201 border: 1px solid;
202 float: left;
203 margin: 0 -150px 0 0;
204 }
205  
206 a:hover img.sgThumbnailAlbum, a:hover img.sgThumbGallery {
207 border: 1px solid;
208 }
209  
210 .sgPreview a {
211 border: none;
212 }
213  
214 .sgPreview a img {
215 border: 1px solid;
216 margin: 0 4px 0 4px;
217 padding: 2px;
218 }
219  
220 img.sgThumbnailPreviewCurrent {
221 opacity: .6;
222 }
223  
224 .sgPreview a:hover img, .sgPreview a:hover img.sgThumbnailPreviewCurrent{
225 border: 1px solid;
226 opacity: 1;
227 }
228  
229 /* Details */
230  
231 dl {
232 font-size: 11px;
233 line-height: 16px;
234 margin: 12px 64px 24px 64px;
235 padding: 0;
236 text-align: center;
237 }
238  
239 dt {
240 display: inline;
241 margin: 0 4px 0 0;
242 padding: 0;
243 }
244  
245 dd {
246 display: inline;
247 margin: 0;
248 padding: 0;
249 }
250  
251 /* Forms */
252  
253 #sgOptions form{
254 border: none;
255 margin: 0 0 0 12px;
256 padding: 0 12px 0 0;
257 font-size: 10px;
258 display: inline;
259 }
260  
261 input {
262 font-size: 10px;
263 margin: 12px 0 0 0;
264 }
265  
266 select{
267 font-size: 10px;
268 }
269  
270 /* Utility */
271  
272 .clear {
273 display: block;
274 clear:both;
275 float: none;
276 }
277  
278 /* In-Image Rollovers */
279  
280 .sgImageBox a {
281 display: block;
282 position: absolute;
283 text-indent: -3000px;
284 font-size: 15px;
285 opacity: .0;
286 width: 80px;
287 text-align: center;
288 }
289  
290 .sgImageBox a:hover {
291 opacity: .9;
292 text-indent: 0px;
293 text-decoration: none;
294 }
295  
296 .sgImageBox a span{
297 display: block;
298 }
299  
300 .sgImageBox a.thumb span, .sgImageBox a.control span{
301 margin-top: 22px;
302 }
303  
304 .sgImageBox a.prev {
305 top: 5px;
306 left: 5px;
307 border-right: 1px solid;
308 }
309  
310 .sgImageBox a.thumb {
311 top: 5px;
312 left: 5px;
313 height: 60px;
314 border-bottom: 1px solid;
315 }
316  
317 .sgImageBox a.next {
318 top: 5px;
319 right: 5px;
320 border-left: 1px solid;
321 }
322  
323 .sgImageBox a.control {
324 left: 5px;
325 bottom: 4px;
326 height: 60px;
327 border-top: 1px solid;
328 }
329  
330 /* Slideshow */
331  
332 body#slideshow div.sgImageWrapper{
333 position: absolute;
334 top: 50%;
335 left: 0px;
336 width: 100%;
337 }
338  
339 #slideshow div.sgImageBox {
340 margin: 0 auto 0 auto;
341 font-size: 11px;
342 padding: 5px;
343 border: none;
344 }
345  
346 body#slideshow div img{
347 margin: 0px auto 0px;
348 }