/* @name:		Typography
 * @site:		ME Bank
 * @author:		RBurnie, Hugeobject, http://www.hugeobject.com.au
 */
 
/* = HEADINGS = _____________________________________________________________ */
h1 {
	margin: 1em 18px; /* 20 - 1(div#main padding l/r) */
	padding: 0 0 8px 2px;
	font-size: 1.75em;
	font-weight: normal;
	color: #062f66;
	/*color: #186d18; refresh*/
}
h2 {
	margin: 0.25em 0;
	padding: 0 19px; /* 20 - 1(div#main padding l/r) */
	font-size: 1.3em;
	font-weight: normal;
	color: #00427a; /*refresh*/
}
h3 {
	margin: 0.6em 0;
	padding: 0 19px; /* 20 - 1(div#main padding l/r) */
	font-size: 1.2em;
	font-weight: normal;
	color: #4672ac;
	/*color: #00427a; refresh*/
}
h4 {
	margin: 0.25em 0;
	padding: 0 19px; /* 20 - 1(div#main padding l/r) */
	font-size: 1em;
	font-weight: normal;
	color: #4672ac;
	/*color: #00427a; refresh*/
}
h5 {
	margin: 0.35em 0;
	padding: 0 19px; /* 20 - 1(div#main padding l/r) */
	font-size: 1em;
	font-weight: bold;
	color: #005CAB;
}
h6 {
	margin: 0.35em 0;
	padding: 0 19px; /* 20 - 1(div#main padding l/r) */
	font-size: 0.9em;
	font-weight: bold;
	color: #005CAB;
}
/* == HEADINGS WHICH ARE ALSO LINKS (except ie6) == --------------------------- */
h2.link {
	text-decoration: none;
}
h2.link:hover {
	color: #00a886;
}
/* == HEADINGS FOLLOWING OTHER ELEMENTS (except ie6) == ----------------------- */
h1+h2 {
	margin-top: -1em;
}
h1+h3 {
	margin-top: -0.2em;
}
p+h2, ul+h2,
p+h3, ul+h3,
p+h4, ul+h4,
p+h5, ul+h5,
p+h6, ul+h6 {
	margin-top: 1.2em;
}
/* == SPECIAL HEADING CLASSES == */
h2.date,
div.search-result h2 {
	font-size: 0.85em;
	font-weight: bold;
	border-bottom: 1px solid #dfecf5;
	padding: 0.3em 0;
	margin: 0 19px 0.8em 19px;
}

/* == HEADINGS IN INNER LAYOUTS == -------------------------------------------- */
div.two-cols-inner h1 { margin-top: 0; }

div.three-cols-inner h2 {
	padding: 0.3em 8px;
}

/* === TAB HEADINGS  === `````````````````````````````````````````````````````` */
div.two-cols-inner h2.tab,
div.three-cols-inner h2.tab {
	font-size: 1em;
	margin: 0;
	padding: 0;
}
div.two-cols-inner h2.tab a,
div.three-cols-inner h2.tab a,
div.two-cols-inner h2.tab span,
div.three-cols-inner h2.tab span {
	display: block;
	margin: 0;
	padding: 0.8em 8px;
	color: #fff;
	background: #194276;
	text-decoration: none;
	
	min-height: 2.5em; /* height set in ie6.css */
}
div.two-cols-inner h2.tab a,
div.two-cols-inner h2.tab a:link,
div.two-cols-inner h2.tab a:visited,
div.three-cols-inner h2.tab a,
div.three-cols-inner h2.tab a:link,
div.three-cols-inner h2.tab a:visited {
	color: #fff;
	background: #194276;
}
div.two-cols-inner h2.tab a:hover,
div.two-cols-inner h2.tab a:visited:hover,
div.three-cols-inner h2.tab a:hover,
div.three-cols-inner h2.tab a:visited:hover {
	color: #00427a;
	background: #bfd6ea;
}

