body
{
   background-color: #000000;
   color: #FFFFFF;
}

a:link
{
   color: #77d7ff; /* A light blue for unvisited links */
   text-decoration: none;
}

a:visited { color: #b39ddb; } /* A light purple/violet for visited links */
a:hover { color: #FFFFFF; } /* White on hover */











/* ---------- flex box for top page navigation link buttons  ---------- */
.div-sessions-page-links
{ 
   display: flex;    
   gap: 8px;
   justify-content: center;
   align-items: center;
}

#links_button
{
   color: #f0e6ff;
   background-color: #140033;
   border: 1px solid #6600FF;
}
#links_button:hover {  border-color: #f0e6ff; }









/* ---------- container for all sections on page ---------- */
.div-sessions-page
{ 
   display: flex;    
   flex-direction:column;    
   //border: 1px solid #FFFFFF;
   gap: 10px; 
   padding: 0px;
}

/* ---------- common containers for sections ----------- */




/* ---------- container for entire section -------------
   has border and background
   ----------------------------------------------------- */
.div-section-container
{ 
   display: flex;    
   flex-direction:column;    
   border: 2px solid #FFFFFF;
}

/* ---------- title section   ----------------------------- */


/* ---------- title section frame   ---------- 
   top level container for section       
   draws the frame for the title section (actually just an underline)
   ----------------------------------------------------- */
.div-section-title-section-frame
{ 
   border-bottom: 2px solid #FFFFFF;
}

/* ---------- title section container   ---------- 
   container for title section
   contains 2 things:
   - title frame   
   - buttons frame
   ----------------------------------------------------- */
.div-section-title-section-container
{ 
   display: flex;    
   justify-content: space-between;
   padding: 0px 4px; 
}

/* ---------- frame for title text ---------- */
.div-section-title-frame
{ 
   display: flex;    
   gap: 12px;
   font-size: 1.6rem;
   font-weight: bold;
}

/* ---------- flex box for title frame buttons  ---------- */
.div-section-title-frame-buttons-frame
{ 
   display: flex;    
   gap: 8px;
   justify-content: center;
   align-items: center;
}




.div-section-sub-section-table
{ 
   padding: 0px 12px;
}

.div-section-sub-section-gm_table
{ 
   padding: 0px;
   border: none;
}

.div-section-sub-section-pretext
{ 
   font-size: 1rem;
   display: block;
   font-family: monospace;
   white-space: pre;
   padding: 4px;
}


.div-section-sub-section-title-frame
{ 
   border-top: 2px solid #FFFFFF;
   border-bottom: 2px solid #FFFFFF;
   font-size: 1.3rem;
   font-weight: bold;
   padding-left: 4px;
}



.button
{
   color: #FFFFFF;
   border-radius: 2px;
   padding: 1px 8px;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   border: 1px solid;
}





/* colors for sessions table section */
#sessions, #sessions_button 
{
   color           : hsl(180, 100%, 90%);
   border-color    : hsl(180, 100%, 50%);
   background-color: hsl(180, 100%, 2%);
}
#sessions_button:hover { border-color: hsl(180, 100%, 80%); }
#sessions_table_row, #sessions_table_head
{
   background-color: hsl(180, 100%, 5%);
}
#sessions_table_row:hover
{
   background-color: hsl(180, 100%, 10%);
}



/* colors for current session */
#current_session, #current_session_button
{
   color           : hsl(150, 100%, 97%);
   border-color    : hsl(150, 100%, 50%);
   background-color: hsl(150, 100%, 5%);
}
#current_session_button:hover { border-color: hsl(150, 100%, 80%); }


/* colors for gm table */
#gm_table, #gm_table_button
{
   color           : hsl(20, 100%, 97%);
   border-color    : hsl(20, 100%, 50%);
   background-color: hsl(20, 100%, 5%);
}
#gm_table_button:hover { border-color: hsl(20, 100%, 80%); }
#gm_tablet
{
   border: none;
   border-collapse: collapse;
   width: 100%;
   font-family: sans-serif;
   font-size: .8rem;
}
#gm_tablet td { padding: 1px;  border: 1px solid  hsl(20, 100%, 50%);  text-align: center; }
#gm_tablet th { padding: 1px;  border: 1px solid  hsl(20, 100%, 50%);  text-align: center; }
#gm_tablet tr:hover { background-color:           hsl(20, 100%, 15%);}



/* colors for current gm */
#current_gm, #current_gm_button
{
   color           : hsl(271, 100%, 97%);
   border-color    : hsl(271, 100%, 50%);
   background-color: hsl(271, 100%, 5%);
}
#current_gm_button:hover { border-color: hsl(271, 100%, 80%); }
#current_gm_table
{
   border: none;
   border-collapse: collapse;
   width: 100%;
   font-family: sans-serif;
   font-size: .8rem;
}
#current_gm_table td { padding: 4px;  border: 1px solid hsl(271, 100%, 50%);} 
#current_gm_table tr:hover {          background-color: hsl(271, 100%, 15%);}




/* colors for status_page */
#status_page, #status_page_button
{
   color           : hsl(260, 100%, 97%);
   border-color    : hsl(260, 100%, 50%);
   background-color: hsl(260, 100%, 5%);
}
#status_page_button:hover { border-color: hsl(260, 100%, 80%); }
#status_page_table
{
   border: none;
   border-collapse: collapse;
   width: 100%;
   font-family: sans-serif;
   font-size: .8rem;
}
#status_page_table td { padding: 4px;  border: 1px solid hsl(260, 100%, 50%);} 
#status_page_table tr:hover {          background-color: hsl(260, 100%, 15%);}































/* ---------- container for player icon and player name text ---------- */
.icon-text-container
{
   display: flex;      
   align-items: center;
   gap: 10px;
}
.icon { width: 20px; height: 20px; }
.text { font-family: monospace; font-weight: normal; font-size: 16px; padding-top:2px; white-space:pre } 











/* ---------- container for players cell ---------- */
.players-cell
{
   display: flex;      
   align-items: center;
   gap: 2px;
   padding: 0px;
}
.players-cell-icon { width: 20px; height: 20px; }


/* ---------- container for level cell ---------- */
.level-cell
{
   display: flex;      
   align-items: center;
   justify-content:center;
   gap: 8px;
   padding: 0px;
}