/*  HSBC ATM Locator Stylesheet */
input {
	font-family: "Arial";
	font-size: 11px;
}
input, label, .button {
	cursor: pointer;
}

/* Page Styles */
#bg {
	margin: 0 auto;
	background: url(../images/main_back.gif) no-repeat;
	width: 925px;
	height: 600px;
	position: relative;
}
#wrap {
	width: 900px;
	height: 560px;
	position: relative;
	top: 15px;
	left: 10px;
}

#imgWrap {
	width: 200px;
	height: 200px;
	position: absolute;
	top: 15px;
	left: 10px;
}
/*
#branchImage{
	border:solid 2px;
	border-color:red;
}
*/

/* Search Box Styles */
#search2 {
	background: url(../images/bg/bg_search.jpg) no-repeat;
	width: 641px;
	height: 64px;
	position: absolute;
	top: 15px;
	left: 228px;
	z-index: 998;
}
#search2.advanced {
	left: 231px;
	background: url(../images/bg/bg_search_advanced.jpg) no-repeat;
	height: 94px;
}
#scope_form {
	margin:0;
	position: static;
	padding:0;
	clear: both;
}
#address_form {
	margin: 15px 0 2px 22px;
	float: left;
} * html #address_form { margin-left: 11px; }
#searchInput {
	width:430px;
	border: 1px solid #ccc;
	border-top: 2px solid #7c7c7c;
	border-right: 2px solid #c3c3c3;
	margin-right:0px;
	padding: 2px 0px 2px 8px; 
	cursor: text;
	float: left;
	height: 15px;
}
#searchInputLabel {
	font-weight: bold;
	padding: 3px 5px 0px 0px;
	margin:0;
	color: #333;
	font-family: Arial;
	font-size: 14px;
}
#searchInputLabel1 {
	font-weight: bold;
	padding: 3px 5px 0px 0px;
	margin:0;
	color: #333;
	font-family: Arial;
	font-size: 12px;
}
#searchInputLabel2 {
	font-weight: bold;
	padding: 3px 5px 0px 0px;
	margin:0;
	color: #333;
	font-family: Arial;
	font-size: 12px;
}
#searchInputLabel3 {
	font-weight: bold;
	padding: 3px 5px 0px 0px;
	margin:0;
	color: #333;
	font-family: Arial;
	font-size: 12px;
}
#searchInput1 {
    position:relative;
    left:-2px;
    top:-1px;
    font-size:11px;
    width:125px;
    line-height:18px;
}
#searchInput2 {
    position:relative;
    left:-2px;
    top:-1px;
    font-size:11px;
    width:280px;
    line-height:18px;
}
#location_type {
    position:relative;
    left:-2px;
    top:-1px;
    font-size:11px;
    width:153px;
    line-height:18px;
}
/*
* html #searchInputLabel {
	padding: 3px 15px 0 10px;
}
*/
#button_search {
	float: left;
	margin: 0px 0px 0px 0px;
} * html #button_search{
	margin: 0px 0px 0px -3px;
}
#search2 div.popup {
	position: absolute;
	top: 65px;
	left:130px;
	width: 266px;
	z-index: 999;
}
#search2 div.popup div.content {
	background: #fff; 
	width: 255px;
	padding-top: 5px;
	padding-left: 10px;
}
/*
.ie6 #search2 div.popup div.content {
	width: 266px;
}

.ie7 #search2 div.popup div.content {
	width: 266px;
}
*/
#search2 div.popup span.b {
	width: 266px;
	height: 6px; 
	background: url(../images/rounded/advanced_bottom.gif) no-repeat;
	display: block;
	clear: both;
}
#search2 div.popup h3 {
	font-size: 11px;
	color: #333;
	font-weight: normal;
	padding-top: 5px;
	margin: 0; 
}
#search2 div.popup h4 {
	margin: 0;
	font-size: 11px;
	color: #333;
	font-weight: bold; 
}
#search2 div.popup .row {
	width: 255px;
	float: left;
	padding-top: 0px;
	padding-bottom: 0px;
}
#search2 div.popup .row input {
	clear: left;
	margin-right: 2px;
	width: 13px;
}
#search2 div.popup .row input,
#search2 div.popup .row label {
	float: left;
	font-size: 12px;
}
#search2 div.popup .row label {
	width: 220px;
}
#scopeAll {
	clear: both;
}

