/* CSS Document */ /* --------------------------------------------- 01. main/default elements --------------------------------------------- */ html { overflow-x:hidden} body { background:#C4C4C4 url(../images/bg_body.gif) repeat-y center; font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:0 auto;} a:link, a:visited { color:#20A7E6; text-decoration: underline} a:hover { color:#F48000; text-decoration:underline} p { line-height:1.4em; font-size:12px; color:#452900; margin:0px; padding-top:0px; padding-bottom:0px;} h1 { font-family:"Georgia", Times New Roman, Times, serif; font-size:30px; color:#98CB00; margin:0px; padding-top:5px; padding-bottom:5px; font-weight:normal; } h2 { font-family:"Georgia", Times New Roman, Times, serif; font-size:20px; color:#FFFFFF ; margin:0px; padding-top:5px; padding-bottom:5px; font-weight:normal;} h3 { font-family:"Georgia", Times New Roman, Times, serif; font-size:18px; color:#282828; margin:0px; padding-top:5px; padding-bottom:5px; font-weight:normal;} h4 { font-family:"Georgia", Times New Roman, Times, serif; font-size:16px; color:#780E0E; margin:0px; padding-top:5px; padding-bottom:5px; font-weight:normal;} h5 { font-family:"Georgia", Times New Roman, Times, serif; font-size:15px; color:#6F6F6F; margin:0px; padding-top:5px; padding-bottom:5px; font-weight:normal;} img {border:none; } /* --------------------------------------------- 02. topbar --------------------------------------------- */ #bgtopbar { width:100%; height:29px; background:#BBDD3F url(../images/bg_header.gif) repeat-x top center; border-bottom:1px solid #89B700; } #topbar { width:960px; height:29px; margin:0 auto; padding-left:35px} #topbar p { float:left; margin:0px; padding-top:4px; font-size:13px; color:#282828; font-family:"Georgia", Times New Roman, Times, serif; font-style:italic; padding-bottom:0px; padding-left:5px; vertical-align:middle; height:25px; } #topbar p a { font-size:12px; color:#282828; text-decoration:underline; padding-left:8px; padding-right:8px} #topbar p a:hover { color: #ffffff; text-decoration:none} #topbar fieldset { width: auto; padding-top:3px; float:left; padding-left:16px; position:relative; border:none; height:27px;} #topbar fieldset label { float:left; font-size:13px; color:#282828; font-family:"Georgia", Times New Roman, Times, serif; font-style:italic; padding-right:10px; padding-top:3px} #topbar fieldset .input { width:175px; float:left; border:1px solid #000000; background:url(../images/bg_input.gif) repeat-x top right; margin-right:10px; padding:2px; font-family:"Georgia", Times New Roman, Times, serif; font-style:italic; font-size:13px; color:#8F8F8F; padding-left:10px} #topbar fieldset .button_login { float:left; } #topbar fieldset .button_login a { width:70px; height:18px; float:left; font-size:12px; color:#000; border:1px solid #000000; padding-bottom:1px; padding-top:1px; padding-left:5px; padding-right:5px; background:#B2B2B2 url(../images/bg_login.gif) repeat-x top right; text-decoration:none; text-align:center} /* --------------------------------------------- 03. wrapper --------------------------------------------- */ #wrapper { width:968px; margin:0 auto} /* --------------------------------------------- 04. header --------------------------------------------- */ #header { width:953px; float:left; padding-left:15px; padding-top:15px; margin-bottom:-9px} /* --------------------------------------------- 04.1 header - logo --------------------------------------------- */ #header .logo { width:274px; height:45px; float:left; background:url(../images/logo.png) no-repeat; position:relative;} #header .logo .logo-link { width:274px; height:45px; float:left; position:absolute} .nodisplay { display:none} /* --------------------------------------------- 04.2 header - nav --------------------------------------------- */ #header .nav { float:right; padding-top:0px; padding-bottom: 15px;} #header .nav ul li { float:left; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:15px; color:#1A1A1A; list-style:none;} #header .nav ul li a { height:23px; float:left; color:#1A1A1A; text-decoration:none; cursor:pointer; padding-left:12px} #header .nav ul li a span { height:22px; float:left; padding-left:10px; padding-right:22px; padding-top:1px} #header .nav ul li a:hover { background:url(../images/bg_nav_left.png) no-repeat; color:#FFFFFF; text-decoration:none} #header .nav ul li a:hover span { background:url(../images/bg_nav_right.png) no-repeat top right} #header .nav ul li.current_page_item a { background:url(../images/bg_nav_left.png) no-repeat; color:#FFFFFF; text-decoration:none} #header .nav ul li.current_page_item a span { background:url(../images/bg_nav_right.png) no-repeat top right} /* --------------------------------------------- 04.3 header - slider --------------------------------------------- */ #bgslider { width:964px; float:left;} #slider { margin-left:20px} #slider ul { width:934px; float:left; overflow:hidden} #slider ul, #slider li { width:924px; margin:0; padding:0; list-style:none} #slider li { width:930px; height:335px; overflow:hidden;} #slider h1 { font-size:50px; color:#282828} #slider h2 { font-size:28px; color:#FF9901; font-style:italic; padding-bottom:12px} #slider p { font-size:15px; color:#4F4F4F; line-height:1.5em; padding-bottom:25px; padding-left:5px} #slider .leftcontent { width:400px; float:left; padding-top:20px; } #slider .button_activity { float:left; font-family:"Tahoma", Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#494801; text-shadow:#F7F7C9 1px 1px 1px; padding-left:5px} #slider .button_activity a { height:48px; float:left; background:url(../images/bg_button_activity_left.png) no-repeat; color:#494801; text-decoration:none; cursor:pointer; padding-left:30px} #slider .button_activity a span { height:34px; float:left; background:url(../images/bg_button_activity_right.png) no-repeat top right; padding-left:18px; padding-right:48px; padding-top:14px} #slider .button_activity a:hover { color: #000000; background:url(../images/bg_button_activity_left_hov.png) no-repeat} #slider .button_activity a:hover span { background:url(../images/bg_button_activity_right_ho.png) no-repeat top right} #slider .rightcontent { width:550px; float:left; margin-left:-20px} #slider .rightcontent img { float:left} #slider .rightcontent h4 { float:right; margin-top:-45px; padding-right:110px; position:relative} #slider .rightcontent h4 a { color:#ffffff; text-decoration:underline} #slider .rightcontent h4 a:hover { color:#98CB00} p#controls { margin:0; float:left; position:relative;} #prevBtn, #nextBtn { float:right; display:block; margin:0; overflow:hidden; text-indent:-1000px; width:36px; height:47px; position:absolute;} #prevBtn { float:left; margin-top:-205px; left:-40px} #nextBtn { float:right; margin-top:-205px; left:980px} #prevBtn a, #nextBtn a {display:block; width:36px; height:47px; background:url(../images/button_back.png) no-repeat 0 0; } #nextBtn a { background:url(../images/button_next.png) no-repeat 0 0; } /* --------------------------------------------- 05. join us --------------------------------------------- */ #joinus { width:968px; float:left; padding-bottom:15px; position:relative; margin-top:-4px} /* --------------------------------------------- 05.1 join us - borders --------------------------------------------- */ #joinus .joinus_bordertop { width:968px; height:52px; float:left; background:url(../images/bg_joinbox_bordertop.png) no-repeat} #joinus .joinus_bordermiddle { width:968px; float:left; background:url(../images/bg_joinbox_bordermiddle.png) repeat-y} #joinus .joinus_borderbottom { width:968px; height:52px; float:left; background:url(../images/bg_joinbox_borderbottom.png) no-repeat} /* --------------------------------------------- 05.2 join us - expandable content area --------------------------------------------- */ #joinus .content { width:931px; float:left; padding-left:15px; padding-right:22px; margin-top:-32px; margin-bottom:-32px; position:relative} /* --------------------------------------------- 05.2.1 join us - contents- great reasons --------------------------------------------- */ #joinus .content .reasons { width:532px; float:left} #joinus .content .reasons h2 { font-weight:bold; padding-left:10px; padding-bottom:6px} #joinus .content .reasons h4 { font-weight:bold; padding-bottom:6px} #joinus .content .reasons p a { color:#FFFFFF; text-decoration:underline} #joinus .content .reasons p a:hover { color:#000000} #joinus .content .reasons .setbox { width:532px; float:left} #joinus .content .reasons .reason1 { width:153px; float:left; background:url(../images/bg_reason1.png) no-repeat; padding:7px 9px 0 9px} #joinus .content .reasons .reason2 { width:145px; float:left; background:url(../images/bg_reason2.png) no-repeat; padding:7px 4px 0 7px} #joinus .content .reasons .reason3 { width:190px; float:left; background:url(../images/bg_reason3.png) no-repeat; padding-top:7px; padding-left:9px} #joinus .content .reasons .set {float:left; background: url(../images/bg_set_reasons.gif) repeat-y top right;margin-bottom:3px} #joinus .content .reasons .reason1 .set { width:140px; padding-right:13px} #joinus .content .reasons .reason2 .set { width:140px; padding-right:8px} #joinus .content .reasons .reason3 .set { width:188px; background:none} /* --------------------------------------------- 05.2.2 join us - contents- teachers students --------------------------------------------- */ #joinus .greybox { width:399px; height:141px; float:left; background:url(../images/bg_teachers_studentsbox.gif) no-repeat} #joinus .content .greybox h1 { text-align:center;} #joinus .content .greybox p { font-size:16px; text-align:center; color:#2B2B2B; padding-bottom:5px} #joinus .content .greybox .teachers { width:172px; float:left; padding:15px; padding-top:10px} #joinus .content .greybox .students { width:165px; float:left; padding:15px; padding-top:10px} #joinus .content .greybox .students h1 { color:#F07A01} #joinus .content .greybox .button_find { float:left; font-size:11px; color:#171700; font-weight:bold; padding-left:30px} #joinus .content .greybox .button_find a { height:23px; float:left; background:url(../images/bg_button_left.png) no-repeat; padding-left:10px; color:#171700; text-decoration:none; cursor:pointer} #joinus .content .greybox .button_find a span { height:18px; float:left; background:url(../images/bg_button_right.png) no-repeat top right; padding-left:10px; color:#171700; text-decoration:none; cursor:pointer; padding:5px 16px 0 6px} #joinus .content .greybox .button_find a:hover { background:url(../images/bg_button_left_hover.png) no-repeat} #joinus .content .greybox .button_find a:hover span { color:#ffffff; background:url(../images/bg_button_right_hover.png) no-repeat top right} /* --------------------------------------------- 06. areas --------------------------------------------- */ #areas { width:964px; float:left; padding-left:4px} #areas h1 { font-size:36px; float:left; text-shadow:#FCFCFC -1px 1px 1px} #areas .button_signin { float:right; font-size:11px; color:#171700; font-weight:bold; padding-top:14px} #areas .button_signin a { height:23px; float:left; background:url(../images/bg_button_left.png) no-repeat; padding-left:10px; color:#171700; text-decoration:none; cursor:pointer} #areas .button_signin a span { height:18px; float:left; background:url(../images/bg_button_right.png) no-repeat top right; padding-left:10px; color:#171700; text-decoration:none; cursor:pointer; padding:5px 10px 0 0px} #areas .button_signin a:hover { background:url(../images/bg_button_left_hover.png) no-repeat} #areas .button_signin a:hover span { background:url(../images/bg_button_right_hover.png) no-repeat top right; color: #FFF} #areas h5 { width:325px; float:left; font-weight:bold; padding:4x 0} #areas h5 span { color:#505050} /* --------------------------------------------- 06.1 areas - teachers area --------------------------------------------- */ #areas .teachers_area { width:474px; height:278px; float:left; background:url(../images/bg_teachers_area.gif) no-repeat; padding-top:15px; padding-right:14px} #areas .teachers_area .content { width:325px; float:left; padding-left:23px} #areas .teachers_area .logo_esolbook { float:left; padding-left:43px} #areas .teachers_area h4 { width:220px; float:left; font-family:Arial, Helvetica, sans-serif; text-align:center; font-weight:bold; color:#F17B01; padding-top:8px} #areas .teachers_area h4 a { color:#F17B01; text-decoration:none} /* --------------------------------------------- 06.2 areas - students area --------------------------------------------- */ #areas .students_area { width:473px; height:278px; float:left; background:url(../images/bg_students_area.gif) no-repeat; padding-top:15px} #areas .students_area .content { width:325px; float:left; padding-left:28px} #areas .students_area h1 { color:#F07A01} #areas .students_area .set { width:120px; float:left; padding:5px 20px 10px 0} #areas .students_area .set p a { color:#0873A4; text-decoration:underline} #areas .students_area .set .video { width:120px; height:55px; float:left; padding-top:4px} #areas .students_area .set .icon_play { float:left; margin-top:-47px; padding-left:45px; position:relative} #areas .students_area .set .icon_play a { width:30px; height:43px; float:left; background:url(../images/icon_play.png) no-repeat} #areas .students_area .set .icon_play a:hover { width:30px; height:43px; float:left; background:url(../images/icon_play_hover.png) no-repeat} /* --------------------------------------------- 07. footer styles --------------------------------------------- */ #footer { width:926px; float:left; padding:25px 14px 30px 28px; border:1px} #footer p { color:#000000} #footer .copyright { float:left} #footer .designby { float:right} /* --------------------------------------------- 08. innerpage styles - content --------------------------------------------- */ #content { width:939px; float:left; padding:40px 14px 0px 15px} #content h1 { font-size:50px; color:#282828; padding-bottom:8px; border-bottom:2px solid #99C018; margin-bottom:25px} #content h2 { font-size:34px; color:#F07A01; padding-bottom:10px} #content h3 { font-size:28px; color:#282828; padding-bottom:10px} #content h4 { color:#780E0E; font-weight:bold; padding-bottom:10px} #content p { font-size:15px; color:#4F4F4F; line-height:1.6em; padding-bottom:25px} #content p.block_quote { background:url(../images/bg_quoteblock.gif) repeat-y; padding-left:43px; font-size:16px; color:#131313; font-style:italic; padding-bottom:0} #content ul{padding: 5px 0px; list-style:none;} #content ul li { background:url(../images/li_arrow.gif) no-repeat 0 5px; font-size:15px; color:#4F4F4F; line-height:1.4em; padding-left:32px; padding-bottom:8px} #content .features { width:910px; float:left; padding-top:40px; padding-bottom:30px} #content .features .teachers_features { width:425px; float:left; padding-right:35px} #content .features ul li { width:393px; float:left; background:url(../images/li_arrow.gif) no-repeat 0 5px; font-size:15px; color:#4F4F4F; line-height:1.4em; padding-left:32px; padding-bottom:8px} #content .features .students_features { width:425px; float: right} /* --------------------------------------------- 08. innerpage styles - content grey boxes --------------------------------------------- */ #greyboxes { width:964px; float:left; position:relative} #greyboxes p { width:230px; float:left; font-size:12px; color:#452900; line-height:1.5em; padding-bottom:0} #greyboxes h4 {padding-bottom:15px; font-weight:bold} #greyboxes .teachers { width:427px; height:164px; float:left; background:url(../images/bg_shadowbox.png) no-repeat; padding:24px 37px 0 24px} #greyboxes .teachers h1 { font-size:39px; color:#98CB00; border:none; margin-bottom:0; padding-bottom:10px} #greyboxes .students { width:427px; height:163px; float:left; background:url(../images/bg_shadowbox.png) no-repeat; padding:24px 24px 0 24px} #greyboxes .students h1 { font-size:39px; color:#F07A01; border:none; margin-bottom:0; padding-bottom:10px} #greyboxes .button_pay { float:left; font-family:"Tahoma", Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color:#494801; text-shadow:#F7F7C9 1px 1px 1px; padding-left:20px; padding-top:5px} #greyboxes .button_pay a { height:38px; float:left; background:url(../images/bg_button_pay_left.png) no-repeat; color:#494801; text-decoration:none; cursor:pointer; padding-left:10px} #greyboxes .button_pay a span { width:127px; height:28px; float:left; background:url(../images/bg_button_pay_right.png) no-repeat top right; padding-left:11px; padding-right:21px; padding-top:10px} #greyboxes .button_pay a:hover { background:url(../images/bg_button_pay_left_hover.png) no-repeat} #greyboxes .button_pay a:hover span { background:url(../images/bg_button_pay_right_hover.png) no-repeat top right} /* --------------------------------------------- 09. misc styles --------------------------------------------- */ p.note { font-size:15px; color:#4F4F4F; line-height:1.6em; padding-bottom: 25px}