/* Lesson 11 Stylesheet */ 
/* Universal style rule */ 
/* Block all browser default margins and padding */ 
*{
   margin:0; 
   padding:0;
/* Temporary borders */ 
/*border: dashed 1px #f00;*/
		}
body{
   background-color:#4d4d4d;
   font-family:Arial, helvetica, sans-serif;
   text-align:center;}
/* This is wrapper*/ 
#wrapper{
   width:44em;
	margin:1em auto 0 auto;
/* This is required for absolutely-positioned layout */ 
    position:relative;}
    
/* This is branding or header*/ 
#branding{
	background-color:#5bafd7;
    padding:1.2em 0 1.5em .5em;
    height:5em;
    border-top: 1px solid #000;
    border-left:1px solid #000;
    border-right:1px solid #000;
    border-bottom:double #000;
    font-family:arial,helvetica,sans-serif;
	}
    
 /* Branding division contains four images */
#branding img{
   height:7em;
   width:7.3em; 
   margin-top:-.8em;
   margin-right:.4em;
   margin-left:.4em;
   float:left;
   border:solid 1px #000;
  /* Fixes the mysterious image gap */
 	display:block;} 
  
 /* Branding division text */
  #branding p{
  font-size:1em; 
  font-variant:normal;
  text-align:center;
  color:#fff;
  font-weight:bold; 
  margin:0 .3em;
  line-height:1.7em;}
  
 
/* Left Column */  
#leftcol
  { 
    width:10em;
	background-color:#1e5e7c;
    font-family:Liberation Sans, Arial, Helvetica, sans-serif;
    text-align:center;
    padding-left:.2em;
    margin:3em auto; 
    border-bottom:solid .05em #000;
    border-top:solid .05em #000;
    border-right: solid .05em #000;
    border-left: solid .05em #000;
    height:24.5em;
 /* Same as Branding Div Height */  
    top:7em;
    left:0;
  /* Required for absolutely-positioned left column */  
    position:absolute;
    }
 /* left column images */
 div.left img{
   font-family:verdana,arial, helvetica, sans-serif;
   margin-top:.1em;
   width:8em; 
   height:8em;
   border:solid 1px #000;
          	}       
 /* Left Column Text */      
#leftcol p{
	font-size:0.8em;
	color:#fff;
	padding:0.5em;
    margin-top:-.3em;
	width:80%;
	text-align:center;
}
/* Left Column Headline */  
#leftcol h4{
	color:#000;
	font-style:italic;
    margin-top:.5em;
    line-height:1.3em
}
/* Left Column Bullets/List */  
#leftcol ul{
	margin:.5em 0 0 1.7em; 
    padding-top:.8em;
    font-size:.8em;
    line-height:2em;
    text-align:left;
    color:#fff;
}
#leftcol li{
   margin-bottom:.6em;
   margin-right:.6em;
}
/* Right Column */  
#rightcol{
    width:10em;
    font-family:Liberation Sans, Arial, Helvetica, sans-serif;
    color:#000;
	background-color:#1e5e7c;
    text-align:center;
    font-style:italic;
    margin:3em auto; 
    border-bottom: solid .05em #000;
    border-top:solid .05em #000;
    border-right: solid .05em #000;
    border-left: solid .05em #000;
    height:24.5em; 
    padding-left:.2em;	
    /* Same as Branding Div Height */  
    top:7em;
    right:0;
  /* Required for absolutely-positioned left column */  
    position:absolute;
}
/* Right Column Headline  */  
#rightcol h4{
	margin-top:.5em;
    font-size:medium;
    line-height:1.3em;  
    }
/* Right Column Bullets/List */  
#rightcol ul{
	margin:.3em 0 0 2.5em;     
    line-height:1.8em;
    color:#000;
    padding-top:.3em;
    font-size:.8em;
    font-weight:800;
    text-align:left;
    }
/* Right Column Image */   

/* Right Column Text */  
#rightcol p{
	font-size:.8em;
    font-weight:bold;
	color:#fff;
    line-height:1.5em;
	padding:.5em;
	width:80%;
	text-align:left;
}
/* Right Column Caption */  
#rightcol small{
  font-size:small; 
  text-align:center; 
  color:#000;
  line-height:1em; 
   }
/* Main Content Div */  
#content{
   font-family:helvetica,arial,sans-serif;
   margin:2em 0em 0em 10.5em;
   padding: .3em 0em 0em 2em;
   height:24.5em;
   width:21em;
   text-align:center;
   border:.5em;
   color:#000;
   background-color:#C0C0C0
   }
/*highlight in main index */
.hilite{
  color:#fff; }
/* Placeholder for Main Content Headlines */  
#content h1, #content h2, #content h4{
}
#content h2{
  color:#000;
  font-family:helvetica,arial,sans-serif;
  font-style:italic;
  font-weight:bold;
  margin: .2em 0;
  font-weight:normal;
  }
  
