/* Mobile specific stylesheet */

@media screen and (max-width: 749px) {
	
	/* General styles
	---------------------------------------------------------------------------------------------- */
	
	#main {
		width: 100%;
		min-height: auto;
		margin: 0 auto;
		padding: 0;
		overflow:hidden;
	    position:relative;
	}	
	
	
	/* Header
	---------------------------------------------------------------------------------------------- */
	
	#header-wrapper {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		background-color: white;
		height: auto;
		min-height: 70px;
	}
	
	#header {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		height: auto;
		min-height: 70px;
	}
	
	#branding {
		width: 90%;
		height: 70px;
		margin: 0 5%;
		padding: 0;
		float: left;
	}
	
	a#advam-logo {
		display: block;
		float: left;
		width: 190px;
		height: 100%;
		background-image: url(images/headerLogo.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}
	
	
	/* Navigation
	---------------------------------------------------------------------------------------------- */
	
	.mobile-menu-wrapper {
		float: right;
		margin: 23px 0 0 0;
		width: 20%;
		max-width: 24px;
		text-align: right;
	}
	
	a.menu-icon {
		width: 24px;
		height: 24px;
		display: block;
		background-image: url(images/icon-menu@2x.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 24px;
	}
	
	#navigation {
		display: none;
		float: none;
		margin: 0 0 0 0;
		width: 100%;
		padding: 0;
		height: auto;
		background-color: #fff;
		clear: both;
		/* position: absolute;
		top: 70px;
		z-index: 1000; */
	}
	
	ul.menu {
		list-style: none;
		margin: 0 0 0 0;
		height: auto;
		padding: 0;
		float: none;
	}
	
	ul.menu.logged-in {
		margin-top: 0;
	}
	
	ul.menu.logged-in li.menu-item {
		margin-left: 0;
	}
	
	#navigation ul.menu li.menu-item {
		float: none;
		font-size: 1.3em; /* 13px */
		line-height: 38px;
		text-transform: uppercase;
		margin-right: 0;
		font-style: normal;
		font-weight: normal;
	}
	
	li.menu-item {
		margin-left: 0;
	}
	
	li.menu-item a,
	li.menu-item a:link, 
	li.menu-item a:visited {
		display: block;
		height: 40px;
		padding: 0 3%;
		color: #555;
		background-color: #eee;
		text-decoration: none;
		margin: 0;
		border-bottom: 1px solid #ccc;
		width: 95%;
	}
	
	li.menu-item a:hover,
	li.menu-item a:active,
	li.current-menu-item a:link,
	li.current-menu-item a:visited {
		color: #61acec;
		border-bottom: 1px solid #ccc;
	}
	
	a#home-icon,
	a#topup-icon,
	a#modify-icon,
	a#password-icon,
	a#review-icon,
	a#close-icon,
	a#logout-icon {
		/* background-image: none; */
		background-position: 4% center;
		padding-left: 12%;
	}



	/* Content
	---------------------------------------------------------------------------------------------- */
	
	#content {
		padding: 0;
	}
	
	#intro-text-home {
		width: 70%;
		padding: 0 15%;
		min-height: 120px;
		height: auto;
		margin: 0 auto;
		text-align: center;
	}
	
	#intro-text {
		width: 100%;
		min-height: 60px;
		height: auto;
		margin: 0 auto;
		text-align: center;
	}
	
	.content-row {
		float: left;
		max-width: 100%;
		margin-right: 0;
		margin-bottom: 12px;
	}
	
	body.entry-page .content-row {
		margin-bottom: 12px;	
	}
	
	p.field-label {
		font-size: 1.4em; /* 14px */
		line-height: 20px;
		padding-top: 6px;
		float: left;
		clear: both;
	}
	
	p.field-description {
		font-size: 1.5em; /* 15px */
		line-height: 20px;
		float: none;
		clear: both;
	}
	
	.password-link {
		
	}
	
	.form-wrapper {
		width: 100%;
		border-radius: 0px;
	}


	/* Entry page
	---------------------------------------------------------------------------------------------- */
	
	.register-details,
	.content-wrapper {
		width: 100%;
		background-color: #ffffff;
		float: left;
		padding: 0;
		margin-bottom: 30px;
		border-radius: 0;
	}
	
	.existing-customer {
		float: left;
		width: 90%;
		padding: 30px 5%;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}
	
	.new-customer {
		float: left;
		width: 90%;
		padding: 30px 5%;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
	}
	
	
	/* Logged in page styles
	---------------------------------------------------------------------------------------------- */
	
	.logged-in-wrapper {
		float: left;
		width: 90%;
		background-color: #ffffff;
		padding: 30px 5%;
		border-radius: 0;
	}
	
	.user-summary {
		float: left;
		width: 90%;
		background-color: #eeeeee;
		border-bottom: 1px solid #cccccc;
		padding: 30px 5%;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}
	
	.user-summary .content-row {
		margin-bottom: 0;
	}
	
	.user-summary p {
		font-size: 1.5em; /* 15px */
		line-height: 20px;
		margin: 0;
		text-align: left;
	}

	
	
	/* Top up page
	---------------------------------------------------------------------------------------------- */
	
	.credit-card-details {
		float: left;
		width: 90%;
		background-color: #ffffff;
		padding: 30px 5%;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
	}
	
	.account-summary {
		float: left;
		width: 90%;
		background-color: #f3fcfb;
		border-bottom: 1px solid #9bd7d4;
		padding: 30px 5%;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}
	
	.account-summary .content-row {
		margin-bottom: 0;
	}
	
	.account-summary p {
		font-size: 1.5em; /* 15px */
		line-height: 30px;
		margin: 0;
	}
	
	.account-summary .register-input {
		background-color: #ffffff;
		border: 1px solid #9bd7d4;
		color: #00a59d;
		font-weight: 600;
	}
	
	
	
	
	/* Steps styling
	---------------------------------------------------------------------------------------------- */
	
	.steps-header {
		width: 90%;
		background-color: #f4f4f4;
		border-top: 1px solid #cccccc;
		float: left;
		padding: 10px 5%;
	}
	
	.steps-header.open-step {
		background-color: #ffffff;
		border-top: 1px solid #cccccc;
	}
	
	.steps-header:last-child {
		border-bottom: 1px solid #cccccc;
	}
	
	.steps-header h2 {
		padding-bottom: 0;
		line-height: 32px;
	}
	
	.steps-header.closed-step h2 {
		color: #777777;
	}
	
	.steps-wrapper {
		float: left;
		width: 90%;
		padding: 0 5% 20px 5%;
	}
	
	.step-number {
		font-size: 1.8em; /* 18px */
		line-height: 30px;
		float: left;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		display: block;
		text-align: center;
		margin-right: 10px;
	}
	
	.steps-header.open-step .step-number {
		background-color: #93b7bb;
		border: 1px solid #93b7bb;
		color: white;
	}
	
	.steps-header.closed-step .step-number {
		background-color: #f8f8f8;
		border: 1px solid #cccccc;
		color: #777777;
	}

	
	
	/* Buttons
	---------------------------------------------------------------------------------------------- */
	
	.blue-button {
		width: 100%;
		max-width: 100%;
		height: 50px;
	}
	
	.green-button {
		width: 100%;
		max-width: 100%;
	}
	
	.right-side {
		width: 100%;
		float: right;
		margin-bottom: 20px;
	}
	
	.left-side {
		float: left;
		margin-bottom: 20px;
	}
	
	.radio-button {
		margin-right: 10px;
	}
	
	.check-box {
		margin-right: 10px;
	}
	
	
	/* Input fields
	---------------------------------------------------------------------------------------------- */
	
	.content-row.one-col {
		width: 100%;
	}
	
	.content-row.two-col {
		width: 100%;
	}
	
	.content-row.three-col {
		width: 100%;
	}
	
	.content-row.four-col {
		width: 100%;
	}
	
	.content-row.five-col {
		width: 100%;
	}
	
	.content-row.six-col {
		width: 100%;
	}
	
	.content-row.seven-col {
		width: 100%;
	}
	
	.content-row.eight-col {
		width: 100%;
	}
	
	.content-row.last-child {
		margin-right: 0;
	}
	
	.content-row.space-below {
		margin-bottom: 12px;
	}


	
	/* Typography
	---------------------------------------------------------------------------------------------- */
	
	h1.entry-header {
		font-size: 2.5em; /* 25px */
		line-height: 32px;
		color: white;
		font-weight: 300;
		padding: 25px 0;
	}
	
	h1 {
		font-size: 2.2em; /* 22px */
		line-height: 28px;
		color: white;
		font-weight: 300;
		padding: 15px 0;
/* 		text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7); */
	}
	
	h2 {
		font-size: 2em; /* 20px */
		line-height: 25px;
		color: #555555;
		font-weight: 600;
		padding-bottom: 20px;
	}

	h2.floated-left {
		padding-bottom: 20px;
		float: none;
	}
	
	
	
	/* Responsive Table 
	---------------------------------------------------------------------------------------------- */
	
	table.responsive-table th,
	table.responsive-table td {
		display: block;
		width: calc(50% - 16px);
		float: left;
	}
	

	table#booking-results {
		width: 100%;
		margin: 0;
		border: 1px solid #e4e4e3;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
		table-layout: fixed;
		word-wrap: break-word;
	}
	
	table#booking-results th {
		display: none;
	}
	
	/* Responsive tables */
	
	table#booking-results, 
	table#booking-results thead, 
	table#booking-results tbody, 
	table#booking-results td, 
	table#booking-results tr { 
		display: block; 
	}
	
	table#booking-results tr {
		border-bottom: 4px solid #cccccc;
	}
	
	table#booking-results td,
	table#booking-results tr.odd td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc; 
		position: relative;
		padding-left: 50% !important;
		padding-bottom: 20px;
	}
	
	table#booking-results td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45% !important; 
		padding-right: 10px; 
		white-space: pre;
	}
	
	table#booking-results tr.odd td {
		background-color: white;
	}
	
	table#booking-results td:nth-of-type(1):before { 
		content: "Client ID";
		font-weight: bold;
	}
	
	table#booking-results td:nth-of-type(2):before { 
		content: "Number\APlate";
		font-weight: bold;
	}
	
	table#booking-results td:nth-of-type(3):before { 
		content: "Type";
		font-weight: bold;
	}
	
	table#booking-results td:nth-of-type(4):before { 
		content: "Description"; 
		font-weight: bold;
	}
	table#booking-results td:nth-of-type(5):before { 
		content: "Status"; 
		font-weight: bold;
	}
	table#booking-results td:nth-of-type(6):before { 
		content: "Date/Time"; 
		font-weight: bold;
	}
	table#booking-results td:nth-of-type(7):before { 
		content: "Amount (\0024)"; 
		font-weight: bold;
	}





	table#vehicle-list {
		width: 100%;
		margin: 0;
		border: 1px solid #e4e4e3;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
		table-layout: fixed;
		word-wrap: break-word;
	}
	
	table#vehicle-list th {
		display: none;
	}
	
	/* Responsive tables */
	
	table#vehicle-list, 
	table#vehicle-list thead, 
	table#vehicle-list tbody, 
	table#vehicle-list td, 
	table#vehicle-list tr { 
		display: block; 
	}
	
	table#vehicle-list tr {
		border-bottom: 4px solid #cccccc;
	}
	
	table#vehicle-list td,
	table#vehicle-list tr.odd td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc; 
		position: relative;
		padding-left: 50% !important;
		padding-bottom: 36px;
	}
	
	table#vehicle-list td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45% !important; 
		padding-right: 10px; 
		white-space: pre;
	}
	
	table#vehicle-list tr.odd td {
		background-color: white;
	}
	
	table#vehicle-list td:nth-of-type(1):before { 
		content: "Vehicle\ARegistration";
		font-weight: bold;
	}
	
	table#vehicle-list td:nth-of-type(2):before { 
		content: "Vehicle Make";
		font-weight: bold;
	}
	
	table#vehicle-list td:nth-of-type(3):before { 
		content: "Vehicle Model";
		font-weight: bold;
	}
	
	table#vehicle-list td:nth-of-type(4):before { 
		content: "Vehicle Colour"; 
		font-weight: bold;
	}
	table#vehicle-list td:nth-of-type(5):before { 
		content: "Delete"; 
		font-weight: bold;
	}




	table#vehicle-list-sum {
		width: 100%;
		margin: 0;
		border: 1px solid #e4e4e3;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
		table-layout: fixed;
		word-wrap: break-word;
	}
	
	table#vehicle-list-sum th {
		display: none;
	}
	
	/* Responsive tables */
	
	table#vehicle-list-sum, 
	table#vehicle-list-sum thead, 
	table#vehicle-list-sum tbody, 
	table#vehicle-list-sum td, 
	table#vehicle-list-sum tr { 
		display: block; 
	}
	
	table#vehicle-list-sum tr {
		border-bottom: 4px solid #cccccc;
	}
	
	table#vehicle-list-sum td,
	table#vehicle-list-sum tr.odd td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc; 
		position: relative;
		padding-left: 50% !important;
		padding-bottom: 36px;
	}
	
	table#vehicle-list-sum td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45% !important; 
		padding-right: 10px; 
		white-space: pre;
	}
	
	table#vehicle-list-sum tr.odd td {
		background-color: white;
	}
	
	table#vehicle-list-sum td:nth-of-type(1):before { 
		content: "Vehicle\ARegistration";
		font-weight: bold;
	}
	
	table#vehicle-list-sum td:nth-of-type(2):before { 
		content: "Vehicle Make";
		font-weight: bold;
	}
	
	table#vehicle-list-sum td:nth-of-type(3):before { 
		content: "Vehicle Model";
		font-weight: bold;
	}
	
	table#vehicle-list-sum td:nth-of-type(4):before { 
		content: "Vehicle Colour"; 
		font-weight: bold;
	}
	
	
	/* Footer
	---------------------------------------------------------------------------------------------- */
	
	#footer {
		margin: 0;
		background-color: #363636;
		min-height: 160px;
		border-top: 1px solid #000000;
	}
	
	#footer-text {
		width: 90%;
		margin: 0 5%;
		padding: 15px 0;
		text-align: center;
	}
	
	#footer-text p {
		font-size: 1.2em; /* 12px */
		color: #999999;
		font-weight: 400;
		float: none;
	}
	
	#footer-text p br {
		display: block;
	}
	
	img.footer-logo {
		max-width: 180px;
		height: auto;
		float: none;
		margin: 20px auto;
		clear: both;
	}

}