/* Theme Name: SIS-PIK 190319 Theme URI: http://www.sis-pik.com Author: Eddo Agostin Author URI: http://www.eddoagostin.web.id Description: A unique theme for Singapore School Pantai Indah Kapuk. Rel. date 19-03-2019 Version: 1.0 License: GNU General Public License -------------------------------------------------------------- */ /* Reset -------------------------------------------------------------- */ /* W3.CSS 4.10 February 2018 by Jan Egil and Borge Refsnes */ @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800|Righteous|Patua+One|Playfair+Display:400,900&display=swap|Ubuntu:400,400i,700,700i&display=swap|Titillium+Web:600,700|Muli&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap'); @import url('https://fonts.googleapis.com/css?family=Noto+Serif+SC:400,700|Noto+Sans+SC:700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Barlow:100,200,300,400,500,600,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@200;300;400;500;600;700;800;900&display=swap'); @font-face { font-family: 'mirageregular'; src: url('Magenta_BBT-webfont.eot'); src: url('Magenta_BBT-webfont.eot?#iefix') format('embedded-opentype'), url('Magenta_BBT-webfont.woff2') format('woff2'), url('Magenta_BBT-webfont.woff') format('woff'), url('Magenta_BBT-webfont.ttf') format('truetype'), url('Magenta_BBT-webfont.svg#mirageregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: fonttheme2022; src: url(http://bulletin.sis-pik.com/images/vr/fonts/Rajdhani-Medium.woff2); } @font-face { font-family: fonttheme2022; src: url(http://bulletin.sis-pik.com/images/vr/fonts/Rajdhani-Bold.woff2); font-weight: bold; } html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit} /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */ html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} html,body{height:100%;margin:0} .main-fluid { height:100%; } .bodytheme2022 { background-color: #1E356D; } .bodyshowcase2022 { background-color: #00afe1; } .bodyshowcase2023-2024 { background: url(http://bulletin.sis-pik.com/images/showcase2/bg_cs_arts.jpg),#1e2e3f; background-repeat: repeat; background-blend-mode: soft-light; } .bodyshowcase2023-2024V2 { background: url(http://bulletin.sis-pik.com/images/showcase2/bg_cs_arts.jpg),#31283d; background-repeat: repeat; background-blend-mode: soft-light; } .bodyshowcase20th { background:url(http://bulletin.sis-pik.com/images/showcase3/students1b.png), url(http://bulletin.sis-pik.com/images/showcase3/bg1.jpg); background-repeat: no-repeat; background-blend-mode:normal; background-size: cover, cover; background-attachment: scroll, scroll !important; background-position: center 20px, center top; } .bodyshowcase20th-inner { background:url(http://bulletin.sis-pik.com/images/showcase3/students2b.png), url(http://bulletin.sis-pik.com/images/showcase3/bg1.jpg); background-repeat: no-repeat; background-blend-mode:normal; background-size: cover, cover; background-attachment: fixed, fixed !important; background-position: center bottom, center top; } body.homepage2024-2025 { background:url(http://bulletin.sis-pik.com/wp-content/uploads/2024/11/building-new-facade.jpg); background-repeat: no-repeat; background-blend-mode:normal; background-size: cover; background-attachment:fixed; background-position: center center; } /* .bodyshowcase20242025smtr1 { background:url(http://bulletin.sis-pik.com/images/showcase3/students1b.png), url(http://bulletin.sis-pik.com/images/showcase3/bg1.jpg); background-repeat: no-repeat; background-blend-mode:normal; background-size: cover, cover; background-attachment: scroll, scroll !important; background-position: center 20px, center top; } */ /* background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); */ .bodyshowcase20242025smtr1-inner { background:url(http://bulletin.sis-pik.com/wp-content/uploads/2024/08/bg-school-pattern-30.png), linear-gradient(135deg, #22E1FF 0%, #1D8FE1 40%, #625EB1 80%); background-repeat: repeat, repeat; background-blend-mode: screen, normal; background-size: 50vw, auto; background-attachment: fixed !important; background-position: left top, right top; } article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block} audio,canvas,progress,video{display:inline-block} progress{vertical-align:baseline} audio:not([controls]){display:none;height:0} [hidden],template{display:none} a{background-color:transparent;-webkit-text-decoration-skip:objects} a:active,a:hover{outline-width:0} abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted} dfn{font-style:italic} mark{background:#ff0;color:#000} small{font-size:80%} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sub{bottom:-0.25em} sup{top:-0.5em} figure{margin:1em 40px} img{border-style:none} svg:not(:root){overflow:hidden} code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em} hr{box-sizing:content-box;height:0;overflow:visible} button,input,select,textarea{font:inherit;margin:0} optgroup{font-weight:bold} button,input{overflow:visible} button,select{text-transform:none} button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button} button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0} button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText} fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em} legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal} textarea{overflow:auto} [type=checkbox],[type=radio]{padding:0} [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto} [type=search]{-webkit-appearance:textfield;outline-offset:-2px} [type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-input-placeholder{color:inherit;opacity:0.54} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} /* End extract */ html,body{ /*font-family:'Open Sans', sans-serif;*/ font-family: 'Muli', sans-serif; line-height:normal; text-align:justify; } html{overflow-x:hidden} [type=text] { background-color: lightgray; border: thin solid grey; color: #444444; } [type=submit] { background-color: crimson; color: white; border: thin solid maroon; } h1{font-size:33px} h2{font-size:26px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px} .w3-serif{font-family:serif} h1,h2,h3,h4,h5,h6, .chinese h1,.chinese h2,.chinese h3,.chinese h4,.chinese h5,.chinese h6{ font-weight:400; margin:0; text-align:center !important; } .chinese h1,.chinese h2,.chinese h3,.chinese h4,.chinese h5,.chinese h6{ /*font-family: 'Ma Shan Zheng', cursive;*/ font-family: 'Noto Sans SC', sans-serif; } .chinese p, .chinese ul, .chinese table.tbl-chinese, .date-chinese { font-family: 'Noto Serif SC', serif !important; } h1,h2,h3,h4,h5,h6, .chinese h2 span,.chinese h3 span,.chinese h4 span { /*font-family:'Playfair Display', serif;*/ font-family: 'Ubuntu', sans-serif; } .chinese table.tbl-cal, .chinese table.tbl-cal2, .chinese table.tbl-yellow, .chinese table.tbl-green, .chinese table.tbl-blue, .chinese table.tbl-red, .chinese table.tbl-orange, .chinese table.tbl-brown, .chinese table.tbl-purple, .chinese table.tbl-pink { font-family:'Muli', sans-serif; } .w3-wide{letter-spacing:normal;} hr{border:0;border-top:2px dotted #ccc;margin:2em 0 3em 0} .w3-image{max-width:100%;height:auto} img{vertical-align:middle;} a{color:inherit} /* ======================= new lines for templates ====================== */ .header-default {background: url(http://bulletin.sis-pik.com/images/header-default.jpg) no-repeat top left;} .header-CNY {background: url(http://bulletin.sis-pik.com/images/header2-cny-2019.jpg) no-repeat top left;} .header-artsweek {background: url(http://bulletin.sis-pik.com/images/header-artsweek-2019.jpg) no-repeat top left;} .header-jacktarub {background: url(http://bulletin.sis-pik.com/images/header-jacktarub.jpg) no-repeat top left;} .header-ramadan {background: url(http://bulletin.sis-pik.com/images/header-ramadan.jpg) no-repeat top left;} .header-backtoschool {background: url(http://bulletin.sis-pik.com/images/header-backtoschool.jpg) no-repeat top left;} .header-merdeka {background: url(http://bulletin.sis-pik.com/images/header-merdeka.jpg) no-repeat top left;} .header-merdeka-2,.header-merdeka-3 {background: url(http://bulletin.sis-pik.com/images/headerv2-merdeka.jpg) no-repeat top left;} .header-nusantara {background: url(http://bulletin.sis-pik.com/images/header-nusantara.jpg) no-repeat top left;} .header-sispeak {background: url(http://bulletin.sis-pik.com/images/header-sispeak0.jpg) no-repeat top left;} .header-showtell {background: url(http://bulletin.sis-pik.com/images/header-showtell.jpg) no-repeat top left;} .header-endofyear2019 {background: url(http://bulletin.sis-pik.com/images/sispik-snow.gif) no-repeat top left;} .header-CNY2020 {background: url(http://bulletin.sis-pik.com/images/header-CNY2020.jpg) no-repeat top left;} .header-Language2020 {background: url(http://bulletin.sis-pik.com/images/header2-Language2020.jpg) no-repeat top left;} .header-WFH2020 {background: url(http://bulletin.sis-pik.com/images/header2-WFH2020.jpg) no-repeat top left;} .header-general2020 {background: url(http://bulletin.sis-pik.com/images/header-general2020.jpg) no-repeat top left;} .bg-default { background: url(http://bulletin.sis-pik.com/images/bg-sispik1.jpg) no-repeat bottom left; background-size: cover !important; } .bg-batik {background:url(http://bulletin.sis-pik.com/images/background-default.jpg) repeat-y center top; background-size: 100%; } .bg-CNY {background: url(http://bulletin.sis-pik.com/images/bg-cny-2019.jpg) repeat-y top left;} .bg-artsweek {background: url(http://bulletin.sis-pik.com/images/bg-artsweek-2019.jpg) repeat-y top left;} .bg-jacktarub {background: url(http://bulletin.sis-pik.com/images/bg-nocat-jacktarub.jpg) repeat-y top left;} .bg-backtoschool {background: url(http://bulletin.sis-pik.com/images/bg-backtoschool.jpg) repeat-y top left;} .bg-merdeka,.bg-merdeka-2 {background: url(http://bulletin.sis-pik.com/images/bg-sispik1.jpg) no-repeat bottom left; background-size: cover !important;} .bg-merdeka-3, .bg-nusantara, .bg-sispeak, .bg-showtell {background: url(http://bulletin.sis-pik.com/images/bg-student5.jpg) no-repeat center center;background-size: cover !important;} .bg-endofyear2019, .bg-CNY2020, .bg-Language2020,.bg-WFH2020, .bg-general2020 {background: url(http://bulletin.sis-pik.com/images/bg-student-email2.jpg) no-repeat center center; background-size: cover !important;} .footer-default {background: url(http://bulletin.sis-pik.com/images/footer-default.jpg) no-repeat bottom left;} .footer-CNY {background: url(http://bulletin.sis-pik.com/images/footer2-cny-2019.jpg) no-repeat bottom left;} .footer-artsweek {background: url(http://bulletin.sis-pik.com/images/footer-artsweek-2019.jpg) no-repeat bottom left;} .footer-jacktarub {background: url(http://bulletin.sis-pik.com/images/footer2-jacktarub.jpg) no-repeat bottom left;} .footer-ramadan {background: url(http://bulletin.sis-pik.com/images/footer-ramadan.jpg) no-repeat bottom left;} .footer-backtoschool {background: url(http://bulletin.sis-pik.com/images/footer-backtoschool.jpg) no-repeat bottom left;} .footer-merdeka {background: url(http://bulletin.sis-pik.com/images/footer-merdeka.jpg) no-repeat bottom left;} .footer-merdeka-2 {background: url(http://bulletin.sis-pik.com/images/footerv3-merdeka.jpg) no-repeat bottom left;} .footer-merdeka-3 {background: url(http://bulletin.sis-pik.com/images/footerv4-merdeka.jpg) no-repeat bottom left;} .footer-nusantara {background: url(http://bulletin.sis-pik.com/images/footer-nusantara.jpg) no-repeat bottom left;} .footer-sispeak {background: url(http://bulletin.sis-pik.com/images/footer-sispeak4.jpg) no-repeat bottom left;} .footer-showtell {background: url(http://bulletin.sis-pik.com/images/footer-showtell.jpg) no-repeat bottom left;} .footer-endofyear2019 {background: url(http://bulletin.sis-pik.com/images/footer-endofyear2019.jpg) no-repeat bottom left;} .footer-CNY2020 {background: url(http://bulletin.sis-pik.com/images/footer-CNY20202.jpg) no-repeat bottom left;} .footer-Language2020 {background: url(http://bulletin.sis-pik.com/images/footer2-Language2020.jpg) no-repeat bottom left;} .footer-WFH2020 {background: url(http://bulletin.sis-pik.com/images/footer2-WFH2020.jpg) no-repeat bottom left;} .footer-general2020 {background: url(http://bulletin.sis-pik.com/images/footer-general2020b.jpg) no-repeat bottom left;} .sectionheader, .sectionheader-chinese { display: flex; flex-wrap: nowrap; width:100%; background-size:100%; } .sectionheader { min-height:150px; } .sectionheader-chinese { min-height:180px; } .sectionheader.singlepage { position: relative; top: -111%; } .the-header-showcase2022 .sectionheader.singlepage{ top: 233px; } .the-header-showcase2023-2024 .sectionheader.singlepage { top: 180px; } .sectionfooter { display: flex; flex-wrap: nowrap; width:100%; /*height:150px;*/ padding:20px; background-size:100%; } .sectionfooterNF { width: 100%; background-size: 100%; padding: 0 2em 6em; } .sectionfooterGeneral2021 { width: 100%; background-size: 100%; padding: 0 2em 6em; } .theme2022-term1-frontpage .sectionfooter-theme2022 { width:100%; /* addition for bottom border style */ height: auto; background-color: transparent; border-radius: 20px; border-bottom: 10px #EB9A37 solid; } /* addition for bottom border style */ .theme2022-term1-frontpage .sectionfooter-theme2022:after { content: ""; position: relative; bottom: 0; height: 26px; display: block; background-color: transparent; border-radius: 20px; border-bottom: 7px solid #fbd967; } .showcase2022-frontpage .sectionfooter-showcase2022 { width:100%; /* addition for bottom border style */ height: auto; background-color: transparent; border-radius: 20px; border-bottom: 10px #EB9A37 solid; } /* addition for bottom border style */ .showcase2022-frontpage .sectionfooter-showcase2022:after { content: ""; position: relative; bottom: 0; height: 26px; display: block; background-color: transparent; border-radius: 20px; border-bottom: 7px solid #fbd967; } .sislogo { width:15%; } .sislogo2 { width:20%; } .sectionlogo,.sectionlogo2 { width:20%; text-align:right; } .sectionlogo > p,.sectionlogo2 > p { font-size:1em; font-weight:bold; color:white; } .sectionlogo2.w3-button { padding: 40px; } .logo-home, .logo-email, .logo-website, .logo-instagram, .logo-facebook, .logo-phonenumber, .logo-generalinfo,.logo-upcomingevents,.logo-activities,.logo-reminders { width:15% !important; border:thin none pink; padding:0 5px; font-size:.85em; color:orange; text-align:center; } .logo-footer { width:15% !important; padding:0 5px; font-size:.85em; color:white; text-align:center; text-shadow: rgba(0,0,0,.8) 1px 1px 2px; -webkit-text-shadow:rgba(0,0,0,.8) 1px 1px 2px; -moz-text-shadow:rgba(0,0,0,.8) 1px 1px 2px; } .logo-footerNF, .logo-footerGeneral2021 { width: 3em; padding: 0; margin: .5em; font-size: .85em; color: white; text-align: center; float: right; text-shadow: rgb(0 0 0 / 80%) 1px 1px 2px; -webkit-text-shadow: rgba(0,0,0,.8) 1px 1px 2px; -moz-text-shadow: rgba(0,0,0,.8) 1px 1px 2px; } .logo-footertheme2022 { display: inline-block; width: 5%; padding: 0; } .logo-footertheme2022.butleft {margin-left:40%} .logo-footertheme2022.butmid {margin:0 2%} .logo-footertheme2022.butright {margin-right:40%} .logo-footershowcase2022 { display: inline-block; width: 5%; padding: 0; } .logo-footershowcase2022.butleft {margin-left:40%} .logo-footershowcase2022.butmid {margin:0 2%} .logo-footershowcase2022.butright {margin-right:40%} .emptyfooter { width:5% !important; } .emptyfooter2 { width:27.5% !important; } .titleheader,.titleheader2,.titleheader3 { width:65%; margin:0 auto; border:thin black none; } .titleheader4 { width:60%; margin:0 auto; border:thin black none; } .titleheaderNF { width:53%; margin:0 auto; border:thin black none; } .titleheaderGeneral2021 { width:80%; margin:0 auto; border:thin black none; } .titleheader-theme2022 { width:100%; margin:0 auto; border:thin black none; font-family: fonttheme2022; background:none; } .titleheader-showcase2022, .titleheader-showcase2023-2024, .titleheader-showcase20th, .titleheader-showcase20242025smtr1 { width:100%; margin:0 auto; border:thin black none; font-family: Barlow; background:none; } .titleheader-showcase20242025smtr1 { display: block; width:100%; height: 420px; } .titleheader-showcase2023-2024, .titleheader-showcase20th { padding-top:2em; } .titleheader > p { font-family: 'Titillium Web', sans-serif; } .titleheader2 > p { font-family: 'Playfair Display', serif; } .titleheader3 > p, .titleheader4 > p, .titleheaderNF > p { font-family: 'Ubuntu', sans-serif; } .titleheader > p,.titleheader2 > p,.titleheader3 > p, .titleheader4 > p, .titleheader-theme2022 > p, .titleheader-showcase2022 > p, .titleheader-showcase2023-2024 > p, .titleheader-showcase20th > p, .titleheader-showcase20242025smtr1 > p { text-align:center; } .titleheader-showcase2024-2025 > p { text-align: left; padding-left: 30px; position: fixed; } .titleheader-theme2022 > p img { width:200px; height:auto; margin-bottom:10px; } .titleheader-showcase2022 > p img, .titleheader-showcase2023-2024 > p img { width:200px; height:auto; margin-bottom:10px; } .the-header-showcase2022 > img, .the-header-showcase2023-2024 > img { width: 160px; height: auto; margin: 0; position: absolute; top: 50px; left: 20px; } .titleheader-showcase20th > p img, .titleheader-showcase20242025smtr1 > p img { margin-bottom:10px; } .titleheader-showcase20th > p img.logo1, .titleheader-showcase20th > p img.logo2 { width:230px; height:auto; filter: drop-shadow(2px 3px 5px rgba(0,0,0,.7)); } .titleheader-homepage2024-2025 > p img { width:170px; height:auto; filter: drop-shadow(2px 3px 5px rgba(0,0,0,.7)); } .titleheader-showcase20242025smtr1 .logo-left, .titleheader-showcase20242025smtr1 .logo-right { display: block; width: 49.5%; position: absolute; top: 0; padding: 2em; } .titleheader-showcase20242025smtr1 .logo-left { left: 0; text-align: start; padding-top: 0.8em; } .titleheader-showcase20242025smtr1 .logo-right { right:0; text-align: end; } .logo-left img.logo1 { width:140px; height:auto; filter: drop-shadow(2px 3px 5px rgba(0,0,0,.7)); } .logo-right img.logo2 { width:240px; height:auto; filter: drop-shadow(2px 3px 5px rgba(0,0,0,.7)); } .logo-middle img.logo1 { width:16%; margin-top: -20px; margin-left:42%; margin-right:42%; height:auto; filter: drop-shadow(2px 3px 5px rgba(0,0,0,.7)); } .titleheader-showcase20242025smtr1 .logo-middle { display: block; width: 100%; position: absolute; top: 0; padding: 2em; } .titleheader-showcase20242025smtr1 > div img.logo2 { width:150px; height:auto; filter: drop-shadow(2px 3px 5px rgba(0,0,0,.7)); } .titleheaderNF > p, .titleheaderGeneral2021 > p { text-align: left; } .titleheader > p,.titleheader2 > p,.titleheader3 > p, .titleheader4 > p, .titleheaderNF > p, .titleheaderGeneral2021 > p { /*font-weight:700;*/ font-size:35px; text-transform: uppercase; line-height:1; padding-left:1em; color:white; } .titleheader-theme2022 > p,.titleheader-theme2022.singlepage > p { font-size:52px; text-transform: uppercase; line-height:1; color:white; text-shadow: 1px 2px 6px rgb(0 0 0 / 30%); } .titleheader-theme2022.singlepage > p { font-size:44px; } .titleheader-theme2022.singlepage > p img { width:160px; height:auto; margin-top:-20px auto 10px auto; } .titleheader-showcase2022 > p,.titleheader-showcase2022.singlepage > p, .titleheader-showcase2023-2024 > p,.titleheader-showcase2023-2024.singlepage > p { font-size: 45px; font-weight: 600; text-transform: uppercase; line-height: 1; color: #464646; } .titleheader-showcase20th .title, .titleheader-showcase20th .titledate-new, .titleheader-showcase20242025smtr1 .title, .titleheader-showcase20242025smtr1 .titledate-new, .content-container { font-family: 'Source Sans 3', sans-serif; text-transform: uppercase; color: #464646; text-align: center; } .titleheader-showcase20th .title, .titleheader-showcase20242025smtr1 .title { font-size: 50px; font-weight: 800; color: white; text-shadow: 2px 3px 5px rgba(0,0,0,.5); -webkit-text-shadow: 2px 3px 5px rgba(0,0,0,.5); } .titleheader-showcase20242025smtr1 .title-box { display: block; position: fixed; top: 430px; left: 0; z-index: 999; border: thin solid grey; border-radius: 15px; background: rgba(0, 0, 0, .3); backdrop-filter: blur(3px); width: 50vw; margin: 0 25vw; padding: 10px 0; text-shadow:2px 3px 5px rgba(0,0,0,.4); -webkit-text-shadow: 2px 3px 5px rgba(0,0,0,.4); transition: all .4s; transition-timing-function:ease-out; } .titleheader-showcase20242025smtr1 .title-box .title { display: block; font-size: 30px; float: left; width: 70%; margin-left: 15%; transition: all ease-in-out .4s; } .titleheader-showcase20242025smtr1 .title-box .titledate-new { display: block; font-size: 16px; font-weight: bold; float: left; width: 70%; margin-left: 15%; color: #ffcc00; transition: all ease-in-out .4s; } .titleheader-showcase20th .titledate-new { font-size: 30px; font-weight:normal; color: #ffcc00; padding-bottom: 1em; text-shadow: 2px 3px 5px rgba(0,0,0,.5); -webkit-text-shadow: 2px 3px 5px rgba(0,0,0,.5); } /* showcase20242025smtr1 */ .title-boxZ { font-size: 50px; font-weight: 800; color: white; border: thin solid grey; border-radius: 20px 20px 0 0; background: rgba(0, 0, 0, .3); backdrop-filter: blur(3px); padding: 20px 0; margin:0; text-align: center; text-shadow:2px 3px 5px rgba(0,0,0,.4); -webkit-text-shadow: 2px 3px 5px rgba(0,0,0,.4); } /* showcase20242025smtr1 */ .title-boxZ .titleZ { display: block; color: white; font-size: 28px; float: left; width: 70%; margin-left: 15%; transition: all ease-in-out .4s; } /* showcase20242025smtr1 */ .title-boxZ .titledate-newZ { display: block; font-size: 16px; font-weight: bold; float: left; width: 70%; margin-left: 15%; color: #ffcc00; transition: all ease-in-out .4s; } #navbar { background-color: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); position: fixed; top: -50px; left: 25%; opacity:0; width: 50%; display: block; transition: top 0.7s,opacity 0.5s; z-index: 1000; text-align: center; padding: .5em; border-radius: 0 0 20px 20px; border: thin solid grey; box-shadow: 2px 3px 3px rgba(0,0,0,.3); text-shadow:2px 3px 5px rgba(0,0,0,.4); -webkit-text-shadow: 2px 3px 5px rgba(0,0,0,.4); } #navbar .title { font-size: 20px; font-weight: 800; color: white; } #navbar .titledate-new { font-size: 20px; font-weight:800; color: white; } #navbar .title-post { padding-top: 25px ; font-size: 16px; color: #ffcc00; } /* .titleheader-showcase2023-2024 > p > span,.titleheader-showcase2023-2024.singlepage > p > span { background: url(http://bulletin.sis-pik.com/images/showcase2/cs_arts-topbar.jpg); background-size: 110%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-stroke: 1px black; } */ .titleheader-showcase2022 > p .year, .titleheader-showcase2023-2024 > p .year { font-weight: 400; } .titleheader-showcase2022.singlepage > p, .titleheader-showcase2023-2024.singlepage > p { font-size:35px; color: white; text-shadow: 0 -2px 3px rgba(0,0,0,.7); -webkit-text-shadow: 0 -2px 3px rgba(0,0,0,.7); -moz-text-shadow: 0 -2px 3px rgba(0,0,0,.7); } .titleheader-showcase2022.singlepage > p img, .titleheader-showcase2023-2024.singlepage > p img { width:160px; height:auto; margin-top:-20px auto 10px auto; } .titleheader > p,.titleheader2 > p,.titleheader3 > p, .titleheader4 > p { text-shadow: rgba(0,0,0,.5) 3px 3px 2px; } .titleheader > p > .jacktarub { font-family: 'mirageregular'; font-weight:normal !important; font-size:42px; color: white; } .titleheader > p > .default, .titleheader2 > p > .default, .titleheader > p > .titledate .default, .titleheader2 > p > .titledate .default, .titleheader3 > p > .titledate .default, .titleheader > p > .default, .titleheader2 > p > .default, .titleheader > p > .titledate-new .default, .titleheader2 > p > .titledate-new .default, .titleheader3 > p > .titledate-new .default, .titleheader3 > p > .titledate-new, .titleheader4 > p > .titledate-new{ text-shadow: rgba(0,0,0,.8) 2px 2px 2px; } .titleheader > p > .titledate, .titleheader > p > .titledate-new, .titleheader2 > p > .titledate, .titleheader3 > p > .titledate, .titleheader3 > p > .titledate-new, .titleheader4 > p > .titledate-new, .titleheaderNF > p > .titledate-new, .titleheaderGeneral2021 > p > .titledate-new { font-size:.5em; font-weight:normal; text-transform:capitalize; } .titleheader-theme2022 > p > .titledate-new, .titleheader-theme2022 > p > .titledate-new.singlepage { font-size:.4em; font-weight:bold; text-transform:capitalize; color:#fbd967; } .titleheader-theme2022 > p > .titledate-new:after { background: #fbd967; content: ""; display: block; position: relative; left: 41%; right: 41%; top: 6px; width: 18%; height: 2px; } .titleheader-theme2022 > p > .titledate-new.singlepage:after { display: none; } .titleheader-showcase2022 > p > .titledate-new, .titleheader-showcase2022 > p > .titledate-new.singlepage, .titleheader-showcase2023-2024 > p > .titledate-new, .titleheader-showcase2023-2024 > p > .titledate-new.singlepage { font-size: .5em; font-weight: 600; text-transform:capitalize; color:#464646; } .titleheader-showcase2022 > p > .titledate-new.singlepage { color: white; position: relative; top: -13px; } .titleheader-showcase2023-2024 > p > .titledate-new.singlepage { color: white; position: relative; top: -2px; } .titleheader-showcase2022 > p > .titledate-new.singlepage:after, .titleheader-showcase2023-2024 > p > .titledate-new.singlepage:after { background: #fbd967; content: ""; display: block; position: relative; left: 41%; right: 41%; top: 6px; width: 18%; height: 2px; } .titleheader-showcase2022 > p > .titledate-new.singlepage:after, .titleheader-showcase2023-2024 > p > .titledate-new.singlepage:after { display: none; } .titleheader > p > .titledate, .titleheader > p > .titledate-new, .titleheader2 > p > .titledate, .titleheader3 > p > .titledate, .titleheader3 > p > .titledate-new, .titleheader4 > p > .titledate-new, .titleheaderNF > p > .titledate-new, .titleheaderGeneral2021 > p > .titledate-new { color:white; } .titleheader > p > .chinese, .titleheader2 > p > .chinese, .titleheader3 > p > .chinese, .titleheader4 > p > .chinese, .titleheaderNF > p > .chinese, .titleheaderGeneral2021 > p > .chinese, .titleheader-theme2022 > p > .chinese, .titleheader-showcase2022 > p > .chinese { font-family: 'Ma Shan Zheng', cursive; } .main-container,.main-container2, .main-container-custom,.main-container-artsweek,.main-container-jacktarub,.main-container-backtoschool,.main-container-merdeka, .main-container-general2021 { padding:20px 0 20px 0 !important; margin-top:0 !important; margin-bottom:-15px !important; border-top-left-radius:0; border-top-right-radius:0; border-bottom-left-radius:0; border-bottom-right-radius:0; } .showcase20242025smtr1-innerpage .main-container2 { padding:2px 0 20px 0 !important; } .main-container { background: url(http://bulletin.sis-pik.com/images/background-default.jpg) repeat-y center top; background-size: 100%; } main-container2 { background:none; } .main-container-custom {background:inherit;} .main-container-artsweek {background:moccasin !important;} .main-container-jacktarub {background: #cfe7e9 !important;} .main-container-backtoschool {background: url(http://bulletin.sis-pik.com/images/bg-backtoschool.jpg) repeat-y top center;} .main-container-merdeka {background: #1B75BC !important;} .content-container { width: 100%; padding: 80px; background: none; } .content-container-theme2022 { width: 100%; padding: 0 80px 80px 80px; background: none; } .content-container-showcase2022 { width: 100%; padding: 0 80px 550px 80px; background: none; } .content-container-showcase2023-2024 { width: 100%; padding: 0 10px 450px 10px; background: none; } .content-container-showcase20th { width: 100%; padding: 0 15% 350px 15%; background: none; } .content-container-showcase20242025smtr1 { width: 100%; padding: 0 10% 0 10%; background: none; } .content-container-showcase20242025smtr1-single { width: 100%; padding: 0 5% 0 5%; background: none; } .content-container-showcase20th-single { width: 100%; padding: 0 0 450px 0; background: none; } .chinese.content-container { margin-top: 25px; } article.post.chinese { margin-top: 25px; } .article-container { background:skyblue !important; -webkit-border-radius:10px !important; -moz-border-radius:10px !important; border-radius:10px !important; overflow:hidden !important; padding:20px !important; margin-bottom:20px !important; } .article-header-blue { overflow:hidden !important; -webkit-border-radius:0 !important; -moz-border-radius:0 !important; border-radius:0 !important; padding:20px !important; margin-bottom:20px !important; background-color: rgba(0,51,102,1) !important; height:150px; } .article-box { padding:0 0 10px 0 !important; margin: 0 20px 20px !important; } .article-box2 { padding:0 0 10px 0 !important; margin: 100px 20px 150px 20px !important; } .article-box3 { padding:0 0 10px 0 !important; margin: 150px 20px 150px 20px !important; border-radius: 0 30px; } .article-box4 { padding:0 0 10px 0 !important; margin: 0 20px 250px 20px !important; } .article-box5 { padding:0 0 10px 0 !important; margin: 0 40px 250px 40px !important } .article-box-single { background: linear-gradient(to right, rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 100%) !important; background: -webkit-linear-gradient(to right, rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 100%) !important; background: -moz-linear-gradient(to right, rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 100%) !important; } .article-box-single-transparent { background-color:transparent; } .article-box-single-theme2022 { background-color: rgba(255,255,255,.6); border-radius: 20px; border: 2px #fbd967 solid; margin: 0 20px 300px 20px; } .article-box-single-showcase2022 { background-color: rgba(255,255,255,.6); border-radius: 20px; border: 1px #a8a8a8 solid; margin: 0 20px 20px 20px; } .article-box-single-showcase2023-2024 { background-color: rgba(255,255,255,.6); border-radius: 20px; border: 1px #a8a8a8 none; margin: 0 20px 20px 20px; } .article-box-single-showcase20th { background-color: rgba(255,255,255,1); border-radius: 20px; border: 1px #a8a8a8 none; margin: 0 20px 20px 20px; box-shadow: 2px 3px 5px rgba(0,0,0,.4); } .article-box-single-homepage2024-2025 { background-color: rgba(255, 255, 255, 0); border-radius: 20px; border: none; margin: 0 150px 20px 150px; } .article-box-single-showcase20242025smtr1 { background-color: rgba(255,255,255,1); border-radius: 0 0 20px 20px; border: 1px #a8a8a8 none; margin: 0; box-shadow: 2px 3px 5px rgba(0,0,0,.4); } .article-box5.article-showcase2022, .article-box5.article-showcase20th, .article-box5-showcase20242025smtr1 { margin-bottom: 20px !important; } .ugb-container__content-wrapper wp-block-spacer { background-color: none !important; } .article-box p, .article-box2 p, .article-box3 p { margin: 20px !important; } .article-box p, .article-box2 p, .article-box3 p, .article-box2 li, .tbl-nostyle { color: #484848; } .article-box ul, .article-box ol, .article-box2 ul, .article-box2 ol, .article-box3 ul, .article-box3 ol { margin-right:20px !important; } .article-title, .article-subtitle { padding:10px; border-bottom:silver dashed 1px; border-top-left-radius:10px; -webkit-top-left-border-radius:10px; -moz-top-left-border-radius:10px; border-top-right-radius:10px; -webkit-top-right-border-radius:10px; -moz-top-right-border-radius:10px; } .article-title > span, .article-subtitle > span { float:right; } .chlink { display: none; } .article-title {background:beige;} .article-subtitle {background:aliceblue;} .flags a { /* display: inline-block; background-color: black; border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; box-shadow: 2px 2px 3px rgba(0,0,0,.6); -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,.6); -moz-box-shadow: 2px 2px 3px rgba(0,0,0,.6); */ } .flags a > img, .menu-content-showcase20th .flagsnew img, .menu-content-showcase20242025smtr1 .flagsnew img { width:40px; margin:0; filter: drop-shadow(0 0 2px rgba(0,0,0,.5)); -webkit-filter: drop-shadow(0 0 2px rgba(0,0,0,.5)); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; } .flags a > img:hover, .menu-content-showcase20th .flagsnew img:hover, .menu-content-showcase20242025smtr1 .flagsnew img:hover { width:35px; margin:0 2.5px; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); } .flag2 { padding-right:20px; } .flagsnew { position: relative; top: -30px; right: -42%; } .flagsnew img { width: 30px; } .menu-content-showcase2023-2024 .flagsnew { position: relative; top: -30px; right: 0; } .menu-content-showcase2023-2024 .flagsnew img { width: 30px; } .menu-content-showcase20th .flagsnew { position: relative; top: -30px; right: 0; } .showcase20242025smtr1-innerpage .flagsnew2024 .flags { margin-top: 12px; } .showcase20242025smtr1-innerpage .flagsnew2024Z .flags { margin-top: -7px; } .flagsnew.singlepage { position: relative; top: -51px; right: -90%; } .the-header-showcase2022 .flagsnew.singlepage, .the-header-showcase2023-2024 .flagsnew.singlepage { position: absolute; top: 50px; right: 30px; } .showcase20th-innerpage .flagsnew.singlepage, .showcase20242025smtr1-innerpage .flagsnew2024.singlepage { position: relative; display: contents; text-align: center; } .showcase20242025smtr1-innerpage .flagsnew2024 { float: right; } article.chinese .flagsnew.singlepage { position: relative; top: -76px; right: -90%; } #mySidebar > div > ul { font-size:14px; font-weight:bold; color: #FFF; } /* OVERRIDE theme's CSS */ .wp-block-image > .alignright { margin-right: 20px; } .wp-block-image > .alignleft { margin-left: 20px; } .article-theme2022 .wp-block-image img { max-width: 100%; height: auto; } .article-theme2022 .wp-block-image > .alignleft { margin-left: 0; } .article-showcase2022 .wp-block-image img, .article-showcase20th .wp-block-image img, .article-showcase20242025smtr1 .wp-block-image img { max-width: 100%; height: auto; -webkit-border-radius:6px; border-radius:6px; } .article-showcase2022 .wp-block-image > .alignleft, .article-showcase20th .wp-block-image > .alignleft, .article-showcase20242025smtr1 .wp-block-image > .alignleft { margin-left: 0; } .wp-block-gallery { padding:0 20px !important; } .sectionfooter > div > a > p > img, .sectionfooter > div > p > img { width:50%; } .sectionfooterNF > div > a > p > img, .sectionfooterNF > div > p > img, .sectionfooterGeneral2021 > div > a > p > img, .sectionfooterGeneral2021 > div > p > img, .sectionfooter-theme2022 > div > a > p > img, .sectionfooter-theme2022 > div > p > img, .sectionfooter-showcase2022 > div > a > p > img, .sectionfooter-showcase2022 > div > p > img { width:100%; } .sectionfooter > div > a, .sectionfooterNF > div > a, .sectionfooterGeneral2021 > div > a, .sectionfooter-theme2022 > div > a, .sectionfooter-showcase2022 > div > a { text-decoration:none; } .sectionfooter > div:hover > a { font-weight:bold; text-decoration:none; color: white; } .sectionfooter > div:hover > a > p > img, .sectionfooterNF > div:hover > a > p > img, .sectionfooterGeneral2021 > div:hover > a > p > img, .sectionfooter-theme2022 > div:hover > a > p > img, .sectionfooter-showcase2022 > div:hover > a > p > img, .flags > a > img:hover { animation: animationFrames linear 1s; animation-iteration-count: 1; transform-origin: 50% 50%; } .showcase20th-innerpage .sectionfooter-theme2022, .showcase20242025smtr1-innerpage .sectionfooter-theme2022 { margin-top:40px; } .showcase20th-frontpage .sectionfooter-theme2022 img, .showcase20th-innerpage .sectionfooter-theme2022 img, .showcase20242025smtr1-frontpage .sectionfooter-theme2022 img, .showcase20242025smtr1-innerpage .sectionfooter-theme2022 img { filter: drop-shadow(1px 2px 2px black); } /* ==== theme's classes hacked ==== */ .ugb-container__content-wrapper > div { background-color: none; } .ugb-container .ugb-container__content-wrapper>:last-child { margin-bottom: 1em !important; } .ugb-container p a, .ugb-container ul a, .ugb-container ol a, .ugb-container li a {color:royalblue} .ugb-container p a:hover, .ugb-container ul a:hover, .ugb-container ol a:hover, .ugb-container li a:hover {color:crimson} .article-box-single-transparent p a, .article-box-single-transparent ul a, .article-box-single-transparent ol a, .article-box-single-transparent li a, .article-box-single-transparent li { color: white; } .article-box-single-transparent p a:hover, .article-box-single-transparent ul a:hover, .article-box-single-transparent ol a:hover, .article-box-single-transparent li a:hover, .article-box-single-transparent li:hover { color: cyan; text-decoration: none; } /* --- END new line --- */ /* ++++++++++++++++++++++ PARENT PAGE +++++++++++++++++++++ */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .catcontainer { display: flex; flex: 100%; flex-direction: row; flex-wrap:wrap; } .menu-content > ul { line-height: 2em; text-align:left; } .menu-content-theme2022, .menu-content-theme2023-2024 { padding: 50px 0 !important; min-height: 350px; text-align: center; font-family: 'fonttheme2022'; font-size: 21px; } .menu-content-theme2022 p a, .menu-content-theme2022 p a:active, .menu-content-theme2022 p a:visited, .menu-content-theme2023-2024 p a, .menu-content-theme2023-2024 p a:active, .menu-content-theme2023-2024 p a:visited { color: #1E336C; text-decoration: underline; } .menu-content-theme2022 p a:hover, .menu-content-theme2023-2024 p a:hover { color: royalblue; text-decoration: none; } .chinese .menu-content-theme2022 p, .chinese .menu-content-theme2023-2024 p { font-family: 'fonttheme2022' !important; } .menu-content-showcase2022, .menu-content-showcase2023-2024, .menu-content-showcase20th, .menu-content-showcase20242025smtr1 { padding: 50px 0 !important; min-height: 350px; text-align: center; font-family: "Barlow"; font-weight: 700; font-size: 18px; } .titleheader-showcase20th, .menu-content-showcase20th, .titleheader-showcase20242025smtr1, .menu-content-showcase20242025smtr1 { font-family: 'Source Sans 3', sans-serif; } .menu-content-showcase2022 p a, .menu-content-showcase2022 p a:active, .menu-content-showcase2022 p a:visited, .menu-content-showcase2023-2024 p a, .menu-content-showcase2023-2024 p a:active, .menu-content-showcase2023-2024 p a:visited, .menu-content-showcase20th p a, .menu-content-showcase20th p a:active, .menu-content-showcase20th p a:visited, .menu-content-showcase20242025smtr1 p a, .menu-content-showcase20242025smtr1 p a:active, .menu-content-showcase20242025smtr1 p a:visited { color: #fbd967; text-decoration: none; } .menu-content-showcase2022 p a:hover, .menu-content-showcase2023-2024 p a:hover { color: black; text-decoration: none; background-color: rgba(0,0,0,.1); -webkit-border-radius:10px; border-radius:10px; padding:2px 10px; } .menu-content-showcase2023-2024 p:after { display: block; content: ""; border-bottom: thin solid #ffbca2; width: 90%; padding-bottom:1em; position: relative; left:5%; } /**/ .menu-content-showcase20th p { padding-top:10px; padding-bottom:10px; border-bottom: thin dashed #ffffff; margin-block-start: 0; margin-block-end: 0; margin-left: 40px; margin-right: 40px; } .menu-content-showcase20242025smtr1.opt2 p { padding-top:10px; padding-bottom:10px; border-bottom: thin dashed #2D94E1; margin-block-start: 0; margin-block-end: 0; margin-left: 40px; margin-right: 40px; } .menu-content-showcase20242025smtr1 p { padding-top:10px; padding-bottom:10px; border-bottom: thin dashed #931191; margin-block-start: 0; margin-block-end: 0; margin-left: 40px; margin-right: 40px; } .menu-content-showcase20th p a, .menu-content-showcase20242025smtr1 p a{ color: #fbd967; text-decoration: none; transition: color .5s; } .menu-content-showcase20th p:hover a { color:#ffffff; } .menu-content-showcase20242025smtr1.opt2 p:hover a{ color:#2D94E1; } .menu-content-showcase20242025smtr1 p:hover a{ color:#931191; } .menu-content-showcase20th p:after { display: block; content: ""; border-bottom: solid 1px; border-image: linear-gradient(to left, #00579c, #ffffff, #00579c) 100; width: 0; border-radius: 5px; position: relative; margin:0 50%; bottom:-10px; } .menu-content-showcase20242025smtr1.opt2 p:after { display: block; content: ""; border-bottom: solid 7px; border-image: linear-gradient(to left, #2D94E1, #69CBF6, #1C4E9D) 100; width: 0; border-radius: 5px; position: relative; margin:0 50%; bottom:-10px; } .menu-content-showcase20242025smtr1 p:after { display: block; content: ""; border-bottom: solid 4px; border-image: linear-gradient(to left, #931191, #a4b2f6, #ff5903) 100; width: 0; border-radius: 5px; position: relative; margin:0 50%; bottom:-10px; } .menu-content-showcase20th p:hover, .menu-content-showcase20242025smtr1 p:hover { border-color: rgba(45,148,225,0.00); transition: border .5s; } .menu-content-showcase20th p:hover:after, .menu-content-showcase20242025smtr1 p:hover:after { width:100%; margin:0 0; transition: width .5s, margin .5s; } .chinese .menu-content-showcase2022 p, .chinese .menu-content-showcase2023-2024 p, .chinese .menu-content-showcase20th p, .chinese .menu-content-showcase20242025smtr1 p { font-family: 'Barlow' !important; } .catbox1 {background-image:url(http://bulletin.sis-pik.com/images/bg-generalinfo.png);} .catbox2 {background-image:url(http://bulletin.sis-pik.com/images/bg-upcomingevents.png);} .catbox3 {background-image:url(http://bulletin.sis-pik.com/images/bg-activities.png);} .catbox4 {background-image:url(http://bulletin.sis-pik.com/images/bg-reminders.png);} .catbox { padding:0; background-repeat:repeat-x; background-position:bottom right; background-size:contain; flex-grow:1; min-width:50%; height:300px; } .catboxicon1 {background-image:url(http://bulletin.sis-pik.com/images/icon-generalinfo.png);} .catboxicon2 {background-image:url(http://bulletin.sis-pik.com/images/icon-upcomingevents.png);} .catboxicon3 {background-image:url(http://bulletin.sis-pik.com/images/icon-activities.png);} .catboxicon4 {background-image:url(http://bulletin.sis-pik.com/images/icon-reminders.png);} .catboxicon { padding:10px; width:100%; height:100%; background-repeat: no-repeat; background-position: 120% 130%; background-size:50%; } .catitle { font-size:2.5em; font-family: 'Righteous', cursive; line-height:.8; text-align: left; } .catitle1 {color:#0074a3;} .catitle2 {color:#0b8c87;} .catitle3 {color:#a38d10;} .catitle4 {color:#bc3e53;} .catlist { border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; font-size:14px; font-weight:bold; text-align: left; padding:5px 8px; background:rgba(255,255,255,.85) !important; margin:20px 0 5px 0; border:thin dashed; height:13em; } .catlist1 { border-color:#0074a3;} .catlist2 { border-color:#0b8c87;} .catlist3 { border-color:#a38d10;} .catlist4 { border-color:#bc3e53;} .catlist ul li a {color:royalblue; text-transform: capitalize;} .catlist ul li a:hover {color:crimson} /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* ++++++++++++++++++++ END PARENT PAGE +++++++++++++++++++ */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* ++++++++++++++++++++++ ARTICLE PAGE ++++++++++++++++++++ */ /* _______________________ TABLES __________________________ */ .tbl-yellow,.tbl-green,.tbl-blue,.tbl-purple,.tbl-pink,.tbl-red,.tbl-orange,.tbl-brown,.tbl-cal,.tbl-cal2 { border-collapse:collapse; font-size:1em; margin-left:10%; margin-right:10%; } .tbl-yellow td,.tbl-green td,.tbl-blue td,.tbl-purple td,.tbl-pink td,.tbl-red td,.tbl-orange td,.tbl-brown td,.tbl-cal td,.tbl-cal2 td { text-align: left; padding: 3px 7px; } .tbl-75 {width:75%; margin:auto 12.5%;} .tbl-80 {width:80%; margin:auto 10%;} .tbl-90 {width:90%; margin:auto 5%;} .tbl-yellow {background: lemonchiffon; border:thin solid gold; border-radius:15px;} .tbl-yellow td {border: gold thin solid;} .tbl-yellow tr:nth-child(even) {background-color: lightyellow;} .tbl-yellow tr td:first-child {border-left:none;} .tbl-yellow tr td:last-child {border-right:none;} .tbl-yellow tr:first-child td {background-color: gold; border-top:none; font-weight:bold; text-align:center;} .tbl-yellow tr:last-child td {border-bottom:none;} .tbl-yellow .clra td {background: lemonchiffon;} .tbl-yellow .clrb td {background: lightyellow;} .tbl-yellow .rowhide {display:none} .tbl-green {background: honeydew; border:thin solid mediumaquamarine; border-radius:15px;} .tbl-green td {border: mediumaquamarine thin solid;} .tbl-green tr:nth-child(even) {background-color:mintcream;} .tbl-green tr td:first-child {border-left:none;} .tbl-green tr td:last-child {border-right:none;} .tbl-green tr:first-child td {background:mediumaquamarine; border-top:none; font-weight:bold; text-align:center;} .tbl-green tr:last-child td {border-bottom:none;} .tbl-green .clra td {background: honeydew;} .tbl-green .clrb td {background: mintcream;} .tbl-green .rowhide {display:none} .tbl-blue {background: azure; border:thin solid deepskyblue; border-radius:15px;} .tbl-blue td {border: deepskyblue thin solid;} .tbl-blue tr:nth-child(even) {background-color:#DEFAFF;} .tbl-blue tr td:first-child {border-left:none;} .tbl-blue tr td:last-child {border-right:none;} .tbl-blue tr:first-child td {background-color:deepskyblue; border-top:none; font-weight:bold; text-align:center;} .tbl-blue tr:last-child td {border-bottom:none;} .tbl-blue .clra td {background: azure;} .tbl-blue .clrb td {background: #DEFAFF;} .tbl-blue .rowhide {display:none} .tbl-pink {background: #FFF0F2; border:thin solid deeppink; border-radius:15px;} .tbl-pink td {border: deeppink thin solid;} .tbl-pink tr:nth-child(even) {background-color:#FFE9ED;} .tbl-pink tr td:first-child {border-left:none;} .tbl-pink tr td:last-child {border-right:none;} .tbl-pink tr:first-child td {background-color:#FF77BB; border-top: none; font-weight:bold; text-align:center;} .tbl-pink tr:last-child td {border-bottom:none;} .tbl-pink .clra td {background: #FFF0F2;} .tbl-pink .clrb td {background: #FFE9ED;} .tbl-pink .rowhide {display:none} .tbl-purple {background: #F5F5FF; border:thin solid mediumpurple; border-radius:15px;} .tbl-purple td {border: mediumpurple thin solid;} .tbl-purple tr:nth-child(even) {background-color: lavender;} .tbl-purple tr td:first-child {border-left:none;} .tbl-purple tr td:last-child {border-right:none;} .tbl-purple tr:first-child td {background-color:mediumpurple; border-top: none; font-weight:bold; text-align:center;} .tbl-purple tr:last-child td {border-bottom:none;} .tbl-purple .clra td {background: #F5F5FF;} .tbl-purple .clrb td {background: lavender;} .tbl-purple .rowhide {display:none} .tbl-red {background:#FFECF0; border:thin solid crimson; border-radius:15px;} .tbl-red td {border: crimson thin solid;} .tbl-red tr:nth-child(even) {background-color:pink;} .tbl-red tr td:first-child {border-left:none;} .tbl-red tr td:last-child {border-right:none;} .tbl-red tr:first-child td {background-color:crimson; border-top:none; font-weight:bold; text-align:center;} .tbl-red tr:last-child td {border-bottom:none;} .tbl-red .clra td {background: #FFECF0;} .tbl-red .clrb td {background: pink;} .tbl-red .rowhide {display:none} .tbl-orange {background: #FEEFD3; border:thin solid orange; border-radius:15px;} .tbl-orange td {border: orange thin solid;} .tbl-orange tr:nth-child(even) {background-color: #FFD197;} .tbl-orange tr td:first-child {border-left:none;} .tbl-orange tr td:last-child {border-right:none;} .tbl-orange tr:first-child td {background-color:orange; border-top:none; font-weight:bold; text-align:center;} .tbl-orange tr:last-child td {border-bottom:none;} .tbl-orange .clra td {background: #FEEFD3;} .tbl-orange .clrb td {background: #FFD197;} .tbl-orange .rowhide {display:none} .tbl-brown {background: cornsilk; border:thin solid peru; border-radius:15px;} .tbl-brown td {border: peru thin solid;} .tbl-brown tr:nth-child(even) {background-color: wheat;} .tbl-brown tr td:first-child {border-left:none;} .tbl-brown tr td:last-child {border-right:none;} .tbl-brown tr:first-child td {background-color:peru; border-top:none; font-weight:bold; text-align:center;} .tbl-brown tr:last-child td {border-bottom:none;} .tbl-brown .clra td {background: cornsilk; font-weight:normal;} .tbl-brown .clrb td {background: wheat; font-weight:normal;} .tbl-brown .rowhide {display:none} .tbl-cal {background: azure; color: #353535;} .tbl-cal td {border: deepskyblue thin solid;} .tbl-cal .clra td {background: azure;} .tbl-cal .clrb td {background:skyblue;} /* .tbl-cal td:nth-child(1) {width:49%} .tbl-cal td:nth-child(2) {width:51%} */ .tbl-cal tr:nth-child(even) {background-color:skyblue;} .tbl-cal .holy {border: crimson thin solid !important; background: crimson !important; color:white;} .tbl-cal .rowhide {display:none} .tbl-cal tr:hover {background-color: rgba(255,255,255,.8);color:#315c7f} .tbl-cal2 {background: azure; color: #353535;border-radius: 15px; border: thin solid steelblue;} .tbl-cal2 td {border: #63b4cf thin solid;} .tbl-cal2 tr .clr {background: #63b4cf;} .tbl-cal2 tr .clra, .tbl-cal2 tr:hover .clra {background: #9dd0e1;color:black;} .tbl-cal2 tr .clrb, .tbl-cal2 tr:hover .clrb {background:#add8e6;color:black;} .tbl-cal2 tr:first-child, .tbl-cal2 tr:first-child:hover {background-color:steelblue;color:white;} .tbl-cal2 tr:nth-child(even) {background-color:#d8ecf3;} .tbl-cal2 tr td:first-child {border-left: none; padding-left:1em;} .tbl-cal2 tr td:last-child {border-right: none;} .tbl-cal2 tr:first-child td {border-top: none; text-align: center;} .tbl-cal2 tr:last-child td {border-bottom: none;} .tbl-cal2 .holy {border: crimson thin solid !important; background: crimson !important; color:white;} .tbl-cal2 .rowhide {display:none} .tbl-cal2 tr:hover {background-color: lightblue;} /* _____________________ END TABLE ________________________ */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* ++++++++++++++++++++ END ARTICLE PAGE +++++++++++++++++++ */ .w3-table, .w3-tablex,.w3-table-all, .w3-table-printable{border-collapse:collapse;border-spacing:0;width:100%;display:table} .w3-table-all{border:1px solid #ccc} .w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd} .w3-striped tbody tr:nth-child(even){background-color:#f1f1f1} .w3-table-all tr:nth-child(odd){background-color:#fff} .w3-table-all tr:nth-child(even){background-color:#f1f1f1} .w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top} .w3-tablex td,.w3-tablex th{padding:1px 1px;display:table-cell;text-align:left;vertical-align:top} .w3-table-printable td, .w3-table-printable th {padding:1px !important;display:table-cell;text-align:left;vertical-align:top} .w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{/* padding-left:16px */} #blue th{background-color:#069; color:#fff; font-weight:bold;} #blue tr:nth-child(odd){background-color:#DDE6EF;} #blue tr:nth-child(even){background-color:#A0C6EF;} #blue tr {border-color:#87b3c9;} #blue tr:hover {background-color:#069;} #blue {border:1px solid #369} #green th{background-color:#360; color:#fff; font-weight:bold;} #green tr:nth-child(odd){background-color:#E6EED2} #green tr:nth-child(even){background-color:#CFECA7} #green tr {border-color:#7AA84E;} #green tr:hover {background-color:#360;} #green {border:1px solid #096} #pink th{background-color:#C03; color:#fff; font-weight:bold;} #pink tr:nth-child(odd){background-color:#FFDAF4} #pink tr:nth-child(even){background-color:#FFEBF9} #pink tr {border-color:#cc788d;} #pink tr:hover {background-color:#C03;} #pink {border:1px solid #C06} #orange th{background-color:#F90; color:#fff; font-weight:bold;} #orange tr:nth-child(odd){background-color:#FFDAA5} #orange tr:nth-child(even){background-color:#FFF4DB} #orange tr {border-color:#FFBB54;} #orange tr:hover {background-color:#F90;} #orange {border:1px solid #F30} #orange-flat th{background-color:#F90; color:#fff; font-weight:bold;} #orange-flat tr {background-color:#FFF4DB; border-color:#FFBB54;} #orange-flat tr:hover {background-color:#F90;} #gray th{background-color:#eee; color:#000; font-weight:bold;} #gray tr:nth-child(odd){background-color:#ccc} #gray tr:nth-child(even){background-color:#eee} #gray tr{background-color:#eee; border-color:#bbb;} #gray tr:hover {background-color:#999;} #orange tr:hover, #pink tr:hover, #green tr:hover, #blue tr:hover, #gray tr:hover {color:#fff;} .holiday {color:#C00;} .white {color:#fff} .black {color:#000} .blue {color:#06f} .logo { background-image: url(../images/?); background-position: center; background-repeat: no-repeat; height: 300px; height:300px; display: block; } .burgernav {text-align:center; padding-right:5%;} .swa-bar {height:100px; width:auto;} .spacer {width:100%; min-height:120px; max-height:150px;} .quote {color: #666; font-style:italic; width:auto;padding-left:8px;border-left:2px solid #CC0;word-wrap:break-word} .navbar {width:100%; padding:1em; background:#CCC; border-top: #FFF thin solid;-webkit-transition: background 1s; transition: background 1s;} .navbar:hover {color:#fff;} .navbar-link:hover .navbar {background:#333;} .navbar-link:hover {font-size:20px;} .navbar-link {font-weight:bold; font-size:15px; text-decoration:none;-webkit-transition: font-size .5s; transition: font-size .5s;} .w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc} .w3-centered tr th,.w3-centered tr td{text-align:center} .w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap} .w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)} .w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3} .w3-disabled *,:disabled *{pointer-events:none} .w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none} .w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center} .w3-badge{border-radius:50%} .w3-ul{list-style-type:none;padding:0;margin:0} .w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd} .w3-ul li:last-child{border-bottom:none} .w3-tooltip,.w3-display-container{position:relative} .w3-tooltip .w3-text{display:none} .w3-tooltip:hover .w3-text{display:inline-block} .w3-ripple:active{opacity:0.5} .w3-ripple{transition:opacity 0s} .w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%} .w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc} .w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer} .w3-dropdown-hover:hover .w3-dropdown-content{display:block} .w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000} .w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000} .w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1} .w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px} .w3-sidebar {height:100%;width:100%;background-color:#C00;position:relative!important;overflow:auto; right:0;} .sidemenu {display:none;z-index:120;/*max-width:400px;*/} .w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%} .w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%} .w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px} .w3-main,#main{transition:margin-left .4s} .w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)} .w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px} .w3-bar{width:100%;overflow:hidden; height:100px;} .w3-center .w3-bar{display:inline-block;width:auto} .w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0} .w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left} .w3-bar .w3-button{white-space:normal} .w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0} .w3-bar-block.w3-center .w3-bar-item{text-align:center} .w3-block{display:block;width:100%} .w3-responsive{display:block;overflow-x:auto} .w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before, .w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both} .w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%} .w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%} .w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%} .w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%} .the-content { background: url(http://bulletin.sis-pik.com/images/background-default.jpg) repeat-y center top; } /* ================= BG THINGS ================= */ .the-content-new { background-image: url(http://bulletin.sis-pik.com/images/header-general20202.png), url(http://bulletin.sis-pik.com/images/footer-general20202.png), url(http://bulletin.sis-pik.com/images/background-default.jpg); background-position: center top, center bottom, center top; background-repeat: no-repeat, no-repeat, repeat-y; } .the-content-new-front { background-image: url(http://bulletin.sis-pik.com/images/header-general20202.png), url(http://bulletin.sis-pik.com/images/footer-general20202.png), url(http://bulletin.sis-pik.com/images/bg-library.jpg); } .the-content-new-frontb { background-image: url(http://bulletin.sis-pik.com/images/header-general20202.png), url(http://bulletin.sis-pik.com/images/footer-general20202.png), url(http://bulletin.sis-pik.com/images/bg-library2.jpg); } .the-content-new-frontc { background-image: url(http://bulletin.sis-pik.com/images/header-general20202.png), url(http://bulletin.sis-pik.com/images/footer-general20202.png), url(http://bulletin.sis-pik.com/images/bg-library3.jpg); } .the-content-new-front,.the-content-new-frontb,.the-content-new-frontc { background-position: center top, center bottom, center center; background-size: 100%, 100%, cover !important; background-repeat: no-repeat; } /* ------------ THEME VAF --------------*/ .the-content-VAF { background-image: url(http://bulletin.sis-pik.com/images/header-VAF2020.png), url(http://bulletin.sis-pik.com/images/footer-VAF2020.png), url(http://bulletin.sis-pik.com/images/background-default.jpg); background-position: center top, center bottom, center top; background-repeat: no-repeat, no-repeat, repeat-y; } /*------------- END THEME VAF ---------------*/ /* ------------ THEME CNY --------------*/ .the-content-CNY { background-image: url(http://bulletin.sis-pik.com/images/header-CNY2021.png), url(http://bulletin.sis-pik.com/images/footer3-CNY2021.png), url(http://bulletin.sis-pik.com/images/background-default.jpg); background-position: center top, center bottom, center top; background-repeat: no-repeat, no-repeat, repeat-y; } /*------------- END THEME CNY ---------------*/ /* ------------ THEME NEW FACILITIES --------------*/ .the-content-NF { background-image: url(http://bulletin.sis-pik.com/images/header-NF2021.png), url(http://bulletin.sis-pik.com/images/footer-NF2021.png), url(http://bulletin.sis-pik.com/images/background-default.jpg); background-position: center top, center bottom, center top; background-repeat: no-repeat, no-repeat, repeat-y; } /*------------- END THEME NEW FACILITIES ---------------*/ /* ------------ THEME GENERAL 2021 --------------*/ .the-content-General2021 { background-image: url(http://bulletin.sis-pik.com/images/header-general2021b.png), url(http://bulletin.sis-pik.com/images/footer-general2021b.png), url(http://bulletin.sis-pik.com/images/bg-general2021b.jpg); background-position: center top, center bottom, center top; background-repeat: no-repeat, no-repeat, repeat-y; } /*------------- END THEME GENERAL 2021 ---------------*/ /* ------------ THEME 2022-2023 TERM 1 --------------*/ .theme2022-term1-frontpage { background-image:url(http://bulletin.sis-pik.com/images/vr/assets/vr-frontpage2.jpg); background-position:center bottom; background-repeat:no-repeat; } .theme2022-term1-frontpage.w3-content { background-size:100%; } .wp-block-ugb-container .ugb-container__wrapper .ugb-container__content-wrapper .article-theme2022 .ugb-container__wrapper .ugb-container__content-wrapper > h2:first-child { background:white; color: #1E336C; border: none; font-family: fonttheme2022; font-size:2.5em; } .wp-block-ugb-container .ugb-container__wrapper .ugb-container__content-wrapper .article-theme2022 .ugb-container__wrapper .ugb-container__content-wrapper > h2:first-child:after { content: ""; position: relative; display: block; height: 3px; width: 30%; bottom: 0; left: 35%; right: 35%; background: #EB9A37; } .the-content-theme2022-term1 { overflow: hidden; border-radius: 20px; } .article-theme2022 .ugb-container__wrapper .ugb-container__content-wrapper > h2:nth-child(2) { margin-bottom: 50px; } .the-header-theme2022-term1 { display: block; border-radius: 20px; width:100%; height:360px; background-color:#EB9A37; border-bottom: 10px solid #F5DA79; } .the-header-theme2022-term1:before { content:""; display: block; position: relative; border-radius: 20px; width:100%; height:360px; top:-25px; background-image: url(http://bulletin.sis-pik.com/images/vr/assets/vr-header.jpg); background-position: center top; background-repeat: no-repeat; background-size: cover; } .footbuts { position: relative; bottom: -35px; width: 100%; z-index: 2; } .the-footer-theme2022-term1 { display: block; position: relative; border-radius: 20px; width:100%; height:50px; background:#EB9A37; top:-5px; } .the-footer-theme2022-term1:before { content:""; display: block; position: relative; border-radius: 20px; width:100%; height:50px; top:6px; background-image: url(http://bulletin.sis-pik.com/images/vr/assets/vr-footer.jpg); background-position: center top; background-repeat: no-repeat; background-size: cover; } /*------------- END THEME 2022-2023 TERM 1 ---------------*/ /* ------------ SHOWCASE 2022 --------------*/ .showcase2022-frontpage { background-image:url(http://bulletin.sis-pik.com/images/showcase/student-thinktank.png),url(http://bulletin.sis-pik.com/images/showcase/bg-grad.jpg); background-position:center bottom -35px,center top; background-repeat:no-repeat,repeat-x; } .showcase2023-2024-frontpage { background:url(http://bulletin.sis-pik.com/images/showcase2/cs_arts-topbar.jpg),url(http://bulletin.sis-pik.com/images/showcase2/cs_arts1.jpg),#ffffff; background-position:center top,center bottom,center center; background-repeat:no-repeat,no-repeat,repeat; } .showcase20th-frontpage, .showcase20242025smtr1-frontpage { background:none; } .shocase20th-innerpage { } .showcase2023-2024-frontpageV2 { background:url(http://bulletin.sis-pik.com/images/showcase2/cs_arts-topbar2.jpg),url(http://bulletin.sis-pik.com/images/showcase2/cs_arts2.jpg),#ffffff; background-position:center top,center bottom,center center; background-repeat:no-repeat,no-repeat,repeat; } .showcase2023-2024-frontpage .title,.showcase2023-2024-frontpage .chinese { font-family: 'Rowdies', cursive; background:url(http://bulletin.sis-pik.com/images/showcase2/cs-bg-text.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: darkslategrey; } .showcase20th-frontpage .title,.showcase20th-frontpage .chinese, .showcase20th-innerpage .title,.showcase20th-innerpage .chinese, .showcase20th-frontpage .titledate-new, .showcase20th-innerpage .titledate-new {} .showcase20th-innerpage article { background: white; -webkit-border-radius: 30px; border-radius: 30px; box-shadow:2px 3px 5px rgba(0,0,0,.4); width: 96%; margin: 0 2%; } .showcase20242025smtr1-innerpage article { background: white; -webkit-border-radius: 0 0 30px 30px; border-radius: 0 0 30px 30px; box-shadow:2px 3px 5px rgba(0,0,0,.4); margin: 0; } .showcase2022-frontpage.w3-content { background-size:contain,contain; border: 0.5px solid #005d92; } .wp-block-ugb-container .ugb-container__wrapper .ugb-container__content-wrapper .article-showcase2022 .ugb-container__wrapper .ugb-container__content-wrapper > h2:first-child { background:white; color: #464646; border: none; font-family: "Barlow"; font-size:1.8em; margin-bottom: 2em; } .wp-block-ugb-container .ugb-container__wrapper .ugb-container__content-wrapper .article-showcase20th .ugb-container__wrapper .ugb-container__content-wrapper > h2:first-child, .wp-block-ugb-container .ugb-container__wrapper .ugb-container__content-wrapper .article-showcase20242025smtr1 .ugb-container__wrapper .ugb-container__content-wrapper > h2:first-child { background:white; color: #844787; border: none; font-family: "Barlow"; font-size:1.8em; margin-bottom: 2em; margin-top: 1em; } .wp-block-ugb-container .ugb-container__wrapper .ugb-container__content-wrapper .article-showcase2022 .ugb-container__wrapper .ugb-container__content-wrapper > h3:first-child, .wp-block-ugb-container .ugb-container__wrapper .ugb-container__content-wrapper .article-showcase2022 .ugb-container__wrapper .ugb-container__content-wrapper > h4:first-child, .wp-block-ugb-container .ugb-container__wrapper .ugb-container__content-wrapper .article-showcase20th .ugb-container__wrapper .ugb-container__content-wrapper > h3:first-child, .wp-block-ugb-container .ugb-container__wrapper .ugb-container__content-wrapper .article-showcase20th .ugb-container__wrapper .ugb-container__content-wrapper > h4:first-child, .wp-block-ugb-container .ugb-container__wrapper .ugb-container__content-wrapper .article-showcase20242025smtr1 .ugb-container__wrapper .ugb-container__content-wrapper > h3:first-child, .wp-block-ugb-container .ugb-container__wrapper .ugb-container__content-wrapper .article-showcase20242025smtr1 .ugb-container__wrapper .ugb-container__content-wrapper > h4:first-child { color: #464646; } .wp-block-ugb-container .ugb-container__wrapper .ugb-container__content-wrapper .article-showcase2022 .ugb-container__wrapper .ugb-container__content-wrapper > h2:first-child:after { content: ""; position: relative; display: block; height: 3px; width: 30%; top: 12px; left: 35%; right: 35%; background: #EB9A37; } .wp-block-ugb-container .ugb-container__wrapper .ugb-container__content-wrapper .article-showcase20th .ugb-container__wrapper .ugb-container__content-wrapper > h2:first-child:after, .wp-block-ugb-container .ugb-container__wrapper .ugb-container__content-wrapper .article-showcase20242025smtr1 .ugb-container__wrapper .ugb-container__content-wrapper > h2:first-child:after { content: ""; position: relative; display: block; height: 4px; width: 100%; top: 12px; -webkit-border-radius: 10px; border-radius: 10px; background: linear-gradient(to left, #931191, #a4b2f6, #ff5903); } .the-content-showcase2022, .the-content-showcase2023-2024 { overflow: hidden; border-radius: 20px; } .article-showcase2022 .ugb-container__wrapper .ugb-container__content-wrapper > h2:nth-child(2), .article-showcase20th .ugb-container__wrapper .ugb-container__content-wrapper > h2:nth-child(2), .article-showcase20242025smtr1 .ugb-container__wrapper .ugb-container__content-wrapper > h2:nth-child(2) { margin-bottom: 50px; } .the-header-showcase2022 {background-image: url(http://bulletin.sis-pik.com/images/showcase/inner-header2.jpg);} .the-header-showcase2023-2024 {background-image: url(http://bulletin.sis-pik.com/images/showcase2/cs_arts1-header-singlepage.jpg);} .the-header-showcase2022, .the-header-showcase2023-2024 { content:""; display: block; position: relative; border-radius: 20px; width:100%; height:430px; top:-25px; background-position: center top; background-repeat: no-repeat; background-size: cover; } .footbuts { position: relative; bottom: -35px; width: 100%; z-index: 2; } .the-footer-showcase2022 { background-image: url(http://bulletin.sis-pik.com/images/showcase/inner-footer.jpg); background-position: center top;} .the-footer-showcase2023-2024 { background-image: url(http://bulletin.sis-pik.com/images/showcase2/cs_arts-topbar.jpg); background-position: center bottom;} .the-footer-showcase2022, .the-footer-showcase2023-2024 { display: block; position: relative; width:100%; height:90px; top:0px; background-repeat: no-repeat; background-size: 101% auto; float:left; } .the-footer-showcase2022 .footbuts { position: relative; bottom: -15px; width: 100%; z-index: 2; } .the-footer-showcase2023-2024 .footbuts { position: relative; bottom: 5px; width: 100%; z-index: 2; } /*------------- END SHOWCASE 2022 ---------------*/ /*------------- SHOWCASE 2025-2026 ---------------*/ .page-template-homepage-blank { background-color: #1a5276; background-image: url(http://bulletin.sis-pik.com/wp-content/uploads/2025/07/BG-edu-icon.png); background-blend-mode: soft-light; background-size: 100%; } /*.page-template-homepage-blank_2025-2026 { background-color: #1a5276; background-image: url(http://bulletin.sis-pik.com/wp-content/uploads/2025/07/BG-edu-icon-inv.png); background-blend-mode: soft-light; background-size: 100%; }*/ /*------------- ENDSHOWCASE 2025-2026 ---------------*/ /* ================= END BG THINGS ================= */ .w3-content{ margin:auto; overflow:hidden; } .the-content, .the-content-new, .the-content-VAF, .the-content-CNY, .the-content-NF, .the-content-General2021, .w3-content, .w3-content-chinese{ background-size: 100%; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; max-width: 950px; } .homepage2024-2025.w3-content { max-width: 100vw; } .the-content, .the-content-new, .the-content-VAF, .the-content-CNY, .the-content-NF, .the-content-General2021, .w3-content { margin: 20px auto; } .showcase20242025smtr1-innerpage-opt2.w3-content { margin-top: 20px; background: url(http://bulletin.sis-pik.com/wp-content/uploads/2024/08/showcase-bg.jpg), #820026; background-size: 100%; background-repeat: no-repeat; background-position: center -25px; filter: drop-shadow(2px 2px 3px black); } .showcase20242025smtr1-innerpage.w3-content { margin-top: 20px; background: url(http://bulletin.sis-pik.com/wp-content/uploads/2024/08/showcase-bg2.jpg), #090041; background-size: 100%; background-repeat: no-repeat; background-position: center -50px; filter: drop-shadow(2px 2px 3px black); } .w3-content-chinese { margin: 20px auto 0; } .w3-content, .w3-content-chinese { /* height: 100%; */ } .the-content-theme2022-term1 { background-size: 100%; background-color:white; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; max-width: 950px; margin: 20px auto; } .the-content-showcase2022, .the-content-showcase2023-2024 { background-size: 100%; background-color:white; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; max-width: 950px; margin: 20px auto; } .box-blue { background:skyblue; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; background: skyblue; } .w3-rest{overflow:hidden} .w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell} .w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom} .w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important} @media (max-width:1024px){ .bodyshowcase20th, .bodyshowcase20th-inner, .bodyshowcase20242025smtr1, .bodyshowcase20242025smtr1-inner { background-repeat: no-repeat, repeat-y !important; background-blend-mode: normal; background-size: cover, cover !important; background-attachment: fixed, fixed !important; background-position: center center, center top !important; } } @media (min-width:993px){ .w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%} .w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%} .w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%} .animposter { width:55%; margin-left:22.5%; margin-right:22.5%;} .w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important} } @media (max-width:992px) and (min-width:601px){ .w3-hide-medium{display:none!important} } @media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important} } @media (max-width:768px){ .w3-modal-content{width:500px} .w3-modal{padding-top:50px} .the-content-theme2022-term1,.the-content-showcase2022, .the-content-showcase2023-2024 { margin:0; } .the-header-theme2022-term1,.the-header-theme2022-term1:before { height: 270px; } .titleheader-theme2022.singlepage > p { font-size: 24px; } .titleheader-theme2022.singlepage > p img { width:120px; height:auto; margin:0 auto 10px auto; } .titleheader-theme2022 > p > .titledate-new, .titleheader-theme2022 > p > .titledate-new.singlepage { font-size: .6em; } .menu-content-theme2022 { padding:50px 30px !important; min-height: 350px; font-size:20px; } .logo-footertheme2022.butleft {margin-left:40%} .logo-footertheme2022.butmid {margin:0 1%} .logo-footertheme2022.butright {margin-right:40%} .the-header-showcase2022,.the-header-showcase2022:before { height: 378px; } .titleheader-showcase2022.singlepage > p { font-size: 24px; } .titleheader-showcase2022.singlepage > p img { width:120px; height:auto; margin:0 auto 10px auto; } .titleheader-showcase2022 > p > .titledate-new, .titleheader-showcase2022 > p > .titledate-new.singlepage { font-size: .6em; } .titleheader-showcase2022 > p > .titledate-new.singlepage { top: -3px; } .menu-content-showcase2022 { padding:50px 30px !important; min-height: 350px; font-size:20px; } .the-footer-showcase2022 { height: 72px; } .logo-footershowcase2022.butleft {margin-left:40%} .logo-footershowcase2022.butmid {margin:0 1%} .logo-footershowcase2022.butright {margin-right:40%} .bodyshowcase20th, .bodyshowcase20th-inner, .bodyshowcase20242025smtr1, .bodyshowcase20242025smtr1-inner { background-repeat: no-repeat, repeat-y !important; background-blend-mode: normal; background-size: cover, cover !important; background-attachment: fixed, fixed !important; background-position: center bottom, center top !important; } } @media (max-width:736px){ .w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important } } @media (min-width:601px){ .w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%} .w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%} .w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%} /* .animposter { width:55%; margin-left:22.5%; margin-right:22.5%;} */ } @media (max-width:600px){ .w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px} .w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative} .w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center} .w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%} .navbar-link:hover {font-size:17px;} .logo-footer { width:25% !important; font-size:.7em; } .emptyfooter2 { width:14.5% !important; } .sectionfooter > div > a > p > img, .sectionfooter > div > p > img { width:50%; } } @media (max-width:480px){ .the-content, .the-content-new, .the-content-NF, .the-content-General2021, .the-content-theme2022-term1, .the-content-showcase2022, .the-content-showcase2023-2024, .w3-content { margin: 0px auto; } .the-content-showcase2022, .the-content-showcase2023-2024 { -webkit-border-radius: 0; border-radius: 0; } .the-header-showcase2022 { height: 260px; } .the-header-showcase2022 > img { width: 100px; height: auto; top: 35px; left: 5px; } .the-header-showcase2023-2024 { height: 400px; } .the-header-showcase2023-2024 > img { width: 30vw; height: auto; top: 135px; left: 35vw; } .showcase2023-2024-frontpage { background: url(http://bulletin.sis-pik.com/wp-content/uploads/2024/08/showcase-bg2.jpg); background-size: 200%,170%, auto !important; } .bodyshowcase20th, .bodyshowcase20th-inner { background-repeat: no-repeat, repeat-y !important; background-blend-mode: normal; background-size: contain, cover !important; background-attachment: fixed !important; background-position: center bottom, center top !important; } .bodyshowcase20242025smtr1, .bodyshowcase20242025smtr1-inner { background-repeat: repeat-y, repeat-y !important; background-blend-mode: normal; background-size: cover, cover !important; background-attachment: fixed !important; background-position: center top, center top !important; } .bodyshowcase20th, .bodyshowcase20th-inner { background: url(http://bulletin.sis-pik.com/images/showcase3/students3b.png), url(http://bulletin.sis-pik.com/images/showcase3/bg1.jpg); } .showcase20242025smtr1-innerpage.w3-content { background-size: 170%; background-position: center 0; margin-top: 0; border-radius: 0; } .titleheader-showcase20242025smtr1 { display: block; width: 100%; height: 250px; } .titleheader-showcase20th > p img.logo1 { width: 130px; } .titleheader-showcase20th > p img.logo2 { width: 150px; } .titleheader-showcase20242025smtr1 > div img.logo1, .titleheader-showcase20242025smtr1 > div img.logo2{ width: 100px; } .titleheader-showcase20242025smtr1 .logo-middle .logo1{ width: 34%; margin-top: -20px; margin-left: 33%; margin-right: 33%; } .sectionheader { min-height:330px; } .titleheader > p,.titleheader2 > p,.titleheader3 > p, .titleheader4 > p { font-size:18px; text-shadow: rgba(0,0,0,.3) 3px 2px 0; text-align:center; } .titleheaderNF > p, .titleheaderGeneral2021 > p { font-size:15px; /* text-shadow: rgba(0,0,0,.3) 3px 2px 0; */ text-align:left; } .titleheader > p > .jacktarub { font-family: 'mirageregular'; } .article-box, .article-box2, .article-box3 { padding:0 0 10px 0 !important; margin: 50px 8px 20px 8px !important; } .sislogo { width:20%; } .sectionlogo,.sectionlogo2 { width:30%; } .sectionlogo2.w3-button { padding: 16px; } .flags { text-align: right; } .flags > span, .flagsnew > span { margin:3px; } .flags > span > a > img { width:35px; } .the-header-showcase2022 .flags > span > a > img { width:35px; } .the-header-showcase2023-2024 .flagsnew.singlepage { position: absolute; top: 35px; right: 30px; } .content-container-showcase2023-2024 { width: 100%; padding: 0 10px 200px 10px; background: none; } .content-container-showcase20th, .content-container-showcase20242025smtr1 { width: 100%; padding: 0 10px 50px 10px; background: none; } .content-container-showcase20th-single, .content-container-showcase20242025smtr1-innerpage { width: 100%; padding: 0 10px 200px 10px; background: none; } .content-container-showcase20242025smtr1-single { width: 100%; padding: 0; background: none; } .showcase20th-innerpage .flags, .showcase20242025smtr1-innerpage .flags { text-align: center; } .showcase20th-innerpage .flags a > img, .showcase20242025smtr1-innerpage .flags a > img{ -webkit-filter: none; filter: none; width: 30px; } .showcase20242025smtr1-innerpage .flags a > img { padding-bottom: 5px; } .flagsnew img { width: 20px; } .flagsnew.singlepage { position: relative; top: -48px; right: 0; } .the-header-showcase2022 .flagsnew.singlepage { top: 40px; right: 15px; } .the-header-showcase2022 .sectionheader.singlepage { top: 120px; text-shadow: 2px 2px 3px rgb(0 0 0 / 40%); } article.chinese .flagsnew.singlepage { position: relative; top: -74px; right: 0; } .titleheader,.titleheader2,.titleheader3 { width:45%; } .titleheader4 { width:70%; } .titleheaderNF { width:60%; margin: 0 4em; } .titleheaderGeneral2021 { width:60%; margin: 0 4em; } .titleheader-theme2022 > p { font-size: 26px; } .titleheader-theme2022 > p img { width:120px; height:auto; margin-bottom:10px; } .titleheader-theme2022 > p > .titledate-new { font-size:.6em; } .titleheader-theme2022 > p > .titledate-new:after { left: 32%; right: 32%; width: 36%; } .titleheader-showcase2022 > p { font-size: 33px; } .titleheader-showcase2022 > p img { width:120px; height:auto; margin-bottom:10px; } .titleheader-showcase2022 > p > .titledate-new { font-size:.6em; } .titleheader-showcase2022 > p > .titledate-new:after { left: 32%; right: 32%; width: 36%; } .title-boxZ .titleZ { font-size: 20px; } .titleheader-showcase20th .title, .titleheader-showcase20242025smtr1 .title-box .title, /* showcase20242025smtr1 */ .title-boxZ { font-size: 24px; } .titleheader-showcase20th .titledate-new, .titleheader-showcase20242025smtr1 .title-new, /* showcase20242025smtr1 */ .title-newZ{ font-size: 16px; } .showcase20th-frontpage .titledate-new, .showcase20th-innerpage .titledate-new, .showcase20242025smtr1-frontpage .titledate-new, .showcase20242025smtr1-innerpage .titledate-new, /* showcase20242025smtr1 */ .title-newZ { text-shadow: 1px 1px 2px rgba(0,0,0,.6); -webkit-text-shadow: 1px 1px 2px rgba(0,0,0,.6); } .sislogo2 { width: 20%; } .logo-footerNF, .logo-footerGeneral2021 { width: 2em; padding: 0; margin: 0.3em; } .sectionfooterNF, .sectionfooterGeneral2021 { width: 100%; background-size: 100%; padding: 0 0.5em 4em; } .sectionfooter > div > a { font-size:10px; } .content-container { padding: 10px; } .content-container-theme2022 { width: 100%; padding: 0 2px 80px 2px; background: none; } .content-container-showcase2022 { width: 100%; padding: 0 2px 80px 2px; background: none; } .article-box-single-theme2022 { margin: 0 5px 200px 5px; } .article-box-single-showcase2022 { margin: 0 5px 200px 5px; } .article-box-single-showcase20th { background-color: rgba(255,255,255,1); border: 1px #a8a8a8 none; margin: 0 0 20px 0; -webkit-border-radius: 30px; border-radius: 30px; box-shadow: 2px 3px 5px rgba(0,0,0,.4); width: 100%; } .article-box-single-showcase20242025smtr1 { -webkit-border-radius: 0 0 30px 30px; border-radius: 0 0 30px 30px; } .article-showcase20242025smtr1 { padding: 0 0 10px 0 !important; margin: 0 20px 250px 20px !important; } .article-showcase20242025smtr1 .wp-block-image > .alignleft { width: 40vw; } .menu-content-theme2022 { padding:50px 30px !important; min-height: 350px; font-size:18px; } .menu-content-showcase2022 { padding:50px 30px !important; min-height: 350px; font-size:18px; } .chinese .menu-content-theme2022, .chinese .menu-content-showcase2022 { font-size:17px; } .theme2022-term1-frontpage.w3-content { background-image:url(http://bulletin.sis-pik.com/images/vr/assets/vr-frontpage3.jpg); background-size: cover; background-position:center bottom; } .showcase2022-frontpage.w3-content { background-image:url(http://bulletin.sis-pik.com/images/showcase/Showcase_bg-email3.jpg); background-size: cover; background-position:center bottom; -webkit-border-radius:0; border-radius:0; } .the-header-theme2022-term1:before { content: ""; background-image: url(http://bulletin.sis-pik.com/images/vr/assets/vr-header-sml2.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; } .the-header-showcase2022:before { content: ""; background-image: url(http://bulletin.sis-pik.com/images/vr/assets/vr-header-sml2.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; } .logo-footertheme2022 { display: inline-block; width: 10%; padding: 0; } .logo-footershowcase2022 { display: inline-block; width: 10%; padding: 0; } .the-footer-showcase2022 { height: 40px; } .the-footer-showcase2022 .footbuts { bottom: 20px; width: 100%; } .logo-footertheme2022.butleft {margin-left:30%} .logo-footertheme2022.butmid {margin:0 4%} .logo-footertheme2022.butright {margin-right:auto} .logo-footershowcase2022.butleft {margin-left:30%} .logo-footershowcase2022.butmid {margin:0 4%} .logo-footershowcase2022.butright {margin-right:auto} } @media (max-width:424px){ .the-header-theme2022-term1 { height:256px; } .the-header-showcase2022, .the-header-showcase2023-2024 { height:210px; } .the-header-showcase2022 .flags > span > a > img, .the-header-showcase2023-2024 .flags > span > a > img { width: 25px; } .the-header-showcase2022 > img, .the-header-showcase2023-2024 > img { width: 90px; height: auto; top: 35px; left: 0; } .the-header-showcase2022 .sectionheader.singlepage, .the-header-showcase2023-2024 .sectionheader.singlepage { top: 82px; } .titleheader-showcase2022.singlepage > p, .titleheader-showcase2023-2024.singlepage > p { font-size: 22px; } .the-header-theme2022-term1:before { content: ""; height:256px; background-image: url(http://bulletin.sis-pik.com/images/vr/assets/vr-header-sml2.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; } .the-header-showcase2022:before, .the-header-showcase2023-2024:before { content: ""; height:256px; background-image: url(http://bulletin.sis-pik.com/images/vr/assets/vr-header-sml2.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; } .sectionheader.singlepage { top: -108%; } .article-theme2022 .wp-block-image.drdan img { width: 293px; height: auto; } .article-showcase2022 .wp-block-image.drdan img, .article-showcase2023-2024 .wp-block-image.drdan img, .article-showcase20th .wp-block-image.drdan img, .article-showcase20242025smtr1 .wp-block-image.drdan img { width: 293px; height: auto; } .wp-block-image.drdan .alignleft { float: left; margin: 0.5em 0em 0.5em 0; } .the-footer-showcase2022, .the-footer-showcase2023-2024 { height: 35px; } } @media (max-width:375px){ .the-header-showcase2023-2024 .flagsnew.singlepage { top: 216px; right: 40vw; width: 30vw; } .sectionheader { min-height: 290px; } } @media (max-width:370px){ .the-header-showcase2022, .the-header-showcase2023-2024 { height:200px; } .the-header-showcase2022 .flags > span > a > img, .the-header-showcase2023-2024 .flags > span > a > img { width: 25px; } .the-header-showcase2022 > img, .the-header-showcase2023-2024 > img { width: 70px; height: auto; top: 35px; left: 0; } .the-header-showcase2022 .sectionheader.singlepage, .the-header-showcase2023-2024 .sectionheader.singlepage { top: 84px; } .titleheader-showcase2022.singlepage > p, .titleheader-showcase2023-2024.singlepage > p { font-size: 20px; } .titleheader-showcase2022 > p, .titleheader-showcase2023-2024 > p { font-size: 30px; } } @media (max-width:320px){ .the-footer-showcase2022, .the-footer-showcase2023-2024 { height: 30px; } .sectionheader { min-height: 250px; } } .bold {font-weight:bold;} .w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0} .w3-top-printable {position:absolute;top:0;width:100%;z-index:1} .w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2} .w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0} .w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0} .w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)} .w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)} .w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)} .w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} .w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} .w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none} .w3-display-position{position:absolute} .w3-circle{border-radius:50%} .w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px} .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px} .w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px} .w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px} .w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word} .w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%} .w3-card,.w3-card-2{ -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5); box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5); } .w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)} .w3-card-5{ -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5); box-shadow: 0px 2px 3px 3px rgba(0,0,0,0.5); } .w3-spin{animation:w3-spin 2s infinite linear} @keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}} .w3-animate-fading{animation:fading 10s infinite} @keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}} .w3-animate-opacity{animation:opac 0.8s} @keyframes opac{from{opacity:0} to{opacity:1}} .w3-animate-top{position:relative;animation:animatetop 0.4s} @keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} .w3-animate-slidetop{position:relative;animation:animateslidetop 0.8s} @keyframes animateslidetop{ from{top:-150px;opacity:0;} to{top:0;opacity:1;} } @keyframes animateslidefromtop{ from{top:0;opacity:0;} to{top:150px;opacity:1;} } .w3-animate-left{position:relative;animation:animateleft 0.4s} @keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} .w3-animate-right{position:relative;animation:animateright 0.4s} @keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}} .w3-animate-bottom{position:relative;animation:animatebottom 0.4s} @keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} .w3-animate-zoom {animation:animatezoom 0.6s} @keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1);}} .w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important} .w3-opacity,.w3-hover-opacity:hover{opacity:0.60} .w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1} .w3-opacity-max{opacity:0.25} .w3-opacity-min{opacity:0.75} .w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)} .w3-greyscale,.w3-grayscale{filter:grayscale(75%)} .w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)} .w3-sepia{filter:sepia(75%)} .w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)} .w3-sepia-min{filter:sepia(50%)} .w3-tiny{font-size:10px!important} .w3-small{font-size:12px!important} .w3-medium{font-size:15px!important} .w3-large{font-size:16px!important; line-height:18px;} .w3-xlarge{font-size:24px!important} .w3-xxlarge{font-size:36px!important} .w3-xxxlarge{font-size:48px!important} .w3-jumbo{font-size:64px!important} .w3-left-align{text-align:left!important} .w3-right-align{text-align:right!important} .w3-justify{text-align:justify!important} .w3-center{text-align:center!important} .w3-border-0{border:0!important} .w3-border{border:1px solid #ccc!important} .w3-border-top{border-top:1px solid #ccc!important} .w3-border-bottom{border-bottom:1px solid #ccc!important} .w3-border-left{border-left:1px solid #ccc!important} .w3-border-right{border-right:1px solid #ccc!important} .w3-topbar{border-top:6px solid #ccc!important} .w3-bottombar{border-bottom:6px solid #ccc!important} .w3-leftbar{border-left:6px solid #ccc!important} .w3-rightbar{border-right:6px solid #ccc!important} .w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important} .w3-margin{margin:16px!important} .w3-margin-top{margin-top:16px!important} .w3-margin-bottom{margin-bottom:16px!important} .w3-margin-left{margin-left:16px!important} .w3-margin-right{margin-right:16px!important} .w3-padding-small{padding:4px 8px!important} .w3-padding{padding:8px 8px!important} .w3-padding-medium{padding:8px 16px!important} .w3-padding-large{padding:12px 24px!important} .w3-padding-8{padding-top:8px!important;padding-bottom:8px!important} .w3-padding-16{padding-top:16px!important;padding-bottom:16px!important} .w3-padding-24{padding-top:24px!important;padding-bottom:24px!important} .w3-padding-32{padding-top:32px!important;padding-bottom:32px!important} .w3-padding-48{padding-top:48px!important;padding-bottom:48px!important} .w3-padding-64{padding-top:0!important;padding-bottom:0!important} .w3-left{float:left!important} .w3-right{float:right!important} .w3-button:hover{color:#000!important;background-color:none!important} .w3-transparent,.w3-hover-none:hover{background-color:transparent!important} .w3-hover-none:hover{box-shadow:none!important} /* Colors */ .w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important} .w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important} .w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important} .w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important} .w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important} .w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important} .w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important} .w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important} .w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important} .w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important} .w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important} .w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important} .w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important} .w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important} .w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important} .w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important} .w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important} .w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important} .w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important} .w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important} .w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important} .w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important} .w3-WS,.w3-hover-swablue:hover{color:#000!important;background-color:#FF9451!important} .w3-EYES{color:#000!important;background-color:#E8624E!important} .w3-MSHS{color:#000!important;background-color:#5DDDD3!important} .w3-UGC{color:#000!important;background-color:#F09B27!important} .w3-calendar{color:#000!important;background-color:#35CCFF!important} .w3-WS,.w3-EYES,.w3-MSHS,.w3-UGC,.w3-calendar {z-index:100; background-repeat:no-repeat; background-position:center center; background-size:contain;} .w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important} .w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important} .w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important} .w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important} .w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important} .w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important} .w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important} .w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important} .w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important} .w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important} .w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important} .w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important} .w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important} .w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important} .w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important} .w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important} .w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important} .w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important} .w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important} .w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important} .w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important} .w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important} .w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important} .w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important} .w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important} .w3-text-red,.w3-hover-text-red:hover{color:#f44336!important} .w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important} .w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important} .w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important} .w3-text-white,.w3-hover-text-white:hover{color:#fff!important} .w3-text-black,.w3-hover-text-black:hover{color:#000!important} .w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important} .w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important} .w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important} .w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important} .w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important} .w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important} .w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important} .w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important} .w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important} .w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important} .w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important} .w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important} .w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important} .w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important} .w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important} .w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important} .w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important} .w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important} .w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important} .w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important} .w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important} .w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important} .w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important} .w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important} .w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important} .w3-border-black,.w3-hover-border-black:hover{border-color:#000!important} .w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important} .w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important} .w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important} .w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important} .w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important} #anim {margin:0 25% 0 25%; width:50%; } /* ------- HOVER -------- */ /* Flashing */ .hover13 img:hover { opacity: 1; -webkit-animation: flash 1s; animation: flash 1s; } @-webkit-keyframes flash { 0% {opacity: .4;} 100% {opacity: 1;} } @keyframes flash { 0% {opacity: .4;} 100% {opacity: 1;} } /* TadaShake */ .navbar-link:hover .navbar .tadashake{ -webkit-transition: -webkit-transform 1s; /* Safari */ transition: transform 1s; } .navbar-link:hover .navbar .tadashake { -webkit-transform: rotate(360deg); /* Safari */ transform: rotate(360deg); } .navbar-link:hover .navbar .tadashake { animation: animationFrames linear 1s; animation-iteration-count: 1; transform-origin: 50% 50%; -webkit-animation: animationFrames linear 1s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -moz-animation: animationFrames linear 1s; -moz-animation-iteration-count: infinite; -moz-transform-origin: 50% 50%; -o-animation: animationFrames linear 1s; -o-animation-iteration-count: infinite; -o-transform-origin: 50% 50%; -ms-animation: animationFrames linear 1s; -ms-animation-iteration-count: infinite; -ms-transform-origin: 50% 50%; } @keyframes animationFrames{ 0% {transform: rotate(0deg) scaleX(1.00) scaleY(1.00);} 10% {transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);} 20% {transform: rotate(-3deg) scaleX(0.80) scaleY(0.80) ;} 30% {transform: rotate(3deg) scaleX(1.20) scaleY(1.20);} 40% {transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);} 50% {transform: rotate(3deg) scaleX(1.20) scaleY(1.20);} 60% {transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);} 70% {transform: rotate(3deg) scaleX(1.20) scaleY(1.20);} 75% {transform: rotate(-3deg) scaleX(1.10) scaleY(1.10);} 80% {transform: rotate(3deg) scaleX(1.05) scaleY(1.05);} 100% {transform: rotate(0deg) scaleX(1.00) scaleY(1.00);} } @-moz-keyframes animationFrames{ 0% {-moz-transform: rotate(0deg) scaleX(1.00) scaleY(1.00);} 10% {-moz-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);} 20% {-moz-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);} 30% {-moz-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);} 40% {-moz-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);} 50% {-moz-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);} 60% {-moz-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);} 70% {-moz-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);} 75% {-moz-transform: rotate(-3deg) scaleX(1.10) scaleY(1.10);} 80% {-moz-transform: rotate(3deg) scaleX(1.05) scaleY(1.05);} 100% {-moz-transform: rotate(0deg) scaleX(1.00) scaleY(1.00);} } @-webkit-keyframes animationFrames { 0% {-webkit-transform: rotate(0deg) scaleX(1.00) scaleY(1.00);} 10% {-webkit-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);} 20% {-webkit-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);} 30% {-webkit-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);} 40% {-webkit-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);} 50% {-webkit-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);} 60% {-webkit-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);} 70% {-webkit-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);} 75% {-webkit-transform: rotate(-3deg) scaleX(1.10) scaleY(1.10);} 80% {-webkit-transform: rotate(3deg) scaleX(1.05) scaleY(1.05);} 100% {-webkit-transform: rotate(0deg) scaleX(1.00) scaleY(1.00);} } @-o-keyframes animationFrames { 0% {-o-transform: rotate(0deg) scaleX(1.00) scaleY(1.00);} 10% {-o-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);} 20% {-o-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);} 30% {-o-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);} 40% {-o-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);} 50% {-o-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);} 60% {-o-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);} 70% {-o-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);} 75% {-o-transform: rotate(-3deg) scaleX(1.10) scaleY(1.10);} 80% {-o-transform: rotate(3deg) scaleX(1.05) scaleY(1.05);} 100% {-o-transform: rotate(0deg) scaleX(1.00) scaleY(1.00);} } /* @-ms-keyframes animationFrames { 0% {-ms-transform: rotate(0deg) scaleX(1.00) scaleY(1.00);} 10% {-ms-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);} 20% {-ms-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);} 30% {-ms-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);} 40% {-ms-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);} 50% {-ms-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);} 60% {-ms-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);} 70% {-ms-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);} 75% {-ms-transform: rotate(-3deg) scaleX(1.10) scaleY(1.10);} 80% {-ms-transform: rotate(3deg) scaleX(1.05) scaleY(1.05);} 100% {-ms-transform: rotate(0deg) scaleX(1.00) scaleY(1.00);} } */ /* ======== SNOW ======== */ .snow1 { background: url(http://bulletin.sis-pik.com/images/snow.png); background-repeat: repeat; width: 100%; height: 700px; position: absolute; top: 0; left: 0; animation: snowOne 10s infinite linear; filter: blur(1px); } .snow2 { background: url(http://bulletin.sis-pik.com/images/snow.png); background-repeat: repeat; width: 100%; height: 700px; position: absolute; top: 0; left: 0; animation: snowTwo 10s infinite linear; background-size: 200px; filter: blur(2px); } .snow3 { background: url(http://bulletin.sis-pik.com/images/snow.png); background-repeat: repeat; width: 100%; height: 650px; position: absolute; top: 0; left: 0; animation: snowThree 10s infinite linear; background-size: 600px; filter: blur(4px); } @keyframes snowOne{ 0% { background-position: 0px 0px; } 100% { background-position: 100px 750px; } } @keyframes snowTwo{ 0% { background-position: 0px -100px; } 100% { background-position: 0px 750px; } } @keyframes snowThree{ 0% { background-position: 0px 100px; } 100% { background-position: 300px 750px; } } /* ======== SNOW END ======== */