@charset "utf-8";
/* CSS Document */

/* libre-franklin-regular - latin */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/libre-franklin-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/libre-franklin-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/libre-franklin-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/libre-franklin-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/libre-franklin-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/libre-franklin-v12-latin-regular.svg#LibreFranklin') format('svg'); /* Legacy iOS */
}

h1 {
	color: #fff;
	font-family: Libre Franklin;
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    letter-spacing: .015em;
    line-height: 1em;
    text-transform: uppercase;
	text-rendering: optimizeLegibility;
	margin: 0.67em 0;
	margin-block-start: 0.83em;
    margin-block-end: 0.83em;
	display: block;
	margin-inline-start: 0px;
    margin-inline-end: 0px;
	
	
}

        html,
        body,
        div,
        span,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        abbr,
        address,
        cite,
        code,
        del,
        dfn,
        em,
        img,
        ins,
        kbd,
        q,
        samp,
        small,
        strong,
        sub,
        sup,
        var,
        b,
        i,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        article,
        aside,
        canvas,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section,
        summary,
        time,
        mark,
        audio,
        video {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 100%;
            vertical-align: baseline;
            background: transparent;
			color: #FFFFFF;
        }
        body {
            line-height: 1;
			background-color: #333;
			font-family: Libre Franklin;
        }
        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section {
            display: block;
        }
        nav ul {
            list-style: none;
        }
        blockquote,
        q {
            quotes: none;
        }
        blockquote:before,
        blockquote:after,
        q:before,
        q:after {
            content: '';
            content: none;
        }
        a {
            margin: 0;
            padding: 0;
            font-size: 100%;
            vertical-align: baseline;
            background: transparent;
        }
        ins {
            background-color: #ff9;
            color: #000;
            text-decoration: none;
        }
        mark {
            background-color: #ff9;
            color: #000;
            font-style: italic;
            font-weight: bold;
        }
        del {
            text-decoration: line-through;
        }
        abbr[title],
        dfn[title] {
            border-bottom: 1px dotted;
            cursor: help;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        hr {
            display: block;
            height: 1px;
            border: 0;
            border-top: 1px solid #ccc;
            margin: 1em 0;
            padding: 0;
        }
        input,
        select {
            vertical-align: middle;
        }
        body {
            padding: 2em;
            font: 100%/1.4 'Libre Franklin';
        }
        h1 {
            font-size: 2.2em;
            padding: 0 0 .5em 0;
        }
        h2 {
            font-size: 1.5em;
        }
        .header {
            padding: 1em 0;
        }
        .col {
            background: #ccc;
            background: #fff;
            background: transparent;
            padding: 1em 0;
            text-align: center;
        }
        p {
            padding: 1em 0 0 0;
        }
        @media screen {
            .printable {
                display: none;
            }
            .non-printable {
                display: block;
            }
        }
        @media print {
            .non-printable {
                display: none;
            }
            .printable {
                display: block;
				height: 99%;
            }
        }
        button::-moz-focus-inner,
        input::-moz-focus-inner {
            border: 0;
            padding: 0;
        }
        #print-btn {
            font-family: Libre Franklin;
            color: #ffffff;
            font-size: 0.8em;
            background: #0099cc;
            padding: 10px 20px 10px 20px;
            text-decoration: none;
            border: none;
            outline: none;
            cursor: pointer;
            height: 1em;
            font-weight: bold;
        }
        #print-btn:hover {
            background: #3cb0fd;
            background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
            background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
            background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
            background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
            background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
            text-decoration: none;
        }
        .option-btn {
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            font-family: Libre Franklin;
            color: #000000;
            font-size: 24px;
            background: white;
            padding: 10px 20px 10px 20px;
            text-decoration: none;
            border: 2px;
            outline: none;
            cursor: pointer;
            margin: -0.5em;
            width: 100%;
            height: 3em;
            font-weight: bold;
			/* -webkit-box-shadow: inset 1px 2px 2px white, 3px 3px 2px black;
  			-moz-box-shadow: inset 1px 2px 2px white, 3px 3px 2px black;
  			box-shadow: inset 1px 2px 2px white, 3px 3px 2px black;
			text-shadow: 2px 2px 2px lightgrey; */
        }
        .option-btn:hover {
            background: darkgrey;
            text-decoration: none;
        }
        #footer {
            position: fixed;
            left: 0px;
            bottom: 0px;
            height: 12em;
            width: 100%;
            background: #0099cc;
        }
        /* IE 6 */
        
        * html #footer {
            position: absolute;
        }
        #footer .main {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding-left: 2em;
            padding-right: 2em;
            color: #fff;
        }
        #footer .col {
            background-color: transparent;
        }
        #timer-result {
            font-size: 4.4em;
            font-weight: bold;
            color: #FFFFFF;
        }
        #timer-explain {
            font-size: 1.25em;
            background-color: transparent;
        }
        #script-area {
            color: #0099cc;
            font-size: 1.5em;
        }
        #script-title {
            color: #000;
            font-size: 1em;
            width: 100%;
            border: solid 1px;
            margin-bottom: 0.2em;
            box-sizing: border-box;
            padding: 0.2em 0.9em 0.2em 0.9em;
        }
        #script-text {
            color: #000;
            font-size: 2em;
            width: 100%;
            border: solid 1px;
            box-sizing: border-box;
            padding: 1em;
			height: 600px;
        }
        .spoken-speed {
            text-align: center;
			padding-top: 5px;
            margin: 5px;
            width: 2em;
            height: 50px;
            font-size: 2em;
			background-color: white;
			
			/* -webkit-box-shadow: 1px 2px 2px white, inset 3px 3px 2px black;
  			-moz-box-shadow: 1px 2px 2px white, inset 3px 3px 2px black;
  			box-shadow: 1px 2px 2px white, inset 3px 3px 2px black; */
			-webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }
        .spoken-speed-label {
            font-weight: normal;
            font-size: 18px;
        }
        #words-per-second {} .self-timer-btn {

            padding: 1em;
            border: solid #FFFFFF 0px;
            text-decoration: none;
            width: 100%;
            outline: none;
            cursor: pointer;
            text-align: center;
        }
        .self-timer-btn:hover {
            background: #BCBCBC;
            text-decoration: none;
        }
        #lang-pref {
            text-align: right;
        }
        #lang-pref a {
            color: #0099cc;
        }
        #wps-presets {
            font-size: 1.3em;
        }
        .legend-label {
            text-align: left;
			background-color: #333;
        }
        .legend-value {
            text-align: right;
			background-color: #333;
        }
        .span_2_of_2 {
            width: 100%;
        }
        .span_1_of_2 {
            width: 49.2%;
        }
        @media only screen and (max-width: 480px) {
            .span_2_of_2 {
                width: 100%;
            }
            .span_1_of_2 {
                width: 100%;
            }
        }
        .span_3_of_3 {
            width: 100%;
        }
        .span_2_of_3 {
            width: 66.13%;
        }
        .span_1_of_3 {
            width: 32.26%;
        }
        @media only screen and (max-width: 480px) {
            .span_3_of_3 {
                width: 100%;
            }
            .span_2_of_3 {
                width: 100%;
            }
            .span_1_of_3 {
                width: 100%;
            }
        }
        .section {
            clear: both;
            padding: 0px;
            margin: 0px;
        }
        .group:before,
        .group:after {
            content: "";
            display: table;
        }
        .group:after {
            clear: both;
        }
        .group {
            zoom: 1;
            /* For IE 6/7 (trigger hasLayout) */
        }
        .col {
            display: block;
            float: left;
            margin: 1% 0 1% 1.6%;
        }
        .col:first-child {
            margin-left: 0;
        }
        /* all browsers except IE6 and lower */
        
        @media only screen and (max-width: 480px) {
            .col {
                margin: 1% 0 1% 0%;
            }
        }
        .span_4_of_4 {
            width: 100%;
        }
        .span_3_of_4 {
            width: 74.6%;
        }
        .span_2_of_4 {
            width: 49.2%;
        }
        .span_1_of_4 {
            width: 23.8%;
        }
        @media only screen and (max-width: 480px) {
            .span_4_of_4 {
                width: 100%;
            }
            .span_3_of_4 {
                width: 100%;
            }
            .span_2_of_4 {
                width: 100%;
            }
            .span_1_of_4 {
                width: 100%;
            }
        }
        @media only screen and (max-width: 768px) {
            .self-timer-btn {
                box-shadow: 0;
				font-family: Libre Franklin;
                color: #000000;
                font-size: 1em;
                background: #fff;
                padding: 1em;
                text-decoration: none;
                width: 100%;
                outline: none;
                cursor: pointer;
                text-align: center;
            }
            #timer-result {
                font-size: 2.5em;
                font-weight: bold;
                color: #FFFFFF;
            }
            #timer-explain {
                font-size: 1em;
                background-color: transparent;
            }
            #wps-presets {
                font-size: 1em;
            }
        }