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

    Title :  2015
    Usage :  media pages
    Edited:  2015-06-28

---------------------------------------------

    1. left column
       1.1. image box
    2. center column
       2.1. comments
    3. right column
       3.1. related
       3.2. sponsor
       3.3. popular
    4. responsive layout (736px)

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



/*  1. left column
---------------------------------------------*/

#main .left-col {
	float: left;
	margin: 12px 0 20px 20px;
	width: 234px;
	}



/*  1.1. image box
---------------------------------------------*/

.img-box {
	margin-top: 11px;
	overflow: hidden;
	background: #cccac9;
	border-radius: 5px;
	}

.img-box .header {
	position: relative;
	padding: 0 12px;
	height: 35px;
	background: #fff;
	}

.img-box .header h3 {
	color: #34ccbf;
	font-weight: 500;
	font-size: 14px;
	line-height: 37px;
	}

.img-box .header h3 small {
	margin-left: 5px;
	color: #606060;
	font-family: Arial, sans-serif;
	letter-spacing: 0;
	}

.img-box .header > a {
	position: absolute;
	top: 5px;
	right: 20px;
	text-decoration: none;
	}

.img-box .header > a:before {
	content: "\f105";
	color: #999;
	font: 24px/1 "Font Awesome", sans-serif;
	}

.img-box ul {
	padding: 5px 0 7px 7px;
	}

.img-box ul li {
	float: left;
	margin: 2px 2px 0 0;
	width: 72px;
	height: 72px;
	}

.img-box ul li.featured {
	float: none;
	width: 220px;
	height: 148px;
	}

.img-box ul li a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid #85827f;
	border-radius: 1px;
	}

.img-box ul li a img {
	width: 100%;
	height: 100%;
	}

.img-box ul:after {
	content: "";
	clear: both;
	display: block;
	}



/*  2. center column
---------------------------------------------*/

#main .center-col {
	float: left;
	margin: 12px 0 20px 20px;
	width: 527px;
	}



/*  2.1. comments
---------------------------------------------*/

#cmnt {
	margin-top: 11px;
	padding-top: 25px;
	background: #fff;
	border-radius: 5px;
	}

#cmnt .cmnt {
	margin-left: 17px;
	}

#cmnt .cmnt > .toggle {
	display: inline-block;
	margin-top: 8px;
	cursor: pointer;
	color: #319f9c;
	font-size: 12px;
	}

#cmnt .cmnt > .toggle:after {
	content: "\f107";
	float: right;
	margin: 1px 0 0 6px;
	margin-top: -moz-calc(0px);
	color: #606060;
	font: 12px/1.2 "Font Awesome";
	}

#cmnt .cmnt > .toggle.open:after {
	content: "\f106";
	}

#cmnt .cmnt .scroll-pane {
	margin-top: 4px;
	overflow: hidden;
	outline: none;
	}

#cmnt .cmnt .scroll-pane .jspContainer .jspPane {
	width: 100% !important;
	}

#cmnt .cmnt .scroll-pane .jspContainer .jspVerticalBar {
	position: absolute;
	top: 0;
	right: 0;
	width: 7px;
	background: #e9e9e9;
	}

#cmnt .cmnt .scroll-pane .jspContainer .jspVerticalBar .jspTrack {
	height: 100% !important;
	background: #e9e9e9;
	}

#cmnt .cmnt .scroll-pane .jspContainer .jspVerticalBar .jspTrack .jspDrag {
	background: #c0c4ca;
	}

#cmnt .cmnt .scroll-pane .jspContainer .jspVerticalBar .jspTrack .jspDrag.jspHover,
#cmnt .cmnt .scroll-pane .jspContainer .jspVerticalBar .jspTrack .jspDrag.jspActive {
	background: #909191;
	}

#cmnt .cmnt .scroll-pane .jspContainer .jspHorizontalBar {
	display: none;
	}

#cmnt .cmnt ul {
	margin-right: 17px;
	}

#cmnt .cmnt ul li {
	position: relative;
	padding: 14px 0 14px 58px;
	min-height: 71px;
	border-top: 1px dotted #cac9c9;
	}

.ie8 #cmnt .cmnt ul li {
	min-height: 43px;
	}

#cmnt .cmnt ul li .author {
	font-weight: 400;
	text-decoration: none;
	}

