/* CLEAR FIX */
.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

* html .clearfix, *:first-child + html .clearfix {
    zoom: 1;
}

/* MAIN STYLING */
html {
    margin: 0px;
    padding: 0px;
}

body {
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    overflow-y: scroll;
    background: #F5F5F5 url(../../images/registration/register.png);
    font-family: Tahoma, Geneva, Sans-Serif;
}

.bodyWrapper {
    min-width: 1034px;
    margin: 0px auto;
}

.headWrapper {
    margin: 0px;
    padding: 0px 0px 0px 0px;
    background: #F5F5F5;
}

    .headWrapper .head {
        margin: 0px auto;
        width: 945px;
        height: 80px;
    }

        .headWrapper .head .logo {
            float: left;
            text-decoration: none;
            background: url(../../images/logo-small.png) no-repeat;
            width: 300px;
            height: 75px;
            margin: 10px 0px 0px 15px;
        }

    .headWrapper .contactDetails {
        font-size: 11px;
        float: right;
        margin: 17px 0px 0px 0px;
        color: #808080;
    }

        .headWrapper .contactDetails a {
            margin: 0px 0px 0px 15px;
            vertical-align: middle;
        }

        .headWrapper .contactDetails span {
            border-left: solid 1px #D3D3D3;
            margin: 0px 0px 0px 15px;
            vertical-align: middle;
        }

    .headWrapper .roundButtonWrapper {
        margin: 0px auto;
        width: 1024px;
        display: none;
    }

        .headWrapper .roundButtonWrapper .roundButton {
            width: 102px;
            height: 160px;
            margin: 0px 0px 0px 120px;
            float: left;
            background: url(/images/site/roundbuttons/aboutus.png) no-repeat top center;
        }

            .headWrapper .roundButtonWrapper .roundButton h5 {
                text-align: center;
                margin: 115px 0px 0px 0px;
                font-size: 15px;
                font-weight: normal;
                padding: 0px;
                color: #222222;
            }

            .headWrapper .roundButtonWrapper .roundButton:hover {
                cursor: pointer;
                background-position: 0px -203px;
            }

    .headWrapper .banner {
        margin: 0px auto;
        width: 1024px;
        height: 430px;
        background-repeat: no-repeat;
        background-position: 1024px 0px;
    }

        .headWrapper .banner .swapable {
            float: left;
            width: 976px;
            height: 430px;
            background-repeat: no-repeat;
            background-position: 0px 0px;
            background-image: url(/images/site/search.png);
        }

        .headWrapper .banner .sliderArrow {
            margin: 195px 0px 0px 0px;
            height: 37px;
            width: 24px;
            background: url(/images/site/sliderarrow.png) no-repeat 0px 0px;
            visibility: hidden;
        }

        .headWrapper .banner .leftArrow {
            float: left;
        }

            .headWrapper .banner .leftArrow:hover {
                cursor: pointer;
                background-position: -24px 0px;
            }

        .headWrapper .banner .rightArrow {
            float: right;
            background-position: 0px -37px;
        }

            .headWrapper .banner .rightArrow:hover {
                cursor: pointer;
                background-position: -24px -37px;
            }

