/* --------------------------------------------------

OER Template Base Styles



Version 2.2

Last Update: 2018-07-29



!!! DO NOT EDIT THIS FILE !!!

Put any custom code at style.css

-------------------------------------------------- */



html {

    position: relative;

    min-height: 100%;

}



body {

    max-width: 1200px;

    margin: 40px auto;

}



.container {}



h1 {

    font-size: 28px;

}



h2 {

    font-size: 24px;

}



p {

    font-size: 16px;

}



a:hover {

    text-decoration: none;

}



body>.container {

    box-shadow: 15px 15px 10px -10px grey;

}



.controlsPointer {

    cursor: pointer;

}





/* title */



/*

#oer_title {

    min-width: 600px;

}

*/



#oer_title {

    background: rgb(243, 183, 67);

    background: -moz-linear-gradient(90deg, rgba(243, 183, 67, 1) 0%, rgba(216, 97, 20, 1) 100%);

    background: -webkit-linear-gradient(90deg, rgba(243, 183, 67, 1) 0%, rgba(216, 97, 20, 1) 100%);

    background: linear-gradient(90deg, rgba(243, 183, 67, 1) 0%, rgba(216, 97, 20, 1) 100%);

    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#f3b743", endColorstr="#d86114", GradientType=1);

    padding: 6px 15px;

    vertical-align: middle;

}



#oer_title h1 {

    width: 75%;

    float: left;

    color: white;

    text-align: left;

}





/* instruction buttons */



#oer_instruction {

    width: 25%;

    float: right;

    font-size: 28px;

    color: white;

    text-align: right;

}



#oer_instruction a, #instruction a:link {

    color: white;

}



#oer_instruction a:hover {

    color: #f3b743;

}





/* canvas */



#oer_canvas {

    min-width: 630px;

    text-align: center;

    background-color: #ccc;

    background-size: 80px 80px;

    background-image: linear-gradient(to right, #ddd 1px, transparent 1px), linear-gradient(to bottom, #ddd 1px, transparent 1px);

}



.angled-135 {

    background-color: #c16;

    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));

    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

}





/* sidebar */



#oer_sidebar {

    min-width: 285px;

    background: rgb(167, 195, 14);

    background: -moz-linear-gradient(125deg, rgba(167, 195, 14, 1) 0%, rgba(118, 159, 8, 1) 100%);

    background: -webkit-linear-gradient(125deg, rgba(167, 195, 14, 1) 0%, rgba(118, 159, 8, 1) 100%);

    background: linear-gradient(125deg, rgba(167, 195, 14, 1) 0%, rgba(118, 159, 8, 1) 100%);

    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#a7c30e", endColorstr="#769f08", GradientType=1);

}



#oer_help {

	margin:15px 0;

}



#oer_controls {

    margin-top: 20px;

    overflow-y: auto;

    overflow-x: hidden;

}



#oer_controls .group {

    padding: 4px 10px;

    margin: 0 0 20px 0;

    border-radius: 10px;

    border-bottom-left-radius: 0;

    border-top-right-radius: 0;

    background: #667b16;

    color: #fff;

}



#oer_controls .group a span {

    float: right;

}



#oer_controls label, #oer_controls p, #oer_controls div {

	color:#fff;

}



#p1, #p2, #p3 {

	margin-left:15px;

}



#oer_sidebar a,

#oer_sidebar a:link,

#oer_sidebar a:visited {

    color: #fff;

}



#oer_sidebar a:hover {

    color: #48541b;

}



#oer_controls input[type=number] {

    width: 60px;

    text-align: right;

}



#oer_results {

    background: #657b1669;

    text-align: center;

    margin: 40px 0 0 0;

    border-radius: 10px;

}



#oer_results p {

    padding: 4px 0;

    color: #fff;

}





/* instruction modal */



#oer_instruction_modal .modal-header {

    border-bottom: 0;

    padding: 0 1rem;

}



#oer_instruction_modal .close {

    font-weight: normal;

    font-size: 3rem;

    color: white;

}



#oer_instruction_modal .modal-content {

    background: #465708;

    opacity: 0.95;

}



#oer_instruction_modal .modal-body {

    color: white;

}











/* 3 button: Theory, Application and Investigation */



#oer_help h2 {

    background: #fff;

    padding: 6px 20px;

	font-size: 22px;

    font-weight: 400;

	color: #657b16;

    border:0;

	border-top:2px solid #fff;

	border-bottom:2px solid #fff;

    border-radius:20px;

	cursor:pointer;

}



#oer_help i {

	width:32px;

}



