Vorlage:Portal flex/styles.css

/**Portalpage with flex EN ****/
.flexbox-portal {display: flex; flex-wrap: wrap; justify-content:space-between;}
.flexbox-portal > div {flex:1; padding: 10px;}
.flexbox-portal > div img  {max-width:100%; height:auto;}
.flexbox-portal.col2 > div {flex-basis:47%; margin: 0 15px 15px 0;}
.flexbox-portal.col3 > div {flex-basis:31%; margin: 0 15px 15px 0;}
.flexbox-portal.fullfirst div:first-child {flex-basis:100%}
.flexbox-portal.fulllast div:last-child {flex-basis:100%}

.flexbox-portal.border.p-blue > div {border: 1px solid #aed6f1;}
.flexbox-portal.border.p-green > div {border: 1px solid #a9dfbf;}
.flexbox-portal.border.p-grey > div {border: 1px solid #e5e7e9;}
.flexbox-portal.border.p-orange > div {border: 1px solid #f5cba7;}
.flexbox-portal.border.p-purple > div {border: 1px solid #d7bde2;}
.flexbox-portal.border.p-red > div {border: 1px solid #e6b0aa;}
.flexbox-portal.border.p-yellow > div {border: 1px solid #f9e79f;}
.flexbox-portal.border.p-white > div {border: 1px solid #ffffff;}
.flexbox-portal.none > div {border: none;}
.flexbox-portal.border > div.emptybox {border: none}

.flexbox-portal.background > div {border:none;}
.flexbox-portal.background-hd.p-blue div > h2 {background: #aed6f1;}
.flexbox-portal.background-hd.p-green div > h2  {background: #a9dfbf ;}
.flexbox-portal.background-hd.p-grey div > h2 {background:  #e5e7e9;}
.flexbox-portal.background-hd.p-orange div > h2 {background: #f5cba7;}
.flexbox-portal.background-hd.p-purple div > h2 {background: #d7bde2;}
.flexbox-portal.background-hd.p-red div > h2 {background: #e6b0aa;}
.flexbox-portal.background-hd.p-yellow div > h2 {background: #f9e79f;}
.flexbox-portal.background-hd.p-white div > h2 {background: #ffffff;}

.flexbox-portal.background.p-blue > div {background: #d6eaf8 ;}
.flexbox-portal.background.p-green > div {background: #d4efdf;}
.flexbox-portal.background.p-grey > div {background: #f2f3f4;}
.flexbox-portal.background.p-orange > div {background: #fae5d3;}
.flexbox-portal.background.p-purple > div {background: #ebdef0;}
.flexbox-portal.background.p-red > div {background:  #f2d7d5;}
.flexbox-portal.background.p-yellow > div {background: #fcf3cf;}
.flexbox-portal.background.p-white > div {background: #ffffff;}

.flexbox-portal > div.box.p-blue {background: #d6eaf8;}
.flexbox-portal > div.box.p-green {background: #d4efdf;}
.flexbox-portal > div.box.p-grey {background: #f2f3f4;}
.flexbox-portal > div.box.p-orange {background: #fae5d3;}
.flexbox-portal > div.box.p-purple {background: #ebdef0;}
.flexbox-portal > div.box.p-red {background:  #f2d7d5;}
.flexbox-portal > div.box.p-yellow {background: #fcf3cf;}
.flexbox-portal > div.box.p-white  {background: #ffffff;}

.flexbox-portal.background  div.emptybox {background: none}
.flexbox-portal div > h2 {font-size: 1.1em; border-bottom: none;margin-top: 0;  padding: 10px; font-weight: bold;}
.flexbox-portal.underline-hd div > h2 {font-size: 1.1em; background:none;border-bottom: 1px solid #8b8b8b;margin-top: 0;  padding: 10px; font-weight: bold;}
.flexbox-portal.hide-hd div > h2 {display:none;}
.flexbox-portal h1 .mw-editsection, .flexbox-portal h2 .mw-editsection, .flexbox-portal h3 .mw-editsection, .flexbox-portal h4 .mw-editsection, .flexbox-portal h5 .mw-editsection, .flexbox-portal h6 .mw-editsection
{display:none;}
.mw-parser-output .bs-layout-container.intro-text {font-size: 1.2em;}
h3 {font-size: 1.6em;}
.ve-ce-surface-enabled .ve-ce-branchNode-blockSlug {visibility: hidden;display: none;}
.thumbborder {border: 1px solid #e5e5e5;}
@media only screen and (max-width: 768px) { .flexbox-portal > div {width: 98%;}}
/**Formular **/
#pfForm section.ve-ce-branchNode a img {max-width:100% !important; height:auto !important;}/**im Formular **/
.formtable th {text-align:right; padding:10px; background:#efefef; font-weight:normal;}
.formtable td {padding:10px;}
.bs-mwvisualeditor-field-container {max-width:850px;}
.bs-mwvisualeditor-field-container img {max-width:100%; height:auto;}

@media only screen and (max-width: 768px) {.flexbox-portal, .flexbox-portal.col2, .flexbox-portal.col3 > div {flex-basis: 98%;}}
/**Formular **/
#pfForm section.ve-ce-branchNode a img {max-width:100% !important; height:auto !important;}/**im Formular **/
.formtable th {text-align:right; padding:10px; background:#efefef; font-weight:normal;}
.formtable td {padding:10px;}
.bs-mwvisualeditor-field-container {max-width:850px;}
.bs-mwvisualeditor-field-container img {max-width:100%; height:auto;}