
#header_container #header {
	width:100%;
}

#header_rotating_container {
	overflow:hidden;
}

@media (min-width: 1350px) {


	/** Trending Blog (on homepage) **/
	/* make container just bigger than the size of page_canvas : 1016px
	   Problem with top, it sucks. Should be aligned with box-bd.
	   HELP
	   */
	#trend_blogs {
		position: absolute; 
		top: 0; 
		left: 50%; 
		width: 1008px; 
		margin-left: -504px;
		overflow: visible;
		display:inline-block;
	}
	#trend_blogs>div {
		width: 140px; margin: 0 -148px;
		position: absolute;
		top: 200px;
		left: 0;
		overflow:hidden;
	}
	#trend_blogs>div+div { left: auto; right: 0 }
}

@media (min-width: 1007px) and (max-width: 1279px) {


}


/*@media (min-width: 700px) and (max-width: 1006px) {*/
@media (min-width: 761px) and (max-width: 1006px) {
	#header_rotating_container_mini, #header_rotating_container,#header_container  #header h1 {
		display:none;	
	}	
	#header_container {
		margin-bottom:5px;
	}
	#header_container .page_canvas {
		width:100%;
		overflow-x:hidden;
		float:left;
	}

	#header {
		width:100%;
	}
	.page_canvas {
		width:761px;
	}
	#header_container .page_canvas {
		width:100%;
		/*overflow-x:hidden;*/
		float:left;
		margin:0;
		overflow: visible;
	}
	.comic_page_trending .box_trend {
		float:left !important;
	}

	.comic_page_trending .group2 .box_trend.small,
	.comic_page_trending .group2 .box_trend.tall,
	.comic_page_trending .group3 .box_trend.small + .box_trend.small + .box_trend.small,
	.comic_page_trending .group5 .box_trend.xsmall + .box_trend.xsmall + .box_trend.xsmall{
		display:none;
	}
	
	.comic_page_trending .box_trend.small,
	.comic_page_trending .box_trend.tall,
	.comic_page_trending .box_trend.xsmall
	{
		margin-left:20px;
		margin-right:20px;
		padding-left:26px;
		padding-right:26px;
	}

	.comic_page_trending .box_trend.wide
	{
		margin-left:20px;
		padding-left: 47px;
		padding-right: 47px;
	}
	#index_feed {
		width:750px !important;
	} 
	#index_feed .feed_options{
		width:740px !important;
	}
	#home_feed .right_boxes {
		width:748px;
		float:left;
		padding:10px 2px 10px 10px;
	}
}

