ZenDogBlog --- Barking Dog -- Concrete Corner

You can copy the css text file from the text area below - just right click!


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

	COMMENTS:    
	                                                                          
		1) RIGHT CLICK AND COPY to your favorite      
			text editor			    
		2) SAVE THIS FILE as: 			    
				      cog.css		    
		3) Scroll down the page for the htm file		    
			- repeat 1 and 2.	

	NOTE:	
		This file will validate just fine using the 
		validator at:
			http://validator.w3.org/check	

		by: d. winter
			zendogblog.net
	    
							    
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


#title 	{  margin:40px 50px 0 50px; font-family:"English111 Vivace BT", 
	script; font-size:3em; color:#BB8400; }

.indent1 	{ margin:15px 50px 25px 50px; font-family:"Arial", sans-serif; 
	font-size: 12pt; font-weight:500; 
	letter-spacing:.05em;  line-height:1.5em;
	}

	/*  here is where you can change the width of the entire image     */
	/*  it is currently set at width:800px;                                                 */
	/*  You can also change it's location in the browser window.          */
	/*   left:0; top:0; will align the image with the top left corner              */

div.centerCol { position:absolute; width:800px; left:120px; top: 225px; 
	color:#223344; background-color:#DDDDDD;
	margin:0 0 0 0; padding:10px; 
	}

.insideCol {  background-color:#999999; border-width:7px; border-style: solid; 
	border-color:#DDDDDD; padding:10px; }

#one { 	border-top-width: 4px; border-top-style: solid; border-top-color:#999999;
	border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color:#464646;
	margin: 80px 35px 120px 35px; padding:0; }

div.two { color:#F1F1F1; background-color:#636363;
	border-top-width: 4px; border-top-style: solid; border-top-color:#A5A5A5;
	border-right-width: 4px; border-right-style: solid; border-right-color:#9F9F9F;
	border-bottom-width: 21px; border-bottom-style: solid; border-bottom-color:#454545;
	border-left-width: 4px; border-left-style: solid; border-left-color:#A4A4A4;
	margin-bottom: 36px;  padding:0; }

div.d3 { color:#F1F1F1; background-color:#606060;
	border-top-width: 2px; border-top-style: solid; border-top-color:#585858;
	border-right-width: 4px; border-right-style: solid; border-right-color:#999999;
	border-bottom-width: 19px; border-bottom-style: solid; border-bottom-color:#444444;
	border-left-width: 4px; border-left-style: solid; border-left-color:#9b9b9b;
	margin-bottom: 32px;  padding: 0 ; }

div.d4 { color:#F1F1F1; background-color:#575757;
	border-top-width: 2px; border-top-style: solid; border-top-color:#565656;
	border-right-width: 4px; border-right-style: solid; border-right-color:#999999;
	border-bottom-width: 17px; border-bottom-style: solid; border-bottom-color:#434343;
	border-left-width: 4px; border-left-style: solid; border-left-color:#9c9c9c;
	margin-bottom: 28px; padding:0;}

div.d5 {  color:#F1F1F1; background-color:#545454;
	border-top-width: 2px; border-top-style: solid; border-top-color:#555555;
	border-right-width: 4px; border-right-style: solid; border-right-color:#999999;
	border-bottom-width: 15px; border-bottom-style: solid; border-bottom-color:#424242;
	border-left-width: 4px; border-left-style: solid; border-left-color:#9d9d9d;
	margin-bottom: 24px; }

div.d6{ color:#F1F1F1; background-color:#515151;
	border-top-width: 2px; border-top-style: solid; border-top-color:#565656;
	border-right-width: 4px; border-right-style: solid; border-right-color:#999999;
	border-bottom-width: 13px; border-bottom-style: solid; border-bottom-color:#414141;
	border-left-width: 4px; border-left-style: solid; border-left-color:#9e9e9e;
	margin-bottom: 22px;  padding:0px; }

