/* Base style for common elements */

body { 
	/* explicit white background, not the user's default */ 
	background-color: #fff; /* we need white for the logo and fading effects */
	/*background-color: #fafafa;*/ 
	/*color: #000;*/
	color: #222; /* soften contrast a bit */ 
	background-image: none;
	/*background: url(Grayhurst-bkg.GIF) ;*/
	/*background-color: #ace ;*/  
	/*background-color: transparent;*/
	margin: 0px; 
	padding: 0px;
	/*font-family: "Book Antiqua", serif;*/
	font-family: Georgia, serif;
	/* Roboto */
	font-family: "Helvetica Neue","Open Sans","Source Sans Pro",sans-serif;
	line-height: 1.5em;
	height: 100%; /*overflow-y: auto;*/ /* possible hack for IE */
}

p {
  /*color: #000; */
  color: inherit; /* need p and ul to be same, for example */ 
  background-color: inherit;
  margin-left: 0%;
  margin-right: 0%; 
}

/*
ol {
  color: #000; 
  margin-left: 5%;
  margin-right: 5%;
}

ul {
  color: #000; 
  margin-left: 5%;
  margin-right: 5%;
}
*/

pre {
  margin-left: 5%;
  white-space: pre;
}

/*
table {
  margin-left: 4%;
  margin-right: 4%;
}

table caption {
  font-size: larger;
  font-weight: bolder;
}
*/

/* shouldn't I make the SIZES of headings explicit? */
h1 {
	color: #933; background-color: inherit;
	/*margin-top: 1em;*/
	margin: 0; padding: 0;
	font-weight: bold;
	text-align: center;
}

h2 {
	color: #00b; background-color: inherit;
	/*margin-left: 2%;
	margin-right: 2%;*/
	margin: 0; padding:0;
	font-weight: bold;
	/*text-align: center;*/
}

h3 {
	color: #060; background-color: inherit;
	/*background-image: none; */
	/*margin-left: 4%;
	margin-right: 4%;*/
	margin: 0; padding: 0;
	font-weight: bold;
}

h4 {
	/*margin-left: 6%;
	margin-right: 6%;*/
	margin: 0; padding: 0;
	font-weight: bold;
}

h5 {
	/*margin-left: 6%;
	margin-right: 6%;*/
	margin: 0; padding: 0;
	font-weight: bold;
}

hr {
	margin: 0; padding: 0;
}

a { 
	border-color: #999;
	border-style: none;
	background-color: transparent;
}

a:link {
	color: #33f; 
	text-decoration: none;
}

a:visited {
	color: #909; 
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	background-color: transparent;
}

a:active {
	color: #060;
	text-decoration: underline;
	background-color: transparent;
}

/* "note" class ... could be changed to display: none for publishing */
.note {
  font-size: 70%;
  color: #888; background-color: #ffc;
}

/* fancy ornamentation */
h1 + p:first-letter { font-size: 350%; line-height: 80%; float: left; /*color: #444;*/ font-weight: normal !important;}
h1 + p:first-line { /*text-transform: uppercase;*/ font-variant: small-caps; font-size: 110%; }

/* dotted box for contact me blocks */
.boxed { 
	border: thin dashed #4c4efc; 
	padding: 3px 10px;
}


/***************************************/
/* specific styles for the layout divs */
/***************************************/

div.logo { 
	background-image: none;
	background-color: #fff; /* inherit isn't working in IE */
	border-style: solid; 
	border-width: 0 0 0 0 /* medium */ /* top right bottom left */;
	border-color: #04029c;
	/*height: 10px;*/
	padding: 0; margin: 0;
	position: fixed;
	left: 5px; top: 0; height: 80px;
	z-index: 20;
	padding-top: 6px;
}
div.logo a img {
	border: none;
}
div.logo a:hover img {
	/*border: 1px solid #ffc;*/ /* it moves the img!! :( */
}


