/*********************************************
    TABBING
    http://keith-wood.name/uiTabs.html 
**********************************************/    
#tabs {     
    padding: 0px; 
    background: none; 
    border-width: 0px;     
} 
#tabs .ui-tabs-nav { 
    border-color: gray;   /*top*/
    padding-left: 0px; 
    background: transparent; 
    border-width: 0px 0px 1px 0px; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px;         
} 
#tabs .ui-tabs-panel { 
    border-color: gray;     /*left,right,bottom*/
    color: silver;
    background: black;
    border-width: 0px 1px 1px 1px;     
}
#tabs .ui-tabs-panel a { 
    color: silver;    
}
#tabs .ui-tabs-tab {
    border-color: gray;     /*tab*/
    background-color: #7f7f7f;    
}
#tabs .ui-tabs-active {
    border-color: gray;     /*active-tab*/
    background-color: black;    
}
#tabs .ui-tabs-tab a {
    padding: 1px 5px 1px 5px;    
}
#tabs .ui-tabs-tab.ui-state-hover a {
    font-weight: normal;
}





/*********************************************
CONTENT
https://www.1001fonts.com
https://www.fontsquirrel.com/tools/webfont-generator
*********************************************/
@font-face {
    font-family: Picture_Alphabet;
    src: url('./fonts/Picture_Alphabet.woff') format('woff');
}
@font-face {
    font-family: Kingthings_Conundrum;
    src: url('./fonts/Kingthings_Conundrum.woff') format('woff');
}
@font-face {
    font-family: Blood_Of_Dracula;
    src: url('./fonts/Blood_Of_Dracula.woff') format('woff');
}



/* Capital Letter (to be removed)
line-height: 60px;  */
.FirstInitial p:first-child:first-letter {  
  font-family: Arial, Helvetica, sans-serif;
  font-family: var(--font-family);
  color: var(--color);
  font-size: 25px;
  font-size: var(--font-size);  
  float: left;  
  margin-top: 0px;
  padding: 0px 2px 0px 0px;  
}


/*********************************************
Properites: Recall: TRUE:1 FALSE:(empty) 
*********************************************/
.visible-0 {display: none;} 
.visible-1 {display: inline;}       /* Vu: .visible-1 {display: inline;} */


/* PlaceHolder */
#headerRegion {color:gray; padding: 10px 10px 10px 10px;}
.breadcrumbRegion {width:100%; padding: 0px 40px 0px 40px; font-size: .8em;}
#bodyRegion {    
    border-top: 5px solid gray;
    border-bottom: 5px solid gray;
    width: 100%;    
}
/* Clear floats after the columns */
#bodyRegion:after {
  content: "";
  display: table;
  clear: both;
}

/* SCROLL on Fullscreen */
#contentMain:fullscreen {
  overflow: scroll !important;
}
#contentMain:-moz-full-screen {
  overflow: scroll !important;
}
#contentMain:-webkit-full-screen {
  overflow: scroll !important;
}
#contentMain:-ms-fullscreen {
  overflow: scroll !important;
}
#contentMain:after { content: ''; display: block; clear: both;}


#columnLeft {
    color: silver; font-size: 14px; 
    border-right: 2px solid gray;
    /*position: absolute; */
}
#columnLeftContent {padding: 5px;}

#columnRight {
    color: silver; font-size: 14px; 
    border-left: 2px solid gray;
    /*position: absolute;*/
}
#columnRightContent {padding: 5px;}



#footerRegion {
    width:100%; padding: 30px;    
}

.logo {
    font: 15px Georgia, Times; color: #FFFFFF; font-weight: bold; text-align: center; width: 122px;
    height: 19px; background-color: #22397A; position: absolute; top: 15px; left: 0px; z-index: 10;
}

.header {
    font: 25px lato; padding: 0px 0px 15px 0px;
}
.title {
    font: 25px lato; padding: 0px 0px 15px 0px;    
}
.subtitle {
    font: 15px lato;
    font-weight: bold;
    padding: 10px 0 10px 0;
    text-decoration: none;
}
.section {
    font: 15px lato;
    color: gray;
    padding: 10px 0 10px 0;
}


.error {
    font-weight: bold;
    color: orange;
}

.paging {
    padding-top: 5px;
    padding-bottom: 5px;
}


.submenu {
    padding-top: 5px;
    padding-left: 5px;
}


/* SITE */
.box {
    border-color: #cccccc;
    border-style: solid;
    border-width: 2px;
    padding: 20;
}




/************************
* HTML TAGS                  *
*************************/  

html, body {
   margin: 0;   
   pading: 0;
   width: 100%;
}
body {
    background-color: black;
    color: #aaa;
    font-family: sans-serif;
    line-height: 1.6;    
    height: 100vh;         
}

table, th, td {
  vertical-align: top;
  border-color: DimGrey;
}

dl { color: gray; }
dt { font-size: 1.0em; }
dd { font-size: smaller;}

a:link {
    color: #aaa;
    text-decoration: none;
}
a:visited  {
    color: #aaa;
}
a:hover {
    text-decoration: underline;
}


select {
    margin: 3px 0 3px 0;
    font-weight: bold;  
    border-radius: 4px;
}

