/* -------------------------------------------------------------------------------- */
/* DOC-New CSS File                                                                     */
/* -------------------------------------------------------------------------------- */

/*
 * This file contains all the CSS which is exclusive to the New Internal DOC website.
 *
 */

/* -------------------------------------------------------------------------------- */
/*
 * Places a border to the right and left of the page.
 */
.page-border {
border-left: medium  solid #eeeeee;
border-right: medium solid #eeeeee;
border-bottom: medium solid #eeeeee;
}

/*
 * Lays out links side by side on the screen.
 * Use with colourbox to give the links a pink background.
 * Make sure to give each link an associated image, to
 * ensure it is layed out correctly.
 */
.grouptabs {
	float: left;
	margin-left: 5px;
    margin-top: 0px;
	margin-bottom: 15px;
    padding: 0px;
	/* padding-left: 5px; */
	padding-right: 5px;
	width: 277px;
}

.grouptabs img {
	vertical-align: middle; /* Actually makes the text display in the middle of the grouptab div */
    border: 0px;
/*    border: 1px solid black;
    background-color: #AAAAAA; */
    width: 48px;
    height: 48px;
}

/* Use the .multilinelink class if your text spans over multiple links
 * group tabs in each block must either all have the multilinelink class
 * or none, for them to display correctly.
 */
.grouptabs .multilinelink {
    display: table-cell;
    vertical-align: middle;
    padding-right: 3px;
    /* Need this so that IE displays the text to the right of the image, otherwise
     * it just places it below.
     * IE does not place the text vertically in the middle though. All other
     * browsers seem to render it fine.
     */
    float: left;
}

/* Tell other non-IE browsers to not use the float */
html>body .grouptabs .multilinelink { 
    float: none;
}

.longtab {
	width: 100%;
	}

/* -------------------------------------------------------------------------------- */


/*
 * Used in the personalised homepage, to make sure two links can fit side by
 * side, while also having the side bar.
 */
.thin {
    width: 230px;
}


/* -------------------------------------------------------------------------------- */


/*
 * Like a normal grouptab, but the link/header has
 * more information below it (such as a small description,
 * or more links related to that topic).
 * The link/header always has a pink background.
 */
.largegrouptab {
    float: left;
    margin-left: 10px;
    margin-top: 5px;
    width: 400px;
}

.largegrouptabheader {
    /* padding-left: 5px; */
    padding-right: 5px;
/*    background-color: #ffe8df; */
    background-color: #eeeeee;
}

/* Overwrite the default colour box with a gray background
 * as no one likes the pink colour
 */
.colourbox {
    background-color: #eeeeee !important;
}

/*
 * Specify this class if you want to use a header without an image
 */
.noimage {
    padding: 5px;
}

.largegrouptabheader img {
	vertical-align: middle;
	border: 0px;
/*    border: 1px solid black;
    background-color: #AAAAAA; */
    width: 48px;
    height: 48px;
}

.largegrouptabbody {
    padding: 5px;
    padding-left: 10px;
    padding-bottom: 15px;
}

/*
 * Used to provide a single centered large group tab (such as on the
 * homepage).
 * The tab must be surrounded by <div align="center"> ... </div>
 * to ensure that it is centered correctly in IE.
 */
.largegrouptabcentered {
    float:none; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: left;
}

/* -------------------------------------------------------------------------------- */


/*
 * Use for minor descriptive text.
 * Displays in a small font, and gray colour.
 */
.small {
	font-size: 90%;
	color: #666666;
}


/* -------------------------------------------------------------------------------- */


/*
 * Gives the pink background to the areas behind each letter
 * on the index page.
 * The pink is actually applied to the whole div including all the links
 * but a later style rule gives the link area a white background.
 */
.indexgroup {
	background-color: #ffe8df;
	margin-bottom: 20px;
	margin-top: 20px;
}

/*
 * The width of the letter div is carefully specified so that the
 * letter appears to be center aligned.
 */
