/*********i put here also, temporarly, old elements we see on home page */

/********* box bd css (home page) ************/

#box_bd, #box_trending, #box_bd_for_when_close, #box_trending_for_when_close {
	clear: both;
}



#box_bd h3 button, #box_trending h3 button {
	font: 14px sans-serif;
	height: 28px;
	width:auto;
	vertical-align: bottom;
	margin: 0 0 -4px 0;
	padding:0 8px;
}
#box_bd h3 span+button, #box_trending  h3 span+button { margin-left: 20px }
@media (max-width: 699px) {
	#box_bd h3 span { display:block }
}

#box_bd_genre .toclose, #box_bd_order .toclose , #box_trending .toclose {
	width: 200px;
}

/* scrollers keep apearing so I need to add overflow:hidden -_- */
.comic_cover_list {
	height: auto;
	width: 100%;
	padding: 4px 0;
	overflow: hidden;
	background: #000000;
	text-align: center;
}
.comic_cover_list .comic_block {
	border: 1px solid #999;
	margin: 1px;
}


.comic_cover_list .comic_block .ebook {
    background: #000000;
    color: #FFFFFF;
    opacity: 0.8;
    display: block;
    position: absolute;
    height: 20px;
    left: 0;
    bottom: 0;
    font-weight: bold;
    line-height: 20px;
    padding-left: 50px;
    width: 146px;
    z-index: 1;
}

.comic_cover_list .comic_block .ebook div.ebookicon {
  background: url("../images/sprite_reader.png") no-repeat scroll -10px -478px transparent;
  bottom: 0px;
  display: block;
  height: 34px;
  left: 3px;
  position: absolute;
  width: 50px;
  z-index: 2;
}

.load_more, #box_trending_load_more  {
	text-align:center;
	color: #ccc;
	font: 14px sans-serif;
	cursor: pointer;
	padding: 5px 0;
}

.load_more:hover, #box_trending_load_more:hover  {
	color: #ffffff;
}

#box_bd_load_more { text-align:center; }
#box_bd_load_more span {
	display: inline-block;
	width: 40%;
}
@media (max-width: 699px) {
	#box_bd_load_more span { width: 90% }
}

#bd_box_end { /*msg 'no comics with this filter'*/
	color: #ccc; text-align:center;
	font-size: 1.5em;
	margin: 2em;
}

.comic_cover_list div.comic_block {
	text-align: left;
}

/** small def, change image size and whole viewport size. Original is 196x276. Now fits in 170 */
@media (min-width: 761px) and (max-width: 1006px) {
	nothing { for nicer vim syntax-hl }

	.comic_cover_list div.comic_block, .comic_cover_list div.comic_block img, .comic_cover_list div.comic_info, .comic_cover_list .comic_block .ebook {
		width: 186px;
		height: 262px;
	}
	.comic_cover_list div.comic_info { padding: 0 7px; width: 172px; }
	.comic_cover_list .comic_block .ebook div.ebookicon { display:none }
	.comic_cover_list .comic_block .ebook {
	    height: 15px;
	    line-height: 14px;
	    padding: 0 4px;
		width: 178px;
	}
}

/** Mobile. Original is 196x276. Now fits in 150 */
@media (max-width: 760px) {
	nothing { for nicer vim syntax-hl }

	.comic_cover_list div.comic_block p[itemprop=description] {
		display: none;
	}
	.comic_cover_list div.comic_block, .comic_cover_list div.comic_block img, .comic_cover_list div.comic_info, .comic_cover_list .comic_block .ebook {
		width: 159px;
		height: 224px;
	}
	.comic_cover_list div.comic_info { padding: 0 7px; width: 145px; }
	.comic_cover_list .comic_block .ebook div.ebookicon { display:none }
	.comic_cover_list .comic_block .ebook {
	    height: 15px;
	    line-height: 14px;
	    padding: 0 4px;
		width: 151px;
	}
}


/****************** amilova collective (will disapear) ************/

