/**
 * @package     hubzero-cms
 * @file        components/com_collections/assets/css/collections.css
 * @copyright   Copyright 2005-2015 HUBzero Foundation, LLC.
 * @license     http://opensource.org/licenses/MIT MIT
 */

/*

	-- -- -- -- -- -- --
	Collections CSS
	-- -- -- -- -- -- --

*/

	#content-header-extra .about:before {
		content: "\f05a";
		font-family: "Fontcons";
	}
	#content-header-extra ul,
	#content-header-extra li {
		list-style: none;
	}

	#infscr-loading {
		position: absolute;
		bottom: 0;
		left: 0;
		text-align: center;
		width: 100%;
	}

/* Filter bar */
	.filters {
		padding: 30px;
		margin: 0;
		border-bottom: 1px solid #ccc;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}
	.filters .input-group {
		display: table;
		width: 100%;
	}
	.filters .input-cell {
		display: table-cell;
	}
	.filters .input-cell:first-child {
		width: 100%;
	}
	.filters label span {
		display: none;
	}
	.filters .input-cell input[type="text"] {
		width: 100%;
	}
	.filters .input-cell .btn,
	.filters .input-cell input[type="submit"] {
		margin-left: 1em;
	}

/* Bulletins */
	section.main {
		display: block;
		padding: 30px 20px;
	}

	#posts {
		padding: 0;
		margin: 0;
	}
	.post {
		display: block;
		padding: 0;
		font-size: 90%;
		background-color: #fff;
		-webkit-box-shadow: 0 1px 3px rgba(25, 25, 25, 0.4);
		-moz-box-shadow: 0 1px 2px rgba(25, 25, 25, 0.4);
		-ms-box-shadow: 0 1px 3px rgba(25, 25, 25, 0.4);
		-o-box-shadow: 0 1px 3px rgba(25, 25, 25, 0.4);
		box-shadow: 0 1px 3px rgba(25, 25, 25, 0.4);
		border: 1px solid #ddd\9; /* [!] IE 8 */
		margin: 0 10px 20px;
		width: 288px;
	}
	@-moz-document url-prefix() {
		.post {
			width: 282px;
		}
	}
	/* ipad portrait  and (orientation:portrait) */
	@media all and (device-width: 768px) and (device-height: 1024px) {
		.post {
			width: 312px;
		}
	}
	html.opera .post {
		width: 282px;
	}

	.list .post {
		width: auto;
	}
	.list .post .holder {
		width: 288px;
	}

	.post.collection {
		z-index: 1;
		background: #fff;
	}
	.post.collection:before,
	.post.collection:after {
		z-index: -1;
		position: absolute;
		bottom: -4px;
		left: 4px;
		right: 4px;
		content: '';
		height: 2px;
		display: block;
		background-color: #f0f0f0;
		border: 1px solid #ccc;
		border-top: none;
	}
	.post.collection:after {
		z-index: -2;
		bottom: -7px;
		left: 8px;
		right: 8px;
		border: 1px solid #ccc;
	}
	html.opera .post.full,
	.post.full {
		width: auto;
		margin: 0;
		position: relative;
	}

	.post:hover {
		-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
		-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
		-ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
		-o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	}
	.post .content {
		padding: 15px 15px 0 15px;
		padding: 0;
		position: relative;
	}
	.post .content:after {
		position: absolute;
		bottom: 1em;
		right: 1.4em;
		font-family: "Fontcons";
		content: "\2605";
		color: #9c9c9c;
		text-shadow: 0 1px 1px #fff;
	}
	.private .content:after {
		position: absolute;
		bottom: 0.7em;
		right: 1.4em;
		font-family: "Fontcons";
		content: "\f023";
		color: #9c9c9c;
		text-shadow: 0 1px 1px #fff;
	}
	.post .private:before {
		content: "\f023";
		font-family: "Fontcons";
		color: #666;
		margin-right: 0.2em;
	}
	.post .meta {
		position: relative;
	}
	.post .stats {
		overflow: hidden;
		border-bottom: 1px solid #d4d4d4;
		background: #f0f0f0;
		color: #bbb;
		padding: 0.7em 1.4em;
		margin: 0;
		text-align: center;
	}
	.post .stats:before {
		content: "";
		display: none;
	}
	.post .stats span {
		margin-right: 10px;
	}
	.post h4 {
		margin: 0;
		padding: 1em 1.2em 0em 1.2em;
		font-size: 1.2em;
	}
	.post .holder {
		padding: 1em 1.4em 1em 1.4em;
	}
	.post .gallery {
		padding: 0 1.4em 1em 1.4em;
	}
	.post .gallery .img-link {
		display: block;
		float: left;
		width: 50px;
		margin: 0 1em 0 0;
		height: 50px;
		overflow: hidden;
		border-radius: 0.25em;
		border: 1px solid #f0f0f0;
	}
	.post .gallery .img-link:hover {
		border: 1px solid #333;
	}
	.post .description {
		margin: 1em 0 0 0;
		padding: 0em 1.4em 0em 1.4em;
		overflow: hidden;
		word-wrap: break-word;
	}
	.post .tags-wrap {
		padding: 1em 1.4em 1em 1.4em;
	}
	.post .description + .tags-wrap {
		padding-top: 0;
	}
	.post .description p:first-child {
		margin-top: 0;
	}
	/* Actions */
	.post .actions {
		position: absolute;
		z-index: 3;
		top: 0;
		left: 0;
		right: 0;
		bottom: 1px;
		display: none;
		text-align: center;
		background-color: #f0f0f0;
	}
	.post .actions>span,
	.post .actions a {
		padding: 0.5em .7em;
		margin: 0.5em 0.2em 0 0.2em;
	}
	.post .actions>span:before,
	.post .actions a:before {
		content: "";
		font-family: "Fontcons";
	}
	.post .actions .repost:before {
		content: "\f005"; /*"\21BB";*/
	}
	.post .actions .unpost:before {
		content: "\2298";
	}
	.post .actions .like:before {
		content: "\2665";
	}
	.post .actions .unlike:before {
		content: "\2661";
	}
	.post .actions .comment:before {
		content: "\f075";
	}
	.post .actions .edit:before {
		content: "\270E";
		margin-right: 0;
	}
	.post .actions .delete:before {
		content: "\f014";
		margin-right: 0;
	}
	.post .actions .follow:before {
		content: "\f06e";
		margin-right: 0;
	}
	.post .actions .unfollow:before {
		content: "\f070";
		margin-right: 0;
	}

	.post img {
		display: block;
		margin: 0 auto;
	}
	.post .img-link img {
		opacity: 1;
		-webkit-transition: opacity 0.3s;
		width: 100%;
	}
	.full .img-link img {
		width: auto;
	}
	.post .img-link {
		position: relative;
	}
	/* Tables */
	.post table {
		border: none;
		margin: 0;
	}
	.post table tr td {
		text-align: center;
		border: none;
		border-top: 1px solid #f0f0f0;
		border-left: 1px solid #f0f0f0;
		font-size: 1.2em;
		color: #999;
	}
	.post table tr td:first-child {
		border-left: none;
	}
	.post table strong {
		font-size: 2em;
		font-weight: normal;
	}
	.post table span {
		margin: 0;
		padding: 0;
		display: inline-block;
		width: 1em;
		height: 1em;
		overflow: hidden;
		line-height: 1;
	}
	.post table span:before {
		content: "";
		font-family: "Fontcons";
		margin-right: 1em;
		color: #bbb;
	}
	.post table span.link:before {
		content: "\26D3";
	}
	.post table span.link {
		margin: 0;
		padding: 0;
		font-size: 1em;
	}
	.post table span.file:before {
		content: "\f016";
	}
	.post table span.text:before {
		content: "\f036";
	}
	.post table span.image:before {
		content: "\f03e";
	}
	.post table span.collection:before {
		content: "\f005";
	}
	/* Comments */
	.convo {
		margin: 0 -15px;
		padding: 10px 15px;
		background-color: #f0f0f0;
		margin: 0;
	}
	.convo p {
		margin: 0 0 0 36px;
		overflow: hidden;
		word-wrap: break-word;
	}
	.convo .img-link {
		float: left;
		margin-top: 0.4em;
		margin-right: 1em;
		width: 30px;
		border: none;
	}
	.convo .img-link img {
		width: 30px;
		height: 30px;
		border-radius: 0.25em;
	}
	.convo:after {
		clear: both;
		display: block;
		height: 0;
		content: " ";
		visibility: hidden;
	}

	.reposts {
		padding: 0 1.4em;
	}

	/* Creator */
	.creator {
		margin: 0 -15px;
		padding: 10px 15px;
		background-color: transparent;
		border-bottom: 1px solid #f0f0f0;
		margin: 0;
	}
	.creator p {
		margin: 0 0 0 56px;
		overflow: hidden;
		word-wrap: break-word;
		font-size: 1.5em;
		line-height: 1.7em;
	}
	.creator .img-link {
		float: left;
		margin-top: 0.4em;
		margin-right: 1em;
		width: 30px;
		border: none;
	}
	.creator .img-link {
		width: 50px;
	}
	.creator .img-link img {
		width: 50px;
		height: 50px;
		border-radius: 0.25em;
	}

	.post:hover .actions {
		display: block;
	}
	.post .stats .comments {
		border: none;
	}
	.post .stats .comments:before {
		content: "";
		display: none;
	}

	.attribution a {
		color: #6e6e6e;
		border-bottom: none;
	}
	.attribution a:hover {
		color: #111;
		border-bottom: 1px solid #111;
	}
	.attribution p {
		display: table-cell;
		vertical-align: middle;
		text-shadow: 0 1px 1px #fff;
	}

	.btn.repost:before {
		content: "\f005";
	}
	.btn.follow:before {
		content: "\f06e";
	}
	.btn.unfollow:before {
		content: "\f070";
		margin-left: 3px;
	}
	.attribution p span {
		margin-right: 1em;
	}
	.attribution {
		color: #9c9c9c;
		border-top: 1px solid #fafafa;
	}
	.attribution + .reposted {
		border-top: 1px solid #d4d4d4;
	}
	tr.collection .entry-id {
		width: 40px;
		height: 40px;
		display: block;
	}
	tr.collection .entry-id:before {
		content: "\f005";
		font-size: 35px;
		display: block;
		width: 40px;
		height: 40px;
		text-indent: 0;
	}
	table.following tbody td:last-child {
		text-align: right;
	}
	.colormuted, 
	.colormuted a {
		color: #4d4d4d;
	}
	.post .link {
		margin: 0;
		padding: 1em 1.2em 1em 1.2em;
		font-size: 1.2em;
	}

