/*

Mobile friendly - from Goggle gemini

Fri Oct  3 02:12:41 AM UTC 2025



==================================================
1. Base Styles (Mobile-First Defaults)
   - These styles apply to ALL devices (the "mobile" view)
==================================================
*/

/* Box-sizing for easier layout calculations */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Base font size and line height for good readability on mobile */
body {
    font-family: Arial, sans-serif;
    color: black;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* Responsive Images: Prevents images from overflowing their containers */
img {
    max-width: 100%;
    height: auto; /* Important to maintain the image's aspect ratio */
    display: block;
}

/* Utility Class: Fluid Container (takes up most of the screen width) */
.container {
    width: 90%; /* Start with 90% width on mobile */
    margin: 0 auto; /* Center the container */
    padding: 10px 0;
}

/* Flexible Layout (Example: a simple 1-column layout on mobile) */
.grid-layout {
    display: flex;
    flex-direction: column; /* Stack items vertically on mobile */
    gap: 20px;
}

.card {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    /* On mobile, cards take up 100% of the container width (the default) */
}

/*
==================================================
2. Media Query (Desktop Breakpoint)
   - Styles inside this block OVERWRITE the base styles for WIDER screens
   - We use 'min-width' for the Mobile-First approach
==================================================
*/
@media (min-width: 1368px) {
    
    /* Container Adjustments 
    - At desktop, constrain the container's maximum size for better line length 
    */
    .container {
    justify-content: center; /* Centers content horizontally */
        width: 900px; /* Stop the container from getting too wide on huge screens */
        max-width: 900px; /* Stop the container from getting too wide on huge screens */
        padding: 20px 0;
    }

body {
        width: 900px; /* Stop the container from getting too wide on huge screens */
    font-family: Arial, sans-serif;
    text-align: justify;
    justify-content: center; /* Centers content horizontally */
    margin: auto; /* TVM enable center justified*/
    }
    /* Layout Adjustments 
    - Change from a vertical stack (column) to a horizontal layout (row) 
    - Use Flexbox/Grid to distribute items in multiple columns
    */
    .grid-layout {
        flex-direction: row; /* Lay items out horizontally on desktop */
        flex-wrap: wrap; /* Allow items to wrap onto the next line */
    }

    /* Card Adjustments 
    - Use 'flex' to make cards share space, effectively creating columns 
    */
    .card {
        /*
        The flex shorthand: flex-grow | flex-shrink | flex-basis
        - flex-basis: calc(33.33% - 20px) attempts to make three equal columns 
          (100% / 3 = 33.33%) minus the gap space.
        */
        flex: 1 1 calc(33.33% - 20px);
    }
}

a:link, a:visited{
	color: #005FA9;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}



h1
{
	font-weight:bold;
	font-size:24pt;
	font-family:Arial, Helvetica, sans-serif;
	color:green;
}

h2
{
	font-weight:bold;
	font-size:20pt;
	font-family:Arial, Helvetica, sans-serif;
	color:fuchsia;
}

h3
{
	font-weight:bold;
	font-size:18pt;
	font-family:Arial, Helvetica, sans-serif;
	color:purple;
}




/* ------------------
 styling for the tables 

Source

http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/


tabHMA
tabHMB
tabVML
tabBXA
tabBXB
tabHZ
tabVZ
tabOCE
tabNPA
tabNPB
tabNPC
tabRC


*/



#tabHMA
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	background: #fff;
	margin: 45px;
	width: 480px;
	border-collapse: collapse;
	text-align: left;
}
#tabHMA th
{
	font-size: 14px;
	font-weight: normal;
	color: #039;
	padding: 10px 8px;
	border-bottom: 2px solid #6678b1;
}
#tabHMA td
{
	color: #669;
	padding: 9px 8px 0px 8px;
}
#tabHMA tbody tr:hover td
{
	color: #009;
}


#tabHMB
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	background: #fff;
	margin: 45px;
	width: 480px;
	border-collapse: collapse;
	text-align: left;
}
#tabHMB th
{
	font-size: 14px;
	font-weight: normal;
	color: #039;
	padding: 10px 8px;
	border-bottom: 2px solid #6678b1;
}
#tabHMB td
{
	border-bottom: 1px solid #ccc;
	color: #669;
	padding: 6px 8px;
}
#tabHMB tbody tr:hover td
{
	color: #009;
}


#tabVML
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#tabVML th
{
	padding: 8px 2px;
	font-weight: normal;
	font-size: 14px;
	border-bottom: 2px solid #6678b1;
	border-right: 30px solid #fff;
	border-left: 30px solid #fff;
	color: #039;
}
#tabVML td
{
	padding: 12px 2px 0px 2px;
	border-right: 30px solid #fff;
	border-left: 30px solid #fff;
	color: #669;
}

/*
https://css-tricks.com/almanac/properties/t/table-layout/
 */
