/* reset */
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1.5;background:white;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
:focus {outline:0;}


/* typography */
html {font-size:100.01%;scrollbar-base-color: red;} 
body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;margin:0;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em;}
.left {float:left !important;}
p .left {margin:1.5em 1.5em 1.5em 0;padding:0;}
.right {float:right !important;}
p .right {margin:1.5em 0 1.5em 1.5em;padding:0;}
a:focus, a:hover {color:#09f;}
a {color:#06c;text-decoration:underline;}
blockquote {margin:1.5em;color:#666;font-style:italic;}
strong, dfn {font-weight:bold;}
em, dfn {font-style:italic;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
li ul, li ol {margin:0;}
ul, ol {margin:0 1.5em 1.5em 0;padding-left:1.5em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;}
thead th {background:#c3d9ff;}
th, td, caption {padding:4px 10px 4px 5px;}
tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}
tfoot {font-style:italic;}
caption {background:#eee;}
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide {display:none;}
.quiet {color:#666;}
.loud {color:#000;}
.highlight {background:#ff0;}
.added {background:#060;color:#fff;}
.removed {background:#900;color:#fff;}
.first {margin-left:0;padding-left:0;}
.last {margin-right:0;padding-right:0;}
.top {margin-top:0;padding-top:0;}
.bottom {margin-bottom:0;padding-bottom:0;}


/* Success, info, notice and error/alert boxes
-------------------------------------------------------------- */

.error,
.alert,
.notice,
.success,
.info { padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
.notice        { background: #fff6bf; color: #514721; border-color: #ffd324; }
.success       { background: #e6efc2; color: #264409; border-color: #c6d880; }
.info          { background: #d5edf8; color: #205791; border-color: #92cae4; }
.error a, .alert a { color: #8a1f11; }
.notice a          { color: #514721; }
.success a         { color: #264409; }
.info a            { color: #205791; }


/*------  ------*/

/*------ Icons ------*/
.view_changable {
/*    margin-left: 30px;
    margin-top: 30px;*/
    margin-left: 15px;
    margin-top: 5px;
    margin-bottom: 25px;
    margin-right: 15px;
    width: 150px;
    height: 150px;
    position:relative;
    background-color: white;
    padding: 5px 5px 5px 5px;
    display:inline;
    float: left;
    position: relative;
}

.icon_text_content_thumbnail{
    font-size: 14px;
    color: white;
    left: 0px;
    bottom: 50px;
    height: 100%;
    width: 100%;
    padding-left: 4px;
    padding-right: 4px;
    white-space: normal;
    height: 40px;
     line-height:20px;
     overflow:hidden;
}

.icon_text_content_listing{
    font-size: 22px;
    color: white;
    left: 160px;
    bottom: 85px;
    height: 100%;
    width: 100%;
    padding-left: 4px;
    padding-right: 4px;
    white-space: nowrap; 
}

.view_changable .icon_area{
    width: 100%;
    height: 100%;
}

.view_changable .icon_logo{

}

.view_course_changable {
/*    margin-left: 30px;
    margin-top: 30px;*/
    margin-left: 15px;
    margin-top: 5px;
    margin-bottom: 25px;
    margin-right: 15px;
    width: 150px;
    height: 150px;
    position:relative;
    background-color: white;
    padding: 5px 5px 5px 5px;
    display:inline;
    float: left;
    position: relative;
}

.view_course_changable .course_text {
    
}

.view_course_changable .icon_area{
    width: 100%;
    height: 100%;
}

.view_course_changable .icon_logo{

}

.ico_lesson_en{
    background-color: #3E7B2A;
}
.ico_lesson_en .icon_logo{
    width: 150px;
    height: 60px;
    background-color: #3E7B2A ;
    bottom: 5px;
    position: absolute;
    left: 5px;
}
.ico_lesson_en .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_lesson_en.jpg');
    background-repeat: no-repeat;
}

.ico_func_en{
    background-color: #05667C;
}
.ico_func_en .icon_logo{
    width: 150px;
    height: 60px;
    background-color: #05667C ;
    bottom: 5px;
    position: absolute;
    left: 5px;
}
.ico_func_en .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_lesson_en.jpg');
    background-repeat: no-repeat;
}

.ico_anime{
    background-color: #075c79;
}
.ico_anime .icon_logo{
    width: 150px;
    height: 150px;
    background: url('../images/ico_anime.png') center 10px;
    background-repeat: no-repeat;
}
.ico_anime .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_anime_bg.jpg');
    background-repeat: no-repeat;
}

.ico_memolody{
    background-color: #951015;
}
.ico_memolody .icon_logo{
    width: 150px;
    height: 150px;
    background: url('../images/ico_memolody.png') center 10px;
    background-repeat: no-repeat;
}
.ico_memolody .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_memolody_bg.jpg');
    background-repeat: no-repeat;
}

.ico_exercise{
    background-color: #804548;
}
.ico_exercise .icon_logo{
    width: 150px;
    height: 150px;
    background: url('../images/ico_exercise.png') center 10px;
    background-repeat: no-repeat;
}
.ico_exercise .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_exercise_bg.png');
    background-repeat: no-repeat;
}

.ico_flashcard{
    background-color: #623e66;
}
.ico_flashcard .icon_logo{
    width: 150px;
    height: 150px;
    background: url('../images/ico_flashcard.png') center 10px;
    background-repeat: no-repeat;
}
.ico_flashcard .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_flashcard_bg.png');
    background-repeat: no-repeat;
}


.ico_flashcard_legacy{
    background-color: #623e66;
}
.ico_flashcard_legacy .icon_logo{
    width: 150px;
    height: 150px;
    background: url('../images/ico_flashcard.png') center 10px;
    background-repeat: no-repeat;
}
.ico_flashcard_legacy .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_flashcard_bg.png');
    background-repeat: no-repeat;
}

.ico_simulation{
    background-color: #152384;
}
.ico_simulation .icon_logo{
    width: 150px;
    height: 150px;
    background: url('../images/ico_simulation.png') center 10px;
    background-repeat: no-repeat;
}
.ico_simulation .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_simulation_bg.png');
    background-repeat: no-repeat;
}

.ico_smartboard{
    background-color: #2a80d4;
}
.ico_smartboard .icon_logo{
    width: 150px;
    height: 150px;
    background: url('../images/ico_smartboard.png') center 10px;
    background-repeat: no-repeat;
}
.ico_smartboard .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_smartboard_bg.png');
    background-repeat: no-repeat;
}
.ico_survey{
    background-color: #fdb755;
}
.ico_survey .icon_bg{
    width: 150px;
    height: 150px;
    background: url('../images/ico_writing_bg.png') no-repeat;
}
.ico_survey .icon_logo{
    width: 150px;
    height: 150px;
    background: url('../images/ico_survey.png') center 10px;
    background-repeat: no-repeat;
}

.ico_test , .ico_self_v1_test{
    background-color: #336e53;
}
.ico_test .icon_logo , .ico_self_v1_test .icon_logo{
    width: 150px;
    height: 150px;
    background: url('../images/ico_test.png') center 10px;
    background-repeat: no-repeat;
}
.ico_test .icon_bg ,.ico_self_v1_test .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_test_bg.png');
    background-repeat: no-repeat;
}

.ico_video{
    background-color: #0055A6;
}
.ico_video .icon_logo{
    width: 150px;
    height: 150px;
    background: url('../images/ico_video.png') center 10px;
    background-repeat: no-repeat;
}
.ico_video .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_video_bg.png');
    background-repeat: no-repeat;
}

.ico_video_home{
    background-color: #0055A6;
}
.ico_video_home .icon_logo{
    width: 150px;
    height: 150px;
    background: url('../images/ico_video_home.png') center 10px;
    background-repeat: no-repeat;
}
.ico_video_home .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_video_bg.png');
    background-repeat: no-repeat;
}

.ico_video_home_only{
    background-color: #0055A6;
}
.ico_video_home_only .icon_logo{
    width: 150px;
    height: 150px;
    background: url('../images/ico_video_home_only.png') center 10px;
    background-repeat: no-repeat;
}
.ico_video_home_only .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_video_bg.png');
    background-repeat: no-repeat;
}


.ico_test_live{
    background-color: #911212;
}

.ico_test_live .icon_logo{
    width: 150px;
    height: 150px;
    background: url('../images/ico_test_live.png') center 10px;
    background-repeat: no-repeat;
}

.ico_test_live .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_memolody_bg.jpg');
    background-repeat: no-repeat;
}


.ico_writing{
    background-color: #fdb755;
}

.ico_writing .icon_logo{
    width: 150px;
    height: 150px;
    background: url('../images/ico_writing.png') center 10px;
    background-repeat: no-repeat;
}

.ico_writing .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_writing_bg.png');
    background-repeat: no-repeat;
}

.ico_memologic{
    background-color: #F8943C;
}
.ico_memologic .icon_logo{
    width: 150px;
    height: 150px;
    background: url('../images/ico_memologic.png') center 10px;
    background-repeat: no-repeat;
}
.ico_memologic .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_memologic_bg.png');
    background-repeat: no-repeat;
}


.ico_content_group{
    background-color: #336e53;
}
.ico_content_group .icon_logo {
    width: 150px;
    height: 150px;
    background: url('../images/ico_content_group.png') center 10px;
    background-repeat: no-repeat;
}
.ico_content_group  .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_test_bg.png');
    background-repeat: no-repeat;
}

.ico_toefl_reading, .ico_toefl_listening, .ico_toefl_speaking, .ico_toefl_writing{
    background-color: #336e53;
}
.ico_toefl_reading .icon_logo, .ico_toefl_listening .icon_logo, .ico_toefl_speaking .icon_logo, .ico_toefl_writing .icon_logo {
    width: 150px;
    height: 150px;
    background: url('../images/ico_content_group.png') center 10px;
    background-repeat: no-repeat;
}
.ico_toefl_reading .icon_bg, .ico_toefl_listening .icon_bg, .ico_toefl_speaking .icon_bg, .ico_toefl_writing .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/ico_test_bg.png');
    background-repeat: no-repeat;
}

