body {margin: 0; padding: 0; text-align: center; color: black; background: white;}

img {border: none;}
ul, ol, li, p {margin: 0; padding: 0;}


#header {position: relative; z-index: 200; height: 90px; text-align: center; background: black;}
#logo {position: absolute; left: 50%; top: 20px; margin: 0 0 0 -500px;}

#userMenu {position: absolute; right: 50%; top: 35px; margin: 0 -500px 0 0; text-align: right; font: 13px "Myriad Pro";}
#userMenu li {display: inline; margin-left: 10px; list-style: none; color: white;}
#userMenu a {color: white;}
#userMenu li.unlim {display: block; margin: -14px 0 5px; font-size: 16px; color: #bbb;}

#topMenu {width: 1000px; margin: 0 auto 7px; height: 17px; text-align: left; font: 13px "Myriad Pro"; border: none; border-collapse: collapse;}
#topMenu li {float: left; display: block; margin-bottom: 12px; margin: 0 15px; list-style: none; color: white;}
#topMenu a {text-decoration: none; color: white;}
#topMenu td {padding: 6px 5px 2px; text-align: center; vertical-align: middle;}
#topMenu td.sel {background: #ccc;}
#topMenu td.sel a {color: black;}
#topMenu td .left {display: block; float: left; margin: -6px 0 -2px -5px; width: 7px; height: 25px; background: url(/images/bk-menusel-left.gif) no-repeat;}
#topMenu td .right {display: block; float: right; margin: -6px -5px -2px 0; width: 7px; height: 25px; background: url(/images/bk-menusel-right.gif) no-repeat;}

#header .forMenu {position: absolute; left: 0; top: 90px; z-index: 3; width: 100%; height: auto; padding: 9px 0 1px; text-align: center; background: url(/images/bk-banner-text.png);}



#site {width: 1000px; margin: 90px auto; _margin: 0; text-align: left;}


#site h1 {margin: 0 0 20px; font: normal 26px "Myriad Pro";}
#site h2 {margin: 0 0 10px; font: normal 28px "Myriad Pro";}
#site h3 {margin: 0 0 10px; font: normal 26px "Myriad Pro";}
#site h3 small {margin: 0 0 0 20px; font-size: 18px;}
#site h4 {}
#site h5 {}
#site h6 {}
#site a {color: #44f}
#site p {font: 15px "Myriad Pro"; line-height: 21px;}

#site p.sub {margin: -20px 0 20px;}


 
/* index */
#indexBanner {position: relative; z-index: 100; margin: 0; width: 100%; height: 675px; overflow: hidden; background: black;}
#indexBanner .overlayerLeft {position: absolute; left: 50%; top: 0; z-index: 1200; margin: 0 0 0 -600px; width: 150px; height: 675px; background: url(/images/overbanner-left.png);}
#indexBanner .overlayerRight {position: absolute; right: 50%; top: 0; z-index: 1200; margin: 0 -600px 0 0; width: 150px; height: 675px; background: url(/images/overbanner-right.png);}
#indexBanner .btnLeft {position: absolute; left: 50%; top: 280px; z-index: 1400; margin: 0 0 0 -500px;}
#indexBanner .btnRight {position: absolute; right: 50%; top: 280px; z-index: 1400; margin: 0 -500px 0 0;}
#indexBanner #theWindow {position: absolute; left: 50%; top: 0; margin: 0 0 0 -600px; width: 1200px; height: 675px; overflow: hidden;}
#indexBanner #theSlider {position: absolute; left: 0; top: 0; width: 50000px; height: 675px; text-align: left;}
#indexBanner #theSlider p {float: left;}
#indexBanner .dots {position: absolute; left: 50%; top: 535px; z-index: 1400; margin: 0 0 0 -500px;}
#indexBanner .dots a {display: block; float: left; margin: 0 10px 0 0; width: 18px; height: 17px; background: url(/images/dot.png) no-repeat;}
#indexBanner .dots a.sel {background: url(/images/dot-sel.png) no-repeat;}
#indexBanner .dots {}
#indexBanner .overText {position: absolute; left: 0; bottom: 0; z-index: 1400; width: 100%; min-height: 85px; text-align: left; color: white; background: url(/images/bk-banner-text.png);}
#indexBanner .overText a {text-decoration: none; color: white;}
#indexBanner .overText #bunnerHeader {width: 900px; margin: 10px auto 4px; padding: 0 100px 0 0; font: 28px "Myriad Pro";}
#indexBanner .overText #bunnerDesc {width: 1000px; margin: 0 auto 15px; font: 20px "Myriad Pro";}
#indexBanner .overText #bunnerPrice {position: absolute; right: 50%; top: 20px; margin: 0 -500px 0 0; font: 48px "Myriad Pro"; color: white;}
#indexBanner .overText #bunnerPrice img {vertical-align: -7px;}
#indexBanner .banner {position: absolute;}

