@import url("reset.css");

/*====================================== Default CSS ======================================*/

body {
	background: #FFFFFF;
	font-family: 'Times New Roman', Times, serif;
	color: #000000;
	padding: 0;
	font-size: 100%;
}

.wrapper {
	max-width: 58.75em;
	margin: 0 auto;
}

nav { position: relative; }

h1.banner { 
	color: #380B61;
   	font-family: Arial, Helvetica, sans-serif;
   	font-style:italic;
   	font-size: 1.3em;
}

header { position: relative; padding-bottom: 2em; }

/*
.banner-link {
	position:absolute;
	display:none;
	left: 50%;
	max-width:45em;
	margin-left: -28.125em;
	height:4.6875em;
	text-decoration:none;
	z-index:99;
	bottom:1.25em;
}
*/

main {
	margin:0 auto;
	width:90%;
	max-width: 58.75em;
	line-height: 1.5em;
}

.content {
	float: left;
	max-width: 35em;
	padding-top: 1.25em;
	padding-right: 0;
	padding-bottom: 1.25em;
	padding-left: 1.25em;
}

.sidebar {max-width: 44.5em; padding-right: 1em;}

.sidebar ul { margin-bottom: .9375em; position:relative; width:100%;}

.sidebar ul li { display: block; }

.sidebar ul li a.link {
	display:block;
	text-align: center;
	background: #555;
	border-style: solid;
	border-width: 3px;
	border-color:#fff;
	width: 100%;
	padding: 0 .3em;
	line-height: 2.5em;
	color: #fff;
	font-size: 1.3em;
	font-weight: bold;
	letter-spacing: .2em;
	border-right: .1875em solid silver;
	border-left: .1875em solid silver;
}

.sidebar ul li a.link:hover {
	background: #900000;
}

.footer-align { max-width: 58.75em; }

.footertop {
	max-width: 58.75em;
	line-height: 1.375em;
	border-top: 1px dotted #b5975b;
}

.footer-column {
	float: left;
	min-width: 10em;
	padding: 1.25em;
}

.footnote {
	clear: both;
	max-width: 76.7em;
	padding: 1.25em;
	line-height: 1.375em;
	text-align: right;
	font-size: 0.75em;
	border-top: 1px dotted #b5975b;

}

.footnote a { font-weight: bold; }

.overlay {
	position:absolute;
	top:8px;
	right:5px;
}

.button {
	position: relative;
	margin:3px;
	font-face:Comic Sans MS;
	font-size:medium;
	color:#FFFFFF;
	height:1.8125em;
	vertical-align:bottom;
	background-color:#380B61;
	border:1pt ridge #380B61;
	border-radius: 7px;
	box-shadow: 0 0 4px #333;
	-webkit-box-shadow: 0 0 4px #333;
}

.button:hover { background-color:#990000; }

.right {float:right; clear:both;}

a { color: #900000; }

a:hover { color: #380B61; }

p { margin-bottom: .9375em; font-size: 1.0625em; }

h1, h2, h3 { font-weight: bold; font-size: 1.5em; margin: 0 0 .625em 0; color: #900000; text-shadow: 2px 2px 2px #000000; }

h4, h5 { font-weight: bold; font-size: 20px; margin: 0 0 15px 0; color: #900000; text-shadow: 1px 1px 1px #000000; }

hr { max-width: 58.75em; line-height: 1.375em; border-top: 1px dotted #380B61; border-bottom:0; background:#FFFFFF; }

.table {display:table; width:100%; border-collapse:separate; border-spacing: 7px;}

.row {display:table-row; padding-bottom: 0.5em;}

.space {display:table-cell; background:#fff;}

.title {
display:table-cell;
color:#FFFFFF;
padding:0.3em;
background-color:#380B61;
text-align: left;
font-size: 1.25em;
box-shadow: 0 0 4px #333;
-webkit-box-shadow: 0 0 4px #333;
}

.title a {float: right; color: #fff; font-size: 0.8em; margin:0 0.2em;}

.title a:hover {color: yellow;}

.cell {
display:table-cell;
color:#000;
padding:0.3em;
background-color:#fff;
}

.post {
position: relative;
overflow:hidden;
color:#000;
padding:0.5em;
margin:1em;
background-color:#fff;
border-radius: 10px;
box-shadow: 0 0 4px #333;
-webkit-box-shadow: 0 0 4px #333;
}

.img {
max-width: 100%;
height: auto;
width: auto\9;
}

/* These form fields are used by edit.php */
.sidebar ul li.empty a.link {display:none;}
.sidebar ul li .pencil {display:none;}

input.field {width: 17.5em;}

textarea.block {
padding: 2px;
height:6.25em;
width:90%;
}
/* These form fields are used by edit.php */

/*====================================== Cell Phone Screen ======================================*/

@media only screen and (min-width: 20em) {

	h1.banner { font-size: 1.9em; padding-left:1em;}

	.logo {padding:1em;}
	.banner {margin-top:2.5em;}
}


/*====================================== Desktop Screen ======================================*/

@media only screen and (min-width: 48em) {

body {padding: 1.25em;}

main {width:auto;}

	.logo {float:right; padding:1em;}
	.banner {margin-top:0;}

	h1.banner {font-size: 3.125em; padding-top: 1.5em;}

	.sidebar {
		float: right;
		max-width: 18.75em;
	}

	.sidebar ul { margin-bottom: .9375em; }

	.sidebar ul li { display: block; }

	.sidebar ul li a.link {
		float: left;
		text-align: left;
		background: white;
		border-style: none;
		width: 14em;
		padding-top: .375em;
		padding-right: .625em;
		padding-bottom: .375em;
		padding-left: .625em;
		border-left: .1875em solid #b5975b;
		margin-bottom: .3125em;
		line-height: 1.25em;
		color:#900000;
		font-size: 1em;
		letter-spacing: .1em;
	}

	.sidebar ul li a.link:hover {
		background: #380B61;
		border-right: none;
		color: #FFFFFF;
	}

.footer-column {min-width: 26.875em;}

/* These form fields are used by edit.php */
.sidebar ul li.empty a.link {display:block;}
.sidebar ul li .pencil {display:inline;}

textarea.block {height:15em;}

/* These form fields are used by edit.php */

}