:root {
	--font-family: verdana, sans-serif;
	--font-size: 14px;
	--background1: #003D53; /* navy */
	--foreground1: #fff;
	--background2: #E65409; /* orange */
	--foreground2: #fff;
	--background3: #f7f7f7;
	--foreground3: #000;
	--background4: #f0f0f0;
	--foreground4: #000;
}

body {
	font-family: var(--font-family);
	font-size: var(--font1-size);
	line-height:1.5;
	margin:0;
	padding:0;
	accent-color: var(--background2);
	
	max-width:400px;
	margin:0 auto;
	background:#ccc;
}

header {
	position:relative;
	background-color:#fff;
	background-image:url(/img/p4w.jpg?r=1);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center center;
	height:40vw;
	max-height:200px;
	border-bottom:10px solid var(--background1);
	-webkit-box-shadow:0 0 3px 0 rgba(0,0,0,.5);
	box-shadow:0 0 3px 0 rgba(0,0,0,.5);
}
	header a {
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
	}

.walk_leaders header {
	background-image:url(/img/puffins.png);	
}

main {
	padding:1rem;
	background-color:#fff;
}

.msg {
	background:yellow !important;
	color:#000 !important;
}

table {
	width:100%;
}
	tr {
		background:var(--background3);
		color:var(--foreground3);		
	}
		tr:nth-child(even) {
			background:var(--background4);
			color:var(--foreground4);		
		}
	th {
		background:var(--background1);
		color:var(--foreground1);
		padding:10px 6px;
		text-align:left;
		vertical-align:top;
	}
	td {
		padding:8px 6px;
	}

table + form,
table + table {
	margin-top:1rem;
}

form.pform + form.pform {
	margin-top:1rem;
}

form.pform fieldset {
	background:var(--background4);
	color:var(--foreground4);
	border:1px solid var(--background1);
	-webkit-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;
}
	form.pform fieldset:last-child {
		margin-bottom:0;
	}
form.pform legend {
	background:var(--background1);
	color:var(--foreground1);
	border:1px solid var(--background1);
	-webkit-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;
}
form.pform input {
	box-sizing:border-box;
	background-color:#fff;
	-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,.5);
	box-shadow:inset 0 0 3px 0 rgba(0,0,0,.5);
	-webkit-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;
}
form.pform input[type=submit] {
	background:var(--background2);
	color:var(--foreground2);	
	border:1px solid var(--background1);
	-webkit-box-shadow:0 0 3px 0 rgba(0,0,0,.5);
	box-shadow:0 0 3px 0 rgba(0,0,0,.5);
}
form.pform input[type=submit]:active {
	background:green;
}
form.pform select,
form.pform textarea {
	box-sizing:border-box;
	background-color:#fff;
	-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,.5);
	box-shadow:inset 0 0 3px 0 rgba(0,0,0,.5);
	-webkit-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;
}

p {
	padding:0.5rem 0;
}

button,
a.button {
	display:inline-block;
	padding:.5rem 1rem;
	background:var(--background2);
	color:var(--foreground2);	
	border:1px solid var(--background1);
	-webkit-box-shadow:0 0 3px 0 rgba(0,0,0,.5);
	box-shadow:0 0 3px 0 rgba(0,0,0,.5);
	text-decoration:none;
}
	a.button:active {
		background:green;
	}

footer {
	text-align:center;
	padding:.5rem;
	background:var(--background1);
	color:var(--foreground1);
	font-size:.9rem;
}
	footer a {
		color:var(--foreground1);
	}

.tal {
	text-align:left;
}
.tac {
	text-align:center;
}
.tar {
	text-align:right;
}
.emailfit {
	font-family:tahoma;
	font-size:12px;
}

#upload_status {
	font-size:13px;
}
	#upload_status span {
		display:block;
		padding:2px 0;
	}
	#upload_status a {
		float:right;
	}

.faux_email {
	background:#eef;
	border:1px solid #ccf;
	margin-bottom:1rem;
}
	.faux_email div {
		padding:.4rem .5rem;
		border-top:1px dashed #ccf;
	}
	.faux_email_subject {
		background:#ccf;
		border-top:0;
	}
	.faux_email_attachments span {
		display:block;
	}


.smalltext {
	font-size:12px;
}
	
@media only screen and (max-width: 600px) {

	form.pform input[type="checkbox"] {
		-ms-transform: scale(1.3); /* IE */
		-moz-transform: scale(1.3); /* FF */
		-webkit-transform: scale(1.3); /* Safari and Chrome */
		-o-transform: scale(1.3); /* Opera */
		transform: scale(1.3);
	}
	
	.nomobile {
		display:none;
	}
	
}

@media only screen and (min-width: 601px) {

	form.pform input[type="checkbox"] {
		width:20px !important;
		height:20px !important;
	}
	
}