body{
    height : 100%;
    padding-bottom : 30px;
    margin : 0px;
}

#gray_matter{
    position : absolute;
    width : 100%;
    /* This depends on the height of the overlay. Overlay gives body length. Not sure though. */
    height : 100%;
    /*height : 800px;*/
    opacity : 0.5;
    filter : alpha(opacity=50);
    z-index : 999;
    background: black  repeat-y;
    top : 0px;
    left : 0px;
    display : none;
}

/* This element will provide the shade of gray with opacity < 1 */
#overlay{
    z-index : 9999;
    width : 100%;
    height : 800px;
    position : absolute;
    top : 0px;
    left : 0px;
    display : none;
}

.dialog{
    background : url(/images/popUp_back_no_alpha.png) center center repeat-y;
    padding-top : 1px; /* or else the margin of the contained box goes crazy */
    font-family : Arial;
    text-align : left;
    margin : 80px auto;
    border : 3px solid gray;
    width : 657px;
    height : 452px;
    background : url(/images/popUp_back_no_alpha.png) top center no-repeat;
}

#ie6_dialog{
    display : none;
}

#header_message_box{
    border : solid 2px red;
    width : 90%;
    margin : 20px auto;
    padding : 10px 0px 10px 20px;
}

#header_message_box #title{
    font-size : 34px;
    background : url(/images/error_icon_no_alpha.png) left center no-repeat;
    padding : 7px 0px 7px 60px;
    font-weight : bold;
}

#header_message_box #message{
    color : #404040;
    padding : 8px 0px;
    font-size : 18px;
    line-height : 20px;
}

#center_message_box{
    margin : 0px auto;
    width : 550px;
    font-size : 17px;
    color : #383838;
    line-height : 22px;
    font-family : Tahoma;
    margin-top : 30px;
    
}

#center_message_box #product_name{
    color : #1d3169;
    font-size : 18px;
    font-weight : bold;
}

#buttons_box{
    height : 10px;
    margin : 40px auto 0px auto;
    width : 410px;
}

#buttons_box .button{
    float : left;
    width : 201px;
    height : 79px;
    cursor : pointer;
}

#buttons_box #continue_button{
    background : url(/images/buttons/button_continue.png) center center no-repeat;
}

#buttons_box #upgrade_button{
    background : url(/images/buttons/button_Install_ie.png) center center no-repeat;
}

#buttons_box #continue_button_hover{
    background : url(/images/buttons/button_continueHover.png) center center no-repeat;
}

#buttons_box #upgrade_button_hover{
    background : url(/images/buttons/button_Install_ieHover.png) center center no-repeat;
}

#buttons_box #continue_button_hover, #buttons_box #upgrade_button_hover{
    display : none;
}

/* These properties define look properties NEVER POSITION 
Position attributes will be defined per dialog, eg: #friend_dialog .validation_message
*/
.dialog .dialog_title{
    font-size : 24px;
    font-weight : bold;
    font-family : sans-serif;
    position : absolute;
    left : 45px;
    top : 22px;
    color: #666666;
}

.dialog .form_elements{
    width : 80%;
    height : 300px;
    margin : 75px auto;
    position : relative;
}

.form_elements .validation_message{
    color : #DE1D0B;
    font-size : 11px;
    height : 11px;
}

.form_elements .input_label{
    font-size : 14px;
    font-weight : bold;
    color: #666666;
}

.form_elements .captcha_input_box{
    width : 400px;
    height : 50px;
    position : relative;
}

.captcha_input_box .captcha_label{
    width : 145px;
    position : absolute;
    left : -40px;
    font-size : 14px;
    text-align : right;
}

.captcha_input_box input.captcha_code{
    width : 100px;
    position : absolute;
    left : 122px;
    top : 2px;
}

.captcha_input_box .captcha_img{
    position : absolute;
    height : 34px;
    width : 120px;
    left : 250px;
}

.captcha_input_box .validation_message{
    position : absolute;
    left : 125px;
    top : 30px;
    margin : 0px;
}

.captcha_input_box .reload_btn{
    position : absolute;
    height : 20px;
    width : 22px;
    top : 1px;
    left : 372px;
    background : url(/images/refreshIcon.png) center center no-repeat;
    cursor : pointer;
}

.form_elements input{
    border : 2px solid #6298e0;
    padding : 2px 0px;
    width : 400px;
}

.form_elements textarea{
    border : 2px solid #6298e0;
    padding : 2px 0px;
    font-family : Arial;
    width : 400px;
    height : 115px;
    resize : none;
}

.form_button_box{
    position : relative;
    width : 280px;
    height : 56px;
    left: 95px;
}

