html, body {
    margin: 0;
    padding: 0;
}

.headerMenu div,
.dxmLite_Moderno .dxm-popup .dxm-hovered,
.dxmLite_Moderno .dxm-horizontal .dxm-hovered {
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

.main, .loginControl, input, * {
    font-family: '微軟正黑體', '微软雅黑', 'Verdana', 'Arial';
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 120%;
}

body {
    margin: 0px;
    padding: 0px;
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
    z-index: 1;
    /*
    box-shadow: inset 0px 0 560px 0px #000000; 
*/
}

.default {
    margin-top: 120px;
}

    .default div {
        position: relative;
    }

/***********skin**************/
/* Themes */
.Sprite_Theme_DevEx,
.Sprite_Theme_Office2010Black,
.Sprite_Theme_Office2010Blue,
.Sprite_Theme_Office2010Silver,
.Sprite_Theme_Metropolis,
.Sprite_Theme_MetropolisBlue,
.Sprite_Theme_Moderno,
.Sprite_Theme_Aqua,
.Sprite_Theme_Mulberry,
.Sprite_Theme_Glass,
.Sprite_Theme_BlackGlass,
.Sprite_Theme_PlasticBlue,
.Sprite_Theme_RedWine,
.Sprite_Theme_SoftOrange,
.Sprite_Theme_Youthful,
.Sprite_Theme_Office2003Blue,
.Sprite_Theme_Office2003Olive,
.Sprite_Theme_Office2003Silver,
.Sprite_Theme_Default {
    background-image: none;
    background-repeat: no-repeat;
    border: 1px solid white!important;
    width: 14px;
    height: 14px;
}

.Sprite_Theme_DevEx {
    background-color: #CDCCF5;
}

.Sprite_Theme_Office2010Black {
    background-color: #474747;
}

.Sprite_Theme_Office2010Blue {
    background-color: #B5CCE5;
}

.Sprite_Theme_Office2010Silver {
    background-color: #E7EAEF;
}

.Sprite_Theme_Metropolis {
    /*
    background-color: #7F7F7F;
        */
    background-color: #ff8800;
}

.Sprite_Theme_MetropolisBlue {
    background-color: #0072C6;
}

.Sprite_Theme_Moderno {
    background-color: #1279c0;
}

.Sprite_Theme_Aqua {
    background-color: #96B9EC;
}

.Sprite_Theme_Mulberry {
    background-color: #BF4E6A;
}

.Sprite_Theme_Glass {
    background-color: #C8DDE8;
}

.Sprite_Theme_BlackGlass {
    background-color: #4D5A63;
}

.Sprite_Theme_PlasticBlue {
    background-color: #5066B3;
}

.Sprite_Theme_RedWine {
    background-color: #8A0E3C;
}

.Sprite_Theme_SoftOrange {
    background-color: #F06F30;
}

.Sprite_Theme_Youthful {
    background-color: #9CC524;
}

.Sprite_Theme_Office2003Blue {
    background-color: #B5CEF2;
}

.Sprite_Theme_Office2003Olive {
    background-color: #D4DEB6;
}

.Sprite_Theme_Office2003Silver {
    background-color: #D1D1E0;
}

.Sprite_Theme_Default {
    background-color: #DCDCDC;
}



/***ASPxGridView**/
.dxgvTable_DevEx, .dxgvControl_DevEx,
.dxgvTable_Office2010Silver, .dxgvControl_Office2010Silver,
.dxgvTable_Metropolis, .dxgvControl_Metropolis,
.dxgvTable_MetropolisBlue, .dxgvControl_MetropolisBlue,
.dxgvTable_Moderno, .dxgvControl_Moderno,
.dxgvTable_Office2010Black, .dxgvControl_Office2010Black,
.dxgvTable_Office2010Blue, .dxgvControl_Office2010Blue,
.dxgvTable_Office2010Silver, .dxgvControl_Office2010Silver,
.dxgvTable_Aqua, .dxgvControl_Aqua,
.dxgvTable_BlackGlass, .dxgvControl_BlackGlass,
/*.dxgvDataRow_BlackGlass,
.dxgvSelectedRow_BlackGlass,
.dxgvFocusedRow_BlackGlass,
*/
.dxgvTable_Glass, .dxgvControl_Glass,
.dxgvDataRow_Glass,
.dxgvTable_Mulberry, .dxgvControl_Mulberry,
.dxgvTable_PlasticBlue, .dxgvControl_PlasticBlue,
.dxgvDataRow_PlasticBlue,
.dxgvTable_RedWine, .dxgvControl_RedWine,
.dxgvTable_SoftOrange, .dxgvControl_SoftOrange,
.dxgvDataRow_SoftOrange,
.dxgvTable_Youthful, .dxgvControl_Youthful,
.dxgvTable_Office2003Blue, .dxgvControl_Office2003Blue,
.dxgvTable_Office2003Olive, .dxgvControl_Office2003Olive,
.dxgvTable_Office2003Silver, .dxgvControl_Office2003Silver,
.dxgvTable, .dxgvControl {
    background-color: transparent;
}

.dxgvFocusedRow_Glass {
    background-color: #c0e0e7;
}

.dxgvFocusedRow_SoftOrange {
    background-color: #f16a39;
}

.dxgvFocusedRow_PlasticBlue {
    background-color: #5066ac;
}

/******BG Mark**********/
.bgMark {
    filter: alpha(opacity=12);
    -moz-opacity: 0.12;
    opacity: 0.12;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 95%;
    height: 100%;
    z-index: 0;
}

/*******footer*******/
/**/
html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 30px;
}



