simplestyle/app/_layouts/15/wpxp.strabag.design/styles/main.css

Simple Style Guide Tool based on Atomic Web Design

.news-small-content::after, .news-section::after, .ms-promlink-body::after, html:not(.ms-dialog) #mainPLDiv::after, html:not(.ms-dialog) .landing-area::after {
  content: ' ';
  display: block;
  clear: both;
}

/* Typography */
@font-face {
  font-family: 'DINProBold';
  src: url("../fonts/dinpro-bold-webfont.eot");
  src: url("../fonts/dinpro-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/dinpro-bold-webfont.woff") format("woff"), url("../fonts/dinpro-bold-webfont.ttf") format("truetype"), url("../fonts/dinpro-bold-webfont.svg#DINProBold") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DINProRegular';
  src: url("../fonts/dinpro-regular-webfont.eot");
  src: url("../fonts/dinpro-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/dinpro-regular-webfont.woff") format("woff"), url("../fonts/dinpro-regular-webfont.ttf") format("truetype"), url("../fonts/adinpro-regular-webfont.svg#DINProRegular") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DINProMedium';
  src: url("../fonts/dinpro-medium-webfont.eot");
  src: url("../fonts/dinpro-medium-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/dinpro-medium-webfont.woff") format("woff"), url("../fonts/dinpro-medium-webfont.ttf") format("truetype"), url("../fonts/dinpro-medium-webfont.svg#DINProMedium") format("svg");
  font-weight: normal;
  font-style: normal;
}

.clear-user-agent-styles table,
.clear-user-agent-styles thead,
.clear-user-agent-styles tbody,
.clear-user-agent-styles tfoot,
.clear-user-agent-styles tr,
.clear-user-agent-styles th,
.clear-user-agent-styles td {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-collapse: inherit;
  border-spacing: 0;
  border-color: inherit;
  vertical-align: inherit;
  text-align: left;
  font-weight: inherit;
  -webkit-border-horizontal-spacing: 0;
  -webkit-border-vertical-spacing: 0;
}

body {
  background-color: white;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
  font-size: 32px;
  color: red;
}
========================================== */
.icon-arrow-up {
  width: 0.9285692870616913em;
}

.icon-facebook {
  width: 0.5881709158420563em;
}

.icon-youtube {
  width: 0.8571435324847698em;
}

.sample {
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
}

.sample:after {
  content: " ";
  display: block;
  clear: both;
}

.emu-news-main-area {
  width: 39.2156862745%;
  float: left;
  margin-left: 1.2254901961%;
  margin-right: 1.2254901961%;
}

.emu-news-side-area {
  width: 22.5490196078%;
  float: left;
  margin-left: 1.2254901961%;
  margin-right: 1.2254901961%;
}

@media screen and (min-width: 0px) and (max-width: 321px) {
  .emu-news-main-area {
    width: 97.5490196078%;
    float: left;
    margin-left: 1.2254901961%;
    margin-right: 1.2254901961%;
  }
  .emu-news-side-area {
    width: 97.5490196078%;
    float: left;
    margin-left: 1.2254901961%;
    margin-right: 1.2254901961%;
  }
}

#Suite_ActiveLinkIndicator_Clip.ms-suitenav-caratBox {
  display: none !important;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  #s4-ribbonrow,
  #suiteBar {
    display: none;
  }
}

#siteIcon {
  height: auto;
  text-align: left;
}

.ms-secondaryCommandLink, .ms-secondaryCommandLink:visited {
  color: #d72622;
}

.news-entity {
  font-size: 18px;
  color: white;
}

.news-icon {
  display: inline-block;
  box-sizing: border-box;
  border: 2px #efefef solid;
  background-color: white;
}

.news-icon img {
  background-color: white;
}

.news-text {
  display: inline-block;
}

.news-small-header {
  position: relative;
}

.news-small-header img {
  display: block;
  width: 100%;
  height: auto;
}