.unlim a {display: block; margin: -40px 0 30px 230px; width: 400px; height: 138px; padding: 45px 0 0 210px; text-decoration: none; font: 28px "Myriad Pro"; line-height: 32px; color: black !important; background: url(/images/icon-unlim.gif) no-repeat;}
.unlim a .price {display: block; margin: 4px 0 0; font-size: 34px;}
.unlim a img {vertical-align: -8px;}

#indexCourses {width: 100%; font: 14px "Myriad Pro"; border: none; border-collapse: collapse;}
#indexCourses td {padding: 0 20px 0 0;}
#indexCourses td.item {width: 4800px;}
#indexCourses td.spl {width: 40px;}
#indexCourses .photo {float: left; position: relative; margin: 0 20px 20px 0; width: 190px; height: 190px;}
#indexCourses .photo .frame {display: block; position: absolute; left: 0; top: 0; z-index: 30; width: 190px; height: 190px; background: url(/images/frame-indexcourse.png);}
#indexCourses .photo img {position: relative; width: 190px; z-index: 20;}
#indexCourses .name {font-size: 22px;}
#indexCourses .name a {text-decoration: none; color: black;}
#indexCourses .desc {margin: 0 0 10px;}
#indexCourses .price {font-size: 36px;}
#indexCourses .price img {vertical-align: -7px;}
#indexCourses .lessons {float: right; margin: 7px 0 0; font-size: 16px; color: #656565;}
#indexCourses td hr {margin: 10px 0 30px 20px; width: 400px; background: #ddd;}


#indexComments {position: relative; margin: 40px -2px 70px; width: 1004px; background: url(/images/bk-comments.png);}
#indexComments .top {position: absolute; left: 0; top: -22px; width: 1004px; height: 40px; background: url(/images/bk-comments-top.png);}
#indexComments .bot {position: absolute; left: 0; bottom: -22px; width: 1004px; height: 40px; background: url(/images/bk-comments-bot.png);}
#indexComments .cont {position: relative; margin: -0 20px !important;}
#indexComments h3 {margin: 0 0 12px; font: normal 26px "Myriad Pro";}
#indexComments table {margin: 0; width: 100%; font: 14px "Myriad Pro"; border: none; border-collapse: collapse;}
#indexComments table td {width: 50%; padding: 0;}

#indexComments .item {clear: both; margin: 0 40px 25px 0; max-height: 52px; overflow: hidden;}
#indexComments .item .date {float: right; font-size: 12px; color: #555;}
#indexComments .item .name {margin: 0 0 0 60px; font-size: 12px;}
#indexComments .item .text {margin: 0 0 0 60px; font-size: 12px; line-height: 14px;}

#indexComments .photo {position: relative; float: left; margin: 0 10px 5px 0;}
#indexComments .photo img {width: 50px; height: 50px;}

#indexComments a {color: black;} 


#indexInspiration {margin: 0 0 50px; height: 285px;}
#indexInspiration h3 {margin: 0 0 10px 7px; font: normal 26px "Myriad Pro";}
#indexInspiration .item {float: left; width: 220px; text-align: center; font: 16px "Myriad Pro";}
#indexInspiration .photo {position: relative;}
#indexInspiration .photo .frame {display: block; position: absolute; left: 0; top: 0; z-index: 30; width: 220px; height: 220px; background: url(/images/frame-indexinspire.png);}
#indexInspiration .photo img {position: relative; display: block; z-index: 20; margin: 0 0 15px;}
#indexInspiration .item a {text-decoration: none; color: black;}
#indexInspiration .spl {float: left; width: 40px; height: 20px;}

#indexInspirationVideo {margin: 0 0 50px; height: 285px;}
#indexInspirationVideo h3 {margin: 0 0 10px 7px; font: normal 26px "Myriad Pro";}
#indexInspirationVideo .item {float: left; width: 220px; text-align: center; font: 16px "Myriad Pro";}
#indexInspirationVideo .photo {position: relative; margin: 0 0 15px; width: 220px; height: 220px; overflow: hidden;}
#indexInspirationVideo .photo .frame {display: block; position: absolute; left: 0; top: 0; z-index: 30; width: 220px; height: 220px; background: url(/images/frame-indexinspire.png);}
#indexInspirationVideo .photo img {position: relative; display: block; z-index: 20; margin: 0 0 0 -35px; height: 220px;}
#indexInspirationVideo .item a {text-decoration: none; color: black;}
#indexInspirationVideo .spl {float: left; width: 40px; height: 20px;}

