body {margin: 0;
			padding: 10px;
			background: #000;}
		
	a:link {text-decoration: none; color: #115511;}
		
	.holder {position: relative;
		margin: 10px auto;
		width: 120px;
		border: 1px dotted black;
		padding: 10px;}	

	.holder:before {content: "Larger width:\A";}

	.box1, .box2, .box3, .box4, .clearbox {float: left;
		width: 40px;
		height: 40px;
		border: 1px solid #AAA;
		margin: 4px;
		padding: 4px;
		font: 0.7em "bitstream vera sans", "Trebuchet MS", sans-serif;
		text-decoration: none;
		color: #888888;
		background: #665b33;
		text-align: left;}
	
	.box1:hover {color: #888888; background: #CCCCCC;}
		
	.box2 {color: #111111;
		background: #CCCC99;
		text-align: right;	}
	.box2:hover {color: #CCCCCC; background: #584026;}
	.box2:hover:before {content: "!";}
	
	.box3 {color: #CCCCCC;
		background: #333333;
		text-align: left;}
	.box3:hover {background: #000000;}
	
	.box4 {color: #AAAAAA;
		background: #584026;
		text-align: left;	}
	.box4:hover {background: #EEEECC;}
	
	.clearbox {	border: 1px solid black;
		background: black;
		color: white;}
	
	.clearboth {clear: both;}


.bigbox
 {
  position: relative:background;
  height: 100px;
 }

.lside
 {
  height:60%;
  width:33%;
  color: #cccccc;
  background: #000000;
  text-align: right;

  position: absolute;
  left: 0;
  margin:10px;
  text-anchor: end;
  padding: 10px;
 }

.rside
 {
  height:60%;
  width:35%;
  color: #cccccc;
  background: #000000;
  position: absolute;
  right: 0;
  margin:10px;
  text-align: left;
  padding: 10px;
 }

.title
 {
  font-weight: bold;
  font-family: tahoma, arial, serif;
  font-size: 18pt;
  color: #888888;
 }

.text
 {
  font-family: arial, tahoma, sans-serif;
  font-size: 12pt;
  font-weight: bold;
  color: #FFFFFF; 
 }

.weaktext
 {
  font-family: arial, tahoma, sans-serif;
  font-size: 12pt;

  color: #DDDDDD; 
 }