/*
Theme Name      University of St Andrews 2007 (Global)
Theme URI       http://www.st-andrews.ac.uk
Description     Global stylesheet for internal and external pages
                which controls general page structure and typography
Version         3.2 (for applications)
Authors         gjms1, sde1

Last updated    Monday 09 July 2007

------------------ Page layout -------------------------------------------------

	#container 979px
	|-----------------------------------------------------|
	|                                                     |
	| #header 959 x 65px                                  |
	|                                                     |
	|-----------------------------------------------------|
	| #menu 959 x 22px                                    |
	|-----------------------------------------------------|
	|                                                     |
	| #main                                               |
	|                                                     |
	|                                                     |
	|                                                     |
	|                                                     |
	|-----------------------------------------------------|
	| #footer 959 x 30px                                  |
	|-----------------------------------------------------|

Layout adapted from "In Search of the Holy Grail" by Matthew Levine
featured on A List Apart (www.alistapart.com/articles/holygrail/

------------------ Colours -----------------------------------------------------

CREST
#00529b             crest blue
#ed1b34             crest red
#fff200             crest yellow

GREY
#e8e7e2             page background
#f1f1ee             sidebar background
#5f5f5f             heading text

APPLICATIONS
#2f008f             thistle do          applications label
#8464c7             purple haze         applications toolbar
#b9b8ab             stone sour          sidebar


------------------ Headers -----------------------------------------------------

h1		#header		"University of St Andrews"
h1      #menu       "Application name"
h2		#content	Page title
h3		#content	Subheader
        #sidebar    Category
        #related    Category
h4		#content	Subheader
h5		#content	Subheader
h6		#content    Subheader

=====================================================================================

    PAGE STRUCTURE

    This section contains placement of elements and general box-model sizes
    (height, margin, padding, width) as well as basic colours and backgrounds

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

/* --------------- BODY Structure ------------------------------------------- */
/* body - centres the content on the screen, part 1 */
body {
    background-color: #e8e7e2;      /* Greyhavens (rgb 232, 231, 226) */
    color: black;
    font-family: Verdana, Arial, Helvetica, "sans-serif";
    font-weight: normal;
    font-size: 62.5%; /* Resets 1em to 10px */
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 979px;
    }

/* --------------- CONTAINER Structure -------------------------------------- */
/* #container - centres almost everything on page with shadow background image
with the exception of #footer, which is centred by #bottom */
#container {
    margin: 0 auto;
    max-width: 959px;
    overflow: hidden;
    padding: 0 10px;  /* Gives room for 10px wide shadow page background (LR) */
    position: relative;
    text-align: left;       /* Ensures all text is aligned left - over rides body > text-align */
    width: 959px;
    z-index: 0;
    }

/* --------------- HEADER Structure ----------------------------------------- */
/* #header - sets up page header (to contain crest, H1 and global tools */
#header {
    background-color: #00529b;      /* Crest Blue (rgb 0, 82, 155) */
    color: #fff;
    height: 48px;
    line-height: 48px;              /* vertical centring for H1 heading */
    margin: 0;
    padding: 7px 10px 10px 72px;    /* controls placement of H1 heading */
    position: relative;
    width: 877px;
    }

    #header img {
        position: absolute;
        top: 8px;
        left: 20px;
        }

#header a {
    color: #fff;
    }

#header form {
        line-height: 1em;
        left: 619px;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        width: 340px;
        }

#header form p {
        padding: 0;
        margin: 10px 0;
        }

    #header input {
        line-height: 1.2em;
        margin: 0;
        padding: 0;
        }

    input#q {
        margin-left: 57px;
        width: 200px;
        }

    input#btnG {
        width: 62px;
        }


/* --------------- MENU Structure ------------------------------------------- */
/* #menu - horizontal primary navigation menu */
#menu {
    /* background-color: set in applications.css */
    /*height: contained in internal.css */
    margin: 0;
    max-width: 959px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 959px;
    }

/* --------------- MAIN Structure ------------------------------------------- */
/* #main - this is a container div for sidebar, content and related_content */

/* 02 Create white border at top of #main to cover over container background! */
#main {
    border-top: 10px solid #fff;
    margin: 0;
    padding: 0 10px;            /* sets 10px padding (left/right) to push content from sides */
    }

/* This sets all three columns to be inline with one another */
#main .column {
    position: relative;         /* get inline */
    float: left;                /* get inline */
    }

/* Sets minimum height for the page (doesn't seem to work in IE6 */
#content {
    margin-bottom: 10px;
    min-height: 540px;
    }