#cmnt .cmnt ul li .author:hover {
	color: #ff7900;
	}

#cmnt .cmnt ul li .author img {
	position: absolute;
	top: 14px;
	left: 0;
	width: 43px;
	height: 43px;
	border-radius: 17px;
	behavior: url(js/PIE.htc);
	}

#cmnt .cmnt ul li .author span {
	font-size: 14px;
	}

#cmnt .cmnt ul li .time {
	margin-left: 20px;
	color: #909190;
	font-size: 12px;
	}

#cmnt .cmnt ul li .meta {
	position: absolute;
	top: 15px;
	right: -6px;
	cursor: default;
	color: #909190;
	font-size: 12px;
	}

#cmnt .cmnt ul li .meta a {
	display: inline-block;
	margin: 0 6px;
	color: #319f9c;
	}

#cmnt .cmnt ul li .meta a small {
	color: #909190;
	}

#cmnt .cmnt ul li p {
	margin-top: 7px;
	color: #909190;
	font-size: 12px;
	line-height: 1.4;
	}

#cmnt .cmnt ul li:after {
	content: "";
	clear: both;
	display: block;
	}

#cmnt .cmnt ul li .cmnt-s {
	margin: 10px 0 -14px -12px;
	overflow: hidden;
	background: #f7f7f7;
	border-left: 2px solid #60b4b2;
	}

#cmnt .cmnt ul li .cmnt-s .toggle {
	display: block;
	height: 25px;
	cursor: pointer;
	color: #909190;
	font-size: 12px;
	line-height: 25px;
	text-align: center;
	text-decoration: none;
	border-top: 1px dotted #cac9c9;
	}

#cmnt .cmnt ul li .cmnt-s .toggle:before {
	content: "\f064";
	margin-right: 6px;
	font-family: "Font Awesome";
	}

#cmnt .cmnt ul li .cmnt-s .toggle:after {
	content: "\f107";
	margin-left: 6px;
	font-family: "Font Awesome";
	}

#cmnt .cmnt ul li .cmnt-s .toggle.open:after {
	content: "\f106";
	}

#cmnt .cmnt ul li .cmnt-s .scroll-pane-s {
	overflow: hidden;
	}

#cmnt .cmnt ul li .cmnt-s .toggle + .scroll-pane-s {
	height: 0;
	}

#cmnt .cmnt ul li .cmnt-s .scroll-pane-s ul {
	margin-right: 0;
	}

#cmnt .cmnt ul li .cmnt-s .scroll-pane-s ul li:first-child {
	border-top-width: 1px;
	}

#cmnt .cmnt ul li .cmnt-s .scroll-pane-s ul li {
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 60px;
	min-height: 55px;
	}

.ie8 #cmnt .cmnt ul li .cmnt-s .scroll-pane-s ul li {
	min-height: 41px;
	}

#cmnt .cmnt ul li .cmnt-s .scroll-pane-s ul li .author img {
	top: 9px;
	left: 13px;
	width: 36px;
	height: 36px;
	}

#cmnt .cmnt ul li .cmnt-s .scroll-pane-s ul li .author span {
	font-size: 12px;
	}

#cmnt .cmnt ul li .cmnt-s .scroll-pane-s ul li .meta {
	top: 7px;
	right: 10px;
	}

#cmnt .cmnt ul li .cmnt-s .scroll-pane-s ul li p {
	margin-right: 8px;
	}

#cmnt .cmnt ul li .cmnt-s form {
	margin-top: 0;
	padding-top: 14px;
	padding-left: 13px;
	padding-bottom: 11px;
	overflow: hidden;
	border-top: 1px dotted #cac9c9;
	}

#cmnt .cmnt ul li .cmnt-s form div img {
	margin-top: -3px;
	width: 36px;
	height: 36px;
	}

#cmnt .cmnt ul li .cmnt-s form div input {
	width: 269px;
	height: 30px;
	font-size: 12px;
	background: #fff;
	border: 1px solid #c9c9c9;
	}

.ie8 #cmnt .cmnt ul li .cmnt-s form div input {
	padding-top: 6px;
	padding-bottom: 6px;
	}

#cmnt .cmnt ul li .cmnt-s form div button {
	margin-top: 4px;
	width: 36px;
	height: 21px;
	font-size: 12px;
	line-height: 21px;
	border-radius: 10px;
	}