div.d7 { color:#F1F1F1; background-color:#484848;
	border-top-width: 2px; border-top-style: solid; border-top-color:#545454;
	border-right-width: 4px; border-right-style: solid; border-right-color:#999898;
	border-bottom-width: 11px; border-bottom-style: solid; border-bottom-color:#393939;
	border-left-width: 4px; border-left-style: solid; border-left-color:#9F9F9F;
	margin-bottom: 17px; padding:0; }

div.d8 { color:#F1F1F1; background-color:#454545; 
	border-top-width: 0px; border-top-style: solid; border-top-color:#525252;		
	border-right-width: 0px; border-right-style: solid; border-right-color:#999999;		
	border-bottom-width: 7px; border-bottom-style: solid; border-bottom-color:#373737;	
	border-left-width: 0px; border-left-style: solid; border-left-color:#999999;		
	margin-bottom: 14px; padding:0 ; }

div.gears { color:#505050; background-color:#424242;
	border-top-width: 2px; border-top-style: solid; border-top-color:#505050;
	border-right-width: 0px; border-right-style: solid; border-right-color:#979797;		
	border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color:#353535;
	border-left-width: 0px; border-left-style: solid; border-left-color:#999999;		
	margin:0 0 0 0; padding:0 0 0 0;}						

div.d10 { color:#F1F1F1; background-color:#393939;
	border-top-width: 2px; border-top-style: solid; border-top-color:#484848;
	border-right-width: 4px; border-right-style: solid; border-right-color:#999999;
	border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color:#333333;	
	border-left-width: 4px; border-left-style: solid; border-left-color:#444444;
	margin:0 0 7px 0; }						

div.d11 {  color:#F1F1F1; background-color:#353535;
	border-top-width: 2px; border-top-style: solid; border-top-color:#464646;
	border-right-width: 4px; border-right-style: solid; border-right-color:#999999;
	border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color:#313131;
	border-left-width: 4px; border-left-style: solid; border-left-color:#424242;
	margin: 0; padding:0; }

div.d12 { color:#F1F1F1; background-color:#333333;
	border-top-width: 2px; border-top-style: solid; border-top-color:#444444;
	border-right-width: 4px; border-right-style: solid; border-right-color:#959595;
	border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color:#2F2F2F;
	border-left-width: 4px; border-left-style: solid; border-left-color:#404040;
	margin:0; padding:0; }

div.d13 { color:#F1F1F1; background-color:#535353; 
	border-top-width: 2px; border-top-style: solid; border-top-color:#424242;
	border-right-width: 4px; border-right-style: solid; border-right-color:#999999;
	border-bottom-width: 12px; border-bottom-style: solid; border-bottom-color:#2a2a2a;
	border-left-width: 4px; border-left-style: solid; border-left-color:#383838;
	margin:0; padding: 0 ; }

div.d14 { color:#F1F1F1; background-color:#535353;
	border-top-width: 2px; border-top-style: solid; border-top-color:#404040;
	border-right-width: 4px; border-right-style: solid; border-right-color:#999999;
	border-bottom-width: 8px; border-bottom-style: solid; border-bottom-color:#262626;
	border-left-width: 4px; border-left-style: solid; border-left-color:#363636;
	margin: 0; padding:0;}

div.d15 { color:#F1F1F1; background-color:#313131;
	border-top-width: 2px; border-top-style: solid; border-top-color:#383838;
	border-right-width: 4px; border-right-style: solid; border-right-color:#999999;
	border-bottom-width: 9px; border-bottom-style: solid; border-bottom-color:#232323;
	border-left-width: 4px; border-left-style: solid; border-left-color:#343434;
	margin: 0; padding: 0; }

