@charset "utf-8";
/* CSS Document */
body{
	background:#ffffff;
	font-family:Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
	width:100%;
	}
img{
	border:none;
	}
h1,h2,h3,h4,h5,h6{
	margin:0;
	padding:0;
	}
h1{
	margin:0.5em 0;
	}
h2{
	color:#4d4d4d;
	font-size:12px;
	}

h3{
	color:#4d4d4d;
	font-size:14px;  
}

a{
	color:#0975a2;
	text-decoration:none;
	}
a:hover{
	color:#004c6b;
	text-decoration:none;
	}
/* logo */
.logo{
	text-align:center;
	margin:5px 0 0 0;
	padding:0;
	}
.logo a{
	display:block;
	padding:10px;
}
/* menu */
.menu{
	margin:20px 10px;
	padding:0;
	}
.menu a{
	font-size:13px;
	font-weight:bold;
	text-align:center;
	display:block;
	background:#eeeefe url(../images/menu-shade.png) repeat-x;
	border:1px solid #dddddd;
	color:#aaaaaa;
	padding:10px;
	margin:10px 0;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	-moz-box-shadow:0 2px 4px #aaaaaa;
	-webkit-box-shadow:0 2px 4px #aaaaaa;
	box-shadow:0 2px 4px #aaaaaa;
	}
.menu a:hover{
	color:#bbbbbb;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
	}

/* sub menu */
.smenu{
	margin:15px 15px;
	padding:5px;
	}
.smenu a{
	font-size:12px;
	font-weight:bold;
	text-align:center;
	display:block;
	background:#eeeeee url(../images/menu-shade.png) repeat-x;
	border:1px solid #dddddd;
	color:#aaaaaa;
	padding:10px;
	margin: 20px 20;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	-moz-box-shadow:0 2px 4px #aaaaaa;
	-webkit-box-shadow:0 2px 4px #aaaaaa;
	box-shadow:0 2px 4px #aaaaaa;
	}
.smenu a:hover{
	color:#bbbbff;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
	}

/* button menu */
  .bmenu{
  	margin:15px 15px;
  	padding:5px;
    width:80px;
    height:20px;
  	}
  .bmenu a{
  	font-size:10px;
  	font-weight:bold;
  	text-align:center;
  	display:block;
  	background:#eeeeee url(../images/menu-shade.png) repeat-x;
  	border:1px solid #dddddd;
  	color:#aaaaaa;
  	padding:10px;
  	margin: 20px 20;
  	-moz-border-radius:2px;
  	-webkit-border-radius:2px;
  	border-radius:2px;
  	-moz-box-shadow:0 2px 4px #aaaaaa;
  	-webkit-box-shadow:0 2px 4px #aaaaaa;
  	box-shadow:0 2px 4px #aaaaaa;
  	}
  .bmenu a:hover{
  	color:#bbbbff;
  	-moz-box-shadow:none;
  	-webkit-box-shadow:none;
  	box-shadow:none;
  	}


/* content */
.content{
	font-size:12px;
	color:#4d4d4d;
	line-height:2em;
	margin:5px;
	padding:0;
	}
.content h2{
	margin:0 0 0 5px;
	padding:0;
	}
.content p{
	text-align:left;
	margin:0 5px 5px 5px;
	line-height:2em;
	padding:0;
	}
/* footer */
.footer{
	border-top:2px solid #565656;
	background:#dddddd;
	font-size:12px;
	margin:10px 0 0 0;
	padding:5px 0;
	}
.footer p{
	color:#aaaaaa;
	font-size:12px;
	text-align:right;
	margin:5px;
	}
.footer p a{
	color:#2d2d2d;
	padding:5px;
	}
.footer p a:hover{
	color:#2d2d2d;
	}
/* clear */
.clear{
	clear:both;
	}
.code{
	padding:0;
	border:1px dotted #bbbbbb;
	}
.numbering{
	background:#f2f2f2;
	color:#bbbbbb;
	padding:2px 5px;
	}
.tag{
	color:#0975a2;
	}
.program{
	color:#ff003c;
	}
.head{
	padding:5px;
	color:#FFFFFF;
	background:#2d2d2d;
	}	

.head2{
	padding:5px;
	color:#eFeFFF;
	background:#6d6d8d;
	}	
  
.pagehead{
	padding:5px;
	color:#0000eF;
	background:#a0a0e4;  
	}  

.hbutton {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

/* new table code - 2019 */

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
  font-size: 1.0em;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
    font-size: .9em;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;    
  }
  
  table td:last-child {
    border-bottom: 0;
  }
  
  label {
  display: inline-block;
  width: 140px;
  text-align: right;
 }

}