/* REGISTRATION FORM */
.infoHolder {
    border: solid 1px #E0E0E0;
    border-radius: 5px;
    margin: 30px 20px 40px 20px;
}

    .infoHolder .header {
        background: #F5F5F5;
        border-bottom: solid 1px #E5E5E5;
        padding-bottom: 3px;
    }

        .infoHolder .header h4 {
            float: left;
            margin: 4px 0px 3px 0px;
            padding: 0px;
            width: 700px;
            font-size: 16px;
            color: #3e4095;
        }

        .infoHolder .header h5 {
            color: #777777;
            font-weight: normal;
            font-size: 10px;
            float: left;
            margin: 0px;
            padding: 0px;
        }

        .infoHolder .header img {
            float: left;
            position: relative;
            outline: none;
            padding: 2px;
            border: solid 1px #D0D0D0;
            width: 56px;
            height: 56px;
            margin: -15px 10px 10px 15px;
            border-radius: 6px;
            box-shadow: 0px 2px 3px #D3D3D3;
            background: #FAFAFA;
        }

    .infoHolder .infoContent {
        background: #F5F5F5;
        padding-bottom: 30px;
    }

        .infoHolder .infoContent div {
            margin: 0px;
            padding: 0px;
            background: #F0F0F0;
            height: 50px;
            border-bottom: solid 1px #D9D9D9;
            border-top: solid 1px #FFFFFF;
        }

        .infoHolder .infoContent label {
            vertical-align: middle;
            float: left;
            width: 200px;
            text-align: right;
            margin: 17px 0px 0px 0px;
            font-weight: bold;
            font-size: 12px;
            color: #555555;
            text-shadow: 0px 1px 0px #FFFFFF;
        }
        
        .infoHolder .infoContent span {
            vertical-align: middle;
            width: 250px;
            text-align: left;
            margin: 7.5px 0px 0px 15px;
            font-weight: bold;
            font-size: 12px;
            color: #FF0000;
        }


        .infoHolder .infoContent input, .infoHolder .infoContent select {
            width: 250px;
            float: left;
            border-radius: 3px;
            border: solid 1px #D3D3D3;
            background: #FFFFFF;
            outline: none;
            padding: 8px 5px 8px 5px;
            margin: 8px 0px 0px 10px;
            font-size: 12px;
        }

        .infoHolder .infoContent select {
            width: 612px;
        }
        
        

#divSuggestions {
    display: none;
    width: 600px;
    position: absolute;
    z-index: 100;
    background: #fff;
    outline: none;
    padding: 8px 5px 8px 5px;
    border: solid 1px #D3D3D3;
    margin: -11px 0 0 210px;
    font-size: 11px;
    list-style: none;
    box-shadow: 0px 2px 2px -1px #808080;
}

    #divSuggestions li {
        float: left;
        margin: 2px 12px 2px 0;
        padding: 0;
        text-decoration: underline;
        color: #0094FF;
        cursor: pointer;
    }

.contentWrapper {
    margin: 0px 0px 0px 0px;
    box-shadow: inset 0px 2px 3px #D9D9D9;
    border-top: solid 1px #D0D0D0;
}

    .contentWrapper .content {
        border: solid 1px #D3D3D3;
        box-shadow: inset 0px 1px 6px #D9D9D9;
        border-radius: 5px;
        background: #FAFAFA;
        width: 945px;
        min-height: 100px;
        margin: 20px auto 10px auto;
    }

        .contentWrapper .content .contentUL {
            margin: 30px 0px 30px 0px;
            float: left;
            padding: 0px;
            list-style-type: none;
        }

            .contentWrapper .content .contentUL .contentLI {
                display: block;
                float: left;
                width: 310px;
                min-height: 100px;
            }

            .contentWrapper .content .contentUL .middleContent {
                border-left: solid 1px #E0E0E0;
                border-right: solid 1px #E0E0E0;
                min-height: 315px;
            }

                .contentWrapper .content .contentUL .middleContent .icon {
                    vertical-align: middle;
                    margin: 0px 10px 2px 5px;
                    width: 16px;
                    height: 16px;
                }

                .contentWrapper .content .contentUL .middleContent .map {
                    margin: 10px 0px 0px 20px;
                    border: solid 1px #D3D3D3;
                    border-radius: 5px;
                }

                    .contentWrapper .content .contentUL .middleContent .map:hover {
                        cursor: pointer;
                        border: solid 1px #C0C0C0;
                    }

            .contentWrapper .content .contentUL .contentLI h1 {
                text-align: left;
                font-size: 18px;
                padding: 0px 20px 0px 20px;
                text-shadow: 0px 1px 0px #FFFFFF;
                color: #FD6423;
            }

            .contentWrapper .content .contentUL .contentLI p {
                font-size: 13px;
                line-height: 1.5;
                padding: 0px 20px 0px 20px;
                color: #666666;
                text-shadow: 0px 1px 0px #FFFFFF;
            }

            .contentWrapper .content .contentUL .contentLI .infoDiv {
                font-size: 13px;
                padding: 3px 20px 3px 20px;
                color: #666666;
                text-shadow: 0px 1px 0px #FFFFFF;
            }

    .contentWrapper .footer {
        text-align: center;
        text-shadow: 0px 1px 0px #FFFFFF;
        font-size: 10px;
        color: #888888;
        margin: 0px auto;
        padding: 0px 0px 10px 0px;
        width: 900px;
    }

        .contentWrapper .footer a {
            border-right: solid 1px #D3D3D3;
            margin-right: 5px;
            padding-right: 5px;
            text-decoration: none;
            color: #888888;
        }

