/* Experimental Basic Grid */

	.container {
		margin: 0 auto;
		max-width:1000px;
	}
	.row {
		margin-left: -3%;
		padding: 10px 0 5px 0;
		border-radius:12px; -webkit-border-radius:12px; 
		border:2px solid #650815; 
		background-color:white;
	}
	[class*="span"] {
		display: inline;
		float: left;
		margin-left: 3%;
	}
	#imgShow img {
		width:100%; 
		max-width:inherit;
	}
	#nextPic {
		display:block;
		width:100%;
		max-width:inherit;
		text-align:center;
		padding:5px; 
		color:#fff;
		font-weight:bold;
		-webkit-appearance:none;
		border-radius:6px;
		border:solid 2px #650815;
		cursor:pointer;
		background-color:#0397c6;
	}
	#nextPic:hover {
		color:black;
		background-color:#a9ddef;
	}
	#desc {
		/*padding-left:5px; */
		text-indent:12px;
		width:100%;
	}


/* OTHER STYLES -- NOT TOUCHED IN THIS EXERCISE 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
*/

	html, body {
		background-color:#0397c6; 
	}
	body {
		margin: 20px;
		font-family: 'Didact Gothic', sans-serif;
		font-size: 14px;
		font-weight: normal;
		line-height: 1.3;
		color: #404040;
		}
	hgroup {
		margin: 20px 0 0 0;	
		} 
	hgroup h1 {
		font-size: 300%;
		margin: 0;
		padding: 0;
	}
	h1, h2 {
		line-height: 1;
		}
	h5 {
		font-size:18px; 
		color:#29437e;
		line-height:1.8;
		margin-bottom:2px;
	}
	a:link {color:#29437e; text-decoration:none; font-size:14px; }
	a:visited {color:#29437e; }
	a:hover {text-decoration:underline; font-size:14px; }
	
	a.bloxLinks {color:#29437e; text-decoration:none; font-size:14px; font-weight:bold; text-decoration:none; }
	a.bloxLinks:hover {color:#29437e; text-decoration:none; font-size:14px; font-weight:bold; text-decoration:underline; }
	a.footerLinks {color:#fff; text-decoration:none; font-size:16px; font-weight:bold; }
	a.footerLinks:hover {color:#0397c6; text-decoration:none; font-size:16px; font-weight:bold; }
	
	#siteinfo {
		padding-top: 40px;
		color: #555;
		font-weight: bold;
		opacity: 0.7;
	}
	#siteinfo:hover {
		opacity: 1;	
	}
	
	#message_preview {
		width:100%;
		white-space: -moz-pre-wrap;
		white-space:-pre-wrap;
		white-space:-o-pre-wrap;
		word-wrap: break-word;
	}

	/* Clearfix -- h5bp.com/q 
	-------------------------------- */
	.clearfix:before, .clearfix:after { content: ""; display: table; }
	.clearfix:after { clear: both; }
	.clearfix { zoom: 1; }
	
	
	
	#nav {position:relative; margin:20px 0; font-size:18px; }
	#nav ul {margin:0; padding:0; }
	#nav li {margin:0 5px 10px 0; padding:0;
		list-style:none; display: inline-block; }
	#nav a {padding:3px 12px; text-decoration:none; 
		color:#fff; line-height:100%; font-size:18px;}
	#nav a:hover {color:#650815; font-size:18px; }
	#nav #current a {background:#650815; color:#fff; border-radius:5px; }
	#nav #current_large a {background:#650815; color:#fff; border-radius:5px; }
	#nav #topmenu {display:none; }
	.span-one-third h2 {
		background-color:#650815;
		border-top:2px solid #000; border-bottom:2px solid #000;
		color:#fff; display:block;
		padding:2px; padding-left:10px;
	}
	.span-two-thirds h3 {
		background-color:#650815;
		border-top:2px solid #000; border-bottom:2px solid #000;
		color:#fff; display:block;
		padding:2px; padding-left:10px;
	}
	
	#img_column img {
		width:100%;
	}
	#img_column2 img {
		width:100%;
	}
	#more {text-align:center; }
	#no-more{text-align:center; }
	
	#login {max-width:600px; }
	#login ol {list-style:none; }
	#login li {max-width:100%; }
	#login input {width:90%; }
	#login input[type=checkbox] {
		width:auto; 
	}
	#login input[type = "submit"] {width:40%; font-weight:bold; }
	textarea#desc {
		width:90%; max-width:600px; 
		height:120px;
	}
	
	#error_alert {
		padding:10px; 
		border-radius:8px;
		background-color:#900;
		font-weight:bold; color:white;
		text-align:center;
		margin:0 auto;
		margin-top:10px;
		margin-bottom:10px;
	}
	.returnStyle {
		padding:10px; 
		border-radius:8px;
		background-color:#0397c6;
		font-weight:bold; color:white;
		text-align:center;
		margin:0 auto;
		margin-top:10px;
		margin-bottom:10px;
	}
	#memberList {
		border-radius: 6px;
		border:2px solid #650815;
		padding:.5em;
		margin-bottom:2px;
	}
	#memberList:hover {
		/*background-color:rgba(101,8,21,0.05);*/
		background-color:rgba(3,151,198,0.05);
	}
	#memberList a:link {
		font-size:18px;
		font-weight:bold;
	}
	#memberList a:hover {
		font-size:18px;
		font-weight:bold;
		text-decoration:none;
	}
	
	#memberList img {
		width:100%;
		max-width:150px;
		border:none;
	}
	.span-all2 a:link {font-weight:bold; }
	.span-all2 a:hover { font-weight:bold; }
	.span-all2 {font-size:16px; }
	
	#commentHead {
		font-size:18px; font-weight:bold;
		margin-bottom:-5px;
		margin-left:1em;
		color:#650815;
		letter-spacing:2px;
	}
	#commentsBox {
		border-radius: 6px; 
		border:2px solid #650815;
		padding-left:.5em;
		padding-right:.5em;
		margin-bottom:18px;
		background-color:rgba(3,151,198,0.05);
	}
	#new_thread {
		width:98%;
		margin:-12px 0 12px 0;
		border-top:2px solid #000;
		border-bottom:2px solid #000;
		padding:2px;
		padding-right:12px;
		text-align:right;
		background-color:#650815;
	}
	#new_thread a:link {
		color:white; font-weight:bold; font-size:18px; text-decoration:none;
	}
	#new_thread a:visited { color:white; }
	#new_thread a:hover {
		color:#a9ddef; text-decoration:none;
	}
	#commentsBox img {width:100%; max-width:602px; }
	
	
