body {
	font-family: Verdana, sans-serif;
	margin-bottom: 0.5em;
	min-width: 600px; /* necessary to get mainMenu working right in Opera, but not
	such a bad idea anyway.  This width is 3 times the width of the mainMenu 
	items. */
}

body.popup {
	min-width: 0;
}

.topBar {
	background: #9ad8fb url(beach-repeat5.jpg) repeat;
	border-bottom: 1px solid #ccc;
	margin: 0;
	padding: 0;
	text-align: right;
}

/* Necessary for IE 6 bugs - otherwise could just put all this on logo */
.topBar .logoWrapper {
	margin: 0px 0px 0px 0px;
	background-image: url(beach-logo.jpg);
	background-repeat: no-repeat;
	float: left;
}

.topBar .logoWrapper, .topBar p.home, .topBar a.home {
	width: 299px;
	height: 116px;
}

.topBar .description {
	display: table;
	float: left;
	height: 111px;
}
.topBar .oneLineDescription, .topBar .twoLineDescription {
	margin: 0;
	padding: 0;
	height: 100%;
	display: table-cell;
	vertical-align: bottom;
}
.topBar .description p {
	line-height: 100%;
	margin: 0;
	padding: 0;
	color: #666;
	font-family: Arial, sans-serif;
	font-style: italic;
}
.topBar .description p .title, .topBar .description p.title {
	font-size: 150%;
	font-weight: bold;
}
/* Can use this for a span inside the title. */
.topBar .description p .subTitle {
	font-style: italic;
	padding-left: 0.7em;
}
/* A separate paragraph below the title paragraph. */
.topBar .description p.subTitle {
	margin-top: 3px;
}
* html .topBar .description {
	position: relative;
}
* html .topBar .oneLineDescription, * html .topBar .twoLineDescription {
	position: absolute;
}
* html .topBar .oneLineDescription {
	top: 92px;
}
* html .topBar .twoLineDescription {
	top: 74px;
}
* html .topBar .description p {
	white-space: nowrap;
	vertical-align: top;
}

.topBar .sloganWrapper {
	display: table;
	height: 89px;
	float: right;
	margin-right: 4%;
}
.topBar .slogan {
	display: table-cell;
	vertical-align: middle;
}
.topBar .slogan p {
	font-style: italic;
	font-weight: bold;
	color: #888;
	margin: 0;
	padding: 0;
}
* html .topBar .sloganWrapper {
	position: relative;
	width: 50%;
	margin-right: 2%;
	ma\rgin-right: 4%;
}
* html .topBar .slogan {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
}
* html .topBar .sloganWrapper p {
	position: relative;
	text-align: right;
	top: -50%;
}

.topBar p.home, .topBar a.home {
	display: block;
}

.topBar p.home {
	margin: 0;
	padding: 0;
}

.topBar a.home:hover {
	background-color: transparent;
}

.topBar span.homeText {
	display: block;
	height: 0;
	width: 0;
	visibility: hidden;
}

.topBar .topBarInfo {
	min-height: 89px; /* 77 (image height) + 5 (top margin) + 7 (bottom margin) */
	margin-left: 180px;
}

/* Fixed height stops the Peekaboo bug on IE6 */
* html .topBar {
	height: 89px;
}

.topBar .topBarInfo * {
	margin: 0;
	padding: 0;
}

.topBar .topBarInfo p {
	text-align: right;
	line-height: 120%;
}

.topBar p.language {
	margin-right: 2%;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}

.topBar p.loginStatus, .topBar p.noLanguageLoginStatus {
	margin-right: 6%;
}

* html .topBar p.loginStatus, * html .topBar p.noLanguageLoginStatus {
	margin-right: 5%; /* IE6 needs this one too (from experimentation) */
}

.topBar p.loginStatus {
	margin-top: 18px;
}

.topBar p.noLanguageLoginStatus {
	padding-top: 33px;
}

/* default value is baseline. Firefox takes the baseline of the input as that of
 the text in it (which makes it line up well).  It looks like IE takes the
 bottom of the button. Assuming IE is wrong.  IE looks right with middle, so: */
* html .topBar p.noLanguageLoginStatus input {
	vertical-align: middle;
}

.topBar p.language a:visited {
	color: #002db3;
}

.mainMenu {
	margin: 0;
	padding: 0;
	float: right;
	clear: both;
	/* min-width is noItemsInMenu * 200 */
	min-width: 600px; /* necessary to get items on same line in Opera. */
}