#cmnt .cmnt form div img {
	float: left;
	margin-top: -4px;
	width: 44px;
	height: 44px;
	border-radius: 17px;
	}

#cmnt .cmnt form div input {
	position: relative;
	float: left;
	margin-left: 11px;
	padding: 8px 11px;
	width: 368px;
	height: 36px;
	color: #606060;
	font-size: 14px;
	border: 1px solid #bdbdbd;
	border-radius: 5px;
	background: #eaebed;
	behavior: url(js/PIE.htc);
	}

#cmnt .cmnt form div button {
	position: relative;
	float: left;
	margin: -4px 0 0 11px;
	width: 44px;
	height: 44px;
	color: #fff;
	font-size: 13px;
	background: #319f9c;
	border: none;
	border-radius: 17px;
	behavior: url(js/PIE.htc);
	}

#cmnt .cmnt form div button:hover {
	background: #34ccbf;
	}

#cmnt .cmnt form:after {
	content: "";
	clear: both;
	display: block;
	}

#cmnt .cmnt .header {
	position: relative;
	padding: 31px 0 11px;
	}

#cmnt .cmnt .header .tab {
	font-size: 0;
	}

#cmnt .cmnt .header .tab a {
	display: inline-block;
	margin-right: 11px;
	width: 45px;
	height: 31px;
	color: #ff7900;
	font-size: 13.43px;
	line-height: 29px;
	text-align: center;
	text-decoration: none;
	border: 1px solid #b7b7b7;
	border-radius: 9px;
	}

#cmnt .cmnt .header .tab a:hover,
#cmnt .cmnt .header .tab a.curr {
	color: #fff;
	background: #ff7900;
	border-color: #ff7900;
	}

#cmnt .cmnt .header .all {
	position: absolute;
	top: 39px;
	right: 17px;
	color: #606060;
	font-size: 14px;
	white-space: nowrap;
	}



/*  3. right column
---------------------------------------------*/

#main .right-col {
	float: right;
	margin: 12px 20px 20px 0;
	width: 160px;
	}



/*  3.1. related
---------------------------------------------*/

#related {
	position: relative;
	background: #fff;
	border-radius: 5px;
	behavior: url(js/PIE.htc);
	}

#related h3 {
	position: relative;
	padding: 14px 14px 10px;
	color: #ff7800;
	font-weight: 300;
	font-size: 14px;
	border-bottom: 1px solid #d4d4d4;
	}

#related h3 a {
	position: absolute;
	top: 14px;
	right: 15px;
	cursor: pointer;
	text-decoration: none;
	-moz-transform: rotate(0.1deg);
	}

#related h3 a:before {
	content: "\f01e";
	color: #919191;
	font: 12px/1 "Font Awesome";
	}

#related ul {
	padding: 2px 0;
	}

#related ul li a {
	position: relative;
	display: block;
	padding: 8px 0 8px 66px;
	min-height: 58px;
	text-decoration: none;
	}

.ie8 #related ul li a {
	min-height: 38px;
	}

#related ul li a img {
	position: absolute;
	top: 8px;
	left: 14px;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	}

#related ul li a strong {
	display: block;
	padding-top: 5px;
	font-weight: 300;
	font-size: 12px;
	}

#related ul li a span {
	display: block;
	margin-top: 4px;
	color: #b2b2b2;
	font-size: 12px;
	}



/*  3.2. sponsor
---------------------------------------------*/

#main .right-col .sponsor {
	padding-bottom: 0;
	border-radius: 5px 5px 0 0;
	}

#main .right-col .sponsor .banner {
	margin: 0 -12px;
	padding-top: 11px;
	}

#main .right-col .sponsor .banner + .banner {
	background: #e6e2e1;
	}



/*  3.3. popular
---------------------------------------------*/

#topic {
	position: relative;
	margin-top: 11px;
	background: #fff;
	border-radius: 5px;
	behavior: url(js/PIE.htc);
	}

#topic h3 {
	position: relative;
	padding: 14px 14px 10px;
	color: #ff7800;
	font-weight: 300;
	font-size: 14px;
	border-bottom: 1px solid #d4d4d4;
	}

#topic h3 a {
	position: absolute;
	top: 14px;
	right: 15px;
	cursor: pointer;
	text-decoration: none;
	-moz-transform: rotate(0.1deg);
	}

