/* @name:		Layout
 * @site:		ME Bank
 * @author:		RBurnie, Hugeobject, http://www.hugeobject.com.au
 */
/* = DEV TESTING = _______________________________________________________ */
/*
div#header { background:#333 !important; }
div#main_nav { background:#666 !important; }
div#nav_local { background:#999 !important; }
div#content { background:green !important; }
div#main { background:yellow !important; }
div#sub_1 { background:red !important; }
div#sub_2 { background:blue !important; }
div#footer { background:pink !important; }
*/

/* = RESET ELEMENTS = ____________________________________________________ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
button {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
hr { display: none; } /* hr for content defined in typo.css */
/* = CLEARFIX CLASS = */
/*
 *	Add class "clearfix" to custom elements that require cross browser clearing
 *
 *	NB: Binding the following elements with clearfix:
 * 		div#header, div#ancillary, div#content, div#footer, div#quick_links
 */
.clearfix:after,
div#header:after,
div#ancillary:after,
div#content:after,
div#footer:after,
div#footer_quick_links:after,
div.two-cols-inner:after,
div.three-cols-inner:after,
div.snippet div.content:after,
div#extra_content:after {  
    content: ".";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    line-height: 0;  
    height: 0;  
}  
.clearfix,
div#header,
div#ancillary,
div#content,
div#footer,
div#footer_quick_links,
div.two-cols-inner,
div.three-cols-inner,
div.snippet div.content,
div#extra_content {  
    display: inline-block;  
} 
/* NB: html tag must have a xmlns attribute */
html[xmlns] .clearfix,
html[xmlns] div#header,
html[xmlns] div#ancillary,
html[xmlns] div#content,
html[xmlns] div#footer,
html[xmlns] div#footer_quick_links,
html[xmlns] div.two-cols-inner,
html[xmlns] div.three-cols-inner,
html[xmlns] div.snippet div.content,
html[xmlns] div#extra_content {  
    display: block;  
}  
* html .clearfix,
* html div#header,
* html div#ancillary,
* html div#content,
* html div#footer,
* html div#footer_quick_links,
* html div.two-cols-inner,
* html div.three-cols-inner,
* html div.snippet div.content,
* html div#extra_content {  
    height: 1%;  
}

.hide {
	width: 0;
	height: 0;
	line-height: 0;
	font-size: 0;
	position: absolute;
	left: -999em;
}
/* _______________________________________________________________________ */
body {
	line-height: 1em;
	font: 0.8em Arial, Helvetica, sans-serif;
	color: #717171;
	/*color: #184062; refresh*/
	/*background: #eff5f8; refresh*/
	background: transparent url(../images/nav/body_background.png) top left repeat-x !important;
}
/* divider class for bar between header and content and content and footer */
div.divider {
	width: 930px;
	margin: 0 auto;
}
div.divider img {
	display: block;
	width: 930px;
	height: 4px;
	margin: 0 auto;
	background: transparent url(../images/corners/divider.png) top left repeat-x;
	line-height: 0;
	font-size: 0;
}
/* = HEADER = ____________________________________________________________ */
div#header {
	width: 930px;
	margin: 0 auto;
	padding: 0;
	/*_padding-bottom: 1px;*/
	background: transparent url(../images/nav/header_background.png) repeat-x;
	position: relative;
	margin-bottom: 9px;
}
div#header img.spacer {
   height: 129px;
}
div#header img.bottom-left,
div#header img.bottom-right {
   position: absolute;
   top: 116px; /* 129-13 */
   width: 14px;
   height: 13px;
	margin: 0;
	padding: 0;
}
div#header img.bottom-left {
   left: 0;
}
div#header img.bottom-right {
   right: 0;
}
div#header h1 {
   position: absolute;
   left: 18px;
	top: 37px;
	margin: 0;
	padding: 0;
}
div#header h1 a {/* ME logo */
   position: relative;
	display: block;
	width: 165px;
	height: 85px;
	margin: 0;
	padding: 0;
	text-indent: -999em;
	background: transparent url(../images/nav/mebank_logo.png) no-repeat;/* NB: bg color only so if images off the block is visible (light blue) */
}
/*
 * NB: div#header div.ancillary ul
 *	Defined in nav.css
 *  - floated right befor p.call and p.request
 */
