/*
#################################################################
File:				Forms.css
Description:		Rules for forms
#################################################################
*/


/*
=================================================================
 div.formContainer
=================================================================
*/

.formbuilder-page .formbuilder-page-header {
    font-size: 20px;
    margin-top: 0px;
}

.formbuilder-page {
    -webkit-box-shadow: 0px 0px 15px 6px rgba(0,0,0,0.07);
    -moz-box-shadow: 0px 0px 15px 6px rgba(0,0,0,0.07);
    box-shadow: 0px 0px 15px 6px rgba(0,0,0,0.07);
    border: none !important;
}

.formbuilder-message.formbuilder-message-plain, .formbuilder-message-info {
    font-size: 14px;
}

.formbuilder-message-info {
    background-image: url('../Content/info_large.gif') !important;
    background-color: white !important;
}

.formbuilder-form-controller {
    width: 1024px !important;
}

div.formContainer {
    position: relative;
    border: 1px solid #69C;
    margin-bottom: 5px;
}


    div.formContainer h3 {
        color: #039;
        font: bold 1em Verdana, Arial, Helvetica, sans-serif;
        background: #CAE3E3 url(images/form_heading_bg.gif) repeat;
        padding: 1px 3px 3px 3px;
        border-bottom: 1px solid #69C;
        margin-top: 0px;
    }

    div.formContainer h5 {
        color: #039;
        font: 1em Verdana, Arial, Helvetica, sans-serif;
        background: #C5D8EB url(images/form_subheading_bg.gif) repeat;
        padding: 0 2px 2px 2px;
        border-top: 1px dashed #69C;
        border-bottom: 1px dashed #69C;
        clear: both;
        margin: 10px 0 5px 0;
    }

        div.formContainer h5.section-header {
            background: #C4E1E1;
            border: 1px solid #BCCFD6;
            font-weight: bold;
            padding: 5px;
        }

    div.formContainer p a {
        font-size: 1em;
    }

    div.formContainer div.formContainer-options {
        padding: 5px 10px 10px;
    }

/*=============================================================*/


/********************/
/* fieldset headers */

fieldset.fieldGroup {
    border: solid 1px #BCCFD6;
    margin: 0 0 15px;
    padding: 0px;
    margin: 7px 2px 7px 2px;
}

.fieldGroup .fieldGroup-header {
    background-color: #C4E1E1;
    padding: 0 0 0 0px;
}

    .fieldGroup .fieldGroup-header input {
        margin: 0 5px 0 5px;
        float: left;
        position: relative;
        top: 3px;
    }

    .fieldGroup .fieldGroup-header label {
        font-weight: bold;
        color: #1648A4;
        padding: 4px 0;
        margin: 0;
        cursor: pointer;
        display: block;
    }

    .fieldGroup .fieldGroup-header.basic {
        background-color: Transparent;
    }

        .fieldGroup .fieldGroup-header.basic label {
            font-weight: normal;
            color: rgb(102, 102, 102);
        }

fieldset.fieldGroup .fieldGroup-body {
    padding: 5px;
}

fieldset.fieldGroup fieldset.fieldGroup {
    width: 100%;
}

/*
=================================================================
 div.deleteDialog
=================================================================
*/

div.deleteDialog {
    clear: both;
    border: 1px solid #DDB000;
    padding: 5px;
    background: #FFFFE1 url(images/icon_alert.gif) no-repeat 2px 2px;
    margin-bottom: 10px;
}

    div.deleteDialog h3 {
        border: 0px;
        background: transparent none; /* need to override when putting inside form */
        color: #4F7197;
        position: relative;
        left: 20px;
    }

    div.deleteDialog p, div.deleteDialog ul {
    }
/*=============================================================*/




/*
=================================================================
 div.EntityListContainer - lists of entities usually above a
 div.formContainer, also used for bookings.
=================================================================
*/
div.entityListContainer {
    position: relative;
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: #69C;
    margin: 5px 0px 5px 0px;
}

    div.entityListContainer div.category {
        position: relative;
    }

        div.entityListContainer div.category li a {
            text-decoration: none;
        }

    div.entityListContainer h3 {
        color: #039;
        font: bold 0.8em Verdana, Arial, Helvetica, sans-serif;
        background: #CAE3E3 url(images/form_heading_bg.gif) repeat;
        padding: 1px 3px 3px 3px;
        border-width: 1px 0px 1px 0px;
        border-style: solid;
        border-color: #69C;
        margin: 0px;
    }

    div.entityListContainer ul {
        list-style: square url(images/blue_pointer.gif) outside;
        margin: 10px 0px 10px 0px;
        padding: 0px;
    }

        div.entityListContainer ul.entityList {
            margin-left: 15px;
        }

            div.entityListContainer ul.entityList h5 a {
                text-decoration: none;
            }

            div.entityListContainer ul.entityList h5 span a {
                font-weight: normal;
            }

            div.entityListContainer ul.entityList div.summary {
                margin-top: 10px;
            }