#button_refine {
	float: right;
	cursor: pointer;
	margin-right: 7px;
}

/* Advanced Search Styles */
#advanced {
	width: 186px;
	height: 142px;
	background: transparent url(../images/bg/bg_advanced.jpg) no-repeat;
	color: #fff;
	font-size: 11px;
	position: absolute;
	left: 27px;
	top: 16px;
}
#advancedForm {
	margin: 13px;
	margin-right: 10px;
}
#advancedForm #hr {
	border-bottom: 1px solid #a2a2a2;
	font-size: 1px;
	height: 1px;
	margin: 5px 0;
}
a#button_advanced {
	clear: left;
	display: block;
	float: left;
	text-indent: -9999px;
	overflow: hidden;
	/*background: url(../images/bg/button_advanced.gif) no-repeat;*/
	width: 117px;
	height: 19px;
	margin-top: 10px;
	margin-left: 10px;
} * html a#button_advanced {margin-top: 10px; margin-left: 5px; }
/*
a#button_advanced:hover, #button_advanced.off {
	background: 0 1px url(../images/bg/button_advanced_down.gif) no-repeat;
}
*/
#scope {
	float: left;
	margin-left: 137px;
}* html #scope {
	margin-left: 69px ;
}
.landing #scope {
	margin-left: 125px;
}* html .landing #scope {
	margin-left: 64px;	
}
#scope label,
#scope input {
	float: left;
	margin-right: 5px;
	font-size: 11px;
	font-family: Arial;
}
#scope label {
	font-size: 11px;
	margin-right: 40px; 
	vertical-align: top;
	line-height: 170%;	
}
#filter_text {
	font-size: 11px;
	color: #444;
	margin: 12px 0 0 10px;
	float: left;
	width: 475px;
	height: 13px;
	overflow: hidden;
}
#filter_text span { 
	float: left;
}

/*
.ie6 #filter_text {
	width: 470px;
}.ie7 #filter_text {	
	width: 480px;
}
*/

/* Sidebar Results Styles */
#sidebar {
	float: left;
	width: 184px;
	height: 509px;
	background: #fff bottom left url(../images/bg/bg_results.jpg) no-repeat;
	border: 0;
	margin-left: 30px;
	margin-top: 19px;
}* html #sidebar { margin-left: 15px; }
#sidebar span.t {
	display: block;
	background: transparent url(../images/bg/bg_results_top.gif) no-repeat;
	width: 184px;
	height: 8px;
}
#results {
	margin-left: 3px;
	width: 177px;
	height: 493px;
	overflow: auto;
}
#results ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#results li {
	background: url(../images/bg/arrow_red.gif) 95% 25% no-repeat;
	border-bottom: 1px dotted #ccc;
	color: #464646;
	font-family: Arial;
	font-size: 11px;	
}* html #results li { background: url(../images/bg/arrow_red.gif) 95% 25% no-repeat; }
#results li a {
	color: #000000;
	display: block;
	padding: 5px 10px 5px 5px;
	width: 140px;
	font-family: Arial;
	font-size: 11px;
}
#results li.over, #results li.selected, 
#results li.over a, #results li.selected a, #results li a:hover {
	background: #ff0000 url(../images/bg/bg_results_over.gif) repeat-x;
	color: #ffffff !important;
	cursor: pointer;
}
#results h4 {
	margin: 0;
	padding: 0;
	font-size: 11px;
}
.landing #sidebar {
	background: none;
	position: relative;
	margin-top: 13px;
	margin-left: 25px;
}* html .landing #sidebar { margin-left: 12px; }

