/* layoutstyles.css */

/* Universal style rule */
*{
/* block all browser default margins and padding */
margin: 0;
padding: 0;
/* Temporary borders.  I am blocking the border: dashed with comment symbols */
 /* border:dashed 1px #f00; */ 
}
/*  The above is the makings of a fluid page layout */
/* adding the wrapper will change the page from fluid and make the content inside the wrapper 40em */
/* Body text and page background.  Assignment lesson 5 does not have the margin 0px, font size or color.  They were part of a previous lesson and I just left them */ 
body {
  margin: 0px;
  font-family:Arial, Helvetica, sans-serf;
  font-size: medium;
  color:#000000;
  background-color: #2d73b9;
 
  }
#wrapper {
width: 45em;
background-color: #fff;
/* center the wrapper */
margin: 20px auto 0 auto;
border: ridge 2em #cccccc;
position: relative;
}
/* make branding a positioned element, but don't move it */
#branding {
position: relative;
background-color: #ebe9e1;
width: 100%;
height: 7em;

}

/* fixes the mysterious image gap */
#branding img {
display: block;
}
/* Absolutely position links in the branding division  - I don't need for bchs website
#branding a{
position: absolute;
text-decoration:none;
  color:#000;
  font-size:0.8em; 
} */
/* Unvisited and visited links in branding bar - don't need for bchs web site
#branding a:link, #branding a:visited {
  color:#000;
}
 Hover links in branding bar 
#branding a:hover{
  color:#0f0;
}
 Active link in branding bar 
#branding a:active{
  color:#1bb498;
}
*/
/* just for h1 in the branding box */
#branding h1 {
font-size: 1.5em;
font-family: Algerian, 'Arial Black', Charcoal, Impact, Sans-serif;
color: #412700;
padding-top: 0.2em;
text-align: center;
}
/* just for h2 in the branding box */
#branding h2 {
font-size: .9em;
font-family: Algerian, 'Arial Black', Charcoal, Impact, Sans-serif;
color: #412700;
text-align: center;
}
/*navbar division */
#navbar {
background: #aaa url(navbak.jpg) repeat-x top;
height: 1.6em;
width: 100%;
/* margin-left: 12em; */
/* for absolute positioned navbar */
position: absolute;
top:7em; /* branding div height */
right: 0;
/* left: 12em; */

}

#navbar ul {
list-style-type: none; /* removes bullets */
}
#navbar li{
float:left; /* so links will be in a line not stacked */
position: relative; /* required for drop-down menus */
}
/* Applies to navbar links, unvisited and visited */
#navbar a,
#navbar a:link,
#navbar a:visited{
  text-decoration:none;
  font-family: Verdana, Geneva, Arial, San-Serif;
  font-size: 80%;
  font-weight: bold;
  color: #000;
  /* background: #aaa url(navbak.jpg) repeat-x center; */
  display: block;
  height: 2em;
 width: 9em; 
  border-right: solid 1px #ddd;
  text-align: center;
  line-height: 2em;
  outline-style: none;
}
#navbar a:hover, 
#navbar a:active{
 /*#navbar li.selected a:link,
#navbar li.selected a:visited, */ 
background-color: #000;
color: #fff;
}

/* I added text-align center to left and right column.  It is not in the Lesson 5 */
#leftcolumn {
width: 12em;
float: left;
display: inline;
text-align: center;
padding-top: 0.5em;
/* temporary border */
/* border: dashed 1px #f00; */
margin: 0 auto;
/* for absolute positioned leftcolumn */
position: absolute;
top: 9.7em; /* branding div plus navbar height */
left: 0;
 }
/* #leftcolumn img, #rightcolumn img {
width: 75%; sizes image in both columns 
} */
/* the above and below apply to paragraphs in the leftcolumn  and rightcolumn div */
#leftcolumn p, #rightcolumn p {
/* border: solid thin #7e97a6; */
font-family: Tahoma, Verdana, Sans-Serif;
padding: 0.75em;
width: 75%;
font-size: .8em;
margin: 1em auto;
text-align: center;
}
#leftcolumn ul, #leftcolumn ol {
list-style-type: none; /* removes bullets */
font-size: 0.8em;
line-height: 1.50em;
text-align: center;
margin-right: 2px;
width: 80%;
margin: 0 auto;

}

#leftcolumn li {
margin-bottom: 10px;
}
#leftcolumn a, #leftcolumn a:link, #leftcolumn a:visited {
text-decoration: none;
font-family: Verdana, Geneva, Arial, Sans-Serif;
font-size: 90%; 
font-weight: bold;
color: #000;
background: #aaa url(navbak.jpg) repeat-x top; 
  display: block;
  height: 3.25em;
  line-height: 1.5em;
