/* structure.css are the styles for the DIVs in a website and should not contain
any typographic or content-related styles for a site. The styles within are strictly
used to create the layout/structure of the website and, as such, this style sheet 
will (almost) never need to be altered by the client or back-end programmers. */

/* ----- comment styles well for better reference later! ----- */
/* ----- try to lay this out in the following sections and from top to bottom on pages ----- */

/*
Author: Jon Halk 
Questions? jhalk [at] esolutionsgroup.ca
*/

/* STYLES FOR ALL PAGES */



Body{
	margin-top: 10px;
}


/* Main Wrapper container */
#Uber{
	margin: auto auto;
	width:948px;
	background: url(/images/BG_Dropshadow.gif) repeat-y;
}


/* Default list attributes*/
#Uber ul{
	display:block;
	list-style-position:outside;
	list-style-image: url(/images/List_Arrow.gif);
	margin-left:20px;
}


/*top nav image*/
#topNav img {
	vertical-align: middle;
	margin-bottom: 5px;
	margin-left: 5px;
}

/* search button and textfield (header section)*/
#topSearch #searchButton {
	vertical-align: middle;
}
#topSearch #searchTextField {
	vertical-align:middle;
	margin-right:5px;
	width:178px;
	padding:1px;
}



/* Footer Styles*/
#Footer{
	display:block;
	background: url(/images/BG_Dropshadow_Bottom.gif) no-repeat bottom left;
	clear: both;
	padding-left:6px;
	padding-right:6px;
	padding-bottom:20px;
	color: #666666;
	font-size: 11px;
}

#Footer #copyRightInfo {
	color: #FFFFFF;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 21px;
	background-color: #7EA756;
	font-size:12px;

}

#Footer #copyRightInfo a{
	color: #FFFFFF;
}

#Footer #copyRightInfo a:Hover{
	text-decoration:underline;
}
#Footer #contactInfo {
	background-image: url(/images/Northumberland_Logo,Sm.gif);
	background-repeat: no-repeat;
	background-position: left top;
	width: 170px;
	padding-left: 75px;
	margin-left: 20px;
	float: left;
	margin-top: 23px;
	display: inline;

}
#Footer #doBusiness {
	float: left;
	margin-top: 23px;
}
#siteByEsolutions {
	width: 340px;
	float: right;
	margin-top: 23px;
}

#siteByEsolutions a{
	color: #666666;
}



/* STYLES HOME PAGE ONLY */
/* Homepage header is one large image which is swapped, all items are positioned absolutely over the image if required

*/
#homepageHeader{
	margin-bottom:15px;
	position:relative;
}


/* top right navigation menu */
#homepageHeader #topNav {
	width: 629px;
	position:absolute;
	z-index:101;
	left: 306px;
	top: 16px;
}


#homepageHeader #topNav img {
display:inline;
}


/* search area */
#homepageHeader #topSearch {
	width: 226px;
	position:absolute;
	z-index: 102;
	left: 355px;
	top: 30px;
}



/* main menu needs to be placed absolutely*/
#homeMenu{
	width: 936px;
	position:absolute;
	z-index: 103;
	left: 6px;
	top: 124px;
}

/* text that fits over the blue box in the image*/
#homepageHeader #imagineText{
	position:absolute;
	z-index: 104;
	width:342px;
	font-size:14px;
	color:#FFFFFF;
	left: 577px;
	top: 170px;
	height: 81px;
	overflow:hidden;
}

#homepageHeader #imagineText p{
	font-size:16px;
	color:#FFFFFF;
}


/* HOME content area (from left to right)*/
/*1. introduction text area*/

#homepageContent #Intro{
	width: 490px;
	padding-right: 22px;
	padding-left: 22px;
	padding-top: 10px;
	float: left;
}

#Intro img 
{
	border: 1px solid #B9B9B9;
	float: left;
	padding: 1px; 
	margin-right: 10px;
	margin-bottom: 5px;
}

#Intro h2 {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin-top: 0px;
	padding: 0px;
}

/* 3. Calendar / weather section*/
#homepageContent #Calendar {
	float: left;
	width: 207px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #B9B9B9;
	padding-right:16px;
	padding-left: 5px;
	overflow: hidden;

}
#Calendar h2 {
	margin-top: 2px;
	margin-bottom: 5px;
}

#Calendar img 
{
	padding-top: 1px;
	padding-bottom: 1px;
}

/* 4. Location section */
#homepageContent #Location {
	float: left;
	width: 155px;
	height:227px; 
	padding-left: 12px;
}
#homepageContent #Location h2 {
	margin-top: 2px;
	margin-bottom: 5px;
}

