﻿body
{
    margin: 0;
    padding: 0;
    font-family: Arial, Verdana, sans-serif;
    color:#666;
    font-size:14px;
}

/* Ajax Loading Overlay */
#ajaxProgressOuter {
    border: 0;
    padding: 0;
    margin: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #444444;
    opacity: .65;
    filter: alpha(opacity=65);
    z-index: 10001;
}

#ajaxProgressInner {
    padding: 0;
    background: #ffffff url(images/processing.gif) no-repeat 50%;
    position: absolute;
    left: 48%;
    top: 25%;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    border: solid 2px #444444;
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 10002;
}

/* Content Styles */
h1
{
    font-size: 1.5em;
    margin: 0 0 .6em 0;
    color: #00477f;
}

h2
{
    font-size:1em;
    margin: 0;
    font-weight:bold;
}

table
{
    border-collapse: collapse;
}

td, th
{
    padding: 0;
    vertical-align: top;
}

/* Link Styles */

a.LoudLink
{
    color:#ee2e24;
}

a.QuietLink
{
    color:#6790b0;
}

/******************************* List Styles **************************************/
table.entityList,
table.entityList2
{
    width:100%;
    margin: 10px 0;
    border-bottom: 4px solid #6790b0;
}

table.entityList2
{
    border:none;
}

    table.entityList tr
    {
        border-left: 4px solid #6790b0;
        border-right: 4px solid #6790b0;

    }

    table.entityList tr:first-child
    {
        
        border-left: 4px solid #FFF;
        border-right: 4px solid #FFF;
    }

    table.entityList th
    {
        border-bottom: 4px solid #6790b0;
    }

    table.entityList th.sortdesc
    {
        text-decoration:underline;
    }

    table.entityList th.sortasc
    {
        text-decoration:overline;
    }

    table.entityList th a
    {
        text-decoration:none;
        font-size:.8em;
        color:#00467f;
    }

    table.entityList td,
    table.entityList2 td
    {
        padding:5px 0;
        text-align:center;
        vertical-align:middle;
    }

        table.entityList td:last-child,
        table.entityList2 td:last-child
        {
            text-align:right;
            padding-right:5px;
        }

    table.entityList tr:nth-child(odd) td,
    table.entityList2 tr:nth-child(odd) td
    {
        background:#f2f2f2;
    }


/****************************** Form Styles **************************************/

table.inputForm > tbody > tr > td
{
    padding: .5em 0;
    vertical-align: middle;
}

table.inputForm.smallPadding > tbody > tr > td
{
    padding: 2px 0;
}

table.inputForm > tbody > tr > th
{
    padding: .5em;
    text-align: right;
    vertical-align: middle;
    color:#000;
}

    table.inputForm > tbody > tr > th[scope=col]
    {
        text-align:center;
        vertical-align:bottom;
    }

    table.inputForm > tbody > tr > th:first-child
    {
        padding: .5em .5em .5em 0;
    }