#sidebar {
    background-color: #f1f1ee;  /* warm grey (rgb 241, 241, 238) */
    margin-bottom: 10px;
    padding: 0;
    }

/* #submenu - carpetted area for vertical sub-navigation */
#submenu {
    margin: 10px;
    padding: 10px;
    }

/* #sidebar_image - watermark-style image or ordinary (max width 220px)*/
#sidebar_image {
    margin: 50px 0 0 0;
    padding: 0;
    width: 220px;
    }

/* --------------- FOOTER Structure ----------------------------------------- */
/* #footer - footer information on each page */
#footer {
    border-top: 10px solid #fff;        /* 10px white border to cover over container background image */
    background-color: #00529b;          /* Crest Blue (rgb 0, 82, 155) */
    height: 30px;
    padding: 0 10px;
    width: 939px;                       /* header/menu width minus 10px padding L and R */
    }

/* container for #footer - displays container_footer (bottom shadow) image */
#bottom {
    background: transparent url("../images/container_footer.png") no-repeat;
    height: 40px;                       /* height of footer content plus 10px white border-top */
    margin: 0 auto;
    max-width: 959px;
    padding: 0 10px 10px 10px;
    position: relative;
    width: 959px;
    }

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

    TYPOGRAPHY AND COLOURS

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

/*------------------ MENU Typography and Colours -----------------------------*/
#menu {
    font-family: Arial, Helvetica, "sans-serif";
    }

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

#menu li {
    display: inline;
    float: left;
	position: relative;
	}

#menu a:link, #menu a:visited {
	background: transparent url("../images/menu_divider.gif") no-repeat center right;
	color: #fff;
	display: block;
    font-size: 1.2em;
	font-weight: normal;
    padding: 0 14px;
	text-decoration: none;
	}

#menu a:link.last, #menu a:visited.last {
    background: transparent;
    }

#menu li a:hover, #menu a:active, #menu a:focus, #menu a:hover.last, #menu a:active.last, #menu a:focus.last {
	background-color: #fff;	            /* colour on hover (white) */
	background-image: none;
    border-right: 1px solid #fff;       /* keep width the same when moving margin-left -1px */
    color: #000;                        /* black (rgb 0, 0, 0) */
    margin-left: -1px;                  /* cover 'tick' to the left */
	}

/* IE6-workaround as "#menu li.selected a" would not work */
#menu li.selected a:link, #menu li.selected a:visited, #menu li.selected a.last:link, #menu li.selected a.last:visited {
    background-color: #fff;             /* white (rgb 255, 255, 255) */
    border-right: 1px solid #fff;
    color: #000;                        /* black (rgb 0, 0, 0) */
    margin-left: -1px;
    }

/* --------------- CONTENT Typography and Colours --------------------------- */
/* Font-family and color inherited from body (above). */
/* Also see XHTML Tags section (below). */

#content {
    font-size: 1.2em;
    text-align: left;
}

/* --------------- SIDEBAR Typography and Colours ------------------------------
   The sub-navigation items are held within unordered lists (ul).
   When an item is selected that has a sub-menu this is displayed.
   The selected class on the main sub-navigation (ul li) is applied to the <a> tag.
   The selected class on sub-sub-navigation (ul li ul li) is applied to the <li> tag.
*/

#submenu {
    font-size: 1.2em;
    }

/* create gap above and below entire list */
#submenu ul {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    list-style-type: none;
    width: 170px; /* fix for IE6 to allow hover borders  */
    }

    /* spacer below list items */
    #submenu li, #submenu ul ul li {
        padding: 0 0 3px 0;
        }

/* indent sub list */
#submenu ul ul {
    margin: 0 0 0 10px;
    width: 110px; /* fix for IE6 */
    }

    /* selected item in sub-list -- class applied to the list item tag: <li class="selected"> */
    #submenu ul ul li.selected, .currentbranch3 {
        border-left: 5px solid #5f5f5f;
        color: #5f5f5f;                     /* Dark Grey (rgb 95, 95, 95) */
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        padding-left: 5px;
        }

    #submenu ul ul ul li a {  /* fix for #sidebar spilling contents */
        padding-top: 1px;
        padding-bottom: 1px;
        width: 120px;
        }

