/* sercostyle2.css  20-9-06 */

@import url("../ccmlayout.css");

/* specifically import just for cepda use. Custom style sheets dont support cepda so   */
/* import the ccmoriginal cepda style . The cepda will import this style and */
/* ignore the rest of the style sheet below. */
@import url("../facilityserco_cepda.css") handheld;

/* printer friendly styling  */

@import url("../printerfriendly.css") print;
/* if not being used by cepda pages then rest of style sheet imported for all other types of media */
@media screen, aural, braille, print, projection, tty, tv, embossed {
    /* -------------------------------------------------------------------------- */
    /* -  Eportal common customisable features                                  - */
    /* -------------------------------------------------------------------------- */

    .None{
        /* No style */
    }

    /* #GENERAL MAIN HEADER/SIDEMENU DEFINITIONS                                  */
    /* background colour for the login/out header  */
    div.loggedout {

        background-image: url(../../images/Bespoke/serco2/topnav_bkgd.gif);
        background-repeat: repeat-x;

    }

    #headercontainer {

        background: url(../images/acs/HorizontalSprite.png) repeat-x;
        height: 32px; background-position: 0px 0px;

    }

    /* Eportal main header definitions. Set background colour etc here */
    table.header, div.mainheadercontainer {

        color: #FFFFFF;
        background-color: #FFFFFF;
        /**background-color: transparent;*/
        background-image: url(../../images/Bespoke/serco2/logo.gif);
        background-repeat: no-repeat;
        background-position: top left;
        height: 65px;


    }

    /* Add header logo here. keep the logo images height below 65px */
    table.header td.logo {

        /* add specific definitions here */

    }

    div.headerbuttonscontainer {

        margin-left:40%;


    }

    /* login header information user:,dataset: etc */

    td.login {

        color: #6699cc;
        font-size: 7pt;

    }

    /* header definitions for the logged out page */
    div.loggedout {

        background-image: url(../../images/Bespoke/serco/serco_logo.gif);
        background-repeat: no-repeat;
        background-position: left;

    }


    /* Side table which holds the main menu */
    #mainlayout  {

        background-color: transparent;

    }

    #mainlayout td.menu {

        padding-top:10px;
        font-size: 8pt;

    }

    /* side navigation bar images contained here */
    body.sidemenu {

    }

    body.loginStyle{
        background-color: #ffffff;
        font-family: Arial, Helvetica, sans-serif;
        width: auto;
        position: absolute;
        left: 0px;
        top: 100px;
        width: 70%;
        height: 50%;
    }

    body.loginStyle3{
        color: #ffffff;
        background-color: #6699cc;
    }

    body.loginStyle2{
        background-color: transparent;
        color: #ffffff;
    }

    .loginStyleCachedItems{
        background-color: transparent;
        font-size: 10pt;
        font-weight: bolder;
        color: #ffffff;
        font-family: Arial, Helvetica, sans-serif;
        text-align:left;
    }

    /* ----------------------------------------------------------------------- */
    /* @menu style definitions   non graphical                               - */

    /* Adjust the menu width, add bullets here */
    /* anchor font style defined in top-level anchor defn*/
    #nav li a {
        width: 10em;
        width : 11.7em;
        display : block;
        color : #CC0000;
        font-weight : bold;
        /* text-decoration : none; */
        background-color : #ffffff;
        padding-left: 1.3em;
        padding-top: 0.4em;
        padding-bottom: 0.4em;
        background-position: 3% 54%;

    }


    /*child selector defn not picked up by IE but is by Firefox*/
    html>body #nav li a {

        width: 9.9em;

    }

    /* second-level lists, submenus adjusted here */
    #nav li ul {

        position : absolute;
        left: -999em;
        margin-left : 11.34em;   /* when adjusting width need to adjust the left pos for IE*/
        margin-top : -2.15em;

    }

    /*child selector defn not picked up by IE but is by Firefox*/
    html>body #nav li ul { /* second-level lists */

        margin-left : 11.2em;   /* when adjusting width need to adjust the left pos*/

    }

    /* rollover menu image declared here */
    #nav li a:hover {
        background-color: #f5f5f5;
        background-image: url(../../images/Bespoke/serco2/sidenav_plainoff.gif);
        background-repeat: no-repeat;
        background-position: 3% 54%;

    }


    /* - Graphical menu style definitions                        - */
    .Leftmenu {
        font-size: 9px;
        color: #FFFF00;
        text-decoration: none;

    }

    .Leftmenu a:link {

        color: #0000aa;

    }

    .Leftmenu a:visited {

        color: #666699;

    }

    .Leftmenu a:hover {

        color: #6699CC;
        text-decoration: none;

    }

    /* -  end of menu style definitions                                          - */
    /* --------------------------------------------------------------------------- */

    /* #END OF GENERAL MAIN HEADER/SIDEMENU DEFINITIONS                            */
    /* --------------------------------------------------------------------------- */


    /* --------------------------------------------------------------------------- */
    /* - Overall eportal/hefe common definitions used throughout all pages.      - */
    /* - Not specific page definitions. Will affect all pages if changed.        - */

    /* #GENERAL BACKGROUND COLOUR                                                 */
    /* background colour for the body, general table data information, max calendar etc */
    body, table, .backgroundcolor, .forummessages iframe, .todayButton, .arrowButton, table.bitletHolder,
    table.pageHolder, tr.alertmsg, .pagecontainer, table.bgcolour, .noticeboardheading, table.enrol, table.coursestatus th.sub3  {

        background-color: #FFFFFF;

    }

    /* #GENERAL HEADER BACKGROUND COLOUR                                           */
    /* background colour for the headers of tables, max calendar etc               */
    TH.headerMain, .maxCalHeaderDates, .generalheaderbackgroundcolor, .maxCalHeaderDates, TR.gridHeader,
    TH.header, TD.bitTitle, td.header, .tdHighlighted, TH.smallHeaderbgcolour, table.standard th,
    table.standard td.subheader, table.standard td.filler, .tableheadbgcolor, .sort-table .tableheadbgcolor,
    .tt_title, .sort-arrow, TH.headerbgcolour, td.formlabel, div.formlabel, .reg_calendar .bgcolor1, .bgcolor1unread,
    table.footer, table.about th, .tablehead, div.eventselectionstitle, div.eventtemplatetitle {

        background-color: #6699cc;

    }

    /* #I added this one Karen Hine                                                 */
    /* background colour for formlabel */
    td.formlabel, .labelstyle
    {
        background-color: #B9B9B9;
    }

    /* #GENERAL HEADER FONT COLOUR                                                  */
    /* font colour for the headers of tables, max calendar,pop up windows etc       */
    TH.gridTitle, TH.header, TD.bitTitle, td.header, .tdHighlighted,
    TH.smallHeaderbgcolour, .labelstyle, table.standard th, table.standard td.subheader, TH.headerbgcolour,
    td.formlabel, div.formlabel, TH.headerMain, .maxCalHeaderDates, .generalheaderbackgroundcolor a,
    .tableheadbgcolor, .sort-table .tableheadbgcolor, .tt_title, .reg_calendar,
    TD.footer, table.about th, .tablehead, div.eventtemplatetitle, div.eventselectionstitle, table.eventtitle th,
    div.login, div.setvalues, div.logindropdown, table.enrol th, table.masterttparam th, #modHolders table th,
    table.coursestatus th, table.coursestatus th.sub1 {

        color: #FFFFFF;

    }

    /* #GENERAL TABLE FONT COLOUR                                                 */
    /* font colour for the content of tables, popup calendars, discussion groups  */
    td, p, h2, h3, li, TR.bgcolor1, TR.bgcolor1unread, .tablerowbgcolor1, .max_calendar .bgcolor1, TR.bgcolor2, .tablerowbgcolor2,
    a.blacklink, .max_calendar, .max_calendar .holiday, .max_calendar .nonattendanceday, .caption, TR.bgcolor2unread,
    .max_calendar_legend .holiday,.max_calendar_legend .nonattendanceday,TD.gridData,
    td.saturday, td.sunday, td.today, .indentText, .labeltext, .forumstatsheader, .tdNormal, .nboardtext,
    .selectlistbox, div.standardheader, .todayButton, .arrowButton, .bitlet, .bitlet a, .bitletmax,
    .reg_calendar .weekday, h4, h5, h6, h3.about, .addressHeading, td.largefont, span.divTitle, div.elementTitle,
    DIV.rowdialog SPAN.labeldialog {
        text-decoration: none;
        color: #000000;

    }

    TR.hoverClass {
        color: #000000;
        font-size: 10px;
        background-color: #FFFF00;
    }

    /* #GENERAL TABLE HEADER FONT SIZE                                                 */
    /* font header size for tables  */
    TH.gridTitle, .maxCalHeaderDates, TD.bitTitle, .forumstatsheader, .nboardheader, #topnav a,
    .addressHeading, .tablehead, table.masterttparam th {

        font-size: 9pt;
    }


    /* #GENERAL TABLE FONT SIZE NORMAL                                                 */
    /* font colour for the content of tables  */
    body, table, td, TD.gridData, TH.header, td.header, .noticeBoardIndex, .indentText, .vsmall,
    TH.smallHeaderbgcolour, div.standardheader, TH.headerMain, .maxCalHeaderDates, .interruptiontext
    .generalheaderbackgroundcolor a, a.headerlink, a.blacklink, .suspensiontext, table.about th, .noscript,
    table.masterttparam td, table.mastertimetable td, table.ttrefsearchinner td, table.ttrefsearch td {

        font-size: 11px;
    }

    /* #GENERAL TABLE FONT SIZE LARGE                                                    */
    /* font size for for general table information, calendar headers, max calendar days  */
    TR.bgcolor1, .tablerowbgcolor1, .max_calendar .bgcolor1, .max_calendar .weekday,
    TR.bgcolor2, .tablerowbgcolor2, .max_calendar .weekend, div.eventselectionstitle, table.enrol th,
    p.eventtext, div.eventtemplatetitle, table.events th, .weekstructureheader, table.makebookingtitle, .title, table.enrol td,
    #modHolders table th.subhdr, #modHolders table th.subhdr1   {

        font-size: 10px;

    }

    TR.bgcolor1unread, TR.bgcolor2unread {
        font-size: 10px;
        font-weight: bold;
        color: #000000;
    }

    TD.bgpublished, TD.bgcompleted, TD.bgread {
        background-color: #4D9900;
    }

    TD.bgnotpublished, TD.bgnotcompleted, TD.bgnotread {
        background-color: #FF5959;
    }

    /* #GENERAL FONT TYPE                     */
    /* font colour for the content of tables  */
    body, table, td, TD.gridData, TR.bgcolor1, TR.bgcolor1unread, .tablerowbgcolor1, .max_calendar .bgcolor1, .max_calendar .weekday,
    TR.bgcolor2, TR.bgcolor2unread, .tablerowbgcolor2, .max_calendar .weekend, TH.header, TD.bitTitle, .noticeBoardIndex,
    .indentText, .nboardheader, .tdHighlighted, .tdNormal, .selectlistbox, .vsmall, TH.smallHeaderbgcolour,
    div.standardheader, TH.headerbgcolour, td.formlabel, div.formlabel, .tableheadbgcolor, .tableheadbgcolor,
    .sort-table .tableheadbgcolor, .tt_title, #topnav a, .largelink, .suspensiontext, .interruptiontext,
    .addressHeading, .headtext, table.about, table.about th, td.largefont, .fontClass, .capfontClass,
    .tablehead, span.divTitle, div.elementTitle, DIV.rowdialog SPAN.labeldialog, .noscript, table.events th, table.enrol td,
    table.enrol th, TH.dayTitle, div.eventselectionstitle, table.makebookingtitle, .title, div.eventtemplatetitle,
    table.masterttparam th {

        font-family: Arial, Helvetica, sans-serif;

    }

    /* GENERAL FONT WEIGHT
    /* This style defines the border which is used throughout the whole system for tables,cells etc */

    TH.headerbgcolour, td.formlabel, div.formlabel, .bitletmax, TH.gridTitle, TH.headerMain, .addressHeading
    .maxCalHeaderDates, .tableheadbgcolor, .noticeBoardIndex, .tt_title, .reg_calendar, table.about th,
    TH.smallHeaderbgcolour, #topnav a, #nboardcontainer .nboardheader, .labelstyle, .labelstyleedit,
    .capfontClass, .tablehead, div.elementTitle, span.divTitle, .tab, DIV.row SPAN.label, DIV.rowdialog SPAN.labeldialog,
    table.eventtitle th, table.enrol th, div.eventselectionstitle, div.eventtemplatetitle, TH.dayTitle, table.makebookingtitle,
    .title, #modHolders table th, table.roomquerydata th, a.noscriptlink {

        font-weight: bold;

    }

    /* ALTERNATE ROW COLOURS
    /* alternate row colours for general table information, calendar headers, max calendar days,
       popup calendars */
    TR.bgcolor1, TR.bgcolor1unread, .tablerowbgcolor1, .max_calendar .bgcolor1, .max_calendar .weekday, .forumpostwithbackground,
    .forummessages, TD.bgcolor1, TD.bgcolor1unread, .tdNormal, .selectlistbox, #statsEntryTable, tr.question,
    .sort-table TR.bgcolor1, .sort-table TR.bgcolor1unread, .forumownerwithbackground, .title {

        background-color: #F0F0F0;

    }

    TR.bgcolor2, TR.bgcolor2unread, .tablerowbgcolor2, .max_calendar .weekend, td.saturday, td.sunday,
    .forumchildheader, .sort-table TR.bgcolor2, .sort-table TR.bgcolor2unread, .forumheading {

        background-color: #D8D8D8;

    }

    /* GENERAL BORDER DEFINITION
    /* This style defines the border which is used throughout the whole system for tables,cells etc */
    .max_calendar .today,.max_calendar .weekday,.max_calendar .weekend, .max_calendar .holiday,
    .max_calendar .nonattendanceday, .max_calendar_legend .holiday, .max_calendar_legend .nonattendanceday,
    .max_calendar_legend .today, table.events, .odd, .even, TH.dayTitle, div.eventtemplatetitle, div.eventselectionstitle,
    #modHolders, #modHolders table, #regulationscontainer table, div.addcolsoverflow {

        border: 1px solid #990000;

    }

    /* GENERAL NO BORDER DEFINITION
    /* This style defines no border which is used throughout the whole system for tables,cells etc */
    #mainlayout, td.bitletright a, td.bitletright a:visited, .bitlet a, td.bitletmaxbacklink a,
    .generalheaderbackgroundcolor a, a.headerlink, a.blacklink, table.makebookingtitle {
        text-decoration: none;
        border:0;

    }

    /* GENERAL TEXT DEFINITION
    /* This style defines no text decoration which is used throughout the whole system */
    td.bitletright a, td.bitletright a:visited, .bitlet a, td.bitletmaxbacklink a, a, table a, a:link,
    table a:hover, TH.headerMain, .maxCalHeaderDates, .generalheaderbackgroundcolor a, TH.header,
    TD.bitTitle, .noticeBoardIndex, .indentText, a.headerlink, a.blacklink, table.linkholder a, .largelink {

        /* text-decoration: none; */

    }

    /* GENERAL CURSOR DEFINITION
    /* This style defines no text decoration which is used throughout the whole system */
    .bitlet, .bitletmax, .MarkRead, .MarkNotRead, .Del, .Modify, #nboardcontainer .nboardheader, .nboards p,
    td.bitletup, a {

        cursor:  pointer;

    }


    /* End of eportal/hefe common definitions                                         */
    /* ------------------------------------------------------------------------------ */

    /* ------------------------------------------------------------------------------ */
    /* - SPECIFIC HEFE common definitions used throughout all pages.                - */
    /* -  Not specific page definitions. Will affect multiple pages if changed.     - */

    /* #GENERAL BACKGROUND COLOUR FOR HEFE                                          - */
    /* background colour for tables, divs etc in events creation etc                - */
    #eventscontainer, #selectionsDiv, #templatesDiv, table.roomquerydata, table.locatebookingdetails {

        background-color: #e9e9e9;

    }

    /* #GENERAL BACKGROUND COLOUR FOR HEFE HEADERS                                              */
    /* background colour for table headers, divs etc in events creation etc                    */
    div.login, div.setvalues, div.logindropdown, table.enrol th, TH.dayTitle, #modHolders table th.subhdr,
    #modHolders table th.subhdr1, #regulationscontainer table tr.header2, table.coursestatus th.sub2 {
        background-color: #d7d7d7;
    }


    /* #GENERAL FONT COLOUR FOR HEFE                                        */
    /* font colour for Headers of tables, cells, page titles etc            */
    p.eventtext, .weekstructureheader, div.weekstructurerow span.weekstlabel, table.makebookingtitle, .title, div.row,
    #enrolstartcontentcontainer hr, table.enrol td, div.row span.label, table.ttrefsearch td, table.ttrefsearchinner td,
    TH.dayTitle, table.masterttparam td, table.mastertimetable td, #modHolders table, table.coursestatus th.sub2,
    table.coursestatus th.sub3, table.roomquerydata th, table.locatebookingdetails td {

        color: #000000;

    }

    /* #TRANSPARENT BACKGROUND FOR HEFE                                              */
    p.eventtext, #inputsDiv, table.eventtitle, table.events th, table.ttrefsearch td, table.ttrefsearchinner td, table.mastermain,
    table.mastermain tr, table.masterttparam, table.masterttparam tr, table.masterttparam td, table.mastertimetable,
    table.mastertimetable td, #makebookingformcontainer {

        background-color: transparent;

    }

    /* #SCREENREADER AUDIO SUPPORT                                                      */
    p.eventtext, .title {

        voice-family: paul;
        stress: 20;
        richness: 90;

    }

    /* End of hefe common definitions                                         */
    /* ---------------------------------------------------------------------- */

    /* ---------------------------------------------------------------------- */
    /* - @body style definitions                                            - */

    body {

        font-style: normal;
        font-variant: normal;
        font-weight: normal;

    }

    body.calendar {

        background-color: #D8D8D8;

    }


    /* -  end of body style definitions                                     - */
    /* ---------------------------------------------------------------------- */

    /* ---------------------------------------------------------------------- */
    /* - @button style definitions                                          - */

    .button, .disabledbutton, .buttonsmall, .disabledbuttonsmall, .freebutton, .mainheaderbutton,
    .logoutButton, .loginButton, .disabledlogoutButton, .buttondark, .todayButton, .arrowButton, .headerbutton,
    .buttonlarge .QLAddButton{
        cursor:pointer;
        border:outset 1px #ccc;
        color:#666;
        font-weight:bold;
        padding: 1px 1px;
        background:url(../../images/Bespoke/serco/formbg.gif) repeat-x left top;
        font-size: 11px;
    }

    .buttonsmall, .disabledbuttonsmall {


    }

    .buttondark {

        background-color: #6699CC;
        color: #D9E6F3;

    }

    .logoutButton, .disabledlogoutButton  {
        font-weight: normal;

    }

    /* buttons contained in the header in cepda */
    .headerbutton {

        border: #FFFFff 1px solid;
    }

    /* calendar navigation buttons */
    .todayButton {

        font-weight: normal;
        background-image:none;
        border:0;

    }

    .arrowButton {

        background-image:none;

    }

    .mainheaderbutton {

        color:  #060606;
        background-color: #fff;
        background-image: none;
        border-top: none;
        border-bottom: #d9d9d9 1px solid;
        border-right:#d9d9d9 1px solid;
        border-left:#d9d9d9 1px solid;
    }


    button[class="disabledbutton"], input[class="disabledbutton"], button[class="disabledbuttonsmall"],
    input[class="disabledlogoutButton"] {

        color: #A19C9C;
    }

    .QLAddButton{
        /* Customise */
    }

    /* - end of button style definitions                                          - */
    /* ---------------------------------------------------------------------------- */

    /* ---------------------------------------------------------------------------- */
    /* @input and html element style definitions                                    */

    /* There are limits to what browsers will support.                               */
    /* For list of what IE and Firefox support look at link below                    */
    /* http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/ */

    /* defines all select boxes throughout the system */
    select, input, textarea {

        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        border-color: #C4C1C1;

    }

    /* defines all text inputs, but not checkboxes or radionbuttons and input buttons  */
    /* are defined in section above                                                    */
    /* checkboxes,radio buttons - firefox or ie will not support background-color or color        */
    /* even when setting the input element                                                        */
    input {

        /* add specific definitions here */
    }

    /* textarea elements defined here */
    textarea {

        /* add specific definitions here */

    }

    select {

        /* add specific definitions here */
    }


    /* end of input style definitions                                              */
    /* --------------------------------------------------------------------------- */

    /* --------------------------------------------------------------------------- */
    /* @bitlet style definitions                                                 - */

    td.bitletleft {

        text-decoration: none;

    }
    /* add the more information image from bitlets here */
    td.bitletright {

        background-image: url(../../images/Bespoke/serco/moreinfo_txt.gif);
        background-repeat: no-repeat;
        background-position: left center;

    }

    td.bitletright a{
        text-decoration: none;
    }

    td.bitlethickbox {

        background-image: url(../../images/Bitlets/maximize.gif);
        background-repeat: no-repeat;
        background-position: left center;

    }

    td.bitlethickbox{
        text-decoration: none;
    }

    td.bitletright a:visited {

        /* add specific definitions here */

    }


    /* defines the bitlet heading eg find teacher etc */
    .bitlet {
        font-size: 10pt;
        font-weight: bolder;
        font-style: Italic;
        color: #0860a8;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #e8e8e8;
        background-image: url(../../images/Bespoke/serco/titlebkgd.gif);
        background-repeat: repeat-y;
        background-position: left;
    }

    /* bitlet heading link */
    td.bitlet a {

        font-size: 10pt;
        font-weight: bolder;
        font-style: Italic;
        color: #0860a8;

    }

    td.bitlet a:hover {

        color: #FF6600;

    }

    .bitletmax {
        font-size: 10pt;
        font-weight: bolder;
        font-style: Italic;
        color: #0860a8;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #e8e8e8;
        background-image: url(../../images/Bespoke/serco/titlebkgd.gif);
        background-repeat: repeat-y;
        background-position: left;
    }

    /* add the back button to the bitlets page here */
    td.bitletmaxbacklink {

        background-image: url(../../images/Bespoke/serco/backlink.gif);
        background-repeat: no-repeat;
        background-position: left bottom;

    }

    td.bitletmaxbacklink a {

        /* add specific definitions here */

    }

    td.bitletmaxright {

        /* add specific definitions here */

    }

    /* add close bitlet image here */
    div.bitletup {

        background-image: url(../../images/Bespoke/serco/closebitlet.gif);
        background-repeat: no-repeat;
        background-position: left bottom;
        padding-left:18px;

    }

    div.bitletup a{
         text-decoration:none;
    }

    td.bitletup {

        background-image: url("../../images/Buttons/up.gif");
        background-repeat: no-repeat;
        background-position: center;

    }


    /* add open bitlet image here */
    div.bitletdown {

        background-image: url(../../images/Bespoke/serco/openbitlet.gif);
        background-repeat: no-repeat;
        background-position: left bottom;
        padding-left:18px;

    }

    div.bitletdown a{
        text-decoration: none;
    }

    td.bitletdown {

        background-image: url("../../images/Buttons/down.gif");
        background-repeat: no-repeat;
        background-position: center;

    }

    table.bitletHolder {

        /* add specific definitions here */

    }

    table.borderHolder {

        /* add specific definitions here */

    }

    table.pageHolder {

        /* add specific definitions here */

    }

    .largelink {

        font-size: 10pt;

    }

    .suspensiontext {

        background-color: #F58383;

    }

    .interruptiontext {

        background-color: #BBBBBB;

    }

    .addressHeading {

        text-align:left;

    }

    .headtext {

        font-size: 10px;
        font-weight: bold;
        color: #6699cc;

    }


    /* @table definitions for bitlet tables */
    .sort-table {

        padding: 1px;
        border-spacing: 0px;

    }

    .sort-table THEAD {
        /* add specific definitions here */


    }

    /* cell header defn. for bitlet tables */
    .sort-table .tableheadbgcolor {
        font-size: 10px;
    }

    /* alternate row colours for bitlet table information */
    .sort-table TR.bgcolor1 {

        font-size: 9px;

    }

    .sort-table TR.bgcolor2 {

        font-size: 9px;

    }

    /* alternate row colours for bitlet table information */
    .sort-table TR.bgcolor1unread {

        font-size: 9px;

    }

    .sort-table TR.bgcolor2unread {

        font-size: 9px;

    }

    /* row header defn. for bitlet tables */
    .tt_title {

        font-size: 11px;

    }

    /* styles defining the descending/ascending buttons in the bitlet table headers */
    .sort-arrow {

        background-position: center center;
        background-repeat: no-repeat;

    }

    /* the up/down images located in table headers */
    .descending {

        background-image: url("../../images/Bespoke/serco/down.png");

    }
    .ascending {

        background-image: url("../../images/Bespoke/serco/up.png");

    }



    /* -  end of bitlet style definitions                                         - */
    /* ---------------------------------------------------------------------------- */

    /* ---------------------------------------------------------------------------- */
    /* - #SPECIFIC STYLE DEFINITIONS                                              - */

    /* @table style definitions                                                     */


    table {
        /* specific top level table definitions here */
        padding:1px;

    }

    /*  links throughout all pages */
    a, table a, a:link {

        color: #0860a8;

    }

    table a:hover {

        color: #FF6600;

    }

    /* Grid view table */
    TABLE.gridTable {

        border-style: solid;
        border-color: #3B2353;

    }

    /* room booking table  */
    table.bgcolour {

        /* add specific definitions here */
    }

    /* student info table from results entry templates */
    table.navigation {

        background-color: transparent;

    }

    /* about facility eportal info */
    table.about {

        border-collapse: collapse;
        padding: 6px;

    }

    table.about tr {

        /* add specific definitions here */

    }

    table.about td {

        font-size: 12px;
        color: #000000;
        text-decoration: none;
        text-align: left;
        padding-left: 10px;
        border: thin solid black;

    }

    table.about td p {

        color: #000000;
    }


    table.about th {

        text-align: left;
        padding: 3px;

    }

    table.linkholder {

        background-color: transparent;

    }

    #AbsTable td {

        text-align:center;

    }

    /* table which holds questions in conduct review */
    #tree td {

        padding:0;

    }

    /* style definitions for labels and Sets table Row Header colour in room booking etc   */
    TH.headerbgcolour {

        font-size: 11px;
        padding-left: 3px;

    }

    /* form label style defns for pages such as my details,change password etc. */
    td.formlabel, div.formlabel {

        font-size: 11px;
        padding: 2px 3px 5px 3px;

    }

    TR.tthighlight {

        border: #005A00 2px solid ;
        background-color: #ccffcc;
    }



    /* Grid View Header */
    TR.gridHeader {

        /* add specific definitions here */

    }

    /* Grid View Header Titles*/
    TH.gridTitle {

        font-size: 10pt;

    }

    TD.gridData {
        border-top-width: 0px;
        border-bottom-width: thin;
        border-left-width: 0px;
        border-right-width: thin;
        font-weight: normal;
        padding-right: 3px;
        padding-left: 3px;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-top-color: #666666;
        border-right-color: #666666;
        border-bottom-color: #666666;
        border-left-color: #666666;
    }

    /* general table cell style for labels,content etc. in bitlets page and other web pages */
    td {

        /* specific top level table cell definitions here */


    }

    /* images aligning and underline page titles throughout the whole system */
    td.pagetitlebullet {

        background-image: url(../../images/Bespoke/serco/pagebullet.gif);
        background-repeat: no-repeat;
        background-position: left;

    }

    td.pagetitleunderline {
        font-family: Arial, Helvetica, sans-serif;
        color: #6699cc;
    }

    td.pagetitleunderlinewide {

        /* add specific definitions here */

    }

    /* cells holding the Active discussion names  */
    TD.bgcolor1 {

        /* add specific definitions here */

    }
    /* cell containing the information icon for results/sats entry */
    td.info {

        background-image: url(../../images/Bespoke/serco/infobutsmall2.gif);
        background-repeat: no-repeat;
        background-position: left;

    }

    p  {

        /* add specific definitions here */

    }

    h2, h3   {

        /* add specific definitions here */
    }

    h2 {

        font-size: 14px;

    }

    h3 {

        font-size: 11px;

    }


    h3.about {

        /* add specific definitions here */

    }

    li {

        /* add specific definitions here */

    }

    .redtext, .bigRedtext {

        color: #DC241F;

    }

    .bigRedtext {

        font-size: 14pt;

    }

    /* start/end text for date ranges */
    .caption {

        font-size: 10pt;

    }

    /* font for noscript display */
    .noscript, a.noscriptlink {

        color: #C11C41;

    }

    /* table which hold the attendance category options */
    .selectlistbox {
        font-size:115%;
        font-weight:700;
        padding: 0px;
        border: thin ridge #6699cc;
    }

    /* Highlights for review statistics  */
    .highlight {

        color: #ffffff;
        background-color: #000000;

    }

    /* Highlights for attendance categories  */
    .tdHighlighted {

        font-size:115%;
        font-weight:700;
        padding: 0px;

    }

    .tdNormal {

        font-weight:700;
        padding: 0px;

    }

    /* highlights for the am/pm columns in roll call */
    .tableheadbghilite {

        background-color: #d8d8d8;

    }

    /* highlights off for the am/pm columns in roll call */
    .tableheadbghiliteOff {

        background-color: transparent;

    }

    .tablerowbgcolorhilite2 {
        border-right-width: 2px;
        border-right-style: inset;
        border-right-color: #CCCCCC;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #FFFFFF;
    }

    .tablerowbgcolorhilite1 {
        border-right-width: 2px;
        border-right-style: inset;
        border-right-color: #CCCCCC;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #FFFFFF;
    }

    a.previous {

        background-image:url("../../images/Bespoke/serco/Previous.gif");
        background-position:  0 0;
        background-repeat: no-repeat;
        padding-top: 3px;
        padding-bottom: 30px;

    }

    a.previous:hover {

        background-image:url("../../images/Bespoke/serco/Previous_f2.gif");
        background-position:  0 0;
        background-repeat: no-repeat;
        padding-top: 3px;
    }

    a.next {

        background-image:url("../../images/Bespoke/serco/Next.gif");
        background-position:  0 0;
        background-repeat: no-repeat;
        padding-top: 3px;
        padding-bottom: 30px;

    }

    a.next:hover {

        background-image:url("../../images/Bespoke/serco/Next_f2.gif");
        background-position:  0 0;
        background-repeat: no-repeat;
        padding-top: 3px;
    }


    /* header definition for the School Calendar bitlet, Registration */
    TH.headerMain, .maxCalHeaderDates  {

        text-transform: capitalize;

    }

    .maxCalHeaderDates {

        /* add specific definitions here */

    }


    /* links contained within  headers throughout eportal including tables etc. */
    .generalheaderbackgroundcolor a {

        font-weight: normal;

    }


    /* cell header defn. for general tables */
    .tableheadbgcolor {

        font-size: 11px;

    }

    tr.noticeboardmessage {

        background-color: #EAE7EF;

    }

    TH.header {

        text-transform: capitalize;

    }

    TD.bitTitle {

        /* add specific definitions here */

    }

    td.footer {
        /* add specific definitions here */
    }

    table.footer tbody tr td {

        font-size: 9pt;
        color:#fff;

    }

    table.footer tbody tr td .left{

        text-align:left;
        float:left;

    }

    table.footer tbody tr td .right{

        text-align:right;
        float:right;

    }

    table.footer {

        /* add specific definitions here */

    }

    /* defines the popup calendars header */
    td.header {

        /* add specific definitions here */
    }

    /* defines the popup calendars days */
    td.saturday {

        /* add specific definitions here */
    }

    td.sunday {

        /* add specific definitions here */
    }

    td.today {

        background-color: #CCCCCC;

    }

    /* Sets fonts in Calendar */
    a.AFTERTODAY {
        font: 9pt Arial, Helvetica, sans-serif;
        color: #339933
    }

    /* Sets fonts in Calendar */
    a.TODAY {
        font: 9pt Arial, Helvetica, sans-serif;
        color: white;
        font-weight: bold;
        background-color: #6699cc;
        padding: 2px;
    }


    /* Sets fonts in Calendar */
    a.BEFORETODAY {
        font: 9pt Arial, Helvetica, sans-serif;
        color: #797979
    }

    /* Alert Creation styles -- span,p etc */

    .noticeBoardIndex {
        color: #000000;
        background-color:#AAAAAA;
        line-height: 8pt;
        text-align: right;
    }

    .expiredtext {

        color: #F6C8C7;

    }

    .expirestext {

        color: #FF6600;
    }

    .MarkRead {

        color: #ffffff;
        background-color: #555500;

    }

    .MarkNotRead {

        color: #ffffff;
        background-color: #550055;

    }

    tr.alertmsg {

        /* add specific definitions here */

    }

    .indentText {

        text-indent: 10px

    }

    /* label text defns for discussion groups */
    .labeltext {

        /* add specific definitions here */

    }


    /* Deletion style in noticeboard */
    .Del {

        color: #FFFFFF;
        background-color: #990000;

    }

    /* modify style in noticeboard */
    .Modify {

        color: #CCCCCC;
        background-color: #FF9900;

    }

    /* ------------------------------------------------------------------------ */
    /* @calendar style definitions */

    /*General Look and Feel for the Maximised Calendar*/
    .max_calendar {
        /* add specific definitions here */

    }

    /*header containing days of the week */
    .max_calendar .bgcolor1 {

        /* add specific definitions here */

    }

    /*
    Control the days of the week that run along
    near the top of the calendar.
    */
    .max_calendar .today {
        background-color: #FF9900;
        width: 100px;
        height: 70px;
        padding: 2px;
        border: 1px solid #333333;
    }

    .max_calendar .weekday {
        width: 100px;
        height: 70px;
        padding: 2px;
        border: 1px solid #333333;
    }

    .max_calendar .weekend {
        width: 56px;
        height: 80px;
        padding: 2px;
        border: 1px solid #333333;
    }

    .max_calendar .holiday {

        background-color: #C4FF9B;
        width: 100px;
        height: 70px;
        padding: 2px;

    }

    .max_calendar .nonattendanceday {

        background-color: #8AE8FF;
        width: 100px;
        height: 70px;
        padding: 2px;

    }

    /* anchor link to define the calendar year/month links */
    a.headerlink {

        font-weight: normal;
        color: #ffffff;

    }

    /* anchor link to define the calendar week number on the left hand side links */
    a.blacklink, .blacklink {

        font-weight: normal;

    }
    /* table which contains anchor links to the calendar day number  */
    /* anchor link to the calendar day number  */
    table.linkholder a {
        color: #333333;
        font-weight: bold;
        text-decoration: underline;	/* add specific definitions here */

    }

    .max_calendar_legend .holiday {

        background-color: #C4FF9B;
        width: 10px;
        height: 10px;
        padding: 2px;

    }

    .max_calendar_legend .nonattendanceday {

        background-color: #8AE8FF;
        width: 10px;
        height: 10px;
        padding: 2px;

    }

    .max_calendar_legend .today {
        background-color: #FF9900;
        width: 10px;
        height: 10px;
        padding: 2px;
        font-weight: bold;
    }


    /*And the Look and feel for the original non-maximised calendar*/
    .reg_calendar {
        background-color: #f0f0f0;
        font-size: 11px;
        border: 1px solid #FFFFFF;
    }

    .reg_calendar .today {
        color: #FFFFFF;
        border: 1px solid #FFFFFF;
        background-color: #CC3300;
    }

    .reg_calendar .weekend {
        color: #666666;
        background-color: #d8d8d8;
    }

    /* set the style of the calender day header row */
    .reg_calendar .bgcolor1 {

        /* add specific definitions here */

    }

    /* set the style of the calender day header cells */
    .reg_calendar .bgcolor1 td {

        /* add specific definitions here */

    }

    .reg_calendar .weekday {

        /* add specific definitions here */
    }

    .reg_calendar .holiday {

        color: #3399FF;

    }

    .reg_calendar .nonattendanceday {

        color: #F53B2D;

    }

    /* ----------------------------------------------------------------------------------- */

    /* menu used for lecturers details */
    #topnavcontainer {
        margin-left: -32px;

    }

    #topnav ul {

        width: auto;

    }

    #topnav li {

        display: inline;
        padding: 4px 1.6em;
        color: #EFE7F7;
        background-image:url("../../images/Bespoke/serco/menuborder.jpg");
        background-position:  center right;
        background-repeat: no-repeat;

    }

    #topnav a  {
        color:#6699cc;
    }

    #topnav a:hover  {
        text-decoration: underline;
    }

    #currenttop strong a {
        color: #6699cc;
        background-image: url(../../images/Bespoke/serco/moreinfo.gif);
        background-repeat: no-repeat;
        padding-left:1.8em;
        padding-top:0.4em;
        padding-bottom:0.4em;
        background-repeat: no-repeat;
        background-position: 3% 54%;
    }

    /* discussion forum styles  */

    .forumstatsheader {

        /* add specific definitions here */

    }

    .forummessages {

        border-top-width: thin;
        border-bottom-width: thin;
        border-left-width: thin;
        border-right-width:thin;

    }

    .forumowner {

        /* add specific definitions here */

    }
    /* reply style (with replies) information for discussion groups  */
    .forumchildheaderwithreplies {

        background-color: #e4e4e4;

    }

    /* reply style (with no replies) information for discussion groups  */
    .forumchildheader {

        /* add specific definitions here */

    }

    /* discussion group reply style message header */
    .forumpostheader table td {

        /* add specific definitions here */

    }

    .forummessages iframe {

        /* add specific definitions here */

    }

    /* noticeboards left hand column header */
    #nboardcontainer .nboardheader {

        /* add specific definitions here */

    }

    /* the highlighted noticeboard */
    .nboardhighlight {

        color: #5E437A;
        text-decoration:underline;

    }

    /* the unhighlighted noticeboard */
    .nboardtext {

        /* add specific definitions here */

    }


    .supporttext {

        /* add specific definitions here */

    }

    /* header containing items in question support */
    .itemheader {

        /* add specific definitions here */

    }

    /* review question row definition */
    tr.question {

        /* add specific definitions here */

    }

    /* Sets table Row Header colour with small font */
    TH.smallHeaderbgcolour {

        /* add specific definitions here */

    }


    /* students personal details labels */
    .labelstyle {
        padding-left: 3px;
        /* add specific definitions here */
    }

    .labelstyleedit {

        color: #6699cc;

    }

    /* registration lesson history for a student */
    table.standard th {

        /* add specific definitions here */

    }

    table.standard td.subheader {

        /* add specific definitions here */

    }

    table.standard td.filler {

        /* add specific definitions here */

    }

    /* booking Event details */
    /* External border */
    .extBrdr {

        border-style: solid;
        border-width: thin;
        border-color:#7B65CB;

    }


    /* -------------------------------------------------------------------------------- */
    /* The following used in the about page */

    /* Top row left border setting */
    .topRowLeft {

        border-top: thin solid black;
        border-left: thin solid black;
        border-bottom: thin solid black;

    }

    /*Top row right border setting */
    .topRowRight {

        border-top: thin solid black;
        border-right: thin solid black;
        border-left: thin solid black;
        border-bottom: thin solid black;

    }

    /*Top row middle border setting */
    .topRowMiddle {

        border-top: thin solid black;
        border-left: thin solid black;
        border-bottom: thin solid black;

    }

    /* Top row left border setting */
    .bottomRowLeft {

        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;

    }

    /*Top row right border setting */
    .bottomRowRight {

        border-top: thin solid black;
        border-bottom: thin solid black;
        border-right: thin solid black;
        border-left: thin solid black;

    }

    /*Top row middle border setting */
    .bottomRowMiddle {

        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;

    }
    /* --------------------------------------------------------------------------------------------------- */

    /* defines the container which contains certain pages  */

    .pagecontainer {

        left: 0px;
        top: 0px;
        width: 535px;
        height: 95%;

    }

    /* definitions that are common to both these classes. defines the style of the webpage content */

    .pagecontent {

        padding-right: 10px;
        width: auto;
        position: relative;
        z-index: 3;
        min-width: 120px;
        padding-left: 10px;
        padding-bottom: 0px;
        padding-top: 5px;
        background-color: transparent;

    }

    /* horizontal rules */
    hr.footer {

        color: #F0F0F0;

    }

    hr.divider {

        color: #D8D8D8;
    }

    hr {

        color: #CCCCCC;
    }

    /* mls tab definitions */
    .tabstarton, .tabmiddleon, .tablaston, .tabstartoff, .tabmiddleoff, .tablastoff, .tabmiddlestarton,
    .tabmiddlestartoff {

        font-size:  8pt;
        font-weight: normal;
        color: #FFFFFF;

    }

    .tabstarton {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #999999;
        background-image: url(../../images/Bespoke/serco/moreinfo.gif);
        background-repeat: no-repeat;
        background-position: right center;
        background-color: #f5f5f5;
    }

    .tabmiddleon {
        background: #f5f5f5;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #999999;
    }

    .tablaston {
        background: #f5f5f5;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #999999;
        border-top-width: 1px;
        border-right-width: 1px;
        border-top-style: solid;
        border-right-style: solid;
        border-top-color: #f5f5f5;
        border-right-color: #f5f5f5;

    }

    .tabstartoff {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #d8d8d8;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #f5f5f5;
    }

    .tabmiddleoff {
        background: #FFFFFF;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #d8d8d8;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #f5f5f5;
    }

    .tablastoff {

        background: #FFFFFF;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #d8d8d8;
        border-top-width: 1px;
        border-right-width: 1px;
        border-top-style: solid;
        border-right-style: solid;
        border-top-color: #f5f5f5;
        border-right-color: #f5f5f5;

    }

    .tabmiddlestarton {
        background: #f5f5f5 url(../../images/Bespoke/serco/moreinfo.gif) no-repeat center center;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #999999;

    }

    .tabmiddlestartoff {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #d8d8d8;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #f5f5f5;
    }

    td.largefont {

        font-size: 10pt;
        padding-left : 5px;

    }

    .noticeboardheading {

        width: 100%;
        border-color: black;
        border-style: solid;
        border-top-width: thin;
        border-bottom-width: thin;
        border-left-width: thin;
        border-right-width:thin;

    }


    .noticeboardmessages {
        visibility:hidden;
        border: 1px solid #CCCCCC;
    }

    /* forums */
    .forumheading {

        border-color: black;
        border-style: solid;
        border-top-width: thin;
        border-bottom-width: 0px;
        border-left-width: thin;
        border-right-width:thin;

    }

    .forumownerwithbackground {

        border-color: black;
        border-style: solid;
        border-top-width: thin;
        border-bottom-width: thin;
        border-left-width: thin;
        border-right-width:thin;

    }

    .forumpostwithbackground {

        border-color: black;
        border-style: solid;
        border-top-width: thin;
        border-bottom-width: thin;
        border-left-width: thin;
        border-right-width:thin;

    }

    .forumreadwithbackground {

        background-color: #EE8888;
        border-color: black;
        border-style: solid;
        border-top-width: thin;
        border-bottom-width: thin;
        border-left-width: thin;
        border-right-width:thin;

    }


    /* ---------------------------overlib ------------------------------ */
    /* tool tips definitions */
    .fontClass {

        font-size: 12px;
        color:  #000000;
        font-weight: normal;

    }

    .capfontClass {

        font-size: 12px;
        color:  #ffffff;
    }

    .capfontClass A {

        color: #ffffff;
        font-size: 9px;

    }

    .fgClass {

        background-color: #FFFFFF;

    }

    .bgClass {

        background-color: #999999;

    }


    .tablehead {

        text-decoration: underline;
        text-transform: capitalize;

    }

    .iframe {


    }

    body.iframe {
    }
    /* -------------------------------------------------------------------------------------- */
    /* Rec Model Style definitions  */

    span.divTitle, div.elementTitle {


        padding: 0.3em;

        font-size: 11px;

        text-align: left;

    }

    span.divTitle {

        /* add specific definitions here */

    }

    a.tab, a.tabHover, a.tabActive {

        font-size: 12px;
        line-height: 15px;
        border-left: 1px solid #3B2353;
        padding: 2px 8px 2px 8px;
        font-style: italic;
        /*text-decoration: none;*/
        font-family: arial, sans-serif;
        letter-spacing: 0.2em;

    }

    table a.tab:hover {

        color: #000;

    }


    a.tab, a.tabHover {

        background-color: #D9E6F3;
        color: #ffffff;

    }

    a.tab {

        /* add specific definitions here */
        color: #a0a0a0;

    }

    a.tabHover {

        /* add specific definitions here */
        color: #000000;
    }

    a.tabActive {

        font-weight: bold;
        color: #ffffff;
        background-color: #6699cc;

    }

    table.row {

        /* add specific definitions here */

    }

    div.tabs {

        cursor: default !important;

    }

    div.tabs a {

        color: #ffffff;

    }

    div.tabs div.bottomrow {

        padding-left: 5px;

    }

    div.tabs div.toprow {

        padding-left: 5px;

    }

    /* pad the bottom row out so that the top row wont overlap. */
    div.tabs div.bottomrow .tab {

        padding: 1px 8px 1px 9px;

    }

    div.tabs div.bottomrow .tabActive {

        padding: 2px 9px 2px 9px;

    }


    /* end Rec Model Style definitions  */
    /* ---------------------------------------------- */

    /* ---------------------------------------------- */
    /* Dialog Style Defns                             */

    #pagecontentdialog div.rowdialog {

        padding: 1em;

    }

    #pagecontentdialog DIV.rowdialog SPAN.labeldialog {

        padding: 0.2em;
        font-size: 11px;
        text-align: left;

    }

    #pagecontentdialog DIV.rowdialog SPAN.formfielddialog {

        text-align: left;

    }

    #pagecontentdialog DIV.rowdialog SPAN.spacerdialog {

        /* add specific definitions here */

    }

    /* end Dialog Style Defns                            */
    /* ------------------------------------------------- */

    /* ------------------------------------------------- */
    /*      @HEFE--Event creation From HEFE              */

    /*div for containing the create events options */

    #eventscontainer {

        vertical-align: top;

    }

    #selectors .button {

        font-size: 9px;
    }

    #selectors div {

        padding-left: 5px;

    }

    #roomButton {

        vertical-align: top;

    }

    #roomButtonReq {

        vertical-align: top;

    }

    div.login, div.setvalues {

        text-align: right;

    }

    div.setvalues {

        clear: both;

    }

    div.logindropdown {

        text-align: right;

    }

    table.eventtitle {

        border-style: none;

    }

    /* HEFE Week structure */
    table.weekstructure th, table.weekstructure td {

        line-height: 15px;
        vertical-align: top;
        padding: 2px;

    }

    .weekstructureheader {

        background-color: #EDCCF7;
        text-align: center;

    }

    /* HEFE Enrolment */
    /* enrolment form definitions */
    #enrolstartcontentcontainer form #enrolcourse {

        padding: 0px;
        text-align: left;

    }

    #enrolstartcontentcontainer form #iframecontainer {

        text-align: center;
        padding: 3px;
        border-width: thin;
        border-style: solid;

    }


    #enrolstartcontentcontainer form #modules {

        padding: 5px;

    }

    #enrolstartcontentcontainer form #groups {

        padding: 5px;

    }

    #enrolstartcontentcontainer form #newMods {

        padding: 5px;

    }

    #enrolstartcontentcontainer form iframe {

        border: 1px;

    }

    #enrolstartcontentcontainer p {

        text-align: left;
        text-indent: 2%;
        padding: 0px;

    }

    #enrolstartcontentcontainer hr  {

        text-align: center;
        padding: 0px;

    }

    /* - Background settings for Odd and Even columns in sub group options - */
    .odd {

        background-color: #DFECF7;

    }


    /*
    using extra div container for the form to center to overcome the margin: 0px auto, which IE
    doesnt handle properly */
    div.IEformcontainer {
        width:800px;

    }

    div.row {

        padding-top: 10px;
        padding-bottom: 30px;

    }

    div.row span.label {

        text-align: left;

    }

    div.row span.formfield {

        text-align: left;

    }

    table.ttrefsearch td {

        text-decoration: none;
        font-weight: normal;
        text-align: left;
        padding-left: 10px;

    }

    table.ttrefsearchinner {

        padding: 2px;

    }


    table.ttrefsearchinner td {

        text-decoration: none;
        font-weight: normal;
        text-align: left;
        padding-left: 10px;

    }

    /* Master timetable */
    table.mastermain {

        padding: 2px;
        border: 1px solid #F4530B;

    }

    TH.dayTitle {

        font-size: 12pt;

    }

    th.divider {

        background-color: #D40707;
    }


    table.masterttparam {

        padding: 4px;
        border: 1px solid #6699cc;

    }

    table.masterttparam th {

        background-color: #6699cc;
        padding-left: 3px;

    }


    table.masterttparam td {

        text-decoration: none;
        font-weight: normal;
        text-align: left;
        padding-left: 10px;

    }

    table.mastertimetable {

        padding: 2px;

    }

    table.mastertimetable td {

        text-decoration: none;
        font-weight: normal;
        text-align: left;
        padding-left: 10px;

    }

    /* Crs Management defns
    ----------------------------------------------- */

    #modHolders table {

        font-size: 11px;

    }

    #modHolders table th {

        background-color: #6699cc;

    }

    #modHolders table th.subhdr, #modHolders table th.subhdr1 {

        font-weight: normal;

    }

    #regulationscontainer table tr.header1 {

        background-color: #6699cc;

    }

    #regulationscontainer table td {

        background-color: #cccccc;
    }

    table tr.dark {

        background-color: #cccccc;
    }

    table tr.light {

        background-color: #EEEEEE;
    }

    table.coursestatus th  {

        background-color: #6699cc;

    }

    table.coursestatus th.sub1 {

        background-color: #6699cc;

    }

    table.coursestatus td.total {

        border-top: 1px solid #000;
        border-bottom: 1px solid #000;

    }

    /* Room Booking style elements */

    table.roomquerydata {

        border: 1px solid #c9c9c9;

    }

    table.roomquerydata th {

        text-align: left;
        padding: 3px;

    }

    #makebookingformcontainer {

        padding: 15px;

    }

    table.locatebookingdetails {

        border: 2px solid;

    }

    /* Embedded Timetable */

    /** Applies to body within embeddable timetable */
    .emBody {

        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 5px;
        margin-right: 5px;
    }

    /*Applies to title block. containing main title, sub title and filter information */
    #emTitleBlock {
        display:none;
    }

    /** <h3> heading for sub title*/
    #emSubTitle{

        font-style: italic;
    }

    /* <h3> heading for filters content */
    #emFilters{
        color: black;
    }

    /* Div container for the buttons (Legend, View Grid, Create PDF) */
    #emButtons{
        display:none;
    }

    /* Button for Legend */
    #emLegend{
        display:inline;
    }

    /* Button for Grid view */
    #emGrid{
        display:inline;
    }

    /* Button for PDF creation */
    #emPDF{
        display:inline;
    }

    /* Horizontal divider (Upper)*/
    #emRuleUpper{
        display:none;
    }

    /* Horizontal divider (Lower)*/
    #emRuleLower{
        display:none;

    }
    TABLE #emTable {
        position:absolute;
        left: 5%;
        width: 90%;
    }

    .emCellFont{

        font-size: 8pt;
        font-weight: normal;
    }

    #emMainTable{
        width:80%;
        font-size: 11pt;
        border-top-style: solid;
        border-bottom-style: solid;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-top-color: black;
        border-bottom-color: black;
        background-color: #dddddd;
        color: teal;
    }

    .emRow1{

        background-color: #dddddd;
    }

    .emRow2{

        background-color: #eeeeee;
    }

    /* Div that contains the back Button */
    #emBackDiv{
        display:none;
    }
    /* <p> tag containing the back button */
    #emBackPara{
        text-align: right;
    }

    /* Timetable event id button */
    .ttButton{
        cursor:pointer;
        border:outset 1px #ccc;
        color:#666;
        font-weight:bold;
        padding: 1px 1px;
        background:url(../../images/Bespoke/serco/formbg.gif) repeat-x left top;
        font-size: 11px;
        width:60px
    }

    /* End of Embedded Timetable */


    /* unmarked rollcall/registration background colour */
    .unmarked {
        background-color: #f7536b;
    }


    /* Printable Timetable */

    /** Applies to body within printable timetable */
    .ptBody {

        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 5px;
        margin-right: 5px;
    }

    /*Applies to title block. containing main title, sub title and filter information */
    #ptTitleBlock {
        display: block;
    }

    /** <h3> heading for sub title*/
    #ptSubTitle{

        font-style: italic;
    }

    /* <h3> heading for filters content */
    #ptFilters{
        color: black;
    }

    TABLE #ptTable {
        position:absolute;
        left: 5%;
        width: 90%;
    }

    .ptCellFont{

        font-size: small;
        font-weight: normal;
    }

    #ptMainTable{
        width:80%;
        font-family: Arial,Helvetica,sans-serif;
        font-size: medium;
        border-top-style: solid;
        border-bottom-style: solid;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-top-color: black;
        border-bottom-color: black;
        background-color: #dddddd;
        color: teal;
    }

    .ptRow1{

        background-color: #ffffff;
    }

    .ptRow2{

        background-color: #ffffff;
    }
    /* End of Printable Timetable */

    /* JQuery UI Datepicker */
    #ui-datepicker-div, .ui-datepicker-inline {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 14px;
        padding: 0;
        margin: 0;
        background: #DDD;
        width: 185px;
    }
    #ui-datepicker-div {
        display: none;
        border: 1px solid #FFF;
        z-index: 99999;
    }
    .ui-datepicker-inline {
        float: left;
        display: block;
        border: 0;
    }
    .ui-datepicker-dialog {
        padding: 5px !important;
        border: 4px ridge #DDD !important;
    }
    button.ui-datepicker-trigger {
        width: 25px;
    }
    img.ui-datepicker-trigger {
        margin: 2px;
        vertical-align: middle;
    }

    .ui-datepicker-prompt {
        float: left;
        padding: 2px;
        background: #DDD;
        color: #000;
    }

    html .ui-datepicker-prompt {
        width: 185px;
    }

    .ui-datepicker-control, .ui-datepicker-links, .ui-datepicker-header, .ui-datepicker {
        clear: both;
        float: left;
        width: 100%;
        color: #FFF;
    }
    .ui-datepicker-control {
        background: #D8D8D8;
        padding: 2px 0px;
    }
    .ui-datepicker-links {
        background: #6699cc;
        padding: 2px 0px;
    }
    .ui-datepicker-control, .ui-datepicker-links {
        font-weight: bold;
        font-size: 80%;
        letter-spacing: 1px;
    }
    .ui-datepicker-links label {
        padding: 2px 5px;
        color: #888;
    }
    .ui-datepicker-clear, .ui-datepicker-prev {
        float: left;
        width: 34%;
    }
    .ui-datepicker-current {
        float: left;
        width: 30%;
        text-align: center;
    }
    .ui-datepicker-close, .ui-datepicker-next {
        float: right;
        width: 34%;
        text-align: right;
    }
    .ui-datepicker-header {
        padding: 1px 0 3px;
        background: #6699cc;
        text-align: center;
        font-weight: bold;
        height: 1.3em;
    }
    .ui-datepicker-header select {
        background: #FFFFFF;
        color: #000;
        border: 0px;
        font-weight: bold;
    }
    .ui-datepicker {
        background: #CCC;
        text-align: center;
        font-size: 100%;
    }
    .ui-datepicker a {
        display: block;
        width: 100%;
    }
    .ui-datepicker .ui-datepicker-title-row {
        background: #6699cc;
        color: #000;
    }
    .ui-datepicker .ui-datepicker-days-row {
        background: #FFF;
        color: #666;
    }
    .ui-datepicker-week-col {
        background: #B1DB87;
        color: #000;
    }
    .ui-datepicker .ui-datepicker-days-cell {
        color: #000;
        border: 1px solid #D8D8D8;
    }
    #ui-datepicker .ui-datepicker-days-cell a {
        display: block;
    }
    .ui-datepicker .ui-datepicker-week-end-cell {
        background: #D8D8D8;
    }
    .ui-datepicker .ui-datepicker-days-cell-over {
        background: #FFF;
        border: 1px solid #777;
    }
    .ui-datepicker .ui-datepicker-unselectable {
        color: #888;
    }

    .ui-datepicker-current-day {
        background: #6699cc !important;
    }
    #ui-datepicker-div a, .ui-datepicker-inline a {
        cursor: pointer;
        margin: 0;
        padding: 0;
        background: none;
        color: #000;
    }
    .ui-datepicker-inline .ui-datepicker-links a {
        padding: 0 5px !important;
    }
    .ui-datepicker-control a, .ui-datepicker-links a {
        padding: 2px 5px !important;
        color: #000 !important;
    }
    .ui-datepicker-title-row a {
        color: #000 !important;
    }
    .ui-datepicker-control a:hover {
        background: #FDD !important;
        color: #333 !important;
    }
    .ui-datepicker-links a:hover, .ui-datepicker-title-row a:hover {
        background: #FFF !important;
        color: #333 !important;
    }
    .ui-datepicker-multi .ui-datepicker {
        border: 1px solid #83C948;
    }
    .ui-datepicker-one-month {
        float: left;
        width: 185px;
    }
    .ui-datepicker-new-row {
        clear: left;
    }
    .ui-datepicker-cover {
        display: none;
        display/**/: block;
        position: absolute;
        z-index: -1;
        filter: mask();
        top: -4px;
        left: -4px;
        width: 193px;
        height: 200px;
    }

    /* JQuery Alert Box Style */

    .alertswarning .alerts{ background-color: #acb4c4; }
    .alertsfade{ position: absolute; background-color: #FFF; }
    div.alerts{font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; position: absolute; background-color: #F0F0F0; width: 300px; font-size: 11px; text-align: left; border: solid 1px #6699cc; }
    div.alerts .alertscontainer{ background-color: #F0F0F0; border-top: solid 14px #6699cc; padding: 5px; font-weight: bold; }
    div.alerts .alertsclose{ float: right; width: 18px; cursor: default; margin: -19px -12px 0 0; color: #ffffff; font-weight: bold; }
    div.alerts .alertsmessage{ padding: 10px; line-height: 20px; font-size: 11px; color: #333333; }
    div.alerts .alertsbuttons{ text-align: right; padding: 5px 0 5px 0; border: solid 1px #F0F0F0; background-color: #F0F0F0; }
    div.alerts button{ padding: 3px 10px; margin: 0 10px; background-color: #6699cc; border: solid 2px #f4f4f4; color: #ffffff; font-weight: bold; font-size: 12px; }
    div.alerts button:hover{ border: solid 2px #D8D8D8; }


    /* Bitlet Box Style */
    div.bitletstylelecturer, div.bitletstyleadmin, div.bitletstyleyearhead, div.bitletstyledepthead, div.bitletstylehousehead,
    div.bitletstyleofficeadmin,div.bitletstylestudent, div.bitletstylecontact{
        float:left;
        width:95%;
        padding:1px;
        margin:0em;
        background: #ece9d8;
        text-align: left;
    }

    /* Bitlet Box Style */
    div.bitletstylelecturerover, div.bitletstyleadminover, div.bitletstyleyearheadover, div.bitletstyledeptheadover, div.bitletstylehouseheadover,
    div.bitletstyleofficeadminover,div.bitletstylestudentover, div.bitletstylecontactover{
        float:left;
        width:95%;
        padding:1px;
        margin:0em;
        background: #ED2724; /**#aea5b6;*/
        text-align: left;
    }

    /* Bitlet Box Style */
    div.logintitledetails{
        color: #060606;
        text-align: center;
        font-size: 9pt;
        font-weight: bolder;
        height:15px; /** hack for IE as when it resizes it goes wrong*/
        margin-left:21%;
        height:20px;
        padding-top:5px;
        width:800px;
        background: url(../../images/acs/default/HorizontalSprite.png) repeat-x;
        height: 32px; background-position: 0px 0px;


    }

} /* end of import all media except handheld */

/* Login Page */

.introPageLayout{
    background-image: url(../../images/Bespoke/serco/largeloginscreen_1.jpg);
    background-repeat: no-repeat;
    background-position: 50% 25%;    
}

.introContainer {
    text-align:left;
    padding-bottom: 15%;
    margin-top: 10%;
    margin-left: 25%;
    margin-right: 25%;
    max-width:864px;
    max-height:609px
}

.loginHeader {
    padding-top:5%;
    padding-left:15%;
    color:#ffffff;
    font-weight:bold;
}

.loginError {
    /* color: #DC241F; */
    color: #c9c9c9;
    /* background-color: #c9c9c9;*/
}

.introTable {
    background:transparent;
    width:30%;
    margin-left:15%;
    color:#ffffff;
}

.loginButton{
    height:25px;
    width:195px;
    color:#666;
    border:outset 1px #ccc;
}

.loginGreeting{
    font-size: 8pt;
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
}

.loginLabel {
    color:#fff;
}

.introProgressBar{
    width:10%;
    background:transparent;
    margin-left:0%;
    border:thin solid #fff;
}

.fullBar{
    width:2%;
    background-color:#000080;
}

.emptyBar{
    width:2%;
}

.progPcnt{
    width:100%;
    padding-left:15%;
    color:#ffffff;
}

.progLabel{
    color:#ffffff;
}

/* ACS Menu */

#carousel_container{

    background: url(../../images/acs/default/HorizontalSprite.png) repeat-x ;
    height: 28px;
    background-position:0px -206px;
    z-index:1;
}

#dropdown{
    position:absolute;
    display:none;
    background-color: #fff;
    z-index:10;
    max-height: 90px;
    min-height:30px;
    overflow-wrap: normal;

}

.menuItem, .selectedMenuItem{
    font-weight:bold;
    color:#e9e9e9;
    position:absolute;
    z-index:100;
    overflow:hidden;
    height: 20px;
    text-indent: 3px;
    line-height: 20px;
    z-index:5;
    cursor:pointer;
}

.menuItem{
    border-right: 1px solid white;
}

.selectedMenuItem {
    color:#696969;
    background-color:#fff;
    background: #fff url(../../images/acs/default/Selected_Menu_Curv.jpg) right no-repeat;
}

.submenu{
    font-weight: bold;
    display:inline;
    border-left: 1px solid #aaa;
    border-right:1px solid #aaa;
    border-bottom:1px solid #aaa;
    z-index:99;
    border-radius: 5px;
    line-height: 30px;
    overflow:visible;
}

.submenu div {
    padding-left: 40px;
}

.submenu ul {
    padding: 0;
    display:inline;

}

.submenu ul li {
    display:inline;

    margin-right:5px;
    margin-left:2px;
    padding-right:3px;
}

.submenu ul li a {
    /*text-decoration: underline;*/
}

.subMenuNormal{
    text-decoration: underline;
    font-weight:normal;
}

.subMenuSelected{
    text-decoration: none;
    font-weight:bold;
    color:black;
}

.director{
    display:block;
    position:absolute;
    color:#000;
    height:22px;
    line-height: 22px;
    cursor:pointer;

}

.submenu ul li a {
    color:#696969;
}

.submenu #closeSub {
    cursor:pointer;
}

#leftButton{
    background:transparent url(../../images/acs/default/ThemeSprite.png) no-repeat left center;
    width: 23px; height: 23px; background-position: 0px -36px;
    right: 0px;
}

#rightButton{
    background:transparent url(../../images/acs/default/ThemeSprite.png) no-repeat right;
    width: 23px; height: 23px; background-position: -48px -36px;
}

#menudiv {
    width: 85%;
    position: absolute;
}

#searchdiv {
    width: 200px;
    height: 100%;
    float: right;
    padding-top: 4px;
    height: 100%;
}

#leftButtonCon {
    width: 7%;
    position: absolute;
}

