/****************************************************************************************************************************/
/****************************************************************************************************************************/
/* The Masthead is contained in its own wrapper (the Masthead div) that is positioned first                                 */
/* It contains the heading and main navigation bar in separate divs                                                         */
/****************************************************************************************************************************/

#masthead {
	width: 100%;
	height: auto;
	top: 0px;
	left: 0px;
    position: relative;
	border-style: none;
}

/* The Heading div contains the image of the KAA logo and the Association's name against a background image */
#heading {
	width: 100%;
	height: 100px;
	top: 0px;
	left: 0px;
	position: relative;
	border-style: none;
	background-repeat: repeat-x;
	background-image: url('../images/site-style/kaa-masthead-background.jpg');
/*	background-image: url('../images/site-style/christmas/winter-wonderland-tile.jpg'); */
/*	background-image: url('../images/site-style/christmas/snow-covered-pine-tile.jpg'); */
/*	background-image: url('../images/site-style/christmas/snow-pine-tree-tile.jpg'); */
/*	background-image: url('../images/site-style/christmas/snow-forest-tile.jpg'); */
/*	background-image: url('../images/site-style/christmas/winter-birch-tile.jpg'); */
}

@media print {
	#heading {
		height: 150px;
		border-style: none none solid none;
		border-width: medium;
		border-bottom-color: #990000;
		background: none;
	}
}

/* The following is included to remove whitespace from below the image in Netscape7 and Opera browsers */
/* It has no impact on other browsers that treat images as a "block" rather than an "inline" element */
#heading img {
	display: block;
}

/* The KAA logo is presented as a foreground image above a masthead background, */
#heading-logo {
	width: 15%;
	height: auto;
	top: 0px;
	left: 0px;
	position: absolute;
	border-style: none;
/*	background-color: lime;     *****/
}

/* The image is resized for printing to ensure proportions are the same as in headed stationery */
@media print {
	#heading-logo img{
		width: 150px;
		height: 150px;
		top: 0px;
		left: 0px;
		position: relative;
		margin: 0px;
		padding: 0px;
		border-style: none;
	}
}

/* To layer the KAA name above the image in the Masthead div, a further div is added and positioned top/right in Masthead */
/* Its width is determined simply to horizontally align the name correctly */
#heading-name {
	width: 85%;
	height: auto;
	top: 0px;
	right: 0px;
	position: absolute;
	border-style: none;
/*	background-color: red;     *****/
}

/* The name itself is formatted using the level1 heading as a basis */
/* NOTE:  at present Opera renders this with a white background instead of transparent */
#heading-name h2 {
	margin: 0px;
	font-family: "Times New Roman", Times, Serif;
    font-size: 50px;
    font-weight: bold;
    font-style: normal;
    font-variant: small-caps;
    text-transform: none;
    text-align: right;
    color: #000000;
    text-decoration: none;
}
 
@media print {
	#heading-name h2 {
	    text-align: right;
		text-decoration: underline;
	}
}

/* The heeading-name paragraph only contains the site URL, intended only for the printed page */
/* The text size is set in pixels for printing to ensure proportions are the same as in headed stationery */
#heading-name p {
	display: none;
}

@media print {
	#heading-name p {
	display: block;
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	text-align: right;
	color: #000000;
	text-decoration: none;
}
}

/****************************************************************************************************************************/
/****************************************************************************************************************************/
/* The Google search tool is included in the header section, superimposed over the header background                        */
/* It is suppressed for printing                                                                                            */
/****************************************************************************************************************************/

#search-google {
	top: 75px;
	right: 5px;
	position: absolute;
	font-size: small;
	font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
/*	background-color: blue;     *****/
}

@media print {
	#search-google {
		display: none;
		visibility: collapse;
	}
}

#search-google input[name^="btnG"] {
	padding-right: 5px;
	padding-left: 5px;
}

/****************************************************************************************************************************/
/****************************************************************************************************************************/
/* The hidden navigation bar contains hyper links to the main content of the current page and to the site menu              */
/* It is hidden by CSS, so that it is only visible in browsers when CSS is turned off, as with text viewers.                */
/* It is suppressed for printing                                                                                            */
/****************************************************************************************************************************/

#hidden-nav {
	display: none;
}

@media print {
	#hidden-nav {
		display: none;
		visibility: collapse;
	}
}

/****************************************************************************************************************************/
/****************************************************************************************************************************/
/* The top navigation bar contains the main navigation bar plus a coloured stripe to show which part of the site one is in  */
/* The stripe colour ties in with the colour used for the drop-down menu and this is different for each button              */
/* It is suppressed for printing                                                                                            */
/****************************************************************************************************************************/