#site .goCenter {width: 500px; margin: 0 auto; font: 17px "Myriad Pro";}
#site .goCenter p {margin: 0 0 25px;}
#site .goCenter .lineFrame {display: block; margin: 3px 0 0 -4px; width: 471px; height: 38px; padding: 14px 0 0 9px; background: url(/images/bk-line.gif);}
#site .goCenter .txt {width: 460px; font-size: 17px; border: none;}
#site .goCenter .file {display: block; margin: 3px 0 0;}
#site .goCenter hr {margin: 30px 0 20px 20px; width: 430px; background: #aaa; border: none;} 
#site .goCenter .btn {width: 177px; height: 49px; font: bold 20px "Myriad Pro"; background: url(/images/btn-size1.gif); border: none;} 
#site .goCenter .btn2 {width: 250px; height: 49px; font: bold 20px "Myriad Pro"; background: url(/images/btn-size2.gif); border: none;} 
#site .goCenter .avatar {position: relative; margin: -22px 0 0;}
#site .goCenter .avatar .frame {display: block; position: absolute; left: 0; top: 0; z-index: 30; width: 150px; height: 150px; background: url(/images/frame-avatar.png);}
#site .goCenter .avatar img {position: relative; z-index: 20; width: 150px; height: 150px;}



#site .navigate {margin: 40px 20px; text-align: center; font: 17px "Myriad Pro";}
#site .navigate a {margin: 0 10px; padding: 5px 10px 3px; color: black;}
#site .navigate span {margin: 0 10px; padding: 5px 10px 3px; background: #ccc;}
#site .navigate {}
#site .navigate {}
 

#site .navigatePages {margin: 40px 0 30px; text-align: left; font: 17px "Myriad Pro";}
#site .navigatePages a {margin: 0 20px 0 0; padding: 5px 10px 3px; color: black;}
#site .navigatePages span {margin: 0 20px 0 0; padding: 5px 10px 3px; background: #ccc;}

#site .infoRed {margin: 0 0 10px !important; font-size: 16px; color: #ff3333;}

 
#left {float: left; margin: 0 0 50px; width: 700px; min-height: 100px;}
#right {float: left; margin: 0 0 50px; width: 300px; min-height: 100px;}

#right .banner {margin: 0 0 20px;}

#right hr {margin: 10px 0 20px; width: auto; background: #ccc; border: none;} 
#right h2 {font-size: 14px; color: #777;}

#right .courseItem {margin: 0 0 10px;}
#right .courseItem {clear: both; min-height: 120px;}
#right .courseItem .photo {float: left; position: relative; margin: 0 20px 20px 0; width: 100px; height: 100px;}
#right .courseItem .photo .frame {display: block; position: absolute; left: 0; top: 0; z-index: 30; width: 100px; height: 100px; background: url(/images/frame-course-small.png);}
#right .courseItem .photo img {position: relative; z-index: 20; width: 100px; height: 100px;}
#right .courseItem .name {margin: 0 0 2px; font-size: 18px;}
#right .courseItem .name a {text-decoration: none; color: black;}
#right .courseItem .desc {margin: 0 0 0 120px; font-size: 14px;}
#right .courseItem .price {margin: -5px 0 5px 120px; font-size: 20px;}
#right .courseItem .price img {vertical-align: -5px;}
#right .courseItem p.payed {margin: 0 0 0 204px; padding: 8px 0 8px 45px !important; font-size: 22px; background: url(/images/icon-payed.gif) no-repeat 0 0;}

#right .courseItem p.needEnter {margin: 7px 0 0 120px;}

 

/* course */
#courseList {margin: 0 30px 50px 0; font: 14px "Myriad Pro";}
#courseList hr {clear: both; margin: 30px 0; background: #ccc; border: none;}
#courseList .courseItem {clear: both; min-height: 190px;}
#courseList .courseItem .photo {float: left; position: relative; margin: 0 20px 20px 0; width: 190px; height: 190px;}
#courseList .courseItem .photo .frame {display: block; position: absolute; left: 0; top: 0; z-index: 30; width: 190px; height: 190px; background: url(/images/frame-indexcourse.png);}
#courseList .courseItem .photo img {position: relative; z-index: 20; width: 190px; height: 190px;}
#courseList .courseItem .name {margin: 0 0 5px; font-size: 22px;}
#courseList .courseItem .name a {text-decoration: none; color: black;}
#courseList .courseItem .desc {margin: 0 0 10px;}
#courseList .courseItem .price {margin: 0 0 10px; font-size: 36px;}
#courseList .courseItem .price img {vertical-align: -7px;}

