Ajax Loader
×
HTML 
<div id="author">
1
<div id="author">
2
  <h1>CSS3 Experiment: Windows7 Start Menus</h1>
3
  <div class="deskripsi">
4
    <b>Pure CSS3 Windows7 Start Menus</b><br />No Images, No JavaScripts!<br />
5
    Author: Taufik Nurrohman
6
  </div>
7
</div>
8
 
9
 
10
<div id="startbar">
11
  <div id="win">
12
 
13
    <div id="menu">
14
      <div class="left-menu">
15
        <ul>
16
          <li><a href="#" class="arrow"><div class="fleft foldr"></div>My Documents</a>
17
            <div class="recent">
18
              <hr />
19
              <ul>
20
                <li><a href="#">Recent 1</a></li>
21
                <li><a href="#">Recent 2</a></li>
22
                <li><a href="#">Recent 3</a></li>
23
                <li><a href="#">Film-Bokep.3gp</a></li>
24
                <li><a href="#">Film-Nyokep.3gp</a></li>
25
                <li><a href="#">Film-Enyak.3gp</a></li>
26
                <li><a href="#">Film-Babeh.3gp</a></li>
27
              </ul>
28
            </div>
29
          </li>
30
          <li><a href="#"><div class="fleft foldr"></div>Your Documents</a></li>
31
          <li><a href="#"><div class="fleft foldr"></div>Our Documents</a></li>
32
          <li><a href="#" class="arrow"><div class="fleft mw"></div>Microsoft Office Word 2007</a>
33
            <div class="recent">
34
            <hr />
35
              <ul>
36
                <li><a href="#">Andai.docx</a></li>
37
                <li><a href="#">Saja.docx</a></li>
38
                <li><a href="#">Engkau.docx</a></li>
39
                <li><a href="#">Tahu.docx</a></li>
40
                <li><a href="#">Betapa.docx</a></li>
41
                <li><a href="#">Aku.docx</a></li>
42
                <li><a href="#">Kebelet.docx</a></li>
43
                <li><a href="#">Pipis.docx</a></li>
44
              </ul>
45
            </div>
46
          </li>
47
          <li><a href="#"><div class="fleft op">O</div>Opera Web Browser</a></li>
48
          <li><a href="#"><div class="fleft ie">e</div>Internet Explorer</a></li>
49
          <li><a href="#"><div class="fleft np"></div>Notepad</a></li>
50
          <li><a href="#"><div class="fleft ai">Fl</div>Adobe Fl</a></li>
51
          <li class="all-prog"><a href="#">All Programs</a>
52
            <div class="recent all">Hi, my name is Taufik. I like CSS, but I'm not a designer or web programmer. I'm just a hobbyist who want to know about bla... bla... bla... and always curious about how to draw with codes. That's it. I'm very glad if you share my work with your friends. Thank you. I hope all the sadness will end with a day of happiness...
53
 
54
            <div style="margin-top:15px;font-weight:bold;"><i>29 November 2011</i></div>
55
            </div>
56
          </li>
57
        </ul>
58
        <form id="search" action="" name="prikitiw"><input type="text" placeholder="Search programs and files" /></form>
59
      </div> <!-- leftmenu -->
60
 
61
      <div class="right-menu">
62
        <ul>
63
          <li><a href="#">Taufik</a></li>
64
          <li><a href="#">Documents</a></li>
65
          <li><a href="#">Pictures</a></li>
66
          <li><a href="#">Music</a></li>
67
          <li style="border-top:1px solid rgba(255,255,255,0.1);padding-top:2px;"><a href="#">Games</a></li>
68
          <li style="border-bottom:1px solid rgba(255,255,255,0.1);padding-top:5px;margin-bottom:2px;"><a href="#">Computer</a></li>
69
          <li><a href="#">Control Panel</a></li>
70
          <li><a href="#">Device and Printer</a></li>
71
          <li><a href="#">Default Programs</a></li>
72
          <li><a href="#">Help and Support</a></li>
73
        </ul>
74
        <div class="shutdown">
75
          <div class="lf">Shut down</div>
76
          <div class="clear"></div>
77
        </div>
78
 
79
        <div id="kontener">
80
          <div class="admin"></div>
81
        </div>
82
 
83
      </div> <!-- rightmenu -->
84
      <div class="clear"></div>
85
    </div> <!-- menu -->
86
 
87
    <div id="cont-win" title="Start">
88
      <div class="w1"></div><div class="w2"></div>
89
      <div class="clear"></div>
90
      <div class="w3"></div><div class="w4"></div>
91
      <div class="clear"></div>
92
    </div>
93
 
94
  </div> <!-- win -->
95
 
96
  <div id="list">
97
 
98
  <div class="opened tunggal"><div class="foldr small"></div>
99
  <div class="screensht">
100
    <div class="col1 fold">
101
    <div class="close">&times;</div><div class="kotak"></div>
102
    </div>
103
  </div>
104
  </div>
105
 
106
  <div class="opened tunggal"><div class="foldr np small"></div>
107
  <div class="screensht">
108
    <div class="col1 ntpad">
109
    <div class="close">&times;</div><div class="kotak"></div>
110
    </div>
111
  </div>
112
  </div>
113
 
114
  <div class="opened pilled">
115
  <div class="screensht">
116
    <div class="col1 blank">
117
      <div class="close">&times;</div><div class="kotak"></div>
118
    </div>
119
    <div class="col2 blank">
120
      <div class="close">&times;</div><div class="kotak"></div>
121
    </div>
122
    <div class="clear"></div>
123
  </div>
124
 
125
  </div> <!-- list -->
126
  <div class="clear"></div>
127
  </div> <!-- opened pilled -->
128
 
129
  <div class="opened hide"></div>
130
  <div id="fright">
131
    <div class="plus">
132
      <div class="screensht">
133
        <div class="grup">
134
          <b>&#169; 29-Nov-2011</b><br />
135
          <a href="https://plus.google.com/108949996304093815163/about" target="_blank">About the Author</a>
136
        </div>
137
      </div>
138
    </div> <!-- plus -->
139
 
140
    <div class="connection" title="Local Area Connection is Now Ready to Prikitiw..."></div>
141
    <div class="speker" title="Digunakan untuk Mendengarkan Hal yang Baik-Baik"></div>
142
    <div class="jam">11:18 WIB</div>
143
    <div class="clear"></div>
144
  </div>
145
 
146
</div> <!-- startbar -->
 
CSS 
/**
1
/**
2
 * ===================================================================
3
 * CSS3 Windows7 Start Menu by Taufik Nurrohman
4
 * Release: 29 November 2011
5
 * ===================================================================
6
 */
7
 
8
* {
9
  margin:0px;
10
  padding:0px;
11
  list-style:none;
12
}
13
 