.news-small-header .news-entity {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.news-small-content {
  position: relative;
  z-index: 3;
}

.news-small-content::before {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 17px;
  display: block;
  overflow: hidden;
  width: 2px;
  height: 100%;
  content: " ";
  background-color: #efefef;
}

.news-small-content .news-icon {
  position: relative;
  z-index: 3;
  float: left;
  margin: .5em 0;
}

.news-small-content .news-text {
  float: left;
  box-sizing: border-box;
  margin: .5em 0 0.5em 1em;
  width: calc(100% - 50px);
}

.news-small-content .news-text p {
  font-size: 14px;
  margin: 0px;
  line-height: 140%;
}

.news-small-dim {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
}

.news-small-container .news-small-content:last-chid::before {
  height: 50%;
}

.news-big-header {
  position: relative;
}

.news-big-header img {
  display: block;
  width: 100%;
}

.news-headline {
  font-family: "DINProRegular";
  font-size: 24px;
  margin: 0.5em 0;
}

.news-content {
  color: #3d3d3d;
  font-size: 14px;
  line-height: 140%;
  margin-bottom: 2em;
}

.news-small-container {
  box-sizing: border-box;
  width: 46.5%;
  display: inline-block;
  margin-right: 6%;
  margin-bottom: 2em;
}

.news-small-container .news-small-content:last-child:before {
  height: 20px;
}

.news-section .news-small-container:nth-child(2n) {
  margin-right: 0px;
}

@media screen and (min-width: 0px) and (max-width: 1024px) {
  .news-section .news-small-container {
    width: 100% !important;
    max-width: 100%;
    padding: 0px;
  }
}

.ms-webpart-titleText.ms-webpart-titleText {
  font-size: 24px;
  margin: 0.5em 0;
  display: inline-block;
  color: black;
  font-family: "DINProMedium";
}

.ms-webpart-titleText.ms-webpart-titleText a {
  color: black;
  text-decoration: none;
  font-family: "DINProMedium";
}

.ms-webpart-titleText.ms-webpart-titleText a:hover {
  color: #d72622;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .ms-webpart-titleText.ms-webpart-titleText {
    margin: 0 0 0.25em 0;
  }
}

.HideWebpartButton {
  font-family: "DINProBold";
  font-size: 12px;
  text-transform: uppercase;
  color: #666;
}

.EnterCommunityLink {
  display: block;
  background-color: #d72622;
  font-size: 18px;
  padding-top: 1em;
  padding-bottom: 1em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "DINProBold";
  min-width: 280px;
}

.EnterCommunityLink:link, .EnterCommunityLink:hover, .EnterCommunityLink:visited {
  color: white;
  text-decoration: none;
}

.ms-core-listMenu-verticalBox li {
  margin-bottom: .5em;
  text-transform: uppercase;
  font-size: 14px;
}

.ms-core-listMenu-verticalBox li li {
  padding: .125em 0 .125em 0;
  text-transform: none;
}

.ms-core-listMenu-verticalBox li:hover .addingional-background {
  background-color: transparent;
}

.ms-core-listMenu-verticalBox ul ul {
  margin-top: 0.5em;
  margin-bottom: 1em;
}

.ms-core-listMenu-verticalBox .addingional-background {
  background-color: transparent;
}

.ms-core-listMenu-selected:link,
.ms-core-listMenu-selected:visited,
.ms-core-listMenu-selected {
  background-color: transparent;
  color: #d72622;
}

li > a.ms-core-listMenu-item.ms-core-listMenu-selected:hover,
li > a.ms-core-listMenu-item:hover,
li > a.ms-core-listMenu-item:active {
  color: #d72622;
  background-color: transparent;
}

.ms-core-listMenu-verticalBox > .ms-core-listMenu-root > li > .ms-core-listMenu-item {
  font-family: "DINProBold";
  font-size: 14px;
  color: #666;
}

.ms-core-listMenu-verticalBox > .ms-core-listMenu-root > li > .ms-core-listMenu-item:hover {
  color: #d72622;
}

.ms-navedit-editArea {
  margin-top: 1em;
  border-top: 2px #e8e8e8 solid !important;
  padding-top: 27px;
  margin-left: 0px;
}

.ms-navedit-editArea .ms-metadata {
  font-family: "DINProBold";
  color: #3d3d3d;
  font-size: 14px;
}

#ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_sbox {
  font-size: 16px;
}

.ms-mpSearchBox {
  width: auto;
}

.ms-srch-sb > input {
  width: calc(100% - 40px);
}

.ms-srch-sb-border {
  font-size: 16px;
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  border: none;
  border-bottom: 2px #cccccc solid;
  background-color: #efefef;
}

.ms-srch-sb-border:hover {
  border: none;
  border-bottom: 2px #cccccc solid;
}

.ms-srch-sb > input {
  width: calc(100% - 58px);
}

