body {
  margin: 0;
  padding: 0; /* t r b l */
  font-size:.8em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background-color: #fc9;
}

/* header styles */
#header {
  width: 100%;
  overflow: hidden;
  border-bottom: 2px solid #fc6;
  background-color: #fff;
}

#header p,
#header h1,
#header h2 {
  display: inline;
  width:96%;
  margin: 0;
  padding: 0;
  font-family: "Comic Sans MS";
  clear: none;
}

#header img.logo  {
  float: left;
  border: 0px;
}

/* footer styles */
#footer {
  height: 5em;
  clear:both;
  padding:1em 1em;
  border-top:1px solid #ccc;
  background-color:#fff;
  font-family: "Comic Sans MS";
  font-weight: bold;
  font-size: 0.95em;
}


/* navigation styles */
/* un-ordered lists are used for navigation items */
#header ul, 
#footer ul,
.col2 ul {
  float: none;
  margin: 0;
  padding: 0; 
  font-family: "Comic Sans MS";
  font-weight: bold;
  list-style: none;
}

/* header navigation starts to the right of the 1st column */
.headnav {
  float: left;
  padding-left: 27%;
}


.headnav ul {
  width: 100%;
}

/* header navigation appears as a horizontal set of tabs above the main column */
.headnav ul li a {
  float: left;
  display: block;
  padding: 0.2em 0.5em;
  margin-right: 2px;
  list-style: none;
  text-decoration: none;
  border-top: 2px solid #fc6;
  border-left: 2px solid #fc6;
  border-right: 2px solid #fc6;
}

/* make sure the current tab is unique so the user knows which tab is active /*
.headnav ul li a.active {
  font-weight:bold;
  color:#fff;
  background:#fc6;
  border-top:2px solid #fc6;
  border-left:2px solid #fc6;
  border-right:2px solid #fc6;
}

/* side-bar navigation appears as a vertical list */
.sidenav ul li a {
  float: none;
  display: block;
  padding: 0 0 0.5em 0.5em;
  margin: 0;
  list-style: none;
  text-decoration: none;
  background-color: #fc6;
}

/* footer navigation appears as a horizontal list */
.footnav ul li a {
  float: none;
  display: inline;
  padding: 0 0 0 5px;
  margin: 0;
  list-style: none;
  text-decoration: none;
  font-size:  1em; /* so it's not a fraction of the fraction */
}

/* change the color of the list items when the user hovers  */
/* so there is a visual cue that the item is an active link */
#header ul li a:hover, 
#footer ul li a:hover,
.col2 ul li a:hover {
  color: #fc6;
}

.sidenav ul li a:hover,
#header ul li a:hover {
  color: #fff;
  background: #fb6;
}

#header ul li, 
#footer ul li,
.col2 ul li {
  display: inline;
}

#header ul li a, 
#footer ul li a,
.col2 ul li a {
  color: #080;
}

/* column container */
.colmask {
  clear:both;
  float:left; 
  width:100%;
  overflow:hidden;
  background-color:#fff; 
}

/* common column settings */
.colmid,
.colleft {
  float:left;
  width:100%; 
  position:relative; 
  background-color:#fff;
}

.col1,
.col2 {
  float:left;
  position:relative;
  padding:0.5em 0 1em 0;  /* no left and right padding on columns, we just make them narrower */
  overflow:hidden;
  background-color:#fff;
}

.col1 p {
  padding-right: 1em;
  padding-left: 1em;
}

.col1 img { 
  border: 0px;
  padding-right: 1em;
}

.col1 h3, .col1 h4 {
  font-family: "Comic Sans MS";
  padding-left: 0.5em; 
}

.cat_hdr {
  font-family: "Comic Sans MS";
  color: #fc6;
  background-color: #080;
  font-weight: bold;
  font-size: 1.15em;
}

/* settings for the side-bar navigation menu */
.leftmenu {
  background:#fff;      /* right column background colour */
}

.leftmenu, .colleft {
  right:75%;            /* right column width */
  background:#fff;      /* left column background colour */
}

.leftmenu, .col1 {
  width:71%;            /* right column content width */
  left:102%;            /* 100% plus left column left padding */
}

.leftmenu, .col2 {
  width:21%;            /* left column content width (column width minus left and right padding) */
  left:6%;              /* (right column left and right padding) plus (left column left padding) */
}


/* settings for the rounded boxes for the side-bar navigation, search box etc. */
.roundtop { 
  background: url(../_images/tr.gif) no-repeat top right; 
  background-color: #fc6;
}

.roundbottom {
  background: url(../_images/br.gif) no-repeat bottom right; 
  background-color: #fc6;
}

img.corner {
   width: 11px;
   height: 11px;
   border: none;
   display: block !important;
}

/* settings for the side-bar search box */
.search {
  padding: 0 0 0 0.5em;
  background-color: #fc6;
}

/* settings for the side-bar subscribe box */
.subscribe, .subscribe a {
  background-color: #fc6;
  color: #080;
  text-decoration:none;
  padding: 0 0 0 0.5em;
}

/* settings for the Smile-a-Day quote */

.apop {
  font-family: "Comic Sans MS";
  background-color: #fff;
  color: #080;
  width: 60%;
}

/* Drop shadows for images */
.shadow-left {
  float: left;
  background: url(../_images/shadow1.gif) no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
}

.shadow-right {
  float: right;
  background: url(../_images/shadow1.gif) no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
}

.shadow-left div,
.shadow-right div {
  background: url(../_images/shadow2.png) no-repeat left top !important;
  background: url(../_images/shadow2.gif) no-repeat left top;
  padding: 0px 5px 5px 0px;
}

.shadow-left img,
.shadow-right img {
  background-color: #fff;
  border: 1px solid #fc6;
  padding: 4px;
}

.offset5 {
  margin-left: 5px;
}