/* Default CSS */


@import url('https://fonts.googleapis.com/css?family=Lato|Roboto');
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC:400&display=swap');


.chifont { 
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 0.8em;
}


    body {
      color:#000000;
      font-family: 'Roboto', sans-serif;
	  font-size: 100%;
      background-color:#FFFFFF;
      background-image:url('img/background_201905.png');
      background-repeat:repeat;
	  margin-top: 0px; /* space zero on top */
      margin-left: 0px;
      margin-right: 0px;

    }
	
	a  { color:#2AAAFF; }
    a:visited { color:#808080; }
    a:hover { color:#0000FF; }
    a:active { color:#0000FF; }
    /* Don't underline links */
    a:link {text-decoration: none;}
    a:visited {text-decoration: none;}
	h1 {
	font-size: 180%;
	margin-top: inherit;
    }
    
    h1.subject_title{
    font-family: 'Lato', sans-serif;
    font-size: 140%;
    color:#A49F49;
	margin-top: inherit;
     } 
    
	h2, h3, h4, h5 {
    font-family: 'Lato', sans-serif;
	font-size: 120%;
	margin-top: inherit;
    }

* {
    box-sizing: border-box;
	/* elements should have padding and border included in the element's total width and height */
}

img { 
	width:100%;
	display: block; /* display an element like a block that is like p */
	border: 0px solid black;
}	


table, td, th {
    border: 1px solid black;
    padding: 6px;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th {
    height: 50px;
    font-size: 120%;
}


 
 
strong{
color:yellow;
font-weight:bold;
 }
 
tr:nth-child(even){background-color: #f2f2f2}



.container
{


width: 100%;
max-width: 1300px;

   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0px;


   
}	






.row_sidebar_plus_content
{
    float: left;
	min-height: 500px;
	background-color:white;
    width:100%;
    
  
    
 }
 


.sidenav
{

	float: none;
    background-color: inherit;
	font-size: 13px;

    display: block;
    color: FFFFFF;
    padding: 0px 1px;	
    width: 100%;
    border: none;
    text-align: left;
    margin-top: 0px;


	
}

.sidenav a {
    background-color: inherit; /* Grey background color */
    color: #FFFFFF; /*  text color */
    display: block; /* Make the links appear below each other */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    border-color:#F6FBE0;
    font-weight:bold;
}

.sidenav a:hover {
    background-color: #176DC1; /* Dark grey background on mouse-over */
	text-decoration: underline;
}

.sidenav a.active {
    background-color: #4CAF50; /* Add a green color to the "active/current" link */
    color: #FFFFFF;
}

/* Style the search box inside the navigation bar */
.sidenav input[type=text] {
    float: left;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-left: 8px;
    margin-right: 0px;
    font-size: 14px;
	width: 70%;
}

.search-container {
  float: left;
}

.search-container input[type=text] {
  width:70%;
  font-size: 1vw;
  padding: 6px 5px;
  box-sizing: border-box;
 }

.search-container button {
  float: left;

  padding: 6px 10px;
  margin-top: 8px;
  font-size: 1vw;
  border: none;
  cursor: pointer;
  background: #ddd;
}

.search-container button:hover {
  background: #ccc;
}


/*FOOTER AREA*/
.hortizontal_div
{
    float: left;
	width: 100%;
	background-color:#BED630;
	min-height: 10px;

    font-size: 13px;
	color: #ffffff;
    text-align: left;
    padding: 0px 0px;
}

.footer
{
    float: left;
	width: 100%;

	background-color:#BED630; /* #A49F49 */
	min-height: 50px;

    font-size: 13px;
	color: #ffffff;
    text-align: center;
    padding: 0px 0px;
}

.footer_mobile
{
    float: left;
	width: 0;

	background-color:#BED630; /* #A49F49 */
	min-height: 0px;

    font-size: 13px;
	color: #ffffff;
    text-align: center;
    padding: 0px 0px;
    

    
}


/* ORGANISING COMMITTEE */

.committee_member_row {
float:left;
width:100%;
background-color:white;
margin-bottom:3%;
 }
 
.committee_member_gpsubject {
float:left;
width:100%;
text-align:left;
padding-left:2%;
font-size:140%;
font-weight:900;
color:#44AC5C;
background-color:white;/*#D0F5A3*/
 }
 
.committee_member_block {
float:left;
width:170px;
min-width:120px;
height:300px;
margin:1% 1% 1% 1% ;
background-color:#white; /*D3D3D3*/
border-style:none;
border-color:transparent;
 }

.committee_photo {
margin:auto;
width:100%;
 }
 

/* ORGANISING COMMITTEE ENDS */





/* DESKTOP VERSION 1 */
@media screen 
and (max-width: 1240.9px)
and (min-width: 796px)

{

.topnav_1stmargin
{
    float: left;
	width: 0;
	height: 0;
	border: none;
 }

  
}




@media screen 
and (min-width: 1241px) 
{

.topnav_1stmargin
{
    float: left;
	width: 17%;
	height: 1px;
	border: none;
 }
 
 
}




/* DESKTOP VERSION 2 */

@media 
only screen and (min-width: 796px)  {

.header
{
width: 100%;
}

.header_mobile
{
    width: 0;
    position: absolute;
	top: -9999px;
	left: -9999px;
}



/* TOP NAVIGATION MENU */

.topnav {
    background-color: #0a3a7a; /* Add background color to the top navigation */
    overflow: hidden;
}



/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    font-size: 13px;
    color: #FFFFFF;
    text-align: center;
    padding: 14px 7px; /*10>5*/
    text-decoration: none;
    font-weight:bold;
}


/* Change the color of links on hover */
.topnav a:hover {
    background-color: #176DC1;
    color: FFFFFF;
	text-decoration: underline;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #0a3a7a;
    color: #349aff;	  
    font-weight: bold;
}


.topnav a.active:hover {
    background-color: #cc5c00;
    color: FFFFFF;
	text-decoration: underline;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* ------ TOP NAVIGATRION dropdown------ */

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
  margin: 0;

}

.dropdown a {
    float: left;
    font-size: 13px;
    color: FFFFFF;
    text-align: center;
    padding: 0px 5px;
    text-decoration: none;
}

/* Dropdown button */
.dropdown .dropbtn {
  font:inherit;      
  font-size: inherit; 
  border: none;
  outline: none;
  color: FFFFFF;
  padding: 14px 5px 10px 0px;
  background-color: inherit;
}

a.active {
    background-color: #176DC1;
    color: #55D737;	  
    font-weight: bold;
}


/* Add a red background color to navbar links on hover */
.dropdown:hover .dropbtn {
  background-color:  #176DC1;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #176DC1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: FFFFFF;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color:  #cc5c00;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}



 .topnav_mobile {
  overflow: hidden;
  background-color: #0a3a7a;
  font-family: inherit;
      	position: absolute;
		top: -9999px;
		left: -9999px;
        width: 0%;
}



.menu_vertical_mobile
{
    float: left;
	width: 0%;
	background-color:#0a3a7a;
	height:inherit;
    overflow: hidden;
    border: 0px;
    margin-top: 30px;
    	position: absolute;
		top: -9999px;
		left: -9999px;
}

.menu_vertical
{

    float: left;  
	width: 17%;
	background-color:#0a3a7a;
	height:inherit;
    overflow: hidden;
    border: 0px;

}

.content
{



    float: left;  
	width: 83%;
	background-color:#ffffff;
	min-height: 400px;
	height:inherit;
		
    font-size: 17px;	
	color: #000000;
    text-align: left;
    padding: 30px 30px;
    text-decoration: none;
    


} 


.regfee{
   width: 100%;
   font-size: 90%;

 }
.regfee_th{
   color:white;
   background-color:#336C3F;
 }
 

.regfee_mobile{
   width: 100%;
   font-size: 80%;
    position: absolute;
	top: -9999px;
	left: -9999px;
 }
 
 
.indexpg_content_left{
   float: left;
   width: 25%;
   font-size: 90%;
   padding-right:20px;
   
 }
 
.indexpg_content_right{
   float: left;
   width: 75%;
   font-size: 110%;	
 }

.index_content_one_col{
   float: left;
   width: 100%;
   border-color:#87D7FF; 
   border-top-style:none; /* groove */ 
   padding-top:10px;
   margin-top:10px;
 } 


.progtabledesktop
{
width:100%;

 }

.progtablemobile
{
width:0%;
    	position: absolute;
		top: -9999px;
		left: -9999px;
 } 
  
 
.committee_name { font-size:100%;font-weight:700; text-align:center; margin:auto; padding:2px 0px 2px 0px;}
.committee_title { font-size:80%; text-align:center; margin:auto; padding:2px 0px 4px 0px;}
 
 
}
/* DESKTOP VERSION ENDS*/




/* MOBILE VERSION */

/* When the screen is less than ??? pixels wide, hide all links, 
except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 795.9px) {


.header
{
    width: 100%;
    position: absolute;
	top: -9999px;
	left: -9999px;
}

.header_mobile
{
    width: 100%;
}

.topnav {
    background-color: #0a3a7a; /* Add background color to the top navigation */
    overflow: hidden;
    
    width:0;   
    position: absolute;
	top: -9999px;
	left: -9999px;
}

/* MOBILE navigation */ 

 .topnav_mobile {
  overflow: hidden;
  background-color: #0a3a7a;
  font-family: inherit;
}

.topnav_mobile a {
  float: left;
  display: block;
  color: #FFFFFF
;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 100%;
}

.topnav_mobile a:hover {
  background-color: #176DC1;
  color: #FFFFFF;
}

.topnav_mobile .icon {
  display: none;
}


  .topnav_mobile a:not(:first-child) {display: none;}
  .topnav_mobile a.icon {
    float: right;
    display: block;
  }
  .topnav_mobile.responsive {position: relative;}
  .topnav_mobile.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav_mobile.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

/* MOBILE navigation ends */



.menu_vertical
{
    float: left;
	width: 0%;
	background-color:#0a3a7a;
	height:inherit;
    overflow: hidden;
    border: 0px;
        position: absolute;
		top: -9999px;
		left: -9999px;
}

.content
{
    float: left;
	width: 100%;
	background-color:#ffffff;
	min-height: 400px;
	height:inherit;
		
    font-size: 17px;	
	color: #000000;
    text-align: left;
    padding: 30px 30px;
    text-decoration: none;

} 

.menu_vertical_mobile
{
    float: left;
	width: 100%;
	background-color:#0a3a7a;
	height:inherit;
    overflow: hidden;
    border: 0px;
    margin-top: 30px;
}

.sidenav_mobile
{
	float: none;
    background-color: inherit;
	font-size: 14px;
    display: block;
    color: FFFFFF;
    padding: 0px 1px;	
    width: 90%;
    border: none;
    text-align: left;
    margin-top: 0px;
    margin:auto;
	
}

.sidenav_mobile a {
    background-color: inherit; /* Grey background color */
    color: #FFFFFF; /*  text color */
    display: block; /* Make the links appear below each other */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    border-color:#4891CA;
    font-weight:bold;
}

.sidenav_mobile a:hover {
    background-color: #176DC1; /* Dark grey background on mouse-over */
	text-decoration: underline;
}

.sidenav_mobile a.active {
    background-color: #4CAF50; /* Add a green color to the "active/current" link */
    color: #FFFFFF;
}

/* Style the search box inside the navigation bar */
.sidenav_mobile input[type=text] {
    float: left;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-left: 8px;
    margin-right: 0px;
    font-size: 14px;
	width: 70%;
}

.regfee{
   width: 100%;
   font-size: 90%;


 }
.regfee_th{
   color:white;
   background-color:#BF5731;
 }
 

.regfee_mobile{
   width: 100%;
   font-size: 80%;
   margin-bottom:20px;

 }

.indexpg_content_left{
   float: left;
   width: 100%;
   font-size: 90%;
   padding-right:20px;
   padding-bottom:20px;
   
 }
 
.indexpg_content_right{
   float: left;
   width: 100%;
   font-size: inherit;	
 }

.index_content_one_col{
   float: left;
   width: 100%;
   border-color:#87D7FF; 
   border-top-style:none; /* groove */
   padding-top:10px;
   margin-top:10px;
 }  
 
 
 .search-container {
  float: left;
}

.search-container input[type=text] {
  width:70%;
  font-size: 14px;
  padding: 6px 5px;
  box-sizing: border-box;
 }

.search-container button {
  float: left;

  padding: 6px 10px;
  margin-top: 8px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  background: #ddd;
}

.search-container button:hover {
  background: #ccc;
}


.committee_member_block {
float:left;
width:128px;
min-width:120px;
height:210px;
margin:1% 1% 1% 1% ;
background-color:#white; /*D3D3D3*/
border-style:none;
border-color:transparent;
 }



.footer
{
    float: left;
	width: 0%;

	background-color:#BED630; /* #A49F49 */
	min-height: 0px;
    
    font-size: 13px;
	color: #ffffff;
    text-align: center;
    padding: 0px 0px;
}


.footer_mobile
{
    float: left;
	width: 100%;

	background-color:#BED630; /* #A49F49 */
	min-height: 0px;

    font-size: 13px;
	color: #ffffff;
    text-align: center;
    padding: 0px 0px;
}


.progtabledesktop
{
width:0%;
    	position: absolute;
		top: -9999px;
		left: -9999px;
 }

.progtablemobile
{
width:100%;

 } 

.committee_name { font-size:80%;font-weight:700; text-align:center; margin:auto; padding:2px 0px 2px 0px;}
.committee_title { font-size:80%; text-align:center; margin:auto; padding:2px 0px 4px 0px;}


 
}
/* MOBILE VERSION ENDS*/