/* CSS Document CHOA Two-Col HomePage Template */

/*------------------Style to Follow----------------*/
/*
1.	All tags lower case (<p> instead of <P>);
2.	All tags, even empty ones (<br /> and <hr /> instead of<BR> and <HR>);
3.	All attribute names lower case and quote all attribute values; for example, <td colspan="2"> instead of <TD COLSPAN=2>, and onmouseover instead of onMouseOver;
4.	Give empty attributes a value-such as <input type="checkbox" checked="checked" /> instead of <INPUT TYPE=checkbox CHECKED>;
5.	Nest all your tags correctly.
----------------------------------------------
You don't need <FONT>. Instead, use:

body {font: 0.8em verdana,sans-serif;}

There are some issues with font sizes in table cells, though, 
so to be completely on the safe side you could extend this declaration 
to all common text containers.

body,td,li,p {font: 0.8em verdana,sans-serif;}
------------------------------------------------
All HTML elements are either a block or an inline element. 
Inline elements include span, a, strong and em. 
Block elements include div, p, h1, form and li.
You can't change the width of an inline element. 
A way around this is to change the element from inline to block.
    span {
            width: 150px;
            display: block
            }
Applying display: block will turn the span into a block element, allowing you to change the width. One thing to note however is that block elements will always start on a new line, so you might have to use floats as well.
----------------------------------------------------

To centre your website within the browser, add relative positioning to the outer div, 
then set the margin to auto.
    #wrapper {
            margin: auto;
            position: relative;
            }
			
-----------------------------------------------------
To remove the horizontal scrolling bar, insert overflow-x: hidden; into the body
    body {
            overflow-x: hidden;
            }
This is useful if you decide to have an image or flash file which has a larger width than the browser.
		
*/


body{
	margin:0;
	padding:0;
	line-height: 1.2em;
	background: ;
	background-color: #FF9;
	background-image: URL(../images/bground/bg2col_20x20_LG.gif);
	background-position: left top;
	background-repeat: repeat;
	background-attachment: ;
}

/* ---------------------------------------- */
/* -----------------PAGE TOP--------------- */
/* ---------------------------------------- */

/* MAIN Container of Page */

#maincontainer{
	width: 840px; /*Width of main container*/
	margin: 0 auto; /*Center container on page*/
	background: #FFF;
}

/* SPACE WEDGE at Top of Page */
#topspace{
	background: ; /*Yellow shade of the site #FF9*/
	height: 50px; /*Height of top space section 50px*/
	background-color: #FF9;
	background-image: URL(../images/bground/bg2col_20x20_LG.gif);
	background-position: left top;
	background-repeat: repeat;
}

/* Space containing the LOGO at Top of Page */
#topsection{
	background: #A8A582;
	height: 80px; /*Height of top section*/
	border-top: solid 8px #000;
	border-bottom: solid 1px #000;
}

/*-------------------TOP MENU HORIZONTAL----------------*/
#horizMenu{
	background: #A8A582; /*shade of the site background*/
	height: 18px; /*Height of horiz menu space section 50px*/
	text-align: center;
	vertical-align: middle;
	border-left: solid 1px #000;
	border-right: solid 1px #000;
	border-bottom: solid 1px #000;
}

/*---------------Link attributes at MENU TOP--------------*/
#horizMenu a{
	color: #000; /*link color*/
	font-weight: ;
	font-size: .75em;
	font-family: Arial, Verdana, Geneva, Georgia, Helvetica, "Frutiger 47LightCn", "Times-Roman", sans-serif;
	padding: 0.1% 0.6% 0.1% 0.6%;
	border-right: ;
}

#horizMenu a:hover {
	text-decoration: ;
	font-weight: normal;	
	color: #FFF;
}

/*#horizMenu a:first-child{border-right: none;} /*line at right side. I do not know about this one*/

/*-----------h attributes ---------------*/

H1{
	margin: 0;
	padding-top: 0em; /*padding original 15px*/
	padding-bottom: 1em; /*padding original*/
	color: #6F482B; /*if you remove this line. Font color is black robq*/
	font-weight: bold;
	font-style: normal;
	font-variant: small-caps;
	font-stretch: expanded; /*normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded*/
	font-size: 2.1em;
	font-family:  Verdana, Arial, Geneva, Georgia, Helvetica, "Frutiger 47LightCn", "Times-Roman", sans-serif;
	letter-spacing: 0.04em;
	text-align: ;
	line-height: 0em;	
}

