/**********************************************/ /* Color definitions Blue (dark): #034ea1 Blue (light): #29abe1 //(sub heading/link light blue) Yellow: #ffd244 Grey (BG): #ebecec //menu grey bg/box sub heading grey Grey (Border): #dbdcdd //box border grey Secondary palett: Grey: #d9dadb Yellow: #ffff00 ----- Top: 15px Menu: 20px Slider Heading: 49px (bold) Slider Sub-heading: 20px (italic) h1: 40px (bold) general/box p: 20px Intro p: 25px (sample: main: 16px line height 24/side: 14px lineheight 20) box/event heading: 25px (bold) box p: 20px link:20px (bold) */ /* ********************************************************************** */ /* WEBFONT OpenSans */ /* ********************************************************************** */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans'); /* ********************************************************************** */ /* GENERAL */ /* ********************************************************************** */ body{font-family:'Noto Sans', sans-serif; font-size:15px; color:black;} ::-moz-selection { background:rgb(246,157,37) !important; color:white !important; text-shadow: none; } ::selection { background:rgb(246,157,37) !important; color:white !important; text-shadow: none; } /* ********************************************************************** */ /* Content container /* ********************************************************************** */ .centered_with_container{width:1170px; margin:0 auto; overflow:hidden; text-align:left;} .centered_with_container .centered_with_container{width:auto;} /* ********************************************************************** */ /* STANDARD CONTENT ELEMENTS */ /* ********************************************************************** */ #content_box { } .banner-image .box-default{min-height: 300px;} #content_box p{font-size:1.25em; line-height:1.6em; margin:10px 0 10px 0; padding:0; } #content_box em{ font-style:italic;} #content_box strong{font-weight:bold;} #content_box sub{} #content_box sup{} #content_box strike{text-decoration: line-through;} #content_box u{text-decoration:underline;} #content_box img{max-width:100%; height:auto;} /*#content_box .city_image{height:380px;overflow:hidden;}*/ #content_box .city_image img{height:380px;width:auto} #content_box h1{ font-weight: _bold; font-size: 2.5em; margin-top:10px; color:#034ea1; padding-bottom:5px;} #content_box h2{ font-weight: bold; font-size: 2.1em; margin-top: 10px; color: #29abe1; margin-bottom: 15px;} #content_box h3{ font-weight: bold; font-size: 1.9em; margin-top:10px; color:black;} #content_box h4{ font-weight: bold; font-size: 1.6em; margin-top:10px; color:#29abe1;} #content_box h5{ font-weight: bold; font-size: 1.6em; margin-top:10px; } #content_box h6{ font-weight: bold; font-size: 1.0em; margin-top:10px; } //margin: 0px -10px 0px -10px; border: 1px solid #dbdcdd; border-width: 1px 0 0 0 0; #content_box a{color:#29abe1; font-weight: bold; background-color:transparent; text-decoration:none; } #content_box a:link {color:#29abe1;} #content_box a:visited {color:#29abe1;} #content_box a:hover {background-color:#29abe1; color:white;} #content_box a:active {} #content_box a img{border:none; background-color:transparent;} #content_box a:hover img{} #content_box a img:hover { opacity: 0.8; filter: alpha(opacity=80); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} #content_box ul{overflow:hidden; margin-left: 0;padding-left: 0; list-style-type: circle; padding-left:20px;b list-style-position: outside; list-style-type:disc;} #content_box ul li { padding-left: 20px; font-weight: normal; font-size:1.25em; line-height:1.6em; } #content_box ul li li { padding-left: 20px; font-weight: normal; font-size:1.0em; line-height:1.6em; list-style-type: circle } #content_box ol{margin:10px 0 10px 0px; overflow:hidden; padding-left:25px; } #content_box ol li{padding-left: 20px; font-weight: normal; font-size:1.25em; line-height:1.6em; } #content_box .box ul li p{ font-size: 1em; } #content_box .box ol li p{ font-size: 1em; } #content_box .box ul li{ font-size: 1.1em; } #content_box .box ol li{ font-size: 1.1em; } #content_box table{margin:10px 0 10px 0;} #content_box table tr{} #content_box table tr th{vertical-align:top; font-size:1em;} #content_box table tr td{vertical-align:top; font-size:1em;} #content_box table tr td li{vertical-align:top; font-size:1em;} //#content_box hr{margin:10px 0 10px 0; border:1px solid rgb(220,220,220); border-width:1px 0 0 0;} #content_box hr{ margin:0 -10px 0 -10px; border:1px solid #dbdcdd; border-width:1px 0 0 0;} footer hr{ margin: 0; border: 1px solid #ebecec; border-width: 1px 0 0 0; margin-top: -2px;} #content_box div{font-size:inherit; color:inherit; line-height:inherit;} #content_box span{font-size:inherit; color:inherit; line-height:inherit;} #content_box blockquote {} #content_box blockquote p{color:rgb(211,172,43); font-style:normal;} #content_box pre{font-family:Courier, monospace;} #content_box pre code{color:rgb(90,90,90);} #content_box dl{} #content_box dl dt{} #content_box dt dd{} /* ********************************************************************** */ /* ADDITIONAL STANDARD CLASSES */ /* ********************************************************************** */ #content_box .align-left{text-align:left;} #content_box .align-right{text-align:right;} #content_box .align-center{text-align:center;} #content_box .align-justify{text-align:justify;} /* ********************************************************************** */ /* ADDITIONAL CUSTOM CLASSES */ /* ********************************************************************** */ /* ********************************************************************** */ /* General text color in non-white BG elements(BG, inverted, etc) /* ********************************************************************** */ #content_box .inverted *{color:white; } #content_box .inverted a, #content_box .inverted a:link, #content_box .inverted a:visited {} #content_box .inverted a:hover {} #content_box .inverted pre code{color:rgb(90,90,90); } /* ********************************************************************** */ /* Link style in some of the BG boxes () /* ********************************************************************** */ #content_box .blue1BG a, #content_box .blue2BG a{ color:#034ea1; } #content_box .blue1BG a:hover, #content_box .blue2BG a:hover{ background-color:#034ea1; color:white;} /* ********************************************************************** */ /* Link styles (coloured link boxes) /* ********************************************************************** */ #content_box .content_tile a[class^="link"]{display:inline-block; text-decoration:none; padding:8px 16px; border-radius:1px; border:1px solid white; } #content_box .content_tile a[class$="Border"]{ background-color:white; } #content_box .content_tile a[class$="BG"]{color:white; } #content_box .content_tile a.linkBlue1Border{color:#034ea1; border-color:#034ea1;} #content_box .content_tile a.linkBlue1Border:hover{color:white; background-color:#034ea1;} #content_box .content_tile a.linkBlue1BG{ background-color:#034ea1; border-color:#034ea1;} #content_box .content_tile a.linkBlue1BG:hover{ background-color:#034ea1; opacity:0.9;} #content_box .content_tile a.linkBlue2Border{color:#29abe1; border-color:#29abe1;} #content_box .content_tile a.linkBlue2Border:hover{color:white; background-color:#29abe1;} #content_box .content_tile a.linkBlue2BG{ background-color:#29abe1; border-color:#29abe1;} #content_box .content_tile a.linkBlue2BG:hover{ background-color:#29abe1; opacity:0.9;} #content_box .content_tile a.linkWhiteBG{ color:rgb(90,90,90); background-color:white; border-color:white;} #content_box .content_tile a.linkWhiteBG:hover{ background-color:rgba(255,255,255,0.8); color:rgb(90,90,90);} #content_box .content_tile a.linkBlueGhost{color:#29abe1; border-color:#29abe1; background-color:transparent;} #content_box .content_tile a.linkBlueGhost:hover{ background-color: white; color: #29abe1; border-color: #29abe1;} #content_box .content_tile a.linkWhiteGhost{color:white; border-color:white; background-color:transparent;} #content_box .content_tile a.linkWhiteGhost:hover{background-color:rgba(255,255,255,0.1); color:white; border-color:white;} /* ********************************************************************** */ /* Special for button overlap on box : ext oxylab_stdwrap /* ********************************************************************** */ //#content_box div.box_button_overlap .full_width_container .centered_container p:last-child { margin-bottom: -30px; } #content_box div.greyBorderButton p:last-child { margin-bottom: -30px; } #content_box .news_box_1 {min-height: 690px;} /*#content_box .news_box_1 p:first-of-type{ margin: 0px -10px 10px -10px;}*/ //#content_box .news_box_1 img{ max-width: 106%; height: auto; margin-left: -3%; margin-top: -21px; padding-left: 1px;}//OR: uncomment later /* ********************************************************************** */ /* General Box Classes */ /* ********************************************************************** */ #content_box .content_tile{} #content_box .has_padding{padding:10px; margin: 10px;}//seperate margin class #content_box .solidBG{border-radius:inherit; text-align:left;} #content_box .borderBox{border-radius:inherit; border-width:1px /*0px 1px 1px 1px*/; border-style: solid; text-align:left;} #content_box .content_tile.inverted{color:white;} #content_box .box p{ font-size: 1.1em;} #content_box .box ul li { font-size: 1.1em; } #content_box .box br{ font-size: 0.5em;} #content_box .box h4,h5{ margin-top:10px; margin-bottom:15px;} #content_box .whiteBG{ background-color:white;} #content_box .blue1BG{ background-color:#034ea1;} #content_box .blue2BG{ background-color:#29abe1;} #content_box .greyBG{ background-color:#ebecec; } #content_box .whiteBorder{border-color:white;} #content_box .blue1Border{border-color:#034ea1;} #content_box .blue2Border{border-color:#29abe1;} #content_box .greyBorder{border-color:#dbdcdd;} #content_box .greyBorderButton{border-color:#dbdcdd;} /*copied/adjust*/ div#content > div.centered-column{width:980px; margin:0 auto;} div#content > div.wide-box{width:100%;} //div#content div.wide-box .centered_container {padding: 0px;} /* ********************************************************************** */ /* Content Tile header /* ********************************************************************** */ #content_box .content_tile div.csc-header{padding:5px 10px; margin:0; overflow:hidden;} #content_box .content_tile.no_padding div.csc-header{} #content_box .content_tile.has_padding div.csc-header{margin:-10px -10px 0 -10px;} /*#content_box .content_tile div.csc-header *{color:white;}*/ #content_box .content_tile div.csc-header h1{margin:0; padding:0;} #content_box .content_tile div.csc-header h2{margin:0; padding:0;} #content_box .content_tile div.csc-header h3{margin:0; padding:0;} #content_box .content_tile div.csc-header h4{margin:0; padding:0;} #content_box .content_tile div.csc-header h5{margin:0; padding:0;} #content_box .content_tile div.csc-header h6{margin:0; padding:0;} #content_box .whiteBorder div.csc-header{} #content_box .whiteBorder div.csc-header *{color:inherit;} #content_box .blue1Border div.csc-header{background-color:#034ea1;} #content_box .blue1Border div.csc-header *{color:white;} #content_box .blue2Border div.csc-header{background-color:#29abe1;} #content_box .blue2Border div.csc-header *{color:white;} #content_box .greyBorder div.csc-header{background-color:#dbdcdd; } #content_box .greyBorder div.csc-header *{color:white;} #content_box .greyBorderButton div.csc-header{background-color:#dbdcdd; } #content_box .greyBorderButton div.csc-header *{color:white;} /* ********************************************************************** */ /* Accordions */ /* ********************************************************************** */ #content_box .content_tile.box-accordion{border:1px solid rgb(30,104,129); background-color:white;} #content_box .content_tile.box-accordion .csc-header{ cursor:pointer; margin:-10px -10px 0 -10px; padding:0;} #content_box .content_tile.box-accordion .csc-header .csc-firstHeader{ cursor:pointer; color:white; margin:0; padding:5px 10px; background-color:rgb(30,104,129);} #content_box .content_tile.box-accordion .csc-header:hover{color:white !important; background-color:rgb(30,104,129);} #content_box .content_tile.box-accordion .accordion-content{padding:10px;} #content_box .content_tile.expanded {} #content_box .content_tile.expanded .csc-header:after{font-family: 'FontAwesome'; color:white; content: "\f078"; font-size:1.3em; margin:-34px 10px 0 0; display: inline-block; float:right; font-weight: normal;} #content_box .content_tile.expanded .csc-header:hover:after{color:rgb(211,172,43);} #content_box .content_tile.collapsed {padding-bottom:0 !important;} #content_box .content_tile.collapsed .csc-header:after{font-family: 'FontAwesome'; color:white; content: "\f054"; font-size:1.3em; margin:-31px 10px 0 0; display: inline-block; float:right; font-weight: normal;} #content_box .content_tile.collapsed .csc-header:hover:after{color:rgb(211,172,43);} /* ********************************************************************** */ /* Styles for news and events on news and events page */ /* ********************************************************************** */ #content_box .news,#content_box .event{min-height: 375px;} #content_box .news h2,#content_box .event h2{ font-weight: bold; font-size: 1.6em; margin-top: 10px; color: #29abe1;} #content_box .newsimage,#content_box .eventimage,#content_box .cityimage{/*float:left;*/ max-width:100%;} #page-73 #content_box .news .imagewrapper,#page-129 #content_box .news .imagewrapper,#page-74 #content_box .event .imagewrapper,#page-130 #content_box .event .imagewrapper,#page-53 #content_box .city .imagewrapper{float:left; max-width:250px; padding:7px;} #content_box .event,#content_box .news,#content_box .city {padding:10px;margin-bottom:50px;text-align:left; border-color:#dbdcdd;border-radius:inherit; border-width:1px ; border-style: solid;} #content_box .event .eventtitle,#content_box .news .newstitle {margin: 0px;} #content_box .event .teaser,#content_box .news .teaser {display:none} #content_box .event, .deventdescription, #content_box .news .newsdescription, #content_box .city .citidescription{text-align:left;} /* ********************************************************************** */ /* Styles for news and events in Boxes on home page */ /* ********************************************************************** */ #c282 .event, #c282 .news, #c282 .city {border-style:none;padding:0px;min-height:690px;} #c282 .event .teaser, #c282 .news .teaser, #c282 .city .teaser {display:block} #c282 .event .eventtitle, #c282 .news .newstitle, #c282 .city .citytitle {display:none;} #c282 .event .eventimage, #c282 .news .newsimage , #c282 .city .cityimage{float:none;display:block;max-width:800px; width:100%; padding:0px;} #c282 .event .imagewrapper, #c282 .news .imagewrapper,#c282 .city .imagewrapper {margin-left:-10px;margin-right:-10px} #c282 .event h4, #c282 .news h4, #c282 .city h4{text-align:left;height:150px; overflow:hidden;} #c282 .event .eventdescription h5 , #c282 .news .newsdescription h5, #c282 .city .citydescription h5, #c282 .event .eventdescription h6 , #c282 .news .newsdescription h6, #c282 .city .citydescription h6, #c282 .event .eventdescription h7 , #c282 .news .newsdescription h7, #c282 .city .citydescription h7{height:auto;font-size:1.25em;} #c282 .event .eventdescription , #c282 .news .newsdescription , #c282 .city .citydescription{text-align:left; height:500px; overflow:hidden;} .news_box_1 .box-default > .centered_container {padding-left:0px;padding-right:0px;} /* ********************************************************************** */ /* Styles for the national trainings events */ /* ********************************************************************** */ #content_box .trainingsevent {padding:10px; margin:10px;background-color:#eee} #content_box .trainingsevent .closed{background-image:url("/fileadmin/templates/sumps-up/images/icons/expand_plus.gif"); padding-right:30px;);background-repeat:no-repeat;background-position:right top; background-size:20px 20px;} #content_box .trainingsevent .open{background-image:url("/fileadmin/templates/sumps-up/images/icons/expand_minus.gif"); padding-right:30px;background-repeat:no-repeat;background-position:right top; background-size:20px 20px;} #content_box .trainingsevent div {margin-left:20px;} #content_box .trainingsevent td {padding:7px;} #content_box .trainingsevent h4 .text {width: calc(100% - 250px); display:inline-block} #content_box .trainingsevent p.bodytext {font-size: 15px;} #content_box .trainingsevent li {word-break: break-all;} /* ********************************************************************** */ /* Styles for downloads (further resources for now) */ /* ********************************************************************** */ #further_resources h4 {padding-top:20px; padding-bottom:5px;clear:both;} #content_box .dlitem {display:block;width:100%;position:relative;clear:both;border-top: 1px solid #bbb;padding-top:5px;padding-bottom:5px;} #content_box .dlitem div.dltitle {display:block;float:left;width:70%;padding:5px;font-weight:bold;} #content_box .dlitem .dlauthor {display:block;float:left;width:30%;padding:5px;} #content_box .dlitem .dlfiles{display:block;float:left;width:70%;padding:5px;word-wrap: break-word;} #content_box .dlitem .dlfiles img{max-width:25%; float:left;margin-right:2%; margin-bottom:2%;} #content_box .dlitem .dlfiles a:after{content:", "; display:inline-block;color:#000000;} #content_box .dlitem .dlfiles a:last-child:after{content:""; display:inline-block; } #content_box .dlitem .dlfiles a:hover:after{content:", "; display:inline-block;color:#000000;text-decoration: none;background-color:#ffffff;} #content_box .dlitem .dlfiles a:last-child:hover:after{content:""; display:inline-block; } #content_box .dlitem .dldate{display:block;float:left;width:30%;padding:5px;} #content_box .dlitem .dldate img{width: 50%;} #content_box .dlitem .share-dl {display:inline-block;} #content_box .dlitem .share-dl .shares .icon {display: inline-block;margin-left: 5px; text-align: center; font-size: 12px; background-color: #ddd; height: 24px; width:24px; border-radius: 12px;} #content_box .dlitem .share-dl .shares .fb {padding-top: 4px;} #content_box .dlitem .share-dl .shares .tweet {padding-top: 3px;} #content_box .dlitem .share-dl .shares .in {padding-top: 4px;} /*******************************************************************************/ /* interesting SUMPS */ /*******************************************************************************/ #content_box .sump-list .column_100 {column-count: 2;} #content_box .sump {clear: both; padding:0px 0px 15px 0px;margin: 15px 0px; border: solid 1px #dbdcdd; display: inline-block; break-inside: avoid-column;} #content_box .sump-pop, #content_box .sump-year {display: inline-block; margin-right: 5px;} #content_box .sump-header {margin-bottom: 10px; padding: 10px;} #content_box .sump-header h3 {font-size: 1.5em; width: calc(100% - 40px); display: inline-block; vertical-align: middle;} #content_box .sump-header img {width: 32px; display: inline-block;} #content_box .sump-content, #content_box .sump-content .bodytext{font-size: 18px;} #content_box .sump-thumb {float:left; width:150px;margin: 0px 15px;} #content_box .sump-content{float:left; padding: 0px 30px; min-width: 200px; max-width: 800px;width: calc(100% - 200px);} #content_box .sump h4 {font-size: 1.1em; color: #222222} #content_box .sump-content .sump_summaries a:after,#content_box .sump-content .sump_full a:after{content:","; color:#000000;} #content_box .sump-content .sump_summaries a:last-child:after,#content_box .sump-content .sump_full a:last-child:after{content:""; color:#000000;} #content_box .sump-content .sump_summaries a:hover:after,#content_box .sump-content .sump_full a:hover:after{content:","; color:#000000;background-color: #ffffff;} #content_box .sump-content .sump_summaries a:last-child:hover:after,#content_box .sump-content .sump_full a:hover:after{content:""; color:#000000;background-color: #ffffff;} /*******************************************************************************/ /* Ambassadors Page */ /*******************************************************************************/ #content_box .ambassadors .column_100 {column-count: 2;} #content_box .ambassador {clear: both; padding:0px 0px 15px 0px;margin: 15px 0px; border: solid 2px #dbdcdd; display: inline-block; break-inside: avoid-column;} #content_box .ambassador h4 {text-align: center; padding: 15px; margin: 0px 0px 15px 0px; border-bottom: solid 2px #dbdcdd; } #content_box .ambassador .amimage{float:left; width:150px;margin: 0px 15px;} #content_box .ambassador .amtext{float:left; padding: 0px 30px; min-width: 200px; max-width: 800px;width: calc(100% - 200px); font-size: 1em;color: #29abe1;} #content_box .ambassadors.coming-soon .shares:before{content: 'coming soon'; font-size: 1.6em;} #content_box .ambassadors.coming-soon .shares>div{display: none;} /*******************************************************************************/ /* Webinars */ /*******************************************************************************/ #page-124 .csc-firstHeader, #page-124 .powermail_legend {display: none;} /*#page-123 .powermail_form_2 {width: 30%; position: fixed; top: 150px; left: 30%; background-color: #ffffff; padding: 15px;}*/ #page-124 .powermail_form_2 .powermail_fieldwrap {margin: 15px 0px;} #page-124 .powermail_form_2 .powermail_label {width: 150px;} #page-124 #powermail_field_event {outline: none; width: 100%;border-color: transparent;} #page-124 label[for="powermail_field_event"]{display: none;} #content_box .webinar-wrapper {border: solid 2px #ebecec; padding: 5px; margin-top: 30px;position: relative;} #content_box .webinar-wrapper h2 {margin: 0px;} #content_box .webinar-wrapper .header {padding: 15px;} #content_box .webinar-wrapper .text {display: inline-block; width: calc(100% - 215px); min-width: 300px;} #content_box .webinar-wrapper .lecturer-image {display: inline-block;width: 200px; vertical-align: top; margin-right: 5px;} #content_box .webinar-wrapper .lecturer, #content_box .webinar-wrapper .date {font-size: 1.25em;} #content_box .webinar-wrapper .lecturer-image img{max-height: 150px;} #content_box .webinar-wrapper .files {border-top: solid 2px #ebecec; border-bottom: solid 2px #ebecec; margin: 15px 0px; padding:5px 0px;} #content_box .webinar-wrapper .date {margin-top: 5px;} #content_box .webinar-wrapper .webinar-more .more-button {font-size: 1.25em;color: #29abe1; cursor: pointer;} #content_box .webinar-wrapper .webinar-more .webinar-description{display: none} #content_box .webinar-wrapper .webinar-more.open .webinar-description{display: block} #content_box .webinar-wrapper .register {display:block; text-align: right; font-size: 1.3em;padding: 10px;} #content_box .webinar-wrapper .register a {padding: 10px 15px; background-color: #ebecec; border-radius: 5px;} /*******************************************************************************/ /* Archives in the sidebar */ /*******************************************************************************/ #content_box .column_right .archive div.csc-header h3 { font-size:24px; color: #034ea1; text-align: center; } #content_box .column_right .archive td { padding: 3px 3px; } #content_box .column_right .archive ul>li { text-align: left; } #content_box .column_right .archive ul>li { list-style: none; margin: 15px 0px; font-size: 1.1em; padding-left: 0px; } /*******************************************************************************/ /* Share buttons */ /*******************************************************************************/ #content_box .shares {text-align:center;} #content_box .shares .icon {display: inline-block;margin-left: 10px; text-align: center; font-size: 21px; background-color: #ddd; height: 42px; width:42px; border-radius: 21px;} #content_box .shares .fb {padding-top:6px;} #content_box .shares .tweet {padding-top: 5px;} #content_box .shares .in {padding-top:6px;} #content_box .shares .icon a:hover {background-color: #ddd;} #content_box .trainingsevent h4 .shares {display:inline-block;vertical-align:top; line-height:30px;} /* ********************************************************************** */ /* FIRST ELEMENT IN CONTENT AREA - margin-top*/ /* ********************************************************************** */ /*#content_box .content_tile.has_padding p:first-child{margin-top:0;} #content_box .content_tile.has_padding h1:first-child{margin-top:0;} #content_box .content_tile.has_padding h2:first-child{margin-top:0;} #content_box .content_tile.has_padding h3:first-child{margin-top:0;} #content_box .content_tile.has_padding h4:first-child{margin-top:0;} #content_box .content_tile.has_padding h5:first-child{margin-top:0;} #content_box .content_tile.has_padding h6:first-child{margin-top:0;} #content_box .content_tile.has_padding ul:first-child{margin-top:0;} #content_box .content_tile.has_padding ol:first-child{margin-top:0;} #content_box .content_tile.has_padding table:first-child{margin-top:0;} #content_box .content_tile.has_padding blockquote:first-child{margin-top:0;} #content_box .content_tile.has_padding img:first-child{margin-top:0;}*/ /* ********************************************************************** */ /* SPECIAL ELEMENT * First level non-padding element in content area (screen) /* ********************************************************************** */ /* necessary ?!? */ #content_box > .full_width_container > .centered_container.no_padding{padding:10px 0;} #content_box .no_vertical_padding {margin:0px 10px; padding: 10px;} /* ********************************************************************** */ /* FCE (Typo3 Flexible Content elements) /* ********************************************************************** */ .two_colums_50_50{} .two_colums_50_50 > .column_50_50{min-height:1px; width:50%;} .two_colums_50_50 > .column_left{float:left;} .two_colums_50_50 > .column_right{float:right;} .two_colums_33_66{} .two_colums_33_66 > .column_33_66{min-height:1px; } .two_colums_33_66 > .column_left{float:left; width:33.3333%;} .two_colums_33_66 > .column_right{float:right; width:66.3333%; } .two_colums_66_33{} .two_colums_66_33 > .column_66_33{min-height:1px; } .two_colums_66_33 > .column_left{float:left; width:66.3333%;} .two_colums_66_33 > .column_right{float:right; width:33.3333%;} .three_colums_33_33_33{} .three_colums_33_33_33 > .column_33_33_33{min-height:1px; width:33.333333%;} .three_colums_33_33_33 > .column_left{float:left;} .three_colums_33_33_33 > .column_middle{float:left;} .three_colums_33_33_33 > .column_right{float:right; margin-right:0;} #content_box .three_colums_33_33_33 .has_padding { padding-top: 0px;} //events .three_colums_10_70_20{} .three_colums_10_70_20 > .column_10_70_20{min-height:1px; } #content_box .three_colums_10_70_20 > .column_10_70_20 .has_padding { padding-bottom:0px; } .three_colums_10_70_20 > .column_left{float:left; width:10%;} //#content_box .three_colums_10_70_20 > .column_left .box p{margin-top: 5px; padding-bottom: 5px;} #content_box .three_colums_10_70_20 > .column_left .box p{margin:0px; padding:0px; line-height: 22px;} #content_box .three_colums_10_70_20 > .column_left .box span{margin:0px; padding:0px;} .three_colums_10_70_20 > .column_middle{float:left; width:70%;} #content_box .three_colums_10_70_20 > .column_middle .box p{font-size:20px; font-weight:bold; /*margin-top: 20px; margin-bottom: 30px;*/ padding-bottom: 5px;} .three_colums_10_70_20 > .column_right{float:right; margin-right:0; width:20%;} #content_box .three_colums_10_70_20 > .column_right .box a{padding-bottom: 5px; font-weight: bold; font-size: 1em;} .three_colums_10_70_20 > .column_10_70_20 .box{min-height:83px; } //cities: add resp .two_colums_city_50_50{} .two_colums_city_50_50 > .column_city_50_50{min-height:1px; width:50%;} .two_colums_city_50_50 > .column_city_50_50 .no_padding {/*padding-top:10px;*/} #content_box .two_colums_city_50_50 > .column_city_50_50 .has_padding {margin-top:0px; height: 100%; } //#content_box .two_colums_city_50_50 > .column_city_50_50.column_left .has_padding {padding-left:0px; padding-right:0px;} .two_colums_city_50_50 > .column_city_50_50 .centered_container {padding-left:0px; padding-right:0px;} .two_colums_city_50_50 > .column_left{float:left;} .two_colums_city_50_50 > .column_right{float:right;} .two_colums_city_50_50 > .column_right DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image {margin-left: 0px;} #content_box .two_colums_city_50_50 > .column_left .has_padding {margin-right: 0px;} .four_colums_25_25_25_25{} .four_colums_25_25_25_25 > .column_25_25_25_25{min-height:1px; width:25%;} .four_colums_25_25_25_25 > .column_left{float:left;} .four_colums_25_25_25_25 > .column_middle_left{float:left;} .four_colums_25_25_25_25 > .column_middle_right{float:left;} .four_colums_25_25_25_25 > .column_right{float:right; margin-right:0;} /* ********************************************************************** */ /* style for header image on sump_projects /* added by AP 20170906 /* ********************************************************************** */ div#c822{ max-width: 1600px; margin: 0 auto; background-size: contain !important; } /* screen smaller than image */ @media only screen and (max-width: 1600px) { div#c822{ min-height: auto !important; padding-top: 16%; } } /**********************************************/ /* Media Queries /**********************************************/ /* 980 - 1200 */ @media only screen and (min-width: 980px) and (max-width:1199px) { } /* 768 - 980 */ @media only screen and (min-width: 768px) and (max-width:979px) { #content_box .ambassadors .column_100 {column-count: 1;} #content_box .trainingsevent h4 .text {width:100%;} #content_box .trainingsevent h4 .shares {display:block;margin-top:15px;} } /* < 768 */ @media only screen and (max-width: 767px){ .two_colums_50_50 > .column_50_50{margin:0;} .two_colums_50_50 > .column_left{clear:both; width:96%; margin-left:2%; margin-right:2%; } .two_colums_50_50 > .column_right{clear:both; width:96%; margin-left:2%; margin-right:2%; margin-top:10px;} .two_colums_city_50_50 > .column_city_50_50{margin:0;} .two_colums_city_50_50 > .column_left{clear:both; width:96%; margin-left:2%; margin-right:2%; } .two_colums_city_50_50 > .column_right{clear:both; width:96%; margin-left:2%; margin-right:2%; margin-top:10px;} .two_colums_33_66 > .column_33_66{margin:0;} .two_colums_33_66 > .column_left{clear:both; width:96%; margin-left:2%; margin-right:2%; } .two_colums_33_66 > .column_right{clear:both; width:96%; margin-left:2%; margin-right:2%; margin-top:10px;} .two_colums_66_33{} .two_colums_66_33 > .column_66_33{margin:0;} .two_colums_66_33 > .column_left{clear:both; width:96%; margin-left:2%; margin-right:2%; } .two_colums_66_33 > .column_right{clear:both; width:96%; margin-left:2%; margin-right:2%; margin-top:10px;} .three_colums_33_33_33{} .three_colums_33_33_33 > .column_33_33_33{margin:0;} .three_colums_33_33_33 > .column_left{clear:both; width:96%; margin-left:2%; margin-right:2%; } .three_colums_33_33_33 > .column_middle{clear:both; width:96%; margin-left:2%; margin-right:2%; margin-top:10px;} .three_colums_33_33_33 > .column_right{clear:both; width:96%; margin-left:2%; margin-right:2%; margin-top:10px;} .three_colums_10_70_20{} .three_colums_10_70_20 > .column_10_70_20{margin:0;} .three_colums_10_70_20 > .column_left{clear:both; width:96%; margin-left:2%; margin-right:2%; } .three_colums_10_70_20 > .column_middle{clear:both; width:96%; margin-left:2%; margin-right:2%; margin-top:10px;} .three_colums_10_70_20 > .column_right{clear:both; width:96%; margin-left:2%; margin-right:2%; margin-top:10px;} .four_colums_25_25_25_25{} .four_colums_25_25_25_25 > .column_25_25_25_25{margin:0;} .four_colums_25_25_25_25 > .column_left{clear:both; width:96%; margin-left:2%; margin-right:2%; } .four_colums_25_25_25_25 > .column_middle_left{clear:both; width:96%; margin-left:2%; margin-right:2%; margin-top:10px;} .four_colums_25_25_25_25 > .column_middle_right{clear:both; width:96%; margin-left:2%; margin-right:2%; margin-top:10px;} .four_colums_25_25_25_25 > .column_right{clear:both; width:96%; margin-left:2%; margin-right:2%; margin-top:10px;} /* ********************************************************************** */ /* SPECIAL ELEMENT * First level non-padding element in content area (screen) /* ********************************************************************** */ #content_box > .full_width_container > .centered_container.no_padding{padding:10px;} /* ********************************************************************** */ /* Teaser boxes on home page * remove fixed heigh /* ********************************************************************** */ #c282 .event h4, #c282 .news h4, #c282 .city h4{text-align:left;height:auto} #c282 .event .eventdescription , #c282 .news .newsdescription , #c282 .city .citydescription{text-align:left; height:auto;} #content_box .newsimage,#content_box .eventimage,#content_box .cityimage{float:none; max-width:300px; margin:auto;} img[style*="float: left"],img[style*="float: right"],img[style*="float:left"],img[style*="float:right"] {max-width:50% !important;} #content_box .ambassadors .column_100, #content_box .sump-list .column_100 {column-count: 1;} #content_box .trainingsevent h4 .text {width:100%;} #content_box .trainingsevent h4 .shares {display:block;margin-top:15px;} } /* end of < 768 */ @media only screen and (max-width: 600px){ #content_box .webinar-wrapper .text {display: block; width: 100%; } } @media only screen and (max-width: 460px){ .banner-image .box-default{min-height: 150px;} img[style*="float: left"],img[style*="float: right"],img[style*="float:left"],img[style*="float:right"] {max-width:100% !important;} #content_box .ambassador .amimage,#content_box .sump-thumb {float:none; margin: auto;} #content_box .ambassador .amtext, #content_box .sump-content {float:none; margin: auto; width:100%} #content_box .trainingsevent h4 .text {width:100%;} #content_box .trainingsevent h4 .shares {display:block;margin-top:15px;} }