elements with specified C values which enclose user-supplied data. The expected region layout is as follows: +--------------------------------+ | header | +--------------------------------+ | titlebar | +--------------------------------+ | n | | | a | | | v | | | b | content | | a | | | r | | +--------------------------------+ =head3 Colours A set of colours has been developed which give satisfactory luminance and contrast. These are in two sets: pale and dark: pale dark ---- ---- white #00529b #fff89d #404040 #dddddd #a00000 black All these colours have sufficient luminance, and the contrast between any pale and any dark colour is sufficient for legibility. =head3 Tables Two sets of table styles are defined: one for row-based tables, and one for column-based tables. A table is row-based or column-based depending on how its header cells are arranged. In the simplest case, if the top row is a header row (using elements) then the table is row-based. A column-based table has headers in a column. Not all tables are so simple. The following style classes are defined for tables: =over =item row_head Class for a table row containing header information. Usually table headers use the C<< >> element, but not necessarily. The table row element should be in this class: EmailName =item row_data_0, row_data_1 These classes can be used to give alternating styles to even and odd rows: Coull, NatalieMiss Dearle, Alan Dow, Lisa Duncan, Ishbel The first data row should be in the C class. =item col_head, col_data_0, col_data_1 The "correct" way to style columns would be to use the and elements, but browser support for these is lacking. Consequently it is necessary to specify a class attribute in every cell. The C class identifies the column header cells. The C and C classes identify alternating column cells. The first data column should be in the C class. =back =head3 Browser bug work arounds The CSS contains some parts which are needed to work around certain browser bugs. So far none of these has had to do any style targetting - that is, arranging for different CSS to go to different browsers, or exploiting browser bugs so that different browsers see different parts of the CSS. Instead, the CSS has compensated for browser shortcomings. For example, IE for Windows' relative font size inheritance cascade is broken. The work around for this is to put extra font size information where it is needed. The resultant style sheet contains redundant information, but it is still valid CSS. Compensatory entries are marked with comments, as follows. =over =item IE7/Win Bug: relative font size inheritance cascade is broken. Fix: specify font sizes explicitly. =item FF/Mac/Win In #titlebar h1:first-child and #titlebar h1+h1, not specifying font-size, or specifying font-size=2em, breaks the content layout. No idea why! =back =head1 HISTORY =over =item 28.0.0 2008-03-18 N R Paterson "highlight" class defined. =item 27.0.0 06-Aug-2007 N R Paterson 0.25em padding added to to improve legibility. =item 26.0.0 07-Jun-2007 M G Tauber Created class timetable, which may be removed after the timetable module is changed. =item 25.2.0 30-Apr-2007 M G Tauber changed body min-width back to 800px; =item 25.1.0 22-Apr-2007 M G Tauber background color changed and overwriting .node-form .standard from drupal.css (delete clear both) and changed body min-width to 1150px; =item 25.0.0 9-Apr-2007 M G Tauber Classes th.textbookdetails defined for textbook detail tables. =item 23.0.0 21-Mar-2007 N R Paterson Classes .col_head, .col_data_0 and .col_data_1 defined for column-based tables. =item 22.0.0 12-Mar-2007 N R Paterson Tweaked position of content collage and story to fix IE idiot-syncrasies, and to permit placing University Arms in first paragraph of home page. =item 21.0.0 27-Feb-2007 N R Paterson Bug in title bar fixed. Simpler CSS now works with IE and other browsers. Navbar links are now bold, as normal-weight light-on-dark is hard to read. Bug in #navbar_admin ul[class="tabs primary"] a fixed: #a000000 is now #a00000. Body now has min-height and min-width specified. But min-height does not work on any browser! Body font-size is now "small". Headings now have explicit font sizes. Content-story font size now inherits "small" not 90%. =item 23.0.0 19-Feb-2007 M G Tauber Implemented menu-tree style like in misc/drupal.css to compose a tree structure in the navbar_admin section. Introduced new classes in #navbar_admin ul.menu, li.expanded, li.collapsed, li.leaf Navbar footer floats now (no overlaping with navbar childer anymore) =item 20.0.0 06-Feb-2007 N R Paterson Style for images in tables adjusted to remove excess padding, and add a border. ".thumbnail" class defined. =item 19.0.0 22-Jan-2007 N R Paterson Classes row_head, row_data_0 and row_data_1 defined for alternating table backgrounds. =item 18.0.0 22-Jan-2007 N R Paterson Header background bits image corrected to http://www.cs.st-andrews.ac.uk/files/header_bits.png. Image changed in /files. #cs_rsch_poster_mini max-width: restored to 30em. =item 17.0.0 18-Jan-2007 N R Paterson URL references to resources (eg to background image) are now complete URLs, so that this style sheet can be linked from other http servers. =item 16.0.0 15-Jan-2007 M G Tauber List items for breadcrumbs_header are displayed now through >> in PHP. =item 15.0.0 08-Jan-2007 N R Paterson Style "#navbar_footer img" defined for navbar footer images (ie the University Arms). =item 14.0.0 05-Jan-2007 N R Paterson Style for mini-poster and personal image now more flexible; allows any size image, limits text lines to 30 em. =item 13.0.0 22-Dec-2006 N R Paterson Collage border color changed to improve 3D effect. Styles added for cs_rsch. These shuold be removed to a separate file asap. =item 12.0.0 22-Dec-2006 N R Paterson Edition skipped due to numbering mixup. =item 11.0.0 18-Dec-2006 N R Paterson Renamed to style.css (hence jump in edition number). Style for search box in navbar_footer corrected. Title bar font size reduced. Content font-size reduced so that content headers are smaller than title bar headers. =item 2.0.0 08-Dec-2006 N R Paterson Complete revision. =item 1.0.0 29-Nov-2006 N R Paterson Adapted from style.css.10, which was based on design work carried out by Steve Smart in the summer of 2006. =back =cut */ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /* Drupal style */ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /******/ @import "misc/drupal.css"; /******/ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /* Normal style */ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /* This section defines "normal" property values to deviate from. In each block, style rules are in this order: 1. Position and size. 2. Margins, border, padding. 3. Background, foreground, content. Set the dimensions in html so that 100% = full window size. Otherwise, body.height gets set to 0px. Body inherits its dimensions from html. Body.background-color is dark red, not pale grey, for the navbar. Otherwise, the navbar has to fill the space between the children and the footer with dark red; but there is no good way to fill that vertical space. */ html { height: 100%; width: 100%; } body { min-width: 800px; min-height: 600px; height: 100%; margin: 0; padding: 0; background-color: #404040; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; } /* Class to highlight text that would otherwise be normal style */ .highlight { background-color: #a00000; color: #fff89d; font-weight: bold; } /* IE7/Win Explicit header font sizes */ /* Taken from http://www.w3.org/TR/REC-CSS2/sample.html */ h1, h2, h3, h4, h5, h6 { font-family: Georgia, "Book Antiqua", "Palatino Linotype", "Times New Roman", serif; font-weight: bold; color: #404040; margin: 0; padding: 0; } h1 { font-size: 100%; color: white; font-weight: normal; } h2 { font-size: 2.00em; } h3 { font-size: 1.50em; } h4 { font-size: 1.17em; } h5 { font-size: 1.00em; } h6 { font-size: 0.83em; } /* Links */ a { font-weight: bold; color: #00529b; text-decoration: none; } a:hover { text-decoration: underline; } /******/ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /* Header */ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /******/ #header { position: relative; width: 100%; background: white url(/files/header_bits.png) repeat; } #header_left { position: absolute; height: 100%; width: 10em; background: #404040 url(/files/header_bits.png) repeat; } #header_breadcrumbs { position: relative; width: 50%; left: 50%; padding: 0; background-color: #404040; } #header_breadcrumbs a { color: white; } #header_breadcrumbs ol { margin: 0; padding: 0.5em 1em 0.5em 1em; } #header_breadcrumbs ul { margin: 0; padding: 1.5em 1em 1.5em 1em; } #header_breadcrumbs li { display: inline; /* does not work in IE with dislpaly: inline or float: left list-style-type: circle; */ } /* disapled because it does not work with IE Generate a disc for each list item. See http://www.unicode.org/charts/PDF/U2700.pdf for Unicode values. #header_breadcrumbs li:before { content: " \0025cf "; } */ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /* Title bar */ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /* The titlebar div expects to contain two h1 elements. The first h1 is the running title. The second h1 is the page title. */ #titlebar { position: relative; width: 100%; margin: 0; background-color: #00529b; } #titlebar h1:first-child { float: right; margin: 0; padding: 0.25em 1em 0.25em 1em; color: white; font-size: x-large; /* FF/Mac/Win */ } #titlebar h1+h1 { margin: 0; padding: 0.25em 1em 0.25em 1em; font-size: x-large; /* FF/Mac/Win */ } /******/ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /* Navigation bar */ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /******/ #navbar { font-family: Verdana, Arial, Helvetica, sans-serif; width: 10em; float: left; background: #404040; } #navbar li { padding: 0.25em 0 0 0; list-style-type: none; font-weight:bold; } #navbar a { display: block; padding: 0.25em 0 0.25em 1em; color: white; } /******/ /******/ /******/ /******/ /* Navigation bar - admin region */ /******/ /******/ /******/ /******/ /* Makes items in navbar follow house style. */ #navbar_admin .nodeTitle { color: #404040; font-weight: bold; } #navbar_admin ul.menu { list-style: none; padding: 0 0 0 2em ; border: none; text-align:left; } #navbar_admin li { padding: 0 1em 0 1em; margin: 0; padding: 0; border-width: 0; } #navbar_admin li.expanded { list-style-type: circle; /* Image does not exist: may as well comment out. NRP 2008-12-15. list-style-image: url(/misc/menu-expanded.png); */ } #navbar_admin li.collapsed { list-style-type: disc; /* Image does not exist: may as well comment out. NRP 2008-12-15. list-style-image: url(/misc/menu-collapsed.png); */ } #navbar_admin li.leaf { list-style-type: square; /* Image does not exist: may as well comment out. NRP 2008-12-15. list-style-image: url(/misc/menu-leaf.png); */ } /* Places the "view" and "edit" tabs at the top left. */ #navbar_admin ul[class="tabs primary"] { position: absolute; top: 0; left: 0; } #navbar_admin ul[class="tabs primary"] a { background-color: #404040; color: #a00000; } #navbar_admin ul[class="tabs primary"] .active { font-weight: bold; } /******/ /******/ /******/ /******/ /* Navigation bar - children region */ /******/ /******/ /******/ /******/ #navbar_children ol { margin: 1em 0 1em 0; padding: 0; } #navbar_children li { border-width: 0 0 1px 0; } /******/ /******/ /******/ /******/ /* Navigation bar - footer region */ /******/ /******/ /******/ /******/ #navbar_footer { bottom: 0; width: 10em; } #navbar_footer img { display: block; margin: 0 auto 0 auto; padding: 1em; } #navbar_footer ol { margin: 0; padding: 0; } #navbar_footer li { border-width: 1px 0 0 0; } #navbar_footer p { padding: 0 1em 0 1em; /*font-size: 75%;*/ font-weight: bold; color: #404040; } /******/ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /* Content */ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /* #content needs zero-margin elements generated before and after. Otherwise the margins of the first and last user-supplied element will apply and let the dark red body show through. */ #content { min-height: 100%; margin: 0 0 0 10em; padding: 1em 1em 0 1em; /* Top padding needed for IE. */ border-style: solid; border-width: 0 0 0 2px; border-color: white; background-color: white; } #content_collage { position: relative; /* Allows foreground images to be absolute. */ float: right; margin: 0 0 0 1em; } #content_collage img { border-style: outset; border-width: 6px; border-color: white #404040 #404040 white; } #content_collage_back { } #content_collage_face { position: absolute; top: 37px; left: 37px; } #content_collage_idea { position: absolute; top: 196px; left: 37px; } #content_collage_real { position: absolute; top: 355px; left: 37px; } #content_story:before { display: block; height: 0; content: "\0000a0"; /* No-break space. */ } #content_story > :first-child { margin-top: 0; /* Remove excess space before start of story. */ /* (Excess space is padding added above for IE.) */ } #content_story:after { display: block; content: "\0000a0"; /* No-break space. */ } #content_story th { border: none; /* Overrides Drupal's style. */ } /******/ /******/ /******/ /******/ /* Tables */ /******/ /******/ /******/ /******/ th { background-color: #00529b; color: white; text-align: left; font-weight: bold; } /******/ /******/ /* Textbook detail - header background*/ /******/ /******/ /* */ th.textbookdetail { background-color: #404040; text-align: left; font-weight: bold; } /******/ /******/ /* Alternate row background colour */ /******/ /******/ /* */ #content_story tr.row_data_0 { background-color: #dddddd; } /* */ #content_story tr.row_data_1 { } /******/ /******/ /* Alternate column background colour */ /******/ /******/ /* */ .col_data_0 { background-color: white; } /* */ .col_data_1 { } /******/ /******/ /******/ /******/ /* Show thumbnails without excess padding */ /******/ /******/ /******/ /******/ #content_story tr.row_head img { vertical-align: bottom; } #content_story tr.row_data_0 img { vertical-align: bottom; } #content_story tr.row_data_1 img { vertical-align: bottom; } #content_story td { padding: 0.25em; /* a little padding improves readability */ } /* timetable work around */ #content_story td.timetable { background-color: #404040; color: black; } #content_story td.TIMETABLE { background-color: #404040; color: black; } #content_story th.timetable { font-style:oblique; color: black; background-color: #404040; } #content_story th.TIMETABLE { font-style:oblique; color: black; background-color: #404040; } .thumbnail { border-style: solid; border-width: 1px; border-color: black; } /******/ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /* Styles for pages in the cs_rsch category /******/ /******/ /******/ /******/ /******/ /******/ /******/ /******/ #cs_rsch_poster_mini { float: right; margin: 1em auto 1em auto; /* auto ... auto centers horizontally. */ border-style: outset; border-width: 6px; border-color: white #404040 #404040 white; padding: 2em 2em 1em 2em; background-color: #404040; color: #404040; text-align: center; } #cs_rsch_poster_mini p { max-width: 30em; /* Forces line break in long titles */ } #cs_rsch_overview { } #cs_rsch_academic_staff { } #cs_rsch_research_staff { } #cs_rsch_research_students { } #cs_rsch_projects { } #cs_rsch_vacancies { } #cs_rsch_local_links { } #content_story h1 { font-weight: bold; color: #404040; font-size: 2.00em; } .cs_rsch_cols_3 { clear: both; background-color: white; border-style: solid; border-width: 1px 0 0 0; border-color: black; } .cs_rsch_col_1of3 { width: 33%; float: left; margin: 0; } .cs_rsch_col_2of3 { width: 35%; margin: 0 33% 0 33%; } .cs_rsch_col_3of3 { width: 33%; float: right; margin: 0; } .cs_rsch_attribution { text-align: right; font-size: small; font-style: italic; } /*overwritten from drupal to place textfield into body-story when logged in*/ .node-form .standard { /* clear: both;*/ } /******/ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /* End of style sheet */ /******/ /******/ /******/ /******/ /******/ /******/ /******/ /******/