/* 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;
	}
	
	
.navbar
{
    color: white;
    background-color: #275791;
}

ul.nav.navbar-nav li a
{
    color: white;
}

ul.nav.navbar-nav li a:hover
{
    background-color: #1D446D;
    color: white;
}
	
ul.nav.navbar-nav li.active a
{
    background-color: #1D446D;
color: white;
}	

ul.nav.navbar-nav li.active a:hover
{
    background-color: #1D446D;
color: white;
}	


.locationContent h1
	{
		text-align: center;
		letter-spacing: 2px;
		font-weight:bold;

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

}


@media only screen and (min-width: 600px) and (max-width: 999px)
{
	.location a
	{
		font-size: 12px;

	}


}




                                                /* Fonts end */

.topBox
    {
        position: relative;
    }

.activeLocation, .location a:hover
	{
        background-color: #28588D;
        color: white;
        text-decoration: none;
        font-weight: normal;
	}
	
.location a
    {
        display: block;
        font-weight: bold;
    }


                                                    
                                                    /* Computer */
                                                    
@media only screen and (min-width: 769px)
{

.locationBox
    {
        position: absolute;
        top: 10%;
        padding: 5px;
        width: 100%;
    }

.location
    {
        text-align: center;
        display: inline-block;
        left: 48%;
        position: relative;
        width: 10%;
        border: 2px solid #275791;
        height: 100%;
    }


}

@media only screen and (min-width: 601px)
{
	#computer
	{
	    display:inline;
	}
	#mobile
	{
	    display: none;
	}
	
}

@media only screen and (max-width: 600px)
{
    
    #computer
	{
	    display:none;
	}
	#mobile
	{
	    display: inline;
	}
	
	.location a
	{
		font-size: 10px;
	}
	
}
    
/**********************/                        /* PHONE */



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


.locationBox
    {
        position: relative;
        padding: 5px;
        width: 100%;
    }
    
.location
    {
        text-align: center;
        display: inline-block;
        position: relative;
        background-color: white;
        width: 18%;
        border: 2px solid #275791;
        height: 100%;
    }



}



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



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

.theBlue
	{
		color: #174E93;
	}


.blueBox
	{
		border: 4px solid #174E93;
	}	
	
.blueBg 
	{
		background-color: #174E93;
	}
	

/* Ottawa */
.theRed
	{
		color: #174e93;
	}
.redBox
	{
		border: 4px solid #174e93;
	}
.redBg
	{
		background-color: #174e93;
	}

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

/* Morris */
.theOrange
	{
		color: #663399;
	}
.orangeBox
	{
		border: 4px solid #663399;
	}
.orangeBg
	{
		background-color: #663399;
	}
	
/* Diamond */
.thePurple
	{
		color: #0c681b;
	}
.purpleBox
	{
		border: 4px solid #0c681b;
	}
.purpleBg
	{
		background-color: #0c681b;
	}
	
/* Shorewood */

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

.programBlueBg
    {
        background-color: #174E93;
    }

.programBlueBox
	{
		border: 4px solid #174E93;
	}	
	
.programBlue 
	{
		color: #174E93;
	}

.programRedBg
{
    background-color: #971F14;
}

.programRedBox
	{
		border: 4px solid #971F14;
	}	
	
.programRed
	{
		color: #971F14;
	}

.programGreen
    {
        color: #186800;
    }

.programGreenBox
	{
		border: 4px solid #186800;
	}	
	
.programGreenBg
	{
		background-color: #186800;
	}

	
/* Location Hover */




.navbar {
    margin-bottom: 0;
}