/* to use: 
         
  div class="popwBase popw<color>"        Outer div for the window. You need to specify size. 
                                           base required but color is optional if you want to set your own colors and border or you want a transparent background
     div class="popwTitle"                    inner div for the title bar 
          asp:ImageButton CssClass="popwCloser" ImageUrl="~/images/CloseWindow.png"       upper right close button
     /div                                 end of title
     <div class="popwResizer">            optional.  Used with resizing.
            <asp:Image CssClass="popwResizeIcon" ImageUrl="~/images/DragBotR.png" 
    /div
    div class=popwField                     inner div for window content
    /div
 /div


Modal;
    An outer div (outside of popwBase may be created with class "popwModal"
    This will cover (dim) the screen behind the popup to be used as a modal popup.

*/

.popwCloser {
    position: absolute;
    right: 0px;
    top: 0px;
    text-align: right;
    Height: 21px;
}

.popwButtons {
    position: absolute;
    right: 48px;
    top: 0px;
    text-align: right;
    Height: 21px;
}

.popwResizer {
    position: absolute;
    height: 18px;
    width: 18px;
    bottom: 0px;
    right: 2px;
    z-index: 9001
}

    .popwResizer img {
        height: 100%;
    }

.popwBase {
    position: absolute;
    box-sizing: border-box;
    z-index: 9000;
}

    .popwBase div.popwTitle {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        white-space: nowrap;
        overflow: hidden;
        height: 22px;
        font-weight: bold;
        font-size: small;
        padding: 2px 0px 0px 10px;
        box-sizing: border-box;
    }

    .popwBase div.popwTitle2 {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        white-space: nowrap;
        overflow: hidden;
        height: 22px;
        font-weight: bold;
        font-size: small;
        padding: 2px 0px 0px 10px;
        box-sizing: border-box;
    }

    .popwBase div.popwField {
        position: absolute;
        top: 23px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        width: 100%;
        padding: 0px;
        border-collapse: collapse;
        overflow: auto;
    }

    .popwBase div.popwField2 {
        position: absolute;
        top: 23px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        width: 100%;
        padding: 0px;
        border-collapse: collapse;
        overflow: auto;
    }

.popwModal {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 8999;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.2);
}

.popwError {
    background-color: mistyrose;
    border: 1px solid red;
    box-shadow: 5px 5px 10px 0px red;
}

    .popwError div.popwTitle {
        background-color: #FFC0C0;
    }

.popwWarning {
    background-color: LightGoldenRodYellow;
    border: 1px solid goldenrod;
    box-shadow: 5px 5px 10px 0px goldenrod;
}

    .popwWarning div.popwTitle {
        background-color: LemonChiffon;
    }

.popwInfo {
    background-color: #D8F7D0;
    border: 1px solid green;
    box-shadow: 5px 5px 10px 0px green;
}

    .popwInfo div.popwTitle {
        background-color: palegreen;
    }

.popwDefault {
    background-color: whitesmoke;
    border: 1px solid silver;
    box-shadow: 5px 5px 10px 0px silver;
}

    .popwDefault div.popwTitle {
        background-color: gainsboro;
    }


.popwRed {
    background-color: #FFA0A0;
    border: 1px solid #E00000;
    box-shadow: 5px 5px 10px 0px #E00000;
}

    .popwRed div.popwTitle {
        background-color: #FF3030;
    }

.popwPink {
    background-color: #FFF7F7;
    border: 1px solid #CD5C5C;
    box-shadow: 5px 5px 10px 0px #CD5C5C;
}

    .popwPink div.popwTitle {
        background-color: #FFA0A0;
    }

.popwOrange {
    background-color: #F5E0B0;
    border: 1px solid #FF8C00;
    box-shadow: 5px 5px 10px 0px #FF8C00;
}

    .popwOrange div.popwTitle {
        background-color: #FFA500;
    }

