233 lines
4.7 KiB
CSS
233 lines
4.7 KiB
CSS
|
|
/* ---------- Basic Layout Styles ----------- */
|
|
|
|
html,
|
|
body,
|
|
#page {
|
|
height: 100%;
|
|
}
|
|
#page-wrapper {
|
|
min-height: 100%;
|
|
}
|
|
#header div.section,
|
|
#featured aside.section,
|
|
#messages div.section,
|
|
#main,
|
|
#triptych,
|
|
#footer-columns,
|
|
#footer {
|
|
width: 100%;
|
|
max-width: 860px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
#header div.section {
|
|
position: relative;
|
|
}
|
|
.region-header {
|
|
float: right; /* LTR */
|
|
margin: .5em 5px .75em;
|
|
}
|
|
[dir="rtl"] .region-header {
|
|
float: left;
|
|
}
|
|
.region-secondary-menu .block-menu {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
#main-wrapper {
|
|
min-height: 300px;
|
|
}
|
|
#content .section,
|
|
.sidebar .section {
|
|
padding: 0 15px;
|
|
}
|
|
.breadcrumb {
|
|
margin: 0 15px;
|
|
}
|
|
#footer-wrapper {
|
|
padding: 35px 0 30px;
|
|
}
|
|
#footer-wrapper .section {
|
|
box-sizing: border-box;
|
|
padding: 0 15px;
|
|
}
|
|
.region-triptych-first,
|
|
.region-triptych-middle,
|
|
.region-triptych-last {
|
|
box-sizing: border-box;
|
|
padding: 0 20px 0;
|
|
}
|
|
.region-footer-firstcolumn,
|
|
.region-footer-secondcolumn,
|
|
.region-footer-thirdcolumn,
|
|
.region-footer-fourthcolumn {
|
|
box-sizing: border-box;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
@media all and (min-width: 560px) and (max-width: 850px) {
|
|
|
|
#sidebar-first,
|
|
.region-triptych-first,
|
|
.region-triptych-middle,
|
|
.region-triptych-last,
|
|
.region-footer-firstcolumn,
|
|
.region-footer-secondcolumn,
|
|
.region-footer-thirdcolumn,
|
|
.region-footer-fourthcolumn {
|
|
display: inline;
|
|
float: left; /* LTR */
|
|
position: relative;
|
|
}
|
|
[dir="rtl"] #sidebar-first,
|
|
[dir="rtl"] .region-triptych-first,
|
|
[dir="rtl"] .region-triptych-middle,
|
|
[dir="rtl"] .region-triptych-last,
|
|
[dir="rtl"] .region-footer-firstcolumn,
|
|
[dir="rtl"] .region-footer-secondcolumn,
|
|
[dir="rtl"] .region-footer-thirdcolumn,
|
|
[dir="rtl"] .region-footer-fourthcolumn {
|
|
float: right;
|
|
}
|
|
#sidebar-first,
|
|
#sidebar-second {
|
|
width: 50%;
|
|
}
|
|
#sidebar-second {
|
|
margin-left: 50%; /* LTR */
|
|
}
|
|
[dir="rtl"] #sidebar-second {
|
|
margin-right: 50%;
|
|
}
|
|
.one-sidebar #sidebar-first,
|
|
.one-sidebar #sidebar-second {
|
|
width: 100%;
|
|
}
|
|
.one-sidebar #sidebar-second {
|
|
margin-left: 0; /* LTR */
|
|
}
|
|
[dir="rtl"] .one-sidebar #sidebar-second {
|
|
margin-right: 0;
|
|
}
|
|
.region-triptych-first,
|
|
.region-triptych-middle,
|
|
.region-triptych-last {
|
|
box-sizing: border-box;
|
|
padding: 20px 15px 30px;
|
|
width: 33%;
|
|
}
|
|
.region-triptych-middle {
|
|
padding: 20px 5px 30px;
|
|
}
|
|
.region-footer-firstcolumn,
|
|
.region-footer-secondcolumn {
|
|
box-sizing: border-box;
|
|
padding: 0 10px;
|
|
width: 50%;
|
|
}
|
|
.region-footer-thirdcolumn,
|
|
.region-footer-fourthcolumn {
|
|
box-sizing: border-box;
|
|
padding: 0 10px;
|
|
width: 50%;
|
|
}
|
|
.region-footer-thirdcolumn {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 851px) {
|
|
|
|
#header div.section,
|
|
#featured aside.section,
|
|
#messages div.section,
|
|
#main,
|
|
#triptych,
|
|
#footer-columns,
|
|
#footer {
|
|
max-width: 1290px;
|
|
}
|
|
#content,
|
|
#sidebar-first,
|
|
#sidebar-second,
|
|
.region-triptych-first,
|
|
.region-triptych-middle,
|
|
.region-triptych-last,
|
|
.region-footer-firstcolumn,
|
|
.region-footer-secondcolumn,
|
|
.region-footer-thirdcolumn,
|
|
.region-footer-fourthcolumn {
|
|
display: inline;
|
|
float: left; /* LTR */
|
|
position: relative;
|
|
}
|
|
[dir="rtl"] #content,
|
|
[dir="rtl"] #sidebar-first,
|
|
[dir="rtl"] #sidebar-second,
|
|
[dir="rtl"] .region-triptych-first,
|
|
[dir="rtl"] .region-triptych-middle,
|
|
[dir="rtl"] .region-triptych-last,
|
|
[dir="rtl"] .region-footer-firstcolumn,
|
|
[dir="rtl"] .region-footer-secondcolumn,
|
|
[dir="rtl"] .region-footer-thirdcolumn,
|
|
[dir="rtl"] .region-footer-fourthcolumn {
|
|
float: right;
|
|
}
|
|
.layout-two-sidebars #content {
|
|
margin-left: 25%;
|
|
margin-right: 25%;
|
|
width: 50%;
|
|
}
|
|
.layout-one-sidebar #content {
|
|
width: 75%;
|
|
}
|
|
.layout-no-sidebars #content {
|
|
width: 100%;
|
|
}
|
|
.layout-sidebar-first #content {
|
|
margin-left: 25%; /* LTR */
|
|
margin-right: 0; /* LTR */
|
|
}
|
|
[dir="rtl"] .layout-sidebar-first #content {
|
|
margin-left: 0;
|
|
margin-right: 25%;
|
|
}
|
|
.layout-sidebar-second #content {
|
|
margin-right: 25%; /* LTR */
|
|
margin-left: 0; /* LTR */
|
|
}
|
|
[dir="rtl"] .layout-sidebar-second #content {
|
|
margin-right: 0;
|
|
margin-left: 25%;
|
|
}
|
|
#sidebar-first {
|
|
width: 25%;
|
|
margin-left: -100%; /* LTR */
|
|
}
|
|
[dir="rtl"] #sidebar-first {
|
|
margin-right: -100%;
|
|
}
|
|
#sidebar-second {
|
|
width: 25%;
|
|
margin-left: -25%; /* LTR */
|
|
clear: none;
|
|
}
|
|
[dir="rtl"] #sidebar-second {
|
|
margin-right: -25%;
|
|
}
|
|
.region-triptych-first,
|
|
.region-triptych-middle,
|
|
.region-triptych-last {
|
|
width: 33%;
|
|
}
|
|
.region-footer-firstcolumn,
|
|
.region-footer-secondcolumn,
|
|
.region-footer-thirdcolumn,
|
|
.region-footer-fourthcolumn {
|
|
box-sizing: border-box;
|
|
padding: 0 10px;
|
|
width: 25%;
|
|
}
|
|
}
|