/* The main style of the body */
body{
  background: rgb(230,221,210);
  font-family: Verdana;
  margin: 0px;
}

/* Links in general */
a:link, a:visited{
  color: black;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
  color: #BD0000;
}

/* Common HTML tags */
strong{
  font-weight: bold;
}

h1{
  display: block;
  border-bottom: 3px solid gray;
  padding-bottom: 15px
}

pre{
  white-space: pre;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 10px;
  margin: 15px;
  background-color: rgb(255,255,240);
  line-height: 1.8em;
  border: 1px dashed red;
  display: block;
  color: rgb(30,30,30);
}

/* The site name */
#siteHeader{
  color: black;
  font-size: 275%;
  font-weight: bold;
  float: left;
  padding-left: 20px;
  margin-top: -10px;
}


/* The utility links */
#utilityLinks{
  text-align: right;
  margin-top: 20px;
  color: white;
  float: none;
}


#utilityLinks a{
  color: rgb(230,221,210);
  font-family: serif;
}

#utilityLinks a:hover{
  color: red;
}

/*The top nav bar */
#topNav{
  margin-top: 10px;
  margin-bottom: -15px; /* Make it prettier in IE */

  width: 100%;
  background-repeat: repeat-x;
  height: 38px;
}

/* So that Firefox sees it normally */
html>body #topNav {
  margin-bottom: 0px;
}

#topNavLeft{
  background-position: top left;
  background-repeat: no-repeat;
  background-color: rgb(170,210,255);
  height: inherit;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  padding-left: 38px;
  margin-top: 2em;
}

#topNavRight{
  background-position: top right;
  background-repeat: no-repeat;
  height: inherit;
  padding-right: 38px;
}

/*The global links */
#globalLinks{
  
  text-align: left;
  float: left;
  color: rgb(0,0,0);
  font-weight: bold;
  padding-top: 10px;
  position: absolute;
}

#globalLinks a{
  padding-left: 10px;
  padding-right: 10px;
}

#globalLinks a:hover{
  font-weight: bolder;
  color: rgb(150,30,30);
}

/*The search bar */
#searchBar{
  text-align: right;
  padding-top: 10px;
}

#search-bar{
  height: 13px;
}

/* IE hack to position the search bar correctly */
#search{
  font-size: 17px;
  margin-top: 0px;
  padding-bottom: 3px;
  position: relative;
  font-weight: bolder;
}

html>body #search{
  font-size: 17px;
  font-weight: bolder;
  
  
  padding-bottom: inherit;
  position: inherit;
  margin-top: inherit;
}


/* The sub-navigation class */
.subNavigation{
  display: inline;
  margin: 0px;
  padding: 0px;
  margin-top: 10px;
  list-style-type: none;
  visibility: hidden;
  position: absolute;
  color: white;
  margin-left: 100px;
}



.subNavigation a{
  display: inline;
  font-weight: bold;
  color: rgb(50,50,50);
}

#subNav{
  position: absolute;
  left: 5%;
  top: 10%;
}

/* The main site body and properties*/
#siteBody{
  width: 100%;
  position: absolute;
  display: block;
  border-bottom: none;
  border-left: none;
  background-color: white;
  margin-top: 40px;
}

/* The middle section (pageNav, siteData, and footer) */
#mid{
    min-height: 100%;
    background-color: rgb(230,221,210);
}

/* The main page navigation in the site body */
#pageNav{
      
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  
  height: inherit;
  overflow: hidden;
  position: relative;
  
  float: left;
  font-weight: bold;
  text-align: left;
  width: 14%;
}

#mainLink{
  margin-left: 10px;
}

/* Use an IE hack so that the javascript doesn't actually change the side bar's width */
#mainLink a, #mainLink a:visited {
  display: block;
  float: none;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #cccccc;
  background:  url("images/bg_nav.jpg");
  padding: 3px 0px 3px 10px;
  color: #21536A;
  text-decoration: none;
  border-left: none;
  width: 100%;
}


html>body #mainLink a, #mainLink a:visited {
  display: block;
  float: none;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #cccccc;
  background:  url("images/bg_nav.jpg");
  padding: 3px 0px 3px 10px;
  color: #21536A;
  text-decoration: none;
  border-left: none;

  width: inherit;
}

#mainLink a:hover{
  border-top: 1px solid #cccccc;
  background-color: #DDEEFF;
  background-image: none;
  text-decoration: none;
  border-left: none;
  margin-right: 0px;
}



/* The topic-related sidelinks below the pageNav links */
#sideLinks{
  font-size: 120%;
  color: black;
  padding-left: 15px;  min-height: 90%;
  padding-top: 8px;
  margin-left: 3px;  padding-bottom: 3px;
  border-top: 2px solid rgb(200,200,200);
  border-bottom: 2px solid rgb(200,200,200);
  
}

#sideLinks strong{
  border-bottom: thin solid black;
}

#sideLinks a, #sideLink a:visited{
  margin-top: 3px;
  float: none;
  display: block;
  padding-left: 4px;
  text-decoration: none;
  color: rgb(56,116,116);
  font-weight: lighter;
  font-family: Arial;
}

#sideLinks a:hover{
  text-decoration: underline;
}


/* The header */
#header{
  /* background: url('images/head_bg.jpg') repeat-x; */
  background-color: rgb(170,210,255);
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  padding: 5px;
  padding-left: 20px;
}


/* The bread crumb navigation */
#breadCrumb{
  position: absolute;
  text-align: left;
  font-weight: bold;
  border-top: none;
  margin-left: 6px;
  width:75%;
}


/* The logo area, hack required to make the breadcrumb work */
#logo{
  position: static;
  float: right;
  margin-top: -15px;
  top: 3%;
}


/* The page name */
#pageName{
  font-size: 200%;
  font-weight: bold;
  
  width: 100%;
  display: inline;
  
  margin-top: -20px;
  padding-left: 15px;

  padding-bottom: 3px;
  
  text-align: left; 
}

/* The formatting for the main area */
#siteData{
  display: block;
  border-right: none;
  font-size: 88%;
}

#siteData a{
  color: blue;
}

/* The actual content of the main area */
#siteContent{
  margin-left: 14%;
  padding-bottom: 1em;
  
  padding-right: 1em;
  padding-top: 1em;
  padding-left: 1em;
  line-height: 1.7em;
  width: 60%;   
  background-color: rgb(250,250,250);
  border-left: 1px solid rgb(200,200,200);
}

/* The site footer */
#footer{
  width: 100%;
  
  color: gray;
  background-color: rgb(230,221,210);
  background-repeat:  repeat-y;
  background-position:  top right;
  
  padding-top: 10px;
  margin-top: -10px;
  text-align: center;
 
  border-top: 1px solid rgb(200,200,200);

  position: relative;
  display: block;  
}