body
{
    margin: 10px 0 0 0;
    font: 77%/1.6em verdana, arial;
    text-align: center;
}

::-ms-clear { display: none; } /* Removes cross from text inputs in IE10+*/

h1
{
    color: #646464;
    font-size: 1.6em;
    font-family: Arial;
    border-bottom: solid 7px #E1E1E1;
    padding-bottom: 4px;
    margin-top: 0;
}

h2
{
    color: #646464;
    font-size: 1.6em;
    font-family: Arial;
    border-bottom: solid 7px #E1E1E1;
    padding-bottom: 4px;
    margin-top: 0;
}

a
{
    color: #467AA7;
}

    a img
    {
        border: 0;
    }

/* floats and clears */

.floatleft
{
    float: left;
}

.floatright
{
    float: right;
}

.clear
{
    clear: both;
}

/* class to change the mouse to a hand pointer */

.handpointer
{
    cursor: pointer;
}

/* holder for the full site including header, footer, content etc */

#siteholder
{
    margin: auto;
    width: 960px;
    text-align: left;
    border: solid 1px #969696;
}

/* site header */

#header
{
    background: url(/Content/Images/Backgrounds/HeaderBackground.jpg);
    height: 81px;
}

#dipinlogo
{
    float: left;
    margin: 20px 0 0 10px;
}

