/*I feel special thanks needs to go out to the following sites for helping me along in my never ending css learning process. I routinely incorporate pieces of code from them to fit my needs as I learn new designing techniques. Stu Nicholls at http://www.cssplay.co.uk/menu/index.html is truly an inspirational person who freely shares his creative knowledge with everyone. His site is absolutely amazing and shows the true untapped power of CSS. If your serious about leaning CSS this is a site that will show you the craziest stuff you thought was impossible to do with CSS. I used pieces of his Krazy Corners code on this site to learn how to sytle rounded corners, purely with css. Look Ma.. No gifs.. Thanks Stu ;-)
Russ Weakley at http://css.maxdesign.com.au/listamatic/ is another goldmine of knowledge freely availble to everyone. I spend most of my time at these two sites. Russ teaches by doing and not alot of jibber jabbber. He takes the final look of a particular design and then walks you through it step by step, with explanations each step of the way. His teaching style is Top Notch, is all I can say. Ok. Onto the juicy stuff. 


<start>Styling of main elements. This sites layout is one main containing div with standard hearder, left nav-menu, right content area with inner-content within that and a footer*/
body {   
    width: 800px;
    padding: 0;
    margin: 0 auto 0 auto;
    font-family: sans-serif, "Times New Roman", Georgia, sans;
    font-size: 0.8em;
    color: #000;
    background-color: #AFC1D9;   
    }
#container {
    margin:0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: #000;
    background-color: #AFC1D9;
    }

/*Our Logo. header3.gif*/
#pageHeader h1 {
    background: transparent url(/images/header3.gif) no-repeat top center;
    width: 781px;
	height: 185px;
	margin: 0;
	padding: 0;
    }
#pageHeader h1 span {
	display:none
	}

/* Decided to use a Definition list to style the Left Side Nav menu because of the huge amount of styling flexibility. Some in the know have an opinion that using definition lists for styling links isn't the correct use. I beg to differ. I say use any tool that allows you to get the job done. DL's are way more flexible in the styling that can be obtained. UL's and OL's have their place but DL's for Menu styling is just what the doctor ordered.
 
Using css to round the corners. */
#navmenu { 
    margin-right:2%; /* To solve an IE-6 float bug here: 
http://www.positioniseverything.net/explorer/threepxtest.html ,because this was breaking my dl list's inside "inner_content" as well as pushing the left float down for some links as described in the bug, I had to readjust the overall size of the body to be 800px and then readjusted my float sizes. I had to have a margin of atleast 3px inbetween floats supposedly to work around this stupid bug. So "navmenu and content" should have more than enough space now. Gave "navmenu" a margin-right 2% and "content" and margin-left 1%. .03 x 800px = 24px. This seems to be working now. For some reason I needed more than 3px though. Oh well. Onto the next fire.. ;) */
    padding:0; 
    width:18%;
    }