/* Post types */
	.link .content:after {
		content: "\26D3";
	}
	.file .content:after {
		content: "\f016";
	}
	.text .content:after {
		content: "\f036";
	}
	.image .content:after {
		content: "\f03e";
	}
	.collection .content:after {
		content: "\f005";
	}
	.deleted .content:after {
		content: "\f014";
	}
	.deleted {
		opacity: 0.5;
	}
	.deleted:hover {
		opacity: 1;
	}

/* File list */
	.file-list {
		margin: 0 -15px;
		padding: 0;
		list-style: none;
		margin: 0;
	}
	.file-list li {
		border-bottom: 1px solid #f0f0f0;
		overflow: hidden;
		padding: 0.5em 1.4em 0.5em 3.5em;
		margin: 0;
		position: relative;
		text-overflow: ellipsis;
	}
	.file-list li:before {
		display: block;
		position: absolute;
		top: 0.4em;
		left: 0.6em;
		font-family: "Fontcons";
		content: "\f016";
		display: block;
		font-size: 2.3em;
		color: #ccc;
	}
	.file-list li.type-link:before {
		content: "\26D3";
	}
	.file-list li span.file-meta {
		display: block;
	}

/* Instructions */
	#collection-introduction {
		max-width: 32em;
		margin: 3em auto;
		background-color: #fff;
		-webkit-box-shadow: 0 1px 3px rgba(25, 25, 25, 0.4);
		-moz-box-shadow: 0 1px 2px rgba(25, 25, 25, 0.4);
		-ms-box-shadow: 0 1px 3px rgba(25, 25, 25, 0.4);
		-o-box-shadow: 0 1px 3px rgba(25, 25, 25, 0.4);
		box-shadow: 0 1px 3px rgba(25, 25, 25, 0.4);
	}
	#collection-introduction .instructions {
		padding: 1em 1.4em;
	}
	#collection-introduction .questions {
		padding: 1em 1.4em;
		background-color: #f0f0f0;
	}
	#collection-introduction ol {
		list-style: decimal;
	}

