Show window
body {
background-color: #0663c3;
font-family: Arial;
font-size: 15px;
}
.window {
width: 500px;
height: 200px;
position: relative;
top: 20px;
left: 50px;
background: -webkit-linear-gradient(30deg, #5591ce 0%, #0d61ba 20%, #3780cb 28%, #166ac1 34%, #66a0d9 60%, #166ac1 70%, #5591ce 100%);
background: -moz-linear-gradient(30deg, #5591ce 0%, #0d61ba 20%, #3780cb 28%, #166ac1 34%, #66a0d9 60%, #166ac1 70%, #5591ce 100%);
background: -o-linear-gradient(30deg, #5591ce 0%, #0d61ba 20%, #3780cb 28%, #166ac1 34%, #66a0d9 60%, #166ac1 70%, #5591ce 100%);
background: -ms-linear-gradient(30deg, #5591ce 0%, #0d61ba 20%, #3780cb 28%, #166ac1 34%, #66a0d9 60%, #166ac1 70%, #5591ce 100%);
border: 1px solid #041627;
box-shadow: inset 1px 1px rgba(219, 229, 240, 0.8),
inset -1px -1px rgba(219, 229, 240, 0.8),
0 0 20px black;
border-radius: 7px;
}
.buttons {
width: 102px;
height: 19px;
position: absolute;
top: 0;
right: 7px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.6);
border-top: none;
}
.button {
border: none;
outline: none;
position: absolute;
cursor: default;
-webkit-transition: all 150ms;
-moz-transition: all 150ms;
-o-transition: all 150ms;
-ms-transition: all 150ms;
transition: all 150ms;
}
.close-button {
width: 46px;
height: 18px;
right: 1px;
background: -webkit-linear-gradient(top, #d1a2a3 0%, #c1736e 49%, #b33c2e 50%, #cea6a5 100%);
background: -moz-linear-gradient(top, #d1a2a3 0%, #c1736e 49%, #b33c2e 50%, #cea6a5 100%);
background: -o-linear-gradient(top, #d1a2a3 0%, #c1736e 49%, #b33c2e 50%, #cea6a5 100%);
background: -ms-linear-gradient(top, #d1a2a3 0%, #c1736e 49%, #b33c2e 50%, #cea6a5 100%);
box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.4),
inset -1px 0 0 rgba(255, 255, 255, 0.4),
inset 0 1px 0 #fff,
-1px 1px 0 rgba(118, 29, 16, 0.5),
1px 0 0 rgba(118, 29, 16, 0.7);
border-bottom-right-radius: 4px;
}
.close-button:hover {
background: -webkit-linear-gradient(#f89c8c 0%, #e86c57 49%, #aa210c 50%, #e6942f 100%);
background: -moz-linear-gradient(#f89c8c 0%, #e86c57 49%, #aa210c 50%, #e6942f 100%);
background: -o-linear-gradient(#f89c8c 0%, #e86c57 49%, #aa210c 50%, #e6942f 100%);
background: -ms-linear-gradient(#f89c8c 0%, #e86c57 49%, #aa210c 50%, #e6942f 100%);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(245, 228, 119, 0.4),
inset -1px 0 0 rgba(255, 255, 255, 0.4),
inset 0 1px 0 #fff,
-1px 1px 0 rgba(118, 29, 16, 0.5),
1px 0 0 rgba(118, 29, 16, 0.7),
0 0 10px red,
-1px -1px 10px rgba(255, 0, 0, 0.3),
1px 1px 10px rgba(255, 0, 0, 0.3);
}
.close-button:active {
background: -webkit-linear-gradient(#bc9881 0%, #b8755b 49%, #5e1307 50%, #b88b2a 100%);
background: -moz-linear-gradient(#bc9881 0%, #b8755b 49%, #5e1307 50%, #b88b2a 100%);
background: -o-linear-gradient(#bc9881 0%, #b8755b 49%, #5e1307 50%, #b88b2a 100%);
background: -ms-linear-gradient(#bc9881 0%, #b8755b 49%, #5e1307 50%, #b88b2a 100%);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(245, 228, 119, 0.4),
inset -1px 0 0 #ffcd00,
inset 0 1px 0 #fff,
-1px 1px 0 rgba(118, 29, 16, 0.5),
1px 0 0 rgba(118, 29, 16, 0.7),
0 0 10px red,
-1px -1px 10px rgba(255, 0, 0, 0.3),
1px 1px 10px rgba(255, 0, 0, 0.3);
}
.maximize-button, .minimize-button {
width: 26px;
height: 18px;
background: -webkit-linear-gradient(top, #b5c8dd 0%, #8ca6c3 49%, #52769f 50%, #7da4d6 100%);
background: -moz-linear-gradient(top, #b5c8dd 0%, #8ca6c3 49%, #52769f 50%, #7da4d6 100%);
background: -o-linear-gradient(top, #b5c8dd 0%, #8ca6c3 49%, #52769f 50%, #7da4d6 100%);
background: -ms-linear-gradient(top, #b5c8dd 0%, #8ca6c3 49%, #52769f 50%, #7da4d6 100%);
box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.4),
inset -1px 0 0 rgba(255, 255, 255, 0.4),
inset 0 1px 0 #fff,
-1px 1px 0 rgba(83, 99, 116, 0.7);
}
.maximize-button {
right: 48px;
}
.minimize-button {
right: 75px;
border-bottom-left-radius: 4px;
}
.maximize-button:hover, .minimize-button:hover {
background: -webkit-linear-gradient(#b4d5ef 0%, #76a9d1 49%, #0a619f 50%, #31cde2 100%);
background: -moz-linear-gradient(#b4d5ef 0%, #76a9d1 49%, #0a619f 50%, #31cde2 100%);
background: -o-linear-gradient(#b4d5ef 0%, #76a9d1 49%, #0a619f 50%, #31cde2 100%);
background: -ms-linear-gradient(#b4d5ef 0%, #76a9d1 49%, #0a619f 50%, #31cde2 100%);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(10, 254, 251, 0.4),
inset -1px 0 0 rgba(255, 255, 255, 0.4),
inset 0 1px 0 #fff,
-1px 1px 0 rgba(83, 99, 116, 0.7),
-1px -1px 10px cyan,
1px 1px 10px cyan;
}
.maximize-button:active, .minimize-button:active {
background: -webkit-linear-gradient(#a2bbcd 0%, #58a5b4 49%, #0b2847 50%, #16d6c5 100%);
background: -moz-linear-gradient(#a2bbcd 0%, #58a5b4 49%, #0b2847 50%, #16d6c5 100%);
background: -o-linear-gradient(#a2bbcd 0%, #58a5b4 49%, #0b2847 50%, #16d6c5 100%);
background: -ms-linear-gradient(#a2bbcd 0%, #58a5b4 49%, #0b2847 50%, #16d6c5 100%);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 cyan,
inset -1px 0 0 rgba(255, 255, 255, 0.4),
inset 0 1px 0 #fff,
-1px 1px 0 rgba(83, 99, 116, 0.7),
-1px -1px 10px cyan,
1px 1px 10px cyan;
}
.minimize-icon {
width: 10px;
height: 3px;
border: 1px solid #535666;
position: absolute;
top: 9px;
left: 7px;
background: #fff;
}
.maximize-icon {
width: 10px;
height: 8px;
position: absolute;
top: 4px;
left: 7px;
border: 1px solid #535666;
box-shadow:
inset 2px 2px #fff,
inset -2px -2px #fff,
inset 3px 3px #535666,
inset -3px -3px #535666;
}
.close-icon {
width: 3px;
height: 8px;
border: 1px solid #535666;
position: absolute;
top: 4px;
left: 20px;
background: #fff;
-webkit-transform: skewX(38deg);
-moz-transform: skewX(38deg);
-o-transform: skewX(38deg);
-ms-transform: skewX(38deg);
}
.close-icon:after {
content: '';
display: block;
width: 3px;
height: 8px;
border: 1px solid #535666;
position: absolute;
top: -1px;
left: -1px;
background: #fff;
-webkit-transform: skewX(-58deg);
-moz-transform: skewX(-58deg);
-o-transform: skewX(-58deg);
-ms-transform: skewX(-58deg);
}
.close-icon:before {
content: '';
display: block;
width: 3px;
height: 5px;
position: absolute;
top: 1px;
background-color: #fff;
z-index: 2;
}
#showWindow {
color: #fff;
}
#showWindow:hover {
color: wheat;
text-decoration: none;
}