dl {margin: 0; padding: 0; border-left:1px solid #fff; border-right:1px solid #fff;}
dt {margin:0; padding:0; text-align:center; font-size: 1em; font-weight:bold; background: #69c; overflow: hidden;}
dd {margin:0; padding:0; text-align:center; border-top:1px solid #fff;}
#navmenu_inner a, #navmenu_inner a:visited {color:#F0E68C; text-decoration:none; display:block; font-size: 1em; padding:0.4em; background: #47a;}
#navmenu_inner a:hover {background: #258; color:#9cf;}
.top {display:block; background:transparent; font-size:1px;}
.bottom {display:block; background:transparent; font-size:1px; border-top:1px solid #fff;}
.b1, .b2, .b3, .b4 { display:block; overflow: hidden;}
.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {background:#69c; border-left:1px solid #fff; border-right:1px solid #fff;}
.b1 {margin:0 5px; background:#fff;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}

/*Right-Side Main content area with CSS rounded corners. This actually contains a nested inner-content div where 
all content is placed as links are clicked. Had to do this because styling the main content div was limited
do to the fact that this is a floated layout with strict fixed width dementions. Which inturn is very touchy
when using margins that added extra length which would effect the nav links. So I nested an inner-content div and now I can style everything within there 
without issue for the most part*/
#content {
    margin-left: 1%;
    margin-bottom:10px;
    padding: 0;
    float: right;
    width: 77%;
    }
.top2, .bottom2 {display:block; background:transparent; font-size:1px;}
.ab1, .ab2, .ab3, .ab4 {display:block; overflow:hidden;}
.ab1, .ab2, .ab3 {height:1px;}
.ab2, .ab3, .ab4 {background:#F0F8FF; border-left:1px solid #fff; border-right:1px solid #fff;}
.ab1 {margin:0 5px; background:#F0F8FF;}
.ab2 {margin:0 3px; border-width:0 2px;}
.ab3 {margin:0 2px;}
.ab4 {height:2px; margin:0 1px;}
.inner_content {
    padding: 0 30px 25px 15px;/*left and right were 25px each*/
    color:#000;
    background:	#F0F8FF;
    border:0 solid #fff;
    height: 40em;
    width:auto;
    overflow: auto;
    }
.inner_content h1 { margin: 10px 0 5px 0; letter-spacing: .2em; font-size: 1.6em; text-align: center; color: #930;}  
.inner_content h2 { margin-bottom: 3px; padding: 0; letter-spacing: .1em; font-size: 1.4em; text-align: center; color: #551A8B;}  
.inner_content p {
    margin: 5px 0 10px 0;
    font-size: 1em;
    text-align: justify;
    line-height: 1.3em;
    letter-spacing: 1px;
    }  

    
/*Bottom footer with rounded corners using css. Nothing fancy here. A place to add webmasters contact info
, copyright notice and possibly a clickable donate logo/button.*/
#footer { clear: both; margin-top: 10px; text-align: center; color: #F0E68C; }
#footer h1 {
    margin:0 5px; 
    padding: 0;
    font-size: 1em;
    letter-spacing:1px;
    }
#footer p {
    margin:0 10px; 
    letter-spacing:1px;
    font-size: 1em;  
    }
#footer a {
    color:#000;
    }   
.top3, .bottom3 {display:block; background:transparent; font-size:1px;}
.cb1, .cb2, .cb3, .cb4 {display:block; overflow:hidden;}
.cb1, .cb2, .cb3 {height:1px;}
.cb2, .cb3, .cb4 {background:#47A; border-left:1px solid #fff; border-right:1px solid #fff;}
.cb1 {margin:0 5px; background:#fff;}
.cb2 {margin:0 3px; border-width:0 2px;}
.cb3 {margin:0 2px;}
.cb4 {height:2px; margin:0 1px;}
.inner_footer {display:block; background:#47A; border:0 solid #fff; border-width:0 1px;}

/*<end>Styling of main elements.*/

/*This div nests the below Definition List elements I decided to use for styling a
standard template that is used to format our member and sponsor info throughout the site.
 I tried tables and UL's but the coding was an absolute nightmare. For me anyways. Once again, the flexibility
of Definition Lists let me do what I needed to do with the least amount of pain.*/ 
#widthandoverflow {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    }
dl.tablestyle3 {
    padding-bottom:25px;
	width: 100%;
	text-align:left;
	margin-top: 10px;
	border-style: none;
	}	
dt.tablestyle2 {
	margin-bottom: 10px;
	font-weight: bold;
	font-size: .9em;
	float: left;
	clear: left;
	width: 21%;
	text-align: left;
	border-style: none;
	color: #000;
	background-color: #F0F8FF;
	}	
dd.tablestyle1 {
	margin-bottom: 10px;
	float: left;
	width: 76%;
	margin-left: 3%;
	text-align: justify;
	border-style: none;
	}
#clear {/*testing adding 0 width and height*/
    clear: both;
    width:0;
    height:0;
    }	
	
/*Non-General Styles.*/
.address {
    text-align: center;
    }
p.center {
    text-align: center;    
    }
h2.memberh2 {
    text-decoration: underline;
    }
/*Experimenting tryig to get the bead img to tile along the X axis*/
p.centerb {
    text-align: center;
    background-image: url(/images/beadbar.jpg);
    background-repeat: repeat-x;
    background-position: center;
}
/*Business Directory Logo*/
.BizDir {
    text-align: center;
    margin: 25px;
    padding: 0;
}
/*Used in in various span tags to modify text formating.... START*/
.italics {
    font-style:italic;
    }
.red {
    color:Red;
    }   
.black {
    color:#000;
    }
.brown {
    font-weight:bold;
    color:#930;
    }
.brown2 {
    color:#930;
    }
.blue {
    color:Blue;
    }
.bold {
	font-weight: bold;
	}
/*END*/
.underline {
    text-decoration: underline;
    }
.catagory {
	margin: 20px 0;
	padding: 0;
	text-align: center;
	}
.subcatagory {
	margin: 20px 0;
	padding: 0;
	text-align: center;
	text-decoration: underline;
	}
h3.subcatagory {
	margin: 20px 0;
	padding: 0;
	text-align: center;
	text-decoration: underline;
	}
a.backtobizdir {
    font-size: 1em;
    }
.mem {
    margin-bottom: 25px;
    padding: 0;
    font-size: 1.2em;
    text-align: center;
    line-height: 1.2em;
    letter-spacing: 1px;
    }
div.statcounter {
    margin: 0;
    padding: 0;
    text-align: center;
    color:#000;
    background-color:#47A;
}   
/*Unordered Lists, from general to custom*/
ul {
	margin: 0 0 10px 0;
	padding:0;
	font-weight:normal;
	list-style-type: none;
    font-size: 1em;
    }
ul li {
    line-height: 1.2em;
    }
ul.home {
	margin: 0 0 0 0;
	padding:0;
	font-weight:normal;
	list-style-type: none;
    font-size: 1em;
    }
ul.home li {
    margin:0;
    padding:0;
    }
ul.join {
	margin: 0 0 10px 0;
	padding:0;
	list-style-type: disc;
	text-align: justify;
	font-weight:normal;
	font-size: 1em;
    }
ul.join li{
    line-height: 1.2em;
    margin: 10px 10px;
    }
ul.decimal {
    margin: 0 0 10px 0;
    list-style-type: decimal;
    text-align: justify;
    font-size: 1em;
    font-weight:normal;
    }
ul.decimal li {
    line-height: 1.2em;
    }
ul.contactinfo {
    margin: 0 0 10px 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    font-size: 1em;
    font-weight:normal;
	}
ul.board {
    margin: 1em 0;
    list-style-type: none;
    text-align: left;
    font-size: 1em;
    font-weight:normal;
	}
ul#centertable {
    margin:0 auto;
    padding:0;
    width:22em;
    font-size:1em;
    list-style-type:none;
    font-weight:normal;
	}
ul#centertable .left {
    padding-right:5px;
    float:left;
    width:10.5em;
    } 
ul#centertable .right {
    padding-left:5px;
    float:right;
    width:10.5em;
    }

ul.members {
    margin:0 auto;
    padding:0;
    width:95%;
    font-size:1em;
    list-style-type:none;
    }
.tribal {
    list-style-type: none;
    }
img.imageleft {
    margin: 6px 15px 0 0;
    float: left; 
    }

/*Tables. Still experimenting with the benfits of tables. Most of these I'm just testing with, except for the general ones.*/
table {
    width: 100%;
    border: 0;
    }
td {
    width: 100%;
    }
.UniformTableLayout {
    margin: 0 auto;
    width: 45em;
    border: 0;
    }
.UniformTableLayout td {
    width: auto;
    }
.UniformTableLayout tr {
    vertical-align:top;
    }
.UniformTableLayout th {
    text-align:left;
    }
#EventsTableApril26 {
    margin: 0 auto;
    width: 45em;
    border: 0;
    }
#EventsTableApril26 td {
    width: auto;
    }   
#EventsTableApril26 tr {
    vertical-align:top;
    }
#EventsTableApril26 th {
    text-align:left;
    }
#rental table {    
    border:0;
    width: 45em;  
    text-align: left;   
    }