/* BUTTONS */
.button {
    margin: 1px 5px 0px 10px;
    outline: none;
    padding: 6px 18px 6px 18px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 3px;
    border-top: solid 1px #CCCCCC;
    border-left: solid 1px #CCCCCC;
    border-right: solid 1px #CCCCCC;
    border-bottom: solid 1px #AAAAAA;
    background: #F1F1F1 url(/images/bgs/button.png) repeat-x;
    vertical-align: middle;
    text-shadow: 0px 1px 0px #FFFFFF;
}

    .button img {
        vertical-align: middle;
        margin: -1px 8px -1px 0px;
        height: 16px;
        width: 16px;
    }

    .button span {
        vertical-align: middle;
    }

    .button:hover {
        cursor: pointer;
        box-shadow: 0px 1px 0px #EBEBEB;
        border: solid 1px #AAAAAA;
    }

    .button:active {
        cursor: pointer;
        outline: none;
        background: #E4E4E4 url(/images/bgs/clickedbutton.png) repeat-x;
        border-top: solid 1px #999999;
        border-left: solid 1px #AAAAAA;
        border-right: solid 1px #AAAAAA;
        border-bottom: solid 1px #CCCCCC;
        box-shadow: none;
    }

    .button:selected {
        outline: none;
    }

.redbutton {
    background: #F1F1F1 url(../../images/registration/purplebutton.png) repeat-x;
    color: #FFFFFF;
    border: solid 1px #3e4095;
    box-shadow: 0px 1px 0px #3e4095;
    text-shadow: 0px -1px 0px #3e4095;
    margin-left: 20px;
}

    .redbutton:hover {
        border: solid 1px #3e4095;
        box-shadow: 0px 1px 0px #3e4095;
    }

    .redbutton:active {
        background: #F1F1F1 url(../../images/registration/clickedpurplebutton.png) repeat-x;
        color: #FFFFFF;
        border-top: solid 1px #3e4095;
        border-left: solid 1px #3e4095;
        border-right: solid 1px #3e4095;
        border-bottom: solid 1px #3e4095;
        box-shadow: 0px 1px 0px #3e4095;
        text-shadow: 0px -1px 0px #3e4095;
    }

.greenbutton {
    background: #F1F1F1 url(/images/bgs/greenbutton.png) repeat-x;
    color: #FFFFFF;
    border: solid 1px #378C1A;
    box-shadow: 0px 1px 0px #E0E0E0;
    text-shadow: 0px -1px 0px #337F18;
}

    .greenbutton:hover {
        border: solid 1px #2E7215;
        box-shadow: 0px 1px 0px #D3D3D3;
    }

    .greenbutton:active {
        background: #F1F1F1 url(/images/bgs/clickedgreenbutton.png) repeat-x;
        border-top: solid 1px #3D961C;
        border-left: solid 1px #429E1E;
        border-right: solid 1px #429E1E;
        border-bottom: solid 1px #44A31F;
        box-shadow: none;
    }

