﻿
/* ---------->>> GLOBAL <<<-----------*/

* { margin: 0; padding: 0; }

body {
	background: #FEC963 url(bgyellow.gif);
	color:#101010;
 	font: .8em Arial, Helvetica, sans-serif;
   }

h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { 
	padding:0;
	margin:0; 
	}

li, dd { margin-left:5%; }
fieldset { padding: .5em; }

/* ---------->>> DIVS <<<-----------*/

#wrapper { 
 margin: 0 auto;
 width: 950px;
 background: #fff url(2col_bg.gif) repeat-y;
 border: 4px solid #572600;
}

#faux { 
	margin: 0 auto; 
	width: 950px; }

#leftcolumn { 
 display: inline;
 color: #FDB825;
 margin: 0px;
 padding-left: 0px;
 width: 173px;
 float: left;
}
#header {
 background: #fdb825 url(topcurve.gif) bottom left no-repeat;
 float: right;
 padding: 0px;
 width: 777px;
 height: 167px;
 display: inline;
 position: relative;
}
#rightcolumn { 
 float: left;
 color: #101010;
 padding: 0px;
 padding-left: 60px;
 width: 490px;
 display: inline;
 position: relative;
}

#photobar { 
display: inline;
 width: 115px;
 float: right;
 margin-left: 0px;
 margin-right: 50px;
}

#footer {
	
	background: url(green_footer3.gif) no-repeat;
	width: 783px; 
	height: 112px;
	float: right;
	margin-left: -3px;
	
}

#popup {
	padding-left: 50px;
	padding-right: 20px;
	margin-right: 50px;
	margin: 0 auto;
}
	
/* ---------->>> HEADER ITEMS <<<-----------*/

h1 { }

	#logo h1 {
	height:157px; /* height of logo */
	width:173px; /* width of logo */
	background: #fdb825 url(cs_logo.gif) bottom left no-repeat;
	text-indent:-9000px;
	float: left;
	padding-top: 30px;
	}
	
	h1.abouttitle, h1.welcometitle, h1.applytitle, h1.newstitle, h1.linkstitle, h1.berrytitle, h1.contacttitle, h1.givingtitle {
	height:80px; /* height of logo */
	width:480px; /* width of logo */
	background: #fff url(title_about.gif) top left no-repeat;
	text-indent:-9000px;
	padding-top: 30px;
	margin-top: 50px;
	margin-bottom: -40px;
	margin-left: -20px;
	}	
	
	h1.welcometitle {
	background: #fff url(title_welcome.gif) top left no-repeat;
	}	
	
	h1.applytitle {
	background: #fff url(title_apply.gif) top left no-repeat;
	}
	
	h1.newstitle {
	background: #fff url(title_news.gif) top left no-repeat;
	}
	
	h1.linkstitle {
	background: #fff url(title_links.gif) top left no-repeat;
	}
	
	h1.berrytitle {
	background: #fff url(title_strawberry.gif) top left no-repeat;
	}
	
	h1.contacttitle {
	background: #fff url(title_contact.gif) top left no-repeat;
	}
	
	h1.givingtitle {
	background: #fff url(title_giving.gif) top left no-repeat;
	}
	
	#popup h1 {
	font-size: 1.5em;
	font-style: italic;
	margin-bottom: 10px;
	margin-top: 10px;
	color: #415106;
	}
	
	
h2 { }
	#rightcolumn h2, #leftcolumn h2 {
	font: normal 1.2em;
	margin-bottom: 5px;
	color: #415106;
	}
	
	#popup h2 {
	font-size: 1.2em;
	}

h3 { }
	#rightcolumn h3, #leftcolumn h3 {
	margin-top: 10px;
	margin-bottom: 10px;
	}	


	#popup h1, #popup h2, #popup h3 {
	margin-top: 10px;
	margin-bottom: 10px;
	}
	
	
	#popup h3 { 
	color: #AE1F23; 
	font-size: 1em;
	font-weight: bold;
	}
	
p { }

	#leftcolumn p { 
	text-indent: -15px; 
	margin-bottom: 10px; padding-left: 12px;
	line-height: 1.2em;
	}
	
	#rightcolumn p { margin-bottom: 20px; line-height: 18px;}
	
	p.first { }

img { }

	#photobar img { 
	border: 2px solid #572600;
	margin-bottom: 10px;
	}
	
