@charset "UTF-8";

@font-face {
	font-family: "Mai";
	src: url('../_fonts/maian-webfont.woff2') format('woff2'),
url('../_fonts/maian-webfont.woff') format('woff'),
url('../_fonts/MAIAN.TTF') format('truetype');
}

/* Global Content Formatting and Styles. Styles for large screens greater than 1100px and inherited by other screens. */

body {
	margin: 0px;
	padding: 0px;
	color: #000000;
	line-height: 1.5em;
	font-family: Mai;
	font-size: 14px;
}

.ShowIt {
	background-color: #222;
	background-image: url(../images/adorationmuted.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;
}

.Container {
	width: auto;
	margin: 5% 10%;
	position: relative;
	background-color: rgba(255, 255, 255, 0.5);
	text-align: center;
}

h1 {
	font-size: 2.5em;
	font-weight: bold;
	color: #573C00;
	margin: 0 0 0.5em 0;
}

h2 {
	font-size: 1.7em;
	margin: 0 0 1em 0;
}

h3 {
	font-size: 1.5em;
	margin: 0 0 1em 0;
}

a {
	color: gray;
}

article {
	padding: 20px 20px 20px 20px;
	min-height: 70px;
	clear: both;
}

.AdoreButton {
	display: inline-block;
	font-family: Mai;
	font-size: 1.3em;
	text-align: center;
	color: #fff;
	padding: 6px 12px;
	margin: 10px;
    background-color: rgba(136,94,0,0.75);
    border: 0 none;
    cursor: pointer;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	-webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
	box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.5);
}

.AdoreButton:hover {
	color: #444;
	background-color: rgba(187,128,0,0.75);
}

.signupContainer {
	display: block;
	width: auto;
	margin: 0 3% 0 3%;
}

.signupBlock {
	float: left;
	clear: none;
	display: inline-block;
	width: 27%;
	margin: 0px;
}

.signupBlockV { /*V is for visible*/
	float: left;
	clear: none;
	display: inline-block;
	width: 19%;
	margin: 0px;
}

.signupBlockH { /*H is for hidden*/
	float: left;
	clear: none;
	display: none;
	width: 19%;
	margin: 0px;
}

.signupDay {
	font-size: 1.4em;
	font-weight: bold;
	color: #BB8000;
	background-color: rgba(68,68,68,0.75);
	padding: 5px;
}

.signupSlot1 {
	font-size: 1.1em;
	background-color: rgba(200,200,200,0.60);
	margin: 0px;
	padding: 3px 0px 0px 0px;
}

.signupSlot2 {
	font-size: 1.1em;
	background-color: rgba(200,200,200,0.60);
	margin: 0px 0px 3px 0px;
	padding: 0px 0px 3px 0px;
}

.signupSlot3 {
	font-size: 1.1em;
	background-color: rgba(200,200,200,0.90);
	margin: 0px;
	padding: 3px 0px 0px 0px;
}

.signupSlot4 {
	font-size: 1.1em;
	background-color: rgba(200,200,200,0.90);
	margin: 0px 0px 3px 0px;
	padding: 0px 0px 3px 0px;
}

input[type="checkbox"] {
	display: none;
}
label {
	cursor: pointer;
	color: blue;
}

input[type="checkbox"] + label:before {
	border: 2px solid #ffffff;
	content: "\00a0";
	display: inline-block;
	height: 12px;
	width: 12px;
	margin: 2px 5px 0 0;
	padding: 0;
	vertical-align: top;
}

input[type="checkbox"]:checked + label:before {
	background: #fff;
	color: #666;
	content: "\2713";
	text-align: center;
	font-weight: bold;
	line-height: 0.8em; /*adjusts the vertical alignment of the check mark*/
}

input[type="checkbox"]:checked + label:after {
	font-weight: bold;
}

input[type="text"] {
    width: 38%;
    height: 13px;
}

/*keeps ios from restyling the form buttons - maybe*/
input[type=submit] {
 -webkit-appearance: none;
}

.slotTaken {
	color: #BB8000;
	font-weight: bold;
}

.formLabel {
	margin: 0px 0px 5px 0px;
	font-size: 1.6em;
	font-weight: bold;
}

.formInput {
	margin: 0px;
}

.ShowItPrint {
	background-color: #fff;
	background-image: none;
}

.ContainerPrint {
	width: auto;
	margin: 5%;
	position: relative;
	background-color: #fff;
	text-align: center;
}

.signupContainerPrint {
	display: block;
	width: auto;
	margin: 0 2% 0 2%;
	text-align: left;
	position: relative;
}

.signupDayPrint {
	font-size: 1.3em;
	font-weight: bold;
	color: #000;
	background-color: #fff;
	padding: 20px 0px 3px 0px;
	margin-bottom: 10px;
	float: left;
	clear: both;
	width: 100%;
	border-bottom: #000 thick solid;
}