/* 5. News section */
#homepageContent #News
{
	overflow: hidden;
	padding-top: 10px;
	padding-right: 17px;
	float: right;
	width: 390px;
}

#homepageContent #Action
{
	float: right;
	padding-top: 10px;
	padding-right: 20px;
	width: 390px;
}

/* green bar that is flushed right and down */
#ClearAndGreenBarHome{
	display: inline;
	padding:0;
	padding-top: 10px;
	margin-right: 6px;
	float: right;
	clear: both;	
}




/* STYLES FOR CONTENT PAGES ONLY */
/* Content section is pretty different then the homepage since everything is 
in the header floated / relative as opposed to absolte*/
#interiorHeader{
	background: url(/images/BG_Dropshadow_Top.gif) no-repeat top left;
	padding-left:6px;
	width:942px;
}
/*top nav container*/
#interiorHeader #topNav {
	width: 629px;
	float: right;
	margin-top: 18px;
	margin-right: 12px;
	display:inline;
}


#interiorHeader #topNav img {
display:inline;
}


/* top search container*/
#interiorHeader #topSearch {
	width: 250px;
	text-align:right;
	margin-right: 17px;
	margin-top:15px;
	float: right;
	clear: right;
	vertical-align:middle;
	display:inline;
}


/* Northumberland Main logo*/
#interiorHeader #Logo{
	float:left;
	margin-left: 14px;
	margin-top:20px;
	margin-bottom:10px;
}
/* Large image in header*/
#interiorHeader #headerImage{
	position: relative;
	float:left;
}



/* header text*/

#interiorHeader #headerImage #headerText{
	position: absolute;
	z-index:105;
	left: 634px;
	top: 121px;
	color: #FFFFFF;
	width: 280px;
	height: 57px;
	overflow:hidden;
}

#interiorHeader #headerImage p {
	color: #FFFFFF;
	font-size: 14px;
}





/*Main content*/
#interiorContent{
	width: 918px;
	padding-left:30px;
	margin-top: 10px;
	float:left;
}

/*Main content*/
#interiorContentSolid{
	width: 918px;
	padding-left:30px;
}


#BreadCrumb{
	font-size: 10px;
	text-align:left;
	margin-left: 6px;
	float: left;
}

/* Left content of main area*/
#interiorContent #leftContent, #interiorContentSolid #leftContent{
	width: 547px;
	margin-left:6px;
	float: left;
}
/* for double column lists */
#interiorContent .floatListLeft, #interiorContentSolid .floatListLeft{
	width: 260px;
	margin-right: 10px;
	float:left;
}

/* Right content area*/
#interiorContent #rightContent {
	width: 298px;
	float: right;
	padding-right: 35px;
}

/* add more spacing to interior lists*/
#interiorContent li{

margin-top:6px;
margin-bottom:6px;

}

#interiorContent h1 {
	font-size:12px;
	color:#333333;
}

#interiorContent h2 {
	font-size:12px;
}
/*spotlight section (side right)*/ 
#rightContent .spotLight {
	padding-top:10px;
	width: 298px;
	display: block;
	float: left;
}

#interiorContent .spotLight h2 {
	font-size:12px;
	margin-bottom: 6px;
	display: block;
}
#interiorContent .spotLight img{
	border: 1px solid #B1B1B1;
	padding: 1px;
	float:left;
	clear: both;
	margin-right:20px;
	
}
#rightContent .spotLight p {

}

/*green bar flushed right at bottom of screen just above footer*/
#ClearAndGreenBar {
	background-color: #AACD92;
	height: 16px;
	width: 333px;
	display: inline;
	float: right;
	margin-right: 6px;
	margin-top: 20px;
}

/*this style actually clears, the prior does not, the clear functionality was taken out after*/
#ClearGreenBar {
	background-color: #AACD92;
	height: 16px;
	width: 333px;
	display: inline;
	clear:both;
	float: right;
	margin-right: 6px;
	margin-top: 20px;
}






/* solid right area section */

