@charset "utf-8";

/*	_____________________________________________________________________________________

	NEW STYLESHEET, SPECIFICALLY FOR NEW HALBERTON WEBSITE, JUNE 2018 

	SCREEN-WIDTHS
	Mobile	<600	Tablet	600-1000	Desktop	>1000
_____________________________________________________________________________________________*/
	
body {
  background-color: #fbfffb; 
  margin:0px;
  overflow-x:hidden;
}

#area-101 {
/*	Full-width box enclosing all content */
/*	width: 100%;	*/
	width: 100vw;
	padding: 0px;
	overflow: auto;
}


@media (min-width:1041px)  {

#area-102 {
/*	Full-width box for title bar and background, width:100%;*/

	width: 100vw;
	height 150px;	
	margin: 0  auto;
	padding: 0px;
	float: left;
	background-color: rgb(1,68,1);
}

#area-103 {

	width: 1000px;
	height: 125px;
	margin: 0  auto;
	padding: 0px;
	background-image:url(../images/canal_top_2-125.jpg);

}


/*  Header Image for small screens - image auto-sizes to fit space.
*/
#heading-image-1 {
	display:none;
}

/*	Used for large screen background title in fixed width */
.background-image-1 {
		width: 1000px;
		height: 150px;	
		float: left;
		background-image:url(../images/canal_top_2.jpg);
}


#heading-101{
	position:absolute;
	z-index:2;
/*	top margin messed about when doing the small screen
	For the 100px high top image, margins 10px in 101 and 60px in 102 work
	For the 150px high top image, margins 50px in 101 and 100px in 102 work */
	margin: 30px 0px 0px 10px;
	color:#ffffff;	
	font-size:48px;
	font-family:"Times New Roman", Times, serif;
	}

	
#heading-102{
	position:absolute;
	z-index:2;
/*	top margin messed about when doing the small screen */
	margin: 80px 0px 0px 10px;
	color:#ffffff;
	font-size:22px;
	font-weight: bold;
	font-style: italic;
	}

.gap-10px {
/*	                     */
	width: 100%;
	height: 10px;
	float: left;
}	




#area-104 {
/*	1000px wide box for main body in large screen */
	width: 1000px;
	margin: 0  auto;
	overflow: auto; 
	padding: 0px; 
}

/*	==============================================	*/
/*	Hover text over top image only on screens wider than 1040px	*/

#area-103 .hover-text {
  visibility: hidden;
  width: 450px;
  background-color: #fff;
  color: #000;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  margin:80px 0px 0px 400px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

#area-103:hover .hover-text {
  visibility: visible;
}

/*	==============================================	*/

}


@media (max-width:1040px)  {

#area-102 {
/*	Full-width box for title bar and background, width:100%;*/

	width: 100vw;
/*	height 150px;	large screen size    100px small screen*/
	height: 100px;
	margin: 0  auto;
	padding: 0px;
	float: left;
	background-color: rgb(1,68,1);
}

#area-103 {
	width:100vw;
	height 100px;	

}

/*	==============================================	*/
/*	Hover text over top image is not dispalayed on screens less width than 1040px	*/

.hover-text {
  display: none;
}

/*	==============================================	*/

#heading-image-1 {
	z-index: 1;
	position:absolute;
}

.heading-image {
/*	only applicable for small-screen */
	z-index: 1;
		object-fit:cover; 
		object-position: 0 0; 
	width:100vw; 
	height:100px;
}

#heading-101{
	position:absolute;
	z-index:2;
	margin: 10px 0px 0px 10px;
	color:#ffffff;	
	font-size:48px;
	}
	
#heading-102{
	position:absolute;
	z-index:2;
	margin: 60px 0px 0px 10px;
	color:#ffffff;
	font-size:22px;
	font-weight: bold;
	font-style: italic;
	}

.gap-10px {
/*	                     */
	width: 100%;
	height: 10px;
	float: left;
}	

