html,body{
    width:100%;
    height:100%;
    margin: 0;
    border-collapse: collapse;
}

body{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3f4045+0,003064+100 */
    background: #3f4045; /* Old browsers */
    background: -moz-linear-gradient(top,  #3f4045 0%, #003064 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #3f4045 0%,#003064 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #3f4045 0%,#003064 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4045', endColorstr='#003064',GradientType=0 ); /* IE6-9 */
    font-size: 0px;
    font-family: 'PT Sans', sans-serif;
}

body{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e2e2e2+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e2e2e2 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e2e2e2 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 0%,#e2e2e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */

}

#left_mnu{
    width:200px;
    height:100%;
    display: inline-block;
    vertical-align: top;
}

#account_menu{
    width:200px;
    height:100%;
    background: rgba(0,0,0,.1);
    float:right;
    font-size:0px;
    position: relative;
    cursor: pointer;
}

#account_menu:hover{
    background: rgba(255,255,255,.1);
}

#account_menu .thumb{
    width:45px;
    height:45px;
    display: inline-block;
    vertical-align: top;
    background: rgba(0,0,0,.1);
}


#account_menu .name{
    width:calc(100% - 45px);
    height:45px;
    line-height:45px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 11px;
    display: inline-block;
    vertical-align: top;

}

#account_menu_nav{
    position: absolute;
    right:0px;
    top:45px;
    width:300px;
    height:200px;
    background:red;
}


#content_div{
    width:calc(100% - 200px);
    height:100%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

#show_div{
    font-size:12px;
    width:calc(100% - 200px);
    height:100%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}


#left_mnu_logo{
    margin: auto;
    width:125px;
    height:100px;
    background: no-repeat center;
    background-size: contain;
    background-image: url(/img/logo.png);
}

#content_top_mnu{
    width:100%;
    height:45px;
    background: rgba(0,0,0,.1);
}

#content_center{
    width:100%;
    overflow: hidden;
    height:calc(100% - 90px);
}

#content_bottom_mnu{
    width:100%;
    height:45px;
    background: rgba(0,0,0,.1);
}

#top_mnu_nav{
    float: left;
    font-size: 14px;
}

#top_mnu_nav a{
    margin-top: 2px;
    margin-left: 5px;
    font-family: 'PT Sans', sans-serif;
    display: inline-block;
    padding:0px 10px;
    height:40px;
    line-height: 40px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    color:#444;
    border-bottom:transparent solid 3px;
}

#top_mnu_nav a i{
    color:#006699;
    margin-right: 10px;
}

#top_mnu_nav a:hover{
    border-color: rgba(0,0,0,.2);
}


#top_mnu_nav a:active{
    background: rgba(0,0,0,.1);
}

#top_mnu_nav a.active{
    border-color: #006699;
}

/*
font-family: 'PT Sans', sans-serif;
font-family: 'PT Serif', serif;
font-family: 'Roboto', sans-serif;
*/

.main_pnl{
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    width:100%;
    height:100%;
    overflow: hidden;
}

.init_hide{
    display: none;
}


.grad_main{
    background: rgba(0,0,0,.5);
    background: #3f4045; /* Old browsers */
    background: -moz-linear-gradient(top,  #3f4045 0%, #003064 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #3f4045 0%,#003064 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #3f4045 0%,#003064 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4045', endColorstr='#003064',GradientType=0 ); /* IE6-9 */
}
.grad_light{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5e5e5+0,ffffff+100 */
    background: #e5e5e5; /* Old browsers */
    background: -moz-linear-gradient(top,  #e5e5e5 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #e5e5e5 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #e5e5e5 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

/*course*/
#my_courses_control{
    width:100%;
    height: 75px;
    overflow-x: hidden;
    overflow-y: auto;
}

#my_courses{
    width:100%;
    height: calc(100% - 75px);
    overflow-x: hidden;
    overflow-y: auto;
}

.search{
    width: 300px;
    max-width: 100%;
    height:30px;
    line-height:30px;
    margin-top: 10px;
    padding:0px 5px;
    font-size: 18px;
    font-family: 'PT Serif', serif;
    color:#006699;
}

.search_icon{
    position: relative;
    z-index: 1;
    left: -40px;
    font-size: 24px;
    top: 0px;
    color: #7B7B7B;
    width: 0;
    height:40px;
    line-height:40px;
}

.jscourse{
    display: inline-block;
    vertical-align: top;
    width:175px;
    height:215px;
    overflow: hidden;
    border:1px solid #a0a0a0;
    font-size: 10px;
    margin: 20px;
    position: relative;
}
.jscourse:hover{
    border-color:#006699;
}

.jscourse .thumb{
    width:100%;
    height:125px;
    position: relative;
}

.jscourse .thumb .symbol{
    width:60px;
    background:gray;
    font-size: 18px;
    color:rgba(255,255,255,.9);
    height:35px;
    line-height:35px;
    padding-left:5px ;
}

.jscourse .thumb .symbol span{
    display: inline-block;
    vertical-align: top;
    height:35px;
    line-height:35px;
    padding:0px 5px;
    background:rgba(0,0,0,.4);
    float: right;
}

.jscourse .info{
    width:100%;
    height:100px;
}
.jscourse .code{
    font-size: 1em;
    color:#a0a0a0;
}
.jscourse .name{
    margin-top: 5px;
    width:100%;
    font-size: 1.4em;
    color:#006699;
}
.jscourse .subname{
    width:100%;
    font-size: 1.2em;
    color:gray;
}
.jscourse .teacher{
    display: none;
    width:100%;
    font-size: 1.1em;
    color:gray;
    position: absolute;
    bottom:0px;
    left:0px;
    height:20px;
    line-height: 20px;
    background: rgba(0,0,0,.1);
}
.jscourse .go{
    margin-top: 5px;
    width:100%;
    height:40px;
    line-height:40px;
    color:white;
    background: #006e2e;
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
}

.jscourse .go:hover{
    background: #009966;
    cursor: pointer;
}

.jscourse .go:active{
    background: #006699;
}

.ratings{
    bottom:0;
    font-size: 15px;
    width:75px;

    height:20px;
    margin:5px 55px;
    text-align: center;
    font-family: FontAwesome;
    text-shadow: 0px 1px 0 #a2a2a2;
    position: absolute;
}

.ratings_bg{
    color:#d0d0d0;
    top:0px;
    left:0px;
    z-index: 2;
    overflow: hidden;
    height:100%;
    white-space: nowrap;
    position: absolute;

}
.ratings_bg:after{
    content: "\f005\f005\f005\f005\f005 ";
}

.ratings_fg{
    color:#DAA520;
    top:0px;
    left:0px;
    z-index: 2;
    overflow: hidden;
    height:100%;
    white-space: nowrap;
    position: absolute;

}
.ratings_fg:after{
    content: "\f005\f005\f005\f005\f005 ";
}