@charset "UTF-8";
.alignleft {
	clear: right;
	float: left;
}
/* Design, Layout and Programming by Andrew Y. Ames • http://andrewyames.com */

body {padding:0; margin:0  0 180px 0; background:url(../_images/Sand.gif) 0 0 repeat; font-family:Helvetica, Arial, sans-serif;}

#container {position:relative; margin:0 auto 0 auto; width:800px;}

#left {
	position:absolute;
	left:24px;
	width:366px;
	top:11px;
	z-index:0;
}
#left img {
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 0;
	padding-bottom: 2px;
}


a.redpurple {text-decoration:underline; color:#8723D4;}
a.orange 	{text-decoration:underline; color:#F7AD0E;}
a.redorange {text-decoration:underline; color:#ED7810;}
a.red 		{text-decoration:underline; color:#CE1D1D;}
a.pink 		{text-decoration:underline; color:#F64365;}
a.purple 	{text-decoration:underline; color:#5416D1;}
a.grey 		{text-decoration:underline; color:#A1A1A1;}

#left h3 a.redpurple, #left h3 a.orange, #left h3 a.redorange, #left h3 a.red, #left h3 a.pink, #left h3 a.purple, #left h3 a.grey {color:#666666; text-decoration:none;}

a:hover.redpurple,#left h3 a:hover.redpurple 	{text-decoration:none; background-color:#8723D4; color:#FFFFFF;}
a:hover.orange, #left h3 a:hover.orange			{text-decoration:none; background-color:#F7AD0E; color:#FFFFFF;}
a:hover.redorange, #left h3 a:hover.redorange	{text-decoration:none; background-color:#ED7810; color:#FFFFFF;}
a:hover.red, #left h3 a:hover.red				{text-decoration:none; background-color:#CE1D1D; color:#FFFFFF;}
a:hover.pink, #left h3 a:hover.pink				{text-decoration:none; background-color:#F64365; color:#FFFFFF;}
a:hover.purple, #left h3 a:hover.purple			{text-decoration:none; background-color:#5416D1; color:#FFFFFF;}
a:hover.grey, #left h3 a:hover.grey				{text-decoration:none; background-color:#A1A1A1; color:#FFFFFF;}

#mission {
	position:relative;
	width:273px;
	height:390px;
	z-index:0;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#mission.redpurple 	{background:url(../_images/misson_redpurple.gif) 0 0 no-repeat;}
#mission.orange 	{background:url(../_images/misson_orange.gif) 0 0 no-repeat;}
#mission.redorange 	{background:url(../_images/misson_redorange.gif) 0 0 no-repeat;}
#mission.red 		{background:url(../_images/misson_red.gif) 0 0 no-repeat;}
#mission.pink 		{background:url(../_images/misson_pink.gif) 0 0 no-repeat;}
#mission.purple 	{background:url(../_images/misson_purple.gif) 0 0 no-repeat;}
#mission.grey 		{background:url(../_images/misson_grey.gif) 0 0 no-repeat;}

#cityscape {position:fixed; bottom:0; width:100%; height:180px; z-index:2;}
#cityscape.redpurple 	{background:url(../_images/cityscape_redpurple.gif) center repeat-x;}
#cityscape.orange 		{background:url(../_images/cityscape_orange.gif) center repeat-x;}
#cityscape.redorange 	{background:url(../_images/cityscape_redorange.gif) center repeat-x;}
#cityscape.red 			{background:url(../_images/cityscape_red.gif) center repeat-x;}
#cityscape.pink 		{background:url(../_images/cityscape_pink.gif) center repeat-x;}
#cityscape.purple 		{background:url(../_images/cityscape_purple.gif) center repeat-x;}
#cityscape.grey 		{background:url(../_images/cityscape_grey.gif) center repeat-x;}

#right {position:absolute; left:407px; width:372px; top:15px; }
#logo {position:fixed; width:366px; height:67px; margin:0 3px 0 3px; z-index:3;}
#sandbox {position:fixed; width:366px; height:288px;  margin:0 3px 0 3px;}
#sandboxlogo {position:absolute; bottom:0; width:366px; height:67px; }


/* main nav */
#nav {position:fixed; top:85px; width:366px; height:18px; background:url(../_images/nav.png) 0 0 no-repeat; margin:5px 3px 10px 3px; z-index:3; }
#nav.sandbox {position:fixed; top:317px;}

#nav li, #nav a {display:block; height:18px;}
#nav li {position:absolute; list-style:none; margin:0; padding:0;}

#n_about 		{left:0; width:35px;}
#n_projects 	{left:43px; width:48px;}
#n_people 		{left:100px; width:38px;}
#n_getinvolved 	{left:146px; width:71px;}
#n_support 		{left:224px; width:48px;}
#n_press 		{left:278px; width:33px;}
#n_contact 		{left:319px; width:46px;}

#n_about a:hover		{background:transparent url(../_images/nav.png) 0 -20px no-repeat;}
#n_projects a:hover 	{background:transparent url(../_images/nav.png) -43px -20px no-repeat;}
#n_people a:hover 		{background:transparent url(../_images/nav.png) -100px -20px no-repeat;}
#n_getinvolved a:hover 	{background:transparent url(../_images/nav.png) -146px -20px no-repeat;}
#n_support a:hover 		{background:transparent url(../_images/nav.png) -224px -20px no-repeat;}
#n_press a:hover 		{background:transparent url(../_images/nav.png) -278px -20px no-repeat;}
#n_contact a:hover 		{background:transparent url(../_images/nav.png) -319px -20px no-repeat;}

#nav a {font:1px arial; text-decoration:none; color:#E6E6E6; text-align:left;}
.hidelink {color:#E6E6E6; font-size:1px; }
* html .hidelink {display:none;}

/* end main nav */


#boxes { position:fixed; width:372px; margin:100px 0 0 0; z-index:2;}
#boxesfloat { position:relative; width:372px; margin:100px 0 0 0; z-index:2;}



#boxes.sandbox {margin:337px 0 0 0; z-index:2;}


#subnav { position:fixed; float:left; width:366px; background:url(../_images/subnavBG.png) 0 0 repeat; margin:3px 3px 6px 3px; font-size:13px; z-index:3;}

#subnav a {font:11px Arial, Helvetica, sans-serif; font-weight:normal; color:#666666; text-decoration:none; padding:2px 2px 0 2px;}
#subnav a:hover.redpurple 	{text-decoration:none; background-color:#8723D4; color:#FFFFFF;}
#subnav a:hover.orange		{text-decoration:none; background-color:#F7AD0E; color:#FFFFFF;}
#subnav a:hover.redorange 	{text-decoration:none; background-color:#ED7810; color:#FFFFFF;}
#subnav a:hover.red 		{text-decoration:none; background-color:#CE1D1D; color:#FFFFFF;}
#subnav a:hover.pink 		{text-decoration:none; background-color:#F64365; color:#FFFFFF;}
#subnav a:hover.purple 		{text-decoration:none; background-color:#5416D1; color:#FFFFFF;}
#subnav a:hover.grey 		{text-decoration:none; background-color:#A1A1A1; color:#FFFFFF;}


#minibox {
	float:left;
	width:118px;
	min-height:142px;
	margin:3px;
	background: url(../_images/subnavBG.png) 0 0 repeat;
}

#minibox.spantwo {width:242px;}
#minibox.heighttwo {
	height: 290px;
}
#minibox.floatleft {
	clear: right;
	float: left;
}
#minibox.spanthree {width:366px; min-height:10px;}

#minibox h3, #subnav h3 {padding:2px 2px 0 2px; margin:0; color: #666666; font-size:14px;}
#minibox p, #subnav p {padding:2px 2px 8px 2px; line-height:1.65em;}
#minibox h3 + p, #subnav h3 + p {padding:0 2px 8px 2px; line-height:1.65em;}
#minibox p.note {font-size:11px; line-height:1.25em;}
#minibox h4 {padding:0 2px 3px 2px; margin:0;}

#minibox ul {margin:0; padding:0 2px 8px 2px;}
#minibox li, #subnav li {margin:0 0 4px 0; list-style-type:decimal; display:inline;}

#minibox img {border:none;}

.center {margin:0 auto 0 auto;}
.photoleft {margin:2px 20px 10px 0;}



h1 {margin:0 0 20px 0; font-size:24px;}
h2 {margin:10px 0 10px 0; font-size:16px; color:#666666; font-weight:normal;}
h3 {margin:10px 0 0 0; font-size:16px; color:#666666; font-weight:normal;}
h4 {font-size:11px; color: #999999; font-weight:normal;}
h4:hover {color:#333333;}
#left h2 {line-height:1.5em;}

p + h3 {margin:20px 0 0 0;}

p {font:12px Helvetica, sans-serif; margin:0 0 10px 0; line-height:1.25em;}
.note {font-size:11px; line-height:.75em;}

li {font:12px Helvetica, sans-serif; margin:0 0 2px 0; line-height:1.25em; list-style-type: square;}

form, script {padding:0; margin:0;}

/* IE hacks */

* html #sandboxlogo {top:221px; left:3px;}
* html #nav {position:absolute; top:65px;}
* html #nav.sandbox {position:relative; top:5px;}
* html #boxes {width:375px; margin:165px 0 0 0;}
* html #boxesfloat {width:375px; margin:165px 0 0 0;}
* html #boxes.sandbox {margin:30px 0 0 0;}
* html #subnav { position:relative; top:35px; margin:0; z-index:3;}
* html #minibox {margin:3px 6px 3px 0;}
.caption {
	font-size: 10px;
	line-height: 11px;
}

.addthis_button_compact {
	font-family: Helvetica, Geneva, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #F30;
	text-transform: uppercase;
}#minibox.floatright {
	float: right;
}
.paleText {
	color: #999;
	font-style: italic;
}
#happening {
	width: 355px;
	background-color: #000;
	color: #CCC;
	padding: 8px;
	margin-top: -3px;
}
#happening strong {
	color: #CF0;
	letter-spacing: .1em;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 10px;
}
#happening img {
	padding-bottom: 10px;
}
#happening a {
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
}
#happening a:hover {
	color: #CF0;
}
a img {
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}