/*
	cktennis.com
*/
@import url("//fonts.googleapis.com/css?family=Droid+Sans:400|Open+Sans+Condensed:700");

html {
	font-family: "Droid Sans", sans-serif;
	margin: 0;
	padding: 0;
	background: rgb(36,36,36);
}
body {
	margin: 0;
}

a:link, a:visited {
	color: #3316aa;
}
a:hover, a:active {
	color: #3316ff;
}

#topbar {
	margin: 0;
}
h1, h2, h3, h4, h5, h6 {
	/* Unify the headers with their own font. */
	font-family: "Open Sans Condensed";
}
h1 {
	margin: 5px 0 0 0;
	padding: 0;
	text-align: center;
}
h1 object, h1 img {
	height: auto;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
h2 {
	clear: both;
	font-size: 200%;
}
h3 {
	clear: both;
	font-size: 150%;
}

#menu {
	width: 100%;
	margin: 0;
	text-align: center;
}
#menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#menu li {
	margin: 0;
	padding-bottom: 10px;
	border-top: 1px solid #b8ff00;
	line-height: 60%;
}
#menu li:hover {
	background-color: rgb(72,72,72);
}
#menu img {
	border: 0;
	display: none;
}
#menu a {
	color: white;
	text-decoration: none;
}

#main {
	margin: 0;
	background-color: white;
	border-top: 6px solid #b8ff00;
	border-bottom: 6px solid #b8ff00;
}

#content {
	margin: 1em;
}

#clear {
	clear: both;
	height: 0;
}

#footer {
	color: white;
	text-align: center;
}
#footer a {
	color: white;
}

.string, .indent, .fold {
	margin-left: 0.5em;
	margin-right: 0;
}
.string h3 {
	margin-bottom: 0;
}
.string p {
	margin-top: 0.5em;
}
.string img {
	display: none;
}

.fold {
	display: none;
}

.copyright {
	font-size: 70%;
	color: #808080;
}

/* Get responsive; set some override conditions for the header
 * bar when the device is sufficiently wide. */
/* 190px is the minimum to show a 60px tall logo */
@media (min-width: 190px) {
	h1 object, h1 img {
		height: 60px;
		width: auto;
	}
}
/* 330px is the minimum to show small icons in the menu */
@media (min-width: 330px) {
	#menu {
		margin: 8px auto;
	}
	#menu ul {
		margin: 0 auto;
		width: 330px;
	}
	#menu li {
		padding: 4px 0 8px 0;
		border-top: 4px solid rgb(36,36,36);
		border-bottom: 4px solid rgb(36,36,36);
		display: inline-block;
		margin: 4px 1em 4px 1em;
		line-height: 50%;
		text-align: center;
	}
	#menu li:hover {
		border-top: 4px solid #ebff00;
		border-bottom: 4px solid #ebff00;
		background-color: inherit;
	}
	#menu img {
		height: 32px;
		width: auto;
		display: block;
		margin: 0 auto;
	}
	#content {
		margin: 1em;
	}
	.string, .indent, .fold {
		margin-left: 1em;
	}
	.string img {
		display: block;
		width: 75px;
		height: auto;
		float: left;
		margin: 0 1em 1em 0;
	}
}
/* At 500px, we have room to put the h1 and menu on the same
 * line, but still with small graphics. */
@media (min-width: 500px) {
	#topbar {
		margin: 12px;
	}
	h1 {
		float: left;
	}
	#menu {
		width: 100%;
		margin: 0;
		height: 72px;
	}
	#menu ul {
		margin: 8px 0 8px auto;
	}
	#menu li {
		margin: 4px 0 0 1em;
	}
	.string, .indent, .fold {
		margin-left: 2em;
	}
}
/* 720px is enough to switch to standard desktop-size graphics. */
@media (min-width: 720px) {
	#topbar {
		min-height: 120px;
		width: auto;
		margin: 12px;
	}
	h1 {
		margin-top: 0;
	}
	h1 object, h1 img {
		height: 120px;
	}
	#menu {
		width: 100%;
		margin: 0;
		height: 125px;
	}
	#menu ul {
		margin: 5px 0 5px auto;
	}
	#menu li {
		line-height: 1;
	}
	#menu img {
		height: auto;
	}
	.string, .indent, .fold {
		margin-left: 2em;
	}
	.string img {
		width: auto;
	}
}
/* 900px marks where the content gets too wide to easily read.
 * Switch to a static-width layout. */
@media (min-width: 932px) {
	#topbar, #content {
		width: 900px;
		margin-left: auto;
		margin-right: auto;
	}
}