/*Lessons in css taken from http://www.projectseven.com/tutorials/css/css_td/index.htm*/

body {
	background-image: url(Assets/Grass-wider.jpg);
	/*This sets your page background image.*/
	
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;/* Was Georgia, "Times New Roman", Times, serif */

	font-size: 14px;
	/* This sets the default font size for your entire page. To change text size,
	all you have to do is change the font-size value in the body selector.
	If we later set font sizes for our table cells to a proportional (%) size, 
	then the only size we ever need to edit is the one in the body rule, 
	all changes will cascade down. Thus, one setting can control all font sizes throughout every page of your site. */

	margin: 0; /*originally 0px 10%;*/
	/*sets your top and bottom page margins to zero and your left and right margins to 10%.
	Any content you enter on your page will fill 80% of a browser's available window width,
	and will expand and contract as the window is resized.*/
	/*Converting the Layout to Full-Width - Change the margin property in the body selector from 0 10% to simply 0*/
	/*If you want you layout to be fixed to a width of 720px, Change the margin property in the body selector
	from 0 10% to simply 0 and Add a width property to the #maintable selector and set it to 720px:*/

	padding: 0px;
	/*sets your page padding to zero to accomodate Opera, which renders pages with a default padding of about 12px.*/
}
table {
	text-align: center;
	margin-right: auto;
	margin-left: auto;

}
table.center {margin-left:auto; margin-right:auto;}

td, p, ul {
 	font-family: Arial, Helvetica, sans-serif;/* Was Georgia, "Times New Roman", Times, serif */
 }
/*Because Netscape 4 does not understand Font-Family on the body selector,
we need to assign our font to more specific selectors. As your page evolves you can
add more tags as necessary. To add a new tag, add a comma after the last one, then add the new tag*/
p{
	font-size:small;
	text-align: justify;
}
ul {
	list-style-type: none;
	/*width: 100%; I don't know why this was set to 100%*/
}

#mainTable td {
 	padding: 20px;/*sets the padding for each table cell inside the table.
	 Although Netscape 4 does not honor this property on a table tag, we do not need to hide it
	 because it will not cause problems... it will simply be ignored.
	 You may be wondering why we've bothered to set this rule since we have assigned 20px padding
	 directly on the <table> tag. There are two reasons. First, Netscape 4 does honor padding
	 set directly on the tag and, second, it gives us the opportunity to change padding (if the need arises)
	 for modern browsers via CSS.*/
}
 
#mainContent{
	border-left: 2px dotted #333;
	font-size: 14px;	/*/*/
	font-size: small; /* */
	text-align: justify;
}
/*#maincontent defines the main table cell. The left border is set to 2px dotted #333 (dark gray).
Netscape 4, of course, completely ignores this... but it causes no problems and does not need to be hidden.
Font-size is set to 14px for Netscape 4 and to 100% for modern browsers. As you recall, we set the font-size on
the body element to 14px, so modern browsers interpret this rule as being 100% of 14px.
We hide the % size from Netscape 4 because it just does not handle this unit very well.*/

#mainContent{
	padding: 20px;
	vertical-align: top;
	text-align: left;
	width: 650px;
}

#mainContent img{
	margin: 10px;
}
/*this is my coding to put some space around the images in the mainContent cell*/
#mainContent ul{
	list-style-type: disc;
	font-size: small;

}

#diaryTable {
	text-align:left;
	float: left;
}
#diaryTable td {
	vertical-align: top;
	text-align: left;
	padding: 5px;
}
 
#diaryTable img td{
	padding: 10px;
}

#mainTable {
	width:850px;/*width: 720px;this didn't exist until I changed it so that the main table adopted a 'fixed' width*/
	
	border: 0px none #000000;/*was border: 1px solid #000000;*/
	/*/*/line-height: 1.5em; /* */
    /*sets a 1px black border (which Netscape 4 ignores) and line-height to a nice, spacious 1.5em units.
	The nested double comments around the declaration hides the style from Netscape 4, which does not do
	very well with line-height. An em unit is a proportional measure that maintains a relationship based
	on the size of the font.*/
}
 
#sidebar{
	width:200px;
	/*if you want sidebar to be "fluid", then change the width in the #sidebar selector from 200px to 30%*/
	font-size:12px;
	/*/*/font-size:85%;/* */
/*#sidebar serves to fix the width of the left table cell.
Font-size is set to 12px for Netscape 4 and 85% for modern browsers. 
The 85% is based on the body element's 14px font-size (14px times 85% = 11.9px).
Of course, a browser will round 11.9px up to 12px.*/
	vertical-align:top;
	
	padding: 20px; /*this is my coding*/
}

#header {
	color: #CCCCCC;
	background-image: url(Assets/dsw2.gif);
 }
/*#header sets the background color of the header cell to #333333 (dark gray),
sets text color to #CCCCCC (light gray).*/ 

