@charset "UTF-8";
/* CSS Document */

body {
	background:url(../i/bg2.jpg) 0 0 repeat-x;
	margin:0;
	padding:0;
	overflow-x:hidden;
	background-size:contain;
	background-color:#9fbe15;
}

img {
	border:none;
}

.clearboth {
	clear:both;
}

a {
	text-decoration:none;
}

.wrapper {
	width:100%;
	height:auto;
	position:relative;
}

/* Header css */

.header {
	width:100%;
	height:130px;
	z-index:1000;
}
.headeralign {
	width:980px;
	margin:0 auto;
	z-index:10;
}
.headermenu {
	width:980px;
	height:130px;
	margin:0 auto;
	z-index:99;
}

.logo {
	padding:15px 50px 0 50px;
	width:125px;
	float:left;
}

.search {
	float:right;
	margin:95px 77px 5px 40px;
}

.home {
	float: right;
	margin: 95px 30px 5px 30px;
}

.search input[name='k'] {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background:url(../i/searchglass.png) center left no-repeat;
	width:150px;
	font:Verdana, Arial, sans-serif, "微軟正黑體", "新細明體";
	padding:3px 0 3px 20px;
	outline:none;
	border:none;
}

.searchbutton {
	vertical-align:bottom;
	margin:0 10px 1px 3px;
}