#rightButtonCon {
    left: 93%;
    width: 7%;
    left: 93%;
    position: absolute;
}

#carousel {
    left: 7%;
    width: 86%;
    position: absolute;
}

#menuItems {
    top: 3px;    
}

.lastmenuItem {
    border-right: none;
}

.menutable {
    display: table;
    position: relative;
    white-space: nowrap;
    z-index: 0;
}

.menutablecell {
    display: table-cell;
    padding: 0 15px;
    position: relative;
}

#searchlbl {
    color: #e9e9e9;
    font-weight: bold;
    width:10%
}

#txtSearch {
    width:70%;
}

.searchTextBox {
    width: 70%;
    height: 17px;
    line-height: 15px;
    border:1px solid #eee;
}

.search-icon {    
    background: #fff url("../../images/menu/search.png") no-repeat scroll left top;
    display: inline-block;
    height: 15px;
    margin-bottom: -3.2px;
    margin-left: -20px;
    width: 17px;
}

.searchCriteria {
    background: #fff;
    left:97px;
    width:60px;
    margin:0px;
    padding:5px;
    list-style-type:none;
    height:auto;
    display:none;
    border: 1px solid #aaa;
    text-align: right;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

.searchCriteria li{
    width:100%;
    padding:2px 0;
    margin:0px;
    float:left;
    text-decoration: none;
}

.searchCriteria li a{
    text-decoration: none;
    color:#696969;
}
.searchCriteria li:hover {
    background: #5188be;
}

.searchCriteria li:hover a {
    color:#fff;
}

.show {
    display:block;
}
.searchCriteria:focus, .searchCriteria:active{
   outline:none;
}

.lifocus{
    background-color: #5188be;
}