footer {
    color: #666666;
    /*
    position: absolute; 
    bottom: 0; */ font-size: 13px;
    padding: 20px;
    /*
    height: 20px;    
   display:block;  
     padding-left:15px;*/
}

    footer a {
        white-space: nowrap;
    }


.all {
    /*min-height: 300px;  overflow: hidden;
    */
    background-repeat: repeat-x;
    float: left;
    width: 100%;
    height: 73px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 0;
    display: block;
    z-index: 10;
}

.logo {
    width: 300px;
    height: 86px;
    float: left;
    background-repeat: no-repeat;
    display: block;
}

.LOGOName {
    display: none;
}
/*
.main {
    width: 98%;
    margin: 0px auto;
    display: block;
}
*/
.main, .map, .logo, footer a {
    position: relative;
    z-index: 1;
}

.map {
    text-align: left;
    float: left;
    z-index: 100;
    position: absolute;
    top: 50px;
    left: 300px;
}

    .map a {
        text-decoration: none;
        color: #666666;
    }

.SkinMenu {
    /*
    position: absolute;
    top: 5px;
    right: 80px;
    z-index: 1000;*/
    float: right;
    position: relative;
    z-index: 100;
}

.title {
    position: absolute;
    top: 45px;
    left: 300px;
    font-size: 18px;
    color: #ffffff;
    font-weight: bold;
}

.default_login {
    max-width: 800px;
    margin: 0 auto;
}


.dxhlLeftPanel, .dxhlContent,
.dxpc-headerContent, .dxhlHeader, .dxpc-content, .dxpc-content div {
    font-size: 15px;
    letter-spacing: 1px;
}

.ASPxNewsControl, .dxpc-shadow {
    /*
    min-width:350px; width:100%; height:150px; 
*/
    /*display:block; overflow-x:auto;     */
}

/**********************Widgets*********************************/

.ASPxDockPanel {
    /*
    height:240px; 
        */
    display: block;
    overflow-x: auto;
}


.widgetPanel {
    background-color: #f6f6f6;
    padding: 5px;
    /*  
                      -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;margin:10px auto;
  width:95%;
*/
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    text-align: center;
}

    .widgetPanel img {
        margin-right: 11px;
        width: 100%;
        max-width: 36px;
    }

    .widgetPanel .disabled {
        -moz-opacity: 0.2;
        filter: alpha(opacity=20);
        opacity: 0.2;
        cursor: default !important;
    }