@-moz-document url-prefix() {
    .searchbutton {
        margin: 0 10px -1px 3px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0)
{
	.search {
		margin: 95px 77px 5px 30px;
	}
	
}

/* Header css ends */

.main {
	width:100%;
	height:auto;
	margin:0;
	padding:0;
}

.content {
	width:980px;
	height:auto;
	margin:0 auto;
}

.navimenu {
	width:204px;
	height:auto;
	padding:0 14px 0 40px;
	float:left;
}

.content_ani {
	width:720px;
	height:auto;
	margin:0 auto;
	padding-top:0px;
}

/* 10 color menu */

.menu1 {
	background-color:#FFD21C;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	height:auto;
	width:200px;
	margin-bottom:11px;
	border:2px solid transparent;
}

.activemenu1 {
	background-color:white;
	border:2px solid #FFD21C;
}

.menu2 {
	background-color:#EA8071;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	height:auto;
	width:200px;
	margin-bottom:11px;
	border:2px solid transparent;
}
.dropdown {
    background: white;
    border: 1px solid rgba(0,0,0,0.17);
    font-weight: normal;
    list-style: none;
    display:none;
	margin:5px 0 11px 0;
	border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

.dropdown:before {
    content: "";
    width: 0;
    height: 0;
	float:right;
	margin:-7px 10px 0 0;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(255,255,255,1) transparent;    
}

.dropdown a {
    display:block;
    color:#006699;
    background-color:white;
    padding:10px 0 10px 10px;
    font-weight:bold;
    text-decoration:none;
	border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
	border-top: 1px solid rgba(0,0,0,0.17);
	transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
	-o-tansition: all 0.5s linear;
}

.dropdown a:hover {
	background-color:#fafafa;
}
.activemenu2 {
	background-color:white;
	border:2px solid #EA8071;
}

.menu3 {
	background-color:#B0C91B;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	height:auto;
	width:200px;
	margin-bottom:11px;
	border:2px solid transparent;
}

.activemenu3 {
	background-color:white;
	border:2px solid #B0C91B;
}

.menu4 {
	background-color:#EF7C00;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	height:53px;
	width:200px;
	margin-bottom:11px;
	border:2px solid transparent;
}

.activemenu4 {
	background-color:white;
	border:2px solid #EF7C00;
}

.menu5 {
	background-color:#7ECEF4;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	height:53px;
	width:200px;
	margin-bottom:11px;
	border:2px solid transparent;
}

.activemenu5 {
	background-color:white;
	border:2px solid #7ECEF4;
}

.menu6 {
	background-color:#B062A3;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	height:53px;
	width:200px;
	margin-bottom:11px;
	border:2px solid transparent;
}

.activemenu6 {
	background-color:white;
	border:2px solid #B062A3;
}

.menu7 {
	background-color:#8B9DD0;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	height:53px;
	width:200px;
	margin-bottom:11px;
	border:2px solid transparent;
}

.activemenu7 {
	background-color:white;
	border:2px solid #8B9DD0;
}

.menu8 {
	background-color:#00A559;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	height:53px;
	width:200px;
	margin-bottom:11px;
	border:2px solid transparent;
}

.activemenu8 {
	background-color:white;
	border:2px solid #00A559;
}

.menu9 {
	background-color:#00ADA9;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	height:53px;
	width:200px;
	margin-bottom:11px;
	border:2px solid transparent;
}

.activemenu9 {
	background-color:white;
	border:2px solid #00ADA9;
}

.menu10 {
	background-color:#EF94AE;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	height:53px;
	width:200px;
	margin-bottom:11px;
	border:2px solid transparent;
}

.activemenu10 {
	background-color:white;
	border:2px solid #EF94AE;
}



/* 10 color menu ends */

.menuleft {
	margin:0;
	padding:0;
	width:20%;
	height:53px;
	float:left;
	border:none;
}

.menutitle {
	margin:auto;
	height:42px;
	text-align:center;
	float:left;
	width:60%;
	border:none;
	margin:15px 0;
	display:table;
}

.menuright {
	margin:0;
	padding:0;
	width:20%;
	height:53px;
	float:right;
	border:none;
}

.activeleft {
	background:url(../i/active1.png) 0 0 no-repeat;
}

.activeright {
	background:url(../i/active2.png) 0 0 no-repeat;
}


/* Right content */

.rightcontent {
	width:625px;
	height:auto;
	float:left;
	margin:0 0 0 25px;
	background-color:white;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-webkit-box-shadow: 0 7px 12px -6px black;
	-moz-box-shadow: 0 7px 12px -6px black;
	box-shadow: 0 7px 12px -6px black;
}

.seriestitle {
	margin:7px 7px 0 7px;
	background-color:#FFD21C;
	border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0 ;
	text-align:center;
}

.seriesinfo {
	background-color:#fef8e6;
	height:auto;
	margin:0 7px 7px 7px;
	padding:10px 20px;
}

.bookshelf {
	width:580px;
	margin-top:25px;
	height:auto;
	padding:0 23px;
}

.books {
	float:left;
	margin:0 20px 25px 20px;
	height:160px;
}

.cover {
	border:4px solid #FFD21C;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding:5px;
}
.booktitle {
	text-align:center;
	padding:5px 0 0 0;
	width: 133px;
}

.pages, .pages>a {
	width:205px;
	margin:25px auto;
	font:18px normal Arial, Helvetica, sans-serif;
	letter-spacing:4px;
	color:#FFD21C;
	text-align: center;
}
.pages>.selected {
	background-color: #FFD21C;
	color: #ffffff;
	padding-left: 2px;
}
/* Right content ends*/


/* footer */

.footerall {
	width:100%;
	height:100%;
	margin:15px 0 0 0;
}

.footer {
	width:980px;
	height:100%;
	margin:0 auto;
}

/* footer ends*/


/* bookcontent */

.bookcontent {
	width:720px;
	height:auto;
	margin:0 auto;
}

.animation {
	width: 720px;
	background-color:#b8d02a;
	border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0 ;
	text-align:center;
	-webkit-box-shadow: 0 7px 12px -6px black;
	-moz-box-shadow: 0 7px 12px -6px black;
	box-shadow: 0 7px 12px -6px black;
}

.video {
	width:720px;
	height:496px;
	height:auto;
	background-color:white;
}
.shadow {
	-webkit-box-shadow: 0 7px 12px -6px black;
	-moz-box-shadow: 0 7px 12px -6px black;
	box-shadow: 0 7px 12px -6px black;
}


.booksmenu {
	width:720px;
	height: auto;
}

.submenu {
	width:120px;
	height:36px;
	font:bold 18px Verdana, Arial, sans-serif, "微軟正黑體", "新細明體";
	color:white;
	text-align:center;
	padding-top:14px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	margin-top:15px;
	margin-right:29px;
	float:left;
}

.last {
	margin-right:0;
}

.first {
	margin-left:1px;
}
	

/* font css */


.title {
	font:bold 18px Verdana, Arial, sans-serif, "微軟正黑體", "新細明體";
	color:white;
	padding:0 1px;
	vertical-align:middle;
	display:table-cell;
}

.activetitle1 {
	color:#FFD21C;
}

.activetitle2 {
	color:#EA8071;
}

.activetitle3 {
	color:#B0C91B;
}

.activetitle4 {
	color:#EF7C00;
}

.activetitle5 {
	color:#7ECEF4;
}

.activetitle6 {
	color:#B062A3;
}

.activetitle7 {
	color:#8B9DD0;
}

.activetitle8 {
	color:#00A559;
}

.activetitle9 {
	color:#00ADA9;
}

.activetitle10 {
	color:#EF94AE;
}

h3 {
	font:bold 24px Verdana, Arial, sans-serif, "微軟正黑體", "新細明體";
	color:white;
	padding:10px 0;
}

.contenttext {
	font:bold 15px Verdana, Arial, sans-serif, "微軟正黑體", "新細明體";
	color:#333;
}
	
	#stage {
            top: 0px;
            left: 0px;
            z-index: -100;
        }
        .stage {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            min-width: 900px;
            height: 359px;
            overflow: hidden;
        }
	#stage2 {
            bottom: 0px;
            left: 0px;
            z-index: -100;
        }
        .stage2 {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            min-width: 900px;
            height: 30%;
            overflow: visible;
        }