.signupLinePrint1 {
	display: block;
	margin: 0px 10px 0px 50px;
	padding: 5px 0px;
	width: 90%;
	float: left;
	clear: both;
	border-bottom: #000 thin solid;
	position: relative;
	page-break-after: avoid;
}

.signupLinePrint2 {
	display: block;
	margin: 0px 10px 0px 50px;
	padding: 5px 0px;
	width: 90%;
	float: left;
	clear: both;
	border-bottom: #000 medium solid;
	position: relative;
	page-break-before: avoid;
}

.signupSlotPrint {
	font-size: 1.0em;
	font-weight: bold;
	color: #000;
	background-color: #fff;
	width: 170px;
	float: left;
	clear: both;
	position: relative;
	page-break-inside: avoid;
}

.signupNamePrint {
	font-size: 1.0em;
	color: #000;
	background-color: #fff;
	float: left;
	clear: none;
	position: relative;
	page-break-inside: avoid;
}

.pageBreak {
	page-break-after: always;
}

.footerdiv {
	color: #573C00;
	font-weight: bold;
	background-color: transparent;
	text-align: center;
	font-size: 1.4em;
}


@media  only screen and (min-width: 851px) and (max-width: 1100px){
	.Container {
		margin: 5% 5%;
	}
	
	.signupContainer {
		margin: 0 2% 0 2%;
	}

}

@media  only screen and (min-width: 651px) and (max-width: 850px){
	
	.Container {
		margin: 5% 5%;
	}
	
	.signupContainer {
		margin: 0 2% 0 2%;
	}

	h1 {
		font-size: 2.3em;
	}

	h2 {
		font-size: 1.6em;
	}

	h3 {
		font-size: 1.4em;
	}
	
	.AdoreButton {
		font-size: 1.1em;
		padding: 3px 8px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}

	.signupDay {
		font-size: 1.3em;
		padding: 5px;
	}

	.signupSlot1 {
		font-size: 0.9em;
	}

	.signupSlot2 {
		font-size: 0.9em;
	}

	.signupSlot3 {
		font-size: 0.9em;
	}

	.signupSlot4 {
		font-size: 0.9em;
	}
	
	input[type="checkbox"] + label:before {
		height: 10px;
		width: 10px;
		margin: 2px 5px 0 0;
	}

	input[type="checkbox"]:checked + label:before {
		line-height: 0.9em; /*adjusts the vertical alignment of the check mark*/
	}
}

@media  only screen and (min-width: 501px) and (max-width: 650px){
	
	.Container {
		margin: 5% 5%;
	}

	.ShowIt {
		background-image: none;
	}
	
	h1 {
		font-size: 2.3em;
	}

	h2 {
		font-size: 1.4em;
	}

	h3 {
		font-size: 1.2em;
	}
	
	.AdoreButton {
		font-size: 1.1em;
		padding: 3px 8px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	
	.signupBlock {
		width: 60%;
		margin-bottom: 20px;
	}

	.signupBlockV {
		width: 40%;
		margin-bottom: 20px;
	}

	.signupBlockH {
		display: inline-block;
		width: 40%;
		margin-bottom: 20px;
	}

	.signupDay {
		font-size: 1.4em;
		padding: 5px;
	}

	.signupSlot1 {
		font-size: 1.1em;
	}

	.signupSlot2 {
		font-size: 1.1em;
	}

	.signupSlot3 {
		font-size: 1.1em;
	}

	.signupSlot4 {
		font-size: 1.1em;
	}
}

@media  only screen and (max-width: 500px){
	
	.Container {
		margin: 2%;
	}
	
	article {
		padding: 10px 5px;
	}
	
	.signupContainer {
		margin: 0px;
	}
	
	.ShowIt {
		background-image: none;
	}
	
	h1 {
		font-size: 1.8em;
	}

	h2 {
		font-size: 1.1em;
	}

	h3 {
		font-size: 1.2em;
	}
	
	.AdoreButton {
		font-size: 1.1em;
		padding: 3px 8px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	
	.signupBlock {
		width: 65%;
		margin-bottom: 20px;
	}

	.signupBlockV {
		width: 35%;
		margin-bottom: 20px;
	}

	.signupBlockH {
		display: inline-block;
		width: 35%;
		margin-bottom: 20px;
	}

	.signupDay {
		font-size: 1.2em;
		padding: 5px;
	}

	.signupSlot1 {
		font-size: 0.8em;
	}

	.signupSlot2 {
		font-size: 0.8em;
	}

	.signupSlot3 {
		font-size: 0.8em;
	}

	.signupSlot4 {
		font-size: 0.8em;
	}
	
	input[type="checkbox"] + label:before {
		height: 10px;
		width: 10px;
		margin: 2px 2px 0 0;
	}

	input[type="checkbox"]:checked + label:before {
		line-height: 0.9em; /*adjusts the vertical alignment of the check mark*/
	}
}