14
body {
15
  background:#fff;
16
  height:1000px;
17
  display:block;
18
  background:-webkit-radial-gradient(bottom,circle,#FACF0C,#4BB648);
19
  background:-moz-radial-gradient(bottom,circle,#FACF0C,#4BB648);
20
  background:-ms-radial-gradient(bottom,circle,#FACF0C,#4BB648);
21
  background:-o-radial-gradient(bottom,circle,#FACF0C,#4BB648);
22
  background:radial-gradient(bottom,circle,#FACF0C,#4BB648);
23
}
24
 
25
a {
26
  text-decoration:none;
27
  color:#444;
28
}
29
 
30
a:hover {
31
  text-decoration:underline;
32
  cursor:pointer;
33
}
34
 
35
/* Header */
36
#author {
37
  font:italic 14px Cambaria,Georgia,Serif;
38
  color:#666;
39
  margin:15px;
40
}
41
 
42
#author h1 {
43
  font:bold 32px 'Showcard Gothic','Century Gothic',Arial,Sans-Serif;
44
  margin:0 10px;
45
  color:#437924;
46
  text-shadow:0 1px 0px rgba(255,255,255,0.4);
47
  position:relative;
48
  -webkit-animation:slow 2s;
49
  -moz-animation:slow 2s;
50
  -ms-animation:slow 2s;
51
  animation:slow 2s;
52
}
53
 
54
#author .deskripsi {
55
  margin:10px 10px 10px;
56
  padding:10px;
57
  background:#F6EEAB;
58
  background:-webkit-linear-gradient(top,#ECDE8C,#F6EEAB);
59
  background:-moz-linear-gradient(top,#ECDE8C,#F6EEAB);
60
  background:-ms-linear-gradient(top,#ECDE8C,#F6EEAB);
61
  background:-o-linear-gradient(top,#ECDE8C,#F6EEAB);
62
  background:linear-gradient(top,#ECDE8C,#F6EEAB);
63
  border:1px solid #DCC56C;
64
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);
65
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);
66
  box-shadow:0 1px 2px rgba(0,0,0,0.4);
67
  -webkit-border-radius:3px;
68
  -moz-border-radius:3px;
69
  border-radius:3px;
70
  position:relative;
71
  z-index:4;
72
  -webkit-animation:slow 1s;
73
  -moz-animation:slow 1s;
74
  -ms-animation:slow 1s;
75
  animation:slow 1s;
76
}
77
 
78
#author .deskripsi:before {
79
  content:"";
80
  width:0px;
81
  height:0px;
82
  border-width:12px;
83
  border-style:solid;
84
  border-color:#DCC56C transparent transparent transparent;
85
  position:absolute;
86
  top:100%;
87
  left:19px;
88
  z-index:-1;
89
}
90
 
91
#author .deskripsi:after {
92
  content:"";
93
  width:0px;
94
  height:0px;
95
  border-width:10px;
96
  border-style:solid;
97
  border-color:#F6EEAB transparent transparent transparent;
98
  position:absolute;
99
  top:100%;
100
  left:21px;
101
}
102
 
103
/* Horizontal Bar */
104
#startbar {
105
  position:fixed;
106
  bottom:0px;
107
  left:0px;
108
  z-index:1000;
109
  width:100%;
110
  height:30px;
111
  background:-webkit-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5),rgba(0,0,0,0.9));
112
  background:-moz-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5),rgba(0,0,0,0.9));
113
  background:-ms-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5),rgba(0,0,0,0.9));
114
  background:-o-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5),rgba(0,0,0,0.9));
115
  background:linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5),rgba(0,0,0,0.9));
116
  border-top:1px solid rgba(0,0,0,0.5);
117
  -webkit-box-shadow:inset 0 1px 0px rgba(255,255,255,0.4);
118
  -moz-box-shadow:inset 0 1px 0px rgba(255,255,255,0.4);
119
  box-shadow:inset 0 1px 0px rgba(255,255,255,0.4);
120
  font:normal 12px Calibri,Arial,Sans-Serif;
121
}
122
 
123
/* Windows Logo */
124
#win {
125
  width:35px;
126
  height:35px;