/* ==== TWO-COLS-INNER TAB ==== */
div.two-cols-inner h2.tab a,
div.two-cols-inner h2.tab span {
	width: 227px;
}
div.two-cols-inner div.col-1 h2.tab a,
div.two-cols-inner div.col-1 h2.tab span {
	width: 223px;
	margin-left: 15px;
}
/* ===== TWO-COLS-INNER TAB (two-cols outer layout) ===== */
div#content.two-cols div.two-cols-inner h2.tab a,
div#content.two-cols div.two-cols-inner h2.tab span {
	width: 323px;/*354 - 16(padding l/r) - 15 (right gutter) */
}
div#content.two-cols div.two-cols-inner div.col-1 h2.tab a,
div#content.two-cols div.two-cols-inner div.col-1 h2.tab span {
	width: 322px;/*354 - 16(padding l/r) - 15(margin-left) - 1 */
	margin-left: 15px;
}

/* ==== THREE-COLS-INNER TAB ==== */
div.three-cols-inner h2.tab a,
div.three-cols-inner h2.tab span {
	width: 144px;/* 160 - 16(padding l/r) */
}
div.three-cols-inner div.col-1 h2.tab a,
div.three-cols-inner div.col-1 h2.tab span {
	width: 145px;/* 161 - 16(padding l/r) */
}
/* ===== THREE-COLS-INNER TAB (two-cols outer layout) ===== */
div#content.two-cols div.three-cols-inner h2.tab a,
div#content.two-cols div.three-cols-inner h2.tab span {
	width: 209px;/* 225 - 16(padding l/r) */
}
div#content.two-cols div.three-cols-inner div.col-1 h2.tab a,
div#content.two-cols div.three-cols-inner div.col-1 h2.tab span {
	width: 210px;/* 226 - 16(padding l/r) */
}
/* == HEADINGS SPECIAL == ----------------------------------------------------- */
div.snippet h2,
div.snippet-large h2,
div.snippet-220 h2 {
	margin: 0 0 0.8em 0;
	padding-top: 0.25em;
	font-size: 1.2em;
	font-weight: bold;
	color: #005cab;
}
div.snippet h2 {
   color: #668bba;
	font-size: 1.2em;
	margin: 0 0 0.5em 0;
	padding: 12px 19px 0 19px;
}
div.snippet-220 h2.latest-news {
	margin-bottom: 0.2em !important;
}
/* = PARAGRAPHS AND BASIC TEXT CONTENT = ______________________________________ */
p {
	margin: 0 0 1em 0;
	padding: 0 19px; /* 20 - 1(div#main padding l/r) */
	line-height: 1.3em;
}
table p {
	padding: 0;
}
div#main h1 {  
	border-bottom: 1px solid #e5e5e5;
	width: 457px;
}
div.two-cols div#main h1 {
	width: 660px;
}
div#main hr {
	display: block;
	height: 1px;
	border: 0;
	background: #efefef;
	clear: both;
}
strong, b { font-weight: bold; }
em, i { font-style: italic; }
small { font-size: 0.8em; }
big { font-size: 1.2em; }
sub {
	font-size: 0.85em;
	vertical-align: baseline;
    position: relative;
    bottom: -0.25em;
}
sup {
	font-size: 0.85em;
	vertical-align: baseline;
    position: relative;
    bottom: 0.33em;
}
abbr,
acronym {
	border-bottom: 1px dotted #ccc;
}
del { text-decoration:line-through; }
/*
blockquote has been defined in layout.css along with the snippet class because it is very simmilar
*/
blockquote p {
	font-size: 0.85em;
	margin-bottom: 0;
	padding: 5px 10px 2px 19px;
}
blockquote cite {
	display: block;
	padding: 0 19px;
	font-size: 0.85em;
	font-weight: bold;
	font-style: normal;
	text-align: right;
}

address {
	font-size: 1em;
}
/* == CONTACT DETAILS IN SNIPPET == */
div.snippet address {
	padding: 0 10px 2px 19px;
	font-size: 0.85em;
	font-style: normal;
}
div.snippet address img.photo {background: #fff;
	float: right;
	width: 60px;
	height: 60px;
}
div.snippet address span {
	display: block;
	float: left;
	width: 144px;
	padding: 1px 0;
}
div.snippet address span.type {
	display:block;
	float:left;
	width:50px;
	font-weight: bold;
}
div.snippet address span.email {
	padding-bottom: 2px;
	clear:both;
}
div.snippet address span.email span.type {
	
}

