body {
	/*background:#D7CEC7;*/
	background:tan; 
	font-family: Arial;
}

#wrapper {
	margin:auto; 
	max-width:1100px; 
	/*min-width:980px; */
	background:tan; 
	/*border:10px white solid; */
	font-size:medium; 
	display:block;
}

header,nav,article,section,figure,footer {display:block;}

header {
	margin-top:0; 
	border-bottom:10px white solid; 
	height:181px; 
	background:tan;
}

h1 {
	text-align:center; 
	position:relative; 
	top:-20px;
	font-size:72px;
	color:white; 
	font-weight:bold; 
	text-shadow: 2px 2px 4px black;

}

#subhead {
	text-align:center; 
	font-size:48px; 
	color:white; 
	font-weight:bold; 
	text-shadow: 2px 2px 4px black;
	position:relative;
	top:-70px;
}

#foo-headline {
	font-size:36px; 
	text-align:center; 
	color:black; 
	font-weight:bold;
}

#foo-headlinetripp {
	font-size:36px; 
	text-align:center; 
	color:black; 
	font-weight:bold;
}

h2 {
	font-size:48px; 
	text-align:center; 
}

p {
	/*font-size:120%; */
	/*text-align:center;*/
}

a {
	font-size:19px;
}

/*add a left col*/
#leftcol {
	/*float:left;*/ 
	/*width:150px;*/
	/*width:100px;*/
	width:10%;
	display:block;
	/*height:100px;*/
}

/* set vertical button menu column*/
nav#vertical ul {
	float:left; 
	/*width:150px; */
	width:100px;
	margin-left:10px;
	padding-left:0; 
	list-style-type:none;
}

/* set general side button styles */
li.vbtn {
	/*width:150px; */
	width:100px;
	line-height:20px; 
	margin-bottom:5px; 
	text-align:center; 
}
/* set general anchor styles */
li.vbtn a {
	display:block; 
	/*width:150px; */
	width:100px;
	color:white; 
	font-family:arial; 
	font-size:100%;
	font-weight:bold; 
	text-decoration:none;
}
/* mouseout (default) */
li.vbtn a {
	display:block; 
	background: #559a55; 
	border:4px outset #559a55;
}
/* mouseover */
li.vbtn a:hover {
	background:red; 
	border:4px outset red;
}
/*mousedown */
li.vbtn a:active {
	background:maroon; 
	border:4px inset maroon;
}

/*nav#next ul {
	float:left; 
	width:100px;
	margin-left:10px;
	padding-left:0; 
	list-style-type:none;
	display:inline-block;*/

li.nextbtn {
	/*width:150px; */
	width:100px;
	line-height:20px; 
	margin-bottom:5px; 
	text-align:center; 
	list-style-type:none;
	float:right;
	padding-right:1%;
}
/* set general anchor styles */
li.nextbtn a {
	display:block; 
	/*width:150px; */
	width:100px;
	color:white; 
	font-family:arial; 
	font-size:100%;
	font-weight:bold; 
	text-decoration:none;
}
/* mouseout (default) */
li.nextbtn a {
	display:block; 
	background: #559a55; 
	border:4px outset #559a55;
}
/* mouseover */
li.nextbtn a:hover {
	background:red; 
	border:4px outset red;
}
/*mousedown */
li.nextbtn a:active {
	background:maroon; 
	border:4px inset maroon;
}
br.clear {clear:both}

#rightcol {
	float:right; 
	/*width:1000px;*/
	width:85%;
	/*margin-left:200px;*/
	/*margin-left:135px;*/
}

#flushright {
	float:right; 
	/*width:1000px;*/
	

}

#rightcoltripp {
	float:right; 
	/*width:1000px;*/
	width:85%;
	/*margin-left:200px;*/
	/*margin-left:135px;*/
}
#comic-intro {
	/*margin-right:145px;*/
	/*margin-right:100px;*/
	margin-left:25px;
	margin-right:25px;
	font-size:18px;
	position:relative;
	bottom:-20px;
	/*font-weight:bold;*/
}

#comic-intro2 {
	/*margin-right:145px;*/
	/*margin-right:100px;*/
	margin-left:25px;
	margin-right:25px;
	font-size:18px;
	position:relative;
	bottom:-20px;
	/*font-weight:bold;*/
}

#flighty, #nutz, #sorcerer, #climate, #cause, #chapter {
	padding-left:3%;
}

/*set horizontal button menu*/
nav ul {
	/*float:left; */
	/*width:960px; */
	height:40px; 
	/*margin-left:70px; */
	text-align:center; 
	padding-left:0;  
	list-style-type:none;
}

/*set general horizontal menu button styles*/
nav ul li { 
	display:inline-block; 
}

li.btn {
	width:100px; 
	line-height:2; 
	margin-bottom:3px; 
	margin-right:10px; 
	text-align:center;
}
/* set general access (anchor) styles */
li.btn a {
	display:inline-block; 
	width:100px; 
	color:white; 
	font-family:arial; 
	font-size:100%; 
	font-weight:bold; 
	text-decoration:none;
	margin-bottom:5px;
}
/* mouseout (default) */
li.btn a {
	background: #559A55; 
	border:4px outset #559A55;
}
/* mouseover */
li.btn a:hover	{
	background:red; 
	border:4px outset red;
}
/* mousedown */
li.btn a:active {
	background:maroon; 
	border:4px inset maroon;
}

.left {text-align:left;}

.quote {
	float:right; 
	font-weight:normal; 
	font-size:90%;
}