127
  background:-webkit-radial-gradient(50% 90%,circle closest-corner,#07D9F9,#03456F 100%,#fff 300% );
128
  background:-moz-radial-gradient(50% 90%,circle closest-corner,#07D9F9,#03456F 100%,#fff 300% );
129
  background:-ms-radial-gradient(50% 90%,circle closest-corner,#07D9F9,#03456F 100%,#fff 300% );
130
  background:-o-radial-gradient(50% 90%,circle closest-corner,#07D9F9,#03456F 100%,#fff 300% );
131
  background:radial-gradient(50% 90%,circle closest-corner,#07D9F9,#03456F 100%,#fff 300% );
132
  border:1px solid #4A676F;
133
  -webkit-border-radius:100px;
134
  -moz-border-radius:100px;
135
  border-radius:100px;
136
  -webkit-box-shadow:0 1px 1px rgba(255,255,255,0.9),inset 0px 2px 1px rgba(255,255,255,0.8),inset 0px 5px 2px rgba(255,255,255,0.5),inset 0px 10px 10px rgba(255,255,255,0.3),inset 0px -1px 1px rgba(255,255,255,0.8);
137
  -moz-box-shadow:0 1px 1px rgba(255,255,255,0.9),inset 0px 2px 1px rgba(255,255,255,0.8),inset 0px 5px 2px rgba(255,255,255,0.5),inset 0px 10px 10px rgba(255,255,255,0.3),inset 0px -1px 1px rgba(255,255,255,0.8);
138
  box-shadow:0 1px 1px rgba(255,255,255,0.9),inset 0px 2px 1px rgba(255,255,255,0.8),inset 0px 5px 2px rgba(255,255,255,0.5),inset 0px 10px 10px rgba(255,255,255,0.3),inset 0px -1px 1px rgba(255,255,255,0.8);
139
  margin-top:-5px;
140
  margin-left:10px;
141
  margin-right:20px;
142
  display:block;
143
  position:relative;
144
  float:left;
145
  cursor:pointer;
146
  webkit-transition:all 0.4s linear;
147
  -moz-transition:all 0.4s linear;
148
  -ms-transition:all 0.4s linear;
149
  -o-transition:all 0.4s linear;
150
  transition:all 0.4s linear;
151
}
152
 
153
#cont-win {
154
  position:relative;
155
  left:7px;
156
  top:9px;
157
  -webkit-transform:skew(-4deg,-7deg) rotate(17deg);
158
  -moz-transform:skew(-4deg,-7deg) rotate(17deg);
159
  -ms-transform:skew(-4deg,-7deg) rotate(17deg);
160
  -o-transform:skew(-4deg,-7deg) rotate(17deg);
161
  transform:skew(-4deg,-7deg) rotate(17deg);
162
  display:block;
163
}
164
 
165
.w1,.w2,.w3,.w4 {
166
  width:8px;
167
  height:8px;
168
  float:left;
169
  margin:1px;
170
  background:#000;
171
  -webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.4);
172
  -moz-box-shadow:1px 1px 1px rgba(0,0,0,0.4);
173
  box-shadow:1px 1px 1px rgba(0,0,0,0.4);
174
  -webkit-transform:skew(-4deg,-7deg);
175
  -moz-transform:skew(-4deg,-7deg);
176
  -ms-transform:skew(-4deg,-7deg);
177
  -o-transform:skew(-4deg,-7deg);
178
  transform:skew(-4deg,-7deg);
179
}
180
 
181
.w1 {
182
  background:#BF321C;
183
  background:-webkit-radial-gradient(right bottom,circle cover,#fff,#E9A72E,#BF321C);
184
  background:-moz-radial-gradient(right bottom,circle cover,#fff,#E9A72E,#BF321C);
185
  background:-ms-radial-gradient(right bottom,circle cover,#fff,#E9A72E,#BF321C);
186
  background:-o-radial-gradient(right bottom,circle cover,#fff,#E9A72E,#BF321C);
187
  background:radial-gradient(right bottom,circle cover,#fff,#E9A72E,#BF321C);
188
}
189
 
190
.w2 {
191
  background:#74A647;
192
  background:-webkit-radial-gradient(left bottom,circle cover,#fff,#C1D687,#74A647);
193
  background:-moz-radial-gradient(left bottom,circle cover,#fff,#C1D687,#74A647);
194
  background:-ms-radial-gradient(left bottom,circle cover,#fff,#C1D687,#74A647);
195
  background:-o-radial-gradient(left bottom,circle cover,#fff,#C1D687,#74A647);
196
  background:radial-gradient(left bottom,circle cover,#fff,#C1D687,#74A647);
197
}
198
 
199
.w3 {
200
  background:#399FD3;
201
  background:-webkit-radial-gradient(right top,circle cover,#fff,#97D3F2,#399FD3);
202
  background:-moz-radial-gradient(right top,circle cover,#fff,#97D3F2,#399FD3);
203
  background:-ms-radial-gradient(right top,circle cover,#fff,#97D3F2,#399FD3);
204
  background:-o-radial-gradient(right top,circle cover,#fff,#97D3F2,#399FD3);
205
  background:radial-gradient(right top,circle cover,#fff,#97D3F2,#399FD3);
206
}
207
 
208
.w4 {
209
  background:#FCCC2E;
210
  background:-webkit-radial-gradient(left top,circle cover,#fff,#F7DF95,#FCCC2E);
211
  background:-moz-radial-gradient(left top,circle cover,#fff,#F7DF95,#FCCC2E);
212
  background:-ms-radial-gradient(left top,circle cover,#fff,#F7DF95,#FCCC2E);
213
  background:-o-radial-gradient(left top,circle cover,#fff,#F7DF95,#FCCC2E);
214
  background:radial-gradient(left top,circle cover,#fff,#F7DF95,#FCCC2E);
215
}
216
 
217
/* Menus */
218
#menu {
219
  position:absolute;
220
  left:-11px;
221
  z-index:-1;
222
  width:400px;
223
  height:auto;
224
  padding:6px;
225
  background:-webkit-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5));
226
  background:-moz-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5));
227
  background:-ms-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5));
228
  background:-o-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5));
229
  background:linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5));
230
  border:1px solid rgba(0,0,0,0.6);
231
  border-bottom-width:2px;
232
  -webkit-box-shadow:inset 0px 0px 1px rgba(255,255,255,2.5);
233
  moz-box-shadow:inset 0px 0px 1px rgba(255,255,255,2.5);
234
  box-shadow:inset 0px 0px 1px rgba(255,255,255,2.5);
235
  border-radius:7px 7px 0 0;
236
  visibility:hidden;
237
  opacity:0;
238
  bottom:31px;
239
  -webkit-transition:all 0.2s ease-out 0.2s;
240
  -moz-transition:all 0.2s ease-out 0.2s;
241
  -ms-transition:all 0.2s ease-out 0.2s;
242
  -o-transition:all 0.2s ease-out 0.2s;
243
  transition:all 0.2s ease-out 0.2s;
244
  cursor:default;
245
}
246
 
247
#win:hover {
248
  -webkit-box-shadow:0 1px 7px rgba(255,255,255,0.9),inset 0px 2px 1px #fff,inset 0px 2px 2px rgba(255,255,255,0.5),inset 0px 10px 10px rgba(255,255,255,0.3),inset 0px -1px 1px rgba(255,255,255,0.8);
249
  -moz-box-shadow:0 1px 7px rgba(255,255,255,0.9),inset 0px 2px 1px #fff,inset 0px 2px 2px rgba(255,255,255,0.5),inset 0px 10px 10px rgba(255,255,255,0.3),inset 0px -1px 1px rgba(255,255,255,0.8);
250
  box-shadow:0 1px 7px rgba(255,255,255,0.9),inset 0px 2px 1px #fff,inset 0px 2px 2px rgba(255,255,255,0.5),inset 0px 10px 10px rgba(255,255,255,0.3),inset 0px -1px 1px rgba(255,255,255,0.8);
251
}
252
 
253
#win:hover #menu {
254
  visibility:visible;
255
  opacity:1;
256
}
257
 
258
#menu .left-menu {
259
  float:left;
260
  display:inline;
261
  background:#fff;
262
  width:250px;
263
  height:407px;
264
  border:1px solid rgba(0,0,0,0.6);
265
  -webkit-box-shadow:0px 0px 1px rgba(255,255,255,0.5);
266
  -moz-box-shadow:0px 0px 1px rgba(255,255,255,0.5);
267
  box-shadow:0px 0px 1px rgba(255,255,255,0.5);
268
  -webkit-border-radius:5px;
269
  -moz-border-radius:5px;
270
  border-radius:5px;
271
  position:relative;
272
}
273
 
274
/* Search Form */
275
#menu .left-menu form#search {
276
  width:250px;
277
  background:#E4F4FC;
278
  border-top:2px solid #BEE6FD;
279
  padding:10px 0;
280
  position:absolute;
281
  bottom:0px;
282
  left:0px;
283
  -webkit-border-radius:0 0 5px 5px;
284
  -moz-border-radius:0 0 5px 5px;
285
  border-radius:0 0 5px 5px;
286
}
287
 
288
#menu .left-menu form#search input {
289
  background:#fff;
290
  border:1px solid #aaa;
291
  padding:3px 5px;
292
  margin:0 14px;
293
  font:italic 12px Calibri,Arial,Sans-Serif;
294
  color:#999;
295
  width:202px;
296
  position:relative;
297
}
298
 
299
/* Loupe */
300
#menu .left-menu form#search:after {
301
  content:"";
302
  width:5px;
303
  height:5px;
304
  border:1px solid #666;
305
  -webkit-border-radius:10px;
306
  -moz-border-radius:10px;
307
  border-radius:10px;
308
  position:absolute;
309
  left:100%;
310
  margin-left:-37px;
311
  top:16px;
312
}
313
 
314
#menu .left-menu form#search:before {
315
  content:"";
316
  width:3px;
317
  height:0px;
318
  border:1px solid #666;
319
  position:absolute;
320
  z-index:3;
321
  left:100%;
322
  margin-left:-41px;
323
  top:23px;
324
  -webkit-transform:rotate(-41deg);
325
  -moz-transform:rotate(-41deg);
326
  -ms-transform:rotate(-41deg);
327
  -o-transform:rotate(-41deg);
328
  transform:rotate(-41deg);
329
}
330
 
331
#menu .left-menu ul {
332
  padding:2px;
333
  margin:0px;
334
}
335
 
336
#menu .left-menu li {
337
  margin:0px;
338
  padding:0px;
339
  list-style:none;
340
  width:246px;
341
  text-align:left;
342
}
343
 
344
#menu .left-menu li a {
345
  color:#222;
346
  text-decoration:none;
347
  line-height:27px;
348
  margin-bottom:1px;
349
  padding:0px 12px;
350
  border:1px solid transparent;
351
  display:block;
352
  position:relative;
353
}
354
 
355
/* Making Arrow with CSS Pseudo Element */
356
#menu .left-menu li a.arrow:after {
357
  content:"";
358
  width:0px;
359
  height:0px;
360
  position:absolute;
361
  left:100%;
362
  top:9px;
363
  margin-left:-16px;
364
  border-width:5px;
365
  border-style:solid;
366
  border-color:transparent transparent transparent #222;
367
}
368
 