.popwPaleOrange {
    background-color: #FAEBD7;
    border: 1px solid #FF8C00;
    box-shadow: 5px 5px 10px 0px #FFDAB9;
}

    .popwPaleOrange div.popwTitle {
        background-color: #FFDAB9;
    }

.popwYellow {
    background-color: #FFFFA0;
    border: 1px solid #E0E000;
    box-shadow: 5px 5px 10px 0px #E0E000;
}

    .popwYellow div.popwTitle {
        background-color: #FFFF40;
    }

.popwPaleYellow {
    background-color: #FFFFC0;
    border: 1px solid #E0E000;
    box-shadow: 5px 5px 10px 0px #E0E000;
}

    .popwPaleYellow div.popwTitle {
        background-color: #FFFFA0;
    }

.popwGreen {
    background-color: #E4FFE4;
    border: 1px solid #007000;
    box-shadow: 5px 5px 10px 0px #007000;
}

    .popwGreen div.popwTitle {
        background-color: #40E040;
    }

.popwPaleGreen {
    background-color: #E7FFE7;
    border: 1px solid #007000;
    box-shadow: 5px 5px 10px 0px #007000;
}

    .popwPaleGreen div.popwTitle {
        background-color: #A0EEA0;
    }

.popwBlue {
    background-color: #FAFAFF;
    border: 1px solid #0000FF;
    box-shadow: 5px 5px 10px 0px #0000FF;
}

    .popwBlue div.popwTitle {
        background-color: #80A0FF;
    }

.popwPaleBlue {
    background-color: #FCFCFF;
    border: 1px solid #0000FF;
    box-shadow: 5px 5px 10px 0px #0000FF;
}

    .popwPaleBlue div.popwTitle {
        background-color: #C0C0FF;
    }

.popwIndigo {
    background-color: #E6CAFC;
    border: 1px solid #0000FF;
    box-shadow: 5px 5px 10px 0px Indigo;
}

    .popwIndigo div.popwTitle {
        background-color: #9932E0;
    }

.popwViolet {
    background-color: #FFF4FA;
    border: 1px solid #800080;
    box-shadow: 5px 5px 10px 0px #800080;
}

    .popwViolet div.popwTitle {
        background-color: #EA80EA;
    }

.popwMagenta {
    background-color: #FFF0FF;
    border: 1px solid #FF00FF;
    box-shadow: 5px 5px 10px 0px #FF00FF;
}

    .popwMagenta div.popwTitle {
        background-color: #D000D0;
    }

.popwBlack {
    background-color: #606060;
    border: 1px solid black;
    box-shadow: 5px 5px 10px 0px black;
}

    .popwBlack div.popwTitle {
        background-color: Black;
    }

.popwWhite {
    background-color: white;
    border: 1px solid black;
    box-shadow: 5px 5px 10px 0px black;
}

    .popwWhite div.popwTitle {
        background-color: white;
    }



.popwSilver {
    background-color: #F8F8F8;
    border: 1px solid #606060;
    box-shadow: 5px 5px 10px 0px #606060;
}

    .popwSilver div.popwTitle {
        background-color: #DDDDDD;
    }

.popwGray {
    background-color: #F0F0F0;
    border: 1px solid #505050;
    box-shadow: 5px 5px 10px 0px #505050;
}

    .popwGray div.popwTitle {
        background-color: #A8A8A8;
    }

.popwSteel {
    background-color: #ECECFF;
    border: 1px solid #4682B4;
    box-shadow: 5px 5px 10px 0px #4682B4;
}

    .popwSteel div.popwTitle {
        background-color: #B0C4DE;
    }

.popwBrown {
    background-color: #FFDAB9;
    border: 1px solid #8B4513;
    box-shadow: 5px 5px 10px 0px #8B4513;
}

    .popwBrown div.popwTitle {
        background-color: #D2691E;
    }

.popwTan {
    background-color: #FDFEEB;
    border: 1px solid #8B4513;
    box-shadow: 5px 5px 10px 0px #8B4513;
}

    .popwTan div.popwTitle {
        background-color: #DABC94;
    }