span#feedbackLink {
}


div.entityListContainer ul.entityList div.summary h4 {
    padding: 0px;
    margin: 0px;
}

div#mainContainer div.entityListContainer ul.entityList div.summary ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
    list-style-image: none;
}

    div#mainContainer div.entityListContainer ul.entityList div.summary ul li {
        padding: 3px 0px 0px 0px;
        margin: 0px;
        border-bottom: none;
    }

/* stop nested uls from shrinking away in size (ie for portfolio skill list) */
div.entityListContainer ul ul {
    font-size: 1em;
}

div.entityListContainer li {
    padding: 1px 0;
    margin-left: 20px;
}

div.entityListContainer p {
    margin: 5px;
}
/*=============================================================*/


/*
=================================================================
 a.help - help buttons for forms and entity lists
 note this is also used to push div#mainContainer out in iE
=================================================================
*/
a.help {
    float: right;
    display: block;
    position: relative;
    top: -20px;
    width: 18px;
    height: 18px;
    margin-right: 2px;
    background-image: url(images/form_help_icon.gif);
}

    a.help span {
        display: none;
    }
/*=============================================================*/



/*
=================================================================
 rows, cols, input elements
=================================================================
*/
div.row {
    margin-top: 5px; /* only works when no floated cols inside */
    padding-left: 2px;
    width: 40em;
    clear: both;
}

*html div.row {
    width: 450px;
    text-align: left;
}

    /* row containing only button inputs */

    div.row div.col {
        float: left;
        width: 20em;
    }

        div.row div.col input.text {
            width: 90%;
        }

        div.row div.col select {
            width: 92%;
        }

    div.row label {
        font-size: 1em;
        display: block;
        color: #039;
    }

        div.row label.inline {
            display: inline;
        }

        div.row label.invalid {
            font-weight: bold;
            color: #F00;
            cursor: pointer;
        }

        div.row label.required {
            padding-left: 15px;
            background: transparent url(images/orange_star.gif) no-repeat;
        }

    div.row input.text {
        width: 95%;
    }

    div.row select {
        width: 95%;
    }

    div.row textarea {
        width: 95%;
    }

div.formContainer.experience textarea {
    height: 10em;
}

div.formContainer.education textarea {
    height: 10em;
}

div.formContainer.basicSkills textarea {
    height: 10em;
}

div.formContainer.portfolio textarea {
    height: 10em;
}

select {
    font: 1em Verdana, Arial, Helvetica, sans-serif;
    color: #000;
}

input.text {
    font: 1em Verdana, Arial, Helvetica, sans-serif;
    color: #000;
    padding-left: 2px;
}

textarea {
    font: 1em Verdana, Arial, Helvetica, sans-serif;
    color: #000;
    padding-left: 2px;
}

    textarea.address {
        height: 8em;
    }

.radioGroup input {
    float: left;
}

.radioGroup label {
    float: left;
    margin-right: 5px;
}

.radioGroup {
    float: left;
    padding-bottom: 5px;
}

/* buttons */
button, .gbutton, .answerButton {
    background-color: #F90;
    color: #FFF;
    font: bold 1.2em Verdana, Arial, Helvetica, sans-serif;
    border: 1px solid #D58000;
    padding: 0px 5px;
    margin: 3px;
    vertical-align: middle;
}

button.disabled {
    background-color: #EBEBE4;
    border-color: #A5ACB2;
    color: #A5ACB2;
}

div.row input.button {
    width: auto;
}

/* checkbox doesn't indent */
div.row input.checkbox {
    width: auto;
    margin: 0px 2px 2px 2px;
}
/*=============================================================*/



/*
=================================================================
 span.dateSelect - note !important rules for override col
 input widths above.
=================================================================
*/
span.dateSelect {
}

    span.dateSelect select {
    }

    span.dateSelect option {
    }

    span.dateSelect select.day {
        width: 3.8em !important;
    }

    span.dateSelect select.month {
        width: 4.4em !important;
    }

    span.dateSelect select.year {
        width: 5em !important;
    }
    /* dateSelect add/remove link buttons */
    span.dateSelect a {
        margin: 2px;
        color: #6A8CC4;
        text-decoration: none;
    }

span.dateDelect a:hover {
    color: #F90;
}
/*=============================================================*/




