/* ============================
   SECTION 1: Normalize & Base
   ============================ */

@import url(https://fonts.googleapis.com/css?family=Lobster);

.lobster
{
    font-family: 'Lobster', cursive;
}

html,
body,
form
{
    margin: 0;
    padding: 0;
}

/* ============================
   SECTION 2: ADA Accessibility
   ============================ */

/* Screen reader only - visually hidden but accessible */
.sr-only
{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip navigation link - hidden until focused */
.skip-link
{
    position: absolute;
    top: -100%;
    left: 0;
    background: #EA580C;
    color: #fff;
    padding: 12px 20px;
    z-index: 100000;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 8px 0;
    transform: translateY(-100%);
    transition: transform 0.2s ease-in-out;
}

    .skip-link:focus
    {
        top: 0;
        transform: translateY(0);
        outline: 3px solid #fff;
        outline-offset: 2px;
    }

/* Enhanced focus states for accessibility */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus
{
    outline: 1px solid #EA580C;
    outline-offset: 1px;
}

/* Remove outline for mouse users, keep for keyboard */
:focus:not(:focus-visible)
{
    outline: none;
}

:focus-visible
{
    outline: 1px solid #EA580C;
    outline-offset: 1px;
}

/* Reduced motion preference - ADA/WCAG compliance */
@media (prefers-reduced-motion: reduce)
{
    *,
    *::before,
    *::after
    {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================
   SECTION 3: Typography & Body
   ============================ */

body
{
    font: normal 16px "Segoe UI", Arial, sans-serif;
    color: #555555;
    background-color: lightgray;
}

@media only screen and (min-width: 481px) and (max-width: 720px)
{
    body
    {
        font-size: 18px;
    }
}

@media only screen and (max-width: 480px)
{
    body
    {
        font-size: 20px;
    }
}

a
{
    background: transparent;
}

img
{
    border: 0;
}

button,
input
{
    cursor: pointer;
}

hr
{
    border-width: 1px 0 0 0;
    border-color: #767676;
    border-style: solid;
}

h1, h2, h3, h4, h5, h6
{
    line-height: normal;
}

h1, h2, h3
{
    font-weight: normal;
    margin: .5em 0;
}

h4, h5, h6
{
    font-weight: bold;
}

h1
{
    font-size: 2.25em;
}

h2
{
    font-size: 1.875em;
}

h3
{
    font-size: 1.5em;
}

h4
{
    font-size: 1.125em;
}

h5
{
    font-size: 1em;
}

h6
{
    font-size: .875em;
}

/* ============================
   SECTION 4: Layout & Template
   ============================ */

#wrapper .t-container-fluid
{
    max-width: 100%;
}

#wrapper .header
{
    background-image: url(/Images/FadedFlag111.png), url(/Images/TitleBarGradient.png);
    background-size: 799px 100%, 100% 100%;
    background-repeat: no-repeat, repeat;
    background-position: right, left;
}

    #wrapper .header .RadMenu
    {
        float: none;
    }

#wrapper .logo
{
    margin: 10px 0;
    display: inline-block;
}

    #wrapper .logo img
    {
        max-width: 100%;
    }

#wrapper .footer
{
    width: 100%;
    padding: 15px 15px;
    line-height: 30px;
}

/* ============================
   SECTION 5: Jumbotron Styles
   ============================ */

.jumbotron
{
    border-radius: 10px;
}

#wrapper .jumbotron
{
    background-color: #e9eaea;
}

    #wrapper .jumbotron .RadButton
    {
        float: right;
        margin-top: .667em;
        font-size: .5em;
    }

#wrapper .jumbotronGray
{
    background-color: gray;
    color: white;
    border-radius: 10px;
}

#wrapper .jumbotronCream
{
    background-color: #F8F2E8;
    border-radius: 10px;
}

#wrapper .jumbotronGainsboro
{
    background-color: gainsboro;
    border-radius: 10px;
}

/* ============================
   SECTION 6: Utility Classes
   ============================ */

.tdAlignTop
{
    vertical-align: top;
}

.tdCenter
{
    text-align: center;
}

.Pricing
{
    text-align: center;
    background-color: #E5802D;
    color: white;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
}

.innerAWDiv
{
    background-color: antiquewhite;
    color: #808080;
    text-align: left;
    padding: 10px;
    font-size: .8em;
    min-height: 85px;
    border-radius: 10px;
}

.CheckBox .rbPrimaryIcon
{
    top: 5px !important;
}

.divRequired
{
    display: inline !important;
    color: darkred !important;
    padding-left: 5px !important;
}

.divRequired2
{
    display: inline !important;
    color: darkred !important;
    padding-left: 2px !important;
}

.wwva
{
    font-size: 2rem;
    font-size: 35px;
    text-shadow: 2px 2px #e74c3a;
    font-family: 'Lobster', cursive;
    color: black;
    cursor: pointer;
}

/* ============================
   SECTION 7: UI Components
   ============================ */

.NoteCommentButton
{
    cursor: pointer;
    height: 20px;
    width: 20px;
}

.Collapse
{
    background: url('/Images/RotatorButtons.gif') 0px 0px;
}

    .Collapse:active
    {
        background: url('/Images/RotatorButtons.gif') 20px 0px;
    }

.Expand
{
    background: url('/Images/RotatorButtons.gif') 0px 40px;
}

    .Expand:active
    {
        background: url('/Images/RotatorButtons.gif') 20px 40px;
    }

.ImageLayout
{
}

.CornerBackground
{
    background-image: url("/Images/FadedFlag75.png");
    background-repeat: no-repeat;
    background-position: right;
}

.rwWindowContent
{
    background-color: lightgray !important;
}

/* ============================
   SECTION 8: Grid & Data
   ============================ */

.RadGrid .rgHoveredRow
{
    cursor: pointer !important;
    text-decoration: underline !important;
}

.FeedbackFrame
{
    width: 600px;
    border-radius: 25px;
    background-color: white;
    padding: 25px;
    margin: auto;
}

.DivLock
{
    position: absolute;
    background-color: white;
    z-index: 100;
    filter: alpha(opacity=10);
    -moz-opacity: 0.10;
    -khtml-opacity: 0.10;
    opacity: 0.10;
}
