/* New Foodmenu Variables */ :root { --foodmenu-default-color: rgb() !important; --foodmenu-second-color: rgb() !important; } html,body{height:100%; font-size:131.25%;} body{margin:0;padding:0;font-family: 'Lato', sans-serif;font-size:1em !important; line-height:1.7em; color:rgb();letter-spacing:0;overflow-x:hidden;background:rgb(); -webkit-text-size-adjust:none; font-weight:normal;} input,textarea,select{font-family: 'Lato', sans-serif;font-size:1em;} table,td,tr{font-family: 'Lato', sans-serif;font-size:1em;line-height:1.7em;color:rgb(); font-weight:normal;} img,div.figure{border:none; max-width:100%; height:auto;} .cf{float:none;clear:both;} input{-webkit-border-radius:0;} *{-webkit-tap-highlight-color:rgba(59,182,229,0.25);} #panel1 *{-webkit-tap-highlight-color:rgba(59,182,229,0);} *:focus{} .screen-reader-only { position: absolute; height: 1px; width: 1px; clip: rect(1px 1px 1px 1px); // IE 6 and 7 clip: rect(1px,1px,1px,1px); clip-path: polygon(0px 0px, 0px 0px, 0px 0px); -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px); overflow: hidden !important; } .tabbing:-moz-focusring { border-left: 8px solid #F00 !important; outline:0; } .tabbing:focus { border-left: 8px solid #F00 !important; } a,a:link {text-decoration:none;color:rgb(); font-weight:700;} a:visited {text-decoration:underline;color:rgb();} a:hover {text-decoration:underline;color:rgb();} #googleTranslate a{text-decoration:none;} .accessible{display:none;} .accessible:focus{display:inline-block;} .visuallyhidden {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;} h1,h2,h3,h4,h5,h6{margin:0;line-height:normal;font-family: 'Lato', serif; font-weight:normal; } h1{font-size:2.85em; color:rgb(); padding:0 0 0.5em 0;} h2{font-size:2.06em; color:rgb(); padding:0 0 0.5em 0;} h3{font-size:1.7em; color:rgb(); padding:0 0 0.5em 0;} h4{font-size:1.52em; color:rgb(); padding:0 0 0.5em 0;} h5{font-size:1.29em; color:rgb(); padding: 0 0 0.5em 0; } h6{font-size:1.16em; color:rgb(); font-family: 'Lato', sans-serif; font-weight:700;} .middle_when_no_right_side_bar h4,.middle_when_right_side_bar h4, #sidebar_content .right_content h4{ color:rgb(); width:100%; font-size:1em; line-height: 1.7em; display:block; margin:0 0 1.3em; padding:1.6em 0; position:relative; border-top:2px solid rgb();border-bottom:2px solid rgb();} p{font-size:1em; line-height:1.7em; font-weight:normal; color:rgb(); padding: 0 0 2.4em; margin:0;} .main_body_size a{font-weight:700; text-decoration:none; color:rgb();} .main_body_size a:hover{text-decoration:underline;} .main_body_size ol, .main_body_size ul{display:inline-block; margin:0 0 2.4em;overflow:hidden;} hr{border:2px solid rgb(); margin:0 0 1.8em;} section.main{width:100%;float:left;display:inline-block;position:relative; overflow:hidden;} .wrapper{margin:0 auto; padding:0; width:100%; height:100%; position:relative;-webkit-transition: width 0.5s ease; -moz-transition: width 0.5s ease;-ms-transition: width 0.5s ease;-o-transition: width 0.5s ease;transition: width 0.5s ease;} /***HEADER***/ header{width:100%;margin:0 auto;padding:0;position:absolute;top:0; left:0;display:inline-block; float:left; z-index:99;} header.wEmergency{position:relative;} header.fixed{position:fixed;} header.fixed.wEmergency{top:2.5em;} #headerTop,#headerBtm{width:100%;margin:0;padding:0; position:relative; display:inline-block;float:left;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;} header.fixed #headerTop{padding:0;height:60px;} #headerTop{padding:0 0 0.4em;background:rgba(,0.8);} #headerTop.no-banner{background:rgb();} header.fixed #logo{padding-top:0;} #logo{max-width:16.6%; position:relative;padding:1em 0 1em 3.3%; z-index:9; float:left;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;} #logo .imgFixed,#logo .fixedLink{display:none;} header.fixed #logo img{display:none;} header.fixed #logo img.noFixed{display:inline-block;max-height:40px;padding:10px 0; width:auto;} header.fixed #logo img.imgFixed{display:inline-block;max-height:40px;padding:10px 0; width:auto;} header.fixed #logo .fixedLink{display:inline-block;} #logo .logoLink{position:relative;display:inline-block;max-width:100%} #logo .logoName{position:absolute;top:0;left:107%;font-size:2.35em;line-height:0.7em;font-weight:700;color:rgb();width:100%;display:inline-block;} #logo .logoName span{display:inline-block;width:100%;color:rgb();text-transform:uppercase;font-size:0.4em;} header.fixed #logo .logoName.noFixed{height:0;overflow:hidden;padding:0;} #headerBtm{background:rgba(,0.9);width:100%;height:2.5em;} #headerBtm.no-banner{background:rgba(,1);} /*utility navigation*/ #utilityNav{display:inline-block; text-align:right; position:relative; float:right; padding: 0; width:2.5em;z-index:8;} #panel1 #utilityNav{width:90%;float:none;padding:0 5%;display:none} #utilityNav ul{margin:0; padding:0;list-style:none;width:100%;position:relative;background:rgba(,0.9);z-index:4;} #panel1 #utilityNav ul{background:none;height:auto!important;text-align:center;} #utilityNav ul ul{background:none;} #utilityNav ul.utilityIcons:after{content:'';position:absolute; bottom:-15px; left:0;width:0;height:0; border-left: 2.9em solid transparent;border-right: 0px solid transparent;border-top: 15px solid rgba(,0.9);} #panel1 #utilityNav ul.utilityIcons:after{display:none;} #utilityNav ul li{display:inline-block;margin:0.55em 0;line-height:1em;padding: 0;text-align:center; position:relative; cursor:pointer;width:100%;} #utilityNav ul li span.linkName{display:none;} #panel1 #utilityNav ul li{width:auto;display:inline-block; margin:0.75em;} #utilityNav ul li.news_slide{margin:0;} #utilityNav ul li a{font-size: 1.1em;line-height: 1em; padding:0; display:inline-block; color:rgb();} #panel1 #utilityNav ul li a{font-size: 1.5em;} #utilityNav ul li a span.title{display:none;} #utilityNav ul li a:hover,#utilityNav ul li.on a{color:rgb(); text-decoration:none;} #utilityNav ul.searchArea{background:none;height:2.5em;} #panel1 #utilityNav ul.searchArea{position:relative;right:0;} #utilityNav ul.searchArea:after{display:none;} #utilityNav ul.searchArea li#searchButton a{position:relative;z-index:9;} #panel1 #utilityNav ul.searchArea li#searchButton a{position:absolute; right:0.55em;top:0.55em;display:none;} #utilityNav ul.searchArea li#searchButton{margin:0.625em 0;} #panel1 #utilityNav ul.searchArea li#searchButton{width:100%; margin: 0.25em 0;} #utilityNav .search{list-style-type:none;display:none;padding:0; margin:0;float:right; display:none; position:absolute; right:0.35em; top:-0.35em; width:246px;z-index:3;} #panel1 #utilityNav .search{position:relative;display:inline-block;margin:0;padding:0;width:100%;right:auto;top:auto;} #utilityNav .search form{width:100%; margin:0;padding:0;position:relative;} #utilityNav .search form #search-label{display:none;} #utilityNav .search form #q,#utilityNav .search form #q-footer,#utilityNav .search form #q-panel{width:71.1%;padding:0.575em 22.4% 0.575em 6.5%;margin:0;border:none;font-size:0.85em;color:rgb();float:left;font-weight:bold;border:none;background:rgb();} #utilityNav .search form fieldset{padding:0;margin:0;border:0;} #utilityNav .search form label,#utilityNav .search legend{display:none;} ul.translatorArea .translate{color:rgb();background-color:rgba(,0.8);/* display:none; */position:absolute;top:-11px;padding:0.5em 1em;right:100%;transform:translateX(calc(100% + 50px));} ul.translatorArea .translate.active{transform:translateX(0);} #utilityNav ul.translatorArea li .translate a{color:rgb();} ul.translatorArea .translate a span:last-child, ul.translatorArea .goog-te-gadget{color:rgb()!important;} ul.translatorArea .goog-te-gadget:nth-child(2n),ul.translatorArea .goog-te-gadget:nth-child(2n+1){display:none;} ul.translatorArea .goog-te-gadget:first-child{display:inline-block;} ul.translatorArea .goog-te-gadget .goog-te-combo:nth-child(2){display:none;} .utilityLink .svg-icon svg{ width: 21px; height: auto;} .utilityLink .svg-icon svg, .utilityLink .svg-icon svg *{ fill: rgb() !important;} .utilityLink:hover .svg-icon svg, .utilityLink:hover .svg-icon svg *{ fill: rgb() !important;} /*emergency feature*/ #announEmergencyShell,#announEmergency{background-color:rgb(170,0,0) !important; max-width:100% !important;fon} #announEmergencyShell #emergencyLogo{font-family:'Lato',sans-serif;} #announEmergencyShell #emergencyLogo a{font-size:1.25em !important;font-family:'Lato',sans-serif;} #announEmergencyShell #emergencyLogo h2{font-family:'Lato',sans-serif; font-size:1.5em !important;} #announEmergency #emergencyDescription{margin-top:0.5em !important;padding-top:1.2em !important;padding-bottom:0.5em !important; color:rgb();} #announEmergency p{color:rgb();font-family:'Lato',sans-serif; font-size:1em;} #announEmergency #emergencyDescription #emergencyTitle h2, #announEmergency #emergencyDescription #emergencyTitle a{font-size:1.3em!important;} /*search results*/ .gsc-result .gs-title{height:auto!important;} .gsc-control-cse, .gsc-control-cse .gsc-table-result{font-family: 'Lato', sans-serif;!important; font-size:1em!important;} .gsc-control-cse{font-family: 'Lato', sans-serif!important;} form.gsc-search-box,.gsc-control-cse .gs-spelling, .gsc-control-cse .gs-result .gs-title, .gsc-control-cse .gs-result .gs-title *,.gsc-control-cse .gs-result .gs-spelling-original{font-size:1em!important;} /***Footer**/ footer{width:100%;float:left;background:rgb();display:inline-block;position:relative;} #footerTop{width:93.4%;float:left;display:inline-block; background:rgb(); position:relative;padding:2.5em 3.3% 4.75em;overflow:hidden;} #footerBtm{width:93.4%; display:inline-block; float:left; background:rgb();; padding:0.72em 3.3%;position:relative;} #schoolAddress{ margin:0;float:left; display:inline-block;width:100%;} #schoolAddress ul{margin:0; padding:0; width:100%; list-style:none;} #schoolAddress ul li{padding:0;margin:0; color:rgb(); font-size:0.85em; line-height:1.6em; width:100%;} #schoolAddress ul li span{display:inline-block; padding:0 0.125em;} #schoolAddress ul li span.title{padding:0 0.25em 0 0;color:#3bb6e5;} #schoolAddress ul li a{color:rgb(); text-decoration:none;} #schoolAddress ul li a[href^="tel:"]{font-weight:400;} #schoolAddress ul li h2{font-size:1.77em; font-weight:400; padding:0; line-height:1.6em; color:rgb();} #additionalLogo{display:inline-block; float:left; text-align:right;position:absolute;top:2.5em;width:20%; right:3.3%;margin:1em 0;} #additionalLogo img{max-width:100%;display:inline-block; clear:both;} #copyrightLinks{width:100%; float:right; display:inline-block; position:relative;margin-top:1.5em;} #copyrightLinks ul{margin:0; padding:0; width:100%; list-style:none;} #copyrightLinks ul li{padding:0;margin:0; color:rgb(); font-size:0.85em; line-height:1.6em;margin:0 0.5em 0.5em 0} #copyrightLinks ul li a{color:rgb(); text-decoration:none;} #copyrightLinks ul li a:hover{color:rgb();text-decoration:none;} #footerNav{width:70%;display:inline-block;float:left;} #footerNav ul{margin:0;padding:0;list-style:none;} #footerNav ul li{display:inline-block;font-size:1em;color:rgb();} #footerNav ul li a{color:rgb();} #footerNav ul li a:hover{color:rgb();text-decoration:none;} #footerNav ul li:last-child span{display:none;} #footerNav ul li span{padding:0 0.5em;display:inline-block;color:#d6d6d6;} #CMS4SchoolsLogo{float:right; max-width:22%;} /***INSIDE PAGES***/ /*banner*/ #banner{margin:0px auto 0px auto;width:100%;overflow:hidden;position:relative; display:inline-block;z-index:-1px;clear:both;padding:0;webkit-transition: width 0.5s ease; -moz-transition: width 0.5s ease;-ms-transition: width 0.5s ease;-o-transition: width 0.5s ease;transition: width 0.5s ease; padding-top:8em; background:rgb(); height:auto;} #banner.landing-page{width:100%;padding:0;float:left;} #banner.wEmergency{padding:0;} #banner img{width:100%!important;height:auto;} #banner .imageDip{width:100%;height:100%;background-position:center top;background-repeat:no-repeat; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;webkit-transition: width 0.5s ease; -moz-transition: background 0.5s ease;-ms-transition: background 0.5s ease;-o-transition: background 0.5s ease;transition: background 0.5s ease;} #banner.landing-page .pageTitle{max-width:80%; display:inline-block; position:relative; background:rgba(,0.9); padding:0.75em 1em 0.75em 3.3%; text-align:center; z-index:1;} #banner.landing-page .pageTitle{position:absolute; left:0; bottom:5.75em; border:0;color:rgb();} #banner.landing-page .pageTitle:after{content:'';position:absolute; top:0; right:-16px;width:0;height:0; border-top: 0px solid transparent; border-bottom:90px solid transparent; border-left:17px solid rgba(,0.9);} .pageTitle h1{font-size:2.85em; line-height:1em; color:rgb(); padding:0; font-weight:400;letter-spacing:1px; } .main_body_size h1#pageTitle,.titletext{font-size:2.5em;color:rgb();line-height:1.25em;padding:0 0 0.5em;} .main_body_size .titletext{width:100%;padding:1.5em 3.8% 0;} #banner.landing-page .bannerOverlay{position:absolute;width:100%;display:inline-block;height:5em;z-index:1;left:0;bottom:-3px;} #banner.landing-page .bannerOverlay .left{position:absolute;width:25%;height:100%;display:inline-block;background:url('www.deerfield.k12.wi.us/custom/images/general/interior/asset_tri_left.png') 0 0 no-repeat;background-size:100% 100%;left:0;} #banner.landing-page .bannerOverlay .mid{position:absolute;width:75.05%;height:100%;display:inline-block;background:url('www.deerfield.k12.wi.us/custom/images/general/interior/asset_tri_mid.png') 0 0 no-repeat;background-size:66.77% 100%;left:24.95%;} #banner.landing-page .bannerOverlay.twoLeft .mid{background:url('www.deerfield.k12.wi.us/custom/images/general/interior/asset_tri_mid_no_right.png') 0 0 no-repeat;background-size:100% 100%;} #banner.landing-page .bannerOverlay.twoRight .mid{background:url('www.deerfield.k12.wi.us/custom/images/general/interior/asset_tri_mid_no_left.png') 0 0 no-repeat;background-size:66.77% 100%;width:100%;left:0;} #banner.landing-page .bannerOverlay.full .mid{background:url('www.deerfield.k12.wi.us/custom/images/general/interior/asset_tri_mid_full.png') 0 0 no-repeat;background-size:100% 100%;width:100%;left:0;} #banner.landing-page .bannerOverlay .right{position:absolute;width:33.25%;height:100%;display:inline-block;background:url('www.deerfield.k12.wi.us/custom/images/general/interior/asset_tri_right.png') 0 0 no-repeat;background-size:100% 100%;right:0;} /*main column */ section.inside{padding:0; background:rgb();} .leftNav{float:left;overflow:hidden; width:25%;} #sidebar{width:73.25%; padding:3.25em 13.3%; display:inline-block; background:rgb(); margin:0;position:relative;} #sidebar h2{font-weight:normal;font-size:1.4em;line-height:1.25em;padding-bottom:1.86em;color:rgb();} .middleColumn{float:right;overflow:hidden; width:75%;position:relative;z-index:2;} .main_body_size{width:100%;margin:0;padding:0;position:relative;z-index:1;overflow:hidden;} .middle_when_right_side_bar, .middle_when_no_right_side_bar{height:auto;padding:2.5em 6% 2.5em 3.8%!important; width:100%; box-sizing:border-box;display:inline-block;float:left;z-index:2;position:relative;} .middle_when_right_side_bar{width: 66.7%; padding:2.5em 3.8% 2.5em!important;} .no-left .middleColumn{width:100%;} .no-left .middle_when_no_right_side_bar{padding:2.5em 6% 2.5em!important; width:100%;} .no-left .middle_when_right_side_bar{padding: 2.5em 3.8% 2.5em 3.8%!important; width:66.7%;} .detail_padding p:last-child{padding-bottom:0;} .detail_padding{padding:0 0 1.5em;overflow:hidden;} .figure{border:none;margin:-0.21em 0.71em 0.35em -0.35em;} .detail_padding{display:inline-block; width:100%;} .detail_padding .figure{max-width:95%;width:auto!important; height:auto; display:inline-block;} .detail_padding{display:inline-block;} .detail_padding .figure{max-width:95%; height:auto; display:inline-block;} .middleColumn table,.middleColumn tbody,.middleColumn td,.middleColumn tr{display:block; max-width:100%;} .middleColumn .detail_padding table,.middleColumn .right_per_detail table{display:table;} .middleColumn .detail_padding tbody,.middleColumn .right_per_detail tbody{display:table-row-group;} .middleColumn .detail_padding td,.middleColumn .right_per_detail td{display:table-cell;} .middleColumn .detail_padding tr,.middleColumn .right_per_detail tr{display:table-row;} /*right sidebar*/ #sidebar_content{width:33.3%;height:100%;padding:3.33em 0;margin:0;position:relative;display:inline-block;float:right;z-index:2;background:rgb();color:rgb();} #sidebar_content .right_per_detail{width:65.4%;display:inline-block;padding:0 28% 1em 6.6%;} #sidebar_content .right_content{padding-bottom:1.6em;} #sidebar_content .right_hr_top, #sidebar_content .right_hr_bottom, #sidebar_content .right_hr_bottom hr, #sidebar_content .right_hr_top hr{display:none;} #sidebar_content p, #sidebar_content div, #sidebar_content a, #sidebar_content h3,#sidebar_content .right_content h4,#sidebar_content h2,#sidebar_content h4,#sidebar_content h5,#sidebar_content h6{color:rgb();} #sidebar_content a:hover{color:rgba(,0.8);} #sidebar_content h3{font-size:1.43em;padding:0 0 1.2em;} #sidebar_content .right_content img{max-width:100% !important;} #sidebar_content .right_per_detail p{padding:0 0 1em 0;margin:0;} #sidebar_content .right_per_detail p:last-child{padding-bottom:0;} #sidebar_content .right_per_detail a.right_news_style{padding:0;margin:0;} #sidebar_content iframe{width:100%!important;} #sidebar_content ul.bxslider{margin:0;padding:0;list-style:none;} /*responsive embeds*/ .video-container{position: relative;padding-bottom: 56.25%;padding-top: 30px; height: 0; overflow: hidden;} .video-container iframe,.video-container object,.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} /*translator*/ #sidebar_content .detail_translator .right_content #google_translate_element{overflow:hidden;} #sidebar_content .detail_translator .right_content select{width:310px !important;} #sidebar_content .detail_translator .right_content img{width:auto !important;} /*quick links */ #sidebar_content .detail_quicklinks select{width:100%!important;text-transform:none;height:auto!important;} #sidebar_content .detail_quicklinks input{height:auto!important;} #sidebar_content .detail_quicklinks .right_content div div div a{display:inline-block;width:100%;padding:0.5em 0 ;} /*upcoming events */ #sidebar_content .upcoming_events_slide{width:100%;margin:0;padding:0 0 1.9em;display:inline-block;} #sidebar_content .dateBox{width:100%;margin:0;padding:1.7em 0 0;display:inline-block;font-size:1.14em;line-height:1.6em;font-weight:700;color:rgb();} #sidebar_content .dateBox:first-child{padding:0;} #sidebar_content .dateBox .dayname{display:none;} #sidebar_content .upcoming_events_event{width:100%; padding:0 0 0.5em;} #sidebar_content .upcoming_events_event .upcoming_events_time{color:rgb();font-size:0.85em;line-height:1.25em;width:100%;display:inline-block;} #sidebar_content .upcoming_events_event .upcoming_events_title{width:100%;display:inline-block;} #sidebar_content .upcoming_events_event .upcoming_events_title a{font-size:0.85em;color:rgb();font-weight:400;line-height:1.6em;} #sidebar_content .upcoming_events_event .upcoming_events_title a:hover{color:rgba(,0.7);text-decoration:none;} /*slideshow */ #sidebar_content .detail_rightslideshow .right_content img{max-width:332px!important} #sidebar_content .detail_rightslideshow .right_content p{padding:0.9em 0 0;} /*detail_announcements*/ .detail_announcements2 p{margin:0;padding:0;} #sidebar_content .ann_slide{width:100%;margin:0 0 1.52em; padding:0;} #sidebar_content .detail_announcements2r p{margin:0;padding:0 0 0.75em;overflow:hidden;} #sidebar_content .detail_announcements2r img{max-width:100% !important; padding:0.25em 0;} #sidebar_content .detail_announcements2r h4{font-size:1.14em;color:rgb();margin:0;border:0;padding:0 0 0 0;font-weight:700;text-decoration:none; padding-bottom:0.5em;} #sidebar_content .detail_announcements2r h4 a{color:rgb(); text-decoration:none; font-weight:700;} #sidebar_content .detail_announcements2r h4 a:hover{color:rgba(,0.7) !important;text-decoration:none;} #sidebar_content .detail_announcements2r a{color:rgb();text-decoration:none;} #sidebar_content .detail_announcements2r a:hover{color:rgba(,0.7);text-decoration:underline;} .middle_when_no_right_side_bar .detail_announcements2 h4, .middle_when_right_side_bar .detail_announcements2 h4{border:none;padding:0.5em 0;margin:0;font-size:1.25em;font-weight:bold;} /* calendar links */ table.minical{width:100%;border-spacing:0;border-collapse:collapse;} .minical_wrapper{width:100%;margin:0 auto;} .minical_wrapper table tr td table{margin-bottom:1em;} .minical_wrapper table tr, .minical_wrapper table tr td{vertical-align:middle !important;} .minical_wrapper .headerbg td a{display:block;} .minical_wrapper .headerbg td:first-child, .minical_wrapper .headerbg td:first-child + td + td, .minical_wrapper .headerbg td:first-child + td{width:auto !important;} .minical_wrapper .headerbg td:first-child a,.minical_wrapper .headerbg td:first-child + td + td a{font-size:1.5em; color:rgb();padding:0 0.5em;} .minical_wrapper .headerbg td:first-child a:hover,.minical_wrapper .headerbg td:first-child + td + td a:hover, .minical_wrapper .headerbg td:first-child:hover a,.minical_wrapper .headerbg td:first-child + td + td:hover a span{color:rgb(); text-decoration:none;} .minical_wrapper .headerbg td:first-child a{ text-align:left; float:left;} .minical_wrapper .headerbg, .minical_wrapper .headerbg .headerlink{text-decoration:none;font-weight:400 !important;} .minical_wrapper .headerbg .headertext{color:rgb(); font-weight:700; font-size:1.14em;} .minical_wrapper .headerbg .headertext span{color:rgb(); padding:0 0.5em;} .minical_wrapper .header2bg .header2text{padding:0 0 0.5em;color:rgb();font-weight:700;text-align:center; font-size:0.75em;} .minical_wrapper tr.header2bg td{background-color:transparent;} .minical_wrapper .alternatebg1{background-color:transparent;} .minical_wrapper .alternatebg1, .minical_wrapper .alternatebg2, .minical_wrapper td.headerbg{padding:0; line-height:2.5em;font-size:0.76em;} .minical_wrapper .detail_minical{padding-bottom:0;} .minical_wrapper .alternatebg1, .minical_wrapper .alternatebg2{color:rgb();} .minical_wrapper a.callink{color:rgb()!important; text-decoration:none!important; font-weight:700!important;} .minical_wrapper a.callink:hover{color:rgb() !important;} .minical_wrapper td.headerbg{background:rgb();color:rgb(); border-radius:50%; -webkit-border-radius:50%;} .minical_wrapper td.headerbg .headerlink{color:rgb() !important;text-decoration:none !important;} .minical_wrapper td.headerbg .headerlink:hover{text-decoration:underline !important;} .detail_minical .right_content h4{color:rgb();padding:0.5em 0 0.75em;margin:0;font-weight:normal;font-size:1.33em;} #sidebar_content .detail_minical ul{list-style-type:none;padding:0 0 0.21em 0;margin:0; width:100%;} #sidebar_content .detail_minical ul li{padding:0 0.36em 0.75em 0.36em;margin:0;} #sidebar_content .detail_minical ul li:first-child{padding-top:0;} #sidebar_content .detail_minical ul li:last-child{padding-bottom:0;background:none;} /*detail Calendar */ .middle_when_no_right_side_bar .detail_calendar{margin-left:0;display:block;} .middle_when_no_right_side_bar .detail_calendar form div{float:right;padding:0;overflow:hidden;top:0;position:relative;} .detail_calendar form div table tr td, .detail_calendar form table table tr td{font-weight:500;color:#000000; font-size:1.33em;text-transform:capitalize;} .detail_calendar form select{background: #fdfdfd; background-image: -webkit-linear-gradient(top, #fdfdfd, #ffffff); background-image: -moz-linear-gradient(top, #fdfdfd, #ffffff); background-image: -ms-linear-gradient(top, #fdfdfd, #ffffff); background-image: -o-linear-gradient(top, #fdfdfd, #ffffff); background-image: linear-gradient(to bottom, #fdfdfd, #ffffff); font-size:0.9em; padding:0;margin:0 10px 0 0; text-decoration:none;} .detail_calendar div table, .detail_member_directory table{border:none;color:rgb();} .detail_calendar div table table{border:none;} .detail_calendar div div table table{border:none;} .detail_calendar table td, .detail_member_directory table td{padding-right:0;} .detail_calendar .headerbg, .detail_member_directory .headerbg{background-color:rgb();line-height:3.3em;} .detail_member_directory .headerbg .headertext{color:rgb();} .detail_calendar .headerbg a.headerlink{color:rgb();font-size:1.8em;text-transform:capitalize;text-decoration:none;font-weight:400;} .detail_calendar .headerbg a.headerlink span.title{font-size:0.66em; display:table-caption; padding:0 0 0 1em;} .detail_calendar .headerbg td:first-child + td + td a.headerlink span.title{padding:0 1em 0 0;} .detail_calendar div table table tr.headerbg td{vertical-align:middle;} .detail_calendar .headerbg .calBottomBannerShell td:first-child, .detail_calendar .headerbg td:first-child td:first-child{padding-left:1.5%;} .detail_calendar .calBottomBannerShell{background:rgb();} .detail_calendar .headerbg td:first-child + td + td, .detail_calendar .headerbg .calBottomBannerShell td:first-child + td + td{padding-right:1.5%;} .detail_calendar .borderstyle{border:none;} .detail_calendar .headerbg .calBottomBannerShell td{padding:1em 0!important; vertical-align:middle;} .detail_calendar .headerbg a.headerlink:hover{color:rgba(,0.8) !important;} .detail_calendar .headerbg a.headerlink:hover span.icon{color:rgba(,0.8)!important;} .detail_calendar .headerbg .headertext{color:rgb();font-weight:normal;font-size:1.33em;font-weight:400; letter-spacing:1px; padding:0; line-height:3em;text-transform:uppercase;} .detail_calendar a.callink{color:rgb();font-weight:normal;font-size:1.16em !important;line-height:1em;display:inline-block;padding:0; text-decoration:none; } .detail_calendar a.callink:hover{color:rgb() !important; text-decoration:underline;} .today_highlight{background-color:#f0f0f0 !important;font-weight:400;color:rgb()!important;} .today_highlight a.callink{color:rgb() !important;font-weight:400;} .today_highlight a.callink:hover{color:rgb() !important;} .today_highlight table tr td{color:#rgb() !important;} .detail_member_directory table td{padding-right:10px;} /* these override some of the above detail calendar classes */ .detail_calendar div table table{background:transparent;} .detail_calendar div table table table{background:none;margin-bottom:0.7em;} .detail_calendar div table table tr td .headerlink{color:rgb() !important;text-decoration:none;border:none; font-size:0.66em; font-weight:400;} .detail_calendar div table table{border: none;border-collapse:collapse;} .detail_calendar div .headerbg table{margin:0;} .detail_calendar div table table td{border:2px solid rgb();} .detail_calendar div table table tr.headerbg:first-child{border:none; line-height:36px;} .detail_calendar div table table tr.headerbg td, .detail_calendar table.calTopBanner td, .detail_calendar table td.headerbg table{background-color:rgb();margin:0;padding:0;border:none;border-bottom:2px solid #ffffff;} .detail_calendar table.calTopBanner tr td{vertical-align:top;} .detail_calendar div table table tr.headerbg:last-child td{padding:0; background:rgb(); border:none;} .detail_calendar div table table tr.headerbg:last-child td.headertext{display:none;} .detail_calendar table.calTopBannerShell{border-color:rgb() !important;} .detail_calendar div table table tr.header2bg td, .detail_calendar table.calTopBannerShell tr.header2bg td, .detail_calendar table.calListShell tr.header2bg td{height:1.7em;border-top:2px solid #f5f3f3;background-color:rgb();padding:0px;color:rgb();} .detail_calendar div table table tr.header2bg td.header2text{color:rgb();font-weight:400;text-align:left;padding-left:8px;;border:none;text-transform:uppercase;background-color:rgb(); font-size:0.95em;} .detail_calendar div table table td table td{padding:1em 0.7em;margin:0px;border:none; font-size:0.66em;color:#48494f;} .detail_calendar .headerbg .calBottomBannerShell a.headerlink{color:rgb()!important; padding:0 0.88em;} .detail_calendar .headerbg .calBottomBannerShell a.headerlink:hover{color:rgba(,0.8)!important;} .detail_calendar .calYearShell.calInnerShell .headerbg .headertext{padding:0.5em 0;line-height:1.2em;font-size:1.2em;} .detail_calendar form .calDayShell select{font-size:0.8em;width:auto!important;height:auto!important;} .detail_calendar form .calDayShell input{width:auto!important;height:auto!important;font-size:0.8em;} .detail_calendar .calDayShell .headerbg a.headerlink{font-size:1.2em;} .detail_calendar .calDayShell .headerbg a.headerlink span.title{line-height:1.5em;} .detail_calendar .calDayShell .headerbg .headertext{padding:0.4em 0;} .detail_calendar .calDayShell a.callink{font-size:0.9em!important;padding:0.5em 0;} /*calendar list view */ .detail_calendar div table td.headerbg table tr td{border:none !important;} /* Alternating row background colors */ .alternatebg1{background-color:transparent;} .alternatebg2{background-color:transparent;} #content .alternatebg1{background-color:rgba(,0.1)} #content .alternatebg2{background-color:rgba(,0.2);} .footer_top{background-color:transparent;} /*fac list*/ .detail_facultylist tr.headerbg{background-color:rgb() !important;color:rgb();} .detail_facultylist tr.headerbg .headertext, .detail_facultylist tr.headerbg a.headerlink{color:rgb() !important;} .detail_facultylist tr.headerbg a.headerlink:hover{color:rgb() !important;} .detail_facultylist tr.alternatebg1{background-color:rgba(,0.1)!important;} .detail_facultylist tr.alternatebg2{background-color:rgb() !important;} .detail_facultylist td img{max-width:inherit; margin: 0 0.5em 0.5em 0;} .middleColumn .detail_padding.detail_facultylist table.inside_bg td{width:auto!important; float:left;} .detail_facultylist h4{padding:0.25em 0; font-size:1.5em;font-weight:bold;} /*lunch_menu*/ .detail_lunchmenu table tr.headerbg{background:rgb();} .detail_lunchmenu table tr.headerbg .headertext{color:rgb();font-size:1.2em;} .detail_lunchmenu table tr.headerbg a{color:rgb();display:inline-block;padding:0.5em 0;} .detail_lunchmenu table tr.headerbg a:hover{text-decoration:none;color:rgb();} .detail_lunchmenu table tr.headerbg a span.icon{padding:0 0.5em;} .detail_lunchmenu table tr.header2bg{background:rgb();} .detail_lunchmenu table tr.header2bg .header2text{color:rgb();border:none;text-align:left;padding-left:8px;text-transform:uppercase;} /*profiles*/ .detail_profiles table.inside_bg{border:none!important;} .detail_profiles img{min-width:240px;} /*claendar new classes */ /* .calInnerShell{background:rgb();} */ .caltblTools,.caltblCat,.caltblCat td, .caltblTools td{text-align:left !important;margin-left:0px !important;} .caltblTools td:first-child, .caltblCat td:first-child{width:42px;} table.calDayShell .headerbg, table.calYearShell .headerbg{background:rgb() !important;} table.calDayShell .headerbg td table, table.calDayShell .headerbg td table td, table.calYearShell .headerbg td table, table.calYearShell .headerbg td table td, table.calListShell .headerbg td table, table.calListShell .headerbg td table td{border:none !important;background-color:rgb() !important;height:40px !important;} .middle_when_no_right_side_bar table.calDayShell .headerbg td table, .middle_when_right_side_bar table.calDayShell .headerbg td table{width:100% !important;} table.calDayShell, table.calDayShell .caltblDate, table.calDayShell .caltblDate td, table.calYearShell, table.calYearShell .caltblDate, table.calYearShell .caltblDate td, table.calListShell, table.calListShell .caltblDate, table.calListShell .caltblDate td{border:none !important;} /*table.calMonthShell .caltblDate td{padding:0px 0px 9px 0px;}*/ table.calYearShell .header2bg .header2text{color:rgb() !important;background-color:rgb();padding:5px;font-weight:700;} table.calYearShell .header2bg:first-child + .header2bg .header2text{border:none !important;} table.calYearShell .caltblDate div{border:none !important;} table.calListShell .alternatebg2 td, table.calListShell .alternatebg1 td{border:none !important;} table.calListShell .alternatebg1 td{background:rgb() !important;} table.calListShelL .today_highlight, .today_highlight table tr td{border:none !important;display:block;} .detail_calendar div table table .today_highlight td{border:none!important;} /*scholarships*/ .detail_scholarships input[name="keywords"], .detail_scholarships select{width:90%!important;} .detail_scholarships .headerbg{background:rgb();color:rgb();} .detail_scholarships .headertext{color:rgb();} /***HOME PAGE***/ /*slideshow*/ #slideshow{width:100%;float:left;display:inline-block;position:relative;} #slideshow img{width:100%; max-width:100% height:auto;} #slideshowShell{margin:0 auto;width:100%;height:auto;overflow:hidden;left:0px;top:0px;z-index:0;clear:both;padding:0; float:left;} #slideshowShell .main-slider{width:100%;height:auto;display:inline-block;margin:0;padding:0;float:left;} #slideshowShell .slide{width:100%;height:auto;} #slideshowShell .slide img{width:100%;height:auto;} #slideshow .slideOverlay{position:absolute;bottom:0;left:0;width:100%;height:3.9em;z-index:1;background:url('www.deerfield.k12.wi.us/custom/images/homepage/asset_overlay.png');background-size:100% 100%; bottom:-2px;} .schools #slideshow .slideOverlay{background:url('www.deerfield.k12.wi.us/custom/images/homepage/asset_school_overlay.png');background-size:100% 100%; bottom:-2px;} @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {-webkit-transform: translateY(-10px);} 60% {-webkit-transform: translateY(-5px);} } @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);} } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } #slideshowShell .animated { animation-duration: 3s; animation-fill-mode: both; animation-iteration-count: infinite; } .dropArrow{height:60px;width:60px; background:rgb(); text-align:center; position:absolute; bottom:1em; right:calc(50% - 30px); display:inline-block; z-index:3;} .dropArrow span{font-size:26px; line-height:1em;padding:16px 0; display:inline-block; color:rgb();} .dropArrow a{position:absolute; left:0; top:0; width:100%; height:100%;} .dropArrow span.linkName{display:none;} .dropArrow:hover{ color:rgb();} .dropArrow:hover span{color:rgb();} .slideNav{position: absolute;z-index: 3;right: 28%; bottom: 1.2em;display: inline-block;} #banner .slideNav{right:35%;} .slideNav ul{margin:0;padding:0;list-style:none;} .slideNav ul li{margin:0;padding:0;display:inline-block;} .slideNav ul li button{border:none;position:relative;display:inline-block;height:12px;width:12px;background:rgb();color:rgb();margin:0 7px;cursor:pointer;font-size:0;} .slideNav ul li button:hover,.slideNav ul li.slick-active button {background:rgb(); color:rgb();} .slideNav ul li span{display:none;} .schools .slideNav{right:5%;} /*home page content rows general*/ .home-row,.content-section{width:100%; display:inline-block; float:left; position:relative; overflow:hidden;} h3.title{font-family: 'Lato', serif;font-size:2.05em; line-height:1.5em; padding:0; color:rgb(); text-align:left; position:relative; float:left; width:100%;margin:0 0 0.25em 0;} /*row 1*/ #row1{padding:0; background:rgb();} #row1 h1{font-family: 'Lato', serif;font-size:2.05em; line-height:1.5em; padding:0; color:rgb(); text-align:left; position:relative; float:left; width:100%;margin:0 0 0.25em 0;} #row1 .left{padding:0 3.33% 0;margin:3em 0 0;width:68.34%;position:relative;display:inline-block;min-height:400px;} #row1 .left p{line-height:1.75em;} #row1 .right{padding:3em 3.33%;width:18.34%;position:absolute;display:inline-block; right:0; top:0; background:rgb();height:100%;} #row1 .left h2,#row1 .left h4{font-size:1.42em;line-height:1.5em;color:rgb();} #row1 .right h2.title{color:rgb();font-size:1.43em;line-height:1.5em;padding:0;margin:0 0 1.5em;} #row1 .right ul{margin:0;padding:0;list-style:none;float:left;color:rgb(); width:100%;} #row1 .right ul li{display:inline-block;width:100%;position:relative;margin-bottom:1.24em;} #row1 .right ul li a{padding:0.55em 4.2%;width:91.6%;font-size:1em;line-height:1em;color:rgb();text-align:left;background:rgb();-webkit-transition: background 1s ease;-moz-transition: background 1s ease;-ms-transition: background 1s ease;-o-transition: background 1s ease;transition: background 1s ease;display:inline-block;} #row1 .right ul li a:hover{background:rgb();text-decoration:none;} #row1 .right ul li:last-child{margin:0;} .schools #row1{padding:3.05em 3.33% 4.10em;width:93.4%;text-align:center;} .schools #row1 h1{font-size:2.05em;line-height:1.5em;padding-bottom:0.75em;width:100%; text-align:center;} .schools #row1 .itemImg{max-width:220px;} /*row2*/ #row2{padding:0; background:rgb();color:rgb();min-height:35em;} #row2 a{color:rgb(); } #row2 .facebookFeed{font-size:1em;font-family:'Lato',sans-serif;font-weight:400;text-align:center;} #row2 .social-feed{padding:1.5em 3%;width:28%;height:100%;display:inline-block;position:absolute;top:0;left:0;background:rgb();} #row2 .social-feed h3{font-size:1.8em;color:rgb();width:100%;margin-bottom:0.6em;} #row2 .social-feed h3 span{font-size:1.2em;padding-right:0.25em;padding-top:0.75em;} #row2 .feedPosts{width:100%;padding:0;margin:0;display:inline-block;} #row2 .feedPosts .socialItem{wwidth:100%;text-align:left;margin-bottom:1em;} #row2 .feedPosts p{font-size:0.9em;line-height:1.2em;width:100%;color:rgb();padding:0;text-align:left;font-family:'Lato',sans-serif;} #row2 .feedPosts span{font-size:0.7em;line-height:1.2em;width:100%;color:rgb();font-weight:bold;} #row2 .feedPosts span span{font-size:1em;padding:0 0.5em;display:inline-block;width:auto; } #row2 .feedPosts ul{margin:0;padding:0;list-style:none;width:100%;position:relative;} #row2 .feedPosts li{margin:0;padding:0 0 1em;list-style:none;width:100%;position:relative;display:inline-block;} #row2 .feedPosts li .image{width:20%;margin-right:5%;float:left;} #row2 .feedPosts li .image img{width:100%;} #row2 .feedPosts li .text{width:100%;display:inline-block;} #row2 .feedPosts li .text.wImg{width:75%;display:inline-block;} #row2 #fbFeed.feedPosts a{display:block; margin:0.35em 0 0; font-size: 0.9em;} #row2 #fbFeed.feedPosts span{font-size:1em; width:auto;font-weight:normal;} #row2 #fbFeed.feedPosts span.fa{margin-left:0.5em; font-size:0.8em;} #row2 #fbFeed.feedPosts span.fbDetails{font-size:0.7em;width:100%;} #row2 #fbFeed.feedPosts span.fbDetails img{margin-right:0.5em;} #row2 #socialMore{width:100%;display:inline-block;margin-top:1em;} #row2 #socialMore a{font-size:0.9em; line-height:1em;padding:10px 25px;border:4px solid rgb();background:rgb();display:inline-block;color:rgb();-webkit-transition: background 1s ease;-moz-transition: background 1s ease;-ms-transition: background 1s ease;-o-transition: background 1s ease;transition: background 1s ease;} #row2 #socialMore a:hover{background:rgb();color:rgb(); text-decoration:none;} #row2 .itemRow.wSocial{width:66%;display:inline-block;float:right;} #row2 .itemColumn{min-height:17.5em;width:100%;display:inline-block;position:relative;float:left;} #row2 .itemColumn .itemImg{width:66.6%;position:absolute;height:100%;right:0;top:0;background-size:cover;background-position:center center;text-indent:-9999px;} #row2 .itemRow.wSocial .itemColumn .itemImg{width:50%;} #row2 .itemColumn#item2 .itemImg{right:auto;left:0;} #row2 .itemColumn .itemImg:before{content:'';width: 0;height: 0;border-left: 0px solid transparent;border-right: 60px solid transparent;border-top: 60px solid rgb();position:absolute;top:2.85em;left:0;} #row2 .itemColumn#item2 .itemImg:before{right:0;left:auto;border:0;border-left: 60px solid transparent;border-right: 0px solid transparent;border-top: 60px solid rgb();} #row2 .itemColumn .itemText{color:rgb();width:26.8%;padding:2.85em 3.3%;display:inline-block;position:relative;float:left;background:rgb();} #row2 .itemRow.wSocial .itemColumn .itemText{width:43.4%;padding:2em 3.3%;} #row2 .itemColumn#item2 .itemText{float:right;} #row2 .itemColumn .itemText.noImg{width:93.4%;} #row2 .itemColumn .itemText h2.title{color:rgb();font-size:2.06em;line-height:1.5em;width:100%;display:inline-block;float:left;padding:0;margin:0 0 0.7em;font-weight:400;} #row2 .itemColumn .itemText h2.title a{font-weight:400;} #row2 .itemColumn .itemText h2.title a,#row2 .itemColumn .itemText a{color:rgb();} #row2 .itemColumn:hover .itemText h2.title,#row2 .itemColumn:hover .itemText a{color:rgb(); text-decoration:none;} #row2 .itemRow.wSocial .itemColumn .itemText p{font-size:1em;} #row2 .itemColumn .itemText p{color:rgb(); line-height:1.75em;padding:0;} #row2 .itemColumn .itemLink span{display:block;text-indent:-9999px;} #row2 .itemColumn .itemLink{position:absolute;left:0;top:0;width:100%;height:100%;text-indent:-9999px;} /*row3*/ #row3{background:rgb();padding:3.33em 0 1.9em;width:100%;} #row3 .titleSection{width:100%;display:inline-block; position:relative;margin-bottom:2.95em;float:left;} #row3 h2.title{position:relative; float:left;background:rgb();font-size:30px;padding:14px 1.1% 14px 10%;color:rgb();width:auto;max-width:50%;margin:0;height:30px;line-height:30px;} #row3 h2.title:after{content:'';width:0;height:0;border-left: 0px solid transparent;border-right: 30px solid transparent;border-top: 58px solid rgb();position:absolute;right:-29px;top:0;} #row3 .text h2.title{float:none;display:inline-block;height:auto;max-width:85%;margin-left:-7%;} #eventsMore{position:absolute;right:10.5%;top:0;display:inline-block;} #eventsMore ul,#eventsMore ul ul{margin:0;padding:0;list-style:none;} #eventsMore ul li{display:inline-block; display:none;} #eventsMore ul li:first-child{display:inline-block;} #eventsMore ul li a{font-size:1em; line-height:1em;padding:10px 25px;border:4px solid rgb();background:rgb();display:inline-block;color:#000000;-webkit-transition: background 1s ease;-moz-transition: background 1s ease;-ms-transition: background 1s ease;-o-transition: background 1s ease;transition: background 1s ease;} #eventsMore ul li a:hover{background:rgb();color:rgb();text-decoration:none;} #eventsArea{width:100%; display:inline-block; position:relative;width:100%; padding:0;float:left;} #eventsArea .eventsSlider{width:86.8%;margin:0 auto;display:block;} #eventsArea .event{display:block;text-align:center;position:relative;} #eventsArea .event-inner{padding:0 5%;width:90%;position:relative;display:inline-block;} #eventsArea .dateBox{width:90px;margin:0 auto 2em;display:inline-block;position:relative;} #eventsArea .dateBox:after{content:'';width:0;height:0;border-left: 0px solid transparent;border-right: 90px solid transparent;border-top: 15px solid rgb();position:absolute;left:0;bottom:-14px;} #eventsArea .dateBox .month{display:inline-block;background:rgb();color:rgb();font-size:0.9em;line-height:1em;text-transform:uppercase;font-weight:700;padding:3px 0;width:100%;float:left;} #eventsArea .dateBox .day{display:inline-block;background:rgb();color:rgb();font-size:2.86em;line-height:1em;text-transform:uppercase;font-weight:400;padding:15px 0;width:100%;float:left;} #eventsArea .eventBox{width:100%;position:relative;display:inline-block;} #eventsArea .eventBox h3{font-size:1.43em;line-height:1.26em;color:#666666;font-weight:400;} #eventsArea .eventBox h3 a{font-weight:400;color:rgb();padding:0 0 0.433em;} #eventsArea .eventBox:hover h3,#eventsArea .eventBox h3 a:hover{color:rgb();text-decoration:none;} #eventsArea .eventBox h4{font-size:0.85em;line-height:1em;color:rgb();font-weight:700;padding:0 0 0.5em;} #eventsArea .eventBox h4 span{display:inline-block; padding:0 0.5em; color:rgb();} #eventsArea .eventBox div.datetime{font-size:0.85em;line-height:1em;color:rgb();font-weight:700;padding:0 0 0.5em;} #eventsArea .eventBox div.datetime span{display:inline-block; padding:0 0.5em; color:rgb();} #eventsArea .eventBox p{padding:0 0 0.75em;} #eventsArea .eventBox a.eventsLink{display:inline-block;text-indent:-999999px;position:absolute;top:0;left:0;width:100%;height:100%;} #eventsArea .slick-arrow{position:absolute;top:0.4em; left:-3.3%;font-size:2.95em;color:rgb();} #eventsArea .slick-arrow[title="Next Event"]{left:auto; right:-3.3%;} #eventsArea .slick-arrow span.linkName{display:none;} #eventsArea .slick-arrow:hover{text-decoration:none;color:rgb();} #row3 .text{width:94%;padding:1.5em 3%;display:inline-block;margin:0;} #row3 .text.wImage{width:43%;padding:0 3%;display:inline-block;margin:0;} #row3 .graphicArea{width:45%;padding:0 3% 0 0;display:inline-block;margin:0;position:relative;vertical-align:top;} #row3 .graphicArea img{width:100%!important;height:auto;} #row3 .video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px; height: 0; overflow: hidden;} #row3 .video-container iframe,#row3 .video-container object,#row3 .video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} /*row4*/ #row4{width:100%;background:rgb();} #row4 #announceBtm{padding:2.85em 3.3%;width:93.4%;display:inline-block;float:left;position:relative;z-index:4;} #row4 #announceBtm .itemColumn{width:30.7%;display:inline-block;float:left;position:relative;background:rgb();background-size:cover!important;height:20em;z-index:5;} #row4 #announceBtm .itemColumn:before{content:'';height:100%;width:100%;background:rgba(,0.7);position:absolute;left:0;top:0;-webkit-transition: background 1s ease;-moz-transition: background 1s ease;-ms-transition: background 1s ease;-o-transition: background 1s ease;transition: background 1s ease;} #row4 #announceBtm .itemColumn:hover:before{background: transparent;} #row4 #announceBtm .itemColumn:nth-child(2){margin:0 3.95%} #row4 #announceBtm .linkName{display:none;} #row4 .itemColumn .itemTitle {position: absolute;top: 0;left: 0;height: 100%;width: 100%;-webkit-transition: all 1s linear;-moz-transition: all 1s linear;-ms-transition: all 1s linear;-o-transition: all 1s linear;transition: all 1s linear;text-align: center;z-index: 2;} #row4 .itemColumn .itemTitle:before {content: '';display: inline-block;height: 100%;vertical-align: middle;margin-right: -0.25em;} #row4 .itemColumn .itemTitle h3{vertical-align: middle;width: 80%;display: inline-block;margin: 0 10%;font-size:1.7em; line-height:1.25em;font-weight:700;color:rgb();} #row4 .itemColumn:hover .itemTitle{display:none;} #row4 .itemColumn .itemText{position:absolute;bottom:0;left:0;padding:0 25% 0 3.8%;display:inline-block;width:71.2%;background:rgb();height:0; overflow:hidden;-webkit-transition: height 1s ease;-moz-transition: height 1s ease;-ms-transition: height 1s ease;-o-transition: height 1s ease;transition: height 1s ease;font-size:1.33em; line-height:1.2em;z-index:4;color:rgb();font-weight:700;} #row4 .itemColumn:hover .itemText{padding:0.56em 25% 0.56em 3.8%;height:auto;overflow:visible;min-height:2.5em;} #row4 .itemColumn .itemText:before{content:'';width:100%;height:1em;top:-0.9em;left:0;background:url('www.deerfield.k12.wi.us/custom/images/homepage/asset_announce_top.png') 0 0 no-repeat;background-size:100% 100%;position:absolute;z-index:4;} #row4 .itemColumn:hover .itemText:before{display:inline-block;} #row4 .itemColumn .itemText a span{position:absolute;right:3.8%;top:0.27em;font-size:2.4em; line-height:1em;color:rgb();} #row4 .itemColumn .itemText a span:hover{color:rgb();} #row4 .itemColumn .itemText span{position:absolute;right:2%; top:15%;font-size:2.5em;display:inline-block} #row4 *:focus{} #row4 .itemColumn .itemMore{position:absolute;left:0;top:0;width:100%;height:100%;z-index:5;} /* * CSS Styles to overwrite the bxSlider Defaults */ .bx-wrapper .bx-controls-direction{display:none;} .bx-wrapper .bx-viewport{background:none!important;} .bx-wrapper{overflow:visible!important;padding:0!important;} .bx-wrapper .bx-pager{right:-15%!important;} .bx-wrapper .bx-pager.bx-default-pager a{border-radius:0!important;background:rgb()!important;width:11px!important;height:11px!important;margin:0 0 0.85em!important;} .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active{background:rgb()!important;} ul.bxslider ul{width:100%!important;} @media only screen and (max-width:2100px){ .minical_wrapper .headerbg .headertext{font-size:0.9em;} } @media only screen and (max-width:2000px){ #row4 #announceBtm .itemColumn{height:17.5em;} } @media only screen and (max-width:1870px){ html{font-size:125%;} #footerTop{width: calc(96.7% - 2.85em);padding-right:2.85em;} .main_body_size h1#pageTitle{font-size:2.15em;} .minical_wrapper .headerbg .headertext{font-size:0.7em;} #row1 .right h2.title{font-size:1.25em;} #row1 .right ul li a{font-size:0.9em;} } @media only screen and (max-width:1750px){ #row1 h1{font-size:1.65em;} #row2 .itemColumn .itemText h2.title{font-size:1.65em;line-height:1.25em;} #row4 #announceBtm .itemColumn{height:15.5em;} #eventsMore ul li a{font-size:1em;} #eventsArea .eventBox h3{font-size:1.25em;} .minical_wrapper .headerbg .headertext{font-size:0.75em;} } @media only screen and (max-width:1670px){ .minical_wrapper .headerbg .headertext span{display:none;} #row1 .right h2.title{font-size:1.1em;} #row1 .right ul li a{font-size:0.85em;} } @media only screen and (max-width:1500px){ html{font-size:112.5%;} .middle_when_right_side_bar,.no-left .middle_when_right_side_bar{width:60%;} #sidebar_content{width:40%;} #banner.landing-page .bannerOverlay{height:3.9em;} #banner.landing-page .bannerOverlay .mid{background-size:60% 100%;width:75%;left:25%;} #banner.landing-page .bannerOverlay .right{width:40%;} #banner.landing-page .bannerOverlay.twoRight .mid{background-size:60% 100%;} .main_body_size h1#pageTitle{font-size:1.75em;} #banner.landing-page .pageTitle:after{border-bottom: 78px solid transparent;} #row1 .right h2.title{font-size:1.43em;} #row1 .right ul li a{font-size:1em;} #row1 .left{width:53.4%;} #row1 .right{width: calc(36.7% - 2.85em);padding: 3em 2.85em 3em 3.3%;} #slideshow .slideOverlay{background: url('www.deerfield.k12.wi.us/custom/images/homepage/asset_overlay_1500.png');background-size: 100% 100%;height:3.2em;} .slideNav{right:auto;left:2.5%;bottom:2.5em;} #banner .slideNav{right:auto;left:2.5%;} .schools .dropArrow{bottom:0;} #row2 .itemColumn .itemText{width:34.8%;} #row2 .itemColumn .itemImg{width:58.6%;} #row4 #announceBtm .itemColumn{height:12.5em;} } @media only screen and (max-width:1300px){ #logo{max-width:20%;} #row2 .social-feed h3{font-size:1.25em;line-height:0.8em;} #row4 #announceBtm .itemColumn{font-size:0.8em;} } @media only screen and (max-width:1125px){ #row2 .social-feed h3{font-size:1em;} #row1 .right h2.title{font-size:1.25em;} #row1 .right ul li a{font-size:0.9em;} } @media only screen and (max-width:1080px){ .minical_wrapper .headerbg .headertext{font-size:0.8em;} } @media only screen and (max-width:1040px){ #copyrightLinks,#schoolAddress{width:100%;text-align:center;margin:1em 0;} #schoolAddress{width:100%;} #schoolAddress ul li{font-size:1.15em; line-height:2em;} #footerLogo{margin:0;} #footerLogo img{max-width:250px;} #footerTop{width:93.4%;padding:2em 3.3%;} #footerNav{width:100%;text-align:center;margin-bottom:1em;} #additionalLogo{position:relative;top:auto;right:auto; text-align:center;} #banner{padding-top:5em;} #row2 .itemColumn .itemText{width:43.4%;} #row2 .itemColumn .itemImg{width:50%;} } @media only screen and (max-width:1024px){ #headerTop{padding:0.5em 0;} #logo{max-width:20%;padding-top:0.35em;} #headerBtm{height:40px;} #utilityNav{display:none;} #panel1 #utilityNav{display:inline-block!important;} #banner.landing-page .bannerOverlay. left{display:none;} #banner.landing-page .bannerOverlay .mid{background-size:60.05% 100%;width:100%;left:0;} #sidebar_content{width:40%;} #sidebar_content .right_per_detail{width:73.4%; padding: 0 20% 1em 6.6%;} .leftNav{width:0;display:none;} .leftNav.showCat{display:inline-block;width:100%;border-bottom: 1em solid rgb();} .leftNav.showCat h3{display:none;} .middleColumn{width:100%;} .middle_when_right_side_bar,.no-left .middle_when_right_side_bar{width:60%;} .middle_when_right_side_bar{padding:2.5 3.8% 2.5em!important;} .no-left .middle_when_no_right_side_bar,.middle_when_no_right_side_bar{padding:2.5em 3.8% 2.5em!important;} .main_body_size{display:block;} .right_per_detail{margin-bottom:2em; display:inline-block; width:100%; position:relative;} .minical_wrapper .headerbg .headertext span{display:inline-block;} .minical_wrapper .headerbg .headertext{font-size:1em;} #row2 .social-feed{width:94%;position:relative;display:inline-block;height:auto;} #row2 .itemRow.wSocial{width:100%;} #row2{min-height:0;} #row2 .social-feed h3{font-size:1.25em;} #row2 .itemColumn{min-height:0;} #row4 .itemColumn .itemText,#row4 .itemColumn:hover .itemText{display:none;} #row4 #announceBtm .itemColumn:hover:before{content: ''; height: 100%;width: 100%;background: rgba(,0.7);position: absolute;left: 0;top: 0;} #row4 .itemColumn:hover .itemTitle{display:inline-block;} } @media only screen and (max-width:980px){ html{font-size:100%;} .pageTitle h1{font-size:2em;} #banner.landing-page .pageTitle:after {border-bottom: 58px solid transparent;} #slideshow .slideOverlay {background: url('www.deerfield.k12.wi.us/custom/images/homepage/asset_overlay_980_left.png');background-size: 100% 100%;height: 3em;} #divNav{right:3.3%;} #divNav ul li a:hover, #divNav ul li a.on {background: rgb();} .dropArrow{bottom:0;} #row1 .left{width:93.4%;float:left;padding-bottom:4.5em;min-height:0;} #row1 .right{width:93.4%;padding:3em 3.3%;position:relative;float:left;} #row1 .right:before{content:'';position:absolute;top:-2.9em;left:0;display:inline-block;width:100%;height:3em;background: url('www.deerfield.k12.wi.us/custom/images/homepage/asset_overlay_980_right.png');background-size:100% 100%;} #row1 .right h2.title{font-size:1.75em;} #row1 .right ul{width:100%;} #row1 .right ul li a{font-size:1.2em;} #row2 .itemColumn .itemText,#row2 .itemRow.wSocial .itemColumn .itemText{width:93.4%;} #row2 .itemRow.wSocial .itemColumn .itemImg, #row2 .itemColumn .itemImg{width:100%;float:left;display:inlne-block;position:relative;height:25em;} #row2 .itemColumn .itemImg:before{-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);-o-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);top:auto;bottom:0;} #row2 .itemColumn#item2 .itemImg:before{-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-o-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);} #row3 .text.wImage{width:94%;padding:0 3%;display:inline-block;margin:0;} #row3 .graphicArea{width:94%;padding:1em 3% 0;display:inline-block;margin:0;position:relative;vertical-align:top;} } @media only screen and (max-width:900px){ #banner.landing-page .bannerOverlay .mid, #banner.landing-page .bannerOverlay.twoRight .mid{background: url('www.deerfield.k12.wi.us/custom/images/general/interior/asset_tri_mid_no_right.png') 0 0 no-repeat;background-size:100.05% 100%;width:100%;left:0;} #banner.landing-page .bannerOverlay .mid .right{display:none;} #sidebar_content{width:100%;position:relative;height:auto;} #sidebar_content .right_per_detail{width:93.4%; padding:0 3.3%;} .middle_when_right_side_bar,.no-left .middle_when_right_side_bar{width:100%; margin-bottom:2.5em;} #sidebar_content:before{content:'';width:100%;height:2.5em;top:-2.45em;position:absolute;left:0;background: url('www.deerfield.k12.wi.us/custom/images/general/interior/asset_tri_right.png') 0 0 no-repeat;background-size:100.05% 100%;} #sidebar_content table.minical{font-size:140%;} .minical_wrapper .alternatebg1, .minical_wrapper .alternatebg2, .minical_wrapper td.headerbg{line-height:4em;} .bx-wrapper .bx-viewport{width:80%!important;} .bx-wrapper .bx-pager{right:10% !important;font-size:1em!important;} .bx-wrapper .bx-pager.bx-default-pager a{width:15px!important; height:15px!important;} } @media only screen and (max-width:860px){ #banner.landing-page .pageTitle{bottom:3.5em;} } @media only screen and (max-width:780px){ .pageTitle h1{font-size:1.7em;} #banner{padding-top:2.5em;} #banner{min-height:0;} #banner.landing-page .pageTitle:after{border-bottom: 51px solid transparent;} header{position:relative;} #headerBtm{background: rgba(,1);} #logo{max-width:30%;} #row3 h2.title{max-width:100%;width:78.9%;margin-bottom:1.25em} #eventsMore{width:70%;margin:0 15%;display:block; float:left;position:relative;top:auto;right:0;display:inline-block;} #eventsMore ul,#eventsMore ul li{width:100%;} #eventsMore ul li a{width: calc(100% - 50px);text-align:center;} #row4 #announceBtm .itemColumn{font-size:100%;width:100%;height:25em;} #row4 #announceBtm .itemColumn:nth-child(2){margin:2.5em 0;} #row4 .itemColumn .itemTitle h3{font-size:300%;} } @media only screen and (max-width:690px){ #schoolAddress ul li{font-size:0.9em;} #schoolAddress ul li h2{font-size:1.25em;} #footerNav ul li{width:33%; text-align:center; display:inline-block;float:left; font-size:1.2em;margin:0 0 0.5em} #footerNav ul li span{display:none;} #row2 .itemColumn .itemImg{height:16em;} #row4 #announceBtm .itemColumn{font-size:100%;width:100%;height:20em;} #row4 .itemColumn .itemTitle h3{font-size:2.5em;} #sidebar_content table.minical{font-size:130%;} .minical_wrapper .alternatebg1, .minical_wrapper .alternatebg2, .minical_wrapper td.headerbg{line-height:4em;} } @media only screen and (max-width:640px){ #banner.landing-page .bannerOverlay{height:2.5em;} } @media only screen and (max-width:580px){ .detail_calendar .calInnerShell{font-size:85%;} .detail_calendar form{font-size:90%;} } @media only screen and (max-width:540px){ header.fixed #headerTop{height:auto;} header.fixed #logo{text-align:center;padding:0.25em 0 0 3%;} header.fixed #logo img.imgFixed{max-height:10px;} header.fixed.wEmergency{top:4.5em;} header.fixed #logo .logoName.noFixed{display:none;} #logo{width:94%; padding:0.5em 3%;text-align:center;max-width:100%;} #logo img{max-width:50%;float:none;} #logo .logoName{width:100%;text-align:center;position:relative;top:auto;left:auto} .minical_wrapper .alternatebg1, .minical_wrapper .alternatebg2, .minical_wrapper td.headerbg{line-height:3em;} .dropArrow{width:40px;height:40px;right: calc(50% - 20px);} .dropArrow span{padding:8px 0;} } @media only screen and (max-width:525px){ .detail_calendar .calInnerShell{font-size:75%;} .detail_calendar form{font-size:80%;} } @media only screen and (max-width:500px){ .pageTitle h1{font-size:1.2em;} #banner.landing-page .pageTitle:after{border-bottom: 43px solid transparent;} .detail_lunchmenu{font-size:80%;} .detail_lunchmenu .borderstyle{font-size:80%;} } @media only screen and (max-width:480px){ header.fixed{position:relative;} #footerNav ul li{width:50%;} #CMS4SchoolsLogo{max-width:100%;text-align:center;float:none;} #banner.landing-page .pageTitle{bottom:0;width:93.4%;padding:0.75em 3.3%;max-width:100%;background:} #banner.landing-page .pageTitle:after{display:none;} #banner.landing-page .bannerOverlay{display:none;} #row2 .itemColumn .itemImg{height:10em;} #row4 #announceBtm .itemColumn{height:15em;} #row4 .itemColumn .itemTitle h3{font-size:1.5em;} .detail_calendar .calInnerShell{font-size:65%;} .detail_calendar form{font-size:70%;} .calToolsDiv{float:left;} } @media only screen and (max-width:420px){ html{font-size:100%;} .dropArrow{display:none;} #divNav{bottom:-1.125em;} h3.title{font-size:1.75em;line-height:1.25em;} #slideshow .slideOverlay{height:2.7em;} #row1 .right{text-align:center;} #row1 .right:before{height:2.7em;top:-2.6em;} #row4 #announceBtm .itemColumn{height:12em;} .detail_lunchmenu{font-size:70%;} .detail_lunchmenu .borderstyle{font-size:80%;} } @media only screen and (max-width:400px){ .detail_calendar .calInnerShell{font-size:55%;} .detail_calendar form{font-size:60%;} .calToolsDiv{float:left;} .detail_lunchmenu{font-size:55%;} .detail_lunchmenu .borderstyle{font-size:60%;} } @media only screen and (max-width:350px){ .minical_wrapper .alternatebg1, .minical_wrapper .alternatebg2, .minical_wrapper td.headerbg{line-height:2.5em;} .detail_calendar .calInnerShell{font-size:45%;} .detail_calendar form{font-size:50%;} } @media only screen and (max-width:340px){ #logo img{max-width:80%;} #footerNav ul li{width:100%;} #slideshow .slideOverlay{height:2.2em;} } @media only screen and (max-width:290px){ table.calMonthShell{font-size:75%} }