@charset "utf-8";

/*=============================================================================*
 *                                                                             *
 *	General tags                                                               *
 *                                                                             *
 *=============================================================================*/

html {
	height: 101%;  	/* This forces the vertical scrollbar to show and thus stops the page from "jumping" */
}
body {
	font-size: 13px;    /* Set the font-size to pixels, then all the other sizes as percentages */
	font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	background-color: #ccc;
}
strong, em, b, i, h1, h2, h3, h4, h5 {  /* Solve some problems with the Lucida font */
	font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
p {
	text-align: justify;
	margin-bottom: 10px;
}
a {
	color: black;
}
ul {
	list-style: disc;
	padding-left: 15px;
	padding-bottom: 10px;
}
p, td, li {
	line-height: 120%;
}
h2, h3, h4, h5 {
	font-family: inherit;
	font-weight: bold;
	color: #f2a057;
	margin: 20px 0 14px 0;
	border-bottom: #f2a057 1px solid;
}
h2 {
	font-size: 180%;
}
h3 {
	font-size: 150%;
}
h4 {
	font-size: 120%;
}
h5 {
	font-size: 100%;
}
input[type=text], input[type=password], select {
	font-family: inherit;
	width: 100%;
	padding-bottom: 3px;
	border: none;
	border-bottom: 1px dotted #f2a057;
}
input[type=submit] {
	border: 1px solid #f2a057;
	background-color: #f2a057;
}
/*=============================================================================*
 *                                                                             *
 *	Main wrapper that contains and centers the whole page                      *
 *                                                                             *
 *=============================================================================*/
 
#wrapper {
	float: right;
	width: 960px;
	position: absolute;
	margin: 0;
	left: 50%;
	margin-left: -480px;
}
/*=============================================================================*
 *                                                                             *
 *	Header and footer tags                                                     *
 *                                                                             *
 *=============================================================================*/
 
#header, #footer { 		/* Contains top/bottom menu */
	width: 900px;
	padding: 10px 30px 5px 30px;
	font-size: 85%;
	text-align: right;
	clear: both;
}
#top, #bottom {   /* Empty: contains only the top/bottom of the background */
	width: 960px;
	height: 30px;
	clear: both;
}
#top {
	background: url(../images/background-top.png) no-repeat;
}
#bottom {
	background: url(../images/background-bottom.png) no-repeat;
}
/*=============================================================================*
 *                                                                             *
 *	Main: central block with the menu (in #left) & main content (in #right)    *
 *                                                                             *
 *=============================================================================*/

#main {
	float: left;
	width: 900px;
	min-height: 500px;
	clear: both;
	background: url(../images/background-middle.png) repeat-y;
	padding: 0 30px;
}
/*=============================================================================*
 *                                                                             *
 *	Left: contains logo & menu                                                 *
 *                                                                             *
 *=============================================================================*/

#left {
	float: left;
	width: 180px;
}
#logo {
	display: block;
	float: left;
	position: absolute;
	top: 55px;
	left: 20px;
	width: 180px;
	height: 84px;
	overflow: hidden;
}
#logo-swf {
	position: absolute;
	margin-left: -48px;
	margin-top: -23px;
	width: 138px;
	height: 108px;
	overflow: hidden;	/* The .swf is larger than this div so hide the overflow */
}
#logo-text {
	position: absolute;
	margin-left: 90px;
	margin-top: 36px;
	width: 90px;
	height: 23px;
	background-image: url(../images/oxyor.png);
}
/*=============================================================================*
 *                                                                             *
 *	Menu (main menu bar on left)                                               *
 *                                                                             *
 *=============================================================================*/

#menu {
	clear: left;
	float: both;
	width: 180px;
	top: 176px;
	position: absolute;
}
#menu ul {
	list-style: none;
	padding: 0;
	border-bottom: #f2a057 1px solid;
}
#menu ul ul {
	padding-left: 10px;
	border-bottom: none;
}
#menu a {
	text-decoration: none;
}
#menu li {
	border-top: #f2a057 1px solid;
	padding: 3px 0 3px 2px;
	line-height: 140%;
}
#menu li li {
	border-top: none;
	padding: 0;
	line-height: 130%;
}
#menu li.current a {
	color: #f2a057;
}
#menu li.current li a {
	color: black;
}
/*=============================================================================*
 *                                                                             *
 *	Right: contains main image and content                                     *
 *                                                                             *
 *=============================================================================*/

#right {
	float: right;
	width: 690px;  /* This is the maximum width of anything on the right, like the images or tables */
}
#image {
	margin-bottom: 10px;
	width: 690px;	/* In the client sites the height is set too */
}
/*=============================================================================*
 *                                                                             *
 *	Staff: CSS for popups on staff.html                                        *
 *                                                                             *
 *=============================================================================*/

#staffPage {
	background-color: #FFF;
	margin: 10px;
}
#staffPage img.rightAlign {
	float: right;
	border: 1px solid #eee;
}
#staffPage p {
	width: 385px;
}
/*=============================================================================*
 *                                                                             *
 *	short-courses.html                                                         *
 *                                                                             *
 *=============================================================================*/

#outerTable {
	width: 690px; /* No borders so use full width */
}
#outerTable td {
	width: 230px;
}
.innerTable {
	margin: 15px 6px;
	border-top: #ccc 1px solid;
	border-left: #ccc 1px solid;
}
.tableHeader td {
	font-weight: bold;
	background-color: #eee;
}
.innerTable td {
	padding: 5px 10px;
	border-right: #ccc 1px solid;
	border-bottom: #ccc 1px solid;
}
/*=============================================================================*
 *                                                                             *
 *	AboutUs: CSS for table in about-us.html                                    *
 *                                                                             *
 *=============================================================================*/

#aboutUsTable td:first-child {
	font-weight: bold;
	padding-right: 20px;
}
/*=============================================================================*
 *                                                                             *
 *	Contact: CSS for table in contact.html                                     *
 *                                                                             *
 *=============================================================================*/

.contactTable {
	width: 688px;	/* = 690 px - 2*1px for borders */
	border-top: #ccc 1px solid;
	border-left: #ccc 1px solid;
}
.contactTable td {
	padding: 5px 10px;
	border-right: #ccc 1px solid;
	border-bottom: #ccc 1px solid;
}
.contactTable h4 {
	margin-top: 10px;
	color: black;
	font-size: 100%;
	border: none;
}
/*=============================================================================*
 *                                                                             *
 *	Sitemap: CSS for list in sitemap.html                                      *
 *                                                                             *
 *=============================================================================*/
 
#sitemap ul {
	padding-bottom: 0;
}
#sitemap li {
	list-style: none;
	margin-left: -15px;
}
#sitemap li li {
	list-style: circle;
	margin-left: 10px;
}
#sitemap li li li {
	list-style: disc;
}
/*=============================================================================*
 *                                                                             *
 *	Other classes                                                              *
 *                                                                             *
 *=============================================================================*/

.important {
	font-weight: bold;
}
.small {
	font-size: 80%;
}
.warning {
	font-size: 80%;
	color: red;
}
img.align-right {
	float:right;
	margin: 0 0 8px 20px;
}