@charset "utf-8";
/* CSS - Computing: Applications Development — H6S9 46 - v2 */

/* globals */
*{box-sizing: border-box;}
img {max-width: 100%;}
#student-info {float: left; width: 100%; height: auto;}
#student-name, #student-school, #student-year {display: inline-block; border-left: solid 1px #bbb; padding: 0px 1em;}
.container {float: left; width: 100%; height: auto;}

/*default syles*/
body {background-color: #f2f2f2;}
#section-start p{text-align: center;}
#section-2 p{text-align: center;}
#rate{text-align: center; margin-top: 10%;}

#application {max-width: 360px; margin: 1em auto;}
#app-title {float: left; width: 80%; text-align: center;}
#nav-toggle {float: right; width: 35px; height: 35px; transform: rotate(90deg); text-align: center; cursor: pointer;}
#controls {width: 100%; display: none;}
#controls button {width: 100%; padding: 10px 10%; text-align: center; vertical-align: top;}
#display-area {float: left; width: 100%; min-height: 50vh; margin: 2em 0px; padding: 2%; background-color: #fff; position: relative;}
.section-title {text-align: center;}

/*nav style */
#controls button img{width: 10%; height: auto; margin-left: 5%;}

/*horizontal rate bar*/
#green{background-color: rgb(25, 185, 25);}
#amber{background-color: rgb(221, 120, 5);}
#red{background-color: rgb(192, 0, 0);}
#box{width: 5%; position: absolute; left: 10; transition: left 0.1s;}

#green1{background-color: rgb(25, 185, 25);}
#amber1{background-color: rgb(221, 120, 5);}
#red1{background-color: rgb(192, 0, 0);}
#box1{width: 5%; position: absolute; left: 10; transition: left 0.1s;}
.rate {float: left; width: 33.33%; padding: 3%;}
#bar-container{position: relative;}

/*Quick access to a form*/
#quickEdit{background-color: #cfcfcf;}
#quickEdit button{border: none; background-color: #cfcfcf;}

/*set section default display properties*/
#section-start {display: block;}
#section-1, #section-2, #section-3, #section-4, #section-5 {display: none;}
.content-area {display: none;}

/* global style for content-area*/
.content-area {float: left; width: 100%; min-height: 200px; padding: 1%; border: solid 2px #000;}
#section-start h3{text-align: center;}

/*media style*/
#quickEdit img{width: 3%;}
#healthyVideo{margin-left: 10%;}
#quick p{text-align: left; float: left; margin-left: 10%;}
#quick img{float: right; margin: 3%; margin-top: 8%; margin-right: 15%;}


#profile, #details, #goBack, #signIn-Form{display: none;}

/* TABLE STYLE */
.book{height: 100px; width: auto;}


/*------------------------------| RESPONSIVE CLASSES |------------------------------*/

.full-width {float: left; width: 100%; margin: 0; padding: 3%;}
.left {float: left; width: 46%; /*50% - 4%*/ margin: 2%; padding: 3%;}
.right {float: right; width: 46%; /*50% - 4%*/ margin: 2%; padding: 3%;}
.thirds {float: left; width: 29.33%; /*33.33% - 4%*/ margin: 2%; padding: 3%;}
.quarter {float: left; width: 21%; /*25% - 4%*/ margin: 2%; padding: 3%;}


/*------------------------------| BREAKPOINTS |------------------------------*/

/* x-large */
@media only screen and (max-width: 1200px) {

}

/* large */
@media only screen and (max-width: 1080px) {
    .quarter {float: left; width: 46%; /*50% - 4%*/}
	.thirds {float: left; width: 96%; /*33.33% - 4%*/}
	nav li {float: left; display: block; width: 100%;}
}

/* x-small */
@media only screen and (max-width: 576px) {
    .quarter {width: 96%; /*100% - 4%*/}
	.left, .right {width: 96%;}
    #controls, .content-area {width: 100%;}
}