#amilova_collective {
	background:#333;
	overflow: auto;
	height: auto;
	width: 100%;
	border-radius: 8px;
}
#amilova_collective .box_top
{
	float:left;
	width:100%;
	height:30px;
	line-height: 30px;
	color:#A1E52A;
	text-transform:uppercase;
	text-indent:6px;
	
	background: #353535; /* Old browsers */
	background: -moz-linear-gradient(top, #353535 7%, #181818 74%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(7%,#353535), color-stop(74%,#181818)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #353535 7%,#181818 74%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #353535 7%,#181818 74%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #353535 7%,#181818 74%); /* IE10+ */
	background: linear-gradient(top, #353535 7%,#181818 74%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#181818',GradientType=0 ); /* IE6-9 */
	
	-moz-border-radius-topleft:10px;
	-moz-border-radius-topright:10px;
	-webkit-border-radius-topleft:10px;
	-webkit-border-radius-topright:10px;
}
#amilova_collective .box_top a
{
	color:#A1E52A;	
}
#amilova_collective .box_top span,
#amilova_collective .box_top strong
{
	float:left;
}
#amilova_collective .box_top b,
#amilova_collective .box_top em
{
	float:left;
	color:#b62079;
	font-size: 22px;
	line-height:16px;
	height:16px;
	margin-top:5px;
	text-align: center;
	text-indent: 4px;
}
#amilova_collective .box_top em
{
	font-size: 28px;
	margin-top:12px;
}

/********* soon deprecated, replaced by comic_block. Still used in collective and comics list **********/

.browse_comics .comic_cover_box
{
	display:block;
	float:left;
	width:148px;
	height:202px;
	position: relative;
	border:1px solid #313131;
	margin: 1px;
}
.browse_comics .comic_cover_box .comic_hover_info
{
	display:none;
	width:148px;
	height:202px;
	background: url('../images/transperant.png');
	position: absolute; top:0; left: 0;
	color:#fff;
}
.browse_comics .comic_cover_box:hover .comic_hover_info
{ display: block }
.browse_comics img.comic_cover
{
	width:140px;
	height:196px;
	margin:3px;
}
.browse_comics .comic_cover_box .comic_hover_info a {
	text-decoration: none;
	color: #fff;
}
.browse_comics .comic_cover_box .comic_hover_info h4
{
	font-size:13px;
	text-align:left;
	margin: 2px 4px 4px 4px;
}
.browse_comics .comic_cover_box .comic_hover_info p
{
	margin:3px;
	clear:both;
}
.browse_comics .comic_cover_box .comic_hover_info p.description
{
	margin:3px 0;
	text-align:center;
}
.browse_comics .comic_cover_box .comic_hover_info p span {
	color:#7da434;
}
.browse_comics .comic_cover_box .comic_hover_info .green_button .gr_center { color: #fff }


.browse_comics .comic_cover_box.comic_cover_box_daily {
	width: 180px;
	height:120px;
	margin:4px 5px;
}
.browse_comics .comic_cover_box.comic_cover_box_daily img.comic_cover {
	width:180px;
	height:120px;
	margin:0;
}
.browse_comics .comic_cover_box.comic_cover_box_daily .comic_hover_info {
	width:180px;
	height:120px;
}
.browse_comics .comic_cover_box.comic_cover_box_daily .comic_hover_info p
{
}
.browse_comics .comic_cover_box.comic_cover_box_daily h4.promo_text { text-align:center; }
.browse_comics .comic_cover_box.comic_cover_box_daily h4.promo_text a { color: white; }

.comic_info .last_updated
{
	float:left;
	width:100%;
	text-align: center;
	color:#999999;
}
.comic_info .last_updated b
{
	text-transform: capitalize;
}
.comic_info .last_updated span
{
	color:#99cb3f;
}
.browse_comics .comic_cover_box .read, .featured_comic .read, a.read_comic_button
{
	float:left;
	height:21px;
	margin:4px 0 0 2px;
	text-align:center;
	color:white;
	font-weight: bold;
	line-height:21px;
}


/******************** feeds - activitées . Will move somewhere else, maybe be redesigned *******/

#home_feed { /*general bloc in home with 2 columns inside*/
overflow: auto;
width: 100%
}

#index_feed {/*actual activity feed block*/
	float:left;
	width:650px;
	margin-left:5px;
}

#index_feed .feed_options,
#index_feed .feed_stream {
	float:left;
	width:100%;
}

.right_boxes .stats_site {
	background: #cccccc;	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color:#666666;
	margin-right:8px;
	margin-bottom:4px;	
	padding:8px;
	font-size:24px;
	font-weight:bold;
	line-height:34px;
}

#index_feed .feed_options,
.right_boxes .news_title {
	background: #333333;	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color:#ffffff;
	height:25px;
	font-size:12px;
	font-weight:normal;
	line-height: 25px;
	vertical-align:center;
	margin:0 8px 4px 0;   
	padding-left:8px;
	text-transform: capitalize;
}

.right_boxes {
	width: 340px;
	float: right;
}

.right_boxes .inner_box {
	margin-left:8px;
}

.right_boxes .members {
	margin: 1em 0;
	clear: both;
	width: 100%; overflow: auto;
}
.right_boxes .members a {
	display:block;
	float: left; overflow: hidden;
}
.right_boxes .members .user_avatar {
	margin:1px;
}

.right_boxes .news .news_content {
	font-size:14px;
	line-height:30px;
	border-bottom:1px solid #999999;
	margin-right:16px;
}

.right_boxes .inner_box .seemore {
	line-height:20px;
}

#index_feed .feed_options>ul.row_options, #index_feed .feed_options>div.sel_black {
	padding:0 10px;
	margin:5px 0;
	color:#cccccc;
	line-height: 20px;
}

#index_feed .feed_options>div.sel_black>a {
	line-height:20px;
}

