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

.main_new{
	position: relative;
	width : 94%;
	margin: 10px auto;
	height: 1140px;
	border: 1px solid #d7d7d8;
	width: 650px;
	background-color: #fff;
	margin-top: 35px;
}

.all_chosen{
	position: relative;
	margin-right: 17px;
	margin-left: 10px;
	height: 730px;
	overflow: hidden;
}

.new_chosen{
	position: relative;
	margin-right: 16px;
	margin-left: 7px;
	height: 510px;
	display: none;
}
.new_chosen.active{
	display: block;
}

.chosen_box{
	float: right;
	width: 290px;
	height: 90px;
	margin-top: 5px;
	border: 1px solid transparent;
	position: relative;
}
.chosen_box.left{
	margin-right: 15px;
}
.chosen_box.top{
	margin-top: 20px;
}

.chosen_box:hover{
	background-color: #fff;
}

.chosen_box.breaking{
	background-color: #fdf1c5;
	border: 1px solid #faf1dc;
}

.chosen_box.breaking:hover{
	background-color: #fdf1c5;
}

.chosen_box img{
	border: 1px solid #d1d1d1;
	position: absolute ;
	right: 5px;
	top: 7px;
}

.chosen_box>span.botton_redius{
	background-color: #e8e8e8;
	height: 20px;
	position: absolute;
	top: 12px;
	right: 87px;
	padding: 0;
	width: 20;
	text-align: center;
}

.chosen_box.breaking>span.botton_redius{
	background-color: #ffd800;
}

.chosen_box.create>span.botton_redius{
	background-color: #d7ea7e;
}

.chosen_box .fa-create::before {
	content: "\f0ea ";
	font-size: 14px;
	color: #8e8e8e;
	top: 3px;
}

.chosen_box.breaking .fa-create::before {
	content: "\f005";
	color: #5e5107;
	top: 3px;
}

.chosen_box.create .fa-create::before {
	content: "\f040";
	color: #596a08;
	top: 3px;
}

.chosen_box>a>span{
	background-color: #f5f5f5;
	height: 20px;
	position: absolute;
	top: 12px;
	right: 110px;
	padding: 2px 7px;
	width: 180;
	text-align: right;
	color: #4a4949;
}

.chosen_box.create>a>span{
	background-color: #f2f8d6;
}

.chosen_box.breaking>a>span{
	background-color: #f6e8b7;
}

.chosen_box>div{
	background: 0;
	background-color: rgba(0,0,0,.7);
	border-top: 1px solid #606060;
	bottom: 7;
	right: 6px;
	height: auto;
	position: absolute;
	width: 75;
	z-index: 2;
	display: none;
	text-align: left;
}

.chosen_box>div>span{
	display: block;
	height: 19px;
	color: #d3d2d2;
}

.chosen_box:hover>div{
	display: inline;
}

.chosen_box .fa-see::before {
	content: "\f06e";
	font-size: 14px;
	color: #d3d2d2;
}

.chosen_box .fa-comment::before {
	content: "\f075";
	font-size: 14px;
	color: #d3d2d2;
}

.chosen_box .fa {
	margin-left: 10px;
}

.chosen_box>h3{
	position: absolute;
	top: 38px;
	right: 88px;
	width: 195px;
	height: 45px;
	overflow: hidden;
	padding: 2px;
	margin: 0;
	text-align: right;
	font-size: 18px;
	line-height: 120%;
	color: #444444;
}

.chosen_box.create>h3>a{
	color: #2f3804;
}

.chosen_box>h3>a{
	color: #444444;
}

.chosen_box.breaking>h3>a{
	color: #3f3605;
}

.chosen_box>span.chosen_date{
	position: absolute;
	bottom: 3px;
	left: 2px;
	width: 110px;
	height: 18px;
	overflow: hidden;
	padding: 2px;
	margin: 0;
	text-align: left;
	font-size: 11px;
	color: #bbbbbb;
	background-color: #fff;
	display: none;
}

.chosen_box.breaking>span.chosen_date{
	background-color: #fdf1c5;
}

.chosen_box:hover>span.chosen_date{
	display: block;
}

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

