/** * =================================================================== * CSS3 Windows7 Start Menu by Taufik Nurrohman
* www.sepahna.ir-Release: 29 November 2011
* ===================================================================
*/
* {
margin:0px;
padding:0px;
list-style:none;
}
body {
background:#fff;
height:1000px;
display:block;
background:-webkit-radial-gradient(bottom,circle,#FACF0C,#4BB648);
background:-moz-radial-gradient(bottom,circle,#FACF0C,#4BB648);
background:-ms-radial-gradient(bottom,circle,#FACF0C,#4BB648);
background:-o-radial-gradient(bottom,circle,#FACF0C,#4BB648);
background:radial-gradient(bottom,circle,#FACF0C,#4BB648);
}
a {
text-decoration:none;
color:#444;
}
a:hover {
text-decoration:underline;
cursor:pointer;
}
/* Header */
#author {
font:italic 14px Cambaria,Georgia,Serif;
color:#666;
margin:15px;
}
#author h1 {
font:bold 32px 'Showcard Gothic','Century Gothic',Arial,Sans-Serif;
margin:0 10px;
color:#437924;
text-shadow:0 1px 0px rgba(255,255,255,0.4);
position:relative;
-webkit-animation:slow 2s;
-moz-animation:slow 2s;
-ms-animation:slow 2s;
animation:slow 2s;
}
#author .deskripsi {
margin:10px 10px 10px;
padding:10px;
background:#F6EEAB;
background:-webkit-linear-gradient(top,#ECDE8C,#F6EEAB);
background:-moz-linear-gradient(top,#ECDE8C,#F6EEAB);
background:-ms-linear-gradient(top,#ECDE8C,#F6EEAB);
background:-o-linear-gradient(top,#ECDE8C,#F6EEAB);
background:linear-gradient(top,#ECDE8C,#F6EEAB);
border:1px solid #DCC56C;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);
box-shadow:0 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
position:relative;
z-index:4;
-webkit-animation:slow 1s;
-moz-animation:slow 1s;
-ms-animation:slow 1s;
animation:slow 1s;
}
#author .deskripsi:before {
content:"";
width:0px;
height:0px;
border-width:12px;
border-style:solid;
border-color:#DCC56C transparent transparent transparent;
position:absolute;
top:100%;
left:19px;
z-index:-1;
}
#author .deskripsi:after {
content:"";
width:0px;
height:0px;
border-width:10px;
border-style:solid;
border-color:#F6EEAB transparent transparent transparent;
position:absolute;
top:100%;
left:21px;
}
/* Horizontal Bar */
#startbar {
position:fixed;
bottom:0px;
left:0px;
z-index:1000;
width:100%;
height:30px;
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));
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));
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));
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));
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));
border-top:1px solid rgba(0,0,0,0.5);
-webkit-box-shadow:inset 0 1px 0px rgba(255,255,255,0.4);
-moz-box-shadow:inset 0 1px 0px rgba(255,255,255,0.4);
box-shadow:inset 0 1px 0px rgba(255,255,255,0.4);
font:normal 12px Calibri,Arial,Sans-Serif;
}
/* Windows Logo */
#win {
width:35px;
height:35px;
background:-webkit-radial-gradient(50% 90%,circle closest-corner,#07D9F9,#03456F 100%,#fff 300% );
background:-moz-radial-gradient(50% 90%,circle closest-corner,#07D9F9,#03456F 100%,#fff 300% );
background:-ms-radial-gradient(50% 90%,circle closest-corner,#07D9F9,#03456F 100%,#fff 300% );
background:-o-radial-gradient(50% 90%,circle closest-corner,#07D9F9,#03456F 100%,#fff 300% );
background:radial-gradient(50% 90%,circle closest-corner,#07D9F9,#03456F 100%,#fff 300% );
border:1px solid #4A676F;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
-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);
-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);
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);
margin-top:-5px;
margin-left:10px;
margin-right:20px;
display:block;
position:relative;
float:left;
cursor:pointer;
webkit-transition:all 0.4s linear;
-moz-transition:all 0.4s linear;
-ms-transition:all 0.4s linear;
-o-transition:all 0.4s linear;
transition:all 0.4s linear;
}
#cont-win {
position:relative;
left:7px;
top:9px;
-webkit-transform:skew(-4deg,-7deg) rotate(17deg);
-moz-transform:skew(-4deg,-7deg) rotate(17deg);
-ms-transform:skew(-4deg,-7deg) rotate(17deg);
-o-transform:skew(-4deg,-7deg) rotate(17deg);
transform:skew(-4deg,-7deg) rotate(17deg);
display:block;
}
.w1,.w2,.w3,.w4 {
width:8px;
height:8px;
float:left;
margin:1px;
background:#000;
-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.4);
-moz-box-shadow:1px 1px 1px rgba(0,0,0,0.4);
box-shadow:1px 1px 1px rgba(0,0,0,0.4);
-webkit-transform:skew(-4deg,-7deg);
-moz-transform:skew(-4deg,-7deg);
-ms-transform:skew(-4deg,-7deg);
-o-transform:skew(-4deg,-7deg);
transform:skew(-4deg,-7deg);
}
.w1 {
background:#BF321C;
background:-webkit-radial-gradient(right bottom,circle cover,#fff,#E9A72E,#BF321C);
background:-moz-radial-gradient(right bottom,circle cover,#fff,#E9A72E,#BF321C);
background:-ms-radial-gradient(right bottom,circle cover,#fff,#E9A72E,#BF321C);
background:-o-radial-gradient(right bottom,circle cover,#fff,#E9A72E,#BF321C);
background:radial-gradient(right bottom,circle cover,#fff,#E9A72E,#BF321C);
}
.w2 {
background:#74A647;
background:-webkit-radial-gradient(left bottom,circle cover,#fff,#C1D687,#74A647);
background:-moz-radial-gradient(left bottom,circle cover,#fff,#C1D687,#74A647);
background:-ms-radial-gradient(left bottom,circle cover,#fff,#C1D687,#74A647);
background:-o-radial-gradient(left bottom,circle cover,#fff,#C1D687,#74A647);
background:radial-gradient(left bottom,circle cover,#fff,#C1D687,#74A647);
}
.w3 {
background:#399FD3;
background:-webkit-radial-gradient(right top,circle cover,#fff,#97D3F2,#399FD3);
background:-moz-radial-gradient(right top,circle cover,#fff,#97D3F2,#399FD3);
background:-ms-radial-gradient(right top,circle cover,#fff,#97D3F2,#399FD3);
background:-o-radial-gradient(right top,circle cover,#fff,#97D3F2,#399FD3);
background:radial-gradient(right top,circle cover,#fff,#97D3F2,#399FD3);
}
.w4 {
background:#FCCC2E;
background:-webkit-radial-gradient(left top,circle cover,#fff,#F7DF95,#FCCC2E);
background:-moz-radial-gradient(left top,circle cover,#fff,#F7DF95,#FCCC2E);
background:-ms-radial-gradient(left top,circle cover,#fff,#F7DF95,#FCCC2E);
background:-o-radial-gradient(left top,circle cover,#fff,#F7DF95,#FCCC2E);
background:radial-gradient(left top,circle cover,#fff,#F7DF95,#FCCC2E);
}
/* Menus */
#menu {
position:absolute;
left:-11px;
z-index:-1;
width:400px;
height:auto;
padding:6px;
background:-webkit-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5));
background:-moz-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5));
background:-ms-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5));
background:-o-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5));
background:linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5));
border:1px solid rgba(0,0,0,0.6);
border-bottom-width:2px;
-webkit-box-shadow:inset 0px 0px 1px rgba(255,255,255,2.5);
moz-box-shadow:inset 0px 0px 1px rgba(255,255,255,2.5);
box-shadow:inset 0px 0px 1px rgba(255,255,255,2.5);
border-radius:7px 7px 0 0;
visibility:hidden;
opacity:0;
bottom:31px;
-webkit-transition:all 0.2s ease-out 0.2s;
-moz-transition:all 0.2s ease-out 0.2s;
-ms-transition:all 0.2s ease-out 0.2s;
-o-transition:all 0.2s ease-out 0.2s;
transition:all 0.2s ease-out 0.2s;
cursor:default;
}
#win:hover {
-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);
-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);
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);
}
#win:hover #menu {
visibility:visible;
opacity:1;
}
#menu .left-menu {
float:left;
display:inline;
background:#fff;
width:250px;
height:407px;
border:1px solid rgba(0,0,0,0.6);
-webkit-box-shadow:0px 0px 1px rgba(255,255,255,0.5);
-moz-box-shadow:0px 0px 1px rgba(255,255,255,0.5);
box-shadow:0px 0px 1px rgba(255,255,255,0.5);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
position:relative;
}
/* Search Form */
#menu .left-menu form#search {
width:250px;
background:#E4F4FC;
border-top:2px solid #BEE6FD;
padding:10px 0;
position:absolute;
bottom:0px;
left:0px;
-webkit-border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
}
#menu .left-menu form#search input {
background:#fff;
border:1px solid #aaa;
padding:3px 5px;
margin:0 14px;
font:italic 12px Calibri,Arial,Sans-Serif;
color:#999;
width:202px;
position:relative;
}
/* Loupe */
#menu .left-menu form#search:after {
content:"";
width:5px;
height:5px;
border:1px solid #666;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
position:absolute;
left:100%;
margin-left:-37px;
top:16px;
}
#menu .left-menu form#search:before {
content:"";
width:3px;
height:0px;
border:1px solid #666;
position:absolute;
z-index:3;
left:100%;
margin-left:-41px;
top:23px;
-webkit-transform:rotate(-41deg);
-moz-transform:rotate(-41deg);
-ms-transform:rotate(-41deg);
-o-transform:rotate(-41deg);
transform:rotate(-41deg);
}
#menu .left-menu ul {
padding:2px;
margin:0px;
}
#menu .left-menu li {
margin:0px;
padding:0px;
list-style:none;
width:246px;
text-align:left;
}
#menu .left-menu li a {
color:#222;
text-decoration:none;
line-height:27px;
margin-bottom:1px;
padding:0px 12px;
border:1px solid transparent;
display:block;
position:relative;
}
/* Making Arrow with CSS Pseudo Element */
#menu .left-menu li a.arrow:after {
content:"";
width:0px;
height:0px;
position:absolute;
left:100%;
top:9px;
margin-left:-16px;
border-width:5px;
border-style:solid;
border-color:transparent transparent transparent #222;
}
/* Sliding Menu To Show the Recent Documents */
#menu .left-menu .recent {
width:142px;
padding:3px;
background:#F4F7FB;
-webkit-box-shadow:inset 1px 0px 1px rgba(0,0,0,0.2);
-moz-box-shadow:inset 1px 0px 1px rgba(0,0,0,0.2);
box-shadow:inset 1px 0px 1px rgba(0,0,0,0.2);
height:402px;
position:absolute;
z-index:1000;
top:0px;
left:245px;
visibility:hidden;
opacity:0;
-webkit-border-radius:0 3px 3px 0;
-moz-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
-webkit-transition:all 0.2s ease-out 0.2s;
-moz-transition:all 0.2s ease-out 0.2s;
-ms-transition:all 0.2s ease-out 0.2s;
-o-transition:all 0.2s ease-out 0.2s;
transition:all 0.2s ease-out 0.2s;
}
#menu .left-menu .recent hr {
border:none !important;
height:1px;
overflow:visible;
background:#e6e6e6;
position:relative;
margin:10px 2px;
}
#menu .left-menu .recent hr:before {
content:"Recent";
padding:0 5px 0 2px;
font-size:12px;
color:#045182;
position:absolute;
left:0px;
top:-8px;
margin-right:-50px;
background:#F4F7FB;
}
#menu .left-menu li:hover .recent {
left:249px;
visibility:visible;
opacity:1;
}
#menu .left-menu li li {
width:138px !important;
}
#menu .left-menu li li a {
padding:0 5px;
line-height:16px !important;
margin-bottom:2px;
}
#menu .left-menu li a:hover {
background:-webkit-linear-gradient(top,#E4F4FC,#ACDCF7);
background:-moz-linear-gradient(top,#E4F4FC,#ACDCF7);
background:-ms-linear-gradient(top,#E4F4FC,#ACDCF7);
background:-o-linear-gradient(top,#E4F4FC,#ACDCF7);
background:linear-gradient(top,#E4F4FC,#ACDCF7);
border-color:#0CC0E1;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:inset 0 0 3px #fff;
-moz-box-shadow:inset 0 0 3px #fff;
box-shadow:inset 0 0 3px #fff;
}
#menu .left-menu li.all-prog {
position:absolute;
bottom:48px;
left:2px;
border-top:1px solid #eee;
padding-top:3px;
}
#menu .left-menu li.all-prog a {
line-height:22px;
padding:0 0 0 34px;
}
/* My Words */
#menu .left-menu li.all-prog .recent.all {
width:220px;
height:400px;
padding:5px 15px;
font:normal 16px 'Comic Sans MS',Times,Serif;
text-shadow:0 0 1px rgba(0,0,0,0.6);
position:absolute;
top:0px;
left:0px;
margin-left:-2px;
margin-top:-333px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
background:#fff;
-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0 0 1px rgba(0,0,0,0.5);
box-shadow:inset 0 0 1px rgba(0,0,0,0.5);
}
#menu .left-menu li.all-prog a:before {
content:"";
position:absolute;
right:100%;
top:7px;
margin-right:-15px;
border-width:4px 5px;
border-style:solid;
border-color:transparent transparent transparent #111;
display:block;
}
.fleft {
float:left;
margin:3px 10px 0px -10px;
position:relative;
}
/* Creating Folders with CSS Gradients and Pseudo Elements */
.foldr {
width:20px;
height:15px;
margin-top:6px;
background:#F6EEAB;
background:-webkit-linear-gradient(top,#ECDE8C,#F6EEAB);
background:-moz-linear-gradient(top,#ECDE8C,#F6EEAB);
background:-ms-linear-gradient(top,#ECDE8C,#F6EEAB);
background:-o-linear-gradient(top,#ECDE8C,#F6EEAB);
background:linear-gradient(top,#ECDE8C,#F6EEAB);
border:1px solid #DCC56C;
-webkit-box-shadow:0 1px 0px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 0px rgba(0,0,0,0.2);
box-shadow:0 1px 0px rgba(0,0,0,0.2);
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.foldr:before {
content:"";
width:8px;
height:0px;
border-top:3px solid #DCC56C;
display:block;
position:absolute;
bottom:100%;
left:0px;
}
/* Microsoft Word */
.mw {
width:12px;
height:10px;
margin-left:-4px;
border:2px solid #fff;
background:-webkit-linear-gradient(top,#fff,#0E70A9,#fff,#0E70A9,#fff,#fff,#0E70A9,#fff,#0E70A9);
background:-moz-linear-gradient(top,#fff,#0E70A9,#fff,#0E70A9,#fff,#fff,#0E70A9,#fff,#0E70A9);
background:-ms-linear-gradient(top,#fff,#0E70A9,#fff,#0E70A9,#fff,#fff,#0E70A9,#fff,#0E70A9);
background:-o-linear-gradient(top,#fff,#0E70A9,#fff,#0E70A9,#fff,#fff,#0E70A9,#fff,#0E70A9);
background:linear-gradient(top,#fff,#0E70A9,#fff,#0E70A9,#fff,#fff,#0E70A9,#fff,#0E70A9);
color:#023B62;
-webkit-box-shadow:1px 1px 0px #bbb,-2px 4px 0px #0E70A9;
-moz-box-shadow:1px 1px 0px #bbb,-2px 4px 0px #0E70A9;
box-shadow:1px 1px 0px #bbb,-2px 4px 0px #0E70A9;
position:relative;
}
.mw:before {
content:"w";
position:absolute;
top:0px;
left:0px;
background:#fff;
border:2px solid #fff;
font-size:8px;
line-height:6px;
}
/* Opera Web Browser */
.op {
font:bold 22px Cambaria,Georgia,Times,Serif;
color:#B73941;
line-height:normal;
margin-top:0px;
margin-left:-8px;
text-shadow:0 1px 1px #ddd;
position:relative;
}
/* Create Opera Shadow */
.op:after {
content:"";
width:10px;
height:1px;
background:#666;
-webkit-box-shadow:0 0 3px #000;
-moz-box-shadow:0 0 3px #000;
box-shadow:0 0 3px #000;
display:block;
position:absolute;
top:86%;
left:4px;
}
/* Ugly Internet Explorer.. */
.ie {
font:bold 30px Georgia,Serif;
color:#066298;
line-height:normal;
margin-top:-6px;
margin-left:-8px;
position:relative;
}
.ie:after {
content:"";
width:18px;
height:2px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:0px 3px 0px #FAD149,0px 1px 1px rgba(0,0,0,0.6);
-moz-box-shadow:0px 3px 0px #FAD149,0px 1px 1px rgba(0,0,0,0.6);
box-shadow:0px 3px 0px #FAD149,0px 1px 1px rgba(0,0,0,0.6);
position:absolute;
top:42%;
left:-4px;
-webkit-transform:rotate(-36deg);
-moz-transform:rotate(-36deg);
-ms-transform:rotate(-36deg);
-o-transform:rotate(-36deg);
transform:rotate(-36deg);
}
/* Notepad */
.np {
width:16px;
height:20px;
background:-webkit-linear-gradient(-45deg,#fff 0%,#71CCE0 100%);
background:-moz-linear-gradient(-45deg,#fff 0%,#71CCE0 100%);
background:-ms-linear-gradient(-45deg,#fff 0%,#71CCE0 100%);
background:-o-linear-gradient(-45deg,#fff 0%,#71CCE0 100%);
background:linear-gradient(-45deg,#fff 0%,#71CCE0 100%);
position:relative;
-webkit-transform:skew(2deg,2deg) rotate(-2deg) translate(4px,0px);
-moz-transform:skew(2deg,2deg) rotate(-2deg) translate(4px,0px);
-ms-transform:skew(2deg,2deg) rotate(-2deg) translate(4px,0px);
-o-transform:skew(2deg,2deg) rotate(-2deg) translate(4px,0px);
transform:skew(2deg,2deg) rotate(-2deg) translate(4px,0px);
margin-right:15px;
-webkit-box-shadow:-2px 1px 0px #4A9BCD;
-moz-box-shadow:-2px 1px 0px #4A9BCD;
box-shadow:-2px 1px 0px #4A9BCD;
}
/* Adobe Fl (what is this?) */
.ai {
width:6px;
height:6px;
line-height:normal;
color:#fff;
font:bold 8px Verdana,Arial,Sans-Serif;
padding:6px;
margin-left:-10px;
margin-right:15px;
left:0px;
background:-webkit-linear-gradient(45deg,#EA6E56,#A71D07,#fff);
background:-moz-linear-gradient(45deg,#EA6E56,#A71D07,#fff);
background:-ms-linear-gradient(45deg,#EA6E56,#A71D07,#fff);
background:-o-linear-gradient(45deg,#EA6E56,#A71D07,#fff);
background:linear-gradient(45deg,#EA6E56,#A71D07,#fff);
-webkit-box-shadow:0 0 1px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 1px rgba(0,0,0,0.8);
box-shadow:0 0 1px rgba(0,0,0,0.8);
}
/* Right Menu */
#menu .right-menu {
width:140px;
float:right;
display:inline;
}
#menu .right-menu ul,#menu .right-menu li {
margin:0;
padding:0;
list-style:none;
display:block;
}
#menu .right-menu ul {
margin-top:60px;
margin-bottom:15px;
}
#menu .right-menu li a {
padding:8px 7px 7px;
display:block;
font:normal 12px Calibri,Arial,Sans-Serif;
color:#fff;
text-decoration:none;
margin-bottom:3px;
width:124px;
border:1px solid transparent;
display:block;
}
#menu .right-menu li a:hover {
background:#222;
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%);
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%);
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%);
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%);
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%);
border-color:#111;
-webkit-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 1px rgba(255,255,255,0.8);
-moz-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 1px rgba(255,255,255,0.8);
box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 1px rgba(255,255,255,0.8);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
/* Shut Down Button */
.shutdown {
width:84px;
font:bold 12px Calibri,Arial,Sans-Serif;
text-shadow:0 1px 2px #000;
color:#fff;
background:#222;
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%);
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%);
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%);
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%);
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%);
border:1px solid #111;
margin-bottom:12px;
-webkit-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);
-moz-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);
box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
cursor:pointer;
}
.shutdown:hover {
-webkit-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 5px rgba(255,255,255,1);
-moz-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 5px rgba(255,255,255,1);
box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 5px rgba(255,255,255,1);
}
.shutdown div.lf {
padding:4px 5px;
position:relative;
}
.shutdown div.lf:after {
content:"";
padding:0px 6px;
margin-left:7px;
border-left:1px solid #111;
-webkit-box-shadow:-1px 0px 0px rgba(255,255,255,0.3);
-moz-box-shadow:-1px 0px 0px rgba(255,255,255,0.3);
box-shadow:-1px 0px 0px rgba(255,255,255,0.3);
}
/* Create Arrow */
.shutdown div.lf:before {
content:"";
width:0px;
height:0px;
position:absolute;
left:100%;
top:7px;
margin-left:-13px;
border-width:4px 4px;
border-style:solid;
border-color:transparent transparent transparent #fff;
}
/* Admin */
#menu #kontener {
position:absolute;
top:0px;
right:48px;
margin-top:-20px;
z-index:10;
background:-webkit-linear-gradient(-47deg,rgba(255,255,255,0.5) 0%,#666 81%,#fff 100%);
background:-moz-linear-gradient(-47deg,rgba(255,255,255,0.5) 0%,#666 81%,#fff 100%);
background:-ms-linear-gradient(-47deg,rgba(255,255,255,0.5) 0%,#666 81%,#fff 100%);
background:-o-linear-gradient(-47deg,rgba(255,255,255,0.5) 0%,#666 81%,#fff 100%);
background:linear-gradient(-47deg,rgba(255,255,255,0.5) 0%,#666 81%,#fff 100%);
padding:3px;
border:1px solid #444;
-webkit-box-shadow:inset 1px 0px 1px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.5);
-moz-box-shadow:inset 1px 0px 1px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.5);
box-shadow:inset 1px 0px 1px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.5);
border-radius:5px;
}
#menu #kontener .admin {
width:50px;
height:48px;
border:1px solid rgba(0,0,0,0.5);
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
background:-webkit-radial-gradient(bottom,circle,#FACF0C,#4BB648);
background:-moz-radial-gradient(bottom,circle,#FACF0C,#4BB648);
background:-ms-radial-gradient(bottom,circle,#FACF0C,#4BB648);
background:-o-radial-gradient(bottom,circle,#FACF0C,#4BB648);
background:radial-gradient(bottom,circle,#FACF0C,#4BB648);
-webkit-box-shadow:inset 0 -1px 7px #fff;
-moz-box-shadow:inset 0 -1px 7px #fff;
box-shadow:inset 0 -1px 7px #fff;
position:relative;
}
/* Minimized Windows */
#list {
float:left;
display:inline;
}
.opened {
width:38px;
height:25px;
text-align:center;
background:#222;
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%);
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%);
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%);
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%);
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%);
border:1px solid rgba(255,255,255,0.4);
-webkit-box-shadow:0 0 1px rgba(0,0,0,0.9);
-moz-box-shadow:0 0 1px rgba(0,0,0,0.9);
box-shadow:0 0 1px rgba(0,0,0,0.9);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
float:left;
margin:2px 2px 0;
cursor:pointer;
}
.opened.pilled {
position:relative;
}
.opened .np {
border:none;
width:12px !important;
height:12px;
-webkit-transform:skew(2deg,2deg) rotate(-2deg) translate(0px,0px);
-moz-transform:skew(2deg,2deg) rotate(-2deg) translate(0px,0px);
-ms-transform:skew(2deg,2deg) rotate(-2deg) translate(0px,0px);
-o-transform:skew(2deg,2deg) rotate(-2deg) translate(0px,0px);
transform:skew(2deg,2deg) rotate(-2deg) translate(0px,0px);
}
.opened.pilled:before {
content:"";
width:38px;
height:25px;
background:#222;
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%);
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%);
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%);
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%);
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%);
border:1px solid rgba(255,255,255,0.4);
-webkit-box-shadow:0 0 1px rgba(0,0,0,0.9);
-moz-box-shadow:0 0 1px rgba(0,0,0,0.9);
box-shadow:0 0 1px rgba(0,0,0,0.9);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
position:absolute;
top:-1px;
left:2px;
-webkit-transition:all 0.2s ease-out;
-moz-transition:all 0.2s ease-out;
-ms-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
transition:all 0.2s ease-out;
}
.opened.pilled:hover:before {
left:100%;
margin-left:4px;
}
.opened .foldr.small {
margin:4px auto 0;
width:20px;
height:15px;
}
.opened .foldr.small:before {
display:none;
}
/* Preview of Minimized Windows */
.opened .screensht {
position:absolute;
margin-bottom:40px;
width:399px;
padding:10px 0;
z-index:-7;
border:1px solid rgba(255,255,255,0.5);
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%);
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%);
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%);
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%);
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%);
-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;
-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;
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;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
height:128px;
overflow:hidden;
opacity:0;
bottom:-200px;
-webkit-transition:all 0.5s ease-out 0.35s;
-moz-transition:all 0.5s ease-out 0.35s;
-ms-transition:all 0.5s ease-out 0.35s;
-o-transition:all 0.5s ease-out 0.35s;
transition:all 0.5s ease-out 0.35s;
cursor:default;
}
/* Close Button */
.opened .screensht .close {
position:absolute;
top:7px;
right:7px;
color:#fff;
line-height:12px;
padding:0px 0px;
text-align:center;
width:12px;
border:1px solid rgba(0,0,0,0.5);
background:#AE3110;
background:-webkit-linear-gradient(90deg,#EA6E56,#A71D07,#fff);
background:-moz-linear-gradient(90deg,#EA6E56,#A71D07,#fff);
background:-ms-linear-gradient(90deg,#EA6E56,#A71D07,#fff);
background:-o-linear-gradient(90deg,#EA6E56,#A71D07,#fff);
background:linear-gradient(90deg,#EA6E56,#A71D07,#fff);
-webkit-box-shadow:inset 0 0 1px rgba(255,255,255,0.7);
-moz-box-shadow:inset 0 0 1px rgba(255,255,255,0.7);
box-shadow:inset 0 0 1px rgba(255,255,255,0.7);
text-shadow:0 0 1px #000;
font:bold Arial,Sans-Serif;
opacity:0.2;
-webkit-transition:all 0.2s ease-out;
-moz-transition:all 0.2s ease-out;
-ms-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
transition:all 0.2s ease-out;
cursor:pointer;
}
.opened:hover .screensht {
opacity:1;
bottom:0px;
}
.opened .screensht .col1:hover .close,.opened .screensht .col2:hover .close {
visibility:visible;
opacity:1;
}
.opened .screensht .col1,.opened .screensht .col2 {
width:174px;
height:116px;
padding:5px;
color:#fff;
float:left;
margin-left:9px;
background:transparent;
border:1px solid transparent;
position:relative;
}
.opened .screensht .kotak {
width:170px;
height:90px;
margin:24px auto 1px;
border:1px solid #000;
background:#fafafa;
background:-webkit-linear-gradient(45deg,#fff,#ddd,#fff,#ddd);
background:-moz-linear-gradient(45deg,#fff,#ddd,#fff,#ddd);
background:-ms-linear-gradient(45deg,#fff,#ddd,#fff,#ddd);
background:-o-linear-gradient(45deg,#fff,#ddd,#fff,#ddd);
background:linear-gradient(45deg,#fff,#ddd,#fff,#ddd);
-webkit-box-shadow:0 0 1px rgba(255,255,255,0.8);
-moz-box-shadow:0 0 1px rgba(255,255,255,0.8);
box-shadow:0 0 1px rgba(255,255,255,0.8);
}
.opened.tunggal .screensht {
width:204px;
padding:10px 0;
}
.opened.tunggal .screensht .col1 {
width:174px;
padding:5px;
margin-left:9px;
float:none !important;
display:block;
position:relative;
}
.opened .screensht .col1:hover,.opened .screensht .col2:hover {
background:rgba(255,255,255,0.2);
border:1px solid rgba(255,255,255,0.2);
}
.opened.tunggal .screensht .col1.fold:before {
content:"My Documents";
position:absolute;
display:block;
top:7px;
left:7px;
}
.opened.tunggal .screensht .col1.ntpad:before {
content:"I love CSS3";
position:absolute;
display:block;
top:7px;
left:7px;
}
.opened .screensht .blank:before {
content:"Not Available";
position:absolute;
display:block;
top:7px;
left:7px;
}
.opened:hover {
-webkit-box-shadow:inset 0px 1px 1px #fff;
-moz-box-shadow:inset 0px 1px 1px #fff;
box-shadow:inset 0px 1px 1px #fff;
}
/* Show Desktop (see the right bottom of Windows) */
.opened.hide {
float:right;
width:12px;
}
#fright {
float:right;
width:132px;
padding-top:8px;
color:#fff;
}
#fright div {
float:left;
display:inline;
cursor:pointer;
}
/* Connection Status */
.connection {
width:10px;
height:7px;
border-width:1px;
border-style:solid;
border-color:#fff;
position:relative;
margin-top:2px;
margin-left:5px;
}
.connection:before {
content:"";
width:0px;
height:0px;
border:2px solid #fff;
position:absolute;
top:100%;
left:3px;
margin-top:0px;
}
.connection:after {
content:"";
width:6px;
height:0px;
border-bottom:1px solid #fff;
position:absolute;
top:100%;
left:2px;
margin-top:3px;
}
/* Up Arrows to Show Hidden Icons in Windows */
.plus {
border:1px solid transparent;
margin-bottom:12px;
width:18px;
height:15px;
margin-right:5px;
position:relative;
}
.plus .screensht {
position:absolute;
margin-bottom:30px;
width:133px;
padding:14px 0;
z-index:-7;
border:1px solid rgba(255,255,255,0.4);
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%);
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%);
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%);
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%);
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%);
-webkit-box-shadow:inset 0 0 1px rgba(255,255,255,0.5),0 1px 3px #000,1px 5px 12px #000;
-moz-box-shadow:inset 0 0 1px rgba(255,255,255,0.5),0 1px 3px #000,1px 5px 12px #000;
box-shadow:inset 0 0 1px rgba(255,255,255,0.5),0 1px 3px #000,1px 5px 12px #000;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
height:100px;
overflow:hidden;
opacity:0;
bottom:-100px;
left:-25px;
-webkit-transition:all 0.5s ease-out 0.2s;
-moz-transition:all 0.5s ease-out 0.2s;
-ms-transition:all 0.5s ease-out 0.2s;
-o-transition:all 0.5s ease-out 0.2s;
transition:all 0.5s ease-out 0.2s;
}
.plus .screensht .grup {
border:1px solid #rgba(0,0,0,0.6);
width:95px;
padding:5px;
height:90px;
background:#fff;
margin-left:14px;
box-shadow:0 0 1px rgba(255,255,255,0.4);
text-align:center;
}
.plus:hover {
background:#222;
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%);
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%);
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%);
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%);
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%);
-webkit-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);
-moz-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);
box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);
border-color:#111;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.plus:hover .screensht {
visibility:visible;
bottom:0px;
opacity:1;
color:#000;
}
.plus:after {
content:"";
width:0px;
height:0px;
border-width:5px 4px;
border-style:solid;
border-color:transparent transparent #fff transparent;
position:absolute;
left:100%;
margin-left:-13px;
}
/* Speaker */
.speker {
width:0px;
height:6px;
margin-top:2px;
margin-left:10px;
border-width:3px 4px;
border-style:solid;
border-color:transparent #fff transparent transparent;
position:relative;
}
.speker:before {
content:"";
width:0px;
height:4px;
border-left:2px solid #fff;
position:absolute;
right:100%;
top:1px;
}
/* Ugly Clock */
.jam {
margin-left:10px;
}
.clear {
clear:both;
}
/* Let's Dancing! */
@-webkit-keyframes slow{
from{-webkit-transform:translate(0px, -200px);opacity:0;}
to{-webkit-transform:translate(0px, 0px);opacity:1;}
}
@-moz-keyframes slow{
from{-moz-transform:translate(0px, -200px);opacity:0;}
to{-moz-transform:translate(0px, 0px);opacity:1;}
}
@-ms-keyframes slow{
from{-ms-transform:translate(0px, -200px);opacity:0;}
to{-ms-transform:translate(0px, 0px);opacity:1;}
}
@keyframes slow{
from{transform:translate(0px, -200px);opacity:0;}
to{transform:translate(0px, 0px);opacity:1;} }
حمایت شدهThanks :