#index_feed .feed_options>div.sel_black>div {
	top:20px;
}

#index_feed .feed_options>div.sel_white { padding:0 }
#index_feed ul.row_options li {
	display:inline-block;
	margin:0 8px 0 0;
	cursor: pointer;
	text-transform: capitalize;
	text-indent:0px;
}

#index_feed ul.row_options li.sep {
	margin:0 8px 0 0;
	cursor: default;
	color:black;
}

#index_feed ul.row_options li.current { color:#ffffff }

#index_feed .feed_stream { padding-bottom: 15px }
#index_feed .feed_stream>div span.title { display:block }
#index_feed .feed_stream>div span.text { display:block }

/******** dropdown styles ********/
/** used in "real time activity", ex- language selector, a few numbers selectors in sub-tpls of member.php ....
  Created from a simple <select > with JS CustomDropDown_changeNumberShowing()
  */
.dropdown
{
	float:right;
	clear:right;
	position:relative;
	z-index:11;
	margin-top:0;
}
.header .dropdown
{
	float:left;
	margin-left:4px;
}
.dropdown dd, .dropdown dt, .dropdown ul
{
	margin:0px;
	padding:0px;
}

.dropdown dd
{
	position:relative;
}
.dropdown dt a
{
	width:40px;
    display:block;
	padding-right:20px;
	color:black;
	overflow:hidden;
	background: url(images/site_sprite.png) no-repeat top right;
	background-position: -943px -478px;
}
.dropdown dt a span
{
	cursor:pointer;
	display:block;
}

.dropdown dd ul
{
	float:left;
	background:white;
	display:none;
    list-style:none;
	padding:5px 0px;
	position:absolute;
    left:0px;
	top:2px;
	width:auto;
	font-size: 12px !important;
	border:1px solid black;
	border-top:none;
	min-width:120px;
    z-index:110;
	line-height: 15px;
}
.dropdown dd span.value
{
	display:none;
}
.dropdown dd ul li a, .dropdown dt a
{
	padding:2px;
	display:block;
	color:black;
	font-weight: bold;
	text-align: left;
}
.dropdown dd ul a img, .dropdown dt img
{
	float:left;
	margin-right:5px;
	vertical-align: middle;
	border:1px solid #ccc;
}
.dropdown dd ul li a:hover
{
	background:#ccc;
}

.browse_center .dropdown dt .value,
.box_top_center .dropdown dt .value
{
	display:block;
}

.browse_comics .dropdown dd ul
{
	top:-1px;
	left:-1px;
	background:#951b81;
	border:1px solid #762a68;
}

.browse_comics .dropdown dt a,
.browse_comics .dropdown dd ul li a
{
	color:white;
	font-size:12px;
	width:120px;
	border:none;
	line-height: 14px;
	font-weight: bold;
}
.browse_comics .dropdown dt a
{
	width:85px;
	background:url("images/site_sprite.png") no-repeat -898px -479px;
	height:14px;
}
.browse_comics .dropdown dt a span
{
	padding:0;
	text-transform: capitalize;
}
.browse_comics .dropdown dd ul li a
{
	width:97%;
	text-indent:2px;
    text-transform:capitalize;
}
.box_top_center .dropdown,
.decide_number_holder .dropdown
{
	float:right;
	width:44px;
	height:20px;
	margin:11px 2px 0px 0px;
	background:#e3ebe1;
	border:1px solid #9fb1a3;
}
.box_top_center .dropdown dt a,
.box_top_center .dropdown dd ul li a,
.decide_number_holder .dropdown dt a,
.decide_number_holder .dropdown dd ul li a
{
	padding:0;
	float:none;
	color:black;
	width:44px;
	text-align:center;
	text-indent:0;
	font-size: 12px !important;
	background:#e3ebe1;
}
.box_top_center .dropdown dd ul li a:hover,
.decide_number_holder .dropdown dd ul li a:hover
{
	background:#ccc;
}
.box_top_center .dropdown dt a,
.decide_number_holder .dropdown dt a
{
	height: 20px;
	line-height: 20px !important;
	text-align: left;
	text-indent: 10px !important;
	text-decoration: none !important;
	background:url("images/site_sprite.png") no-repeat -942px -479px !important;
}
.box_top_center .dropdown dd ul,
.decide_number_holder .dropdown dd ul
{
	left:-1px;
	min-width:44px;
	position:relative;
	background:#e3ebe1;
	border:1px solid #9fb1a3;
}

#target_master_feed_language.dropdown dd ul
{
	background:#E7E6E6;
}
#target_master_feed_language.dropdown dd ul li a
{
	color:black;
}
#target_master_feed_language.dropdown dt a
{
	width:40px;
	background:url("images/site_sprite.png") no-repeat scroll -944px -479px;
}
.decide_number_holder .dropdown
{
	margin:-24px 50px 0 0;
}
.decide_number_holder .dropdown dt span.value
{
	display: block;
}