/* Notes: The limiting factor for width has been set to 1000px to allow accessibility for people using 1024x768 resolutions
     Wherever possible use ems and percentages (other than the contentwrapper's width) rather than pixel values (though this is less significant for height) 

-------------- Colours Scheme --------------
#00264f - dark blue 
#003e80 - light blue 
#6c8bac - middle coloured blue 

*/

/* ----------------------------------------------
		global classes
---------------------------------------------- */

body {
	font-family: arial, helvetica, san-serif;
	font-size: 0.8em;
	background: #09486b url("images/bg.jpg") repeat-x;
	color: #202428;
	margin: 1em 0 0 0;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a img {
	border: none;
}

h1, h2, h3 {
	margin: 0;
}

h2 {
        font-size: 1.4em;
}

/* ----------------------------------------------
		page-wide classes
---------------------------------------------- */

#contentwrapper {
	width: 1000px;
	margin: auto;
}

#content {
	border-left: 1px solid #cae9fb;
	border-right: 1px solid #cae9fb;
	background-color: #fff;
}

#mainwrapper {
	background: url("images/mainbg.jpg") no-repeat top center;
	padding: 1.5em;
	clear: both;
}

/* -----------------------------------------------
		header classes
----------------------------------------------- */

#pageheader {
	background: url("images/pageheader.png") no-repeat;
	height: 8px;
}

#header {
	width: 100%;
	height: 80px;
	background: url("images/topwave.jpg") no-repeat top left;
}

#logo {
	float: left;
	margin: 0 0.5em 0 0.5em;
}

#fontchanger {
        display: none;
}

/* Removes the skip navigation link from display but does not exclude it from screen readers */
#accessibility {
	position: absolute;
        top: -1000px;
}

#contact {
	float: right;
	text-align: right;
	padding: 1em;
        font-size: 1.4em;
}

#lightblue {
	color: #003e80;
}

/* ----------------------------------------------------
		navigation classes
---------------------------------------------------- */

#navigation {
	clear: right;
	margin: 0;
	font-size: 1.2em;
	color: #fff;
	background: #00264f url("images/navbg.jpg") repeat-x top;
	height: 2.1em;
	list-style: none;
}

#navigation li {
	float: left;
	background: #00264f url("images/navbg.jpg") repeat-x top;
	position: relative; /* to give the second level lists something to refer to */
}

#navigation li a {
	float: left;
	color: #fff;
	padding: 0.5em;
	border-right: solid 1px #6c8bac;
}

#navigation li:first-child a {
	border-left: solid 1px #6c8bac;
}

#navigation li:hover a {
	background: #003e80 url("images/navselect.jpg") repeat-x;
	text-decoration: none;
}

/* Second level navigation */

#navigation li ul {
	display: none;
	list-style: none;
	position: absolute;
	top: 2.1em;
	left: -1px; /* to line up with the parent border */
	padding: 0.5em;
	width: 10em;
	background-color: #003e80;
	border: 1px solid #6c8bac;
}

#navigation li:hover ul {
	display: block;
}

#navigation li:hover ul a {
	background: none;
}

#navigation li ul li{
	background: none;
        margin-top: 0.5em;
}

#navigation li ul li:hover {
	text-decoration: underline;
}

#navigation li ul li a {
	float: none;
	padding: 0;
	border: none;
}

#navigation li ul li:first-child a{
	border: none;
}

/* --------------------------------------------
		main classes
-------------------------------------------- */

.mainheading {
	vertical-align: middle;
	margin: 0.3em;
}

.mainheading h1 {
	color: #fff;
	display: inline;
	background: url("images/h1bg_middle.jpg") repeat-x;
	/*background-color: #003d7e;*/
	padding: 0.1em 0.3em;
	vertical-align: bottom;
}

.mainheading img {
	vertical-align: middle;
	margin: 0 -0.4em;
}

/* For pages without a navigation column */
#main {
	background-image: url("images/mainbg.png");
	padding: 0.5em;
	border: 1px solid #c5dbeb;
	min-height: 25em;
}

/* For pages with a navigation column */
#maincolumn {
	float: left;
	background-image: url("images/mainbg.png");
	padding: 0.5em;
	border: 1px solid #c5dbeb;
	width: 75%;

	min-height: 50em;
}

#navcolumn {
	float: right;







	background-image: url("images/mainbg.png");
	padding: 0.5em;
	border: 1px solid #c5dbeb;
	width: 20%;
	min-height: 50em;
}

#navcolumn a {
	color: #202428;
}

#navcolumn ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#navcolumn li {
	line-height: 2em;
}

#navcolumn li ul {
	margin-left: 1em;
}

#navcolumn li ul li {
	font-size: 0.9em;
	font-style: italic;
}

.contentbox {
	float: left;
	width: 33%;
	margin: 0.1%;
	background: #cae9fb url("images/corners_topleft.jpg") top left no-repeat;
}

#maincolumn .contentbox {
	width: 49%;
}

.contentbox h2 {
	background: url("images/corners_topright.jpg") top right no-repeat;
	padding: 0.5em;
	text-align: center;
}

.contentbox a {
	color: #202428;
}

.contentboxbody {
	background: url("images/corners_rightborder.jpg") top right repeat-y;
	padding: 0 1em;
	min-height: 2em;
}

.contentboxfooter {
	margin-top: -1em;
	margin-bottom: -1em;
	background: url("images/corners_bottomleft.jpg") bottom left no-repeat;
}

