/* STRUCTURAL DEFINITIONS - NO TOUCH */

body { 
		background: #525252;
		font-size: 0.7em;
		font-family: verdana;
		color: #333; 
		margin: 0; padding:0; 
		margin-top: 0;
		margin-bottom: 0;
		}

#rootElement { 
/*		width: 780px;    */
		width: 840px; 
		background-color: #FFFFFF;
		margin:0px auto;
		}

#header { margin:0; padding:0 ;height: 73px; background:url("images/header_tile.gif") repeat-x; }


ul { margin: 0; padding: 0; list-style:none; }
.bullet {list-style:square }


#navBar	{ margin:0; padding:0 ; height: 30px; background: #1A6CCE url("images/navBar_tile.gif") repeat-x; }
#navBar li	{ float: left; display: block;  font-size: 9pt; font-weight: bold;}
#navBar a	{ display: block; width: 75px; padding: 6px 10px 2px 10px;  height: 20px; text-align: center;}
#navBar a:link		{ color: #FFF; text-decoration: none;   }
#navBar a:hover		{ text-decoration: none; background:#3C82D5; }
#navBar a:visited	{ color: #FFF; text-decoration: none;   }


/*#sideBar { float: left;  background: #F1F1F1; width: 145px; min-height: 600px; height: 600px; padding: 10px; }*/
/*#sideBar { float: left;  background: #E6E4E3; width: 125px; min-height: 600px; height: 650px; padding: 10px; }*/
#sideBar { float: left;  background: #E6E4E3; width: 120px; min-height: 600px; height: 650px; padding: 5px; }
#sideBar li { background: url("images/web_icon.gif") no-repeat; padding-left: 16px;  line-height: 1.5em;}
#sideBar a:link     { color: #525252; font-weight: bold; text-decoration: none; }
#sideBar a:hover    { color: #333; font-weight: bold; text-decoration: none; }
#sideBar a:visited  { color: #525252; font-weight: bold; text-decoration: none; }

#mainBody { background-color: #FFFFFF;  width: 670px; padding: 20px;float: left; }


/* style tags */
a:link		{ color: #0075FF; text-decoration: underline; }
a:hover		{ color: #031CFC; }
a:visited	{ color: #2D8C8A; }


.debug { border: 1px solid orange;} 


/* Image Stuff for Screen Shots */
#screenshots	{ width: 500px; text-align: center;}
#screenshots td { border: 1px solid #1A6CCE;  padding:10px; }
#footer	{ clear: both;} 
/*img	{ border: 1px solid #1A6CCE; margin:0; padding:0; }*/



/* TAGS YOU CAN USE BRAD */

.textXXSmall	{ font-size: 70%; }
.textXSmall		{ font-size: 80%;}
.textSmall		{ font-size: 90%;}
.textLarge		{ font-size: 110%;}
.textXLarge		{ font-size: 120%;}
.textXXLarge	{ font-size: 130%;}

.color1			{ color: }
.color2			{ color: }
.color3			{ color: }

.borderBottom1	{ border-bottom: 1px solid #eee;}
.borderBottom2	{ border-bottom: 1px dotted #333;}

.alignRight		{ margin-left: 25%; }
.alignLeft		{ margin-right: 25%; }
.center			{ margin-left: 23%; margin-right: 23%; }

ulBullet  { margin: 0; padding: 0; list-style:None; }


h1				{ color: #1A6CCE; font-size: 120%; margin-bottom: 0.5em; padding:0; }
h2				{ color: #1A6CCE; font-size: 110%; margin-bottom: 0.5em; padding:0;}
/*p				{ line-height: 1.3em; padding: 0 0 10px 0; padding-bottom: 2px; margin-top: 0; margin-bottom: 0} */
p				{ line-height: 1.3em; padding:0; margin: 0;} 


.marginTop5 		{ margin-top: 5px; }
.marginBottom5		{ margin-bottom: 5px; }
/* <p class="marginTop5">foo</p> */
/* <p class="color1 textLarge marginBottom5">foo</p> */

/* Usage Examples

Comment: parapraph declared  
<p> 
I am a <span class="textSmall">small</span> rabbit
</p>


Comment: a virtual block or cell is declared aligned right with large text inside of it
<div class="textLarge alignRight"> 
	<h1>A header is declared!</h1>
	<p class="borderBottom1">A paragraph is declared with content and a border at the bottom</p>
</div>

With these basic tags you drop in stylings with minimal knowledge of markup or css, except to have proper xml-like 
tags and make sure all your class declarations are separated by a space like in the above examples, when you declare more than
one (i.e. <div class="color1 textlarge alignRight borderBottom1>bla</div)

The order of the declaration doesn't matter, it's pretty soup at that point.


* End comments /