/*
code wouldnt really be used but here for developer reference use
*/
code,
pre,
samp {
	display: block;
	clear: both;
	border: 1px solid #ebebeb;
	padding: 0.5em;
	overflow: scroll;
	font: 12px "Courier New", Courier, monospace;
	white-space: pre;
	
	width: 469px;
	margin: 0 auto;
}
samp {
	display: inline !important;
	padding: 0 !important;
	border-width: 0 0 1px 0 !important;
}
/* == BASIC SPECIAL CLASSES ==  ---------------------------------------------------- */
div.three-cols-inner p {
	padding: 0.3em 8px;
}
div.snippet p,
div.snippet-large p,
div.snippet-220 p {
	font-size: 0.85em;
	margin-bottom: 0;
	padding-bottom: 1em; /* NB ie6: 0; (for snippet-large only ??? weird) */
	padding-right: 10px;
}
div.quick-links abbr,
div.quick-links acronym,
div#footer_quick_links abbr,
div#footer_quick_links acronym {
	border: 0;
}

/* === FOOTNOTES === -------------------------------------------------------------- */
div.footnotes,
div.tips {
	margin-top: 1em;
	font-size: 0.85em;
	color: #666; /*#a5a5a5;*/
}
div.tips div.content { padding: 5px 10px; }
div.footnotes sup,
div.tips div.content sup {
	font-size: 1.5em;
	bottom: 0;
}

/* = LINKS = ____________________________________________________________________ */
a,
a:link {
	text-decoration: none; /*underline;*/
	color: #325481; /*#00aeef; refresh*/
}
a:hover {
	text-decoration: underline;
}
/* == LINKS SPECIAL CLASSES == ---------------------------------------------------- */
a.more,
a.more:link,
a.more:visited,
a.more-white,
a.more-white:link,
a.more-white:visited,
th a.section_reference,
th a.section_reference:link,
th a.section_reference:visited {
	line-height: 16px;
	padding-right: 16px;
	/*text-decoration: none !important; refresh*/
	background: transparent url(../images/icons/arrow-fwd-bb.gif) center right no-repeat;
}
a.more-left,
a.more-left:link,
a.more-left:visited {
	line-height: 16px;
	padding-left: 26px;
	margin-left: -11px;
	/*text-decoration: none !important; refresh*/
	background: transparent url(../images/icons/raquo-quick-links2.gif) center left no-repeat;
	background-position: 0 -2px;
}
div.blurb a.more-left {
   display: block;
}
/*
NB: th a.section_reference used in /reference/forms/ (pdf table headers)
*/
th a.section_reference,
th a.section_reference:link,
th a.section_reference:visited {
	color: #00427A;
}
a.more:hover,
a.more:visited:hover,
a.more-left:hover,
a.more-left:visited:hover,
a.more-white:hover,
a.more-white:visited:hover,
th a.section_reference:hover {
	text-decoration: underline !important;
}
a.more-white {
	color: #fff !important;
	background: transparent url(../images/icons/arrow-fwd-w.gif) center right no-repeat !important;
}
a.footnote-link {
	text-decoration: none;
	color: #005cab;
}
thead th a.footnote-link {
	color: #BFD6EA;
}
a.footnote-link sup {
	/*color: #00aeef; refresh*/
}
a.footnote-link:hover {
	text-decoration: underline;
}
td.dull a {
	color: #90a4b6 !important;
	text-decoration: underline;
}
a.dull {
	color: #90a4b6 !important;
	text-decoration: underline;
}
div.search-result h2 a {
	display: block;
	text-decoration: none;
}
div.search-result h2 a:hover {
	text-decoration: underline;
}
/*
Force break word on links for ie6 in subs so layout doesnt break
*/
div#sub_1 p a,
div#sub_2 p a { word-wrap: break-word; }
/* For BUTTON style links see BUTTONS setcion which includes styles for a.button, <button>, and <input/> */

