/*CSS Stylesheet for "Walter Ward Dog Training" website, version 1.  

------------------------------------
This stylesheet includes liberal use of "Cycloid's Tiny Box Model Hack," found on http://css-discuss.incutio.com/?page=BoxModelHack.  This hack seems to fix the compatibility probs I'm having with making pages look good on both Firefox and IE. It uses a quirk in the way that Windows IE 5,5.5 and 6 (in quirks mode) read the css file (IE5.2 on the mac is unaffected and uses the correct box model). They will accept key/value pairs where the value is enclosed in quotes:

div
{
   padding: 10px;
   width:   180px;
   width:   "200px";
}  

This breaks the W3C's rules for CSS, unfortunately, so if producing W3C validated code is more important to you than simplicity you have to use another method (which I haven't found). As the last width rule is seen by non IE browsers as being malformed, it is skipped, and the first width declaration is used instead. 
------------------------------------

Make all body text black in color, 10-point, Verdana, with 16-point vertical spacing between lines of text and 10-point margins.  Use ltgrbkgr.gif as the background. */

body {
	font-size:10pt;
	font-family:Verdana, ariel;
	font-weight:bold;
	color:black;
	line-height:16pt;
	margin-left:10pt;
	margin-right:10pt;
	background-color:white;
	}

/*Create black background box for homepage banner. */
div.banner {
	position:absolute;
	z-index:10;
	left:50px;
	top:30px;
	width:760px;
	width:"780px";
	height:100px;
	height:"150px";
	background-color:black;
	padding-top:50px;
	padding-right:10px;
	padding-left:100px;
	}
	
/* Create alternate background box for banner that is smaller. */
div.banner2 {
position:absolute;
	z-index:10;
	left:50px;
	top:30px;
	width:750px;
	width:"780px";
	height:59px;
	height:"100px";
	background-color:black;
	padding-top:20px;
	padding-top:"40px";
	padding-bottom:25px;
	padding-bottom:"0";
	padding-right:10px;
	padding-left:100px;
	line-height:25pt;
	}
	
/*Create long, red background bar on left side of homepage. */			
div.menu {
	position:absolute;
	z-index:1;
	left:10px;
	top:10px;
	width:175px;
	height:670px;
	height:"900px";
	background-color:#FF0000;
	padding-top:250px;
	}
	
/*Create alternate long, red background bar on left side of page. */
div.menu2 {
	position:absolute;
	z-index:1;
	left:10px;
	top:10px;
	width:150px;
	height:670px;
	height:"900px";
	background-color:#FF0000;
	padding-top:250px;
	}
	
/*Create alternate, even longer, red background bar on left side of page for use on photo page. */
div.menu3 {
	position:absolute;
	z-index:1;
	left:10px;
	top:10px;
	width:150px;
	height:6000px;
	height:"6225px";
	background-color:#FF0000;
	padding-top:250px;
	}

/*Create alternate long, red background bar on left side of page for use on Streetwise page. */
div.menu4 {
	position:absolute;
	z-index:1;
	left:10px;
	top:10px;
	width:150px;
	height:770px;
	height:"1100px";
	background-color:#FF0000;
	padding-top:250px;
	}
	
	
/*Create small black bar for homepage menu and place on top of left-side bar. */			
div.menuinner {
	position:absolute;
	z-index:2;
	left:50px;
	top:200px;
	width:160px;
	height:160px;
	height:"200px";
	background-color:black;
	padding-top:30px;
	padding-top:"45px";
	}
	
/*Create alternate menu bar. */
div.menuinner2{
position:absolute;
	z-index:2;
	left:50px;
	top:300px;
	width:160px;
	height:170px;
	height:"200px";
	background-color:black;
	padding-top:15px;
	padding-top:"35px";
	}
	
/*Create another alternate menu bar. */
div.menuinner3{
position:absolute;
	z-index:2;
	left:50px;
	top:375px;
	width:160px;
	height:170px;
	height:"200px";
	background-color:black;
	padding-top:15px;
	padding-top:"35px";
	}

/*Create background box for main homepage info and increase text font size to 11 pt. */			
div.info {
	position:absolute;
	z-index:0;
	left:201px;
	top:190px;
	width:380px;
	width:"500px";
	height:700px;
	background-image:url(images/silver_pattern.jpg);
	padding-top:50px;
	padding-right:50px;
	padding-left:75px;
	font-size:11pt;
	}
	
/*Create alternate, larger background box for page info. Do not increase font size as in homepage info box. */
div.info2 {
position:absolute;
	z-index:0;
	left:175px;
	top:145px;
	width:550px;
	width:"600px";
	height:750px;
	background-image:url(images/silver_pattern.jpg);
	padding-top:30px;
	padding-right:50px;
	padding-left:50px;
	}