/* Right content area*/
#interiorContentSolid #rightContent {
	background:#B19856;margin-right:6px;
	height:380px;width:333px;
	float:right;display:inline;
}
#interiorContentSolid #section1Colour, #interiorContentSolid #section2Colour , #interiorContentSolid #section3Colour ,#interiorContentSolid #section4Colour ,#interiorContentSolid #section5Colour ,#interiorContentSolid #section6Colour ,#interiorContentSolid #section7Colour ,#interiorContentSolid #section8Colour {
	margin-right:6px;
	height:380px;width:333px;
	float:right;display:inline;
}
#interiorContentSolid #section1Colour {background:#B19856;}
#interiorContentSolid #section2Colour {background:#7C905D;}
#interiorContentSolid #section3Colour {background:#468DC3;}
#interiorContentSolid #section4Colour {background:#DA9645;}
#interiorContentSolid #section5Colour {background:#EC065C;}
#interiorContentSolid #section6Colour {background:#8F8FB5;}
#interiorContentSolid #section7Colour {background:#BC4E67;}
#interiorContentSolid #section8Colour {background:#ECD65C;}


#interiorContentSolid h1{
	font-size:16px;
	color:#000000;
}


#interiorContentSolid #leftContent{
	margin-top:10px;
}


#interiorContentSolid #leftContent h1{
	width:400px; padding:10px 0 10px 0;
}

#interiorContentSolid #leftContent #contentActions{
	width:130px;float:right; margin-top:10px;
}


#printAction{
	background:url(/images/icon_print.gif) no-repeat;
	padding:2px 0 0 22px;
	width:36px;
	display:block;
	height:20px;
	font-size:11px;
	float:left;
}
#emailAction{
	background:url(/images/icon_mail.gif) no-repeat;
	padding:2px 0 0 22px;
	width:36px;
	display:block;
	height:20px;
	font-size:11px;
	float:left;
}


/* CSS NAVIGATION STYLES -  
a cross between the sliding doors background swap / Stu Nicholls drop-line cascading validating menu
-JH
*/

/*get rid of padding and margins for list items*/
#interiorHeader ul, #homepageHeader ul { 
padding:0; 
margin:0; 
list-style-image:none;
list-style-type:none;
} 
#interiorHeader li, #homepageHeader li{
margin:0; 
padding:0; 
}

/* 2nd level list item style*/

#interiorHeader ul li ul li, #homepageHeader ul li ul li{
margin-top:7px;
}




/*Main navigation wrapper*/
.Menu {clear:left;display:block;width:936px;height:28px;position:relative;margin:0;font-size:11px;margin:0px 0 0px 0;
background:#7EA756;position:relative;}
.Menu ul {padding:0; margin:0; list-style-type: none;}

.Menu ul li {float:left;}

.Menu ul li a, .Menu ul li a:visited {display:inline; float:left; text-decoration:none; padding:0 0 0 0px; line-height:28px; color:#000;}

.Menu table {border-collapse:collapse; margin:0; padding:0; font-size:1em;}

.Menu ul li ul {visibility:hidden; position:absolute; top:28px; height:28px; left:0; list-style-image:none; list-style-type:none; display:block}



.Menu ul li:hover a,
.Menu ul li a:hover {background:none;}
.Menu ul li:hover ul,
.Menu ul li a:hover ul {visibility:visible; width:936px;}

/*style of 2nd level list*/
.Menu ul li ul li{font-size:12px;float:left;margin-left:10px;
padding-left:10px;padding-right:10px; padding-top:0px;margin-top:0px;margin-bottom:10px;font-weight:bold;}

/* here is where the sliding doors method comes in*/


/* Each top level section needs the following, this includes the on state */
#Nav1, #Nav1on{float:left;width: 143px}
#Nav1 img{
	float:left;display: block; width: 143px; height: 28px; margin: 0; padding: 0;
	background: url(/en/images/About_Northumberland.gif) 0 0 no-repeat; text-decoration: none;
}
#Nav1 a:hover img, #section1on #Nav1 img{
	display: block; width: 143px; height: 28px; margin: 0; padding: 0; float: left;
	background: url(/en/images/About_Northumberland.gif) 0px -28px no-repeat; text-decoration: none; cursor:pointer;
}

#Nav1 ul a:hover{color:#FFFFFF;}
#Nav1 ul a{color:#E7D9B8;padding-left:15px; padding-right:15px;border-right: solid 1px; line-height:14px;}
#Nav1 ul {background-color:#967218;}





#Nav2, #Nav2on{float:left;width: 114px}
#Nav2 img{
	display: block; width: 114px; height: 28px; margin: 0; padding: 0; float: left;
	background: url(/en/images/Accomodations.gif) 0 0 no-repeat; text-decoration: none;
}
#Nav2 a:hover img, #section2on #Nav2 img{
	display: block; width: 114px; height: 28px; margin: 0; padding: 0; float: left;
	background: url(/en/images/Accomodations.gif) 0px -28px no-repeat; text-decoration: none; cursor:pointer;
}
#Nav2 a:hover{color:#48642D;}
#Nav2 ul a{color:#48642D;padding-left:15px; padding-right:15px;border-right: solid 1px; line-height:14px;}
#Nav2 ul {background-color:#B6DA2B;}