a { }
	
	#logo a {
	display:block;
	width:100%;
	height:98%;
	outline:none;
	color: #fff;
	}

	a { color: #AE1F23; }
	a:hover { color: #000; }

	#leftcolumn a {
	 color: #FDB825;
	text-decoration: none;
	}	
	#leftcolumn a:hover {
	text-decoration: underline;
	}

ul { }
	#rightcolumn ul { margin-bottom: 20px;}
	
/* ---------->>> Global Navigation <<<-----------*/
#giving {
	width: 105px;
	height: 135px;
	float: right;
	color: #fff;
	margin-top: 30px;
	}

#giving a { 
	display: block;
	background: url(giving.gif) 0 0 no-repeat;
	height: 25px;
	padding-left: 31px;
	padding-top: 10px;
	text-transform: uppercase;
	text-decoration: none;
	color: #000;
	}

#giving a.on { 
	background: url(giving_blink.gif) 0 0 no-repeat;
	}
	
#giving a:hover { 
	background: url(giving_on.gif) top left no-repeat;
	}	

#navigation {
width: 390px;
height: 93px;
float: right;
margin-right: 15px;
margin-top:0px;

}
#navigationlist {position: relative; margin: 0; padding: 0; width: 390px; height: 93px; background: url(nav.gif);}
#navigationlist li {width: 390px; height: 93px; position: absolute; top: 0px; background: url(nav.gif) 0 0 no-repeat; display: block; list-style: none; margin: 0;}
#navigationlist a {height: 93px; display: block; border: 0px; font-size: 5px; text-indent: -9999px; text-decoration: none;}

#navigationlist #about {left: 0px; width: 78px;}
#navigationlist #apply {left: 78px; background-position: -78px 0;  width: 78px;}
#navigationlist #news {left: 156px; background-position: -156px 0; width: 78px;}
#navigationlist #links {left: 234px; background-position: -234px 0; width: 78px;}
#navigationlist #strawberry {left: 312px; background-position: -312px 0; width: 78px;}

#navigationlist #about a:hover, #aboutlink .about {background: url(nav.gif) -0px -93px; no-repeat;}
#navigationlist #apply a:hover, #applylink #navigationlist .apply {background: url(nav.gif) -78px -93px; no-repeat;}
#navigationlist #news a:hover, #newslink #navigationlist .news {background: url(nav.gif) -156px -93px; no-repeat;}
#navigationlist #links a:hover, #linkslink #navigationlist .links {background: url(nav.gif) -234px -93px; no-repeat;}
#navigationlist #strawberry a:hover, #strawberrylink #navigationlist .strawberry {background: url(nav.gif) -312px -93px; no-repeat;}


#subnav {
padding: 20px;
font-size: .9em;

}
/*---------- bubble tooltip -----------*/

#quote { 
    }
    
a.tt{
    position:relative;
    height 38px; width: 38px;
    display: block;
    background: url(house.gif) no-repeat;
    z-index:24;
    text-decoration:none;
    margin: 0; padding: 0;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background: url(house_on.gif) no-repeat;;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:18px; left:9px;
	padding: 15px 0 0 0;
	width:211px;
	color: #993300;
    text-align: center;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
}
a.tt:hover span.top{
	display: block;
	padding: 30px 8px 0;
    background: url(bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(bubble_filler.gif) repeat bottom; 
}
a.tt:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
    background: url(bubble.gif) no-repeat bottom;
}

/* ---------->>> TABLE Tags <<<-----------*/		

table.data {
	border-collapse: collapse;
	background-color: #FFE9C1;
	width: 100%;
	}
 
table.data th {
	background-color: #FEDC92;
	text-align: left;
	padding: 5px;
	font: bold 10px/22px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 8px 12px 4px 12px;
	/* background: #CAE8EA url(bg_header.jpg) no-repeat; */
	vertical-align:middle;
	}

table.data td {
	padding: 5px;
	border-top: 1px solid #fff;
	font: normal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	padding: 6px 12px 6px 12px;
	color: #333;
	vertical-align: top; 
	}
	
/* ---------->>> FOOTER Tags <<<-----------*/

#footer p { padding-left: 100px; padding-top: 50px; text-align: left; color:#fff;  }
.small { font-size: 10px; color: #999;}
.clear { clear: both; background: none; }
	
