@import url(reset.css);

html {
	background: #fff url(images/background.png) top center repeat-y;
	height: 100%;
}
body {
	width: 862px;
	margin: 0 auto;
	font: .7em Verdana, Arial, sans-serif;
	line-height: 1.7em;
	color: #78939C;
	position: relative;
}
a {
	text-decoration: underline;
	color: #4175BE;
}
a:hover {
	text-decoration: none;
	color: #7DA9F6;
}
#quote {
	position: absolute; top: 0; right: 0;
	margin: 0;
	width: 600px;   /* Zoom-control on the Flash quotes. */
	height: 165px;
}



/* LOGO */

h1#logo {
	padding: 21px 0 13px 25px;
	width: 165px; height: 131px;
	background: url(images/art180.gif) 25px 21px no-repeat;
	text-indent: -5000px;
}
h1#logo a {
	display: block;
	width: 100%; height: 100%;
}



p#pitch {
	clear: right;
	width: 862px; height: 28px;
	background: url(images/pitch.png) top left no-repeat;
	text-indent: -5000px;
	margin-bottom: 19px;
}





/* SITE NAV */

ul#nav {
	width: 133px;
	margin: -5px 20px 0 25px;
	float: left;
}
ul#nav li {
	border-top: 1px solid #d1d1d1;
	text-indent: 5px;
	font-size: 1.1em;
	line-height: 2.1em;
}
ul#nav li.first {border: 0;}

ul#nav li a {text-decoration: none;}
ul#nav li a:hover {text-decoration: underline;}
#fb_twit {
	border-bottom: 1px solid #d1d1d1;
	margin-bottom: 15px;
	padding-bottom: 15px;
}
	/*Constant Contact*/
h2#join_email {
	text-indent: -5000px;
	background: url(images/JoinEmail.png) 0 2em no-repeat;
	width: 111px;
	height: 19px;
	padding: 2em 0 0 0;
	margin: 0;
}
#cc_form {
	padding-bottom: 5px;
	border-bottom: 1px solid #d1d1d1;
}
#cc_form input.text {
	width: 125px;
	border: 1px solid #c2d99e;
	padding: .3em .1em;
	background-color: #fff;
	color: #777;
}

/*Facebook*/

h2#facebook {
	text-indent: -5000px;
	background: url(images/facebook.png) 0 2em no-repeat;
	width: 111px;
	height: 50px;
	padding: 2em 0 0 0;
	margin: 0;
}


/* MAIN FULL SPAN */

#main_fs {
	width: 660px;
	margin-top: 2px;
	margin-right: 5px;
	float: left;
}



/* MAIN */

#main {
	width: 489px;
	margin-top: 2px;
	float: left;
}

	/* Entry page, with large photo above two columns */
#main .graf {
	width: 244px;
	margin-top: 15px;
	float: left;
}

h2 {
	height: 21px;
	text-indent: -5000px;
	margin-bottom: 4px;
}
#main .graf h2#alittleaboutus {background: url(images/alittleaboutus.png) top left no-repeat;}
#main .graf h2#whatshappening {background: url(images/whatshappening.png) top left no-repeat;}







#main .graf h2#wewonaprize {
	background: url(images/wewonaprize.png) top left no-repeat;
}
#main  h2#somethingtodo {background: url(images/somethingtodo.png) top left no-repeat;}


#main .graf p {margin-right: 2.5em;}

	/* Inside pages, with optional floated image */
#main img.inline {
	float: right;
	margin: 0 0 1em 1em;
}

	/* Gift shop images, links to detail pages */
#main a img.inline {
	padding: 5px;
	border: 3px solid #fff;
}
#main a:hover img.inline {
	border: 3px dotted #d2e9ae;
}