369
/* Sliding Menu To Show the Recent Documents */
370
#menu .left-menu .recent {
371
  width:142px;
372
  padding:3px;
373
  background:#F4F7FB;
374
  -webkit-box-shadow:inset 1px 0px 1px rgba(0,0,0,0.2);
375
  -moz-box-shadow:inset 1px 0px 1px rgba(0,0,0,0.2);
376
  box-shadow:inset 1px 0px 1px rgba(0,0,0,0.2);
377
  height:402px;
378
  position:absolute;
379
  z-index:1000;
380
  top:0px;
381
  left:245px;
382
  visibility:hidden;
383
  opacity:0;
384
  -webkit-border-radius:0 3px 3px 0;
385
  -moz-border-radius:0 3px 3px 0;
386
  border-radius:0 3px 3px 0;
387
  -webkit-transition:all 0.2s ease-out 0.2s;
388
  -moz-transition:all 0.2s ease-out 0.2s;
389
  -ms-transition:all 0.2s ease-out 0.2s;
390
  -o-transition:all 0.2s ease-out 0.2s;
391
  transition:all 0.2s ease-out 0.2s;
392
}
393
 
394
#menu .left-menu .recent hr {
395
  border:none !important;
396
  height:1px;
397
  overflow:visible;
398
  background:#e6e6e6;
399
  position:relative;
400
  margin:10px 2px;
401
}
402
 
403
#menu .left-menu .recent hr:before {
404
  content:"Recent";
405
  padding:0 5px 0 2px;
406
  font-size:12px;
407
  color:#045182;
408
  position:absolute;
409
  left:0px;
410
  top:-8px;
411
  margin-right:-50px;
412
  background:#F4F7FB;
413
}
414
 
415
#menu .left-menu li:hover .recent {
416
  left:249px;
417
  visibility:visible;
418
  opacity:1;
419
}
420
 
421
#menu .left-menu li li {
422
  width:138px !important;
423
}
424
 
425
#menu .left-menu li li a {
426
  padding:0 5px;
427
  line-height:16px !important;
428
  margin-bottom:2px;
429
}
430
 
431
#menu .left-menu li a:hover {
432
  background:-webkit-linear-gradient(top,#E4F4FC,#ACDCF7);
433
  background:-moz-linear-gradient(top,#E4F4FC,#ACDCF7);
434
  background:-ms-linear-gradient(top,#E4F4FC,#ACDCF7);
435
  background:-o-linear-gradient(top,#E4F4FC,#ACDCF7);
436
  background:linear-gradient(top,#E4F4FC,#ACDCF7);
437
  border-color:#0CC0E1;
438
  -webkit-border-radius:3px;
439
  -moz-border-radius:3px;
440
  border-radius:3px;
441
  -webkit-box-shadow:inset 0 0 3px #fff;
442
  -moz-box-shadow:inset 0 0 3px #fff;
443
  box-shadow:inset 0 0 3px #fff;
444
}
445
 
446
#menu .left-menu li.all-prog {
447
  position:absolute;
448
  bottom:48px;
449
  left:2px;
450
  border-top:1px solid #eee;
451
  padding-top:3px;
452
}
453
 
454
#menu .left-menu li.all-prog a {
455
  line-height:22px;
456
  padding:0 0 0 34px;
457
}
458
 
459
/* My Words */
460
#menu .left-menu li.all-prog .recent.all {
461
  width:220px;
462
  height:400px;
463
  padding:5px 15px;
464
  font:normal 16px 'Comic Sans MS',Times,Serif;
465
  text-shadow:0 0 1px rgba(0,0,0,0.6);
466
  position:absolute;
467
  top:0px;
468
  left:0px;
469
  margin-left:-2px;
470
  margin-top:-333px;
471
  -webkit-border-radius:3px;
472
  -moz-border-radius:3px;
473
  border-radius:3px;
474
  background:#fff;
475
  -webkit-box-shadow:inset 0 0 1px rgba(0,0,0,0.5);
476
  -moz-box-shadow:inset 0 0 1px rgba(0,0,0,0.5);
477
  box-shadow:inset 0 0 1px rgba(0,0,0,0.5);
478
}
479
 
480
#menu .left-menu li.all-prog a:before {
481
  content:"";
482
  position:absolute;
483
  right:100%;
484
  top:7px;
485
  margin-right:-15px;
486
  border-width:4px 5px;
487
  border-style:solid;
488
  border-color:transparent transparent transparent #111;
489
  display:block;
490
}
491
 
492
.fleft {
493
  float:left;
494
  margin:3px 10px 0px -10px;
495
  position:relative;
496
}
497
 
