﻿*
{
    margin: 0;
    padding: 0;
}

body
{
    font-family: sofia-pro, sans-serif;
    color: #1a1a1a;
    background-color: #ffffff;
    font-size: 16px;
    line-height: 1.3rem;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

.print
{
    position: absolute;
    right: 0px;
    top: 20px;
    width: 80px;
}

    .print img
    {
        margin-right: 10px;
        vertical-align: middle;
    }

    .print a
    {
        color: #1a1a1a;
        font-weight: bold;
        font-size: 12px;
    }

a
{
    color: #1a1a1a;
}

.over
{
    text-decoration: none;
    font-size: 16px;
    vertical-align: middle;
    margin-right: 0;
}

.under
{
    text-decoration: none;
    font-size: 16px;
    vertical-align: middle;
    margin-right: 0;
}



p
{
    margin: 0 0 20px 0;
    color: #1a1a1a;
}

select
{
    color: #535353;
}

h1
{
    font-size: 18px;
    font-family: Verdana;
    line-height: 20px;
    margin-bottom: 20px;
    color: #1a1a1a;
}

h2
{
    font-size: 16px;
    font-family: Verdana;
    line-height: 20px;
    margin-bottom: 10px;
    color: #858585;
    font-weight: bold;
}

h3
{
    font-size: 12px;
    font-family: Verdana;
}

    h3.complete a
    {
        color: #1a1a1a;
    }

    h3.active a
    {
        color: #535353;
    }

    h3.future a
    {
        color: #1a1a1a;
    }

/* ERROR/MESSAGE HANDLING */

.messagesToUser
{
    min-height: 42px;
    position: relative;
    z-index: 200;
    /*float:left;
    width:100%;*/
    padding-left: 60px;
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    background: url(/Images/error.png) no-repeat left center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #999;
}

.MessageTable
{
    padding-top: 13px;
}

.messageCell
{
    color: red;
}

.ErrorTable
{
    padding-top: 13px;
}

.errorCell
{
    color: red;
}

/** FORMS **/

.form
{
    position: relative;
}

    .form p
    {
        clear: left;
        margin: 0;
        padding: 2px 0 2px 0;
        padding-left: 100px; /*width of left column containing the label elements*/
        height: 1%;
    }

    .form label
    {
        float: left;
        margin-left: -100px; /*width of left column*/
        width: 100px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
        font-weight: bold;
    }

    .form input[type="text"]
    { /*width of text boxes. IE6 does not understand this attribute*/
        background-color: #FFF;
        width: 180px;
        height: 21px;
        border: 1px solid #595959;
        /*text-transform:uppercase;*/
    }

    .form textarea
    {
        background-color: #FFF;
        width: 367px;
        border: 1px solid #595959;
        height: 131px;
        padding: 5px;
        /*text-transform:uppercase;*/
    }

    .form * html .threepxfix
    {
        margin-left: 3px;
    }

    .form .actions
    {
        text-align: right;
        margin: 0;
        margin-right: 8px;
        padding: 0;
    }

@media screen and (-webkit-min-device-pixel-ratio:0)
{
    .form textbox
    {
        padding: 0 -10px 0 10px;
        margin: 0px;
    }
}

#wrapper
{
    width: 691px;
}

/** STEPS **/
#step1
{
    padding: 20px;
    position: relative;
    z-index: 100;
}

    #step1 .personalData
    {
        float: left;
        margin-right: 30px;
        width: 320px;
    }

    #step1 .carData
    {
        float: left;
        width: 300px;
    }


    #step1 .separator
    {
        position: absolute;
        top: 20px;
        left: 345px;
        bottom: 20px;
        width: 1px;
        background-color: #595959;
    }

    #step1 .saveButton
    {
        /*position:absolute;
    right:20px;
    bottom:20px;*/
        margin-top: 20px;
        float: right;
    }

#step2
{
}

#debugInfo
{
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #CCC;
    float: left;
}

#surveyData
{
    width: 651px;
    height: 130px;
    color: #858585;
    padding: 20px;
    position: relative;
}

    #surveyData .personalData
    {
        position: absolute;
        top: 20px;
        left: 20px;
    }

    #surveyData .carData
    {
        position: absolute;
        top: 20px;
        left: 380px;
    }

    #surveyData .alterLink
    {
        position: absolute;
        bottom: 5px;
        right: 20px;
    }

        #surveyData .alterLink a
        {
            color: #a7a7a7;
            font-weight: bold;
        }

#stepsHeader
{
    background: url(Images/stepsHeader.jpg);
    width: 691px;
    height: 33px;
}

    #stepsHeader .step1Header
    {
        background: url(Images/step1Active.png);
        width: 691px;
        height: 33px;
        position: relative;
    }

    #stepsHeader .step2Header
    {
        background: url(Images/step2Active.png);
        width: 691px;
        height: 33px;
        position: relative;
    }

    #stepsHeader .step3Header
    {
        background: url(Images/step3Active.png);
        width: 691px;
        height: 33px;
        position: relative;
    }

    #stepsHeader .step4Header
    {
        background: url(Images/step4Active.png);
        width: 691px;
        height: 33px;
        position: relative;
    }

    #stepsHeader .step5Header
    {
        background: url(Images/step5Active.png);
        width: 691px;
        height: 33px;
        position: relative;
    }

    #stepsHeader .step6Header
    {
        background: url(Images/step6Active.png);
        width: 691px;
        height: 33px;
        position: relative;
    }

    #stepsHeader .step1
    {
        position: absolute;
        left: 30px;
        top: 10px;
    }

    #stepsHeader .step2
    {
        position: absolute;
        left: 145px;
        top: 10px;
    }

    #stepsHeader .step3
    {
        position: absolute;
        left: 255px;
        top: 10px;
    }

    #stepsHeader .step4
    {
        position: absolute;
        left: 365px;
        top: 10px;
    }

    #stepsHeader .step5
    {
        position: absolute;
        left: 475px;
        top: 10px;
    }

    #stepsHeader .step6
    {
        position: absolute;
        left: 585px;
        top: 10px;
    }

#stepsBody
{
    background-color: #f3f3f3;
}

    #stepsBody .note
    {
        font-size: 10px;
        text-transform: none;
        padding-right: 10px;
    }

    #stepsBody td
    {
        height: 39px;
        text-align: center;
        width: 70px;
    }

    #stepsBody .question
    {
        border-bottom: 1px solid #dadada;
    }

    #stepsBody .text
    {
        padding-left: 20px;
        text-align: left;
        width: 441px;
    }

    #stepsBody .dimention
    {
        width: 65px;
        font-size: 11px;
    }

    #stepsBody .extra
    {
        width: 20%;
        text-align: right;
    }

    #stepsBody .header
    {
        line-height: 48px;
        color: #858585;
        font-weight: bold;
        color: #535353;
        background: #f3f3f3 url(Images/tableHeaderTile.png) repeat-x;
    }

        #stepsBody .header td
        {
            height: 48px;
            border: none;
            text-align: center;
        }

        #stepsBody .header h2
        {
            text-transform: uppercase;
            padding: 0;
            color: #535353;
            margin: 0;
            text-align: left;
        }

    #stepsBody .footer
    {
        background: url('Images/stepsFooter.jpg') no-repeat;
        height: 33px;
    }

        #stepsBody .footer td
        {
            height: 33px;
            border: none;
        }

        #stepsBody .footer .cancel
        {
            text-align: left;
            padding-left: 20px;
            float: left;
        }

        #stepsBody .footer .save
        {
            text-align: right;
            padding-right: 20px;
            float: right;
        }

    #stepsBody .chooseImage .input
    {
        height: 39px;
        float: left;
        margin-right: 10px;
    }

    #stepsBody .chooseImage
    {
        height: 39px;
        line-height: 39px;
    }

        #stepsBody .chooseImage .text
        {
            font-size: 12px;
        }

        #stepsBody .chooseImage .button
        {
            float: left;
        }

    #stepsBody .savedImages
    {
        margin: 10px 0 10px 0;
        padding: 0 20px 0 20px;
        font-size: 12px;
    }

        #stepsBody .savedImages td
        {
            text-align: left;
            height: 25px;
        }

    #stepsBody .last
    {
        padding-right: 20px;
        text-align: right;
    }

    #stepsBody .savedImages .last
    {
        text-align: right;
        padding: 0;
    }

    #stepsBody .savedImages a
    {
        color: #535353;
        font-weight: bold;
    }

    #stepsBody .savedImages .separator
    {
        border-top: 1px solid #dadada;
        height: 1px;
    }

#surveyList
{
    color: #1a1a1a;
}

    #surveyList ol
    {
        margin-left: 20px;
    }

.actions
{
    padding-left: 20px;
    height: 35px;
}

#surveyList .actions
{
    margin-bottom: 20px;
    border-bottom: 1px solid #464646;
    padding: 0;
}

.actions a
{
    margin-right: 10px;
    background: url("/Images/bullet.png") no-repeat left;
    padding: 10px 10px 10px 35px;
    text-decoration: none;
    line-height: 35px;
}

#surveyList .separator
{
    background-color: #464646;
    height: 1px;
}

#surveyList .list a
{
    text-decoration: none;
}

#surveyList .list .item td
{
    height: 43px;
}

#surveyList .list .item .name
{
    color: #1a1a1a;
    font-weight: bold;
    font-size: 12px;
}

    #surveyList .list .item .name a
    {
        color: #1a1a1a;
    }

#surveyList .list .item .status
{
    font-weight: bold;
    font-size: 12px;
    width: 150px;
}

#surveyList .list .item .action
{
    width: 100px;
    text-align: right;
}

#amountCheck
{
    padding: 20px;
    position: relative;
    z-index: 100;
    float: left;
}

    #amountCheck .action
    {
        
    }

        #amountCheck .action .under
        {
        }

        #amountCheck .action a.under
        {
            margin-right: 20px;
        }

#notAuth
{
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 25px;
    margin-top: 30px;
}

    #notAuth a
    {
        color: #FFF;
        font-weight: bold;
        text-decoration: underline;
    }

#imageScript
{
    position: relative;
}

    #imageScript li
    {
        padding-left: 20px;
        color: #1a1a1a;
    }

#help
{
    padding-right: 20px;
    position: relative;
}

    #help h2
    {
        color: #1a1a1a;
    }

.surveyorName
{
    font-style: italic;
    color: #999;
    font-size: 10px;
}
