/* ================================================================================ ===== CSS STYLES FOR ===== ===== SCHOOLWEBSITE.NU SKIN ===== ================================================================================ */ /* ================================================================================ GENERAL SETTINGS ================================================================================ */ html { height:100%; /* om hoogte op 100% te zetten in geval van te weinig content */ margin:0px; padding:0px; overflow-y:scroll; /* Altijd een scrollbalk afdwingen i.v.m. verspringingen */ } body { text-align:left; font-family: 'Asap', sans-serif; font-size:16px; line-height:1.5; } #Body { height:100%;} /* Achtergrondkleuren + afbeeldingen hier */ #Form { height:100%; min-height:100%;} /* om hoogte op minimaal 100% te zetten, mag wel groter */ /* HEADINGS */ H1, H2, H3, H4, H5 {font-family: 'Asap', sans-serif !important; color:#e11a32; font-weight:bold; font-style:italic; margin:0; padding-bottom:10px;} H1 {font-size:50px;} H2 {font-size:25px; color:#e85153;} H3 {font-size:18px; color:#646567;} H4 {font-size:14px;} H5 {font-size:12px;} .Home h1 {font-weight:} /* LINKS */ A:link {color:#e85153; text-decoration:none; transition:color 0.3s ease;} A:visited {color:#e85153;} A:hover {color:#e85153;} A:active {color:#e85153;} /* TABLES */ table {font-size:inherit;} /* om de lettergrootte in de editor gelijk te zetten */ table tr {} table tr th {} table tr td { vertical-align:top;} /* DNN SPECIFIC */ .Head, .SubHead, .SubSubHead, .Normal, .NormalTextBox, .NormalRed, .NormalBold, .CommandButton { font-family: inherit; color:inherit; line-height:inherit; font-size:inherit; font-weight: inherit;} .Head { font-size:15px;} /* style for module titles */ .SubHead {font-size:14px;} /* style of item titles on edit and admin pages */ .SubSubHead { font-size:13px;} /* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */ .NormalBold { font-weight:bold;} .CommandButton {} /* text style for buttons and link buttons used in the portal admin pages */ A.CommandButton:link {} /* hyperlink style for buttons and link buttons used in the portal admin pages */ A.CommandButton:visited {} A.CommandButton:hover {} A.CommandButton:active {} .StandardButton {} /* button style for standard HTML buttons */ /* pretty form buttons */ .dnnPrimaryAction, .dnnFormItem input[type="submit"], a.dnnPrimaryAction{background: none; background-color: #444; color: #fff; border: 2px solid #444; border-radius: 5px; text-shadow: none; box-shadow: none;} .dnnPrimaryAction:hover, .dnnFormItem input[type="submit"]:hover, a.dnnPrimaryAction:hover{background: none; background-color: #fff; color: #444 !important; border: 2px solid #444; border-radius: 5px; text-shadow: none; box-shadow: none;} .dnnFormItem button, .dnnFormItem input[type="button"], .dnnFormItem input[type="reset"], .dnnSecondaryAction, a.dnnSecondaryAction, ul.dnnAdminTabNav li a, .dnnLogin .LoginTabGroup span{background: none; background-color:#eee; color: #000; border: 2px solid #eee; border-radius: 5px; text-shadow: none; box-shadow: none;} .dnnFormItem button:hover, .dnnFormItem input[type="button"]:hover, .dnnFormItem input[type="reset"]:hover, .dnnSecondaryAction:hover, a.dnnSecondaryAction:hover, ul.dnnAdminTabNav li a:hover, .dnnLogin .LoginTabGroup span:hover{background: none; background-color:#eee; color: #000; border: 2px solid #eee; border-radius: 5px; text-shadow: none; box-shadow: none;} .dnnFormItem input[type="text"]:active, .dnnFormItem input[type="text"]:focus, .dnnFormItem input[type="password"]:focus, .dnnFormItem input[type="password"]:active, .dnnFormItem input[type="email"]:active, .dnnFormItem input[type="email"]:focus, .dnnFormItem select:active, .dnnFormItem select:focus, .dnnFormItem textarea:active, .dnnFormItem textarea:focus, .dnnFormItem input[type="search"]:active, .dnnFormItem input[type="search"]:focus{border:1px solid rgba(2,139,255,0.5); box-shadow:0px 0px 3px 0px rgba(2, 139, 255, 0.4); outline-color:rgba(2, 139, 255, 0.4);} /* turn off button styling on iphone */ input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox {-webkit-appearance: none; border-radius: 0; } /* COMMON ISSUES */ input[type=submit], input[type=button] {} input[type=submit]:hover, input[type=button]:hover {} .AdminButtons{opacity:0} .AdminButtons:hover{transition: opacity 1s ease; opacity:1} /* ================================================================================ MAIN LAYOUT ================================================================================ */ .ControlPanel { } #Wrapper { margin:0px auto; min-height:100%; background-color:#ffffff; text-align:left;} .InnerWrapper { margin:0px auto; padding: 0 20px; max-width:1100px; position:relative; -webkit-box-sizing:border-box; box-sizing:border-box;} .FlexWrapper{ display: -webkit-flex; display: flex; -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap;} /* HEADER SECTION */ #Header {background-color:#c7d8e9;} #Logo {z-index:20; position:relative;} /* SEARCH */ .ZoekenKnop{float:right; font-family: "Ionicons"; font-size:21px; font-weight:700; vertical-align:middle; background-color:#e11a32; color:#FFF !important; padding:0px 6px; border-radius:5px !important; border-color:transparent !important; line-height:1.3;} #Search {text-align:right; float:right; } #Search .SkinObject{font-family: "Ionicons"; color:#FFF; font-size:16px; font-weight:700px; margin-left:10px;} #Search .NormalTextBox { -webkit-appearance:none; height:15px; border-color:transparent;} #Search .NormalTextBox:focus { outline:none} #Search .searchSkinObjectPreview, #Search .searchInputContainer a.dnnSearchBoxClearText {display:none !important; } #Search .NormalTextBox::-webkit-input-placeholder { color:#444;} #Search .NormalTextBox:-moz-placeholder { color:#444;} #Search .NormalTextBox::-moz-placeholder {color:#444; } #Search .NormalTextBox:-ms-input-placeholder {color:#444; } #Search .NormalTextBox::-ms-input-placeholder { color:#444; } #ZoekVeld{display:none; margin-top:10px; background-color:#e02035; padding:8px; border-radius:5px; height:24px;} /*BUTTONS*/ .AdminButtons{position:absolute; z-index:20; background: #e01932; height:26px; right:0; padding:0px 8px; border-radius:0 0 5px 5px;} .AdminButtons a{color:#FFF;} /* LOGIN */ #Login{display:inline-block; vertical-align:middle; float:right; font-weight:700;} #Login ul{margin:0;} #Login ul li{display:inline-block; /*padding-left:10px;*/} /* OUDERPORTAAL LINK */ #OuderportaalLink {float:right; font-weight:700; display:none;} /* MENU SECTION */ #Menu { position:relative; background:transparant; width:97%;} .MenuHeader{margin:60px 0px 20px 0px; font-size:25px; font-weight:700; font-style:italic; color:#e85153;} .Home .MenuHeader{display:none;} .MenuSearch{padding-top:36px; z-index:20; position:relative; } /* BREADCRUMB SECTION */ .Home #Breadcrumb{display:none;} #Breadcrumb {color:#e85153 !important; font-size:12px; font-weight:700; font-style:italic; margin-bottom:44px;} #Breadcrumb .BreadcrumbContainer {} #Breadcrumb .InnerWrapper{padding-left:0px;} /* PANES SECTION */ #Content {min-height: 500px; } #Content .Container { margin-bottom:40px;} .one-half, .one-third, .two-third, .one-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth { float:left; margin-right:4%; -webkit-box-sizing:border-box; box-sizing:border-box; } .one-half.last, .one-third.last, .two-third.last, .one-fourth.last, .three-fourth.last, .one-fifth.last, .two-fifth.last, .three-fifth.last, .four-fifth.last, .one-sixth.last, .five-sixth.last { margin-right:0;} .one-half { width:48%;} .one-third { width:30.66%;} .two-third { width:65.33%;} .one-fourth { width:22%;} .three-fourth { width:74%;} .one-fifth {width:16.8%} .two-fifth { width:37.6} .three-fifth { width:58.4%} .four-fifth { width:79.2%} .one-sixth {width:13.33%} .five-sixth {width:82.66%} .ContentRow{min-height:323px;} #ScholenWrapper{display:none;} .Home .ContentRow{background:#f7f7f7; padding-top:40px;} .Home .SidePane{width:22%;} .Home .Contentpane, .Home .RightWidePane{width:74%;} .Home .ContentRow2 .RightWidePane{float:left;} .Home .ContentRow2 {min-height:448px;} .Home .ContentRow2 .LeftNarrowPane { display: inline-block; float: left; } .Home .ContentRow2 .RightWidePane .Container{margin-bottom:0px !important;} .Home .ContentRow2 .LeftNarrowPane{padding-top:30px;} .SidePane{margin-bottom:72px;} /* FOOTER SECTION */ #Footer { background-color:#e85153; min-height:148px; color:#FFF; font-size:14px; padding-top:52px; background: #e4032e; /* Old browsers */ background: -moz-linear-gradient(left, #e4032e 0%, #482974 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #e4032e 0%,#482974 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #e4032e 0%,#482974 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } #Footer A:link {color:#FFF; font-size:16px; } #Footer A:visited {color:#FFF; font-size:16px; } #Footer A:hover {color:#FFF; font-size:16px; } #Footer A:active {color:#FFF; font-size:16px; } #Footer #Logo2{width:22%} #Footer .FooterPane{padding:20px 0px; width:74%;} #Footer .FooterTel:before,#Footer .FooterMail:before{margin-right:10px; font-size:21px;} #Footer .FooterTel:before{content:"\f2ac"; font-family: "Ionicons";} #Footer .FooterMail:before{content: "\f322"; font-family: "Ionicons";} #Footer .FooterContact{line-height:2.4;} /*SocialMedia*/ .SocialMediaIcons {padding:10px 0;} .SocialMediaIcons a {font-family: "Ionicons"; margin:0 10px 0 0; font-size:32px; line-height:1; display:inline-block; vertical-align:top; } .SocialMediaIcons a:hover { text-decoration:none} /* ================================================================================ MENU'S ================================================================================ */ /* =================== RADMENU =================== */ /* Root Items */ .RadMenu_MainMenu { z-index:910 !important; float:none !important;} .RadMenu_MainMenu .rmRootGroup { background-color:transparent !important; border-width:0 !important; float:right !important;} #Menu { position:relative; z-index:960; isolation:isolate; padding:0; } .DesktopMenu .RadMenu_MainMenu .rmHorizontal{white-space: nowrap; position:relative; display: flex;} .DesktopMenu .RadMenu_MainMenu ul, .DesktopMenu .RadMenu_MainMenu li { margin:0px; padding:0px; list-style:none;} /* !!!!!!!!!! Fake RadMenu */ /* --ROOT-- */ .DesktopMenu .rmHorizontal .rmSlide {display:block !important; box-sizing:border-box; z-index:111; top:100%; left:0; overflow:hidden; height:0; position: absolute; } .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmLast > .rmSlide {left:auto; right:0} .DesktopMenu .rmHorizontal .rmGroup {opacity:0; transition:opacity 0.3s ease, transform 0.3s ease; transform:translate(0,-10px); } .DesktopMenu .rmHorizontal .rmItem {margin: 0px; padding: 0px; position: relative; clear: none; } .DesktopMenu .rmHorizontal .rmItem .rmLink { cursor: pointer; text-decoration: none; display:block; margin: 0px; padding: 0px; } .DesktopMenu .rmHorizontal .rmItem .rmLink .rmText{font-family: 'Asap', sans-serif; font-weight:700; text-transform:uppercase; margin:0px; padding:0 10px; font-size:16px; line-height:26px; height:26px; display:block; white-space:normal; color:#e01932; background:#FFF; border-radius:5px; margin-right:16px;} #Body .DesktopMenu .rmHorizontal > .rmItem:nth-child(1) > .rmLink > .rmText{background:url(images/menu_home.png) transparent no-repeat left center!important; } .DesktopMenu .rmHorizontal > .rmItem:nth-child(1) .rmLink {background: #E02035; margin-right:10px; border-radius:6px;} #Body .DesktopMenu .rmHorizontal > .rmItem:nth-child(1) > .rmLink, #Body .DesktopMenu .rmHorizontal > .rmItem:nth-child(1) > .rmLink > .rmText{color:transparent; width:29px; font-size:1px;} /*first,last,only*/ .DesktopMenu .rmHorizontal .rmItem.rmFirst{} .DesktopMenu .rmHorizontal .rmItem.rmLast {} .DesktopMenu .rmHorizontal .rmItem.rmOnly {} /*expanded,hover,selected,breadcrumb*/ .DesktopMenu .rmHorizontal.rmRootGroup .rmItem:has(.rmSlide:hover) > .rmLink > .rmText {} .DesktopMenu .rmHorizontal.rmRootGroup .rmItem:hover > .rmLink .rmText {} .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmSelected > .rmLink > .rmText { } .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmBreadcrumb > .rmLink > .rmText {} /*--SUB--*/ .DesktopMenu .rmHorizontal .rmLevel0 .rmGroup {transform:translate(-20px, 0px); } .DesktopMenu .rmHorizontal .rmItem:hover > .rmSlide { overflow:visible; height:auto; transform:translate(0px, 0px); padding:0px; border-radius:15px;} .DesktopMenu .rmHorizontal .rmItem:hover > .rmSlide > .rmGroup {opacity:1; transform:translate(0px, 0px);} .DesktopMenu .rmHorizontal .rmSlide .rmItem:hover .rmSlide {left:100%; top:0;} .DesktopMenu .rmHorizontal .rmGroup .rmItem {width:100%; margin:0; display:block; width:100%;} .DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink {margin:0; padding:0; width:100%; display:block;} .DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink .rmText{ margin:0px; padding:0 10px; line-height:30px; height:30px; font-size:14px; display:block; white-space:nowrap; color:#FFF; background-color:#e85153; border-radius:0px; display:block; width:100%;} /*first,last,only*/ .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmFirst {} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmFirst > .rmLink > .rmText{border-radius:5px 5px 0 0; margin-top:10px;} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmLast > .rmLink > .rmText{border-radius:0 0 5px 5px;} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmOnly > .rmLink > .rmText{border-radius:5px 5px 5px 5px;} /*expanded,hover,selected,breadcrumb*/ .DesktopMenu .rmHorizontal .rmGroup .rmItem:has(.rmSlide:hover) > .rmLink > .rmText {} .DesktopMenu .rmHorizontal .rmGroup .rmItem:hover > .rmLink .rmText {} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmSelected > .rmLink > .rmText {} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmBreadcrumb > .rmLink > .rmText {} /* !!!!!!!!!! Fake Panelbar / submenu */ .DesktopMenu ul.rmRootGroup.rmVertical {width:100%; position: relative; z-index: 100;} .DesktopMenu .rmVertical .rmSlide {position:static} .DesktopMenu .rmVertical .rmGroup{transform:translateY(0px); transform:translateX(0px);} .DesktopMenu .RadMenu ul.rmRootGroup{ background-color:transparent; border:0;} .DesktopMenu .rmVertical .rmItem {padding:0px 0} .DesktopMenu .rmVertical .rmItem .rmLink .rmText{ margin:0px; padding:5px; display:block; font-size:16px; font-weight:bold; white-space:normal; color:#646567; text-transform:none; height:auto; line-height:auto;} .DesktopMenu .rmVertical .rmItem .rmLink .rmText:before{ content:"\00BB"; margin-right:10px; } .DesktopMenu .rmVertical .rmSlide {display:none !important} .DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmSlide {display:block !important; height:auto; } .DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmSlide > .rmGroup {opacity:1} /*sub*/ .DesktopMenu .rmVertical .rmSlide .rmItem {padding-left:20px;} /*expanded,hover,selected,breadcrumb */ .DesktopMenu .rmVertical .rmItem .rmLink:hover { text-decoration:none !important} .DesktopMenu .rmVertical .rmItem:has(.rmSlide:hover) > .rmLink > .rmText { } .DesktopMenu .rmVertical .rmItem:hover > .rmLink > .rmText { } .DesktopMenu .rmVertical .rmItem .rmSelected > .rmLink > .rmText { } .DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmLink > .rmText {} /* ================================================================================ MOBILE MENU ================================================================================ */ .MobileMenuTrigger {position:absolute; right:0px; top:-10px; background:#e01932; border-radius:5px; z-index:20; font-size:50px; padding:0px 5px; font-family: "Ionicons"; line-height:50px; cursor:pointer; color:#fff; display:none; float: right; margin: 0px 0px 0 0; } .MobileMenuTrigger.active, .MobileMenuTrigger:hover { color: #fff; } #MobileMenu.active { display:block} #MobileMenu {position:relative; z-index:20; display: none; margin: 0; padding: 20px 0; width: 100%; clear:both; font-size: 16px; font-weight: 700;} #MobileMenu * {-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} #MobiNav {z-index:20px; margin:0; text-align:left; display:none; padding:0; } #MobiNav ul {list-style:none; margin:0; padding:0 0 0 20px;} #MobiNav li {list-style:none; margin:0; padding:0 0 0 10px;} #MobiNav .item { min-height:40px; line-height:40px; border-bottom:1px solid #f0f0f0; position:relative; } #MobiNav .item a {color:#FFF !important; display:block; width:calc(100% - 80px);} #MobiNav .item a:hover, #MobiNav .item.selected > a { text-decoration:none; color:#fff !important} #MobiNav .item.haschild:after { position:absolute; top:0px; right:0px; margin:5px 4px 0 0; height:30px; width:30px; display:block; font-size:32px; line-height:0.75; color:#fff !important; text-align:center; cursor:pointer; transition:all .12s ease-in-out; content:"+";} #MobiNav .item.haschild:hover:after { background-color:#274052;cursor:pointer;} #MobiNav .item.haschild.active:after { content:"-";cursor:pointer;} #MobiNav .item .subLevel {display:none;} #MobiNav .item.haschild.active > .subLevel {display:block;} #MobiNav .subLevel .item.first {border-top:1px solid #f0f0f0;} #MobiNav .item.last {border-bottom:0;} /* ================================================================================ SCROLL 2 TOP ================================================================================ */ #back-to-top, .touch-device #back-to-top:hover { background-color:#ccc; background-color:rgba(177, 177, 177, .7); bottom:10px; display:none; height:45px; position:fixed; right:10px; text-shadow:none; transition:all .2s ease; width:45px; z-index:980; line-height:45px; text-align:center; font-family: "Ionicons"; font-size:28px;} #back-to-top:hover {background-color:#000; text-decoration:none;} /* ================================================================================ AGENDA ================================================================================ */ /* CALENDAR MAIN */ #Content .ThemeDefault .EventTitle{text-transform:uppercase; color:#fff; height:auto; background-color:#444;} #Content td.EventNextPrev + td{text-shadow:none; color:#fff; font-size: 24px; padding:20px 0px; letter-spacing:1px;} #Content td.EventNextPrev{text-shadow:none; color:#fff;} #Content td.EventNextPrev a:before{content:"\f3cf"; font-family:"Ionicons"; font-size: 13px; vertical-align: middle; padding-right: 10px;} #Content td.EventNextPrev ~ td.EventNextPrev{text-shadow:none; color:#fff;} #Content td.EventNextPrev ~ td.EventNextPrev a:before{content:"";} #Content td.EventNextPrev ~ td.EventNextPrev a:after{content:"\f3d1"; font-family:"Ionicons"; font-size: 13px; vertical-align: middle; padding-left: 10px;} #Content .EventNextPrev a:link, #Content .EventNextPrev a:visited, #Content .EventNextPrev a:active{color:#fff !important; font-size:18px;} #Content .ThemeDefault .EventTitle td{vertical-align:middle;} #Content .ThemeDefault .EventDayHeader{font-size: 14px; padding: 10px 0px; background-color:#999;} #Content .ThemeDefault .EventDay{background-color:#fff; color:#444; border: 1px solid #e6e6e6; font-size:14px;} #Content .ThemeDefault .EventWeekendDay{background-color:#fff;} #Content .ThemeDefault .EventOtherMonthDay{background-color:#eee;} #Content .ThemeDefault .EventDay .EventDayScroll > div > a{background-color:#444; color:#fff; border-radius: 5px; padding:0px 17px 0px 8px; font-size: 12px;} #Content .EventNextPrev a:link, #Content .EventNextPrev a:visited, .EventNextPrev a:active {color:#ccc;} #Content .ThemeDefault .EventTodayDay{background-color:#fff} #Content .DetailEvent{} #Content .DetailEvent .Head, #Content .DetailEvent .SubHead{} #Content .DetailEvent a[Title="Printen"]{display:none;} /* =========== NIEUWSBRIEVEN ============== */ .NewsletterSubscription { padding-top: 20px;} .NewsletterSubscription .SubScriptionTitle { padding: 10px 0;} .NewsletterSubscription .SubScriptionInput { font-family: inherit; } .NewsletterSubscription .SubScriptionInput input, .NewsletterSubscription .SubScriptionInput select { width: 90%; max-width: 300px; font-family: inherit; padding: 0px 10px; height: 32px; line-height: 32px; border: 1px solid #ccc; -webkit-box-sizing: border-box; box-sizing: border-box; } .NewsletterSubscription .SubScriptionInput select {} .NewsletterSubscription .SubscriptionActions { padding: 20px 0 0 0; } .NewsletterSubscription .SubscriptionActions .SubscriptionButton { display: inline-block; position: relative; margin: 5px 20px 5px 0; padding: 0px 5px; color: #ffffff; background-color: #e8b52d; text-decoration: none; } /* ================================================================================ PUBLICATIE MODULE ================================================================================ */ /* ARTICLE LIST */ .pubArticleList {} .pubArticleList h1 {} .pubArticleList .pubControls { padding:10px 0px; display:none;} .pubArticleList {width: 100%;} .pubArticleList .pubItem {} .pubArticleList .pubItem._alt {} .pubArticleList .pubItem .pubThumbnail {padding:10px 0px; } .pubArticleList .pubItem .pubThumbnail .pubLink {border:2px solid #fff; outline: 1px solid #ddd; margin-right:10px; width:100px; height:75px; overflow:hidden; display:inline-block; zoom: 1; *display: inline;} .pubArticleList .pubItem .pubContent {padding:10px 0px; border-bottom:2px dotted #ddd;} .pubArticleList .pubItem .pubContent .pubTitle{display:block; font-size: 14px; font-weight:bold;} .pubArticleList .pubItem .pubContent .pubSummary {display:block;} .pubArticleList .pubItem .pubContent .pubMetaData {font-size:11px; color:#999; display:none;} /* ARTICLE DETAILS */ .pubArticleDetails {} .pubArticleDetails h1 { } .pubArticleDetails .pubMetaData { color:#999; font-size:11px; margin-bottom:7px;} .pubArticleDetails .pubContent { margin-bottom:10px;} .pubArticleDetails .pubReturnLink { overflow:hidden;} .pubArticleDetails .pubReturnLink a { float:right;} .pubFileBox{} .FileBoxHead{color:#fff; background-color:#444;} .FileBoxBody{background-color:#fff;} .FileBoxUnsortedList .ImageList img, .ThumbnailImg{border-radius:0;} /* ARTICLE VIEWER */ .pubArticleViewer {} .pubArticleViewer .pubItem {} .pubArticleViewer .pubItem .pubTitle {font-size:14px; font-weight:bold;} .pubArticleViewer .pubItem .pubMetaData {font-size:11px; color:#999;} /* COMMENT VIEWER */ .pubCommentViewer .pubItem {} .pubCommentViewer .pubItem .pubMetaData {font-size:11px; color:#999;} /* SIDEBAR */ .pmsb_wrap { } .pmsb_wrap .pm_block {} .pmsb_wrap .pm_block .pm_block_header { } .pmsb_wrap .pm_block ul { } .pmsb_wrap .pm_block ul li { } .pmsb_wrap .pm_block ul li a, .pmsb_wrap .pm_block ul li span { } /* ================================================================================ CONTAINER LAYOUT'S ================================================================================ */ .Container {} .ContainerHeader { } .ContainerContent {} .ContainerFooter {} /* ================================================================================ SCHOLEN OVERZICHT ================================================================================ */ .Home #ScholenWrapper{display:inline-block;} .Home .ScholenWrapper{max-height:202px; padding-top:10px;} .Home #ScholenWrapper .Container{margin-bottom:0px !important;} .Home .SchoolItemWrapper .SchoolItem {float:left; color:#646567; width:100%;} .Home .SchoolItemWrapper .SchoolItem .SchoolNaam{font-weight:bold;} .Home .SchoolItemWrapper .SchoolItem .SchoolNaam, .SchoolItemWrapper .SchoolItem .SchoolPlaats{display:inline;} /* ================================================================================ BANNER ================================================================================ */ /* Banner SECTION */ #BannerPane{background:#efeff0; margin-bottom:44px; padding:20px 0px;} .Home #BannerPane{position:relative; background: url("../mijnplein/images/BannerMijnPlein.png") no-repeat #efeff0; background-size:cover; margin-bottom:0px; width:100%;} .Home .BannerPane:after{position:absolute; top:0; left:0; width:100%; height:100%; z-index:10; content:""; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 57%, rgba(0,0,0,0.38) 76%, rgba(0,0,0,0.38) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 57%,rgba(0,0,0,0.38) 76%,rgba(0,0,0,0.38) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 57%,rgba(0,0,0,0.38) 76%,rgba(0,0,0,0.38) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */} .Home .BannerItems{padding-top:316px; display:flex;width:100%;} .Home .BannerItems:has(.BannerTekstWrapper .BannerKnoppenItem) #dnn_BannerKnoppen{ align-items: flex-end; justify-content: flex-end; display: flex;} .Home .BannerTekstWrapper{position:relative; z-index:20;} .Home .BannerTekstWrapper .BannerTekstTitel h1, .BannerTekstWrapper .BannerTekstInhoud, .BannerTekstWrapper .BannerTekstLink{color:#FFF;} .Home .BannerTekstWrapper .BannerTekstTitel{width:50%; text-shadow: 2px 2px 40px black; margin-bottom:10px;} .Home .BannerTekstWrapper .BannerTekstLink{font-weight:bold; font-style:italic;} .Home .BannerTekstWrapper .BannerTekstInhoud{margin-bottom:20px; line-height:28px;} .Home .BannerKnoppenWrapper{float:right; position:relative; z-index:15;} .Home .BannerKnoppenItem{Background:#e11a32; border-radius:5px; margin-bottom:20px; max-width:234px;} .Home .BannerKnoppenItem .BannerKnopTekst {font-size:25px; padding:17px 20px; color:#FFF; font-weight:700;} .Home .BannerTekstWrapper .BannerTekstButtons{display:flex; gap:40px;} .Home .BannerTekstWrapper .BannerTekstButtons /* ================================================================================ QUICK FIXES ================================================================================ */ /* -- footer fixed to bottom -- */ /* #Wrapper { position: relative;} #Panes { padding-bottom: 100px; } #Footer { position: absolute; width: 100%; height: 100px; bottom: 0px; margin-top: 20px;} */ /* ================================================================================ MEDIA QUERIES ================================================================================ */ @media only screen and (max-width: 1000px) { #Logo {margin-right:2%;width:20%;} .MenuSearch.two-third{width:76%;} } @media only screen and (max-width: 992px) { .Home .BannerTekstWrapper .BannerTekstButtons{flex-direction:column; gap: 20px;} .Home .BannerTekstWrapper .BannerKnoppenItem{margin-bottom:0;} } @media only screen and (max-width: 860px) { .MenuSearch.two-third{width:40%;} .InnerWrapper { max-width:480px} .MobileMenuHeader, .MobileMenuHeader.active ~ #MobiNav {display:block;} .RadMenu, .RadPanelBar {display:none;} .one-half, .one-third, .two-third, .one-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth {float:none; margin-right:0; width:100%;} .FlexWrapper{-webkit-flex-direction: column; flex-direction: column;} .MobileMenuTrigger {display:block;} #MobiNav{display:block; background:#e01932; border-radius:5px;} #BannerPane{padding:20px 0px 54px 0px;} .MenuSearch{padding-top:0px; position: absolute; width: 90%;} #Logo{width:50%;} .ZoekenKnop{float:left;} #Search{float:none; width:80%; margin-top:34px;} #Search .NormalTextBox{width:188px;} #Search .searchInputContainer{float:left;} .searchInputContainer{} .Home .ContentRow{padding-top:50px !important;} .MenuHeader{display:none;} .Home .LeftNarrowPane, .Home .SidePane {width:100%;} .Home .RightWidePane, .Home .Contentpane{width:100%;} .Home #ScholenWrapper{padding-bottom:30px;} #Footer .FooterPane{width:100%;} .BannerPane .InnerWrapper {display:flex; flex-wrap:wrap;} .MenuSearch {position:static; width:50% ; display:flex; flex-direction:column-reverse; align-items: flex-end;} .MobileMenuTrigger { position:static;} .Home .BannerItems {padding-top:100px; flex-direction: column;} .Home .BannerKnoppenWrapper {display:flex} .Home .BannerKnoppenItem{width:234px;} .Home .BannerItems:has(.BannerTekstWrapper .BannerKnoppenItem) #dnn_BannerKnoppen{align-items:flex-start;justify-content:flex-start; margin-top:20px; width:234px;} #dnn_dnnLOGO_imgLogo {transform:translateX(-13px)} #Search {display:none} .ZoekenKnop{transform: translateY(21px);} #MobileMenu {padding:0; margin-top: -20px;} .Home #BannerPane {height:auto} .SidePane {margin-bottom:30px;} .Page23037 .ContentRow > .InnerWrapper {display:flex; flex-direction:column-reverse} } @media only screen and (max-width: 479px) { }