/* CSS Document */
/*	ghi.css

	Notes:
	All positioning is done using floats (no absolute positioning).

	We encounter the IE div spacing bug frequently, and use the "* html" hack to
	get around it. Layout is nearly identical in IE & FF.
	
	Anytime you make positioning changes, look for a corresponding "* html" rule for WinIE specific layout.
*/
/* debugging:
div { border: solid 1px red; }
*/


/*Zero the defaults
*/
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, a { 
	margin: 0; 
	padding: 0; 
	border: 0; 
}


/* global stuff */
.image { border: 0px; }
.clear { clear: both; }


a { text-decoration: none; }
a:link { color: #006699; }
a:visited { color: #006699; }
a:hover { text-decoration: underline; }
h1 { font-weight: normal; color: #006699; margin: 10px 0 55px 0; font-size:24px; text-align:center; text-transform:uppercase; }
h2 {   color: #006699; font-size:16px; font-style:italic; }
h3 { font-weight: normal; color: #006699; margin: 10px 0 35px 0; font-size:18px; text-align: center; }
h4 {   color: #006699; font-size:16px; font-style:italic; text-align: center; }
h5 { font-weight: normal; color: #006699; margin: 10px 0 10px 0; font-size:20px; text-align:left; text-transform:uppercase; }
h6 {   color: #006699; font-size:14px; font-style:italic; }
.bold { font-weight: bold; }
.firstletter_blue { font-size: 150%; color:#006699; }
.italic { font-style:italic; }
.underline { text-decoration:underline; }
div.pictureleft { float: left; margin: 0px 10px 0px 0px; }
div.pictureleft_20 { float: left; margin: 0px 20px 0px 0px; }
div.pictureright { float: right; margin: 0px 0px 0px 10px; text-align: center; }
.imagecenter { text-align: center;  border: 0; }
div.center { text-align: center; }
.smallfont { font-size: 12px; line-height: 14px; }
div.spacer { height: 20px; }
div.alignright { text-align: right; }
.indent { margin-left: 50px; }
.small_indent { margin-left: 20px; }
.caption { font-style:italic; text-align: left; font-size: 90%; line-height: 18px; margin-bottom: 5px; color: #006699; width: 340px; }
.caption_400 { font-style:italic; text-align: left; font-size: 90%; line-height: 18px; margin-bottom: 5px; color: #006699; width: 400px; }
.caption_smallphoto_center { font-style:italic; text-align: center; font-size: 90%; line-height: 18px; margin-bottom: 5px; color: #006699; width: 220px; }
.caption_smallphoto_left { font-style:italic; text-align: left; font-size: 90%; line-height: 18px; margin-bottom: 5px; color: #006699; width: 220px; }
.captioncenter { font-style:italic; text-align: left; font-size: 90%; line-height: 18px; margin-bottom: 5px; color: #006699; width: 400px; margin-left: 190px; }
li { margin-left: 20px; }
ol { margin-left: 20px; }
ul { margin-left: 20px; }
.red { color: #e01836; }
.red_bold { color: #e01836; font-weight:bold; }
.redasterisk { color: #e01836; font-size: 130%; font-weight: bold; }
.outlined_box { border: 1px solid black; padding: 2px; margin-bottom: 10px; }


.homepage_box { width: 500px; margin-left: 140px; border: 1px solid black; text-align: center; padding: 2px; margin-bottom: 10px; }
.homepage_box a { text-decoration: none; }
.homepage_box a:link { color: #e01836; }
.homepage_box a:visited { color: #e01836; }
.homepage_box a:hover { text-decoration: underline; }

/*buttons for Get Involved Section*/
div.button { border: 1px solid black; width: 250px; height: 25px; background-color:white; text-align: center; margin: 10px 0 30px 0px; text-transform: uppercase;  }
div.button a { display: block; text-decoration: none; }
div.button a:link { display: block; color: #e01836 }
div.button a:visited { display: block; color: #e01836; }
div.button a:hover { display: block;  color: #fff; background-color: #e01836; text-decoration: none;  }

.firstletter { font-size: 130%; }

html { font-size: 100.01%; }

body { background-color:#666;  color: #000; font-family: Arial, Sans-Serif; font-size:14px; }

/* the fullpage div has a specified width to keep the main information from collapsing when a window is shrunk
*/

div#fullpage { width: 1000px;  background-image:url(images/background.jpg); background-repeat:repeat; height: auto; margin-left: auto; margin-right: auto; margin-top: 20px; }
* html div#fullpage { width: 1014px; }

div#leftcolumn { width: 150px; float: left; }

/*header is where the logo and the sub section links live*/

div#logo { height: 110px; width: 148px; margin-bottom: 20px; margin-top: 10px; }


/*	the side nav div is for the sub section links
 */

div#sidenav { margin: 50px 5px 10px 5px; text-align: left; font-size: 16px;  }
div#sidenav a { display: block; margin-bottom: 10px; text-decoration: none; }
div#sidenav a:link { display: block; margin-bottom: 10px; color: #000 }
div#sidenav a:visited { display: block; margin-bottom: 10px; color: #000; }
div#sidenav a:hover { display: block; margin-bottom: 10px; color: #006699; }

/* this hack brings the bullets within a ul and li tag to the top line, rather than even with the bottom line */
div#sidenav ul { position: relative; top: .5em; }
div#sidenav li { vertical-align: top; position: relative; top: -.5em; }
 

.subsub { margin-left: 10px; font-size: 80%; }

/*the top naviation and main live in the main side*/

div#main { width: 850px; float: left; }

/*	the top nav div is for the side navigation elements.
 */

div#topnav {  width: 850px; height: 40px; background-color: #000; text-align: center; font-size: 16px; padding-top: 20px; color:#fff; }
* html div#topnav {  width: 750px; }
div#topnav a { margin-left: 8px; margin-right: 8px; color:#fff; }
div#topnav a:visited { color:#fff;  }
div#topnav a:link { color:#fff;  }
div#topnav a:hover { color:#e01836;  }

/*div#mainbody { width: 780px; height: 800px; line-height: 24px; text-align: left; float:left; background-image:url(images/main_background.jpg); background-repeat:no-repeat; background-position:center; background-color: #f2e7b0;  margin: 40px; }*/


div#mainbody { width: 780px; height: 800px; line-height: 24px; text-align: left; float:left; background-image:url(images/main_background.jpg); background-repeat: repeat-y; background-color: #f2e7b0;  margin: 40px; }

* html div#mainbody { margin: 25px 15px 15px 15px; }

div#mainbody_long { height: auto; }


div#sectiontitle { color: #006699; margin: 10px 0 15px 0; font-size:24px; text-transform:uppercase; text-align: center;  }

.quotename {  color: #006699; text-transform:uppercase; font-size: 12px; font-weight:bold; }
div.quotepictureleft { float: left; margin: 5px 10px 0px 0px; }
.quotetext {  font-size: 12px; width: 500px; line-height: 14px; margin-bottom: 10px; text-align: left; }
.quotetextleftjustify {  font-size: 12px; width: 500px; line-height: 14px; margin-bottom: 10px; text-align: left; }
.quotetitle {  font-size: 11px; width: 500px; font-style:italic;  line-height: 14px; }

* html .quotetext {  width: 300px;  }
* html .quotetextleftjustify {  width: 300px; }
/* the following code is used when quotes and photos with quotes are used for the right side of th page */

/*this is the box that the quote information for the right side lives in */
.rightsidequotebox { text-align: right; width: 500px; float: right; margin-right: 20px;  height: auto; }
* html .rightsidequotebox {  margin-right: 10px; }

/* right side - photo above quote*/
.rightsidequotebox_top { text-align: right; width: 200px; float: right; margin-right: 10px;  height: auto; padding-left: 10px; }
.quotetext_pictureright_bottom {  font-size: 12px; margin-top: 10px; line-height: 14px; margin-bottom: 10px; }
.quotetitle_pictureright_bottom {  font-size: 11px; font-style:italic;  line-height: 14px; text-align: right; }
.quotename_pictureright_bottom {  color: #006699; text-transform:uppercase; font-size: 12px; text-align: right; font-weight:bold; padding-left: 50px; }
.quotetext_pictureright_bottom {  font-size: 12px; margin-top: 10px; line-height: 14px; margin-bottom: 10px; }
div.quotepictureright_bottom { float: right; margin-left: 20px; }

* html .rightsidequotebox_top { margin-right: 0px;  }
* html .quotetext_pictureright_bottom { margin-right: 0px; }
* html div.quotepictureright_bottom { margin-left: 0px; }


/*quotes with pictures */
div.quotepictureright { float: right; margin-left: 20px; }
.quotename_pictureright {  color: #006699; text-transform:uppercase; font-size: 12px; text-align: right; font-weight:bold; padding-left: 50px; }
.quotetext_pictureright {  font-size: 12px; margin-top: 10px; line-height: 14px; margin-bottom: 10px; }
/*.quotetext_pictureright {  font-size: 12px; line-height: 14px; margin-top: 10px; text-align: justify;  }*/
.quotetitle_pictureright {  font-size: 11px; font-style:italic;  line-height: 14px; text-align: right;  padding-left: 30px;  }

* html .quotename_pictureright {  }
* html .quotetext_pictureright { margin-bottom: 10px; padding-left: 10px; }
* html .quotetitle_pictureright {  margin-right: 0px; padding-left: 10px;  }


/*quotes without pictures */

.quotename_right {  color: #006699; text-transform:uppercase; font-size: 12px; text-align: right; font-weight:bold; margin-right: 50px; }
.quotetext_right {  font-size: 12px; width: 400px; line-height: 14px; margin-bottom: 10px; margin-top: 10px;  margin-right: 50px; float: right; text-align: justify; height: auto; }
.quotetext_right_rightalign {  font-size: 12px; width: 400px; line-height: 14px; margin-bottom: 10px; margin-top: 10px;  margin-right: 50px; float: right; text-align: right; height: auto; }
.quotetitle_right {  font-size: 11px; width: 500px; font-style:italic;  line-height: 14px; text-align: right; float: right;  margin-right: 50px; }

* html .quotename_right {  margin-right: 40px;  }
* html .quotetext_right {  margin-right: 20px; }
* html .quotetitle_right {  margin-right: 20px;  }
* html .quotetext_right_rightalign {  margin-right: 20px; }



/*bottom nav */
div#bottomnav { text-align: center; width: 100%; clear:both; padding-top: 20px; font-size: 90%; margin-left: 80px;  }



div#copyright { font-size: 80%; text-align: center; clear: both; padding-top: 10px; margin-left: 150px;  }
div#trina { font-size: 75%; text-align: center; margin-left: 150px; padding-bottom: 10px; }


/* navigation drop down menu*/

#sddm
{	margin: 0;
	
	z-index: 30;
	width: 850px; height: 40px; background-color: #000; text-align: center; font-size: 16px; padding-top: 5px; padding-bottom: 5px; color:#fff; }

#sddm li
{	margin: 0;
	list-style: none;
	float: left;
	 text-align: center; color:#fff; }

#sddm li a
{	display: block;
	margin: 0 1px 0 0;
	padding: 0px 10px;
	width: 120px;
	background: #000;
	color: #FFF;
	text-align: center;
	text-decoration: none; }

#sddm li a:hover
{	background: #000;
	color: #e01836; }

#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #EAEBD8;
	border: 1px solid #000; }

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 5px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #EAEBD8;
		color: #e01836;
		font-size: 12px; }
		
	* html #sddm div a
	{ width: 160px; }

	#sddm div a:hover
	{	background: #e01836;
		color: #FFF; }

/*sub navigation side bar drop down*/

#menu {
width: 140px;
}
#menu dt {
margin: 20px 0;
line-height: 20px;
}
#menu dd {

}
#menu li {
font-size: 75%; margin-left: -15px; 
}
#menu li a, #menu dt a {
display: block;
height: 100%;
}
#menu ul {
margin-left: -5px; 
}
#menu li a:hover, #menu dt a:hover {
}

/*landing page*/

div.landingtextfirst { color: #e01836; font-size: 35px; margin-top: 200px; margin-left: 110px; text-transform: uppercase; }
div.landingtextsecond { font-size: 18px; margin-top: 20px; margin-right: 80px; text-align: right; text-transform: uppercase; }
.firstletterlanding { font-size: 130%; text-transform: uppercase; }

div.landingpageheadline { font-weight: normal; color: #006699; margin: 10px 0 10px 0; font-size:18px; text-align:center; text-transform:uppercase; }

div.landingpageheadline_urgent { font-weight: normal; color: #e01836; margin: 10px 0 0px 0; font-size:18px; text-align:center; }
div.landingpageheadline_urgent a { text-decoration: none; }
div.landingpageheadline_urgent a:link { color: #e01836; }
div.landingpageheadline_urgent a:visited { color: #e01836; }
div.landingpageheadline_urgent a:hover { text-decoration: underline; }

div.landingpageheadline_urgent_small { font-weight: normal; color: #e01836; margin: 0px 0 10px 0; font-size:14px; text-align:center; }
div.landingpageheadline_urgent_small a { text-decoration: none; }
div.landingpageheadline_urgent_small a:link { color: #e01836; }
div.landingpageheadline_urgent_small a:visited { color: #e01836; }
div.landingpageheadline_urgent_small a:hover { text-decoration: underline; }


/* people page*/

div.people { line-height: 14px; text-align: left; }
.peoplename { color: #006699; }
.peopleinfo { font-size: 12px; }
div.peoplecolumn1 { margin-left: 150px; width: 200px; float: left; }
* html div.peoplecolumn1 { margin-left: 80px; }
div.peoplecolumn2 { margin-left: 500px; width: 200px; }
* html div.peoplecolumn2 { margin-left: 450px; width: 300px; }


div.peoplelist { width: 200px; float: left; }


/* projects/map pages */




#mapLocations ul {
    margin-left: 0;
    padding-left: 0;
    text-indent: 0px;
    list-style-type: none;
}

#mapLocations li {
    cursor: pointer;
	
}

div#mapLocations a:hover {
    color: red;
	text-decoration: none;
}

div#mapcontainer { position: relative; }

.map {
    position: absolute;
    top: 0px;
    left: 70px;
    width: 500px;
    height: 400px;
    border:#555555 2px solid;
}


.icon {
}

#mapLocations {
    position: absolute;
    top: 0px;
    left: 570px;
    width: 120px;
    height: 400px;
    border:#555555 2px solid;
    background-color: #000;
	color: #fff;
}



#mapLocationsTitle {
    border-bottom: solid 1px white;
    padding-bottom: 1em;
	margin-bottom: 1em;
    padding-top: 1em;
    background-color: #000;
	color: #fff;
    text-align: center;

}

/* news & publictions section */
.pressrelease { font-style:italic; }

/* supporters page*/
/*div.supportercolumn1 { width: 300px; float: left; }
div.supportercolumn2 { margin-left: 350px; width: 300px; }*/

div.supportercolumn1 { width: 240px; float: left; font-size: 12px; margin-right: 20px; }
div.supportercolumn2 { width: 240px; font-size: 12px; float: left;  margin-right: 20px; }
div.supportercolumn3 { width: 240px; font-size: 12px; float: left; }

/* membership donate page */

div#donate_error { font-weight: bold; }
.form_error { border: solid 1px yellow; color: #FF0000; font-weight: bold; text-align: center; }