/* border and padding control left-hand 'tick' marker */
#submenu li a {
    /* coloured padding found in sidebar colour css file */
    padding: 0 0 0 5px;
	color: #fff;
    display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
    width: 155px;                           /* fix for IE6 to allow hover borders */
	}

    #submenu li a:link, #submenu li a:visited {
    	text-decoration: none;
    	}

    #submenu li a:hover, #submenu li a:active {
        border-left: 5px solid #5f5f5f;     /* Dark Grey (rgb 95, 95, 95) */
    	text-decoration: underline;
    	}

#submenu h3 a {
    border: 0;
    color: #5f5f5f;
    font-family: "Book Antiqua", Georgia, Times. serif;
    margin: 0;
    padding: 0;
    }

#submenu h3 a:link, #submenu h3 a:visited {
    font-weight: bold;
    text-decoration: none;
    }

#submenu h3 a:hover, #submenu h3 a:active {
    color: #fff;
    text-decoration: underline;
    }

    /* selected item on list -- class applied to <a> tag: <a href="#" class="selected"> */
    #submenu a.selected, #submenu li a.selected {
        border-left: 5px solid #5f5f5f;     /* Dark Grey (rgb 95, 95, 95) */
        color: #5f5f5f;
        font-weight: bold;
        }

/* start added by T4 for SiteManager link menu code */
	#submenu .currentbranch0 {
		padding: 0 0 0 5px;
		display: block;
		font-family: Arial, Helvetica, sans-serif;
		width: 155px;                           /* fix for IE6 to allow hover borders */
        border-left: 5px solid #5f5f5f;     /* Dark Grey (rgb 95, 95, 95) */
        color: #5f5f5f;
        font-weight: bold;
	}
	#submenu .currentbranch0 a, #submenu .currentbranch0 a:hover, #submenu .currentbranch1 a, #submenu .currentbranch1 a:hover, #submenu .currentbranch2 a, #submenu .currentbranch2 a:hover {
		padding: 0;
		border-left: none;
        color: #5f5f5f;
        font-weight: bold;
 	}
	#submenu .currentbranch1 {
		padding: 0 0 0 5px;
		color: #5f5f5f;
		font-weight: bold;
		display: block;
		font-family: Arial, Helvetica, sans-serif;
        border-left: 5px solid #5f5f5f;     /* Dark Grey (rgb 95, 95, 95) */
	}

	#submenu .currentbranch2 {
		padding: 0 0 0 5px;
		color: #5f5f5f;
		font-weight: bold;
		display: block;
		font-family: Arial, Helvetica, sans-serif;
        border-left: 5px solid #5f5f5f;     /* Dark Grey (rgb 95, 95, 95) */
	}

/* End added by T4 */

        #submenu p a:link, #submenu p a:visited {
            border: 0;
            color: #5f5f5f;                 /* Dark Grey (rgb 95, 95, 95) */
            display: inline;
            margin: 0;
            padding: 0;
            text-decoration: none;
            }

        #submenu p a:hover, #submenu p a:active {
            text-decoration: underline;
            }

/* --------------- RELATED_CONTENT Typography and Colours ------------------- */
#related_content {
    font-size: 1.2em;
    font-family: Arial, Helvetica, sans-serif;
    }

/* Links are crest blue, normal, underlined when mouse-over and clicked */
#related_content a:link, #related_content a:visited {
    color: #00529b;                         /* Crest Blue (rgb 0, 82, 155) */
    font-weight: normal;
    text-decoration: none;
    }

    #related_content a:hover, #related_content a:active {
    text-decoration: underline;
    }

/* Unordered List items */
#related_content ul {
    list-style-type: none;
    margin: 0;
    padding: 10px 0;
    }

    #related_content li {
        padding: 0 0 3px 0;
        }

    /* Places a gap between lists - above h3 elements that follow an unordered list */
    #related_content ul + h3 {
        margin-top: 10px;
        }

/* --------------- FOOTER Typography and Colours ---------------------------- */

/* Ordinary text within the #footer */
#footer p {
	color: #fff;                        /* White (rgb 255, 255, 255) */
	font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 1.2em;
    line-height: 30px;
    margin: 0;
    padding: 0;
    text-align: left;
	}

/* All links within #footer are white, normal */
#footer a {
	color: #fff;                        /* White (rgb 255, 255, 255) */
	font-weight: normal;
	}

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

    #footer a:hover, #footer a:active {
    	text-decoration: underline;
    	}

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

    HEADINGS

    For simplicity all Hx headings are in this section

	h1		#header		"University of St Andrews" title
    h1      #menu       "Current Staff" or "Current Students"

	h2		#content 	page title
	h3		#content	subheading
	h4		#content	subheading
    h5      #content    ---
    h6      #content    ---

    h3      #sidebar    categories

    h2      #related    categories

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

