/* The overall page no matter what the website is and allows you to fill the background of the screen*/
body 
{
    height:auto;
    width: 800px;
    text-align: center;
    background:#111111;
    margin:auto;
}
/* Here we start our page, defining the basic size and characteristics*/
div#MainBody
{
    position: relative;
    float: left;
   /* border-top: 3px solid #F5F3C1;
    border-right: 3px solid #F5F3C1;
    border-bottom: 3px solid #F5F3C1;
    border-left: 3px solid #F5F3C1;*/
    width:800px;

    height:auto;
    background:#DDC284 repeat;
}

/* the horizontal menu starts here */
div#TopMenu {
	position: relative;
	float:left;
	width:794px; /* makes the div full width */
	height:28px;
	background:#773300;
	border-top: 3px solid #F5F3C1;
    border-right: 3px solid #F5F3C1;
   	border-left: 3px solid #F5F3C1;
	font-family:Helvetica;
	font-size:1.00em;	/* SET FONT-SIZE HERE */
	color: #F5F3C1;
	z-index:100;
	}
div#TopMenu ul {
    padding:0;
	margin-left: 0px;/* indents ul from edge of container - NOTE: diff value for IE in hacks below */
	margin-top: 0;
	margin-bottom: 0;	
	z-index:100;	
	}
div#TopMenu li {
	float:left;	/* causes the list to align horizontally instead of stack */
	position:relative; /* positioning context for the absolutely positioned drop-down */
	list-style-type:none;	/* removes the bullet off each list item */
	/*z-index:100;*/
	text-align:center;
	height:30px;
	}
	
div#TopMenu li.first_cell a {
    display:block;
    width:153px;
	padding:5px 0px 0px 4px; /*creates space each side of menu item's text */
	text-decoration:none;	 /* removes the underlining of the link */
	color: #F5F3C1;	/* sets the type color */
    font-weight:bolder;
	z-index:100;
}

div#listmenu li:first-child {
	z-index:100;
	}

div#listmenu li:hover {	
	z-index:100;
	}
div#TopMenu a {
    display:block;
    width:159px;
    height:28px;
	padding:5px 0px 0px 0px; /*creates space each side of menu item's text */
	text-decoration:none;	 /* removes the underlining of the link */
    font-weight:bolder;
	color: #F5F3C1;	/* sets the type color */
	z-index:100;
	}
div#TopMenu a:hover {
	color: #F5F3C1;
	background:#c15200;
	text-decoration: underline;
	}

div#TopMenu li.first_cell a:hover {
	color: #F5F3C1;
	background:#c15200;
	text-decoration: underline;
	}	
/* the menu ends here */

/* This is the start of the second page */
div#InfoBody
{
    position: relative;
    float:left;
    width:800px;
    height:auto;
    background:#DDC284;
}
/*The Home Page styles*/
div#HomePic
{
    position: relative;
	width:794px; /* makes the div full width */
	height:auto;
	float:left;
	background:#DDC284;
	border-top: 3px solid #F5F3C1;
    border-right: 3px solid #F5F3C1;
   	border-left: 3px solid #F5F3C1;
   	border-bottom: 3px solid #F5F3C1;
   	color: #F5F3C1;
	z-index:100;
	padding-bottom:100px;
    }
div#HomePic img:HomePageTitle
{
    right:auto;
    float:right;

}
/* The left side or text area */
div#LeftSide 
{
    font-family: Verdana;
    font-size: 95%;
	float: left;
	position: relative;
	width: 395px;
	min-width: 360px;
	height:auto;
	padding: 40px 0px 0px 0px;
	margin: 0;
	background:#DDC284;
	border-top: 3px solid #F5F3C1;
	border-left: 3px solid #F5F3C1;
}
/* The right side and picture */
div#RightSide 
{
    font-family: Verdana;
    
	float: right;
	position: relative;
	width: 395px;
	height: inherit;
	padding: 40px 0px 0px 4px;
	margin: 0;
	background:#DDC284 repeat;
	border-top: 3px solid #F5F3C1;
    border-right: 3px solid #F5F3C1;
}
/* For the current issue picture or image space */
div#ctl00_Issue_CurrentImage
{
    width: 375px;
    position: relative;
    float: none;
	padding: 40px 0px 0px 4px;
    background: #DDC284;
    }