.indexletter {
	float: left; 
	width: 2.0em; 
	text-align: center;
	padding-top: 5px;
}

/*
 * The background colour rules ensures the links have a white background,
 * rather than the pink background specified by the .indexgroup class.
 */
.indexlinks {
	 margin-left: 2.0em; 
	 padding: 5px; 
	 background-color: #FFFFFF;
}


/* -------------------------------------------------------------------------------- */


/*
 * This ensures that the link to skip past navigation straight to the page contents
 * is not displayed in visual browsers, where it is not needed.
 * 
 * http://diveintoaccessibility.org/day_11_skipping_over_navigation_links.html
 */
.skiplink {
	display:none
}


/* -------------------------------------------------------------------------------- */


/* 
 * The CSS classes below provide an improved version of the left navigation css
 * given by ICT.
 * This improved version allows the left navigation to be represented by a list of items
 * rather than <br /> separated lines. This is more semantically correct, and provides
 * better structure to non-visual browsers.
 *
 * http://www.alistapart.com/stories/taminglists/
 */

.leftnavholder {
    width:140px;
	text-align:left;
	margin-top: 35px;
	vertical-align: top;
    padding-left: 10px;
	float: left;
}

/*
 * Left Nav Main is used for the first level of left navigation links.
 * These should be preceded with the &raquo; character to display correctly.
 */
.leftnavmain li {
    margin: 0px;
    padding: 0px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-top: 2px;
}

.leftnavmain {
    margin: 0px;
    padding: 0px;

    list-style: none;
    padding-left: 1em;
    text-indent: -1.15em; /* This ensures that links line up if they spread over 2 lines */
}

.leftnavmain li a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	color:  #cc3300;
}

.leftnavmain li a:hover {
	text-decoration: underline;
}


/*
 * Left Nav Sub is used for the second level links.
 * These should not be preceded by any other characters
 */
.leftnavsub {
    margin: 0px;
    padding: 0px;

    list-style: none;
    padding-left: 1em;
    text-indent: -1em;

}

.leftnavsub li {
    padding-bottom: 2px;
    padding-top: 2px;
    line-height: 15px;
}

.leftnavsub li a {
    font-weight: normal;
	text-decoration: none;
	color:  #cc3300;
}


/* -------------------------------------------------------------------------------- */


/*
 * Make the advanced photo search tables have a gray background,
 * except for the table headers, which are the colours specified below.
 */
.photosearchtable td {
    vertical-align: top;
    background-color: #FFFFFF;
}


.photosubmit {
    text-align: right;
}


/* 
 * Advanced Photo Search Colours 
 * Taken from the background colours
 * used when displying the photo
 * where possible.
 */

.tutorgroupsearch th {
    background-color: #ddffdd;
}

.nameloginsearch th {
    background-color: #ddeeff;
}



/* -------------------------------------------------------------------------------- */


/* 
 * Personal Homepage 
 * The personal homepage uses a unique template and the styles below
 * to ensure that the sidebar and two columns of links can be sucessfully
 * displayed.
 */

/*
 * Give the side bar a faint gray background to distinguish it from
 * the rest of the page. This does not always show up much on LCD
 * monitors but this is not a problem, as the side links are still clear.
 * Many of the css rules for the sidebar are similar to those for the 
 * improved left navigation.
 */
.myintranet-sidebar {
    width: 200px;
    float: left;
    margin: 0px;
    padding: 0px;
    padding-left: 10px;
   	padding-top: 20px;
    background-color: #fafafa;
}

.myintranet-sidebar ul {
    margin: 0px;
    padding: 0px;

    list-style: none;
}

.myintranet-sidebar * {
    margin: 0px;
    padding: 0px;
}

.myintranet-sidebar li {
    margin: 0px;
    padding: 1px;
}

.myintranet-sidebar .sidebar-title {
	margin-bottom: 20px;

}

.myintranet-sidebar .sidebar-title ul {
    font-weight: normal;
    padding-left: 5px;

    padding-left: 1em;
    text-indent: -1em;
}