/* downloadable file*/
.ico_file_extension_pdf .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/file_extension_bg.png');
    background-repeat: no-repeat;
}
.ico_file_extension_zip .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/file_extension_bg.png');
    background-repeat: no-repeat;
}
.ico_file_extension_rar .icon_bg{
    width: 150px;
    height: 150px;
    background-image: url('../images/file_extension_bg.png');
    background-repeat: no-repeat;
}

.ico_file_extension_pdf{
    background-color: #8ab63f;
}
.ico_file_extension_pdf .icon_logo {
    width: 150px;
    height: 150px;
    background: url('../images/file_extension_pdf.jpg') center 10px;
    background-repeat: no-repeat;
}

.ico_file_extension_zip{
    background-color: #8ab63f;
}
.ico_file_extension_zip .icon_logo {
    width: 150px;
    height: 150px;
    background: url('../images/file_extension_zip.jpg') center 10px;
    background-repeat: no-repeat;
}

.ico_file_extension_rar{
    background-color: #8ab63f;
}
.ico_file_extension_rar .icon_logo {
    width: 150px;
    height: 150px;
    background: url('../images/file_extension_rar.jpg') center 10px;
    background-repeat: no-repeat;
}

.ico_file_extension_exe{
    background-color: #8ab63f;
}
.ico_file_extension_exe .icon_logo {
    width: 150px;
    height: 150px;
    background: url('../images/file_extension_exe.jpg') center 10px;
    background-repeat: no-repeat;
}

/*------  ------*/

.box		 { display:inline; float:left; position:relative; }
.cursor-hand  { cursor: hand; cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-progress { cursor: progress; }

.fb-share-icon { background: url(../images/btn_fb.png); width: 32px; height: 32px; }


    /* -- scroll panel -- */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track:horizontal {
        background-color: #dedfdf;
        background-image: url('../images/track_hor.png');
        background-position: center;
        background-repeat: repeat-x;
    }

    ::-webkit-scrollbar-thumb:horizontal {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        background-color: #747577;
    }
    
    ::-webkit-scrollbar-track:vertical {
        background-image: url('../images/track.png');
        background-position: center; 
        background-repeat: repeat-y;
    }

    ::-webkit-scrollbar-thumb:vertical {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        background-color: #747577;
    }