.ms-srch-sb-borderFocused {
  font-size: 16px;
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  border: none;
  border-bottom: 2px #cccccc solid;
  background-color: #efefef;
}

.ms-srch-sb-borderFocused:hover {
  border: none;
  border-bottom: 2px #cccccc solid;
}

.ms-srch-sb-searchLink:hover, .ms-srch-sb-navLink:hover {
  background-color: none;
}

.ms-qSuggest-container {
  box-sizing: border-box;
  margin-left: -20px;
  margin-top: 10px;
}

.ms-qSuggest-container .ms-qSuggest-listItem {
  padding-right: 20px;
  padding-left: 20px;
}

.ms-qSuggest-container .ms-qSuggest-listItem:hover {
  padding-right: 20px;
  padding-left: 20px;
}

.ms-qSuggest-container .ms-qSuggest-hListItem {
  padding-right: 20px;
  padding-left: 20px;
}

#ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_sbox {
  font-size: 18px;
}

.ms-srch-sb > .ms-srch-sb-searchLink {
  width: 28px;
  overflow: none;
}

.ms-srch-sb > .ms-srch-sb-searchLink svg {
  font-size: 24px;
  overflow: none;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
}

.ms-srch-sb > .ms-srch-sb-searchLink svg path {
  width: 20px;
  height: 20px;
}

#mdd-button {
  border-radius: 0px;
}

#mdd-button.mdd-button {
  box-shadow: -3px 3px 0px 0px rgba(61, 61, 61, 0.25);
}

#mdd .mdd-button {
  background-color: #d72622;
}

.tdImportantLinks a {
  color: #d72622;
}

input[type=password], input[type=text], input[type=file], select, textarea, .sp-peoplepicker-topLevel, .sp-peoplepicker-topLevelDisabled, .sp-peoplepicker-autoFillContainer, .ms-inputBox {
  border-color: silver;
}

.menu-search, .menu-burger {
  font-size: 24px;
  display: inline-block;
  width: 24px;
  height: 24px;
}

.menu-search svg, .menu-burger svg {
  fill: #3d3d3d;
}

.active.menu-search svg, .active.menu-burger svg {
  fill: #d72622;
}

