CSS
* {
margin:0 0 0 0;
padding:0 0 0 0;
list-style:none;
}
:focus {
outline:none;
}
body {
background: #D88DC7 url("http://cdn.wallpapersafari.com/30/10/wNQlWA.jpg")no-repeat;
background-attachment: fixed;
background-size: 100%;
background-position: center;
}
#w-frame {
width:800px;
border:1px solid rgba(0,0,0,0.8);
background:#222283;
background:-webkit-linear-gradient(30deg,#225283 0%,#6A92B6 50%,#5B8EB9 51%,#225283 100%);
background:-moz-linear-gradient(30deg,#225283 0%,#6A92B6 50%,#5B8EB9 51%,#225283 100%);
background:-ms-linear-gradient(30deg,#225283 0%,#6A92B6 50%,#5B8EB9 51%,#225283 100%);
background:-o-linear-gradient(30deg,#225283 0%,#6A92B6 50%,#5B8EB9 51%,#225283 100%);
background:linear-gradient(30deg,#225283 0%,#6A92B6 50%,#5B8EB9 51%,#225283 100%);
position:absolute;
top:50%;
left:50%;
margin:-200px 0px 0px -400px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0px 1px 5px #000,0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow:0px 1px 5px #000,0px 0px 10px rgba(0,0,0,0.5);
box-shadow:0px 1px 5px #000,0px 0px 10px rgba(0,0,0,0.5);
}
#w-frame-white {
background:-webkit-linear-gradient(top,rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.8) 100px,rgba(0,0,0,0) 100px);
background:-moz-linear-gradient(top,rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.8) 100px,rgba(0,0,0,0) 100px);
background:-ms-linear-gradient(top,rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.8) 100px,rgba(0,0,0,0) 100px);
background:-o-linear-gradient(top,rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.8) 100px,rgba(0,0,0,0) 100px);
background:linear-gradient(top,rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.8) 100px,rgba(0,0,0,0) 100px);
border:1px solid rgba(255,255,255,0.9);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
display:block;
height:400px;
}
#title h4 {
font:normal 12px Calibri,Arial,Sans-Serif;
color:#000;
text-shadow:0px 0px 5px #fff,0px 0px 10px #fff,0px 0px 15px #fff,0px 0px 15px #fff;
float:left;
margin:5px 0px 7px 30px;
position:relative;
}
#title h4:before,#title h4:after {
content:"";
width:10px;
height:13px;
background:#fff;
box-shadow:1px 1px 0px #666;
position:absolute;
top:1px;
right:100%;
margin-right:8px;
}
#title h4:after {
height:12px;
background:-webkit-linear-gradient(-45deg,#fff,#89CBD8);
background:-moz-linear-gradient(-45deg,#fff,#89CBD8);
background:-ms-linear-gradient(-45deg,#fff,#89CBD8);
background:-o-linear-gradient(-45deg,#fff,#89CBD8);
background:linear-gradient(-45deg,#fff,#89CBD8);
-webkit-transform:skew(-8deg) translate(-2px,0px);
-moz-transform:skew(-8deg) translate(-2px,0px);
-ms-transform:skew(-8deg) translate(-2px,0px);
-o-transform:skew(-8deg) translate(-2px,0px);
transform:skew(-8deg) translate(-2px,0px);
border-top:1px dotted #000;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#button-wrap {
width:auto;
border-width:0px 1px 1px 1px;
border-style:solid;
border-color:rgba(0,0,0,0.8);
-webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.9),-1px 0px 0px rgba(255,255,255,0.9),1px 0px 0px rgba(255,255,255,0.9);
-moz-box-shadow:0px 1px 0px rgba(255,255,255,0.9),-1px 0px 0px rgba(255,255,255,0.9),1px 0px 0px rgba(255,255,255,0.9);
box-shadow:0px 1px 0px rgba(255,255,255,0.9),-1px 0px 0px rgba(255,255,255,0.9),1px 0px 0px rgba(255,255,255,0.9);
-webkit-border-radius:0px 0px 5px 5px;
-moz-border-radius:0px 0px 5px 5px;
border-radius:0px 0px 5px 5px;
overflow:visible;
float:right;
margin:-1px 5px 0px;
}
#button-wrap .bt {
width:26px;
height:17px;
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.3) 51%,rgba(255,255,255,0.7) 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.3) 51%,rgba(255,255,255,0.7) 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.3) 51%,rgba(255,255,255,0.7) 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.3) 51%,rgba(255,255,255,0.7) 100%);
background:linear-gradient(bottom,rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.3) 51%,rgba(255,255,255,0.7) 100%);
border-right:1px solid rgba(0,0,0,0.8);
-webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.4),inset -1px 0px 0px rgba(255,255,255,0.4),inset 0px 1px 0px rgba(255,255,255,0.4),inset 0px -1px 0px rgba(255,255,255,0.4);
-moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.4),inset -1px 0px 0px rgba(255,255,255,0.4),inset 0px 1px 0px rgba(255,255,255,0.4),inset 0px -1px 0px rgba(255,255,255,0.4);
box-shadow:inset 1px 0px 0px rgba(255,255,255,0.4),inset -1px 0px 0px rgba(255,255,255,0.4),inset 0px 1px 0px rgba(255,255,255,0.4),inset 0px -1px 0px rgba(255,255,255,0.4);
position:relative;
float:right;
display:inline;
cursor:default;
}
#button-wrap .bt.close {
width:45px;
background:-webkit-linear-gradient(bottom,#D27464 0%,#A21A00 50%,#D17C6C 51%,#E5A296 100%);
background:-moz-linear-gradient(bottom,#D27464 0%,#A21A00 50%,#D17C6C 51%,#E5A296 100%);
background:-ms-linear-gradient(bottom,#D27464 0%,#A21A00 50%,#D17C6C 51%,#E5A296 100%);
background:-o-linear-gradient(bottom,#D27464 0%,#A21A00 50%,#D17C6C 51%,#E5A296 100%);
background:linear-gradient(bottom,#D27464 0%,#A21A00 50%,#D17C6C 51%,#E5A296 100%);
-webkit-border-radius:0px 0px 4px 0px;
-moz-border-radius:0px 0px 4px 0px;
border-radius:0px 0px 4px 0px;
-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.7),inset 0px 0px 1px #fff;
-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.7),inset 0px 0px 1px #fff;
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.7),inset 0px 0px 1px #fff;
border-right:none;
}
#button-wrap .bt.close:before {
content:"x";
line-height:15px;
font:bold 14px Verdana,Arial,Sans-Serif;
color:#fff;
text-shadow:0px 0px 2px #000;
position:absolute;
top:-2px;
left:18px;
}
#button-wrap .bt.maximize:before {
content:"";
width:6px;
height:4px;
border:2px solid #fff;
-webkit-box-shadow:0px 0px 1px #000,inset 0px 0px 1px #000;
-moz-box-shadow:0px 0px 1px #000,inset 0px 0px 1px #000;
box-shadow:0px 0px 1px #000,inset 0px 0px 1px #000;
position:absolute;
top:4px;
left:8px;
}
#button-wrap .bt.minimize {
-webkit-border-radius:0px 0px 0px 4px;
-moz-border-radius:0px 0px 0px 4px;
border-radius:0px 0px 0px 4px;
}
#button-wrap .bt.minimize:before {
content:"";
width:8px;
height:3px;
background:#fff;
-webkit-box-shadow:0px 0px 1px #000;
-moz-box-shadow:0px 0px 1px #000;
box-shadow:0px 0px 1px #000;
position:absolute;
bottom:5px;
left:9px;
}
#button-wrap .bt:hover {
position:relative;
z-index:10;
background:-webkit-linear-gradient(top,#06FEFB 0%,#176CA2 50%,#176AA2 51%,#A6CFEA 100%);
background:-moz-linear-gradient(top,#06FEFB 0%,#176CA2 50%,#176AA2 51%,#A6CFEA 100%);
background:-ms-linear-gradient(top,#06FEFB 0%,#176CA2 50%,#176AA2 51%,#A6CFEA 100%);
background:-o-linear-gradient(top,#06FEFB 0%,#176CA2 50%,#176AA2 51%,#A6CFEA 100%);
background:linear-gradient(top,#06FEFB 0%,#176CA2 50%,#176AA2 51%,#A6CFEA 100%);
-webkit-box-shadow:inset 0px 1px 0px #fff,0px -1px 2px #06FEFB,0px 2px 5px #06FEFB,0px 2px 10px #06FEFB;
-moz-box-shadow:inset 0px 1px 0px #fff,0px -1px 2px #06FEFB,0px 2px 5px #06FEFB,0px 2px 10px #06FEFB;
box-shadow:inset 0px 1px 0px #fff,0px -1px 2px #06FEFB,0px 2px 5px #06FEFB,0px 2px 10px #06FEFB;
}
#button-wrap .bt.close:hover {
background:-webkit-linear-gradient(top,#F7C1B9 0%,#A21A00 50%,#A5473B 51%,#D28C8E 100%);
background:-moz-linear-gradient(top,#F7C1B9 0%,#A21A00 50%,#A5473B 51%,#D28C8E 100%);
background:-ms-linear-gradient(top,#F7C1B9 0%,#A21A00 50%,#A5473B 51%,#D28C8E 100%);
background:-o-linear-gradient(top,#F7C1B9 0%,#A21A00 50%,#A5473B 51%,#D28C8E 100%);
background:linear-gradient(top,#F7C1B9 0%,#A21A00 50%,#A5473B 51%,#D28C8E 100%);
-webkit-box-shadow:inset 0px 1px 0px #fff,0px 0px 2px yellow,0px 0px 2px #F89B8B,0px 2px 5px #F89B8B,0px 2px 10px #F89B8B,0px 1px 10px #F79B8B;
-moz-box-shadow:inset 0px 1px 0px #fff,0px 0px 2px yellow,0px 0px 2px #F89B8B,0px 2px 5px #F89B8B,0px 2px 10px #F89B8B,0px 1px 10px #F79B8B;
box-shadow:inset 0px 1px 0px #fff,0px 0px 2px yellow,0px 0px 2px #F89B8B,0px 2px 5px #F89B8B,0px 2px 10px #F89B8B,0px 1px 10px #F79B8B;
}
#button-wrap .bt:active {
opacity:0.7;
filter:alpha(opacity=70);
}
#menu {
display:block;
background:#DFE4F4;
background:-webkit-linear-gradient(top,#fff 0%,#DFE4F4 50%,#D4DBED 50%,#E0E5F5 100%);
background:-moz-linear-gradient(top,#fff 0%,#DFE4F4 50%,#D4DBED 50%,#E0E5F5 100%);
background:-ms-linear-gradient(top,#fff 0%,#DFE4F4 50%,#D4DBED 50%,#E0E5F5 100%);
background:-o-linear-gradient(top,#fff 0%,#DFE4F4 50%,#D4DBED 50%,#E0E5F5 100%);
background:linear-gradient(top,#fff 0%,#DFE4F4 50%,#D4DBED 50%,#E0E5F5 100%);
border-bottom:1px solid #F0F0F0;
}
#menu ul {
font:normal 12px Calibri,Arial,Sans-Serif;
color:#000;
border-bottom:1px solid #B6BCCC;
overflow:auto;
}
#menu li {
display:inline;
float:left;
}
#menu li a {
display:block;
padding:1px 5px 1px;
margin:1px 1px 0px;
border:1px solid transparent;
color:#000;
text-decoration:none;
cursor:default;
}
#menu li a:hover,#menu li a:active,#menu li a:focus {
[Login to get rid of this advertisement]
border-color:rgba(0,0,0,0.4);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:inset 0px 0px 1px #fff;
-moz-box-shadow:inset 0px 0px 1px #fff;
box-shadow:inset 0px 0px 1px #fff;
}
#menu li a:active,#menu li a:focus {
-webkit-box-shadow:inset 0px 1px 2px rgba(0,0,0,0.7);
-moz-box-shadow:inset 0px 1px 2px rgba(0,0,0,0.7);
box-shadow:inset 0px 1px 2px rgba(0,0,0,0.7);
background:rgba(0,0,0,0.1);
}
#menu li div.sub {
position:absolute;
left:auto;
width:190px;
background:#F0F0F0;
border:1px solid #999;
text-align:left;
-webkit-box-shadow:2px 1px 2px rgba(0,0,0,0.5);
-moz-box-shadow:2px 1px 2px rgba(0,0,0,0.5);
box-shadow:2px 1px 2px rgba(0,0,0,0.5);
opacity:0;
visibility:hidden;
-webkit-transition:all 0.26s ease-out;
-moz-transition:all 0.26s ease-out;
-ms-transition:all 0.26s ease-out;
-o-transition:all 0.26s ease-out;
transition:all 0.26s ease-out;
}
#menu li:hover div.sub {
opacity:1;
visibility:visible;
}
#menu li div.sub ul {
margin-left:30px;
width:160px;
overflow:visible;
border:none;
border-left:1px solid #ddd;
-webkit-box-shadow:-1px 0px 0px #fff;
-moz-box-shadow:-1px 0px 0px #fff;
box-shadow:-1px 0px 0px #fff;
}
#menu li ul li {
display:block;
float:none;
width:188px;
margin:2px 2px 2px 0px;
position:relative;
left:-30px;
}
#menu ul li.topline {
padding:2px 0px 1px;
margin:3px 0px 2px;
}
#menu li ul li.topline:before {
content:"";
border-top:1px solid #ddd;
border-bottom:1px solid #fff;
position:absolute;
right:0px;
top:0px;
width:158px;
height:0px;
font-size:0px;
}
#menu li ul li a {
display:block;
padding:4px 10px 3px 35px;
overflow:auto;
}
#menu li ul li a:hover,#menu li ul li a:active,#menu li ul li a:focus {
background:-webkit-linear-gradient(top,rgba(255,255,255,0.1),rgba(199,218,233,0.4));
background:-moz-linear-gradient(top,rgba(255,255,255,0.1),rgba(199,218,233,0.4));
background:-ms-linear-gradient(top,rgba(255,255,255,0.1),rgba(199,218,233,0.4));
background:-o-linear-gradient(top,rgba(255,255,255,0.1),rgba(199,218,233,0.4));
background:linear-gradient(top,rgba(255,255,255,0.1),rgba(199,218,233,0.4));
border-color:rgba(89,173,241,0.4);
-webkit-box-shadow:inset 0px 0px 1px #fff;
-moz-box-shadow:inset 0px 0px 1px #fff;
box-shadow:inset 0px 0px 1px #fff;
}
#menu li ul li a span {
float:right;
margin-right:7px;
}
#menu li ul li a.disable {
color:#666;
}
#menu li div.sub.min {
width:160px !important;
}
#menu li div.sub.min li {
width:158px !important;
}
#menu li div.sub.min li.topline:before {
width:128px !important;
}
#container {
width:786px;
height:367px;
margin:0px 0px 0px 5px;
background:#fff;
border:1px solid #000;
-webkit-box-shadow:1px 1px 0px rgba(255,255,255,0.9),-1px -1px 0px rgba(255,255,255,0.9),-1px 1px 0px rgba(255,255,255,0.9),1px -1px 0px rgba(255,255,255,0.9);
-moz-box-shadow:1px 1px 0px rgba(255,255,255,0.9),-1px -1px 0px rgba(255,255,255,0.9),-1px 1px 0px rgba(255,255,255,0.9),1px -1px 0px rgba(255,255,255,0.9);
box-shadow:1px 1px 0px rgba(255,255,255,0.9),-1px -1px 0px rgba(255,255,255,0.9),-1px 1px 0px rgba(255,255,255,0.9),1px -1px 0px rgba(255,255,255,0.9);
}
#container textarea {
overflow:auto;
overflow-y:scroll;
width:784px;
height:344px;
margin:0px 0px 0px 0px;
border:1px solid #A4C9E3;
border-top-color:#3D7BAD;
font:normal 13px 'Lucida Console',Monaco,Courier,Monospace;
color:#000;
resize:none;
}
.clear{clear:both;}