h5 {text-align:center;}

/*#wrapper {box-shadow:10px 10px 20px #505050;}*/

/*.shadow {box-shadow:10px 10px 15px #505050; height:304px;}*/

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

@media only screen and (max-width:768px) {
  /* For tablets: */

border-bottom {
	/*margin-top:0; 
	border-bottom:10px white solid; 
	height:281px; 
	background:tan;*/
	position:relative;
	bottom:-100px;
}

  h1 {
  	font-size: 48px;
  }

  h2 {
  	font-size: 36px;
  }

  #subhead {
  	font-size:36px;
  }

  #comic-intro {
  	position: relative;
  	float:left;
  	/*bottom:-20px;*/
  	top:10px;
  	margin-left:3%;
  }

  #foo-headline {
  	position:relative;
  	top:400px;
  }

  #foo-headlinetripp {
  	font-size:36px; 
	text-align:center; 
	color:black; 
	font-weight:bold;
  	position:relative;
  	float:left;
  	top:50px;
  }

#comic-intro3 {
  	position: relative;
  	float:left;
  	top:100px;
  	/*bottom:-20px;*/
  	/*top:30px;*/
  	margin-left:3%;
  	margin-right:3%;
  }

  /*#chapter {
  	position:relative;
  	top:600px;
  }*/

  #vertical {
  	height:700px;
  }

  #leftcol {
  	position:absolute;
  	width:100%;
  }

  #leftcoltripp {
  	position:absolute;
  	width:100%;
  }

  nav#vertical ul {
	align-items:center;
	/*width:150px; */
	width:100%;
	margin-left:0%;
	padding-left:0px; 
	list-style-type:none;
}
  

li.vbtn {
	width:95%;
	line-height:20px; 
	margin-bottom:3px; 
	text-align:center;
	padding-left:2.5%;
}

li.vbtn a {
	display:block; 
	width:95%;
	color:white; 
	font-family:arial; 
	font-size:100%;
	font-weight:bold; 
	text-decoration:none;
}

/*#cause, #climate {*/
#rightcol {
  	position:absolute;
  	width:100%;
  	top:800px;
  	margin-left:0%;
  	/*align-items:center;*/
  	/*float:left;*/
  }

  #rightcoltripp {
  	position:absolute;
  	width:100%;
  	top:1000px;
  	/*right:10px;*/
  	/*margin-right:0%;*/
  	/*align-items:center;*/
  	/*float:left;*/
  }

 #wrapper {
 	width:100%;
 }
 header {
 	height:100px;
 }
#sorcerer, #nutz, #flighty, #cause, #climate, #chapter, #red-rocket {
	padding-right:5%;
	position:relative;
	top:20px;
}

#herkimer {
	padding-right:3%;
	position:relative;
	top:20px;
}

}

/*=========================================================================*/
@media only screen and (max-width:500px) {
  /* For mobile phones: */
  h1 {
  	font-size:36px;
  }

  h2 {
  	font-size:36px;
  }

  #subhead {
  	font-size:30px;
  }

  #comic-intro {
  	position: relative;
  	float:left;
  	/*bottom:-20px;*/
  	/*top:30px;*/
  	margin-left:3%;
  	top:10px;
  }

  #comic-intro2 {
  	position: relative;
  	float:left;
  	/*bottom:-20px;*/
  	top:40px;
  	margin-left:3%;
  }

  #foo-headlinetripp {
  	font-size:36px; 
	text-align:center; 
	color:black; 
	font-weight:bold;
  	position:relative;
  	float:left;
  	top:-50px;
  }

#comic-intro3 {
  	position: relative;
  	float:left;
  	top:-50px;
  	/*bottom:-20px;*/
  	/*top:30px;*/
  	margin-left:3%;
  	margin-right:3%;
  }
  #vertical {
  	position:relative;
  	/*bottom:-100px;*/
  }

  #leftcol {
  	position:relative;
  	width:100%;
  	top:50px;
  }

#leftcoltripp{
	position: relative;
	float: left;
	top:-850px;
}
  #horizontal { 
	display:inline-block; 
	height:1000px;
}

  nav #vertical ul {
	align-items:center;
	/*width:150px; */
	width:100%;
	margin-left:0%;
	padding-left:0px; 
	list-style-type:none;
}
  

li.vbtn {
	width:95%;
	line-height:20px; 
	margin-bottom:3px; 
	text-align:center;
	padding-left:2.5%;
}

li.vbtn a {
	display:block; 
	width:95%;
	color:white; 
	font-family:arial; 
	font-size:100%;
	font-weight:bold; 
	text-decoration:none;
}

/*#cause, #climate {*/
#rightcol {
  	position:absolute;
  	width:100%;
  	top:800px;
  	margin-left:0%;
  	/*align-items:center;*/
  	/*float:left;*/
  }

  #rightcoltripp {
  	position: absolute;
  	top: 1100px;
  }
 #wrapper {
 	width:100%;
 }
 header {
 	height:100px;
 }

 #herkimer, #red-rocket, #flighty, #nutz {
 	position:relative;
 	top:10px;

 }

 #sorcerer {
 	position:relative;
 	top:50px;
 }
}








/*#foo {font-size:120%; line-height:130%; margin-left:25px; margin-right:25px; margin-bottom:25px;}

#foo-headline {font-size:300%; text-align:center; color:black; font-weight:bold;}

#foo-date {text-align:center;}

#foo-quote {margin-left:45px; margin-right:45px;}

#foo-image {float:left; margin-right:10px;}*/