/*HDO-MAIN.CSS - CAMPHINDS.ORG - (C)2010 PINE TREE COUNCIL, BSA - REVISION 022310*/

	* {
		margin: 0px;
	}

html {
		height: 100%;
	}

/* changing the body will make things look different all over, but these can be overridden in the individual HTML files or by other classes. */

	body {
		padding: 10px 10px 0px 10px;
		font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
		font-size: .814em; /*prefer font sizes in ems, not px*/
		background-color: #B6D0AA;  /*vague light green*/
		height: 100%;
		width: 800px;
		margin: 0 auto 0 auto;
	}
	
/*	.headline { color: green; font-size: 20px;  font-weight: bold; }*/
	.newsheadline { color: green; font-size: 20px;  font-weight: bold; }
	.newssubhead { color: black; font-size: 16px;  font-weight: bold; text-decoration: underline; }
	.webelossubhead { color: #008000; font-size: 18px;  font-weight: bold; font-style: italic; }
	.newssubdate { color: #000; font-size: 12px;  font-style: italic; text-decoration: none; }
	.formsheadline { color: black; font-size: 14px;  font-weight: bold; font-style: italic; text-decoration: none; }

#banner {
		background-image: url('img/banner.png');
		height: 136px;
		width: 800px;
		-moz-border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		-webkit-border-radius: 10px; /*these four are nonstandard and will prevent this stylesheet from being proper CSS2 or 3. IE users see sharp corners.*/
		}
/*
#bannertemp { background-image: url(img/bannertemp.png); width: 800px; height: 136px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; }
*/

	#footer {
		padding-top: 1em;
		text-align: center;
		color: #fff;
		background-color: #4C3226;
		line-height: 1.24em;
		font-size: .75em;
		height: 4em; /*if you change this you have to change the push div as well.*/
		margin-bottom: 3em;
		-webkit-border-bottom-right-radius: 10px;
		-moz-border-radius-bottomright: 10px;
		-webkit-border-bottom-left-radius: 10px;
		-moz-border-radius-bottomleft: 10px;
	}
	
	.flink, a:visited.flink {
		color: #fff;
		text-decoration: none;
	}
	
	.flink a:hover {
		text-decoration: underline;
	}

#printbanner {
		display: none;  /*bit of a leftover, might use in the future*/
		}
	
/*	All this #navbar stuff controls, surprise, the navigation bar. stops at tbody*/
	
	#navbar {
		height: 25px;
		width: 100%;
		background-image: url('img/navbar.png');
		color: #fff;
		overflow: hidden;
		}
		
	#navbar a {
		color: #fff;
		}
	
	#navbar ul li a:hover {
		background-color: #447554;
		text-decoration: none;
	}
	
	#navbar a {
		padding: 4px;
		vertical-align: middle;
	}
		
	#navbar ul {
		width: 90%;
		margin: 3px auto 0 auto;
		padding-left: 0px;
	}
		
	#navbar ul li {
		display: inline;
		list-style-type: none;
	}

	#tbody {
		background-color: #4C3226;
		background-image: url('img/bodybg.png');
		background-repeat: no-repeat;
		height: 100%;
		padding: 10px;
		overflow: auto; /*important, makes the page expand when it needs to.*/
		}
/*		if you don't want separations like on the front page, use this inside the tbody div and put your content inside it*/
		
	div.white {
		background-color: #fff;
		height: 100%;
		overflow: auto;
		padding: 25px;
	}
		
	#newscol {
	/*I suppose this should be more generally named. Don't use it for everthing unless you want left-oriented, half-width blocks of text.*/
		background-color: #fff;
		float: right;
		width: 450px;
	}
	
	#slideshow {
		height: 240px;
		width: 320px;
		background-color: #fff;
		float: left;
	}
	
	#outreach {
		width: 320px;
		height: auto;
		background-color: #fff;
		margin-top: 10px;
		float: left;
		color: green;
	}

	.headlineblack {
		font-size: 1.5em;
		text-align: center;
		color: black;
		margin: 0.35em;
		font-weight: bold;
	}
.headline { color: green; font-size: 1.5em; font-weight: bold; text-align: center; margin: 0.35em; }
.boxhdr {
		background-image: url('img/hdrbg.png');
		background-repeat: repeat-x;
		width: 100%;
		height: 22px;
	}

