/*Hello fellow dev, or student of the art of cascading style sheets, I'm C.R. Kunferman and I wrote all this using a nice little program called "notepad"! And did some edits using an online editor courtesy of dreamhost. This is all custom css as you may have gathered, some of it may be outdated. As long as it looks good in all browsers, I honestly don't care. In fact I find it to be simpler that way, instead of having 500 classes to make 1 box, I just make 1 box. This is mostly due to coding the site with the design in mind. Starting with no tables. Yes. 100% div. That way I can juggle boxes all around the screen, or even make a completly different site all together, without ever having to touch the site code! Fun stuff. CSS Zen Garden might interest you, theres lots of great examples of what can be accomplished with the same simplicity. You're welcome! -C.R. Kunferman*/

body {
    background-color: #000;
    font-variant: small-caps;
    color: #CCC;
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    margin: auto;
    margin-top: 0px;
	padding-top:50px;
	background-image: url("https://thegineerenchronicles.art/gineerencitybg.jpg");
	background-size:cover;
	background-repeat: norepeat;
	background-position: scroll;
	min-height:100vh;
 /*   max-width: 900px; */
    }
h3 {
    font-family: 'Karla', sans-serif;
    font-size: 8px;
    font-weight: 390;
    text-align: center;
    color: #EEE;
}
h4 {
    font-family: 'Karla', sans-serif;
    font-size: 14px;
    text-align: center;
    color: #fff;
}
h5 {
    font-family: 'Karla', sans-serif;
    text-align: center;
    color: #AAA;
    font-weight: 800;
    padding: 5px;
}
.head {
    margin: auto;
    width:100%;
    height: calc(201px / 100vh);
    border-top: 0px;
    border-radius: 10px;
}
.head img{
    max-width:900px;
    width:100vw;
    height:auto;
}
.content{
	display:flex;
	flex-direction:row;
	flex-wrap: nowrap;
}
.factions{
	width:125px; 
	max-width:125px; 
	clear:both; 
	padding-top:15px;
	padding-bottom:15px; 
	padding-left:5px;
	margin-top:25px; 
	margin-left:-15px;
	border-top:1px solid #FFF;
	display:block;
	background-color:#000;
	border-radius:10px;
}
.factions img{
	max-width:125px;
}
.midcontent{
	flex-basis:2;
	width:100%;
	margin-top:25px;
	
}
.subhead {
    font-family: 'Karla', sans-serif;
    font-weight: 800;
    font-size: 16px;
    text-align: center;
    color: #ffc900;
}
.box {
    clear: both;
    margin: auto;
    width: 100%;
}
li.chapnav, .chapnav a {
    height:25px;
    font-size:9px;
    color: #FFF;
    transition: font-size 1s, color 1s;
}
li.chapnav :hover, .chapnav a:hover, .currentchap{
    max-height:25px;
    padding:2px;
    font-size: 12px;
    color: #fe7101;
    transition: font-size 3s, color 1s;
    border-radius:3px;
    background-color: #333;
}
.foreward {
    margin: auto;
    max-width: 240px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    float: left;
    background-color: #000;
    border: 1px solid #FFF;
    font-size: 10px;
    border-top: 0px;
    clear: left;
}
.forwarn {
    padding: 5px;
    border: 1px solid #fe7101;
    color: #fe7101;
    border-radius: 5px;
    margin: 10px;
}
.zforwaradz {
    float: left;
    max-width: 300px;
    padding-bottom: 25px;
    margin-left: 5px;
}

figure {
    float: left;
    margin: auto;
}

.foot {
    width: 100%;
    margin-bottom: 0px;
    clear: both;
    padding-top: 50px;
    text-align: left;
    border-top: 1px solid #FFF;
}