/* Forms */
	#hubForm label.hide {
		display: none;
	}
	#hubForm fieldset legend {
	}
	#hubForm fieldset legend + .field-wrap {
		clear: right;
		padding-top: 1em;
	}
	#hubForm .item-asset {
		background: #f7f7f7;
		border-radius: 0.25em;
		position: relative;
		margin: 0 0 0.5em 0;
		padding: 1em;
	}
	#hubForm .item-asset .asset-file {
		margin-right: 4em;
		display: inline-block;
	}
	#hubForm .item-asset .asset-handle {
		margin-right: 1em;
		display: inline-block;
		width: 16px;
		height: 16px;
		position: relative;
	}
	#hubForm .item-asset .asset-handle:after {
		display: inline-block;
		width: 1em;
		height: 1em;
		position: absolute;
		top: 0.2em;
		left: 0;
		content: "\f0dc";
		font-family: "Fontcons";
		font-size: 16px;
		line-height: 1;
		color: #ccc;
	}
	#hubForm .item-asset:hover .asset-handle,
	#hubForm .item-asset:hover .asset-handle:after,
	#hubForm .item-asset .asset-handle:hover:after,
	#hubForm .item-asset .asset-handle:after:hover {
		cursor: move;
		color: #333;
	}
	#hubForm .item-asset span.asset-description {
		position: absolute;
		right: 1em;
		top: 25%;
		font-size: 90%;
	}
	#hubForm .item-asset .delete {
		font-size: 1.7em;
		display: block;
		overflow: hidden;
		width: 1em;
		height: 1em;
		border: none;
	}
	#hubForm .item-asset .delete:before {
		margin-right: 1em;
	}
	#hubForm .file-add {
		margin: 1em 0 2em 0;
	}
	#hubForm .file-add a {
		float: right;
	}
	#hubForm .file-add:after {
		content: " ";
		display: block;
		clear: right;
		visibility: hidden;
		height: 1px;
		overflow: hidden;
	}
	#hubForm label {
		position: relative;
	}
	#hubForm label span.syntax {
		float: right;
		line-height: inherit;
	}