#Nav3, #Nav3on{float:left;width: 126px}
#Nav3 img{
	display: block; width: 126px; height: 28px; margin: 0; padding: 0; float: left;
	background: url(/en/images/Wilderness&Outdoors.gif) 0 0 no-repeat; text-decoration: none;
}
#Nav3 a:hover img, #section3on #Nav3 img{
	display: block; width: 126px; height: 28px; margin: 0; padding: 0; float: left;
	background: url(/en/images/Wilderness&Outdoors.gif) 0px -28px no-repeat; text-decoration: none; cursor:pointer;
}
#Nav3 a:hover{color:#FFFFFF;}
#Nav3 ul a{color:#B0CFE5;padding-left:15px; padding-right:15px;border-right: solid 1px; line-height:14px;}
#Nav3 ul {background-color:#0163AE;}






#Nav4, #Nav4on{float:left;width: 140px}
#Nav4 img{
	display: block; width: 140px; height: 28px; margin: 0; padding: 0; float: left;
	background: url(/en/images/Getaways.gif) 0 0 no-repeat; text-decoration: none;
}
#Nav4 a:hover img, #section4on #Nav4 img{
	display: block; width: 140px; height: 28px; margin: 0; padding: 0; float: left;
	background: url(/en/images/Getaways.gif) 0px -28px no-repeat; text-decoration: none; cursor:pointer;
}
#Nav4 a:hover{color:#FFFFFF;}
#Nav4 ul a{color:#EECBB5;padding-left:15px; padding-right:15px;border-right: solid 1px; line-height:14px;}
#Nav4 ul {background-color:#CC6D00;}



#Nav5, #Nav5on{float:left;width: 117px}
#Nav5 img{
	display: block; width: 117px; height: 28px; margin: 0; padding: 0; float: left;
	background: url(/en/images/festivalEvents.gif) 0 0 no-repeat; text-decoration: none;
}
#Nav5 a:hover img, #section5on #Nav5 img{
	display: block; width: 117px; height: 28px; margin: 0; padding: 0; float: left;
	background: url(/en/images/festivalEvents.gif) 0px -28px no-repeat; text-decoration: none; cursor:pointer;
}

#Nav5 a:hover{color:#606400;}
#Nav5 ul a{color:#707106;padding-left:15px; padding-right:15px;border-right: solid 1px; line-height:14px;}
#Nav5 ul {background-color:#DAC32B;}






#Nav6, #Nav6on{float:left;width: 125px}
#Nav6 img{
	display: block; width: 125px; height: 28px; margin: 0; padding: 0; float: left;
	background: url(/en/images/Shopping&Cuisine.gif) 0 0 no-repeat; text-decoration: none;
}
#Nav6 a:hover img, #section6on #Nav6 img{
	display: block; width: 125px; height: 28px; margin: 0; padding: 0; float: left;
	background: url(/en/images/Shopping&Cuisine.gif) 0px -28px no-repeat; text-decoration: none; cursor:pointer;
}
#Nav6 a:hover{color:#FFFFFF;}
#Nav6 ul a{color:#B0BFD7;padding-left:15px; padding-right:15px;border-right: solid 1px; line-height:14px;}
#Nav6 ul {background-color:#666699;}





#Nav7, #Nav7on{float:left;width: 137px}
#Nav7 img{
	display: block; width: 137px; height: 28px; margin: 0; padding: 0; float: left;
	background: url(/en/images/Arts&Entertainment.gif) 0 0 no-repeat; text-decoration: none;
}
#Nav7 a:hover img, #section7on #Nav7 img{
	display: block; width: 137px; height: 28px; margin: 0; padding: 0; float: left;
	background: url(/en/images/Arts&Entertainment.gif) 0px -28px no-repeat; text-decoration: none; cursor:pointer;
}
#Nav7 a:hover{color:#FFFFFF;}
#Nav7 ul a{color:#DED1C8;padding-left:15px; padding-right:15px;border-right: solid 1px; line-height:14px;}
#Nav7 ul {background-color:#A30C2F;}


/* MENU ON STATES */