.credits {
    font-size: 8px;
    font-weight: 300;
}
.nft-pref{
    padding:10px;
    background-color: rgba(36, 36, 36, 0.8);
    border:1px solid #AAA;
    margin-bottom: 10px;
}
.nft-descr {
    font-size: 10px;
    width: 200px;
    border: 1px solid #FFF;
    border-radius: 5px;
    margin: auto;
    padding: 5px;
    text-align: center;
}
.nft-descr-head {
    margin-top:10px;
    margin-bottom:10px;
    font-size: 18px;
    font-weight:600;
}
.attributes {
    font-size: 12px;
    font-weight: 700;
    padding: 5px;
}
.previous, .next {
    padding:10px;
    border: 1px solid #333;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bolder;
}
.previous {
    float: left;
    clear: left;
}
.next {
    float: right;
    clear: right;
}
.head img, .twosevbox img, .twosevbox {
    border-radius: 10px;
}
.clearer {
    width: 100%;
    clear: both;
    border-top: 1px solid #FFF;
}
.splashtitle, .splashnav ,.logo, .mainnav{
	margin-top:50px;
    font-size: 20px;
    font-weight: 100;
    letter-spacing: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #FFF;
	border-radius:10px;
    width: 75vw;
    overflow:auto;
	margin:auto;
	display:flex;
	flex-wrap:nowrap;
	justify-content:center;
		background-color: rgba(0,0,0,0.8);
}
.mainnav{
	width: 90vw;
	background-color: rgba(0,0,0,0.5);
}
.splashnav , .nav-item{
    margin-top: 5px;
	margin:auto;
    letter-spacing: 5px;
}
.splashnav a:hover {
    color: #ffc900;
    transition: 1s;
}
.navi {
    border-bottom: 1px solid #FFF;
    text-align: center;
    width: 99vw;
    margin:auto;
    display: block;
    overflow: visible;
    clear: both;
    font-weight: bolder;
}
ul {
    width: 90%;
    text-align: center;
    list-style: none;
    margin: auto;
}
li {
    float: left;
    padding: 10px;
    padding-right: 20px;
    margin: 0px;
}
a, a:link, a:hover, a:active, a:visited {
    text-decoration: none;
}
a:link, a:hover {
    color: #fe7101;
}
a:active {
    color: #FFF;
}
a:visited {
    color: #EEE;
}