/* header for mobile */
@media (max-width: 730px) {
	#header_rotating_container_mini, 
	#header_rotating_container,
	#header_container  #header h1,
	#header_container  #header #search,
	#header_container  #header #lg_current,
	#header_container  #header #forum,
	#header_container  #header #barre2,
	#header_container  #header #barre1,
	#header #profile .username,
	.comic_page_trending .wide{
		display:none !important;	
	}

	#header_container{
		float:left;
		height:132px;
		min-width:310px;
		z-index:10;
		margin-bottom:5px;
	}
	#header_container #header {
		height:130px;
	}
	#header_container #header_logo {
		width:100%;
		height:37px;
		text-align:center;
		border-bottom: 1px solid #999999;	
	}
	#header_container #header_logo img {
		padding:1px auto;
	}

	#header_container #header_search {
		display:block !important;
		right: 0px;
    		top: 84px;
		width:96%;
		padding: 5px 2%;
		border:0;
		border-top: 1px solid #999999;
		background: #99CC33;
		z-index:1;
	}
	
	#header_container #header_search .search_site {
		width:100%;
		margin:0;
	}
	#header_container #header_search .search_site .search_q {
		width:70%;
		margin-right:0px;
	    	float: left;
		height:33px;
		border-radius: 6px 0 0 6px;
		-moz-border-radius: 6px 0 0 6px;
		-webkit-border-radius: 6px 0 0 6px;
		padding-left: 0.5%;
		font-size:15px;
	}

	#header_container #header_search .search_site #search_button{
	    background: url("../images/loupe.png") no-repeat scroll 50% 0 #000000;
	    width: 28%;
	    color: #666666;
	    cursor: pointer;
	    float: left;
	    height:35px;
	    margin: 1px 0;
	    padding: 0px 0px;
	    position: relative;
	    z-index: 5500;
	    border-radius: 0 6px 6px 0;
	    -moz-border-radius: 0 6px 6px 0;
	    -webkit-border-radius: 0 6px 6px 0;
	}
	#header_container #header #header_browse {
		top: 81px;
		left:0;
		width:90%;
		z-index:10;
	}
	#header_container #header #header_browse .column{
		width: 100%;
		float:left;	
		font-size:14px;	
	}
	#header_browse .column .linelink,
	#header_browse .column .linehead,
	#header_browse .column .linesep {
		margin: 0 2%;
		padding-left:0%;
		padding-right:0%;
		width:96%;
	}
	#header_container #header .linelink,
	#header_container #header .linehead {
		line-height:18px;
		font-size:14px;	
	}
	#header_container #header #explorer {
		position: absolute;
		left:1px;	
		top:38px;
	   	cursor: pointer;
	   	color: white;
	    	background: url("../images/explorer.png") no-repeat #ffffff;
	    	content: "";
	    	border-right: 1px solid #999999;
		bottom: 0;
		height: 40px;
		line-height: 40px;
		vertical-align: middle;
		display: block;
		overflow: hidden;
		padding: 0;
		width: 50px;
		z-index:11;
	}
	#header_container #header #explorer.opened{
		top:39px;
		left:0px;	
	}

	#header_container #header #explorer .explorer_bg{
		display:none;
	}

	#header_container #header #explorer:before {
	    content: "";
	    font-size: 40px;
	    padding-left: 8px;
	    padding-right: 100px;
	}
	#header_container #header .simplelink{
		font-size:14px;
	}
	
	#header_container #header #header_profile {
		left:auto;
		right:0px;
		top:36px;
	}
	#header_container #header #profile_container {
		border-left: 1px solid #999999;
		margin:3px 0;
		height:40px;
		z-index:15;
	}

	#header_container #header #profile_container .user_avatar.px30 img{
		width:35px;
	}
	#header .dropbutton.opened {
		margin-top:0px !important;
		padding-top:2px !important;
	}
	#header #notification_container{
		position:static;
		z-index:20;
	}
	#header #header_notification {
		top:78px;
		width:90%;
	}
	#header_notification .inner,#header_notification .menu {
		width:100%;	
	}
	#header_notification .list div {
		width:80%;
	}
	#personInfo_options {
		display:none !important;
	}
	#header_container #header #gold {
		margin-top:5px;
		margin-right:3%;
	}
	#header_container #header #message {
		margin-top:10px;
		margin-right:3%;
	}
	#header_container #header #cart{
		margin-top:10px;
		margin-right:3%;
	}
	#header_container #header #notification_container {
		margin-top:5px;
		margin-right:3%;
	}
	#header #notif_button.opened {
		padding-top:6px !important;
	}
	#header_search #search_results {
		width:100%;
		background:#ffffff;
	}
	#header_search #search_results ul {
		background:#ffffff;
	}
}


@media (min-width: 490px) and (max-width: 760px) {
	#header_rotating_container_mini, #header_rotating_container,#header_container  #header h1 {
		display:none;	
	}	
	#header_container {
		margin-bottom:5px;
	}
	#header_container .page_canvas {
		width:100%;
		/*overflow-x:hidden;*/
		float:left;
	}

	#header {
		width:100%;
	}
	.page_canvas {
		width:491px;
	}
	#header_container .page_canvas {
		width:100%;
		/*overflow-x:hidden;*/
		float:left;
	}
	.comic_page_trending .box_trend {
		float:left !important;
	}

	.comic_page_trending .group2 .box_trend.small,
	.comic_page_trending .group2 .box_trend.tall,
	.comic_page_trending .group3 .box_trend.small + .box_trend.small + .box_trend.small,
	.comic_page_trending .group5 .box_trend.xsmall + .box_trend.xsmall + .box_trend.xsmall{
		display:none;
	}
	.comic_page_trending .box_trend.small,
	.comic_page_trending .box_trend.tall,
	.comic_page_trending .box_trend.xsmall
	{
		margin-left:38px;
		margin-right:38px;
		padding-left:61px;
		padding-right:61px;
	}

	.comic_page_trending .box_trend.wide{
		display:none !important;	
	}

	#index_feed {
		width:479px !important;
	} 
	#index_feed .feed_options{
		width:472px !important;
	}
	#home_feed .right_boxes {
		width:475px;
		float:left;
		padding:10px 2px 10px 10px;
	}
	
}






/*@media (max-width: 699px) {*/
@media (max-width: 490px) {
	.comic_page_trending .wide{
		display:none !important;	
	}	
	.page_canvas {
		width:310px;
	}
	#header_container .page_canvas {
		width:100%;
		/*overflow-x:hidden;*/
		float:left;
	}
	
	.comic_page_trending .box_trend{
		padding-left:5px;	
		padding-right:5px;
	}
	
	#home_feed {
		width:310px !important;
	}
	#index_feed {
		width:300px !important;
	} 
	#index_feed .feed_options{
		width:290px !important;
	}
	#home_feed .right_boxes {
		width:296px;
		float:left;
		padding:10px 2px 10px 10px;
	}
	#box_trending h3 span {
	    display: block;
	}
}