div.d16 { color:#BB8400; background-color:#282828;
	border-top-width: 2px; border-top-style: solid; border-top-color:#363636;
	border-right-width: 4px; border-right-style: solid; border-right-color:#999999;
	border-bottom-width: 16px; border-bottom-style: solid; border-bottom-color:#202020;
	border-left-width: 4px; border-left-style: solid; border-left-color:#323232;
	margin: 0; padding:2px; }

div.gear1 {  margin: 0 0 0 0; padding:20px 1px 0 1px; background-color:#212121;
	border-right-width: 4px; border-right-style: solid; border-right-color:#424242;	
	border-left-width: 4px; border-left-style: solid; border-left-color:#424242;
	}

div.gear1 p.toothClear { padding:0; border:0; background-color:#212121; }
	
div.gear1 p.tooth1 { height:2px; 
		margin-top:33px; 
		margin-right:15px; 
		margin-bottom:1px; 
		margin-left:15px; 				
		padding:0; border:0;  background-color:#373737 ;
	}
div.gear1 p.tooth2 {   
		height:5px; 
		margin:0 7px 1px 7px; 
		padding:0; border:0;  background-color:#393939 ;
		}
div.gear1 p.tooth3 {  
		height:8px; 
		margin:0 1px 0px 1px;
		padding:0; border:0; background-color:#414141 ;
		}
p.mycopy
	{ margin:30px 30px 30px 30px;
	font-family:"Tahoma", sans-serif; color:#404149;
	line-height:1.3; font-size: 7pt;
	}

You can copy the htm text file from the text area below - just right click!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<META NAME="author" Content="D. Winter">
<META NAME="robots" content="all">
<META NAME="keywords" CONTENT="ZenDogBlog, BlogTheDog">
<META NAME="description" CONTENT="Formal elegies and nightmares in free verse.">
<META NAME="copywrite" CONTENT="copywrite 1998 - 2008 D. Winter">
	<title>ZenDogBlog --- Barking Dog -- Cog </title>
	<link rel="stylesheet" type="text/css" id="menu" href="cog.css">


	<! --   Comments:						-- >
	<! --   1) RIGHT CLICK AND COPY					-- >
	<! --   	in your favorite text editor			-- >
	<! --   2) SAVE THIS FILE as:					-- >
	<! --   	anything, but it must have the 			-- >
	<! --   	file extension .htm AND it must be		-- >
	<! --   	 in the same folder as cog.css			-- >	
	<! --   NOTE:							-- >
	<! --		The W3C validator will spit out			-- >
	<! --		two errors when testing this code.		 -- >
	<! --								-- >
	<! --			by d. winter 				-- >
	<! --			zendogblog.net				-- >
	<! --								-- >


</head>


<body>


<div class="centerCol">
      <div class="insideCol">

	<div id="one">   
	<div class="two">   
	<div class="d3">  
	<div class="d4">  
	<div class="d5">   
	<div class="d6">   
	<div class="d7">   
	<div class="d8">   
	<div class="gears">
	<div class="d10">   
	<div class="d11">   
	<div class="d12">   
	<div class="d13">   
	<div class="d14">    
	<div class="d15">    
	<div class="d16">

	<H3 id="title">A Title?</h3>
		
		<p class="indent1">Your text or image could go here. This thing is completely resizable, in a couple of ways. The height automatically expands given the height of the content, as in the content of this p tag. You can control the width as well, by changing the attribute of the width property of the div labeled 'centerCol', and that you will find in the css file. If you want to see something interesting, try resizing the div to 200px - it's waaay cooool.</p>
	</div>   
	</div>   
	</div>   
	</div>   
	</div>   
	</div>     
	</div>  

		<div class="gear1">
		   <p class="toothClear"> </p>
		   <p class="mycopy"> &copy; D. Winter 1999 - 2008</p>
		   <p class="tooth1"> </p>
		   <p class="tooth2"> </p>
		   <p class="tooth3"> </p>
  		</div> 

		</div> </div>  </div>  </div>  </div>  </div>  </div> </div>  </div>	

   </div>
</div>

</body>

</html>