#courseList .courseItem .buy {float: right; margin: 0 40px 0 0; width: 147px; height: 32px; padding: 8px 0 0; text-align: center; text-decoration: none; font-size: 20px; color: black; background: url(/images/btn-green-small.png) no-repeat;}

#courseList .courseItem .lessons {float: right; margin: 7px 0 0; font-size: 16px; color: #656565;}
#courseList .courseItem p.payed {margin: 0 0 0 204px; padding: 8px 0 8px 45px !important; font-size: 22px; background: url(/images/icon-payed.gif) no-repeat 0 0;}
 
#courseList .lessonItem {clear: both; min-height: 120px;}
#courseList .lessonItem .photo {float: left; position: relative; margin: 0 20px 15px 70px; width: 120px; height: 120px;}
#courseList .lessonItem .photo .frame {display: block; position: absolute; left: 0; top: 0; z-index: 30; width: 120px; height: 120px; background: url(/images/frame-lesson.png);}
#courseList .lessonItem .photo img {position: relative; z-index: 20; width: 120px; height: 120px;}
#courseList .lessonItem .name {margin: 0 0 3px; font-size: 22px;}
#courseList .lessonItem .name a {text-decoration: none; color: black;}
#courseList .lessonItem .desc {margin: 0 0 10px;}
#courseList .lessonItem .time {margin: 0 0 10px; color: #777;}
#courseList .lessonItem .buy {float: right; margin: 0 40px 0 0; width: 115px; height: 25px; padding: 5px 0 0; text-align: center; text-decoration: none; font-size: 20px; color: black; background: url(/images/btn-green-small2.png) no-repeat;}
#courseList .lessonItem .price {margin: 0 0 0 210px; font-size: 22px;}
#courseList .lessonItem .price small {margin: 0 5px 0 0; font-size: 16px;}
#courseList .lessonItem .price img {vertical-align: -5px;}
#courseList .lessonItem .lessons {float: right; margin: 7px 0 0; font-size: 16px; color: #656565;}
#courseList .lessonItem p.payed {margin: 7px 0 0 208px; padding: 3px 0 5px 33px !important; font-size: 16px; background: url(/images/icon-payed-small.gif) no-repeat 0 0;}

#courseList .lessonItem .buy {font-size: 18px;}
#courseList .lessonItem .buy a {color: black;}
#courseList .lessonItem .buy a big {}
#courseList .lessonItem .buy img {margin: 0 0 0; vertical-align: -4px;}

#indexCourses td.spl {width: 40px;}

