@charset "utf-8";
/* 结构层 */
html{background:#E3EEF3;}
body {
font-size:12px;
text-align:center;/*兼容IE 5.5,在5.5下margin居中是无效的，只能用这个值*/
background:#E3EEF3;
}
.header,.wrapper,.footer{text-align:left;}/*还原成居左效果*/
/*页头区------------------------------------------------*/
.header{position:relative;width:1003px;height:135px;margin:0 auto;background:url(../image/headbg.gif) repeat-x left bottom;}
.header h1{position:absolute;left:20px;top:40px;width:257px;height:68px;line-height:68px;z-index:1;background:url(../image/logo.gif) no-repeat left top; text-indent:-999px;}
.headmain{position:absolute;left:0;top:32px;width:100%;height:100px;background:url(../image/headimg.gif) no-repeat left -2px;}
.headbot{width:100%;height:103px;background:url(../image/bookbg.gif) no-repeat -70px bottom;}
/*顶部一级菜单高亮*/
#center .headbot,#payrecord .headbot,#myrecord .headbot,#myword .headbot,#reciterecord .headbot{background:url(../image/bookbg.gif) no-repeat -526px bottom;}
#vip .headbot{background:url(../image/bookbg.gif) no-repeat -2000px bottom;}
/*
.headbot{position:absolute;left:0;top:27px;width:100%;height:110px;line-height:30px;background:url(../image/headleft.gif) no-repeat -10px bottom;}
顶部一级菜单高亮
#center .headbot,#payrecord .headbot,#myrecord .headbot,#myword .headbot,#reciterecord .headbot{background:url(../image/headleft1.gif) no-repeat -10px top;}
#vip .headbot,#word .headbot{background:url(../image/headleft2.gif) no-repeat -10px -2px;}
左侧背诵中心二级菜单高亮*/
/*频道导航菜单*/
.channel{width:500px;height:25px;line-height:25px;position:absolute;right:20px;top:0px;text-align:right;}
.channel li{display:inline;background:url(../image/listdot.gif) no-repeat left -32px;padding-left:14px;}
.channel li.index{background:none;padding-left:0;}
/*项部导航菜单*/
.topnav{position:absolute;width:663px;height:93px;right:30px;top:-3px;background:url(../image/navbg.gif) no-repeat left top;overflow:hidden;}
.topnav li{float:left;height:95px; }
.topnav li a:link,.topnav li a:visited{display:block;width:100%;height:95px;color:#fff;text-align:center; text-decoration:none; text-indent:-9999px}
.topnav li a:hover{}
.topnav li.n1{width:80px;margin-right:10px;}
.topnav li.n1 a:hover{background:url(../image/navbg.gif) no-repeat left -94px;}
.topnav li.n2{width:80px;margin-right:10px;}
.topnav li.n2 a:hover{background:url(../image/navbg.gif) no-repeat -90px -94px;}
.topnav li.n3{width:80px;margin-right:10px;}
.topnav li.n3 a:hover{background:url(../image/navbg.gif) no-repeat -180px -94px;}
.topnav li.n4{width:100px;margin-right:10px;}
.topnav li.n4 a:hover{background:url(../image/navbg.gif) no-repeat -270px -94px;}
.topnav li.n5{width:80px;margin-right:10px;}
.topnav li.n5 a:hover{background:url(../image/navbg.gif) no-repeat -380px -94px;}
.topnav li.n6{width:80px;margin-right:10px;}
.topnav li.n6 a:hover{background:url(../image/navbg.gif) no-repeat -470px -94px;}
.topnav li.n7{width:100px;}
.topnav li.n7 a:hover{background:url(../image/navbg.gif) no-repeat -560px -94px;}
/*当前高亮,请给每个页面的中加一个ID值*/
#index .topnav li.n1 a:link,#index .topnav li.n1 a:visited{background:url(../image/navbg.gif) no-repeat 0px -94px;;}
#type .topnav li.n2 a:link,#type .topnav li.n2 a:visited{background:url(../image/navbg.gif) no-repeat -90px -94px;}
#vip .topnav li.n3 a:link,#vip .topnav li.n3 a:visited{background:url(../image/navbg.gif) no-repeat -180px -94px;}
#center .topnav li.n4 a:link,#center .topnav li.n4 a:visited{background:url(../image/navbg.gif) no-repeat -270px -94px;}
#myword .topnav li.n4 a:link,#myword .topnav li.n4 a:visited{background:url(../image/navbg.gif) no-repeat -270px -94px;}
#payrecord .topnav li.n4 a:link,#payrecord .topnav li.n4 a:visited{background:url(../image/navbg.gif) no-repeat -270px -94px;}
#reciterecord .topnav li.n4 a:link,#reciterecord .topnav li.n4 a:visited{background:url(../image/navbg.gif) no-repeat -270px -94px;}
#myrecord .topnav li.n4 a:link,#myrecord .topnav li.n4 a:visited{background:url(../image/navbg.gif) no-repeat -270px -94px;}
#game .topnav li.n5 a:link,#game .topnav li.n5 a:visited{background:url(../image/navbg.gif) no-repeat -380px -94px;}
#dictionary .topnav li.n6 a:link,#dictionary .topnav li.n6 a:visited{background:url(../image/navbg.gif) no-repeat -470px -94px;}
#way .topnav li.n7 a:link,#way .topnav li.n7 a:visited{background:url(../image/navbg.gif) no-repeat -560px -94px;}
/*这个容器主要用来设置主体区的边框线和固宽的居中效果*/
.wrapper{
width:1003px;
margin:0 auto;
overflow:hidden;
position:relative;
}
/*中间主体内容区在左侧-菜单在右侧------------------------第一种布局-----------------*/
/*中间两列等高布局 */
.container2 {
/*显示在#container2的下层,构成右列的背景层 */
float:left;
overflow:hidden;
width:100%;
background:#fff url(../image/contentbg.gif) repeat-y 700px top; /* 第二列背景色 */
}
.container1 {
/*浮在#container2的上层,构成左列的背景层 */
float:left;
position:relative;
width:100%;
right:220px;/*右侧空多少空间出给右列，这个值等于右列的宽度值*/
padding:10px 0;/*上下间距*/
}
.leftcontent {
float:left;
position:relative;
overflow:hidden;
width:690px;/*710px-(10px*2)=690px*/
left:240px;/*250px+10px*/
padding-top:10px;
}
.rightmenu {
float:left;
position:relative;
overflow:hidden;
width:232px;
right:-281px;/*250px+20px+10px;*/
padding-top:20px;
}
/*中间主体内容区在右侧-菜单在左侧---------------------------第二种布局--------------*/
/*中间两列等高布局 */
.container4 {
/*显示在#container2的下层,构成右列的背景层 */
float:left;
overflow:hidden;
width:100%;
background:#fff url(../image/contentbg.gif) repeat-y 243px top; /* 第二列背景色 */
}
.container3 {
/*浮在#container2的上层,构成左列的背景层 */
float:left;
position:relative;
width:100%;
right:730px;/*右侧空多少空间出给右列，这个值等于右列的宽度值*/
padding:10px 0;/*上下间距*/
}
.rightcontent {
float:left;
position:relative;
overflow:hidden;
width:650px;
right:-1043px;
padding-bottom:10px;
padding-top:20px;
}
.leftmenu{
float:left;
position:relative;
overflow:hidden;
width:270px;
left:90px;
}
/*通栏布局---------------------------第三种布局--------------*/
.onecol{
width:1003px;
margin:0 auto;
background:#fff;
padding:10px 0;/*不要定义左右的填充值，在不同浏览器下会出现无法预料的问题*/
text-align:left;
}
/*页脚区------------------------------------------------*/
.footer {
clear:both;
width:1003px;
margin:0 auto;
border-top:1px #D3D3D3 solid;
}
.infoot{
border-top:5px #ECECEC solid;
width:100%;
height:100px;
padding-top:15px;
background:url(../image/footbg.gif) repeat-x left top;
}
.footlink{width:370px;margin:0 auto;height:22px;line-height:22px;text-align:center;border:1px red solid;}
.footlink li{float:left;margin-right:10px;}
.footer p {text-align:center;height:22px;line-height:22px;margin:0;}
.pay{ background:url(../image/paypic.gif) repeat-x left top; width:41px; height:41px; display:block; position:absolute; left:543px; top:25px;}