.myintranet-sidebar .sidebar-title ul li a {
    color: #cc3300;
}

/*
 * This is the main area of the personal homepage, where
 * the two columns of links are displayed.
 */
.myintranet-mainarea {
    width: 500px;
    float: left;
    padding-left: 20px;
}


/* -------------------------------------------------------------------------------- */


/*
 * Ensures that lists of links are more readable by
 * putting a little white space between each line.
 */

ul li {
    margin-bottom: 5px;
}


/* -------------------------------------------------------------------------------- */

/*
 * Events in the calendar have a pink background.
 * the Start of Term and End of Term events are special, in
 * that they have their own classes to ensure they get different
 * colour backgrounds. This makes it easier to see when events happen.
 */
.calendar {
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.calendar * {
    vertical-align: top;
    padding: 2px;
}

.calendar th {
    background-color: #cc3300;
    color: #ffffff;
}

.calendar td {
    background-color: #ffe8df;
}

.calendar .termstart td {
    background-color: #eeeeee;
    color: #444;
}

.calendar .termend td {
    background-color: #dddddd;
    color: #444;
}


/* -------------------------------------------------------------------------------- */

/*
 * The staff list is displayed in a table.
 * CSS is used to ensure the columns are the correct width.
 */
.stafflist {
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.stafflist th {
    text-align: left;
}

.stafflist td {
    vertical-align: top;
}

.stafflist .name {
    width: 35%;
}

.stafflist .phone {
    width: 25%;
}

.stafflist .email {
    width: 30%;
}

.stafflist .room {
    width: 10%;
}


/* -------------------------------------------------------------------------------- */


.staffphoto {
    float: left; 
    margin: 5px; 
}

.staffphoto div {
    width: 180px;
    height: 120px;
    text-align: center;
}

.staffphoto div img {
    height: 108px;
    width: 82px;
}


/* -------------------------------------------------------------------------------- */


/*
 * Just to make sure that the UCAS table cells line up on the course lists
 * on the undergradaute teaching page.
 */
.ucas {
    width: 20%;
}


/* -------------------------------------------------------------------------------- */

/*
 * Table CSS for displaying lectures.
 */
.lectures {
    border-spacing: 4px;
}

.lectures th, .lectures td {
    padding: 5px;
    vertical-align: top;
}

.lectures th {
    background-color: #ffe8df;
    width: 33%;
}

.lectures td {
    background-color: #eeeeee;
}

.lectures .required {
    color: #832018;
}

/* This gives the colour for the Maths or Computing headers on the JMC lectures*/
.lectures .header {
    background-color: #dddddd;
}


/* -------------------------------------------------------------------------------- */

/*
 * This makes sure that images which are links do
 * not display a blue border.
 */
img {
    border: none;
}


/* -------------------------------------------------------------------------------- */


/*
 * Used for many simple tables
 * The table header has a pink background, and 
 * the rest is gray.
 */
.colourtable {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.colourtable th {
    background-color: #ffe8df;
    padding: 2px;
}

.colourtable td {
    background-color: #eeeeee;
    padding: 2px;
    vertical-align: top;
}


/* -------------------------------------------------------------------------------- */


.researcharea {
    width: 194px;
    padding-left: 2px;
    padding-top: 2px;
    padding-bottom: 10px;
    float: left;
}

.researcharea .header {
    padding: 5px;
    background-color: #eeeeee;
    font-weight: bold;
}


/* -------------------------------------------------------------------------------- */

/*
 * Make horizontal rules display as nice dotted gray lines.
 * More in keeping with the ICT look and feel.
 */
hr {
    border: none;
	border-bottom: 1px dotted #CCCCCC;
    background: none;
}


/* -------------------------------------------------------------------------------- */

/*
 * This is to force browsers to remember font sizes when they display
 * tables.
 * Many of them forget and default to a big ugly font.
 */
table {
	font-family: Verdana, sans-serif;
	font-size: 1em;
}


/* -------------------------------------------------------------------------------- */


/*
 * Give images a nice black border.
 * For images without white backgrounds this makes them
 * look better.
 */
.imageborder {
    border: thin solid black;
}


/* -------------------------------------------------------------------------------- */


/*
 * CSS for the gray footer at the bottom of each page which contains
 * a site index link and a search box.
 */
.docfooter {
	background-color: #eeeeee;  padding: 8px;
}

.docfooterelement {
    text-align: center;
}

.docfooterelement form {
	display: inline;
}

.docfooterelement input {
	vertical-align: center;
}

/*
 * Internet Explorer seems to have trouble understanding the clear:all; CSS 
 * statement, so an extra div, with a space character is required to force
 * IE to format the floating elements properly.
 * To stop this extra div taking up vertical space, the line-height of the text
 * is set to zero.
 */
.docfooteriefix {
	line-height: 0px;
}


/* -------------------------------------------------------------------------------- */


/*
 * Use with the hottopics CSS to create a hottopics box which is wider and
 * can hold more data.
 */
.widehottopics {
    width: 200px;
}


/* -------------------------------------------------------------------------------- */


/*
 * Used on the submission sheets page to make the text display vertically
 * to the middle of the PDF icons.
 */
.middlealignimage {
    vertical-align: middle; 
    margin: 2px;
}


/* -------------------------------------------------------------------------------- */


/*
 * Use to format error messages nicely on dynamic pages.
 */
.error {
    padding: 2px; 
    border: 1px solid red; 
    background: #FF8888;
    font-weight: bold;
}


/* -------------------------------------------------------------------------------- */

/*
 * This makes the Search button display next to the input box,
 * rather than below it.
 */
.quicksearchform {
    display: inline;
}

.quicksearchform input {
    vertical-align: middle;
}


/* -------------------------------------------------------------------------------- */


.studentphoto {
    float: left;
    margin: 6px;
    padding: 0px;
    border: 1px solid black;
    width: 180px;
}

.studentphotoheader {
    padding: 5px;
    margin: 0px;
    text-align: center;
    /* display: table-cell;
    vertical-align: middle; */ /* Does not work on Mac IE5, Mac Opera 6.03 */
    width: 170px;
    height: 210px;
}


.studentphotofooter {
    border-top: 1px solid black;
    padding: 5px;
}


/*
 *  These are the colours for colour coding results
 *  from the people and photo searches.
 */
.student-colour {
    background-color: #ffe8df;
}

.staff-colour {
    background-color: #d8dfff;
}

.researcher-colour {
    background-color: #dfffe8;
}

.msc-colour {
    background-color: #ffdde8;
}


/* -------------------------------------------------------------------------------- */


/* Redifine hottopics as applying to a class rather than an id,
 * so that it is possible to apply it to more than one element on
 * a page.
 */
.hottopics {
	float:right;
	text-align:left;
	vertical-align: top;
	border: 1px dotted #CCCCCC;
	width: auto;
	padding: 5px;
	margin-left: 10px;
	height: auto;

}


/* -------------------------------------------------------------------------------- */


.photo-link {
    float: right;
    text-align: right;
    width: 150px; /* Need to specify the width here to make Mac IE5 do the float correctly */
}


/* -------------------------------------------------------------------------------- */


/*
 *  Personalised Timetable
 */
 
.timetable {
    border: none;
    font-size: 1em;
    width: 100%;
}
 
.printable-timetable {
    border: 2px solid black;
    font-size: 1em;
    width: 100%;
}
 
.timetable td {
    padding: 2px;
    margin: 2px;
    vertical-align: top;
}
 
.timetable-cell {
    height: 40px;
    width: 20%;
}


/* -------------------------------------------------------------------------------- */


/*
 *  For displaying a box which explains the colour coding
 *  used in the people and photo search.
 */
.colour-key ul {
    margin: 1px;
    padding: 1px;
    list-style: none;
}

.colour-key li {
    border: 1px solid #BBBBBB;
    padding-left: 2px;
    padding-right: 2px;
}
UL.clean {
	margin-left: 0px;
	list-style-type: none;
}

/*-----------------------------------------------------------------------------------*/

/*
 * Additional styles from the Oracle content management system.
 *
 */
 
.nav {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	/*font-size: 0.7em;*/
	text-transform: uppercase;
	float: left;
	height: 5ex;
	color: #000000;
	font-weight: bold;
	background-image:url(http://www.doc.ic.ac.uk/images/navbg.gif);
	background-repeat:repeat-x;
	background-position: right top;
	white-space: nowrap;
	padding-top: 0.4em;
	text-align: center;
	vertical-align: middle;
	font-size: 9px;
	text-decoration:none;
}

.noDecoration{
	text-decoration:none;
	color:#000000;
}

.hidelabel{
	display:none!important;
}

/*-----------------------------------------------------------------------------------*/

/*
 * Additional styles from the Oracle content management system .
 *
 */
comment: style affecting remainder of computing site;
*/

#content1 {
	padding-left: 1em;
	width: 100%;
	padding-right: 1em;
	vertical-align: top;
	overflow: hidden;
}

div#content1 p {
    font-family: Verdana, Helvetica, sans-serif;
    text-align: ;
    line-height: 135%;
    padding-bottom: 0em;
    margin-top: 0em;
    margin-bottom: 0.6em;
}

div#content1 h1 {
    text-transform: uppercase;
    text-align: left;
    font-size: 1.5em;
    font-family: Verdana, Helvetica, sans-serif;
    margin-top: 1.3em;
    margin-bottom: 3.3em;
}

div#content1 h2 {
    text-transform: uppercase;
    font-size: 1.2em;
    font-family: Verdana, Helvetica, sans-serif;
    margin-top: 2.8em;
    padding-bottom: 0.2em;
    margin-bottom: 1em;
}