div#WritingArea 
{
    font-family: Verdana;
    font-size: 95%;
   	float: left;
	position: relative;
	width: 795px;
	height:auto;
	padding: 40px 0px 0px 0px;
	margin: 0;
	background:#DDC284;
	border-top: 3px solid #F5F3C1;
	border-left: 3px solid #F5F3C1;
	border-right: 3px solid #F5F3C1;
	text-align:left;
    }
    div#ctl00_UserSpace_WritingBlock
{
    font-size: 95%;
    width: 760px;
    color: #552400;
    padding-left: 20px;
    }
    div#ctl00_UserSpaceSlim_WritingBlockSlim
{
    font-size: 95%;
    width: 375px;
    color: #552400;
    float: left;
    padding-left: 20px;
    padding-bottom: 40px;
    }
    div#DeadLineBlock
    {
    height:auto;
    background:#DDC284;
    }
    div#ctl00_DeadLine_DeadLineSpace
{
    float: none;
	position: relative;
	height:inherit;
	padding: 40px 0px 0px 0px;
	margin: 0;
	background:#DDC284;
	color: #552400;
    }

/* the horizontal Bottom menu starts here */
    div#BottomMenu {
	position: relative;
 	width:794px; /* makes the div full width */
	height:28px;
	float:left;
	background:#DDC284;
	border-left: 3px solid #F5F3C1;
    border-right: 3px solid #F5F3C1;
    border-bottom: 3px solid #F5F3C1;
    font-family:Helvetica;
	font-size:1.00em;	/* SET FONT-SIZE HERE */
	color: #552400;
	z-index:100;
	}
div#BottomMenu ul {
	padding: 0;
	margin-left: 0px;/* indents ul from edge of container - NOTE: diff value for IE in hacks below */
	margin-top: 0;
	margin-bottom: 0;	
	z-index:100;	
	}
div#BottomMenu li {
	float:left;	/* causes the list to align horizontally instead of stack */
	position:relative; /* positioning context for the absolutely positioned drop-down */
	list-style-type:none;	/* removes the bullet off each list item */
	z-index:100;
	text-align:center;
	vertical-align:middle;
	height:30px;
	}
	
div#BottomMenu li.first_cell a {
    display:block;
    width:153px;
	padding:0px 0px 0px 4px; /*creates space each side of menu item's text */
	text-decoration:none;	 /* removes the underlining of the link */
	color: #552400;	/* sets the type color */
    font-weight:bolder;
	z-index:100;
}

div#listmenu li:first-child {
	z-index:100;
	}

div#listmenu li:hover {	
	z-index:100;
	}
div#BottomMenu a {
    display:block;
    width:159px;
    height:28px;
	padding:0px 0px 0px 0px; /*creates space each side of menu item's text */
	text-decoration:none;	 /* removes the underlining of the link */
	color: #552400;	/* sets the type color */
    font-weight:bolder;
	z-index:100;
	}
div#BottomMenu a:hover {
	color: #F5F3C1;
	background:#D2AE5B;
	text-decoration: underline;
	}

div#BottomMenu li.first_cell a:hover {
	color: #F5F3C1;
	background:#D2AE5B;
	text-decoration: underline;
	}	
/* the Bottom menu ends here */

/*To fill a page with an image*/
/*background: url(/images/BlueBackGround.jpg) repeat;*/

/* Colors
33ffcc Robin's egg
33ffff Blue background
552400 Brown
96ccff Better Blue 
url(/images/BlueBackGround.jpg) a cut of the background pattern.
Used paint, cut a square of the pattern, past it into an empty pallet,
shrink the pallet to be the same size as the square and save it as a jpg.
Blue in Logo - Darker blue
R 0     00
G 181   85
B 204   CC

Light Blue Background - Purple
R 140   8C
G 210   78
B244    F4

Yellow (from Issue 1 sub-title, though I recommend the brown because it can 
be seen more easily and that's what we used in Issue 2 and 3) R 245 G 243 B 193
Yellow
R 245   F5
G 243   F3
B 193   C1

Brown - Robin's Egg
R 138   8A
G243    F3
B 193   C1

Orange Yellow (which I'd use in place of the yellow, maybe...) - Redish Brown
R241    F1
G 185   89
B 74    4A
*/