/* School Aid Network (C) F1design 2007 */

* { margin:0; padding:0; }
img, #catfish, #catfish_inner { behavior: url(/iepngfix.htc); }


body {
	background: url(/gfx/header_bg.jpg) top left repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.8em;
	text-align:center;
	color:#666;
}

img{
 border:0;
}

img.left{
	margin-right:10px;
}

img.right{
	margin-left:10px;
}

p { margin-bottom:10px; }
ul {list-style-type: square;}

a 				{color: #4787C7; text-decoration:none;}
a:visited 	{color: #4787C7;}
a:hover 	{text-decoration:underline;}

.active{background-color:#ffd;}

a.xbutton	{
	color:#000;
	padding:1px;
	background:#fff url(/gfx/gbottom.png) repeat-x bottom left;
	_background:#fff;
	border:1px solid #666;
	text-align:center;
	margin:5px;
}

a.button:hover {text-decoration:none;}

h1, h2, h3 { 
	color: #4787C7; 
	font-weight:lighter;
	font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
}

h1{ 
	font-size:2.6em; 
	letter-spacing:-1px;
	margin-bottom:20px;
}

h2 {font-size:1.4em;font-weight:light;margin-bottom:20px;}

#wrapper {
	margin:0 auto;
	width:1000px;
}

#header {
	background: url(/gfx/header.jpg) bottom left no-repeat;
	height:142px;
	margin-left:-13px;
	position:relative;
}

#f1g {
	position:absolute;
	top:20px;
	right:13px;
	width:150px;
	height:78px;
}

#f1g a {display:none;}
#header h1 {display:none;}

#nav1 {
	color:#bbb;
	height:25px;
	margin-right:10px;
	padding-top:5px;
	text-align:right;
}

#nav1 a { color:#fff; }

#nav1 a:hover { text-decoration:underline; }
#nav1 a#logout-link:hover {
	text-decoration:none;
	background-color:#F66;
}
#nav1 ul { 
	float:right;
	list-style: none;
}

#nav1 ul li {
	display:block;
	float:left;
	padding-right:0.3em;
}

#nav1 #ident {float:left;color:#fff;}

#content_wrapper {
	clear:both;
	margin-top:10px;
	text-align:left;
}

#content {
	background: url(gfx/content_bg.jpg) top left ;
	float:left;
	width:782px;
}

#content ul				{list-style-position: outside; margin-left:20px;margin-bottom:20px;}
#content ul li			{padding-bottom:5px;}

#content_header {
	background: url(/gfx/content_head.jpg) top left;
	font-size:0;
	height:10px;
}

#menu_inner			{padding:10px 20px;}
#content_inner		{padding:20px; position:relative;min-height:400px;}

#content_inner_1 {
	float:left;
	padding-bottom:20px;
	text-align:left;
	width:340px;
}

#content_inner_2 {
	float:left;
	margin-right:20px;
	padding-bottom:20px;
	width:340px;
}

#content_inner_2 ul { margin:0 20px 20px 20px;}

#content_inner_2 ul li { margin-bottom:5px; }

#content_footer {
	background: url(/gfx/content_foot.jpg) no-repeat top left;
	clear:left;
	font-size:0;
	height:9px;
}

#content_images {
	
}

#menu {
	background: url(/gfx/blue_shadow.gif) repeat-x top left #4787c7;
	float:right;
	margin:-12px -2px 0px 5px;
	width:210px;
	color:#fff;
}

#menu ul 	{margin-left:20px;margin-bottom:20px;}
#menu h1, 
#menu h2 	{color:#fff;margin-bottom:10px;}
#menu h1 	{font-size:1.8em;border-bottom:1px solid #fff;}
#menu h3	{font-size:1.2em;font-weight:bold;}
#menu a 		{color:#fff;}

#menu_header {
	font-size:0;
	height:10px;
}

#menu_footer {
	font-size:0;
	height:9px;
}

#map {border:1px solid #CCC;}