/* --------------- GLOBAL headings ------------------------------------------ */
/* ALL headings are dark grey, bold, Book Antiqua (ono) */
h1, h2, h3, h4, h5, h6 {
    font-family: "Book Antiqua", "Georgia", Times, serif;
	font-weight: bold;
    color: #5f5f5f;             /* Dark Grey (rgb 95, 95, 95) */
    margin: 0;
    padding: 0;
    }

/* --------------- HEADER headings ------------------------------------------ */
/* h1 = University of St Andrews (website title) */
/* h1 = Current Staff or Current Students */
#header h1 {
	color: #fff;                /* White (rgb 255, 255, 255) */
	/* font-size: contained in homepage.css, external.css, internal.css */
    font-weight: normal;
	}

    #header h1 a, #header h1 a:link, #header h1 a:visited {
        color: #fff;            /* White (rgb 255, 255, 255) */
        font-weight: normal;
        text-decoration: none;
    }

    #header h1 a:hover, #header h1 a:active {
        color: #a7b0c9;         /* Blue Nowhere, rgb 167, 176, 201 */
    }

/* --------------- CONTENT headings ----------------------------------------- */
/* Page Title */
#content h2 {
    margin: 10px 0;
    font-size: 2em;
    }

    /* Places gap above Page Title when H2 element follows an image
    If no image then the H2 heading sits flush to the top of the page */
    #content img + h2 {
        margin-top: 0;
        padding-top: 20px;
        position: relative;
        }

/* Sub-headings */
#content h3 {
    font-size: 1.4em;
    margin-top: 1.4em;
    }

    #content h3 + h3 {    /* gap between headings */
        padding-top: 10px;
        }

#content h4, #content h5, #content h6 {
    color: #000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    margin: 0;
    padding: 0;
    }

#content h4 {
    color: #000;
    }

#content h5, #content h6 {
    color: #5f5f5f;
    }

#content h6 {
    font-style: italic;
    }

/* --------------- SIDEBAR headings ----------------------------------------- */
#sidebar h3 {
    font-size: 1.4em;
    }

/* --------------- RELATED_CONTENT headings --------------------------------- */
#related_content h3 {
    font-size: 1.4em;
    }


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

    GENERAL XHTML TAGS

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

a {
	font-weight: normal;
    }

    a:link, a:visited{
    	color: #00529b;         /* Crest Blue (rgb 0, 82, 155) */
        text-decoration: none;
    	}

    a:hover, a:active {
    	text-decoration: underline;
    	}

    #content a:link, #content a:visited {
        text-decoration: underline;
        }

        #content a:hover, #content a:active {
            text-decoration: none;
            }

    #content h3 a:link, #content h3 a:visited {
        color: #5f5f5f;
        font-weight: bold;
        text-decoration: none;
        }

    #content h3 a:hover, #content h3 a:active {
        text-decoration: underline;
        }

abbr, acronym {
	border-bottom: 1px #c0c0c0 dashed;  /* Light Grey (rgb 192, 192, 192) */
	cursor: help;
	}

address {
    font-style: normal;
    margin-left: 20px;
    }

blockquote {
    font-size: 1em;
    margin-left: 40px;
    }

code, kbd, pre, samp, tt {
    font-family: "Courier New", Courier, monospace;
    font-size: 1.2em;
    }

del {
    text-decoration: line-through;
    }

dt {
    font-weight: bold;
    }

em, i {
	font-style: italic;
	}

form {
    width: 100%;
	}

    fieldset {
	    border: 1px #c0c0c0 solid;      /* Light Grey (rgb 192, 192, 192) */
        margin-top: 10px;
    	}

	label {
        font-weight: normal;
        }

	legend {
        color: #000;
        font-weight: bold;
	    }

    textarea {
	    margin-bottom: 10px;
	    width: 75%;
	    }

hr {
	background-color: #c0c0c0;      /* Light Grey (rgb 192, 192, 192) */
	border: none;
	clear: both;
	height: 2px;
	margin: 1.25em auto;
	width: 90%;
	}

img {
	border: 0;
    margin: 0;
    padding: 0;
	}

    /* If image comes after an H2 page heading then it is a small image and should be floated right */
    #content h2 + img {
        float: right;
        margin: 0 0 5px 10px;
        width: 250px;
        }

    #content em {
        margin: 0;
        padding: 0;
        }

