/*Looks like a lot of blocks but actually hardly any.*/
/* .myName {properties} is just a generic version of element.myName {properties} to reference this use class= not id=. Remember id is unique you use # with id and only once.*/


body 
  {
  margin     		: 20px    			;
  margin-top		: 1%				;
  background 		: #c4c3c3			;
  text-align 		: center  			; 
  }


#head 
  {
  width      		: 740px   			; /* + border = 750px*/
  height     		: 150px   			;
  background 		: #F9F9F9  	   		;
  text-align 		: left     	   		;
  border     		: 5px solid #F9F6Fd   		;
  background 		: #ccc url(../img/TSPBack.jpg)	;
  margin     		: auto                  	;
  }


#main
  {
  width      		: 750px           		;	
  border     		: 0px black solid 		;
  margin     		: auto            		;
  text-align 		: left	       			;
  background    	: #f9f6fd			;
  }


.shadowBottom
  {
  width      		: 758px           		; /*meant to be 750 with 8px right padding, IE adds the padding from shadowRight*/
  border     		: 0px black solid 		;
  margin     		: auto            		;
  margin-top		: 10px 		  		; /*nicked from main, because now shadow is next after head*/
  padding-bottom	: 8px				;
  background 		: #ccc url(../img/shadowBottom.jpg) no-repeat bottom right;
  background-color	: #c4c3c3 			;
  }


.shadowRight
  {
  width      		: 750px           		;
  padding-right		: 8px				;
  background		: #ccc url(../img/shadowRight.jpg) no-repeat top right;
  background-color	: #c4c3c3 			;
  }


#left
  {
  float        		: left    			;
  width        		: 520px   			;
  margin-left  		: 30px    			;
  margin-right 		: 30px    			;
  text-align		: justify			;	
  background-color	: #f9f6fd			;
  display      		: inline  			; /*Fix IE double floated margin*/
  }


#rightMargin 
  {
  float        		: right   			;
  width        		: 139px   			; /*1px for doted border*/
  margin-left  		: 0px    			;
  margin-right 		: 30px    			;
  min-height 		: 0px           		;
  border-left		: 1px dotted #CCCCCC		;
  background-color	: #F9F6Fd			;
  display      		: inline  			; /*Fix IE double floated margin*/
  }


#footer 
  {
  width        		: 690px           		;
  padding-left  	: 30px    			;
  padding-right 	: 30px    			;
  height       		: 25px            		;
  background   		: #F9F6Fd         		;
  text-align   		: center          		;
  border-top		: 1px dotted #CCCCCC		;
  margin 		: auto            		;
  clear			: both				;
  }


/*Notes*/

/*For this layout style to work footer needs to be inside container this allows the container to stretch because the footer isn't floated like the left content and right content is, floated content wont stretch any div that it's inside. The clear both forces the footer to clear both float div and thus stretch the main container, a faux column if needed makes the background look right.*/

/*The minimum height is either that specified on either column (left/right not main) or the content of each column. Note if you do left it won't add right's border.*/


/*Shadow effect is achieved with two containers offset by eight pixels and two background images. The across one must be the correct size because it takes care of two bottom corners. The right background image starts at the top and can go for as long as the picture is. it has to be this way, i tried a full page shadow align to bottom right but the top shadow doesn't work. I've made some transparent png for the future currently some older browsers don't support them so will have to wait til they become obsolete*/

/*Seems to be a problem with padding overlapping in IE look up IE padding stacks, adds up.*/