/* ########## MAIN LAYOUT ########## */

body
{
    background: #CCCCCC;
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Sans-Serif;
    font-size: 0.7em;
    color: #333;
}

    /* Page container just so there's a bit of border on either side */
    div#wrapper
    {
        background: #FFFFFF;
        /*width: 950px;*/
        /* Can we find a better way to enforce it to take 100% of browser height - not
            sure min-height is viable */
        min-height: 600px;
        margin: 0 auto 0 auto;
        border: solid 1px #000000;
        border-top: none;
    }
    
    /* Hack to ensure stuff doesn't spill out of wrapper without having to float
        left, which would lose the central alignment */
    div#wrapper:after
    {
        content: ".";
        display: block;
        height: 0;
        font-size: 0;
        clear: both;
        visibility: hidden;
    }

        div#header
        {
            /* Adding float to ensure that floats contained within the header
                        don't overflow outside of it */
            float: left;
            /*width: 915px;*/
            background: #333333;
            margin: 0;
            padding: 0 20px 0 15px;
            border-bottom: solid 1px #000000;
            font-family: Calibri , Arial, Helvetica, Sans-Serif;
            font-size: 1.1em;
        }
        
            img#logo
            {
                display: block;
                float: left;
            }

            div#nav
            {
                float: right;
                width: 500px;
                margin: 5px 0 0 0;
                text-align: right;
                font-size: 1.1em;
                color: #FFFFFF;
            }
            
                div#nav a:link,
                div#nav a:visited
                {
                    font-weight: bold;                    
                    color: #FFFFFF;
                    text-decoration: none;
                }
                
                div#nav a:hover,
                div#nav a:active
                {
                    text-decoration: underline;
                }
                
                ul#navLinks
                {
                    list-style: none;
                    margin: 15px 0 0 0;
                    padding: 0;
                }
                
                    ul#navLinks li
                    {
                        display: inline;
                        margin: 0 0 0 30px;
                        padding: 0;
                    }
                    
                    ul#navLinks a:link,
                    ul#navLinks a:visited
                    {
                        padding: 0 0 0 5px;
                        border-left: solid 5px #FFFFFF;
                    }
                    
                    ul#navLinks a:hover,
                    ul#navLinks a:active
                    {
                        border-left: solid 5px #CCCCCC;
                    }

        div#main
        {
            float: left;
            width: 910px;
            padding: 15px 20px 15px 20px;
            clear: both;
        }
        
            /* Breadcrumbs in the page heading */
            h1 span#navBreadcrumbs
            {
                font-size: 0.7em;
            }
                    
    div#footer
    {
        padding: 20px 0 10px 0;
        text-align: center;
    }
    
/* ########## HEADINGS AND PARAGRAPHS ########## */

h1, h2, h3
{
    margin: 0;
    font-family: 'Calibri' , Arial, Helvetica, Sans-Serif;    
    font-weight: bold;
}

h1
{
    font-size: 2.5em;
    margin-bottom: 10px;
}

h2
{
    clear: both;
    font-size: 2em;
}

h3
{
    background: #666666;
    padding: 0 5px 0 5px;
    border-bottom: solid 1px #000000;
    font-size: 1.5em;
    color: #FFFFFF;
}

p
{
    line-height: 1.8;
    margin: 10px 0 15px 0;
}

/* ########## LINKS ############ */

/* Want visited links to remain blue as it's dynamic content
    and having them a different colour doesn't really serve any purpose */
a
{
    color: #0000FF;
}

a:visited
{
    color: #0000FF;
}


/* ########## TABLE STYLING (see also tablesorter.css ######## */

table tbody td.numeric
{
    text-align: right;
}

table tbody tr.odd td
{
	background-color:#DDDDDD;
}


/* ########## STYLING FOR DETAILS VIEWS ########## */

ul.details
{
    margin: 10px 0 20px 0;
    padding: 0px;
    clear: both;
    border: solid 1px #000000;
    list-style-type: none;
}

    ul.details li
    {
        padding: 5px;
    }
    
    ul.details li.odd
    {
	    background-color: #EEEEEE;
    }
    
        ul.details li span.liLabel
        {
            display: block;
            width: 200px;
            float: left;
            font-weight: bold;
        }

 

/* ########## DEFAULT FORM STYLING ########## */

form ul
{
    margin: 10px 0 10px 0;
    padding: 0;
    list-style-type: none;
}
    
    form li
    {
        margin: 3px 0 3px 0;
        padding: 1px 0 1px 0;
        list-style-type: none;
    }
    
        form ul label
        {
            float: left;
            width: 100px;   /* Although default width set, would normally be overidden */
            text-align: right;
            margin-right: 10px;
            clear: left;
        }
        
        form ul input, form ul select
        {
            margin-top: -3px;
        }
        
        /* formatting for datepicker icon */
        form img.ui-datepicker-trigger
        {
            margin-left: 3px;
        }
        
        form img.ui-datepicker-trigger:hover
        {
            cursor: pointer;
        }

/* ############ FORM ELEMENTS ############# */

input[type="text"],
input[type="password"],
input[type="file"]
{
    border: solid 1px #999999;
    width: 140px;
}

input[type="checkbox"]
{
    display: inline;
    margin-left: -3px;
}

textarea
{
    width: 250px;
    height: 150px;
    margin: 5px 0 5px 0;
    border: solid 1px #999999;
}

/* ######### Form fields for specific data types ####### */

input.date
{
    width: 80px;
}

input.integer
{
    width: 50px;
}

input.float
{
    width: 50px;
}



/* ########## Custom styling for jQuery autocomplete ######### */


div.ac_results ul
{ 
  margin:0; 
  padding:0; 
  list-style-type:none; 
  border: solid 1px #999999;
  background-color: #FFFFFF;
} 

div.ac_results ul li
{ 
  font-family: Arial, Helvetica, Sans-Serif; 
  font-size: 12px; 
  margin: 1px; 
  padding: 3px; 
  cursor: pointer; 
}

div.ac_results ul li.ac_over
{ 
  background-color: #AACCFF; 
}


/* ######## Classes used throughout site ######## */

div.annotation
{
    margin: 10px 0 20px 0;
    padding: 0 5px 0 5px;
    border: dotted 1px #333333;
    background: #EEEEEE;
}

    div.annotation p
    {   
        line-height: 1.3;
    }
 
div.halfPageWidgetWrapper
{
    float: left;
    width: 50%;
}
    
div.leftWidget
{    
    padding-right: 10px;
}

div.rightWidget
{
    padding-left: 10px;
}
    
ul.inlineLinks
{
    margin-left: 0px;
    padding: 0px;
    font-size: 1.1em;
    float: left;
    list-style-type: none;
}

    ul.inlineLinks li
    {
        float: left;
        padding-right: 30px;
    }
    
        ul.inlineLinks li span
        {
            float: left;
        }
    

/* Style for Validation Errors */ 
input.error
{
    border: solid 1px #CC0000;
    background: #FFFFCC;
}

/* ######## HACKS ######## */

/* Firefox labels don't inherit the container cursor by default
    - needed for draggable cursor */
label
{
    cursor: inherit;
}