body {
background-color: #FFFFE0
}

/* Font sizes/color. */

/*h1 is the header text in the div.text section (headings for content)*/

h1 {
color: #024930;
font-size: large;
padding-left: 20px;
font-family: "Times New Roman, Times";
background-color: transparent;
clear: left;
}

/*h2 is the "American Committee for KEEP" header*/

h2 {
color: #FFFFE0;
font-size: x-large;
font-variant: small-caps;
padding-left: 20px;
font-family: "Times New Roman, Times"
}

/*h3 is the bottom details text */

h3 {
color: #3d332b;
font-family: Arial;
font-size: small;
text-align: center;
font-family: "Times New Roman, Times"
}

/*h4 is the "Kiyosato Educational Experiment Project" header*/

h4 {
color: #FFFFE0;
font-size: medium;
text-align: right;
font-variant: small-caps;
margin-right: 20px;
margin-top: 10px;
font-family: "Times New Roman, Times"
}

/*h5 is sub-headings for text*/

h5 {
color: #024930;
font-size: medium;
font-variant: small-caps;
padding-left: 30px;
font-family: "Verdana, Arial, Helvetica";
background-color: transparent;
}

/*p is, of course, all content text.  The first letter of the each p section is large*/

p {
color: #3d332b;
font-size: medium;
margin-left: 5%;
font-family: "Verdana, Arial, Helvetica";
background-color: transparent
}

p:first-letter {
color: #3d332b;
font-size: large
}

/*p.quote is for a blocked off section of text for quotes. p.quoter sets off the quoter to the right of the text*/

p.quote {
font-size: medium;
font-style: oblique;
}

p.quoter {
font-size: small;
text-align: right;
padding-right: 5px;
}

p.picture-quote {
font-size: x-small;
text-align: center;
font-style: italic;
}

ul {
color: #3d332b;
font-size: small;
font-family: "Verdana, Arial, Helvetica";
background-color: transparent;
list-style-type: none
}

li {
color: #3d332b;
font-size: small;
font-family: "Verdana, Arial, Helvetica";
background-color: transparent;
list-style-type: none;
}

ul.list {
color: #3d332b;
font-size: small;
font-family: "Verdana, Arial, Helvetica";
background-color: transparent;
list-style-type: circle;
margin-left: 7%;
}

li.list {
color: #3d332b;
font-size: small;
font-family: "Verdana, Arial, Helvetica";
background-color: transparent;
list-style-type: circle;
}

/*standard section for link formatting*/

a {
font-size: medium;
text-decoration:none;
font-variant: bold;
font-family: "Verdana, Arial, Helvetica";
}

a:link {color: #0054a0}
a:visited {color: #008ed6}
a:hover {color: #0054a0}
a:active {color: #0054a0}

a#header:link {color: #FFFFE0}
a#header:visited {color: #FFFFE0}

/*Here's where it gets interesting.  In order to make menus across the top and sides, it's necessary to put them into un-ordered lists. .topmenu is the Top Menu and .sidemenu is the Side Menu*/

/*.topmenu is not nested inside the div.header section, it is its own seperate section*/

ul.topmenu {
list-style-type: none;
padding: 0;
margin: 0;
float: left;
width: 100%;
color: #FFFFE0;
background-color: #024930;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
display: list-item
}

/*lists in topmenu are now displayed inline*/

ul.topmenu li {
display: inline;
background-color: #024930;
}

/*The width and padding for the links in topmenu are padded and at a certain width to keep it relatively the same across all browsers (Safari, Firefox, Opera and (maybe?) IE as of now.) border-right adds a small gray border on the right of each link*/

ul.topmenu li a {
float: left;
background-color: #024930;
color: #FFFFE0;
border-right: 1px solid #000000;
border-left: 1px solid #3d332b;
display: inline; padding-left:1em; padding-right:1em; padding-top:0em; padding-bottom:0em
}

/*pretty hovering color*/

ul.topmenu li a:hover {
background-color: #03704A
}

/* Individual div sections. div.lines are the two red lines, div.header is the top border, div.text is formatting for the full-text section, div.quote allows for a section for a seperate quote in-text, div.sidemenu is the side menu, and div.closing is the contact info along the bottom */

/*Can't figure out why IE won't display all of div.lines, so, we're gonna block it out for IE users.  Browsers which can use the first child CSS rule will still see the red lines, but, IE, which cannot, will only see the text.

This gets fixed in IE7 without doing anything, by the way. I suppose it uses first child CSS rules*/

div.topmenu {
float:clear
}

div.lines {
margin-left: 30px;
}

html>body div.lines {
border-left: medium double #FF0000;
margin-left: 30px;
z-index: 1;
}

div.header {
float: left;
width: 100%;
background-color: #024930;
line-height: 10px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-top: 1px solid #000000; 
}

div.quote {
float: right;
width: 20%;
margin-left: 2em;
margin-right: 1em;
border: 1px solid #a9a9a9;
padding: 2px
}

div.text {
float: left;
width: 94%;
z-index: -1;
background-color: transparent;
}

div.sidemenu {
float: right;
width: 14%;
position: relative;
left: 4px
}

div.closing {
clear: left;
}

/*Formatting for Photo Gallery*/

div#photogallery {
width: 100%;
height: 525px;
padding: 2px;
}

div#photospace {
width:70%;
height:360px;
border: 1px solid #a9a9a9;
padding: 2px;
text-align: center;
margin-left: 15%;
}

div#thumbnailspace {
width: 70%;
height:150px;
margin-left: 15%;
}

#photogallery a span {
position: absolute;
width: 1px;
height: 1px;
top: 200px;
left: 47px;
overflow: hidden;
background: #FFFFE0;
padding: 2px;
}

