* {
  margin: 0 ;
  padding: 0 ;
  border: 0 ;
}

body {
  font: 11px/17px verdana, tahoma, arial, sans-serif ;
  color: #3e383b ;
  background: #f2f1f1 ;
}

a, a:link {
  color: #d50300 ;
  text-decoration: none ;
}

a:hover, a:active {
  text-decoration: underline ;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 125% ;
}

h3 span {
  font-weight: normal ;
  font-size: 80% ;  /* weird way to calculate the font */
  margin-left: 11px ;
}

h4 a {
    padding-left: 20px ;
    font-size: 10px ;
}

.green {	
  color: #008f5d ;
  border-color: #008f5d; 
}

.gold {
  color: #d4a017;
  border-color: #d4a017 ;
}

.silver {
  color: #3e383b; 
  border-color: #3e383b ;
}

.bronze {
  color: #c3b39f ;
  border-color: #c3b39f ;
}

.clear {
  clear: both ;
}

#wrapper {
  border: 2px solid #ccc ;
  background: #fff ;
  margin: 10px auto ;
  width: 800px ;
}

#header {
  float: left ;
  width: 100% ;
}

#header img {
  float: left ;
  margin-right: 15px ;
}

#header p#title {
  float: left ;
  font-size: 200% ;
  margin-top: 25px ;
  padding-bottom: 10px ;
}

#nav {
  clear: left; 
  height: 30px;
  line-height: 30px;
  width: 100% ;
  background: #e2e1e1;
  color: #999;
}

#nav li {
  position: relative ;
  float: left;
  list-style: none;
  border: 0 ;
  white-space: nowrap;
}

#nav li.right {
  float: right ;
}

#nav li a {
  display: block;
  padding: 0 10px;
  font-size: 12px;
  text-decoration: none;
  color: #3e383b ;
}

* html #nav a {width:1%;}

#nav .current, #nav a:hover, #nav a.selected {
  background: #949fc9 ;
  color: #f2f1f1 ;
}

#content {
  padding: 10px ;
}

#content li {
  margin-left: 20px ;
}

#footer {
  margin: 10px auto ;
  text-align: right ;
  width: 800px ;
}

#footer p {
  font-size: 90% ;
}

/* for the details and map section (profile) */
/* position the page elements */
#details {
  float: left ;
  width: 810px ;	/* needs to be this large to accomodate 3-column activity list */
  margin: 10px ;
  overflow: visible ;
}

#position, #package_image {
  float: left; 
  width: 300px ;
  margin: -14px 0 18px -460px ;	/* negative margin to pull back against input */
} 

#package_image {
  margin-left: -440px ; /* leave a little more space on this form ... */
  width: 400px ;  /* ... and make it a little bigger too */
}

#assistance {
  width: 400px ;
  margin-top: 10px ;
}    

/* for striping of tables in admin panel */
.zebra {
  border: 1px solid #666;
  text-align: left;
  border-spacing: 0 ;
  margin: 16px 0 ;
  width: 100% ;
}

.zebra tr td, .zebra tr th {
  font-family: "lucida grande", verdana, sans-serif;
  font-size: 11px;
  padding: 6px;
  border-left: 1px solid #D9D9D9;
  background-color: #fff ;
}
	
.zebra tr.stripe td {
  background-color: #EAF8F2;
}

.zebra tr td.expired {
    color: #841F27 ;
    font-weight: bold ;
}

/* for the styling of dates in /members/index.php */
div.post {
  margin: 10px ;
  border: 1px solid #d9d9d9 ;
  background: #fff ;
  padding: 10px ;
}

div.postdate {
  float: left ;
  clear: left ;
  width: 70px ;
  text-align: center ;
}
  
div.post h4 {
  padding-bottom: 7px ;
}

div.post div.postdate {
  font: 14px bold "Trebuchet MS", Tahoma, Verdana, sans-serif ;
  color: #9CAF1D ;
  text-transform: uppercase ;
  padding-right: 15px ;
}

div.posttext {
  margin-left: 110px ;
}

/* packages.php specific styles */

a#pkgadd {
  text-transform: uppercase ;
}

a#pkgadd:hover {
  text-decoration: none ;
}

a#pkgadd img {
  position: relative ;
  top: 10px ;
}

/* for the membership options */
div.membership_option {
    margin: 10px 0 ;
    padding: 6px ;
}

div.membership_option p {
    padding: 3px 0 ;
}

img#member {
    padding: 4px ;
    border: 1px solid #ccc ;
    float: right ;
}