html *
{
   font-family: Georgia, serif !important;
    font-size: 18px;
 }   
 



body {
   padding:10px;
  /* padding-bottom:120px;    Height of the footer */
}




/*display styles from io-style */
 .warn {
color: #cc0000;
font-size: larger;
font-weight: bold;
}
 .warna {
color: #007700;
font-size: larger;
font-weight: bold;
}
.cty {
font-size: 28px;
font-weight: bold; 
margin-top:20px;
color:#000; 
}
.cty2 {
font=family: Impact, Charcoal, sans-serif;
font-size: 20px;

color: #003399;
text-shadow:1px 1px #000000;
}
.title1 {
font-size:larger;
font-weight:bold;
}
.title2 {
color:#ffffff;
font-size:18px;
font-weight:bold;
background-color:#555555;
}
.title3 {
color: black;
font-size:12px;
font-weight:normal;
background-color:#baddff;
}
.title4 {
color: #0066cc;
font-size:18px;
font-weight:bold;
}
.title5 {
color: #ffffff;
font-size: 16px; 
font-weight: bold;
}
.txt1 {
/*display:block; 
width:80px; 
background-color: black; */
color: black;
font-size: larger;
font-weight: bold;
} 
.txt1g {
display:inline-block;
border:solid 1px #666; 
padding:2px;
color: black;
font-size: 1.3em;
font-weight: bold;
} 

.txt2 {
/*display:block; 
width:80px; 
background-color: black; */
color: #006699;
font-size: normal;
font-weight: bold;
} 
.txt0 { 
font-size: smaller; 
color: black;
font-weight: bold;
}   

.txt3 {
color: black;
font-size: 16px;
font-weight: bold;
}

.txt4 {
color: #006600;
font-size: 16px; 
font-weight: bold;
}

.note1 {
color: #660000;
font-size: smaller; /* 14px;  */
font-weight: bold;
}
.note2 {
color: #660000;
font-size:  12px; 
font-weight: bold;
}
.gray2 {
display: inline-block;
width:100px;
color:#000000;
background:#cccccc;
text-decoration: none;
border-bottom:solid 2px #ffffff;
margin-right:5px;
}

.cs {
font-family: georgia, sans-serif;
color: #003300;
font-size: 16px; 
font-weight: bold;
}

.sml1 {
font-family: georgia, sans-serif;
color: #ffff99;
font-size: smaller; 
font-weight: bold;
}

.sml2 {
font-family: georgia, sans-serif;
color: #999;
font-size: 12px; 
}
a.cat:link,a.cat:visited,a.cat:active 
{

display:block;
width:100%;
height:30px;
font-size:18px;
font-weight:bold;
color:#eeeeee;
background-color:#215061;  /*00537d; */
text-align:center;


text-decoration:none;
text-transform:uppercase; 


margin:0;
padding:0;
overflow:hidden;
}
a.cat:hover
{
color:#aaaaaa;
background-color:#000000;
}