/*section 1*/
#section1on #Nav1 ul{z-index: 1; visibility:visible; width:936px;}
#section1on #Nav2 ul{z-index: 2;}
#section1on #Nav3 ul{z-index: 3;}
#section1on #Nav4 ul{z-index: 4;}
#section1on #Nav5 ul{z-index: 5;}
#section1on #Nav6 ul{z-index: 6;}
#section1on #Nav7 ul{z-index: 7;}
/*section 2*/
#section2on #Nav1 ul{z-index: 2;}
#section2on #Nav2 ul{z-index: 1; visibility:visible; width:936px;}
#section2on #Nav3 ul{z-index: 3;}
#section2on #Nav4 ul{z-index: 4;}
#section2on #Nav5 ul{z-index: 5;}
#section2on #Nav6 ul{z-index: 6;}
#section2on #Nav7 ul{z-index: 7;}
/*section 3*/
#section3on #Nav1 ul{z-index: 2;}
#section3on #Nav2 ul{z-index: 3;}
#section3on #Nav3 ul{z-index: 1; visibility:visible; width:936px;}
#section3on #Nav4 ul{z-index: 4;}
#section3on #Nav5 ul{z-index: 5;}
#section3on #Nav6 ul{z-index: 6;}
#section3on #Nav7 ul{z-index: 7;}
/*section 4*/
#section4on #Nav1 ul{z-index: 2;}
#section4on #Nav2 ul{z-index: 3;}
#section4on #Nav3 ul{z-index: 4;}
#section4on #Nav4 ul{z-index: 1; visibility:visible; width:936px;}
#section4on #Nav5 ul{z-index: 5;}
#section4on #Nav6 ul{z-index: 6;}
#section4on #Nav7 ul{z-index: 7;}
/*section 5*/
#section5on #Nav1 ul{z-index: 2;}
#section5on #Nav2 ul{z-index: 3;}
#section5on #Nav3 ul{z-index: 4;}
#section5on #Nav4 ul{z-index: 5;}
#section5on #Nav5 ul{z-index: 1; visibility:visible; width:936px;}
#section5on #Nav6 ul{z-index: 6;}
#section5on #Nav7 ul{z-index: 7;}
/*section 6*/
#section6on #Nav1 ul{z-index: 2;}
#section6on #Nav2 ul{z-index: 3;}
#section6on #Nav3 ul{z-index: 4;}
#section6on #Nav4 ul{z-index: 5;}
#section6on #Nav5 ul{z-index: 6;}
#section6on #Nav6 ul{z-index: 1; visibility:visible; width:936px;}
#section6on #Nav7 ul{z-index: 7;}
/*section 7*/
#section7on #Nav1 ul{z-index: 2;}
#section7on #Nav2 ul{z-index: 3;}
#section7on #Nav3 ul{z-index: 4;}
#section7on #Nav4 ul{z-index: 5;}
#section7on #Nav5 ul{z-index: 6;}
#section7on #Nav6 ul{z-index: 7;}
#section7on #Nav7 ul{z-index: 1; visibility:visible; width:936px;}


/* this is used to change the colour of the nav bar*/


/*Navigation Bottom/Text colours (these will change for each section) */
#menuBottomBlue {width:936px;height:28px;
	background-color: #0163AE;float:left;}

#menuBottomBrown {
	width:936px;height:28px;
	background-color: #967218;float:left;
}

#menuBottomGreen {
	width:936px;
	height:28px;
	background-color: #B6DA2B;
	float:left;
}

#menuBottomOrange {
	width:936px;
	height:28px;
	background-color: #CC6D00;
	float:left;
}

/* YELLOW */
#menuBottomYellow{
	width:936px;
	height:28px;
	background-color: #DAC32B;
	float:left;
}


#menuBottomPurple{
	width:936px;
	height:28px;
	background-color: #666699;
	float:left;
}

#menuBottomRed{
	width:936px;
	height:28px;
	background-color: #A30C2F;
	float:left;
}

/* -------------------------------------------------- Actions */

div.actionLinks {
	height: 25px;
}

/* --- Print Link --- */
a.printLink, a.printLink:active, a.printLink:visited {
	display: block;
	float: right;
	width: 60px;
	height: 16px;
	overflow: hidden;
}

/* --- EMAIL Link --- */
a.emailLink, a.emailLink:active, a.emailLink:visited {
	display: block;
	float: right;
	width: 65px;
	height: 16px;
	overflow: hidden;
}

/* --- Rss Link --- */
a.rssLink, a.rssLink:active, a.rssLink:visited {
	display: block;
	float: right;
	width: 60px;
	height: 16px;
	overflow: hidden;
}