/*
   statusbar-overlay sets the background color for the overlay. Black text is the default when the statusbar plugin is not added. When the
   statusbar plugin is added, it also adds default setting to make the content white via:

       <preference name="StatusBarStyle" value="lightcontent"/>

   Setting the background color to black will allow the default light content (white text/icons) to show on it. The statusbar plugin is included
   in the config.xml file and will be added by the CLI when you build locally.

   See https://github.com/apache/cordova-plugin-statusbar
*/

p { font-size: 1em;
}

a {
	color: #47a5dc;
	text-decoration: underline;
}
.navbar, .subnavbar, .toolbar {
	background: white;
}
.statusbar-overlay {
    background: #000000;
}
.homepage .page-content {
	background-image: url('../img/background-home.jpg');
	background-size: cover;
	background-repeat: none;
	background-position: center -70px;
}
.navbar-fixed .page-content, .navbar-through .page-content {
	margin-top: 70px;
	padding-top: 16px;
}
.navbar, .toolbar {
	height: 70px;
}
.navbar-inner, .toolbar-inner {
	padding: 0 3%;
}
.vicgov img {
	margin-top: -0px;
}
.navbar .right {
	margin-left: 0;
}
.docBottom {
	position: absolute;
	bottom:85px;
	left: 3%;
	z-index: 2;
}
.start {
	position: absolute;
	bottom:105px;
	right: 15px;
	z-index: 2;
}
a.start-btn {
	text-decoration: none;
	color: #0f9a48;
	background-color: white;
	border-radius: 25px;
	padding: 18px 40px;
	font-weight: 500;
	font-size: 16px;
}
.docBottomRed {
	position: absolute;
	z-index: 1;
/*
	background-color: #e21e26;
	height: 200px;
	width: 300px;
	 -ms-transform: rotate(34deg);
    -webkit-transform: rotate(34deg);
    transform: rotate(34deg);
    left: -90px;
	bottom: -60px
*/
	background-color: #0063a5;
    left: 0px;
	bottom: 70px;
	width: 100%;
	height: 92px;

}
.homeTxt {
	display: block;
	background-color: rgba(128, 129, 132, 0.50);
	padding: 16px;
	border: solid white 1px;
	color: white;
	font-weight: bold;
	width: 180px;
	font-size: 40px;
	line-height: 1.1;
	float: right;
}
.content-block {
	margin: 0;
	color: #231f20;
	padding: 0 3%;
}
img {
	display: block;
}
.page {
	background-color: white;
}
.page[data-page="page-2"], .page[data-page="page-5"], .page[data-page="page-8"], .page[data-page="page-11"],.page[data-page="page-15"],.page[data-page="page-20"],.page[data-page="page-21"] {
	background-color: #d0d2d3;
}
.page .page-content {
	padding-bottom: 150px;
	overflow: hidden;
}
.navbar:after {
	background-color: transparent;
}
.verticalMiddle {
	vertical-align:middle;
  display: table-cell;
}
.emergency {
	background-color: white;
	border-radius: 12px;
	margin-left: 3%;
	margin-right: 3%;
	padding: 0px 20px;
/* 	padding: 80px 20px; */
	margin-top: -16px;
	border: solid #939498 1px;
	text-align: center;
	height: 100%;
	display: table;
	width: 94%;
}
.emergency h1 {
	font-weight: normal;
}
h1 a {
	font-weight: bold;
}
a.yes, a.no, a.unclear {
	color: white;
	text-align: center;
	display:inline-block;
	height: 3em;
	width: 3em;
	line-height: 3em;
	text-decoration: none;
	font-weight: 600;
	font-size: 28px;
	margin: 20px 10px;
	border-radius: 1.5em;
		-o-transition: .25s;
	-ms-transition: .25s;
	-moz-transition: .25s;
	-webkit-transition: .25s;
	transition: .25s;


}
a.yes {
	background-color: #0f9a48;
}
a.no {
	background-color: #e21e26;
}
a.unclear {
    border: solid 3px #8c6bb2;
    width: 78px;
    height: 78px;
    color: #8c6bb2;
    font-size: 18px;
		font-weight: 500;
    border-radius: 84px;
    line-height: 76px;
    display: block;
    margin: 0px auto;
    margin-top: -5px;
}
a.no:active, a.yes:active {
	height: 82px;
	width: 82px;
	line-height: 82px;
}
i.icon.icon-back {
	background-image: url('../img-1-0-1/back@2x.png');
	background-size: 54px 54px;
	background-position: center center;
	height: 54px;
	width: 54px;
}
i.icon.icon-back:active {
	background-image: url('../img-1-0-1/back-grey@2x.png');
}
.back {
	border-radius: 27px;
	margin: 16px;
	height: 54px;
	width: 54px;
	display: inline-block ;
	position: absolute;
	bottom:70px;
	left: 0px;
	margin-left: 3%;
}
.about {
	border-radius: 27px;
	border: solid #939498 1px;
	margin: 16px;
	height: 54px;
	width: 54px;
	display: inline-block ;
	position: absolute;
	bottom:70px;
	right: 0px;
	text-decoration: none;
	line-height: 54px;
	color: #231f20;
	background-color: white;
/* 	text-transform: uppercase; */
	font-size: 13px;
	text-align: center;
	margin-right: 3%;
}
.page[data-page="about"] .about {
	border: solid #e21e26 1px;
	color: #e21e26;
}
.phone {
	border-radius: 32px;
	margin: 16px;
	height: 54px;
	width: 54px;
	display: inline-block ;
	position: absolute;
	bottom:70px;
	right: 3%;
	margin-right: 0px;
}