/* The Topnav div defines the space in which the primary navigation menu list sits */
/* The height had to be defined to correctly render the background */
/* NOTE:  at present Netscape Navigator v7 incorrectly renders this div with a gap above and below, */
/*        the gap below is within this div.  v8 renders this correctly!!! */
#top-nav {
    width: 100%;
    height: 30px;
    top: 0px;
    left: 0px;
    position: relative;
    border-style: none;
    background-image: url('../images/site-style/nav-button-maroon-5x30-100.jpg');
    background-repeat: repeat-x;
}

@media print {
	#top-nav {
		display: none;
		visibility: collapse;
	}
}

/* Defines the overall styling of the navigation list */
#top-nav ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

/* Defines the position, size and styling of the navigation list items. */
/* There are 8 of them, so each the width of each is 12% of the available width (because some browsers round down to nearest integer), */
/*    the remaining 4% is then split equally between the two boundary areas at each end of the navigation bar; */
/*    the min-width cannot be set here, otherwise each <p> or <a> tag contained in them colapses to the min-width value */
/*    and the difference between the width and min-width appears as an empty section to the right of the <p> or <a> element!!! */
#top-nav ul li {
	width: 12%;
	height: 30px;
	left: 0px;
	right: 0px;
	float: left;
	display: inline;
	margin: 0px;
    padding: 0px;
	border-style: none;
}
#top-nav ul li.boundary{
	width: 2%;
}

/* Defines the position, size and styling of the links, including the text itself. */
/* The whole area of a list item becomes a link, rather than just the area of the text in it. */
/* Only the "min-width" is set here - see the note above relating to the <li> element.  */
#top-nav ul li p {
	height: 30px;
    margin: 0px;
    padding: 6px 0px 0px 0px;
    border-left: gray 1px solid;
    border-right: gray 1px solid;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    text-transform: none;
    color: #BBBBBB;
    text-align: center;
    text-decoration: none;
}
#top-nav ul li a {
	height: 30px;
    display: block;
    margin: 0px;
    padding: 6px 0px 0px 0px;
    border-left: gray 1px solid;
    border-right: gray 1px solid;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    text-transform: none;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
}

#top-nav ul li a:hover {
    color: #FFD700;
}

#top-nav ul li a:focus {
	outline: 1px dotted;
    outline-offset: 0px;
    -moz-outline-radius: 0px;
}


/* Topnav-Colour defines a coloured bar below the menu, that identifies where the visitor is within the site */
/* NOTE:  at present it is permanently maroon */
#top-nav-color {
	width: 100%;
	height: 5px;
	top: 0px;
	left: 0px;
    position: relative;
    border-top: #FFFFFF 1px solid;
    background-color: #990000;
}

/***************************************************************************************************************************/
/***************************************************************************************************************************/
/* The Navigation Assistant area lies immediately below the top navigation bar                                             */
/* It contains the user's current position within the site-map and the style switcher                                      */
/***************************************************************************************************************************/

/* The navigation assistant is the full width of the primary area and contains both the site-map position display and the style switcher */
#nav-assist {
	width: 100%;
	height: auto;
	top: 0px;
	left: 0px;
	position: relative;
	border-style: none;
	background-color: #CCCCCC;
}

@media print {
	#nav-assist {
		display: none;
		visibility: collapse;
	}
}

/* Displays the site-map navigation position */
#page-details {
	height: auto;
	top: 0px;
	left: 0px;
	position: relative;
	padding: 5px 5px 5px 100px;
	overflow: auto;
	border-style: none;
	text-align: left;
}

@media print {
	#page-details {
		display: none;
		visibility: collapse;
	}
}

/* The style switcher div is just large enough to contain the switcher buttons and positioned to the far right of nav-assist */
#styleswitcher {
	width: 212px;
	float: right;
	border-style: none;
	text-align: center;
}

@media print {
	#styleswitcher {
		display: none;
		visibility: collapse;
	}
}

#styleswitcher p {
	margin: 0px;
	font-size: x-small;
	text-align: center;
}

#styleswitcher ul {
	margin: 5px;
	padding: 0px;
	list-style-type: none;
	font-size: x-small;
}

#styleswitcher ul li {
	display: inline;
	margin: 3px;
	padding: 3px;
	border-style: none;
}

#styleswitcher ul li a {
	display: inline;
	margin: 3px;
	padding: 3px;
	font-size: x-small;
    font-weight: bold;
    font-style: normal;
    text-transform: none;
    text-align: center;
    text-decoration: none;
}

#styleswitcher li a:visited {
	border: thin solid silver;
	background-color: #333333;
	color: #FFFFFF;
	text-decoration: none;
}

#styleswitcher li a:link {
	border: thin solid silver;
	background-color: #333333;
	color: #FFFFFF;
	text-decoration: none;
}

#styleswitcher li a:hover {
	border-width: thin;
	border-style: solid;
	border-color: #000000 #FFFFFF #FFFFFF #000000;
	background-color: #333333;
	color: #FFD700;
}

#styleswitcher li a:focus {
	outline: 1px dotted;
    outline-offset: 0px;
    -moz-outline-radius: 0px;
}