.clear {
    display: block;
    width: 100%;
    clear: both;
}
/*oooo cool page header image*/
.authhead{
background-image: url(https://thegineerenchronicles.art/main/src/authhead.jpg);
background-repeat: no-repeat;
background-size:100%;
width:100vw;
min-height:300px;
max-width:900px;
overflow:visible;
z-index:-5;
}
/* lets lift the boxes onto the cool page header for nice design effect*/

.lifter{
margin-top:-150px;
}

/* This is not a table. Its a div with an id named table. It was kinda like a table, and I was in a rush. If you would like me to change the id, in order to admire a fully table free site (including the word otherwise it truly is), please send 1 ETH to crknftart.eth */

#table {
    width: 444px;
    margin-top: -1px;
    z-index: -1;
    float: right;
    border-radius: 10px;
    border: 1px solid rgb(122, 122, 122);
    background-color: #111;
}
.attri1, .linkage {
    color: #EEE;
    width: 250px;
    clear:none;
    float: left;
    text-align: center;
    background-color: #333;
    margin-bottom: 10px;
    margin-top: -1px;
    margin-left: 1px;
    margin-right: 1px;
    border-top: 1px solid rgb(144, 144, 144);
    border-bottom: 1px solid rgb(144,144,144);
    padding: 10px;
    font-size: 10px;
    border-radius: 10px;
    display: inline-block;
}
.attri2 {
    color: #777;
    font-size: 110%;
    text-align: left;
}
#nftsContainer h2 {
    float: left;
    clear: both;
    border-top: 1px solid #AAA;
    border-bottom: 1px solid #AAA;
    width:100%;
    text-align:center;
}
#imag {
    float: left;
    display: inline-block;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-right: 1px solid rgb(144, 144, 144);
    border-top: 1px solid rgb(144, 144, 144);
    background-size: 450px;
}
.description{
background-color:#333;
float:left;
clear:both;
border: 1px solid rgb(144, 144, 144);
border-radius:10px;
width:100%;
}
.fulllink{
    width: 100%;
    float: left;
    clear:both;
    display:block;
    margin-top:10px;
    margin-bottom:12px;
    border-top:1px solid #FFF;
    border-bottom: 1px solid #FFF;
    padding-top: 10px;
    padding-bottom:10px;
    background-color: #000;
    font-size: 14px;
    font-weight: 600;
}
/*The "un-clickable" yet "hoverable" NFT expanding detail thumbnails!!! Wow, I'm sure theres a "more efficient" way to do this... Seperate CSS maybe? Inline? Then again I look forward to seeing the entire chronicles all here and don't mind doing it manually. So for now, I'm gonna just put it all in the main css. One day I'll probably decide to move each chapter into its own. Let's just id each box and slap the thumb there. ----- update: Yeah every chapter is getting its own css file. I'll leave the prologue thumbs here. */
#tgc0v {
    background-image: url('https://thegineerenchronicles.art/main/src/nalabel.jpg');
    background-repeat: no-repeat;
    background-size: 500px auto;
    transition: 3s;
}
#tgc0v:hover {
    background-position-x: -200px;
    transition: 3s;

}
#tgc0-lovers-1 {
    background-image: url('https://thegineerenchronicles.art/main/src/tgc0/tgc0-lovers1smthumb.jpg');
    background-size: 270px auto;
    background-repeat: no-repeat;
}
#tgc0-lovers-2 {
    background-image: url('https://thegineerenchronicles.art/main/src/tgc0/tgc0-lovers2smthumb.jpg');
    background-size: 270px auto;
    background-repeat: no-repeat;
}
#tgc0-Tracties01 {
    background-image: url('https://thegineerenchronicles.art/main/src/tgc0/TGC0-tracties01smthumb.jpg');
    background-size: 270px auto;
    background-repeat: no-repeat;
}
#tgc0-tracties2 {
    background-image: url('https://thegineerenchronicles.art/main/src/tgc0/TGC0-tracties02smthumb.jpg');
    background-size: auto auto;
    background-repeat: no-repeat;
}
#tgc0-tracties3 {
    background-image: url('https://thegineerenchronicles.art/main/src/tgc0/tgc0-tracties03smthumb.jpg');
    background-size: 270px auto;
    background-repeat: no-repeat;
}
#tgc0-ompu1 {
    background-image: url('https://thegineerenchronicles.art/main/src/tgc0/tgc0-ompu1.jpg');
    background-size: 270px auto;
    background-repeat: no-repeat;
}
#tgc0-genefir1 {
    background-image: url('https://thegineerenchronicles.art/main/src/tgc0/tgc0-genefir1smthumb.jpg');
    background-size: 270px auto;
    background-repeat: no-repeat;
}
#tgc0-cover {
    background-image: url('https://thegineerenchronicles.art/main/src/tgc0/tgc0-cover.jpg');
    background-size: 270px auto;
    background-repeat: no-repeat;
}
#tgc0-protors1 {
    background-image: url('https://thegineerenchronicles.art/main/src/tgc0/tgc0-protors1smthumb.jpg');
    background-size: auto 440px;
    background-repeat: no-repeat;
}
#tgc0-goldendeclaration {
    background-image: url('https://thegineerenchronicles.art/main/src/tgc0/TGC0-goldendeclarationsmthumb.jpg');
    background-size: 270px auto;
    background-repeat: no-repeat;
}
#tgc0-genegierni1 {
    background-image: url('https://thegineerenchronicles.art/main/src/tgc0/tgc0genegierni1smthumb.jpg');
    background-size: 270px auto;
    background-repeat: no-repeat;
}
#tgc0-genegierni2 {
    background-image: url('https://thegineerenchronicles.art/main/src/tgc0/tgc0genegierni2smthumb.jpg');
    background-size: auto auto;
    background-repeat: no-repeat;
}
#tgc0-optics1 {
    background-image: url('https://thegineerenchronicles.art/main/src/tgc0/tgc0-optics.jpg');
    background-size: auto auto;
    background-repeat: no-repeat;
}
/*Thumb BG all set, now lets slap the same class on all of them. This is the thumb box class*/
.nftthumb {
    display: inline-block;
    width: 270px;
    height: 220px;
    transition: 1s height;
    border-radius: 10px;
}
/*Neat. Still never got a hoverboard in my lifetime. Invented one once. Too much magnets happenning. At least I can enjoy this nice hover transition on all the thumbs*/
.nftthumb:hover {
    width: 270px;
    height: 440px;
    transition: 1s height;
    border-radius: 10px;
}
/*sometimes buttons get too big. Pull over sir mix enough, need to wrap that puppy.*/
.buttwrap {
    width: 900px;
    height: 100px;
    display: inline block;
    text-align: center;
}
/*ooo link that grows*/
a:hover {
    font-size: calc(105%);
    transition: .5s;
}
/*sometimes you just need a 270px box. For whatever you want, whereever you want, whenever you want.*/
.twosevbox {
    width: 270px;
    min-height: 470px;
    padding: 5px;
    margin: 5px;
    float: left;
    margin-bottom: 20px;
    border-radius: 5px;
    display: inline-block;
}
/*enter subtle hover highlight*/
.twosevbox:hover {
    background-color: #111;
    transition: 1s;
}
/*Sometimes you feel like blowing bubbles, but don't want to type out bubble repeatedly*/
.greybub{
    font-size:16px;
    border-radius:10px;
    background-color:#333;
    padding:10px;
    margin:20px;
}
.greybub1 {
    margin: 5px;
    padding: 5px;
    background-color: #333;
    border-radius: 10px;
}
.greybub1:hover, .greybub2:hover {
    background-color: rgba(128,128,128,.2);
    transition: 1s;
}
.greybub2 {
    margin: 10px;
    padding: 5px;
    background-color: #333;
    border-radius: 10px;
}
/*This is a terrible class name, but its specifically for the roadmap page of the site, and no where else.*/
.roadmap {
    text-transform: none;
    width: 400px;
    float: left;
    margin: 10px;
    border-radius: 10px;
    padding: 10px;
    min-height: 275px;
    font-color: #CCC;
    background-color: #111;
}
/*Wow, its appears with these last 3 lines of CSS I may have covered everything in the entire site, and can reuse so many of the classes for so many things I might have to throw random easter eggs somewhere. */
.chapter {
    font-size: calc(120%);
    width: 100%;
    background-color: #444;
    color: #999;
    text-transform: none;
    text-align: left;
    border-radius:10px;
}
p {
    margin: auto;
    width: 85%;
    transition: 2s;
    padding: 10px;
}
p:hover {
    line-height: 130%;
    width: 95%;
    font-size: calc(112%);
    background-color: #333;
    color: #C9c9c9;
    transition: 1s;
    grid-auto-columns: auto;
    border-radius: 5px;
}
.chapter img {
    padding-right:15px;
    float: left;
    margin: 5px;
    border-radius: 10px;
}
.cover{
    width:425px;
    height:580px;
    float: left;
    border:1px solid #CCC;
    border-radius: 10px;
    margin:10px;
}
/*This is a little box I use to put stuff into for testing. My creative juices were flowing and I went through a series of thesauratical (not a word) ids, before settling on this classic, yet powerful one that speaks volumes towards its purpose. */
#test {
    clear: both;
    width: 270px;
    padding: 20px;
    display: block;
}

