/* Basic reset */

html, body, div, span, applet, object, iframe, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
ul, ol, dl, dt, dd, p,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead,
h1,h2,h3,h4,h5,h6
{
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
}

a img { border:0; }

ul, ol { list-style:none; }

/* TAGS */


body
{ 
  font: normal 1em/1.4 Oxygen,Fresca,"Varela Round",sans-serif; /* Varela Round and Fresca aren't loaded up, but this is to remember I liked them */
  background-color:#fff;
  width: 1000px;
  max-width: 100%;
  margin:0 auto;
  box-sizing: border-box;
}

ul, p
{
  margin: 0 0 1em 0;
}

img, input, textarea {
	max-width: 100%;
	}

input[type=text],input[type=password],input[type=email],textarea 
{ border:1px solid #ccc; padding:2px;}

h1,h2,h3 {
	font-weight:bold;
	color:#222;
	margin-bottom:.5em;
	}

	h1{ font-size:150%; } 
	h2{ font-size:115%; }
	h3{ font-size:110%; }

legend { font-weight:bold; font-size:110%; margin-bottom:.5em; }

input[type=submit]
{ 
	background: #a5a5f4;
	background: linear-gradient(to bottom,  #a5a5f4 0%,#7b7bee 100%);
	color:#fff;
	border: none;
	border-radius: 6px;
	padding: .5em 3em;
	margin:.5em 0;
	}


/* CLASSES */

.forumheader { font-size:13px }
.bigtext { font-size:16px }
.forumrow, .smalltext { font-size:85% }
.comment { font-style:oblique; background-color:#ffa; padding:3px; border-radius:2px;}

fieldset.action { text-align:right; margin-top:1em; }


.errors { list-style: disc; }
.errors li {
	margin-left: 1em;
	padding-left: 1em;
	}

.nc { width:1px; text-indent:2px; overflow:hidden; height:1px; }




/* HEADER */

header {
	text-align:center;
	position:relative;
	margin-top:20px;
	}

	#logo {
		display: inline-block;
		margin-bottom: 10px;
		}

		#logo img { width: 600px; }

	#searchbar
	{
	  margin: 10px 130px 0 0;
	  text-align:right;
	}

	#searchbar input[type=text],
	#mailinglist input[type=email] { 
		border:2px solid #ccc;
		border-width:1px 0 1px 1px;
		height:28px;
		max-width:250px;
		width:75%;
		padding:0 5px;
		border-radius:6px 0 0 6px;
		margin:.5em 0
		}

	#searchbar input[type=submit],
	#mailinglist input[type=submit]
	{ 
		height:30px;
		border-radius:0 6px 6px 0;
		padding:0 1em;
		}

	#menu {
		background: #a5a5f4;
		background: linear-gradient(to bottom,  #a5a5f4 0%,#7b7bee 100%);
		padding:0 20px 0 0;
		margin: 0 60px;
		border-radius:12px;
		border:#7373D0 2px solid;
		position: relative;
		z-index:100;
		}

	#hamburger {
		display: none;
		text-decoration: none;
		}

	#menu ul { margin: 0; }

		#menu li {  display:inline-block; }

			#menu li a {
				padding:0 20px;
				margin:0;
				line-height: 2.3;
				font-weight: bold;
				color: #fff;
				text-decoration: none;
				text-shadow: 1px 1px 0 #7373D0;
				border-right:1px solid #fff;
				}

				#menu li:last-child a { border-right:none; }

				#menu li a:hover {
					color:#000;
					text-shadow:1px 1px 1px rgba(255,255,255,.4);
					}


	#menu:after {
		background: url(/images/me.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 107px;
		height: 200px;
		position: absolute;
		right: -40px;
		top: -110px;
		content: '';
		display: block;
		}



main {
	display: flex;
	margin-bottom: 1em;
	width:100%;
	justify-content: space-between;
	flex-wrap: wrap;
	box-sizing: border-box;
	}

footer
{
  text-align:center;
  border-top:1px solid #999;
  padding-top:1em;
  font-size:85%;
}

#disclaimer { text-align:left; font-size:85%;} 