#oer_help h2.active {

	background: #93b40b;

    color: #fff;

    border-bottom: 2px solid #ccc;

    border-top: 2px solid #444;

}





#oer_theory, #oer_application, #oer_investigation {

	z-index:100;

	background:#657b16;

	display:block;

	position:relative;

	width:100%;

	padding:15px 30px;

	height:auto;

	min-height:100px;

	opacity:0.95;

	border-top:10px solid #fff;

	visibility: visible;

	transition: 2s opacity;

}



#oer_theory p, #oer_theory div, #oer_application p, #oer_application div, #oer_investigation p, #oer_investigation div {

	text-align:left;

	color:#fff;

}



#oer_theory.hide, #oer_application.hide, #oer_investigation.hide {

	visibility: hidden;

	opacity: 0;

	transition: visibility 2s, opacity 2s linear;

}



#oer_theory {

	margin-top:-100px;  /* change this with the actual total height */

}



#oer_application {

	margin-top:-100px; /* change this with the actual total height */

}



#oer_investigation {

	margin-top:-100px; /* change this with the actual total height */

	margin-bottom:15px; /* apply this only at the last one */

}



#oer_theory:after, #oer_application:after, #oer_investigation:after {

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  text-decoration: inherit;

  position: absolute;

  font-size: 75px;

  color: #ffffff1a;

  bottom: -10px;

  right: 10px;

  margin: 0;

  z-index: 1;

}



#oer_theory:after {

  content: "\f501";

}

#oer_application:after {

  content: "\f4fe";

}

#oer_investigation:after {

  content: "\f0c3";

}



#oer_theory .navigation, #oer_application .navigation, #oer_investigation .navigation {

	text-align: left;

}



#oer_theory .navigation a, #oer_application .navigation a, #oer_investigation .navigation a {

	color:#fff;

	font-size: 18px;

	cursor:pointer;

    background: white;

    border-radius: 10px;

    color: #647b16;

    padding: 2px 10px;

}



.navigation .hide {

	display:none;

}





/* Locks */

.fa-lock, .fa-unlock {

	cursor:pointer;

}



.fa-lock {

	color:#d96214;

}





/* On/off Switch */



.checkbox.checbox-switch {

    padding-left: 0;

}

.checkbox.checbox-switch label, .checkbox-inline.checbox-switch {

    display: inline-block;

    position: relative;

    padding-left: 0;

}

.checkbox.checbox-switch label input, .checkbox-inline.checbox-switch input {

    display: none;

}

.checkbox.checbox-switch label span, .checkbox-inline.checbox-switch span {

    width: 35px;

    border-radius: 20px;

    height: 18px;

    border: 1px solid #dbdbdb;

    background-color: #d96214;

    border-color: #d96214;

    box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;

    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;

    display: inline-block;

    vertical-align: middle;

    margin-right: 5px;

}

.checkbox.checbox-switch label span:before, .checkbox-inline.checbox-switch span:before {

    display: inline-block;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: rgb(255,255,255);

    content: " ";

    top: 0;

    position: relative;

    left: 0px;

    transition: all 0.3s ease;

    box-shadow: 0 1px 4px rgba(0,0,0,0.4);

    top:-2px;

}

.checkbox.checbox-switch label > input:checked + span:before, .checkbox-inline.checbox-switch > input:checked + span:before {

    left: 16px;

	top:-2px;

}

.checkbox.checbox-switch.switch-primary label > input:checked + span, .checkbox-inline.checbox-switch.switch-primary > input:checked + span {

    background-color: #657b16;

    border-color: #657b16;

    /*box-shadow: rgb(0, 105, 217) 0px 0px 0px 8px inset;*/

    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;

}

.checkbox.checbox-switch.switch-primary label > input:checked:disabled + span, .checkbox-inline.checbox-switch.switch-primary > input:checked:disabled + span {

    background-color: #d96214;

    border-color: #d96214;

   /* box-shadow: rgb(109, 163, 221) 0px 0px 0px 8px inset;*/

    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;

}



.checkbox.checbox-switch label {

	cursor:pointer;

}







/* Harbuger Menu */



#hmenu {

	float:right;

	margin-left:30px;

	display:none;

}



.bar,

.bar:after,

.bar:before {

	width: 30px;

	height: 4px;

}



.bar {

	position: relative;

	transform: translateY(-22px);

	background: rgba(255, 255, 255, 1);

	transition: all 0ms 100ms;

}



.bar.animate {

  background: rgba(255, 255, 255, 0); 

}



