@charset "UTF-8";

body {
  font-family: Verdana, Geneva, sans-serif;
  color: black; /* 960; #999; */
  background-color: white; /* #000; */
}
#main_container {  /* aka wrapper */
  position:relative;
  background-color: white; /* #87cefa; light blue */	
  height: 760px;
  width: 960px;
  margin-right: auto;
  margin-left: auto;
  font-family: Verdana, Geneva, sans-serif;
}
h3 {
color: blue;
}

/* Styling for the page header; Note: IE9 not able to recognize the HTML5 header
   tag, so a class rule is used instead */
.header { 
  height: 130px;
  /* Font size, line-height, and family */
  /* font: 40px/80px Impact, Gadget, Fantasy; */
  text-align: center; 
  color: red;
 /* Background color, image, position */
  background-color: #87cefa; /* light blue */
  background-image:url(pix/brWeb_logo_sm3.jpg);
  background-repeat: no-repeat;
  background-position: 5px center;
 /* Round the top corners */
 /* border-top-left-radius: 18px; */
 /* border-top-right-radius: 18px; */
}

/* Styles for the Navigation Bar: */

#nav ul 
{

  list-style-type:none;
  
margin:0;
  
padding:0;

  overflow:hidden;

}

#nav li
 {

/* float:left; */
  display: inline;
}

#nav a:link,a:visited
 {

  /* display:block; */
  
width:120px;
  
font-weight:bold;

  color:#FFFFFF;

  background-color: #98bf21; /* light green
 */
  text-align:center;

  padding:4px;

  text-decoration:none;

  text-transform:uppercase;

}

#nav a:hover,a:active 
{ 
  
background-color:#7A991A;

}


/* ul 
{

  
margin:20px;
  
padding:0;

}
 */

.transbox {
   width:600px;
   height:360px;
   color:red;
   /* margin:30px 40px; */
   margin:80px 60px; /* vertical margin, then horizontal left and right margins */
   background-color:#ffffff;
   border:1px solid black;
   opacity:0.7;
   filter:alpha(opacity=70); For IE8 and earlier
}
 div.transbox h1 {
   margin:30px 40px;
   font-weight:bold;
   color:blue; /* #000000; black */
}
 div.transbox p {
   margin:30px 40px;
   font-weight:bold;
   color:blue; /* #000000; */
}
.transbox ul {
  list-style-type:none;
  font-weight:bold;
}

#left_column {
  background-color: beige; /* #90ee90; light green */
  float: left;
  width: 220px;  /* reduce the width from 240 to 220 because of adding 20px from the padding */
  height: 600px;
  padding-left: 10px;
  padding-right: 10px;
}
#left_column:hover {
  background-color: orange;
}

article {
  background-color: #FFFFED; /* light yellow */
  float: left;
  height: 600px;
  padding-left: 10px;
  padding-right: 10px;
  width: 700px;
}
.article1 {
  background-color: white; /* #FFFFED; light yellow */
  /* opacity: 0.7 */
  background:url(pix/planetEarth4.jpg) no-repeat;
  /* border:2px solid black; */
  color: black;
  /* background-size:80px 60px; */
  float: left;
  height: 600px;
  width: 700px;
  padding-left: 10px;
  padding-right: 10px;
}
article ul {
  
/* font-weight:bold; */
  font: 40px;
  color: red;

}
footer {
  width:955px;
  height:60px;
  background-color: #87cefa; /* light blue */
  clear: both;
  padding-left: 5px;
}
.txt {
  /* text-align: right; */
  float: right;
  margin-right: 20px;
}
aside {
  background-color: #FFFFED; /* light yellow */
  height: 300px;
  width: 190px;
  float: right;
  padding-left: 10px;
  padding-top: 5px;
  border: medium inset gray;
}
a:link {
	color: #39F;
}

/* === Style classes === */
/* Highlight any span of text */
.hilite{
   background-color:yellow;
}

/* Create raised appearance with border, rounded corners, and shadow */
/* Works with images, tables, and block elements (div, p, and headings) */
.raised{
   border:solid 1px gray;
   border-radius: 5px;
   box-shadow:5px 5px 5px gray;
}

/* Image floating to the left of neighboring text */
img.left {
   float: left;
   width: 30%;
   margin-right: 20px;
}

/* Image floating to the right of neighboring text */
img.right {
   float: right;
   width: 30%;
   margin-left: 10px;
   /* Try margin right to shift the image to the left of thr right margin */
   margin-right: 10px;
}
/* Use class="centerall" in p or div to center
   all text and images inside the element */
.centerall{
    text-align:center;
    /* Clear any floating elements */
    clear:both;
}
input {
  font-family: Verdana, Geneva, sans-serif;
  color: red; /* #FFF; */
  background-color: #ffffed; /* light yellow */
}
textarea {
  font-family: Verdana, Geneva, sans-serif;
  color: red; /* #FFF; */
  background-color: #ffffed; /* #00F; */
}
.form {
  background-color: #2c6fbb; /* medium blue */
  height: 250px;
  width: 550px;
  /* float: right; */
  padding-left: 10px;
  padding-top: 5px;
  border: medium inset gray;
}
/* ==== Styles for links and link states. === */
/* Unvisited links */
a:link{
    color: blue; /* #0c391c; */
}
/* Visited links */
a:visited{
    color: red; /* #af4600; */
}
/* Mouse pointer on link */
a:hover{
    background-color:#bc9f81;
    color: green; /* #1e2953; */
}
/* Mouse pointer on link and left button down */
a:active{
    background-color:#1e2953;
    color:#bc9f81;
}