/* --------  all screens (default) -----------  */

html {
    height: 100%;    
}
body {
	margin:0px;	
	padding-bottom:20px;
	background-color:white;
	text-align:left;	
	color: #333333;
    height: 100%;
}

td{	
	color: #333333;				
}

a{
	color: navy;	
}

h1 {
    text-align: center;
    border: 0;
    background-color: white;
    color: #474747;
    font-size: 3rem;
    line-height: 3.5rem;
    padding: 0;
    clear: both;
    margin-top: 15px;
    margin-bottom: 35px;
    font-weight: 800;
}


    /* --------- iphone portrait -----------  */
    @media only screen and (max-device-width: 540px) {
        h1 {
            font-size: 3rem;
            line-height: 3.5rem;
            margin: 10px;
        }
    }

h2{
	text-align:left;
	color:black;	
    font-size:1.5rem;
    line-height:1.5rem;
    font-weight:800;    
	padding:5px;
    padding-left: 0;
	border: 0;
	clear:both;
    border-radius:10px;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.25rem;
    font-weight: bold;
    margin: 0;
    padding: 5px;
    padding-left: 0;    
}

h4 {	
    font-size:125%;
    line-height:150%;
    font-weight:400;
	text-decoration:underline;
	margin-bottom:0px;	
}

h5 {
    font-size:100%;
    font-weight:400;
    font-style:italic;
    text-decoration:none;
    margin-bottom:0px;    
}



img{
	border:0px;
    max-width:100%;
}

textarea {
	width:100%;
	height:150px;
}

ul {
	margin-top:0px;
}

.testBodyClass {
    border-left: 15px solid #E6AEA9;
    border-right: 15px solid #E6AEA9;
}

.productionBodyClass {    
    
}
.printHeader{
	visibility:hidden;
	height:0px;
}


.iPhone {
	visibility:hidden;
	height:0px;
}

.borderThin 
{
	border: 1px solid black;
}

.paddingThick 
{
	padding: 10px;
}			

.sectionTitle {
	color: orange;    
	text-align:left;
}
.c-green {
    color: green;
}
.red{
    color:red;
}
.c-red {
    color:red;
}

.c-gray {
    color:gray;
}
.c-navy {
    color:navy;
}
.c-white {
    color:white;
}
.c-orange {
    color: orange;
}
.c-yellow {
    color: yellow;
}
.f-style-italic {
    font-style:italic;
}

.underline {
    text-decoration:underline;
}


.marginTop 
{
    margin-top:15px;
}
.dottedBorder 
{
    border:1px dotted black;
}			
.green 
{
    background-color: Green;
    border:1px solid darkGreen;
    padding:10px;
    color:White;
    text-align:center;
    font-weight:bold;
}

.container 
{
    border: 1px solid darkGray;
    border-radius:3px;
    margin-bottom: 15px;
}

.containerTitle 
{
    background-color:#efeeed;
    padding:5px;
    border-bottom:1px solid darkGray;
}

.containerBody 
{
    padding:5px;  
}
.containerFooter 
{
    padding: 2px;
    background-color:#e1e1e1;
    border-top:1px solid darkGray;
}

.title{
	text-align:center;		
	background-color:#e1e1e1;
	padding:3px;
	border:1px solid gray;
	clear:both;
}

.shadedBackgroundWithBorder 
{
    background-color:#dcdcdc;
    border:1px solid black;
}

.extra-top-margin {
    margin-top: 50px;
}

.no-top-margin {
    margin-top: 0;
}

.massively-padded-div {
    padding: 50px;
}


/* --------- iphone portrait -----------  */
@media only screen and (max-device-width: 540px) {
    .massively-padded-div {
        padding: 15px;
    }
}
        

.paddedDiv{
	padding:5px;
}

.center
{
	text-align:center;
}
.right
{
    text-align:right;
}
.left {
    text-align:left;
}

.printOnly 
{
	background-color:#DCDCDC;	
}

.print-only {
    display: none;
}

.no-print {
    
}


.bread-crumb-trail {
    display: inline;        
    text-align:left;        
    padding-top:10px;          
    padding-bottom:10px;
}

.bread-crumb-trail-arrow {
    display:inline-block;
    font-size:large;
    font-weight:800;
}

.bread-crumb-trail-item {
    display:inline-block;  
    padding:5px;  
}

.invisible-div {
    display: none;
    visibility: hidden;
}


.pill-button {
    border: 0;
    border-radius: 20px;
    font-weight: bold;
    font-size: .9rem;
    padding-left: 35px;
    padding-right: 35px;
    background: 0;
    background-color: #474747;
    color: white;
    cursor: pointer;
}

    .pill-button.salmon-button {
        background-color: #FF9770;
    }
    .pill-button.orange-button {        
        background-color: #e98144;
    }

    .pill-button.black-button {        
        background-color: #474747;        
    }

    .pill-button.yellow-button {
        background-color: #ffeb7f;
        color: #474747;
        font-size: .9rem;        
    }

    .pill-button.white-button {
        background-color: white;
        color: #474747;
    }

    .pill-button.gray-button {
        background-color: gainsboro;
        color: #474747;
    }

/* --------- ipad portrait -------------  */
@media screen and (min-width: 481px) and (max-width: 1366px) {
    body {
	    margin:0px;	
	    padding:0px;	    	    
	    text-align:left;	    
	    color: #333333;
    }

    .desktop-only {
        display: none;
    }

}

/* --------- iphone portrait -----------  */

