@font-face
{
	font-family: happo;
	src: url('../style/raleway/Raleway-Regular.ttf');
}

body
{
	padding: 0;
	margin: 0;
}

#happo_logo
{
	float:none !important;
	margin:5px 0 10px 5px !important;
	border:0 !important;
	width:100% !important;
	height:41px !important;
}

#happo_logo img { width:190px !important; height:32px !important; }

/*commented out by ZZ on 9 june 2017 */
/*#generalWrapper, #detailWrapper { margin-left:5px; }	/* just enough to move its left edge away from the mobile sliding menu */



/* navigation ====================================*/

#main_body_container { margin-top:0px !important; }
#submenu_container { margin-top:30px !important; }
#MobiMenuBarLeft { display:block !important; }
#MobiMenuBarRight { display:block !important; }

#MobiMenuBar
{
	position: fixed;
	top: 0;
	z-index:3000;
	background-color: #d54527;
	border-bottom: 2px solid #d59f94;
	box-shadow: 0 4px 5px rgba(0,0,0,0.2); /* H offset, V offset, [opt] blur distance, [opt] shadow spread distance, [opt] color value, [opt] ‘inset‘ keyword */
	width:100%;
	cursor: pointer;

	background: -moz-linear-gradient(90deg, #d54527, #d59f94 99%); 	/* FF6+ */
	background: -webkit-gradient(linear, 0 bottom, 0 top, color-stop(0%,#d54527), color-stop(99%,#d59f94)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(bottom, #d54527 0%, #d59f94 99%); /* Chrome10+,Safari5.1+ */	
	background: -o-linear-gradient(bottom, #d54527 0%, #d59f94 99%) ; /* Opera 11.10+ */	
	background: -ms-linear-gradient(bottom,  #d54527 0%, #d59f94 99%); /* IE10+ */
	background: linear-gradient(bottom,  #d54527 0%, #d59f94 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d59f94', endColorstr='#d54527',GradientType=0 ); /* IE6-9 */
	-pie-background: linear-gradient(bottom,  #d54527 0%, #d59f94 99%);
	behavior: url(PIE/PIE.htc);
}

/*#MobiMenuBar:hover #mainMenuMobi,
#MobiMenuBar.hover #mainMenuMobi /* This line is required for IE 6 and below */
/*{
	display:block;
	right:0; 

	-webkit-transition: all 600ms ease;
	-moz-transition: all 600ms ease;
	-ms-transition: all 600ms ease;
	-o-transition: all 600ms ease;
	transition: all 600ms ease;

}
*/

#mainMenuMobi
{
	display:none;
	position: fixed;
	top: 28px;
	bottom: 0;
	right:0; 
	background-color: #d54527;
	border-left: 5px solid #d5715d;
	z-index:4000; /* This makes the dropdown menus appear above the page content below */	
	width:220px;
}


/*nav:hover { left: 0; } */


/* menu ====================================*/

#mainMenuMobi ul
{
	width: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align:left;
}

.mainMenuLI		/*#mainMenuMobi ul li*/
{
	text-align:left;
	padding:5px 0 5px 0;
	width:100%;
	background-color:#d5715d;
	border-top:1px solid #d59f94; 
	border-bottom:2px solid #d54527; 
}

.mainMenuLI	a	/*#mainMenuMobi ul li a*/
{
	font-family: happo, Geneva, Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	text-transform: uppercase;
	color: #fff;	/*e7d2d0*/
	text-decoration: none;
	font-weight: normal;
	font-style: normal;
	display:block;
	vertical-align:middle;
	line-height: 1.1em;
	text-indent: 5px;
	text-align:left;
	padding:5px;
}

.mainMenuLI	a:hover, .mainMenuLI a:focus			/*#mainMenuMobi ul li a:hover, #mainMenuMobi ul li a:focus*/
{
	color: #fff;
	border:0px solid #e7b0ac; 
	text-shadow: 0 0 4px #fff;
}

.mainMenuLI a.active, .mainMenuLI a.active:hover	/*#mainMenuMobi ul li a.active, #mainMenuMobi ul li a.active:hover*/
{
	color:#fff;
	font-weight: bold;
	font-size: 1.2em;	
	font-weight:normal;
	border:0px solid #e6e6de; 
}


/* submenu ====================================*/

#mainMenuMobi ul ul
{
	position:relative;
	margin: 0;
	display:none;
	top:0;
	width:65%; /* width of the drop-down menus */
	text-align: left;
}

#mainMenuMobi ul ul li
{
   margin:0; /* Reset the 1px margin from the top menu */
   width:100%;
   text-align: left;

	background-color:#d5715d;
	border-top:1px solid #d59f94; 
}

#mainMenuMobi ul ul li a,
#mainMenuMobi ul li.active li a,
#mainMenuMobi ul li:hover ul li a,
#mainMenuMobi ul li.hover ul li a 	 /* This line is required for IE 6 and below */
{
	font-family: happo, Geneva, Verdana, Arial, Helvetica, sans-serif;
	font-size:1em;
	font-weight:normal; /* resets the bold set for the top level menu items */
	color:#dadada;
	text-decoration: none;
	font-style: normal;
	display:block;
	vertical-align:middle;

	line-height:1.1em; /* overwrite line-height value from top menu */
	text-transform: capitalize;   
	padding:5px;
	border-radius:0px;
	width:100%;
}

#mainMenuMobi ul ul li a:hover,
#mainMenuMobi ul li.active ul li a:hover,
#mainMenuMobi ul li:hover ul li a:hover,
#mainMenuMobi ul li.hover ul li a:hover 	/* This line is required for IE 6 and below */
{ 
   background:#eee; /* Sub menu items background colour */
   color:#444;
}

/* Flip the last submenu so it stays within the page */
#mainMenuMobi ul ul.last 
{
   left:auto; /* reset left:0; value */
   right:0; /* Set right value instead */
}

/* Make the sub menus appear on hover */
/* Modified  by ZZ on 27 Feb to fix mobile menu */
/*#mainMenuMobi ul li:hover ul,
#mainMenuMobi ul li.hover ul 	 /* This line is required for IE 6 and below */
/*{
	display: block;
}
*/

/* Added by ZZ to adjust template width when opened on a mobile */
/* Added by ZZ to adjust template width when opened on a mobile */
#template_main_table{
	width: 90% !important;

}

/* Basic Template */
#template_main_table .link2{
	border-width:1px !important;

}

#template_main_table  #bigImg, #template_main_table  .bigImg
{
		width:100%;
}

#template_main_table  .smallFont
{
		font-size:8px;
}

#template_main_table  .scrollX
{
	overflow-x:auto;
}

#web_subject { width: 90% !important;}

/*#survey_form_wrapper{ width:100% !important;}*/ /* commented out by ZZ on 7 June 2017*/

#wallOuterWrapper { float:left;}