/*! 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;
    }
}