/* = IMAGES = ___________________________________________________________________ */
img {
	border: 0;
}
p img.float-left {
	margin: 0 10px 10px 0;
}
p img.float-right {
	margin: 0 0 10px 10px;
}

/* == IMAGES SPECIAL CLASSES == --------------------------------------------------- */

/* = LISTS = ____________________________________________________________________ */
div#main li {
	line-height: 1.3em;
	margin-bottom: 0.6em;
}
div#main .tightList li {
   margin: 0;
}
/* == UNORDERED == -------------------------------------------------------------- */
div#main ul {
	list-style-type: square;
	list-style-image: url(../images/icons/square-sm-ul.gif);
	list-style-position: outside;
	margin-bottom: 1em;
	margin-left: 48px;/* NB ie6/7: 40px; */
}
div#main ul ul,
div#main ol ul {
	margin-left: 30px;
}
div#main ol ul li,
div#main ul ul li,
div#main ul ol ul li {
	padding-left: 0;
}
div.col ul {
	margin-right: 0.2em;
}
div.col ul li {
	margin-left: -12px !important;
}
/* == ORDERED == ---------------------------------------------------------------- */
div#main ol {
	margin-bottom: 1em;
	margin-left: 41px;/* NB ie6: 45px; ie7: 52px; */
}
div#main ol ol,
div#main ul ol {
	margin-left: 22px;/* NB ie6/7: 30px; */
}
div#main ol,
div#main ul ol {
	list-style-image: none;
}
div#main ol ol li,
div#main ul ol li,
div#main ol ol li ol li,
div#main ul ol li ol li{
	padding-left: 7px;/* NB ie6/7: 0; */
}
div#main ol ol li ol li ol li,
div#main ul ol li ol li ol li {
	padding-left: 14px;/* NB ie6/7: 0; */
}

/* == LISTS SPECIAL CLASSES == ---------------------------------------------------- */
div.three-cols-inner ul {
	margin-left: 36px;/* NB ie6/7: 29px; */
}
div.three-cols-inner ol {
	margin-left: 30px;/* NB ie6: 34px; ie7: 33px; */
}
div#main ul.link-list {
   list-style-image:none;
   list-style-position:outside;
   list-style-type:none;
	margin-left: 30px;
}
div#main ol li ul.link-list,
div#main ul li ul.link-list {
   margin: 5px 0 0 0;
}
/* TEST LEVELS 
div#main ul li,
div#main ol li { background: gray; }
div#main ul li li,
div#main ol li li { background: pink; }
div#main ul li li li, 
div#main ol li li li { background: red; }
div#main ul li li li li, 
div#main ol li li li li { background: lime; }
div#main ul li li li li li, 
div#main ol li li li li li { background: cyan; }
*/

/* == DEFENITION LISTS == ------------------------------------------------------- */
div#main dl {
	margin: 0 0 0.7em 19px;
	line-height: 1.3em;
}
div#main dl dl {
	margin-bottom: 0;
}
div#main dt {
	font-weight: bold;
}
div#main dd {
	margin: 0.2em 0 0.8em 0;
}
div#main dd dd { padding: 0;}
/* TEST LEVELS
div#main dd {background: #555; }
div#main dd dd {background: #666; }
div#main dd dd dd {background: #777; }
*/

