pen/assets/css/pen-layout.css

#page .pen_container {
	width: 100%;
}
#content,
#pen_top,
#pen_search,
#pen_bottom,
#pen_footer {
	float: left;
	width: 100%;
}
#pen_top {
	padding: 0;
}
#pen_section {
	float: left;
	position: relative;
	width: 100%;
}
#content {
	min-height: 500px;
	position: relative;
	z-index: 2;
}
#content .sidebar {
	z-index: 10;
}
#main {
	position: relative;
	z-index: 20;
}
#main .page-content,
#main .entry-content,
#main .entry-summary {
	margin: 0;
}
#pen_header,
#pen_masonry,
#pen_right,
#pen_search_top,
#pen_search_left,
#pen_search_right,
#pen_search_bottom,
#comments,
#respond,
#primary,
#main,
#main .entry-content,
#main .entry-footer,
#pen_content_top,
#pen_content_bottom,
#pen_footer .pen_footer_inner,
#pen_footer_top,
#pen_footer_top .widget,
#pen_footer_bottom,
#pen_footer_bottom .widget {
	float: left;
	width: 100%;
}
#pen_search_top,
#pen_search_left,
#pen_search_right,
#pen_search_bottom {
	position: relative;
}
#pen_left,
#pen_right {
	margin: 0 0 1em;
	position: relative;
	z-index: 400;
}
#pen_content_top,
#pen_content_bottom {
	padding: 2em;
}
#pen_footer_top .widget {
	margin: 0 0 1em;
}
#pen_footer_left,
#pen_footer_right {
	float: left;
	width: 28%;
}
#pen_footer_right {
	float: right;
}
body.visible-sidebar-footer-left #pen_footer .pen_footer_inner,
body.visible-sidebar-footer-right #pen_footer .pen_footer_inner {
	width: 70%;
}
body.visible-sidebar-footer-left.visible-sidebar-footer-right #pen_footer .pen_footer_inner {
	width: 40%;
}
@media only screen and (min-width:728px) {
	#page .pen_container {
		margin: 0 auto;
		width: 98%;
	}
	body.pen_width_boxed #page {
		margin: 0 auto;
		max-width: 1200px;
		width: 85%;
	}
	body.pen_width_boxed #page .pen_container {
		width: 100%;
	}
	body.pen_width_boxed #pen_header .pen_header_main .pen_container {
		width: 95%;
	}
	body.visible-sidebar-search-left.invisible-sidebar-search-right #pen_search_left .pen_widget_transparent {
		padding-left: 2em;
	}
	body.visible-sidebar-search-right.invisible-sidebar-search-left #pen_search_right .pen_widget_transparent {
		padding-right: 2em;
	}
	body.visible-sidebar-search-right #pen_search_right,
	body.visible-sidebar-search-left #pen_search_form {
		float: right;
	}
	body.visible-sidebar-search-left #pen_search_left,
	body.visible-sidebar-search-right #pen_search_right {
		width: 30%;
	}
	body.visible-sidebar-search-left #pen_search_form,
	body.visible-sidebar-search-right #pen_search_form {
		width: 70%;
	}
	body.visible-sidebar-search-left.visible-sidebar-search-right #pen_search_form {
		float: left;
		padding: 0 1em;
		width: 50%;
	}
	body.visible-sidebar-search-left.visible-sidebar-search-right #pen_search_left,
	body.visible-sidebar-search-left.visible-sidebar-search-right #pen_search_right {
		width: 25%;
	}
	body.pen_width_default #page .pen_container,
	body.pen_width_standard #page .pen_container {
		max-width: 1200px;
	}
	#pen_left,
	#pen_right {
		position: absolute;
		top: 2em;
		width: 20%;
	}
	#pen_left {
		left: 0;
	}
	#pen_right {
		right: 0;
	}
	body.pen_main_container_left #pen_left {
		left: auto;
		right: 0;
	}
	body.visible-sidebar-left.visible-sidebar-right.pen_main_container_left #pen_left {
		left: 58%;
	}
	body.visible-sidebar-left.visible-sidebar-right.pen_main_container_right #pen_right {
		left: 22%;
		right: auto;
	}
	body.pen_main_container_right #pen_right {
		left: 0;
		right: auto;
	}
	body.pen_main_container_left #pen_right {
		left: auto;
		right: 0;
	}
	body.pen_main_container_left #primary {
		float: left;
	}
	body.pen_main_container_right #primary {
		float: right;
	}
	body.visible-sidebar-left #primary {
		padding-left: 22%;
	}
	body.visible-sidebar-right #primary {
		padding-right: 22%;
	}
	body.visible-sidebar-left.pen_main_container_left #primary {
		padding-left: 0;
		padding-right: 22%;
	}
	body.visible-sidebar-right.pen_main_container_right #primary {
		padding-left: 22%;
		padding-right: 0;
	}
	body.visible-sidebar-left.visible-sidebar-right.pen_main_container_left #primary {
		padding-left: 0;
		padding-right: 43%;
	}
	body.visible-sidebar-left.visible-sidebar-right.pen_main_container_right #primary {
		padding-left: 43%;
		padding-right: 0;
	}
	#pen_masonry article,
	body.pen_masonry_columns_4 #pen_masonry article {
		width: 24% !important;
	}
	body.pen_masonry_columns_4 #pen_masonry article .mejs-controls div.mejs-time-rail {
		max-width: 100px;
	}
	body.pen_masonry_columns_4 #page .mejs-controls .mejs-time-rail span,
	body.pen_masonry_columns_4 #page .mejs-controls .mejs-time-rail a {
		max-width: 80px;
	}
	body.pen_masonry_columns_5 #pen_masonry article {
		width: 19% !important;
	}
	body.pen_masonry_columns_5 #pen_masonry article .mejs-controls div.mejs-time-rail {
		max-width: 90px;
	}
	body.pen_masonry_columns_5 #page .mejs-controls .mejs-time-rail span,
	body.pen_masonry_columns_5 #page .mejs-controls .mejs-time-rail a {
		max-width: 70px;
	}
	body.pen_masonry_columns_5.visible-sidebar-left #pen_masonry article,
	body.pen_masonry_columns_5.visible-sidebar-right #pen_masonry article,
	body.pen_masonry_columns_4.visible-sidebar-left #pen_masonry article,
	body.pen_masonry_columns_4.visible-sidebar-right #pen_masonry article,
	body.pen_masonry_columns_3 #pen_masonry article {
		width: 32.33% !important;
	}
	body.visible-sidebar-left.visible-sidebar-right #pen_masonry article,
	body.pen_masonry_columns_5.visible-sidebar-left.visible-sidebar-right #pen_masonry article,
	body.pen_masonry_columns_4.visible-sidebar-left.visible-sidebar-right #pen_masonry article,
	body.pen_masonry_columns_3.visible-sidebar-right.visible-sidebar-left #pen_masonry article,
	body.pen_masonry_columns_2 #pen_masonry article {
		width: 49% !important;
	}
}
@media only screen and (min-width:728px) and (max-width:1024px) and (orientation:portrait) {
	body.pen_masonry_columns_4 #pen_masonry article,
	body.pen_masonry_columns_5 #pen_masonry article {
		width: 32.33% !important;
	}
	body.pen_masonry_columns_4.visible-sidebar-left #pen_masonry article,
	body.pen_masonry_columns_4.visible-sidebar-right #pen_masonry article,
	body.pen_masonry_columns_5.visible-sidebar-left #pen_masonry article,
	body.pen_masonry_columns_5.visible-sidebar-right #pen_masonry article {
		width: 49% !important;
	}
	body.pen_masonry_columns_4.visible-sidebar-left.visible-sidebar-right #pen_masonry article,
	body.pen_masonry_columns_5.visible-sidebar-left.visible-sidebar-right #pen_masonry article {
		width: 100% !important;
	}
}
@media only screen and (max-width:728px) {
	body.pen_width_boxed #page {
		margin: 0 auto;
		width: 95%;
	}
	#primary {
		margin: 0 0 1em;
	}
	#pen_left,
	#pen_right,
	#pen_bottom {
		float: left;
		padding: 1em 0;
		width: 100%;
	}
	#pen_footer .pen_footer_inner,
	#pen_footer_left,
	#pen_footer_right {
		width: 100%;
	}
}