div.logo-name {
	padding: 0; 
	margin: 0; 
	border-bottom: 1px solid #04029c;
	background-color: #fff; /* inherit not working in IE*/
	position: fixed;
	left: 1%; top: 0; height: 40px; width: 98%;
	/*vertical-align: bottom;*/
	text-align: center;
	z-index: 15;
	padding-top: 6px;
	margin: 0;
	overflow:hidden;
}
div.logo-name a {
	font-size: 140%;
	font-weight: bolder; 
	color: #04029c; /* should be darker than content-h1 */
	padding: 0; 
	margin: 0; 
	/*margin-top:5px;*/
	/*vertical-align: middle;*/
	/*position: absolute; left: 50%; top: 50%;*/
	/*margin: auto;*/
	text-align: center;
	line-height: 40px; /* setting this equal to container height allows vertical centring of a single line */ 
} 
div.logo-name a:hover {
	text-decoration: underline;
	color: #04029c; /* inherit is unreliable? */
}

div.logo-fade {
	padding: 0; margin: 0;
	position: fixed;
	left: 0; width: 100%; 
	top: 47px; /* it's top (0) plus height PLUS padding of logo-name */
	height: 20px; /* height must be the height of the png */
	z-index: 10;
	background-image: url("logofade.png"); 
	background-repeat: repeat-x;
	background-color: transparent;
}

div.content-area {
	position: absolute;
	width: 66%; /* sadly, it seems like you have to allow for padding AND margin */
	left: 15%; 
	/*top: 55px;*/
	top: 52px;
	padding: 0% 1% 0% 1%;
	margin: 2% 1% 2% 1%; /* top right bottom left */
	/*border: thin black solid;*/
	z-index: 0;
	/*padding:20px;*/
	/* explicit white background - obscure any overlapped elements */ 
	/*color: #000; background-color: #ffffff; */
	
	/*background: url(texturesat2382948.jpg) repeat*/;
}

div.footer {
	font-size: 66%;
	text-align: center;
	line-height: 1.2em;
}

/***************************************/
/* sidebars                            */
/***************************************/

div.left-bar, div.right-bar {
	font-size: smaller;
	font-family: "Arial Narrow", Arial, sans-serif;
	font-weight: bold;
	overflow: hidden;
	line-height: 1.2em;
}

div.left-bar {
	background-color: #0402bc;
	color: #fff; /* get the contexts aligned? */
	/*border: medium solid #0402bc;*/
	position: fixed; 
	z-index: 5;
	top: 92px;
	left: 1%; 
	/*padding: 1%;*/
	width: 12%; 
	/*min-width: 120px;*/
	/*-moz-border-radius: 9px;*/
}

div.left-bar:before {
	width: 6px;
	background-color: red;
	height: 6px;
}

div.left-bar-jump {
	position: fixed; 
	z-index: -1;
	top: 92px;
	left: 1%; 
	/*padding: 1%;*/
	width: 12%; 
	display: none;
}

div.right-bar {
	background-color: #4c4efc;
	color: #fff;
	vertical-align: bottom; /* not relevant */
	font-size: smaller;
	font-family: "Arial Narrow", Arial, sans-serif;
	font-weight: bold;
	position: fixed;
	z-index: 5;
	/*top: 92px;*/
	top: auto;
	bottom: 3%;
	left: 85%; 
	/*padding: 1%;*/
	width: 12%;
	/*-moz-border-radius: 9px;*/
}

div.left-bar, div.right-bar { 
	/*color: #fff;*/
}

div.left-bar a, div.right-bar a { /* needed as well because 'a' is more specific than '*'? */
	background-color: inherit; /* avoid validation warning */
	color: #fff;
}

div.left-bar a:visited, div.right-bar a:visited {
	color: #ccc;
}

div.left-bar h3, div.right-bar h3 {
	text-align: center;
	color: #cfc;
}


div.left-bar *, div.right-bar * {
	/* reset everything */
	padding: 0;
	margin: 0;
	text-indent: 0;
}

div.left-bar,  div.right-bar {
	/* reset everything - set padding */
	padding: 10px; /* 6px = width of fading PNGs *//*1%;*/ 
	padding-left: 15px; /* allow more space for the bullets */
	margin: 0;
	text-indent: 0;
	/*overflow: hidden;*/
}