498
/* Creating Folders with CSS Gradients and Pseudo Elements */
499
.foldr {
500
  width:20px;
501
  height:15px;
502
  margin-top:6px;
503
  background:#F6EEAB;
504
  background:-webkit-linear-gradient(top,#ECDE8C,#F6EEAB);
505
  background:-moz-linear-gradient(top,#ECDE8C,#F6EEAB);
506
  background:-ms-linear-gradient(top,#ECDE8C,#F6EEAB);
507
  background:-o-linear-gradient(top,#ECDE8C,#F6EEAB);
508
  background:linear-gradient(top,#ECDE8C,#F6EEAB);
509
  border:1px solid #DCC56C;
510
  -webkit-box-shadow:0 1px 0px rgba(0,0,0,0.2);
511
  -moz-box-shadow:0 1px 0px rgba(0,0,0,0.2);
512
  box-shadow:0 1px 0px rgba(0,0,0,0.2);
513
  -webkit-border-radius:1px;
514
  -moz-border-radius:1px;
515
  border-radius:1px;
516
}
517
 
518
.foldr:before {
519
  content:"";
520
  width:8px;
521
  height:0px;
522
  border-top:3px solid #DCC56C;
523
  display:block;
524
  position:absolute;
525
  bottom:100%;
526
  left:0px;
527
}
528
 
529
/* Microsoft Word */
530
.mw {
531
  width:12px;
532
  height:10px;
533
  margin-left:-4px;
534
  border:2px solid #fff;
535
  background:-webkit-linear-gradient(top,#fff,#0E70A9,#fff,#0E70A9,#fff,#fff,#0E70A9,#fff,#0E70A9);
536
  background:-moz-linear-gradient(top,#fff,#0E70A9,#fff,#0E70A9,#fff,#fff,#0E70A9,#fff,#0E70A9);
537
  background:-ms-linear-gradient(top,#fff,#0E70A9,#fff,#0E70A9,#fff,#fff,#0E70A9,#fff,#0E70A9);
538
  background:-o-linear-gradient(top,#fff,#0E70A9,#fff,#0E70A9,#fff,#fff,#0E70A9,#fff,#0E70A9);
539
  background:linear-gradient(top,#fff,#0E70A9,#fff,#0E70A9,#fff,#fff,#0E70A9,#fff,#0E70A9);
540
  color:#023B62;
541
  -webkit-box-shadow:1px 1px 0px #bbb,-2px 4px 0px #0E70A9;
542
  -moz-box-shadow:1px 1px 0px #bbb,-2px 4px 0px #0E70A9;
543
  box-shadow:1px 1px 0px #bbb,-2px 4px 0px #0E70A9;
544
  position:relative;
545
}
546
 
547
.mw:before {
548
  content:"w";
549
  position:absolute;
550
  top:0px;
551
  left:0px;
552
  background:#fff;
553
  border:2px solid #fff;
554
  font-size:8px;
555
  line-height:6px;
556
}
557
 
558
/* Opera Web Browser */
559
.op {
560
  font:bold 22px Cambaria,Georgia,Times,Serif;
561
  color:#B73941;
562
  line-height:normal;
563
  margin-top:0px;
564
  margin-left:-8px;
565
  text-shadow:0 1px 1px #ddd;
566
  position:relative;
567
}
568
 
569
/* Create Opera Shadow */
570
.op:after {
571
  content:"";
572
  width:10px;
573
  height:1px;
574
  background:#666;
575
  -webkit-box-shadow:0 0 3px #000;
576
  -moz-box-shadow:0 0 3px #000;
577
  box-shadow:0 0 3px #000;
578
  display:block;
579
  position:absolute;
580
  top:86%;
581
  left:4px;
582
}
583
 
584
/* Ugly Internet Explorer.. */
585
.ie {
586
  font:bold 30px Georgia,Serif;
587
  color:#066298;
588
  line-height:normal;
589
  margin-top:-6px;
590
  margin-left:-8px;
591
  position:relative;
592
}
593
 
594
.ie:after {
595
  content:"";
596
  width:18px;
597
  height:2px;
598
  -webkit-border-radius:10px;
599
  -moz-border-radius:10px;
600
  border-radius:10px;
601
  -webkit-box-shadow:0px 3px 0px #FAD149,0px 1px 1px rgba(0,0,0,0.6);
602
  -moz-box-shadow:0px 3px 0px #FAD149,0px 1px 1px rgba(0,0,0,0.6);
603
  box-shadow:0px 3px 0px #FAD149,0px 1px 1px rgba(0,0,0,0.6);
604
  position:absolute;
605
  top:42%;
606
  left:-4px;
607
  -webkit-transform:rotate(-36deg);
608
  -moz-transform:rotate(-36deg);
609
  -ms-transform:rotate(-36deg);
610
  -o-transform:rotate(-36deg);
611
  transform:rotate(-36deg);
612
}
613
 
614
/* Notepad */
615
.np {
616
  width:16px;
617
  height:20px;
618
  background:-webkit-linear-gradient(-45deg,#fff 0%,#71CCE0 100%);
619
  background:-moz-linear-gradient(-45deg,#fff 0%,#71CCE0 100%);
620
  background:-ms-linear-gradient(-45deg,#fff 0%,#71CCE0 100%);
621
  background:-o-linear-gradient(-45deg,#fff 0%,#71CCE0 100%);
622
  background:linear-gradient(-45deg,#fff 0%,#71CCE0 100%);
623
  position:relative;
624
  -webkit-transform:skew(2deg,2deg) rotate(-2deg) translate(4px,0px);
625
  -moz-transform:skew(2deg,2deg) rotate(-2deg) translate(4px,0px);
626
  -ms-transform:skew(2deg,2deg) rotate(-2deg) translate(4px,0px);
627
  -o-transform:skew(2deg,2deg) rotate(-2deg) translate(4px,0px);
628
  transform:skew(2deg,2deg) rotate(-2deg) translate(4px,0px);
629
  margin-right:15px;
630
  -webkit-box-shadow:-2px 1px 0px #4A9BCD;
631
  -moz-box-shadow:-2px 1px 0px #4A9BCD;
632
  box-shadow:-2px 1px 0px #4A9BCD;
633
}
634
 
635
/* Adobe Fl (what is this?) */
636
.ai {
637
  width:6px;
638
  height:6px;
639
  line-height:normal;
640
  color:#fff;
641
  font:bold 8px Verdana,Arial,Sans-Serif;
642
  padding:6px;
643
  margin-left:-10px;
644
  margin-right:15px;
645
  left:0px;
646
  background:-webkit-linear-gradient(45deg,#EA6E56,#A71D07,#fff);
647
  background:-moz-linear-gradient(45deg,#EA6E56,#A71D07,#fff);
648
  background:-ms-linear-gradient(45deg,#EA6E56,#A71D07,#fff);
649
  background:-o-linear-gradient(45deg,#EA6E56,#A71D07,#fff);
650
  background:linear-gradient(45deg,#EA6E56,#A71D07,#fff);
651
  -webkit-box-shadow:0 0 1px rgba(0,0,0,0.8);
652
  -moz-box-shadow:0 0 1px rgba(0,0,0,0.8);
653
  box-shadow:0 0 1px rgba(0,0,0,0.8);
654
}
655
 
656
/* Right Menu */
657
#menu .right-menu {
658
  width:140px;
659
  float:right;
660
  display:inline;
661
}
662
 
663
#menu .right-menu ul,#menu .right-menu li {
664
  margin:0;
665
  padding:0;
666
  list-style:none;
667
  display:block;
668
}
669
 
670
#menu .right-menu ul {
671
  margin-top:60px;
672
  margin-bottom:15px;
673
}
674
 
675
#menu .right-menu li a {
676
  padding:8px 7px 7px;
677
  display:block;
678
  font:normal 12px Calibri,Arial,Sans-Serif;
679
  color:#fff;
680
  text-decoration:none;
681
  margin-bottom:3px;
682
  width:124px;
683
  border:1px solid transparent;
684
  display:block;
685
}
686
 
687
#menu .right-menu li a:hover {
688
  background:#222;
689
  background:-webkit-linear-gradient(bottom,rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%,rgba(255,255,255,0.4) 100%);
690
  background:-moz-linear-gradient(bottom,rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%,rgba(255,255,255,0.4) 100%);
691
  background:-ms-linear-gradient(bottom,rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%,rgba(255,255,255,0.4) 100%);
692
  background:-o-linear-gradient(bottom,rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%,rgba(255,255,255,0.4) 100%);
693
  background:linear-gradient(bottom,rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%,rgba(255,255,255,0.4) 100%);
694
  border-color:#111;
695
  -webkit-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 1px rgba(255,255,255,0.8);
696
  -moz-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 1px rgba(255,255,255,0.8);
697
  box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 1px rgba(255,255,255,0.8);
698
  -webkit-border-radius:4px;
699
  -moz-border-radius:4px;
700
  border-radius:4px;
701
}
702
 
703
/* Shut Down Button */
704
.shutdown {
705
  width:84px;
706
  font:bold 12px Calibri,Arial,Sans-Serif;
707
  text-shadow:0 1px 2px #000;
708
  color:#fff;
709
  background:#222;
710
  background:-webkit-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);
711
  background:-moz-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);
712
  background:-ms-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);
713
  background:-o-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);
714
  background:linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);
715
  border:1px solid #111;
716
  margin-bottom:12px;
717
  -webkit-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);
718
  -moz-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);
719
  box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);
720
  -webkit-border-radius:3px;
721
  -moz-border-radius:3px;
722
  border-radius:3px;
723
  cursor:pointer;
724
}
725
 
726
.shutdown:hover {
727
  -webkit-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 5px rgba(255,255,255,1);
728
  -moz-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 5px rgba(255,255,255,1);
729
  box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 5px rgba(255,255,255,1);
730
}
731
 
732
.shutdown div.lf {
733
  padding:4px 5px;
734
  position:relative;
735
}
736
 
737
.shutdown div.lf:after {
738
  content:"";
739
  padding:0px 6px;
740
  margin-left:7px;
741
  border-left:1px solid #111;
742
  -webkit-box-shadow:-1px 0px 0px rgba(255,255,255,0.3);
743
  -moz-box-shadow:-1px 0px 0px rgba(255,255,255,0.3);
744
  box-shadow:-1px 0px 0px rgba(255,255,255,0.3);
745
}
746
 
747
/* Create Arrow */
748
.shutdown div.lf:before {
749
  content:"";
750
  width:0px;
751
  height:0px;
752
  position:absolute;
753
  left:100%;
754
  top:7px;
755
  margin-left:-13px;
756
  border-width:4px 4px;
757
  border-style:solid;
758
  border-color:transparent transparent transparent #fff;
759
}
760
 
761
/* Admin */
762
#menu #kontener {
763
  position:absolute;
764
  top:0px;
765
  right:48px;
766
  margin-top:-20px;
767
  z-index:10;
768
  background:-webkit-linear-gradient(-47deg,rgba(255,255,255,0.5) 0%,#666 81%,#fff 100%);
769
  background:-moz-linear-gradient(-47deg,rgba(255,255,255,0.5) 0%,#666 81%,#fff 100%);
770
  background:-ms-linear-gradient(-47deg,rgba(255,255,255,0.5) 0%,#666 81%,#fff 100%);
771
  background:-o-linear-gradient(-47deg,rgba(255,255,255,0.5) 0%,#666 81%,#fff 100%);
772
  background:linear-gradient(-47deg,rgba(255,255,255,0.5) 0%,#666 81%,#fff 100%);
773
  padding:3px;
774
  border:1px solid #444;
775
  -webkit-box-shadow:inset 1px 0px 1px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.5);
776
  -moz-box-shadow:inset 1px 0px 1px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.5);
777
  box-shadow:inset 1px 0px 1px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.5);
778
  border-radius:5px;
779
}
780
 
781
#menu #kontener .admin {
782
  width:50px;
783
  height:48px;
784
  border:1px solid rgba(0,0,0,0.5);
785
  -webkit-border-radius:2px;
786
  -moz-border-radius:2px;
787
  border-radius:2px;
788
  background:-webkit-radial-gradient(bottom,circle,#FACF0C,#4BB648);
789
  background:-moz-radial-gradient(bottom,circle,#FACF0C,#4BB648);
790
  background:-ms-radial-gradient(bottom,circle,#FACF0C,#4BB648);
791
  background:-o-radial-gradient(bottom,circle,#FACF0C,#4BB648);
792
  background:radial-gradient(bottom,circle,#FACF0C,#4BB648);
793
  -webkit-box-shadow:inset 0 -1px 7px #fff;
794
  -moz-box-shadow:inset 0 -1px 7px #fff;
795
  box-shadow:inset 0 -1px 7px #fff;
796
  position:relative;
797
}
798
 
799
/* Minimized Windows */
800
#list {
801
  float:left;
802
  display:inline;
803
}
804
 
805
.opened {
806
  width:38px;
807
  height:25px;
808
  text-align:center;
809
  background:#222;
810
  background:-webkit-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);
811
  background:-moz-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);
812
  background:-ms-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);
813
  background:-o-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);
814
  background:linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);
815
  border:1px solid rgba(255,255,255,0.4);
816
  -webkit-box-shadow:0 0 1px rgba(0,0,0,0.9);
817
  -moz-box-shadow:0 0 1px rgba(0,0,0,0.9);
818
  box-shadow:0 0 1px rgba(0,0,0,0.9);
819
  -webkit-border-radius:3px;
820
  -moz-border-radius:3px;
821
  border-radius:3px;
822
  float:left;
823
  margin:2px 2px 0;
824
  cursor:pointer;
825
}
826
 
827
.opened.pilled {
828
  position:relative;
829
}
830
 
831
.opened .np {
832
  border:none;
833
  width:12px !important;
834
  height:12px;
835
  -webkit-transform:skew(2deg,2deg) rotate(-2deg) translate(0px,0px);
836
  -moz-transform:skew(2deg,2deg) rotate(-2deg) translate(0px,0px);
837
  -ms-transform:skew(2deg,2deg) rotate(-2deg) translate(0px,0px);
838
  -o-transform:skew(2deg,2deg) rotate(-2deg) translate(0px,0px);
839
  transform:skew(2deg,2deg) rotate(-2deg) translate(0px,0px);
840
}
841
 
842
.opened.pilled:before {
843
  content:"";
844
  width:38px;
845
  height:25px;
846
  background:#222;
847
  background:-webkit-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);
848
  background:-moz-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);
849
  background:-ms-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);
850
  background:-o-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);
851
  background:linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);
852
  border:1px solid rgba(255,255,255,0.4);
853
  -webkit-box-shadow:0 0 1px rgba(0,0,0,0.9);
854
  -moz-box-shadow:0 0 1px rgba(0,0,0,0.9);
855
  box-shadow:0 0 1px rgba(0,0,0,0.9);
856
  -webkit-border-radius:3px;
857
  -moz-border-radius:3px;
858
  border-radius:3px;
859
  position:absolute;
860
  top:-1px;
861
  left:2px;
862
  -webkit-transition:all 0.2s ease-out;
863
  -moz-transition:all 0.2s ease-out;
864
  -ms-transition:all 0.2s ease-out;
865
  -o-transition:all 0.2s ease-out;
866
  transition:all 0.2s ease-out;
867
}
868
 
869
.opened.pilled:hover:before {
870
  left:100%;
871
  margin-left:4px;
872
}
873
 
874
.opened .foldr.small {
875
  margin:4px auto 0;
876
  width:20px;
877
  height:15px;
878
}
879
 
880
.opened .foldr.small:before {
881
  display:none;
882
}
883
 
884
/* Preview of Minimized Windows */
885
.opened .screensht {
886
  position:absolute;
887
  margin-bottom:40px;
888
  width:399px;
889
  padding:10px 0;
890
  z-index:-7;
891
  border:1px solid rgba(255,255,255,0.5);
892
  background:-webkit-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);
893
  background:-moz-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);