.landing #sidebar #how {
	font-family: Arial;	
	font-size: 11px;
	background: url(../images/bg/bg_howtosearch.jpg) no-repeat;
	width:161px;
	height:155px;
	padding: 40px 15px 0;
}
* html .landing #sidebar #how {
	width:191px;
	height:155px;
	padding: 40px 0px 0;
	font-size: 11px;
	font-family: Arial;	
}
.landing #sidebar #how p {
	font-size: 11px;
	font-family: Arial;
}* html .landing #sidebar #how p {padding: 0px 15px 0;}
.landing #sidebar #popular {
	background: url(../images/bg/bg_popular.jpg) no-repeat;
	width: 191px;
	height: 116px;
	padding: 0 15px;
}
.landing #sidebar #popular a {
	font-size: 11px;
	font-family: Arial;
	color: #fff;
}
.landing #sidebar #popular .col {
	float: left;
	width: 80px;
	padding-top: 45px;
} 
.landing #sidebar #city {
	margin-left: 4px;
	margin-top: 7px;
}


/* Map Styles */
#map_wrapper {
	position: absolute;
	top: 110px;
	left: 228px;
	height: 424px;
	width: 643px;
}
.map_overlay {
	position: absolute;
	display: block;
	z-index: 10;
	color: #fff;
}
#map_overlay_top {
	top: 0;
	left: 0;
	background: url(../images/bg/bg_overlay_top.gif) no-repeat;
	width: 643px;
	height: 14px;
}
#map_overlay_right {
	top: 14px;
	right: 0px;
	background: url(../images/bg/bg_overlay_right.gif) repeat-y;
	width: 7px;
	height: 397px;
}* html .overview #map_overlay_right {
	right: -1px; 
}* html #map_wrapper1 #map_overlay_right {
	right: 0px; 					/* this aligns the print details page in JS, detailed nonJS page*/
}
#map_overlay_bottom {
	bottom: 0;
	left: 0;
	background: url(../images/bg/bg_overlay_bottom.gif) no-repeat;
	width: 643px;
	height: 13px;
}
#map_overlay_left {
	top: 14px;
	left: 0;
	background: url(../images/bg/bg_overlay_left.gif) repeat-y;
	width: 9px;
	height: 397px;
}
* html #map_wrapper1 #map_overlay_left {
	height: 392px;
}
/*
*html #map_overlay_left {
	height: 394px;			/* Strict html doc type will solve the issue */
/*
} 
*/
#map_canvas, #mask {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 0;
	width: 617px; 
	
	height: 410px; 
	
	border: 1px solid black;
	background: #fff;
	
	padding-top: 0px;
  	padding-bottom: 0px;
  	padding-left: 5px;
  	padding-right: 5px;

	
}* html #map_canvas {
	width: 617px;
	height: 398px; 
}

#mask {
	z-index:5;
	width: 617px;
	height: 398px; 
}
#mask img {
	margin-top: 33%;
	margin-left: 33%; 
} *:first-child+html  #mask img {
	margin-top: 80%;
	margin-left: 90%; 
}
div.landing #map_wrapper {
	height: 444px;
	top: 90px;
	left: 225px;
}
div.landing #map_wrapper img {
	margin-left: 8px;
}
div.landing #map_wrapper #map_overlay_right, 
div.landing #map_wrapper #map_overlay_left {
	height: 418px;
}

/* Custom Info Window */
 
#info {
	position: absolute;
	background: url(../images/infowindow/bg.gif) top left no-repeat;
	cursor: default;
}

#imgDiv {
	position: absolute;
	cursor: default;
}

#info, #info div.wrap {
	height: 296px;
	width: 251px;
}

#imgDiv, #imgDiv div.imgWrap {
	height: 150px;
	width: 150px;
	border:medium !important;
	border-color:red;	
}* html #imgDiv, #imgDiv div.imgWrap {
	width: 118px;
}