.mainMenu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.mainMenu ul li {
	margin: 0;
	padding: 0;
	float: left; /* right makes the align better when it goes on 2+ lines, but the
	list gets displayed right to left on a single line. */
	min-width: 200px; /* In Opera this won't work on the a, so needs to be here. 
	In IE min-width isn't recognized, hence the width hacks later. */
}

.mainMenu ul li a {
	white-space: nowrap;
	background-color: #0040ff;
	text-align: center;
	height: 2em;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 0;
	margin: 0;
	color: #fff;
	text-decoration: none;
	display: block;
	font-weight: bold;
	line-height: 2em;
}

.mainMenu ul li.three a {
	border-right: 1px solid #ccc;
}

/* min-width isn't recognized in IE 5 or 6, but fortunately it treats width like
min-width by allowing the item to expand above if necessary. */
* html .mainMenu ul li {
	width: 200px;
}

* html .mainMenu ul li.three {
	width: 201px; /* IE 5.5 does the width wrong with borders */
	w\idth: 200px; /* IE 6 doesn't */
}

.mainMenu ul li a:visited {
	color: #fff;
}

.mainMenu ul li a:hover {
	color: #000;
	background: #ffff00;
}

body.sectionone .mainMenu li.one a, 
body.sectiontwo .mainMenu li.two a,
body.sectionthree .mainMenu li.three a {
	background-color: transparent;
	color: #000;
}

/* Put no left right padding, borders, or margin on this, so that the total 
 width is guaranteed to be accurate across browsers (cos of IE5.5 box model 
 issue, but also because it's got to be the same % as the margin below). */
.contextMenuWrapper {
	float: left; 
	width: 27%;
	margin: 0;
	padding: 0;
	margin-right: -3px;
	margin-bottom: 3em;
}

/*** This IE/Win only negative margin is because when a dimension is put on a block element
that follows a float, the float aquires a 3px side margin adjacent to the block element, so in
case the line boxes within the following block element should touch the float, this negative 
margin will prevent any gap from appearing. ***/
/*** This is the "child" hack which uses the child (>) combinator, which is not supported by
IE/Win. So this 'zeroed' margin is not obeyed by those browsers. ***/
html>body .contextMenuWrapper {
	margin-right: 0;
}

.maintext {
	margin-top: 2.4em;
	padding-bottom: 3em;
	/* The float and width are later overridden for IEWin */
	float: left;
	width: 68%; /* leaving 5% margin to the right - this measurement is consistent
	across browsers */
}

/* for all IE - should test this on Mac - not critical if Mac gets it when it
 doesn't need it. */
* html .maintext {
	/* Top margin is different in IE than Firefox, the clear makes it a bit more
	 consistent when the browser window is resized. */
	margin-top: 3.4em;
	clear: right;
}

/* In IE (win at least) the maintext drops below the menu when the screen size 
	gets small.  Not floating maintext allows margins to be set that make it
	look more reasonable when the drop happens.  The margins also miraculously 
	stop tiny window resizes (at larger sizes) from causing sporadic drops.
	Can't put comments within the block cos of the IE/Mac hack.
	- The height of 1% puts IE Win into its own float model, which stops the 3px 
		margin bug, and generally gets things working without the float.
	- IE6 (when not in quirks mode) measures widths differently to IE5, hence 
		the two different widths.
	-	margin-left centers the maintext when it does drop below the menu (when the 
		screen is pretty small).  IE6 value is for a calculated center, IE5 is for
		an experimental center! 
*/
/* Hide from IE/Mac - don't think IE/Mac needs it. \*/
* html .maintext {
	height: 1%;
	float: none;
	width: 93%;
	margin-left: 6%;
	w\idth: 68%;
	ma\rgin-left: 16%;
}
/* End hiding */

.maintextError {
	margin-top: 3.4em;
	margin-bottom: 2em;
	margin-left: 16%;
	margin-right: 16%;
}

/* A div around the left bar nav ul */
.contextMenu {
	border-top: 4px solid #0040ff;
	border-bottom: 1px solid #ccc;
	margin-left: 12%;
	margin-right: 12%;
	margin-top: 3.4em;
	margin-bottom: 0em;
}

.testimonial, .fullLinksMenu {
	margin-left: 12%;
	margin-right: 12%;
	margin-top: 2.5em;
}