div#ancillary {
   font-size: 0.9em;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
	margin: 7px 0 0 0;
	color: #325481;
}
/* = NAVIGATION WRAPPERS = ----------------------------------------------- */
/* Basic positioning 
   NB: div#nav_top DOM path: 	   div#header > div#nav_top */
/*div#nav_top { Viv
	width: 930px;
	height: 83px;
	background: #c2cd23 url(../images/blank.gif);
}*/
/* NB: div#nav_main DOM path: 	   div#header > div#nav_main */
div#nav_main {
   position: absolute;
   top: 82px;
   left: 277px;
	width: 679px;
	height: 100%;
}
/* NB: div#nav_local DOM path: 	   div#content > div#sub_1 > div#nav_local */
div#nav_local {
	
}
/* = CONTENT = ___________________________________________________________ */
/*
 * Based on: http://www.positioniseverything.net/articles/onetruelayout/
 * Equal height columns NOT used (design doesnt required it anyway)
 */
div#content {
	width: 930px;
	padding: 0 0 4px 0;
	margin: 0 auto 0 auto;
	position: relative;
}
body.home div#content {
	padding-bottom: 0.5em;
}
/* == MAIN == ------------------------------------------------------------ */
div#main {
	float: left;
	width: 495px;
	min-height: 425px;
	_height: 415px;
	margin: 0 10px 0 205px;
	padding: 0;
	display: inline; /* IE6 */
	background: #fff;
}
div[id=main] { display: block; }

body.home div#main {
	min-height: 300px;_height: 300px;
	/*margin-left: 195px;*/
	margin: 0;
	padding: 0;
}
div.full-width div#main {
	width: 930px;
	margin-left: 0;
}
/* These shouldn't be rendered but just in case force hide */
div.full-width div#sub_1,
div.full-width div#sub_2 {
	display: none;
}
/* === INNER COLUMNS === .................................................
   typography in typo.css grouped near their parent rules
   NB:	These classes are bound with clearfix at top of file
   
   ==== TWO-COLS INNER COLUMNS ==== ``````````````````````````````````````
	|				494				  |		div#main	NB: actual avail width 495
	|		247		 |		247		  |		max inner content width 245
*/
div.two-cols-inner {
	width: 495px;
	/*background: transparent url(../images/1px-faux-col-border.gif) 254px 0  repeat-y; refresh*/
	margin-bottom: 2em;
}
div.two-cols-inner div.col {
	width: 247px;
	float: left;
}
/*div.two-cols-inner div.col-1 {
	width: 247px;
	border-right: 1px solid #e1e6eb;
} refresh*/
/*
div.two-cols-inner div.col-2 {
	
}
*/
/* ==== TWO-COLS INNER COLUMNS (in two-cols outer layout) ==== 
	|				700				  |		
	|		350		 |		350		  |		max inner content width 349
*/
div#content.two-cols div.two-cols-inner {
	width: 700px;
	padding: 0;
	background: transparent url(../images/1px-faux-col-border.gif) 353px 0  repeat-y;
}
div#content.two-cols div.two-cols-inner div.col {
	width: 350px;
	float: left;
}
div#content.two-cols div.two-cols-inner div.col-1 {
	width: 349px;
	border-right: 1px solid #e1e6eb;
}
/*
div#content.two-cols div.two-cols-inner div.col-2 {
	
}
*/

