/* @override http://guelphcivicsquare.com/css/screen.css */

/*************************************************
	Downtown Guelph Civic Square- September 2009 
		
	Site by Barking Dog Studios
	http://www.barkingdogstudios.com/

*************************************************/

/********** BASIC STYLES **********/
body {	
	font: 12px/16px Helvetica, Arial, sans-serif;
	background: #536386;
}

div,dl,dd,dt,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,table { 
	margin: 0;
	padding: 0;
}

:focus {
	outline: none !important;
}

a img {
	border: none;
	text-decoration: none !important;
}

.clear:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}


/********** LAYOUT **********/
#wrapper {
	position: relative;
	margin: 50px auto 0;
	padding: 16px;
	width: 928px;
	background: #fff;
}

#header {
	margin-bottom: 16px;
	height: 105px;
	overflow: hidden;
}

#header h2 {
	float: left;
	width: 333px;
	height: 105px;
	color: #fff;
	text-indent: -9999px;
	background: #82c14c url(../i/intro_text.gif) no-repeat 10px 50%;
}

#header h1#logo {
	float: left;
	margin: 0 16px;
	width: 213px;
	height: 105px;
	background: url(../i/guelph_logo_large.gif) no-repeat 0 50%;
	text-indent: -9999px;
}

#header img.header_right {
	float: right;
}

#sidebar {
	float: left;
	margin-right: 16px;
	width: 333px;
}

#sidebar img.sidebar_small {
	float: left;
	margin-right: 16px;
}

#sidebar ul#words {
	float: left;
	width: 157px;
	height: 134px;
	list-style: none;
	color: #fff;
	background: #808080;
}

#sidebar ul#words li {
	width: 157px;
	height: 134px;
	text-indent: -9999px;
}

#sidebar ul#words li.skate {
	background: url(../i/skate.gif) no-repeat 50% 50%;
}

#sidebar ul#words li.splash {
	background: url(../i/splash.gif) no-repeat 50% 50%;
}

#sidebar ul#words li.play {
	background: url(../i/play.gif) no-repeat 50% 50%;
}

#sidebar ul#words li.meet {
	background: url(../i/meet.gif) no-repeat 50% 50%;
}

#sidebar ul#words li.friends {
	background: url(../i/friends.gif) no-repeat 50% 50%;
}

#sidebar ul#words li.listen {
	background: url(../i/listen.gif) no-repeat 50% 50%;
}

#sidebar ul#words li.music {
	background: url(../i/music.gif) no-repeat 50% 50%;
}

#sidebar ul#words li.enjoy {
	background: url(../i/enjoy.gif) no-repeat 50% 50%;
}

#sidebar ul#words li.public_art {
	background: url(../i/public_art.gif) no-repeat 50% 50%;
}

#sidebar ul#words li.celebrate {
	background: url(../i/celebrate.gif) no-repeat 50% 50%;
}

#sidebar ul#words li.community {
	background: url(../i/community.gif) no-repeat 50% 50%;
}

#sidebar h3 {
	clear: both;
	float: left;
	margin: 16px 0;
	width: 333px;
	height: 136px;
	color: #fff;
	background: #2bb4f6 url(../i/feature_text.gif) no-repeat 50% 50%;
	text-indent: -9999px;
}

#content {
	float: left;
	width: 579px;
}

#content #feature_wrapper {
	margin-bottom: 16px;
	width: 579px;
	height: 286px;
	overflow: hidden;
}

#content img.content_bottom {
	float: left;
	margin-right: 16px;	
}

#content h3 {
	float: left;
	width: 216px;
	height: 98px;
	color: #fff;
	text-indent: -9999px;
}

#content h3 a {
	display: block;
	width: 216px;
	height: 98px;
	background: url(../i/donate_text.gif) no-repeat 50% 0;
}

#content h3 a:hover {
	display: block;
	width: 216px;
	height: 98px;
	background: url(../i/donate_text.gif) no-repeat 50% -98px;
}

#footer {
	clear: both;
	margin-top: 16px;
	padding-top: 10px;
}

#footer #supported_by {
	margin-bottom: 10px;
	width: 360px;
	height: 25px;
	background: url(../i/supported_by.gif) no-repeat 0 0;
	text-indent: -9999px;
}

#footer ul#sponsors {
	list-style: none;
	overflow: hidden;
}