/* Custom CSS for Manifold.xyz classes and ids. These classes and ids aren't mine, but I was encouraged to customize the widgets for this site, and felt like sending less calls to manifold's servers for the css files, so I just inspected whatever I needed in here and styled them from the ground up. Manifold is awesome. */

/*they gave me these first one which you can also find here: https://docs.manifold.xyz/v/manifold-for-developers*/
:root {
    --manifold-text--font-size--body: 12px;
    --manifold-text--font-size-header: 14px;
    --manifold-text--font-family-header: 'Karla', sans-serif;
    --manifold-text--font-family--body: 'Karla', sans-serif;
    width: 100%;
}
html {
  background: black;
}

/* Styles all the internal buttons 
#m-connection button {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  justify-content: center;
  padding: 14px 24px;
  color: white;
  font-family: "Apercu", sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 20px;
  background: transparent;
  border: 2px solid white;
  border-radius: 51px;
  transition: color 0.3s ease, border 0.3s ease, background 0.3s ease;
}
/*

/* The hover effect for the buttons */
#m-connection button:hover {
  background: white;
  color: black;
}

/* The layout of the wallet options drop down
#m-connection{
  gap: 6px;
  display: flex;
  flex-direction: column;
}
*/
/* The disconnect button 
#m-connection .m-connection-disconnect-wallet {
  margin: 0;
}

/* Styles the placeholder div while the JS loads 
#m-connect:not([data-v-app]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  justify-content: center;
  padding: 14px 24px;
  height: 60px;
  width: 180px;
  background: transparent;
  border: 2px solid white;
  border-radius: 51px;
  transition: color 0.3s ease, border 0.3s ease, background 0.3s ease;
}

/* Styles the placeholder div while the JS loads 
#m-connect:not([data-v-app])::before {
  content: "Loading...";
  color: white;
  font-family: "Apercu", sans-serif;
  font-size: 16px;
  text-transform: uppercase;
}

/*---------end complimentary manifold styles------------------*/
/*the rest I was able to discover thanks to the well structured and easy to style classes and ids rendering on the page.*/

.campaign-buy-button, .m-connection-install-wallet {
    width: 270px;
    margin: auto;
    background-color:rgb(45, 118, 0);
    color: rgb(8, 244, 0);
    border-radius: 10px;
    text-align: center;
    padding: 10px;
}
.spinner {
    width: 270px;
    height: 50px;
    display: block;
    background-color: #000;
}
/*Lightboxes are important*/

.lightbox {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  z-index: 2;
}

.lightbox:target {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  right: 0;
  top: 0;
}

.lightbox img {
  border-radius: 1em;
  display: block;
  margin: auto;
  max-height: 80vh;
  max-width: 90vh;
}

