/* spiralstyle.css */
/* This version is for a jello fixed-width centered layout */
html {
      text-align: center;
}

body {
     /* typography */
     color: black;
     font-family: Verdana, Geneva, Ariel, sans-serif;
     font-size: small;
	  text-align: left;
	  
	  /* colour */
	  background-color: #474f1e;
	  background-image: url(images/bck_grad.jpg);
	  background-repeat: repeat-x;
	  background-position: top left;
}

h1 {
  font-size: 150%;
}

h2 {
  font-size: 130%;
}

h3 {
  font-weight: bold;
}

a {
   text-decoration: none;
}

li {
   list-style-image: url(images/bullet.gif);
	margin-left: 15px;
	vertical-align: middle;
}

ul{
    padding: 5px 0px 0px 4px;
}

#main-area p {
   padding-top: 5px;
}

a:link {
   color: #FFFF99;
}

a:visited {
   color: #FFFF99;
}

a:hover {
   color: #FF9900;
}

.sect-head-text a:link {
   color: #333333;
}

.sect-head-text a:visited {
   color: #333333;
}

.sect-head-text a:hover {
   color: #FF9900;
}

.section-heading {
     color: #FFFF99;
	  font-size: 110%;
}

#bck-img-pos {
      position: absolute;
	  top: 0px;
	  left: 0px;
	  z-index: 0;
}

#outer-container {
      /* layout */
      position: relative;
      width: 650px;
	  margin: 0 auto;
}

#container {
     position: relative;
	  width: 100%;
	  background-color: white;
	  margin: 40px 0px 20px 0px;
}

#header {
	  background-image:url(images/outer_corners_top.jpg);
	  background-repeat: no-repeat;
	  background-position: top left;
     /* To expose graphic ... */
	  height: 10px;
}

#header-content {
	  background-color: white;
	  margin-left: 10px;
	  margin-right: 10px;
	  /* Just for example ... */
	  height: 65px;
}

#header-logo {
     float: left;
	  width: 260px;
}

#header-right {
     margin-left: 260px;
	  text-align: right;
}

#header-right-img {
     position: absolute;
	  top: -41px;
	  left: 260px;
	  z-index: 100;
}

#nav-spacer {
      height: 15px;
	  background-color: #666600;
	  margin: 0px 10px 0px 10px;
}

#navigation {
	  background-color: #333333;
	  margin-left: 10px;
	  margin-right: 10px;
	  padding: 5px 0px 5px 0px;
	  text-align: center;
}

.nav {
	 padding: 3px 5px 3px 5px;
    vertical-align: middle;
}

.nav img {
     vertical-align: middle;
}

#main-area {
     background-color: #666600;
	 height: 100%;
	 margin-left: 10px;
	 margin-right: 10px;
}

#main-left {
     float: left;
	 width: 400px;
}

.sect-header {
     background-image: url(images/section_banner.gif);
	 background-repeat: no-repeat;
	 height: 57px;
	 width: 212px;
}

.sect-head-img {
     float: left;
	 padding: 8px 0px 0px 8px;
}

.sect-head-text {
     padding: 18px 0px 0px 60px;
	 color: #333333;
}

#sect-welcome {
     padding: 9px;
     background-image: url(images/red_green_grad.jpg);
	 background-repeat: repeat-x;
}

#sect-design {
     padding: 9px;
     background-image: url(images/blue_green_gradient.jpg);
	 background-repeat: repeat-x;
}

#sect-build {
     padding: 9px;
     background-image: url(images/red_green_grad.jpg);
	  background-repeat: repeat-x;
}

#sect-manage {
     padding: 9px;
     background-image: url(images/blue_green_gradient.jpg);
	 background-repeat: repeat-x;
}

#sect-packages {
     padding: 9px;
     background-image: url(images/red_green_grad.jpg);
	 background-repeat: repeat-x;
}

#main-right {
     margin-left: 400px;
}

#sect-talk {
     padding: 9px;
     /* background-color: #575704; */
	  background-color: #7D7D0F;
}

#sect-talk-main {
     padding: 9px;
     background-image: url(images/red_green_grad.jpg);
	  background-repeat: repeat-x;
}

#sect-example {
     padding: 9px;
     background-color: #737307;
	 text-align: center;
	 /* To keep the left & right sections aligned ... */
	 height: 820px;
}

#sect-example-main {
     padding: 9px;
     background-image: url(images/blue_green_gradient.jpg);
	 background-repeat: repeat-x;
}

.demo-site {
     background-color: #333333;
	 padding: 10px 0px 5px 0px;
	 margin: 10px 5px 10px 5px;
	 border: 1px solid white;
	 width: 200px;
}

.demo-site-main {
     background-color: #333333;
	 padding: 10px;
	 margin: 10px 5px 10px 5px;
	 border: 1px solid white;
	 width: 350px;
	 height: 140px;
}

.demo-site-img {
     float: left;
}

.demo-site-text {
     padding-left: 185px;
	 color: #CCCCCC;
}

#footer {
	  background-image: url(images/outer_corners_bottom.jpg);
	  background-repeat: no-repeat;
	  background-position: bottom left;
     /* To expose graphic ... */
	  height: 10px;
}

#footer-content {
     clear: both;
	  background-color: #394F07;
	  margin-left: 10px;
	  margin-right: 10px;
	  text-align: center;
	  padding: 10px;
}

#footer-content p {
     font-size: 70%;
	  line-height: normal;
	  color: white;
}