div.left-bar ul, div.right-bar ul {
  /*margin-left: 5%; padding-left: 10%;*/
  margin-left: 10%;
  /*font-size: smaller;*/
}

.left-bar ul ul, .right-bar ul ul {
  /*margin-left: 5%; padding-left: 10%;*/
  /*padding-left: 15%;
  margin-left: 15%;*/
  /*font-size: smaller;*/
}

.left-bar li, .right-bar li {
  /*margin-left: 1%; padding-left: 1%;*/
  /*padding: 1%;*/
}

.left-bar li li, .right-bar li li{
  /*margin-left: 2%; padding-left: 2%;*/
  /*padding: 1%;*/
}

.fade-t {
	/*background-color: #f00;*/
	background-image: url(sigmoid6-top.png);
	z-index: 1; /* above the .newbox */
	display: block; position: absolute; 
	top: 0; height: 6px;
	/*left: 0; width: 100%; */ left: 6px; right: 6px;
}

.fade-b {
	/*background-color: #0f0;*/
	background-image: url(sigmoid6-bottom.png);
	z-index: 1; /* above the .newbox */
	display: block; position: absolute; 
	top: auto; bottom: 0%; height: 6px; 
	/*left: 0; width: 100%;*/ left: 6px; right: 6px;
}

.fade-l {
	/*background-color: #00f;*/
	background-image: url(sigmoid6-left.png);
	z-index: 1; /* above the .newbox */
	display: block; position: absolute; 
	/*top: 0; height: 100%;*/ top: 6px; bottom: 6px;
	left: 0; width: 6px;
}

.fade-r {
	/*background-color: #ff0;*/
	background-image: url(sigmoid6-right.png);
	z-index: 1; /* above the .newbox */
	display: block; position: absolute; 
	/*top: 0; height: 100%;*/ top: 6px; bottom: 6px;
	left: auto; width: 6px; right: 0;
}

.fade-tl {
	/*background-color: #f0f;*/
	background-image: url(sigmoid6-topleft.png);
	z-index: 1; /* above the .newbox */
	display: block; position: absolute; 
	top: 0; height: 6px; left: 0; width: 6px;
}

.fade-bl {
	/*background-color: #0ff;*/
	background-image: url(sigmoid6-bottomleft.png);
	z-index: 1; /* above the .newbox */
	display: block; position: absolute; 
	top: auto; height: 6px; bottom: 0; left: 0; width: 6px;
}

.fade-tr {
	/*background-color: #f80;*/
	background-image: url(sigmoid6-topright.png);
	z-index: 1; /* above the .newbox */
	display: block; position: absolute; 
	top: 0; height: 6px; left: auto; width: 6px; right:0;
}

.fade-br {
	/*background-color: #8f0;*/
	background-image: url(sigmoid6-bottomright.png);
	z-index: 1; /* above the .newbox */
	display: block; position: absolute; 
	top: auto; height: 6px; bottom: 0; left: auto; width: 6px; right: 0;
}


/****************************************/
/* for testing: backgrounds and borders */
/****************************************/

/*
body { background-color: #fec; }
div.logo { background-color: #ff8; }
div.logo-name {	background-color: #f8f; } 
div.left-bar { background-color: #cff; }
div.right-bar { background-color: #cff; }
div.content-area { background-color: #fdd; }
div.main { background-color: #ddd; }
div.footer { background-color: #ff8; }
*/

/*
body { border: thin black solid; }
div.logo { border: thin black solid; }
div.logo-name {	border: thin black solid; } 
div.left-bar { border: thin black solid; }
div.right-bar { border: thin black solid;; }
div.content-area { border: thin black solid; }
div.main { border: thin black solid; }
div.footer { border: thin black solid; }
*/
/*
.left-bar, .left-bar * { border: thin black solid; }
.right-bar, .right-bar * { border: thin black solid; }
.logo-name, .logo-name * { border: thin black solid; }
*/