.header-menu {
  padding-top: 1em;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.menu-search svg {
  transform: rotateY(180deg);
}

.menu-search-content {
  position: absolute;
  display: none;
}

.menu-burger {
  margin-right: 24px;
  margin-left: 28px;
}

.menu-burger-content {
  position: absolute;
  z-index: 100;
  top: 65px;
  right: 0;
  left: 0;
  display: none;
  width: 100%;
  text-align: left;
  background-color: white;
}

.menu-burger-content.active {
  display: block;
}

.ms-microfeed-fullMicrofeedDiv {
  min-width: 0px;
}

.ms-microfeed-microblogpart {
  min-width: 0px;
}

.ms-microfeed-microblogpart {
  min-width: 200px;
  max-width: 620px;
  position: relative;
  margin-bottom: 15px;
}

.ms-microfeed-fullMicrofeedDiv {
  min-width: 200px;
  margin-right: 4px;
}

.ms-microfeed-feedPart {
  width: auto;
  min-width: 200px;
  max-width: 620px;
  position: relative;
}

.ms-microfeed-rootText {
  min-width: 361px;
  max-width: 531px;
}

.ms-microfeed-replyText {
  min-width: 312px;
  max-width: 482px;
}

.ms-microfeed-highlightedTextBoxElement {
  background-color: #fff;
}

.ms-microfeed-replyArea {
  padding-left: 63px;
  min-width: 380px;
  max-width: 560px;
  clear: both;
}

.ms-microfeed-microblogpart {
  min-width: 0px !important;
  max-width: 100% !important;
  position: relative;
  margin-bottom: 15px;
}

.ms-microfeed-fullMicrofeedDiv {
  min-width: 0px !important;
  margin-right: 4px;
}

.ms-microfeed-feedPart {
  min-width: 0px !important;
  max-width: 100% !important;
  position: relative;
}

.ms-microfeed-rootText {
  min-width: 0px !important;
  max-width: 100% !important;
}

.ms-microfeed-replyText {
  min-width: 0px !important;
  max-width: 100% !important;
}

.ms-microfeed-highlightedTextBoxElement {
  background-color: #fff;
}

.ms-microfeed-replyArea {
  padding-left: 0px !important;
  min-width: calc(310px - 63px) !important;
  max-width: 100% !important;
  clear: both;
}

.ms-actorElement {
  color: #d72622;
}

.ms-newsfeedpartdiv * {
  box-sizing: border-box;
}

.ms-microfeed-message {
  box-sizing: border-box;
  width: 90%;
}

.ms-microfeed-replyArea {
  width: 100%;
  max-width: 100%;
  margin-right: 0;
}

.ms-microfeed-userThumbnailAreaReplyPadding {
  width: 55px;
}

.ms-microfeed-message,
.ms-microfeed-replyArea {
  position: relative;
}

.ms-microfeed-message:before,
.ms-microfeed-replyArea:before {
  position: absolute;
  top: 0;
  left: 27px;
  overflow: hidden;
  width: 2px;
  height: 100%;
  content: " ";
  background-color: #e8e8e8;
}

.ms-microfeed-postBox {
  box-sizing: border-box;
}

.ms-microfeed-rootText {
  min-width: 100px !important;
  font-size: 14px;
  line-height: 125%;
}

.ms-microfeed-threadsDiv {
  border-bottom: 2px #888 solid;
  margin-bottom: 19px;
}

.ms-microfeed-threadLinkDiv {
  margin-left: 48px;
}

.ms-microfeed-focusBoxNoFocus {
  border-color: silver;
}

.ms-microfeed-postBody {
  line-height: 130%;
}

#ms-actorElement:link,
#ms-actorElement:visited,
.ms-atMention:link,
.ms-atMention:visited,
.ms-hashTag:link,
.ms-hashTag:visited {
  color: #d72622;
}

#ms-actorElement:link:hover,
#ms-actorElement:visited:hover,
.ms-atMention:link:hover,
.ms-atMention:visited:hover,
.ms-hashTag:link:hover,
.ms-hashTag:visited:hover {
  color: #880000;
}

.ms-pivotControl-surfacedOpt {
  font-family: "DINProBold";
  font-size: 14px;
  text-transform: uppercase;
}

.ms-pivotControl-surfacedOpt-selected {
  font-family: "DINProBold";
  font-size: 14px;
  text-transform: uppercase;
}

.ms-pivotControl-container {
  margin-right: 0px;
}

@media screen and (min-width: 0) and (max-width: 768px) {
  #ms-progressSpan {
    display: none;
  }
  .ms-microfeed-microblogpart {
    display: none;
  }
}

.ms-tileview-tile-content {
  background-color: #e8e8e8;
}

.ms-tileview-tile-detailsListMedium {
  background-color: rgba(215, 38, 34, 0.9);
}

.ms-promlink-body {
  width: auto;
  min-width: 320px;
  height: auto;
}

.ms-tileview-tile-descriptionMedium *,
.ms-tileview-tile-titleMediumExpanded * {
  font-family: "DINProBold" !important;
  font-size: 14px !important;
}

.header {
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
  position: relative;
  display: inline-block;
  display: flex;
  overflow: visible;
  flex-direction: row;
  width: 100%;
  height: 100%;
  padding-bottom: 20px;
  border-bottom: 1px #efefef solid;
  min-height: 60px;
}

.header:after {
  content: " ";
  display: block;
  clear: both;
}

.header:after {
  font-size: 0;
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: " ";
}

.header-logo {
  width: 14.2156862745%;
  float: left;
  margin-left: 1.2254901961%;
  margin-right: 1.2254901961%;
  vertical-align: middle;
}

.header-logo img {
  max-width: 100%;
  min-width: 65px !important;
}

@media screen and (max-width: 768px) {
  .header-logo {
    width: 30.8823529412%;
    float: left;
    margin-left: 1.2254901961%;
    margin-right: 1.2254901961%;
  }
}

.header-search {
  width: 39.2156862745%;
  float: left;
  margin-left: 1.2254901961%;
  margin-right: 1.2254901961%;
  position: relative;
  margin-left: 9.5588235294%;
  padding: 1.5% 0 0 0;
  flex: 1;
}

@media (max-width: 1010px) {
  .header-search {
    display: none;
  }
}

.header-connect {
  width: 14.2156862745%;
  float: left;
  margin-left: 1.2254901961%;
  margin-right: 1.2254901961%;
  position: relative;
  margin-right: 9.5588235294%;
  padding: 1.5% 0 0 0;
  flex: 1;
}