/* Drag and drop file upload */
	.qq-uploading {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 107px;
		color: #fff;
		font-size: 18px;
		padding: 75px 0 0 0;
		text-align: center;
		background: rgba(0,0,0,0.75);
	}
	.qq-uploader {
		position: relative;
		margin: 0;
		padding: 0;
	}
	.linker-button,
	.qq-upload-button,
	.qq-upload-drop-area {
		background: #f7f7f7;
		border: 3px dashed #ddd;
		text-align: center;
		color: #bbb;
		text-shadow: 0 1px 0 #FFF;
		padding: 0;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-ms-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		font-size: 1.5em;
	}
	.asset-uploader .columns {
		margin-top: 0;
		padding-top: 0;
	}
	.linker-button,
	.qq-upload-button,
	.qq-upload-drop-area {
		text-align: center;
		padding: 0.8em 0;
	}
	.linker-button span,
	.qq-upload-button span,
	.qq-upload-drop-area span {
		position: relative;
		padding-left: 1.5em;
	}
	.linker-button span:before,
	.qq-upload-button span:before,
	.qq-upload-drop-area span:before {
		display: block;
		position: absolute;
		top: -0.2em;
		font-family: "Fontcons";
		font-size: 1.5em;
		line-height: 1;
		content: "\f016";
		left: 0;
	}
	.linker-button span:before {
		font-size: 1.5em;
		left: -0.1em;
		content: "\26D3";
	}
	.linker-button:hover,
	.qq-upload-button:hover,
	.qq-upload-drop-area:hover,
	.qq-upload-drop-area-active {
		border: 3px solid #333;
		color: #333;
		cursor: pointer;
	}
	.qq-upload-drop-area {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.qq-upload-list {
		display: none;
	}

/* Modal */
	#sbox-content #hubForm.full fieldset {
		margin: 0;
	}
	#sbox-content.fancybox-inner {
		border: none;
	}
	#sbox-content #hubForm .grid {
		margin: 0;
		position: relative;
		border-bottom: 1px solid #ccc;
	}
	#sbox-content #hubForm .grid label {
		border-bottom: none;
		padding-left: 1em;
		padding-right: 1em;
	}
	#sbox-content #hubForm .grid .or {
		position: absolute;
		bottom: 1em;
		left: 50%;
		margin-left: -0.75em;
	}
	#sbox-content .post {
		margin: 0;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-ms-box-shadow: none;
		-o-box-shadow: none;
		box-shadow: none;
	}
	#sbox-content .post .description {
		font-size: 1.1em;
	}
	#sbox-content .commnts .comment-submit {
		width: auto;
	}
	#sbox-content #hubForm .grid {
		margin: 0;
	}

	.fancybox-title {
		visibility: visible;
	}
	.fancybox-title a {
		color: #fff;
		font-weight: bold;
		border: none;
		text-decoration: none;
	}
	.fancybox-title a:before {
		content: "\f019";
		font-family: "Fontcons";
		font-weight: normal;
		margin-right: 0.4em;
	}
	.fancybox-title a:hover {
		color: orange;
	}

	.post-modal a.fancybox-close,
	.post-modal .fancybox-close {
		background: #f1f1f1;
		-webkit-box-shadow: 0 1px 3px rgba(25, 25, 25, 0.4);
		-moz-box-shadow: 0 1px 2px rgba(25, 25, 25, 0.4);
		-ms-box-shadow: 0 1px 3px rgba(25, 25, 25, 0.4);
		-o-box-shadow: 0 1px 3px rgba(25, 25, 25, 0.4);
		box-shadow: 0 1px 3px rgba(25, 25, 25, 0.4);
		right: 30px;
		top: -20px;
		color: #333;
		line-height: 1.2;
		font-size: 2em;
		text-align: center;
	}
	.post-modal a.fancybox-close:before,
	.post-modal .fancybox-close:before {
		content: "\00D7";
	}
	.post-modal a.fancybox-close:hover,
	.post-modal .fancybox-close:hover {
		color: #c00;
	}
	.entry-date-at,
	.entry-date-on {
		display: none;
	}

	.post-collections .collection {
		position: relative;
		float: left;
	}
	.post-comments {
		margin-top: 30px;
	}

	.post-modal .fancybox-skin,
	.post-modal .fancybox-outer,
	.post-modal .fancybox-inner {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-ms-box-shadow: none;
		-o-box-shadow: none;
		box-shadow: none;
		background: transparent;
	}