#gatewaylogo
{
    text-align: right;
    float: right;
    margin: 10px 15px 0 0;
}

    #gatewaylogo ul
    {
        font-size: 0.9em;
        font-weight: bold;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        #gatewaylogo ul a
        {
            text-decoration: none;
            color: #646464;
        }

            #gatewaylogo ul a:hover
            {
                text-decoration: underline;
                color: #323232;
            }

        #gatewaylogo ul li
        {
            float: left;
            padding-right: 15px;
        }

            #gatewaylogo ul li.last
            {
                padding-right: 15px;
            }

/* administration options */

#administrationmenu
{
    clear: both;
    background: url(/Content/Images/Backgrounds/AdministrationOptionsBackground.jpg);
    height: 40px;
}

    #administrationmenu ul
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        #administrationmenu ul li
        {
            padding: 0 15px 0 15px;
            height: 40px;
            line-height: 40px;
            float: left;
            border-right: solid 1px #AFAFAF;
            font-weight: bold;
            color: #646464;
        }

            #administrationmenu ul li.selected
            {
                background-color: #D2D2D2;
            }

            #administrationmenu ul li a
            {
                display: block;
                color: #646464;
                text-decoration: none;
            }

                #administrationmenu ul li a:hover
                {
                    text-decoration: underline;
                }

            #administrationmenu ul li img
            {
                vertical-align: middle;
            }

/* page content which holds the breadcrumb and content */

#pagecontent
{
    background: url(/Content/Images/Backgrounds/ContentBackground.jpg) repeat-y;
    padding-bottom: 10px;
    margin-bottom: 0px;
}

/* breadcrumbs */

#breadcrumbs
{
    font-weight: bold;
    font-size: 0.9em;
    color: #646464;
    padding-left: 20px;
    line-height: 40px;
}

    #breadcrumbs a
    {
        color: #646464;
        text-decoration: none;
    }

        #breadcrumbs a:hover
        {
            color: #646464;
            text-decoration: underline;
        }

/* CurrentInstitution */

#currentInstitution
{
    clear: both;
    font-weight: bold;
    font-size: 0.9em;
    color: #646464;
    float: right;
    padding-right: 15px;
}

    #currentInstitution a
    {
        color: #646464;
        text-decoration: none;
    }

        #currentInstitution a:hover
        {
            color: #646464;
            text-decoration: underline;
        }

/* content of a page with no menu */

#contentnomenu
{
    margin: 30px 30px 30px 30px;
}

/* content of a page with a menu */

#contentwithmenu
{
    float: right;
    width: 700px;
    margin-right: 30px;
}

/* menu */

#menu
{
    float: left;
}

    #menu ul
    {
        background-color: #F3F4F6;
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 200px;
    }

        #menu ul li
        {
            height: 27px;
            line-height: 27px;
            padding-left: 15px;
            border-bottom: solid 1px #C8C8C8;
            border-right: solid 1px #C8C8C8;
            font-weight: bold;
        }

            #menu ul li.header
            {
                background-image: url(/Content/Images/Backgrounds/MenuHeaderBackground.png);
                color: #ffffff;
                font-size: 1.2em;
                border-right: 0;
            }

            #menu ul li.last
            {
                background-image: url(/Content/Images/Backgrounds/MenuBottomBackground.png);
                border-bottom: 0;
                border-right: 0;
            }

            #menu ul li.selected
            {
                background-color: #E1E1E1;
            }

            #menu ul li a
            {
                color: #467AA7;
                text-decoration: none;
                display: block;
            }

                #menu ul li a:hover
                {
                    text-decoration: underline;
                }

#pagecontent .changemade
{
    border: solid 1px #cccccc;
    border-radius: 0.6em;
    -moz-border-radius: 0.6em;
    background: #F2F2F2 url(/Content/Images/Icons/Success.png) no-repeat 10px 10px;
    padding: 0px 10px 10px 50px;
    margin-bottom: 10px;
}

#pagecontent .error
{
    background: #FFEEEE url(/Content/Images/Icons/Error.png) no-repeat 10px 10px;
    border: solid 1px #FF6A6A;
    padding: 10px 10px 10px 50px;
    margin-bottom: 10px;
    color: #333333;
    border-radius: 0.6em;
    -moz-border-radius: 0.6em;
}

/* header shown to let you know where you are e.g. career area with a sector */

#subsectionheader
{
    padding: 5px;
    background-color: #F3F4F6;
    border: solid 1px #E1E1E1;
}

/* footer */

#footer
{
    clear: both;
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    color: #646464;
    background: url(/Content/Images/Backgrounds/FooterBackground.jpg);
}

    #footer a, #footer a:visited
    {
        text-decoration: none;
        color: #646464;
    }

        #footer a:hover
        {
            text-decoration: underline;
            color: #646464;
        }

/* standard forms */

form
{
    margin-bottom: 20px;
    padding: 0 15px;
    border: solid 1px #C8C8C8;
    background-color: #F0F0F0;
}

    form h2
    {
        color: #646464;
        font-family: Arial;
        font-size: 1.4em;
        padding: 15px 0 0 0;
    }

    form label
    {
        font-weight: bold;
        color: #467AA7;
    }

    form ul
    {
        margin: 0;
        list-style-type: none;
        padding: 0;
    }

        form ul li
        {
            margin-bottom: 7px;
        }

            form ul li.columnone
            {
                float: left;
                width: 360px;
                text-align: left;
            }

            form ul li.columntwo
            {
                text-align: left;
                float: right;
                width: 410px;
                margin-right: 30px;
            }

            form ul li.columnonewithMenu
            {
                float: left;
                width: 335px;
            }

            form ul li.columntwowithMenu
            {
                text-align: left;
                float: right;
                width: 320px;
                margin-right: 10px;
            }

            form ul li input
            {
                border: solid 1px #C8C8C8;
                width: 310px;
                height: 25px;
                line-height: 25px;
                font-size: 1em;
                background-color: #ffffff;
                padding-left: 5px;
            }

            /* Fix for IE8 */
            form ul li.columnone input
            {
                *margin-left: -30px;
            }

            form ul li.columntwo input
            {
                *margin-left: -30px;
            }

            form ul li input.selected
            {
                background-color: #F8F8F8;
            }

            form ul li input.file
            {
                background-color: #ffffff;
            }

            form ul li textarea
            {
                border: solid 1px #C8C8C8;
                width: 650px;
                height: 100px;
                font-size: 1em;
                font-family: Verdana;
                resize: none;
            }

                        .textareaCourseContent
            {
                border: solid 1px #C8C8C8;
                width: 650px;
                height: 300px;
                font-size: 1em;
                font-family: Verdana;
                resize: none;
            }

.textareacolumnone
{
    border: solid 1px #C8C8C8;
    width: 300px;
    height: 100px;
    font-size: 1em;
    font-family: Verdana;
    resize: none;
}


form ul li textarea.selected
{
    background-color: #F8F8F8;
}

form ul li select
{
    height: 27px;
    border: solid 1px #C8C8C8;
    min-width: 200px;
    width: 310px;
}

    form ul li select.InstitutionsToAdd
    {
        border: solid 1px #C8C8C8;
        min-height: 22px;
        line-height: 22px;
        padding-left: 5px;
        margin: 5px 0 5px 0;
        min-width: 250px;
        height: auto;
    }

    form ul li select.CareerAreasToAdd
    {
        border: solid 1px #C8C8C8;
        min-height: 22px;
        line-height: 22px;
        padding-left: 5px;
        margin: 5px 0 5px 0;
        min-width: 250px;
        height: auto;
    }

    form ul li select.CareerSectorToAdd
    {
        border: solid 1px #C8C8C8;
        min-height: 22px;
        line-height: 22px;
        padding-left: 5px;
        margin: 5px 0 5px 0;
        min-width: 250px;
        height: auto;
    }

        form ul li select.RelatedCareerSectorToAdd
    {
        border: solid 1px #C8C8C8;
        min-height: 22px;
        line-height: 22px;
        padding-left: 5px;
        margin: 5px 0 5px 0;
        min-width: 250px;
        height: auto;
    }

        form ul li select.JobProfileSkillToAdd
    {
        border: solid 1px #C8C8C8;
        min-height: 22px;
        line-height: 22px;
        padding-left: 5px;
        margin: 0px 0 5px 0;
        min-width: 200px;
        height: auto;
    }

   form ul li select.JobProfileQualitiesToAdd
    {
        border: solid 1px #C8C8C8;
        min-height: 22px;
        line-height: 22px;
        padding-left: 5px;
        margin: 0px 0 5px 0;
        min-width: 200px;
        height: auto;
    }

    form ul li select.ContactsToAdd
    {
        border: solid 1px #C8C8C8;
        min-height: 22px;
        line-height: 22px;
        padding-left: 5px;
        margin: 0px 0 5px 0;
        min-width: 200px;
        height: auto;
    }

   form ul li select.JobProfilesToAdd
    {
        border: solid 1px #C8C8C8;
        min-height: 22px;
        line-height: 22px;
        padding-left: 5px;
        margin: 0px 0 5px 0;
        min-width: 200px;
        height: auto;
    }

   form ul li select.RelatedArticleToAdd
    {
        border: solid 1px #C8C8C8;
        min-height: 22px;
        line-height: 22px;
        padding-left: 5px;
        margin: 0px 0 5px 0;
        min-width: 200px;
        height: auto;
    }

   form ul li select.NationalSubjectsToAdd
    {
        border: solid 1px #C8C8C8;
        min-height: 22px;
        line-height: 22px;
        padding-left: 5px;
        margin: 0px 0 5px 0;
        min-width: 200px;
        height: auto;
    }

   form ul li select.SubCategoryToAdd
    {
        border: solid 1px #C8C8C8;
        min-height: 22px;
        line-height: 22px;
        padding-left: 5px;
        margin: 0px 0 5px 0;
        min-width: 200px;
        height: auto;
    }

form ul li input[type=checkbox], .chkItems
{
    border: none;
    width: 20px;
    background-color: #F3F4F6;
    vertical-align: middle;
}

form ul li input.submit
{
    width: 166px;
    height: 35px;
    font-size: 1em;
    font-weight: bold;
    background-color: #F3F4F6;
}

/* asp.net mvc validation classes */

.input-validation-error
{
    border: 1px solid #FF6A6A;
}

.input-validation-valid
{
    /* Optional: you can set whatever style you want */
}

.field-validation-error
{
    color: #f00;
}

.field-validation-valid
{
    display: none;
}

.readonly
{
    background-color: darkgray;
}

.validation-summary-errors
{
    background: #FFEEEE url(/Content/Images/Icons/Error.png) no-repeat 10px 10px;
    border: solid 1px #FF6A6A;
    padding: 10px 10px 10px 50px;
    margin-bottom: 10px;
    color: #333333;
    border-radius: 0.6em;
    -moz-border-radius: 0.6em;
}

    .validation-summary-errors ul
    {
        list-style-type: disc;
        margin-left: 30px;
    }

        .validation-summary-errors ul li
        {
            margin: 5px 0 5px 0;
        }

.validation-summary-valid
{
    display: none;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	 
	 DATA TABLES
	 	 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

table tr td form
{
    margin-bottom: 20px;
    padding: 0 15px;
    border: solid 1px #f6f6f6;
    background-color: #f6f6f6;
}

    table tr td form input.submit
    {
        width: 166px;
        height: 35px;
        font-size: 1em;
        font-weight: bold;
        border: 1px solid #C8C8C8;
    }

table.data-table td form input
{
    width: auto;
}


table.data-table
{
    background: #f6f6f6;
    border-top: 1px dotted #7a7a7a;
    border-left: 1px dotted #7a7a7a;
}

    table.data-table caption
    {
        background: #b6b6b6;
        padding: 10px;
        text-align: center;
        font-weight: bold;
        border: 1px dotted #7a7a7a;
        border-bottom: none;
    }

    table.data-table td,
    table.data-table th
    {
        padding: 8px;
        border-right: 1px dotted #7a7a7a;
        border-bottom: 1px dotted #7a7a7a;
        vertical-align: middle;
    }

    table.data-table th
    {
        text-align: left;
        background: #ececec;
    }


    table.data-table tr.row-alternating td
    {
        background: #e0e0e0;
    }


/* links to add a new item to the database which have a background icon  */

.newlinkwithicon
{
    background: url(/Content/Images/Backgrounds/CreateOption.png) no-repeat;
    height: 28px;
    width: 176px;
    padding: 2px 0 0 40px;
    margin: 10px 0 0 0;
}

    .newlinkwithicon a
    {
        font-weight: bold;
        text-decoration: none;
        display: block;
    }

.editlinkwithicon
{
    background: url(/Content/Images/Backgrounds/EditOption.png) no-repeat;
    height: 28px;
    width: 176px;
    padding: 2px 0 0 40px;
    margin: 10px 0 0 0;
}

    .editlinkwithicon a
    {
        font-weight: bold;
        text-decoration: none;
        display: block;
    }

/* tables used to hold lists of updateable objects */

.updatelist
{
    width: 100%;
    border: 0;
}

.updatelist .sort {
    color: black;
    text-decoration: none;
}
.sort img {
    vertical-align: middle;
    margin-left: 5px;
}

    .updatelist th
    {
        text-align: left;
        border-bottom: solid 1px #cccccc;
        padding-left: 10px;
        background-color: #ececec;
        height: 30px;
    }


    .updatelist tr.selected, .updatelist tr.alternate
    {
        background-color: #F3F4F6;
    }

    .updatelist td
    {
        height: 30px;
        border-bottom: dashed 1px #cccccc;
        padding-left: 10px;
    }

        .updatelist td.noborder
        {
            border-bottom: none;
        }

    .updatelist th.centre
    {
        text-align: center;
    }

    .updatelist td.centre
    {
        text-align: center;
    }

        .updatelist td.centre img
        {
            margin-top: 10px;
        }

        .updatelist td.centre input
        {
            margin-top: 10px;
        }

    .updatelist td form
    {
        background-color: #ffffff;
        height: 0;
        border: 0;
    }

    .updatelist .sublist
    {
        width: 500px;
        margin: 20px 0 20px 50px;
    }

    .updatelist th.iconfield, .updatelist td.iconfield
    {
        text-align: center;
        width: 24px;
        padding: 0;
    }

        .updatelist td.iconfield form
        {
            background-color: #ffffff;
            height: 0;
            border: 0;
            margin-top: 4px;
            padding: 0;
        }

        .updatelist td.iconfield img
        {
            margin-top: 6px;
        }

/* popup ajax form */

/* cssfreezone - evolved to fix text display from richtextbox */
.cssfreezone
{
}
    /*.cssfreezone html
{
    color: #000;
    background: #FFF;
}*//*margins and padding ZERO*/
    .cssfreezone body,
    .cssfreezone div,
    .cssfreezone dl,
    .cssfreezone dt,
    .cssfreezone dd,
    /*.cssfreezone ul,*/
    /*.cssfreezone ol,*/
    /*.cssfreezone li,*/
    .cssfreezone h1,
    .cssfreezone h2,
    .cssfreezone h3,
    .cssfreezone h4,
    .cssfreezone h5,
    .cssfreezone h6,
    .cssfreezone pre,
    .cssfreezone code,
    .cssfreezone form,
    .cssfreezone fieldset,
    .cssfreezone legend,
    .cssfreezone input,
    .cssfreezone textarea,
    .cssfreezone p,
    .cssfreezone blockquote,
    .cssfreezone th,
    .cssfreezone td
    {
        margin: 0;
        padding: 0;
    }

    .cssfreezone table
    {
        border-collapse: collapse;
        border-spacing: 0;
    }
    /*.cssfreezone fieldset,
.cssfreezone img {
	border:0;
}*/
    /*
	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
    /*.cssfreezone address,
.cssfreezone caption,
.cssfreezone cite,
.cssfreezone code,
.cssfreezone dfn,
.cssfreezone em,
.cssfreezone strong,
.cssfreezone th,
.cssfreezone var {
	font-style:normal;
	font-weight:normal;
}*/



    .cssfreezone ul
    { 
       list-style:disc;
       list-style-position: inside;/*make sure its not outside any <td> etc*/     
       padding-left: 25px; /*restore the indent the bullet point would normally make*/
        
    }

/*.cssfreezone caption,
.cssfreezone th {
	text-align:left;
}*/
/*.cssfreezone h1,
.cssfreezone h2,
.cssfreezone h3,
.cssfreezone h4,
.cssfreezone h5,
.cssfreezone h6 {
	font-size:100%;
	font-weight:normal;
}*/
/*.cssfreezone q:before,
.cssfreezone q:after {
	content:'';
}*/
/*.cssfreezone abbr,
.cssfreezone acronym {
	border:0;
	font-variant:normal;
}*/
/* to preserve line-height and selector appearance */
/*.cssfreezone sup {
	vertical-align:text-top;
}*/
/*.cssfreezone sub {
	vertical-align:text-bottom;
}*/
/*.cssfreezone input,
.cssfreezone textarea,
.cssfreezone select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}*/
/*to enable resizing for IE*/
/*.cssfreezone input,
.cssfreezone textarea,
.cssfreezone select {
	*font-size:100%;
}*/
/*because legend doesn't inherit in IE */
/*.cssfreezone legend {
	color:#000;
}*/

#simplemodal-overlay
{
    background-color: #000;
}

#simplemodal-container
{
    min-height: 500px;
    height: auto;
    width: 750px;
    background-color: #fff;
    border: 3px solid #ccc;
}

    #simplemodal-container a.modalCloseImg
    {
        background: url(../Images/ModalClose.png) no-repeat;
        width: 25px;
        height: 29px;
        display: inline;
        z-index: 3200;
        position: absolute;
        top: -15px;
        right: -18px;
        cursor: pointer;
    }

    #simplemodal-container #popupform
    {
        padding: 5px 8px 8px 8px;
        text-align: left;
        color: #000000;
    }

.ImageResendPassword
{
    border: 0;
    cursor: pointer;
    padding: 0;
    margin: 0;
    background-image: url('/Content/Images/Icons/user_resend.gif');
    background-repeat: no-repeat;
    text-indent: 18px;
    width: 16px;
    height: 16px;
    font-size: 0;
    line-height: 0;
    vertical-align: top;
}


#InstitutionLocations
{
    width: 693px;
    height: 534px;
    border: solid 2px #C8C8C8;
    margin-left: 2px;
}



.ui-dialogbc-osx 
{
   
    -moz-border-radius: 8px 8px 8px 8px;
    -webkit-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px; border-width: 8px 8px 8px 8px;
     /* style the content */
    text-align:left;
    padding:10px;
    margin:13px;
    color:#666;
    font-family:arial;
    font-size:14px;
   
}

.loading
{
    text-align:center;
    margin-top:60px;
}

/* hidden element */

.hidden
{
    display:none;
}

/* Date pickers*/
.datePicker input {
    width: 100px;
}

.option
{
    background-color:#F9F9F9;
    border:solid 1px #cccccc;
    width:211px;
    height:50px;
    padding:5px;
    margin-bottom:10px;
    margin-left: 10px;
    cursor: pointer;
    font-weight: bold;
}

.option img
{
    vertical-align:middle;
    margin-right:10px;
}

.option:hover
{
    background-color:#C8C8C8;
    cursor:pointer;
    color: #ffffff;
    font-weight: bold;
}

.option.selected
{
    background-color:#F1F1F1;
    cursor:pointer;
}

.option.permanentselect
{
    background-color:#F1F1F1;
}

.videoOption
{
    background-color:#F9F9F9;
    border:solid 1px #cccccc;
    width:211px;
    height:50px;
    padding:5px;
    margin-bottom:10px;
    margin-left: 10px;
    cursor: pointer;
    font-weight: bold;
}

.videoOption img
{
    vertical-align:middle;
    margin-right:10px;
}

.videoOption:hover
{
    background-color:#C8C8C8;
    cursor:pointer;
    color: #ffffff;
    font-weight: bold;
}

.videoOption.selected
{
    background-color:#F1F1F1;
    cursor:pointer;
}

.videoOption.permanentselect
{
    background-color:#F1F1F1;
}

#videoHolder
{
    width: 600px;
    height: 338px;
}

#videoHolderSmall
{
    width: 320px;
    height: 180px;
}