#footer ul#sponsors li {
	float: left;
	margin-right: 10px;
}

#footer ul#sponsors li a {
	display: block;
	height: 50px;
	background: #efefef;
}

#credit {
	margin: 6px auto 0;
	padding-left: 16px;
	width: 960px;
	color: #efefef;
	font-size: 11px;
}

#credit a {
	color: #efefef;
	text-decoration: none;
}

#credit a:hover {
	color: #ddd;
	text-decoration: underline;
}


/********** POP-UP FORM **********/
#form_popup {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 999 !important;
	width: 579px;
	height: 521px;
	background: #7fcae4;
	overflow: hidden;
}

#form_popup h4 {
	position: relative;
	width: 579px;
	height: 105px;
	background: #4393af url(../i/donate_popup_text.gif) no-repeat 50% 50%;
	text-indent: -9999px;
}

#form_popup h4 a.mail {
	position: absolute;
	right: 43px;
	bottom: 24px;
	display: block;
	width: 205px;
	height: 20px;
}

#form_popup a.close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 999;
	display: block;
	width: 30px;
	height: 24px;
	background: url(../i/close_button.gif) no-repeat 0 0;
	text-indent: -9999px;
}

#form_popup form {
	margin: 16px auto;
	width: 547px;
}

#form_popup ul.gcs_list {
	list-style: none;
	overflow: hidden;
}

#form_popup ul.gcs_list li {
	margin-bottom: 4px;
	overflow: hidden;
}

#form_popup ul.gcs_list li label {
	display: block;
	float: left;
	margin-right: 8px;
	padding-top: 4px;
	width: 115px;
	text-align: right;
	font-size: 13px;
}


#form_popup ul.gcs_list li input#gcs_fname {
	margin-right: 4px;
	width: 127px !important;
}

#form_popup ul.gcs_list li input#gcs_lname {
	width: 127px !important;
}

#form_popup ul.gcs_list li input#gcs_amount_alt {
	margin-right: 4px;
	width: 107px !important;
}

#form_popup ul.gcs_list li input[type='text'] {
	padding: 3px 6px 2px;
	width: 272px;
	height: 16px;
	border: 1px solid #060607;
}

#form_popup ul.gcs_list li input[type='text']:focus {
	background: #dff7ff;
}

#form_popup ul.gcs_list li input#gcs_city {
	margin-right: 4px;
	width: 132px !important;
}

#form_popup ul.gcs_list li select {
	width: 136px !important;
}

#form_popup ul.gcs_list li input#gcs_amount {
	margin-right: 4px;
	width: 132px !important;
}

#form_popup ul.gcs_list li input#gcs_acknow_names {
	margin: 0 4px 6px 120px;
	width: 272px !important;
}

#form_popup ul.gcs_list li input#gcs_postalcode {
	width: 132px !important;
}

#form_popup ul.gcs_list li.gcs_5 {
	margin-bottom: 14px;
}

#form_popup ul.gcs_list li.gcs_6 {
	padding: 0 0 4px 120px;
}

#form_popup ul.gcs_list li.gcs_6 label {
	margin-left: -120px;
}

#form_popup ul.gcs_list li.gcs_6 input[type='radio'] {
	float: left;
	margin: 0 4px 0 0;
}

#form_popup ul.gcs_list li.gcs_6 span {
	display: block;
	float: left;
	margin-right: 10px;
	text-align: left;
	font-size: 14px;
}

#form_popup ul.gcs_list li.gcs_6 p {
	margin-bottom: 6px;
	padding-top: 1px;
	font-size: 20px;
}

#form_popup ul.gcs_list li.gcs_7 label {
	float: left;
	margin-left: 120px;
	width: 160px;
}

#form_popup ul.gcs_list li.gcs_8 {
	margin-top: 8px;
	padding-top: 2px;
}

#form_popup ul.gcs_list li.gcs_8 label {
	float: left;
	padding: 0;
	width: 350px;
	text-align: left;
}

#form_popup ul.gcs_list li.gcs_8 input[type='radio'] {
	clear: left;
	float: left;
	margin: 0 4px 0 50px;
}

#form_popup ul.gcs_list li.gcs_8 span {
	display: block;
}

#form_popup ul.gcs_list li.gcs_9 label {
	width: 230px;
}

#form_popup ul.gcs_list li.gcs_9 {
	margin: 10px 0 0 170px;
	width: 380px;
}