#photogallery a, #photogallery a:visited {
display: block;
color: #FFFFE0;
text-decoration: none;
border: 1px solid #a9a9a9;
padding: 2px
text-align: left;
cursor: default;
overflow: hidden;
}

/*#photogallery ul dictates the placement of the thumbnails.  To determine how much space you need, decide the widths of the chosen thumbnails (per line) plus whatever horizontal margins they may contain (found in the #photogallery a.gallery1-x section.)  This amount should give you the width of the line.*/

#photogallery ul {
width: 600px;
height: 188px;
float: left;
}

#photogallery li {
float: left;
}

#photogallery a:hover {
border: 1px solid #000000
}

#photogallery a:hover span {
width: 400px;
height: 350px;
top: 155px;
left: 265px;
}

#photogallery a.gallery1 {
background: url(images/pic1-t.jpg);
height: 65px;
width: 94px;
margin-right: 4px;
margin-bottom: 4px;
}

#photogallery a.gallery2 {
background: url(images/pic2-t.jpg);
height: 51px;
width: 40px;
margin-right: 4px;
margin-bottom: 4px;
}

#photogallery a.gallery3 {
background: url(images/pic3-t.jpg);
height: 65px;
width: 94px;
margin-right: 4px;
margin-bottom: 4px;
}

#photogallery a.gallery4 {
background: url(images/pic4-t.jpg);
height: 65px;
width: 94px;
margin-right: 4px;
margin-bottom: 4px;
}

#photogallery a.gallery5 {
background: url(images/pic5-t.jpg);
height: 65px;
width: 94px;
margin-right: 4px;
margin-bottom: 4px;
}

#photogallery a.gallery6 {
background: url(images/pic6-t.jpg);
height: 65px;
width: 94px;
margin-right: 4px;
margin-bottom: 4px;
}

#photogallery a.gallery7 {
background: url(images/pic7-t.jpg);
height: 65px;
width: 94px;
margin-right: 4px;
margin-bottom: 4px;
}

#photogallery a.gallery8 {
background: url(images/pic8-t.jpg);
height: 65px;
width: 94px;
margin-right: 4px;
margin-bottom: 4px;
}

#photogallery a.gallery9 {
background: url(images/pic9-t.jpg);
height: 65px;
width: 94px;
margin-right: 4px;
margin-bottom: 4px;
}

#photogallery a.gallery10 {
background: url(images/pic10-t.jpg);
height: 65px;
width: 94px;
margin-right: 4px;
margin-bottom: 4px;
}

#photogallery a.gallery11 {
background: url(images/pic11-t.jpg);
height: 65px;
width: 40px;
margin-right: 4px;
margin-bottom: 4px;
}

#photogallery a.gallery12 {
background: url(images/pic12-t.jpg);
height: 65px;
width: 94px;
margin-right: 4px;
margin-bottom: 4px;
}

#photogallery img {
background-color: transparent;
border: 1px solid #a9a9a9;
padding: 2px
}


/*Formatting for images*/


#right {
float:right;
width:200px;
background-color: transparent; 
clear: right
}

#left {
float: left;
width: 200px;
background-color: transparent;
margin-right: 20px;
margin-left: 20px;
}

#right-h {
float:right;
width:132px;
background-color: transparent; 
clear: right
}

#left-h {
float: left;
width: 132px;
background-color: transparent;
margin-right: 20px;
margin-left: 20px;
}

#pic-right,#pic-left img {
background-color: transparent;
border: 1px solid #a9a9a9;
padding: 2px
}

#pic-right-h,#pic-left-h img {
background-color: transparent;
border: 1px solid #a9a9a9;
padding: 2px
}

#pic-right {
float:right;
width:200px;
background-color: transparent; 
margin-left: 10px
}

#pic-left {
float: left;
width: 200px;
background-color: transparent;
}

#pic-right-h {
float:right;
width:132px;
background-color: transparent; 
margin-left: 10px
}

#pic-left-h {
float: left;
width: 132px;
background-color: transparent;
}

div#pic-no-borders {
float: right;
width: 200px;
background-color: #FFFFE0;
margin-left: 10px;
border: 0px solid #000000
}