/* FORMS */
.gridFormBox {
    float: right;
    padding: 8px 15px 10px 15px;
    border-radius: 5px;
}

    .gridFormBox .inputForm {
    }

        .gridFormBox .inputForm .label {
            font-size: 11px;
            margin: 0px 8px 0px 0px;
            vertical-align: middle;
        }

        .gridFormBox .inputForm a {
            color: #0094FF;
            text-decoration: underline;
            vertical-align: middle;
        }

            .gridFormBox .inputForm a:hover {
                cursor: pointer;
            }

        .gridFormBox .inputForm th {
            text-align: left;
            font-size: 18px;
            padding: 9px 0px 0px 2px;
            color: #FD6423;
        }

        .gridFormBox .inputForm td {
            text-align: right;
            padding: 2px 0px 2px 0px;
            min-width: 60px;
        }

        .gridFormBox .inputForm .label {
            font-weight: bold;
            margin-left: 5px;
        }

        .gridFormBox .inputForm .text {
            padding: 6px 5px 5px 5px;
            margin: 0px 10px 0px 0px;
            float: right;
        }

        .gridFormBox .inputForm .checkbox {
            margin: 10px 0px 5px 13px;
            padding: 0;
            vertical-align: middle;
        }

    .gridFormBox .remember {
        padding: 0px !important;
    }

        .gridFormBox .remember .label {
            font-size: 11px !important;
            font-weight: normal !important;
            margin: 0px 0px 0px 0px !important;
            vertical-align: middle;
            color: #666666;
        }

        .gridFormBox .remember .checkwrapper {
            font-size: 12px !important;
            float: left;
            margin: 0px 0px 0px 5px;
            padding: 1px 0px 0px 0px;
        }

        .gridFormBox .remember .forgot {
            font-size: 11px !important;
            float: left;
            margin: 0px 0px 0px 5px;
            padding: 2px 0px 0px 0px;
        }

        .gridFormBox .remember #chkRemember {
            vertical-align: middle;
            margin: 0px 3px 0px 0px;
            padding: 0px;
        }

.text {
    min-width: 160px;
    border-radius: 3px;
    border: solid 1px #D3D3D3;
    background: #FFFFFF;
    outline: none;
    padding: 6px 5px 5px 5px;
    margin: 0px 10px 0px 0px;
    font-size: 11px;
    vertical-align: middle;
}

/* THE MODAL DARK OVERLAY BACK */
.modalOverlay {
    background: #000000;
    opacity: 0.6;
    filter: alpha(opacity=60);
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
}

/* MODAL DESIGN */
.modal {
    position: fixed;
    padding: 10px;
    left: 50%;
    z-index: 10001;
    background-color: #FFFFFF;
    border-radius: 3px;
    box-shadow: 0px 1px 20px #333333;
    display: none;
}

    .modal .gridFormBox {
        float: none !important;
    }

        .modal .gridFormBox .inputForm td {
            padding: 0px 0px 2px 0px;
            text-align: left;
        }

.modalLoading {
    min-width: 200px;
    min-height: 200px;
    background: url(/images/icons/loadg.gif) no-repeat center center;
}

/* MODAL CLOSE BUTTON TOP RIGHT */
.modalClose {
    float: right;
    color: #777777;
    font-size: 11px;
    font-weight: bold;
    padding: 5px 10px 5px 10px;
    background-color: #F0F0F0;
    border: solid 1px #D3D3D3;
    text-shadow: 0px 1px 0px #FFFFFF;
    border-bottom-left-radius: 3px;
}

    .modalClose:hover {
        cursor: pointer;
        color: #111111;
        box-shadow: inset 0px -1px 4px #D9D9D9;
    }

    .modalClose:active {
        cursor: pointer;
        box-shadow: none;
    }

/* MODAL CONTENT DIV STYLING */
.modalContent {
    background: #FAFAFA url(/images/bgs/searchGroups.png) repeat-x bottom;
    border: solid 1px #E0E0E0;
}

    .modalContent h1 {
        margin: 15px 10px 15px 12px;
        padding: 0px;
        color: #111111;
        font-size: 14px;
        font-weight: bold;
        text-shadow: 0px 1px 0px #FFFFFF;
    }

    .modalContent h2 {
        border-radius: 3px;
        margin: 10px 10px 0px 10px;
        line-height: 1.3;
        font-size: 11px;
        font-weight: normal;
        color: #222222;
        background: #FFFFCC url(/images/icons/warning.png) no-repeat 4px 9px;
        padding: 10px 8px 10px 40px;
        border: solid 1px #F2C900;
    }

    .modalContent .contentWrapper {
        padding: 10px;
        box-shadow: none;
        border: none;
    }

        .modalContent .contentWrapper .button {
            margin: 20px 10px 5px 0px !important;
            float: right !important;
        }