.lightbox .close {
  color: #fff;
  font-size: 4em;
  font-weight: bold;
  height: 1em;
  position: fixed;
  right: 0;
  top: 0;
  width: 1em;
  z-index: 1001;
}

.lightbox p {
  font-size: 2em;
  font-weight: bold;
  text-align: center;
}



.hidden{
    display:none;
}


/* AUDIOPLAYER */
.audcontainer {
  min-height: 300px;
  background-color: #221F26;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.audwrapper {
  width:auto;
  max-width: 42rem;
  backdrop-filter: blur(16px);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.relative {
  position: relative;
}

.progressContainer {
display:none;
  height: 6rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  background-color: rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.progressBar {
    display:none;
  position: absolute;
  inset: 0;
  background-color: rgba(229, 222, 255, 0.2);
  transform-origin: left;
  transition-property: transform;
  transition-timing-function: linear;

}

.controls {
  position: relative;
  background-color: #2A2530;
  border-radius: 0.5rem;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.playButton {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: rgba(229, 222, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E5DEFF;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.playButton:hover {
  background-color: rgba(229, 222, 255, 0.3);
}

.playIcon {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid currentColor;
  margin-left: 4px;
}

.pauseIcon {
  display: none;
}

:global(.is-playing) .playIcon {
  display: none;
}

:global(.is-playing) .pauseIcon {
  display: block;
}

.pauseBars {
  width: 0.75rem;
  height: 2rem;
  background-color: currentColor;
  border-radius: 0.125rem;
  display: flex;
  gap: 0.5rem;
}

.pauseBars::after {
  content: '';
  width: 0.75rem;
  height: 2rem;
  background-color: currentColor;
  border-radius: 0.125rem;
}

.progressTrack {
  flex: 1;
  height: 0.25rem;
  background-color: rgba(229, 222, 255, 0.2);
  border-radius: 9999px;
  overflow: hidden;
}

.progressFill {
  width: 100%;
  height: 100%;
  background-color: rgba(229, 222, 255, 0.4);
  transform: translateX(-100%);
  transition-property: transform;
}

:global(.is-playing) .progressFill {
  transform: translateX(0);
}

.volumeControls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.muteButton {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: rgba(229, 222, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E5DEFF;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.muteButton:hover {
  background-color: rgba(229, 222, 255, 0.3);
}

.volumeSlider {
  width: 5rem;
  height: 0.25rem;
  appearance: none;
  background-color: rgba(229, 222, 255, 0.2);
  border-radius: 9999px;
  overflow: hidden;
}

.volumeSlider::-webkit-slider-thumb {
  appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background-color: #E5DEFF;
  cursor: pointer;
}

/*talk talk */
 .node-cluster {
            position: relative;
            flex:2;
            height: 300px;
            margin-bottom: 20px;
        }
        .node {
            position: absolute;
            background: rgba(0,0,0,0.9);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            font-size: 12px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            text-decoration: none;
        }
        .node:hover {
            transform: scale(1.1);
            transition: transform 0.3s;
        }
        .connection {
            position:absolute;
            stroke: #999;
            stroke-width: 2;
            width:100%;
        }
        .honeycomb {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 20px;
        }
        .cell {
            width: 60px;
            height: 69.28px;
            background: #444;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            margin: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 12px;
            text-decoration: none;
            color: #333;
        }
        .cell:hover {
            transform: scale(1.1);
            transition: transform 0.3s;
        }
        .form-area {
        
            margin:auto;
            max-width: 600px;
            background: rgba(0,0,0,0.5);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        input, textarea, button {
            width: 100%;
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background:#000;;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background: #357abd;
        }
        .thread {
            margin-top: 20px;
            padding: 10px;
            background: #333;
            border-radius: 4px;
        }
        .error {
            color: red;
            margin-bottom: 10px;
        }
/*Thats all for now. Say hi on twitter if you enjoyed this. @crknftart

P.S. Enjoy all this whitespace while this is still a WIP, cause I'll probably remove it, along with most of these comments. Why have it at all? Because I know how nosey developers get... I am one! Hit me up I'll peruse your code too. Is yours as entertaining? Or do you just do backend. Omg, if you took offense to that please leave it in your css comments. I dream of one day looking at a css file and seeing: "F*** You C.R.Kunferman!" I won't take offense, I'd take it as a compliment. HEY. I was nice enough to leave all this entertaining commentary for you, and I do backend development too so if you take offense to that.... maybe you should stick to wix. Good Day. :) */