input[type="text"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea
{
    font-size: 1.3em;
    height: 28px;
    margin: 0;
    border: 1px solid #000;
    padding-left: 3px;
}

textarea
{
    height:auto;
    font-family: Arial, Verdana, sans-serif;
}

input[readonly]
{
    border: 2px solid #00467f;
    background:#EEE;
}

input[disabled]
{
    background:#DDD;
}

input[type="date"]{

    font-family: Arial, Verdana, sans-serif;
}

    input[type="text"].error,
    input[type="password"].error,
    input[type="tel"].error,
    input[type="number"].error,
    input[type="date"].error,
    textarea.error,
    select.error
    {
        border:1px solid #FF0000;
        background: #FFDDDD;
    }
    input[readonly].error
    {
        border-width:2px;
    }
    
    p.error
    {
        color: #FF0000;
        font-weight:bold;
        position: absolute;
        margin: 0;
        right: 15px;
        bottom: 2px;
    }


.instructionalText
{
    color:#888;
}

.Large
{
    width: 232px;
}

.Medium
{
    width: 172px;
}

.Small
{
    width: 150px;
}

.XSmall
{
    width: 75px;
}

select
{
    font-size: 1.3em;
    height: 32px;
    border: 1px solid #000;
    margin:0;
}

    select[multiple]
    {
        font-size: 1em;
        height: 8em;
    }

.fieldNote
{
    display: block;
    font-size: .6em;
    line-height: 1.4em;
    font-weight: normal;
}

.currencySpan
{
    position:absolute; 
    margin-left:4px; 
    margin-top:5px; 
    z-index:3;
    color:#000;
    font-size:1.3em;
}

    .currencySpan:before
    {
        content:"$";
    }

.currencySpan + input
{
    text-indent:11px;
    z-index:2;
}

/* Radiobutton customization */
input[type="radio"]
{
    display: none;
}

.radioButtonWrapper
{
    width: 28px;
    height: 28px;
    position: relative;
}

.editColumn
{
    position:relative;
}

    .editColumn .radioButtonWrapper {
        margin: 0 auto;
    }

.radioButtonWrapper label {
    cursor: pointer;
    position: absolute;
    width: 25px;
    height: 25px;
    left: 0px;
    top: 0px;
    background: #FFF;
    border: 1px solid #000;
    border-radius: 13px;
}

    /*.checkUnchecked,
    .checkChecked
    {
        top:6px;
        left:6px;
    }*/

    /*.checkChecked span
    {
        display:block;
    }*/
    .radioButtonWrapper label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        content: '';
        position: absolute;
        width: 21px;
        height: 21px;
        background: #648fb1;
        top: 2px;
        left: 2px;
        border-radius:12px;
    }

    .radioButtonWrapper label:hover::after,
    .radioButtonWrapper input[type=radio][disabled=disabled]:checked + label:after,
    .radioButtonWrapper input[type=radio][disabled=disabled]:checked + label:hover::after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0.0;
    }

.radioButtonWrapper input[type=radio]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

    /* Disabled state for checkbox */
.radioButtonWrapper input[type=radio][disabled=disabled] + label {
    background: #f4f4f4;
    border: 1px solid #BBB;
    cursor: default;
}

    .radioButtonWrapper input[type=radio][disabled=disabled] + label:hover::after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
    }

/* Checkbox customization */
input[type="checkbox"] {
    display: none;
}

.checkBoxWrapper {
    width: 28px;
    height: 28px;
    position: relative;
}

.editColumn {
    position: relative;
}

    .editColumn .checkBoxWrapper {
        margin: 0 auto;
    }

.checkBoxWrapper label,
.checkUnchecked,
.checkChecked {
    cursor: pointer;
    position: absolute;
    width: 25px;
    height: 25px;
    left: 0px;
    top: 0px;
    background: #FFF;
    border: 1px solid #000;
}

.checkUnchecked,
.checkChecked {
    top: 6px;
    left: 6px;
}

    .checkChecked span {
        display: block;
    }

    .checkBoxWrapper label:after,
    .checkChecked span {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=1);
        opacity: 0;
        content: '';
        position: absolute;
        width: 21px;
        height: 21px;
        background: #648fb1;
        top: 2px;
        left: 2px;
    }

.checkBoxWrapper label:hover::after,
.checkBoxWrapper input[type=checkbox][disabled=disabled]:checked + label:after,
.checkBoxWrapper input[type=checkbox][disabled=disabled]:checked + label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0.0;
}

.checkBoxWrapper input[type=checkbox]:checked + label:after,
.checkChecked span {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

/* Disabled state for checkbox */
.checkBoxWrapper input[type=checkbox][disabled=disabled] + label {
    background: #f4f4f4;
    border: 1px solid #BBB;
    cursor: default;
}

    .checkBoxWrapper input[type=checkbox][disabled=disabled] + label:hover::after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
    }