@media (max-width: 1010px) {
  .header-connect {
    display: none;
  }
}

.header-menu {
  display: none;
  flex: 1;
}

@media (max-width: 1010px) {
  .header-menu {
    width: 64.2156862745%;
    float: left;
    margin-left: 1.2254901961%;
    margin-right: 1.2254901961%;
    display: block;
    text-align: right;
  }
}

.header-menu-inner {
  display: block;
  height: 32px;
  vertical-align: middle;
}

.header #searchInputBox {
  float: none;
}

.ms-shadow {
  border: 1px #efefef solid;
  box-shadow: none !important;
}

.ms-siteicon-img, .ms-siteicon-a {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

#siteIcon {
  line-height: auto;
  width: 100%;
  height: auto;
  margin-right: 0;
}

#siteIcon img {
  min-width: 160px;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .header {
    padding-bottom: 10px;
  }
  #s4-titlerow {
    padding-top: 10px;
  }
}

.footer {
  position: relative;
  box-sizing: border-box;
  height: 152px;
  margin-top: 3em;
  color: white;
  background-color: #3d3d3d;
}

.footer-inner {
  position: relative;
  min-height: 110px;
}

@media screen and (max-width: 320px) {
  .footer-inner table,
  .footer-inner tr,
  .footer-inner td,
  .footer-inner th,
  .footer-inner tbody {
    width: 100%;
    display: block;
  }
  .footer-inner table:after,
  .footer-inner tr:after,
  .footer-inner td:after,
  .footer-inner th:after,
  .footer-inner tbody:after {
    clear: both;
  }
  .footer-inner td {
    float: right;
  }
}

.footer table {
  width: 97.5490196078%;
  float: left;
  margin-left: 1.2254901961%;
  margin-right: 1.2254901961%;
  margin-top: 38px;
  color: white;
}

.footer table a {
  color: white;
}

.footer table td:last-child {
  padding-right: 5.8823529412%;
}

.btn-up {
  display: none;
  position: absolute;
  top: -30px;
  left: calc(50% - 30px);
  width: 60px;
  height: 60px;
  margin: auto 0;
  color: black;
  border-radius: 50%;
  background-color: #3d3d3d;
  cursor: pointer;
}

@media screen and (min-width: 0px) and (max-width: 1024px) {
  .btn-up {
    display: block !important;
  }
}

.btn-up-inner {
  display: block;
  width: 16px;
  height: 16px;
  margin-top: -2px;
  margin-left: -2px;
  background-color: pink;
}

.btn-up .icon-arrow-up {
  font-size: 24px;
  margin: 18px;
  fill: white;
}

/* Mega Dropdown */
#divMegaDropDownPage {
  background-color: white;
}

#mdd {
  display: block;
  width: auto;
  padding: 0;
  bottom: 0;
  margin-top: 2%;
}

#mdd {
  position: relative;
}

#mdd .mdd-button {
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
  line-height: 39px;
  position: absolute;
  right: 0;
  float: right;
  box-sizing: border-box;
  width: 175px;
  padding-left: 15px;
  text-align: left;
  color: #fff;
  background: 140px 50% url("/_layouts/15/images/strabag/mdd-icon-arrow.png") no-repeat;
  background-color: #ffcc00;
}

#mdd > #mdd-menu {
  top: 34px;
  right: 0;
  border: 2px #efefef solid;
}

#mdd-button:hover,
#mdd-header-button:hover {
  cursor: pointer;
}

#mdd-menu {
  position: absolute;
  z-index: 100;
  width: 1010px;
  height: 475px;
  background-color: white;
}

#mdd-menu thead {
  display: table-header-group;
}

#mdd-menu thead #thHeaderRight #mdd-header-button {
  position: relative;
}

#mdd-menu.hide {
  display: none;
}

#mdd-menu table {
  width: 100%;
}

#mdd-menu #thHeaderRight {
  background-color: #6c7074;
}

#mdd-menu #tdImportantLinksHeader,
#mdd-menu #tdCommunitiesHeader {
  height: 60px;
}

#mdd-menu #mdd-menu {
  border: 2px rgba(61, 61, 61, 0.5) solid;
  box-shadow: -3px 3px 0 0 rgba(61, 61, 61, 0.25);
}

#mdd > #mdd-menu {
  border: none;
  top: 1px;
}