894
  background:-ms-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);
895
  background:-o-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);
896
  background:linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);
897
  -webkit-box-shadow:inset 1px 1px 0px rgba(0,0,0,0.2),inset -1px -1px 0px rgba(0,0,0,0.2),inset 0 0 1px rgba(255,255,255,0.2),0 1px 3px #000,1px 5px 12px #000;
898
  -moz-box-shadow:inset 1px 1px 0px rgba(0,0,0,0.2),inset -1px -1px 0px rgba(0,0,0,0.2),inset 0 0 1px rgba(255,255,255,0.2),0 1px 3px #000,1px 5px 12px #000;
899
  box-shadow:inset 1px 1px 0px rgba(0,0,0,0.2),inset -1px -1px 0px rgba(0,0,0,0.2),inset 0 0 1px rgba(255,255,255,0.2),0 1px 3px #000,1px 5px 12px #000;
900
  -webkit-border-radius:5px;
901
  -moz-border-radius:5px;
902
  border-radius:5px;
903
  height:128px;
904
  overflow:hidden;
905
  opacity:0;
906
  bottom:-200px;
907
  -webkit-transition:all 0.5s ease-out 0.35s;
908
  -moz-transition:all 0.5s ease-out 0.35s;
909
  -ms-transition:all 0.5s ease-out 0.35s;