#header img{
	padding: 10px;
}

#mainContent img{
	padding: 10px;
}
#footer {
 	background-color: #999999;
 	color: #CCCCCC;
 }
/*#footer sets the footer cell background color, text color, to the same values as the header cell.*/

#sidebar a{
	/*/*/padding: 3px;
	display: block;
	border: 2px dotted #CCC;
	text-decoration: none;
	line-height: 1em;
	width:160px; /* */
}
/*This rule defines the <a> tag inside the sidebar.
The properties in this rule are what make each link look and act like a button.
Padding provides a bit of space around the link inside the 2px dotted border we are defining.
Display: block makes the entire width (in this case 160px) clickable. We turn underlining off
(text-decoration: none), and we set line-height to 1em (to turn off the 1.5em line-height assigned
to the parent #mainTable element). The entire rule is wrapped inside nested comment tags to hide
everything from Netscape 4, because any one of the properties defined would cause a problem in that browser.*/

#sidebar a:link, #sidebar a:visited {
	color: #666;
}
/*This multiple selector rule defines the same color (#666 or medium gray)
to both unvisited and visted links inside the #sidebar element.*/

#sidebar a:hover, #sidebar a:active {
	color:#FFFFFF;
	background-color: #cc3300;
	border: 2px solid #000;
}
/*This rule sets the hover (mouse over) and active (mouse being clicked) styles for #sidebar links.
We are changing the color from medium gray to white (#FFFFFF) and we are also assigning a
background-color #CC0000 (deep red). We are also changing the border from dotted gray
to solid black for emphasis. Note that when a border is used on the hover or active states,
a border of the same width should be used on all other link states to prevent the screen and your
layout from "jumping". Netscape 4 completely ignores hover and active states so we do not have to hide them.*/

#sidebar ul{
	/*/*/padding-left:0em;
	margin-left: 0em;
		
		list-style-type: none;/* */
}
/*This rule sets the left offset of a bulleted list to 1em (the width of the letter "m"),
which seems to us to be a lot nicer than the default left offset.
XXXXX I ChANGED THIS TO 0em to get list centred in line with the IMAGES XXXXX
Because some browsers calculate ul offsets based on padding, while others use margin, we declare
both padding and margin. We also turn off rendering of the bullet character by setting list-style-type to "none".
This rule is completely hidden from Netscape 4 because it would cause problems otherwise.*/

#sidebar li{padding-left:1em;
			margin: 0px 0px 6px 0px;}
/*This rule sets the bottom margin of the l<li> element to 6 pixels for all lists
inside the #sidebar element. This means that since each link is a list item, each link will have
6 pixels of space from its bottom to the top of the next link (Netscape 4 will pose problems if
it tries to interpret this rule, so we hide it from that browser).*/

#sidebar img{
	align: center;
	margin: 10px;
}
/* this is my coding*/
h1:first-child {margin-top: 0;}/*starts first h1 in TD flush top*/
h2:first-child {margin-top: 0;}/*starts first h2 in TD flush top*/
/*Modern browsers render a default top margin for heading (and paragraph) elements.
We want the first instance of the h1 and the h2 element in a given table cell to be flush with
the top of the cell. The first-child selector does just what we want. In our main cell, for
example, h1:first-child affects only the first h1 element inside the <td> tag*/

 h1 { font-size: 160%; }
 h2 { font-size: 140%; }
 /*Remember that our base font-size (on the body element) is 14px.
 The font-size for our main content cell is 100%, so it too is 14px.
 The percentage sizes assigned to the h1 and h2 elements within the main cell are,
 therefore, based upon a percentage of 14px. That is, the h1 element is 14px times
 160% = 22.4px. An h2 element in the sidebar is calculated a bit differently because
 the #sidebar element has a font-size of 85% of 14 px... or 11.9 pixels. An h2 element
 in the sidebar cell, therefore, would be 11.9px times 140% = 16.66 pixels.
 Alternatively, an h2 element in the main cell would be 14px times 140% = 19.6 pixels.*/
  
#current a {
 	color: #CC0000 !important;
 	/*/*/background-color: #ffcc66!important;
 	border: 2px solid #CC0000 !important; /* */
 }
/*This rule sets text color, background color, and border for any link inside a list
item to which is assigned the ID: current. We are using the !important directive
so that modern browsers give the rule's values precedence over competing rules.
Finally, we are hiding the background-color and border properties from Netscape 4 to prevent problems.*/



html {overflow-y: scroll;}
/*ensures the vertical scroll bar is always visible - code from http://www.mediacollege.com/internet/css/scroll-always.html*/
#newsTable{
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
}.NewsHeadline {
	color: #F00;
}
.smalltext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #0000FF;
}
.DogName {
	color: #00F;
}
NewsTitle {
	color: #F00;
}
#mainTable  tr #mainContent #newsTable tr td h5 {
	color: #F00;
}