ins {
    background-color: #ffff00;      /* Crest Yellow - like a highlighter pen! */
	text-decoration: none;
    }

#content li {
    }

    #content ol {
        /* list-style-type: decimal; */
        }

    #content ul {
        list-style-type: disc;
        }

/* the <q> tag is for inline quotations - this removes the automatically inserted quotation marks in W3C-compliant
browsers but which are not supported in IE.  (See http://alistapart.com/articles/qtag for details.) */
q:before, q:after {
    content: "";
    }

small {
	font-size: 0.9em;
	}

strong, b {
	font-weight: bold;
	}

/* strike has been deprecated by the W3C as of xhtml 1.0 but I've included it here just in case anyone uses it! */
strike {
    text-decoration: line-through;
    }

sub {
	vertical-align: sub;
	}

sup {
	vertical-align: super;
	}

table {
    border-collapse: collapse;
    border-top: 1px solid #a7b0c9;          /* Blue Nowhere (rgb 167, 176, 201) */
    border-bottom: 1px solid #a7b0c9;
    margin: 10px 0;
    padding: 0;
    text-align: left;
    vertical-align: top;
    width: 100%;
    }

    caption {
        caption-side: top;
        color: #000;
        font-weight: bold;
        margin-top: 15px;
        text-align: left;
        }



    thead, th {
        background-color: #a7b0c9;              /* Blue Nowhere (rgb 167, 176, 201) */
        color: #fff;
        }

    th[scope="row"] {
        background-color: transparent;
        width: 450px;
        }

    tr {
        text-align: left;
        vertical-align: top;
        }

    tr.even {
        background-color: #f1f1ee;          /* Warm Grey (rgb 241, 241, 281) */
        }

    tbody {
        }

    td, th {
        padding: 2px;
        text-align: left;
        vertical-align: top;
        }

    tfoot {
        font-style: italic;
        }

u {
	text-decoration: underline;
	}

/* <var> is used to indicate a variable or program argument; it is normal to render this in italics. */
var {
    font-style: italic;
    }


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

    MISC. DIVISIONS

================================================================================

    === sde1 Formats table on Address and Contact pages === */
    /* Removes default bottom border from table */
    .contacts table {
		border-top:0;
        border-bottom: 0;
        }

    /* Indents first column */
    .contacts table th {
        color: #000;
        padding-left: 40px;
        }

    /* Separates headings */
    .contacts h3 {
		border-bottom: 1px solid #a7b0c9;
        margin: 10px 0;
		}

    /*Format of Emergency information at top of contacts page*/
	#emergency {
		border-bottom: 1px solid #a7b0c9;
		padding-bottom: 10px;
	}

    .azlist {
        color: #5f5f5f;
        font-size: 1.4em;
        }

    .azlist a:link, .azlist a:visited {
        color: #00529b;
        text-decoration: underline;
        }

    .azlist a:hover, .azlist a:active {
        text-decoration: none;
        }

    #adminaz ul {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
        }

    #adminaz ul ul {
        list-style: none;
        margin-left: 20px;
        }

    #researchcentres ul {
        list-style: disc;
        margin-left: 40px;
        padding-left: 0;
        }
/*
================================================================================

    MISC. CLASSES

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

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}

.hidden {
    display: none;
    }

/* The .hide class is used with the hidden accessibility link to "Skip navigation to content".
   This method exposes the link when it receives focus, as documented in
   "Web Accessibility: Web Standards and Regulatory Compliance" by Thatcher, et al (friends of ED, 2006),
   page 191 ff. */
.hide a {
    display: inline;
    font-size: 1.2em;
    left: -200em;
    padding: 0 0.5em;
	position: absolute;
    text-decoration: none;
    width: 14em;
    z-index: 2;
	}

    .hide a:focus, .hide a:active {
        position: absolute;
        left: 0.5em;
        border: solid #00529b 2px;
        color: #000;
        background: #fff;
    }

.fileoutput {
    font-size: 0.875em;
    }

#content .fileoutput {
    display: inline;
    }

#related_content .fileoutput {
    display: block;
    }

.photocaption {
    margin: 0;
    padding: 0;
    }

table.noborder {
    border: 0;
    }

table.vacancy td, table.courses td {
    background-color: #f1f1ee;
    }

/*==============================================================================
    This document automatically commented by GarethBrain v.35.7(tm)
    Get Firefox -- Rediscover the Web (www.getfirefox.com)
    No polar bears were harmed in the creation of this CSS file.
  ==============================================================================
    */