910
  -o-transition:all 0.5s ease-out 0.35s;
911
  transition:all 0.5s ease-out 0.35s;
912
  cursor:default;
913
}
914
 
915
/* Close Button */
916
.opened .screensht .close {
917
  position:absolute;
918
  top:7px;
919
  right:7px;
920
  color:#fff;
921
  line-height:12px;
922
  padding:0px 0px;
923
  text-align:center;
924
  width:12px;
925
  border:1px solid rgba(0,0,0,0.5);
926
  background:#AE3110;
927
  background:-webkit-linear-gradient(90deg,#EA6E56,#A71D07,#fff);
928
  background:-moz-linear-gradient(90deg,#EA6E56,#A71D07,#fff);
929
  background:-ms-linear-gradient(90deg,#EA6E56,#A71D07,#fff);
930
  background:-o-linear-gradient(90deg,#EA6E56,#A71D07,#fff);
931
  background:linear-gradient(90deg,#EA6E56,#A71D07,#fff);
932
  -webkit-box-shadow:inset 0 0 1px rgba(255,255,255,0.7);
933
  -moz-box-shadow:inset 0 0 1px rgba(255,255,255,0.7);
934
  box-shadow:inset 0 0 1px rgba(255,255,255,0.7);
935
  text-shadow:0 0 1px #000;
936
  font:bold Arial,Sans-Serif;
937
  opacity:0.2;
938
  -webkit-transition:all 0.2s ease-out;
939
  -moz-transition:all 0.2s ease-out;
940
  -ms-transition:all 0.2s ease-out;
941
  -o-transition:all 0.2s ease-out;
942
  transition:all 0.2s ease-out;
943
  cursor:pointer;
944
}
945
 
946
.opened:hover .screensht {
947
  opacity:1;
948
  bottom:0px;
949
}
950
 
951
.opened .screensht .col1:hover .close,.opened .screensht .col2:hover .close {
952
  visibility:visible;
953
  opacity:1;
954
}
955
 
956
.opened .screensht .col1,.opened .screensht .col2 {
957
  width:174px;
958
  height:116px;
959
  padding:5px;
960
  color:#fff;
961
  float:left;
962
  margin-left:9px;
963
  background:transparent;
964
  border:1px solid transparent;
965
  position:relative;
966
}
967
 
968
.opened .screensht .kotak {
969
  width:170px;
970
  height:90px;
971
  margin:24px auto 1px;
972
  border:1px solid #000;
973
  background:#fafafa;
974
  background:-webkit-linear-gradient(45deg,#fff,#ddd,#fff,#ddd);
975
  background:-moz-linear-gradient(45deg,#fff,#ddd,#fff,#ddd);
976
  background:-ms-linear-gradient(45deg,#fff,#ddd,#fff,#ddd);
977
  background:-o-linear-gradient(45deg,#fff,#ddd,#fff,#ddd);
978
  background:linear-gradient(45deg,#fff,#ddd,#fff,#ddd);
979
  -webkit-box-shadow:0 0 1px rgba(255,255,255,0.8);
980
  -moz-box-shadow:0 0 1px rgba(255,255,255,0.8);
981
  box-shadow:0 0 1px rgba(255,255,255,0.8);
982
}
983
 
984
.opened.tunggal .screensht {
985
  width:204px;
986
  padding:10px 0;
987
}
988
 
989
.opened.tunggal .screensht .col1 {
990
  width:174px;
991
  padding:5px;
992
  margin-left:9px;
993
  float:none !important;
994
  display:block;
995
  position:relative;
996
}
997
 
998
.opened .screensht .col1:hover,.opened .screensht .col2:hover {
999
  background:rgba(255,255,255,0.2);
1000
  border:1px solid rgba(255,255,255,0.2);
1001
}
1002
 
1003
.opened.tunggal .screensht .col1.fold:before {
1004
  content:"My Documents";
1005
  position:absolute;
1006
  display:block;
1007
  top:7px;
1008
  left:7px;
1009
}
1010
 
1011
.opened.tunggal .screensht .col1.ntpad:before {
1012
  content:"I love CSS3";
1013
  position:absolute;
1014
  display:block;
1015
  top:7px;
1016
  left:7px;
1017
}
1018
 
1019
.opened .screensht .blank:before {
1020
  content:"Not Available";
1021
  position:absolute;
1022
  display:block;
1023
  top:7px;
1024
  left:7px;
1025
}
1026
 
1027
.opened:hover {
1028
  -webkit-box-shadow:inset 0px 1px 1px #fff;
1029
  -moz-box-shadow:inset 0px 1px 1px #fff;
1030
  box-shadow:inset 0px 1px 1px #fff;
1031
}
1032
 
1033
/* Show Desktop (see the right bottom of Windows) */
1034
.opened.hide {
1035
  float:right;
1036
  width:12px;
1037
}
1038
 
1039
#fright {
1040
  float:right;
1041
  width:132px;
1042
  padding-top:8px;
1043
  color:#fff;
1044
}
1045
 
1046
#fright div {
1047
  float:left;
1048
  display:inline;
1049
  cursor:pointer;
1050
}
1051
 
1052
/* Connection Status */
1053
.connection {
1054
  width:10px;
1055
  height:7px;
1056
  border-width:1px;
1057
  border-style:solid;
1058
  border-color:#fff;
1059
  position:relative;
1060
  margin-top:2px;
1061
  margin-left:5px;
1062
}
1063
 
1064
.connection:before {
1065
  content:"";
1066
  width:0px;
1067
  height:0px;
1068
  border:2px solid #fff;
1069
  position:absolute;
1070
  top:100%;
1071
  left:3px;
1072
  margin-top:0px;
1073
}
1074
 
1075
.connection:after {
1076
  content:"";
1077
  width:6px;
1078
  height:0px;
1079
  border-bottom:1px solid #fff;
1080
  position:absolute;
1081
  top:100%;
1082
  left:2px;
1083
  margin-top:3px;
1084
}
1085
 
1086
/* Up Arrows to Show Hidden Icons in Windows */
1087
.plus {
1088
  border:1px solid transparent;
1089
  margin-bottom:12px;
1090
  width:18px;
1091
  height:15px;
1092
  margin-right:5px;
1093
  position:relative;
1094
}
1095
 
1096
.plus .screensht {
1097
  position:absolute;
1098
  margin-bottom:30px;
1099
  width:133px;
1100
  padding:14px 0;
1101
  z-index:-7;
1102
  border:1px solid rgba(255,255,255,0.4);
1103
  background:-webkit-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);
1104
  background:-moz-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);
1105
  background:-ms-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);
1106
  background:-o-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);
1107
  background:linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);
1108
  -webkit-box-shadow:inset 0 0 1px rgba(255,255,255,0.5),0 1px 3px #000,1px 5px 12px #000;
1109
  -moz-box-shadow:inset 0 0 1px rgba(255,255,255,0.5),0 1px 3px #000,1px 5px 12px #000;
1110
  box-shadow:inset 0 0 1px rgba(255,255,255,0.5),0 1px 3px #000,1px 5px 12px #000;
1111
  -webkit-border-radius:5px;
1112
  -moz-border-radius:5px;
1113
  border-radius:5px;
1114
  height:100px;
1115
  overflow:hidden;
1116
  opacity:0;
1117
  bottom:-100px;
1118
  left:-25px;
1119
  -webkit-transition:all 0.5s ease-out 0.2s;
1120
  -moz-transition:all 0.5s ease-out 0.2s;
1121
  -ms-transition:all 0.5s ease-out 0.2s;
1122
  -o-transition:all 0.5s ease-out 0.2s;
1123
  transition:all 0.5s ease-out 0.2s;
1124
}
1125
 
1126
.plus .screensht .grup {
1127
  border:1px solid #rgba(0,0,0,0.6);
1128
  width:95px;
1129
  padding:5px;
1130
  height:90px;
1131
  background:#fff;
1132
  margin-left:14px;
1133
  box-shadow:0 0 1px rgba(255,255,255,0.4);
1134
  text-align:center;
1135
}
1136
 
1137
.plus:hover {
1138
  background:#222;
1139
  background:-webkit-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);
1140
  background:-moz-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);
1141
  background:-ms-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);
1142
  background:-o-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);
