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;
}