div.two-cols-inner.plain { background-image: none !important; }
div.two-cols-inner.plain div.col { border-color: #fff !important; }

/* ==== THREE-COLS INNER COLUMNS ==== ```````````
	|				495				  |		div#main
	| 15 |			465			 | 15 |
	|	 |	154  |  154(1)|154(1)|    |		(1) - 160(content width) + 1(border-left)
*/
div.three-cols-inner {
	width: 465px; /* 495 - 30(padding l/r) */
	padding: 0 15px;
	margin-bottom: 2em;
	background: transparent url(../images/faux-three-cols.gif) top center repeat-y;
}
div.three-cols-inner div.col {
	width: 154px;
	float: left;
	border-left: 1px solid #e1e6eb;
	/* NB: faux col image applied to parent to extend beyond element height */
}
div.three-cols-inner div.col-1 {
	width: 154px;
	border-left: 0;
}

div.three-cols-inner.plain { background-image: none !important; }
div.three-cols-inner.plain div.col { border-color: #fff !important; }
/*
div.three-cols-inner col-2 {
		
}
div.three-cols-inner col-3 {
		
}
*/
/* ==== THREE-COLS INNER COLUMNS (in two-cols outer layout) ==== ``````````````` 
	|				708				  |		div#main
	| 15 |			678			 | 15 |
	|	 |	226  |  225(1)|225(1)|    |		(1) - 160(content width) + 1(border-left)
*/
/*
	NB: inherits from default above
*/
div#content.two-cols div.three-cols-inner {
	width: 670px;/* 700 - 30(padding l/r) */
	background: transparent url(../images/faux-three-cols-large.gif) top center repeat-y;
}
div#content.two-cols div.three-cols-inner div.col {
	width: 225px;
}
div#content.two-cols div.three-cols-inner div.col-1 {
	width: 226px;
	border: 0;
}



/* == SUB_1 == ----------------------------------------------------------- */
div#sub_1 {
	float: left;
	width: 195px;
	margin-left: -710px;
	/*padding-top: 1px; refresh*/
}
/* == SUB_2 == ----------------------------------------------------------- */
div#sub_2 {
	float: left;
	width: 220px;
}
/* == TWO-COLS == ........................................................ */
div#content.two-cols div#main {
	width: 700px; /* 495 + 195(sub_1c width) */
	margin-left: 0;
	margin-right: 10px;
}
div#content.two-cols div#sub_1 {
	display: none;
}
/*
	NB: four-cols special for home and two-cols layout
		requires <div id="extra_content" class="four-cols"> after div#content !!!
*/
div#extra_content {
	width: 930px;
	margin: 0 auto;
	padding: 10px 0 90px 0;
	background: #fff;
}
div#extra_content.four-cols div.col {
	width: 236px;
	float: left;
	/*border-left: 1px solid #e1e6eb;*/
	/* NB: faux col image applied to parent to extend beyond element height */
}
div#extra_content.four-cols div.col-1 {
	/*border-left: 0;*/
}
div#extra_content.four-cols div.col-4 {
	width: 220px;
	/*border-left: 0;*/margin-left: 2px;
}
div#extra_content.four-cols div.col-4 div.snippet-220 div.content {
	min-height: 136px;_height: 136px;
}
/* = FOOTER = ____________________________________________________________ */
div#footer {
	width: 930px;
	margin: 0 auto;
	padding: 0;
}
/* == QUICK_NAV == -------------------------------------------------------
 * Full rules for quick_nav and div#footer > ul in nav.css
 */ 
div#homepage_footer {
   position: relative;
   top: -85px; /* fix to allow for correct shading */
}
div#footer_quick_links {
	background: transparent url(../images/nav/sitemap_background.png) top left repeat-x !important;
}