#tabBXA
{
	/*font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;*/
	font-family: Verdana, sans-serif;
	font-size: 14px;
	margin: 45px;

	/*table-layout: auto; /* aouto or fixed - tvm*/
	/*width: 90%; /* 90% or 480px - tvm */
	text-align: left;
	border-collapse: collapse;
	border-top: 1px solid #9baff1;
	border-bottom: 1px solid #9baff1;
}
#tabBXA th
{
	font-size: 16px;
	font-weight: normal;
	padding: 8px;
	background: #b9c9fe;
	border-top: 4px solid #aabcfe;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #9baff1;
	border-left: 1px solid #9baff1;
	color: #039;
}
#tabBXA td
{
	padding: 8px;
	background: #e8edff; 
	/*border-top: 1px solid transparent;*/
	border-top: 1px solid #aabcfe;
	/*border-bottom: 1px solid #fff*/
	border-bottom: 1px solid #aabcfe;
	border-right: 1px solid #aabcfe;
	border-left: 1px solid #aabcfe;
	color: #669;
}
#tabBXA tr:hover td
{
	background: #d0dafd;
	color: #339;
}


#tabBXB
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: center;
	border-collapse: collapse;
	border-top: 7px solid #9baff1;
	border-bottom: 7px solid #9baff1;
}
#tabBXB th
{
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	background: #e8edff;
	border-right: 1px solid #9baff1;
	border-left: 1px solid #9baff1;
	color: #039;
}
#tabBXB td
{
	padding: 8px;
	background: #e8edff; 
	border-right: 1px solid #aabcfe;
	border-left: 1px solid #aabcfe;
	color: #669;
}


#tabHZ
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#tabHZ th
{
	font-size: 14px;
	font-weight: normal;
	padding: 10px 8px;
	color: #039;
}
#tabHZ td
{
	padding: 8px;
	color: #669;
}
#tabHZ .odd
{
	background: #e8edff; 
}


#tabVZ
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#tabVZ th
{
	font-size: 14px;
	font-weight: normal;
	padding: 12px 15px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	color: #039;
}
#tabVZ td
{
	padding: 8px 15px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	color: #669;
}
.vzebra-odd
{
	background: #eff2ff;
}
.vzebra-even
{
	background: #e8edff;
}
#tabVZ #vzebra-adventure, #tabVZ #vzebra-children
{
	background: #d0dafd;
	border-bottom: 1px solid #c8d4fd;
}
#tabVZ #vzebra-comedy, #tabVZ #vzebra-action
{
	background: #dce4ff;
	border-bottom: 1px solid #d6dfff;
}


#tabOCE
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#tabOCE th
{
	font-size: 14px;
	font-weight: normal;
	padding: 12px 15px;
	color: #039;
}
#tabOCE td
{
	padding: 10px 15px;
	color: #669;
	border-top: 1px solid #e8edff;
}
.oce-first
{
	background: #d0dafd;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
}
#tabOCE tr:hover td
{
	color: #339;
	background: #eff2ff;
}


#tabNPA
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #69c;
}
#tabNPA th
{
	padding: 12px 17px 12px 17px;
	font-weight: normal;
	font-size: 14px;
	color: #039;
	border-bottom: 1px dashed #69c;
}
#tabNPA td
{
	padding: 7px 17px 7px 17px;
	color: #669;
}
#tabNPA tbody tr:hover td
{
	color: #339;
	background: #d0dafd;
}


#tabNPB
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #69c;
}
#tabNPB th
{
	padding: 15px 10px 10px 10px;
	font-weight: normal;
	font-size: 14px;
	color: #039;
}
#tabNPB tbody
{
	background: #e8edff;
}
#tabNPB td
{
	padding: 10px;
	color: #669;
	border-top: 1px dashed #fff;
}
#tabNPB tbody tr:hover td
{
	color: #339;
	background: #d0dafd;
}


#tabNPC
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #6cf;
}
#tabNPC th
{
	padding: 20px;
	font-weight: normal;
	font-size: 13px;
	color: #039;
	text-transform: uppercase;
	border-right: 1px solid #0865c2;
	border-top: 1px solid #0865c2;
	border-left: 1px solid #0865c2;
	border-bottom: 1px solid #fff;
}
#tabNPC td
{
	padding: 10px 20px;
	color: #669;
	border-right: 1px dashed #6cf;
}


#tabRC
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#tabRC thead th.rounded-company
{
	background: #b9c9fe url('table-images/left.png') left -1px no-repeat;
}
#tabRC thead th.rounded-q4
{
	background: #b9c9fe url('table-images/right.png') right -1px no-repeat;
}
#tabRC th
{
	padding: 8px;
	font-weight: normal;
	font-size: 13px;
	color: #039;
	background: #b9c9fe;
}
#tabRC td
{
	padding: 8px;
	background: #e8edff;
	border-top: 1px solid #fff;
	color: #669;
}
#tabRC tfoot td.rounded-foot-left
{
	background: #e8edff url('table-images/botleft.png') left bottom no-repeat;
}
#tabRC tfoot td.rounded-foot-right
{
	background: #e8edff url('table-images/botright.png') right bottom no-repeat;
}
#tabRC tbody tr:hover td
{
	background: #d0dafd;
}