﻿.dialog {
    background-color: #F0FFFF;
    width: 500px;
    min-width: 500px;
}

    .dialog .title {
        background-color: #B0C4DE;
        padding: 5px 10px;
    }

    .dialog .content {
        width: 380px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .dialog .icon {
        float: left;
        width: 48px;
        margin-right: 12px;
    }

    .dialog .message {
        float: left;
        width: 480px;
        word-break: break-all; /* 表示範囲に合わせて改行 */
        word-wrap: break-word; /* 必要に応じて単語の途中で改行する */
    }

    .dialog .button {
        padding: 10px 0;
        text-align: center;
    }
    
  /* キモになるのは「.modalBackground」です。 
    「.modalBackground」はユーザーコントロール「Message.ascx」のソースで、
     ModalPopupExtenderのBackgroundCssClassプロパティに設定しています。*/
  /* メッセージダイアログがポップアップ表示した際、親画面のスタイルを定義します。
     まず半透明にしないと、メッセージダイアログを表示した際に親画面が操作できてしまいます。
    次にスタイルシートでmodalBackgroundを定義すると、親画面が半透明になりません。
    半透明にするためには「zoom:1」とするとよいそうです。
    スタイルシートではなくMessage.ascx自体にmodalBackgroundのスタイルを定義するときは「zoom:1」は必要ありません。*/
        .modalBackground {
    background-color: black;
    filter: alpha(opacity=75); /* IE:透明度　透明にしちゃうと親画面が操作できてしまうので注意 */
    opacity: 0.75; /* Opera・Safari:透明度 */
    zoom: 1; /* ModalPopupExtenderでポップアップ表示した際、親画面の背景スタイルがCSSで定義しても生きない(IEのみ)。有効にを適用させるために必要。*/
}