/* New buttons */
	.new-post,
	.new-collection,
	.new-post:hover,
	.new-collection:hover {
		background: transparent;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-ms-box-shadow: none;
		-o-box-shadow: none;
		box-shadow: none;
	}
	.new-post a,
	.new-collection a {
		display: block;
		background: #f7f7f7;
		border: 3px dashed #ddd;
		border: 3px dashed rgba(0, 0, 0, 0.1);
		text-align: center;
		color: #bbb;
		color: rgba(0, 0, 0, 0.2);
		margin: 0;
		padding: 4em 2em 2em 2em;
		-webkit-border-radius: 0.25em;
		-moz-border-radius: 0.25em;
		-ms-border-radius: 0.25em;
		-o-border-radius: 0.25em;
		border-radius: 0.25em;
		font-size: 1.5em;
		line-height: 1;
		position: relative;
	}
	.new-post a:before,
	.new-collection a:before {
		display: block;
		position: absolute;
		top: 1em;
		left: 50%;
		font-family: "Fontcons";
		content: "\2295";
		line-height: 1;
		font-size: 2em;
		margin-left: -0.5em;
	}
	.new-post a:hover,
	.new-collection a:hover {
		border: 3px solid #333;
		color: #333;
		cursor: pointer;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-ms-box-shadow: none;
		-o-box-shadow: none;
		box-shadow: none;
	}