/*-------------------------------------------------------------------------------------------
DETAILS:
    - Custom CSS for Portals Boilerplate
    - This is where you should overwrite and custom styles for this site
    - Created by David Thomson
    - Created on 23/09/2013
-------------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------------
INDEX:
    1. HOME PAGE
        1.1 Subscription Boxes
        1.1.1 Contracts Box
        1.1.2 Advertise Box
        1.2 Info Boxes
        1.2.1 Promo Box
        1.2.2 Case Study Box
        1.2.3 Projects Box
        1.2.4 Registration Boxes
    2. CONTACT US PAGE
    3. CONTRACTS REGISTER
        3.1 Bordered Boxes
        3.2 ContentViewGrid
    4. BUTTONS
        4.1 Content Box Buttons
    5. GRADIENTS
        5.1 Gradients
-------------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------------
1. HOME PAGE
-------------------------------------------------------------------------------------------*/

/* 1.1 Subscription Boxes */
.SubscriptionBox {
    width: 47%; /* 460px / 960px */
    float: left;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #0062A1; /* Dark Blue */
    color: #ffffff; /* white */
    text-align: center;
    min-height: 247px;
    margin: 0.5em 0;
}

    .SubscriptionBox img {
        margin-top: 0.2em;
    }

    .SubscriptionBox h2, .SubscriptionBox h3 {
        color: #ffffff; /* white */
        margin-top: 0;
    }

    .SubscriptionBox h3 {
        font-size: 1em; /* 16px / 16px */
        font-weight: bold;
    }

/* 1.1.1 Contracts Box */
#ContractsBox {
    background: #0062A1 url(/Images/Find_Contracts_Background.jpg) bottom left no-repeat;
}

/* 1.1.2 Advertise Box */
#AdvertiseBox {
    float: right;
    background: #0062A1 url(/Images/Advertise_Opportunities_Background.jpg) bottom left no-repeat;
}

/* 1.2 Info Boxes */
.InfoBox {
    float: left;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color: #ffffff; /* white */
    margin: 0.5em 0;
    border: 1px solid #CCCCCC; /* Light Gray */
    min-height: 23em;
    background-color: #0062A1; /* Dark Blue */
}

    .InfoBox header {
        padding: 0.2em 0.5em;
    }

        .InfoBox header h3 {
            display: inline;
            float: left;
        }

        .InfoBox header a {
            float: right;
        }

/* 1.2.1 Promo Box */
#PromoBox {
    width: 28%; /* 270px / 940px (960px - 20px padding) */
    float: left;
    margin-right: 1%;
    min-height: 27rem;
}

    #PromoBox a {
        color: white;
    }

        #PromoBox a:focus, #PromoBox a:active {
            border: 2pt dashed #ff0000;
            outline: none;
        }


#UsefulSitesBox {
    width: 40%;
    float: left;
    min-height: 27rem;
}

    #UsefulSitesBox .innerbox {
        padding: 14px;
        background-color: #fff;
        color: #666;
    }

.displayblock {
    display: block;
    margin-bottom: 10px;
    float: right;
}




