/*	------------------------- container ------------------------
	i absolutly position the container in the center rather then having it be centered
	useing a margin: auto beacuse the div is floated to the left already, to fit with my
	framework for easy float clearing and broweser compatibitliy, and when I absolutly 
	anything else, they will all nicely be centerd in the content as well... the only negitive 
	caviaut is that if the browser window is shrunk to a width smaller then the width
	of this containing element, the left side will be unviewable.. even upon scrolling..
	but this has an easy fix with javascript..
*/
html {
	background-color: #7d7d7d;
	overflow: scroll;
}
#container {
	position: absolute;
	width: 950px;
	margin-left: -475px;
	left: 50%;
	z-index: 10;
}

/*	------------------------- logo style ------------------------
	i use an image inside of the h1 tag so that it will show up when it is printed..
	background-images don't show up when printed..
*/

h1.logo {
	position: absolute;
	left: 15px;
	top: 50px;
	height: 78px;   
	width: 216px;
	text-indent: -1000px;
	z-index:2;
}
h1.logo a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}
h1.logo a img {
	position: absolute;
	top: 0px;
	left: 0px;
}

/*	------------------------- navigation ------------------------
	i quit using lists for navigations.. I guess technicaly they are still a list of pages in which
	you can accsess.. but it's something I'm currently trying..
*/

.navi.main {
	position: absolute;
	right: 0px;
	top: 35px;
	height: 100%;
}
.navi.main a {
	position: relative;
	float: left;
	margin-right: 30px;
	display: block;
	font-size: 1.8em;
	z-index: 1;
	color: #468cc8;
	padding: 30px 10px 10px 10px;
}
.navi.main .help {
	display: block;
	position: absolute;
	left: 0px;
	z-index: 0;
	height: 75px;
}
/*	------------------------- top navigation --------------------
*/
.navi.top {
	width: 100%;
	height: 35px;
	top: 0px;
	left: 0px;
	background: transparent url(/images/global/top_bar.png) scroll repeat-x 0 0;
}
.navi.top a {
	position: relative;
	float: left;
	display: block;
	font-size: 1.2em;
	margin-right: 10px;
	color: #fff;
	z-index: 1;
	padding: 5px 10px 5px 30px;
}
.navi.top p {
	float: right;
	color: #fff;
	padding: 5px 10px 5px 0px;
	font-size:1.2em;
}
.navi.top .help {
	position: absolute;
	left: 0px;
	z-index: 0;
	height: 30px;
}
.navi .help.a_mouseenter {
	opacity:0.6;
}
.navi .help {
	top: -100px;
}

.navi.top a[title="Home"] {
	background: transparent url(/images/icons/home.png) scroll no-repeat 10px 50%;
}
.navi.top a[title="Donate"] {
	background: transparent url(/images/icons/contact.png) scroll no-repeat 10px 50%;
}
.navi.top a[title="Contact Us"] {
	background: transparent url(/images/icons/donate.png) scroll no-repeat 10px 50%;
	padding-left: 40px;
}
/*	------------------------- content --------------------------
*/

#content {
	width: 100%;
	overflow: hidden;
	background-color: #fff;
}

#filling {
	width: 96%;
	padding: 20px 2% 0px 2%;
}
/*	------------------------- header --------------------------
*/

#header {
	width: 100%;
	height: 135px;
	background-color: #fff;
}

/*	------------------------- footer ---------------------------
*/

#footer {
	width: 100%;
	background: transparent url(/images/global/footer.png) scroll no-repeat 0 0px;
	padding-top: 30px;
	padding-bottom: 20px;
}
#footer h4 {
	color: #fff;
	text-align: right;
    font-size: 1.2em;
    float: right;
}
#footer h4 a {
	display: block;
	padding-bottom: 3px;
	font-size: 1.4em;
}
/*	------------------------- columns -------------------------
	stacking the classes like this alows me to switch up the layout easily.. if I want the 
	left one or the right one to be shorter.. I can sitch one class, but still have the padding
	intact..
*/
.column {
	border: 10px solid #cdcdcd;
	margin-bottom: 20px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
.column .column {
	border-width: 0px;
	margin-bottom: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
}

.column.wide {
	width: 60%;
	min-height: 500px;
}
.column.thin {
	width: 25%;
}
.column.right {
	padding: 2%;
	margin-left: 2%;
	float: right;
}
.column.left {
	padding: 2%;
}
/*	------------------------- top bar --------------------------
*/
.top_bar {
	width: 100%;
	height: 35px;
	background: transparent url(/images/global/top_bar.png) scroll repeat-x 0 0;
	position: absolute;
	top: 0px;
	left: 0px;
}
/*	------------------------- home ---------------------------
*/
.home_header {
	margin-bottom: 20px;
	width: 100%;
}
/*	------------------------- donate_button --------------------
*/
.column.right a[title="donate now"] img:first-child {
	position: absolute;
	/* for IE */
	filter:alpha(opacity=0);
	/* CSS3 standard */
	opacity:0;
}
/* ----------------------------------------------------------
/*	------------------------- container ------------------------
*/
/* ----------------------------------------------------------
/*	------------------------- container ------------------------
*/
/* ----------------------------------------------------------
/*	------------------------- container ------------------------
*/
/* ----------------------------------------------------------
/*	------------------------- container ------------------------
*/
/* ----------------------------------------------------------
/*	------------------------- container ------------------------
*/