div#content1 h3 {
    text-transform: uppercase;
    font-size: 1.0em;
    font-family: Verdana, Helvetica, sans-serif;
    color: black;
    padding-top: 0.3em;
    margin-bottom: 0.2em;
}

div#content1 ul {
    text-align: justify;
    list-style-type: none;
    list-style-position: outside;
}

div#content1 ol {
    text-align: justify;
    list-style-type: lower-roman;
    list-style-position: outside;
}

div#content1 ul, div#content ol {
    margin-top: 1.3em;
    margin-bottom: 1.8em;
}

div#content1 ul li, div#content ol li {
    margin-bottom: 0.9em;
}

div#content1 table {
    border-width: 1px;
    border-style: dotted;
    margin-top: 1em;
    margin-bottom: 1em;
}

div#content1 table th, div#content table td  {
    text-align: left;
    vertical-align: top;
    padding-right: 0.5em;
}

div#content1 img.story {
   float: right;
   border: black solid;
   border-width: 1px;
   margin-left: 0.8em;
   margin-bottom: 0.8em;
}


div#content1 img.storyleft {
   float: left;
   border: black solid;
   border-width: 1px;
   margin-left: 0.8em;
   margin-bottom: 0.8em;
}

div#content1 img.storyinline {
   float: none;
   border: black solid;
   border-width: 1px;
   margin-top: 0.8em;
   margin-bottom: 0.8em;
}

div#content1 img.storynb {
   float: right;
   border: none;
   margin-left: 0.8em;
   margin-bottom: 0.8em;
}

div#content1 img.storynbleft {
   float: left;
   border: none;
   margin-left: 0.8em;
   margin-bottom: 0.8em;
}

div#content1 table.courses {
   margin-top: 0.2em;
   margin-bottom: 2em;
   border-color: white;
   width: 100%;
   border-width: 2px;
   border-left: 0px;
}

div#content1 table.courses th {
   text-transform: uppercase;
   font-weight: bold;	
   padding: 0.5em;
   height: 2em;
   background-color: #cce9e3;
}