/* = TABLES = ____________________________________________________________________ */
/*
Max table width 487px
*/
table {
	margin: 0.55em 4px 1em 4px;
	font-size: 0.95em;
	/* deal with content that forces table to wide for div#main */
	table-layout: fixed;
	word-wrap: break-word;/* ie6 and safari support css3 word-wrap */
	overflow: hidden;/* any other browser hide overflow */
	/*border-collapse: collapse; refresh*/
	/*color: #00427a; refresh*/
}
caption {
	/* same as h4 */
	margin: 0.25em 0;
	padding: 0 19px; /* 20 - 1(div#main padding l/r) */_padding: 0;
	font-size: 1.2em;
	font-weight: normal;
	text-align: left;
	color: #325481; /*refresh #4672ac;*/
}
table.border-top {
   border-top: 3px solid #eff5f8;
}
table.border-bottom {
   border-bottom: 3px solid #eff5f8;
}
thead tr,
tfoot tr {
   background: #eff5f8;
}
/*
thead tr.thin {
   height: 4px;
}
tfoot tr.thin {
   height: 2px;
}*/
div#main tbody tr.odd {background: #fbfcfd;}
div#main tbody tr.even {background: #eff5f8;}
/*div#main tbody tr:nth-child(even) {background: #eff5f8;}
div#main tbody tr:nth-child(odd) {background: #fbfcfd;}*/
div#main table.no-stripe tbody tr {background: transparent;}
th {
	padding: 0.3em;
	line-height: 1.5em;
	font-weight: bold;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #fff; /*#e1ebe6;*/
	border-width: 0 1px 0 1px;
	vertical-align: top;
}
td {
	padding: 0.3em;
	font-weight: normal;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #fff; /*#e1ebe6;*/
	border-width: 0 1px 0 1px;
	vertical-align: top;
}
table.comparison-table td {
   text-align: center;
   vertical-align: middle;
}
table.vertical-lines th,
table.vertical-lines td {
	border-width: 0 1px 1px 1px;
}
table.vertical-lines thead,
table.vertical-lines tfoot {
	border-left: 1px solid #e1ebe6;
	border-right: 1px solid #e1ebe6;
}
td.dull {
	color: #90a4b6 !important;
}
thead th,
tfoot th {
	color: #325481; /*refresh #fff;*/
	border: 1px solid #fff;
	vertical-align: middle;
	text-align: center;
	font-size: 1em;
	padding: 0.5em 0.3em;
}
thead td {
	border: 1px solid #fff;
	font-size: 0.85em;
}
tbody th:first-child,
tfoot th:first-child {
   padding-left: 13px;
   padding-right: 8px;
}
tbody.top-border {
	border-top: 1px solid #194276;
	margin-top: 5px;
}
table.no-borders,
table.no-borders thead,
table.no-borders tfoot,
table.no-borders tbody,
table.no-borders th,
table.no-borders td {
	border: 0 !important;
}
/*table.border-top { border-top: 1px solid #e1ebe6; }*/
/* === BUTTONS === .........................................................
	Rules for <button>'s, <input/>'s and <a>'s to be styled as a image based
	background with real text.
	
	NB: Some button style links defined in nav.css and form.css when it makes
		more sense to put it there
*/

/*
TODO: when not in dev move up to links section and remove stuff to do with inputs and buttons
*/

/* ==== SHARED RULES (layout etc) ==== */
a.button,
a.button:visited,
a.button-white,
a.button-white:visited {
	display: block;display:inline-block;
	float: left;
	_height: 22px;
	min-height: 22px;
	line-height:  21px;
	padding: 0 0 0 10px;
	margin: 0 5px 5px 0;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none !important;
}
a.button span,
a.button:visited span,
a.button-white span,
a.button-white:visited span,
span.form-button input /* TODO: remove span.form-button input (left here for dev demo only)*/{
	display: block;display:inline-block;
	_height: 22px;
	min-height: 22px;
	padding: 0 25px 0 0;
	background: transparent url(../images/buttons2/generic-btn-S.png) 100% 0 no-repeat;
	cursor: pointer;
	cursor: hand;
}

/* ==== BUTTONS DEFAULT (dark blue) ==== ````````````````````````````````` */
a.button,
a.button:visited, 
span.form-button /* TODO: remove span.form-button (left here for dev demo only)*/ {
	color: #fff !important;
	background: transparent url(../images/buttons2/generic-btn-S.png) 0 0 no-repeat;
}

a.button span,
a.button:visited span {
	background: transparent url(../images/buttons2/generic-btn-S.png) 100% 0 no-repeat;
}
/*
p.buttons wrapper - bind with clearfix
*/
p.buttons:after {  
    content: ".";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    line-height: 0;  
    height: 0;  
}  
p.buttons { display: inline-block;  } 
/* NB: html tag must have a xmlns attribute */
html[xmlns] p.buttons { display: block; }  
* html p.buttons { height: 1%; }
p.buttons br { clear: both; }