/*
.leftZone,
.rightZone
{
    float: left;
    display:block;
}
.rightZone 
{
   float:right;
}
*/


div.leftZone,
div.rightZone {
    width: 49.8%;
    float: left;
    margin-top: 5px;
    /* width: 40%;*/
}

div.rightZone {
    float: right;
}

@media (max-width: 900px) {
    div.leftZone,
    div.rightZone {
        width: 100%;
    }
}

/* DateTime widget */
.dateContainer,
.timeContainer {
    width: 100%;
    height: 30px;
    text-align: center;
}

.dateContainer {
    height: 20px;
}

.timeContainer {
    height: 30px;
}

/* Weather widget */
.dayUCContainer {
    text-align: center;
}

.dayList {
    float: left;
    padding: 0;
    margin: 5px 0 0 0;
}

.dayListItem {
    float: left;
    margin: 0 5px 5px;
}

.todayImg {
    width: 24px;
    height: 24px;
}

/* Mail widget */
.mailFolders {
    list-style-type: circle;
    padding: 0 0 0 20px;
}

    .mailFolders li {
        margin: 4px 0;
    }

/* News widget */
.dxncControl_PlasticBlue {
    background-color: transparent;
}
/*******************************************************/



/*****dashboardGroup*****/
.dashboardGroup {
    background-image: url(white.png);
    padding: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 0px solid #ffffff;
    -moz-box-shadow: 0px 0px 20px -10px #000000;
    -webkit-box-shadow: 0px 0px 20px -10px #000000;
    box-shadow: 0px 0px 20px -10px #000000, inset 0px -20px 70px -55px #000000, inset 0px 0px 1px 0px #666666;
    margin-top: 15px;
    margin-bottom: 30px;
    font-size: 15px;
}


    /*
.dashboardGroup {
    background-image: url(white.png);
    padding: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 0px solid #ffffff;
    -moz-box-shadow: 0px 0px 20px -10px #000000;
    -webkit-box-shadow: 0px 0px 20px -10px #000000;
    box-shadow: 0px 0px 20px -10px #000000, inset 0px -20px 70px -55px #000000, inset 0px 0px 1px 0px #666666;
    margin-top: 15px; margin-bottom:40px;
    font-size:15px;
}
*/
    .dashboardGroup legend {
        color: #c30d23;
        /**/
        font-size: 1.1em;
        position: relative;
        margin-top: -45px;
        float: left;
    }

    .dashboardGroup .dashboardGroup legend {
        /** font-size: 20px;*
        color: #c30d23;*/
        position: relative;
        margin-top: -30px;
        float: left;
        font-weight: bold;
        color: #000000;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        background-color: #ffffff;
        padding: 5px 15px;
        -moz-box-shadow: 0px 0px 50px 0px #000000;
        -webkit-box-shadow: 0px 0px 50px 0px #000000;
        box-shadow: 0px 0px 50px 0px #000000,;
        display: block;
        border-top: 1px solid #cccccc;
    }




input[type="text"], input[type="password"], textarea, select {
    width: 90%;
    *width: auto;
    border: 0px;
    vertical-align: middle;
    background-color: #ffffff;
    padding: 6px 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: inset 1px 1px 9px -5px #000000;
    -webkit-box-shadow: inset 1px 2px 9px -5px #000000;
    box-shadow: inset 1px 1px 9px -5px #000000;
    line-height: 18px;
    border: 1px solid #cccccc;
}

    input[type="text"]:hover, input[type="password"]:hover, textarea:hover {
        background-color: #fffdeb;
    }

    input[type="text"].TextBox {
        color: #c0c0c0;
    }