/*
=================================================================
 div.dialog
=================================================================
*/
div.dialog {
    border: 1px solid #DDB000;
    padding: 5px;
    background: #FFFFE1 url(images/icon_information.gif) no-repeat 2px 2px;
}

    div.dialog p {
        margin: 0px 0px 10px 25px;
    }

    div.dialog ul {
        font-size: 1em;
        list-style: square url(images/orange_pointer_light.gif) outside;
        padding: 1px;
        margin: 0 0 0 20px;
    }

    div.dialog li {
        margin: 0 2px;
    }

    div.dialog a {
        color: #F90;
        font-weight: normal;
    }

        div.dialog a:hover {
            color: #039;
        }

    div.dialog h3 {
        padding: 2px 5px 0px 20px;
        position: relative;
        margin: 0;
    }

/*=============================================================*/




/*
=================================================================
 div.message.validation
=================================================================
*/

div.message.validation {
    border: 1px solid #900;
    padding: 7px 7px 5px 30px;
    margin: 10px 0;
    background: #FFD url(images/alert.gif) no-repeat 5px 5px;
}

    div.message.validation h3 {
        margin: 0px;
        padding: 0 0 10px 7px;
        color: #900;
        font: Bold 1.1em Arial, Helvetica, sans-serif;
        background: none;
        border: none;
    }

    div.message.validation ul {
        margin: 5px;
        padding: 0px;
        color: #F00;
    }

.message.validation ul li, .message.validation p {
    color: red;
    padding-left: 10px;
    list-style: none outside none;
    background: url(images/red_pointer.gif) no-repeat 0px 5px !important;
}

/*=============================================================*/

.new-graduate {
    font-size: 1.1em;
    width: 50em;
    margin: 0 0 15px;
}

    .new-graduate div.formContainer {
        border: none;
    }

/*
=================================================================
 div#login
=================================================================
*/
.login-box {
    margin: 10px auto;
    width: 300px;
}

    .login-box table {
        margin: 5px auto 0;
        text-align: right;
    }

.login-manager {
    margin: 0 25%;
}

div#login {
}

    div#login div.formContainer.login {
        margin: 0 auto;
        width: 270px;
        text-align: right;
        border: 1px solid #69C;
        border-top: 0;
    }

        div#login div.formContainer.login h3 {
            text-align: left;
            color: #039;
            font: bold 1em Verdana, Arial, Helvetica, sans-serif;
            background: #CAE3E3 url(images/form_heading_bg.gif) repeat;
            padding: 1px 3px 3px 3px;
            border-width: 1px 0px 1px 0px;
            border-style: solid;
            border-color: #69C;
            margin-top: 0;
        }

        div#login div.formContainer.login label {
            padding: 2px;
        }

        div#login div.formContainer.login input {
            width: 150px;
            padding-left: 0;
        }

/* This might not be correct. Get carlos to check whether these styles need to be in student or employer */
#loginContainer .form-buttons, #login .form-buttons, div.boxedContent.login .form-row.buttons, .formContainer.login.login-box .form-buttons #login .form-buttons,
div.boxedContent.login .form-row.buttons {
    width: 270px;
}

div#login div.formContainer.login input.gbutton {
    position: relative;
    top: 0px;
    width: auto;
    font-size: 1em;
    margin: 2px;
}

div#login div.message.alert {
    width: 220px;
    margin: 0 auto 15px auto;
}

div#welcomeTitle {
    font-size: 1.2em;
    color: #039;
    text-align: left;
}

.loginText {
    font-size: 1.2em;
    text-align: center;
    color: #003399;
}

    .loginText a {
        color: #003399;
        font-weight: bold;
    }

        .loginText a:hover {
            color: #FF9900;
            text-decoration: underline;
        }

p.loginInfo, ul.loginInfo {
    font-size: 1.2em;
    color: #003399;
    text-align: left;
}

    p.loginInfo a, ul.loginInfo a {
        color: #003399;
        font-weight: bold;
    }

        p.loginInfo a:hover, ul.loginInfo a:hover {
            color: #FF9900;
            text-decoration: underline;
        }

div#login.portfolioLogin div.formContainer label {
    padding-left: 15px;
}

/*=============================================================*/


/*
=================================================================
 div.introParagraph
=================================================================
*/

div.introParagraph {
    border: 1px dashed #CBB489;
    padding: 0px 4px;
    margin: 5px 5px;
    background-color: #FFFFF2;
}

    div.introParagraph h4 {
        margin: 0;
        margin-bottom: 5px;
        padding: 0;
        font-size: 1.2em;
    }

    div.introParagraph div.content {
        font-size: 1em;
    }

    div.introParagraph div.buttons {
        padding-bottom: 5px;
    }

