/* layoutstyles.css */

/* Universal style rule to create a border around all of my elements so I can see where they are */
*{
/* block all browser default margins and padding */
margin: 0;
padding: 0;
/* temporary borders  can be removed late with just the comment symbols */
/* border:dashed 1px #f00; I just added comment symbol to take out the dashed border */
}

/* Changed the body background from image to color */
body {
background-color: #284375;
font-family: Arial, Helvetica, sans-serif;

}

/* style the wrapper  using the em unit of measure makes it elastic */
#wrapper {
width: 48em;
background-color: #cccccc; /* color change from chap 4 */
/* set the margins, in the following 0 applies to top and bottom  auto applies to left and right */
/* margin: 0 auto; is not what I want now.  want a top margin to make space above the wrapper, thus the following for top, right, bottom,left */
margin: 20px auto ;
border: ridge 2em #cccccc;

}

#branding {
height:7em;
width: 100%;
background-color: #cccccc;
color: #ff0000;
text-align: center;
}
#branding  a {
position: absolute; /*the next lines are added to style links.  Also the #branding info for visited, hover and active */
text-decoration: none;
color: #000;
font-size: 0.8em;
}
/* Unvisited and visited links in branding bar */
#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;
}
#branding img { /*fixes image/content gap when branding bar is image */
display: block;
}

#branding h1{
font-family: "Monotype Corsiva","Arial Black", Charcoal, Impact, Sabs-serif;
font-size: 2.5em;
padding-top: 0.25em;
}

#leftcol {
width: 12em;
float: left;
display: inline; /* This is to satisfy AOL browsers */
text-align: center;
padding-top: 30px;
}
#leftcol p {
text-align: center;
font-size: 1em;
width: 80%;
padding-left: .7em; 
}

#leftcol img {
width: 8em;
text-align: center;
}

#rightcol {
width: 12em;
float: right;
display: inline;
text-align: center;
padding-top: 30px;
}
#rightcol p {
text-align: center;
font-size: 1em;
width: 80%;
padding-left: .6em;
}

#rightcol img {
width: 8em;
text-align: center;
}
/* navbar division */
#navbar {
background-color:  #3e6dad;
width: 100%;
height: 1.6em; /* using em allows it to grow and shrink in different browsers.  Originally height was 2em but we changed to 1.6em.  Read lesson in chapter 3 for reason */
}
#navbar ul {  /*remove bullets from list in navbar */
list-style-type: none;
}
#navbar li {  /* to make lists line up instead of stack */
float: left;
}
#navbar a, #navbar a:link, #navbar a:visited {
text-decoration: none; /* to make underline disappear */
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 80%; /* use 80% for user browser size preference */
color: #000;
background-color: #3e6dad;
display: block; /* this changes links from inline to block */
height: 2em;
width: 7.37em;
border-right: solid 1px #ddd; /* adds lt gray border between links */
text-align: center; /* align and height change placement of text */
line-height: 2em;
}
/* style the links in navbar */
#navbar a:hover, #navbar a:active {
background-color: #000; /*these colors could be anything I want */
color: #fff;
}
#content {
/* left margin must match leftcolumn width */
margin-left: 12em;
margin-right: 12em;
background-color: #fff;
color: #000;
padding: 30px 10px; /*This puts 10px top and bottom; 20px right and left sides */
border: solid 1px #f00;

}
/* style rule for h1 element inside the content div */
#content h1, #content h2, #content h3, #content h4 {
font-family: "Arial Black", Impact, sans-serif;
color: #000;
font-weight: normal;
font-style: italic;
font-variant: small-caps;
letter-spacing: 0.08em;
}

/* style just for the h1 heading in the content div.  In the order of style rules in this page, it would be Content, Content h1 h2 h2 then content just h1 */
#content h1 {
font-size: 2em;
}

/* style just for the h2 and h3  heading in the content div.  In the order of style rules in this page, it would be Content, Content h1 h2 h2 then content just h1, then content just h2, then just he */
#content h2 {
font-size: 1.5em;
text-align: center;
}

#content h3 {
font-size: 1.24em;
font-style: normal;
text-align: center;
}
#content h4 {
text-align: center;
font-style: normal;
}

/* style for unordered lists in the content div to add a little padding to the left.  It will look as if indented in page  */
#content ul, #content ol {
padding: 10px 0 10px 40px; /* this adds 10px to top 0 right 10 bottom and 40 left */
line-height: 1.25; 
}

/* style to add some line height spacing in paragraphs just in the content div */
#content p {
line-height: 1.10em;
}

 img.floatLeft{
    float: left;
	margin-left: 10px;
		margin-top: 20px;
	}
/* Float image to right of paragraph */
img.floatRight{
    float: Right;
	margin-top: 20px;
	margin-right: 10px;
	}
	#footer {
	height: 50px;
	width: 100%;
	color: #000;
	background-color: #cccccc;
	border-top: thin solid #ff0000;
	}