body {
  background: #cccccc;
  margin: 0;
  padding: 0;
  border: 0;
}

#pseudobody {
  margin: 0 auto;
  position: relative;
  text-align: left;
  max-width: 900px;
  width:expression(document.body.clientWidth > 900? "900px": "auto" );
  background: white;
}

#wrapper {
  position: relative;
  padding-top: 330px;          /* originally: 220px */
  margin-left: 20px;
  margin-right: 20px;
}

#nav-header {
  height: 330px;               /* originally: 220px */
  position: absolute;
  top: 0;
  clear: both;
  text-align: left;
  width: 100%;
  margin: 20px;
}

#footer {
  font-family: Arial, Verdana, Sans-Serif;
  font-size: 10px;
/*  color: #999999;  grey */
  text-align: center;
  margin: 1.5em 0 0;
  clear: both;
/*  height: 0; */
}

/*
#footer a:link {
  color: #999;
  text-decoration: none;
}
*/


.go2cle { 
  background: pink;
  border: 2px dashed red;
  width: 110px;
  padding: 20px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  float:right;
}

.go2cle a { 
  font-family: Arial, Verdana, Sans-Serif;
  font-size: 15px;
  font-weight: bold;
  color: #ff0000;       /* red */
  text-decoration: none;
}

.go2cle a:hover { 
  color: green;
  text-decoration: underline;
}

.describe-it {
  font-family: arial, verdana, sans serif;
  font-size: .8em;
  background: #99ff99;
  padding: 20px;
  width: 75%;
/*  float: left;  */
}


h1 {
  margin: 0;
  font-size: 24px;
  color: black;
}


#wrapper h2 {
  width: 400px;
  margin: 0 auto 1.5em;
  text-align: center;
  font-size: 24px;
  color: #0000c0;                    /* was 4950c0 */
  padding: 5px;
  border-top: 2px solid #21759b;
  border-bottom: 2px solid #21759b;
  border-left: 2px solid #21759b;
  border-right: 2px solid #21759b;
/*
  border-radius: 0 0 30px 30px;
     -moz-border-radius: 0 0 30px 30px;
     -khtml-border-radius: 0 0 30px 30px;
     -webkit-border-radius: 0 0 30px 30px;
  background: #21759b url(gradient-blue-narrow.png) repeat-x left top;
*/
}




#greyfeet { 
  font-family: Arial, Verdana, Sans-Serif;
  font-size: 10px;
  color: #999999;       /* grey */
  text-align: center;
  margin: auto;
border: 1px solid blue;
}

#greyfeet a {
  color: #999;
  text-decoration: none;
}




/*
use a relatively positioned wrapper, (pseudobody)
then a relatively positioned content wrapper as the 1st block, (wrapper)
then your absolute positioned header, (nav-header)
then the footer without any position declaration. (footer)

Because the header is absolutely positioned
the footer will ignore its position when rendering
    and will position itself based off the content wrapper instead.
*/











/* BELOW IS WHAT'S LEFT OF WHAT I STARTED APPLYING BEFORE THE SETBACK WITH CLP */


.black-red {
  color:yellow;
  border: 2px solid red;
  font-weight: bold;
  background-color:black;
  padding:0 10px 2px;
  margin-left:50px;
  margin-right:15px;
}

.gray-table {
  width: 45%;
  margin-left: 50px;
  border: 1px solid black;
  padding:10px;
  background-color: #cccccc;
}

.order-table {
  font-family: arial, verdana, sans serif;
  font-size: .8em;
}

.order-table input {
  background-color: #cccccc;
  width: 20px;
}

.indent50 {margin-left: 50px}

.width60 {width: 60%}

.width340 {width: 340px}

.width300 {width: 33%}    /* was 300px */

/* input {width:25px} */