Rev 228 Rev 229
1 /* 1 /*
2 White on Black CSS for Modern - Singapore Template v1.3 (www.sgal.org) 2 White on Black CSS for Modern - Singapore Template v1.3 (www.sgal.org)
3 by Ross Howard (www.abitcloser.com) 3 by Ross Howard (www.abitcloser.com)
4 */ 4 */
5   5  
6 /* Structure */ 6 /* Structure */
7 7
8 body { 8 body {
9 background-color: #111; 9 background-color: #111;
10 } 10 }
11   11  
12 #sgContainer { 12 #sgContainer {
13 border-right-color: #0A0A0A; 13 border-right-color: #0A0A0A;
14 border-left-color: #222; 14 border-left-color: #222;
15 border-top-color: #222; 15 border-top-color: #222;
16 border-bottom-color: #0A0A0A; 16 border-bottom-color: #0A0A0A;
17 background-color: #FFF; 17 background-color: #FFF;
18 } 18 }
19   19  
20 #sgHeader { 20 #sgHeader {
21 border-right-color: #C3C3C3; 21 border-right-color: #C3C3C3;
22 } 22 }
23   23  
24 #sgMain-nav { 24 #sgMain-nav {
25 border-right-color: #C3C3C3; 25 border-right-color: #C3C3C3;
26 color: #999; 26 color: #999;
27 } 27 }
28   28  
29 #sgContent { 29 #sgContent {
30 border-right-color: #C3C3C3; 30 border-right-color: #C3C3C3;
31 border-bottom-color: #C3C3C3; 31 border-bottom-color: #C3C3C3;
32 border-top-color: #FFF; 32 border-top-color: #FFF;
33 } 33 }
34   34  
35 #sgUpdate { 35 #sgUpdate {
36 background-color: #222; 36 background-color: #222;
37 border-bottom-color: #111; 37 border-bottom-color: #111;
38 color: #666; 38 color: #666;
39 } 39 }
40   40  
41 /* Page Elements */ 41 /* Page Elements */
42   42  
43 .sgCrumb { 43 .sgCrumb {
44 color: #999; 44 color: #999;
45 } 45 }
46   46  
47 .sgGallery { 47 .sgGallery {
48 border-color: #CCC; 48 border-color: #CCC;
49 background-color: #EEE; 49 background-color: #EEE;
50 } 50 }
51   51  
52 .sgAlbum { 52 .sgAlbum {
53 border-color: #CCC; 53 border-color: #CCC;
54 background-color: #EEE; 54 background-color: #EEE;
55 } 55 }
56   56  
57 .sgImageBox { 57 .sgImageBox {
58 background-color: #EEE; 58 background-color: #EEE;
59 border-color: #DDD; 59 border-color: #DDD;
60 border-right-color: #AAA; 60 border-right-color: #AAA;
61 border-bottom-color: #AAA; 61 border-bottom-color: #AAA;
62 } 62 }
63   63  
64 img.sgImage { 64 img.sgImage {
65 background: #EEE url(../img/loader_w.gif) center bottom no-repeat; 65 background: #EEE url(../img/loader_w.gif) center bottom no-repeat;
66 } 66 }
67   67  
68 /* Typography */ 68 /* Typography */
69   69  
70 h2 { 70 h2 {
71 color: #555; 71 color: #555;
72 } 72 }
73   73  
74 h4 { 74 h4 {
75 color: #666; 75 color: #666;
76 } 76 }
77   77  
78 p { 78 p {
79 color: #666; 79 color: #666;
80 } 80 }
81   81  
82 .sgGallery p.sgCount { 82 .sgGallery p.sgCount {
83 color: #AAA; 83 color: #AAA;
84 } 84 }
85   85  
86 .sgPreview p { 86 .sgPreview p {
87 color: #999; 87 color: #999;
88 } 88 }
89   89  
90 #sgFooter p { 90 #sgFooter p {
91 color: #333; 91 color: #333;
92 } 92 }
93   93  
94 a { 94 a {
95 color: #29A9FF; 95 color: #29A9FF;
96 } 96 }
97   97  
98 #sgFooter a { 98 #sgFooter a {
99 color: #22628D; 99 color: #22628D;
100 } 100 }
101   101  
102 /* Links and Thumbnails */ 102 /* Links and Thumbnails */
103   103  
104 .sgAlbum a img { 104 .sgAlbum a img {
105 background-color: #FFF; 105 background-color: #FFF;
106 border-color: #DDD; 106 border-color: #DDD;
107 } 107 }
108   108  
109 .sgGallery a img { 109 .sgGallery a img {
110 background-color: #FFF; 110 background-color: #FFF;
111 border-color: #DDD; 111 border-color: #DDD;
112 } 112 }
113   113  
114 a:hover img.sgThumbnailAlbum, a:hover img.sgThumbGallery { 114 a:hover img.sgThumbnailAlbum, a:hover img.sgThumbGallery {
115 border-color: #BBB; 115 border-color: #BBB;
116 } 116 }
117   117  
118 .sgPreview a img { 118 .sgPreview a img {
119 border-color: #CCC; 119 border-color: #CCC;
120 color: #CCC; 120 color: #CCC;
121 } 121 }
122   122  
123 .sgPreview a:hover img, .sgPreview a:hover img.sgThumbnailPreviewCurrent{ 123 .sgPreview a:hover img, .sgPreview a:hover img.sgThumbnailPreviewCurrent{
124 border-color: #29A9FF; 124 border-color: #29A9FF;
125 } 125 }
126   126  
127 /* Details */ 127 /* Details */
128   128  
129 dl { 129 dl {
130 color: #999; 130 color: #999;
131 } 131 }
132   132  
133 dt { 133 dt {
134 color: #666; 134 color: #666;
135 } 135 }
136   136  
137 /* Forms */ 137 /* Forms */
138   138  
139 select{ 139 select{
140 color: #666; 140 color: #666;
141 } 141 }
142   142  
143 /* In-Image Rollovers */ 143 /* In-Image Rollovers */
144   144  
145 .sgImageBox a { 145 .sgImageBox a {
146 background-color: #222; 146 background-color: #222;
147 } 147 }
148   148  
149 .sgImageBox a.prev { 149 .sgImageBox a.prev {
150 border-right-color: #111; 150 border-right-color: #111;
151 } 151 }
152   152  
153 .sgImageBox a.thumb { 153 .sgImageBox a.thumb {
154 border-bottom-color: #111; 154 border-bottom-color: #111;
155 } 155 }
156   156  
157 .sgImageBox a.next { 157 .sgImageBox a.next {
158 border-left-color: #111; 158 border-left-color: #111;
159 } 159 }
160   160  
161 .sgImageBox a.control { 161 .sgImageBox a.control {
162 border-top-color: #111; 162 border-top-color: #111;
163 } 163 }
164   164  
165 /* Slideshow */ 165 /* Slideshow */
166   166  
167 body#slideshow { 167 body#slideshow {
168 background-color: #000; 168 background-color: #000;
169 } 169 }
170   170  
171 #slideshow div.sgImageBox { 171 #slideshow div.sgImageBox {
172 background-color: #000; 172 background-color: #000;
173 } 173 }