.new_other{
	position: relative;
	margin-right: 40px;
	margin-left: 10px;
	padding-top: 10px;
	height: 305px;
	
}

.other_box{
	float: right;
	width: 290px;
	height: 31px;
	padding: 3px;
	position: relative;
	text-align: right;
	direction: rtl;
	overflow: hidden;
}

.other_box h5{
	margin: 0;
	font-size: 16px;
	display: inline-block;
	color: #878787;
	max-width: 170px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	float: right;
}

.other_box h5 a{
	margin: 0;
	font-size: 16px;
	color: #878787;
}

.new_other .other_box h5.active{
	max-width: 245px;
}

.new_other .other_box span.inactive{
	max-width: 42px;
}

.new_other .other_box span.active{
	max-width: 175px;
}

.new_other .other_box h5.inactive{
	max-width: 112px;
}

.other_box.create h5{
	color: #046070;
	float: right;
}

.other_box.create h5 a{
	color: #046070;
}

.other_box span.owner{
	display: inline-block;
	color: #878787;
	float: right;
	margin-top: 3px;
	margin-right: 3px;
	max-width: 115px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.other_box.create span.owner i {
	color: #ac952a;
	font-weight: bold;
}

.other_box span.owner i {
	color: #878787;
}

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

.new_pic {
	position: relative;
	margin-right: 40px;
	margin-left: 0px;
	padding-top: 17px;
	height: 250px;
	text-align: right;
	direction: rtl;
}

.new_pic div.new_pic_titr{
	position: absolute;
	color: #b18f26;
	top: -10px;
	right: 5px;
	z-index: 10;
	font-size: 16px;
	font-weight: bold;
}

.new_pic .fa-arrow-down::before{
	content: "\f0d7 ";
	font-size: 14px;
	color: #b18f26;
	margin-left: 2px;
	padding-top: 3px;
	display: block-inline;
}

.new_pic_line{
	position: absolute;
	border-top: 1px solid #dfc882;
	top: 2px;
	right: 72px;
	z-index: 9;
	width: 530px;
}

.pic_box {
	position: relative;
	display: inline-block;
	width: 140px;
	height: 100px;
	border: 1px solid #b5b5b5;
	overflow: hidden;
	margin: 7px 0 0;
}

.pic_box.center {
	margin-right: 7px;
}

.pic_box img {
	width: 140px;
	height: 100px;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}

.pic_box>div{
	background: 0;
	background-color: rgba(0,0,0,.6);
	border-top: 1px solid #606060;
	bottom: 0;
	height: auto;
	position: absolute;
	width: 100%;
	z-index: 2;
	display: none;
}

.pic_box:hover>div{
	display: block
}

.pic_box>div>div{
	position: static;
	bottom: 0;
	color: #fff;
	width: 100%;
	z-index: 3;
}

.pic_box h5{
	margin: 0px;
	font-size: 14px;
	direction: rtl;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
	width: auto;
	color: #eee;
	padding: 2px 5px;
}

.pic_box .fa-pic::before {
	content: "\f03e";
	font-size: 14px;
	color: #d7d7d7;
	margin-left: 2px;
}

.pic_box .fa-media::before {
	content: "\f030";
	font-size: 14px;
	color: #d7d7d7;
	margin-left: 2px;
}

.pic_box .fa-see::before {
	content: "\f06e";
	font-size: 14px;
	color: #d7d7d7;
}

.pic_box .fa-comment::before {
	content: "\f075";
	font-size: 14px;
	color: #d7d7d7;
}

.pic_box .pic_info{
	border-top: 1px solid #606060;
	height: 20px;
	padding: 3px 5px;
	display: block;
}

.pic_info span{
	 color: #eee;
}

.pic_info span.fa-see{
	float: left;
}

.pic_info span.fa-comment{
	float: right;
}


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

.new_media{
	position: relative;
	margin-right: 40px;
	margin-left: 0px;
	padding-top: 17px;
	height: 120px;
	text-align: right;
	direction: rtl;
}

.media_all_box{
	overflow:hidden;
	height: 120px;
	width: 100%;
}

.media_box{
	display: none;
}

.new_media div.new_media_titr{
	position: absolute;
	color: #b18f26;
	top: -10px;
	right: 5px;
	z-index: 10;
	font-size: 16px;
	font-weight: bold;
}

.new_media_line{
	position: absolute;
	border-top: 1px solid #dfc882;
	top: 2px;
	right: 82px;
	z-index: 9;
	width: 520px;
}

.new_media .fa-arrow-down::before{
	content: "\f0d7 ";
	font-size: 14px;
	color: #b18f26;
	margin-left: 2px;
	padding-top: 3px;
	display: block-inline;
}

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


a.fa-archive::before{
	content: "\f07c";
	font-size: 18px;
	display: block-inline;
}

.new_archive{
	position: absolute;
	left: 0px;
	bottom: 0px;
	color: #a5aa14;
}

.other_archive{
	position: absolute;
	left: 2px;
	bottom: 3px;
	background: #d7d7d7;
	width: 90px;
	height: 26px;
	color: #22ced0;
}

.other_archive>a{
	color: #22ced0;
}

.other_archive .fa-arrow-right::before {
	content: "\f054";
	font-size: 22px;
	color: #474747;
	display: block;
	padding: 3px 5px 1px 5px;
	border-left: 1px solid #cacaca;
}

.other_archive .fa-arrow-left::before {
	content: "\f053";
	font-size: 22px;
	color: #474747;
	display: block;
	padding: 3px 5px 1px 5px;
	border-left: 1px solid #cacaca;
}

.other_archive .fa-arrow-left, .other_archive .fa-arrow-right{
	margin-bottom: 0px;
}

.pic_archive{
	position: absolute;
	left: 10px;
	bottom: 0px;
	color: #d0a522;
}
	
.media_archive{
	background: #d7d7d7;
	position: absolute;
	top: 24px;
	right: -30px;
	width: 25px;
	height: 100px;	
}

.media_archive .fa-arrow-right::before {
	content: "\f054";
	font-size: 22px;
	color: #474747;
	display: block-inline;
	padding: 5px;
	border-bottom: 1px solid #cacaca;
}

.media_archive .fa-arrow-left::before {
	content: "\f053";
	font-size: 22px;
	color: #474747;
	display: block;
	padding: 5px;
	border-bottom: 1px solid #cacaca;
}

.fa-arrow-left, .fa-arrow-right{
	margin-bottom: 5px;
	cursor: pointer;
}

.media_archive .fa-archive{
	margin-top: 8px;
	margin-right: 2px;
	color: #d0a522;
}

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

.main_new .new-title{
	position: absolute;
	right: -67px;
	top: 100px;
	background: #fff;
	width: 125px;
	height: 30px;
	border: 1px solid #e5dbb9;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #a0a42c;
	padding-top: 5px;
	
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
	
}

.main_new .other-title{
	position: absolute;
	right: -67px;
	top: 200px;
	background: #fff;
	width: 125px;
	height: 30px;
	border: 1px solid #c3dee0;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #098c8a;
	padding-top: 5px;
	
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
	
	-webkit-box-shadow: 0px 0px 20px 1px #d4e8e8 inset;
	-moz-box-shadow: 0px 0px 20px 1px #d4e8e8 inset;
	-o-box-shadoww: 0px 0px 20px 1px #d4e8e8 inset;
	box-shadow: 0px 0px 20px 1px #d4e8e8 inset;	
	
}

.main_new .multimedia-title{
	position: absolute;
	right: -67px;
	top: 900px;
	background: #fff;
	width: 125px;
	height: 30px;
	border: 1px solid #e5dbb9;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #c39c12;
	padding-top: 5px;
	
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
	
	-webkit-box-shadow: 0px 0px 20px 1px #e2dfd6 inset;
	-moz-box-shadow: 0px 0px 20px 1px #e2dfd6 inset;
	-o-box-shadoww: 0px 0px 20px 1px #e2dfd6 inset;
	box-shadow: 0px 0px 20px 1px #e2dfd6 inset;	
	
}

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

.active{
	display: block;
}

.transition-all{
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;	
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}














/*
.main_new {
	width:70%;
	height:200px;
	background:#FFF;
	margin:40px auto;
}

 
.main_new
{
  position: relative;
}
.main_new:before, .main_new:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.main_new:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
*/