.bar:before {

	content: "";

	position: absolute;

	left: 0;

	bottom: 10px;

	background: rgba(255, 255, 255, 1);

	transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);

}



.bar:after {

	content: "";

	position: absolute;

	left: 0;

	top: 10px;

	background: rgba(255, 255, 255, 1);

	transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);

}



.bar.animate:after {

	top: 0;

	transform: rotate(45deg);

	transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;

}



.bar.animate:before {

	bottom: 0;

	transform: rotate(-45deg);

	transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;

}







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



	body {

		margin:0 auto;

	}

	

	body > .container {

		box-shadow:none;

		max-width:100%;

	}



	#oer_canvas {

		min-width:100%;

	}



	#canvas {

		width:100%;

		margin-top:15px !important;

	}



	#hmenu {

		display:block;

	}



	#hmenu a, #hmenu a:link, #hmenu a:visited, #hmenu a:hover {

		color:#fff;

	}



	#oer_sidebar {

		display:block;

		width: 285px;

		height: auto;

		position: absolute;

		z-index: 999;

		top: auto;

		right: 0;

		overflow-x: hidden;

		overflow-y: scroll;

		transition: 0.5s;

	}



	#oer_sidebar.hide > #oer_controls, #oer_sidebar.hide > #oer_help {

		display:none;

	}



	#oer_sidebar.hide {

		width:0;

		height:auto;

		min-width:0;

		padding:0;

		margin:0;

		transition: 0.5s;

	}



}









/* Theme: Blue sea 

Add class "theme-blue-sea" at body:

<body class="theme-blue-sea"> 

-------------------------------------------------- */



.theme-blue-sea #oer_title {

    background: rgb(67, 163, 243);

    background: -moz-linear-gradient(90deg, rgba(67, 163, 243, 1) 0%, rgba(34, 36, 93, 1) 100%);

    background: -webkit-linear-gradient(90deg, rgba(67, 163, 243, 1) 0%, rgba(34, 36, 93, 1) 100%);

    background: linear-gradient(90deg, rgba(67, 163, 243, 1) 0%, rgba(34, 36, 93, 1) 100%);

    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#43a3f3", endColorstr="#22245d", GradientType=1);

}



.theme-blue-sea #oer_instruction a:hover {

    color: #43a3f3;

}



.theme-blue-sea #oer_sidebar {

    background: rgb(14, 149, 195);

    background: -moz-linear-gradient(125deg, rgba(14, 149, 195) 0%, rgba(8, 114, 199, 1) 100%);

    background: -webkit-linear-gradient(125deg, rgba(14, 149, 195) 0%, rgba(8, 114, 199, 1) 100%);

    background: linear-gradient(125deg, rgb(14, 149, 195) 0%, rgb(8, 114, 199) 100%);

    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#0e95c3", endColorstr="#0872c7", GradientType=1);

}



.theme-blue-sea #oer_sidebar a:hover {

    color: #23265d;

}



.theme-blue-sea #oer_controls .group a:hover span {

    color: #94b2cc;

}



.theme-blue-sea #oer_controls .group {

    background: #283767;

}



.theme-blue-sea #oer_controls .fa-minus,

.theme-blue-sea #oer_controls .fa-plus {

    color: #28376780;

}



.theme-blue-sea #oer_canvas {

    background-color: #eee;

    background-size: 10px 10px;

    background-image: linear-gradient(to right, #ddd 1px, transparent 1px), linear-gradient(to bottom, #ddd 1px, transparent 1px);

}



.theme-blue-sea #oer_instruction_modal .modal-content {

    background: #1c3457;

}



.theme-blue-sea #oer_results {

    background: #29376669;

}



/* Locks */

.theme-blue-sea .fa-lock {

	color:#b91c1e;

}



/* On/off Switch */

.theme-blue-sea .checkbox.checbox-switch.switch-primary label > input:checked + span,

.theme-blue-sea .checkbox-inline.checbox-switch.switch-primary > input:checked + span {

	background-color:#293766;

	border-color:#293766;

}



.theme-blue-sea .checkbox.checbox-switch label span,

.theme-blue-sea .checkbox-inline.checbox-switch span {

	background-color:#b91c1d;

	border-color:#b91c1d;

}



/* 3 button: Theory, Application and Investigation */

.theme-blue-sea #oer_help h2 {

	color:#293766;

}



.theme-blue-sea #oer_help h2.active {

	background:#2e93c7;

	color:#fff;

}



.theme-blue-sea #oer_theory, .theme-blue-sea #oer_application, .theme-blue-sea #oer_investigation {

	background:#0d7fc6;

}