pen/assets/css/pen-content.css

#main article,
#main .pen_content_wrapper {
	position: relative;
}
#main .page-content,
#main .pen_article_wrapper > article,
body.pen_list_masonry #pen_masonry article,
body.pen_list_plain #pen_pager {
	background: #fff;
	color: #333;
}
body.pen_round_corners #main .page-content,
body.pen_round_corners #main .pen_article_wrapper > article,
body.pen_round_corners.pen_list_masonry #pen_masonry article {
	border-radius: 10px 10px 5px 5px; /* This makes the top corners cleaner when the content title has a dark background color. */
}
body.pen_round_corners.pen_list_plain #pen_pager,
body.pen_list_header_hide.pen_round_corners #main .page-content,
body.pen_list_header_hide.pen_round_corners #main .pen_article_wrapper > article,
body.pen_list_header_hide.pen_round_corners.pen_list_masonry #pen_masonry article,
body.pen_content_header_hide.pen_round_corners #main .page-content,
body.pen_content_header_hide.pen_round_corners #main .pen_article_wrapper > article,
body.pen_content_header_hide.pen_round_corners.pen_list_masonry #pen_masonry article {
	border-radius: 5px;
}
body.pen_drop_shadow #main .page-content,
body.pen_drop_shadow #main .pen_article_wrapper > article,
body.pen_drop_shadow.pen_list_masonry #pen_masonry article,
body.pen_drop_shadow.pen_list_plain #pen_pager,
body.pen_drop_shadow #main .pen_options_overview.pen_off_screen {
	box-shadow: 0 5px 10px rgba(0,0,0,0.4), 0 0 5px rgba(0,0,0,0.4);
}
#main .page-content,
#main .pen_article_wrapper > article,
body.pen_list_masonry #pen_masonry article {
	float: left;
	margin: 0 0 1em;
	width: 100%;
}
body.pen_list_masonry #pen_masonry article {
	margin: 0 0.5% 10px 0.5% !important;
}
body.pen_list_masonry #pen_masonry,
body.pen_list_masonry #pen_masonry article {
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
}
#main article .entry-content h2,
#main article .entry-content h3,
#main article .entry-content h4,
#main article .entry-content h5 {
	margin: 0 0 0.25em;
	position: relative;
}
#main article .entry-content h2:first-child:last-child,
#main article .entry-content h3:first-child:last-child,
#main article .entry-content h4:first-child:last-child,
#main article .entry-content h5:first-child:last-child {
	padding-bottom: 0;
}
#main .page-content,
#main article .entry-content,
#main article .entry-summary,
#main article .entry-footer {
	float: left;
	padding: 2em;
	width: 100%;
}
#main article .entry-footer {
	padding-top: 0;
}
#main article header {
	background: #dddddd;
	background: -ms-linear-gradient(325deg, #ffffff 0%, #dddddd 100%);
	background: linear-gradient(125deg, #ffffff 0%, #dddddd 100%);
	float: left;
	line-height: 1.2;
	padding: 2em;
	position: relative;
	width: 100%;
	z-index: 40;
}
body.pen_round_corners #main article header {
	border-radius: 5px 5px 0 0;
}
#main header.page-header {
	float: left;
	margin: 0 0 1em;
	padding: 1em 0;
	width: 100%;
}
body.pen_drop_shadow #main header.page-header {
	text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