hr {margin: 30px 0 20px; width: 603px; background: #aaa; border: none;} 


/* the lesson */
.buyThis {margin: 0 0 25px; width: 500px;}
.buyThis .buy {float: right; margin: 0 40px 0 0; width: 115px; height: 26px; padding: 4px 0 0; text-align: center; text-decoration: none; font: 18px "Myriad Pro", "Arial"; color: black !important; background: url(/images/btn-green-small2.png) no-repeat;}
.buyThis .price {margin: 0 0 0; font-size: 22px !important;}
.buyThis .price small {margin: 0 5px 0 0; font-size: 18px;}
.buyThis .price img {vertical-align: -5px;}




.forVideo {margin: 0 0 40px;}

.forText {margin: 0 50px 30px 0; font-size: 16px !important;}
.forText p {margin: 0 0 10px;}
.forText img {max-width: 660px;}
.forText.noPay {padding-top: 20px; border-top: 2px dotted #ccc;}

.theLesson .original {margin: 30px 0 0; font-size: 22px !important;}
.theLesson .original img {margin: 0 10px 0 0; vertical-align: middle;}


.photosList {width: 660px; text-align: center;}
.photosList img {margin: 0; max-width: 660px;}

.lessonComments {clear: both;}
.lessonComments .itemComment {clear: both; min-height: 160px; font: 14px "Myriad Pro";}
.lessonComments .itemComment .photo {float: left; position: relative; margin: 0 10px 10px 0;}
.lessonComments .itemComment .photo .frame {display: block; position: absolute; left: 0; top: 0; z-index: 30; width: 150px; height: 150px; background: url(/images/frame-avatar.png);}
.lessonComments .itemComment .photo img {position: relative; z-index: 20; width: 150px; height: 150px;}
.lessonComments .itemComment .date {color: #555;}
.lessonComments .itemComment .text {margin: 0 0 10px;}
.lessonComments .itemComment .answer {}
.lessonComments .itemComment {} 
.lessonComments .itemComment {}
.lessonComments .itemComment {}
.lessonComments {}
.lessonComments {}
.lessonComments {}
.lessonComments {}
.lessonComments {}



.putComment {clear: both;}
.putComment p {margin: 0 0 25px; font-size: 20px !important;}
.putComment .lineFrame {display: block; margin: 3px 0 0 -4px; width: 471px; height: 38px; padding: 14px 0 0 9px; background: url(/images/bk-line.gif);}
.putComment .txt {width: 460px; font-size: 17px; border: none;}
.putComment .linesFrame {display: block; margin: 13px 0 0 -4px; width: 603px; height: 229px; padding: 14px 0 0 9px; background: url(/images/bk-lines.png);}
.putComment textarea {width: 593px; height: 215px; font-size: 17px !important; border: none;}
.putComment hr {margin: 30px 80px 20px; background: #aaa; border: none;} 
.putComment .btn {width: 176px; height: 49px; font: bold 20px "Myriad Pro"; background: url(/images/btn-size1.png); border: none;} 
.putComment .btn2 {width: 250px; height: 49px; font: bold 20px "Myriad Pro"; background: url(/images/btn-size2.gif); border: none;} 
 

.commentPopup {display: none; position: fixed; left: 50%; top: 100px; z-index: 100000; margin: 0 0 0 -338px; width: 641px; height: 390px; padding: 30px 0 0 35px; text-align: left; font: 20px "Myriad Pro"; background: url(/images/bk-comment.png);}
.commentPopup .cancel {float: right; margin: 12px 37px 0 0; }


#siteInspiration {margin: 0 0 50px;}
#siteInspiration h3 {margin: 0 0 10px 7px; font: normal 26px "Myriad Pro";}
#siteInspiration .item {float: left; margin: 0 0 30px; width: 220px; text-align: center; font: 16px "Myriad Pro";}
#siteInspiration .photo {position: relative;}
#siteInspiration .photo .frame {display: block; position: absolute; left: 0; top: 0; z-index: 30; width: 220px; height: 220px; background: url(/images/frame-indexinspire.png);}
#siteInspiration .photo img {position: relative; display: block; z-index: 20; margin: 0 0 15px;}
#siteInspiration .item a {text-decoration: none; color: black;}
#siteInspiration .spl {float: left; width: 40px; height: 20px;}
#siteInspiration .clear {clear: both; width: 1px; height: 1px;}


#left .itemInspire {margin: 0 0 30px;}
#left .itemInspire p.name {margin: 0 0 10px; font-size: 18px !important;}
#left .itemInspire p.name a {color: black !important;}
#left .itemInspire {}
 
p.buyThis {margin: 0 0 30px !important; font-size: 18px !important;}



.photosList {text-align: center;}
.photosList img {margin: 0 0 20px;}


/* BUY STUFF */
#site .goBuy {width: 500px; margin: 0 auto; font: 18px "Myriad Pro";}
#site .goBuy span {color: #777;}
#site .goBuy .buttons {margin: 17px 0 0 -2px;}

#site .goBuy a.pay {float: left; display: block; margin: 0 40px 0 0; width: 177px; height: 36px; padding: 13px 0 0; text-align: center; text-decoration: none; font: bold 20px "Myriad Pro"; color: black; background: url(/images/btn-green.png);}
#site .goBuy a.cancel {float: left; display: block; margin: 17px 0 10px; font-size: 20px; color: black;}
#site .goBuy {}
#site .goBuy {}





#footer {clear: both; position: relative; height: 94px; background: black;}
#footer .forMenu {position: absolute; left: 0; top: 0; z-index: 3333; width: 100%; height: 31px; padding: 14px 0 0; text-align: center; background: #676767;}
#footer .forMenu #counters {position: absolute; right: 50%; top: 7px; margin: 0 -500px 0 0;}

#footerMenu {position: relative; z-index: 33; margin: 0 auto; width: 1000px; text-align: left; font: 16px "Myriad Pro";}
#footerMenu li {display: inline; margin-right: 30px; list-style: none;}
#footerMenu a {text-decoration: none; color: white;}

#socialMenu {position: relative; z-index: 10; width: 1000px; margin: 0 auto 0; padding: 53px 0 0; text-align: right;}
#socialMenu li {display: inline; margin: 0 0 0 10px; list-style: none;}

#legal {position: absolute; left: 50%; top: 62px; margin-left: -500px; font: 14px "Myriad Pro"; color: #ccc;}


#bannerz {padding: 20px 0; background: black;}
#bannerz .banner {margin: 0 0 20px; text-align: center;}

#buyCounters {clear: both; padding: 150px 0 0;}
#buyCounters {}
#buyCounters {}
#buyCounters {}