#topic h3 a:before {
	content: "\f01e";
	color: #919191;
	font: 12px/1 "Font Awesome";
	}

#topic ul {
	padding: 2px 2px 10px 10px;
	font-size: 0;
	}

#topic ul li {
	display: inline-block;
	margin: 8px 8px 0 0;
	}

#topic ul li a {
	display: inline-block;
	padding: 2px 3px 3px;
	padding-top: -moz-calc(3px);
	cursor: pointer;
	color: #656565;
	font-weight: 300;
	font-size: 12px;
	text-decoration: none;
	border: 1px solid #a9a9a9;
	border-radius: 3px;
	}

#topic ul li a:hover {
	color: #fff;
	background: #ff7502;
	border-color: #ff7502;
	}



/*  4. responsive layout (736px)
---------------------------------------------*/

@media screen and (max-width: 736px) {

/*  1. left column  */

#main .left-col {
	display: none;
	}


/*  2. center column  */

#main .center-col {
	float: none;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-bottom: 8px;
	width: auto;
	}

/*  2.1. comments  */

#cmnt {
	margin-top: 8px;
	margin-right: 6px;
	margin-left: 6px;
	padding-top: 15px;
	background: #fff;
	border-radius: 5px;
	}

#cmnt .cmnt {
	margin: 6px 0 0 3px;
	}

#cmnt .cmnt > .toggle {
	margin-left: 5px;
	}

#cmnt .cmnt ul {
	margin-right: 3px;
	}

#cmnt .cmnt ul li {
	padding: 12px 12px 12px 66px;
	overflow: hidden;
	min-height: 63px;
	}

#cmnt .cmnt ul li .author img {
	top: 12px;
	left: 8px;
	width: 44px;
	height: 44px;
	border-radius: 17px;
	}

#cmnt .cmnt ul li .author span {
	position: relative;
	top: -3px;
	font-size: 13.99px;
	}

#cmnt .cmnt ul li .time {
	position: relative;
	top: -3px;
	margin-left: 12px;
	}

#cmnt .cmnt ul li .meta {
	top: 10px;
	top: -moz-calc(11px);
	right: 4px;
	}

#cmnt .cmnt ul li p {
	margin-top: 4px;
	}

#cmnt .cmnt ul li:after {
	content: "";
	clear: both;
	display: block;
	}

#cmnt .cmnt ul li .cmnt-s {
	margin-right: -18px;
	margin-left: -17px;
	border-left-width: 1px;
	}

#cmnt .cmnt ul li .cmnt-s .scroll-pane-s ul li .author img {
	border-radius: 16px;
	}

#cmnt .cmnt ul li .cmnt-s .scroll-pane-s ul li .author span {
	top: 1px;
	}

#cmnt .cmnt ul li .cmnt-s .scroll-pane-s ul li .time {
	top: 1px;
	}

#cmnt .cmnt ul li .cmnt-s .scroll-pane-s ul li .meta {
	top: 8px;
	right: 11px;
	}

#cmnt .cmnt ul li .cmnt-s .scroll-pane-s form {
	margin-left: 0;
	width: 250px;
	overflow: hidden;
	}

#cmnt .cmnt ul li .cmnt-s .scroll-pane-s form div input {
	width: 135px;
	}

#cmnt .cmnt ul li .cmnt-s .scroll-pane-s form div button {
	width: 34px;
	}

#cmnt .cmnt ul li .cmnt-s .scroll-pane-s ul li p {
	margin-top: 7px;
	}

#cmnt .cmnt form {
	margin-left: 8px;
	width: 286px;
	}

#cmnt .cmnt form div input {
	margin-left: 10px;
	padding: 6px 10px;
	width: 175px;
	height: 36px;
	font-size: 12px;
	border-radius: 4px;
	}

#cmnt .cmnt form div input.entered {
	color: #000;
	}

#cmnt .cmnt form div button {
	margin-left: 10px;
	width: 44px;
	height: 44px;
	border-radius: 15px;
	}

#cmnt .cmnt .header {
	margin-right: 11px;
	margin-left: 8px;
	padding-top: 19px;
	padding-bottom: 13px;
	}

#cmnt .cmnt .header .all {
	top: 28px;
	right: 3px;
	}


/*  3. right column  */

#main .right-col {
	display: none;
	}

}