/* = SNIPPETS = __________________________________________________________ 
snippets typography in typo.css grouped near their parent rules
ex.
div.snippet h2 would be under HEADINGS > HEADINGS SPECIAL
*/
div.snippet {
	width: 210px;
	margin: 0 auto;
	background: #fff url(../images/nav/subpage_tile_background.png) top left repeat-x;
}
div.snippet div.content {
	overflow: hidden;
	background: transparent;
}
div.snippet div.blurb {
	padding-bottom: 1em;
}
div.snippet div.blurb p {
	padding-bottom: 0.5em;
	padding-right: 19px;
}
/*
div.snippet div.wrapper-1 {
	padding-top: 5px;
	background: transparent url(../images/corners/snippet-top.gif) top left no-repeat;
}
div.snippet div.wrapper-2 {
	padding-bottom: 5px;
	background: transparent url(../images/corners/snippet-btm.gif) bottom left no-repeat;
}*/
div.snippet-large {
	width: 483px;
	margin: 2px auto;
	background: #fff url(../images/corners/snippet-large-y.gif) repeat-y;
}
div.snippet-large div.wrapper-1 {
	padding-top: 5px;
	background: transparent url(../images/corners/snippet-large-top.gif) top left no-repeat;
}
div.snippet-large div.wrapper-2 {
	padding-bottom: 5px;
	background: transparent url(../images/corners/snippet-large-btm.gif) bottom left no-repeat;
}
/* SNIPPET-220 
	NB: designed specifically for the home page  - would also work in other layouts depending on implementation
*/
div.snippet-220 {
	width: 220px;
	margin: 2px auto;
	background: #fff url(../images/corners/snippet-220-y.gif) repeat-y;
}
div.snippet-220 div.wrapper-1 {
	padding-top: 5px;
	background: transparent url(../images/corners/snippet-220-top.gif) top left no-repeat;
}
div.snippet-220 div.wrapper-2 {
	padding-bottom: 5px;
	background: transparent url(../images/corners/snippet-220-btm.gif) bottom left no-repeat;
}
div.snippet-large div.content,
div.snippet-220 div.content {
	margin: 0 5px;
	overflow: hidden;
	background: transparent;
}
div.snippet-large.blue div.content,
div.snippet-220.blue div.content {
	background: #f0f4f8 url(../images/corners/snippet-bg-blue.gif) bottom left repeat-x;
}
/*
[rb]	Only using class name becuase were only showing hover if a child link is hovered
		not the actula snippet
div.snippet.blue:hover div.content,
div.snippet.blue.hover div.content,
div.snippet-large.blue:hover div.content,
div.snippet-large.blue.hover div.content,
div.snippet-220.blue:hover div.content,
div.snippet-220.blue.hover div.content
*/
div.snippet.blue.hover div.content,
div.snippet-large.blue.hover div.content,
div.snippet-220.blue.hover div.content {
	background: #e0ebf5 url(../images/corners/snippet-bg-blue-hover.gif) bottom left repeat-x;
}
div.snippet-220.solid-blue div.content {
	background: #eaf0f5;
}
div.snippet-220.tile-blue div.content {
   background: #eaf0f5 url(../images/corners/homepage_tile_bg.png) top left no-repeat;
}
div.snippet-220.tile-blue div.content h2 {
	margin: 9px 0 0 3px;
}
/* == IMAGE ONLY SNIPPETS == 
Omit div.content and have <img> or imag tag wrapped in <a>
*/
div.snippet.image {
   width: 230px;
   background: none;
   margin: 0 auto;
}
div.snippet-large.image div.wrapper-2 {
	padding-bottom: 5px;
}
div.snippet-220.image div.wrapper-2 {
	padding-bottom: 2px;
}
div.snippet-large.image img,
div.snippet-220.image img {
	margin-left: 5px;
}