.form_button_box .submit_btn{ 
    width : 145px;
    height : 56px;
    background : url(/images/buttons/sendButton_QBCpopup.png) center center no-repeat;
    border : none;
    cursor : pointer;
    position : absolute;
    left : 0px;
}

.form_button_box .cancel_box{
    position : absolute;
    top : 20px;
    left : 135px;
}

.form_button_box .cancel{
    font-size : 14px;
    text-decoration : none;
    color : #077BB7;
}


.form_button_box .cancel:hover{
    border-bottom : dotted 1px;
}

.dialog .spinner{
    background : url(/images/spinner.gif) center center no-repeat;
    width : 32px;
    height : 32px;
    position : absolute;
    left : 220px;
    bottom : 52px;
    display : none;
}

.dialog .one_line_input_box{
    width : 520px;
    height : 40px;
    float : right;
    position : relative;
}

.one_line_input_box .input_label{
    position : absolute;
    right : 420px;
    top : 3px;
}

.dialog .one_line_input_box input{
    position : absolute;
    right : 0px;
}

.one_line_input_box .validation_message{
    position : absolute;
    left : 120px;
    top : 25px;
}

.dialog .text_area_box{
    width : 520px;
    height : 125px;
    float : right;
    position : relative;
}

.dialog .text_area_box textarea{
    position : absolute;
    right : 0px;
}

.text_area_box .input_label{
    position : absolute;
    right : 420px;
    top : 3px;
}

.text_area_box .validation_message{
    position : absolute;
    left : 120px;
    top : 127px;
}

/* User Feedback Dialog */
#feedback_dialog{
    display : none;
    position : relative;
    z-index : 999;
}

#feedback_dialog .captcha_input_box{
    position : absolute;
    top : 230px;
    left : 0px;
}

#feedback_dialog .form_button_box{
    position : absolute;
    top : 280px;
    right : 0px;
}

/* Tell A Friend Dialog */
#friend_dialog{
    display : none;
    position : relative;
    z-index : 998;
}

#friend_dialog .name_box{
    position : absolute;
    top : 0px;
}

#friend_dialog .email_box{
    position : absolute;
    top : 45px;
}

#friend_dialog .message_subject_box{
    position : absolute;
    top : 85px;
}

#friend_dialog .message_body_box{
    position : absolute;
    width : 520px;
    right : 0px;
    top : 85px;
}

#friend_dialog .message_body_box .input_label{
    position : absolute;
    right : 427px;
    top : 13px;
}

#friend_dialog .email_message{
    width : 405px;
    position : absolute;
    right : 5px;
    top : 10px;
    font-size : 14px;
    line-height : 16px;
    
}

#friend_dialog .captcha_input_box{
    position : absolute;
    top : 240px;
    left : 0px;
}

#friend_dialog .form_button_box{
    position : absolute;
    top : 280px;
    right : 0px;
}

#message_dialog{
    display : none;
    position : relative;
}

#message_dialog #message_title{
    margin : 0px auto;
    text-align: center;
    margin-top : 145px;
    font-size : 32px;
}

#message_dialog #message{
    margin : 0px auto;
    text-align: center;
    margin-top : 18px;
    font-weight : bold;
}

#message_dialog #close_btn{
    height : 22px;
    width : 22px;
    background : url(/images/buttons/ieCloseWindow_bttn_x.png) center center no-repeat;
    position : absolute;
    top : 4px;
    right : 4px;
    cursor : pointer;
}

#message_dialog #close_btn:hover{
    background: url(/images/buttons/ieCloseWindow_bttn_x_hover.png) center center no-repeat;
}

/* Install Host App Dialog */
#install_host_app,
#update_host_app {
    display: none;
    position: relative;
    z-index: 1000;
    text-align: center;
    color: #333;
}

#install_host_app .dialog_title,
#update_host_app .dialog_title {
    font-family: 'Open Sans', Helvetica, Arial;
    background: transparent url('../images/landing/steps-sprite.png') no-repeat scroll -30px 0px;
    position: static;
    line-height: 32px;
    padding: 35px 40px 20px 145px;
    margin: 20px 0;
}

#install_host_app .dialog_content,
#update_host_app .dialog_content {
    font-family: 'Open Sans', Helvetica, Arial;
    font-size: 18px;
    padding: 20px 40px 0;
    line-height: 24px;
}

#install_host_app .download_link,
#update_host_app .download_link {
    font-size: 13px;
}

#install_host_app .notice,
#update_host_app .notice {
    font-weight: bold;
    padding: 40px 100px;
}

#install_host_app a {
    color: #144a8d;
    text-decoration: none;
    font-weight: bold;
}

#install_host_app a:hover {
    text-decoration: underline;
}