body{
    font-family:Verdana, "Bitstream Vera Sans", geneva, arial, helvetica, helve, sans-serif;
    font-size: 14px;
    line-height:20px;
    background:#FFFFFF;
    color:#303030;
    // padding:10px;
}

li {
  margin-bottom:5px;
}

.header {
     font-family: sans-serif;
     font-size: 32px;
     margin-bottom: 18px;
}

.button3d {
  margin: 0 0 5px;
  padding: 0 12px;
  line-height: 28px;
  // font-size: 11px;
  //font-weight: bold;
  color: #555555;
  text-decoration: none;
  text-shadow: 0 1px white;
  background: #ececec;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #cecece #bababa #b8b8b8;
  border-radius: 12px 12px 12px 12px;
  outline: 0;
  display: inline-block;
  vertical-align: baseline;
  zoom: 1;
  *display: inline;
  *vertical-align: auto;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  background-image: -webkit-linear-gradient(top, #f1f1f1, #ececec 70%, #e2e2e2);
  background-image: -moz-linear-gradient(top, #f1f1f1, #ececec 70%, #e2e2e2);
  background-image: -o-linear-gradient(top, #f1f1f1, #ececec 70%, #e2e2e2);
  background-image: linear-gradient(to bottom, #f1f1f1, #ececec 70%, #e2e2e2);
  -webkit-box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #b8b8b8, 0 3px #cccccc, 0 4px #b8b8b8, 0 5px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #b8b8b8, 0 3px #cccccc, 0 4px #b8b8b8, 0 5px 2px rgba(0, 0, 0, 0.25);
}

.button3d:hover, .button3d:active {
  background: #ececdc;
  border-top-color: #c9c9b9;
}

.button3d:active {
  margin-bottom: 1px;
  margin-top:4px;
  border-radius: 12px;
  -webkit-box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
}

.smallbutton {
  margin: -1px 0 2px;
  padding: 0 8px;
  line-height: 20px;
  border-radius: 6px;
  vertical-align: top;
  -webkit-box-shadow: inset 0 0px #fdfdfd, inset 0 0 0 0px #eaeaea, 0 0px #b8b8b8, 0 1px #cccccc, 0 2px #b8b8b8, 0 2px 0px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0px #fdfdfd, inset 0 0 0 0px #eaeaea, 0 0px #b8b8b8, 0 1px #cccccc, 0 2px #b8b8b8, 0 2px 0px rgba(0, 0, 0, 0.25);

}


.smallbutton:active {
  margin: 2px 0 -1px;
  vertical-align:top;
  border-radius: 6px;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px white;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px white;

  //  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
  //  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
}





div.navbar-bottom {
    position: absolute:
    bottom:0;
    left:0;
    width:100%;
    height:36px;
    line-height:36px;
    background-color:#ccccff;
}


div.navbar-top {
    position: absolute:
    top:0;
    left:0;
    width:100%;
    height:36px;
    line-height:36px;
    background-color:#ccccff;
}

a.previouspage {
   position:absolute;
   left:30px;
   font-weight:bold;
}
a.previouspage:before {
    content: "";
    display: block;
    background: url("arrowLeft.png") no-repeat;
    width: 18px;
    height: 18px;
    float: left;
    margin: 8px 6px 0 0;
}


a.contentpage {
    position:absolute;
    left:50%;
    font-weight:bold;
}
a.contentpage:before {
    content: "";
    display: block;
    background: url("arrowUp.png") no-repeat;
    width: 18px;
    height: 18px;
    float: left;
    margin: 8px 6px 0 0;
}



a.nextpage {
   position:absolute;
   right:30px;
   font-weight:bold;
}

a.nextpage:after {
    content: "";
    display: block;
    background: url("arrowRight.png") no-repeat;
    width: 18px;
    height: 18px;
    float: right;
    margin: 8px 16px 0 6px;
}

li.optional:before {
    content: "Optional:";
    color: #A0A0A0;
    display: block;
    float: left;
    margin-right:8px;
}