/* Attach the IE fix for limited pseudo-class support
   to each desired element here
   (e.g. td, tr, button { behaviour: url('THE_FILE.htc'); }*/
/* Documentation: http://www.vladdy.net/Demos/IEPseudoClassesFix.html */
/* Microsoft Docu: http://msdn.microsoft.com/workshop/author/behaviors/overview.asp */
/* Common filename to google: IEFixes.htc */
li, #menu, .buttonContainer {
    /* Just give the location of the scriptfile. */
    behavior: url('iefix.htc');

    /* When using these, remember to include both:

    e.g.    tr:hover, tr.hover { }
            li:hover, li.hover { } etc. */
}

.mainTitle {
    font-size: xx-large;
    font-family: 'Lucida Sans Unicode', Trebuchet, 'Trebuchet MS', sans-serif;
}

.subTitle {
    font-size: x-large;
    font-family: 'Lucida Sans Unicode', Trebuchet, 'Trebuchet MS', sans-serif;
}

.subSubTitle {
    font-size: small;
    font-family: 'Lucida Sans Unicode', Trebuchet, 'Trebuchet MS', sans-serif;
}
.codeSection {
    font-family: 'Courier New', Courier, monospace;
    font-size: medium;
    background-color: #cceecc;
    margin-left: 10px;
    padding-left: 5px;
    margin-right: 10px;
    border-left: 1px solid #000;
}
html {
    height: auto;
}
body {
    height: auto;
    /* Default all to 0 */
    border:0px; margin: 0px; padding: 0px;

    /* Set up the background image */
    /*background-image: url(img/bkg-proposal-variation-2.gif); */

    /* Repeat in x- and y- */
    /*background-repeat: repeat;*/
    background-color: #ddd;

    /* Centre the main container on the screen for IE 4.x-6.x */
    text-align: center;

    /* Set default text colour */
    color: #fff;

    /* Set default font (sans-serif) */
    font-family: arial, helvetica, sans-serif;

}

#mainContainer {
    /* Use the whole height of the page */
    width: 780px;
    height: auto;
    /* Centre the main container on the screen for Firefox & others (except NN4...) */
    margin-left: auto; margin-right: auto;

    /* Give a border each side of the mainContainer */
    border-left: 3px solid #000;
    border-right: 3px solid #000;

    /* Give it a dark background */
    background-color: #000;
    background-attachment: scroll;
    

    /* Pad the left & right sides a bit */
    padding: 0px 5px;

    /* Restore the left text alignment following centering in
       'body' to centre the page in IE */
    text-align: left;

    /* Positions horizontally */
    /* position: relative; */
}

#mainArticleArea {
    margin-left: 5px; 
    margin-right: 5px;
}

* html #mainContainer {
    /* The '* html' shields this code from browsers except IE */
    width: 790px;
    w\idth: 780px;
}

#topPagePadding {

    /* Allow a small vertical space before the banners and content begins */
    height: 15px;

    /* Just ensure it spans the whole row */
    width: 780px;
}

#mainBanner {
    /* Display the main banner image */
    background-image: url(../img/banner-revised.png);

    /* Set the main banner size (should match banner image)
     * This width value should match that for the mainContainer  */
    width: 780px; height: 100px;
}

#menu {

    width: 780px;

    padding: 10px 0px 5px 0px;

    /* White line along the bottom */
    border-bottom: 15px solid #fff;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;

    /* Allow some space below the line before the content begins */
    /* margin: 0px 0px 10px 0px; */

    /* Don't add bulletpoints and such to the menu (stored as an unordered list) */
    list-style-type: none;

    /* Fixes a unordered list 'bug'? in IE */
    /* which caused an extra left margin of perhaps 10-20px to be added */
    margin-left: 0px;

    /* Corrects the results of the previous bug fix for both IE and FF */
    /* by adding more vertical space for the menu items */
    margin-top: 15px;
    margin-right: 0px;
    margin-bottom: 20px;

    /* Centre the menu */
    text-align: center;

    font-size: 18px;

    font-family: 'Lucida Sans Unicode', Trebuchet, 'Trebuchet MS', sans-serif;

}

#menu li {
    /* Display the menu horizontally, not vertically */
    display: inline;

    /* Give a set horizontal gap between each menu item */
    padding: 5px 10px;

    margin: 0px;
    border-top: 1px solid #888;
    border-left: 1px solid #888;
    border-right: 1px solid #888;

}