#mdd-menu th {
  height: 37px;
  padding: 0;
  background-color: #6c7074;
}

#mdd-menu td {
  width: 215px;
  padding: 0 20px;
  vertical-align: top;
}

#mdd-menu #tdMyCommunitiesAsMember,
#mdd-menu #tdMyCommunitiesAsOwner {
  min-height: 300px;
}

#mdd-menu #tdImportantLinksHeader,
#mdd-menu #tdImportantLinks {
  width: 220px;
}

#mdd-menu td img {
  max-width: 215px;
}

/* MDD - Content*/
#mdd-menu td,
#mdd-menu td p {
  overflow: hidden;
  word-break: break-all;
}

#mdd-menu tr.rowSpacing {
  height: 40px;
}

#mdd-menu h1 {
  font-size: 22px;
}

#mdd-menu h2 {
  font-size: 14px;
  font-weight: normal;
  font-family: $din-bold;
}

#mdd-menu td a {
  font-size: 14px;
  line-height: 25px;
  margin: 0;
  vertical-align: middle;
  color: #666;
}

#mdd-menu #tdImportantLinks a {
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  margin: 0;
  vertical-align: top;
  color: #333;
}

#mdd-menu #tdTeaser h2 {
  padding-top: 20px;
  text-transform: uppercase;
  color: #666;
}

#mdd-menu h2 {
  color: black;
}

#mdd-menu #tdTeaser h2 {
  color: black;
}

#mdd-menu #tdImportantLinksHeader h1,
#mdd-menu #tdCommunitiesHeader h1 {
  color: black;
}

#mdd-menu #tdImportantLinks a {
  color: #d72622;
}

.sample::after {
  content: ' ';
  clear: both;
  display: block;
}

#tdImportantLinksHeader h1,
#tdCommunitiesHeader h1 {
  font-family: "DINProBold";
}

/*** Not so nice table layout ***/
@media (max-width: 1010px) {
  html:not(.ms-dialog) #contentBox #DeltaPlaceHolderMain {
    width: 100%;
  }
  html:not(.ms-dialog) #contentBox .ms-table {
    display: block;
  }
  html:not(.ms-dialog) #contentBox .ms-fullWidth {
    width: auto;
  }
  html:not(.ms-dialog) #contentBox .tableCol-33,
  html:not(.ms-dialog) #contentBox .tableCol-25,
  html:not(.ms-dialog) #contentBox .tableCol-50,
  html:not(.ms-dialog) #contentBox .tableCol-75,
  html:not(.ms-dialog) #contentBox .col-50,
  html:not(.ms-dialog) #contentBox .col-33 {
    position: relative;
    display: block !important;
    float: left !important;
    width: 100% !important;
    min-width: 320px !important;
    page-break-after: always;
         break-after: always;
  }
  html:not(.ms-dialog) #contentBox .tableCol-33:after,
  html:not(.ms-dialog) #contentBox .tableCol-25:after,
  html:not(.ms-dialog) #contentBox .tableCol-50:after,
  html:not(.ms-dialog) #contentBox .tableCol-75:after,
  html:not(.ms-dialog) #contentBox .col-50:after,
  html:not(.ms-dialog) #contentBox .col-33:after {
    content: ' ';
    width: 0px;
    clear: both;
  }
}

/* Hide Page Title */
h1#pageTitle {
  display: block;
  font-size: "DINProMedium";
  font-size: 30px;
}

/* CSS Style Rule for Div having id="outer-container" */
/* outer-container will hold the whole assembly of
   nested div overlays. */
/* It will also center align the design */
#mainPLDiv {
  /*width: 990px;*/
  /*max-width: 100%;*/
  min-width: 0px !important;
  margin: 0 auto;
}

/* footer CSS Style Rule */
#bottomDiv {
  width: 100%;
  /*background-color: red;*/
}

/* content-container CSS Style Rule */
/* It will hold the main content of the page. */
/* it is the left side column */
/* in this 2 columns div layout */
#leftColDiv {
  min-width: 0px !important;
  max-width: 100% !important;
  float: left;
  background-color: #fff;
  margin-right: 0px;
  display: table-cell;
  width: 48.5294117647%;
  margin-right: 1.4705882353%;
  border-radius: 0px;
}

@media (max-width: 1010px) {
  #leftColDiv {
    width: 47.5490196078%;
  }
}