1143
  background:linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);
1144
  -webkit-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);
1145
  -moz-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);
1146
  box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);
1147
  border-color:#111;
1148
  -webkit-border-radius:2px;
1149
  -moz-border-radius:2px;
1150
  border-radius:2px;
1151
}
1152
 
1153
.plus:hover .screensht {
1154
  visibility:visible;
1155
  bottom:0px;
1156
  opacity:1;
1157
  color:#000;
1158
}
1159
 
1160
.plus:after {
1161
  content:"";
1162
  width:0px;
1163
  height:0px;
1164
  border-width:5px 4px;
1165
  border-style:solid;
1166
  border-color:transparent transparent #fff transparent;
1167
  position:absolute;
1168
  left:100%;
1169
  margin-left:-13px;
1170
}
1171
 
1172
/* Speaker */
1173
.speker {
1174
  width:0px;
1175
  height:6px;
1176
  margin-top:2px;
1177
  margin-left:10px;
1178
  border-width:3px 4px;
1179
  border-style:solid;
1180
  border-color:transparent #fff transparent transparent;
1181
  position:relative;
1182
}
1183
 
1184
.speker:before {
1185
  content:"";
1186
  width:0px;
1187
  height:4px;
1188
  border-left:2px solid #fff;
1189
  position:absolute;
1190
  right:100%;
1191
  top:1px;
1192
}
1193
 
1194
/* Ugly Clock */
1195
.jam {
1196
  margin-left:10px;
1197
}
1198
 
1199
.clear {
1200
  clear:both;
1201
}
1202
 
1203
 
1204
/* Let's Dancing! */
1205
@-webkit-keyframes slow{
1206
from{-webkit-transform:translate(0px, -200px);opacity:0;}
1207
to{-webkit-transform:translate(0px, 0px);opacity:1;}
1208
}
1209
@-moz-keyframes slow{
1210
from{-moz-transform:translate(0px, -200px);opacity:0;}
1211
to{-moz-transform:translate(0px, 0px);opacity:1;}
1212
}
1213
@-ms-keyframes slow{
1214
from{-ms-transform:translate(0px, -200px);opacity:0;}
1215
to{-ms-transform:translate(0px, 0px);opacity:1;}
1216
}
1217
@keyframes slow{
1218
from{transform:translate(0px, -200px);opacity:0;}
1219
to{transform:translate(0px, 0px);opacity:1;}
1220
}
 

Untitled

CSSDeck G+