.contentWrapper .content ul li p.info {
    background: #FFC;
    border: solid 1px #F2C900;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px;
    color: #000000;
    border-radius: 3px;
    margin: 5px 20px 5px 20px;
    text-shadow: 0px 1px 0px #FFFFFF;
}

.checkbox {
    background-color: transparent;
    background-image: url('/images/icons/cross.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    font-weight: bold;
    text-shadow: 0 1px 0 #fff;
    color: #555;
    font-size: 12px;
    float: left;
    padding: 1px 0 0 25px;
    margin: 15px 0 0 10px;
    display: block;
    vertical-align: middle;
    height: 18px;
    width: 400px;
}

    .checkbox.checked {
        background-image: url('/images/icons/ticked.png');
    }

/*.checkbox.checked:hover {
            background-image: url('/images/icons/ticked_hover.png');
        }*/

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #EDEDED;
    border-left: solid 1px #C5C5C5;
}

::-webkit-scrollbar-thumb {
    background: #333;
}

.downloadlink {
    color: #222;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    float: left;
    margin: 7px 0 0 15px;
    padding: 10px 0 10px 30px;
    background: url(/images/site/attachment.png) no-repeat left center;
}

    .downloadlink:hover {
        cursor: pointer;
        text-decoration: underline;
    }

#tblHistory {
    width: 880px;
    margin: 0 10px;
    padding: 0px;
    color: #333;
    text-shadow: 0px 1px 0px #FFF;
}

    #tblHistory tr {
        height: 32px;
    }

        #tblHistory tr th {
            padding: 15px 0 10px 5px;
            text-align: left;
            border-bottom: solid 1px #E0E0E0;
        }

        #tblHistory tr td {
            padding: 5px 0 10px 5px;
        }

        #tblHistory tr.off td {
            background: #F0F0F0;
        }




/* Media Queries ------------------------------------------------------------------------------------ */

/* iPhone, etc portrait ---- */
@media only screen and (min-width: 0px) and (max-width: 479px) {

    .contentWrapper .content ul li h1 {
        font-size: 13px !important;
    }

    .infoHolder .header h4 {
        font-size: 13px !important;
    }

    .contentWrapper .content ul li p {
        font-size: 11px;
    }

    .bodyWrapper {
        min-width: 350px;
    }

    .contentWrapper .content {
        width: 400px;
    }

    .infoHolder .header h4 {
        width: 250px;
    }

    .checkbox {
        width: 150px;
        font-size: 11px;
    }

    .infoHolder .infoContent label {
        font-size: 11px;
        width: 150px;
    }

    .infoHolder .infoContent input {
        width: 150px;
    }

    .infoHolder .infoContent select {
        width: 172px;
    }

    .bridgingForm {
        width: 400px !important;
    }
}

/* iPhone, etc landscape ---- */
@media only screen and (min-width: 480px) and (max-width: 767px) {

    .contentWrapper .content ul li p {
        font-size: 11px;
    }

    .bodyWrapper {
        min-width: 350px;
    }

    .contentWrapper .content {
        width: 450px;
    }

    .infoHolder .header h4 {
        width: 250px;
    }

    .checkbox {
        width: 180px;
        font-size: 11px;
    }

    .infoHolder .infoContent label {
        font-size: 11px;
        width: 180px;
    }

    .infoHolder .infoContent input {
        width: 180px;
    }

    .infoHolder .infoContent select {
        width: 192px;
    }

    .bridgingForm {
        width: 450px !important;
    }
}

/* iPad, tablets etc portrait ---- */
@media only screen and (min-width: 768px) and (max-width: 1023px) {

    .bodyWrapper {
        min-width: 800px;
    }

    .contentWrapper .content {
        width: 650px;
    }

    .infoHolder .header h4 {
        width: 400px;
    }

    .checkbox {
        width: 320px;
    }

    .infoHolder .infoContent input {
        width: 320px;
    }

    .infoHolder .infoContent select {
        width: 332px;
    }

    .bridgingForm {
        width: 650px !important;
    }
}