﻿
.dumbBoxWrap { /* The div that shows/hides. */
    display: none; /* starts out hidden */
    z-index: 100001; /* High z-index to ensure it appears above all content */
    font-family: SegoeUI, arial, tahoma;
    font-size: 13px;
    position:relative; /*to make z-index work*/
}

.dumbBoxWrap h2 {
    margin:5px 0;
}

.dumbBoxOverlay { /* Shades out background when selector is active */
    top:0;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: .5; /* Sets opacity so it's partly transparent */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE transparency */
    filter: alpha(opacity=50); /* More IE transparency */
    z-index: 40001;
}

.vertical-offset { /* Fixed position to provide the vertical offset */
    position: fixed;
    top: 20%;
    height: 60%;
    width: 100%;
    z-index: 40002; /* ensures box appears above overlay */
}


.dumbBox { /* The actual box, centered in the fixed-position div */
    /*width: 405px;*/ /* Whatever width you want the box to be */
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);
    max-width: 600px;
    position: relative;
    margin: 0 auto; /* Everything below is just visual styling */
    background-color: white;
    /*padding: 10px;*/
    padding: 0;
    border: 1px solid #666666;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 100%;
    /*opacity:0.95;*/
}

.dumbBox p{
    line-height:1.2;
}

   .dumbBox .dumbBox-header {
        background: #f47828;
        color: #FFF;
        padding: 10px 20px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-border-top-left-radius: 4px;
        border-top-left-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        border-top-right-radius: 4px;
        margin-bottom:0;
        border-bottom: 1px solid #D6D6D6;
        overflow:hidden;
    }

     .dumbBox .dumbBox-header h1{
         float:left;
         color: #FFF;
     }

    .dumbBox .dumbBox-header-logo{
        float:left;
        fill:#fff;
        margin-right:10px;
    }

    .dumbBox a {
        color: #f47828;
    }


.closeModal {
    position: absolute;
    top: -12px; /* Half the icon's height */
    right: -12px; /* half the icon's width */
    z-index: 50;
}


/*
    added from here:
*/

.dumbBox .dumbBox-wrapper {
    height: 100%;
    padding: 10px 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.dumbBox .dumbBox-wrapper-withFooter {
     height: calc(100% - 120px);
}

.dumbBox .dumbBox-footer {
        background: #eee;
        min-height: 80px;
        padding: 10px 20px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-border-bottom-left-radius: 5px;
        border-bottom-left-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        border-bottom-right-radius: 5px;
        margin:0;
        border-top: 1px solid #D6D6D6;
    }
