/* ------------------------- GLOBAL -------------------------*/
/* aside */
aside { width: 15%; position: fixed; float:left ; height: 100%; background-color: #fff; z-index: 2 }

.coursemenu ul { padding-left: 0px; margin-top:-10px}
.coursemenu ul li header { color: rgba(255,255,255,1.00); background-color: rgba(0,0,0,1.00); text-align: center; margin-bottom: 10px;margin-top: 15px;font-size: 15px; line-height: 28px; cursor:default}
.coursemenu ul li, .coursemenu ul li a { font-size: 13px; color: #6a6a6a; text-align: left; text-decoration: none; line-height: 30px; float: left; clear: left; display: inline-block; width: 100%; background-size: 0px 10px;}
.coursemenu ul li a { margin-left: 30px; }
.coursemenu ul li a:hover { color: rgba(0,138,255,1.00); text-decoration: none;  background-image: url(../images/next2.png); background-position: 6px center; background-size: 10px 12px; background-repeat: no-repeat; margin-left:5px; padding-left:25px ;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;}

/* Section */
section { width:82% ; position: relative; margin-left:18%; cursor:default; margin-top:30px; }
.banner { width:98% ; position: relative; float: left; overflow: hidden}
.video {width:50% ;position:absolute; z-index: 1;margin-left: 45%}
.banner img {width:auto; height: 43vh ;min-height:300px; max-height:43vh; float: left}
.pg-video { width:100% ; height: 43vh ;min-height:300px; max-height:43vh; }


/* Tab */
.tab { width: 20%; position: relative; float: left; margin-left:-40px; margin-right: 2%;margin-bottom:60px; display: block}
.tab ul li { display: inline-block; text-decoration: none; width: 100%; }
.tab button , .tab button.apply, .tab button a, .tab button.apply a, .tab button:link, .tab button:hover, .tab button:active, .tab button:visited, .tab button:focus, .tab-off { width: 100%; margin-bottom: 10px; padding-top:10px; padding-bottom: 10px;font-weight: bold; font-size: 18px; font-family:Arial, Helvetica, sans-serif; text-align: center; border-radius: 10px;  cursor:pointer; color: rgba(255,255,255,1.00); background-color: #999; border:0 ; outline:0;   }


/* Tab - Style */
.tab button:hover, .tab button.apply:hover, .tab button.download:hover, .tab-on { background-color: rgba(0,0,0,1.00) !important; background-image: url(http://aod.education/images/programmes/arrow.png); background-repeat: no-repeat; background-size: 10px 11px; background-position: 10px center; background-clip: padding-box;   
    -webkit-transition: background-color 500ms ease-in-out;
    -moz-transition: background-color 500ms ease-in-out;
    -o-transition: background-color 500ms ease-in-out;
    -ms-transition: background-color 500ms ease-in-out;
    transition: background-color 500ms ease-in-out;
}
.tab button.apply{ color: rgba(255,255,255,1.00); background-color: rgba(255,0,118,0.89) }
.tab button.download{ color: rgba(255,255,255,1.00); background-color: rgba(190,22,35,1.00) }

/* Content */
#main { border: medium solid #000; border-radius: 10px; width: 69%; height:auto; min-height: 280px; box-sizing:content-box; position: relative; display: inline-block; padding: 3%; padding-bottom: 1% !important;  margin-top: 15px;  }

.content { width: 100%; color: #666; line-height: 25px; text-align: justify; font-size: 15px; margin-bottom:80px;  }
.content header { font-size: 25px; font-weight: bold; color: #000; }
.content header.title { font-size: 16px; border-bottom: 1px dotted #000; }
.content a, .content a:active, .content a:visited, .content a:link {color:#2ea2cc; text-decoration: none}
.content a:hover { text-decoration: underline}


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

@media all and (max-width: 1366px) {
    
/* aside */
aside { width: 220px;}
.coursemenu ul { padding-left: 0px; margin-top:-15px}
.coursemenu ul li header { margin-bottom: 5px;margin-top: 20px;font-size: 13px; line-height: 25px  }
.coursemenu ul li, .coursemenu ul li a { font-size: 10px; line-height: 20px;}

/* Section */
.video {margin-left: 48%}    
    
    
/* Tab */
.tab button , .tab button.apply, .tab button a, .tab button.apply a, .tab button:link, .tab button:hover, .tab button:active, .tab button:visited, .tab button:focus { font-size: 15px; margin-bottom: 5px;}
 
    
/* Content */
#main { width: 73%; min-height: 250px; }
    
}

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

@media all and (max-width: 1100px) {
    
/* aside */
aside { width: 230px;}

 
/* Section */
section { width:auto;  margin-left:250px; }
.video {width:40%; margin-left: 58% }


/* Tab */
.tab{ width: 30%}
    
/* Content */
#main { width: 65%; }    

}

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

@media all and (max-width: 900px) {
    
body {min-width: inherit}    
    
/* Section */
.banner { clear: left}
.video {width:99%; margin-left: 0px; position:relative; }

/* Tab */
.tab{ width:100%; margin-bottom:0px;float: none; margin-left: -20px; margin-top: -20px }
.tab ul li { display: block;}
.tab button , .tab button.apply, .tab button a, .tab button.apply a, .tab button:link, .tab button:hover, .tab button:active, .tab button:visited, .tab button:focus { width: 40%; min-width: 180px; font-size: 20px; float: left; margin:5px 4%; }
.tab button.download{ clear: left }
    
/* Content */
#main { width:92%; }   

}


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

@media all and (max-width: 735px) {
    
/* Section */
.banner { width:99% ;overflow: hidden}
.banner img {width:200%; height: auto ;min-height:inherit; max-height:inherit; }
.pg-video { height: 30vh ;min-height:150px; max-height:300px; }

/* Tab */
.tab button , .tab button.apply, .tab button a, .tab button.apply a, .tab button:link, .tab button:hover, .tab button:active, .tab button:visited, .tab button:focus { width: 20%; min-width: 120px; font-size: 10px; margin:5px }

/* Content */
.content { line-height: 20px; font-size: 10px}
.content header { font-size: 20px; }
}

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

@media all and (max-width: 565px) {
    
body { min-width: 320px; overflow: auto}    
    
/*Scrollbar style*/
::-webkit-scrollbar { width: 0 !important;}    

/* aside */
aside { width: 100%; position: relative; margin-bottom: 60px; z-index: 2 }
    
.coursemenu ul li header { font-size: 16px; line-height: 25px; width: 110% }
.coursemenu ul li, .coursemenu ul li a { font-size: 14px;line-height: 25px; width: 90% }
    
/* Section */
section { width:98% ; margin:0 auto;}
.banner, .video { width:100%}
    
/* Tab */
.tab button , .tab button.apply, .tab button a, .tab button.apply a, .tab button:link, .tab button:hover, .tab button:active, .tab button:visited, .tab button:focus { width: 100%; min-width: 100%; font-size: 25px; padding: 10px; margin-left: -5px }
    
/* Content */
.content {line-height: 25px; font-size: 15px; text-align: left;}
.content header { font-size: 25px; }

}