body {
 font-family: 'Roboto', sans-serif;
 line-height: 1.6;
 color: #555; 
 text-decoration: none;
 background-color: #F4DB03;
 max-width: 90ch;
 margin: auto;
}
table { background-image: none; background-color: white; }

a { color: #E71721; font-weight: normal; text-decoration: none; }

em { color: #000066; text-decoration: none; padding: 5px; margin-left: 5px; font-style: normal; }

h1, h2, h3, h6 { 
font-family: 'Luckiest Guy', cursive;
font-size: 2rem;
 text-decoration: none;
 padding: 0px;
 margin: 0px;
 line-height: 1.1;
}

h1, h2, h3, h4 {
 color: #6297BC;
 margin-bottom: 0.5em;
}

/*#header h1 { 
clear: none; 
color: black; 
font-size: 3rem; 
 text-align: center;
 margin: auto;
 padding-top: 20px;
}*/

#header-homelink h1 {
  text-align: center;
  margin: 0;  
  font-size: 4em;
  padding: 0;
  padding-top: 0.2em;
  color: black;
  text-shadow: 0 0.1em 20px rgb(255, 255, 255), 0.05em -0.03em 0 rgb(255, 255, 255),
    0.05em 0.005em 0 rgb(255, 255, 255), 0em 0.08em 0 rgb(255, 255, 255),
    0.05em 0.08em 0 rgb(255, 255, 255), 0px -0.03em 0 rgb(255, 255, 255),
    -0.03em -0.03em 0 rgb(255, 255, 255), -0.03em 0.08em 0 rgb(255, 255, 255), -0.03em 0 0 rgb(255, 255, 255);  
}

#header-homelink span {
  transform: scale(0.9);
  display: inline-block;
}
#header-homelink span:first-child {
  animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite
    alternate;
}
#header-homelink span:last-child {
  animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards
    infinite alternate;
}

@keyframes bop {
  0% {
    transform: scale(0.9);
  }
  50%,
  100% {
    transform: scale(1);
  }
}

@keyframes bopB {
  0% {
    transform: scale(0.9);
  }
  80%,
  100% {
    transform: scale(1) rotateZ(-3deg);
  }
}

h2 { margin-top: 1em; }

p { max-width: 60ch; }

.curved { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.centered { margin: auto; text-align: center; }

.bigbutton {
  background-color: #663333;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.2em;
  margin: 4px 2px;
  cursor: pointer;
  /*border: 1px solid black;*/
  

  border-radius: 4px;
  padding: 0.5em 1.5em;
  cursor: pointer;
  color: white;
}

 input[type=text], input[type=password] {
  box-sizing: border-box;
  border: 2px solid #6297BC;
  border-radius: 10px;
  background-color: #FFFFCC;
}

#join input[type=text], #join input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
}

hr {
 color: #F4DB03;
 background-color: #F4DB03;
 height: 8px;
}

#container {
 text-align: left;
 vertical-align: top;
 margin: auto;
 background-color: #FFF;
 
  box-sizing: border-box;
  border: 2px solid #6297BC;
  border-radius: 10px;
  padding: 10px;
}

#header, #header-top {
 clear: both;
 height: 80px;
 background-color: white;
 background-image: url('/images/header-bkg.png');
 background-repeat: repeat-x;
 padding: 0px;
 text-align: left;
}

#header-top {
 height: 10px;
}

#header-homelink { 
 background-image: url('/images/header-smiles.png');
 background-repeat: no-repeat;
 height: 80px;
 }

#header form {
 padding: 0px;
 margin: 0px;
 float: right;
 padding-right: 10px;
}

#header input {
vertical-align: bottom;
margin: 0px;
padding: 0px;
}

 #topnavcontainer {
  display: flex;
 }
  
 #topnavlist {
	list-style: none;
	display: flex;
	flex-grow: 1;
	background-color: #6297BC;
	margin: 0;
	padding: 0;
	box-shadow: 0px 2px rgba(0, 0, 0, 0.2);
 }

 #topnavlist li { padding: 0.2em 1em; }
 #topnavlist .navshiftright { margin-left: auto; }
 
 #topnavlist li a
 {
     color: #FFF;
	 text-decoration: none;
 }
 #topnavlist a:hover, #topnavlist a:focus { color: #FFFF00; }


#footer { 
 margin: 0px;
 padding: 0px;
 font-weight: bold;
 text-align: center;
 background-color: #333;
}

#footer a { color: white; }

#comments p { padding: 2px 0px; }

.nav-footer {
 background-image: url('/images/left-footer.gif');
 background-repeat: no-repeat;
 background-position: left top;
 height: 50px;
}


#search form { margin: 0px; padding: 0px; }

#shoutboxfeatures, #upgradedfeatures { list-style: none; }
li .feature { 
 font-weight: bold;
 color: #6297BC;
}

#middle {
 margin: 10px;
 padding: 0px;
 padding-top: 10px;
 vertical-align: top;
 background-color: white;
 background-position: top right;
 background-repeat: no-repeat;
 background-image: url('/images/content-bkg.gif');
}
#content { padding: 5px; }

.break {
 width: 100%;
 height: 1px;
 font-size: 0.1em;
 overflow: hidden;
}


.navbutton { border: 1px solid black; }

#login { background-color: #FFFFCC; }

#content a { text-decoration: none; color: #6297BC; }

#shoutboxfeatures, #upgradefeatures { padding-left: 20px; }

.needed { color: red; }

.heading { font-weight: bold; color: white; }

#left .upgraded a { color: #FF3300; text-decoration: line-through; }

#codetable td { border: none; padding-left: 10px; }

/* LOGIN FORM */
#username { width: 122px; }
#password { width: 75px; }
#gobutton { width: 40px; }

/* DEMO YELLBOX */
#yellbox { width: 160px; text-align: center; }
#yellbox iframe { height: 200px; border: 1px inset; margin: 0px; width: 90%; }
#yellbox input { width: 90%; }
#yellbox button { height: 25px; }

/* BLOG */
.subtext { font-size: 9px; color: #AAAAAA; }
.comments { text-align: right; }
.comments a { color: #6297BC; text-decoration: underline; }

#comments { margin-top: 40px; }
#comments textarea { margin: 1px; width: 400px; }
#comments p { margin: 0px; padding: 4px; }
#comments h2 { font-size: 14px; }
#submitbutton { width: 200px; }
#submitrow { text-align: center; }

.a-post, .a-post-alt { width: 420px; min-height: 34px; overflow: hidden; padding-left: 10px; background-color: #FFFFCC; padding: 3px 2px; }
.a-post img, .a-post-alt img { margin: 4px; border: none; text-align: left; }
.a-post-alt { background-color: white; }

#blog-updates { text-align: center; }