/* =============================================
   CSS CUSTOM PROPERTIES (brand tokens)
   ============================================= */
:root {
    --color-brand:        #4F81BD;
    --color-brand-dark:   #406899;
    --color-brand-light:  #6fa3d5;
    --color-danger:       #B22222;
    --color-text:         #232323;
    --color-text-muted:   #666666;
    --color-white:        #ffffff;
    --color-bg-light:     #FAFAFA;
    --font-base:          Arial, Helvetica, sans-serif;
}

/* =============================================
   BOX-SIZING RESET
   ============================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

/* =============================================
   BREAKPOINTS
   mobile  : < 768px
   tablet  : 768px – 1024px
   desktop : > 1024px
   ============================================= */

/* generic rules for many items */
.newUserContainer
    {
	width: 200px;
	z-index: 147px;
	margin-top: 30px;
	margin-bottom: 30px;
}
body
{
	margin: 0;
	font-size: 12pt;
	font-weight: 500;
	font-family: var(--font-base);
	font-style: normal;
	font-variant: normal;
	color: var(--color-text);
	line-height: 1.5;
}
a
{
	border-color: inherit;
    border-width: 0;
    border-style: none;
    text-decoration: none;
    text-align: right;
}
img
{
	border-bottom-style: none;
	border-style: none;
	max-width: 100%;
	height: auto;
}
.chkBox
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: lighter;
	color: #666666;
	padding: 2px;
	overflow: hidden;
}
/* end generic stuff */

.mastHead
{
	/* This is just for the coloration of the top masthead */
	/*padding: 0;
	margin: 0;*/
	/*background-color: #4F81BD/*336699;*/
	background-color: #4F81BD;
	
	/*background-image: url('Images/mastHeadGradient.gif');*/
	/*height: 70px;*/
    text-align: center;
    border-color:#406899;
    border-style:solid;
}
.mastHeadContent
{
	/*This is where the content in the masthead goes */
	margin-left: auto;
	margin-right: auto;
    max-width: 1200px;
    color: var(--color-white);
    background-color: var(--color-brand);
    border: none;
    text-align: center;
}
.contentDiv
{
	/* This contains all of the content area of the page. Used to align and format. */
	padding: 10px;
	/*width: 1024;*/
	margin-left: auto;
	margin-right: auto;
}
.txtBoxDiv
{
	/*Generic single-line textbox formatting. Wrap around any single line textbox. */
	/*background-image: url('Images/txtInactive.gif');*/
	width: 249px;
	background-repeat: no-repeat;
	background-position: right;
	height: 40px;
	vertical-align: middle;
}
.txtBox
{    margin-top: 5px;
}
h4
{
	/* for paragraph-style text */
	line-height: 20px;
	text-align: justify;
	vertical-align: text-top;
}
.adDiv
{
	/* Generic ad formating div. Set up in tandem with .bodyDiv as well as the footer div */
	background-image: url('Images/Advert.gif');
	background-repeat: no-repeat;
	min-height: 92px;
	float: none;
	width: 130px;
	padding-top: 10px;
}
.button
{
	font-family: Arial, Helvetica, sans-serif;
	background-color: #4F81BD/*336699*/;
	color: White;/*color: #FFFFCC;*/
   
    }
    .buttoninverse
{
	font-family: Arial, Helvetica, sans-serif;
	background-color: White;
	color: #3333FF;
	text-decoration: underline;
	font-weight: Bold;
   
    }

.buttonwarning
{
	font-family: Arial, Helvetica, sans-serif;
	background-color: #4F81BD/*336699*/;
	color: #66FFFF;        
    font-weight: Bold;
    
    
}


.buttonfordelete
{
	font-family: Arial, Helvetica, sans-serif;
	/*background-color: #FFFFFF;*/
	background-color:transparent;
	color: #4F81BD/*336699*/;
	border-style: none;
	font-size: 10pt;
	

}