@media screen and (max-width: 540px) {
    body {		    	    
	    padding:0px;
	    margin:0px;
    }
    ol{
	    margin-left:40px;
    }

    input{
    }

    td{	    
	    color: #333333;
    }
    a{
	    color: navy;	    
    }
    h1{	    
	    padding:5px;
    }
    h2{	    
	    padding:5px;
	    clear:both;
    }

    h3 {	            
        font-weight:bold;
	    margin-bottom:0px;	    
    }
    h4 {	    
	    text-decoration:underline;
	    margin-bottom:0px;	    
    }
    h5 {
	    font-style:italic;	
	    margin-bottom:0px;	    
    }
    img{
	    border:0px;
    }
    textarea {
	    width:100%;
	    height:150px;
    }
    ul {
	    margin-top:0px;
    }
    select {
	    font: normal 24pt verdana;
    }

    .desktop-only {
        display: none;
    }
    .noIPhone{
        display: none;
	    visibility:hidden;
	    height:0px;
    }
    .iPhone{
	    visibility:visible;
	    height:auto;
    }                      
    
    .title{
	    text-align:center;
	    color:black;	    
	    background-color:gainsboro;
	    padding:3px;
	    border:1px solid gray;
	    clear:both;
    }

    .paddedDiv{
	    padding:5px;
    }

    .center {
	    text-align:center;
    }

    
    .bread-crumb-trail {                
        padding-top:5px;              
        padding-bottom:5px;
    }

    .testBodyClass {
        border-left: 3px solid red;
        border-right: 3px solid red;
    }
}



/*------------- Age Level Background Schemes ------------------*/

.age-4-5-background {
    background-color: #d5e9dc;     
}

.age-5-7-background {
    background-color: #f0cdd4;    
}

.age-6-8-background {
    background-color: #e1b820;    
}

.age-7-9-background {
    background-color: #f3ea2d;    
}

.age-8-10-background {
    background-color: #dfeddd;    
}

.age-9-11-background {
    background-color: #daedf8;     
}

.age-10-12-background {
    background-color: #dfdce9;     
}

.age-11-13-background {
    background-color: #e9ecf3;    
}

.age-12-14-background {
    background-color: #f8e8d6;    
}

.high-school-1-background {
    background-color: #dfe9dd;     
}

.miscellaneous-background {
    background-color: #bfedf8;    
}

.age-4-5-dark-background {
    background-color: #2e9351;
}

.age-5-7-dark-background {
    background-color: #b20229;
}

.age-6-8-dark-background {
    background-color: #cd702f;
}

.age-7-9-dark-background {
    background-color: #b88f2e;
}

.age-8-10-dark-background {
    background-color: #60a353;
}

.age-9-11-dark-background {
    background-color: #44a5dc;
}

.age-10-12-dark-background {
    background-color: #605192;
}

.age-11-13-dark-background {
    background-color: #90a0c4;
}

.age-12-14-dark-background {
    background-color: #db8e32;
}

.high-school-1-dark-background {
    background-color: #619155;
}

.miscellaneous-dark-background {
    background-color: #29c3e8;
}


.age-4-5-light-border {    
    border: 1px solid #d5e9dc;
}

.age-5-7-light-border {    
    border: 1px solid #f0cdd4;
}

.age-6-8-light-border {    
    border: 1px solid #e1b820;
}

.age-7-9-light-border {    
    border: 1px solid #f3ea2d;
}

.age-8-10-light-border {    
    border: 1px solid #dfeddd;
}

.age-9-11-light-border {    
    border: 1px solid #daedf8;
}

.age-10-12-light-border {    
    border: 1px solid #dfdce9;
}

.age-11-13-light-border {    
    border: 1px solid #e9ecf3;
}

.age-12-14-light-border {    
    border: 1px solid #f8e8d6;
}

.high-school-1-light-border {    
    border: 1px solid #dfe9dd;
}

.miscellaneous-light-border {
    border: 1px solid #bfedf8;
}

.age-4-5-dark-border {    
    border: 2px solid #2e9351;
}

.age-5-7-dark-border {    
    border: 2px solid #b20229;
}

.age-6-8-dark-border {
    border: 2px solid #cd702f;
}

.age-7-9-dark-border {
    border: 2px solid #b88f2e;
}

.age-8-10-dark-border {
    border: 2px solid #60a353;
}

.age-9-11-dark-border {
    border: 2px solid #44a5dc;
}

.age-10-12-dark-border {
    border: 2px solid #605192;
}

.age-11-13-dark-border {
    border: 2px solid #90a0c4;
}

.age-12-14-dark-border {
    border: 2px solid #db8e32;
}

.high-school-1-dark-border {    
    border: 2px solid #619155;
}

.miscellaneous-dark-border {
    border: 2px solid #29c3e8;
}

.age-4-5-text {
    color: #2e9351;    
}

.age-5-7-text {
    color: #b20229;    
}

.age-6-8-text {
    color: #cd702f;    
}

.age-7-9-text {
    color: #b88f2e;    
}

.age-8-10-text {
    color: #60a353;    
}

.age-9-11-text {
    color: #44a5dc;    
}

.age-10-12-text {
    color: #605192;    
}

.age-11-13-text {
    color: #9010c4;    
}

.age-12-14-text {
    color: #db8e32;    
}

.high-school-1-text {
    color: #619155;    
}

.miscellaneous-text {
    color: #29c3e8;
}

.age-level-large-circle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
    width: 125px;
    height: 125px;
    border-radius: 50%;
    margin: 15px;
    text-decoration: none;
}

.age-level-medium-circle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    margin: 15px;
    text-decoration: none;
}

.age-level-small-circle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 15px;
    text-decoration: none;
}


/* --------- iphone portrait -----------  */
@media only screen and (max-device-width: 540px) {
    .age-level-small-circle {
        font-size: 1rem;

    }
}