*{margin:0;padding:0}

/******clear float*******/
.clearfix:after{clear:both;height:0;display:block;content:".";visibility:hidden}
.clearfix{display:inline-table}
/* Hides from IE-mac \*/
* html .clearfix{height:1%}
.clearfix{display:block}
/* End hide from IE-mac */
a{color:#333;text-decoration:none}
a img{border:none}
a:hover{color:#ffa500;text-decoration:underline}
ul,li,dl,dt,dd{list-style:none}
html,body{ background:#f5f5f5; color:#333; font:11px/15px Arial, Helvetica, sans-serif; text-align:center }
#wrapper{ width:1000px; background:#fff; margin:0 auto; text-align:left; height: 800px; }
#header { height: 116px; }
#logo  { height: 98px; width: 450px; float: left; background: url(logo.gif); }
#logo a {width:450px;height:98px;display:block; text-indent: -99999px; overflow: hidden; }
#nav  { height: 18px; width: 400px; float: left; background: url(nav.gif); padding-left: 50px; }
#nav  a  { display: block; float: left; width: 94px; text-align: center; line-height: 18px; font-weight: bold; color: #000000; }
#nav  a:hover  {color:#fff}
#topnew  { float: right; height: 22px; width: 540px; background: url(topnew.gif); text-align: right; line-height: 22px; padding-right: 10px; font-weight: bold; }
#topnew span { color: #FFFFFF; margin-right: 8px; }
#topnew a { color: #2e3192;}
#topbanner  { height: 94px; width: 550px; background: url(topbanner.gif); float: right; position: relative; }
#topbanner a { width:302px; height:45px; display:block; text-indent: -99999px; overflow: hidden; position: absolute; right: 0px; bottom: 0px; }
#mid { clear: both; }

#leftside{ float: left; width: 325px; background: url(line.gif) no-repeat right -80px; height: 600px; }
#leftside ul{ margin-left: 80px; }
#leftside ul li{ margin-bottom: 95px; font-size: 18px; }
#leftside ul a { color: #808080; background: url(arrow.gif) no-repeat right; padding-right: 16px; }
#rightside{ color:#808080; float:left; height: 510px; padding-left: 20px; padding-top: 0px; border-style: none; }

/* homepage */
#index-l  { float: left; width: 325px; background: url(line.gif) no-repeat right -80px; height: 600px }
#index-l ul { margin-left: 80px; }
#index-l h2{ font-size: 14px; color: #333333; }
#index-l li { margin-bottom:95px}
#index-l  .words  { font-size: 12px; background: url(icon-list.gif) no-repeat 10px center; padding-left: 25px; padding-top: 5px; display: inline-block; padding-bottom: 5px; text-decoration: underline; color: #F01D23; }
#index-r { color:#808080; float: left; width: 470px; border-right: 1px solid #9798C8; height: 510px; padding-left: 20px; height:auto }
#index-r h2 { font-size: 12px; clear: both; }
#index-r   ul { margin: 5px auto; padding-bottom: 10px; }
#index-r li { clear: both; }
#index-r .data { display: block; background: url(arrow.gif) no-repeat left center; padding-left: 15px; font-size: 14px; line-height: 30px; clear: both; margin-bottom: 5px; }
#index-r .litpic{ width:34px; height:34px; float:left; padding-top:5px;margin:0 6px 0 18px;display: inline; }
#index-r .subject{ display: block; }
#index-r .summary{ display: block; float: left; width:400px}


/* single page */
#page_left { float:left; width:230px; margin-left:80px; height:215px; background:url(page-left-bg.gif) no-repeat right center; display: inline; padding-top: 145px; font-size: 47px; color: #808080; line-height: 47px; }
#page_right{ float: left; margin:40px auto auto 20px; display: inline; width:495px }
#page_right p { margin: 20px 0px; font-size: 12px; line-height: 22px; color: #000000; }
#page_right p a { font-weight: bold; }


/* adsense */
#ad-index{ clear:both; text-align:center; height: 90px; width: 728px; margin: 10px auto 10px 82px; display: inline; float: left; }
#ad-right{ width:120px; height:600px; float: right; margin-right: 30px; display: inline; margin-top: 10px; }
#ad-content{ margin-bottom: 5px; float: right; display: inline; margin-left: 5px; }

/* list */
#box-elementary{ height: 453px; width: 418px; float: left; overflow-y: scroll; border-top: 1px solid #9798C8; border-right: 1px solid #9798C8; border-bottom: 1px solid #9798C8; scrollbar-face-color: #2e3091; scrollbar-highlight-color: #2e3091; scrollbar-shadow-color: #2e3091; scrollbar-3dlight-color: #9798C8; scrollbar-arrow-color: #f5f5f5; scrollbar-track-color: #f5f5f5; scrollbar-darkshadow-color: #9798C8; padding-left: 20px; padding-right: 20px; }
#box-elementary-border { float: left; height: 455px; width: 33px; background: url(list-elementary.gif); }
#box-elementary h2{ margin:15px 0; font-weight: normal; color: #2e3091; font-size: 15px; }
#box-pre-intermediate{ height: 453px; width: 418px; float: left; overflow-y: scroll; border-top: 1px solid #80D4CE; border-right: 1px solid #80D4CE; border-bottom: 1px solid #80D4CE; scrollbar-face-color: #00A99D; scrollbar-highlight-color: #00A99D; scrollbar-shadow-color: #00A99D; scrollbar-3dlight-color: #80D4CE; scrollbar-arrow-color: #f5f5f5; scrollbar-track-color: #f5f5f5; scrollbar-darkshadow-color: #80D4CE; padding-left: 20px; padding-right: 20px; }
#box-pre-intermediate-border { float: left; height: 455px; width: 33px; background: url(list-pre-intermediate.gif); }
#box-pre-intermediate h2{ margin:15px 0; font-weight: normal; color: #00A99D; font-size: 15px; }
#box-intermediate{ height: 453px; width: 418px; float: left; overflow-y: scroll; border-top: 1px solid #EA8AAD; border-right: 1px solid #EA8AAD; border-bottom: 1px solid #EA8AAD; scrollbar-face-color: #D4145A; scrollbar-highlight-color: #D4145A; scrollbar-shadow-color: #D4145A; scrollbar-3dlight-color: #EA8AAD; scrollbar-arrow-color: #f5f5f5; scrollbar-track-color: #f5f5f5; scrollbar-darkshadow-color: #EA8AAD; padding-left: 20px; padding-right: 20px; }
#box-intermediate-border { float: left; height: 455px; width: 33px; background: url(list-intermediate.gif); }
#box-intermediate h2{ margin:15px 0; font-weight: normal; color: #D4145A; font-size: 15px; }
#box-advanced{ height: 453px; width: 418px; float: left; overflow-y: scroll; border-top: 1px solid #F68E92; border-right: 1px solid #F68E92; border-bottom: 1px solid #F68E92; scrollbar-face-color: #ED1C24; scrollbar-highlight-color: #ED1C24; scrollbar-shadow-color: #ED1C24; scrollbar-3dlight-color: #F68E92; scrollbar-arrow-color: #f5f5f5; scrollbar-track-color: #f5f5f5; scrollbar-darkshadow-color: #F68E92; padding-left: 20px; padding-right: 20px; }
#box-advanced-border { float: left; height: 455px; width: 33px; background: url(list-advanced.gif); }
#box-advanced h2{ margin:15px 0; font-weight: normal; color: #ED1C24; font-size: 15px; }

#box-words{width:455px;padding:0 20px}
#box-words li { margin-bottom: 10px; font-weight: bold; background: url(icon-list.gif) no-repeat left 5px; padding-left: 15px; color: #999999; }
#box-words li a{color:#999999}
#box-words .newest { color: #333333; }
#box-words .newest a{ color: #333333; }


#list { font-style: italic; }
#list p { margin-bottom: 20px; }
#list .data { display: block; background: url(arrow.gif) no-repeat left center; padding-left: 15px; font-size: 14px; line-height: 30px; clear: both; margin-bottom: 5px; }
#list .litpic{ width:34px; height:34px; float:left; padding-top:5px;margin:0 6px 0 18px;display: inline; }
#list .subject{ display: block; }
#list .summary{display: block; }

#other-lessons{margin-left:80px}
#other-lessons h2 { font-size:13px;line-height: 30px; color: #808080; }
#other-lessons ul { margin: 0px; padding: 0px; }
#other-lessons ul li { background: url(icon-list.gif) no-repeat 5px center; margin: 0px; font-size: 12px; line-height: 20px; padding-left: 15px; height: 20px; }

#pages{ text-align: right; margin-right: 15px; }
/* artile */
#article_title{ margin-left:82px; }
#article_title h2 { font-size: 18px; font-weight: normal; color: #808080; }
#article_title .litpic { display: block; margin: 15px 0px; }
#article_title h3 { font-size: 11px; font-style: italic; font-weight: normal; color: #000000; margin-bottom: 15px; }
#article_title .down { margin-top: 15px; }
#article_body{ color: #000000; }

#footer { clear: both; margin-left: 315px; float: left; width: 400px; }
#list .subject a { color:#0000FF }
#index-r .subject a { color:#0000FF }
#other-lessons li a { color:#0000FF }