#area-104 {
/*  This has been set to view the whole view width of the device, put a 5px margin on the left, */
/*  and leave space on the right side. Otherwise the right edge of the menu is lost */
	width:98vw;
	padding:0px 0px 0px 5px;
	overflow:hidden;
}

}




@media (max-width:840px)  {
	#menu-container-1 {
		margin:5px 0px 8px 0px; 
		height: 36px; 
		position: relative;
	}
	
	#menu-container-2 {
		display: none;
	}
}

@media (min-width:841px)  {
	#menu-container-1 {
		display: none;
	}

	#menu-container-2 {
		margin: 5px 10px 8px 0px; 
		height: 54px; 
		position: relative;
		display:block;
	}
}


/*		ALL MEDIA SIZES		*/

#menu-bar-left {
	position: absolute; 
	top: 0px; 
	left: 10px; 
	right: 30px; 
	height: 42px; 
	z-index:1;
}

#mid-section-img {
	width:100%; 
	height:100%; 
	overflow: hidden;
}

#active-menu {
	position: relative; 
	width:240px; 
	left: 0px; 
	top: 0px; 
	z-index: 2;
}

#menu-bar-mid {
	position: absolute; 
	top: 0px; 
	height:42px; 
	left: 240px; 
	z-index:3;
}

#menu-bar-right {
	position: absolute; 
	top: 0px; 
	right:0px; 
	height:0px; 
	z-index:0;
}




@media (min-width:841px)  {

#panel_1 {
	max-width:760px;
	overflow: hidden; 
	margin:0px 240px 0px 0px; 
	position:absolute;
}

#panel_2 {
	width: 240px;
	float:right;
}

#panel_3 {
	max-width:760px;
	overflow: hidden; 
	margin:0px 240px 0px 0px; 
	position:absolute;
}

}


@media (max-width:840px)  {

#panel_1 {
	width:98%; 
	overflow: hidden; 
	margin:0px 10px 0px 0px; 
	position:absolute;
}

#panel_2 {
	display:none;
}

#panel_3 {
	width:98%; 
	overflow: hidden; 
	margin:0px 10px 0px 0px; 
	position:absolute;
}

}


@media (max-width:600px)  {
		
#panel_1a {
	width:100%; 
	float: left;
	margin: 0;
	display:table-cell; 
	text-align:center;	

}

#panel_1b {
	width:98%; 
	float: left; 
	padding:0px 0px 0 5px;
}

#panel_1c {
	width:100%; 
	float: left;
	margin: 0;
	display:table-cell; 
	text-align:center;	
}

#panel_1d {
	width:98%; 
	float: left; 
	padding:10px 0px 0 5px;
	display:table-cell; 
	text-align:center;	
}

#panel_1e {
	width:100%; 
	float: left;
	margin: 0;
	display:table-cell; 
	text-align:center;
}

#panel_1f {
	width:98%; 
	float: left; 
	padding:10px 0px 0 5px;
	display:table-cell; 
	text-align:center;
}

#panel_3a {
	width:100%; 
	float: left;
	margin: 0;
}

#panel_3b {
	width:98%; 
	float: left; 
	padding:0 0px 0 5px;
}

#panel_news_1 {
	width:98%; 
	float: left; 
	padding:10px 0px 0 5px;
/*	display:table-cell; 
	text-align:center;	
*/
}

#panel_news_2 {
	width:98%; 
	float: left; 
	padding:10px 0px 0 5px;
	display:table-cell; 
	text-align:center;	
}

#panel_news_3 {
	width:98%; 
	float: left; 
	padding:10px 0px 0 5px;
	display:table-cell; 
	text-align:center;	
}


}

@media (min-width:601px)  {
		
#panel_1a {
	width:50%; 
	float: right;
	margin-top: 40px;
	display:table-cell;
    text-align:center;
}

#panel_1b {
	width:48%; 
	float: left; 
	overflow: visible; 
	padding:10px 0px 0 5px;
}

#panel_1c {
	width:50%; 
	float: right;
	margin: 0px 0 0 0;
	display:table-cell; 
	text-align:center;
}