/*=============================================================*/

/*
=================================================================
 ul.contactStatistics
=================================================================
*/
ul.contactStatistics {
    list-style-type: none;
    font-size: 0.8em;
    margin: 10px 5px;
    padding: 0;
}

    ul.contactStatistics li {
        margin-bottom: 5px;
    }

    ul.contactStatistics h4 {
        font-size: 1em;
        margin: 0;
        text-decoration: underline;
    }

span.statLabel {
    color: #039;
}

/*
===============================================================
 Paging Control
===============================================================
*/

.resultsInterface {
    background: #DFE3FD;
    float: left;
    padding: 2px 8px 0px 8px;
    margin: 0 10px 0 5px;
    text-align: center;
    width: 100%;
}

*html .resultsInterface {
    padding-top: 0px;
    width: 97%;
}

    .resultsInterface p.selectedpage {
        float: left;
        margin: 0;
        padding: 0;
        line-height: 3.1em;
    }

    .resultsInterface a {
        color: #77ABBF;
        text-decoration: underline;
    }

        .resultsInterface a:hover {
            color: #F90;
        }

    .resultsInterface input {
        width: 20px;
        float: left;
    }

.pagejump {
    float: left;
    margin-left: 20px;
}

.resultsInterface.extender {
    float: right;
}

.resultsInterface button {
    float: left;
    margin: 2px 0 0 3px;
}

.resultsInterface label {
    margin: 0;
    padding: 0;
}

ul.pages {
    padding: 0px;
    margin: 0px 5px 0 20px;
    line-height: 3.1em;
    text-align: center;
    float: left;
}

    ul.pages li {
        list-style: none;
        display: block;
        float: left;
    }

a.next {
    background: url('images/icons/actions/next.gif') no-repeat right 0.9em;
    margin-left: 8px;
    padding-right: 19px;
    display: block;
}

a.prev {
    background: url('images/icons/actions/prev.gif') no-repeat left 0.9em;
    padding-left: 19px;
    margin-right: 7px;
    display: block;
}

.divider {
    margin: 0 2px 0 2px;
    position: relative;
    top: 3px;
}

.selected {
    font-weight: bold;
}

p.selectedResults {
    margin: 0px 0px 5px 0px;
    padding: 5px 0px 0px 12px;
    line-height: 1em;
    clear: left;
}

button.go {
    background: transparent url('images/go.gif') no-repeat;
    border: none;
    width: 26px;
    height: 15px;
    cursor: pointer;
}

    button.go span {
        display: none;
    }

/*
=================================================================
 sorting
=================================================================
*/

div.sorting a {
    margin-left: 10px;
    padding: 0 0 0 20px;
    background-repeat: no-repeat;
    background-position: left top;
    display: block;
    float: left;
}

div.sorting span.orderText {
    float: left;
}

a.asc {
    background-image: url(images/asc.gif);
}

a.desc {
    background-image: url(images/desc.gif);
}

/*=============================================================*/


/*
=================================================================
 misc
=================================================================
*/

/* this is a bit of a hack to get text displaying at the right size
   in the portfolio view page */

span.formText {
    font-size: 0.8em;
}

/*
=================================================================
 Portfolio Sample
=================================================================
*/

div.sampleSelection {
    margin: 10px 0 10px 0;
    padding: 5px 0 5px 0;
    float: left;
}

/*=============================================================*/
/* appointments */

div.formContainer div.listContainer {
    border: none;
    padding: 0;
}

.pagingControls a {
    margin-top: 13px;
    display: block;
    float: left;
    width: 6em;
    background-repeat: no-repeat;
}

.pagingControls .prev {
    padding-left: 10px;
    background-image: url(Images/orange_pointer_back.gif);
    background-position: left 4px;
}

.pagingControls .next {
    padding-right: 10px;
    text-align: right;
    background-image: url(Images/orange_pointer.gif);
    background-position: right 4px;
}

li.disabled {
    color: #999;
    padding-bottom: 5px !important;
}

span.bookedIn {
    color: #F90;
}

/*Form Builder Styles */

.formBuilder {
    font-size: 13px;
    background: #F4F1F4;
    min-width: 600px;
}

    .formBuilder h2 {
        height: 15px;
        margin: 0;
        padding-top: 2px;
        padding-right: 0pt;
        padding-bottom: 0pt;
        padding-left: 5px;
        color: #0f6d96;
        font-size: 1em;
    }

div.formContainer.formBuilder h3 {
    background: none;
}

.formBuilder div.row label {
    color: #444;
}