@media screen and (min-width: 0) and (max-width: 480px) {
  #leftColDiv {
    width: 97.5490196078%;
  }
}

#leftColDiv .edit-view,
#rightColDiv .edit-view,
#LeftBottomWebpartZone,
#RightBottomWebpartZone {
  padding: 0px 10px 10px 10px;
}

#leftColDiv .display-view .article {
  padding: 0px 10px 10px 10px;
}

#leftColDiv .display-view .article-header img {
  min-width: 0 !important;
  max-height: 100% !important;
  width: 100%;
  height: auto;
}

/* right side navigation that is the right side column of */
/* 2 columns div layout */
/* Edit-Mode Panel */
#leftColDiv .edit-view {
  max-width: 700px;
}

#rightColDiv .edit-view {
  min-width: 438px;
}

.edit-view .edit-mode-panel {
  background-color: #fff;
  padding: 4px 0px;
  width: 100%;
}

/* Display View */
.article,
.article-header,
.article-content {
  clear: both;
  padding: 0px;
}

.article .display-mode-panel {
  padding-top: 8px;
}

/* Article Contact */
#article-contact-header {
  height: 40px;
  vertical-align: middle;
  border-bottom: 1px solid #eee;
}

#article-contact-header h2 {
  line-height: 40px;
  text-transform: uppercase;
  padding-left: 10px;
  font-size: 14px;
  font-weight: bold;
}

/* Article Contact Person */
#article-contact-person {
  max-height: 60px;
  min-width: 200px;
}

#article-contact-person .mbContactDetails {
  border: 0px solid transparent;
}

#article-contact-person .mbContactDetails .ms-vb {
  margin-left: 80px;
  height: 60px;
}

#article-contact-person .mbContactDetails .ms-vb a {
  vertical-align: middle;
  line-height: 60px;
  font-size: 14px;
  font-weight: bold;
  color: #666;
}

#article-contact-person img.mbUserImage {
  float: left;
  height: 60px;
}

/* Article Created/Modified Info */
#article-created-modified-info {
  padding: 10px;
  font-size: 11px;
  clear: both;
}

#article-created-modified-info table .col-1 {
  width: 55%;
}

#article-created-modified-info table .col-2 {
  width: 45%;
}

#article-created-modified-info table .col-2 {
  font-weight: bold;
}

#article-created-modified-info table .col-2 a {
  font-weight: normal;
}

.captioned-image {
  height: auto;
}

.captioned-image img {
  max-width: 100%;
}

/* Clearned */
#rightColDiv {
  /*height: 400px;*/
  /*background-color: navy;*/
  border-left: 3px #efefef solid;
  padding-left: 1.4705882353%;
  box-sizing: border-box;
  width: 300px;
  background-color: #fff;
  border-radius: 0px;
  display: block;
  width: 27.0588235294%;
  float: left;
  margin-right: 1.4705882353%;
  margin-left: 11.9607843137%;
}

@media screen and (min-width: 0) and (max-width: 480px) {
  #rightColDiv {
    width: 97.5490196078%;
    border-left: none;
    border-top: 3px #efefef solid;
  }
}

#article-contact-header {
  height: auto;
  border: 0px transparent solid;
}

#article-contact-header h2 {
  line-height: 100%;
  padding-left: 0px;
  font-size: 18px;
  padding-bottom: 1em;
}

#rightColDiv .pageContact-display {
  padding-top: 1em;
  margin-top: 2em;
  border-top: 3px #efefef solid;
}

#article-created-modified-info {
  padding: 0px;
}

#article-created-modified-info table {
  width: 100%;
  margin-top: 1em;
}

#article-created-modified-info .col-1,
#article-created-modified-info .col-2 {
  width: auto;
}

#mbContactDetails .ms-vb {
  border: none;
}

.ms-webpartPage-root {
  border-spacing: 0px;
}

.ms-webpartPage-root tbody {
  display: block !important;
  width: 89.5098039216%;
}

.ms-webpartPage-root tr {
  display: block;
}

.ms-webpartPage-root td#tdLeftColumn {
  display: inline-block;
  width: 63.3986928105% !important;
  margin-right: 1.6339869281%;
}

.ms-webpartPage-root td#tdLeftColumn tbody {
  width: 100%;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .ms-webpartPage-root td#tdLeftColumn {
    width: 97.5490196078% !important;
    margin: 0 5.8823529412%;
    height: auto !important;
  }
  .ms-webpartPage-root td#tdLeftColumn .ms-core-tableNoSpace > * > tr > td {
    width: 100%;
  }
}