H2{
	margin: 0;
	padding-top: 0em; /*padding original 15px*/
	padding-bottom: 1.0em; /*padding original*/
	color: #000; /*if you remove this line. Font color is black robq*/
	font-weight: bold;
	font-style: normal;
	font-variant: ;
	font-stretch: expanded; /*normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded*/
	font-size: 1.5em;
	font-family: Verdana, Arial, Geneva, Georgia, Helvetica, "Frutiger 47LightCn", "Times-Roman", sans-serif;
	letter-spacing: 0.04em;
	text-align: ; /*left, center, right*/
	line-height: 0.8em;
}

H3{
	margin: 0;
	padding-top: ; 
	padding-bottom: ; 
	color: #000; /*Font color is black robq*/
	font-weight: bold;
	font-style: normal;
	font-variant: ;
	font-size: 1.0em;
	font-family: Georgia, Verdana, Arial, Geneva, Helvetica, "Frutiger 47LightCn", "Times-Roman", sans-serif;
	letter-spacing: 0.2em;
	line-height: 1.6em;
}

/*-----------------------------TEXT BOLDING-------------------------------*/
.txtBolding {font-weight: bold;}

/*--------------Span - BACKGROUND COLOR SELECTIVE page titles------------ */
span.BGcolor {background: #EDB;}

/*-------------------------------CONTENT AREA ----------------------------*/

#contentwrapper{
	float: left;
	width: 100%;
}

#contentcolumn{
	margin-right: 242px; /*Set right margin to RightColumnWidth* (was originally set to 200px*/
	font-size: .75em;
	font-family: Georgia, Verdana, Arial, Geneva, Helvetica, "Frutiger 47LightCn", "Times-Roman", sans-serif;
	border-left: solid 1px #000;
	border-right: dotted 1px #999;	
}


/*-----------------------------------------IMAGES------------------------------------------------*/
/*------------image border MAIN text column-------------*/
.imgBorder {
	border: 1px dotted #999;
	padding:1em 1em 1em 1em;
	background: #FFF;
}
/*-----------image border RIGHT side column-------------*/
.imgBorderLn {
	border: 1px solid #000;
	padding: 0.8em 0.8em 0.8em 0.8em;
	background: #FFF;
}

/*--------------image HEADER-------------*/

#imageheader{
	clear: left;
	color: #999;
	font-size: .95em;
	font-family: Verdana, Georgia, Geneva, Arial, Helvetica, "Frutiger 47LightCn", "Times-Roman", sans-serif;
	letter-spacing: 0.8em;
	text-align: center;		
}

/* Link attributes at PIC HEADER */
#imageheader a:hover{
	font-weight: normal;
	color: #FFFF80; /*link color*/
}

/*--------------------------------------*/
/*---------------------------------------*/
/*--------FLOATING TEXT ALONG PICS------*/

img.pictxtarea {
float:left; margin:0 8px 0px 0;
border: 1px solid #999;
padding:.3em .3em .3em .3em;
background: ;
}

.clearfloats {clear: both;}
/* 
img {float:left; margin:0 6px 6px 0;}
p.photocol {float:left; width:200px; margin:0;} 
.clearfloats {clear: both;}
*/

/*
<IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:50px; HEIGHT:50px" SRC="circle.gif">

Here's What's Happening

    * IMG denotes that this will be an image.
    * STYLE= proclaims what will follow are style commands.
    * position:absolute; states that the image will go exactly where I say it will. If text or another picture is already there -- tough. This will go right over top of it. That is one of the drawbacks to this positioning stuff.
    * TOP:35px;LEFT:170px; These are the plot points for the image: 35 pixels down from the top and 170 pixels in from the left.
    * WIDTH:50px;HEIGHT:50px This is the height and width of the image itself. 

     Notice the semicolon between each section.
	 
---------------------------	 
#photo1{width:100px;height:100px;float:left;}
#photo2{width:100px;height:100px;float:right;}

> <div id="photo1"><img src="Twins.jpg"></div>
>
> <div id="photo2"><img src="stuart2.jpg"></div>

That gives the width and height to the divs, not the images.

<img id="photo1" src="Twins.jpg" alt="twins">
<img id="photo2" src="stuart2.jpg" alt="Stuart">
-------------
http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

*/
/*---------------------------------------*/
/*--PARAGRAPHS POSITIONING CONTENT AREA--*/
/*---------------------------------------*/