/*Create alternate background box for div.info2 that is longer for use on photo page.*/	
div.info3 {
position:absolute;
	z-index:0;
	left:175px;
	top:145px;
	width:550px;
	width:"600px";
	height:6025px;
	background-image:url(images/silver_pattern.jpg);
	padding-top:30px;
	padding-right:50px;
	padding-left:50px;
	}
	
/*Create alternate background box for div.info2 that has padding on top to move body text down some for use on links and training page.*/
div.info4 {
position:absolute;
	z-index:0;
	left:175px;
	top:145px;
	width:550px;
	width:"600px";
	height:710px;
	background-image:url(images/silver_pattern.jpg);
	padding-top:75px;
	padding-right:50px;
	padding-left:50px;
	}

/*Create alternate background box for div.info2 that is longer for use on Results and Streetwise page but not as long as photo page*/
div.info5 {
position:absolute;
	z-index:0;
	left:175px;
	top:145px;
	width:550px;
	width:"600px";
	height:910px;
	background-image:url(images/silver_pattern.jpg);
	padding-top:30px;
	padding-right:50px;
	padding-left:50px;
	}


/*Add black box for background for photo on right side of page. */			
div.photobox1 {
	position:absolute;
	z-index:3;
	left:670px;
	top:225px;
	top:"235px";
	border:20px solid black;
	border:"25px solid black";
	background:black;
	}

/*Add second black box for bacground for photo on right side of page. */			
div.photobox2 {
	position:absolute;
	z-index:4;
	left:670px;
	top:545px;
	top:"535px";
	border:20px solid black;
	border:"25px solid black";
	background:black;
	}

/*Create right-side box for non-homepage. */	
div.rightbox {
position:absolute;
	z-index:4;
	left:690px;
	top:520px;
	width:150px;
	width:"180px";
	height:125px;
	background-color:black;
	padding-top:20px;
	padding-top:"10px";
	padding-left:36px;
	}

/*Create right-side box for non-homepage that is a little lower on page. */	
div.rightbox2 {
position:absolute;
	z-index:4;
	left:690px;
	top:680px;
	width:150px;
	width:"180px";
	height:125px;
	background-color:black;
	padding-top:20px;
	padding-top:"10px";
	padding-left:36px;
	}


/*Create black center box to overlay info box. */	
div.centerbox {
	position:absolute;
	z-index:6;
	left:275px;
	left:"250px";
	top:250px;
	width:400px;
	width:"450px";
	height:550px;
	background-color:black;
	padding-top:50px;
	padding-right:100px;
	padding-left:75px;
	font-size:11pt;
	color:red;
	}

	
/*Create and place black footer bar at bottom of page. */		
div.footer {
	position:absolute;
	z-index:3;
	left:100px;
	top:900px;
	top:"870px";
	height:30px;
	height:"75px";
	width:770px;
	background-color:black;
	padding:25px;
	padding:"30px";
	text-align:center;
	}
	
/*Create black footer bar that will align with bottom of photos page. */		
div.footer2 {
	position:absolute;
	z-index:3;
	left:-100px;
	top:100%;
	height:30px;
	height:"75px";
	width:725px;
	width:"770px";
	background-color:black;
	padding:30px;
	text-align:center;
	}
	
/*Create black footer bar that will align with bottom of Streetwise page. */		
div.footer3 {
	position:absolute;
	z-index:3;
	left:100px;
	top:1000px;
	top:"1070px";
	height:30px;
	height:"75px";
	width:725px;
	width:"770px";
	background-color:black;
	padding:30px;
	text-align:center;
	}
	
/*Create h1-level head that is centered and has red text. */

h1.centered {
	color: red;
	text-align:center;
	}
	
	
/*Create h2-level head that is centered, has red text, and 25-point vertical spacing between lines of text. */			

h2.centered {
	color:red;
	text-align:center;
	line-height:25pt;
	}

	
/*Create style to center text on page -- used on Streetwise page.*/	
.center { text-align:center; }

/*Create style to color elements red. */
.red { color:red;}

/*Create special header border for photos page. */
h3.border {
	border-top:"2px dotted black";
	}

/*Create float for images on photos page. */
.floatleft { 
	float:left; 
	padding:15px;
	border-left:2px dotted black;
	}

/*Create float for images on photos page. */	
.floatright {
	float:right;
	padding:15px;
	border-right:2px dotted black;
	border-bottom:2px dotted black;
	}

/*Create regular link style for links in menu and footer boxes. */	
a:link, a:active {
		color:red;
		font-weight:bold;
		text-decoration:none;
		}
		
a:hover {
		background-color:silver;
		font-weight:bold;
		text-decoration:none;
		}
		
a:visited {
		color:red;
		text-decoration:none;
		}

/*Create alternate link style for links in main text flow, like on home page. */		
a.subdued:link, a.subdued:active {
	color:black;
	text-decoration:underline;
	}
	
a.subdued:hover {
	background-color:red;
	}
	
a.subdued:visited {
	color:black;
	text-decoration:underline;
	}
	

/*End */