/* 1.2.2 Case Study Box */
#CaseStudyBox {
    width: 40%;
    float: left;
    min-height: 27rem;
}

    #CaseStudyBox .Button {
        display: block;
    }

    #CaseStudyBox #CaseStudyBoxContainer {
        border-top: 1pt solid #2C94C6; /*Blue */
        border-right: 1pt solid #2C94C6;
        border-bottom: 1pt solid #2C94C6;
        -webkit-border-top-right-radius: 10px;
        -webkit-border-bottom-right-radius: 10px;
        -moz-border-radius-topright: 10px;
        -moz-border-radius-bottomright: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        width: 98.4615384615%; /* 640px / 650px */
        margin: 1em 0;
    }

    #CaseStudyBox h4, #CaseStudyBox p {
        color: white;
        padding: 0;
        margin: 0;
    }

    #CaseStudyBox .Button {
        width: auto;
        margin-right: 1em;
    }

    #CaseStudyBox .InfoPanelMenu {
        width: 35%; /* 224px / 640px */
        float: left;
        min-height: 265px;
    }

        #CaseStudyBox .InfoPanelMenu ul li {
            border-top: 1pt solid #2C94C6;
            width: 100%;
            padding-left: 2.1978021978%; /* 5px / 227.5px */
            padding-top: 0;
            margin-top: 0;
        }

            #CaseStudyBox .InfoPanelMenu ul li.NoBorder {
                border-top: 0;
            }

            #CaseStudyBox .InfoPanelMenu ul li.Selected, #CaseStudyBox .InfoPanelMenu ul li:hover {
                background-color: #2B77A8; /* Light Blue */
                background: #2B77A8 url(/Images/CSArrow.png) center right no-repeat;
            }

            #CaseStudyBox .InfoPanelMenu ul li:hover {
                text-decoration: underline;
            }

        #CaseStudyBox .InfoPanelMenu a {
            text-decoration: none;
            font-size: 0.85em;
            display: block;
            padding-top: 1.4em;
            padding-bottom: 1.4em;
        }

        #CaseStudyBox .InfoPanelMenu p {
            width: 95%;
        }

    #CaseStudyBox .InfoPanelBody {
        width: 100%;
        float: right;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        min-height: 282px;
        background-position: center;
        background-repeat: no-repeat;
        -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        -o-background-size: 100% 100%;
        background-size: 100% 100%;
    }

    #CaseStudyBox .InfoPanelControls {
        background-color: #005286; /* Dark Blue */
        width: 92%;
        margin: 12em auto 0 auto;
        text-align: left;
        padding: 0.5em;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

        #CaseStudyBox .InfoPanelControls p {
            font-size: 0.85em;
        }

    #CaseStudyBox nav {
        float: right;
    }

        #CaseStudyBox nav a {
            float: none;
        }

/* 1.2.3 Projects Box */
#ProjectsBox {
    width: 28.7234042553%; /* 270px / 940px (960px - 20px padding) */
    float: right;
    min-height: 27rem;
}

    #ProjectsBox .Project {
        margin: 1em auto;
        width: 90%; /* 243px / 270px */
    }

.Project .ProjectImage {
    width: 30%; /* 72.9px / 243px */
    float: left;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    min-height: 5em;
    background-color: #ffffff; /* white */
    text-align: center;
    margin-right: 2.05761316872%; /* 5px / 243px */
    padding-top: 0.2em;
}

.Project .ProjectData {
    width: 67.9423868313%; /* 165.1px / 243px */
    float: right;
}

    .Project .ProjectData .Button {
        width: 75%;
        float: right;
    }

    .Project .ProjectData a {
        color: #ffffff;
    }

/* 1.2.4 Registration Boxes */
.RegistrationBox {
    width: 42.5531914893617%; /* 400px / 940px (20px padding) */
    margin: 1em 3.51063829787234%; /* 33px / 940px */
}

    .RegistrationBox h1 {
        font-size: 1.3em;
    }

    .RegistrationBox h2 {
        font-size: 1.1em;
        font-weight: bold;
        color: #FFFFFF;
        margin-top: 0;
    }

    .RegistrationBox .content {
        padding: 3%; /* 12px / 400px */
        height: 15em;
    }

    .RegistrationBox footer {
        background-color: #ffffff;
    }

        .RegistrationBox footer div {
            background: url(/images/logo-rightarrow.gif) center left no-repeat;
            margin-left: 0.5em;
            padding-left: 2.5em;
            padding-top: 1em;
            padding-bottom: 1em;
            font-weight: bold;
        }

/* Override Windows High Contrast mode */
@media screen and (-ms-high-contrast: active) {
    .RegistrationBox footer div {
        background: url(/images/logo-rightarrow.gif) center left no-repeat;
        margin-left: 0.5em;
        padding-left: 2.5em;
        padding-top: 1em;
        padding-bottom: 1em;
        font-weight: bold;
    }
}

/*-------------------------------------------------------------------------------------------
2. CONTACT US PAGE
-------------------------------------------------------------------------------------------*/

.ContactUsBox {
    padding-top: 1em;
}

    .ContactUsBox h2 {
        text-align: left;
        font-size: 1.4em;
        padding-top: 0;
        margin-top: 0;
    }

    .ContactUsBox #Buttons {
        text-align: center;
    }

    .ContactUsBox p {
        text-align: right;
        font-size: 0.875em; /* 14pt / 16pt */
    }