.contentboxfooter p {
	padding: 0 1em 1em 1em;
	background: url("images/corners_bottomright.jpg") bottom right no-repeat;
	text-align: center;
}

.contentboxfooter img {
	border: 1px solid #202428;
	margin: 0.5em 0;
}

/* --------------------------------------------
		flash classes
-------------------------------------------- */

#banner {
	margin: 0;
	padding: 0;
}

#flash {
	float: left;
	width: 775px;
	height: 225px;
	background: url("images/noflash.jpg") no-repeat center center;
	height: 225px;
}

#flash object {
	margin: 0;
	padding: 0;
}

#flashnav {
	float: right;
	width: 223px;
	height: 225px;
	background: #00264f url("images/flashnavbg.jpg");
}

#flashnav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 3.3em;
}

#flashnav li {
	border-top: solid 1px #6c8bac;
	padding: 0 1em;
}

#flashnav li:first-child {
	border-top: none;
	margin-top: 0.5em;
}

#flashnav a {
	color: #fff;
}

/* ---------------------------------------------
		portfolio classes
---------------------------------------------- */

#hovernotice {
        width: 33%;
        padding: 0.5em;
        margin: 0 auto;
	background-color: #6c8bac;
        color: #fff;
}

/* dimensions of portfolio thumbnails are 320 by 314, or 403 by 314 for wider sites */

#portfolio {
	list-style: none;
}

#portfolio img {
	width: 150px;
	height: 144px;
	border: 1px solid #000;
}

#portfolio .wide img {
	width: 233px;
}

#portfolio li {
	float: left;
	width: 150px;
	height: 144px;
	margin: 5px;
	background-color: #ccc;
}

#portfolio .wide {
	width: 233px !important;
}

#portfolio li:hover img {
	width: 320px;
	height: 314px;
	border: 1px solid #000;
}

#portfolio .wide:hover img {
	width: 403px;
}

#portfolio li:hover {
	z-index: 1;
	position: relative;
	width: 322px;
	height: 316px;
	top: -80px;
	left: -80px;
	margin-right: -167px;
	margin-bottom: -167px;
}

#portfolio .wide:hover {
	width: 405px;
	left: -70px;
	margin-right: 5px;
	margin-bottom: -167px;
}

.print, #devportfolio {
        text-align: center;
}

.print img, #devportfolio img {
	border: 1px solid #202428;
}

/* ----------------------------------------------
		footer classes
---------------------------------------------- */

#footer {
	margin: 1.5em;
	font-size: 0.9em;
}

#links {
	float: left;
}

#links a {
	color: #202428;
}

#copyright {
	float: right;
	text-align: right;
}

#pagefooter {
	clear: both;
	background: url("images/pagefooter.png") no-repeat;
	height: 8px;
	width: 1000px;
	margin: 0 auto;
}

/* ---------------------------------------------
		misc. classes
---------------------------------------------- */

.hr {
	background: url("images/hr.png") no-repeat center center;
	height: 1px;
}

.clear {
	clear: both;
}

.quoted {
	margin-left: 5em;
	font-style: italic;
}

#reflection {
	margin: 3px auto 0 auto;
	text-align: center;
}

.email {
	vertical-align: middle;
}

.success {
        color: #00f;
}

.error {
        color: #f00;
}

#direction {
        clear: both;
}

#previous {
        float: left;
}

#next {
        float: right;
        padding-right: 40px;
}


#pagenumbers {
        float: right;
        padding-right: 40px;
}

#pricing {
        border-collapse: collapse;
}


#pricing td, #pricing th {
        border: solid 1px #202428;
        padding: 0.2em;
}

#pricing th {
        text-align: left;
}

.left {
        margin: 0 0.2em 0 0;
        float: left;
}

/* ----------------------------------------------
		Jamie's CSS
---------------------------------------------- */

/*------------ contact.html -------------*/

#contactform {
	float: left;
	padding: 1em;
        width: 45%;
}

#contactform table {
	text-align: left;
	padding: 0;
}

#contactform td {
	vertical-align: top;
        margin-bottom: 0.5em;
}

#contactaddress {
	float: left;
	margin-left: 5em;
        width: 45%;
}

.leftPage {
        text-indent: -9009px;
}

.luxuryLodges {
        text-align: center;
}



/* ----------------------------------------------
		Tim's CSS 10/02/2009
---------------------------------------------- */
#newPortfolio {
        margin-top: 30px;
}

#showcase {
        float: left;
        width: 60px;
        margin: 10px 10px 0 5px;
        background: #00264F url('images/showcasebg.jpg') repeat-y;
        min-height: 200px;
}

.showcaseLogo { float: right; }

.newLink {
        float: right;
        width: 280px;
        font-weight: bold;
        text-align: center;
        height: 221px;
        margin: 10px;
        padding: 10px 10px;
        background: url('images/webPortfolioBg.gif') top center no-repeat;
}

.newLink p { margin: 14px; }
.newLink a, #pagenumbers a { color: #002653; }

#tooltip{
		position: absolute;
		border: 1px solid #C5DBEB;
		background: #FFFFFF url('images/tooltipbg.jpg') top right no-repeat;
		padding: 10px;
		width: 300px;
		color: #333333;
		display: none;
		font-size: 8pt;
}

.bigmap { 
                 display: block; 
                 margin: 0 auto 20px auto; 
}

.bigmap, .smallMap { border: 1px #C5DBEB solid; }

a#physics-education { color: black; }