.row.checkbox input {
    display: inline;
    position: relative;
    top: 2px;
    float: none;
    clear: none;
}

.formBuilder button, .formBuilder .gbutton {
    font-size: 14px;
}

.gbutton {
    padding: 9px 15px !important;
    background-color: #24699B !important;
    background-image: none !important;
    border-color: #113148 !important;
    color: white !important;
    text-transform: uppercase;
}

.gbutton:hover {
    padding: 9px 15px !important;
    background-color: #234A67 !important;
    border-color: #113148 !important;
    color: white !important;
    text-transform: uppercase;
}

.gbutton.pos {
    background-image: none !important;
    background-color: #66CC00 !important;
    border-color: #2C4C17 !important;
}

.gbutton.pos:hover {
    background-image: none !important;
    background-color: #3D7319 !important;
    border-color: #2C4C17 !important;
}

/***** rows *****/

.formBuilder .row {
    width: 99%;
    padding-left: 1%;
    margin-bottom: 7px;
    clear: both;
}

.row.radio {
    padding-bottom: 6px;
}

.formBuilder .row label {
    clear: both;
    display: block;
    line-height: 1em;
    margin: 2px 5px 2px 0px;
    padding: 0;
}

.row .description {
    font-style: italic;
    position: relative;
    bottom: 2px;
    margin-right: 5px;
    color: #333;
}

.formBuilder .description,
.formBuilder .row label {
    background-color: #E6E6E6;
    padding: 2px;
}

.row label.inline {
    margin: 0 3px;
    clear: none;
    display: inline;
    position: relative;
    bottom: 3px;
}

.row.radioList.vertical input {
    float: left;
    clear: left;
}

.row.radioList.vertical label.inline {
    float: left;
    clear: left;
    bottom: 15px;
    left: 25px;
}

.row.radioButtonList.vertical input {
    float: left;
    clear: left;
}

.row.radioButtonList.vertical label {
    float: none;
    clear: none;
    margin-top: 5px;
    margin-left: 30px;
}

.row.radioButtonList.vertical br {
    display: none;
}

.row .list {
    margin-bottom: 4px;
    padding-bottom: 6px;
}

.row.checkbox {
    padding: 0px;
    margin: 0px 15px;
    display: block;
    float: none;
    clear: none;
}

    .row.checkbox input {
        display: inline;
        position: relative;
        top: 2px;
        float: none;
        clear: none;
    }

    .row.checkbox label {
        display: inline;
        background: Transparent !important;
    }

    .formBuilder .row.checkbox .description,
    .row.checkbox .description {
        background-color: Transparent;
        display: block;
        margin-left: 28px;
        line-height: 1.3em;
    }

    .row.checkbox input.text {
        width: 80%;
        margin-bottom: 0px;
    }

    .row.checkbox div.checkBoxSpacer {
        float: left;
        width: 23px;
    }

.formBuilder label.required,
label.required {
    padding-left: 15px;
    background-image: url('images/orange_star.gif');
    background-repeat: no-repeat;
}

label.invalid {
    color: Red;
    font-weight: bold;
    cursor: pointer;
}

span.symbol {
    color: #666;
    padding: 2px;
    float: left;
}

/********** cols *************/
.formBuilder .row .col {
    width: 49.9%;
    float: left;
}

.col select {
    width: 93%;
}

.col input.text {
    width: 94%;
}

.col textarea {
    width: 94%;
}

div.row.three-cols .col {
    width: 33%;
}

div.row.four-cols .col {
    width: 24.5%;
}

/********* formbuilder overrides **********/


.suggest-list-drop {
    font-size: 0.7em;
}


/** Time column for datetime field **/

.timeCol {
    margin-right: 3px;
}

.datePicker {
    margin-right: 3px;
    width: 100px;
}

img.ui-datepicker-trigger {
    margin-right: 3px;
    position: relative;
    top: 1px;
}

#showHideEndDate {
    line-height: 3em;
    vertical-align: middle;
    margin-left: 10px;
}

.ui-widget, .suggest {
    font-size: 0.8em !important;
}

.read-only-field {
    border: 1px solid #8F8F8F;
    line-height: 1.2em;
    height: auto;
    min-height: 1.2em;
    margin: 2px 0 0 0;
    padding: 1px 0 0 2px;
    color: Black;
    width: auto;
    float: none;
    font-size: 1.2em;
    background: #EEF0F2;
    clear: both;
}

.resource.search input {
    font-size: 13px;
    line-height: 18px;
    color: #555;
    background-color: white;
    padding: 4px 14px 4px 0px;
    min-width: 480px;
    width: 50%;
}