a.warni:link{color:#cc0000;font-weight: bold;text-decoration: underline;}
a.warni:visited{color:#cc0000;font-weight: bold;text-decoration: none;}
a.warni:hover{color:#0000ff;font-weight: bold;text-decoration: none;}
a.warni:active{color:#cc0000;;font-weight: bold;text-decoration: none;}

a.wht:link{color:#ffffff;font-size:14px;font-weight: bold;text-decoration: none;}
a.wht:visited{color:#ffffff;font-weight: bold;text-decoration: none;}
a.wht:hover{color:#66ccff;font-weight: bold;text-decoration: underline;}
a.wht:active{color:#ffffff;font-weight: bold;text-decoration: none;}

a.bwht:link{color:#eeeeee;font-size:24px;font-weight: bold;text-decoration: none;}
a.bwht:visited{color:#eeeeee;font-size:24px;font-weight: bold;text-decoration: none;}
a.bwht:hover{color:#CD0A5B;font-size:24px;font-weight: bold;text-decoration: none;}
a.bwht:active{color:#eeeeee;font-size:24px;font-weight: bold;text-decoration: none;}
 
a.red:link{color:#111111;font-size:normal;font-weight: bold;text-decoration: underline;}
a.red:visited{color:#111111;font-size:normal;font-weight: bold;text-decoration: none;}
a.red:hover{color:#ff0000;font-size:normal;font-weight: bold;text-decoration: none;}
a.red:active{color:#111111;font-size:normal;font-weight: bold;text-decoration: none;}

a.sml0:link{color:#333;font-size:smaller;font-weight: bold;text-decoration: none;}
a.sml0:visited{color:#333;font-size:smaller;font-weight: bold;text-decoration: none;}
a.sml0:hover{color:#ff0000;font-size:smaller;font-weight: bold;text-decoration: none;}
a.sml0:active{color:#333;font-size:smaller;font-weight: bold;text-decoration: none;}

a.red2:link{color:#CD0A5B;font-size:smaller;
font-weight: bold;
background-color:#DBE6F3;
border:solid 1px #aaa;
text-decoration: none;
}
a.red2:visited{color:#006600;font-size:smaller;font-weight: bold;text-decoration: none;}
a.red2:hover{color:black;font-size:normal;font-weight: bold;text-decoration: none;}
a.red2:active{color:#006600;font-size:smaller;font-weight: bold;text-decoration: none;}

a.red1:link{color:#000000;text-decoration: none;}
a.red1:visited{color:#000000;text-decoration: none;}
a.red1:hover{color:#990000;background:#000000;text-decoration: none;}
a.red1:active{color:#000000;text-decoration: none;}

a.blk:link{color:#111111;font-size:16px;font-weight: bold;text-decoration: underline;}
a.blk:visited{color:#111111;font-weight: bold;text-decoration: none;}
a.blk:hover{color:#ff0000;font-weight: bold;text-decoration: none;}
a.blk:active{color:#111111;font-weight: bold;text-decoration: none;}

a.blk2:link{color:#000000;text-decoration: none;}
a.blk2:visited{color:#000000;text-decoration: none;}
a.blk2:hover{color:#ee0000;text-decoration: none;}
a.blk2:active{color:#000000;text-decoration: none;}

a.black:link{color:#000000;font-size:18px;font-weight: bold;}
a.black:visited{color:#000000;font-weight: bold;text-decoration: none;}
a.black:hover{color:#3333FF;background-color: yellow;text-decoration: underline;}
a.black:active{color:#000000;font-weight: bold;text-decoration: none;}

a.big:link{display: inline-block;width:99%; background-color:#89DAD8;color:#000000;
           font-size:3em;font-weight: bold; padding:1px 0 20px 10px;text-decoration: none;}
a.big:visited{display: inline-block;width:99%; background-color:#89DAD8;color:#000000;
           font-size:3em;font-weight: bold; padding:1px 0 20px 10px;text-decoration: none;}
a.big:hover{color:#ffffff;background-color: #516253;text-decoration: none;}
a.big:active{display: inline-block;width:99%; background-color:#BB0000;color:#000000;
           font-size:3em;font-weight: bold; padding:1px 0 20px 10px;text-decoration: none;}

a.big2:link{display: inline-block;width:99%; background-color:#333333;color:#ffffff;
           font-size:1.3em;font-weight: bold; padding:1px 0 20px 10px;text-decoration: none;}
a.big2:visited{display: inline-block;width:99%; background-color:#333333;color:#ffffff;
           font-size:1.3em;font-weight: bold; padding:1px 0 20px 10px;text-decoration: none;}
a.big2:hover{color:#ffffff;background-color: #516253;text-decoration: none;}
a.big2:active{display: inline-block;width:99%; background-color:#BB0000;color:#ffffff;
           font-size:1.3em;font-weight: bold; padding:1px 0 20px 10px;text-decoration: none;}
  
a.wht:link{color:#ffffff;text-decoration: none;font-weight:bold;}

a.gray:link{display:block;width:200px;color:#ffffff;background:#333333;text-decoration: none;padding:2px;margin:5px;}
a.gray:visited{color:#006600;background:#003300;text-decoration: none;}
a.gray:hover{color:#000000;background:#cccccc;text-decoration: none;}
a.gray:active{color:#006600;background:#003300;text-decoration: none;}

a.gray2:link{display: inline-block;text-align:center;width:100px;color:#ffffff;background:#777777;text-decoration: none;padding:5px;margin:0px;}
a.gray2:visited{text-align:center;color:#ffffff;background:#777777;text-decoration: none;}
a.gray2:hover{text-align:center;color:#000000;background:#cccccc;text-decoration: none;}
a.gray2:active{text-align:center;color:#ffffff;background:#777777;text-decoration: none;}

a.green:link{color:#006600;text-decoration: none;}
a.green:visited{color:#006600;text-decoration: none;}
a.green:hover{color:#ffffff;background:#003300;text-decoration: none;}
a.green:active{color:#006600;text-decoration: none;}

a.blue:link{color:#006699;font-size:larger;font-weight: bold;text-decoration: underline;}
a.blue:visited{color:#006699;font-size:larger;font-weight: bold;text-decoration: underline;}
a.blue:hover{color:#111111;font-size:larger;font-weight: bold;background-color:#cccccc;text-decoration: none;}
a.blue:active{color:#006699;font-size:larger;font-weight: bold;text-decoration: underline;}

a.blue1:link{color:#006699;font-weight: bold;text-decoration: underline;}
a.blue1:visited{color:#006699;font-weight: bold;text-decoration: underline;}
a.blue1:hover{color:#ff0000;font-weight: bold;text-decoration: none;}
a.blue1:active{color:#006699;font-weight: bold;text-decoration: underline;}

a.blue2:link{color:#006699;font-size:12px;font-weight: bold;text-decoration: none;}
a.blue2:visited{color:#006699;font-size:12px;font-weight: bold;text-decoration: none;}
a.blue2:hover{color:#111111;font-size:12px;font-weight: bold;background-color:#cccccc;text-decoration: none;}
a.blue2:active{color:#006699;font-size:12px;font-weight: bold;text-decoration: none;}


a.blue3:link{color:#006699;font-size:24px;font-weight: bold;background-color:#eae364;text-decoration: none;padding:2px 5px 2px 5px;border:solid 1px #aaaaaa;}
a.blue3:visited{color:#006699;font-size:24px;font-weight: bold;text-decoration: none;padding:2px 5px 2px 5px;border:solid 1px #aaaaaa;}
a.blue3:hover{color:#111111;font-size:24px;font-weight: bold;background-color:#cccccc;text-decoration: none;padding:2px 5px 2px 5px;border:solid 1px #aaaaaa;}
a.blue3:active{color:#006699;font-size:24px;font-weight: bold;text-decoration: none;padding:2px 5px 2px 5px;border:solid 1px #aaaaaa;}


a.blue4:link{color:#006699;font-size:32px;font-weight: bold;background-color:#eae364;text-decoration: none;}
a.blue4:visited{color:#006699;font-size:32px;font-weight: bold;text-decoration: none;}
a.blue4:hover{color:#111111;font-size:32px;font-weight: bold;background-color:#cccccc;text-decoration: none;}
a.blue4:active{color:#006699;font-size:32px;font-weight: bold;text-decoration: none;}

.class1 A:link {background: #ddd; border: solid 1px #777; font-weight: bold; color: black; text-decoration: none; padding:3px;}
.class1 A:visited {background: #ddd; font-weight: bold; color: black; color: black; text-decoration: none; padding:3px;}
.class1 A:active {background: #ddd;  font-weight: bold; text-decoration: none; padding:3px;}
.class1 A:hover {background: #3FD391; font-weight: bold; color: #fff; text-decoration: none; padding:3px;}

.class2 A:link {background: #EEF441; border: solid 1px #777; font-weight: bold; color: black; text-decoration: none; padding:3px;}
.class2 A:visited {background: #EEF441; font-weight: bold; color: black; color: black; text-decoration: none; padding:3px;}
.class2 A:active {background: #EEF441;  font-weight: bold; color: black; text-decoration: none; padding:3px;}
.class2 A:hover {background: #3FD391; font-weight: bold; color: #fff; text-decoration: none; padding:3px;}

.class3 A:link {background: #A8E6F0; border: solid 1px #777; font-weight: bold; color: black; text-decoration: none; padding:9px;}
.class3 A:visited {background: #A8E6F0;; font-weight: bold; color: black; color: black; text-decoration: none; padding:9px;}
.class3 A:active {background: #A8E6F0;;  font-weight: bold; text-decoration: none; padding:9px;}
.class3 A:hover {background: #3FD391; font-weight: bold; color: #fff; text-decoration: none; padding:9px;}


a.rep:link{color:#006699;font-size:14px;background-color:#dddddd;text-decoration: none;}
a.rep:visited{color:#006699;font-size:14px;background-color:#dddddd;text-decoration: none;}
a.rep:hover{color:#111111;font-size:14px;background-color:#ffffcc;text-decoration: none;}
a.rep:active{color:#006699;font-size:14px;background-color:#dddddd;text-decoration: none;}

a.foot:link{color:#006699;font-size:14px;font-family:Georgia, serif; font-weight: bold;background-color: #ddd;text-decoration: none;}
a.foot:visited{color:#006699;font-size:14px;font-family:Georgia, serif; font-weight: bold;background-color: #ddd;text-decoration: none;}
a.foot:active{color:#006699;font-size:14px;font-family:Georgia, serif; font-weight: bold;background-color: #ddd;text-decoration: none;}
a.foot:hover{color:#dd0000;font-size:14px;font-family:Georgia, serif; font-weight: bold;background-color: #aaa;text-decoration: none;}

a.foot2:link{color:#006699;font-size:14px;font-family:Georgia, serif; font-weight: bold;background-color: #ddd;text-decoration: none;border:solid 1px #333;}
a.foot2:visited{color:#006699;font-size:14px;font-family:Georgia, serif; font-weight: bold;background-color: #ddd;text-decoration: none;border:solid 1px #333;}
a.foot2:active{color:#006699;font-size:14px;font-family:Georgia, serif; font-weight: bold;background-color: #ddd;text-decoration: none;border:solid 1px #333;}
a.foot2:hover{color:#dd0000;font-size:14px;font-family:Georgia, serif; font-weight: bold;background-color: #aaa;text-decoration: none;border:solid 1px red;}

 a.eve:link,a.eve:visited,a.eve:active
{
display:block;
font-size:18px;
font-weight:bold;
color:#000000;
background-color:#BEEFD5;
width:95px;
text-align:center;
padding:5px;
margin:2px;
text-decoration:none;
}
a.eve:hover
{
background-color:red;
}

 a.eve2:link,a.eve2:visited,a.eve2:active
{
display:block;
font-size:18px;
font-weight:bold;
color:#000000;
background-color:#BEEFD5;
width:180px;
text-align:center;
padding:5px;
margin:2px;
text-decoration:none;
}
a.eve2:hover
{
background-color:red;
}



 a.bus:link,a.bus:visited,a.bus:active
{
display:block;
font-size:larger;
font-weight:bold;
color:#000000;
background-color:#669900;
width:100px;
text-align:center;
padding:5px;
margin:3px 5px 3px 5px;
text-decoration:none;
}
a.bus:hover
{
background-color:red;
}

 a.afro:link,a.afro:visited,a.afro:active
{
display:block;
font-size:18px;
font-weight:bold;
color:#000000;
background-color:#6699ff;
width:122px;
text-align:center;
padding:5px;
margin:2px;
text-decoration:none;
}
a.afro:hover
{
background-color:red;
}

 a.afrog:link,a.afrog:visited,a.afrog:active
{
display:block;
font-size:18px;
font-weight:bold;
color:#000000;
background-color:#ccc;
width:122px;
text-align:center;
padding:5px;
margin:2px;
text-decoration:none;
}
a.afrog:hover
{
background-color:red;
}

 a.art:link,a.art:visited,a.art:active
{
display:block;
font-size:larger;
font-weight:bold;
color:#000000;
background-color:#66ccff;
width:140px;
text-align:center;
padding:0 2px 3px 2px;
margin:3px;
text-decoration:none;
}
a.art:hover
{
background-color:red;
}
 a.art2:link,a.art2:visited,a.art2:active
 {
color:#000000;
font-size:18px;
font-weight:bold;
background-color:#66ccff;
}
a.art2:hover
{
background-color:red;
}

 a.lit:link,a.lit:visited,a.lit:active
{
display:block;
font-size:larger;
font-weight:bold;
color:#000000;
background-color:#ffff99;
width:140px;
text-align:center;
padding:0 2px 3px 2px;
margin:3px;
text-decoration:none;
}
a.lit:hover
{
background-color:red;
}

 a.lit2:link,a.lit2:visited,a.lit2:active
 {
color:#000000;
font-size:1.3em;
font-weight:bold;
background-color:#ffff99;
border:solid 1px #000;
padding:10px;
width:40%;
min-width:300px;
}
a.lit2:hover
{
background-color:red;
}
 a.lit3:link,a.lit2:visited,a.lit2:active
 {
color:#000000;
font-size:18px;
font-weight:bold;
background-color:#ffff99;
}
a.lit3:hover
{
background-color:red;
}   
 a.music:link,a.music:visited,a.music:active
{
display:block;
font-size:larger;
font-weight:bold;
color:#000000;
background-color:#99ff99;
width:140px;
text-align:center;
padding:0 2px 3px 2px;
margin:3px;
text-decoration:none;
}
a.music:hover
{
background-color:red;
}
 a.music2:link,a.music2:visited,a.music2:active
 {
color:#000000;
font-size:18px;
font-weight:bold;
background-color:#99ff99;
}
a.music2:hover
{
background-color:red;
}