/* = BLOCKQUOTES = 
	Very simmilar to snippet large
*/
blockquote {
	width: 491px;
	margin: 2px auto 1em auto;
	background: #fff url(../images/corners/blockquote-y.gif) repeat-y;
}
blockquote div.wrapper-1 {
	padding-top: 10px;
	background: transparent url(../images/corners/blockquote-top.gif) top left no-repeat;
}
blockquote div.wrapper-2 {
	padding-bottom: 10px;
	background: transparent url(../images/corners/blockquote-btm.gif) bottom left no-repeat;
}
/* == TIPS (for footnotes) == 
These element only exist via JS enhancement
*/
div.tips {
	position: absolute;
	top:0;
	left:0;
	z-index:10000;
	width: 340px;
}
div.tips div.top {
	height: 5px;
	background: transparent url(../images/corners/tips-top.png) top left no-repeat;
	font-size: 0; /*ie6 height fix */
	_background-image: url(../images/corners/tips-top.gif);/* move to ie6 & 7 */
}
div.tips div.btm {
	height: 5px;
	background: transparent url(../images/corners/tips-btm.png) bottom left no-repeat;
	font-size: 0; /*ie6 height fix */
	_background-image: url(../images/corners/tips-btm.gif);/* move to ie6 & 7 */
}
div.tips div.content {
	margin: 0;
	background: transparent url(../images/corners/tips-y.png) repeat-y;
	_background-image: url(../images/corners/tips-y.gif);/* move to ie6 & 7 */
}
/* = BANNERS = _______________________________________________________
flash-banner expected in div#main
banner size: 513*190 ( 160(content) + 30(navigation bar) )
*/
div.banner {
	width: 495px;
	height: 160px;
	position:relative;
	/* Set background-image in the style attribute on a per page basis if applicable */
	background-position: top center;
	background-repeat: no-repeat;
	margin-bottom: 2em;
}
div.banner.small{
	height: 54px;
}
div.flash-banner {
	width: 495px;
	height: 190px;
	position:relative;
	/* Set background-image in the style attribute on a per page basis */
	background-position: top center;
	background-repeat: no-repeat;
	margin-bottom: 2em;
}
body.home div.flash-banner {
	margin-bottom: 0;
}
/*
flash-banner expected in div#main when div#content.two-cols
banner size: 513*300 ( 270(content) + 30(navigation bar) )
*/
div#content.two-cols div.banner {
	width: 700px;
	height: 300px;
	margin-left: -1px;
}
div#content.two-cols div.flash-banner {
	width: 700px;
	height: 330px;
	margin-left: -1px;
}
div#content.two-cols div.banner.small {
	height: 54px;
}

/* = TILES = _______________________________________________________
specifically for three tiles on homepage
tile size: 210*136
*/
div#content.two-cols div.tiles {
   width: 700px;
   height: 239px;
   padding: 1px 0;
	background: transparent url(../images/nav/homepage_main_background.png) top left repeat-x;
}
div#content.two-cols div.tiles div.tile {
   float: left;
   margin-right: 19px;
}
div#content.two-cols div.tiles div.tile.tile3 {
   margin-right: 0;
}

/* = OTHER = _______________________________________________________
flash-banner expected in div#main
banner size: 513*190 ( 160(content) + 30(navigation bar) )
*/
div#sub_1 div.testimonial {
	margin-bottom: 4px;
}
div#sub_1 div.testimonial h2 {
	margin: 0;
	padding: 0.2em 10px 0.2em 12px;
	font-size: 1em;
	background: #194276 url(../images/corners/sub-1-top-dark.gif) top left no-repeat;
	color: #fff;
}
div#sub_1 div.testimonial div.wrapper {
	border: 1px solid #E1E6EB;
	border-top: 0;
	margin-top: 1px;
	font-size: 0.85em;
}
div#sub_1 div.testimonial div.person img {
	width: 78px;
	height: 78px;
	margin: 10px 15px;
	float: left;
}
div#sub_1 div.testimonial div.person h3 {
	font-size: 1em;
	margin-top: 0;
	padding-top: 10px;
}
/* elements created via MooPrompt class */
div#cbOverlay {
	background: #fbfbfb;
}
div.cbBox div.close {
	width: 16px;
	height: 16px;
	border: 1px solid #00427A;
	text-indent: -999em;
	background: #fff url(../images/icons/cross.png) no-repeat;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
}