/* SECTIONS ********************** */

/* HOME */


#home #current_cartoon {
	width:500px;
	margin-bottom:1em;
	}

#home #intro {
	padding:2em 0 0 20px;
	flex: 1 0 450px;
	line-height: 1.7;
	}


#home h2
{
  font-size:13px;
  font-weight:bold;
  text-transform:uppercase;
  text-align:center;
}

#home h3
{
  background:url(/images/toolbar2.gif) top left no-repeat;
  height:20px;
  width:335px;
  overflow:hidden;
  text-indent:-99999em;
  margin:0;
  padding:0;
}


#home #toolmenu {
	margin: 0 auto;
	padding: 0;
	display: flex;
	justify-content: space-between;
	}

	#home #toolmenu li {
		width: 23%;
		margin:0;
		border-radius: 10px;
		background: #ddf;
		padding: 8px 3px 0;
		box-sizing: border-box;
		}

		#home #toolmenu li:hover { background: #ccf; }

		#home #toolmenu li:active { transform: scale(.9); }


/* CARTOON PAGE */

#cartoon #toolmenu, #maincontent, aside#forum { box-sizing: border-box; }

#cartoon #toolmenu {
	padding:1em;
	width: 20%;
	text-align: center;
	}

	#toolmenu h2 { font-size:105%; font-weight:bold; }

	#toolmenu legend { font-size:85%; font-weight:bold; }

	#toolmenu li { margin:1em 0; }

		#toolmenu li a {
			max-width: 100px;
			display: inline-block;
			}


#maincontent {
	text-align:center;
	width: 55%;
	}

#prev_next_toons {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
	}

	#prev_next_toons div {
		width: 100%;
		}

aside#forum {
	background:#eee;
	padding:1em;
	width:25%;
	}

	aside#forum input[name=login], aside#forum input[type=password] { width:60%; }
	aside#forum input[name=subject], aside#forum textarea { width:100%; }

	.replycount { color:#666; padding-left:.5em; display:inline-block; }
	aside#forum ul#cartoonthread li { margin-bottom:1em; font-size:85%; }

	aside#forum ul#cartoonthread { margin-bottom:1em; }

/* SEARCH */

.search_results li {
	margin: 0 0 10px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	}

	.search_results li img {
		float: left;
		padding-right: 10px;
		}

	.search_results li p {
		font-weight: bold;
		font-size: 105%;
		}



/* ARCHIVES */

#cartoons { width:70%; }

	#cartoons li {
		display: flex;
		margin:.5em 0;
		}

	#cartoons time {
		flex: 0 0 10em;
		}

#years {
	width:30%;
	text-align:center;
	}

	#years ol { column-count: 3; }

		#years li { margin:0 0 1em; }

			#years a {
				font-size:105%;
				font-weight:700;
				text-decoration: none;
				}

				#years a:hover { text-decoration: underline; }


/* POSTCARD */
#postcard_form {
	display: flex;
	justify-content: space-between;
	}

	#postcard_form > img {
		flex: 0 1 350px;
		padding-right: 1em;
		border-right: 1px solid #aaa;
		align-self: start;
		}

	#postcard_form > form {
		flex: 1;
		padding-left: 1em;
		}

		#postcard_form > form fieldset:is(.sender,.recipient) label {
			display: flex;
			gap: 1em;
			margin-bottom: 1em;
			}

		#postcard_form > form fieldset:is(.sender,.recipient) label span {
			flex: 0 1 10em;
			text-align: right;
			}

		#postcard_form > form fieldset:is(.sender,.recipient) label input {
			flex: 1;
			}

		#postcard_form > form textarea {
			width: 100%;
			height: 5em;
			}

		#postcard_form input[type=submit] {
			display: block;
			margin: .5em auto;
			}

#postcard
{
  border-right:2px solid #999;
  border-bottom:2px solid #999;
  border-top:1px solid #ccc;
  border-left:1px solid #ccc;
  padding:10px;
  margin:auto;
}
#postcard .cartoon
{
 text-align:center;
 vertical-align:middle;
 border-right:1px solid #999;
 padding:10px;
}

