/* MAIN DIVs */

body {padding:0; margin:0; border:0; text-indent:0; background-color:ivory; font-family: Calibri, Gill Sans, Gill Sans MT, Lucida Sans Unicode, Lucida Sans, Times New Roman;}
/**/p, h2, h3, dt, dd, #content li  {font-size: 1.1em; margin: 0 0 6px 0; line-height:24px; font-family: Calibri, Gill Sans, Gill Sans MT, Times New Roman}
/**/p.large {font-size:1.3em; margin: 0 0 10px 0; margin-top:-14px; line-height:30px}
/**/p.quote {text-indent:-10px; margin-left:10px; }
/**/p.quote-source {margin: -8px 0 32px 10px;}
/**/#content h1 { font-size: 2.25em; font-weight:normal; margin:0; height:84px; width:564px; padding:26px 156px 0 144px; line-height:.9em; }
/**/.subtitle {font-size: 0.56em;}
/**/h2,h3 {margin:22px 0 8px 0; }
/**/h2 + h3 {margin-top: 0px;}
/**/h2.top, h3.top {margin:0 0 8px 0; }
/**/h2 {text-transform:uppercase; letter-spacing:0.15em; }
/**/h2.stub {font-weight:normal; text-transform:none; letter-spacing:0; margin: 0px 0 0px 0px; font-size:1.25em; border-top:2px solid #3B3273; color:#3B3273}
/**/p.large + h2 {margin:18px 0 8px 0;}
/**/dt {margin:0; font-weight:bold;}
/**/dd {margin-left:1em;}
/**/#content li {list-style-type: none; margin-left:-40px;}
/**/a  {color:#3B3273  /*darkslateblue, brightness -10*/; text-decoration:underline; cursor:pointer;}
/**/a:visited {color:#573B24}
/**/h2.stub a {text-decoration:none}
/**/h2.stub a:visited {color:#3B3273;}
/**/img {border:none;}

#xgrid {width:100%; height:100%;  position:absolute; background-image:url(../images/grid-12px.png); background-position: -132px -48px; z-index:+3; opacity:0.7;} /* for diagnostics */ 


/* COLOURS < http://patorjk.com/color-palette-generator/ with http://www.marymunro.ca/logo.png */

.red, .error {background-color:#C92C29;}
.orange {background-color:#D97A16;}
.green {background-color:#6C8B2A;}
.blue {background-color:#2F7BBD;}
.navy {background-color:#243857;}
.purple {background-color:#8C4871;}
.brown {background-color:#855B31;} /*no rollover defined*/
.grey {background-color:lightgray; color:#666666;} /* =disabled, color won't override color from div for some reason */

.red:hover, .red:active {background-color:#D60E0B;}
.orange:hover, .orange:active {background-color:#FF8400;}
.green:hover, .green:active {background-color:#77A611;}
.blue:hover, .blue:active {background-color:#0087FC;}
.navy:hover, .navy:active {background-color:#2256A3;}
.purple:hover, .purple:active {background-color:#BF3B8A;}

.red:active, .orange:active, .green:active, .blue:active, .navy:active, .purple:active {text-shadow: white 0 0 16px;}

.red a, .orange a, .green a, .blue a, .navy a, .purple a {color:white; text-decoration:none;}

.hidden {visibility:hidden}

.error, .error a {color:white;}
 



#banner-space {
	width:100%; height:84px;  
	background-color:darkslateblue; background-image:url(../images/top-decoration.png); background-repeat:repeat-x; background-position:0 0px;
	}
.logotext { float:left; width:360px; margin:14px 0 0px 49px; font-family: Trebuchet MS, Helvetica, Arial; font-size:34px; font-weight:normal; text-indent: -38px; line-height:23px; text-decoration:none; color:#329EFC; xtext-shadow: white 0 0 24px;}
.logotext2 {font-family: xCalibri, Trebuchet MS, Helvetica, Arial; text-transform:uppercase; letter-spacing:2.5px; font-size:18px; font-weight:bold; color: #92CC14; xtext-shadow: white 0 0 16px;}
.logotext a {text-decoration:none; color:#329EFC;}
.logotext a {outline:none;}
.logotext a:active {text-shadow: #A49EC5 0 0 16px;} /* colour is half way between darkslateblue and white */

#overlay {width:100%; height:200%; position:absolute; background-image:url(../images/brown-trans-80.png);z-index:+1}

#dialogue {position:absolute;  z-index:+2; background-color:#2F7BBD; border: 1px solid white; font-size:0.8em; padding: 12px 6px 4px 8px;}
#dialogue p {margin:0.5em 0 0.5em 0}
#dialogue p:last-child {margin:0}
#close-box {width:16px; position:absolute; top:2px; right:2px;z-index:+3; background-image:url(../images/close-box.png); background-repeat:no-repeat; border:none;}
#close-box:active {background-image:url(../images/close-box-active.png);}

#pop-up, #pop-up-1 {position:fixed; z-index:+2; padding:0;border: 1px solid white; background-repeat:no-repeat;}
#pop-up #close-box, #pop-up-1 #close-box {background-image:url(../images/close-box-invert.png);}
#pop-up #close-box:active, #pop-up-1 #close-box:active {background-image:url(../images/close-box-active-invert.png);}

#nav-space{xmargin-left:-26px; xclear:both; position:fixed; bottom:15px; xbackground-color:lightgray; }
#nav-space li{
	display:inline; 
	float:left; 
	background-image:url(../images/button.png); 
	background-position:-50px; 
	padding:0px 17px 0px 17px; 
	border-left: 1px solid antiquewhite;
	margin:0; 
	list-style-type:none; 
	font-size:1.1em; 
	color:white; 
	font-weight:bold;
	line-height:34px;}
#nav-space a {color:white; text-decoration:none; font-weight:normal;}
#nav-space a.selected { font-weight:bold;}
#nav-space li:first-child {background-position:left; }
#nav-space li:last-child {background-position:right; }
#nav-space li:hover, #nav-space li:active {background-image:url(../images/button_over.png);}
#nav-space li:active {text-shadow: white 0 0 16px;}
.error2 {border-left: 1px solid black;}


#breadcrumb {width:100%; font-size:1.3em; margin-top:-18px; margin-left:-30px; xclear:both; xbackground-color:gray; }
#breadcrumb ul li {display:inline; }
#breadcrumb ul li:after {content:" > "}
#breadcrumb ul li:before {content:" "}
#xbreadcrumb ul li:last-child:after {content:"";}
#xbreadcrumb ul li:last-child {xcolor:#766EA8; xcolor:#329EFC; font-weight:bold; color:gray;}
#breadcrumb ul li a {text-decoration:none; xcolor:black;}
#breadcrumb ul li a:hover {text-decoration:underline;}


#frame {max-width:1100px;}


#content {width:720px; height:110%; margin:0px auto 72px auto; padding-bottom:72px;}

#box {
	height:124px; 
	width:124px; 
	color:white; 
	font-size:1.25em; 
	padding:4px 2px 4px 6px; 
	line-height:20px;
	}


.spacer {}


/**/#box, #box1xn, #pic, #text, #text2x1, #text3x1, #text2x2, #text3x2, #text2x3, #text3x3, #text3x5, #text4x1, #text1xn, #text2xn, #text3xn, #text4xn  {margin:0 12px 12px 0; float:left;}
 #text #text2x1, #text3x1, #text2x2, #text3x2, #text2x3, #text3x3, #text3x5, #text4x1, #text1xn, #text2xn, #text3xn, #text4xn  {padding: 4px 4px 0px 0; }

#pic {height:130px; width:130px; border: 1px solid black;}
/**/#pic2x2 {height:342px; width:342px; font-size:1em; line-height:1em; border: 1px solid black;}

/**/#text {height:128px; width:128px;}
/**/#text2x1 {height:128px; width:272px; }
/**/#text3x1 {height:128px; width:416px;}
/**/#text2x2 {height:272px; width:272px;}
/**/#text3x2 {height:416px; width:272px;}
/**/#text2x3 {height:416px; width:272px;}
/**/#text3x3 {height:416px; width:416px;}
/**/#text3x5 {}
/**/#text4x1 {height:128px; width:560px;}
/**/#text1xn, #box1xn {height:100%; width:128px; padding-bottom:72px; }
/**/#text2xn {height:100%; width:272px;  padding-bottom:72px;}
/**/#text3xn {height:100%; width:416px;  padding-bottom:72px;}
/**/#text4xn {height:100%; width:560px;  margin-bottom:72px;}

#box a{display:block; height:130px; width:130px;}

/**/#thumbnail {height:100%; width:100%; cursor:pointer; margin-bottom:12px;}

#bottom-spacer { }/*for IE 8, which doesn't seem to 


/**/#centred {
	height:96px;
	width:142px;
	display: table-cell;
	vertical-align: middle; 
	text-align:center; 
	}