diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..18007cf --- /dev/null +++ b/LICENSE @@ -0,0 +1,25 @@ +BSD 2-Clause License + +Copyright (c) 2017, Yen-Chia Hsu +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE +FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL +DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR +SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER +CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, +OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..9272c2b --- /dev/null +++ b/README.md @@ -0,0 +1,65 @@ +# project-website-template +Demo: https://yenchiah.github.io/project-website-template/ + +The current version is v3.43. The last known stable version is [v3.36](https://github.com/yenchiah/project-website-template/tree/277205cb699b02f3f7ba5f9f6ea20d987582c5bf). + +This is a responsive (mobile/desktop) and light-weight HTML/CSS template for building projects or personal websites. If your website does not require complex user interactions, I recommend starting with the empty template (empty.html) and copy codes from the file that contains different layouts (index.html). For building interactive websites, this library also provides several widgets (widgets.html) based on [jQuery](https://jquery.com/) and [jQuery UI](https://jqueryui.com/). Examples that use this template are: +- Personal website: [http://yenchiah.me](http://yenchiah.me) (Link to [code repository](https://github.com/yenchiah/yenchiah.github.io)) +- Project website: [http://smellpgh.org](http://smellpgh.org) (Link to [code repository](https://github.com/CMU-CREATE-Lab/smell-pittsburgh-website)) +- Project website: [https://smellmycity.org](https://smellmycity.org) (Link to [code repository](https://github.com/CMU-CREATE-Lab/smell-my-city-website)) +- Project website: [https://smoke.createlab.org](https://smoke.createlab.org) (Link to [code repository](https://github.com/CMU-CREATE-Lab/video-labeling-tool)) +- Project website: [https://periscope.io.tudelft.nl](https://periscope.io.tudelft.nl) (Link to [code repository](https://github.com/TUD-KInD/COCTEAU-TUD)) +- Lab website: [https://multix-amsterdam.github.io/](https://multix-amsterdam.github.io/) (Link to [code repository](https://github.com/MultiX-Amsterdam/multix-amsterdam.github.io)) +- Conference website: [https://www.mmm2024.org/](https://www.mmm2024.org/) (Link to [code repository](https://github.com/MultiX-Amsterdam/MMM24-website)) + +If you would love to keep updating this template, please keep your codes in separate files (custom.css and custom.js) and avoid modifying the following: +- css/frame.css (CSS for the main frame of the website) +- css/controls.css (CSS for control elements that do not require JavaScript) +- css/widgets.css (CSS for widgets that require JavaScript) +- js/widgets.js (JavaScript for widgets) +- js/util.js (JavaScript for general utility functions) +- js/menu.js (JavaScript for loading the menu bar) +- js/footer.js (JavaScript for loading the footer) + +From version 3.0, the menu bar at the top is moved into `menu.html` for better management. Also, from version 3.37, the footer at the bottom is moved into `footer.html`. Each template page will now use jQuery to load the menu bar and the footer, as shown below: +```html + + +``` +The `menu.js` script loads `menu.html` to `menu-container`. +```html +
+``` +The `footer.js` script loads `footer.html` to `footer-container`. +```html +
+``` + +This template is tested and worked on: +- macOS 12.4 + - Chrome 103 + - Safari 15.5 + - Firefox 103 + - Edge 103 +- Android 12 + - Chrome 103 +- iOS 15.5 + - Chrome 103 + - Safari 15.5 + - Firefox 102 + +# Problems and Bugs +Here are the problems and bugs that I plan to address in the future. If you fixed them, please do not hesitate to send me a pull request, and I would be very grateful. Please also report problems and bugs in [GitHub Issues](https://github.com/yenchiah/project-website-template/issues). + +- On mobile Safari, the menu on the top will not close after opening it. This is because the menu icon on mobile Safari retains focus after a touch event, and the menu relies on the loss of focus event of the icon to close. +- On Safari, the survey question that asks users to select photos will display the photos in a weird way after clicking on the checkbox. The reason for this problem is unknown. + +# Future Plans for Feature Enhancement +Here are several features that I plan to add in the future. If you wish to contribute, please email me to discuss the design before submitting pull requests. + +- A slideshow block for showing images or videos + +# Policy for Open Source Contribution +I welcome and appreciate contributions in fixing bugs and enhancing features. However, please avoid submitting pull requests (PRs) that modify the template's existing design without discussing them with me. Please do not submit PRs that are not related to bug fixes or feature enhancements. Editing text in the README file is not encouraged (e.g., fixing grammar errors). PRs with unnecessary editing (e.g., adding unrelated text, changing the design of the template, modifying the README text arbitrarily) or unrelated changes (e.g., changes that are related to only their applications) will be marked as "spam" and "invalid". + +If you are excited to contribute to the new features directly, please explain your design decisions and how your design matches this template's style in the PR. If you fix bugs, please explain which bug you fixed and how you fixed them. The explanations that you put in each PR can greatly help me determine if the changes can be merged into the master branch. PRs with no explanations will highly likely be rejected and marked as "wontfix". diff --git a/css/controls.css b/css/controls.css new file mode 100644 index 0000000..1863fa1 --- /dev/null +++ b/css/controls.css @@ -0,0 +1,448 @@ +/************************************************************************* + * GitHub: https://github.com/yenchiah/project-website-template + * Version: v3.43 + * This CSS file has control elements that do not require JavaScript + * If you want to keep this template updated, avoid modifying this file + * Instead, add your own CSS in the custom.css file + *************************************************************************/ + +.custom-image-button { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + align-items: stretch; + align-content: stretch; + box-sizing: border-box; + text-decoration: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.custom-button { + font-family: 'Open Sans', Helvetica, Arial, sans-serif; + padding: 5px 20px; + text-align: center; + font-size: 14px; + line-height: 15px; + /* outline: none;*/ + border-radius: 2px; + cursor: pointer; + box-shadow: none; + transition: background-color 0.1s, box-shadow 0.1s, border 0.1s; + text-decoration: none; + display: block; + box-sizing: border-box; + color: white; + /* This is a single-line comment */ + /* border: 1px solid #7d7d7d; */ + border: 3px solid black; + /*background-color: #7d7d7d;*/ + background-color: black; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.custom-button:not(:disabled):hover { + background-color: #4d4d4d; + border-color: #4d4d4d; +} + +.custom-button:not(:disabled):active { + background-color: #4d4d4d; + border-color: #4d4d4d; +} + +.custom-button:disabled { + opacity: 0.4; + cursor: default; +} + +.custom-button-primary { + background-color: #729930; + border-color: #729930; +} + +.custom-button-primary:not(:disabled):hover { + background-color: #667D33; + border-color: #667D33; +} + +.custom-button-primary:not(:disabled):active { + background-color: #667D33; + border-color: #667D33; +} + +.custom-button-danger { + background-color: #76B18B; + border-color: #76B18B; +} + +.custom-button-danger:not(:disabled):hover { + background-color: #B2E5DC; + border-color: #B2E5DC; +} + +.custom-button-danger:not(:disabled):active { + background-color: #B2E5DC; + border-color: #B2E5DC; + + +} + +.custom-button-info { + background-color: #17a2b8; + border-color: #17a2b8; +} + +.custom-button-info:not(:disabled):hover { + background-color: #007082; + border-color: #007082; +} + +.custom-button-info:not(:disabled):active { + background-color: #007082; + border-color: #007082; +} + +.custom-button-flat { + font-family: 'Open Sans', Helvetica, Arial, sans-serif; + text-align: center; + font-size: 16px; + line-height: 16px; + outline: none; + border-radius: 48px; + cursor: pointer; + box-shadow: none; + transition: background-color 0.1s, box-shadow 0.1s, border 0.1s; + text-decoration: none; + color: black; + border: 1px solid #777777; + background-color: white; + padding: 13px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + align-content: center; + box-sizing: border-box; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.custom-button-flat.large { + font-size: 18px; + line-height: 18px; + padding: 17px; + border-radius: 56px; +} + +.custom-button-flat.small { + font-size: 14px; + line-height: 14px; + padding: 12px; + border-radius: 42px; +} + +.custom-button-flat:disabled { + opacity: 0.4; + cursor: default; +} + +.custom-button-flat img { + width: 20px; + height: 20px; +} + +.custom-button-flat.small img { + width: 16px; + height: 16px; +} + +.custom-button-flat.large img { + width: 24px; + height: 24px; +} + +.custom-button-flat span { + margin-left: 6px; +} + +input.custom-textbox, +textarea.custom-textbox { + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + box-sizing: border-box; + padding: 5px 10px; + background: rgb(255, 255, 255); + border: 1px solid #7d7d7d; + font-size: 16px; + outline: none; + border-radius: 2px; + resize: vertical; +} + +input.custom-textbox { + min-height: 37px; + max-height: 37px; +} + +textarea.custom-textbox { + min-height: 60px; + max-height: 200px; +} + +input[readonly].custom-textbox, +textarea[readonly].custom-textbox { + cursor: default; + background: rgb(230, 230, 230); +} + +.control-group { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: center; + align-content: stretch; + box-sizing: border-box; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.control-group .custom-image-button { + margin: 10px 0 10px 0; +} + +.control-group .custom-image-button:not(:last-child) { + margin-right: 15px; +} + +.control-group .custom-button { + margin: 10px 0 10px 0; +} + +.control-group .custom-button:not(:last-child) { + margin-right: 15px; +} + +.control-group .custom-button-flat { + margin: 10px 0 10px 0; +} + +.control-group .custom-button-flat:not(:last-child) { + margin-right: 15px; +} + +.control-group .custom-textbox { + margin: 10px 0 10px 0; +} + +.control-group .custom-textbox:not(:last-child) { + margin-right: 15px; +} + +@media screen and (max-width: 500px) { + .stretch-on-mobile { + margin-left: 0 !important; + margin-right: 0 !important; + flex: 1 0 100%; + max-width: 100%; + } +} + +.pulse-white { + box-shadow: 0 0 0 rgba(255, 255, 255, 0.5); + animation: pulse-white 2s infinite; +} + +@-webkit-keyframes pulse-white { + 0% { + -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); + } + + 70% { + -webkit-box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); + } + + 100% { + -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); + } +} + +@keyframes pulse-white { + 0% { + -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); + } + + 70% { + -moz-box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); + box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); + } + + 100% { + -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); + } +} + +.pulse-black { + box-shadow: 0 0 0 rgba(0, 0, 0, 0.5); + animation: pulse-black 2s infinite; +} + +@-webkit-keyframes pulse-black { + 0% { + -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5); + } + + 70% { + -webkit-box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); + } + + 100% { + -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + } +} + +@keyframes pulse-black { + 0% { + -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5); + } + + 70% { + -moz-box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); + box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); + } + + 100% { + -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + } +} + +.pulse-primary { + box-shadow: 0 0 0 rgba(102, 125, 51, 0.5); + animation: pulse-primary 2s infinite; +} + +@-webkit-keyframes pulse-primary { + 0% { + -webkit-box-shadow: 0 0 0 0 rgba(102, 125, 51, 0.5); + } + + 70% { + -webkit-box-shadow: 0 0 0 15px rgba(102, 125, 51, 0.5); + } + + 100% { + -webkit-box-shadow: 0 0 0 0 rgba(102, 125, 51, 0.5); + } +} + +@keyframes pulse-primary { + 0% { + -moz-box-shadow: 0 0 0 0 rgba(102, 125, 51, 0.5); + box-shadow: 0 0 0 0 rgba(102, 125, 51, 0.5); + } + + 70% { + -moz-box-shadow: 0 0 0 15px rgba(0, 123, 255, 0); + box-shadow: 0 0 0 15px rgba(0, 123, 255, 0); + } + + 100% { + -moz-box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); + box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); + } +} + +.pulse-danger { + box-shadow: 0 0 0 rgba(220, 53, 69, 0.5); + animation: pulse-danger 2s infinite; +} + +@-webkit-keyframes pulse-danger { + 0% { + -webkit-box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5); + } + + 70% { + -webkit-box-shadow: 0 0 0 15px rgba(220, 53, 69, 0); + } + + 100% { + -webkit-box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); + } +} + +@keyframes pulse-danger { + 0% { + -moz-box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5); + box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5); + } + + 70% { + -moz-box-shadow: 0 0 0 15px rgba(220, 53, 69, 0); + box-shadow: 0 0 0 15px rgba(220, 53, 69, 0); + } + + 100% { + -moz-box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); + box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); + } +} + +.pulse-info { + box-shadow: 0 0 0 rgba(23, 162, 184, 0.5); + animation: pulse-info 2s infinite; +} + +@-webkit-keyframes pulse-info { + 0% { + -webkit-box-shadow: 0 0 0 0 rgba(23, 162, 184, 0.5); + } + + 70% { + -webkit-box-shadow: 0 0 0 15px rgba(23, 162, 184, 0); + } + + 100% { + -webkit-box-shadow: 0 0 0 0 rgba(23, 162, 184, 0); + } +} + +@keyframes pulse-info { + 0% { + -moz-box-shadow: 0 0 0 0 rgba(23, 162, 184, 0.5); + box-shadow: 0 0 0 0 rgba(23, 162, 184, 0.5); + } + + 70% { + -moz-box-shadow: 0 0 0 15px rgba(23, 162, 184, 0); + box-shadow: 0 0 0 15px rgba(23, 162, 184, 0); + } + + 100% { + -moz-box-shadow: 0 0 0 0 rgba(23, 162, 184, 0); + box-shadow: 0 0 0 0 rgba(23, 162, 184, 0); + } +} \ No newline at end of file diff --git a/css/custom.css b/css/custom.css new file mode 100644 index 0000000..a353ef2 --- /dev/null +++ b/css/custom.css @@ -0,0 +1,34 @@ +/************************************************************************* + * Your custom CSS file + *************************************************************************/ + +.custom-dropdown { + width: 240px; +} + +.custom-textbox { + width: 240px; +} + +#dialog-1, +#dialog-2, +#dialog-3, +#dialog-4, +#share-dialog { + display: none; +} + +#share-url { + width: 100%; + -webkit-touch-callout: default !important; + -webkit-user-select: text !important; + -khtml-user-select: text !important; + -moz-user-select: text !important; + -ms-user-select: text !important; + user-select: text !important; +} + +#share-url-copy-prompt { + display: none; + color: #007bff; +} \ No newline at end of file diff --git a/css/frame.css b/css/frame.css new file mode 100644 index 0000000..72ae456 --- /dev/null +++ b/css/frame.css @@ -0,0 +1,1616 @@ +/************************************************************************* + * GitHub: https://github.com/yenchiah/project-website-template + * Version: v3.43 + * This CSS file is for the website frame + * If you want to keep this template updated, avoid modifying this file + * Instead, add your own CSS in the custom.css file + *************************************************************************/ + +html, +body { + margin: 0; + padding: 0; + background-color: #EDECED; + font-family: 'Open Sans', Helvetica, Arial, sans-serif; + left: 0; + right: 0; + width: auto; +} + +/* This is a hack for FireFox that the tag does not work */ +strong, +b { + font-weight: bold; +} + +a { + outline: none; + cursor: pointer; +} + +img { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +video { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +h1 { + font-size: 30px; + color: #333333; + margin: 30px 0 0 0; + padding: 0; + font-weight: bold; + font-family: 'Open Sans', Helvetica, Arial, sans-serif; +} + +h2 { + font-size: 24px; + color: #333333; + margin: 30px 0 0 0; + padding: 0; + font-weight: bold; + font-family: 'Open Sans', Helvetica, Arial, sans-serif; +} + +h3 { + font-size: 18px; + color: #333333; + margin: 10px 0 0 0; + padding: 0; + font-weight: bold; + font-family: 'Open Sans', Helvetica, Arial, sans-serif; +} + +ul, +ol { + margin: 10px 0 10px 0; +} + +li ol, +li ul { + margin: 0; +} + +hr { + border: 0; + height: 1px; + background: rgb(220, 220, 220); + margin: 0 0 10px 0; +} + +.menu-container { + z-index: 2; + position: relative; + width: 100%; + background-color: #333333; + min-width: 300px; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-shadow: 0 0px 4px rgb(0 0 0 / 32%), 0 0px 10px rgb(0 0 0 / 23%); +} + +.menu { + position: relative; + margin: 0 auto; + max-width: 900px; +} + +.menu .menu-table { + padding: 0px 10px; + width: 100%; + margin: 0; +} + +.menu .menu-highlight { + color: rgb(255, 255, 255) !important; + opacity: 1 !important; + font-weight: 700 !important; +} + +.menu .logo { + margin-left: 20px; +} + +.menu .logo a { + color: rgba(255, 255, 255, 0.8); + font-family: 'Open Sans Condensed', Helvetica, Arial, sans-serif; + font-size: 30px; + text-decoration: none; + font-weight: 700; + flex: 1 auto; + padding: 10px 0; +} + +.menu .logo a:hover { + cursor: pointer; +} + +.menu .logo img { + margin: 0; + padding: 0; +} + +.menu .menu-button { + width: 40px; + height: 40px; + display: none; + cursor: pointer; + margin-right: 20px; +} + +.menu .menu-button img { + width: 30px; + height: 30px; +} + +.menu .menu-items { + align-self: stretch; +} + +.menu .menu-items>a, +.menu .menu-items>div { + color: rgba(255, 255, 255, 0.8); + text-decoration: none; + font-weight: 400; + font-size: 18px; + flex: 1 auto; + transition: opacity 0.1s ease-in-out; + -moz-transition: opacity 0.1s ease-in-out; + -webkit-transition: opacity 0.1s ease-in-out; + font-family: 'Open Sans', Helvetica, Arial, sans-serif; + white-space: nowrap; + display: flex; + align-items: center; + height: 100%; +} + +.menu .menu-items>a:not(:last-child), +.menu .menu-items>div:not(:last-child) { + margin-right: 25px; +} + +.menu .menu-items>a:hover, +.menu .menu-items>div:hover { + color: rgb(255, 255, 255); + opacity: 1; + cursor: pointer; +} + +.menu .menu-items .dropdown { + overflow: hidden; + cursor: pointer; +} + +.menu .menu-items .dropdown .dropbtn { + font-family: inherit; + text-decoration: inherit; + color: inherit; + font-weight: inherit; + font-size: inherit; + transition: inherit; + -moz-transition: inherit; + -webkit-transition: inherit; + white-space: inherit; + display: flex; + align-items: center; + height: 100%; +} + +.menu .menu-items .dropdown i { + color: #ffffff; + margin-left: 5px; +} + +.menu .menu-items .dropdown .dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 100px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; + top: 100%; + border-top: 3px solid #848484; + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; +} + +.menu .menu-items .dropdown .dropdown-content a { + color: black; + padding: 10px 20px; + text-decoration: none; + display: block; + text-align: left; + font-size: 16px; +} + +.menu .menu-items .dropdown .dropdown-content a:hover { + background-color: #ddd; + color: black; +} + +.menu .menu-items .dropdown .dropdown-content a:last-child:hover { + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; +} + +.menu .menu-items .dropdown:hover .dropdown-content { + display: block; +} + +.content-container { + z-index: 1; + position: relative; + width: 100%; + min-width: 300px; +} + +.content { + position: relative; + margin: 0 auto; + font-size: 16px; + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + font-weight: 300; + line-height: 1.5; + max-width: 900px; + overflow-x: auto; +} + +.content p a, +.content ul a, +.content ol a { + text-decoration: none; + color: #005cbf; +} + +.content p a:hover, +.content ul a:hover, +.content ol a:hover { + text-decoration: underline; +} + +.content-table { + padding: 40px 10px; + width: 100%; + margin: 0; +} + +.banner { + position: sticky; + font-size: 16px; + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + font-weight: 300; + line-height: 1.5; + overflow-x: auto; + background-color: black; + display: flex; +} + +.banner .banner-table { + padding: 0; + width: 100%; + margin: 0 auto; + align-self: flex-end; +} + +.banner .banner-table a { + color: #a3cfff; + text-decoration: none; +} + +.banner .banner-table a:hover { + text-decoration: underline; +} + +.banner h1, +.banner h2, +.banner h3, +.banner p, +.banner span { + color: white; +} + +.banner .flex-item { + max-width: 900px; + margin: 20px auto; + padding: 0 30px; +} + +.flex-column { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + align-items: stretch; + align-content: stretch; + box-sizing: border-box; +} + +.flex-row-space-between { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + align-content: stretch; + box-sizing: border-box; +} + +.flex-row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: center; + align-content: stretch; + box-sizing: border-box; +} + +.flex-row-center { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + align-content: stretch; + box-sizing: border-box; +} + +.flex-item-stretch { + flex: 1 auto; +} + +.flex-item-stretch-2 { + flex: 1 auto; +} + +.flex-item-stretch-3 { + flex: 1 auto; +} + +.flex-item-stretch-4 { + flex: 1 auto; +} + +.flex-item-stretch-5 { + flex: 1 auto; +} + +.flex-item { + margin: 0 20px; +} + +.left-align { + float: left; +} + +.right-align { + float: right; +} + +.full-width { + width: 100%; +} + +.badge-text { + font-size: 30px; + font-weight: 700; +} + +.text { + margin: 10px 0 10px 0; + padding: 0; +} + +.text-large-margin { + margin: 15px 0 15px 0; + padding: 0; +} + +.text-small-margin { + margin: 5px 0 5px 0; + padding: 0; +} + +.text-no-margin { + margin: 0; + padding: 0; +} + +.scrollable-image-container { + overflow: auto; + border: 1px solid #666666; + display: grid; + width: fit-content; + margin: 15px 0; +} + +.scrollable-image-container.center { + margin-left: auto; + margin-right: auto; +} + +.scrollable-image { + border-radius: 2px; + margin: 0; + overflow: auto; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: flex; +} + +.scrollable-image.center { + margin-left: auto; + margin-right: auto; +} + +.image { + border-radius: 2px; + width: 100%; + margin: 15px 0; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: flex; +} + +.image.center { + align-self: center; +} + +.image img, +.image video { + width: 100%; + height: 100%; + box-sizing: border-box; + display: table-cell; + overflow: hidden; + border-radius: 2px; +} + +.adaptive-image { + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +.image-wrap-text { + float: left; + margin: 5px 40px 25px 0; +} + +.image-caption { + width: 100%; + text-align: center; + margin-top: -10px; + margin-bottom: 10px; +} + +.max-width-400 { + max-width: 400px; +} + +.max-width-140 { + max-width: 140px; +} + +ol.publication { + display: flex; + flex-direction: column-reverse; + list-style: none; + margin: 7px 0 7px 0; + padding: 0; + flex-wrap: wrap; +} + +ol.publication li { + display: flex; + align-items: baseline; + margin: 0; + padding: 0; +} + +ol.publication li p:before { + line-height: 1; + margin-right: 5px; +} + +ol.publication.C-list { + counter-reset: C-counter; +} + +ol.publication.C-list li p { + counter-increment: C-counter; +} + +ol.publication.C-list li p:before { + content: "[C" counter(C-counter)"]"; +} + +ol.publication.J-list { + counter-reset: J-counter; +} + +ol.publication.J-list li p { + counter-increment: J-counter; +} + +ol.publication.J-list li p:before { + content: "[J" counter(J-counter)"]"; +} + +ol.publication.T-list { + counter-reset: T-counter; +} + +ol.publication.T-list li p { + counter-increment: T-counter; +} + +ol.publication.T-list li p:before { + content: "[T" counter(T-counter)"]"; +} + +ol.publication.O-list { + counter-reset: O-counter; +} + +ol.publication.O-list li p { + counter-increment: O-counter; +} + +ol.publication.O-list li p:before { + content: "[O" counter(O-counter)"]"; +} + +ol.publication.P-list { + counter-reset: P-counter; +} + +ol.publication.P-list li p { + counter-increment: P-counter; +} + +ol.publication.P-list li p:before { + content: "[P" counter(P-counter)"]"; +} + +ol.publication.M-list { + counter-reset: M-counter; +} + +ol.publication.M-list li p { + counter-increment: M-counter; +} + +ol.publication.M-list li p:before { + content: "[M" counter(M-counter)"]"; +} + +ol.publication.F-list { + counter-reset: F-counter; +} + +ol.publication.F-list li p { + counter-increment: F-counter; +} + +ol.publication.F-list li p:before { + content: "[F" counter(F-counter)"]"; +} + +ol.publication.A-list { + counter-reset: A-counter; +} + +ol.publication.A-list li p { + counter-increment: A-counter; +} + +ol.publication.A-list li p:before { + content: "[A" counter(A-counter)"]"; +} + +ol.nested { + list-style: none; + counter-reset: item; +} + +ol.nested>li:before { + counter-increment: item; + content: counters(item, ".") ". "; + padding-right: 0.6em; +} + +.noselect { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.center-align-content { + display: flex; + justify-content: center; + align-items: center; +} + +.left-align-content { + display: flex; + justify-content: flex-start; + align-items: center; +} + +.text-large { + font-size: 20px; +} + +.text-small { + font-size: 12px; +} + +.text-italic { + font-style: italic; +} + +.text-justify { + text-align: justify; +} + +.text-center { + text-align: center; +} + +.iframe-container { + position: absolute; + top: 61px; + bottom: 0; + left: 0; + height: auto; + width: 100%; + min-width: 300px; +} + +.iframe { + border: 0; + width: 100%; + height: 100%; +} + +.iframe-in-body { + width: 100%; + height: 400px; + border: 1px solid #666666; + margin: 15px 0; +} + +.iframe-in-tab { + width: 100%; + height: 400px; + border: 0; + margin: 0; + padding: 0; +} + +.force-no-scroll { + overflow-y: hidden; +} + +.force-scroll { + overflow-y: scroll; +} + +.highlight-text { + font-weight: bold; +} + +.custom-text-info, +.custom-text-info p, +.custom-text-info a { + color: #17a2b8; +} + +.custom-text-info a:hover { + color: #007082; +} + +.custom-text-primary, +.custom-text-primary p, +.custom-text-primary a { + color: #007bff; +} + +.custom-text-primary a:hover { + color: #005cbf; +} + +.custom-text-danger, +.custom-text-danger p, +.custom-text-danger a { + color: #dc3545; +} + +.custom-text-danger a:hover { + color: #a71120; +} + +.gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: left; + align-content: stretch; + box-sizing: border-box; + width: 100%; + padding: 0 5px; +} + +.gallery>a.flex-column, +.gallery>div.flex-column { + color: black; + text-decoration: none; + padding: 15px; + cursor: default; +} + +.gallery>a.flex-column>img, +.gallery>a.flex-column>video, +.gallery>div.flex-column>img, +.gallery>div.flex-column>video { + border-radius: 2px; + width: 100%; + background-image: url(../img/loading.gif); + background-repeat: no-repeat; + background-size: 30px 30px; + background-position: center; + min-height: 50px; +} + +.gallery>a.flex-column>div, +.gallery>div.flex-column>div, +.gallery>a.flex-column>h3, +.gallery>div.flex-column>h3 { + width: 100%; + text-align: center; +} + +.masonry { + column-count: 2; + column-fill: balance; + column-gap: 0; + box-sizing: border-box; + width: 100%; + padding: 0 5px; + position: relative; +} + +.masonry figure { + break-inside: avoid; + page-break-inside: avoid; + border: 0; + color: black; + text-decoration: none; + padding: 10px; + margin: 0; + cursor: default; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border: 5px solid transparent; + position: relative; + box-sizing: border-box; + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + align-items: stretch; + align-content: stretch; +} + +.masonry figure.selected { + border: 5px solid #007bff; + -moz-box-shadow: inset 0 0 4px 1px #6d6d6d; + -webkit-box-shadow: inset 0 0 4px 1px #6d6d6d; + box-shadow: inset 0 0 4px 1px #6d6d6d; +} + +.masonry figure>img, +.masonry figure>video { + width: 100%; + background-image: url(../img/loading.gif); + background-repeat: no-repeat; + background-size: 30px 30px; + background-position: center; + min-height: 50px; + display: block; + box-sizing: border-box; + position: relative; +} + +.masonry figure>figcaption { + position: absolute; + bottom: max(min(2vw, 20px), 15px); + left: max(min(2vw, 20px), 15px); + right: max(min(2vw, 20px), 15px); + font-family: 'Oswald', Helvetica, Arial, sans-serif; + width: auto; + display: block; + box-sizing: border-box; + margin: 0; + padding: 0; + font-size: 25px; + font-size: max(min(6vw, 21px), 16px); + line-height: 1.3; + font-weight: bold; + color: #fff; + text-align: center; + background-color: transparent; + text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; +} + +.masonry figure>figcaption.text-only { + position: initial; + background-color: rgb(80, 80, 80); + padding: 20px 20px; + text-shadow: none; +} + +.masonry figure>figcaption.text-bottom { + position: initial; + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + padding: 5px 5px; + text-shadow: none; + color: #000; + font-weight: normal; + font-size: 16px; +} + +.masonry figure>div { + width: calc(100% - 20px); + display: block; + box-sizing: border-box; + position: absolute; + line-height: 2; + top: 10px; + left: 10px; + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + font-size: 14px; + background-color: rgba(255, 255, 255, 0.5); + color: #000; + text-align: center; + padding: 0; + height: 30px; + margin: 0; +} + +.masonry figure>div>a { + cursor: alias; + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + font-size: 14px; + color: #000; + text-decoration: underline; +} + +.custom-table-container { + display: grid; + width: fit-content; + width: -moz-fit-content; + margin: 15px 0; +} + +.custom-table-container.center { + margin-left: auto; + margin-right: auto; +} + +.custom-table { + display: block; + overflow-x: auto; + border: 1px solid #666666; + border-collapse: collapse; + border-spacing: 0; + empty-cells: show; + margin: 0; + padding: 0; +} + +.custom-table thead { + text-align: left; + border-bottom: 1px solid #666666; +} + +.custom-table tfoot { + border-top: 1px solid #666666; +} + +.custom-table tr.bg-color-gray { + background-color: #dadada; +} + +.custom-table tr.bg-color-light-gray { + background-color: #efefef; +} + +.custom-table td, +.custom-table th { + padding: 5px 10px; +} + +.custom-survey p.custom-answer-survey { + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + box-sizing: border-box; + padding: 5px 10px; + margin-top: 15px; + margin-bottom: 0; + margin-right: 0; + margin-left: 0; + background: rgb(255, 255, 255); + border: 1px solid #7d7d7d; + font-size: 18px; + outline: none; + border-radius: 0; + width: 100%; + white-space: pre-wrap; + word-wrap: break-word; + overflow-y: visible; + overflow-x: hidden; + min-height: 40px; + word-break: break-word; + hyphens: auto; +} + +.custom-survey input.custom-textbox-survey, +.custom-survey textarea.custom-textbox-survey { + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + box-sizing: border-box; + padding: 5px 10px; + background: rgb(255, 255, 255); + border: 1px solid #7d7d7d; + font-size: 18px; + outline: none; + border-radius: 0; + resize: none; + width: 100%; + white-space: pre-wrap; + word-wrap: break-word; + overflow-y: visible; + overflow-x: hidden; + min-height: 130px; +} + +.custom-survey input[readonly].custom-textbox-survey, +.custom-survey textarea[readonly].custom-textbox-survey { + cursor: default; + background: rgb(230, 230, 230); +} + +.custom-survey .custom-radio-group-survey { + column-count: 1; + column-fill: balance; + column-gap: 0; +} + +.custom-survey .custom-radio-group-survey.image-only { + column-count: 2; + column-fill: balance; + column-gap: 0; +} + +.custom-survey .custom-radio-group-survey div { + display: flex; + position: relative; + width: 100%; + break-inside: avoid; +} + +.custom-survey .custom-radio-group-survey label>img { + width: calc(100% - 5px); + margin-top: 5px; + margin-bottom: 10px; + border-radius: 51%; + box-shadow: 0 0px 4px rgba(0, 0, 0, 0.32), 0 0px 10px rgba(0, 0, 0, 0.23); +} + +.custom-survey .custom-radio-group-survey input[type="radio"]+label, +.custom-survey .custom-radio-group-survey input[type="checkbox"]+label { + position: relative; + padding: 10px 10px 10px 48px; + cursor: pointer; + font-size: 16px; + line-height: 1.8; + display: grid; + color: black; + border: 0; + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 100%; +} + +.custom-survey .custom-radio-group-survey.image-only input[type="radio"]+label, +.custom-survey .custom-radio-group-survey.image-only input[type="checkbox"]+label { + padding: 10px; +} + +.custom-survey .custom-radio-group-survey input[type="radio"]+label>figure, +.custom-survey .custom-radio-group-survey input[type="checkbox"]+label>figure { + break-inside: avoid; + page-break-inside: avoid; + border: 0; + color: black; + text-decoration: none; + padding: 0; + margin: 0 auto; + cursor: pointer; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + position: relative; + box-sizing: border-box; + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + align-items: stretch; + align-content: stretch; + width: 100%; +} + +.custom-survey .custom-radio-group-survey input[type="radio"]+label>figure>img, +.custom-survey .custom-radio-group-survey input[type="radio"]+label>figure>video, +.custom-survey .custom-radio-group-survey input[type="checkbox"]+label>figure>img, +.custom-survey .custom-radio-group-survey input[type="checkbox"]+label>figure>video { + width: 100%; + background-image: url(../img/loading.gif); + background-repeat: no-repeat; + background-size: 30px 30px; + background-position: center; + min-height: 50px; + display: block; + box-sizing: border-box; + position: relative; +} + +.custom-survey .custom-radio-group-survey input[type="radio"]+label>figure>figcaption, +.custom-survey .custom-radio-group-survey input[type="checkbox"]+label>figure>figcaption { + position: absolute; + bottom: max(min(2vw, 10px), 5px); + left: max(min(2vw, 10px), 5px); + right: max(min(2vw, 10px), 5px); + font-family: 'Oswald', Helvetica, Arial, sans-serif; + width: auto; + display: block; + box-sizing: border-box; + margin: 0; + padding: 0; + font-size: 25px; + font-size: max(min(4.5vw, 20px), 16px); + line-height: 1.3; + font-weight: bold; + color: #fff; + text-align: center; + background-color: transparent; + text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; +} + +.custom-survey .custom-radio-group-survey input[type="radio"]+label>figure>figcaption.text-only, +.custom-survey .custom-radio-group-survey input[type="checkbox"]+label>figure>figcaption.text-only { + position: initial; + background-color: rgb(80, 80, 80); + padding: 25px 25px; + text-shadow: none; +} + +.custom-survey .custom-radio-group-survey input[type="radio"]+label>figure>div, +.custom-survey .custom-radio-group-survey input[type="checkbox"]+label>figure>div { + width: 100%; + display: block; + box-sizing: border-box; + position: absolute; + line-height: 2; + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + font-size: 14px; + background-color: rgba(255, 255, 255, 0.5); + color: #000; + text-align: center; + padding: 0; + height: 30px; + margin: 0; +} + +.custom-survey .custom-radio-group-survey input[type="radio"]+label>figure>div>a, +.custom-survey .custom-radio-group-survey input[type="checkbox"]+label>figure>div>a { + cursor: alias; + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + font-size: 14px; + color: #000; + text-decoration: underline; +} + +.custom-survey .custom-radio-group-survey input[type="radio"]:not(:disabled):hover, +.custom-survey .custom-radio-group-survey input[type="checkbox"]:not(:disabled):hover { + color: #333333; + background-color: #eeeeee; +} + +.custom-survey .custom-radio-group-survey input[type="radio"]:disabled, +.custom-survey .custom-radio-group-survey input[type="checkbox"]:disabled { + opacity: 0.4; +} + +.custom-survey .custom-radio-group-survey input[type="radio"], +.custom-survey .custom-radio-group-survey input[type="checkbox"] { + padding: 0; + text-align: center; + outline: none; + cursor: pointer; + box-shadow: none; + transition: background-color 0.1s, box-shadow 0.1s; + text-decoration: none; + box-sizing: border-box; + background-color: white; + border: 0; + border-spacing: 0; + display: inline-block; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + position: absolute; + left: -9999px; +} + +.custom-survey .custom-radio-group-survey input[type="radio"]:checked+label, +.custom-survey .custom-radio-group-survey input[type="checkbox"]:checked+label { + color: white; + background-color: #007bff; +} + +.custom-survey .custom-radio-group-survey input[type="radio"]+label:before, +.custom-survey .custom-radio-group-survey input[type="checkbox"]+label:before { + content: ''; + position: absolute; + left: 14px; + top: 14px; + width: 20px; + height: 20px; + border: 1px solid #aaa; + background: #fff; + z-index: 1; +} + +.custom-survey .custom-radio-group-survey input[type="radio"]+label:before { + border-radius: 100%; +} + +.custom-survey .custom-radio-group-survey input[type="checkbox"]+label:before { + border-radius: 2px; +} + +.custom-survey .custom-radio-group-survey input[type="radio"]+label:after, +.custom-survey .custom-radio-group-survey input[type="checkbox"]+label:after { + content: ''; + width: 14px; + height: 14px; + background: #005cbf; + position: absolute; + top: 18px; + left: 18px; + -webkit-transition: all 0.1s ease; + transition: all 0.1s ease; + z-index: 1; +} + +.custom-survey .custom-radio-group-survey input[type="radio"]+label:after { + border-radius: 100%; +} + +.custom-survey .custom-radio-group-survey input[type="checkbox"]+label:after { + border-radius: 2px; +} + +.custom-survey .custom-radio-group-survey input[type="radio"]:not(:checked)+label:after, +.custom-survey .custom-radio-group-survey input[type="checkbox"]:not(:checked)+label:after { + opacity: 0; + -webkit-transform: scale(0); + transform: scale(0); +} + +.custom-survey .custom-radio-group-survey input[type="radio"]:checked+label:after, +.custom-survey .custom-radio-group-survey input[type="checkbox"]:checked+label:after { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); +} + +.custom-survey { + padding: 25px; + background-color: #e7e7e7; + border: 1px solid #2f2f2f; + border-radius: 0; + display: flex; + flex-direction: column; + flex-wrap: nowrap; +} + +.custom-survey .text { + margin-top: 0; + margin-bottom: 0; + color: black; +} + +.custom-survey h3 { + margin-top: 0; +} + +.custom-survey .custom-textbox-survey { + color: black; +} + +.custom-survey textarea.custom-textbox-survey::-webkit-input-placeholder { + /* Edge */ + color: #a8a8a8; +} + +.custom-survey textarea.custom-textbox-survey:-ms-input-placeholder { + /* Internet Explorer */ + color: #a8a8a8; +} + +.custom-survey textarea.custom-textbox-survey::placeholder { + color: #a8a8a8; +} + +.custom-survey.answer-mode { + background-color: #afafaf; + border: 1px solid #5d5d5d; +} + +.custom-survey.answer-mode .custom-radio-group-survey input[type="radio"]+label, +.custom-survey.answer-mode .custom-radio-group-survey input[type="checkbox"]+label { + border: 3px solid #afafaf; +} + +.custom-survey.answer-mode .custom-radio-group-survey input[type="radio"]:not(.highlight)+label, +.custom-survey.answer-mode .custom-radio-group-survey input[type="checkbox"]:not(.highlight):checked+label { + color: black; + background-color: #afafaf; +} + +.custom-survey.answer-mode .custom-radio-group-survey input[type="radio"].highlight+label, +.custom-survey.answer-mode .custom-radio-group-survey input[type="checkbox"].highlight+label { + box-shadow: 0px 0px 0px 5px white inset; + background-color: #007bff; + color: white; +} + +.custom-survey.answer-mode .custom-textbox-survey { + color: #636363; +} + +.custom-survey.answer-mode .custom-textbox-survey:disabled { + background: #dddddd; +} + +.no-top-margin { + margin-top: 0; +} + +.no-bottom-margin { + margin-bottom: 0; +} + +.break-long-url { + /* These are technically the same, but use both */ + overflow-wrap: break-word; + word-wrap: break-word; + + -ms-word-break: break-all; + /* This is the dangerous one in WebKit, as it breaks things wherever */ + word-break: break-all; + /* Instead use this non-standard one: */ + word-break: break-word; + + /* Adds a hyphen where the word breaks, if supported (No Blink) */ + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; +} + +.graph-title { + font-size: 20px; + margin-bottom: 0; + margin-top: 15px; +} + +.add-top-margin { + margin-top: 15px; +} + +.add-top-margin-small { + margin-top: 5px; +} + +.add-top-margin-large { + margin-top: 30px; +} + +.add-bottom-margin { + margin-bottom: 15px; +} + +.add-bottom-margin-small { + margin-bottom: 5px; +} + +.add-bottom-margin-large { + margin-bottom: 30px; +} + +.overlay-text { + position: absolute; + top: 35%; + left: 50%; + transform: translate(-50%, -50%); + background: rgba(255, 122, 89, .01); + font-family: 'Courgette'; + font-size: 1200%; + color: #fff; + padding: 10px 20px; + text-align: center; +} + + +.doodlebox { + font-size: 1%; + position: absolute; + border:solid 1px #41403E; + color: #EDECED; + + position: sticky; + font-size: 16px; + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + font-weight: 300; + line-height: 1.5; + overflow-x: auto; + background-color: black; + display: flex; + padding: 0px; + border-top-left-radius: 255px 15px; + border-top-right-radius: 15px 225px; + border-bottom-right-radius: 225px 15px; + border-bottom-left-radius:15px 255px; + +} + +@media screen and (min-width: 900px) { + .flex-item-stretch { + flex: 1; + } + + .flex-item-stretch-2 { + flex: 2; + } + + .flex-item-stretch-3 { + flex: 3; + } + + .flex-item-stretch-4 { + flex: 4; + } + + .flex-item-stretch-5 { + flex: 5; + } +} + +@media screen and (max-width: 750px) { + .logo { + -webkit-tap-highlight-color: transparent; + } + + .menu .menu-button { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-end; + align-items: center; + align-content: stretch; + box-sizing: border-box; + -webkit-tap-highlight-color: transparent; + } + + .menu .menu-button:focus { + pointer-events: none; + } + + .menu .menu-button:focus+.menu-items { + display: block; + } + + .menu .menu-button:focus+.menu-items>a, + .menu .menu-button:focus+.menu-items>div { + display: block; + } + + .menu .menu-items { + display: none; + width: 100%; + margin-bottom: 10px; + align-self: baseline; + } + + .menu .menu-items:hover { + display: block; + } + + .menu .menu-items>a:not(:last-child), + .menu .menu-items>div:not(:last-child) { + margin-right: 0; + } + + .menu .menu-items>a, + .menu .menu-items>div { + display: block; + width: 100%; + padding: 10px 0; + border-top: 1px solid rgba(255, 255, 255, 0.5); + } + + .menu .menu-items .dropdown { + padding-bottom: 0; + } + + .menu .menu-items .dropdown .dropdown-content { + margin-top: 10px; + position: relative; + display: block; + background-color: inherit; + color: inherit; + box-shadow: none; + border-top: 0; + } + + .menu .menu-items .dropdown .dropdown-content a { + border-top: 1px solid rgba(255, 255, 255, 0.5); + color: rgba(255, 255, 255, 0.8); + padding: 12px 20px; + text-decoration: none; + display: block; + text-align: left; + } + + .menu .menu-items .dropdown .dropdown-content a::before { + content: ""; + display: inline-block; + width: 0.5em; + height: 0.5em; + margin-right: 0.5em; + margin-top: 0.25em; + border-left: 1px solid; + border-bottom: 1px solid; + vertical-align: top; + opacity: 0.5; + } + + .menu .menu-items .dropdown .dropdown-content a:hover { + background-color: inherit; + color: inherit; + } + + .menu .menu-items .dropdown .dropbtn { + margin-top: 0; + display: block; + width: 100%; + text-align: left; + } + + .image-wrap-text { + max-width: 100%; + margin-bottom: 20px; + margin-right: 0; + } +} + +@media screen and (min-width: 900px) { + .masonry { + column-count: 3; + } + + .custom-survey .custom-radio-group-survey.image-only { + column-count: 2; + } + + .gallery>a.flex-column, + .gallery>div.flex-column { + flex: 1 0 25%; + max-width: 25%; + } +} + +@media screen and (min-width: 700px) and (max-width: 900px) { + .masonry { + column-count: 3; + } + + .custom-survey .custom-radio-group-survey.image-only { + column-count: 2; + } + + .gallery>a.flex-column, + .gallery>div.flex-column { + flex: 1 0 33.3%; + max-width: 33.3%; + } +} + +@media screen and (min-width: 500px) and (max-width: 700px) { + .masonry { + column-count: 2; + } + + .custom-survey .custom-radio-group-survey.image-only { + column-count: 1; + } + + .gallery>a.flex-column, + .gallery>div.flex-column { + flex: 1 0 50%; + max-width: 50%; + } +} + +@media screen and (max-width: 500px) { + .masonry { + column-count: 1; + } + + .custom-survey .custom-radio-group-survey.image-only { + column-count: 1; + } + + .gallery>a.flex-column, + .gallery>div.flex-column { + flex: 1 0 100%; + max-width: 100%; + } +} \ No newline at end of file diff --git a/css/widgets.css b/css/widgets.css new file mode 100644 index 0000000..7691b28 --- /dev/null +++ b/css/widgets.css @@ -0,0 +1,777 @@ +/************************************************************************* + * GitHub: https://github.com/yenchiah/project-website-template + * Version: v3.43 + * This CSS file has widgets for building interactive web applications + * Use this file with widgets.js + * If you want to keep this template updated, avoid modifying this file + * Instead, add your own CSS in the custom.css file + *************************************************************************/ + +.painting-frame { + margin: 15px 0; + width: 100%; + justify-content: center; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: flex; + position: relative; +} + +.painting-frame .painting-frame-item { + position: relative; +} + +.painting-frame .painting-frame-image { + box-shadow: 0 0px 4px rgba(0, 0, 0, 0.32), 0 0px 10px rgba(0, 0, 0, 0.23); + border: 8px solid white; + border-radius: 0; + max-height: 600px; + max-width: 100%; + width: auto; + height: auto; + box-sizing: border-box; + display: table-cell; + overflow: hidden; +} + +.painting-frame .painting-frame-caption { + position: absolute; + width: 100%; + bottom: 0; + left: 50%; + box-sizing: border-box; + transform: translate(-50%, 0); + -ms-transform: translate(-50%, 0); + padding: 15px 25x; + padding: max(min(2vw, 15px), 10px) max(min(3vw, 25px), 15px); + font-size: 25px; + font-size: max(min(6vw, 25px), 16px); + line-height: 1.3; + color: white; + text-align: center; + text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; +} + +.search-box-container { + height: 40px; + position: relative; + display: block; + box-sizing: border-box; + width: 100%; +} + +.search-box-container .search-box { + min-height: 100%; + max-height: 100%; + width: 100%; + text-indent: 40px; + display: block; +} + +.search-box-container .search-box-button { + border: none; + padding: 0; + margin: 0; + box-sizing: border-box; + width: 40px; + height: 100%; + position: absolute; + left: 0; + top: 0; + cursor: pointer; + background-color: transparent; +} + +.search-box-container .search-box-icon { + width: 24px; + height: 24px; + padding: 8px 0px 8px 10px; + fill: #767676; +} + +.search-box-container .search-box-icon:hover { + fill: #292929; + transition: 0.1s; +} + +.dialog-photo-picker { + max-width: 1200px; +} + +.dialog-photo-picker .masonry { + width: calc(100% + 30px); + margin: 0 -15px; + padding: 15px 0 0 0; + display: none; +} + +.dialog-photo-picker .masonry figure { + cursor: pointer; +} + +.dialog-photo-picker .photos-masonry-error-message { + padding: 20px 15px; + display: none; +} + +.custom-tab { + margin: 15px 0; + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + align-items: stretch; + align-content: stretch; + box-sizing: border-box; +} + +.custom-tab .custom-tab-menu { + overflow: hidden; + border: 1px solid #ccc; + background-color: #f1f1f1; + border-bottom: none; + width: fit-content; + width: -moz-fit-content; +} + +.custom-tab .custom-tab-menu-item { + background-color: inherit; + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + transition: 0.3s; + font-size: 17px; + font-family: 'Open Sans', Helvetica, Arial, sans-serif; +} + +.custom-tab .custom-tab-menu-item:hover { + background-color: #ddd; +} + +.custom-tab .custom-tab-menu-item.active { + background-color: #ccc; +} + +.custom-tab .custom-tab-content { + padding: 25px; + border: 1px solid #ccc; + display: none; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + align-items: stretch; + align-content: stretch; + box-sizing: border-box; +} + +.custom-tab .custom-tab-menu.center, +.custom-tab .custom-tab-content .image.center, +.custom-tab .custom-tab-content p.center, +.custom-tab .custom-tab-content table.center { + align-self: center; +} + +.custom-tab .custom-tab-content.no-padding { + padding: 0; +} + +.custom-tab .graph-title.add-top-right-left-padding { + padding-top: 25px; + padding-left: 25px; + padding-right: 25px; + padding-bottom: 5px; +} + +.custom-tab .graph-title.add-bottom-border { + border-bottom: 1px solid #ccc; +} + +.custom-tab .image:first-child, +.custom-tab .custom-table-container:first-child, +.custom-tab .text:first-child, +.custom-tab .graph-title:first-child { + margin-top: 0; +} + +.custom-tab .image:last-child, +.custom-tab .custom-table-container:last-child, +.custom-tab .text:last-child, +.custom-tab .graph-title:last-child { + margin-bottom: 0; +} + +.custom-radio { + padding: 0; + text-align: center; + outline: none; + cursor: pointer; + box-shadow: none; + transition: background-color 0.1s, box-shadow 0.1s; + text-decoration: none; + box-sizing: border-box; + background-color: white; + border: 0; + border-spacing: 0; + display: inline-block; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.custom-radio:not(:disabled):hover { + color: #333333; + background-color: #eeeeee; +} + +.custom-radio:disabled { + opacity: 0.4; +} + +.custom-radio.custom-radio-left [type="radio"]+label { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + border-right: 0 !important; +} + +.custom-radio.custom-radio-right [type="radio"]+label { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} + +.custom-radio.custom-radio-middle [type="radio"]+label { + border-radius: 0 !important; + border-right: 0 !important; +} + +.custom-radio [type="radio"]+label { + position: relative; + padding: 7px 13px 6px 29px; + cursor: pointer; + font-size: 14px; + line-height: 14px; + display: table-cell; + color: #666666; + border: 1px solid #bbbbbb; + border-radius: 2px; + font-family: 'Open Sans', Helvetica, Arial, sans-serif; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.custom-radio [type="radio"] { + position: absolute; + left: -9999px; +} + +.custom-radio [type="radio"]:checked+label { + color: white; + background-color: #007bff; + border-color: #007bff; +} + +.custom-radio [type="radio"]+label:before { + content: ''; + position: absolute; + left: 11px; + top: 7px; + width: 12px; + height: 12px; + border: 1px solid #ddd; + border-radius: 100%; + background: #fff; +} + +.custom-radio [type="radio"]+label:after { + content: ''; + width: 8px; + height: 8px; + background: #005cbf; + position: absolute; + top: 10px; + left: 14px; + border-radius: 100%; + -webkit-transition: all 0.1s ease; + transition: all 0.1s ease; +} + +.custom-radio [type="radio"]:not(:checked)+label:after { + opacity: 0; + -webkit-transform: scale(0); + transform: scale(0); +} + +.custom-radio [type="radio"]:checked+label:after { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); +} + +.custom-dropdown { + position: relative; + display: block; + cursor: pointer; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.custom-dropdown>a { + padding: 5px 26px 5px 8px; + outline: none; + border-radius: 2px; + box-shadow: none; + transition: background-color 0.1s, box-shadow 0.1s, border 0.1s; + text-decoration: none; + display: block; + box-sizing: border-box; + color: black; + height: 28px; + border: 1px solid #7d7d7d; + background-color: white; + width: 100%; + cursor: pointer; +} + +.custom-dropdown.large>a { + height: 37px; + padding: 5px 31px 5px 10px; +} + +.custom-dropdown>a>span { + text-align: left; + font-size: 14px !important; + line-height: 16px; + white-space: nowrap; + overflow: hidden; + display: block; + text-overflow: ellipsis; +} + +.custom-dropdown.large>a>span { + font-size: 16px !important; + line-height: 25px; +} + +.custom-dropdown>a:after { + position: absolute; + content: ""; + top: 13px; + right: 10px; + width: 0; + height: 0; + border: 4px solid transparent; + border-top-color: black; +} + +.custom-dropdown.large>a:after { + top: 17px; + right: 13px; + border: 5px solid transparent; + border-top-color: black; +} + +.custom-dropdown>div { + display: none; + position: absolute; + margin-top: -1px; + border: 1px solid #7d7d7d; + background-color: white; + z-index: 1; + box-sizing: border-box; + border-radius: 2px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + min-width: 100%; +} + +.custom-dropdown>a:focus { + pointer-events: none; +} + +.custom-dropdown>a:focus+div { + display: block; +} + +.custom-dropdown>div:hover { + display: block; +} + +.custom-dropdown>div>a { + color: black; + padding: 5px 8px; + text-decoration: none; + text-align: left; + display: block; + outline: none; + font-size: 14px !important; + line-height: 16px; + height: 26px; + white-space: nowrap; + border-left: 0; + border-top: 0; + border-right: 0; + box-sizing: border-box; +} + +.custom-dropdown.large>div>a { + font-size: 16px !important; + line-height: 25px; + height: 35px; + padding: 5px 10px; +} + +.custom-dropdown>div>a:hover { + background-color: #e1e1e1; + color: black; +} + +.custom-dropdown>div.force-hide { + display: none !important; +} + +.custom-dialog-flat { + font-size: 16px; + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + background-color: white; + background-image: none; + padding: 0; + margin: 0; + border-radius: 2px; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.custom-dialog-flat .ui-dialog-content { + padding: 1.6em 1.8em 1.5em 1.8em; + background-color: white; + background-image: none; +} + +.custom-dialog-flat .ui-dialog-content p { + margin: 0.6em 0; +} + +.custom-dialog-flat .ui-dialog-content p:first-child, +.custom-dialog-flat .ui-dialog-content div:first-child, +.custom-dialog-flat .ui-dialog-content h1:first-child, +.custom-dialog-flat .ui-dialog-content h2:first-child, +.custom-dialog-flat .ui-dialog-content h3:first-child { + margin-top: 0; +} + +.custom-dialog-flat .ui-dialog-content p:last-child, +.custom-dialog-flat .ui-dialog-content div:last-child, +.custom-dialog-flat .ui-dialog-content h1:last-child, +.custom-dialog-flat .ui-dialog-content h2:last-child, +.custom-dialog-flat .ui-dialog-content h3:last-child { + margin-bottom: 0; +} + +.custom-dialog-flat .ui-dialog-titlebar { + background-color: white; + background-image: none; + border: 0; + border-radius: 0px; + color: #2E2F30; + border-bottom: 1px solid #d4d4d4; + padding: 1.2em 1.8em 1.2em 1.8em; +} + +.custom-dialog-flat .ui-dialog-titlebar .ui-dialog-title { + font-family: 'Open Sans', Helvetica, Arial, sans-serif; + text-align: center; + margin: 0 0 0 0.5em; + font-size: 19px; +} + +.custom-dialog-flat .ui-dialog-titlebar .ui-dialog-titlebar-close { + background: white none; + border: 0; + margin: 0; + padding: 0; + position: absolute; + right: 1.5em; + top: 1.3em; + text-indent: 0; +} + +.custom-dialog-flat .ui-dialog-titlebar .ui-dialog-titlebar-close:focus { + outline: none; +} + +.custom-dialog-flat .ui-dialog-titlebar .ui-dialog-titlebar-close:after { + content: ''; + position: absolute; + top: -12px; + bottom: -12px; + left: -12px; + right: -12px; +} + +.custom-dialog-flat .ui-dialog-titlebar .ui-dialog-titlebar-close.ui-state-default { + background: none; + border: none; + height: auto; +} + +.custom-dialog-flat .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-button-icon { + background: none; + border: 0; +} + +.custom-dialog-flat .ui-dialog-titlebar .ui-dialog-titlebar-close .fa-lg { + vertical-align: -0.15em; +} + +.custom-dialog-flat .ui-dialog-buttonpane { + border-width: 0; + margin: 0; + border-top: 1px solid #d4d4d4; + padding: 0em 1.8em 1.2em 1.8em +} + +.custom-dialog-flat .ui-dialog-buttonpane .ui-dialog-buttonset { + width: 100%; + text-align: right; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: center; + align-content: stretch; + box-sizing: border-box; +} + +.custom-dialog-flat .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button { + font-family: 'Open Sans', Helvetica, Arial, sans-serif; + border: 1px solid #7d7d7d; + background: #7d7d7d none; + color: white; + border-radius: 2px; + outline: none; + margin: 1.2em 0 0 1.2em; +} + +.custom-dialog-flat .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button:disabled { + opacity: 0.4; + cursor: default; +} + +.custom-dialog-flat .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button:first-child { + margin-left: 0; +} + +.custom-dialog-flat .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-action-button { + background-color: #007bff; + border: 1px solid #007bff; +} + +.custom-dialog-flat .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.full-width { + width: 100%; + margin-left: 0; +} + +.custom-dialog-flat .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.full-width:not(:first-child) { + margin-top: 0.8em; +} + +.custom-legend { + margin: 15px 0; +} + +.custom-legend .legend-title { + text-align: left; + font-weight: bold; + margin-top: 0; + border: 0; + border-radius: 0; + background: rgba(255, 255, 255); + font-family: 'Open Sans', Helvetica, Arial, sans-serif; + font-size: 14px; + padding: 11px 15px 10px 15px; + border: 1px solid #777; + color: #222; + line-height: 1.3; +} + +.custom-legend .legend-title:hover { + background: rgba(255, 255, 255); + color: #222; +} + +.custom-legend .legend-title:focus { + outline: none; +} + +.custom-legend .legend-title .ui-accordion-header-icon { + float: right; + margin-top: 1px; +} + +.custom-legend .legend-title .ui-icon-triangle-1-s { + display: inline-block; + width: 16px; + height: 16px; + background: + linear-gradient(#fff, #fff), + #666; + background-position: center; + background-size: 50% 2px, 2px 50%; + /*thickness = 2px, length = 50% (25px)*/ + background-repeat: no-repeat; + border-radius: 50%; +} + +.custom-legend .legend-title .ui-icon-triangle-1-e { + display: inline-block; + width: 16px; + height: 16px; + background: + linear-gradient(#fff, #fff), + linear-gradient(#fff, #fff), + #666; + background-position: center; + background-size: 50% 2px, 2px 50%; + /*thickness = 2px, length = 50% (25px)*/ + background-repeat: no-repeat; + border-radius: 50%; +} + +.custom-legend .legend-scale { + border: 0; + line-height: 1.3; + color: black; + border-radius: 0; + background: rgba(255, 255, 255, 0.9); + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + font-size: 14px; + padding: 12px 15px 12px 15px; + border-bottom: 1px solid #777; + border-right: 1px solid #777; + border-left: 1px solid #777; + border-top: 0; + overflow: hidden; +} + +.custom-legend .legend-scale ul { + margin: 0; + padding: 0; + list-style: none; +} + +.custom-legend .legend-scale ul li { + font-size: 80%; + list-style: none; + margin-left: 0; + line-height: 18px; +} + +.custom-legend .legend-scale ul li:not(:last-child) { + margin-bottom: 4px; +} + +.custom-legend ul.legend-labels li span { + display: block; + float: left; + height: 16px; + width: 30px; + margin-right: 7px; + margin-left: 0; + border: 1px solid #777; +} + +.custom-legend .legend-source { + font-size: 12px; + color: #777; + clear: both; + padding-top: 6px; +} + +.custom-legend a { + color: #777; +} + +.ui-widget-overlay { + opacity: 0.7; + background-image: none; + background-color: black; +} + +.control-group .custom-radio { + margin: 10px 0 10px 0; +} + +.control-group .custom-dropdown { + margin: 10px 0 10px 0; +} + +.control-group .custom-dropdown:not(:last-child) { + margin-right: 15px; +} + +.no-x-scroll { + overflow-x: hidden; + overflow-y: scroll; + position: fixed; + height: 100vh; +} + +.no-scroll { + overflow-x: hidden; + overflow-y: hidden; + position: fixed; + height: 100vh; +} + +.fit-parent { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: auto; + height: auto; +} + +@media screen and (min-width: 900px) { + .dialog-photo-picker .masonry { + column-count: 4; + } +} + +@media screen and (min-width: 700px) and (max-width: 900px) { + .dialog-photo-picker .masonry { + column-count: 3; + } +} + +@media screen and (min-width: 500px) and (max-width: 700px) { + .dialog-photo-picker .masonry { + column-count: 2; + } +} + +@media screen and (max-width: 500px) { + .dialog-photo-picker .masonry { + column-count: 1; + } +} \ No newline at end of file diff --git a/embedding.html b/embedding.html new file mode 100644 index 0000000..6a9f55c --- /dev/null +++ b/embedding.html @@ -0,0 +1,32 @@ + + + + + Project Title + + + + + + + + + + + + + + +
+
+ +
+ + + \ No newline at end of file diff --git a/empty.html b/empty.html new file mode 100644 index 0000000..c58224b --- /dev/null +++ b/empty.html @@ -0,0 +1,50 @@ + + + + + Project Title + + + + + + + + + + + + + + + +
+
+
+
+
+
+

+ Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel + augue. Curabitur ullamcorper ultricies nisi. +

+

Heading 1

+
+

+ Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet. +

+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/img/greenery.jpg b/img/greenery.jpg new file mode 100644 index 0000000..cb1673f Binary files /dev/null and b/img/greenery.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..6ec0874 --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + + Tuia - PORTFOLIO + + + + + + + + + + + + + +
+
+ + + + +
PORTFOLIO
+ + + + + + + +
+

Oncology endpoint analysis

+
A reproducible analysis of oncology drugs.
+
+
+ Project Link +
+
+ + + + + + + +
+
+
+ + + + \ No newline at end of file