/* Comments are more than welcome in style sheets !! */

#topbar1 
{
	position:absolute;
        left: 140px;
        top:  0px;
        width: 788px;
        height:45px;
        z-index: 2;
        background-color="#FFFFFF"

}		

#topbar2 
{
	position:absolute;
        left: 150px;
        top:  55;
        width: 768px;
        height:17px;
        z-index: 2;
        background-color="#FFFFFF"

}

#topbar2case 
{
	position:absolute;
        left: 140px;
        top:  045;
        width: 788px;
        height:45px;
        z-index: 2;
        background-color="#FFFFFF"

}

#cornerlogo
{
	position:absolute;
        left: 0px;
        top: 0px;
        width: 130px;
        height: 85px;
        z-index: 1;       
        background-color="CC99FF"
        
}		
	

#sidebar
{
	position:absolute;
        left: 10px;
        top: 110px;
        width: 110px;
        height: 515px;
        z-index: 5;
	background-color="#FFFFFF";
		
	
}		


#sidebarcase
{
	position:absolute;
        left: 0px;
        top: 100px;
        width: 130px;
        height: 535px;
        z-index: 2;
	background-color="#FFFFFF";
		
	
}

#crossbar1
{
	position:absolute;
        left: 0px;
        top: 85px;
        width: 948px;
        height: 10px;
        z-index: 3;
	background-color="#FFFFFF";
		
	
}

#sideline1
{
	position:absolute;
        left: 130px;
        top: 0px;
        width: 10px;
        height: 625px;
        z-index: 3;
	background-color="#FFFFFF";
		
	
}

#content
{
	position:absolute;
        left: 160px;
        top:  115px;
        width: 743px;
        height: 500px;
        z-index: 4;
        border=0;
        background-color="#FFFFFF";
	font-size: 12pt;
	color:#6666DD;
	overflow: auto;
	font-family: Comic Sans MS, Garamond, sans-serif;
}	

#contentback
{
	position:absolute;
        left: 140px;
        top:  100px;
        width: 788px;
        height: 535px;
        z-index: 3;
        background-color="#FFFFFF";
	font-size: 12pt;
	font-color="#000000";
}




#ac_bedding
{
	position:absolute;
        left: 24px;
        top:  165px;
        width: 150px;
        height: 200px;
        z-index: 7;
}

#ac_sleeping
{
	position:absolute;
        left: 274px;
        top:  165px;
        width: 150px;
        height: 200px;
        z-index: 7;
}

#ac_potty
{
	position:absolute;
        left: 524px;
        top:  165px;
        width: 150px;
        height: 200px;
        z-index: 7;

}
 
 
 
#act_paint
{
	position:absolute;
        left: -20px;
        top:  165px;
        width: 150px;
        height: 200px;
        z-index: 7;

}
  
#act_clay
{
	position:absolute;
        left: 80px;
        top:  165px;
        width: 150px;
        height: 200px;
        z-index: 7;

}
 
#act_cooking
{
	position:absolute;
        left: 180px;
        top:  165px;
        width: 150px;
        height: 200px;
        z-index: 7;

}
 
#act_music
{
	position:absolute;
        left: 280px;
        top:  165px;
        width: 150px;
        height: 200px;
        z-index: 7;

}
 
#act_construction
{
	position:absolute;
        left: 380px;
        top:  165px;
        width: 150px;
        height: 200px;
        z-index: 7;

}

#act_jigsaws
{
	position:absolute;
        left: 480px;
        top:  165px;
        width: 150px;
        height: 200px;
        z-index: 7;

}

#act_imaginative
{
	position:absolute;
        left: 580px;
        top:  165px;
        width: 150px;
        height: 200px;
        z-index: 7;

}
 
#act_homecorner
{
	position:absolute;
        left: -20px;
        top:  295px;
        width: 150px;
        height: 200px;
        z-index: 7;

}
 
#act_books
{
	position:absolute;
        left: 80px;
        top:  295px;
        width: 150px;
        height: 200px;
        z-index: 7;

}
  
#act_outdoor
{
	position:absolute;
        left: 180px;
        top:  295px;
        width: 150px;
        height: 200px;
        z-index: 7;

}
 
#act_cultural
{
	position:absolute;
        left: 280px;
        top:  295px;
        width: 150px;
        height: 200px;
        z-index: 7;

}
 
#act_french
{
	position:absolute;
        left: 380px;
        top:  295px;
        width: 150px;
        height: 200px;
        z-index: 7;

}

