/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ *//* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. *//* ==========================================================================   Base styles: opinionated defaults   ========================================================================== */html {    color: #222;    font-size: 11pt;    line-height: 1.0;    font-family: 'halyard-text-variable', sans-serif;    font-size: 16px;    font-weight: 300;    font-variation-settings: "wght" 300;}/* * Remove text-shadow in selection highlight: * https://twitter.com/miketaylr/status/12228805301 * * These selection rule sets have to be separate. * Customize the background color to match your design. */::-moz-selection {    background: #b3d4fc;    text-shadow: none;}::selection {    background: #b3d4fc;    text-shadow: none;}/* * A better looking default horizontal rule */hr {    display: block;    height: 1px;    border: 0;    border-top: 1px solid #ccc;    margin: 1em 0;    padding: 0;}/* * Remove the gap between audio, canvas, iframes, * images, videos and the bottom of their containers: * https://github.com/h5bp/html5-boilerplate/issues/440 */audio,canvas,iframe,img,svg,video {    vertical-align: middle;}/* * Remove default fieldset styles. */fieldset {    border: 0;    margin: 0;    padding: 0;}/* * Allow only vertical resizing of textareas. */textarea {    resize: vertical;}/* ==========================================================================   Browser Upgrade Prompt   ========================================================================== */.browserupgrade {    margin: 0.2em 0;    background: #ccc;    color: #000;    padding: 0.2em 0;}/* ==========================================================================   Helper classes   ========================================================================== *//* * Hide visually and from screen readers */.hidden {    display: none !important;}/* * Hide only visually, but have it available for screen readers: * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */.visuallyhidden {    border: 0;    clip: rect(0 0 0 0);    height: 1px;    margin: -1px;    overflow: hidden;    padding: 0;    position: absolute;    width: 1px;}/* * Extends the .visuallyhidden class to allow the element * to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 */.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {    clip: auto;    height: auto;    margin: 0;    overflow: visible;    position: static;    width: auto;}/* * Hide visually and from screen readers, but maintain layout */.invisible {    visibility: hidden;}/* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the *    `contenteditable` attribute is included anywhere else in the document. *    Otherwise it causes space to appear at the top and bottom of elements *    that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using *    `:before` to contain the top-margins of child elements. */.clearfix:before,.clearfix:after {    content: " "; /* 1 */    display: table; /* 2 */}.clearfix:after {	clear: both;}/* AWE-specific stuff */body {    background-color: #ffffff;    color: #222;    line-height: 1.0;    font-family: 'halyard-text-variable', sans-serif;    font-size: 16px;    font-weight: 300;    font-variation-settings: "wght" 300;    font-feature-settings: 'ss18';}a, a:active, a:visited {	color: #3D68B2;    text-decoration: none;}.outerContainer {	text-align: center; 	width: 100%;	background-color: #fff;	margin: 0px auto;}.spaceRight5 {	margin-right: 2px;	}.row {		}.bottomRow {	margin-top: 20px;	padding-bottom: 5px;	margin-left: auto;	margin-right: auto;	width: auto;	min-width: none;	max-width: 1003px;	background-color: #aaaaaa;}.bottomLabel {	text-transform: uppercase;		font-size: 11px;	font-weight: 300;	padding-top: 10px;	padding-bottom: 10px;	color: #ffffff;	letter-spacing: 3px;}.title {    position: relative;    right: -5px;    font-family: halyard-display-variable, sans-serif;    text-transform: none;    font-weight: 100;    font-variation-settings: "wght" 100;    font-size: 80px;    margin: 0px auto 4px;    padding-top: 0px;    line-height: 70px;}/*.title:lang(zh) {    font-family: 'Heiti SC Light', 'Microsoft YaHei UI', 'Noto Sans', 'Droid Sans', 'HelveticaNeue',  Arial, sans-serif;     font-weight: 200; }*/#tmDiv {    position:relative;    top:-40px;    font-size:10px;}#tmDiv:lang(zh) {    top:-56px;    font-weight: 200; }.subtitle {    /*    font-family: 'HelveticaNeue-UltraLight', 'Open Sans', Helvetica, Arial, sans-serif;    font-weight: 200;    font-size: 21px;    padding: 0px 20px;    line-height: 24px;    */    font-family: halyard-display-variable, sans-serif;    font-weight: 200;    font-variation-settings: "wght" 200;    font-size: 17px;    letter-spacing:2px;    text-transform:uppercase;    padding: 0px 20px;    line-height: 27px;}.subtitle:lang(zh) {    font-family: 'Heiti SC Light', 'Microsoft YaHei UI', 'Noto Sans', 'Droid Sans', 'HelveticaNeue',  Arial, sans-serif; }.top {	display: block;}.logoLeft {	float: left;	margin-left: 20px;	}.topRight {	float: right;	margin-right: 20px;	margin-top: 4px;}/* Colors */.colorSage {background-color: #273879;}.colorDeepPurple {background-color: #3D68B2;}.colorLightBlue {background-color: #9796C9;}.colorBlue {background-color: #3C4D54;}.colorRed {background-color: #935757;}.colorOrange {background-color: #CE945A;}.colorYellow {background-color: #CCAB5A;}.colorPurple {background-color: #8D7D91;}.colorCornflower {background-color: #53649B;}.colorBlack {background-color: #111111;	}.colorLightGray {background-color: #ffffff;	color: #aaaaaa;}.colorPlaceholder {background-color: #eee;}.colorInvisible {    opacity: 0.25;    /*	visibility: hidden;	background-color: #eee;    */}.colorSelected { font-weight: bold; font-size: 10px; }/*.colorSelected { animation: blinker 1s linear infinite;}@keyframes blinker { 50% { opacity: 0; }}*//* Elements */.elementTitle {    position: absolute;    top: 71px;    left: 0px;    font-family: 'halyard-micro-variable', sans-serif;    width: 100%;    text-align: center;    font-size: 9px;    font-weight: 400;    font-variation-settings: "wght" 400;    line-height: 10px;    text-transform: uppercase;    font-feature-settings: 'ss18';}.elementTitle:lang(zh) {    font-size: 14px;    font-family: 'Heiti SC Light', 'Microsoft YaHei UI', 'Noto Sans', 'Droid Sans', 'HelveticaNeue',  Arial, sans-serif;     font-weight: 200; }.descenderLetter {	padding-top: 0px;}.elementGrades {    font-family: 'halyard-micro-variable', sans-serif;    font-size: 8px;    text-transform: uppercase;    letter-spacing: -0.25px;    width: 100%;    position: absolute;    margin-left: auto;    margin-right: auto;    bottom: 4px;}.clearTop {	margin-top: 0;	padding-top: 0;}.loadingDiv {	position:fixed;	top:0px;	left:0px;	width:100%;	height:100%;	background-color: #ffffff;	opacity:0.85;	filter:alpha(opacity=85);	z-index:2000;	display: none;}.modalPopUpDiv {    position: fixed;    background-color: white;    border: 1px solid #3D68B2;    z-index: 2500;    display: none;    overflow: auto;}.smallPopUp { width: 300px;}.largePopUp { width: 400px;}.modalPadding { padding: 20px; font-size:14px;}#selectFacultyDiv {    float:right;    width:160px;    margin-right:0px;}.morecontent span {    display: none;}.morelink {    font-size: 12px;    display: inline;}.outcomeslink {    color: #3D68B2;    font-size: 12px;    display: inline;    cursor: pointer;}.planningDiv {    font-size: 14px;    padding:10px;    text-align:center;    margin: 10px 0px;}#createDiv { font-size: 11px;}.planningDiv:lang(zh) {    font-family: 'Heiti SC Light', 'Microsoft YaHei UI', 'Noto Sans', 'Droid Sans', 'HelveticaNeue',  Arial, sans-serif;     font-weight: 200; }#createDiv{padding-top:5px;}.templateHolderDiv {    width: 300px;    margin: 20px auto 0px;    color: #3D68B2;    cursor: pointer;    text-transform: uppercase;    font-size: 11px;}.downloadHolderDiv { width: 150px; float:left;}.downloadImageDiv{ padding: 8px 0px;}.downloadDiv, .viewDiv {    text-transform: uppercase;    color: #3D68B2;    font-size: 10px;}.dividerDiv {    width: 100%;    border-top: 1px dotted #808080;    margin: 0px auto;}#feedbackDiv:lang(zh) {    font-family: 'Heiti SC Light', 'Microsoft YaHei UI', 'Noto Sans', 'Droid Sans', 'HelveticaNeue',  Arial, sans-serif;     font-weight: 200; }.loginDiv {    text-align: center;    background-color: #3D68B2;    color: white;    padding: 20px 0px;}.loginHeaderDiv {    font-size:16px;    font-weight: 400;    line-height: 20px;    padding-bottom: 6px;}.loginHeaderDiv:lang(zh) {    font-size:16px;    font-family: 'Heiti SC Light', 'Microsoft YaHei UI', 'Noto Sans', 'Droid Sans', 'HelveticaNeue', Arial, sans-serif;    line-height: 20px;    padding-bottom: 6px;}.loginTextDiv {    font-size:14px;    line-height: 20px;    font-weight: 200;}.loginTextDiv:lang(zh) {    font-size: 14px;    font-family: 'Heiti SC Light', 'Microsoft YaHei UI', 'Noto Sans', 'Droid Sans', 'HelveticaNeue', Arial, sans-serif;    line-height: 20px;    font-weight: 200;}.loginBtnDiv {    margin: 20px auto 0px;    width: 100px;    line-height: 22px;    font-size: 14px;    text-align: center;    cursor: pointer;    color: #3D68B2;    background-color: white;    border: 1px solid #E0E0E0;}    /* Elements */    .elementBox {        float:left;	    font-family: 'HelveticaNeue','Open Sans', Helvetica, Arial, sans-serif;	    height: 108px; 	    width: 108px; 	    padding: 0;	    display: inline-block;	    margin: 2px 2px 0px 0px;	    position: relative;	    text-align: center;	    color: white;        cursor:pointer;    }    .elementBox:hover {	    opacity: 0.85;    }    .dimmedBox {        opacity: 0.2;    }    .elementNumber {        position: absolute;        top: 1px;        left: 2px;        font-family: halyard-display-variable, sans-serif;        font-weight: 500;        font-variation-settings: "wght" 500;        text-align: left;        font-size: 12px;        margin: 4px;        line-height: 1.0;    }    .elementSymbol {        position: absolute;        top: 26px;        left: 0px;        width: 100%;        text-align: center;        font-family: halyard-display-variable, sans-serif;        font-weight: 800;        font-variation-settings: 'wght' 800;        font-stretch: 'semi-condensed';        font-variation-settings: 'wdth' 85;        font-feature-settings: 'ss18';        font-size: 42px;        line-height: 46px;        clear: both;    }    .elementName {        position: absolute;        top: 60px;        left: 7px;        width: 95px;        text-align:center;        line-height: 15px;    }    .elementGradeLevels{        position: absolute;        bottom: 2px;        left: 2px;        width: 106px;        letter-spacing: -1.6px;    }        /* New Elements */    .newElementBox {        float:left;        font-family: 'HelveticaNeue', 'Open Sans', Helvetica, Arial, sans-serif;        /*font-family: korolev-rounded, 'Arial Nova Condensed', 'Avenir Next Condensed', 'Helvetica Neue', Arial, sans-serif;*/	    height: 220px; 	    width: 220px; 	    padding: 0;	    display: inline-block;	    margin: 3px;        border-radius: 5px;	    position: relative;	    text-align: center;	    color: white;        cursor:pointer;    }    .newElementBox:hover {	    opacity: 0.85;    }    .newElementNumber {        position: absolute;        top: 10px;        left: 10px;        font-weight: 300;        font-variation-settings: "wght" 300;        text-align: left;        font-size: 16px;        line-height: 16px;        opacity: 0.5    }    .newElementSymbol {        position: absolute;        top: 10px;        right: 10px;	    font-size: 16px;	    line-height: 16px;        opacity: 0.5;    }    .newElementName {        position: absolute;        top: 60px;        left: 7px;        width: 95px;        text-align:center;        line-height: 15px;    }    .newElementGradeLevels{        position: absolute;        bottom: 2px;        left: 2px;        width: 106px;        letter-spacing: -1.6px;    }    .newElementTitle {           position: absolute;        top: 160px;        left: 0px;         width: 100%;	    font-size: 11px;        font-weight: 400;        line-height: 14px;        letter-spacing: 1px;	    text-transform: uppercase;        text-align: center;        opacity: 0.5;    }    .newElementTitle:lang(zh) {        top: 158px;        font-size: 11px;        font-family: 'Heiti SC Light', 'Microsoft YaHei UI', 'Noto Sans', 'Droid Sans', 'HelveticaNeue',  Arial, sans-serif;         font-weight: 200;         z-index: 3;        letter-spacing: 2px;    }    .newElementTitle:lang(pt), .newElementTitle:lang(es) {        top: 153px;    }    .newElementImg {        position: absolute;        top: 39px;        width: 100%;        text-align: center;        z-index: 1;    }    .newElementImg:lang(pt), .newElementImg:lang(es) {        top: 32px;    }    .newElementText {         position: absolute;        top: 175px;        left: 0px;        padding: 0px 5px;	    width: -moz-calc(100% - 10px);	    width: -webkit-calc(100% - 10px);	    width: calc(100% - 10px);	    font-size: 13px;        line-height: 16px;        font-weight: 300;    }    .newElementText:lang(zh) {        font-family: 'Heiti SC Light', 'Microsoft YaHei UI', 'Noto Sans', 'Droid Sans', 'HelveticaNeue',  Arial, sans-serif;         letter-spacing: 1px;    }    .newElementText:lang(pt), .newElementText:lang(es) {        top: 168px;        Line-height: 15px;    }    .newLegendDiv {        text-align:center;        width: 100%;        margin-bottom: 20px;    }    .newLegendDiv img { width: 50%;}/* ==========================================================================   EXAMPLE Media Queries for Responsive Design.   These examples override the primary ('mobile first') styles.   Modify as content requires.   ========================================================================== */@media only screen and (max-width: 1023px) {    .title { font-size: 65px; }    #tmDiv {top:-35px;}    #tmDiv:lang(zh) {top:-48px;}    .subtitle { font-size: 16px;}}@media only screen and (max-width: 940px) {  /*  3 tiles */    .newLegendDiv img { width: 66%;}}@media only screen and (max-width: 730px) {   .title:lang(zh) {font-size: 48px;}    #tmDiv:lang(zh) {top:-35px;}        .planningDiv {        margin: 10px auto;        max-width: 320px;        width: 100%;        text-align: left;        padding: 0px;    }    #planningTemplatesDiv{ padding-left:10px;}    #createDiv{ padding-left: 10px;}    .downloadHolderDiv { text-align: center;}    .modalPopUpDiv{        min-width: 320px;	    border:0px;    }    .smallPopUp { width: 100%; }    .largePopUp { width: 100%; }    .uploadPopUp { width: 100%;}    .editPopUp { width: 100%; }    .congratsPopUp { width: 100%;}    .modalPadding { padding: 10px;}    .modalButton {        font-size:14px;        padding: 0px 10px;    }}@media only screen and (max-width: 714px) { /* 2 tiles */    .newLegendDiv img { width: 100%;}}@media only screen and (max-width: 414px) {    /* Style adjustments for viewports that meet the condition */	.title {font-size: 33px;}    .title:lang(zh) {font-size: 33px;}    #tmDiv {top:-15px;}    #tmDiv:lang(zh) {top:-20px;}	.subtitle {		font-size: 12px;        line-height: 18px;	}	.topRight {		margin-top: 10px;	}        #addElementBtnDiv {        clear:both;        float: left;        margin: 10px 0px;    }    #selectFacultyDiv {width:120px; }}@media only screen and (max-width: 320px) {    .outerContainer {margin-top: 20px;	}	.title {font-size: 28px;}    #tmDiv {font-size:8px;}}@media print,       (-webkit-min-device-pixel-ratio: 1.25),       (min-resolution: 1.25dppx),       (min-resolution: 120dpi) {    /* Style adjustments for high resolution devices */}/* ==========================================================================   Print styles.   Inlined to avoid the additional HTTP request:   http://www.phpied.com/delay-loading-your-print-css/   ========================================================================== */@media print {    *,    *:before,    *:after,    *:first-letter,    *:first-line {        background: transparent !important;        color: #000 !important; /* Black prints faster:                                   http://www.sanbeiji.com/archives/953 */        box-shadow: none !important;        text-shadow: none !important;    }    a,    a:visited {        text-decoration: underline;    }    a[href]:after {        content: " (" attr(href) ")";    }    abbr[title]:after {        content: " (" attr(title) ")";    }    /*     * Don't show links that are fragment identifiers,     * or use the `javascript:` pseudo protocol     */    a[href^="#"]:after,    a[href^="javascript:"]:after {        content: "";    }    pre,    blockquote {        border: 1px solid #999;        page-break-inside: avoid;    }    /*     * Printing Tables:     * http://css-discuss.incutio.com/wiki/Printing_Tables     */    thead {        display: table-header-group;    }    tr,    img {        page-break-inside: avoid;    }    img {        max-width: 100% !important;    }    p,    h2,    h3 {        orphans: 3;        widows: 3;    }    h2,    h3 {        page-break-after: avoid;    }}