#welcome {
		float: right;
		width: 450px;
		background-color: #fff;
		margin-bottom: 10px;
	}
	
	#welcome p {
		padding: 0 25px 5px 25px;
		text-align: justify;
	}
	
/*#welcome a, a:link, a:visited, a:hover { color: black; text-decoration: underline; }*/
/*#tbody a, a:link, a:visited, a:hover { color: black; text-decoration: underline; }*/
/*	feel free to make more classes like above. */

	#wrapper {
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto;
	}
 
	#push {
		height: -4em;
	}
 
	#linker {
		float: left;
		vertical-align: middle;
		padding-left: 10px;
		width: 19px;
		}
		
	#outreach a, a:link: a:visited; {
		color: green;
		text-decoration: none;
		text-indent: 10px;
	}
	
	#outreach a:hover {
		color: green;
		text-decoration: underline;
		text-indent: 10px;
	}
/*	leftover classes from the lodge site that you may or may not find useful.*/
 
	#leftnews {
		float: left;
		width: 48%;
		text-align: justify;
	}
 
	#rightnews {
		float: right;
		width: 48%;
		text-align: justify;
	}
	
	p.ext {
		margin: 1em .5em .75em .5em;
		padding: 3px 0px 3px 0px;
		font-size: 1.064em;
	}

	h1 {
		font-size: 3em;
		text-align: center;
		}

	h2 {
		font-size: 2em;
		padding-top: 10px;
		text-align: center;
		}
		
	p.contactbold {
		font-size: 1.25em;
		font-weight: bold;
		margin: .5em auto .25em auto;
	}

	h3 {
		font-size: 1.5em;
		text-align: center;
		color: green;
		margin: .35em;
	}
	
	.left {
		text-align: left;
		padding: 5px 0 0 5px;
	}
	
	.right {
		text-align: right;
		padding: 10px 5px 0 0;
	}
 
	h4 {
		font-size: 1.15em;
		font-weight: bold;
		text-align: center;
	}

	h5 {
		font-weight: bold;
		text-align: center;
	}
 
	.tiny { /*teeny tiny subtitles, good for a <span>.*/
		margin-top: 0;
		text-align: center;
		font-size: .85em;
	}
	
/*	this makes a rounded corners box like on the lodge committees page. I use it for lots of other stuff.*/
	
	.cbox {
		float: right;
		padding: 5px;
		margin: 0 5px 5px 5px;
		border: 1px solid #000;
		background-color: #DFDFDF;
		text-align: center;
		width: auto;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
	}
	
	.pfloat {
		float: left;
		padding: 7px;
		width: 120px;
	}
	
	tr {
		margin-bottom: 1em;
	}
	
	td h4 {
		margin: 1em 0 1em 0;
	}
	
	td h3 {
		margin: 1em 0 1em 0;
	}
	
	.grayout {
		color: #999999;
	}
	
	/* Alignment classes. Used globally, avoid changing */
	
	.fl {
		float: left;
		width: auto;
	}
	
	.al {
		text-align: left;
	}
	
	.ac {
		text-align: center;
	}
	
	.acp {
		text-align: center;
		width: auto;
		margin: 0 auto 0 auto;
	}
	
	.aj {
		text-align: justify;
	}
	
	.block {
		text-align: justify;
		width: 35em;
		margin: 0 auto 0 auto;
	}
	
	.ar {
		text-align: right;
	}
	
	.fr {
		float: right;
		width: auto;
	}
 
	/* A few default classes. */
	
	p {
		margin: .5em;
	}
	
	#tbody>p {
		line-height: 1.24em;
	}
	
	img {
		border: none;
		position: relative;
	}
	
	input, select {
		margin: 2px;
	}
	
	label {
		font-size: .9em;
		text-align: left;
		font-weight: bold;
	}

	a {
		color: green;
		text-decoration: none;
	}

	a:hover {
		text-decoration: underline;
	}

	a:visited {
		color: green;
		text-decoration: none;
	}
	
	a.navlink {
		text-align: center;
		font-size: .75em;
	}
.image { margin: 2px; padding: 2px; }