@charset "utf-8";
/*CSS Info ======================================================================
File Name: Index.css
Editor: Elian
Last Editor: Sharon
CreateDate:2016/3/3
LastDate: 2020/07/28
Version: 3.2
---------------------------
【 Table of Contents 】
	DIV XHTML頁面
	Free Style
	使用jQuery
	登入首頁
【 Edit Record 】
    3.1 → 修改原設定、新增RWD for 1024, 960
    3.2 → 新增地圖新增控制項
=================================================================================*/
#InfoController {
    display: none;
}
/*===============================================================================
                         以下是跨瀏覽器設定
=================================================================================*/
@media screen and (min-width: 961px) and (max-width: 1200px) {

    /*------------ 左邊內文設定 -----------*/
	.aside {
		width:630px;
	}
	
	.GIS {
		width:530px;
	}
	
	.Map {
		width:530px;
	}
	
	.Map.air {
		height:622px;
	}

    .Maptool ul#id_Station_type div {
        border-bottom:1px solid #96bcc7;
    }

	/*------------ 右邊內文設定 -----------*/
	.Cont {
		padding-left:630px;
	}
	
	.more {
		margin-top:15px;
	}
	
	/*--- 指標 ---*/
	.Airquantity {
		width:100%;
		margin-bottom:0;
	}
	
	.Airquantity span {
		padding-right:50px;
	}
	
	.MyHead, .MyGridView tr.MyHead th, .MyGridView th, .MyGridView2 th {
		font-size:1em;
	}
	
	.MyGridView td, .MyGridView2 td, .MyRow td, .MyAlt td {
		font-size:1em;
	}
	
	
}

/*===============================================================================
                        RWD for Projection by Sharon 17/12/28
=================================================================================*/

@media screen and (max-width: 1024px) {
    #RouteNav {
	    margin-left: 0;
    }

    .more p {
		margin: 0;
	}

    .MyAQlist {
        margin-top: 0;
    }

    .timeupdate {
        margin-bottom: 0;
    }

    .Airquantity {
        margin-top: 5px;
    }

    .Info select {
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 960px) {
    #Header .wrapper {
        padding: 10px 5px;
    }

    ul#navigation a {
        padding: 12px;
    }

    #RouteNav li a label {
        display: none;
    }

    /*------------ 左邊內文設定 -----------*/
	.aside {
		width: 100%;
		height: calc(100vh - 20px);
		margin-bottom: 10px;
	}

    .aside.AQMonitor {
        position: initial;
    }
	
	.aside.AQMonitor .GIS {
		/*height: calc(100vh - 40px);*/
	}
	
	.GIS {
		height: calc(100vh - 40px);
		width: calc(100% - 100px);
	}
	
	.Map {
		width: 100%;
	}
	
	.Map.genaral {
		height: 100vh;
	}
	
	.Map.air {
		height: calc(100vh - 50px);
	}
	
	.pageBtn {
		height: 100vh;
	}

    .pageBtn.AQMonitor {
		/*height: calc(100vh - 40px);*/
	}

    .Maptool ul#id_Station_type div {
        border-bottom:1px solid #96bcc7;
    }

	/*------------ 右邊內文設定 -----------*/
	.Cont {
		padding-left: 0;
	}
	
	.more {
		margin-top:15px;
	}
	
	/*--- 指標 ---*/
	.Airquantity {
		width: 48%;
		margin-bottom:0;
	}
	
	.Airquantity span {
		padding-right:50px;
	}

    .MyAQlist th {
        width: 50%;
    }

    .MyAQlist td {
        width: 25%;
    }
	
	.MyHead, .MyGridView tr.MyHead th, .MyGridView th, .MyGridView2 th {
		font-size:1em;
	}
	
	.MyGridView td, .MyGridView2 td, .MyRow td, .MyAlt td {
		font-size:1em;
	}

/*===============================================================================
               地圖新增控制項 for Projection by Sharon 18/01/09
=================================================================================*/
    #InfoController.open {
        display: block;
        position: absolute;
        left: 0;
        top: 50px;
        background-color: rgba(56,61,64,0.5);
        padding: 5px 5px 10px 5px;
        width: 265px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        transition: 0.5s;
        z-index: 999;
    }

        #InfoController.open .timeupdate {
            background: none;
            padding: 0;
            color: #FFF;
            font-size: 0.875rem;
            font-weight: bold;
            margin-bottom: 10px;
        }

        #InfoController.open select {
            width: 115px;
            float: left;
			margin: 0 5px;
        }

        #InfoController.open .AQbox .box {
            width: 115px;
            padding: 5px;
            background-image: none;
            margin: 5px 5px 0 5px;
        }

            #InfoController.open .AQbox .box span {
                padding: 0;
                font-size: 0.875rem;
            }

        #InfoController.open .AQbox div span.num {
            display: block;
            width: 100%;
            text-align: center;
        }

    #InfoController.open #InfoBtn {       
        position: absolute;
        left: 265px;
        top: 0;
        padding: 10px;
        background-color: rgba(56,61,64,0.5);
        transition: 0.5s;
        z-index: 997;
    }

        #InfoBtn i {
            color: #FFF;
        }

        #InfoBtn input[type=checkbox] {
            display: none;
        }

    #InfoController.close {
        display: block;
        position: absolute;
        left: 0;
        top: 50px;
        transition: 0.5s;
        width: 0;
        padding: 0;
    }

        #InfoController.close div {
            display: none;
        }

        #InfoController.close #InfoBtn {
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            padding: 10px;
            background-color: rgba(0,0,0,0.2);
            transition: 0.5s;
            z-index: 996;
        }

            #InfoController.close #InfoBtn i {
                color: #000;
                font-weight: bold;
            }

    .AQcolorIndex {
        display: none;
        position: absolute;
        width: 780px;
        height: 310px;
        top: 20px;
        left: 20px;
        z-index: 999;
        background-image: url(../images/index/colorIndex.png);
        background-size: 760px auto;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: rgba(0,0,0,0.75);
    }

    .AQbox:hover .AQcolorIndex {
        display: block;
    }
}

@media only screen and (max-width: 47.9735em) { /*767↓*/

    .Map.air {
        height: calc(100vh - 123px);
    }
    .aside {
        height: 100vh;
        position:unset;
    }
    .Cont{
        min-height:unset;
    }
    /*.box {
        float: unset;
    }

    .pageBtn {
         height: unset; 
         width:100%;
    }
        .pageBtn ul{
            margin:auto;
        }
            .pageBtn ul li {
                background-position: center 15px;
                background-repeat: no-repeat;
                border-bottom: unset;
                width: 33.6%;
                padding: 80px 0 15px;
                display: inline-block;
                margin-left: -4px;
            }
    .GIS{
        width:100%;
    }

    .Map.genaral {
        height: 80vh;
    }

    .Map.air {
        height: calc(80vh - 50px);
    }*/
    .MySwitch {
        bottom: 65px;
    }
    .mapTitle {
        left:unset;
        right: 10px;
        bottom: 15px;
    }
    .Airquantity {
        width: 98%;
    }
}