.loginDiv
{
	/*this floats at the top of the page for login/register */
	/*float:left;
	vertical-align: middle;
	position: relative;*/
	font-size: 10pt;
	margin-top: 30px;
	top: 0px;
	left: 0px;
}
.frontPageGraphicDiv
{
	/* for the "headline" story/links. Large picture on front page */
	margin-right: auto;
	margin-left: auto;
}
.bodyDiv
{
	/* works in tandem with .adDiv and the footer to organize content */
	/*width: 1024px;*/
	overflow: hidden;
	float: none;
    color:#000000;
}
.footer
{
	/* clear:both acts like td span. Works with .bodyDiv and .adDiv to set up a 2-column layout with divs */
	/*padding: 5px;*/
	/*clear: both !important;*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: lighter;
	vertical-align: top;
	text-align: center;
	/*margin-bottom: 10px;*/
	border-top-color: #808080;
	border-top-style: outset;
	border-top-width: 1px;
	/*margin-top: 5px;*/
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.WarningText
{

    font-family: Arial, Helvetica, sans-serif;
    color: #B22222;    
    font-weight: Bold;
    
}
.WarningTextLarge
{
    font-family: Arial, Helvetica, sans-serif;
    color: #B22222;    
    font-weight: Bold;
    font-size: 24px;
    
}

.BulletText
{
    color: #4F81BD/*336699*/;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20pt;
    font-weight: Bold;
}

.BulletTextMain
{
    color: White/*336699*/;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-weight: Bold;
}
.NewsScrolWhite
{
    color: White/*336699*/;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
}
.Headline
{
font-size:x-large; 
font-weight: 500; 
/*color: #4F81BD/*336699;*/
color:Black;
background-color:White;

    
}

.HeadlineHyperlink
{
font-size: x-large; 
font-weight: 700; 
text-decoration: underline;
color: #4F81BD/*336699*/;
    
}

.HeadlineHyperlinkWHITE
{
font-size: x-large; 
font-weight: 700; 
text-decoration: none;
color: White/*336699*/;
    
}

.RedHeadline
{
font-size: x-large; 
font-weight: 700; 
color: #B22222;
    
}

.tablecellindented
{
    margin-left:500;
    text-align:left
}

.hyperlinkbolded
{
    font-weight: Bold;
    text-decoration:underline;
}

.panelborder
{
    /*border-color:#4F81BD/*336699;*/
    border-color:#406899;
    border-style:solid;

}

.HeadlineBLUEBACK
{
    background-color: #4F81BD;
    color:White;
    width: 100%;
}

.buttonREDEVEDIT
{
	font-family: Arial, Helvetica, sans-serif;
	background-color: #C0281E/*336699*/;
	color: White;/*color: #FFFFCC;*/
	width: 200px;
	font-weight:bold;    
	text-align:center;
	
}

.buttonGREENEVEDIT
{
	font-family: Arial, Helvetica, sans-serif;
	background-color: #00FF00/*336699*/;
	color: Black;/*color: #FFFFCC;*/
	border-color:#00B300;
	width: 200px;
	font-weight:bold;
	text-align:center;
	
    
}

 .modal

    {

        position: fixed;

        top: 0;

        left: 0;

        background-color: black;

        z-index: 99;

        /*opacity: 0.8;

        filter: alpha(opacity=80);*/

        -moz-opacity: 0.8;

        min-height: 100%;

        width: 100%;

    }

    .loading

    {

        font-family: Arial;

        font-size: 10pt;

       /* border: 5px solid #67CFF5;*/

        width: 200px;

        height: 200px;

        display: none;

        /*position: fixed;*/


        background-color: #FAFAFA;
        opacity: 0.8;
        

        z-index: 999;
        

position: absolute;

    }
    
    
     
.divWaiting
{

position: absolute;
background-color: #FAFAFA;
z-index: 2147483647 !important;
opacity: 0.8;
overflow: hidden;
text-align: center; top: 0; left: 0;
height: 100%;
width: 100%;
padding-top:20%;

}

/* =============================================
   NAVIGATION (Phase 2)
   ============================================= */
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.nav-logo img {
    height: 60px;
    width: auto;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.nav-links a,
.nav-auth a {
    color: var(--color-white);
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 12pt;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    display: inline-block;
    border: 1px solid transparent;
}

.nav-links a:hover,
.nav-auth a:hover {
    background-color: var(--color-brand-dark);
    border-color: var(--color-white);
}

.nav-auth {
    display: flex;
    gap: 4px;
    align-items: center;
}

.nav-hamburger {
    display: none;
    background: transparent;
    border: 2px solid var(--color-white);
    color: var(--color-white);
    font-size: 20px;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 4px;
}

.nav-search-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px 10px;
    gap: 16px;
    flex-wrap: wrap;
}

.nav-search {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 700px;
}

.search-input {
    width: 100%;
    max-width: 600px;
    padding: 4px 8px;
}

.search-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.nav-user-info {
    color: var(--color-white);
    font-size: 10pt;
}

/* =============================================
   PAGE BODY LAYOUT (Phase 2)
   ============================================= */
.page-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.page-content {
    flex: 1;
    min-width: 0;
}

/* Scrollable wrapper for wide data tables (results, series results).
   max-width: 100vw is viewport-relative so it always clips at screen
   width regardless of how wide the body becomes. */
.table-scroll {
    overflow-x: auto;
    max-width: 100vw;
    width: 100%;
}

/* Center tables and images within the content area */
.page-content table {
    margin-left: auto;
    margin-right: auto;
}

.page-content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.page-sidebar {
    flex-shrink: 0;
    width: 155px;
}

/* =============================================
   HOME PAGE LAYOUT (Phase 3)
   ============================================= */
.frontPageGraphicDiv {
    width: 100%;
}

.home-top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 12px;
    width: 100%;
}

.home-boat-img {
    text-align: center;
}

.home-boat-img img {
    max-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
}


.home-panel {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.home-bottom {
    width: 100%;
}

.home-crew-link {
    margin: 0 0 8px 0;
    font-size: 10pt;
}

.home-panels {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
}

.home-panels .home-panel {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}


/* =============================================
   RESPONSIVE BREAKPOINTS
   ============================================= */

/* Nav collapses to hamburger at 900px */
@media (max-width: 900px) {
    .nav-hamburger {
        display: block;
    }

    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        padding: 4px 0;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links a,
    .nav-auth a {
        width: 100%;
        padding: 10px 14px;
        text-align: left;
        display: block;
    }

    .nav-auth {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0;
    }
}

/* Tablet: 768px and below */
@media (max-width: 768px) {
    body {
        font-size: 11pt;
    }

    .txtBoxDiv {
        width: 100%;
    }

    .adDiv {
        display: none;
    }

    .contentDiv {
        padding: 8px;
    }

    /* Body layout */
    .page-body {
        flex-direction: column;
        padding: 6px;
    }

    .page-sidebar {
        display: none;
    }

    .search-input {
        max-width: 100%;
    }

    .search-buttons .button {
        font-size: 9pt;
    }

    /* Home page */
    .home-top {
        flex-direction: column;
    }

    .home-boat-img {
        width: 100%;
    }

    .home-boat-img img {
        max-width: 100%;
    }

    .home-panels {
        flex-direction: column;
    }

    .home-panels .home-panel {
        width: 100%;
    }
}

/* Mobile: 480px and below */
@media (max-width: 480px) {
    body {
        font-size: 10pt;
    }

    .buttonREDEVEDIT,
    .buttonGREENEVEDIT {
        width: 100%;
    }
}