/* Welcome to CHI's CSS */

* { /* removes all default paddings, margins, border for cross browser compatibility */
   padding:0;
   margin:0;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: black;
	/* give white background and the grey gradient to look like new face board*/
	background: url(images/header/top_bkg.png) repeat-x white;
}

/* Setting defaults start (addings in margins and stuff) */

p {
	text-align: left;
	text-indent: 0.5em;
}
	
ul.general{ /* bullet is now shaded blue */
	list-style-image: url(images/header/bullet.png);
	margin:.5em;
}

li {
	margin-left: 3em;
}
h1 {
	font-size: 200%;
	font-weight: bold;
	color: #0000FF;
}

h2 { /* prettified, might move down to index page specific? */
	margin: 0.4em 0 0.4em 0;
	padding: 0.3em;
	width:97%;
	border-bottom: 1px solid #62698C;
	border-right: 1px solid #62698C;
	font-style:italic;
	font-size:150%;
	color: #1B319D;
	background: url(images/header/h2_border.png) left bottom no-repeat;
}

h3 {
	color:black;
}

a:link { /* blue, not underlined, bold */
	color: #009;
	text-decoration: none;
	font-weight: bold;
}

a:hover { /* black, underlined */
	text-decoration: underline;
	color: #006;
}

a:visited { /* teal, not underlined, bold */
	/*color: #36C;*/
	color:#009;
	font-weight: bold;
	text-decoration: none;
}

dt { /* darkish blue, 0.5em margin*/
	color: #1B319D;
	margin-top: 0.5em;
	text-align: left;
}

dd { /* black, indented 1em*/
	text-indent: 1em;
	text-align: justify;
}

hr{
    position: absolute;
	width:100%;
	border: solid 1px;
	height:2px;
	color: blue;
}

hr#regular{
	height: 1px;
	border: solid 1px;
	color:blue;
}

table { /* solid thin blue border, not visible */
	border: solid thin gray;
	border-collapse: collapse;
	width: 100%;
	font-size:13px;
}

td { /* solid thin teal border, left & right only */
	border: solid thin gray;
	border-left: solid thin gray;
	border-right: solid thin gray;
	height: 1em;
}
th {
	border: solid medium #666;
	background-color:#B9B9FF;
}
/* Setting Defaults end */

/* whole page structure div */
div.body { /* keep body centered at all times, size of page decided here=776px */
	position: absolute;
	left: 50%;
	margin-left:-388px;
	width:776px;
}
/* header area styles */
div#header { /* 776px defined here too */
    /*background-color:pink; /* debugging use */
  	position: relative;
	float: left;
	clear: both;
	width: 776px;
	height: 160px;
	margin-bottom: 1em;
}

div#answers p {
	padding:0.3em;
}

h1#title { /* text for name */ 
	position: absolute;
	top:40px;
	left: 0px;
	color: blue;
	font-size: 250%;
	line-height:1;
	padding-left:70px;
}

h1#sub_title{
	color: red;
	position: absolute;
	font-size: 120%;
	font-style: italic;
	top: 75px;
	padding-left: 75px;
	line-height: 1;
}

#logo{
	position: absolute;
	top: 40px;
	left: 2px;
	opacity: 0.5;
	filter: alpha(opacity = 50);
	height: 54px;
}
#header_pic {
	position: absolute;
	top: 20px;
	right: 0px;
	/*
	opacity:1;
	filter:alpha(opacity=100);*/
}

ul#header_links {
	position: absolute;
	width:466px; /* this number see the navbar area */
	bottom: 2px;
	list-style: none;
}

ul#header_links li {
	border: solid blue 0px;
	display: inline;
	float:left;
	margin: 1px;
	width: 80px;
	height: 25px;
	text-align: center;
	line-height: 25px;
	font-size: 100%;
	background-image: url(images/header/button.PNG); background-repeat: repeat-x;

	/* following code works in FF, not IE8.0, makes the buttons round. */
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
}

ul#header_links li#header_thispage {
	border: groove blue 2px;
	font-weight: bold;
	background-image: none;
	width: 78px;
	height: 21px;
	line-height: 21px;
	bottom:1px;
}
ul#header_links li a {
	color: white;
}

ul#header_links li a:hover {
	color: black;
}

ul#foreign_sites {
	margin:0;
	padding:0;
	list-style: none;
	position: absolute;
	float:right;
	top: 0px;
	right: 0px;
}

ul#foreign_sites li {
	border: solid blue 0px;
	display: inline;
	margin: 1px;
	width: 70px;
	height: 20px;
	float:right;
	text-align: center;
	line-height: 20px;
	font-size: 100%;
}

ul#foreign_sites li a:hover {
	color: #010101;
}

form#searchbar {
  position:absolute;
  left: 520px;
  bottom: 3px;
}

/* navigation bar structure */
div#bottom {
    /*background-color:pink; /* debug use */ 
	width:100%;
	height:45px;
	margin-top:2em;
	position:relative;
	float:left;
	clear:both;
}
ul#navbar{ /* centering = stupid margin-left *poke IE*, +41px for more buttons */
    width:466px; /* the margin-left x 2 */
	float:left;
	margin:0;
	clear:both;
	position: absolute;
	top:0px;
	left:50%;
	margin-left:-233px;
	list-style: none;
}

ul#navbar li {
	border: solid blue 0px;
	border-bottom: groove blue 1px;
	border-right: groove blue 1px;
	position:relative;
	display: inline;
	float:left;
	margin: 1px;
	width: 80px;
	height: 20px;
	text-align: center;
	line-height: 20px;
}

ul#navbar a:hover {
	color:black;
}

p#copyright {
	position:relative;
	top: 10px;
	text-align: center;
}

/* main body structure definitions */
div.mainbody { /* this defines main body area */
    /*background-color: lime; /* debugging use */
	margin: 0 0 1em 0;
	position:relative;
	float:left;
	clear:both;
	width:776px;
}

div.column { /* width of column defined 100% default */
	float: left;
	margin:0.5%
}

div#TabbedPanels2 p{
	padding: 2px 0 2px 0;
}

/* product listing page */
div.subsection{ /* default width is 31% */
	position:relative;
	border-right: 2px #999 groove;
	border-bottom: 2px #999 groove;
	display: block;
	float:left;
	width: 32%;
	height: 16em;
	padding: 2px;
	margin: 2px;
	color:#333;
}

div.subsection p{
	margin:0;
	text-indent:0;
	font-weight:bold;
	color:black;
}

/*
.subsection a:link { /* blue, bold 
	color: blue;
	text-decoration: underline;
	font-weight: bold;
}

.subsection a:visited { /* blue, bold 
	color: teal;
	font-weight: bold;
	text-decoration: underline;
}

.subsection a:hover {
	text-decoration: underline;
	color: black;
	cursor:hand;
} */