#postcard .message
{
  vertical-align:top;
  padding:90px 10px 10px 10px;
  width:250px;
  background:url(/images/stamp3.gif) top right no-repeat;
  font-size:120%;
}

#postcard .message blockquote
{
  margin:0;
  padding:0;
}

#postcard .message cite
{
  display:block;
  text-align:right;
}

/* FORUM */

.forumheader { font-weight:bold; color:#fff; background-color:#009 }
.forumrow { background-color:#fff }
.forumrow .rowtitle  { font-weight:bold; font-size:13px }
.shaded { background-color:#eee }

#mainmessage .messagebody { margin-top:5px }
/*#mainmessage *, .childmessage * { font-family: Verdana, Arial, sans-serif }*/

.childmessage { font-size:85%; line-height:1.5;}
.childmessage .messageheader { background-color:#eee; margin-top:25px; font-size:85%; }
.childmessage .messageheader, .childmessage .messagebody { padding:2px }

#postform { border-top:2px #999 solid; margin-top:10px }
body#forum ul#cartoonthread { margin: 0; padding-left:15px; font-size:85%; list-style:disc; }

/* PUBLISH */

div#newpublisher
{
  border:1px solid #ccc;
  padding:7px;
  text-align:center;
  font-size:13px;
}

#tr_state, #tr_publication, #tr_webaddress { display: none; }

#theform { margin: 0 auto; }

#theform table th {
	width: 200px;
	text-align: right;
	}

#theform input[type=submit] {
	margin: 10px 0 10px 214px;
	padding: 5px 20px;
	}

.search_results li:after {
	clear: both;
	content: ".";
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
	}

@media only screen and (max-width:420px)
{

	body { padding: 0 5px; }

	#home #current_cartoon,
	#home #intro {
		width:100%;
		margin-bottom:1em;
		padding: 0;
		max-width: 100%;
		}

	#menu {
		border-radius: 5px;
		text-align:center;
		margin: 0;
		padding: 0;
		}		

		#menu:after { display: none; }

		#menu ul {
			padding: 0;
			margin: 0 auto;
			display: none;
			}

			#menu li { display: block; }

				#menu .open li { border-top: 1px dotted #fff; }

					#menu li a {
						background: none !important;
						padding-left: 0 !important;
						border: none;
						}

		#hamburger {
			display: block;
			font-size: 20px;
			color: #fff;
			}

			#hamburger span {
				color: #fff;
				margin-right: 5px;
				display: inline-block;
				transform: rotateZ(0);
				transition: all .25s ease;
				}

				.open #hamburger span {
					transform: rotateZ(90deg);
					}
	#searchbar { margin: 10px 0 0; text-align: center; }

		#searchbar input[type="text"],
		#mailinglist input[type="email"] { max-width: 200px; }


	#home #toolmenu,
	#cartoon #toolmenu,
	#cartoon #toolmenu ul  {
		justify-content: space-between;
		width: 100%;
		}

		#toolmenu li {
			box-sizing: border-box;
			}



#cartoon #toolmenu ul {
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	}

	#cartoon #toolmenu ul li:nth-child(-n+3) {
		width: 32%;
		margin:0;
		border-radius: 10px;
		background: #ddf;
		padding: 8px 3px 0;
		box-sizing: border-box;
		}

		#cartoon #toolmenu li:nth-child(-n+3):hover { background: #ccf; }

		#cartoon #toolmenu li:nth-child(-n+3):active { transform: scale(.9); }


	#cartoon #toolmenu ul li:nth-child(n+4) {
		width: 100%;
		}

	#cartoons, #years {
		display: block;
		width: 100%;
		}

	#cartoons li {
		display: flex;
		}

	#cartoons time {
		flex: 0 0 7em;
		}

		#years ol { column-count: 1; }
		#years li { display: inline-block; margin: 0 .5em 1em; }


	#cartoon #toolmenu, #cartoon #forum { order: 1; }

	#cartoon #maincontent, #cartoon #forum {
	    display: block;
	    width: 100%;
	    }
}