#footer {
	clear:left;
	margin-top:5px;
	padding-top:5px;
	text-align:left;
}
#catfish {
	background:url(/gfx/catfish.png) top left;
	_background:url(/gfx/catfish_ie6.gif) top left;
	height:150px;
	text-align:left;
	color:#777;
	padding:0;
}

#catfish #catfish_inner {
	background:url(/gfx/f1logo.png) no-repeat top left;
	_background:url(/gfx/f1logo_ie6.gif) no-repeat top left;
	margin:0;
	height:150px;
}

#catfish_inner h1 {
	color:#609;
	font-size:20px;
	margin-bottom:8px;
}

#catfish_inner a {
	color:#609;
	font-weight:bold;
}

#catfish_content {
	padding-top:50px;
	padding-left:300px;
}

#events_list {
	padding-top:20px;
}

table.events_calendar 				{ border:1px solid #4787C7; width:100%;margin:0;padding:0;}
table.events_calendar  td				{ margin:0;padding:0;vertical-align:top;background:#fff;width:14%;}
table.events_calendar  tbody td	a			{ color:#666!important;}
table.events_calendar thead			{ background:#4787C7; color:#fff; }
table.events_calendar thead td			{ padding:5px;background:url(/gfx/calendar_gradient_blue.gif) repeat-x bottom left; }

.month_nav 							{ text-align:center; font-weight:bold; font-size:1.2em; border-bottom:1px solid #4787C7; }
.month_nav a:link,
.month_nav a:visited					{ color:#fff; }

.events_calendar td.hasEvents		{ background:url(/gfx/calendar_gradient_pink.gif) repeat-x bottom left #FFC299; }

.events_calendar td.spacer, 
.events_calendar td.day, 
.events_calendar td.month			{ border-right:1px solid #AAC7E5; border-bottom:1px solid #AAC7E5; }
.events_calendar td.month			{ text-align:center; vertical-align:middle;}
.events_calendar td.today				{ background:url(/gfx/calendar_gradient_lightblue.gif) repeat-x bottom left #AAC7E5; color:#fff; font-weight:bold; }

.events_calendar td.mini 	{border-right:1px solid #AAC7E5; border-bottom:1px solid #AAC7E5;text-align:center; vertical-align:middle;padding:3px;}

/* Form styles */
label {
	float:left;
	clear:left;
	width:130px;
	text-align:right;
	margin-right:20px;
	margin-top:4px;
	font-size:12px;
}
input, textarea, select{
	font-family: Arial, Helvetica, sans serif;
	font-weight:lighter;
	border:1px solid #96A19D;
	background:#fcfcfc url(/cpanel/gfx/fadedark.png) repeat-x bottom left;
	_background:#fcfcfc;
	float:left;
	width:170px;
	margin-top:2px;
	margin-right:2px;
	margin-bottom:2px;
	font-size:15px;
	padding:2px 0;
	color:#666;
}

form iframe {margin-top:2px;}

input.submit,
input#submit,
a.button {
	padding:0;
	background:#9d9 url(/gfx/gbottom.png) repeat-x bottom left;
	_background:#9d9;
	border:1px solid #78AF78;
	color:#fff;
}

a.button{
	padding:2px 4px;
	display:block;
	margin-bottom:10px;
	width:150px;
	text-align:center;
}

a.button:hover{
	background-color: #DFD;
	color:#333
}

#menu a.button{
	background:#9d9 url(/gfx/gbottom.png) repeat-x bottom left;
	_background:#9d9;
	border:1px solid #78AF78;
	color:#fff;
}

#menu a.button:hover{
	border-color:#8FC7FF;
	background-color: #68ACEF;
	color:#fff;
}

input.heading {
	color: #4787C7; 
	font-weight:normal;
	font-size:2.1em;
	width:500px;
}
textarea.paragraph{
	width:500px;
	color:#666;
}

form .big {font-size:20px;}
form .wide {width:500px;}
input.checkbox {background:transparent;}

input.amount{
	width:75px;
	height:15px;
	clear:none;
	float:none;
	margin:-2px 0px;
	_margin:0;
}

.checkoptions input.checkbox {
	width:auto;
	margin-top:0px; /* targets all browsers */
	*margin-top:-2px; /* targets IE6 and 7 */
}

.checkoptions {
	float:left;
	width:150px;
	margin-top:5px;
}
.checkoptions * {
	border:0;
	vertical-align:middle;
}
.checkoptions div {clear:left;}

#search_form{float:right; width:100%;}

#search_form label {
	float:left;
	clear:left;
	width:auto;
	text-align:right;
	margin:5px;
	margin-top:5px;
}

#search_form input, #search_form textarea {
	border:1px solid #96A19D;
	float:left;
	clear:none;
	width:45px;
	margin-top:5px;
	margin:5px;
}

#search_form input.button {
	width:auto;
}

#regform {padding-bottom:20px;}

/* Misc */

.message {
	border:1px solid;
	color:#009933;
	padding:10px;
}

.clickme {
	text-decoration:underline;
}

/* applied to unfilled required form fields onsubmit */
.warn {
	background:#FFF6CF url(/gfx/gbottom.png) repeat-x bottom left;
	_background:#FFF6CF;
	color:#666;
}

.clearance {clear:both;margin:0;padding:0;height:0;}

/* information boxes */
.information {
	background:#eee url(/gfx/gbottom.png) repeat-x bottom left;
	_background:#eee;
	border:1px solid #ccc;
	color:#999;
	padding:10px;
	margin-bottom:20px;
	text-align:justify;
}
.information strong 	{font-size:120%;}
.information a			{color:#8BB5DF;}

.bad 									{background:#fee url(/gfx/gbottom.png) repeat-x bottom left;_background:#fee;color:#F66;}
.bad a								{color:#f00;}
.good 								{background:#dfd url(/gfx/gbottom.png) repeat-x bottom left;_background:#dfd;color:#83BF83;}
.good a								{color:#54BF53;}
.important						{background:#EFEFEF url(/gfx/gbottom.png) repeat-x bottom left;_background:#EFE3C2;}

.notify
{
	display:none;
	position: fixed;
	_position: absolute;
	top:0; 
	width:100%; 
	left:0; 
	z-index:99; 
	text-align:center;  
	padding:0;
	margin:0;
	padding-top: 10px;
	height: 30px;
	font-size:18px;
	height:2em;
}

/* panel styles */
div.panel{
	margin-left:-1px;
	background: #dfd url(/gfx/gbottom.png) repeat-x bottom left;
	_background: #dfd;
	margin-bottom:20px;
	padding-bottom:8px;
} 
.panel h2{
	background: #9d9 url(/gfx/gbottom.png) repeat-x bottom left;
	_background: #9d9;
	color: #fff;
	padding:4px;
	font-size:1.2em;
	font-weight:bold;
	margin-bottom:10px;
}

.panel h3 {
	margin-bottom:10px;
	color:#666;
	font-weight:bold;
}

.panel h2 a {color:#fff;}
.panel p {padding:3px;}
.panel p.information{
	margin:10px;
	background:#fff url(/gfx/gbottom.png) repeat-x bottom left;_background:#fff;
	border-color:#D1EFD1;
	padding:10px;
}

.panel input, 
.panel textarea,
.panel select {
	border:1px solid #A8CFA8;
}

/* boxoptions */
#content .boxoptions ul, #content .boxoptions li{
	list-style-type:none;
	margin:0;
	padding:0;
}

#content .boxoptions li {
	float:left;
	width:200px;
	height:130px;
	padding:0px;
	margin:0 34px 34px 0;
	position:relative;
}

.icon-events {background:url(/gfx/icon/events.png) no-repeat top left;}
.icon-ideas {background:url(/gfx/icon/ideas.png) no-repeat top left;}
.icon-needs {background:url(/gfx/icon/needs.png) no-repeat top left;}
.icon-volunteers {background:url(/gfx/icon/volunteers.png) no-repeat top left;}
.icon-projects {background:url(/gfx/icon/projects.png) no-repeat top left;}
.icon-links {background:url(/gfx/icon/links.png) no-repeat top left;}
.icon-resources {background:url(/gfx/icon/resources.png) no-repeat top left;}

#content .boxoptions li a{
	width:240px;
	text-align:center;
	position:absolute;
	bottom:-25px;
	left:-15px;
	font-size:1.6em;
}
#content .boxoptions li a:hover{
	text-decoration:none;
	color:#000;
}

#content .boxoptions li.active {background:url(/gfx/boxoptions_bg.gif) repeat-x bottom left;}


ul.buttonlist{
	list-style-type:none;
	margin:0 !important;
	margin-bottom:20px !important;
}

ul.buttonlist li{
	border:1px solid #ccc;
	margin:auto;
	margin-bottom:4px;
	padding:5px;
	width:70%;
	text-align:center;
}

/* tabular lists */

#content ul.tabular, ul.tabular li{
	list-style-type:none;
	margin:0;
	padding:0;
}
#content ul.tabular li {
		clear:left;
		float:left;
		width:100%;
		padding:4px 0px;
		xmargin-bottom:5px;
		border-bottom:1px dotted #ccc;
}
#content ul.tabular li span{
	float:left;
	width:150px;
	margin:0;
	padding:0;
}
#content ul.tabular li span.small {width:90px;}
#content ul.tabular li span.tiny {width:50px;}
#content ul.tabular li span.right {text-align:right;}

a.icon {
	float:right;
	padding-left:20px;
	padding-top:3px;
	text-transform:uppercase;
	font-size:9px;
	height:18px;
	width:20px;
}
.delete{background:url(/gfx/icon/delete.gif) no-repeat top left;}
.pledges{background:url(/gfx/icon/coins.gif) no-repeat top left;}
.tick{background:url(/gfx/icon/tick.gif) no-repeat top left;}
.clock{background:url(/gfx/icon/clock.gif) no-repeat top left;}

/*Project Progress Bar*/

h2.progress{
	font-family:arial, hevetica, sans-serif;
	float:right;
	width:150px;
	padding:10px;
	margin-left:10px;
	margin-bottom:10px;
	border:1px solid #dedede;
	color:#f33;
	text-align:center;
	text-transform:uppercase;
	font-size:10px;
	font-weight:normal;
	letter-spacing:2px;
	background: url(/gfx/gbottom.png) repeat-x bottom left #feefef;
	_background:#feefef;
}

.progress strong{
	font-size:30px;
	letter-spacing:-2px;
}

span.bar{
	width:90%;
	display:block;
	border:1px solid #999;
	background-color:#fff;
	height:15px;
	margin:auto;
	padding:2px;
	text-align:right;
	color:#aaa;
	font-size:11px;
}

span.foo {
	background-color:#f33;
	color:#fff;
	text-align:center;
	font-size:11px;
	display:block;
	height:100%;
	width:100%;
	float:left;
}

/* Blocks */

div.block{
	float:left;
	padding:20px;
	background:url(/gfx/gbottom.png) repeat-x bottom left #4787c7;
	_background:#4787c7;
	color:#fff;
	font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size:14px;
	width:180px;
}

div.alt{background:url(/gfx/gbottom.png) repeat-x bottom left #9d9;_background:#9d9;}

div.block a {color:#fff!important;}

ul#myoptions{

}

ul#myoptions li{
	margin-bottom:5px;
}

ul#myoptions ul{
	margin:10px 0px 0px 30px;
}

/* Menu Colour Styling */

#menu_options {
	
	background-color:#14314F;
	margin-left:-10px;
	margin-right:-10px;
	padding:20px;
	margin-bottom:20px;
}

#menu_calendar {
	
	background-color:#7DAEDF;
	margin-left:-10px;
	margin-right:-10px;
	padding:15px;
	margin-bottom:20px;
	padding-top:10px;
	
}


/*  Resources  */


.resource {
	border:1px solid #ccc;
	background:#eee;
	padding:20px;
	margin-bottom:10px
}

.resource a {
	
	font-size:130%;
	
}