/* Here to learn? That's great and everything, but please don't take my stylesheet and apply it to your html.
I worked very hard to learn standards compliant CSS and to make it look good in major browsers. My advice is to visit as many CSS sites and tutorials
as you can. That's what I did, and now I get this whole "CSS, Validation, XHTML, tableless layout" stuff. Ok, enough ranting.
I have set up my stylesheet definitions the same way they occur in the XHTML. Meaning, body and tags are first, then header, then menu stuff,
and then content and footer rules. Please feel free to study this to see that it flows in a pretty logical way. I know it looks confusing
for a beginnner, but just wade through it, change background colors of divs and see where their borders are, and you will become a pro
in no time. Please email me at: Ryan at InterfaceUniversity.com if you want to ask any questions. Thanks.
*/

body {
	text-align:center;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: .8em;
	color: #000000;
	background-color: #FFFFFF;
	margin: 0px;
	padding: 29px;
	min-width: 818px;
}

a{
	font-weight: bold;
  	color: #000000;
	text-decoration: underline;
}

a:hover{
	font-weight: bold;
  color: #5097B9;
	text-decoration: underline;
}

a.popUpExt {
	display:inline-block;
	background: url("images/popUpExt.gif") no-repeat 100% 50%;
	padding-right:16px;
}

#layoutContainer {
	width: 818px;
	text-align: center;
	margin: 0px auto;
	padding: 0px;
	background: url(images/mainTile.gif) repeat-y
}


#mainHeader {
	height: 120px;
	background: url(images/top.gif);
}



#navContainer {
	margin: 0;
	padding: 0 0 0 0px;
}

#navContainer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}

#navContainer li {
	display: block;
	margin: 0;
	padding: 0;
	float: left;
	width: auto;
}



#swap01 {
	background-image: url(images/home2.gif);    /* rollover state */
	width: 66px;                    /* image width */
	height: 23px;                   /* image height */
}
#swap02 {
	background-image: url(images/tutorials2.gif);    /* rollover state */
	width: 86px;                    /* image width */
	height: 23px;                   /* image height */
}
#swap03 {
	background-image: url(images/freebies2.gif);    /* rollover state */
	width: 87px;                    /* image width */
	height: 23px;                   /* image height */
}
#swap04 {
	background-image: url(images/forums2.gif);    /* rollover state */
	width: 81px;                    /* image width */
	height: 23px;                   /* image height */
}
#swap05 {
	background-image: url(images/about2.gif);    /* rollover state */
	width: 69px;                    /* image width */
	height: 23px;                   /* image height */
}
#swap06 {
	background-image: url(images/contact2.gif);    /* rollover state */
	width: 76px;                    /* image width */
	height: 23px;                   /* image height */
}


/* Application: Common Code */

.rollover { display: block; } /* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */



#leftContainer {
  margin-top: -3px;
	float: left;
	width: 256px;
}

.leftContent {
	text-align: left;
	margin: 15px 10px 0px 20px;
	padding: 0px;
	font-size: 0.9em;
}

.leftHeader {
	text-align: center;
	font-size: 10pt;
	font-weight: bold;
	color: #FFFFFF;
	margin: 0px;
	padding-top: 3px;
	height: 20px;
	background: url(images/leftHeaderbg.gif)
}

.newsEntry {
	text-align: left;
	margin: 5px 10px 0px 10px;
	padding: 5px;
}


#mainContainer {
	float: right;
	width: 562px;
}


#content {
	padding: 10px 30px 10px 20px;
	text-align: left;
}


#content h1 {
  font-size: 1.5em;
  border-bottom: solid 1px #000000;
  margin: 5px 5px 10px 0px;
}

#content h2 {
  font-size: 1em;
  border-bottom: dashed 1px #000000;
}

.contentHeaderBg {
  float: right;
	width: 14px;
	height: 20px;
	background: #5097B9;
	border-left: 1px solid #707070;
}


#aboveFooter {
	clear: both;
	width: 818px;
	height: 47px;
	background: url(images/aboveFooter.gif)
}


#mainFooter {
	clear: both;
	width: 818px;
	height: 32px;
	background: url(images/bottom.gif)
}

#mainFooterContent {
	text-align: center;
	padding-top: 10px;
	height: 22px;
}

#copyright {
  	float: left;
	font-size: 8pt;
	padding-left: 40px;
	color: #FFFFFF;
}

#copyright a{
  	font-weight: normal;
  	color: #FFFFFF;
	text-decoration: none;
}

#copyright a:hover{
	font-weight: normal;
  	color: #FFFFFF;
	text-decoration: underline;
}

#copyright a:visited{
 	color: #E0E0E0;
}

#bottomNavLinks {
  	float: right;
	font-size: 8pt;
	padding-right: 130px;
	color: #FFFFFF;
}

#bottomNavLinks a{
  	font-weight: normal;
  	color: #FFFFFF;
	text-decoration: none;
}

#bottomNavLinks a:hover{
	font-weight: normal;
  	color: #FFFFFF;
	text-decoration: underline;
}

#bottomNavLinks a:visited{
 	color: #E0E0E0;
}

.tutorialContainer {
   border: 1px solid #999999;
   background: #CCCCCC;
}

.img-black-border {
   border: 1px solid #000;
}