#act_computing
{
	position:absolute;
        left: 480px;
        top:  295px;
        width: 150px;
        height: 200px;
        z-index: 7;

}

#act_sand
{
	position:absolute;
        left: 580px;
        top:  295px;
        width: 150px;
        height: 200px;
        z-index: 7;

}


#textdisplay 
{
	position:absolute;
        left: 0px;
        top:  340px;
        width: 733px;
        height: 150px;
        z-index: 6;
  
}

#lowtextdisplay 
{
	position:absolute;
        left: 5px;
        top:  440px;
        width: 700px;
        height: 30px;
        z-index: 6;
  
}

#workingbox 
{
	position:relative;
        left: 0px;
        top:  0px;
        width: 705px;
        height: 470px;
        z-index: 7;
        overflow: auto;
}

#smallworkingbox 
{
	position:relative;
        left: 0px;
        top:  0px;
        width: 705px;
        height: 270px;
        z-index: 7;
        overflow: auto;
}


p.atitle {  font-size: 25pt; color:#990033 } 
p.key {  font-size: 12pt; color:#4444BB} 
p.left {  text-align: left; color:#000000} 

b.mt { font-size: 14pt; color:#800000}
td.reg { color: lime; font-size: 6pt; font-family: helvetica, impact, sans-serif }

tr.reg { color: lime;  }

P.norm { font-size: 12pt; font-family: Comic Sans, sans-serif, Garamond }

table.reqdisp { font-size: 10pt; color:#6666DD; font-family: Comic Sans MS, Garamond, sans-serif; }


/*
	Learning
*/

/*

position: relative; left: 33px; top: -45px; z-index: 1 
*/
		
/*
	Text
	
	font-family 
		here it also uses priority. Sans-serif is a good last resort
		H2 { font-family: helvetica, impact, sans-serif } 
		
		Good default fonts.
		serif (probably Times) 
		sans-serif (probably Arial or Helvetica) 
		cursive (probably Comic Sans) 
		fantasy (probably Ransom) 
		monospace
		
		If two words use " ", ' ' if already in quotes + always lower case.
		font-family should be last
		
	
	font-size 
		P { font-size: 16pt }	pt is best to use 
		B { font-size: 1.5em}   em alters current text size as a multiplier.
		B { font-size: 300% }   similar to em but better
		
	
	font-weight 
		P { font-weight: bold } 
		P { font-weight: 100 }  One hundred to 900 with 600 being bold.
	
	font-style 
		H3 { font-style: italic } 
			also oblique and normal depening on text
		
	font-variant 
		H2 { font-variant: small-caps } 
		rarely supported
		
	text-transform
		B { text-transform: uppercase } 
		also	capitalize
			lowercase
			none
	
	text-decoration 
		B { text-decoration: underline } 
		line-through 
		overline
		none

		To change visited links predefined classes to be changed !!		
			A:link { text-decoration: none }
			A:active { text-decoration: none }
			A:visited { text-decoration: none } 
			
		Married with HTML - <A HREF="http://www.webmonkey.com/">Link</A>


	font 
*/

*/

	Units
 
	in (inches) 
	cm (centimeters) 
	mm (millimeters) 
	pt (points) 
	pc (picas) 
	em (ems) 
	ex (x-height) 
	px (pixels) 

/*


/*
	Spacing
	
	word-spacing 
		H3 { word-spacing: 1em }
		Unsupported
		
	letter-spacing 
		H3 { letter-spacing: 10px }
		
	line-height 
		B { line-height: 16pt } 
		B { font-size: 12pt; line-height: 2 } 
			It multiplies font-size by the number. So in this example, the line-height is 24 points
		
	text-align 
		H4 { text-align: center } 
		left means the element will be left-aligned. 
		right means the element will be right-aligned.
		center means the element will be centered.
		justified
		
	vertical-align 
		H4 { vertical-align: sub }
		super
		
	text-indent 
		P { text-indent: 2em } 
		
	margin-top, margin-left, etc. 
		H4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px } 
		overlap elements by using negative margin values
		
	padding-top, padding-left, etc.
		H4 { padding-top: 20px; padding-bottom: 5px; padding-left: 100px; padding-right: 55px } 
		
	border-width, border-color, border-style, etc. 
		H4 { border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px } 
		IMG { border-width: 1in }  sets all in one go
		
		To set color too 
			H4 { border-color: #FF0033; border-width: thick } 
			
		border-style: double; 
		solid
		dotted
		dashed
		
		Border style MUST be USED !!
		
	float 
		H4 { float: left } 
		wraps text around images, oither text etc
		
	clear
		P { clear: left } 
		right
		both
			stops float wrapping where you don't want it


	To create a shadow effect - cool
		P.shadow { margin-left: 2px; color: #BBBBBB; font-size: 28pt; font-weight: bold; font-family: arial }
		P.text { margin-top: -64px; color: #339933; font-size: 28pt; font-weight: bold; font-family: arial } 


*/

*/
	Colour
	
	16 colors - 	aqua, black, blue, fuchsia, gray, green, lime, maroon, 
			navy, olive, purple, red, silver, teal, white, and yellow. 
	
	color 
		B { color: #333399 } 
		
	background-color 
		P.yellow { background-color: #FFFF66 } 
		transparent
		
	background-image 
		B { background-image: url(/webmonkey/98/15/stuff3a/background.gif) } 
		none 
		When you specify a background image, it's a good idea to also specify a 
		background color using, obviously, the background-color property. This solid 
		color will appear while the image loads, and it will also show through any
		transparent regions of the image
	
	background-repeat 
		P { background-repeat: no-repeat; background-image: url(/webmonkey/98/15/stuff3a/background.gif) } 
		repeat-x 
		repeat-y
		repeat
		
	background-attachment 
		BODY { background-attachment: fixed; background-image: url(/webmonkey/98/15/stuff3a/background.gif) } 
		scroll
			Whether images scroll or move with scroll bars
		
	background-position 
		P { background-position: center bottom; background-image: url(background.gif) } 
			Alignment of images
			Keyword values 
			Keywords are nice and easy to use as values: 
			
			top  
			bottom 
			left  
			right 
			center : centers the image horizontally (if used before another keyword) or vertically (if used after). 
			
			Length values 
			Length values give you even more control over where a background image is placed. 
			You can declare horizontal and vertical starting points very precisely, like so: 
			
			P { background-position: 70px 10px; background-repeat: repeat-y; background-image: url(background.gif) } 
			This paragraph shows the above rule in action.
			The background GIF is placed 70 pixels across and 10 pixels down from the upper-left corner of the "box" 
			that makes up this paragraph. And since I've set background-repeat: repeat-y, the GIF tiles only 
			vertically behind the text. Funky

			P { background-position: 75% 50%; background-image: url(background.gif) } 
		
	background 

	How could you use CSS to guarantee that a company's logo always appears at the bottom 
		right of the browser window, no matter where on a page a user scrolls, and no matter what the
		size of the browser window is? 
	Answer: 
		By applying a background image to the <BODY> tag, and making sure that graphic displays at the
		bottom right of the page, remains fixed, and doesn't tile at all. 

	Here's the CSS rule for the background image you see in this window: 

	BODY { background: url(TSDesignlogo.gif) white no-repeat bottom right fixed } 


	

/*

*/
	positioning and layering

	position 
		H4 { position: absolute; left: 100px; top: 43px } 
			absolute in page
		I { position: relative; left: 40px; top: 10px } 
			Relative to natural flow
		static undoes all positioning
		
	left 
	top 
	
	width 
		DIV { position: absolute; left: 200px; top: 40px; width: 150px } 
		The width property works only on absolutely positioned elements. 
		You can artificially stretch or compress a graphic by setting width
	
	height 
		DIV { position: absolute; left: 200px; top: 40px; height: 150px } 
		Same as width
		
	overflow
		DIV { width: 150px; height: 150px; overflow: scroll } 
		If content is larger than box you've given with width and height
		
		visible 
			all the content will be displayed, even if it goes outside the declared boundaries of the box.
		
		hidden 
			the browser clips off whatever content goes "over the line." 
			That is, it won't display part of the content.
		
		auto
			the content will be clipped, but this time the browser will display a scrollbar
			if it's needed, so the user can get to the rest of the content.
		
		scroll  the content will be clipped, but this time the browser will always display a scrollbar, 
			even if it's not required. 

	
	visibility 
		H4 { visibility: hidden } 
		visible
		inherit 
		
	clip 
		H2 { clip: rect(10px 200px 100px 40px) } 
		Clips image with rectangle. Uses space
		Shows area that is clipped.
		
	z-index 
		H2 { position: relative; left: 10px; top: 0px; z-index: 10 }
		H1 { position: relative; left: 33px; top: -45px; z-index: 1 } 
		Specifies a priority of what should be drawn on top.



/*