/* top style */

*
	{
		box-sizing: border-box;
	}


body
	{
		background-image: url('background.jpg');
		background-repeat: repeat;
		background-size: 10%;
		margin: 0;
		padding: 0;
	}
	
	
	
.mainContainer
	{
		max-width: 1000px;
		margin: 0 auto;

	}


	
img
	{
		max-width: 100%;
		height: auto;
	}
	
	
		
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/
/* NAVIGATION BAR */
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/

.navbar
	{
		width: 100%;
		height: 50px;
		background-color:  #174E93;
	}

.navbar ul
	{
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
	
	}

.navbar ul li 
	{
	    	float: left;
	    	border-right: 1px solid white;
		width: 20%;
	}

.navbar ul li:last-child 
	{
		border-right: none;
	}

.navbar ul li a 
	{
	    	margin-top: 0px;
	    	padding: 6px 0px; 	
	}

.navbar ul li a, .responsiveNav a
	{
		color: white;
	    	font-size: 14px;
	    	font-family: verdana;
		text-align: center;
	    	text-decoration: none;
	    	background-color: #174E93;
	    	display: block;
	}





/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/
/* RESPONSIVE NAVIGATION BAR */
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/


.responsiveNav
	{
	    	position: absolute;
	    	display: inline-block;
	    	z-index: 20;
	}



.responsiveNav a
	{
		min-width: 200px;
		padding: 10px;
		border: 1px solid white;
		border-top: transparent;
	}


#topLink
	{
		border-top: 1px solid white;
	}

#dropdownNav
	{
		text-decoration: none;
	    	display: none;
	}

#lines
	{
		position: relative;
		font-size: 30px;
		padding-right: 15px;
	}
#words
	{
		position: relative;
		top: -7px;
		font-size: 16px;
		line-height: 40px;
		font-weight: 500;
	}
	
button.dropNav span
	{
		display: block;
		padding: 0px;
	}
	
button.dropNav
	{
		height: 49px;
		width: 49px;
		background-color: #174E93;
		border: 1px solid white;
		color: white;
		padding: 0;
	}

button:focus {outline:0 !important;}




/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/
/* VIEWPORTS */ /*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~ NAVIGATION BARS ~*/
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/

/* COMPUTER*/

@media only screen and (min-width: 600px)
{
	.navbar
	{
		padding: 10px 0px;
	}
	
	.responsiveNav
	{
		display: none;
	}


}

/* PHONE */

@media only screen and (max-width: 599px)
{
	.navbar
	{
		position: absolute;
		
	}
	.regularNav
	{
		display: none;
	}
	


}


/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/
/* LOGO & LOCATIONS */
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/


.rightHalf
	{
		display: inline-flex;
	}
	
.location
	{
		width: 25%;
	}

.location a
	{
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}




/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/
/* VIEWPORTS */ /*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~ LOGO & LOCATION ~*/
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/

@media only screen and (min-width: 1000px)
{
	.location a
	{
		font-size: 1em;
	}
}

@media only screen and (min-width: 600px) and (max-width: 999px)
{
	.location a
	{
		font-size: 1.7vw;
	}
	.location a img
	{
		width: 20%;
	}
}

@media only screen and (max-width: 599px)
{
	.location a
	{
		font-size: 3.5vw;
	}
	.location a img
	{
		width: 20%;
	}
}







/******************/
/* COMPUTER*/

@media only screen and (min-width: 600px)
{


/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/
/* TOP STUFF */
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/

.topRow
	{
		display: inline-flex;
		width: 100%;
	}


/* logo */
.leftHalf
	{
		width: 50%;
	}




/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/
/* LOCATIONS */
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/

.rightHalf
	{
		width: 50%;
	}

	
.location a
	{
padding-top: 6%;
padding-bottom: 7%;
	}


}


/**********************/
/* PHONE */


@media only screen and (max-width: 599px)
{



/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/
/* TOP STUFF */
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/

.topRow
	{
		display: flex;
  		flex-flow: row wrap;
	}


/* logo */
.leftHalf
	{

		width: 100%;
		padding-top: 50px;
	}

#logo
	{
		width: 100%;
	}



/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/
/* LOCATIONS */
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/

.rightHalf
	{
		width: 100%;
		border: 1px solid #0084B6;
	}
	
.location a
	{
		padding: 10px 0;
		border: 1px solid #0084B6;
	}


}



.kidFont
	{
		font-family: "comic sans ms", Arial, Helvetica, sans-serif;
	}
	
	



/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/
/* COLORS */
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/

.theBlue
	{
		color: #174E93;
	}

/* infants */
.blueBox
	{
		border: 4px solid #174E93;
	}	
	
.blueBg 
	{
		background-color: #174E93;
	}
	
/* preschool */
/* Ottawa */
.theRed
	{
		color: #971F14;
	}
.redBox
	{
		border: 4px solid #971F14;
	}
.redBg
	{
		background-color: #971F14;
	}

/* school age */
/* Braidwood */
.theGreen
	{
		color: #186800;
	}
.greenBox
	{
		border: 4px solid #186800;
	}
.greenBg
	{
		background-color: #186800;
	}

/* Morris */
.theOrange
	{
		color: #D16400;
	}
.orangeBox
	{
		border: 4px solid #D16400;
	}
.orangeBg
	{
		background-color: #D16400;
	}
	
/* Diamond */
.thePurple
	{
		color: #61358A;
	}
.purpleBox
	{
		border: 4px solid #61358A;
	}
.purpleBg
	{
		background-color: #61358A;
	}
	

	
/* Location Hover */


.activeLocation, .location a:hover
	{
		border: 2px inset #174E93;
		padding: 5% 0;
	}

.location a:hover
	{
		color: #174E93;
	}

	.theTeal
    {
        color: #00807f;
    }
    
.tealBox
	{
		border: 4px solid #00807f;
	}
.tealBg
	{
		background-color: #00807f;
	}