/* Following is needed for IE6 (the 1% on the a in contextMenu gets the rollover
 working all the way across, but messes things up in IE6) */
/* Hide from IE 5 Mac \*/
* html .contextMenu {
	height: 1%;
}
/* end hide */

/* The unordered list */
.nav {
	background: #9ad8fb url(sky-square.jpg) repeat;
	border-top: 1px solid #ccc;
	border-bottom: 6px solid #0040ff;
	border-left: 1px solid #ccc;
	border-right: 1px solid #0040ff;
}

.nav, .nav ul {
	padding: 0;
	margin: 0;
	text-align: left;
	line-height: 120%;
	list-style: none;
}

.nav li {
	display: inline;
	padding: 0;
	margin: 0;
}

.nav li a {
	font-weight: bold;
	display: block;
	padding: 8px 10px;
	color: #002db3;
	text-decoration: none;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #ccc;
	/* wrap-option: soft-wrap; This is CSS3 and won't work in browsers yet :( */
}

/* Following hack makes the block links as wide as the table in IE.  Note the 
 docs said do it for a:link, but I found caused problems in IE6 when the last
 menu item was in a nested list.  Weird. */
/* Hide from IE 5 Mac (which applies the 1% that it shouldn't) \*/
* html .nav li a {
	height: 1%;
}
/* end hiding */

.nav li a:hover {
	background-color: #ffff00;
}

.nav li a:visited {
	color: #800080;
}

/* submenu */
.nav li li a {
	font-weight: normal;
	padding: 6px 8px 6px 20px;
}



/* Stuff below is screen additions to the main text area - also needed in the 
 * downloaded help-files.
 */

.bottomBar {
	clear: both;
	border-top: 1px solid #ccc;
	margin-left: 2%;
	margin-right: 2%;
}

.bottomBar p {
	text-align: center;
	color: #666;
	font-family: Arial, sans-serif;
}

.twoBoxes {
	min-width: 370px;
}

* html .twoBoxes {
	/*width: 370px;*/
}

.halfBoxLeft, .halfBoxRight, .halfBoxLeft_hover, .halfBoxRight_hover {
	min-width: 180px;
}

.halfBoxLeft_hover, .halfBoxRight_hover {
	background: #ffff00;
}

a.button {
	font-size: 130%;
	text-decoration: none;
	font-weight: bold;
	padding: 0.3em;
	background-color: #0040ff;
	border: 3px outset #ccc;
	color: #fff;
	white-space: nowrap;
}

a.button:visited {
	color: #fff;
}

a.button:hover {
	background-color: #ffff00;
	color: #000;
}

p.button-indented, p.button-center, p.button-right, p.button-wrapped {
	/* Padding needs to be at least as big as the size of the a.button within the
	paragraph. */
	padding-top: 1.2em;
	padding-bottom: 1em; /* Smaller than top cos of large font in button */
}

p.button-indented {
	margin-left: 1.6em;
}

p.button-center {
	text-align: center;
}

p.button-right {
	float: right;
	/* Only a margin seems to prevent surrounding text from coming right up to 
	 the edge of the button.  Not very well though. */
	margin-left: 0.4em;
	/* p already has a top and bottom margin */
}

.whatNext, .entryForm fieldset legend {
	background: #9ad8fb url(sky-square.jpg) repeat;
}

.highlighted, .programOption, .halfBoxLeft, .halfBoxRight, .testimonial, 
		.fullLinksMenu {
	background: #ffffcc url(gradient.jpg) repeat;
}


/* lightbox stuff - from original, but I edited it a bit to fit with site style
and to improve cross-browser compatibility. */

#lightbox {
	background-color: #eee;
	padding: 10px;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
}
#lightboxDetails {
	padding-top: 5px;
	display: table-cell;
}	
#lightboxCaption {
	float: left;
	font-weight: bold;
	font-style: italic;
}
#keyboardMsg {
	float: right;
}
#keyboardMsg a {
	text-decoration: none;
}
#closeButton {
	top: 5px;
	right: 5px;
}

#lightbox img {
	border: none;
	clear: both;
} 
#overlay img {
	border: none;
}

kbd {
	color: #555;
	background-color: #ddd;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-size: inherit;
	font-family: inherit;
	font-weight: bold;
	padding: 0 3px 2px 4px;
}