body { /*body and all html tags do not require a . or a # */
background-color: rgb(154,63,77);
margin: 0px;
}

.main {
font: 1em arial, helvetica, sans-serif;
color: rgb(154,63,77); /*specify a colour because some things will take colour from a div
or a class but not from a regular tag like body */
text-decoration: none;
}

.h1 {
font: 1.5em arial, helvetica, sans-serif;
color: rgb(154,63,77);
}

.h2 {
font: 1.2em arial, helvetica, sans-serif;
color: rgb(154,63,77);
}

.h3 {
font: 1em arial, helvetica, sans-serif;
color: rgb(154,63,77);
}

.smalltext {
font: .7em arial, helvetica, sans-serif;
}

#sidebar a:link { /* These are read right to left. Therefore a link in an anchor in a sidebar*/
text-decoration: none;
color: rgb(154,63,77);
}

#sidebar a:visited {
text-decoration: none;
color: rgb(207,185,103);
}

#sidebar a:hover {
text-decoration: none;
color: rgb(222,222,222);
}

#container1 {/* This is a container to house the logo (used to be the flag) and the banner*/
margin: 20px;
padding: 10px;
background-color: white;
/* Don't specify height and width for the container because there's no way to specify the size
of images that go into it. Therefore, you specify the size of the divs that go inside the
container, e.g. #flag and #header*/
}

#flag {/* This used to be the flag but now houses the logo*/
background-image: url(logo.jpg);
background-repeat: no-repeat;
/*background-position: -5px;*/
width: 210px;  /* this specifies the size of the BOX the image will go in. NOT the size of
the image */
height: 140px;
float: left; /* this is what creates a "column" */
}

#header {
background-position: 8px 20px; /*this is the offset for the image or content within the
outside margin. Equivalent of padding for background content*/
background-image: url(bannerwelcome.gif);
background-repeat: no-repeat;
margin-left: 210px;
height: 140px; /*height of the whole header box*/
}

#container2 { /* This is a box to house the sidebar and content.
It has no background-color specification because I want a red line to show between the sidebar
and the content - can't figure out how to make this happen in Mozilla. Also, again, there is
no size specification as these are put into the items that go into the container*/
margin: 20px;
margin-top: -20px;
}

#sidebar {
width: 170px;
height: 600px;
background-color: white; /* by putting the bg color specification here and in content, instead
of in the container which houses them, the default space, which occurs in IE, allows the body
colour to show through*/
font: bold small-caps 1em "comic sans MS", sans-serif;
overflow: auto; /*scroll bars will appear if necessary*/
padding-top: 15px;
padding-right: 5px;
padding-bottom: 15px;
padding-left: 10px;
float: left; /* refers to the sidebar itself, not to its content*/
}

#content {
height: 600px;
padding: 15px;
background-color: white;
text-align: left;
overflow: auto;
}

#footer {
font: small-caps .8em "comic sans MS", sans-serif;
color: white;
margin-top: -20px;
text-align: center;
padding: 10px;
z-index: 16;
}

#footer a {
border: 1px rgb(246,35,1) solid;
font: small-caps .8em comic sans MS, sans-serif;
color: white;
padding: 5px;
text-decoration: none;
}
#logo {
background-image: url(cc.gif);
background-repeat: no-repeat;
width: 150px;
height: 135px;
float: right;
}
#max {
background-image: url(max.jpg);
background-repeat: no-repeat;
width: 255px;
height: 380px;
float: left;
}