body.pen_content_header_center #main header,
body.pen_list_post_header_center #main header {
	text-align: center;
}
#main header h1.entry-title,
#main header h2.entry-title,
#main header h1.page-title,
#main header h2.page-title {
	float: left;
	font-size: 2em;
	font-weight: bold;
	margin: 0;
	padding: 0;
}
#main header .entry-title b,
#main header .entry-title strong,
#main header .page-title b,
#main header .page-title strong {
	font-weight: 800;
}
body.pen_list_header_center #main header .entry-title,
body.pen_list_header_center #main header .page-title,
#main article.pen_list_header_center header .entry-title,
#main article.pen_list_header_center header .page-title,
body.pen_list_title_center #main header .entry-title,
body.pen_list_title_center #main header .page-title,
#main article.pen_list_title_center header .entry-title,
#main article.pen_list_title_center header .page-title,
body.pen_content_header_center #main header .entry-title,
body.pen_content_header_center #main header .page-title,
body.pen_content_title_center #main header .entry-title,
body.pen_content_title_center #main header .page-title {
	text-align: center;
	width: 100%;
}
#main article header a {
	color: #000;
	text-decoration: none;
}
#main article header a:focus,
#main article header a:hover,
#main article header a:active {
	color: #0087cc;
	outline: none;
	text-decoration: none;
}
#main article .entry-meta {
	float: left;
	font-size: 0.714em;
	line-height: 0;
	margin: 1em 0 0;
	opacity: 0.9;
	padding: 0;
	text-transform: uppercase;
	width: 100%;
}
#main article header .entry-meta {
	opacity: 0.75;
}
#main article.pen_list_header_center header .entry-meta,
body.pen_content_header_center #main article header .entry-meta {
	text-align: center;
	margin: 1em auto 0;
	width: 100%;
}
#main article .entry-meta a {
	font-weight: bold;
	text-decoration: none;
}
#main article .entry-meta > span {
	position: relative;
}
#main article header span.byline,
#main article header span.posted-on {
	white-space: nowrap;
}
#main article header span.byline,
#main article header span.posted-on,
#main article header span.cat-links {
	display: inline-block;
	line-height: 1.3;
	margin: 1em 0 0;
}
#main article .entry-meta > span:after {
	background: -ms-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 50%, rgba(0,0,0,0) 100%);
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 50%, rgba(0,0,0,0) 100%);
	content: "";
	display: inline-block;
	min-height: 1em;
	margin: 0 0.5em 0 0.75em;
	speak: none;
	transform: rotate(-20deg);
	width: 1px;
	vertical-align: sub;
}
#main article .entry-meta > span:last-child:after {
	display: none;
}
.archive-description {
	float: left;
	font-size: 0.857em;
	margin: 0.5em 0 0;
	padding: 0.5em 0 0 9em;
	width: 100%;
}
a.more-link {
	display: block;
	font-weight: bold;
	margin-top: 1em !important;
	padding: 0.5em 0;
	text-transform: capitalize;
}
a.more-link:focus,
a.more-link:hover,
a.more-link:active {
	outline: 0 none;
	text-decoration: none;
}
body.pen_list_plain #content a.more-link {
	display: inline-block !important;
	width: auto !important;
}
a.more-link:after {
	content: "\f101";
	font-family: "FontAwesome";
	margin: 0 0 0 0.5em;
}
#main .search-form .search-field,
#main .search-form .search-submit {
	font-size: 1em;
	font-weight: normal;
	line-height: 1.5;
}
#main .search-form .search-field {
	background: rgba(255,255,255,0.9);
	border: 1px solid rgba(0,0,0,0.3);
	color: #555;
	margin: 0;
	padding: 0.5em;
}
body.pen_drop_shadow #main .search-form .search-field {
	box-shadow: 2px 2px 5px rgba(0,0,0,0.25) inset;
}
#main .search-form .search-field:focus,
#main .search-form .search-field:hover,
#main .search-form .search-field:active {
	color: #333;
	text-decoration: none;
}
#main .search-form .search-submit {
	background: #00a9ff;
	background: -ms-linear-gradient(top, #00a9ff 0%, #093a89 100%);
	background: linear-gradient(to bottom, #00a9ff 0%, #093a89 100%);
	box-shadow: 1px 1px 0 rgba(255,255,255,0.25) inset;
	border: 1px solid #093a89;
	border-left-color: #114fb3;
	color: #fff;
	font-weight: normal;
	margin: 0;
	padding: 0.5em 1em;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	white-space: nowrap;
}
#main .search-form .search-submit:focus,
#main .search-form .search-submit:active {
	background: #093a89;
	text-decoration: none;
}
#main .entry-footer {
	font-size: 0.857em !important;
	position: relative;
}
body.no-js #main .pen_options_overview {
	background: #fff;
	border-top: 1px solid #ddd;
	float: left;
	padding: 2em;
	width: 100%;
}
#main .pen_options_overview.pen_off_screen {
	background: #fff;
	max-height: 100%;
	overflow: hidden;
	overflow-y: auto;
	padding: 15px;
	z-index: 200000;
}
body.pen_multiple #main .pen_options_overview {
	display: none;
	transition: top .3s;
}
body.pen_multiple #main .pen_options_overview.pen_visible {
	bottom: 1em;
	display: block;
	left: 5%;
	max-width: 350px;
	position: absolute;
	width: 90%;
}
#main .pen_options_overview h3 {
	background: #333;
	background: -ms-linear-gradient(325deg, #555555 0%, #aaaaaa 100%);
	background: linear-gradient(125deg, #555555 0%, #aaaaaa 100%);
	color: #fff;
	font-size: 0.857em;
	font-weight: normal;
	margin: -15px -15px 0.5em;
	padding: 1em;
	position: relative;
	text-transform: capitalize;
}
#main .pen_options_overview h3:before {
	content: "\f085";
	font-family: "FontAwesome";
	margin: 0 0.5em 0 0;
}
#main .pen_options_overview .pen_close {
	height: 3em;
	overflow: hidden;
	position: absolute;
	right: 0;
	text-indent: -99999px;
	top: 0;
	width: 3em;
	line-height: 1;
	z-index: 2;
}
#main .pen_options_overview .pen_close:after,
#main .pen_options_overview .pen_close:before {
	border-top: 2px solid #fff;
	content: "";
	position: absolute;
	top: 50%;
	text-indent: 0;
	left: 0.5em;
	text-align: center;
	font-size: 1.286em;
	text-shadow: 0 0 3px rgba(0,0,0,0.5);
	transform: rotate(45deg);
	width: 1em;
}
#main .pen_options_overview .pen_close:after {
	transform: rotate(-45deg);
}
#main .pen_options_overview .pen_close:active:after,
#main .pen_options_overview .pen_close:active:before {
	border-color: #c40000;
}
body.pen_multiple #main .pen_options_overview_toggle {
	border-radius: 0 3px 0 0;
	margin: 0;
	opacity: 0.5;
	overflow: hidden;
	position: relative;
	text-indent: -99999px;
	transition: opacity .3s;
	width: auto;
}
body.pen_multiple #main .pen_options_overview_toggle:before {
	left: 50%;
	position: absolute;
	text-indent: 0;
	top: 50%;
	transform: translate(-50%,-50%);
}
body.pen_multiple #main .pen_options_overview_toggle.pen_visible {
	opacity: 1;
}
#main .pen_options_overview_toggle:before {
	content: "\f085";
	font-family: "FontAwesome";
	font-weight: normal;
	margin: 0 1em 0 0;
}
#main .pen_options_overview table {
	box-shadow: none;
	margin: 0;
}
#main .pen_options_overview table th,
#main .pen_options_overview table td {
	background: #fff !important;
	border: 0 none;
	font-weight: bold;
	padding: 0.5em;
}
#main .pen_options_overview table th {
	background: #efefef !important;
	color: #333;
	font-weight: normal;
	font-size: 1em;
	text-transform: capitalize;
}
#main .pen_options_overview table td {
	font-size: 0.857em;
}
#main .pen_options_overview table td:last-child {
	padding-left: 2em;
	text-transform: capitalize;
}
#main .pen_options_overview .pen_option_disabled {
	color: #c40000;
}
#main .pen_options_overview .pen_button {
	font-size: 0.857em;
	margin: 1em 0 0;
}
#main .comments-link a,
#main a.post-edit-link {
	margin-top: 1em !important;
}
#main .comments-link a:before,
#main a.post-edit-link:before,
#main .entry-footer .tags-links .pen_heading_tags:before {
	content: "\f044";
	font-family: "FontAwesome";
	font-weight: normal;
	margin: 0 1em 0 0;
}
#main .comments-link a:before {
	content: "\f075";
}
#main .entry-footer .tags-links {
	display: block;
}
#main .entry-footer .tags-links .pen_heading_tags {
	display: inline-block;
	font-weight: bold;
	margin-right: 1em;
}
#main .entry-footer .tags-links .pen_heading_tags:before {
	content: "\f02c";
	font-weight: normal;
	margin-right: 0.5em;
}
#main .entry-footer .tags-links a {
	display: inline-block;
	float: none;
	font-weight: normal;
	padding: 0.25em 1em !important;
	width: auto !important;
}
#main .entry-footer .pen_actions .tags-links a:last-of-type {
	margin-right: 0 !important;
}
body.pen_list_masonry #main .entry-footer span:last-child a {
	margin-bottom: 0 !important;
}
#main .entry-content {
	position: relative;
}
#main .entry-content .pen_content_wrapper a {
	text-decoration: underline;
}
#main .entry-content .pen_content_wrapper a:focus,
#main .entry-content .pen_content_wrapper a:hover,
#main .entry-content .pen_content_wrapper a:active {
	text-decoration: none;
}
#main .post.format-audio > header,
#main .post.format-aside > header,
#main .post.format-gallery > header,
#main .post.format-image > header,
#main .post.format-video > header,
#main .post.format-quote > header,
#main .post.format-link > header,
#main .post.format-status > header,
#main .status-draft > header,
#main .post-password-required > header,
#main .post.sticky > header {
	overflow: hidden;
}
#main .post.format-audio > header:before,
#main .post.format-audio > header:after,
#main .post.format-aside > header:before,
#main .post.format-aside > header:after,
#main .post.format-gallery > header:before,
#main .post.format-gallery > header:after,
#main .post.format-image > header:before,
#main .post.format-image > header:after,
#main .post.format-video > header:before,
#main .post.format-video > header:after,
#main .post.format-quote > header:before,
#main .post.format-quote > header:after,
#main .post.format-link > header:before,
#main .post.format-link > header:after,
#main .post.format-status > header:before,
#main .post.format-status > header:after,
#main .status-draft > header:before,
#main .status-draft > header:after,
#main .post-password-required > header:before,
#main .post-password-required > header:after,
#main .post.sticky > header:before,
#main .post.sticky > header:after {
	color: rgba(170,170,170,0.3);
	font-family: "FontAwesome";
	font-size: 5em;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 0;
}
#main .post.format-audio > header:before,
#main .post.format-aside > header:before,
#main .post.format-gallery > header:before,
#main .post.format-image > header:before,
#main .post.format-video > header:before,
#main .post.format-quote > header:before,
#main .post.format-link > header:before,
#main .post.format-status > header:before,
#main .status-draft > header:before,
#main .post-password-required > header:before,
#main .post.sticky > header:before {
	font-size: 15em;
	opacity: 0.4;
	right: -30px;
}
body.pen_list_masonry.pen_multiple #main header:after {
	display: none;
}
#main .post.format-audio > header:before,
#main .post.format-audio > header:after {
	content: "\f1c7";
}
#main .post.format-aside > header:before,
#main .post.format-aside > header:after {
	content: "\f0f6";
}
#main .post.format-gallery > header:before,
#main .post.format-gallery > header:after,
#main .post.format-image > header:before,
#main .post.format-image > header:after {
	content: "\f03e";
}
#main .post.format-video > header:before,
#main .post.format-video > header:after {
	content: "\f1c8";
}
#main .post.format-quote > header:before,
#main .post.format-quote > header:after {
	content: "\f10e";
}
#main .post.format-link > header:before,
#main .post.format-link > header:after {
	content: "\f0c1";
}
#main .post.format-status > header:before,
#main .post.format-status > header:after {
	content: "\f118";
}
#main .post-password-required > header:before,
#main .post-password-required > header:after {
	content: "\f023";
}
#main .status-draft > header:before,
#main .status-draft > header:after {
	content: "\f06e";
}
#main .post.sticky > header:before,
#main .post.sticky > header:after {
	content: "\f005";
}
@media only screen and (min-width:728px) {
	#main .pen_share h4 {
		border: 0 none !important;
		clip: rect(1px,1px,1px,1px);
		clip: rect(1px 1px 1px 1px);
		height: 1px !important;
		margin: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		position: absolute !important;
		width: 1px !important;
	}
	#main article .entry-meta {
		float: left;
		margin: 1em 0 0;
		width: 100%;
	}
	body.pen_list_effect_fade .pen_article_wrapper article,
	body.pen_list_effect_enlarge .pen_article_wrapper article,
	body.pen_list_effect_enlarge_fade .pen_article_wrapper article {
		transition: box-shadow .5s, opacity .5s, transform .3s;
	}
	body.pen_list_effect_fade .pen_article_wrapper:hover article,
	body.pen_list_effect_enlarge_fade .pen_article_wrapper:hover article {
		opacity: 0.75;
	}
	body.pen_list_effect_enlarge .pen_article_wrapper article:hover,
	body.pen_list_effect_enlarge_fade .pen_article_wrapper article:hover {
		transform: scale(1.04,1.04);
		z-index: 10000;
	}
	body.pen_drop_shadow.pen_list_effect_enlarge .pen_article_wrapper article:hover,
	body.pen_drop_shadow.pen_list_effect_enlarge_fade .pen_article_wrapper article:hover {
		box-shadow: 0 0 25px rgba(0,0,0,0.4), 5px 5px 15px rgba(0,0,0,0.5);
	}
	body.pen_list_effect_fade .pen_article_wrapper:hover article:hover,
	body.pen_list_effect_enlarge_fade .pen_article_wrapper:hover article:hover {
		opacity: 1;
	}
	body.pen_singular #main .pen_options_overview.pen_off_screen {
		position: fixed;
		right: -100%;
		top: 50%;
		transition: right .3s;
		transform: translateY(-50%);
		min-width: 250px;
	}
	body.pen_header_sticky.pen_singular #main .pen_options_overview.pen_off_screen {
		bottom: 1em;
		max-height: 50%;
		top: auto;
		transform: none;
	}
	body.pen_singular #main .pen_options_overview.pen_visible {
		right: 0;
	}
	body.pen_singular #main .pen_options_overview_toggle {
		padding: 1em 5em 1em 2em !important;
		position: fixed;
		right: -100%;
		top: 50%;
		transform: translateY(-50%);
		transition: right .3s;
		width: auto;
		z-index: 100000;
	}
	body.pen_singular.pen_drop_shadow #main .pen_options_overview_toggle {
		box-shadow: 0 0 10px rgba(0,0,0,0.5);
	}
	body.pen_singular #main .pen_options_overview_toggle.pen_visible {
		right: -3em;
	}
	#main .entry-footer .entry-meta {
		font-size: 1em;
		line-height: 2;
		margin: 1em 0;
		text-align: right;
	}
	#main .entry-footer .entry-meta .byline,
	#main .entry-footer .entry-meta .posted-on,
	#main .entry-footer .entry-meta .cat-links {
		display: inline-block;
	}
	body.pen_singular #main .entry-footer .entry-meta,
	body.pen_list_plain #main .entry-footer .entry-meta {
		float: right;
		text-align: right;
		width: auto;
	}
	body.pen_list_masonry #main .entry-footer .entry-meta {
		margin: 2em 0 0;
		text-align: center;
	}
	#main .entry-footer .pen_actions a {
		margin: 1em 1em 0 0 !important;
		width: auto !important;
	}
	body.pen_list_masonry #pen_masonry .comments-link,
	body.pen_list_masonry #pen_masonry .comments-link a,
	body.pen_list_masonry #pen_masonry .edit-link a.post-edit-link {
		width: 100% !important;
	}
	body.pen_list_masonry #pen_masonry .comments-link:first-child a,
	body.pen_list_masonry #pen_masonry .edit-link:first-child a.post-edit-link {
		margin-top: 0 !important;
	}
}
@media only screen and (min-width:728px) and (max-width:1024px) {
	#main header h1.entry-title,
	#main header h2.entry-title,
	#main header h1.page-title,
	#main header h2.page-title {
		font-size: 1.5em;
	}
}
@media only screen and (max-width:728px) {
	body.pen_list_masonry #pen_masonry article {
		margin: 0 0 1em !important;
	}
	#main img.alignleft,
	#main img.aligncenter,
	#main img.alignright {
		height: auto;
		margin: 1em 0;
		width: 100%;
	}
	#main article header .entry-title {
		width: 100%;
	}
	#main article .entry-meta {
		float: left;
		width: 100%;
	}
	#main .entry-header .pen_share h4 {
		border: 0 none !important;
		clip: rect(1px,1px,1px,1px);
		clip: rect(1px 1px 1px 1px);
		height: 1px !important;
		margin: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		position: absolute !important;
		width: 1px !important;
	}
	#main .entry-footer .pen_share h4 {
		font-size: 1.5em;
		text-align: center;
		text-transform: capitalize;
	}
	body.pen_singular #main .pen_options_overview {
		display: none;
		transition: top .3s;
	}
	body.pen_singular #main .pen_options_overview.pen_visible {
		bottom: 1em;
		display: block;
		left: 5%;
		position: absolute;
		width: 90%;
	}
	body.pen_singular #main .pen_options_overview_toggle {
		border-radius: 0 3px 0 0;
		margin: 0;
		opacity: 0.5;
		overflow: hidden;
		position: relative;
		text-indent: -99999px;
		transition: opacity .3s;
		width: auto;
	}
	body.pen_singular #main .pen_options_overview_toggle:before {
		left: 50%;
		position: absolute;
		text-indent: 0;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	body.pen_singular #main .pen_options_overview_toggle.pen_visible {
		opacity: 1;
	}
}
body.pen_list_header_hide #main article header.pen_element_default,
body.pen_list_title_hide #main article header .entry-title.pen_element_default,
body.pen_list_author_hide #main article .byline.pen_element_default,
body.pen_list_date_hide #main article .posted-on.pen_element_default,
body.pen_list_category_hide #main article .cat-links.pen_element_default,
body.pen_list_thumbnail_hide #main article .post-thumbnail,
body.pen_list_summary_hide #main article .entry-content.pen_element_default,
body.pen_list_footer_hide #main article .entry-footer.pen_element_default,
body.pen_list_tags_hide #main article .tags-links.pen_element_default,
body.pen_list_button_comment_hide #main article .comments-link.pen_element_default,
body.pen_list_button_edit_hide #main article .edit-link.pen_element_default,
body.pen_content_header_hide #main article header,
body.pen_content_title_hide #main article header .entry-title,
body.pen_content_author_hide #main article .byline,
body.pen_content_date_hide #main article .posted-on,
body.pen_content_category_hide #main article .cat-links,
body.pen_content_thumbnail_hide #main article .post-thumbnail,
body.pen_content_share_hide #main article .pen_share,
body.pen_content_footer_hide #main article .entry-footer,
body.pen_content_tags_hide #main article .tags-links {
	border: 0 none !important;
	clip: rect(1px,1px,1px,1px);
	clip: rect(1px 1px 1px 1px);
	height: 1px !important;
	margin: 0 !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
}