@charset "utf-8";
/* TwitterFriends Style */

/*
	TwitterFriends can be as wide and as tall as you need.  While the height will take care of itself you should be aware of the way I've programmed the width. 
	The width specified in .TF_container is the overall width of the TF widget.  This is hard-set and honored by the JS.  Since the number of columns 
	is set by the JS and I use the native size of the images returned by Twitter (48x48) the overall width of .TF_content (including padding and margins) 
	is somewhat out of the control of the CSS.  You'll find that, should .TF_container be substantially wider than .TF_content, the margins around 
	.TF_content will increase to keep it centered within .TF_container.  
	
	With the default CSS - each column of images increases the overall (.TF_container) width by 51px.  Meaning... the ideal width for a 3-column layout is 186px.
	
	columns = 3 ~~ .TF_container => width = 186px
	columns = 4 ~~ .TF_container => width = 237px
	columns = 5 ~~ .TF_container => width = 288px
	
	If, for instance, you had 4 columns and a .TF_container width of 300px - there would be a difference of 31px between the outer edge of .TF_container and 
	the outer edge of .TF_content (on each side).  Play with the .TF_container width and the number of columns specified in the JS and you'll see what I'm saying.
	A way to mitigate this would be to increase the margins that seperate the images.
	
	I've purposely used CLASSes (instead of IDs) here to make it easy to override the inheritance should you choose to modify the CSS in another document rather than
	modify the declarations made here.  If your target element (needed by the JS) has an ID = "target" any of the selectors below can be 'beaten' by prepending the target ID.
	
	For Example:
	
	.TF_content .TF_tooltip{...}
		 - becomes -
	 #target .TF_content .TF_tooltip{...}
	 
	 Good Luck
*/

.TF_container{width:186px; margin:10px auto 10px auto; position:relative; border:1px solid #000000; font-size:12px; font-family:"Lucida Grande", Arial, sans-serif; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
.TF_container *{padding:0px; margin:0px;}
 
.TF_loading{position:relative; top:0px; left:0px; background:#ffffff url(../images/ajax-loader.gif) 7px 4px no-repeat; text-indent:28px; display:block; width:100%; font-family:"Times New Roman", Times, serif; line-height:24px; z-index:1337; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
	.TF_loading a:link{color:#CC0000; font-style:normal; font-size:12px; text-decoration:none;}
	.TF_loading a:visited{color:#CC0000; font-style:normal; font-size:12px; text-decoration:none;}
	.TF_loading a:hover{text-decoration:underline;}
	.TF_loading.error{background:#ffffff url(../images/ajax-error.gif) 7px 4px no-repeat;}

.TF_background{position:absolute; top:0px; left:0px; width:100%; visibility:hidden; background-color:#002233; background-repeat:no-repeat; margin:0px 0px 0px 0px; padding:10px 0px 10px 0px; background-position:-50px -100px; border-radius:9px; -moz-border-radius:9px; -webkit-border-radius:9px;}

.TF_content{font-family:Georgia, "Times New Roman", Times, serif; background:#ffffff; position:relative; margin:10px auto 5px auto; padding:8px 8px 8px 8px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; filter:alpha(opacity=90); opacity: 0.9; -moz-opacity:0.9;}
	.TF_content div{float:left; position:relative;}
		.TF_content div.TF_clear{float:none; clear:both;}

	.TF_content a{display:block; margin:0px 3px 3px 0px; width:48px; height:48px;}
	.TF_content p{display:none;}
	
	.TF_content .TF_tooltip{display:block; position:absolute; background:#ffffff; top:-50px; left:-161px; width:350px; z-index:1337; font-family:Verdana, Geneva, sans-serif; padding:8px 8px 8px 8px; border:1px solid #000000; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
		.TF_content .TF_tooltip span{display:block; text-align:right; padding:5px 0px 0px 0px;}
		.TF_content .TF_tooltip em{border-color:#000000 transparent transparent; border-style:solid; border-width:13px 15px 0px 15px; display:block; height:1px; margin:0px auto -13px auto; position:relative; top:9px; width:1px;}
		.TF_content .TF_tooltip i{border-color:#ffffff transparent transparent; border-style:solid; border-width:11px 13px 0px 13px; display:block; height:1px; position:relative; top:-13px; left:-13px; width:1px;}
		.TF_content .TF_tooltip a:link,
		.TF_content .TF_tooltip a:visited{display:inline; color:#0000ff; text-decoration:none;}
		.TF_content .TF_tooltip a:hover{display:inline; color:#333333;}
	
	.TF_content .TF_name{width:auto;}
	
	.TF_content .TF_last-col{margin-right:0px;}
	.TF_content .TF_last-row{margin-bottom:0px;}
	
	.TF_content .TF_top-left{border-top-left-radius:6px; -moz-border-radius-topleft:6px; -webkit-border-top-left-radius:6px;}
	.TF_content .TF_top-right{border-top-right-radius:6px; -moz-border-radius-topright:6px; -webkit-border-radius-top-right:6px;}
	.TF_content .TF_bottom-left{border-bottom-left-radius:6px; -moz-border-radius-bottomleft:6px; -webkit-border-bottom-left-radius:6px;}
	.TF_content .TF_bottom-right{border-bottom-righ-radius:6px; -moz-border-radius-bottomright:6px; -webkit-border-bottom-righ-radius:6px;}

.TF_user{margin:10px auto 18px auto; display:block; background-color:#0C435E; text-align:left; padding:3px 8px 3px 8px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; *height:21px; *margin:18px auto 18px auto; _margin:0px auto;}
	.TF_user a:link,
	.TF_user a:visited{font-size:18px; color:#ffffff; text-decoration:none; text-transform:lowercase;}
	.TF_user a.TF_user-img{display:block; float:left; height:48px; width:48px; position:relative; top:-14px; left:-8px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; _top:0px; left:-5px;}
	.TF_user a.TF_user-link{_position:relative; _top:12px;}

.TF_action{margin:15px auto 8px auto; font-family:Verdana, Geneva, sans-serif; }
	.TF_action .TF_counter{float:right; font-size:16px; font-weight:bold; margin:0px -8px 0px 0px;}
		.TF_action .TF_counter a:hover{text-decoration:underline;}
	.TF_action a:link,
	.TF_action a:visited,
	.TF_action a:hover{color:#ffffff; text-decoration:none;}
	.TF_btn{background:#f9f9f9; z-index:1; padding:5px 0px 0px 0px; font-size:13px; margin:0px 0px 0px -8px; border-radius:6px 6px 0px 0px; -moz-border-radius:6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; _background:none; _padding:0px 0px 0px 0px;}
		.TF_btn span{background:transparent; position:relative; padding:5px 8px 5px 8px; *padding:0px 8px 5px 8px; _padding:0px 0px 0px 0px;}
		.TF_btn b{background:#e3e3e3; border-top:5px solid #eeeeee; bottom:0; height:40%; left:0; overflow:hidden; position:absolute; width:100%; z-index:2; border-radius:0px 0px 6px 6px; -moz-border-radius:0px 0px 6px 6px; -webkit-border-radius:0px 0px 6px 6px; _background:none; _border-top:none; _height:auto; _width:auto;}
		.TF_btn u{position:relative; z-index:3; text-decoration:none; padding:5px 0px 5px 0px; _padding:5px 5px 5px 5px;}
	.TF_action a:link.TF_btn,
	.TF_action a:visited.TF_btn{color:#ffffff; text-decoration:none;}