#details .content {
	width: 251px;
}
#info div.wrap {
	position: relative;
	margin: 0;
	padding: 0;
	float: left;	
}
#imgDiv div.imgWrap {
	position: relative;
	margin: 0;
	padding: 0;
	float: left;
	border-color:red;
}
#info div.info_contents{
	/*overflow: auto;*/
	width:251px;
	height: 280px;
}
#info div.textData {
	margin: 0px 0px 0px 3px;
	font-size: 11px;
	font-family: "Arial";
}
#info div.textAddress {
	font-size: 11px;
	font-family: "Arial";
}
/*
#info div.info_contents #institution,
#info div.info_contents #landmark {
	font-size: 11px;
	font-family: "Arial";
}*/
#info div.clear{
	clear: both;
	height: 1px;
}
#info div.info_workhours{
	overflow: auto;
	height: 230px;
}
#info div.info_workhours th{
	font-family: "Arial";
	font-size: 12px;
	font-weight: bold;
}
#info div.service_header{
	font-family: "Arial";
	font-size: 14px;
	font-weight: bold;
	margin: 0px 0px 0px 19px;
} * html #info div.service_header{
	margin: 0px 0px 0px 15px;
}
#info div.info_workhours td{
	font-family: Arial;
	font-size: 12px;
}
#info div.info_services{
	height: 260px;  /* initially 174 */
	width:99%;
	overflow:auto;
}
#info div.info_services li, #details div.info_services li{
	font-family: "Arial";
	font-size: 12px;
}
#info div.info_links{
	width:251px;
	height:56px;
	/*background-color:#e3e3a3;*/
	border-top: 2px dotted #ccc;
	overflow:auto;
}
#info div.info_links a{
	font-family: "Arial";
	font-size: 11px;
	color: red;
}
#info a.close {
	position: absolute;
	top: 5px;
	right: 0;
	float: left;
	display: block;
	overflow: hidden;
	width: 10px;
	height: 10px;
	background: url(../images/infowindow/close.gif) 5px 5px no-repeat;
	text-indent: -9999px;
	display: block;
	padding: 5px;
	margin: 0 5px 0 0;
	float: right;
	cursor: pointer;
	cursor: hand;
} * html #info a.close {
	margin: 0 -5px 0 0;
	width: 15px;
	height: 15px;
}
#info div.note, #details div.note {
	font-size: 11px;
	font-family: Arial;
	background: url(../images/infowindow/note.gif) top left no-repeat;
	height: 34px;
	padding: 7px 30px 0 45px !important;
	color: #555555;
	margin-bottom: 3px;
}
span.hsbc_logo {
	width: 70px;
	height: 15px;
	overflow: hidden;
	text-indent: -9999px;
	display: block;
	background: url(../images/infowindow/hsbc.gif) top right repeat-x;
	margin-top: 5px !important;
	margin-bottom: 5px !important;
}

#info ul.nav {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 11px;
	font-weight: bold;
	position: absolute;
	top: -29px;
	left: 0;
}
#info .nav li {
	float: left;
	padding-left: 7px;	
	margin-right: 2px;
}
#info .nav li a {
	display: block;
	float: left;
	height: 28px;
	padding: 10px 15px 0 8px;
	font-weight: bold;
	color: #696969;
	cursor: hand;
	font-family: "Arial";
	font-size: 11px;
}
#info .nav li {
	background: url(../images/infowindow/tab_off_left.gif) top left no-repeat;
	height: 30px;
}
#info .nav li a {
	background: url(../images/infowindow/tab_off_right.gif) top right no-repeat;
	height: 30px;
}
#info .nav li.selected, #info .nav li.hover {
	background: url(../images/infowindow/tab_left.gif) top left no-repeat;
	height: 30px;
}
#info .nav li.selected a, #info .nav li.hover a {
	color: #666666;
	background: url(../images/infowindow/tab_right.gif) top right no-repeat;
	height: 30px;
}
#details div.head {
	margin-top: 10px;
}
#info div.head h4, #details div.head h4,
#info div.head h5, #details div.head h5,
span.hsbc_logo {
	margin: 0 30px 0 15px;
}
#info div.head h4, #details div.head h4 {
	font-size: 15px;
	font-family: "Arial";
	font-weight: bold;
}
#info div.head h5, #details div.head h5{
	font-family: "Arial";
	font-size: 12px;
	font-weight: normal;
	margin-right: 30px;
}
#details .workHours {
	font-family: "Arial";
	font-size: 11px;
}

