/*
style based on
https://i.stack.imgur.com/l3Xew.png
*/


.winxp .dialog {
    background-color: #e7e7d6;
    border: 2px solid #0453e3;
    min-height: 100px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: auto;
    font-family: Tahoma, sans-serif;
    font-size: 11px;
}

.winxp .dialog .header {
    background: #0332cc;
    height: 26px;
    color: white;
    font-weight: bold;
    font-size: 12px;
    text-shadow: 1px 1px #333;
    padding: 10px 4px 0 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}


.winxp .dialog .header {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f5f6f6+0,3399ff+7,0550ff+23,3399ff+76,3399ff+94,0332cc+100 */
    background: rgb(245, 246, 246); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(245, 246, 246, 1) 0%, rgba(51, 153, 255, 1) 7%, rgba(5, 80, 255, 1) 23%, rgba(51, 153, 255, 1) 76%, rgba(51, 153, 255, 1) 94%, rgba(3, 50, 204, 1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(245, 246, 246, 1) 0%, rgba(51, 153, 255, 1) 7%, rgba(5, 80, 255, 1) 23%, rgba(51, 153, 255, 1) 76%, rgba(51, 153, 255, 1) 94%, rgba(3, 50, 204, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(245, 246, 246, 1) 0%, rgba(51, 153, 255, 1) 7%, rgba(5, 80, 255, 1) 23%, rgba(51, 153, 255, 1) 76%, rgba(51, 153, 255, 1) 94%, rgba(3, 50, 204, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f6f6', endColorstr='#0332cc', GradientType=0); /* IE6-9 */

}

.winxp .dialog .header .x:before {
    content: '✕';
}

.winxp .dialog .header .x {
    text-shadow: 1px 0 white, 0 1px white, 0 -1px white, -1px 0 white;
    font-size: 17px;
    text-align: center;
    width: 22px;
    height: 22px;
    background-color: red;
    color: white;
    border: 2px solid white;
    border-radius: 4px;
    float: right;
    margin-top: -5px;
}

.winxp .dialog .header .x {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff3019+0,ffbfbf+8,ff3019+25,cf0404+100 */
    background: rgb(255, 48, 25); /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(255, 48, 25, 1) 0%, rgba(255, 191, 191, 1) 8%, rgba(255, 48, 25, 1) 25%, rgba(207, 4, 4, 1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(255, 48, 25, 1) 0%, rgba(255, 191, 191, 1) 8%, rgba(255, 48, 25, 1) 25%, rgba(207, 4, 4, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(255, 48, 25, 1) 0%, rgba(255, 191, 191, 1) 8%, rgba(255, 48, 25, 1) 25%, rgba(207, 4, 4, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=1); /* IE6-9 fallback on horizontal gradient */
}

.winxp .dialog .body .button {
    display: inline-block;
    text-align: center;
    min-width: 100px;
    background: #f7f7f7;
    border-radius: 5px;
    border: 1px solid #253a48;

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f7f3ef+100 */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(247, 243, 239, 1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(247, 243, 239, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(247, 243, 239, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f3ef', GradientType=0); /* IE6-9 */

}

.winxp .dialog .body .button-ok {
    border: 2px solid #24425f;
}