.ms-webpartPage-root td#tdRightColumn {
  display: inline-block;
  width: 31.5359477124% !important;
  margin-left: 1.6339869281%;
}

.ms-webpartPage-root td#tdRightColumn tbody {
  width: auto;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .ms-webpartPage-root td#tdRightColumn {
    width: 97.5490196078% !important;
    margin: 0 5.8823529412%;
    height: auto !important;
  }
  .ms-webpartPage-root td#tdRightColumn .ms-core-tableNoSpace > * > tr > td {
    width: 100%;
  }
  .ms-webpartPage-root td#tdRightColumn tbody {
    width: 100%;
  }
  .ms-webpartPage-root td#tdRightColumn tbody > td {
    width: 100%;
  }
}

#s4-titlerow {
  height: auto;
}

#s4-bodyContainer {
  background-color: white;
}

#DeltaPlaceHolderPageTitleInTitleArea {
  font-family: "DINProMedium";
  color: black;
}

html:not(.ms-dialog) #contentRow {
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
  box-sizing: content-box;
}

html:not(.ms-dialog) #contentRow:after {
  content: " ";
  display: block;
  clear: both;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  html:not(.ms-dialog) #contentRow {
    padding-top: 0px;
  }
}

html:not(.ms-dialog) #sideNavBox {
  width: 14.2156862745%;
  float: left;
  margin-left: 1.2254901961%;
  margin-right: 1.2254901961%;
  box-sizing: content-box;
}

@media (max-width: 1010px) {
  html:not(.ms-dialog) #sideNavBox {
    display: none;
  }
}

html:not(.ms-dialog) #contentBox {
  width: 80.8823529412%;
  float: left;
  margin-left: 1.2254901961%;
  margin-right: 1.2254901961%;
  box-sizing: content-box;
  min-width: 0;
}

@media (max-width: 1010px) {
  html:not(.ms-dialog) #contentBox {
    width: 97.5490196078%;
    float: left;
    margin-left: 1.2254901961%;
    margin-right: 1.2254901961%;
    width: 100%;
    margin-left: 0;
  }
}

html:not(.ms-dialog) #s4-bodyContainer {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  html:not(.ms-dialog) #contentBox .ms-fullWidth {
    width: 100%;
  }
}

html:not(.ms-dialog) .landing-area {
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
}

html:not(.ms-dialog) .landing-area:after {
  content: " ";
  display: block;
  clear: both;
}

html:not(.ms-dialog) .landing-left {
  width: 22.5490196078%;
  float: left;
  margin-left: 1.2254901961%;
  margin-right: 1.2254901961%;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  html:not(.ms-dialog) .landing-left {
    width: 97.5490196078%;
    float: left;
    margin-left: 1.2254901961%;
    margin-right: 1.2254901961%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  html:not(.ms-dialog) .landing-left {
    width: 39.2156862745%;
    float: left;
    margin-left: 1.2254901961%;
    margin-right: 1.2254901961%;
  }
}

html:not(.ms-dialog) .landing-middle {
  width: 39.2156862745%;
  float: left;
  margin-left: 1.2254901961%;
  margin-right: 1.2254901961%;
}

@media screen and (max-width: 768px) {
  html:not(.ms-dialog) .landing-middle {
    width: 97.5490196078%;
    float: left;
    margin-left: 1.2254901961%;
    margin-right: 1.2254901961%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  html:not(.ms-dialog) .landing-middle {
    width: 47.5490196078%;
    float: left;
    margin-left: 1.2254901961%;
    margin-right: 1.2254901961%;
  }
}

html:not(.ms-dialog) .landing-right {
  width: 22.5490196078%;
  float: left;
  margin-left: 1.2254901961%;
  margin-right: 1.2254901961%;
}

@media screen and (max-width: 768px) {
  html:not(.ms-dialog) .landing-right {
    width: 97.5490196078%;
    float: left;
    margin-left: 1.2254901961%;
    margin-right: 1.2254901961%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  html:not(.ms-dialog) .landing-right {
    width: 47.5490196078%;
    float: left;
    margin-left: 1.2254901961%;
    margin-right: 1.2254901961%;
  }
}

html:not(.ms-dialog) .new-sidebar {
  margin-top: 14px;
}