#rental td {
    width:auto;
    }
#rental th {
    width:auto;
    }
.bizdirmain table {
    margin: 1em auto;
    border: 0;
    width: 34em;
    font-size: 1em;
    }
.bizdirmain td {
    width: auto;
    }
.memdiraz table {
    margin: 1em auto;
    border: 0;
    width: 100%; /*40em;*/
    font-size: 1em;
    text-align: left;
    }
.memdiraz td {
    width: 50%; /*auto;*/
    }
    
div.left {
width:19em;
margin:2px 5px 15px 15px;
padding:0;
float:left;
}

div.right {
width:19em;
/*height:18.75em;*/
margin:2px 0 15px 5px;
padding:0;
float:right;
}

fieldset {
border:solid 3px #551A8B;
height:auto;
margin:0;
padding:0;
}

.right ul li, .left ul li {
list-style-type:none;
margin-left:6px;
padding:3px 0;
}
.right fieldset ul, .left fieldset ul {margin:0;padding:0;font-family:Arial;}
.right fieldset p, .left fieldset p {text-align:left;margin-left:6px;padding:0;}
.right fieldset h3, .left fieldset h3 {
text-align:center;
margin:5px 0 0 0;
padding:0;
}
legend {
color:#BA4C25;
font-weight:bold;
}
/*Styles of Update_my_Info page.*/
#form_body fieldset {  
margin:1em 0 1em 0;  
padding: 0;
}
#form_body legend {  
margin-left: 1em;
color: #BA4C25;  
font-weight: bold; 
} 
#form_body label 
{
font-weight:bold;   
}
#form_body fieldset ul {
padding:.5em 0 0 1em;  
list-style: none; 
} 
#form_body fieldset li {
padding-bottom: 1em; 
}