/*--------Paragraph Floaters-------------*/

#col_one {
margin: 0; /* Applied to first column only in lieu of padding */
width: 210px; 
height: 200px;
float: left;
background: ; 
/*border: thin solid #000; /* to see the different columns */
}
#col_two {
margin: 0 0 0 10px; /* Puts space between columns (left side) */
width: 65%;
float: left;
background: ; 
/*border: thin solid #000; to see the different columns */
}

/*--------------PARAGRAPH OUT OF NATURAL SEQUENCE-------------*/

p.specialpara {position:static; top :30px; left:20px;} /*Static (default), Relative, Absolute, Fixed*/ 

/*---------------------BULLETS----------------------*/
/* BULLETS Positioning and Attribute - border: 1px solid #000; */

/*bullets block*/

#shortlinelist li { 
	list-style-type: disc;
	list-style-position: outside;
	font-family: Georgia, Geneva, Verdana, Arial, , Helvetica, "Frutiger 47LightCn", "Times-Roman", sans-serif;
	color: #000;
	border: ;
	padding: 0em;
	margin: 0em;
	line-height: 1.3em;
	width: 90%;
}

#bulletlist li { 
	list-style-type: disc;
	list-style-position: outside;
	font-family: Georgia, Geneva, Verdana, Arial, , Helvetica, "Frutiger 47LightCn", "Times-Roman", sans-serif;
	color: #000;
	border: ;
	padding: 0.3em;
	margin: 0em;
	line-height: 1.3em;
	width: 90%;
}

#bullist li { 
	list-style-type: disc;
	list-style-position: outside;
	font-family: Georgia, Geneva, Verdana, Arial, , Helvetica, "Frutiger 47LightCn", "Times-Roman", sans-serif;
	color: #336;
	border: ;
	padding: 0em;
	margin: 0em;
	line-height: 1.5em;
	width: 95%;
}

#bullist {border: 1px dotted #999; 
	width: 460px; 
	margin:0 0 0 1.25em; 
	padding: 2em;
	background: #FFC;
}

/*-------------------------------------*/
/* MENU RIGHT - Without BULLETS Side - menu right side */

#bulletsLeft li { 
	list-style-type: none;
	list-style-position: outside;
	font-family: Verdana, Arial, Georgia, Geneva, , Helvetica, "Frutiger 47LightCn", "Times-Roman", sans-serif;
	color: #669;
	text-indent: .5em;
	border-bottom: solid 2px #A8A582;
	padding: 0.3em 0;
	margin-top: 0.0em;
	width: 160px; 
}

#bulletsLeft li:first-child{border-top: solid 2px #A8A582;} /*line on top on side menu*/

/*ul {border: 1px solid #000; 
	width: 160px; 
	margin:0 0 0 1.25em; 
	padding: 2em;
	background: #FF9;
}*/


/*ul {border:1px solid red; margin:0 0 0 1.25em; padding:0,}
li {border:1px solid green; margin:0; padding:0;}*/

/*---------------------------------------------------------------------------------------*/
/* TOP Positioning and Attribute */
#gotop{
	clear: left;
	font-size: .75em;
	font-family: Verdana, Georgia, Geneva, Arial, Helvetica, "Frutiger 47LightCn", "Times-Roman", sans-serif;
	text-align: left;
}

/* Link attributes at TOP */
#gotop a{
	color: #936; /*link color*/
	text-decoration: bold;
}


/*------------------RIGHT COLUMN floating RIGHT---------------------------- */
#rightcolumn{
	float: left;
	margin-left: -241px; /*Set left margin to -(RightColumnWidth) It was set to -200px*/
	width: 240px; /*Width of right column (it was set to 199px)*/
	line-height: 1.4em;
	background: #EDB; /*pinkish*/
	border-right: solid 1px #000;
	color: #669;
	font-size: .71em;
	font-family: Verdana, Arial, Geneva, Georgia, Helvetica, "Frutiger 47LightCn", "Times-Roman", sans-serif;
}