/* font-size: 80%; */
/* color: #412700; */

}
#leftcolumn a:hover, 
#leftcolumn a:active {
background-color: #000000;
color: #fff;
}
/* I added text-align center to left and right column.  It is not in the Lesson 5 */
/* On Feb 24 I decided not to use a right colummn so commented it out instead of deleting so I can go back if I want to
#rightcolumn {
width: 12em;
float: right;
display: inline;
text-align: center;
padding-top: 2em ;
/* border: dashed 1px #f00; 
margin: 0 auto;
}
#rightcolumn ul, #rightcolumn ol {
font-size: 0.6em;
line-height: 1.25em;
text-align: left;
padding-left: 2em;
width: 80%;
margin: 0 auto;
}
#rightcolumn li {
margin-bottom: 10px;
}*/
#content {
 /* margins must match column/columns width */
margin-left:12em;
/* margin-top: 2.9em; */
background-color: #fff; 
/* I changed background color from lesson 5 */
color: #000;
padding: 3em 2em 0 2em ;
border-left: solid 3px #bfe2f9; 
}

/* the following applies to h1 elements in the content division only */
#content h1, #content h2, #content h3 {
font-family:  "Arial Black", "Times New Roman", sans-serif;
color: #000;
/* the answer to lesson 5 only has font family and color.  The rest of these were from erlier lesson and I just left them */
font-weight: normal;
text-align: center;
font-style: normal;
letter-spacing: 0.08em;
}
/* size only h1 headings in the content division */
#content h1 {
font-size: 2em;
font-style: italic
}
/* size only h2 headings in the content division */
#content h2 {
font-size: 1.25em;
}
/* size only h3 headings in the content division */
#content h3{
  font-size:1.00em;
  
}
/* applies to paragraphs and lists in the content section */
#content p, #content ul, #content ol {
font-size: 100%;
line-height: 1.25em;
text-align: left;
}

/* apply to lists in the content division */
#content ul, #content ol {
/* padding to top, right, bottom and left of 5, 0, 5 and 30 px */
padding: 5px 0px 5px 30px;
/* list-style-type: none; */
}

#content li {
margin-bottom: 10px;
}
#content a, #content a:link, #content a:visited {
text-decoration: underline;
font-family: Arial, Verdana, Geneva, Sans-Serif;
/* font-size: 80%; */
color: #000;

}
#content a:hover, #content a:active {
background-color: #000;
color: #fff;
}
.hilite {
background-color: #ffff66;
}
.smallitalic{
font-size: .6em;
font-style: italic;
}
 h4 {
   font-family: Arial, Helvetica, sans-serif;
  font-style:italic;
  text-align: center;
  padding-top: 10px;
  	  }
p.tip {
margin-left: 5em;
margin-right: 5em;
font-size: 3em;
font-weight: bold;
color: #ff0000;
}	  
p.center {
text-align: center;
font-size: 0.8em;
}	  
	  div.center  {
margin: 0 auto;
}

div.captionpicrite {
width: 13em; 
margin-right: 1.5em; 
float: right;
/* border: solid 1px #000; added comment symbol to remove border */
font-family: Arial, Helvetica, Sasn-Serif;
font-size: 0.6em;
color: #555;
text-align: center;
}

div.captionpicleft{
/*width: 15em; */
margin-left: 1.5em; 
font-family: Arial, Helvetica, Sasn-Serif;
font-size: 0.6em;
color: #555;
text-align: center
;
}
div.captionpic img {
width: 90%;
border: none;
}

/* captioned images */
div.captionpic {
width:80%;
/*padding: 0.25em; */
margin: 0.5em 0 0 1.5em;
/* float: left;  */
border: none;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.7em;
color: #555;
text-align: center;
}
/* applies to image inside a captionpic div */
div.captionpic img {
width: 100%;
border: none;
}

 /* Float image to left of paragraph */
  img.floatLeft{
    float: left;
	
	}
/* Float image to right of paragraph */
img.floatRight{
    float: Right;
	
	}
#contact {
text-align: center;
font-size: 0.8em;
}
 #footer {
     height: 50px;
     width: 100%;
	 color: #000000;
	 background-color: #c2c2c2;
	
		 }
		   /*Style for table cells that contain thumbnails */
table.thumbs{
text-align: right;
border-collapse: collapse;
margin: auto;
}
/* Style for table cells that contain thumbnails */
td.thumbs{
border: solid 1px #00bfff;
padding: 10px;
}

/*Style for thumbnail images */
img.thumbs {
width: 100px;
height: 80px;
border-width: 0px;
} 
/* start printer-friendly styles */
@media print {
#wrapper {
width: 100%; /* set wrapper to fill page width */
}

#leftcolumn, #navbar, #footer, #branding{
display: none; /*hide leftcolumn, navbar and footer */
}
/*get rid of content div margins and padding.  Use different print for font */
#content {
margin: 0;
padding: 0;

font-size: 1em;
}
/* end printer-friendly styles */
}