#panel_1d {
	width:48%; 
	float: left; 
	overflow: visible; 
	padding:0 0px 0 5px;
	display:table-cell; 
	text-align:center;
}

#panel_1e {
	width:50%; 
	float: right;
	margin: 0px 0 0 0;
	display:table-cell; 
	text-align:center;
}

#panel_1f {
	width:48%; 
	float: left; 
	margin: 0px 0 0 5px;
	display:table-cell; 
	text-align:center;
}

#panel_3a {
	width:50%; 
	float: left; 
	padding:0 0px 0 0px;
}

#panel_3b {
	width:50%; 
	float: right;
	margin: 0px 0 0 0;
}

#panel_news_1 {
	width:98%; 
	float: left; 
	overflow: visible; 
	padding:0 0px 0 5px;
	display:table-cell; 
	text-align:center;
}

#panel_news_2 {
	width:98%; 
	float: left; 
	overflow: visible; 
	padding:0 0px 0 5px;
	display:table-cell; 
	text-align:center;
}

#panel_news_3 {
	width:98%; 
	float: left; 
	overflow: visible; 
	padding:0 0px 0 5px;
	display:table-cell; 
	text-align:center;
}


}




/*		ALL MEDIA SIZES		*/


.arial-36-norm {
	font-family: arial; 
	font-size:36px;
}

.arial-20-norm {
	font-family: arial; 
	font-size:20px;
}

.arial-20-norm-pad10top {
	font-family: arial; 
	font-size:20px;
	padding:10px 0 0 0;
}

.arial-18-norm-pad10top {
	font-family: arial; 
	font-size:18px;
	padding:10px 0 0 0;
}

.arial-18-norm {
	font-family: arial; 
	font-size:18px;
}

.arial-16-cursor{
/*	Like Text-111 with pointer and hover/underline in the Documents insert    */	
	font-family:arial;
	font-size:16px;
	cursor:pointer;
	padding:0 0 0 10px;
	}

.arial-16-norm {
	font-family: arial; 
	font-size:16px;
}

.arial-16-norm-pad10top {
	font-family: arial; 
	font-size:16px;
	padding:10px 0 0 0;
}

.arial-14-cursor{
/*	Like Text-111 with pointer and hover/underline in the Documents insert    */	
	font-family:arial;
	font-size:14px;
	cursor:pointer;
	padding:0 0 0 10px;
	}

.arial-14-norm {
	font-family: arial; 
	font-size:14px;
}

.arial-13-norm {
	font-family: arial; 
	font-size:13px;
	padding:0px 0 0 0;
}

.seperator-line {
	width: 220px;
	height: 1px; 
	background: #000; 
	overflow: hidden;
	margin: 10px 10px 10px 10px;
}

.seperator-councillor {
	height: 1px; 
	background: #000; 
	overflow: hidden;
	width:100%; 
	margin:10px 0 20px 0; 
	text-align:left;
}

.seperator-line-90pc {
	width: 90%;
	height: 1px; 
	background: #000; 
	overflow: hidden;
	margin: 10px 10px 10px 10px;
}

.seperator-line-100pc-left {
	width: 100%;
	height: 1px; 
	background: #000; 
	overflow: hidden;
	margin: 10px 10px 10px 0px;
}

.councillor-cont-1 {
	float:left; 
	padding:0 10px 0 0;
}

.councillor-cont-2 {
	margin:0 0 0 5px; 
	overflow:hidden;
	width: 100%;
	max-width:500px;
}

.councillor-image {
	float:right; 
	width:120px;
}

#footer-1 {
	width:96%;
	height:auto;
	border: 1px solid gray;
	background-color: #fff;
	margin: 20px auto 40px auto;
	padding: 8px 0px 4px 0px;
	text-align: center;
}

.footer-item {
	display:inline-block;
	vertical-align: top;
	line-height:20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
}

.footer-item a {
	text-decoration: none;

}

.sep-vert {
	width:1px;
	height:20px;
	display:inline-block;
	margin:0px 8px 0px 8px;
	background-color:#000;
}