/* ==== BUTTONS WHITE ==== `````````````````````````````````````````````````````````````` */
a.button-white,
a.button-white:visited {
	color: #003765 !important;
	background: #fff url(../images/buttons2/generic-btn-S.png) 0 -200px no-repeat !important;
}
a.button-white span,
a.button-white:visited span {
	color: #003765 !important;
	background-color: #fff !important;
	background-position: 100% -200px !important;
}
/* ==== HOVER (both) ==== ``````````````````````````````````````````````````````` */
a.button:hover,
a.button:visited:hover,
a.button-white:hover,
a.button-white:visited:hover {
	color: #fff !important;
	/*background-color: #7cacd4 !important; refresh*/
	background-position: 0 -400px !important;
}
a.button:hover span,
a.button:visited:hover span,
a.button-white:hover span,
a.button-white:visited:hover span {
	color: #fff !important;
	background-color: #7cacd4 !important;
	background-position: 100% -400px !important;
}

div.three-cols-inner a.button,
div.three-cols-inner a.button-white {
	margin-left: 8px;
}

/* === TEXT-REPLACEMENT BUTTONS === 
	NB:	For buttons in content use the generic button classes
		the following are for special cases
*/
a.btn-home-loan-products {
	display: block;
	width: 152px;
	height: 22px;
	text-indent: -999em;
	background: transparent url(../images/buttons2/home-loan-products.png) 0 0 no-repeat; /* NB ie6: .gif */
}
a.btn-home-loan-products:hover {
	background-position: 0 -22px;
}

/* = Sitemap = ____________________________________________________________________ */
div#sitemap h2.toggle {
	border-bottom: 1px solid #e1ebe6;
	width: 90%;	
	margin: 5px auto 0 auto;
	padding: 3px 19px;
	background: transparent url(../images/icons/plus.gif) center left no-repeat;
}
div#sitemap h2.toggle.open {
	background: transparent url(../images/icons/minus.gif) center left no-repeat;
}
div#sitemap h2.hover { /* NB: using class (added via js) NOT :hover 'cause we dont want hover if no functionality */
	background-color: #DFEBF5 !important;
	cursor: pointer;
	cursor: hand; /* ie */
}
div#sitemap ul {
	background: #fff;
}

div#sitemap ul ul {
	margin-top: 0.5em;
}
div#sitemap ul ul ul { 
	margin-left: 0;
}
div#sitemap li.heading {
	list-style-image: none;
	list-style-type: none;
}
div#sitemap li.heading strong {
	display: block;	
	margin-left: -28px;
}	
div#sitemap li.index { 
	font-weight: bold; 
}

p#designed_by {
	font-size: 0.8em;
	color: #999;
	text-align: right;
	padding: 2px 0;
	margin: 0 10px 0 0;
}
p#designed_by a,
p#designed_by a:link,
p#designed_by a:visited {
	color: #999;
	text-decoration: none;
}
p#designed_by a:hover {
	color: #999;
	text-decoration: underline;
}
/* = GLOBAL CLASSES = _____________________________________________________________ */
.align-left { text-align: left !important; }
.align-right { text-align: right !important; }
.align-center { text-align: center !important; }
.align-justify { text-align: justify !important; }
table .valign-middle { vertical-align: middle !important; }
table .valign-bottom { vertical-align: bottom !important; }
.clear { clear: both !important; }
.clear-left { clear: left !important; }
.clear-right { clear: right !important; }
.highlight { background: #FFFFCC !important; }
.disabled { background: #F5F5F5 !important; }
/* 
	NB: global float classes will have varied results depending on elements actual display propety
		use with care. In most cases these classes won be needed, but handy for things like a
		single a.button that you want to float right (a.button are set to display:block;float:left;)
*/
.float-right { float: right !important; }
.float-left { float: left !important; }
.indent-small { margin-left: 10px; }
.indent-medium { margin-left: 20px; }
div.postalindent { margin-left: 40px; }