label {
    font-weight: bold;  
    margin: 3px 0 3px 0;
    display:inline-block;
}

button:hover {
    cursor: pointer;
}

input[type="text"]{
   margin: 3px 0 3px 0;
   font-weight: bold;
   width: 150px;
   border: 1px solid #aaa;
   border-radius: 4px;
   outline: none;
   padding: 3px;
   box-sizing: border-box;
   transition: .3s;
}
input[type="text"]:focus {
    background-color: #E6F6F6;
    border-color: #DCDCA4;
    box-shadow: 0 0 8px 0 #DCDCA4;
}
input[type="password"]{
   margin: 3px 0 3px 0;
   font-weight: bold;
   width: 150px;
   border: 1px solid #aaa;
   border-radius: 4px;
   outline: none;
   padding: 3px;
   box-sizing: border-box;
   transition: .3s;
}
input[type="password"]:focus {
    background-color: #E6F6F6;
    border-color: #DCDCA4;
    box-shadow: 0 0 8px 0 #DCDCA4;
}

input[type="submit"], input[type="button"] {
   margin: 5px;
   color: #22397A;
   background-color: silver;
   font-weight: bold;
   border-radius: 3px;   
}
input[type="submit"]:hover, input[type="button"]:hover {
   border-color: #AAAAAA;
   box-shadow: 0 0 5px 0 #DCDCA4;
   cursor:pointer;
}
input[type="text"]:disabled{background-color:silver;}


fieldset {
   border: 1px solid #AAAAAA;
   padding: 0px 10px 10px 10px;    
   
}
legend {
    margin-top: -5px;
    font-weight: bold;
}

img {
    max-width: 100%;
    height: auto;
}
.imgThumbnail {
    max-width: 100%;
    height: auto;
    padding: 10px;
}

pre a:link {
    color: #aaa;
}



/************
MEDIA
**************/
.statistic, a.statistic {
    font: lato;    /* font: 15px lato; */
    color: gray;
    font-size: 90%;
    line-height: 15px;
    padding: 5px 0 5px 0;
}





/*********************************************
Responsive Web Design
*********************************************/
* { box-sizing: border-box; }

.row::after { content: ""; clear: both; display: table; }


/* STATION */
[class*="colspan-"] {float: left;}
.colspan-1 {width: 35px; padding: 10px 10px 10px 10px;}
.colspan-2 {width: 70px; padding: 10px 10px 10px 10px;}
.colspan-3 {width: 105px; padding: 10px 10px 10px 10px;}
.colspan-4 {width: 140px; padding: 10px 10px 10px 10px;}
.colspan-5 {width: 175px; padding: 10px 10px 10px 10px;}
.colspan-6 {width: 210px; padding: 10px 10px 10px 10px;}
.colspan-7 {width: 245px; padding: 10px 10px 10px 10px;}
.colspan-8 {width: 280px; padding: 10px 10px 10px 10px;}
.colspan-9 {width: 315px; padding: 10px 10px 10px 10px;}
.colspan-10 {width: 350px; padding: 10px 10px 10px 10px;}

/* MOBILE: [class*="colspan-"] {width: 100%; padding: 0;}*/
@media only screen and (max-width: 1000px) {
    [class*="colspan-"] {float: left;}
    .colspan-1 {width: 10%; padding: 5px 5px 5px 5px;}
    .colspan-2 {width: 20%; padding: 5px 5px 5px 5px;}
    .colspan-2 {width: 30%; padding: 5px 5px 5px 5px;}
    .colspan-4 {width: 40%; padding: 5px 5px 5px 5px;}
    .colspan-5 {width: 50%; padding: 5px 5px 5px 5px;}
    .colspan-6 {width: 60%; padding: 5px 5px 5px 5px;}
    .colspan-7 {width: 70%; padding: 5px 5px 5px 5px;}
    .colspan-8 {width: 80%; padding: 5px 5px 5px 5px;}
    .colspan-9 {width: 90%; padding: 5px 5px 5px 5px;}
    .colspan-10 {width: 100%; padding: 5px 5px 5px 5px;}
    
    .headRegion {background-color:#282C34; color:gray; padding: 10px 10px 10px 10px;}    
    
    .breadcrumbRegion {width:100%; padding: 0px 10px 0px 10px;}
    .bodyRegion {width:100%; padding: 10px 10px 10px 10px;}
    .footRegion {width:100%; padding: 10px 10px 10px 10px;}
}


/************************************
Cross-browser .no-scroll snippet:
*************************************/
.noScroll::-webkit-scrollbar {display:none;}
.noScroll::-moz-scrollbar {display:none;}
.noScroll::-o-scrollbar {display:none;}
.noScroll::-google-ms-scrollbar {display:none;}
.noScroll::-khtml-scrollbar {display:none;}


/*********************
 * Placeholder
 *************************/
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: gray;
  font-style: italic;
}
::-moz-placeholder { /* Firefox 19+ */
  color: gray;
  font-style: italic;
}
:-ms-input-placeholder { /* IE 10+ */
  color: gray;
  font-style: italic;
}
:-moz-placeholder { /* Firefox 18- */
  color: gray;
  font-style: italic;
}