/* THUMBS AND ICONS

	"thumbs" are divs with an image and a title or text that are set to display:inline.
	
	the css is designed for thumbnails with max width/height (128 currently). 
	horizontal thumbs have text alogn the right side of the thumb and 
	are 3x as wide as vertical thumbs, they are both the same height.
	
	the thumbs are set to align text-top, means they are like dangling from the textline
	as laundry from a washline: the icons align top. if long subtitles wrap over multiple
	lines across the bottom the top should still align.
	
	if long subtitles of a thumb doesnt wrap .. some browsers ... , the width of the 
	imageframes grows along and the image should float centered.
	
	the div has a broad range of classes set to tack your own css to, like
		div class="thumb horizontal container localfile localvcardfile"
	
	not yet tested in ie
	
*/
/*debug 
	div.thumb  						{ border:1px solid red;  }
	div.thumb table 				{ border:1px solid red;  }
	div.thumb table td 				{ border:1px solid grey;  }
	div.thumb table tr td img 		{ border:1px solid blue; }
	div.thumb table.horizontal ul	{ border:1px solid yellow;   }

*/


	
div.thumb  {
	margin: 0px 14px 0px 0px; padding: 0px; 
	float:left; vertical-align:text-top; 
}

div.thumb table 								{ 
	margin:0px; padding:0px; 
	display:inline; vertical-align:text-top; 
}
div.thumb table tr								{ x-border:0px; margin:0px; padding:0px;  }
div.thumb table tr td							{ x-border:0px; margin:0px; padding:0px; }
div.thumb table tr td img 						{ x-border:0px; margin:0px; }

div.thumb A.container							{ color:black; text-decoration:none; font-weight:bold; }
div.thumb A.container:HOVER						{ x-color:#0066cc; text-decoration:underline;}
div.thumb A.container:ACTIVE					{ color:#333333;}
div.thumb A.container:VISITED					{ color:#333333;}

div.thumb A.item								{ color:black; text-decoration:none; font-weight:bold; }
div.thumb A.item:HOVER							{ color:#333333; text-decoration:underline;}
div.thumb A.item:ACTIVE							{ color:#333333;}
div.thumb A.item:VISITED						{ color:#333333;}


div.thumb table tr td.icon						{ height:100px; text-align:center; vertical-align:top; }
div.thumb table tr td.icon img					{ width:100px; }
div.thumb table tr td.label						{ text-align:center; word-wrap:break-word; }
div.thumb table tr td.bottom					{ padding-top:.3em; padding-bottom:1em;  }


/* vertical thumb */

div.thumb.vertical								{ width:100px; }
div.thumb.vertical table						{ width:100px;  }


/* horizontal thumb */
div.thumb.horizontal							{ width:300px;  } /* 3*130+2*2*2 margins */
div.thumb.horizontal table						{ width:300px;  } 
div.thumb.horizontal table tr td.data			{ vertical-align:middle; text-align:left;}


/* hthumb properties */
div.thumb.horizontal table ul					{ list-style-type:none; padding:.5em; }
div.thumb.horizontal table li					{ font-size:.8em; width:260px;  overflow:hidden; } /* moz needs overflow:hidden */
div.thumb.horizontal table span.title			{ font-weight:bold; }
div.thumb.horizontal table span.date			{  }

/* property styles*/
div.thumb.horizontal table li span.label				{ x-font-weight:bold; }
div.thumb.horizontal table li.url span.label			{ display:none; } 
div.thumb.horizontal table li.email span.label			{ display:none; } 
div.thumb.horizontal table li.address span.label		{ display:none; } 
div.thumb.horizontal table li.telephone span.label		{ display:none; } 
div.thumb.horizontal table li.organisation span.label	{ display:none; } 
div.thumb.horizontal table li.description span.label	{ display:none; } 


div.thumb.horizontal table li.url				{  font-weight:bold; }
div.thumb.horizontal table li.description		{  font-style:italic; padding-bottom:.75em; }

/* specialized exceptions */

div.localimagefile table tr td.bottom			{ display:none;  }
div.localtextfile.inline						{ margin-bottom:1em; }

div#moblog	table td 	{ font-size:.7em;  }
div#moblog	table td A	{ color:black; text-decoration:none; font-weight:bold; }