@import url("../default/windows.css");


.JSW {
 --active-high-color : rgba(153, 153, 153, 0.7); /* Obere Farbe der aktiven Fensterleiste */
 --high-color : rgba(26, 153, 26, 1); /* Obere Farbe der Fensterleiste */
 --active-low-color : rgba(14, 154, 14, 1); /* Untere Farbe der aktiven Fensterleiste und Farbe der aktiven Raender */
 --low-color : rgba(153, 153, 153, 1); /* Untere Farbe der Fensterleise und Farbe der Raender */
 --bg-color : rgba(252, 255, 250, 1); /* Hintergrundfarbe der Fenster */
 --title-color : rgba(200, 200, 200, 1); /* Farbe des Fenstertitels */
 --active-title-color : rgba(255, 255, 255, 1); /* Farbe des Fenstertitels */
 --button-color : rgba(200, 200, 200, 1); /* Farbe der Fensterbuttons */
 --button-hover-color : rgba(255, 255, 255, 1); /* Farbe der mit Maus ueberfahrenen Fensterbuttons */
 --button-active-color : rgba(200, 200, 200, 1); /* Farbe der angeklickten Fensterbuttons */
 --disabled-color : rgba(200, 240, 200, 0.3); /* Farbe des deaktiviert-Schleiers */
}


.JSW.OuterBox {
 background-color : transparent;
}
.JSW.OuterBox.active {
 background-color : transparent;
}

.JSW.InnerBox { /* Hier nur ein Class-Attribut verwenden, damit Eigenschaften leichter von anderen Stylesheets ueberschrieben werden koennen. */
 background-color : rgba(252, 255, 250, 1); background-color : var(--bg-color);
}




.JSW.Disabled {
 background-color : rgba(200, 220, 200, 0.3); background-color : var(--disabled-color);
 border-radius : 5px;
}

