@charset "utf-8";
/* CSS Document */

/* --------------------------------------------  */
/* tweetmix.net Style                                      */
/* copyright (c) userstorylab 2010                     */
/* -------------------------------------------- */


@import url(common.css);
@import url(layer.css);
@import url(widget.css);

/* --------- CONTENT -------- */

body { background: url(../images/bg_tree.png) center 0 no-repeat #f3f3f3 ;}

/* --------- tweet message --------- */

.tweeted { padding:0; }
.tweeted h2 {  display:none;}
.tweeted .explain {  float:left; margin-bottom:10px; }
.tweeted .explain p { color:#999; padding:0 0 0 25px;  background:url(../images/comment.png) 5px 1px no-repeat; }


/*  --------- sorting  --------- */
.sorting { margin:0 0 10px; height:20px; float:right;}
.sorting ul { list-style:none;}
.sorting li { display:inline; }
.sorting li a { display:block; float:left; height:20px; overflow:hidden; text-indent:-999px; background:0 0 no-repeat; }

	.sorting .sort_recent a 	{ background-image:url(../images/sort_tab_recent.gif); 		width:38px; }
	.sorting .sort_halfday a { background-image:url(../images/sort_tab_halfday.gif); 		width:40px; }
	.sorting .sort_day a 		{ background-image:url(../images/sort_tab_day.gif); 			width:39px; }
	.sorting .sort_week a 	{ background-image:url(../images/sort_tab_week.gif); 		width:47px; }
	.sorting .sort_month a 	{ background-image:url(../images/sort_tab_month.gif); 		width:40px; }
	.sorting .sort_all a 		{ background-image:url(../images/sort_tab_all.gif); 			width:38px; }	
	.sorting .sort_realtime a{ background-image:url(../images/sort_tab_realtime.gif);  	width:49px; }
	.sorting .sort_popular a { background-image:url(../images/sort_tab_popular.gif); 		width:47px; }
	.sorting li.selected a		{ background-position:0 -20px; }


/* tweet list */
.tweetList				{ clear:both; border-top:1px dotted #ccc;}
.tweetList li.item 			{ clear:both; padding:15px 0;  border-bottom:1px solid #eee; }

.entrywrap h3 { font-weight:normal; margin-bottom:10px;}
.entrywrap h3 a { color:#0D59A7;}
.entrywrap h3 span { font:0.8em Tahoma, sans-serif; color:#aaa;}
.entrywrap h3 span a { color:#aaa;} 
.entrywrap .avatar	{ float:left; }
.entrywrap .entry { margin:0 0 0 70px; font-size:1em; }
.entrywrap .entry .author 	{ display:inline;  margin-right:5px;}
.entrywrap .entry .article { display:inline; }
	.entrywrap h3,
	.entrywrap .author,
	.entrywrap .article { font-size:1.1em;}
	
.entrywrap .entry .author a,
.entrywrap .entry .article a,
.entrywrap .entry .article a:hover { color:#00a0dd; } /* bule text */	
	
.entrywrap h3 a:hover,
.entrywrap .entry a:hover {text-decoration:underline;}


/* relatedtweet box */
.relatedtweet { clear:both; background-color:#fbfbfb; border:1px solid #ddd;  margin:15px 0 0;}
.relatedtweet .headwrap { padding:8px 12px; height:21px; background-color:#f3f3f3; }
.relatedtweet h3 		{ float:left;  font-size:1em; color:#534741; background:url(../images/ico_tweet.png) 0 center no-repeat; padding-left:20px;  margin-top:1px;}
.relatedtweet .gourl	{ float:left; margin-left:15px; }
.relatedtweet .gourl a	{ display:block; width:93px; height:19px; overflow:hidden; text-indent:-999px; background:url(../images/all_relate_list.gif) 0 0 no-repeat;}
.relatedtweet .close 	{ float:right; }
.relatedtweet .close a 	{ display:block; width:20px; height:20px; overflow:hidden; text-indent:-999px; background:url(../images/close.gif) 0 0 no-repeat;}
.relatedtweet .close a:hover { background-position:0 -20px;}

.relatedList 			{ border-top:1px dotted #ddd;}
.relatedList li.item { clear:both; padding:10px 15px; border-style:dotted; border-color:#e5e5e5;}
.relatedList li.no-item { border-top:0; padding:0;}
.relatedList li:hover 	{ background-color:#fff;}
.relatedList .entry 	{ margin:0 0 0 50px;}
.relatedList .entry .author 	{ margin-right:5px; font-size:1em!important;}
.relatedList .entry .article 	{ font-size:1em!important; color:#888; }


	.relatedList .entry .author a,
	.relatedList .entry .article a,
	.relatedList .entry .article a:hover { color:#60aa00;}	/* yellowgreen */	
	

.tweetList li.last-on { border-color:#999; border-style:dotted;}
.relatedList li.last-on { border-color:#b5b5b5;}





.tweetcount { background:url(../images/ico_tweet.png) 0 center no-repeat;  padding: 3px 0 3px 20px;  }

.entrywrap .entry .status { margin-top:8px;  line-height:1;}
.entrywrap .entry .status .date { font-size:0.9em; float:left;  padding:3px 0; margin-right:10px;  margin-bottom:5px; }
.entrywrap .entry .status .tweetcount { background:url(../images/ico_stweet.png) 0 center no-repeat;  padding-left:18px;  font-size:0.9em;   float:left;  margin-bottom:5px; }

.entrywrap .entry .status .action { float:right; text-align:right; padding-top:3px;}
.entrywrap .entry .status .action li { display:inline}
.entrywrap .entry .status .action a { display:block; float:left; margin-left:10px; padding-left:18px; font-size:0.9em; }

.entrywrap .entry .status .action a.tweetinfo			{ background:url(../images/ico_tweet_link.png) 0 0 no-repeat; font-family:dotum; letter-spacing:-0.05em; padding-top:2px;}
.entrywrap .entry .status .action a.tweetinfo:hover  	{ background:url(../images/ico_tweet_link_on.png) 0 0 no-repeat; }
.entrywrap .entry .status .action a.reply 					{ background:url(../images/ico_tweet_reply.png) 0 -1px no-repeat;}
.entrywrap .entry .status .action a.reply:hover  		{ background:url(../images/ico_tweet_reply_on.png) 0 -1px no-repeat;}
.entrywrap .entry .status .action a.retweet 				{ background:url(../images/ico_tweet_retweet.png) 0 -1px no-repeat;}
.entrywrap .entry .status .action a.retweet:hover  	{ background:url(../images/ico_tweet_retweet_on.png) 0 -1px no-repeat;}

.entrywrap .status .action { visibility:hidden;}
.entrywrap:hover .status .action { visibility:visible;}

.entrywrap .entry .status,
.entrywrap .entry .status a {color:#aaa;}
.entrywrap .entry .status a:hover { color:#666; text-decoration:none;}

.relatedList .entry .status a {color:#aaa;}
.relatedList .entry .status a:hover { color:#777; text-decoration:none;}

.entrywrap .entry .status .action { width:230px;}
#url-tweet .tweetList .entrywrap .action { width:130px;}


/*  --------- reportwrap ---------  */

.report { margin-bottom:20px; background-color:#f6f6f6; border:1px solid #e5e5e5; padding:15px;   }
.report h2 { font-size:1.6em; word-break:break-all;}
.report h2 a { color:#333;}	
.report h2 a:hover {color:#00a0dd;}

/* url info */
#url-info .status { margin-top:10px; color:#777; height:19px;}
#url-info .status .tweetcount { float:left;  }
#url-info .status .action {float:left; margin-top:2px; margin-left:10px;}
#url-info .status .action li { float:left;  background:url(../images/sep.gif) left center no-repeat;  padding-left:10px;}
#url-info .status .action a.tweet { background:url(../images/btn_s_retweet.gif) 0 0 no-repeat;  height:19px; width:60px!important; display:block; overflow:hidden;  text-indent:-999px; margin:0; margin-right:10px;}
#url-info .status .action a.tweetsite { background:url(../images/ico_allmessage.png) 0  center no-repeat;  padding-left:20px; margin-top:3px;  margin-left:0;}
#url-info .status .action a.tweetsite .url { font-family:Tahoma, Geneva, sans-serif; }
#url-info .status .action a.tweetsite .all_msg { font-family:Dotum, Verdana, Geneva, sans-serif; letter-spacing:-0.05em; }
#url-info .status .action a.tweetsite:hover { color:#00a0dd; text-decoration:underline;}

#url-info .firstMsg { padding-top:30px;}
#url-info .firstMsg dt {  background-color:#f5f5f5; padding:0 5px; font-size:0.85em; color:#777; position:absolute; margin:-7px 0 0 45px;}
#url-info .firstMsg dd.entrywrap { margin:0!important; padding-top:15px; border-top:1px dotted #ccc;}
#url-info .firstMsg .avatar { float:left; width:32px; height:32px; overflow:hidden; background-image:none; background-color:#fff; border:1px solid #ddd;  padding:3px;}
#url-info .firstMsg .avatar img { width:32px; height:32px;  }
#url-info .firstMsg .entry { margin-left:50px;}
#url-info .firstMsg .entry .author { margin-right:8px;}
#url-info .firstMsg .entry .article { display:inline; font-size:1em; }
#url-info .firstMsg .status { margin:0; margin-top:7px;}
#url-info .firstMsg .status .action { float:right; margin-top:0; width:auto;}
#url-info .firstMsg .status .action li { background:none; padding:0; margin:0;}

#url-info .firstMsg .entry { color:#888; }
#url-info .firstMsg .entry .author a,
#url-info .firstMsg .entry .article a { color:#7fba00;} 	/* yellowgreen */	
#url-info .firstMsg .entry .author a:hover,
#url-info .firstMsg .entry .article a:hover { color:#7fba00; text-decoration:underline;}
#url-info .firstMsg .entry .status,
#url-info .firstMsg .entry .status a { color:#bbb;}
#url-info .firstMsg .entry .status a:hover { color:#777;}

/* user info */
#user-info .avatar { float:left; display:block; margin-right:15px;}	
#user-info h2 { margin-bottom:5px;}
#user-info .tweetinfo { line-height:1; margin-left:70px;}
#user-info .tweetinfo dt { display:none;}
#user-info .tweetinfo dd { float:left; }
#user-info .tweetinfo .tweeturl  { background:url(../images/ico_twitter.png) 0 center no-repeat; padding: 3px 0 3px 22px;  }
#user-info .tweetinfo .tweeturl,
#user-info .tweetinfo .tweetcount { margin-right:15px; margin-bottom:10px;}
#user-info .tweetinfo .tweetbring {  width:210px; }
#user-info .tweetinfo .tweetbring button {height:22px; overflow:hidden; vertical-align:middle;}
#user-info .tweetinfo .tweetbring .btn-bringRecent { background:url(../images/btn-bringtweet.gif)  0 0 no-repeat; width:107px;  }
#user-info .tweetinfo .tweetbring .btn-bringRecent.disable { background-position:0 -44px; cursor: default;}
#user-info .tweetinfo .tweetbring .btn-reConnect { background:url(../images/btn-reconnect.gif)  0 0 no-repeat; width:89px; }
#user-info .tweetinfo .tweetbring .btn-reConnect.disable { background-position:0 -44px!important;  cursor: default;}

#user-info .tweeturl a { color:#666; }
#user-info .tweeturl a:hover { color:#00a0dd; }

#user-info .tweetinfo .tweetbring .btn-bringRecent:hover { background-position:0 -22px;}
#user-info .tweetinfo .tweetbring .btn-reConnect:hover { background-position:0 -22px;}
#user-info .tweetinfo .tweetbring .btn-reConnect.disable:hover { background-position:0 -44px;}

#url-tweet .tweetList .entrywrap 	{ margin-right:0; }
#user-tweet .tweetList .entry 	{ margin:0; }
#user-tweet .relatedList .entry { margin:0 0  0 50px; }
#url-tweet .tweetList .entry 		{  margin: 0 0 0 70px;}





/* gallery */
#gallery-container { margin-bottom:20px;}

#demo-frame > div.demo { padding: 10px !important; }
.scroll-pane { overflow: auto; width: 100%; float:left;  max-width:940px; mix-width:640px;}
.scroll-content { width: 2440px; float: left; }
.scroll-content-item { overflow:hidden; float: left; margin:0; padding:5px; font-size: 3em; line-height: 96px; text-align: center; }
* html .scroll-content-item { display: inline; } /* IE6 float double margin bug */
.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
.scroll-bar-wrap .ui-slider { background: none; border:0; height: 1em; margin: 0 auto;  }
.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
.scroll-bar-wrap .ui-slider-handle { top:.1em; height: 0.7em; -moz-border-radius:7px; -webkit-border-radius:7px;}
.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }

.ui-widget-header { background:transparent!important; border:0!important;}
.scroll-bar-wrap { background-image:none; background-color:#f5f5f5; border:1px solid #eee!important; margin:0!important;  padding:0 2px!important; -moz-border-radius:7px; -webkit-border-radius:7px;}




/* user over layer */
.popOverlayer {position:absolute;}

.userlayer { width:280px; background-color:#fff; border:3px solid #999; position:relative;}
.userlayer .userinfo { padding:10px 15px;}
.userlayer .userinfo .username {float:left; font-size:16px; font-weight:bold; color:#0d59a7;}
.userlayer .userinfo .relstate {float:right; padding:2px 0 0 0;}
.userlayer .userinfo .relstate button { background-color:transparent; border:0; padding-left:18px; line-height:1em;  font-size:12px; }
.userlayer .userinfo .relstate button span {visibility:visible;}
.userlayer .userinfo .relstate .follower { background:url(../images/ico_tick.png) 0 center no-repeat; color:#959595; cursor:default; width:80px;}
.userlayer .userinfo .relstate .nofollow { background:url(../images/ico_addfollow.png) 0 center no-repeat; color:#333; width:60px;}
.userlayer .userinfo .relstate .nofollow:hover { color:#00A0DD;}

.userlayer .action { clear:both; border-top:1px solid #eee; padding:5px 15px 10px;  background-color:#f5f5f5; height:22px; margin:0!important; float:none!important; width:auto!important;
}
.userlayer .action a { background:0 0 no-repeat; height:22px; overflow:hidden;  display:block; float:left; text-decoration:none; text-indent:-999px; cursor:pointer; }
.userlayer .action .usertweemix { background-image:url(../images/btn_gotweetmix.gif); width:90px; margin-right:5px;}
.userlayer .action .usertwitter { background-image:url(../images/btn_gotwitter.gif); width:75px; }
.userlayer .action a:hover { background-position:0 -22px;}

.userlayer .layerposition { width:20px; height:10px; padding:0 20px;  position:absolute;}
.userlayer .layerposition.top { background:url(../images/layerpeak.gif) center top no-repeat; top:-10px;   }
.userlayer .layerposition.bottom { background:url(../images/layerpeak.gif) center bottom no-repeat; bottom:-10px; }

.userlayer { 
	-moz-border-radius:10px; 
	-webkit-border-radius:10px; 
	-webkit-box-shadow: 	#bbb 1px 3px 5px;
	-moz-box-shadow:		#bbb 1px 3px 5px;
	box-shadow: 				#bbb 1px 3px 5px;
	}
.userlayer .action  {	
	-moz-border-radius-bottomleft:10px; 
	-webkit-border-bottom-left-radius:10px; 
	-moz-border-radius-bottomright:10px; 
	-webkit-border-bottom-right-radius:10px;
	}


/* ---------------------------------------------------------------*/



/* ---------- SIDEBAR ---------- */

#sidebar h3			{ font-size:1.1em; font-family:'Malgun Gothic'; color:#534741; font-weight:bold; letter-spacing:-0.03em;  }
#sidebar .apart	{ margin-bottom:30px;}
#sidebar .more		{ height:11px; padding:10px 0;}
#sidebar .more a 	{ display:block; float:right; background:url(../images/ico_more.gif) 0 0 no-repeat; width:32px; height:11px; overflow:hidden; text-indent:-999px;}

#news 		{ }
#news li 	{ background:url(../images/bull.gif) 0 9px no-repeat; padding:5px 0 0 15px;}

#popular ul {list-style:none; padding:0; margin:0;}
#popular li 	{ clear:both; padding-top:10px; overflow:hidden;}
#popular .tweetcount { float:left; font-family:tahoma; background:none; padding:0;}
#popular .tweetcount a { display:block;  padding:5px; width:33px; height:25px; line-height:1.2;  border:1px solid #d1e6ed; background-color:#effbff; font-size:0.9em; color:#00A0DD; text-align:center; }
#popular .tweetcount .cnt { color:#00A0DD; display:block; text-align:center; }
#popular .tweetcount a { -moz-border-radius:5px; -webkit-border-radius:5px;}
#popular p 		{ margin-left:55px; min-height:40px; }
#popular p a 	{ color:#00A0DD; }  
#popular p a:hover { color:#7fba00;}


#facebookActivity iframe { margin-top:10px;}