#content h3{
  color:#000;
  font-family:helvetica,arial,sans-serif;
  font-style:italic;
  font-weight:bold;
  margin: .3em 0;
  font-weight:normal;
  }
/* Main Content Text */  
#content p{
	text-align:center;
	font-size:.8em;
    color:#000;
    font-weight:700;
	line-height:1.4em;
	padding: 0 .5em .2em .5em; 
    }
    
#content p.small{
	text-align:right;
	font-size:.6em;
    color:#000;
    font-style:italic;
    margin-top:-1em;
   /* font-weight:700;*/
    }
  /* Content Bullets */   
 #content li{
   text-align:left;
   margin-left:3em;
   font-style:italic;
   font-weight:bold;
   font-size:.8em;
 }
 /* contact page images */
 div.contact img{
   font-family:helvetica,arial,sans-serif;
   font-size:.8em;
   line-height:.8em;
   float:left;
   width:6.7em; 
   height:8em;
   border:solid .1em #000;
  
               	}    
 /*Navbar */   
#navbar{ 
    /* Left margin must match leftcolumn width */
     /* For absolutely-positioned navbar */
    top:8em;
    position:absolute;
    height:1.6em; 
    left:.1em;
                   }
/* Remove bullets from ul in the navbar */
#navbar ul{
	list-style-type:none;
    display:inline;
}
#navbar li{
	float:left;
/* Required for drop-down menus */
	position:relative;
   }
/* Applies to navbar links, unvisited and visited */
#navbar a,
#navbar a:link,
#navbar a:visited{
  	text-decoration:none;
	font-family:helvetica,arial,sans-serif;
	font-size:80%;
	color:#fff;
	background-color:#1e5e7c;
    border:solid .11em #fff;
	display:block;
	height:2.2em;
    width:10.75em;
    text-align:center;
	line-height:2em;
	outline-style:none;
}
/* Navbar hover and active links */
#navbar a:hover,
#navbar a:active,
#navbar li.selected a:link,
#navbar li.selected a:visited{
  background-color:#5bafd7;
  color:#fff;
  }
/* Drop-down menu styles */
#navbar li ul{
	position:absolute;
	z-index:100;
	visibility:hidden;
}
/* Make drop-down visible on navbar hover */
#navbar li:hover ul,
#navbar li a:hover ul{ /* IE6 hack */
  visibility:visible;
  top:1.7em;
  left:.0;
}
/* Applies to links on the drop-down menu */
#navbar li:hover ul li a,
#navbar li a:hover ul li a{ /* IE6 hack */
	background:#000; 
	color:#fff;
	text-align:left;
	display:block;
	width:9.65em;
	padding-left:1em;
	height:auto;
}
/* Hover on drop-down menu links */
#navbar li:hover ul li a:hover,
#navbar li a:hover ul li a:hover{ /* IE6 hack */
  background: #329ccd;
  color:#fff;
}
/* IE6 hack applies to its table drop-down */
#navbar table {
  margin:-1px;
  border-collapse:collapse;
  position:absolute;
  top:.7em;
  left:0;
  z-index:100;
} 
/* This is the footer */ 
 #footer 
 {
  font-size: 0.8em;
  background-color: #5bafd7;
  width:100%; 
  padding:.5em 0 .3em 0;
  text-align:center;
  height:2em;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  color:#fff;
  clear:both;
   } 
/* This is the style for the footer buttons */  
 #footer a,
 #footer a:link,
 #footer a:visited
 {text-decoration:none;
 color:#fff;
    } 
  
 #footer a:hover,
 #footer a:active
 {
 color:#000;
 border:dotted 1px #000;
  }
/* This is for reader accessibility to the site map */ 
.hotkey{
  text-decoration:underline;
}

/* This is the text style for copyright */   
p.black
 {
 margin-left:0em; 
 font-size:x-small;
 color:#000;
   }
/* This is for any acronyms */ 
 acronym, abbr{
  border-bottom:dotted 1px #333;
  cursor:default;
}
/* Start printer-friendly styles */
@media print { 
/* Set wrapper to fill page width */
#wrapper{
width:100%;
}
/* Hide leftcolumn, navbar,and footer */
#leftcol,
#navbar,
#footer{
display:none;
}

#rightcol
{
   font-size:1.5em;
   margin-top:-2em;
   line-height:1.3em;
   font-family:'Century Schoolbook', Times, Serif;
   color:#000;
 }
#branding
{
border:none; }
/* Format content and use a different font for print */
#content{
   margin-top:.5em; 
   margin-left:.5em;
   width:60%;
   border:solid 1px #000;
   padding:0 .3em;
   font-family:'Century Schoolbook', Times, Serif;
   font-size:1.5em;
   }
  }