#clouds {
            background: transparent url(../i/cloud.png) 305px 50px repeat-x;
			z-index:-10;
        }
		
#hill2 {
            background: transparent url(../i/hill3.png) 0 60px repeat-x;
			z-index:-20;
			
        }
#hill1 {
            background: transparent url(../i/hill-with-windmill.png) 0 0 repeat-x;
        }
#squirrel {
            background: transparent url(../i/bird-forward-back.png) 0 0 no-repeat;
            position: absolute;
            bottom: -100px;
            left: 10%;
            width: 180px;
            height: 123px;
            z-index: 2000;
        }

/*------------------css3 cloud-----------------
.cloud {
	width: 200px; height: 60px;
	background: #fff;
	
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	
	position: relative;
	margin-bottom:-30px;
}

.cloud:before, .cloud:after {
	content: '';
	position: absolute; 
	background: #fff;
	width: 100px; height: 80px;
	position: absolute; top: -15px; left: 10px;
	
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}

.cloud:after {
	width: 120px; height: 120px;
	top: -55px; left: auto; right: 15px;
}

.x1 {
	top:15px;
	-webkit-animation: moveclouds 25s linear infinite;
	-moz-animation: moveclouds 25s linear infinite;
	-o-animation: moveclouds 25s linear infinite;
}

.x2 {
	left: 200px;
	top:-10px;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.6; 
	
	-webkit-animation: moveclouds 35s linear infinite;
	-moz-animation: moveclouds 35s linear infinite;
	-o-animation: moveclouds 35s linear infinite;
}

.x3 {
	left: -250px; top: 10px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; 
	
	-webkit-animation: moveclouds 30s linear infinite;
	-moz-animation: moveclouds 30s linear infinite;
	-o-animation: moveclouds 30s linear infinite;
}

.x4 {
	left: 470px; top: 10px;
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.75; 
	
	-webkit-animation: moveclouds 28s linear infinite;
	-moz-animation: moveclouds 28s linear infinite;
	-o-animation: moveclouds 28s linear infinite;
}

.x5 {
	left: -150px; top: -30px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; 
	
	-webkit-animation: moveclouds 40s linear infinite;
	-moz-animation: moveclouds 40s linear infinite;
	-o-animation: moveclouds 40s linear infinite;
}

@-webkit-keyframes moveclouds {
	0% {margin-left: 100%;}
	100% {margin-left: -30%;}
}
@-moz-keyframes moveclouds {
	0% {margin-left: 100%;}
	100% {margin-left: -30%;}
}
@-o-keyframes moveclouds {
	0% {margin-left: 100%;}
	100% {margin-left: -30%;}
}
*/