input[type="button"], input[type="submit"], .login a {
    border: 0px;
    background-color: #f39800;
    padding: 5px 20px;
    display: inline-block;
    overflow: hidden;
    color: #ffffff;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0px 1px 0px 0px #b67200, inset 0px -20px 70px -55px #000000;
    -webkit-box-shadow: 0px 1px 0px 0px #b67200, inset 0px -20px 70px -55px #000000;
    box-shadow: 0px 1px 0px 0px #b67200, inset 0px -20px 70px -55px #000000;
    cursor: pointer;
    vertical-align: middle;
}

    input[type="button"]:hover, input[type="submit"]:hover, .login a:hover {
        background-color: #ffa30a;
    }


.bu {
    padding: 5px;
    border: 1px solid #cccccc;
    text-decoration: none;
    display: inline-block;
    box-shadow: inset 0px -20px 60px -45px #000000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

    .bu img {
        vertical-align: middle;
    }

    .bu:hover {
        position: relative;
        top: 1px;
    }

.dxgvControl_Glass, .dxgvControl_Aqua, .dxgvControl_BlackGlass,
.dxgvControl_DevEx,
.dxgvControl_iOS,
.dxgvControl_Metropolis,
.dxgvControl_MetropolisBlue,
.dxgvControl_Moderno,
.dxgvControl_Office2003Blue,
.dxgvControl_Mulberry,
.dxgvControl_Office2003Olive,
.dxgvControl_Office2003Silver,
.dxgvControl_Office2010Black,
.dxgvControl_Office2010Blue,
.dxgvControl_Office2010Silver,
.dxgvControl_PlasticBlue,
.dxgvControl_RedWine,
.dxgvControl_SoftOrange,
.dxgvControl_XafTheme,
.dxgvControl_Youthful {
    width: 100%;
}
/******tab*******/

.tab {
    margin: 0 auto;
    width: 100%;
}
    /*
.tab_title
{
    font-weight: bold;
    background-color: #d3e7e6;
    color: #395654; text-align:center; 
}*/
    .tab td {
        padding: 5px;
        border-collapse: collapse;
        white-space: nowrap;
    }


/* Header */
.dxpnl-edge.t.headerPane {
    /*
    background-color: #EDEDED;
    background-position: left top;
    background-repeat: no-repeat;
*/
}

    .dxpnl-edge.t.headerPane.panel {
        padding: 0;
    }



/******menu*****/
.headerMenu {
    border-width: 0!important;
    border-top-width: 1px!important;
}

.headerMenu {
    position: absolute;
    top: 37px;
    left: 300px;
}


/*
.dxmLite_Moderno,
.dxmLite_Moderno .dxm-item a.dx
{
 color:white; font-size:15px; 
}
*/

.dxmLite_Moderno.dxm-ltr .dxm-horizontal .dxm-image-l .dxm-content,
.dxmLite_Moderno.dxm-ltr .dxm-horizontal .dxm-image-r .dxm-content { /* padding: 5px 28px 6px 26px;
 
 padding:7px 10px;
*/
}
/**/
.headerMenu img {
    display: none;
    width: 1px;
}


.dxmLite_Moderno .dxm-item a.dx {
    color: #ffffff;
}
/***menu sub bg**/
.on_menu .dxmLite_Moderno .dxm-popup { /*
  background-color:#e28d00;*/
    background-color: #e58f00;
}
    /***menu sub hover***/
    .on_menu .dxmLite_Moderno .dxm-popup .dxm-hovered {
        background-color: #c30d23;
    }
/**menu hover**/
.dxmLite_Moderno .dxm-horizontal .dxm-hovered {
    background: #e58f00;
}
/**menu hover max 500**/
.dxmLite_Moderno .dxm-vertical .dxm-hovered {
    background: #e58f00;
}


.dxmLite_Moderno .dxm-horizontal .dxm-checked,
.dxmLite_Moderno .dxm-horizontal .dxm-selected {
    background: #ff9f00;
    border: 0px;
    color: #ffffff;
    padding: 0 0 2px 0;
}

.dxmLite_Moderno .dxm-vertical .dxm-checked,
.dxmLite_Moderno .dxm-vertical .dxm-selected { /*
	background: #dcdcdc;
	border-color: #c2c2c2;*/
    background: #c30d23;
    color: #ffffff;
    border: 0px;
}

.dxmLite_Moderno .dxm-popup {
    border: 0;
}
/****menu line****/
.dxmLite_Moderno .dxm-main .dxm-separator b {
    background-color: transparent;
    display: none;
    padding: 0px;
    margin: 0px;
}
/*
.dxmLite_Moderno .dxm-horizontal .dxm-separator,
.dxm-separator, li.dxm-separator, a.dxm-content
{padding: 0px; margin:0px; display:none; width:0px;}
*/
.dx-vam {
    /*background-color:red; padding:0px; margin:0px auto;*/
}
/****************/
/*li.dxm-item , .dxmLite_Moderno .dxm-item
{ padding:0px; margin:0px;  width:auto; 
             background-color:gray;
}

.dxrControl_Moderno .dxr-img32,
.dxrControl_Moderno .dxr-blLrgItems .dxr-colorBtn .dxr-colorBtnNoImg32
, .dxm-content
, .dxWeb_mHorizontalPopOut_Moderno .dxm-pImage
, .dxmLite_Moderno .dxm-ltr li
{
   
    width:auto; 
    height:auto; 
    margin:0px; 
    min-width:0px; float:left; 
    padding:0 0 0 0 ;

}
*/



/*****menu padding*****/
.dxmLite_Moderno.dxm-ltr .dxm-horizontal .dxm-image-l .dxm-subMenu .dxm-content,
.dxmLite_Moderno.dxm-ltr .dxm-horizontal .dxm-image-t .dxm-subMenu .dxm-content,
.dxmLite_Moderno.dxm-ltr .dxm-horizontal .dxm-image-b .dxm-subMenu .dxm-content { /*
	width:auto; 
    height:auto; 
    margin:0px; 
    min-width:0px; float:left; 
    padding:0 0 0 0 ;*/
    padding: 7px 0px 7px 12px;
}

/*****************/

.expandedPanel {
    padding: 2px!important;
}

    .expandedPanel .headerMenu {
        border-top-width: 0!important;
    }

    .expandedPanel .headerTop {
        display: none;
    }

.templateTitle {
    float: left;
    margin: 12px 12px 18px;
}

.dxpnl-edge.t.headerPane.bar .templateTitle {
    margin: 0;
}

.templateTitle a {
    text-decoration: none;
    font-size: x-large;
    color: black;
}

.loginControl {
    /**/
    float: right;
    font-size: 13px;
    margin: 12px 25px;
}

    .loginControl a {
        color: black;
        text-decoration: none;
        border-bottom: dashed 1px black;
        display: inline-block;
    }


/* Footer */
/*
.footerPane {
    display:block; overflow:hidden;
}

.footerPane a {
    color: #ffffff;
}
*/


.dxpnl-edge.b.footerPane {
    /*background-color: #c30d23;
   
    color: #ffffff;*/
}

    .dxpnl-edge.b.footerPane.panel {
        padding: 0;
    }

.footerMenu {
    float: right;
    padding-top: 7px;
}

.copyright {
    float: left;
    /*  margin: 5px;
   
    margin: 100px 15px 11px;*/
}

.content {
    padding: 5px;
}

/* Left Panel */
.leftPane.panel {
    padding: 1px;
    width: 200px;
}

/* Right Panel */
.rightPane.panel {
    padding: 0;
    width: 250px;
}

/* Account */
.accountHeader h2 {
    margin: 10px 0 7px 0;
    font-size: 16px;
}

.accountHeader p {
    margin: 0;
    padding: 0;
}

.accountHeader {
    margin-bottom: 20px;
}

.form-field {
    margin-bottom: 8px;
}

/* Metropolis */
.dxpnlControl_Metropolis.dxpnl-edge.t.headerPane,
.dxpnlControl_Metropolis .footerMenu li {
    background-color: White;
    color: Black;
}

.dxpnlControl_Metropolis.rightPane {
    width: 400px;
}

.dxpnlControl_Metropolis .accountHeader h2 {
    color: #3B3B3B;
}

.dxpnlControl_Metropolis .loginControl a,
.dxpnlControl_Metropolis .templateTitle a {
    color: Black;
    border-color: Black;
}

.dxpnlControl_Metropolis .templateTitle a {
    font-size: 28px;
}

@media (min-width: 700px) and (max-width: 991px) {
    .headerPane.panel {
        background-color: #ffffff;
        width: 100%;
        height: 65px;
        display: block;
        overflow: hidden;
        border-top: 4px solid #c61c30;
        border-bottom: 1px solid #ffffff;
        box-shadow: 0px 0px 30px -7px #000000, inset 0px -20px 60px -45px #000000;
        margin-bottom: -20px;
    }
    /*
    .loginControl {
        margin: 6px 0px;
    }

    .main {
        margin-top: 50px;
    }*/
}


@media (max-width: 990px) {

    .title {
        display: block;
        color: #000000;
        position: static;
        padding: 20px 0;
        /*
        margin-top: 10px;
        font-size: 20px;*/
    }
    /*
    .logo {
        background-image: none;
        background-position: 0 -95px;
    }

    .loginControl {
        position: absolute;
        top: 15px;
        right: 50px;
        text-align: right;
    }
*/
    .headerMenu {
        /**/
        background-color: #404040;
        left: 0px;
        display: block;
        float: left;
        width: 100%;
        margin-top: 30px;
        box-shadow: 0px 10px 30px -15px #000000, 0px 1px 0px 0px #ffffff, inset 0px -20px 60px -45px #000000;
    }

    .default {
        margin: 30px;
    }
    /*
    .map {
        display: block;
        margin-top: 5px;
    }

        .map a {
            color: #cccccc;
        }

    .SkinMenu {
        top: 20px;
        right: 120px;
    }*/
}


/*
@media (max-width: 570px) {
    .default_login input[type="submit"] {
        width: 100%;
        max-width: 400px;
    }
}
*/

/*
@media (max-width: 520px) {  
}
*/
@media (max-width: 700px) {

    /**/
    .dxpnl-bar {
        background-color: #ffffff;
        width: 100%;
        height: 60px;
        display: block;
        overflow: hidden;
        border-top: 5px solid #c61c30;
        box-shadow: 0px 0px 30px -7px #000000, inset 0px -20px 60px -45px #000000;
    }


    .headerMenu {
        position: relative;
        z-index: 100;
        float: left;
        width: 100%;
        margin-top: -40px;
    }

    .main .dashboardGroup {
        padding: 0;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        border: 0px solid #ffffff;
        -moz-box-shadow: 0px 0px 0px 0px #000000;
        -webkit-box-shadow: 0px 0px 0px 0px #000000;
        box-shadow: 0px 0px 0px 0px #000000;
        margin: 10px 0 0 0;
    }




    /**/ /*
    .default {
        margin: 0px 0 100px 0px;
    }

   
    .all {
        background-position: 0 -20px;
    }*/
}

@media (max-width: 520px) {
    .loginControl, .map {
        display: none;
    }
}

@media (max-width: 360px) {
    a.LOGOName {
        display: inline-block;
        position: absolute;
        top: 6px;
        left: 10px;
        font-size: x-large;
        color: #000000;
        font-weight: bold;
        font-family: '微軟正黑體';
        text-decoration: none;
        z-index: 1000;
    }

    a.logo {
        display: none;
    }

    .all {
        background-image: none;
        background-color: #ffffff;
        height: 37px;
        box-shadow: 0px 0px 30px -15px #000000;
    }
}