· 8 years ago · May 20, 2018, 11:18 PM
1/*
2
3 Copyright (c) syxanash
4
5 syxanash at gmail.com
6
7 This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
8
9*/
10
11/* Standard Elements */
12
13html { min-height: 100%; }
14
15/* Body content */
16
17body
18{
19 font-family: helvetica, arial, sans-serif;
20
21 background: #AAA url(data/pictures/bg.jpg) repeat-x left bottom;
22
23 text-align: justify;
24}
25
26/* Blockquote */
27
28blockquote
29{
30 background-color: #FFFDD0;
31
32 font-family: Georgia, "Bitstream Charter", serif;
33 font-style: italic;
34 font-weight: normal;
35
36 margin: 0 3em;
37 padding: 10px;
38 padding-top: 3px;
39 padding-bottom: 3px;
40
41 border: 1px solid #AAAAAA;
42 margin-top: 5px;
43 margin-bottom: 5px;
44}
45
46/* Hr */
47
48hr
49{
50 background-color: #AAAAAA;
51 color: #AAAAAA;
52
53 height: 1px;
54 border: 0;
55}
56
57/* Date */
58
59#date
60{
61 background-color: #7D7D7D;
62
63 text-decoration: none;
64 font-size: 17px;
65 color: #F5F5F5;
66 font-weight: bold;
67
68 display: block;
69
70 padding-right: 20px;
71
72 padding: 0.2em;
73 margin: 0;
74
75 text-shadow: 0px -1px 0px #1C1C1C;
76
77 border-top: 1px solid #3e3e3e;
78 border-left: 1px solid #3e3e3e;
79 border-bottom: 1px solid #3e3e3e;
80}
81
82/* Container */
83
84#container
85{
86 background: #fff;
87
88 width: 70%;
89
90 margin-left: 15%;
91 margin-right: 15%;
92 margin-top: 2%;
93
94 -webkit-border-top-left-radius: 20px;
95 -webkit-border-top-right-radius: 20px;
96 -moz-border-radius-topleft: 20px;
97 -moz-border-radius-topright: 20px;
98 border-top-left-radius: 20px;
99 border-top-right-radius: 20px;
100
101 -webkit-box-shadow: 0px 3px 21px rgba(50, 50, 50, 1);
102 -moz-box-shadow: 0px 3px 21px rgba(50, 50, 50, 1);
103 box-shadow: 0px 3px 21px rgba(50, 50, 50, 1);
104}
105
106/* Top */
107
108#top
109{
110 -webkit-border-top-left-radius: 20px;
111 -webkit-border-top-right-radius: 20px;
112 -moz-border-radius-topleft: 20px;
113 -moz-border-radius-topright: 20px;
114 border-top-left-radius: 20px;
115 border-top-right-radius: 20px;
116
117 background: black;
118 color: white;
119
120 text-shadow:2px 2px 1px #757575;
121
122 padding: 0.2em 0 0.2em 0;
123 font-size: 80%;
124}
125
126#top:hover
127{
128 background: #7ba0f6;
129}
130
131#top h1
132{
133 margin-left: 5%;
134}
135
136/* Nav */
137
138#nav
139{
140 width: 10em;
141 margin: 1em 0 1em 0em;
142 padding: 0.5em 0 1em 0;
143 float:left;
144 clear: both;
145 border-right: 1px solid #AAAAAA;
146}
147
148#nav a, #nav a:visited, #nav a:active
149{
150 display: block;
151 margin: 1.5em 0 0 0;
152
153 text-decoration: none;
154 color: red;
155
156 border-bottom: 1px solid #AAAAAA;
157}
158
159#nav a:hover
160{
161 text-decoration: none;
162
163 background-color: #cbe3ff;
164 color: #008dff;
165
166 border: 1px solid #008dff;
167
168 -moz-border-radius: 6px;
169 -webkit-border-radius: 6px;
170 border-radius: 6px;
171}
172
173#nav ul
174{
175 color: black;
176 list-style: square;
177}
178
179#nav li
180{
181 margin: 1.5em 0 0 0;
182}
183
184/* Content */
185
186#content
187{
188 color: #3e3e3e;
189 margin: 1em 0 1em 10em;
190 padding: 1em 0 1em 1.5em;
191 border-left: 1px solid #AAAAAA;
192}
193
194#content h2
195{
196 text-decoration: none;
197
198 display: block;
199
200 background-color: #f6e37b;
201 color: #ff8300;
202
203 padding: 0.2em;
204 margin: 0;
205
206 text-shadow: 0 1px 2px black;
207
208 border-top: 1px solid #b88757;
209 border-left: 1px solid #b88757;
210 border-bottom: 1px solid #b88757;
211}
212
213#content p
214{
215 text-align:justify;
216 padding-right: 20px;
217}
218
219#content a:hover
220{
221 text-decoration: none;
222
223 background-color: #ffcbcb;
224 color: red;
225
226 border: 1px solid red;
227
228 -moz-border-radius: 6px;
229 -webkit-border-radius: 6px;
230 border-radius: 6px;
231}
232
233#content a
234{
235 color: #008dff;
236}
237
238#content ul
239{
240 padding-right: 20px;
241}
242
243#content li
244{
245 padding-right: 20px;
246}
247
248/* Footer */
249
250#footer
251{
252 background: black;
253 color: white;
254
255 font-size: 80%;
256 text-align: center;
257 clear: both;
258 padding: 0.2em 0 0.2em 0;
259
260 padding-top: 10px;
261 padding-bottom: 10px;
262 padding-right: 20px;
263 padding-left: 20px;
264}
265
266#footer:hover
267{
268 background: #7ba0f6;
269 color: black;
270}
271
272/* Managing the hyperlinks */
273
274#footer a:hover
275{
276 color: red;
277}
278
279#footer a
280{
281 text-decoration: none;
282 color: #008dff;
283}
284
285/* Managing the images */
286
287#footer:hover img
288{
289 filter:alpha(opacity=40);
290 -moz-opacity:0.4;
291 -khtml-opacity: 0.4;
292 opacity: 0.4;
293}
294
295#footer:hover img:hover
296{
297 filter:alpha(opacity=1);
298 -moz-opacity: 1;
299 -khtml-opacity: 1;
300 opacity: 1;
301}
302
303/* Managing the hypelinks hover */
304
305#footer:hover a:hover
306{
307 text-decoration: none;
308
309 background-color: #cdd9f6;
310 color: red;
311
312 border: 1px solid red;
313
314 -moz-border-radius: 6px;
315 -webkit-border-radius: 6px;
316 border-radius: 6px;
317}
318
319#footer:hover a
320{
321 color: red;
322}