i.icon.icon-phone {
	background-image: url('../img-1-0-1/telephone@2x.png');
	background-size: 54px 54px;
	background-position: center center;
	height: 54px;
	width: 54px;
}
i.icon.icon-phone:active {
	background-image: url('../img-1-0-1/telephone-grey@2x.png');
}
.whitebg {
	background-color: white;
}

h1.blue {
	color: #47a5dc;
	text-align: center;
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: 0;
}
h1.red {
	color: #e21e26;
}
h1.red a {
	color: #e21e26;
}
h1.green {
	color: #0f9a48;
	text-align: center;
}
h1.green a {
	color: #0f9a48;
}
.page[data-page="page-18"] h1.red {
	text-align: center;
}
.opa_content {
	padding: 0 30px;
	height:80%;
}
.page[data-page="about"] .opa_content, .page[data-page="definitions"] .opa_content {
	height:86%;
}

a.readmore {
	display: inline-block;
	text-align: center;
	background-color: #47a5dc;
	color: white;
	padding: 15px 25px;
	border-radius: 25px;
	text-decoration: none;
	font-weight: bold;
	font-size: 15px;
	margin-top: 20px;
	margin-bottom: 60px;

}
.scroller {
	overflow: scroll;
	height: 100%;
	margin: 0;
/* 	padding-right: 20px; */
}
.bottom_gap {
	height: 40px;
}
/* is this below work? */
/*
::-webkit-scrollbar {
-webkit-appearance: none;
width: 1px;
height: 0px;
background-color: #bfbfbf;
}
::-webkit-scrollbar-track {
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
	background-color: #e21e26;
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
*/

.fadedScroller_fade {
    content:'';
    margin-top: -70px;
    height: 70px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    position: relative;
}

.contentData {
	margin: 1em 0
}

/* Bigger screen above 1200px width  */
@media screen and (min-width: 1200px) {
	.homepage .page-content {
	background-position: center -870px;
}
}
/* Small screen below 1200px width  */
@media screen and (max-width: 1200px) {
	.homepage .page-content {
	background-position: center -770px;
}

}
/* iPads (portrait and landscape)  */
@media screen and (min-width: 950px) and (max-width: 1024px) {
	.homepage .page-content {
	background-position: center -770px;
}
}
/* iPads (portrait) ----------- */
@media screen and (min-width: 768px) and (max-width: 949px) {
	.homepage .page-content {
	background-position: center -170px;
}
}
/* Smartphone to iPads (portrait) ----------- */
@media screen and (min-width: 300px) and (max-width: 949px) {


}
/* Smartphones (portrait and landscape) ----------- */
@media screen and (min-device-width: 300px) and (max-width: 768px) {
	.homepage .page-content {
	background-position: center -70px;
}

}