#main h2#aboutart180 {background: url(images/main_aboutart180.png) top left no-repeat;}
#main h2#programs {background: url(images/main_programs.png) top left no-repeat;}
#main h2#partners {background: url(images/main_partners.png) top left no-repeat;}
#main h2#events {background: url(images/main_events.png) top left no-repeat;}
#main h2#donate {background: url(images/main_donate.png) top left no-repeat;}
#main h2#volunteer {background: url(images/main_volunteer.png) top left no-repeat;}
#main h2#forparents {background: url(images/main_forparents.png) top left no-repeat;}
#main h2#giftshop {background: url(images/main_giftshop.png) top left no-repeat;}
#main h2#gallery {background: url(images/main_gallery.png) top left no-repeat;}
#main h2#calendar {background: url(images/main_calendar.png) top left no-repeat;}
#main h2#FAQ {background: url(images/main_FAQ.png) top left no-repeat;}
#main h2#news {background: url(images/main_news.png) top left no-repeat;}
#main h2#friends {background: url(images/main_friends.png) top left no-repeat;}
#main h2#contact {background: url(images/main_contact.png) top left no-repeat;}
#main h2#180_blog {background: url(images/art180Blog.png) top left no-repeat;}
#main h2#change {background: url(images/programs/change_ten_title.gif) top left no-repeat;}
#main h2#q {background: url(images/main_q.png) top left no-repeat;}
#sidebar h2#ourvalues {background: url(images/ourvalues.png) top left no-repeat;}
#sidebar h2#fewmore {background: url(images/a_few_more.png) top left no-repeat;}

h3 {
	margin: 2em 0 .1em 0;
	font-size: 1.1em;
	line-height: 1.2em;
	color: #77BC08;
}
h4 {
	margin: 0em 0 .1em 0;
	font-size: 1em;
	line-height: 1.2em;
	color: #8EA4AB;
	font-weight: bold;
}
h3.first {
	margin-top: 0;
}
p {
	margin-bottom: 1em;
}
hr {
	display: none;
}
.hr {
	border-top: 1px dotted #ccc;
	margin: 2em 0 1em 0;
}

	/* Volunteer form */
#vol_form input.text, #vol_form textarea {
	border: 1px solid #c2d99e;
	margin: 0 0 1em 0;
}
#vol_form input.text {
	height: 1.7em;
}
#vol_form div {
	margin: 0px 0px 10px 0px;
}
#vol_form ul {
	list-style-type: none;
	margin: .5em 0 0 2em;
}





/* SIDEBAR */

#sidebar {
	float: left;
	width: 165px;
	margin-left: 18px;
	margin-right: 5px;
}
#sidebar ul li a {
	display: block;
	text-indent: -5000px;
	padding-bottom: 10px;
	border-bottom: 1px solid #d1d1d1;
	margin-bottom: 10px;
}
#sidebar #artkarma a {
	background: url(images/art-karma-bus-card.gif) no-repeat left top;
	width: 150px;
	height: 259px;
}
#main .artkarmalist {
	list-style-type: disc;
	list-style-position: inside;
}
#sidebar #buytickets a {
	background: url(images/buy-tickets-150x44.png) no-repeat left top;
	width: 150px;
	height: 44px;
}
#sidebar #donate a {
	background: url(images/donatebutton-150x68.png) no-repeat left top;
	width: 150px;
	height: 68px;
}
#sidebar #tenthings a {
	background: url(images/tenthings.png) top left no-repeat; 
	width: 150px; height: 150px;
}
#sidebar #blog a {
	background: url(images/art180Blog.gif) top left no-repeat; 
	width: 150px; height: 150px;
}
#sidebar #support a {
	background: url(images/supportthecause.png) top left no-repeat; 
	width: 148px; height: 74px;
}
#sidebar #store a {
	background: url(images/visitthestore.png) top left no-repeat; 
	width: 146px; height: 180px;
	border-bottom: 0;
}
#sidebar #vaarts a {
	background: url(images/vaarts.png) top left no-repeat; 
	width: 146px; height: 73px;
	border-bottom: 0;
}
#sidebar p {
	padding-right: 1em;
}





/* FOOTER */

#footer {
	clear: left;
	padding: 5em 1em 10em 1em;
	text-align: center;
	font-weight: normal;
}