/********************************************************
* This is the main CSS file for the Preceptor web site.
* DO NOT EDIT THIS FILE!
*
* Created by: Eva Placko (eva@uwo.ca)
* Date: May 2007
*
***********************************************************/
/* P R E C E P T O R Web Site S T Y L E S H E E T */
/**********************************************************/
/*
COLOURS USED:
Blue - #65A4B6
Creamy - #FCFCE2
Brown - #54401F
Light Brown - #9e937d
Cranberry - #cc0066
*/
/***********************************************************
*
* Standard HTML tag definitions
*
**********************************************************/
/* All fonts on a page will be Arial with size 12 pixels
by default unless overriden.
*/
body {
margin: 0; /* Define customized values for each element rather than defaults */
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background: #FFFFFF;
text-align: center; /* To center the page box in the center of screen in some browsers */
}
/* Paragraphs will have 1.5 times the letter height between lines,
no margin, and have padding of 10 pixels at left, bottom and right.
*/
p {
line-height: 1.5em;
margin: 0 10px 10px 10px;
text-indent: 20px;
}
/* Indenting a paragraph - padding of 30 pixels at the right. */
p.indent {
padding: 0 10px 10px 30px;
}
p.noIndent {
text-indent: 0;
}
/*p.title {
text-indent: 0;
margin: 0;
padding: 5px 0 5px 0;
font-weight:bold;
font-size: 120%
} */
/* This is the text inside a box. E.g. "Enter the Modules" link in a box. */
p.inABox {
border: 1px solid #000000;
padding: 10px;
margin: auto;
width: 200px;
text-indent: 0;
text-align: center;
}
/* The following set the link colours. MUST be defined in this order. */
a,
a:link,
a:visited,
a:hover,
a:active {
color: #000000;
text-decoration:underline;
}
/* This section is used to "light up" the appropriate button
on the navigation menu bar depending on the page you are on. */
body#home-page li a#menu-home,
body#background-page li a#menu-background,
body#aboutUs-page li a#menu-aboutUs,
body#sponsor-page li a#menu-sponsors,
body#getStarted-page li a#menu-getStarted,
body#register-page li a#menu-register,
body#moduleContent-page li a#menu-moduleContent,
body#enterModules-page li a#menu-enterModules,
body#glossary-page li a#menu-glossary,
body#sitemap-page li a#menu-sitemap
{
color: #54401f;
background: url("../images/button.jpg") repeat-x;
}
h1 {
font-size: 24px;
padding: 5px 10px 0px 10px;
font-weight: bold;
margin:0;
color: #000000;
}
h2 {
font-size: 20px;
padding: 10px;
font-weight: bold;
margin:0;
color: #000000;
}
h3 {
font-size: 16px;
padding: 10px;
font-weight: bold;
margin:0;
color: #000000;
}
h4 {
font-size: 14px;
padding: 10px;
font-weight: bold;
margin:0;
color: #000000;
}
ul.noBullet {
list-style: none;
}
li {
line-height: 150%;
}
hr {
height: 1px;
color: #000000;
}
/* All images will have no border by default */
img {
border: 0;
}
/*********************************************************************
*
* Clearing fixes.
*
********************************************************************/
/*------------------------ CLEARFIX --------------------------------*/
/* Here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
content: "."; /* the period is placed on the page as the last thing before the div closes */
display: block; /* inline elements don't respond to the clear property */
height: 0; /* ensure the period is not visible */
clear: both; /* make the container clear the period */
visibility: hidden; /* further ensures the period is not visible */
}
.clearfix {display: inline-block;} /* a fix for IE Mac */
/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */
.clearfloats {
clear: both;
height: 0;
line-height: 0;
}
/*------------------- End of Clearing Fixes------------------------------*/
/**********************************************************
*
* Definitions of IDs
*
**********************************************************/
/*=============== THE WHOLE PAGE ======================*/
/* This encloses the entire page including navigation, content
and footer. */
#pageBoundary {
margin-left: auto; /* Center page in the browser */
margin-right: auto; /* Center page in the browser */
text-align: left;
/* If you specify a max-width, the page won't expand beyond
this even if Maximized */
/* max-width: 960px; */
border: none;
background-color: #ffffff; /* white */
}
#header {
display: none;
}
#headerForPrint {
display:block;
width: 640px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
margin-bottom: 10px;
}
#headerForPrint h1 {
font-family: "Times New Roman", Times, serif;
text-align: center;
}
#headerForPrint h3 {
font-family: "Times New Roman", Times, serif;
text-align: center;
}
#headerForPrint p {
font-family: "Times New Roman", Times, serif;
font-size: 90%;
text-align: center;
}
/*=============== CONTENT and NAVIGATION ==================*/
/* This encloses both the content column and the navigation column.
The buttonBackground image is used to fill in the navigation
column with the background colour if the content is longer than
the navigation bar. */
#contentArea {
position: relative;
/* This creates the dark brown colour behind the buttons and cream behind the
content. The brown column will appear to stretch down if the content column
is longer than the navigation column. */
width: 640px;
background: none;
/* border: 1px solid yellow; */
}
/*=============== CONTENT COLUMN =============================*/
/* This is the main information column where the content will go.
It has a width of 560px and floats left to sit next to the navigation column.
The total width of the Navigation Bar and Content Area is 710px to fix
into the 720px boundary. */
#contentColumn {
margin: 0px;
width: 639px;
float: left;
background-color: #ffffff; /* white */
/* border: 1px solid blue; */
}
/*==================== NAVIGATION ==========================*/
/* This is the Navigation Bar at the left of the page.
The column is 150px wide and floats to the left as the left-most column. */
#navButtonsColumn {
display: none;
}
/*=============== END OF NAVIGATION ==========================*/
/* The site map text is indented 50px from the left. */
#sitemap {
padding-left: 50px;
}
/*=============== FOOTER =====================================*/
/* This is the footer at the bottom of each web page except the Site Map. */
#bottom_footer {
background: none;
display:block;
font-size: 80%;
font-weight:bold;
text-align: left;
clear:both;
width: 640px;
height: 100px;
padding-top: 0px;
margin: 0px;
}
/* This is the footer at the bottom of the Site Map page. */
#sitemap_footer {
padding-left: 10px;
padding-bottom: 10px;
font-size: 80%;
font-weight:bold;
text-align: left;
}
/* Used for the Copyright message in the footer. */
#copyright {
padding-top: 80px;
margin: 0px;
text-align: left;
color: #000000;
}
#copyright a,
#copyright a:link,
#copyright a:visited,
#copyright a:hover,
#copyright a:active {
color: #000000;
text-decoration: underline;
}
/* To Top of Page links */
#topOfPage {
display: none;
}
#help {
display:none;
}
#closeWindow {
width: 150px;
margin: auto;
padding: 0px;
}
/* For displaying errors. */
#errorBoxCentred {
width: 400px;
margin: 15px auto;
padding: 10px 0 10px 0;
text-align: center;
background-color: #ffffff ;
color: #CC0066;
border: 1px solid #003300;
}
#errorBox {
width: 400px;
margin: 15px;
padding: 10px 0 10px 0;
text-align: left;
color: #CC0066;
border-top: 1px solid #CC0066;
border-bottom: 1px solid #CC0066;
}
/**************************** TABLES *********************************/
/* Table of sponsors */
table#sponsorTable {
margin-left: 30px;
border: 1px solid #000000;
border-collapse:collapse;
}
table#sponsorTable th {
text-align: left;
font-weight: normal;
font-size: 80%;
}
table#sponsorTable td {
padding: 15px;
border: 1px solid #000000;
}
/*********************End of TABLES *********************************/
/*=============== IMAGES ==========================/
/* Image floats right, text will wrap to the left of it.
Margin at left. */
img.atRight {
float: right;
margin: 30px 10px 0 10px;
}
/* Image floats right, text will wrap to the left of it.
Margin at right. */
img.atRightWithMargin {
float: right;
margin: 0 10px 10px 0;
}
img.atRightWithMargin2 {
float: right;
margin: 15px 10px 10px 0;
}
/* Image floats left, text will wrap to the right of it.
Margin at right. */
img.atLeft {
float: left;
margin: 0;
}
img.atLeftWithMargin {
float: left;
margin: 0 10px 5px;
}
/* Image floats left, text will wrap to the right of it.
No margins. */
img.atRightBottom {
float: right;
position: inherit;
right: 0px;
bottom: 0px;
}
img.atCenter {
margin: 0 0 0 100px;
}
/*=============== END OF IMAGES ==========================/
/***************** FORMS ********************************************/
/*----------------------- General for all forms --------------*/
form {
margin: 15px 10px 40px 10px;
padding-top: 10px;
font-size: 14px;
}
/* Starts next item on a new line after a BR */
form br {
clear: left;
}
/* The form's LABEL field */
/* This affects the form's LABEL field.*/
form label {
padding-right: 10px;
padding-top: 0px;
margin-bottom: 10px;
text-align: right;
color: #000000;
float: left;
/*border: 1px solid red; */
}
/* This seems to control the radio button label position
(beside button, rather than under button) */
form label, input {
/*float: left; */
}
/* The form's LEGEND text */
form legend {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
padding: 10px 10px 20px 10px;
font-weight: bold;
margin:0;
color: #65A4B6; /* Pale blue */
}
form fieldset {
width: 90%;
/* width: 720px;*/
}
/* ------------------ End of general FORMS --------------------------*/
/* ------------------ FORM classes --------------------------------- */
/* Used for Buttons. Button is 120px wide. */
form .submit {
width: 100px;
margin: 10px 0 15px 10px;
text-align: center;
}
/* Used as "class=fixedWidth" for labels or input boxes.
If no "class=fixedWidth" is specified, the size is as defined by SIZE or default. */
form .fixedWidth {
width: 210px;
}
form .fixedWidth2 {
width: 180px;
}
/* Used as "class="radioButton". Smaller width for the radio button. */
form .radioButton {
width: 30px;
}
/* This puts the submit button on the same line rather than below.
Overrides "form label, input" definition above. */
form .inline {
float: none;
margin: 0 0 0 20px;
}
/* ------------------ End of FORM classes --------------------------*/
/******************** End of FORMS **********************************/
/**********************************************************
*
* Class definitions
*
**********************************************************/
.highlight {
color: #cc0066;
}
/* ONLY DISPLAYS if the browser doesn't support CSS.
The text between the .alt will normally not show up.*/
.alt {
display: none;
}
.caption {
font-size: 90%;
}
.smallText {
font-size: 80%;
}
.requiredMarker {
color:#FF0000;
}