/* START MOBILE/AMP STYLES */
html { font-family: "roboto", "arial", sans-serif; font-size: 12pt; overflow-y:scroll; overflow: -moz-scrollbars-vertical; } /* The only fixed font size. All other measures relative to this (REM). */
body { background: #d9e2e4; color: #222; margin:0; }
/* high level containers (box model) */
.wrapper { background: #fff; position: relative; }
.no-rhs-bar { width: 100%; }
/* unused elements */
.menu-mobile, .nav-column, .secondary-column { display: none; }
/* universal styles */
.hide, .mobile, .header-links { display: none; }
/*.offScreen { position: absolute; left: -9999px; } /* px used so we can easily bring things back onto screen if needed */
.visuallyhidden { border: 0px none; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; }
fieldset { border: none; padding: 0; margin: 0; }
.right { float: right; }
.left { float: left; }
img { border: 0; }
.error { color: #cc0000; }
/*:focus { outline: blue solid 2px !important; } for accessibility */
div, h2, h3, h4, h5, h6, a { margin: 0; padding: 0; }
#MainNavigation:focus, #content:focus, #Footer:focus, .dialog:focus { outline: none; }
/* header - branding */
header { padding: 0.5rem 1rem 0 1rem; position: relative; }
.skip li { float: left; }
.skip a:focus { position: absolute; white-space: nowrap; left: 10010px; top: 0; z-index: 9; } /* bring the skip to links back on screen when in focus */
.branding { display: block; position: relative; margin: 0 -.5rem; }
.branding img { width: 100%; height: auto; }
.browsehappy { text-align: center; background-color: yellow; padding: 1rem; } /* message for users of IE5 - IE9 */
/* Centre/content column */
.main-column, .no-l-nav-no-rhs-bar { padding: 0.5rem 1rem; }
#content { position:relative } /* required so dialogs can be positioned properly */
/* content - standard tags */
.standard-content { line-height: 1.4rem; }
.standard-content img { max-width: 100%; height: auto; } /* prevent image being wider than container */
.standard-content h1 { color: #333; font-size: 2.2rem; line-height: 2.2rem; font-weight: bold; padding: 0; margin: 0; }
.standard-content h2 { clear: both; color: #3f3f3f; font-size: 1.5rem; font-weight: bold; line-height: 1.8rem; }
.standard-content > h2:not([class]), .standard-content .collapseable > h2 { background-color:#f1f1f1; border-bottom: solid #3f3f3f 0.1rem; border-top: solid #3f3f3f 0.1rem; margin: 3rem 0 1rem 0; padding: 0.5rem 0 0.5rem 0.5rem; }
.standard-content h2.no-collapse { background-color:#f1f1f1; border-bottom: solid #3f3f3f 0.1rem; border-top: solid #3f3f3f 0.1rem; margin:1rem 0; padding: 0.5rem 0 0.5rem 0.5rem; }
.standard-content .collapseable h2 { margin: 1rem 0 1rem 0; }
.standard-content h3 { color: #514A4A; font-size: 1.3rem; font-weight: bold; line-height: 1.5rem;}
.standard-content h4 { font-style: italic; font-size: 1.2rem; font-weight: bold; }
.standard-content h5 { font-size: 1.1rem; font-weight: bold; }
.standard-content h6 { font-size: 1rem; font-weight: bold; }
.standard-content a { color: #333; }
.standard-content a:hover { text-decoration: none; }
.standard-content em { font-style: italic; }
.standard-content .em { color: #514a4a; font-size: 1.1em; font-weight: bold; }
img.right { margin-left: 1rem; margin-bottom: 1rem; }
/* content - lists */
.standard-content li { padding: 0.2rem 0.5rem 0.2rem 0; }
.links, .anchor-links, .links ul, .anchor-links ul { list-style: none; padding: 0; margin: 0 0 0 1rem; }
.links li, .anchor-links li { line-height: 1.6rem; text-indent: -.75rem; }
.links li:before { content: ""; border-top: .4rem solid transparent; border-left: .4rem solid #6b8e06; border-bottom: .4rem solid transparent; display: inline-block; margin-right: .5rem; }
.anchor-links li:before { content: ""; display: inline-block; width: 1rem; height: 1rem; margin-right: .5rem; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOS4zIDI5LjEiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZDOEYyRCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIj48cGF0aCBkPSJNMjguOCA1LjF2MjMuNUg1LjJNLjQuNGwyOC4xIDI4Ii8+PC9nPjwvc3ZnPg==") no-repeat; }
.links a, .anchor-links a { color: #514a4a; font-size:1.1em; font-weight: bold; text-decoration: none; }
.links a:hover, .anchor-links a:hover, .pod a:hover { text-decoration: underline; }
/* document type icons */
.standard-content .pdf, .standard-content .doc, .standard-content .xls, .standard-content .ppt, .standard-content .zip { padding: 0.2rem 0 0.2rem 1.5rem; background-size: 1rem 1rem; background-position: .1rem .3rem; }
.pdf { background: url("https://static.moneysmart.gov.au/images/icons/pdf.png") no-repeat; }
.doc { background: url("https://static.moneysmart.gov.au/images/icons/word.svg") no-repeat; }
.xls { background: url("https://static.moneysmart.gov.au/images/icons/excel.svg") no-repeat; }
.ppt { background: url("https://static.moneysmart.gov.au/images/icons/powerpoint.svg") no-repeat; }
.zip { background: url("https://static.moneysmart.gov.au/images/icons/zip.svg") no-repeat; }
/* content - tables, boxes and highlights */
.border { border: solid thin; }
.border.blue { border-color: #336699; }
/* content boxes */
.box { padding: 1rem; overflow: hidden; clear: both; margin-bottom: 1rem; }
.box h2, .box h3, .box h4 { border-bottom: none; font-size: 1.3rem; font-weight: bold; }
/* solid fill boxes */
.fill.blue {background-color:#dee7ef; }
.fill.orange {background-color: #f1f1f1; border-left: 10px solid #eb7b28; }
.fill.green {background-color: #f1f1f1; border-left: 10px solid #6b8e06;}
.fill.teal {background-color: #f1f1f1; border-left: 10px solid #007983; }
.fill.purple {background-color: #f1f1f1; border-left: 10px solid #6d3a96; }
.fill.magenta {background-color: #f1f1f1; border-left: 10px solid #b92f92; }
.fill.grey {background-color: #f1f1f1; border-left: 10px solid #666; }
.fill.green h2, .fill.green h3, .fill.green h3 { color: #333; margin-top: 0; }
/* highlighted boxes */
.highlight.box { border-radius: .3rem; border-left: 0; }
.highlight.box h2, .highlight.box h3 { color: #ffffff; margin: -1rem -1rem 1rem -1rem; padding: 0.75rem 1rem; font-size: 1.25rem; font-weight: bold; border: none; }
.highlight.box h4 { color: #ffffff; margin: -1rem -1rem 1rem -1rem; padding: 0 1rem; font-size: 1.25rem; font-weight: bold; border: none; }
.box.highlight.blue h2, .box.highlight.blue h3, .box.highlight.blue h4 { background-color: /*#31639b*/ #4B9EBE; }
.box.highlight.orange h2, .box.highlight.orange h3, .box.highlight.orange h4 { background-color: #A54900; }
.box.highlight.green h2, .box.highlight.green h3, .box.highlight.green h4 { background-color: #637D00; }
.box.highlight.teal h2, .box.highlight.teal h3, .box.highlight.teal h4 { background-color: #007983; }
.box.highlight.purple h2, .box.highlight.purple h3, .box.highlight.purple h4 { background-color: #6d3a96; }
.box.highlight.magenta h2, .box.highlight.magenta h3, .box.highlight.magenta h4 { background-color: #b92f92; }
.box.highlight.grey h2, .box.highlight.grey h3, .box.highlight.grey h4 { background-color: #666; }
.keytip { background: #f1f1f1; margin: .5rem 0; clear: right; color: #333; font-size:1.1em; font-weight: normal; padding: .5rem; border-left: 10px solid #027dbc; font-style: italic; }
.box.important h2, .box.important h3, .box.important h4 { color: #333; padding: 0.5rem 0 1rem 0; margin: 0; }
.box.important p:first-of-type { margin-top: 0; }
.keytip h2, .keytip h3, .keytip h4 { font-size: 1.2rem; color: #333; border: none; padding: 0.25rem 0 0.5rem 0rem; margin: 0; }
.keytip p:first-of-type { margin-top: 0.25rem; }
th {font-weight:bold;}
.simple { vertical-align:text-top; margin-bottom: 1rem; }
.simple td {padding: 6px; border-top: solid #999 1px; border-bottom: solid #999 1px;}
.simple th {padding: 6px; border-top: solid #999 1px; border-bottom: solid #999 1px; background-color:#f6fadd;}
.simple td.column-highlight {padding: 6px; text-align: left;}
.simple tr td ul li, .simple tr td ol li {margin-left:-20px;}
.borders { margin-bottom: 1rem; border-collapse: collapse; border-spacing: 0; }
.borders th, .borders td { padding: 0.5rem; border: solid thin #999999; }
.borders th { background-color: #f6fadd; }
hr { color: #6b8e06; background-color: #6b8e06; height: .3rem; border: 0; margin: 0; clear: both; }
/* content - custom text elements */
.article-title, h2.article-title { color: #6b8e06; font-size: 1.3rem; font-weight: bold; margin: 1rem 0; border-bottom: none; }
#lastupdated { font-size: 0.7rem; color: #666; margin-bottom: 0; }
.closing { color: #666; font-weight: bold; font-style:italic; font-size: 1.1em; line-height:1.6em; margin-top: 2rem; clear: both; }
/* content - form elements and buttons */
a.button, a.button-white, a.button-white-left { font-size: 1rem; color: #fff; border-radius: .3rem; border: 0; padding: .6rem 1rem; background: #336699; text-decoration: none; font-weight: bold; display: block; text-align: center; cursor: pointer; }
a.button-white, a.button-white-left { background: #fff; border: solid 1px #336699; color: #336699; }
button { background-color: #EC1479; border: 2px solid #EC1479; color: #fff; display: block; text-align: center; cursor: pointer; padding: 15px 25px; transition: all .5s; line-height: 1; font-weight: normal; font-variant:small-caps; font-size:1.1rem; margin-bottom: 15px;}
button:hover { background-color: #fff; color: #EC1479; }
a.button:hover{ background-color: #666; }
a.button-white:hover, a.button-white-left:hover { border: solid 1px #666; color: #666; }
input[type="text"], input[type="number"], input[type="password"], input[type="email"], select, textarea { color: #336699; background-color: white; font-weight: normal; border: thin solid #ccc; border-radius: .3rem; padding: 0.5rem; box-sizing: border-box; font-size: 1rem; }
input[type="text"].empty, input[type="number"].empty, input[type="password"].empty, input[type="email"].empty, select.empty, textarea.empty { border-color:#d00000; outline: none; }
input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus { border:1px solid #6e9934; outline: none; }
select {
-moz-appearance: none; -webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
background-position: calc(100% - 12px) calc(1em), calc(100% - 8px) calc(1em), calc(100% - 1.5em) 0.4em;
background-size: 5px 5px, 5px 5px, 1px 1.5em;
background-repeat: no-repeat;
padding-right: 1.5rem;
}
select::-ms-expand { display: none; }
/* special case */
p + h3 { margin: 1.5rem 0 0 0; }
/* CTA colours */
/* should be able to drop these .standard-content selectors once pods have been updated */
.standard-content a.button { background: #007983; }
.standard-content a.button[href*="calculators-and-apps/"] { background: #b92f92; text-transform: lowercase; }
.standard-content a.button[href*="calculators-and-apps/"]:before { content:"Use the " }
.standard-content a.button[href*="calculators-and-apps/"]:first-letter { text-transform: uppercase; }
.standard-content a.button[href*="calculators-and-apps/mobile-apps"] { text-transform: initial; }
.standard-content a.button[href*="calculators-and-apps/mobile-apps"]:before{content:"Download "}
.standard-content a.button[href*="calculators-and-apps/"]:hover, .standard-content a.button[href*="calculators-and-apps/mobile-apps"]:hover, .standard-content a.button:hover { background-color: #666; } /* fix */
.standard-content .cta { font-size: 1.2rem; font-weight: bold; line-height: 1.6em; margin-left: 3rem; margin-right: 3rem; color: #007983; }
.standard-content > p a.button, .standard-content .collapsed-content > p a.button { margin: 0 3rem; } /* specific targeting so it doesn't impact on calcs and tools */
.standard-content .cta.calc { color: #b92f92; }
/* content - collapsible elements */
h2.collapse { cursor: pointer; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; }
h2.collapse button.toggle { width: 2rem; height: 2rem; margin-right: 1rem; background: transparent; border: solid 1px #7a7a7a; color: #7a7a7a; position: relative; }
h2.collapse button.toggle:before, h2.collapse button.toggle:after { content: ""; position: absolute; background-color: #7a7a7a; transition: transform 0.25s ease-out; border-radius: .3rem; }
h2.collapse button.toggle:before { top: 10%; left: 50%; width: 2px; height: 80%; margin-left: -1px; } /* vertical line */
h2.collapse button.toggle:after { top: 50%; left: 10%; width: 80%; height: 2px; margin-top: -1px;} /* horizontal line */
h2.collapse.open button.toggle:before { transform: rotate(90deg); }
h2.collapse.open button.toggle:after { transform: rotate(180deg); }
/* dialog modal */
.standard-content.dialog h2, .standard-content.dialog h3, .standard-content.dialog h4 { padding: 0.75rem 1rem; margin: -1rem -1rem 1rem -1rem; }
.dialog-bg { background-color: black; opacity: 0.7; width: 100%; height: 100%; height: 100vh; width: 100vw; position: fixed; top: 0; left: 0; margin: 0; z-index: 9999; }
.dialog { z-index: 99999; height: auto; border: solid 2px #6B8C00; margin: 0; background-color: #f7f7f7; position: absolute; margin-left: auto; left: 0; right: 0; top: 0; box-sizing: border-box; -moz-box-sizing: border-box; width: 330px; max-width: 100%; border-radius: .3rem; }
.standard-content.dialog.box h2 { color: white; background-color: #6B8C00; border: 0; padding: 0.5rem 1rem; }
.dialog .close { position: absolute; top: .5rem; right: .5rem; width: auto; height: auto; background: none; cursor: pointer; color: white; text-decoration: none; font-size: 2.5em; }
/* additional styles for dialog content */
.dialog p:first-of-type { margin: 0; }
.dialog label { display: block; font-weight: bold; }
.dialog .error { display: block; font-weight: bold; margin-top: 1rem; color: red; }
.dialog input, .standard-content.dialog button { width: 100% }
.dialog input[type="checkbox"] { width: auto; }
.dialog button:disabled{ background-color: #666; }
.dialog input[type="text"], .dialog input[type="number"], .dialog input[type="password"], .dialog input[type="email"], .dialog select { margin-bottom: 1rem; }
.dialog button { text-align: center; }
.dialog button.cancel { background-color: #666; }
/* Primary nav items - mobile */
@media screen and (max-width: 50em) { /* wrapped in media query so these styles don't clash with the different look on desktop*/
.primary-nav { top: 3.5rem; background: rgb(75, 158, 190); }
}
/* END MOBILE/AMP STYLES */
@media print {
.header-links, .search-bar, #SearchBox, #MainNavigation, .menu-mobile, .secondary-column, .nav-column, #feedback, #feedbackform, #Footer{ display: none !important; }
.standard-content > h2 { padding-left:0 !important; background: none !important; }
/*.standard-content a:after { content:" (" attr(href) ") "; font-size: 0.8rem; }*/ /* print the url after a link */
}
/*
Everything after here should not be required to display the site, rather just adapt the layout of the mobile site for larger screens
*/
/* START DESKTOP STYLES */
/* Safari behaves differently when using rem units for media queries, so for this we should use em */
/* main (top) nav - desktop adjustments */
@media screen and (min-width: 50em) {
.branding { margin: 0 .5rem; }
.branding img { max-width: 71%; padding:0.5rem; }
.header-links { display: none; position: absolute; top: 1rem; right: 1rem; width: auto; margin-top: 0; }
.header-links a { font-weight: bold; color: #336699; text-decoration: none; text-indent: 0; background: none; }
.header-links a:hover { color: #000; }
.primary-nav { list-style-type: none; position: relative; width: 100%; padding: 0 2rem 0 0; margin: 0; justify-content: flex-start; background: rgb(75, 158, 190); box-sizing: border-box; /*background: linear-gradient(to bottom, #b1c900 0%,#95af14 50%,#789726 100%);*/ }
/* important used because the jquery trigger on mobile may hide the nav - rather than doing slideToggle() we should be using toggleClass() and then do the show hide with CSS */
.primary-nav { display: table-cell; display: -webkit-flex !important; display: -moz-flex !important; display: -ms-flexbox !important; display: -o-flex !important; display: flex !important; }
/* high level containers (box model) */
.content-global > form { display: table-cell; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; }
.main-column { -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; -o-flex: 1; flex: 1; }
/* Centre/content column */
.main-column, .no-l-nav-no-rhs-bar { padding: 1.5rem; }
}
/* full desktop and full width */
@media screen and (min-width: 70.1em) { /* Up to this point the site has always been 100% width, but now we will set a max width */
/* body { background: #98B33B; } /* color pop that will only be seen when overscrolling */
header { padding: 0; background: #fff; }
.wrapper { background: #f1f1f1; }
header > div.branding, #content { max-width: 80rem; margin: 0 auto; position: relative; }
.standard-content { background: #fff; padding: 1rem; border-radius: .3rem; margin-top: 0.5rem; }
.landing-banner { margin: 0 -1rem; margin-bottom: 1rem; }
.standard-content h1 { margin-top: 0; border: 0; }
.dialog { right: 1rem; }
}