/******************************************************************************
** BASICS *********************************************************************
******************************************************************************/

body {
	border-width: 0;
	padding: 0;
	margin: 0;
	background: #233881;
	color: #333333;
	vertical-align: top;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
	text-align: left;
}

a {
	color: #d9222a;
	text-decoration: none;
}

a:hover {
	color: #d9222acc;
}

select {
	height: 2em;
	font-size: 16px;
	font-weight: 300;
	background: #fff;
	-webkit-border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	-o-border-radius: 0.3em;
	border-radius: 0.3em;
	line-height: 2em;
	margin: 0.3em;
}

input, textarea {
	display: inline-block;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #333333;
	line-height: 2em;
	padding: 0px 0.5em;
	margin: 0.3em;
	border-radius: 0.3em;
	border: solid 1px #d6d6d6;
}

input[type="checkbox"], input[type="radio"] {
	cursor: pointer;
}

.bold { font-weight: bold; }
.blue { color: #233881; }
.red  { color: #d9222a; }
.icon { color: #233881; }

clear-floats {
	display:block; clear: both;
}

busy-spinner {
	display: inline-block;
	border: 0.3em solid #ddd;
	border-top: 0.3em solid #d9222a;
	border-radius: 50%;
	width: 3em;
	height: 3em;
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

tick-box, radio-button {
	display: inline-block;
	width: 1.6em;
	height: 1.6em;
	border: 1px solid #999;
	background-color: #ddd;
	margin-right: 0.5em;
	cursor: pointer;
	line-height: 1.6em;
	border-radius: 2px;
}

radio-button {
	border-radius: 0.8em;
}

tick-box:hover, radio-button:hover {
	background-image: url("images/check_dark.svg");
}

tick-box[ticked="1"], radio-button[ticked="1"] {
	background-color: #d9222a;
	border: 1px solid #d9222a;
	background-image: url("images/check_light.svg");
}

@media only screen and (max-width: 1000px) {

	tick-box, radio-button {
		width: 2em;
		height: 2em;
	}

	radio-button {
		border-radius: 1em;
	}

}

.button_active, .button_inactive {
	display: inline-block;
	margin: 0.3em;
	min-width: auto;
	height: 2em;
	padding: 0 1em;
	background: #aaa;
	border:0 none;
	color: #fff;
	font-weight: 400;
	line-height: 2em;
	cursor: default;
	border-radius: 0.5em;
	background-color: #d9222a;
}
.button_active:hover { background-color: #d9222acc; }
.button_inactive { background-color: #aaa; }
.button_inactive:hover { background-color: #aaa; }


/******************************************************************************
** THE GRID *******************************************************************
******************************************************************************/

page-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1em 50px 1fr 3em;
	grid-gap: 0px;
	grid-template-areas:
		"..."
		"header"
		"main"
		"footer";
	margin: 0 auto 0 auto;
	min-height: 100vh;
	height: 100vh;
	padding: 0;
	overflow: scroll;
	background: #233881;
}

page-header {
	grid-area: header;
	display: grid;
	grid-template-columns: 1em 2fr 6fr 2fr 1em;
	grid-template-rows: 1fr;
	grid-gap: 0px;
	grid-template-areas:
		"... menu logo usc ...";
	margin: 0;
	padding: 0;
	align-items: center;
	color: #fff;
	text-align: center;
	font-size: 24px;
}

page-menu {
	grid-area: menu;
}

page-logo {
	grid-area: logo;
}

page-right {
	grid-area: usc;
}

page-content {
	grid-area: main;
	align-items: start;
}

page-footer {
	grid-area: footer;
	color: #eee;
	line-height: 3em;
	text-align: center;
	overflow: hidden;
}

img.logo {
	height: 40px;
}

navigation-menu {
	display: none;
	position: absolute;
	top: 2px;
	left: 2px;
	background: #d9222a;
	text-align: left;
	padding: 1em;
	border-radius: 0 0 1em 0;
}

navigation-menu a {
	display: block;
	color: #fff;
	margin: 1em;
	font-size: 24px;
	font-weight: bold;
	text-decoration: none;
}

navigation-menu a:hover {
	color: #233881;
}


/******************************************************************************
** INFO ***********************************************************************
******************************************************************************/

plain-page {
	display: block;
	font-size: 16px;
	margin: 1em;
	padding: 1em 0 1em 0;
	background: #eee;
	text-align: left;
	font-weight: bold;
	border-radius: 1em;
	height: auto;
}

page-title {
	display: inline-block;
	font-size: 20px;
	color: #fff;
	background: #233881;
	padding: 0.5em 1.5em 0.5em 1.5em;
	border-radius: 0 2em 2em 0;
}

page-body {
	display: block;
	font-weight: normal;
	padding: 0 1.5em;
}

image-right {
	display: block;
	float: right;
	width: 45%;
	padding: 0 0 1em 1em;
}

image-right img {
	width: 100%;
}

bus-card {
	display: block;
	text-align: center;
	padding: 1em 0;
}

bus-card img {
	display: inline-block;
	border-radius: 1em;
	overflow: hidden;
}

@media only screen and (max-width: 1000px) {

	image-right {
		float: none;
		width: 100%;
		padding: 1.5em 0 0 0;
	}

	bus-card img {
		max-width: 100%;
	}

}


hours-all {
	display: block;
}

hours-heading {
	display: block;
	margin-bottom: 10px;
}

hours-box {
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-gap: 4px;
	grid-template-areas:
		"day time";
	margin-left: 20px;
	padding: 0;
	align-items: center;
	text-align: left;
}

hours-day {
	grid-area: day;
	color: #233881;
}

hours-time {
	grid-area: time;
}

/******************************************************************************
** SCHOOL *********************************************************************
******************************************************************************/

school-section {
	display: block;
	margin: 1em;
	padding: 1em;
	background: #eee;
	text-align: center;
	font-weight: bold;
	border-radius: 1em;
	height: 3em;
	line-height: 3em;
}

img.uni_logo {
	height: 12px;
}

shop-intro {
	display: block;
	margin: 1em;
	padding: 1em 2em;
	background: #eee;
	text-align: left;
	font-weight: bold;
	border-radius: 1em;
}

shop-header {
	display: block;
	font-weight: bold;
	color: #d9222a;
	font-size: 20px;
	padding-top: 10px;
}



/******************************************************************************
** PRODUCTS *******************************************************************
******************************************************************************/

product-section {
	display: block;
	margin: 1em;
	padding: 1em;
	background: #eee;
	text-align: center;
	border-radius: 1em;
}

product-filter {
	display: grid;
	grid-template-columns: 1em auto 1em 1fr 3em;
	grid-template-rows: auto auto;
	grid-gap: 0;
	grid-template-areas:
		"... triangle ... input ...";
	margin: 0 auto 10 auto;
	padding: 0;
	text-align: center;
	align-items: center;
	overflow: hidden;
}

filter-triangle {
	grid-area: triangle;
	font-size: 40px !important;
}

filter-label {
	grid-area: label;
	color: #233881;
	font-style: italic;
	text-align: right;
}

filter-input {
	grid-area: input;
}

input#filter {
	width: auto;
}

product-picker {
	display: block;
}

product-box {
	display: grid;
	grid-template-columns: 80px 1em auto 1em 1fr 1em 120px 1em 60px;
	grid-template-rows: auto;
	grid-template-areas:
		"image ... code ... title ... price ... adder";
	grid-gap: 0;
	margin: 0 auto 10 auto;
	padding: 0;
	text-align: center;
	border-radius: 1em;
	background: #fff;
	align-items: center;
	overflow: hidden;
}

product-image {
	grid-area: image;
	overflow: hidden;
}

product-code {
	grid-area: code;
	text-align: left;
	font-style: italic;
	color: #aaa;
}

product-title {
	grid-area: title;
	text-align: left;
	margin: 0 10px 4px 10px;
}

product-price {
	grid-area: price;
	text-align: right;
}

product-add {
	grid-area: adder;
	margin: 10;
	padding: 10;
	background: #d9222a;
	color: #fff;
	cursor: pointer;
	border-radius: 3em;
}

@media only screen and (max-width: 1000px) {

	product-box {
		grid-template-columns: 80px auto 1fr 60px;
		grid-template-rows: auto auto;
		grid-template-areas:
			"image code price adder"
			"title title title title";
	}

}

/******************************************************************************
** CART ***********************************************************************
******************************************************************************/

cart-section {
	display: block;
	margin: 1em;
	background: #eee;
	border-radius: 1em;
	padding: 0;
}

cart-label {
	display: block;
	text-align: center;
	padding-top: 1em;
	font-weight: bold;
}

cart-list {
	display: block;
}

cart-list > *:nth-child(odd) {
	background: #f6f6f6;
}

cart-category {
	display: block;
	padding: 2px 2px 2px 10px;
	background: #ccc;
	color: #fff;
	font-weight: bold;
	border-top: 1px solid #bbb;
}

cart-item, cart-head, cart-off, cart-total, cart-gst {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 0;
	grid-template-areas:
		"image title price qty total tick";
	margin: 0 auto 0 auto;
	padding: 0;
	align-items: center;
	text-align: center;
}

cart-item, cart-off {
	border-top: 1px solid #233881;
}

cart-head {
	grid-template-rows: 2em;
	line-height: 2em;
	color: #888;
	font-style: italic;
}

cart-off {
	color: #ccc;
	font-style: italic;
}

cart-total {
	grid-template-rows: 2em;
	line-height: 2em;
	background: #d9222a;
	font-weight: bold;
	color: #fff;
	border-top: 2px solid #233881;
}

cart-gst {
	grid-template-rows: 2em;
	line-height: 2em;
	grid-template-columns: 7fr 1fr 1fr;
	grid-template-areas:
		"label gst ...";
	text-align: right;
	color: #888;
}

gst-label {
	grid-area: label;
}

gst-total {
	grid-area: gst;
	padding-right: 1em;
}

item-image {
	grid-area: image;
	overflow: hidden;
}

img.product {
	display: inline-block;
	height: 3em;
	margin: 0.5em 0 0.5em 1em;
	border-radius: 0.1em;
}

item-code {
	grid-area: code;
}

item-name {
	grid-area: title;
	text-align: left;
	margin: 0 10px 4px 10px;
}

item-qty {
	grid-area: qty;
}

item-qty input {
	display: inline-block;
	max-width: 2em;
	width: 2em;
	text-align: center;
}

item-qty input:disabled {
	background: #eee;
	color: #ccc;
}

item-price {
	grid-area: price;
	text-align: right;
	padding-right: 1em;
}

item-total {
	grid-area: total;
	text-align: right;
	padding-right: 1em;
}

item-tick {
	grid-area: tick;
}

cart-head item-tick {
	margin-top: 0;
}

@media only screen and (max-width: 1000px) {

	cart-head, cart-item, cart-off, cart-total {
		grid-template-columns: 80px 1fr 1fr 1fr 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
			"image price qty total tick"
			"title title title title title";
	}

	cart-head, cart-total {
		grid-template-rows: auto;
		grid-template-areas:
			"image price qty total tick";
	}

	cart-head item-image, cart-head item-name,
	cart-total item-image, cart-total item-name {
		display: none;
	}

	cart-gst {
		grid-template-columns: 3fr 1fr 1fr;
	}

	gst-total, item-total, item-price {
		padding-right: 0.3em;
	}

}



/******************************************************************************
** STUDENT ********************************************************************
******************************************************************************/

student-section  {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 2em 2em 2em 2em;
	grid-gap: 7px;
	grid-template-areas:
		"head head"
		"first _first"
		"last _last"
		"email _email"
		"phone _phone";
	text-align: left;
	line-height: 2em;
	margin: 1em;
	background: #eee;
	border-radius: 1em;
	padding: 1em;
	align-items: center;
}

student-heading {
	grid-area: head;
	text-align: center;
	font-weight: bold;
}

id-label { grid-area: id; text-align: right; }
id-input { grid-area: _id; }
id-input input { width: 5em; }
valid-id { display: none; }
valid-id i { color: #d9222a; }

firstname-label { grid-area: first; text-align: right; }
firstname-input { grid-area: _first; }
firstname-input input { width: 10em; }

lastname-label { grid-area: last; text-align: right; }
lastname-input { grid-area: _last; }
lastname-input input { width: 10em; }

email-label { grid-area: email; text-align: right; }
email-input { grid-area: _email; }
email-input input { width: 15em; }

phone-label { grid-area: phone; text-align: right; }
phone-input { grid-area: _phone; }
phone-input input { width: 10em; }

@media only screen and (max-width: 1000px) {

	student-section  {
		grid-template-columns: 2fr 3fr;
	}

	email-input input { width: 12em; }

}



/******************************************************************************
** CHECKOUT *******************************************************************
******************************************************************************/

checkout-section {
	display: none;
	grid-template-columns: 1fr 3fr;
	grid-column-gap: 0.5em;
	grid-row-gap: 1em;
	grid-template-areas:
		"intro intro"
		"_collect collect"
		"_card card"
		"_deliver deliver";
	margin: 1em;
	text-align: left;
	line-height: auto;
	border-radius: 1em;
	padding: 1em;
	background: #eee;
}

choice-label {
	grid-area: intro;
	font-weight: bold;
	text-align: center;
}

label-collect { grid-area: collect; cursor: pointer; }
input-collect { grid-area: _collect; text-align: right; }

label-card { grid-area: card; cursor: pointer; }
input-card { grid-area: _card; text-align: right; }

label-delivery { grid-area: deliver; cursor: pointer; }
input-delivery { grid-area: _deliver; text-align: right; }

@media only screen and (max-width: 1000px) {

	checkout-section {
		grid-template-columns: 1fr 8fr;
	}

}



/** collect **************************************************************/

collect-section {
	display: none;
	grid-template-columns: 1fr;
	grid-template-rows: 2em 2em;
	grid-gap: 0.5em;
	grid-template-areas:
		"intro"
		"payment"
		"go";
	margin: 1em;
	padding: 1em;
	text-align: center;
	line-height: 2em;
	border-radius: 1em;
	background: #eee;
}

collect-intro {
	grid-area: intro;
	font-weight: bold;
}

collect-payment {
	grid-area: payment;
}

collect-total {
	color: #233881;
	font-weight: bold;
}

collect-go {
	grid-area: go;
}



/** address **************************************************************/

address-section {
	display: none;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 2em 2em 2em 2em 2em;
	grid-gap: 0.5em;
	grid-template-areas:
		"head head"
		"street _street"
		"street2 _street2"
		"suburb _suburb"
		"state _state"
		"postcode _postcode";
	margin: 1em;
	padding: 1em;
	text-align: left;
	line-height: 2em;
	border-radius: 1em;
	background: #eee;
	align-items: center;
}

address-heading {
	grid-area: head;
	text-align: center;
	font-weight: bold;
}

street-label { grid-area: street; text-align: right; }
street-input { grid-area: _street; }
street-input input { width: 12em; }

street2-label { grid-area: street2; text-align: right; }
street2-input { grid-area: _street2; }
street2-input input { width: 12em; }

suburb-label { grid-area: suburb; text-align: right; }
suburb-input { grid-area: _suburb; }
suburb-input input { width: 10em; }

state-label { grid-area: state; text-align: right; }
state-input { grid-area: _state; }

postcode-label { grid-area: postcode; text-align: right; }
postcode-input { grid-area: _postcode; }
postcode-input input { width: 4em; }

@media only screen and (max-width: 1000px) {

	address-section {
		grid-template-columns: 1fr 3fr;
	}

}



/** card **************************************************************/

card-section {
	display: none;
	grid-template-columns: 5fr 6fr;
	grid-template-rows: 2em auto 2em 2em 2em 2em;
	grid-gap: 0.5em;
	grid-template-areas:
		"intro intro"
		"total total"
		"card _card"
		"expiry _expiry"
		"name _name"
		"cvv _cvv"
		"... button";
	margin: 1em;
	padding: 1em;
	text-align: left;
	line-height: 2em;
	border-radius: 1em;
	background: #eee;
}

card-intro {
	grid-area: intro;
	text-align: center;
	font-weight: bold;
}

card-payment {
	grid-area: total;
	text-align: center;
}

card-total, card-discount {
	color: #233881;
	font-weight: bold;
}

card-number {
	grid-area: card;
	text-align: right;
}

card-numberin {
	grid-area: _card;
}

card-numberin input {
	width: 12em;
}

card-expiry {
	grid-area: expiry;
	text-align: right;
}

card-expiryin {
	grid-area: _expiry;
}

#card_month {
	width: 3.5em;
}

#card_year {
	width: 5em;
}

card-name {
	grid-area: name;
	text-align: right;
}

card-namein {
	grid-area: _name;
}

card-namein input {
	width: 12em;
}


card-cvv {
	grid-area: cvv;
	text-align: right;
}

card-cvvin {
	grid-area: _cvv;
}

card-cvvin input {
	width: 3em;
	text-align: center;
}

card-go {
	grid-area: button;
}



/***********************************************************************************
** THANKS **************************************************************************
***********************************************************************************/

thank-you {
	display: none;
	margin: 1em;
	padding: 1em;
	text-align: center;
	line-height: 2em;
	border-radius: 1em;
	background: #eee;
}

thanks-busy {
	display: block;
	margin: 1em;
	color: #d9222a;
}

thanks-busy > busy-spinner {
	margin: 0.5em;
}

thanks-ok {
	display: none;
}

thanks-error, thanks-complete {
	display: none;
	color: #d9222a;
	font-weight: bold;
}

thanks-error {
	color: #233881;
}

thanks-message {
	display: block;
	color: #233881;
	margin: 1em;
}

error-message {
	display: block;
	color: #d9222a;
	margin: 1em;
}


/***********************************************************************************
** CAPTCHA *************************************************************************
***********************************************************************************/

captcha-section {
	display: block;
	margin: 1em;
	padding: 1em;
	background: #eee;
	text-align: center;
	border-radius: 1em;
}

captcha-blurb {
	display: inline-block;
}

.grecaptcha-badge {
	visibility: hidden;
}

img.grecaptcha-logo {
	display: inline-block;
	height: 42px;
	margin-right: 14px;
}


/***********************************************************************************
** UNDER CONSTRUCTION **************************************************************
***********************************************************************************/

under-construction {
	display: block;
	margin: 2em;
	padding: 2em;
	background: #eee;
	text-align: center;
	line-height: 30px;
	border-radius: 10px;
	color: #d9222a;
	font-weight: bold;
}