@font-face {
	font-family:"Aller Typo W01 Bold";
	src: url('Fonts/4789119c-098a-4d9a-8c50-fe25c624ba23.eot');
	src: url('Fonts/4789119c-098a-4d9a-8c50-fe25c624ba23.eot?iefix') format('eot'),
		 url('Fonts/49bfe520-9304-4e57-afef-0a2bd6103cb3.woff') format('woff'),
		 url('Fonts/e64334cb-354d-4163-95a0-b6ab9a7280fb.ttf') format('truetype'),
		 url('Fonts/6a5f6a67-1f8d-4478-98ec-0e12dd8aba6b.svg#6a5f6a67-1f8d-4478-98ec-0e12dd8aba6b') format('svg');
	font-weight: normal;
	font-style: normal; 
}	
@font-face {
	font-family:"Aller Typo W01 Regular";
	src: url('Fonts/bd5542ea-c0ff-4ec4-aa1b-db87ffbaee12.eot');
	src: url('Fonts/bd5542ea-c0ff-4ec4-aa1b-db87ffbaee12.eot?iefix') format('eot'),
		 url('Fonts/1cce00ec-4dc3-4b48-b022-7bf531e2e05d.woff') format('woff'),
		 url('Fonts/c6e80a41-7c2f-46bc-97e3-f7512da7ae0e.ttf') format('truetype'),
		 url('Fonts/f26dcabc-e7d5-4fc6-9e6c-667376217f50.svg#f26dcabc-e7d5-4fc6-9e6c-667376217f50') format('svg');
	font-weight: normal;
	font-style: normal; 
}

body, html
{
	padding: 0px;
	margin: 0px;
}

body 
{
	max-width: 100%;
	font-family:"Aller Typo W01 Regular";
}

html
{
	font-size: 1em;
}

#container
{
	width: 98%;
	max-width: 1400px;
	min-width: 400px;
	margin-left:auto;
	margin-right:auto;
	padding-left: 1%;
	padding-right: 1%;
}

#header
{
	width: 98%;
	height: 100px;
	max-width: 1200px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
}

#header-logo img
{
	max-width: 450px;
	max-height: 110px;
	padding-left: 15px;	
}

#header-logo
{
	width: 50%;
	height: 100px;
	float: left;
}

#header-title
{
	width: 50%;
	height: 100px;
	float: right;
	text-align: right;
}

.button
{
    width: 168px;
    height: 168px;
    background-color: #4CB2FF;
    -moz-border-radius: 84px;
    -webkit-border-radius: 84px;
    background-position:50% 50%;
    background-repeat:no-repeat;
	background-size: contain;	
	display: inline-block;	
	margin: 10px;
	margin-bottom: 60px;
	vertical-align: top;
}

.Halves
{
	width: 50%;
	float: left;
}

.Thirds
{
	width: 33%;
	float: left;
}

.Quarters
{
	width: 23%;
	float: left;
	padding-left: 1%;
	padding-right: 1%;
}

/* Main Application Title */
h1
{
	font-size: 60px;
	margin-top: 17px;
	color: #a1a1a5;
	font-family:"Aller Typo W01 Bold";
	vertical-align: middle;
}

/* Page Title */
h2
{
	font-family:"Aller Typo W01 Bold";
	font-size: 32px;
	text-align: center;
	color: #a1a1a5;
	margin-bottom: -10px;
	
}

/* Navigation Circles */
.button h3
{
	font-size: 18px;
	text-align: center;
	margin-top: -10px;
}

/* Page Titles for Class Profile */
h3
{
	text-align: center;
}

/* Page Titles for Student Profile */
h4
{
	text-decoration: underline;
	margin-top: 0px;
	text-align: center;
	font-size: 18px;	
}
h4.left
{
	text-align: left;
}

/* Lower Subheadings, Add Intervention/View Innterventions etc */
h5
{
	color: black;
	text-align: center;
	font-size: 0.55em;
	font-weight: bold;
}


p
{
	line-height: 1.5;
	font-size: 14px;
	text-align: center;
}
p.left
{
	text-align: left;
}
p.trail
{
	font-size: 12px;
	margin-top: 10px;
	text-align: center;
}

ol, li, ul
{
	line-height: 1.5;
	font-size: 14px;	
}

textarea
{ 
	font-size: 14px; 
}

@media only screen and (max-width: 900px) 
{
	#header-logo img
	{
		padding-left: 15px;
		max-width: 200px;
	}
}

/* High Definition phones, iPhones etc  */
@media only screen and (max-device-width : 650px)
{
	html
	{
		font-size: calc(1.5em + 1.5vw);
	}
	#header
	{
		display: block;
		height: 225px;
	}
	#header-logo
	{
		width: 50%;
		float: left;
	}
	#header-logo img
	{
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		max-width: 400px;
		max-height: 250px;
	}	
	#header-title
	{
		width: 50%;
		float:left;
	}
	.Thirds,.Quarters
	{
		width: 100%;
		float: left;
		margin-bottom: 10px;
	}	
	h1, h2, h3
	{
			font-family:"Aller Typo W01 Regular";
	}
	
	.button
	{
		width: 400px;
		height: 400px;
		background-color: #4CB2FF;
		-moz-border-radius: 200px;
		-webkit-border-radius: 200px;
		background-position:50% 50%;
		background-repeat:no-repeat;
		background-size: contain;	
		display: inline-block;	
		margin: 10px;
		margin-bottom: 150px;
		vertical-align: top;
		margin-top: 50px;
	}	
	.button h3
	{
		font-size: 1.2em;
		margin-top: 220px;
	}
	h4
	{
		font-size: 1.2em;	
		margin-top: 15px;
	}
	h5
	{
		font-size: 1.2em;
	}	
	p
	{
		line-height: 1.5;
		font-size: 0.8em;
	}
	p.trail
	{
		font-size: 0.5em;
	}
	
	table, tr, th, td
	{
		line-height: 1.5;
		font-size: 0.8em;
		text-align: center;
	}	
}











#content
{
	width: 100%;
	padding-bottom: 50px;
	margin-top: -15px;
}




.back
{
	margin-top: 60px;
}
.smallbutton
{
    width: 70px;
    height: 70px;
    background: #4CB2FF;
    -moz-border-radius: 84px;
    -webkit-border-radius: 84px;
    background-position:50% 50%;
    background-repeat:no-repeat;
	background-size: contain;	
	display: inline-block;	
	margin: 10px;
	vertical-align: top;
}









.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.collapsiblecontent {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
  transition: max-height 0.2s ease-out;
 
}
.collapsible:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}