.JSW.Bar {
 background : #1A991A;
 background : linear-gradient(to bottom, #1A991A 5px, #999 15px);
 background : linear-gradient(to bottom, var(--high-color) 5px, var(--low-color) 15px);
}
.JSW.active .Bar {
 background : #0E9A0E;
 background : linear-gradient(to bottom, rgba(153, 153, 153, 0.7) 0px, #0E9A0E 20px);
 background : linear-gradient(to bottom, var(--active-high-color) 0px, var(--active-low-color) 20px);
}

.JSW .JSW.Icon {
 margin-right : 4px;
}

.JSW.OuterBox .JSW.Title {
 color : #C8C8C8;
 color : var(--title-color);
 font-size : 12px;
 font-family : Arial;
 font-weight : bold;
 margin : 0px;
 vertical-align : top;
}
.JSW.active .JSW.Title { color : #FFF; color : var(--active-title-color); }



/* The Button-Icons are inspired from http://css-tricks.com/examples/ShapesOfCSS/ */

.JSW.Buttons a {
 background-color : transparent;
}

.JSW.ButtonExclude:before {
 content : '';
 position : relative;
 top : 4px;
 left : -2px;
 display : block;
 width: 0px;
 height: 0px;
 border-bottom: 6px solid transparent;
 border-left: 6px solid transparent;
 border-right : 6px solid #C8C8C8;
 border-right : 6px solid var(--button-color);
 box-shadow : 10px -5px 0px -2px #C8C8C8;
 box-shadow : 10px -5px 0px -2px var(--button-color);
}
.JSW.ButtonExclude:after {
 content : '';
 position : relative;
 top : 0px;
 left : 3.5px;
 display : block;
 width: 8px;
 height: 8px;
 border: 0 solid transparent;
 border-top: 3px solid #C8C8C8;
 border-top: 3px solid var(--button-color);
 border-radius: 11px 0 0 0;
 transform:rotate(-45deg);
}
.JSW.ButtonExclude:hover:before {
 border-right : 6px solid #FFF;
 border-right : 6px solid var(--button-hover-color);
 box-shadow : 10px -5px 0px -2px #FFF;
 box-shadow : 10px -5px 0px -2px var(--button-hover-color);
}
.JSW.ButtonExclude:hover:after {
 border-top: 3px solid #FFF;
 border-top: 3px solid var(--button-hover-color);
}
.JSW.ButtonExclude:active:before {
 border-right : 6px solid #C8C8C8;
 border-right : 6px solid var(--button-active-color);
 box-shadow : 10px -5px 0px -2px #C8C8C8;
 box-shadow : 10px -5px 0px -2px var(--button-active-color);
}
.JSW.ButtonExclude:active:after {
 border-top: 3px solid #C8C8C8;
 border-top: 3px solid var(--button-active-color);
}
.JSW.Buttons.nonexcludable .ButtonExclude { display : none; }


.JSW.ButtonMinimize:before {
 content : '';
 position : relative;
 top : 12px;
 left : 2px;
 display : block;
 width: 10px;
 height: 2px;
 background-color : #C8C8C8;
 background-color : var(--button-color);
}
.JSW.ButtonMinimize:hover:before   { background-color : #FFF; background-color : var(--button-hover-color); }
.JSW.ButtonMinimize:active:before  { background-color : #C8C8C8; background-color : var(--button-active-color); }
.JSW.Buttons.nonminimizable .ButtonMinimize { display : none; }


.JSW.ButtonMaximize:before {
 content : '';
 position : relative;
 top : 2px;
 left : 2px;
 display : block;
 width: 12px;
 height: 11px;
 border-style : solid;
 border-left-width : 1px;
 border-right-width : 1px;
 border-bottom-width : 1px;
 border-top-width : 2px;
 border-color : #C8C8C8;
 border-color : var(--button-color);
}
.JSW.maximized .ButtonMaximize:before {
 top : 5px;
 left : 2px;
 display : block;
 width : 10px;
 height : 8px;
}
.JSW.maximized .ButtonMaximize:after {
 content : '';
 position : relative;
 top : -8px;
 left : 4px;
 display : block;
 width : 10px;
 height : 8px;
 border-style : solid;
 border-left-width : 0px;
 border-right-width : 1px;
 border-bottom-width : 0px;
 border-top-width : 2px;
 border-color : #C8C8C8;
 border-color : var(--button-color);
}
.JSW.ButtonMaximize:hover:before, .JSW.ButtonMaximize:hover:after   { border-color : #FFF; border-color : var(--button-hover-color); }
.JSW.ButtonMaximize:active:before, .JSW.ButtonMaximize:active:after { border-color : #C8C8C8; border-color : var(--button-active-color); }
.JSW.Buttons.nonmaximizable .ButtonMaximize { display : none; }


.JSW.ButtonClose:before, .JSW.ButtonClose:after {
 content : '';
 position : relative;
 top : 8px;
 left : 2px;
 display : block;
 width : 16px;
 height : 2px;
 margin-bottom : -2px;
 background-color : #C8C8C8;
 background-color : var(--button-color);
 transform : rotate(45deg);
}
.JSW.ButtonClose:after {
 transform : rotate(-45deg);
}
.JSW.ButtonClose:hover:before, .JSW.ButtonClose:hover:after {  background-color : #FFF; background-color : var(--button-hover-color); }
.JSW.ButtonClose:active:before, .JSW.ButtonClose:active:after {  background-color : #C8C8C8; background-color : var(--button-active-color); }
.JSW.Buttons.nonclosable .ButtonClose { display : none; }


.JSW.BarExtension {
 background : #1A991A;
 background : var(--low-color);
}
.JSW.active .BarExtension {
 background : #0E9A0E;
 background : var(--active-low-color);
}


.JSW.BorderTop {
 height : 2px;
 border-top : 0px none transparent;
 background-color : #1A991A;
 background-color : var(--high-color);
}
.JSW.active .BorderTop { background : #0E9A0E; background : linear-gradient(to bottom, rgba(153, 153, 153, 0.7), rgba(153, 153, 153, 0.7)); background : var(--active-high-color); }
.JSW.nonresizable .BorderTop { cursor : default; }

.JSW.BorderBottom {
 border-top : 2px solid #999;
 border-top : 2px solid var(--low-color);
}
.JSW.active .BorderBottom { border-top : 2px solid #0E9A0E; border-top : 2px solid var(--active-low-color); }
.JSW.nonresizable .BorderBottom { cursor : default; }

.JSW.BorderRight {
 border-left : 2px solid #999;
 border-left : 2px solid var(--low-color);
}
.JSW.active .BorderRight { border-left : 2px solid #0E9A0E; border-left : 2px solid var(--active-low-color); }
.JSW.nonresizable .BorderRight { cursor : default; }

.JSW.BorderLeft {
 border-right : 2px solid #999;
 border-right : 2px solid var(--low-color);
}
.JSW.active .BorderLeft { border-right : 2px solid #0E9A0E; border-right : 2px solid var(--active-low-color); }
.JSW.nonresizable .BorderLeft { cursor : default; }

.JSW.EdgeTopLeft {
 border-top : 0px none transparent;
 border-left : 0px none transparent;
 background : #1A991A;
 background : linear-gradient(to bottom, #1A991A 7px, #999 17px);
 background : linear-gradient(to bottom, var(--high-color) 7px, var(--low-color) 17px);
 border-top-left-radius : 5px;
}
.JSW.active .EdgeTopLeft { background : #0E9A0E; background : linear-gradient(to bottom, rgba(153, 153, 153, 0.7) 2px, #0E9A0E 22px); background : linear-gradient(to bottom, var(--active-high-color) 2px, var(--active-low-color) 22px); }
.JSW.nonresizable .EdgeTopLeft { cursor : default; }

.JSW.EdgeTopRight {
 border-top : 0px none transparent;
 border-right : 0px none transparent;
 background : #1A991A;
 background : linear-gradient(to bottom, #1A991A 7px, #999 17px);
 background : linear-gradient(to bottom, var(--high-color) 7px, var(--low-color) 17px);
 border-top-right-radius : 5px;
}
.JSW.active .EdgeTopRight { background : #0E9A0E; background : linear-gradient(to bottom, rgba(153, 153, 153, 0.7) 2px, #0E9A0E 22px); background : linear-gradient(to bottom, var(--active-high-color) 2px, var(--active-low-color) 22px); }
.JSW.nonresizable .EdgeTopRight { cursor : default; }

.JSW.EdgeBottomLeft {
 border-style : solid;
 border-width : 0px;
 border-left-width : 2px;
 border-bottom-width : 2px;
 border-color : #999;
 border-color : var(--low-color);
 border-bottom-left-radius : 5px;
}
.JSW.active .EdgeBottomLeft { border-color : #0E9A0E; border-color : var(--active-low-color); }
.JSW.nonresizable .EdgeBottomLeft { cursor : default; }

.JSW.EdgeBottomRight {
 border-style : solid;
 border-width : 0px;
 border-right-width : 2px;
 border-bottom-width : 2px;
 border-color : #999;
 border-color : var(--low-color);
 border-bottom-right-radius : 5px;
}
.JSW.active .EdgeBottomRight { border-color : #0E9A0E; border-color : var(--active-low-color); }
.JSW.nonresizable .EdgeBottomRight { cursor : default; }




.JSW.ThrowingBorder {
 position : fixed;
 border : 2px solid #0E9A0E;
 border : 2px solid var(--active-low-color);
}