/* Header Styles */
#rpHeader
{
    height: 75px;
    background: #00467f url(images/logo.jpg) no-repeat top left;
    position:relative;
}

#HeaderEmployeeInfo
{
    position:absolute;
    bottom:13px;
    right:130px;
    color:#FFF;
}

#rpHeader .button,
#rpHeader .loginButton,
#rpHeader .questionsButton
{
    display: -moz-inline-box;
    display: inline-block;
    padding: 3px 0;
    background: #00467f;
    color: #FFF;
    text-transform: uppercase;
    text-decoration: none;
    font-size: .8em;
    vertical-align: middle;
    text-align:center;
    width:110px;
    border:1px solid #FFF;
}

    #rpHeader .button:hover,
    #rpHeader .loginButton:hover,
    #rpHeader .questionsButton:hover
    {
        background:#11578f;
    }

#rpHeader .loginButton
{
    position:absolute;
    bottom:10px;
    right:10px;
}

#rpHeader .questionsButton
{
    position:absolute;
    top:10px;
    right:10px;
}

/* Body Content styles */
#rpBody
{
    padding: 20px 20px 70px;
    position: relative;
}

#rpNavigation,
#rpReportLinks
{
    width: 100%;
}

    #rpNavigation td,
    #rpReportLinks td
    {
        padding: 10px;
        text-align: center;
    }

        #rpNavigation td a
        {
            display: block;
            width: 60%;
            margin: 0 auto;
            padding: 10px;
            background: #ee2e24;
            color: #FFF;
            text-transform: uppercase;
            text-decoration: none;
            font-weight: bold;
            font-size: 1em;
        }

        #rpNavigation td a:hover
        {
            background: #dd1d13;
        }

        #rpReportLinks td a
        {
            display: block;
            width: 90%;
            margin: 0 auto;
            padding: 10px;
            background: #FFF;
            color: #648fb1;
            border: 1px solid #648fb1;
            text-transform: uppercase;
            text-decoration: none;
            font-weight: bold;
            font-size: 1em;
        }

        #rpReportLinks td a:hover,
        #rpReportLinks td a.current
        {
            color:#FFF;
            background: #648fb1;
        }


/* Buttons */
.button1,
.saveAndContinueButton,
.finishedEditingButton,
.printReportButton {
    display: -moz-inline-box;
    display: inline-block;
    padding: 10px 20px;
    background: #ee2e24;
    color: #FFF;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    vertical-align: middle;
}

    .button1:hover,
    .saveAndContinueButton:hover,
    .printReportButton:hover {
        background: #dd1d13;
    }

.button2
{
    display: -moz-inline-box; 
    display: inline-block;
    padding: 7px 10px 6px;
    background: #648fb1;
    color: #FFF;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    line-height: 19px;
}

    .button2:hover
    {
        background: #537ea0;
    }

.button3,
.saveAndGoBackButton
{
    display: -moz-inline-box;
    display: inline-block;
    padding: 10px 20px;
    background: #999;
    color: #FFF;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    vertical-align: middle;
}
    .button3:hover,
    .saveAndGoBackButton:hover
    {
        background: #888;
    }

.button4
{
    display: -moz-inline-box; 
    display: inline-block;
    padding: 3px 8px 2px;
    background: #FFF;
    color: #00467f;
    border:1px solid #00467f;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    font-size: .75em;
    line-height: 18px;
}

    .button4:hover
    {
        background: #e5f4ff;
    }


    .button1.error,
    .button2.error,
    .button3.error,
    .button4.error
    {
        border:1px solid #FF0000;
        background: #FFDDDD;
    }

.fullWidthButton
{
    display:block;
    padding-left:0;
    padding-right:0;
    text-align:center;
}

.selectUserButton
{
    display: -moz-inline-box; 
    display: inline-block;
    padding: 9px 0px 8px;
    background: #999;
    color: #FFF;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    line-height: 15px;
    margin: 4px 0;
    width: 42px;
}