#info .tel, #details .tel {
	font-family: "Arial";	
	font-size: 15px;
	font-weight: bold;
}
/*
#info .tel, #details .tel {
	background: url(../images/infowindow/icon_phone.gif) 2px 3px no-repeat;
	height: 15px;
}

#info .fax, #details .fax {
	margin-top: 4px !important;
	height: 22px;
	padding-top: 0;
	background: url(../images/infowindow/icon_fax.gif) 1px 2px no-repeat;
}
*/
#info ul.links {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-left: 18px;
}
#info ul.links a {
	cursor: pointer;
	cursor: hand;
	text-decoration: underline;
	color: #ff0000;
	font-size: 11px;
}
#info a.directions {
	overflow: hidden;
	text-indent: -9999px;
	height: 30px;
	display: block;
	/*background: url(../images/bg/en/driving_directions.gif) top left no-repeat;*/
	cursor: pointer;
	cursor: hand;
	margin-bottom: 4px;
}
#info ul, #details ul {
	margin-top: 0;
	margin-right: 5px;
	font-size: 12px;
	line-height: 130%;
}
#info div.services ul, #details div.services ul {
	list-style: url(../images/infowindow/bullet.gif);
}
#info div.container {
	overflow: auto;
	height: 180px;
	margin-bottom: 10px;
	margin-right: 5px;
}
#info h5, #details h5 {
	padding: 0;
	margin: 15px 0 5px 15px;
	font-size: 14px;
}
#info h6, #details h6 {
	margin: 0;
	margin-left: 28px;
	font-size: 12px;
}
#info div.hours ul, #details div.hours ul {
	list-style: none;
	margin-left: 28px;
	padding-left: 0;
}
#info div.hours ul li, #details div.hours ul li {
	clear: both;
	text-align: center;
}
#info div.hours ul span, #details div.hours ul span {
	width: 23px;
	display: block;
	float: left;
}

/* Directions Page */

#directions_page {
	width: 980px; 
	margin:0 auto;
	min-height:100%;
	height:auto; 
	padding-bottom: 40px;
} * html #directions_page { padding: 0px 0px 0px 35px; height: 100%; }

#directions_page #place_info{
	height: auto;
}

#directions_page #map_canvas {
	width:520px;
	height:480px; 
}
#directions_page #wrap { 
	margin:0; 
	padding:0; 
	width:900px; 
	margin:0 auto; 
	position:static;
	min-height:100%;
	height:auto;
} * html #directions_page #wrap { height: 100%; }
#content { 
	width:902px; 
	margin: 0 auto;
	background: url('../images/rounded/print_mid.gif') repeat-y; 
}
#content span.t { 
	display:block; 
	height:17px; 
	background: url('../images/rounded/print_top.gif');
}
#content span.b {
	clear:both;
	display:block;
	height:22px; 
	background: url('../images/rounded/print_bottom.gif');
}
#details .content{ 
	float: left; 
}
#details { 
	width:825px; 
	margin: 0 auto; 
	padding: 0; 
	background:#fff url('../images/rounded/print_content_top.gif') no-repeat; 
	padding-top: 7px;
	overflow: auto;
	height: 390px;
}
#directions_page #details{
	height: auto;
}*:first-child+html #directions_page #details{
	overflow:visible;
} 
#details h1 {
	color: #ff1111;
	font-size: 16px;
	margin: 10px 0 0 20px;
	padding: 0;
}
#details span.b { 
	clear:both;
	width:825px;
	height:8px;
	background: bottom url('../images/rounded/print_content_bottom.gif') no-repeat; 
}
#directions {
	margin: 12px 0 0 38px;
	padding: 0;
	width: 283px;
	background: #fff url('../images/rounded/print_results_top.gif') no-repeat; 
	float: left;
} * html #directions { margin-left: 19px; }

#directions span.b {
	width: 283px;
	height: 8px;
	background: #fff bottom url('../images/rounded/print_results_bottom.gif') no-repeat; 
}
#directions_page #details .content {
	width: 270px;
}
#directions_page #map_wrapper {
	position: relative;
	display: block;
	top:0;
	left:0;
	width: 545px;
	height: 508px;
	float: left;
	margin-top: 7px;
	margin-left: 1px;
}
#directions_page #map_overlay_top {
	background-image: url('../images/rounded/map_overlay_top.gif'); 
}
#directions_page #map_overlay_right, 
#directions_page #map_overlay_left {
	height: 482px;
}
#directions_page #map_overlay_bottom {
	background: bottom url('../images/rounded/map_overlay_bottom.gif'); 
	width: 545px;
}
#directions_page #mask {
	width: 520px;
	height: 480px;
}