/* ---------------------------------------- */
/* -----------------FOOTER--------------- */
/* ---------------------------------------- */

/* Footer Positioning and Attribute */

#footer{
	clear: left;
	background: black;
	padding: 2px 0;
	font-size: 60%;
	font-family: Verdana, Arial, Geneva, Georgia, Helvetica, "Frutiger 47LightCn", "Times-Roman", sans-serif;
	width: 100%;
	text-align: center;
	color: #EDB;
}

/* Link attributes at footer --Copyright */
#footer a{
	color: #C90; /*link color*/
	background: ;
}


/* ---------------------------------------- */
/* -------------INLINE ELEMENTS------------ */
/* ---------------------------------------- */

/*DROPCAP First Paragraph Letter*/
.dropthecap{
	float:left;
	margin-top: 0em;
 	font-weight: normal;	
	font-size: 6em;
	font-family:Georgia;
	color: #6F482B;
 	padding-right: .1em;	
 	line-height: 0.8em;	
}

/* ---------------------------------------- */
/* -------------MARGINS within COLS------------ */

/*Wedge to align drop-down menu within container*/
.innermenuspace{
	margin: 260px; /*Margins for main horizontal menu (to provide padding)*/
	margin-top: 0px;
}

/* ---------------------------------------- */
.innerRcol{
	margin: 20px; /*Margins for inner DIV inside RIGHT column (to provide padding)*/
	margin-top: 0px;
}

/* ---------------------------------------- */
.innermargin{
	margin: 35px; /*Margins for inner DIV inside RIGHT column (to provide padding for calculator)*/
	margin-top: 0px;
}

/* ---------------------------------------- */
.innertube{
	margin-left: 40px; /*Margins for inner DIV inside LEFT column (to provide padding)*/
	margin-right: 20px; 
	margin-top: 0px;
}

/* --------------PARAGRAPH TXT QUOTES------------- */
.insetpara{
	margin-left: 2.5em; /*Margins for inner DIV inside MAIN column (to provide padding)*/
	margin-right: 4em; 
	margin-top: 0px;
	letter-spacing: ;
	color: ;
	font-style: ;
	line-height: 1.3em;	
}


/* ---------------------------------------- */

/* Inline atributes applicable to inline elements*/
b{font-size: .75em;} /*Bolding Standard*/
em{color: #000;} /*italics*/
/*strong{display: inline}*/
/*span{display: inline}*/
/*p {border: 2px solid red;}*/
/*span {border:2px solid green;}*/
/* ---------------------------------------- */

/* Blockquote. Margins are assigned clockwise starting at "margin-top." Padding works like 
the "margin" property: padding-top, padding-right, padding-bottom and padding-left. */

blockquote {
	margin: 1.5em 4em 1.5em 4em;
	background: #EDB;
	padding: 0.5em 3em 0.5em 3em;
	border-top: solid 4px #000;
	border-bottom: solid 4px #000;
	color: #6F482B;
	font-style: italic;
	font-size: 1.1em;
	font-family: Geneva, Georgia, Arial, Verdana, Helvetica, "Times-Roman", "Frutiger 47LightCn", sans-serif;	
	line-height: 1.3em;
}

/* ---------------------------------------- */

/* SPAN - Insert Geneva Yellow F90 */

span.color {
	margin-top: ; 
	margin-bottom: ; 
	font-weight: bold;
	font-style: ;
	font-size: 1.2em;
	font-family: Geneva, Georgia, Arial, Verdana, Helvetica, "Frutiger 47LightCn", "Times-Roman", sans-serif;
	color: #603;
	letter-spacing: 0.0em;
	line-height: ;
}

/* ---------------------------------------- */

/* Link attributes always in the following order (l/v/h/a) */
a {
	color: firebrick;
	text-decoration: none;
	outline: none;
	font-size: 100%;
}

a:link {
	text-decoration: none;
	color: #936;
}
	
a:visited {
	text-decoration: none;
	color: #936;
}

a:hover {
	text-decoration: ;
	font-weight: ;	
	color: #C90;
}

a:active {
	text-decoration: none;
	background: ;
	font-weight: ;
	color: #000;
	
}