#ReportButtonContainer
{
    position:fixed; 
    bottom:0; 
    width:100%; 
    left:0; 
    right:0; 
    height:56px; 
    background:#FFF;
    z-index:1111;
    text-align:center;
}

.saveAndContinueButton
{
    position:absolute;
    right:10px;
    bottom:10px;
}

.saveAndGoBackButton
{
    position:absolute;
    left:10px;
    bottom:10px;
}

.finishedEditingButton
{
    background:#00467f;
    position:absolute;
    left:50%;
    bottom:10px;
    margin-left:-82px;
}

.finishedEditingButton:hover {
    background: #11578f;
}

.printReportButton {
    position: absolute;
    right: 200px;
    bottom: 10px;
}

.downArrowButton,
.upArrowButton
{
    display: -moz-inline-box; 
    display: inline-block;
    height:32px;
    width:32px; 
}

.downArrowButton 
{
    background: #648fb1 url(images/down-arrow.png) no-repeat center center;
}

.downArrowButton:hover
{
    background: #537ea0 url(images/down-arrow.png) no-repeat center center;
}

.upArrowButton 
{
    background: #648fb1 url(images/up-arrow.png) no-repeat center center;
}

.upArrowButton:hover
{
    background: #537ea0 url(images/up-arrow.png) no-repeat center center;
}


.section
{
    border: 4px solid #6790b0;
    padding: 10px;
    margin-top: 10px;
}

/* Accordion Styles */

.accordion h3
{
    border: 4px solid #6790b0;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 0;
    outline: 0;
}

    .accordion h3.active
    {
        border-bottom: 0;
        margin-bottom: 0;
        outline: 0;
    }

.accordion .section
{
    border-top: 0;
    margin-top: 0;
}

/*------------------- Daily Report Styles ------------------------*/

#LocationInfo
{
    margin: .5em 0 0 0; 
    font-size: .8em;
}

#LocationNotes
{
    margin-top: .5em; 
    font-size: .8em;
}

.ticketSpitterSection
{
    float:left;
    border: 1px solid #7f7f7f;
    padding: 0;
    margin: 10px 10px 0 0;
    position:relative;
}

 .ticketSpitterSection h2
{
     background:#7f7f7f;
     color:#FFF;
     font-weight:normal;
     font-size:1em;
     margin:0;
     padding:5px 6px 6px 6px;
}

    .ticketSpitterSection table.inputForm
    {
        margin:1em;
    }

    .ticketSpitterSection:nth-child(3n+1)
    {
        clear:both;
    }

.removeTicketSource
{
    position:absolute;
    top:3px;
    right:3px;
    color:#FFF;
    text-decoration:none;
    font-size:1.5em;
}

.removeValidation,
.removeCashCheck,
.removeDeposit,
.removeCreditCard,
.removeSettlement,
.removePermit,
.removeVoidedPermit
{
    color:#537ea0;
    text-decoration:none;
    font-size:2em;
}

.removePermit
{
    font-size:3em;
}

.SplitTicketsTable
{
    width:250px;
}

table.SplitTicketsTable > tbody > tr > td,
table.SplitTicketsTable > tbody > tr > th,
table.CashCheckTicketsTable > tbody > tr > th
{
    text-align:center;
}

.depositFileUpload,
.settlementFileUpload,
.monthlyDepositFileUpload,
.monthlySettlementFileUpload
{
    position:absolute;
    opacity: 0;
    width:155px;
    height:36px;
    z-index:3;
}

.monthlyDepositFileUpload,
.monthlySettlementFileUpload{
    right:0;
}

.monthlyDepositFileUpload
{
    width:167px;
}

.monthlySettlementFileUpload
{
    width:197px;
}

.depositFileButton,
.settlementFileButton,
.monthlyDepositFileButton,
.monthlySettlementFileButton
{
    width:157px;
    position:absolute;
    padding:0;
    text-align:center;
    z-index:2;
    height:34px;
    line-height:32px;
    font-size:.8em;
    border:0;
}