#ContactForm {
    float: left;
    width: 64%; /* 630px / 940px (-20px padding) */
}

    #ContactForm table {
        width: 100%;
    }

    #ContactForm th, #ContactForm td {
        padding: 0.25em 0;
    }

    #ContactForm .Label {
        text-align: right;
        width: 12%;
        font-size: 0.875em; /* 14pt / 16pt */
        padding-right: 1.587301587301587%; /* 10px / 630px */
    }

    #ContactForm .Data {
        width: 90%; /* 500px / 594px (630px-2em[16pt*2]-4px) */
    }

    #ContactForm input[type="text"] {
        width: 98%;
    }

    #ContactForm textarea {
        width: 96.989898989898989%; /* 588px / 594px (630px-2em[16pt*2]-4px) */
    }

#PostalAddress {
    float: right;
    width: 34%; /* 300px / 940px (-20px padding) */
}

    #PostalAddress .Label {
        text-align: right;
        width: 39%;
        font-size: 0.875em; /* 14pt / 16pt */
        padding-right: 3.333333333333333333%; /* 10px / 300px */
    }


/*-------------------------------------------------------------------------------------------
3. CONTRACTS REGISTER
-------------------------------------------------------------------------------------------*/
/* 3.1 Bordered Boxes */
#ContractSearch h2 {
    margin-top: 0;
}

#ContractSearch .borderedBox {
    width: 45.25550660%;
    margin-top: 1em;
    min-height: 15em;
    float: left;
    background-color: #E7F4FF;
}

#ContractSearch #CategorySearch {
    margin-right: 1em; /* 16px = 1em */
}

#ContractSearch #TextSearch .Label {
    text-align: right;
}

#ContractSearch .borderedBox .ButtonPanel {
    margin-bottom: 0;
}

/* 3.2 ContentViewGrid */
table.ContractViewGrid {
    font-size: 1em;
    width: 100%;
}

/* 3.3 SupplierEdit */
#SupplierEdit .Label {
    text-align: right;
}


/*-------------------------------------------------------------------------------------------
4. BUTTONS
-------------------------------------------------------------------------------------------*/

/* 4.1 Content Box Buttons */
.ContentBoxButton {
    width: 32.6086956522%; /* 150px / 460px */
}


/*-------------------------------------------------------------------------------------------
5. GRADIENTS
-------------------------------------------------------------------------------------------*/

/* 5.1 White to Gray */
.WhiteToGray {
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #E4E4E4 100%);
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #E4E4E4 100%);
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #E4E4E4 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #E4E4E4));
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #E4E4E4 100%);
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #E4E4E4 100%);
    background-image: linear-gradient(to bottom, #FFFFFF 45%, #E4E4E4 85%);
    background-color: #E4E4E4;
}

p.Highlight {
    text-align: center;
}

a.SkipTo:focus {
    border: 2pt dashed #ff0000 !important;
}

.Menu a:focus, .InfoPanelMenu a:focus {
    border: 2pt dashed #ff0000 !important;
}


/* Error 404 */
.width50 {
    width: 50%;
    float: left;
}

    .width50 img {
        max-width: 100%;
    }

.VerticalAlignTop {
    vertical-align: top;
}

.HorizontalAlignCentre {
    text-align: center;
}

.HorizontalAlignLeft {
    text-align: left;
}

.BorderSpacing {
    border-spacing: 0;
}

.CellPadding2 {
    padding: 2px;
}

.CellPadding3 {
    padding: 3px;
}

.CellPadding5 {
    padding: 5px;
}

.BorderNone {
    border: none;
}

.RadTabStripTop_Telerik .rtsLink:focus {
    background-position: 0 -52px;
}

a.SkipTo:focus {
    border: 2pt dashed #ff0000 !important;
}

.Menu a:focus, .InfoPanelMenu a:focus {
    border: 2pt dashed #ff0000 !important;
}

input:focus, a:focus {
    border: 2pt dashed #ff0000 !important;
}

/* Override Windows High Contrast mode */
@media screen and (-ms-high-contrast: active) {
    .ButtonArrow {
        background-image: url(/Images/ButtonArrow.png);
        background-repeat: no-repeat;
        background-position: right center;
        padding-right: 2.2em;
    }

    :focus {
        border: 2pt dashed #ff0000 !important
    }
}

/* Override Windows High Contrast mode */
@media screen and (-ms-high-contrast: active) {
    .RegistrationBox footer div {
        background: url(/images/logo-rightarrow.gif) center left no-repeat;
        margin-left: 0.5em;
        padding-left: 2.5em;
        padding-top: 1em;
        padding-bottom: 1em;
        font-weight: bold;
    }
}

body {
    margin: 10px 0;
}