#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%; } }