/* 
CSS ID selector:    #id
CSS CLASS SELECTOR: .className
*/

html
{
    /* This is effectivly 10px */
    font-size: 65.5;
}


/*=======================================================================
BODY and MAIN CONTAINER THAT HOLDS EVERYTHING
=======================================================================*/
body
{
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
    color: #282828;
    margin: 0rem;
    display:flex;
    justify-content: center;
}


.fullPageContainer
{
    width: 64rem; /*1024px*/
    max-width: 64rem;
    width: 95%; /*Setting width:95% makes sure content never gets pressed up against the sides of the window, always ensure there is a bit of space */
    background-color: #202020;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin-top: .3rem;
}


/*=======================================================================
CSS FOR TOP HEADER AREA
=======================================================================*/
.pageTopHeaderText
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3.0rem;
    display:flex;
    justify-content: center;
    background-color: #333;    
    color: white;
    padding-bottom: .3rem;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}


.pageTopHeaderYellowBar
{
    display:flex;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ffd103;
    color: black;
    padding: .3rem;
}

.pageTopHeaderYellowBar#yellowBarLarge
{
    justify-content:center;
    font-size: 2.5rem;
}

.pageTopHeaderYellowBar#yellowBarSmall
{
    font-size: 1.5rem;
    justify-content:center;
}


.pageTopHeaderImageBar
{
    text-align: center; 
    background-color: #202020;
} 

.cvma3PatchLogoLarge
{
    width: 40%;
    padding: .6rem;
}

.cvma3PatchLogoSmall
{
    width:20%;
    padding: .6rem;
}



.pageSection
{
    border: 1px solid #e22028;
    background-color: #3f3f3f;
    color:white; 
    border-radius: .6rem;
}

.pageSectionHeader
{
    font-family: Arial, Helvetica, sans-serif;
    display:flex;
    font-size: 2.0rem;
    justify-content: center;
    background-color: #575757;
    /*order-bottom: 1px solid #e22028; */
    padding-bottom: .3rem;
    padding-top: .6rem;
    padding-right: .6rem;
    border-top-left-radius: .6rem;
    border-top-right-radius: .6rem;
    /*border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;*/
}


.pageSectionHeaderCard
{
    color:#ffd103;
    background-color: #333;
    text-align: center;
    padding-top: .6rem;
    padding-bottom: .6rem;
    border-top-left-radius: .6rem;
    border-top-right-radius: .6rem;
}

.pageSectionBody
{
    padding: .6rem;
    border-radius: .6rem;
}



/*Create a little space on bullet items*/
.pageSectionBody li
{
    padding: .6rem;
}

.pageSectionBody ul
{
    padding-inline-start: 2.5rem;
}


.pageSectionTable
{
    padding: .6rem;
    width: 100%;
}

.gridContainerX3
{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1.25rem;
    row-gap: 1.25rem;
}


.gridContainerX2
{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
    row-gap: 1.25rem;
}

.gridContainerX1
{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1.25rem;
}



/*=======================================================================
TABLE MANIPULATION AND STYLING
=======================================================================*/

.pageSectionTable th
{
    text-align: left;
    padding: .3rem;
    color:#ffd103
}

.pageSectionTable td
{
    padding: .3rem;
    text-align: left;
}


#meetGreetDetailsTable td
{
    padding: .3rem;
}


/*=======================================================================
RANDOM STUFF
=======================================================================*/

.whitelink, .whitelink:visited, .whitelink:hover, .whitelink:active
{
    color: white;
}

/*Superset for circle r*/
.sup 
{
    font-size: 70%;
    vertical-align: super;
    padding-right: .6rem;
}








/*=======================================================================
IMAGE STYLING
=======================================================================*/
#fbLogo
{
    width: 1.875rem;
    margin: 0;
    padding-top: .3rem;
    padding-left: .6rem;
    padding-right: .6rem;
}

#ratchetLogo, #rustyBucketLogo
{
    width: 8.0rem; 
    border-radius: .3rem;
}

#rustyBucketLogo
{
    float: left;
    margin-right: .6rem;
}

#rustyBucketPano
{
    width: 44.375rem;
    border-radius: .6rem;
}

.rustyImages
{
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;  /* Centers vertically */
}


#campImage, #rideMapImage
{
    padding-top: .3rem;
    margin: 0rem;
    width: 100%;
    border-radius: .6rem;
}

.sizzleReel
{
     max-width: 100%;
     height: auto;
     border-radius: .6rem;
}

/*=======================================================================
This was supposed to turn off caret blinking by making the caret 
transpart, but it did not work in chrome. An alterative is to hit 
the F7 key in Chrome to turn off caret browsing
=======================================================================*/
input
{
    caret-color: transparent;
}




/*=======================================================================
FOOTER STYLING
=======================================================================*/
footer
{
    text-align: right;
    vertical-align: center;
    color: #ffd103;
    padding-bottom: 1.25rem;

}

footer a
{
    color: #ffd103;
}








/* ===========================================================================================================
                OLD CSS NOT BEING USED ANYMORE AFTER CSS REFACTORING
=========================================================================================================== */

/*
.pageTopHeader
{
    border-top: 2px solid #e22028;;
    border-left: 1px solid #e22028;
    border-right: 1px solid #e22028;
    border-bottom: 1px solid #e22028;
    border-radius: 10px;
}




.pageSectionHeader img
{
    padding-top: 10px;
    width: 150px;
}
*/

/*
.pageSectionTableHeader
{
    padding: 5px;
    color:#ffd103;
    background-color: #333;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
*/

/*
.pageSubTitleRallyX
{
    font-family: Arial, Helvetica, sans-serif;
    display:flex;
    font-size: 2.5rem;
    justify-content: center;
    background-color: #ffd103;
    color:black;
    border-bottom: 1px solid #e22028;
    border-left: 2px solid #e22028;
    border-right: 2px solid #e22028;
    padding-bottom: 5px;
    padding-top: 10px;
    padding-right: 10px;
}
*/

/*
.pageSectionHeader h1
{
    margin: 0px;
    font-weight:lighter;
}
*/


/*
.regionXHomePageBanner#xBannerTop
{
    justify-content: left;
    border-top: 1px solid #e22028;
}
.regionXHomePageBanner#xBannerMid
{
    justify-content: center;
 }
.regionXHomePageBanner#xBannerBottom
{
    justify-content: right;
    border-bottom: 1px solid #e22028;
}
*/

/*
#primaryYellowDiv
{
    background-color: #ffd103;
}

.redFont
{
    color:#e22028;
}

#primaryRedDiv
{
    background-color: #e22028;
}

#surfaceA1Div
{
    background-color: #121212;
}

#surfaceA2Div
{
    background-color: #282828;
}


#surfaceA3Div
{
    background-color:#3f3f3f;
}



#surfaceA4Div
{
    background-color: #575757;
}



#surfaceA5Div
{
    background-color: #717171;
}


#surfaceA6Div
{
    background-color: #8b8b8b;
}

#pageDarkWhite
{
    background-color: hsl(0, 0%, 75%);
}
*/