@media only screen and (max-width: 1125px){
	.container { margin: 0 40px 0 50px; }
}


@media only screen and (min-width: 768px) {
	.span-one-third {
		width: 30%;
	}
	
	.span-two-thirds {
		width: 60%;
		font-size: 18px;
	}
	.span-all2 { width: 97%; }
	.span-all {
		width: 95%; background-color:#650815;
		margin:0 auto;
		padding: 5px;
		/*opacity: 0.9;*/
		text-align:center;
		letter-spacing:.2em;
		border-bottom-left-radius:6px;
		border-bottom-right-radius:6px;
		}
	/*.span-all:hover {
		opacity: 1;
	}*/
	
	.row{
		padding: 2px 15px 5px 0;
	}
	#nav ul li #topmenu {display:none; }
	
}


@media only screen and (max-width: 768px) {
	.container {margin: 18px 0 0 18px; }
	.span-all {
		width: 95%; background-color:#650815;
		margin:0 auto;
		padding: 5px;
		/*opacity: 0.9;*/
		text-align:center;
		letter-spacing:.2em;
		border-bottom-left-radius:6px;
		border-bottom-right-radius:6px;
		}
	/*.span-all:hover {
		opacity: 1;
	}*/
}


@media screen and (max-width: 600px) {	
html, body {font-size:100%; margin: 4px 4px 0 4px; }
.picPage {
	display: none;
}
.container {margin: 8px 0 0 18px; }
.row{
		padding: 2px 5px 5px 0;
	}
.span-all {
	width:92%;
}
.span-one-third {
	width:96%;
}
.span-two-thirds {
	width:96%;
}
.span-all2 { width: 95%; }
#message_preview {
	width:100% inherit; 
	white-space: -moz-pre-wrap;
		white-space:-pre-wrap;
		white-space:-o-pre-wrap;
		word-wrap: break-word;
}
#new_thread {width:95%; }

hgroup {
		margin: 0;	
		}
		
		
#nav {position:relative; min-height:40px; }
#nav ul {width:180px; padding: 5px 0; position:absolute;
	top:0; left:0; border:solid 1px #aaa; 
	background:#fff url(images/nav_button.png) no-repeat 8px 9px;
	border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,.3); }
#nav li {
	display:none; 
	margin:0; }
#nav #current {
	display:block; cursor:pointer; }
#nav a {display:block; padding:5px 5px 5px 32px; text-align:left; cursor:pointer; color:#650815; }
#nav a:hover {background-color:#0397c6; color:white; }
#nav #current a {background:none; color:#650815; }
#nav #current_large a {background-color:transparent; background:url(images/nav_button.png) on-repeat 8px 4px; color:#650815; }
/* on nav hover 
#nav ul:hover {background-image:none; }*/

#nav ul:hover li {display:block; margin:0 0 5px; }
#nav ul:hover #current {background:url(images/nav_button.png) no-repeat 8px 4px; }
#nav #topmenu {display:block; }
.navToggle {display:block; }
/*
#menu {display:none; }
*/
}



/*not actually sure what all this stuff is for just yet, but will look into it
  this is just the stuff to display the screen size. it's interesting, but we don't really need it. */

/* ======================================

	MediaQuery-Reporter Styles
		


body:after {
	content: "less than 320px";
	font-size: 300%;
	font-weight: bold;
	position: fixed;
	bottom: 60px;
	width: 100%;
	text-align: center;
	background-color: hsla(1,60%,40%,0.7);
	color: #fff;
}
@media only screen and (min-width: 320px) {
	body:after {
		content: "320 to 480px";
		background-color: hsla(90,60%,40%,0.7);
	}
}
@media only screen and (min-width: 480px) {
	body:after {
		content: "480 to 768px";
		background-color: hsla(180,60%,40%,0.7);
	}
}
@media only screen and (min-width: 768px) {
	body:after {
		content: "768 to 1024px";
		background-color: hsla(270,60%,40%,0.7);
	}
}
@media only screen and (min-width: 1024px) {
	body:after {
		content: "1024 and up";
		background-color: hsla(360,60%,40%,0.7);
	}
}
========================================= */