.depositFileButton.error,
.settlementFileButton.error
{
    width:155px;
    height:32px;
    border:1px solid #FF0000;
    background: #FFCCCC;
}

.monthlyDepositFileButton
{
    width:167px;
    height:32px;
    line-height:32px;
    border:1px solid #000;
    right:0;
}

.monthlySettlementFileButton
{
    width:197px;
    height:32px;
    line-height:32px;
    border:1px solid #000;
    right:0;
}

.monthlyDepositFileButton.error,
.monthlySettlementFileButton.error
{
    border:1px solid #FF0000;
    background: #FFCCCC;
}

/* ---------------- Monthly Report Styles -----------------*/

/* Step 2 */
#PermitsTable tr:nth-child(4n-2),
#PermitsTable tr:nth-child(4n+3)
{
    background: #f2f2f2;
}

#PermitsTable tr:nth-child(2n+2) td
{
    padding:15px 3px 3px 3px;
    text-align:center;
}

#PaymentDiscrepancyTable > tr:nth-child(2n+2) td
{
    padding:5px 3px 3px 3px;
    text-align:center;
}

#PermitsTable tr:nth-child(2n+3) td,
#PermitsTable tr:nth-child(2n+3) th
{
    padding:3px 3px 15px 3px;
}

#PaymentDiscrepancyTable > tr:nth-child(2n+3) td,
#PaymentDiscrepancyTable > tr:nth-child(2n+3) th
{
    padding:3px 3px 5px 3px;
}

#PermitsTable tr td[rowspan],
#PaymentDiscrepancyTable > tr td[rowspan]
{
    vertical-align:middle;
    padding:0 5px 0 3px;
}

#PermitTotalsTable th[scope=col]
{
    font-size:.8em;
    padding-bottom:2px;
}

#PermitTotalsTable td
{
    padding: 0 3px;
}

#PaymentDiscrepancyReasonTable td
{
    text-align:left;
}

/* Step 3 */

#VoidedPermitsTable tr:nth-child(2n+2)
{
    background: #f2f2f2;
}

#VoidedPermitsTable tr td:last-child
{
    padding-right:5px;
}

/* Report Review Page Styles */

.dailyReportForm,
.monthlyReportForm
{
    border:4px solid #6790b0;
    width:100%;
    margin-top:10px;
}

    .dailyReportForm th,
    .dailyReportForm td,
    .monthlyReportForm th,
    .monthlyReportForm td
    {
        border:1px solid #6790b0;
        padding:5px;
    }

        .dailyReportForm th[scope=row],
        .monthlyReportForm th[scope=row]
        {
            text-align:right;
            white-space:nowrap;
        }

        .dailyReportForm th[scope=col],
        .dailyReportForm th.shaded,
        .monthlyReportForm th[scope=col],
        .monthlyReportForm th.shaded
        {
            background:#9fbed7;
            color:#FFF;
        }

        .dailyReportForm th[scope=col],
        .monthlyReportForm th[scope=col]
        {
            vertical-align:bottom;
        }

        .dailyReportForm th[colspan][scope=col],
        .monthlyReportForm th[colspan][scope=col]
        {
            background:#6790b0;
        }

    .monthlyReportForm tr.even
    {
        background: #f2f2f2;
    }

/*********** Custom Multiselect Styles ************/

.multiSelectBox
{
    overflow-x: hidden; 
    overflow-y:scroll; 
    font-size:1.1em; 
    height: 10em; 
    width:232px; 
    border:1px solid #000; 
    color:#000; 
    text-align:left;
    margin: 0 auto;
}

.multiSelectBox .listItem
{
    cursor:pointer;
    white-space:nowrap;
    padding:.2em 0;
}

.multiSelectBox .selected 
{
    background:#00467f;
    color:#FFF;
}
