﻿/* -------------------- home page -------------- */
#headlines,
.marquee		  	 { 	margin-top: 5px;
						border: 0;
						width: 100%;
					   	background-color: #800000;	}
#headlines td		{	text-align: left;
						padding: 0	}
#headlines td+td	{	width: 120px;
						text-align: right;
						padding: 10px	}
#headlines #newsbox	{	width: 100%;
						overflow: hidden	}
#headlines p		{	margin: 5px;
						position: relative	}
#headlines p,
#headlines a		{	color: white;
						font-weight: bold;
			   			font-style: italic;
			   			white-space: nowrap	}
#headlines p:focus,
#headlines a:focus	{	color: blue;	}

p.bookings	{	
	float: right; 
	margin: 10px 0 5px 20px;
	}
#banner, 
p.banner	{
	max-width: 600px;
	min-width: 300px;
	margin: 10px auto 0;
	border: 3px solid red;
	background-color: #FFFFD0;
	padding: 10px;
	font-weight: bold;
	color: red;
	text-align: center;
	overflow: hidden;
	}

#quick	{ 
	width: auto;
	margin: 20px auto 10px;
	}
#quick td	{ 
	padding: 0 10px;
	}
#quick td:first-child	{
	vertical-align: top;
	text-align: left;
	padding-left: 0;
	white-space:nowrap;
	line-height: 175%;
	}
#quick td:last-child	{ 
	text-align: center;
	padding-right: 0;
	line-height: 100%;
	}
#quick span		{ font-size: smaller;
				  font-style: italic;	}

video {
	float: left;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 0;
	}
#CAvideo	{	
	float: left;
	width: 560px;
	height: 315px;
	margin: 10px 10px 10px 0;
	}
#hoop_shots {
	float: left;
	width: 330px;
	height: 266px;
	margin: 0 10px 25px 0;
	}
#game_summary	{	clear: right;
					padding: 10px 0;
					min-width: 500px;	}
#slideshow {
	width: 500px; 
	height: auto;
	}
#slideshow h6 {
	width: 250px;
	margin: auto;
	}
/* -------------------- location -------------- */
#location td {
	vertical-align: top;
	padding: 1px 30px 1px 0;
	}
#location td+td {
	vertical-align: middle;
	}
#location ul {
	margin-right: 100px;
	}
#location li {
	padding: 5px 0 3px;
	}
#location li a {
	position: relative; top: -5px;
	}
/* -------------------- contacts -------------- */
#contacts				{	max-width: 950px;
							margin: auto;	}
#contacts table			{	width: 450px;
							margin: 5px 0 ;
							float: right;
							clear: right;
							border: 2px solid #A0A0A0;
							border-collapse: collapse	}
#contacts caption		{	font-weight: bold;
							font-size: larger	}
#contacts td			{	padding: 5px;
							vertical-align: middle;
							text-align: left;
							border: 2px solid #A0A0A0;
							border-right: 0	}
#contacts .gallery img	{	margin: 2px	}							
#contacts .gallery a img:hover	{	border: 2px solid blue;
									margin: 0	}
#contacts td+td			{	width: 110px;
							border-left: 0;
							text-align: right	}						
#contacts table+div				{	float: left;
									clear: left;
									width: 450px;
									margin-top: 50px	}										
#contacts form,
form.contact					{	width: 450px;
									float: left	}
#contacts form label,
form.contact label				{	display: inline-block;
									width: 60px	}
#contacts form div label,
form.contact div label			{	width: auto	}
#contacts form input,
form.contact input				{	margin: 5px	0 	}
#contacts form fieldset,
form.contact fieldset 			{	margin-top: 15px	}
#contacts form fieldset i,
form.contact fieldset i			{	font-size: smaller;	}
#contacts form textarea,
form.contact textarea			{	width: 430px;
									height: 150px;
									margin: 5px auto	}
#contacts form div img,
form.contact div img			{	margin: 0 5px	}
#contacts form div input,
form.contact div input			{	margin: 0	}
#contacts form img+input,
form.contact img+input			{	position: relative; top: -4px;
									font-size: 120%;}
