/* Header and footer.
				Define the background graphics etc.
				There are two headers so that if you need, you can have two graphics in the
				header. One in the top left, and one in the top right perhaps.
		 */
			
		#header1 {
			margin:0; padding:0;
			background-color: #CCCCCC;
			background-image: url(img/header/header_stripes_tile.jpg);
			background-repeat: repeat-x;
			height: 123px;
			
		}	
		#header2 {
			margin:0; padding:0;
			background-image: url(img/header/header_title_detail_combo.jpg);
			background-repeat:no-repeat;
			background-position: top left;
			height: 123px;
		}	
			
		#footer {
			margin:0; padding:0;
			height: 95px;
			border-top: 8px solid rgb(162, 186, 66);
			background-color: rgb(0, 126, 125);
		}	
		
		/* Main1, and main 2
				NO padding or margin.
				stipulate the repeated graphic for the left and right column, 
				if one exists.
		*/
		#main1 {
			margin:0; 
			padding:0;
			background-image: url(img/main/left_col_tile.jpg);
			background-repeat: repeat-y;
			background-position:top left;
		}
		#main2 {
			margin:0;
			padding:0;
			background-image: url(img/main/right_col_tile.jpg);
			background-repeat: repeat-y;
			background-position: top right;			
		}
		#main3 {
			margin:0;
			padding:0;
			background-image: url(img/main/dog.gif);
			background-repeat: no-repeat;
			background-position: bottom right;			
		}
			
		/* Left, Right, Middle
			Float left, Float right, and NO FLOAT (respectively)
			Middle seems to stay in the middle by
			putting a 150px margin on it's left and right. This compensates for the
			150px width that the left and right cols have.
		
		*/
		
		#left {
			position: relative;
			float:left;
			width:185px;
			margin:0; 
			padding:0;
			clear: none;
			
			}
		#right {
			position: relative;
			float:right;
			width:184px;
			margin:0; padding:0;
		}
			/*     top, right, bottom, left */
		#middle {
			
			margin: 0 190px 0 185px; 
		}

		/* column-in
				Margin 0, padding is what you want for that column for 
				the text to be spaced from column border.
		
		*/
		.column-in {
			margin:0; padding:0.5em 1em;
			}

		/* cleaner
				This should stay unchanged. It sits down the bottom of main div box, 
				and makes sure that the three columns are all cleaned off.
				
				How? I don't know. Can you work it out?
		
		*/		
		.cleaner {
			clear:both;
			height:1px;
			font-size:1px;
			border:none;
			margin:0; padding:0;
			background: transparent;
			}