html>body #menu li {
    /* All browsers other than IE can see this */

    /* Simply leave IE without a default background for
       inactive unhovered menu items - inserting one
       introduces a bug where the :hover won't work */
    background-color: #333;
}

#menu li:hover, li.hover {
    /* All browsers see and react to this */
    background-color: #666;
}

#menu li a {
    /* Style the links: */
    text-decoration: none; /* no underline */
    color: #ffffff; /* white */
}

#menu li a:hover {
    /* When hovered over, make light green */
    /* color: #7cc727; */
    color: #fff;

}

.currLoc {
    background-color: #fff !important;
    color: #000;
    border-top:    3px solid #fff;
    border-bottom: 3px solid #fff;
    border-left:   2px solid #fff;
    border-right:  2px solid #fff;
    font-size: 21px;
}

#floatContainerToFixBkg {
    /* Fixes background colour of mainContainer not proliferating down to bottom of contentContainer 
     * because contentContainer needs a float left for the sidebar to float right, and so is no 
     * longer a 'part of' the computation for the height of the mainContainer (which would ordinarily
     * expand to accommodate the heights of the child elements).  */
    position: relative;
    width: 100%;
}

#contentContainer {
    color: #000;
    /* Default all to 0 */
    border:0px; margin: 0px; padding: 0px;
    margin-top: -20px;
   /* margin-right: auto;*/
    /* Set the width */
    width: 584px;
    /*width: 73%;    */
    /* To enable the sidebar to float to the left of the content container */
    background-color: #fff;
   /* position: relative; */
    /* Attempt to fix some IE float bugs */
    /* display: inline; */
    height: auto;
    min-height: 600px;

}

#sidebarContainer {

    /* Default all to 0 */
    border:0px; margin: 0px;

    /* Move the content away from the sides a bit */
    padding: 5px;

    /* Set the width */
    /*width: 168px;*/
    /*width: 21%;  */
    width: 170px;

    background-color: #fff;
    color: #000;
    font-size: smaller;

    /* Fix for IE bug... vertical positioning of menu off by 20px */
    
   /* top: -20px;*/
    /* End fix */

   /* float:right; */
    position: absolute;
    left: 600px; /* left = 770px (main 780px - 2x 5px padding) - width of sidebar */
    /* Attempt to fix some IE float bugs */
    /* display: inline;*/

}

.centredImage {

}

* html #sidebarContainer {
    /* This is only visible to IE */
    /* Fixes IE bug where it fails to float the
       sidebar all the way to the right.

       Right shift solves the problem, and the
       width values hack the box model (IE doesn't
       add in the padding). +10px to make up for a
       width deficiency thanks to the IE bug. */

    right: -16px;
    /* The total width value +10 as a fix */
    width: 190px;
    /* The W3C compliant width value + 10 as a fix */
    w\idth: 180px;
}

.notice {
    /* Text: light green */
    color: #ccff66;

    /* Text: large */
    font-size: 1em;

    /* Background */
    background-color: #000;

    /* Border */
    border: 4px dashed #fff;

    /* Padding: top & bottom, keeping the border clear of the text */
    padding: 5px 0px;

    /* Centre the text */
    text-align: center;

    /* Can't set width directly due to IE bug re: dashed border (in)visibility */
    margin-left: 12%;
    margin-right: 12%;
}

.error {
    /* Text: white */
    color: #ffffff;

    /* Text: large */
    font-size: 1em;

    /* Background: dark red  */
    background-color: #aa0000;

    /* Border */
    border: 2px solid #ffaaaa;

    /* Padding: top & bottom, keeping the border clear of the text */
    padding: 5px 0px;

    /* Centre the text */
    text-align: center;

    /* Can't set width directly due to IE bug re: dashed border (in)visibility */
    margin-left: 12%;
    margin-right: 12%;
}

.error a {
    /* Matches the link color to the text in an Error box */
    color: #fff;
}


#loginButton {
    text-align: center;
    background: url('../img/btn-login.gif');
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 33px;
    margin: 5px 0px;
}

.buttonContainer {
    border:0;margin:0;padding:0;
    height: 25px;
    background-color: #000;
    width: auto;
}

.buttonLink {
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    vertical-align: center;
    height: 24px;
    position: relative;
    top: 1px;

}

.buttonLeftSide {
    width: 12px;
    height: 25px;
    background: url('../img/btn-L-semicirc.gif');
}

.buttonRightSide {
    width: 12px;
    height: 25px;
    background: url('../img/btn-R-semicirc.gif');
}
/*
.buttonContainer:hover, .buttonContainer.hover {
    background-color: #444;
}*/