#directions .head {
	margin: 10px;
}

#directions input {
	margin-top: 4px;
	width: 241px;
	border: 1px solid #ccc;
	border-top: 2px solid #7c7c7c;
	border-right: 2px solid #c3c3c3;
	padding: 2px;
	margin-bottom: 3px;
}
#directions .hr { border-bottom: 1px dotted #ccc; margin: 25px 5px 0px 0px; clear:left;}


/* Non JS */
.detail_page #map_overlay_top {
	background-image: url(../images/bg/bg_overlay_top_nonjs.gif);
	width: 839px;
}
.detail_page #map_overlay_bottom {
	background-image: url(../images/bg/bg_overlay_bottom_nonjs.gif);
	width: 841px;
}
.detail_page #sidebar {
	background-image: url(../images/bg/bg_results_nonjs.gif);
	height: 60px;
}
.detail_page #results {
	height: 50px;
} * html .detail_page #results { height: 33px; }
.detail_page #map_wrapper {
	left: 26px;
	top: 85px;
	width: 840px;
}
.detail_page #map_wrapper1 {
	position: absolute;
	top: 110px;
	left: 228px;
	height: 424px;
	width: 643px;
	left: 26px;
	top: 65px;
	width: 840px;
}
.detail_page #map_overlay_top {
	background-image: url(../images/bg/bg_overlay_top_nonjs.gif);
	width: 839px;
}
.detail_page #map_overlay_bottom {
	background-image: url(../images/bg/bg_overlay_bottom_nonjs.gif);
	width: 841px;
}
                                           
.detail_page #map_canvas {
	width: 817px;
} * html .detail_page #map_canvas {width: 817px; height: 398px; } /* changing the width will bring the image down in the detail non JS */
.detail_page #details .content {
	float: none;
	width: 280px;
}
.detail_page #details {
	background: none;
	padding-top: 1px;
	float: left;
	width: 300px;
}
#addressform {
	margin: 6px 5px 0px 11px;
	float: left;
}* html #addressform { margin-left: 5px; }
.landing #addressform {
	margin-top: 6px;
}
#search {
	background: url(../images/bg/bg_search.jpg) no-repeat;
	width: 641px;
	height: 64px;
	position: absolute;
	top: 15px;
	left: 228px;
	z-index: 998;
}
#search.advanced {
	left: 231px;
	background: url(../images/bg/bg_search_advanced.jpg) no-repeat;
	height: 94px;
}
#results #back {
	display: block;
	margin: 15px 0 0 25px;
	width: 120px;
} * html #results #back { margin-top: 8px; }
#results #back img {border: 0;}
#button_refine2 {
	float: left;
	cursor: pointer;
	margin-left: 7px;
}
.overview #map_canvas {
	width: 617px;
}* html .overview #map_canvas {width: 617px; height: 398px; text-align: center; }
#map_canvas #map_dev_area {
	width:510px;
	height:397px;
	margin:0px 0px 0px 5px;
	float:left;
}* html #map_canvas #map_dev_area {
	height:390px;
}
#text_content {
	margin: 0px 0px 0px 5px;
	font-size: 12px;
	font-family: "Arial";
}
#content_red {
	font-size: 11px;
	font-family: "Arial";
	color: red;
}

#text_head {
	margin: 0px 0px 0px 15px;
	font-size: 14px;
	font-family: "Arial";
	font-weight: bold;
}
#blank_space {
	margin: 8px 8px 8px 8px;
}
#route{
	padding: 5px;
	height:372px;
	overflow: auto;
	font-size: 12px;
	font-family: "Arial";	
} * html #route {
	height:367px;
}
.advancedsearch label {
	margin: 5px;
	padding: 0;
	font-size: 14px;
	font-family: "Arial";	
}
.advancedsearch input {
	clear: both;
	margin: 0;
	margin-top: 15px;
} *:first-child+html .advancedsearch input {
		margin-top: 8px;
} * html .advancedsearch input {
		margin-top: 8px;
}
#mainLogo {
	margin: 0 auto;
	width: 900px;
	height: 36px;
	position: relative;	
}
#text_content .hImage{
	color:red;
	width:90%;
}