/*
	wangli ÐÞ¸ÄÓÚ2013/3/23 11£º59 version 1.0
*/
@media screen {
                html{
                    margin:0;
                    padding:0;
                    overflow:visible;/*Solve IE7 scrollbar issue*/
                }
				
                body {
                    margin: 0;
                    padding: 0;
                    background-color: white;
                    overflow:hidden;
                }

                #background {
                    background-color: #E8E8E8;
                    position: fixed;
                    top: 0;
                    bottom: 0;
                    left: 0;
					 right: 0;
                    transition: background 0.6s ease-out, opacity 0.2s linear;
                    pointer-events: none;
                }

                #container {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    pointer-events: none;
                    overflow-x: hidden;
                }

                body.off #container{
                }

                #centered {
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 0;
                }

                #hud {
                    position: absolute;
                    right: 17px;
                    top: 0;
                    width: 41px;
                    background: #dedede;
                    z-index: 100;
                    pointer-events: auto;
                    bottom: 0;
                    border-left: 1px solid #c5c5c5;
                    transition: background 0.5s ease-out, border 0.6s ease-out, opacity 0.2s linear, width 0.2s linear;
                }

                body.on #hud{
                    opacity:1;
                }

                body.off #hud{
                    opacity:0;
                }

                #hud button {
                    display: block;
                    width: 41px;
                    height: 42px;
                    padding: 0;
                    border: none;
                }

                .hud-menu{
                    position: absolute;
                    right: 42px;
                    top: 42px;
                    width: 123px;
                    height: 42px;
                    overflow: hidden;
                    transition: width 0.15s ease-in;
                }
                .hud-menu.off{
                    width: 0;
                }
                
                .hud-menu-color{
                    position: absolute;
                    right: 42px;
                    top: 84px;
                    width: 166px;
                    height: 76px;
                    overflow: hidden;
                    background-color:Black;
                    filter:alpha(opacity=50);
                    transition: width 0.15s ease-in;
                }
                .hud-menu-color.off{
                    width: 0;
                }
                .menubutton{
                    position: absolute;
                    top:0;
                    width: 41px;
                    height: 42px;
                }
                #hud .colorbtn
                {
                	position:absolute;
                    width: 54px;
                    height: 36px;
                }
				
				.loadingBig{float:left; width:75px;height:75px;}
				.titleBig span{float:left;width:120px;line-height:75px;height:75px;text-align:center;}
				.smallLoading{width:26px;height:26px;position:absolute;left:50%;top:50%;margin-left:-13px;margin-top:-13px;display:inline;}
				
				.loadingCss0{
					background-position: 0px 0px;
				}
				.loadingCss1{
					background-position: -28px 0px;
				}
				.loadingCss2{
					background-position: -56px 0px;
				}
				.loadingCss3{
					background-position: -84px 0px;
				}
				.loadingCss4{
					background-position: -112px 0px;
				}
				.loadingCss5{
					background-position: -140px 0px;
				}
				.loadingCss6{
					background-position: -168px 0px;
				}
				.loadingCss7{
					background-position: -196px 0px;
				}
				.loadingCss8{
					background-position: -224px 0px;
				}
				.loadingCss9{
					background-position: -252px 0px;
				}
				.loadingCss10{
					background-position: -280px 0px;
				}
				.loadingCss11{
					background-position: -308px 0px;
				}
				.loadingCss12{
					background-position: -336px 0px;
				}
				.loadingCss13{
					background-position: -364px 0px;
				}
				.loadingCss14{
					background-position: -392px 0px;
				}
				.loadingCss15{
					background-position: -420px 0px;
				}

				.loadingsCss0{
					background-position:0px 0px;
				}
				.loadingsCss1{
					background-position:-75px 0px;
				}
				.loadingsCss2{
					background-position:-150px 0px;
				}
				.loadingsCss3{
					background-position:-225px 0px;
				}
				.loadingsCss4{
					background-position:-300px 0px;
				}
				.loadingsCss5{
					background-position:-375px 0px;
				}
				.loadingsCss6{
					background-position:-450px 0px;
				}
				.loadingsCss7{
					background-position:-525px 0px;
				}
				.loadingsCss8{
					background-position:-600px 0px;
				}
				.loadingsCss9{
					background-position:-675px 0px;
				}
				.loadingsCss10{
					background-position:-750px 0px;
				}
				.loadingsCss11{
					background-position:-825px 0px;
				}
				.loadingsCss12{
					background-position:-900px 0px;
				}
				.loadingsCss13{
					background-position:-975px 0px;
				}
				.loadingsCss14{
					background-position:-1050px 0px;
				}
				.loadingsCss15{
					background-position:-1125px 0px;
				}
				.loading{width:75px;padding:0;border:0;height:75px;line-height:75px;position:absolute;left:50%;top:240px;margin-left:-38px;display:inline;}

                #hud-text-small{
                    left: 0;
                    background: url(../images/image.png) -246px 0px no-repeat;
                }

                #hud-text-small:hover {
                    background: url(../images/image.png) -246px -42px no-repeat;
                }

                #hud-text-small.selected {
                    background: url(../images/image.png) -246px -84px no-repeat;
                }

                #hud-text-middle{
                    left: 41px;
                    background: url(../images/image.png) -287px 0px no-repeat;
                }

                #hud-text-middle:hover {
                    background: url(../images/image.png) -287px -42px no-repeat;
                }

                #hud-text-middle.selected {
                    background: url(../images/image.png) -287px -84px no-repeat;
                }

                #hud-text-big{
                    left: 82px;
                    background: url(../images/image.png) -328px 0px no-repeat;
                }

                #hud-text-big:hover {
                    background: url(../images/image.png) -328px -42px no-repeat;
                }

                #hud-text-big.selected {
                    background: url(../images/image.png) -328px -84px no-repeat;
                }

                #hud-exit {
                    background: url(../images/image.png) 0px 0px no-repeat;
                }

                #hud-exit:hover {
                    background: url(../images/image.png) 0px -42px no-repeat;
                }

                #hud-exit:active {
                    background: url(../images/image.png) 0px -84px no-repeat;
                }
                
                div.colorBtnContainer{
                	position:absolute;
                	width:54px;
                	height:36px;
                }
                
                div.colorBtnContainer.selected{
                	background-color: #37A1F7;
				}
				#hud-menu-color-day-container{
				 	left:2px;
				 	top:2px;
                }
                #hud-menu-color-night-container{
					left:56px;
					top:2px;
                }
                #hud-menu-color-pink-container{
					left:110px;
					top:2px;
                }
                #hud-menu-color-yellow-container{
                	left:2px;
					top:38px;
                }
                #hud-menu-color-blue-container{
					left:56px;
					top:38px;
                }
                #hud-menu-color-green-container{
					left:110px;
					top:38px;
                }
				
                
                #hud-menu-color-day{
					background: url(../images/gray.png) no-repeat
                }
                #hud-menu-color-night{
					background: url(../images/night.png) no-repeat
                }
                #hud-menu-color-pink{
					background: url(../images/pink.png) no-repeat
                }
                #hud-menu-color-yellow{
					background: url(../images/yellow.png) no-repeat
                }
                #hud-menu-color-blue{
					background: url(../images/blue.png) no-repeat
                }
                #hud-menu-color-green{
					background: url(../images/green.png) no-repeat
                }
				/*#hud-menu-color .selected{
					border:5px solid red;
				}*/

                #hud-text {
                    background: url(../images/image.png) -82px 0px no-repeat;
                }

                #hud-text:hover,
                #hud-menu-text:hover ~ #hud-text{
                    background: url(../images/image.png) -82px -42px no-repeat;
                }
                
                body .warninngTitle{color:#999;font-size:30px;margin:260px auto 0;width:480px;text-align:center;}
                body .warninngTips{color:#999;font-size:18px;margin:10px auto 0;text-align:center;width:480px;}
                
                
                body.night #hud-exit {
                    background: url(../images/image.png) -41px 0px no-repeat;
                }

                body.night #hud-exit:hover {
                    background: url(../images/image.png) -41px -42px no-repeat;
                }

                body.night#hud-exit:active {
                    background: url(../images/image.png) -41px -84px no-repeat;
                }

                body.night #hud-text {
                    background: url(../images/image.png) -123px 0px no-repeat;
                }

                body.night #hud-text:hover,
                body.night #hud-menu-text:hover ~ #hud-text{
                    background: url(../images/image.png) -123px -42px no-repeat;
                }
				
                #hud-color {
                    background: url(../images/image.png) -164px 0px no-repeat;
                }

                #hud-color:hover {
                    background: url(../images/image.png) -164px -42px no-repeat;
                }

                #hud-color:active {
                    background: url(../images/image.png) -164px -84px no-repeat;
                }

                body.night #hud-color {
                    background: url(../images/image.png) -205px 0px no-repeat;
                }

                body.night #hud-color:hover {
                    background: url(../images/image.png) -205px -42px no-repeat;
                }

                body.night #hud-color:active {
                    background: url(../images/image.png) -205px -84px no-repeat;
                }

                #article {
                    /* The padding-right of 20px separates the scrollbar from the article itself. */
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    overflow-y: scroll;
                    overflow-x:hidden;
                    z-index: 0;
                    outline: none;
                    pointer-events: auto;
                    padding-right: 20px;
                    margin-left: -20px;
                }

                body.off #article{
                    pointer-events: none;
                }

                .article-fade {
                    position: absolute;
                    left: 34px;
                    height: 36px;
                    width: 800px;
                    z-index: 10; 
                    pointer-events: none;           
                    background-size: 800px 36px;
                }

               /* #fade-top {
                    top: 0;
                    background: url(safari-resource:/ReaderFadeTop.png) repeat-x;
                }

                #fade-bottom {
                    bottom: 0;
                    background: url(safari-resource:/ReaderFadeBottom.png) repeat-x;
                }*/


                #webpage{
                    width: 100%;
                    height: 100%;
                    border: none;
                    position: absolute;
                    z-index: -1;
                }
            }
            @media print {

                #hud {
                    display: none;
                }
                .page {
                    padding: 1em 2em;
                    background: white;
                    border: none;
                    color: black;
                    width: auto;
                }
                .page {
                    font-size: 1em;
                    text-align: left;
                    line-height: 1.7em;
                    letter-spacing: 0.05em;
                }
                .page p {
                    margin: 1em 0;
                    text-indent: 1.6em;
                }

            }
			.show{display:block;}
			.hidden{display:none;}
            
             #article em{
	    	    font-style:normal!important;
	        }
	        
	        img{
	        	border:none;
	        }
	        #article table img {
	        	max-width:none;
	        }
			u {
				text-decoration: none;
			}