#contacts form label+input,
form.contact label+input			{	width: 22em	}
#contacts form input[type=tel],
form.contact input[type=tel]		{	width: 8em	}
#contacts form input[type=submit],
form.contact input[type=submit]		{	float: right;
										margin-top: 12px;
										font-size: 100%	}

#contacts tbody.qualifications td {
	line-height: 20px;
	}
/* -------------------- links ----------------- */
#links {
	width: 800px;
	margin: auto;
	}
#links p {
	margin: 0 0 5px 0;
	}
/* -------------------- archives -------------- */
form.arch_opt {
	text-align: center;
	padding: 10px 0;
	}
form.arch_opt,
#archive_group	{
	margin: auto;
	}
form.arch_opt input {
	margin-left: 20px;
	}
#archive_group>tbody>tr>td	{
	vertical-align: top;
	}
	
table.archives				{ margin: auto;
							  border-collapse: collapse;	}
table.archives caption 		{ text-align: left;
							  font-size: 133%; 
							  font-weight: bold;
							  margin: 5px;	}
table.archives col.all		{ background: white		}
table.archives col.AC		{ background: #E0FFFF	}
table.archives col.GC		{ background: #D0FFD0	}
table.archives tr	 		{ text-align: center;
							  vertical-align: middle }
table.archives th,
table.archives td			{ padding: 5px;
							  white-space: nowrap;
							  border: 1px solid black;
							  font-weight: normal }

table.archives tr.narrow	{ font-family: Arial; font-size: 100%	}		/* slightly narrower	*/

table.archives thead th,
table.archives thead td,
table.archives th.hdr,
table.archives td.hdr		{ font-weight: bold	}
table.archives thead tr+tr	{
	height: 60px;
}
table.archives th.multi,
table.archives td.multi		{ text-align: left;
							  line-height: 150%	}

table.archives th a:focus,
table.archives th:hover		{ background: #00C000;	}
table.archives th a:focus,
table.archives th:hover a	{ color: yellow;	}

table.key				{ 	margin: 10px auto;	}
table.key caption		{	text-align: left;
							font-style: italic;	
							font-size: smaller;
							font-weight: normal;	}
table.key td		 	{	padding: 3px 50px 3px 0;
							text-align: left;
							vertical-align: middle }
table.key td img	 	{	margin-right: 5px;	}

/* ------------------- sitemap -------------------- */					
#sitemap 		{	padding: 20px 0 0 0;
					margin-left: 150px	}
#sitemap li		{	position: relative	}
#sitemap img	{	position: absolute; left: -45px; top: 13px	}
#sitemap ul ul 		{	display: none	}
#sitemap ul ul img	{	position: absolute; left: -40px; top: 3px;	}

/*----------- Search -----------------------------------*/
#search				{	width: 600px;
						margin: auto	}
#search table td	{	padding: 1px 10px	}
#search form		{	margin: 20px auto	}
#search form tr+tr td		{	font-style: italic	}						
#search form tr+tr input	{	margin-right: 20px	}
#search caption		{	margin-bottom: 10px;
						text-align: left;
						white-space: nowrap	}

/*----------- Croquet Explained -----------------------------*/
#explained {
	width: 800px;
	margin: auto;
	}
#explained p {
	text-align: justify;
	}
#explained table {
	margin: 10px auto;
	}
#explained table td {
	padding: 0;
	}
#explained table#contents td {
	vertical-align: top;
	padding: 10px 15px;
	}
#explained table#contents td a {
	font-weight: bold;
	}
#explained table#basics td {
	width: 200px;
	padding: 5px 10px;
	vertical-align: top;
	text-align: center;
	}
#explained table#basics tr+tr td {
	text-align: left;
	}
#explained table#techniques td {
	width: 400px;
	}
#explained table#strokes td {
	padding-top: 20px;
	}
#explained table#strokes tr:first-child td {
	padding-right: 20px;
	}
#explained table#strokes td.stroke {
	vertical-align: bottom;
	border-bottom-style: solid;
	}

#donations {
	max-width: 800px;
	margin: auto;
	padding: 5px;
	}
#donations h3 {
	margin-top: 15px;
	}
#donations p {
	text-align: justify;
	}
#donations b {
	color: blue;
	}
#donations li {
	padding-left: 5px;
	}
#donations img {
	vertical-align: middle;
	margin-left: 10px;
	}