/* Re-styled HTML elements */ html { background-color: #DAE5FB; } body { font-family: sans-serif; font-size: small; } a { color: #1E60AA; text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { font-weight: bold; color: #1E60AA; padding-top: 1em; } h1 { font-size: x-large; padding-top: 0; padding-bottom: 0.5em; } h2 { font-size: medium; } h3 { /* If you're using more than a level three heading, you're using too many headings! */ font-size: small; } li { margin-left: 1.5em; /* Note the relative unit */ list-style-type: disc; } p, td { /* td is specified here because of a bug (?) in IE 5 */ line-height: 1.5em; /* Note the relative unit */ } p { padding-bottom: 0.5em; /* Note the relative unit */ } table { /* This stops tables (which are used for layout) collapsing */ width: 100%; } td { vertical-align: top; } em { color: #1E60AA; } /* Activities table classes */ table#activities div { /* Text is in divs in tds to give transparent gap between cells */ margin: 2px; padding: 2px; } table#activities td { width: 10%; /* Has the effect of making each column of equal width, even though there are only seven columns */ } .activityHeading, .multiactivityHeading, .experienceHeading, .academyHeading, .academicHeading,{ font-weight: bold; color: #FFFFFF; } .activityHeading { background-color: #FBC500; } .multiactivityHeading { background-color: #8179BA; } .academicHeading { background-color: #FBC500; } .experienceHeading { background-color: #66CC66; } .academyHeading { background-color: #C81800; } .multiactivity, .experience, .academic, .academy, .multiactivityHeading, .academicHeading, .experienceHeading, .academyHeading{ text-align: center; vertical-align: middle; } .activity { background-color: #FBEA73; } .multiactivity { background-color: #D6C9DF; color: #8179BA; } .academic { background-color: #FBEA73; color: #8179BA; } .experience { background-color: #A8D2C0; color: #004B39; } .academy { background-color: #FFB6A1; color: #C81800; } /* Table classes for tables that contain tabular data */ table.tabular th { font-weight: bold; text-align: center; } table.tabular td, table.tabular th { border: 1px solid #C3CDD6; text-align: center; vertical-align: middle; } table.tabular td.heading { border: none; } table.tabular td.cornerTopLeft { border-top: none; border-left: none; } /*Table classes for skinny tables only - doesn't seem to work. Why?*/ /*table.skinny th { font-weight: bold; text-align: center; } table.skinny td, table.tabular th { border: 1px solid #C3CDD6; text-align: center; vertical-align: middle; } table.skinny td.heading { border: none; } table.skinny td.cornerTopLeft { border-top: none; border-left: none; }*/ /* Pretty table classes - useful for question/answer style tables */ table.pretty div { margin-right: 10px; /* Text is in divs in tds */ } table.pretty tr { border-bottom: 1px solid #C3CDD6; /* The horizontal rule along the bottom of each tr */ } /* Other table classes */ .thumbCellLeft { /* For cells with thumbnail images - this cell contains the image... */ padding-top: 5px; } .thumbCellRight { /* ...whilst this cell contains the corresponding text */ padding-top: 10px; padding-left: 20px; } /* Miscelaneous classes */ .mediumPadding { padding: 10px; } .floatRight { /* Useful for wrapping text around images */ float: right; } .floatLeft { float: left; /* Useful for wrapping text around images */ } .imageBorder { padding: 2px; border: 1px solid #C3CDD6; /* Puts images in a nice frame */ } .imageBordercenter { padding: 4px; border: 1px solid #C3CDD6; /* Puts images in a nice frame */ /*align: center;*/ } /* Structural page elements */ #body { /* Note this isn't the same as the HTML tag */ margin-right: auto; margin-left: auto; width: 1000px; border-right: 1px solid #1E60AA; border-left: 1px solid #1E60AA; background-color: #FFFFFF; } #header { position: relative; height: 100px; background-color: #1E60AA; } #headerLeft { /* Logo */ position: absolute; top: 5px; left: 10px; } #headerRight { /* Strapline */ position: absolute; top: 10px; right: 10px; } #footer { position: relative; height: 100px; background-color: #144E8E; } #footerLeft { /* Address */ position: absolute; top: 5px; left: 10px; } #footerRight { /* Accreditation */ position: absolute; top: 10px; /* Note that margin/padding values are specified in the order top, right, bottom, left */ right: 10px; } #content { /* Everything between the header and the footer */ margin: 10px; } #leftColumn { width: 160px; } #rightColumn { width: 180px; } .leftBox { width: 150px; /* The difference between this value and the width of leftColumn/rightColumn appears as space between leftBox/rightBox and contentArea */ background-color: #E6EFF6; margin-bottom: 10px; } .rightBox { /* So the rightBox 'sticks' to the right of rightColumn */ margin-right: 0; margin-left: auto; width: 170px; /* The difference between this value and the width of leftColumn/rightColumn appears as space between leftBox/rightBox and contentArea */ background-color: #E6EFF6; margin-bottom: 10px; } .navigationButton { padding: 5px; } .padding5{ padding: 5px; font-family: sans-serif; font-size: small; text-align: center; font-style: italic } .quote{ padding: 5px; font-family: sans-serif; font-size: small; text-align: center; font-style: italic } .paddingheader{ padding: 5px; font-weight: bold; color: #1E60AA; text-align: center; } #contentArea { /* The 'real' content goes here... */ background-color: #E6EFF6; } #contentAreaLeftFixed, #contentAreaLeftFlexi { /* ...or here... */ padding-right: 20px; } #contentAreaLeftFixed { width: 200px; } #contentAreaRightFixed, #contentAreaRightFlexi { /* ...and here if you're using two 'hidden' columns for content (as on the home page) */ padding-left: 5px; } #contentAreaRightFixed { width: 250px; } /* Classes for rounded corners - each has its own

*/ .bottomLeft { background-image: url(../graphics/corners/bottom_left.jpg); background-position: left bottom; background-repeat: no-repeat; } .bottomRight { background-image: url(../graphics/corners/bottom_right.jpg); background-position: right bottom; background-repeat: no-repeat; } .topLeft { background-image: url(../graphics/corners/top_left.jpg); background-position: left top; background-repeat: no-repeat; } .topRight { background-image: url(../graphics/corners/top_right.jpg); background-position: right top; background-repeat: no-repeat; } /* Classes for borders - each has its own

*/ .borderTop, .borderRight, .borderBottom, .borderLeft { background-image: url('../graphics/corners/border.gif'); } .borderTop { background-position: top left; background-repeat: repeat-x; } .borderRight { background-position: top right; background-repeat: repeat-y; } .borderBottom { background-position: bottom left; background-repeat: repeat-x; } .borderLeft { background-position: top left; background-repeat: repeat-y; } /* A horizontal rule - has its own div. Useful for breaking up sets of navigationButton divs */ .rule { height: 1px; background-image: url('../graphics/corners/border.gif'); background-position: top left; background-repeat: repeat-x; } /* HTML_Quick_Form / HTML_QuickForm_Renderer_Tableless elements */ fieldset { margin-bottom: 1em; /* Note the relative unit */ } legend { font-size: medium; font-weight: bold; color: #1E60AA; margin-bottom: 0.5em; /* Note the relative unit */ } label.element { font-weight: bold; } form li { /* Only for lis that are children of forms */ margin-bottom: 1em; /* Note the relative units */ margin-left: 1em; list-style-type: none; } .required, .error { color: #FF0000; }