body {
  margin: 0;
  padding: 0;
  background-image : url(/images/GreyOnGrey_ShadeDown.png); 
  background-repeat: repeat-x; /* across the page only */
  background-position: top left;
  font-family: Arial,Helvetica,sans-serif;
}
p {
  line-height: 140%;
}

/* Standard object styling */
img {
/* I hate borders on images - I should explicitly need to set them */
    border: none;
}

h1, h2, h3 {
  font-weight: bold; 
  color: #3d7bb4;
  margin: 0;
  padding: 0;
}
dt {
    font-weight : bold;
}
tr,td {
    vertical-align: top;
}
blockquote {
    padding: 5px;
    background-color : #ddd;
    border : 1px solid;
}


/*********** specific styling blocks for the overall layout ********/
/* container for three main columns */
#all {
  width: 98%;
  margin: 0;
  padding: 0;
}
/* footer - beneath all */
#footer {
  background-color: #383838; 
  color: #d3c4ad;
  clear: both;
  padding: 5px;
  font-size: 90%;
  padding-top: 20px; /* to allow for grey shading image */
  background-image : url(/images/GreyShadeUp.png); 
  background-repeat: repeat-x; /* across the page only */
  background-position: top left;
}
/* three main columns */
#left_col {
  margin: 0;
  padding: 0;
}
#main {
  margin: 0px;
  padding: 0px;
  background-color: white;
}
#right_gutter {
  width: 2%;
  background-image : url(/images/GreyOnGrey_ShadeDown.png); 
  background-repeat: repeat-x; /* across the page only */
  background-position: top left;
}

/*** middle pane styles - containg main content ***/
/** main sections **/
#content_top {
  background-color: #252525;
  padding-bottom: 30px;
}
/* widgets are small stuff to put at the top right of the page */
#widgets {
  margin: 0.5em 10px 0px 0px;
  color: #d3c4ad;
  float:right;
  z-index: 1;
}
#top_gutter {
  margin:0;
  padding:0;
  padding-bottom: 10px; /* image height */
  background-color: white;
  background-image : url(/images/CurveLeft_sml.png); 
  background-repeat: no-repeat; 
  background-position: left top;
}
#top_gutter_right_curve {
  float:right;
  width:10px;
  margin:0;
  padding:0;
  padding-right: 10px;
  background-image : url(/images/CurveRight_sml.png); 
  background-repeat: no-repeat; 
  background-position: right top;
}
#content {
  padding: 0 10px 10px 10px;
}

/**** Left pane styles - containing navigation ***/
#header {
  background-color: #252525;
  padding: 0px;
  margin: 0px;
  /*width: 300px;
  height: 120px;
  background-image : url(/images/logo.png); 
  background-repeat: no-repeat; 
  background-position: left top; */
}

/** sub-sections **/
#header img {
  padding: 0px;
  margin: 0px;
}

#nav_col {
  margin: 0 10px 0 10px;
  padding: 0;
}

/* navigation list */
#nav ul {
  padding: 0 5px 0 0;
  list-style-type: none;
  border: none;
}
#nav li {
  margin: 0 0 0.2em 0;
  /*background-color: #50b2ef; */
  color: black;
}
#nav #current {
  color: black;
  border: 1px solid #19763f;
  border-left: 10px solid #19763f;
  margin-left: 0px;
  background-color: white;
  background-image : url(/images/GreyPaleLeft.png); 
  background-repeat: repeat-y; 
  background-position: left top;
}
/* #3d7bb4 #50b2ef #cae7f9   border: #3d7bb4 */
#nav li a {
  padding: 5px;
  display: block;
  text-decoration: none;
  color: black;
  font-weight: bold;
  border: 1px solid #3d7bb4;
  /*border-left: 10px solid #3d7bb4; */
  margin-left: 9px;
  background-color: white;
  background-image : url(/images/GreyLeft.png); 
  background-repeat: repeat-y; 
  background-position: left top;
}
#nav li a:hover {
  display: block;
  text-decoration: none;
  color: black;
  font-weight: bold;
  /*background-color: #22a44a; */
  border: 1px solid #19763f;
  margin-left:0px;
  border-left: 10px solid #19763f;
  background-color: white;
  background-image : url(/images/GreyPaleLeft.png); 
  background-repeat: repeat-y; 
  background-position: left top;
}

/* vanity pane */
#contact {
  margin: 5px;
  margin-left: 9px;
  padding: 5px;
  border: 1px solid #3d7bb4;
  background-image : url(/images/GreyLeft.png); 
  background-repeat: repeat-y; 
  background-position: left top;
}
#contact h3 {
  text-align: center;
  font-size: small;
}
#contact p {
  text-align: center;
  font-weight: bold;
  font-size: x-small;
}
#w3c {
  text-align: center;
}
#footer p {
  text-align: center;
}


/******* Generically applicable styles for various situations ****/
#latest_project {
  float: right;
  width: 60%;
  margin: 0;
  padding:0;
}
#latest_project h3 {
  margin: 0;
  padding: 0;
}

/* byline to a heading eg "for related info" links */
.byline {
    font-weight: bold;
    font-size: 75%;
    color: #003399;
}


/* used for horizontal lists - generally for depicting choices */
.hlist {
  padding: 0px;
  background-color: #eeffed;
  color: #333;
  border: 1px solid #13582f;
}
/* short, descriptive heading for the list */
.hlist .head {
  padding-left: 10px;
  padding-right: 10px;
  font-weight: normal;
}
/* list items */
.hlist .current, .hlist .item {
  font-weight: bold;
  margin-right:3px;
}
/* the currently-selected item */
.hlist .current {
  padding: 3px;
  border: 2px inset #149d17;
  background-color: #cae7f9;
  color: black;
}
/* an unselected item */
.hlist .item {
  background-color: #50b2ef;
  font-weight: bold;
}
/* the link for an unselected item */
.hlist .item a {
  border: 2px outset #3d7bb4;
  color: #333;
  background-color: #50b2ef;
  text-decoration: none;
}
.hlist .item a:hover {
  border: 2px inset black;
  background-color: #cae7f9;
  color: black;
}


/* for styling individual projects in the portfolio */
.project {
  border: 1px solid #3d7bb4;
  margin: 0.5em 0 0.5em 0;
  padding: 5px;
  background-color: #eee;
  min-height:104px; /* image height + bottom-padding */
}
.project h3 {
  margin: 0px;
}
.project h3 a, .project h3 a:visited {
    color: #333;
    text-decoration: none;
}
.project h3 a:hover {
    color: #DDD;
    background-color: #333;
}
.project img {
	border: 2px inset #DDD;
  margin: 0px 5px 0px 0px;
  height: 100px;
  width: 162px; /* approx golden ratio */
  float: left;
}  
.project .link {
  font-size: 80%;
}
.project_desc {
  padding: 5px;
}

/* In a promotional section I'll want some things to stand out more.  */
.promotion .big {
  font-size: 120%;
}
.promotion strong {
  color: #22a44a;
  font-weight: bold;
}
.promotion a {
  text-decoration: none;
  font-weight: bold;
}
.promotion .task_list a {
  background-color: #3d7bb4;
  border: 1px outset #3d7bb4;
  color: white;
  padding: 3px;
}
.promotion .task_list a:hover {
  background-color: #22a44a;
  border: 1px outset #19763f;
  color: black;
}