/*
H1  { text-align: left; }
H2  { margin-top: 40px; margin-bottom: 20px; }

ul.matrixlink {margin:3rem 0.5rem 3rem 1.5rem;}
ul.matrixlink li {list-style-type:none; margin:0; padding:6px 0;}
ul.matrixlink li a {padding:0 15px; position:relative; display:block; font-size:1.2rem;}
ul.matrixlink li a::before {
  content:"\f0da"; font-size:1.2rem;
  font-family:FontAwesome;
  position:absolute;
  left:2px; top:0;
  transition:all .2s;
}
ul.matrixlink li a:hover::before {left:6px;}

.searchhead {text-align:left; font-size:1.8rem; line-height:2rem; margin-left:10px; margin-bottom:0;}

#matrixstuff  { background-color: #ffffff; padding: 10px 4% 20px 4%; box-sizing: border-box; }
#slide IMG  { margin-top: -45px; }

/*
.content H5  { color: #4c7700; font-size: 1.3em; margin-bottom: 2px; margin-left: 10px; } 
.content P.mediatype  { font-size: 1.6em; color: #666666; margin: 0px 0px 0px 10px; }


.required, .content P SPAN.required  { color: #ff0000; margin-right: 3px; }
.check  { position: relative; margin-left: 30px; padding-bottom: 4px; }
.check SPAN  { font-size: 1.5em; line-height: 1.3em; padding-top: 2px; }
.noresults  { text-align: center; background-color: #e8e8e8; padding: 5px 0px; }
.lessonanchor  { font-size:1.7rem; line-height:1.7rem; display: inline-block; }

.deletebtn  { padding: 5px 20px; margin: 5px 15px 20px 10px; background-color: #b54343; color: #ffffff; border-radius: 6px; border: none; display: inline-block; font-size: 1em; line-height: 1em; cursor: pointer; }
.deletebtn:hover  { background-color: #d56363; }
.deletebtn.disable  { background-color: #bbbbbb; }
.deletebtn.disable:hover  { background-color: #cfcfcf; }

.errorcode  { margin: 20px 0px 0px 10px; color: #cc1515; font-weight: bold; background-color: #ffcccc; text-align: center; padding: 6px 0px; }
.successcode  { margin: 20px 0px 0px 10px; background-color: #a7e3bc; padding: 6px 0px; }
.successcode .h2  { color: #2a6d42; font-weight: bold; text-align: center; font-size: 1.4em; line-height: 1.1em; margin: 10px 0px 5px 0px; }
.successcode P, .successcode SPAN  { color: #2a6d42; font-weight: bold; display: block; text-align: center; }


/*View more...button in search
.showall  { width: 100%; position: relative; }
.showallfade  { height: 80px; width: 100%; position: absolute; z-index: 2; bottom: 0px; left: 0px; background-image: url("/images/matrix/whiteblend.svg"); background-size: auto 100%; }
.showallbtn  { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); border: none; border-radius: 5px; padding: 7px 15px 8px 15px; background-color: #b54343; color: #ffffff; font-size: 1em; cursor: pointer; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.6); transition:all 0.3s;}
.showallbtn:hover  { background-color: #d56363; }
.showrest.hidden  { display: none; }
.purpose  { font-size: 1.1em; line-height: 1.3em; margin: 5px 0px 20px 15px; }
.purpose p  { font-size: inherit; line-height: inherit; margin:0 !important; }

/* lesson
#standardbtns  {width:100%; border-collapse:collapse; margin-top:30px; margin-left:0px; margin-right:0px; border:none; }
#standardbtns TR TD  {border:none; width:33.3%; padding:0px 5px; margin:0;}
#standardbtns.four TR TD  {width: 25%;}
#standardbtns TR TD  {vertical-align:top;}
#standardbtns TR TH  {vertical-align:middle;}
#standards  {width:100%; min-height:200px;}

.standardbtn  {border:none; font-size:0.98rem; line-height:1.18rem; cursor:pointer; width:100%; background-color:#b54343; color:#FFF; display:block; text-align:center; padding:8px 10px; border-radius:8px; transition:all 0.3s; height:35px;}
.standardbtn:hover  { background-color: #217a55; color:#FFF; } 
.standardbtn.clicked  { background-color: #419a75; color #FFF; transition:all 0.3s;}
.standardbtn.clicked:hover  { background-color: #61ba95; color:#FFF; }


#standardbtns  { width: 100%; border-collapse: collapse; margin-top: 30px; margin-left: 0px; margin-right: 0px; border: none; }
#standardbtns TR TD  { border: none; width: 33.3%; padding: 0px 5px; margin: 0px; }
#standardbtns.four TR TD  { width: 25%; }
#standards  { width: 100%; min-height: 200px; }
.standardbtn  { border: none; font-size: 1em; line-height: 1.2em; cursor: pointer; width: 100%; background-color: #b54343; color: #ffffff; display: block; text-align: center; transition:all 0.3s;}
.standardbtn:hover  { background-color: #d56363; color: #ffffff; } 
.standardbtn.clicked  { background-color: #e57373; transition:all 0.3s;}
.standardbtn.clicked:hover  { background-color: #f58383; }

.showstd.hidden  { display: none; }
.showstd h4 {font-size:1.8rem; line-height:2.0rem; font-weight:500; margin:8px 15px 10px 10px;}
.showstd h5 {font-size:1.5em; line-height:1.8rem; font-weight:400; padding-bottom: 5px; margin-left:30px;}
.showstd ul  {margin:-10px 0px 15px 30px !important ;}
.showstd ul li  {padding:1px 0px 1px 2px; margin-left:30px; }
.showstd p  {font-size:1.1rem; line-height:1.45em; margin:5px 15px 25px 30px !important;}
.showstd ul.stdul {margin:-22px 0px 15px 30px !important;}
.showstd .statestandard  {margin:0 15px 5px 20px;}
.showstd .contentstandard  {margin:0 15px 5px 20px;}
.ccdesc {padding: 10px 0px 2px 0px; font-size:1.0rem;}

/*View more...button in lesson
#backgroundcrop  { width: 100%; overflow: hidden; height: 170px; position: relative; }
#showmorebackground  { width: 104%; height: 40px; position: absolute; bottom: -1px; left: -2%; background-image: url("/images/matrix/whiteblend.svg"); background-size: auto 100%; background-repeat: repeat-x; }
#seemore  { color: #ffffff; background-color: #b54343; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); cursor: pointer; padding: 5px 15px 7px 15px; border-radius: 6px; border: none; font-size: 16px; line-height: 16px;  transition:all 0.3s;}
#seemore:hover  { background-color: #d56363; }
#showmorebackground.hidden  { background-image: none; bottom: 0px; }
#backgroundcrop.show  { height: auto; overflow: visible; padding-bottom: 35px; }

.section  { display: block; margin: 5px 15px 5px 5px; clear: both; font-size:1.15rem; line-height:1.55rem; font-weight:400;}
.section > div {margin-left:30px;}
.section > div.gradetime {margin-left:30px;}
.section > div ul li {padding-left:5px; font-size:inherit;}
.section > div ol li {padding-left:5px; font-size:inherit;}
.section > div li li {font-size:1.0em !important; line-height:1.5rem !important;}
.section > div ul, .section > div ol  {margin-left:28px !important; margin-bottom:10px !important;}
.section > div p  { margin: 0px 20px 10px 2px; font-size:inherit;}
.section OL LI UL LI, .section UL LI UL LI  { margin-left: 0px; padding-left:0px; }
.section IMG  { padding: 15px; }

.section p {margin-bottom:12px !important; margin-left:25px !important;}
.section ul, .section ol {margin-left:55px !important;}
.section ul li {padding-left:0px !important;}
.section P, .section UL, .section LI, .section SPAN, .section, .section TEXT, .section A  { font-size: 1em; line-height: 1.4em; font-family: 'Open Sans', sans-serif; }
.section H2  { text-align: left; font-size: 1.5em; line-height: 1.2em; }
.section P  { margin: 0px 20px 10px 0px; }
.section OL, .section UL  { margin-left: 0px; margin-bottom: 10px; }
.showstd, .showstd P  { font-size: 1em; line-height: 1.2em; padding-bottom: 20px; }
.showstd H2  { font-size: 1.5em; line-height: 1.2em; margin-bottom: 5px; }
.showstd H3  { font-size: 1.2em; line-height: 1.2em; font-weight: bold; padding-bottom: 5px; margin-left: 0px; }
.showstd UL  { padding: 2px 0px 2px 25px; margin: 0px 0px 5px 0px; }
.showstd UL LI  { font-size: 1em; line-height: 1.2em; padding: 2px 0px 2px 6px; }
.showstd P  { padding-left: 25px; padding-bottom: 0px; margin: 0px 20px 15px 10px; }
.ccdesc  { padding-left: 8px; }
.showstd P.contentstandard  { margin-bottom: 10px; margin-left: 0px; }
.showstd UL.pl25  { margin-left: 25px; }
.showstd H4.state  { font-size: 1.3em; line-height: 1.2em; margin-bottom: 5px; margin-left: 0px; }
.showstd .statestandard  { margin-left: 0px; padding-left: 0px; color: #000000; }
.showstd UL  { margin: -10px 0px 10px 5px; }


.additionalactions  { width: 102%; margin-left: -1%; }
.additionalactions a {color:#FFF;} /*to change button link color

.action  { display: inline-block; margin: 0px 1%; width: 47%; background-color: #b54343; border-radius: 6px; color: #ffffff; text-align: center; font-size: 1.1em; line-height: 1em; padding: 7px 0px; text-decoration: none; cursor: pointer; transition:all 0.3s;}
.action:hover  { background-color: #d56363; text-decoration: none; color: #ffffff; }
.action.disabled  { background-color: #999999; transition:all 0.3s;} 
.action.disabled:hover  { color: #ffffff; }
.action.inbinder  { background-color: #337b78; transition:all 0.3s;}
.action.inbinder:hover  { background-color: #63aba8; }


/*MyBinder
.purpose2  {font-size: 1.1em; line-height: 1.3em; margin: 3px 0px 20px 53px; }
.purpose2 p  {font-size: inherit; line-height: inherit; margin:0 !important; }
.mark2  {top:10px !important; left:10px !important;} /*position of checkbox for only MyBinder*/

/*resource
.leftmargin {margin-left:2rem;}
.Rsection {display:block; margin:5px 15px 5px 35px; clear:both; font-size:1.15rem; line-height:1.55rem; font-weight:400;}
.Rsection p {margin:0 !important; font-weight:400; font-size:inherit;}
.Rsection li {padding-top:2px; padding-left:5px;}
.Rsection ul, .Rsection ol  {margin:0 0.2rem 0.2rem 2rem;}
.Rsection OL LI UL LI, .Rsection UL LI UL LI  {margin-left:0; padding-left:0;}
.Rsection IMG  {padding:15px;}
#thumbnail  { margin: 25px 0px 10px 0px; }
.lessons  { margin: 10px 0px 10px 30px !important; padding-left:25px; font-size:inherit;}

/* button 
#mybinder  {/border: none; display: block; padding: 10px 40px; border-radius: 6px; cursor: pointer; background-color: #b54343; color: #ffffff; font-size: 1em; line-height: 0.9em; margin: 10px 0px 30px 10px;}
#mybinder:hover  {/* background-color: #d56363;}

.mxbutton {
  font-family:'Raleway'; font-size:1.1rem; line-height:1.0rem; text-align:center; color:#FFF;
  border-radius:6px; display:inline-block;
  border:none; background-color:#b54343;;
  padding:10px 20px;
  transition: all 0.5s;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); cubic-bezier(.25,.8,.25,1);
  margin-left:20px; margin-bottom:20px;
}
.mxbutton:hover {background-color:#d56363}
.mxbutton a {color:#FFF !important; }
.mxbutton span {cursor: pointer;
  display:block;
  position: relative;
  transition: 0.5s;}
.mxbutton span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.mxbutton:hover span {padding-right: 25px;}
.mxbutton:hover span:after {opacity: 1; right: 0;}

.mxsearchw {width:180px;}
.mxloginw {width:330px;}
.mxcentetw {width:46%; margin:3px auto;}
.mxLRbutton {width:29.3%;}
.mxbuttonwrap {display:block; margin:50px auto; text-align:center;}


/*matrix.tpl login
.logingrid {
  display:grid;
  grid-template-columns:auto auto;
  margin:0 15px;
}
.logingrid > div {
  padding:5px 0 9px 0;
  display:inline-block;
  align-items: center;
}
.logingrid label {display:block; margin-left:2px;}
#mybinderlogin {width:380px; margin:0 auto; display:flex; justify-content:center;}
.logininputs  { border: 1px solid #888888; width: 90%; padding: 4px 8px; font-size: 1em; line-height: 1em; display: inline-block; border-radius: 5px; }
.logininputs:hover  { border: 1px solid #aaaaaa; }
.errorcode  { margin: 20px 0px 0px 10px; color: #cc1515; font-weight: bold; line-height: 120%; background-color: #ffcccc; text-align: center; padding: 10px 20px; }

/* Create User 
#createmybinder  {/border: none; display: block; padding: 10px 40px; border-radius: 6px; cursor: pointer; background-color: #b54343; color: #ffffff; font-size: 1em; line-height: 0.9em; margin: 25px 0px 40px 0px }
#createmybinder:hover  {/* background-color: #d56363; }
#create  { margin: 0px 20px; }
#location  { cursor: pointer; }
.required  { color: #cc1313; font-size: 16px; }
.half  { width: 50%; }
.whole  { width: 100%; }
.half, .whole  { float: left; margin: 5px 0px; }
.clear  { clear: both; }
.inputs  { border: 1px solid #cccccc; width: 70%; padding: 4px 8px; font-size: 1em; line-height: 1em; }
.inputs::placeholder  { color: #999999; }
.redinput  { background-color: #ffdddd; border: 1px solid #cc1313; color: #cc1313; }
.showerror  { margin: 5px 0px; color: #cc1313; font-weight: bold; }


/* forgotpassword.tpl resetpassword.tpl 
#address  {margin:0 auto; text-align:center;}
#resetpassword, #resetemail {display:flex; justify-content:center; width:44%;}
#resetpassword::placeholder, #resetemail::placeholder  {color:#888; font-weight:normal;}
#forgoterror  {margin-bottom:20px;}
.resetinputs  {border:1px solid #888; padding:6px 10px; font-size:1rem; line-height:1rem; border-radius:5px; display:block; margin:0 auto; display:flex; justify-content:center;}
.resetinputs:hover {border: 1px solid #aaa; background-color:aliceblue;}



@media screen and (min-width: 1050px) {
    #address  { width: 500px; }
}
@media screen and (max-width: 1050px){
    #address  { width: 70%; }
}
@media screen and (min-width: 851px) {
    /*.section H2  { margin: 15px 0px 5px -20px; }
    .section UL  { padding-left: 18px; }
    .section OL  { padding-left: 21px; }
    .section UL LI  { padding: 2px 0px 2px 8px; }
    .section OL LI  { padding: 2px 0px 2px 6px; }
    .standardbtn  { padding: 8px 10px; border-radius: 8px; }
}
@media screen and (max-width: 850px) {
    .standardbtn  { padding: 8px 10px; border-radius: 8px; height: 55px; }
    .logingrid {grid-template-columns:repeat(1, minmax(1px, 100%)); grid-gap:0.1rem; margin:0 15px;}
	.buttonwrap {display:block; grid:block;}
    
}
@media (max-width: 768px) {
    .half  { width: 100%; padding-right: 0%; padding-top: 10px; }
	.mxcentetw {width:75%;}
	#resetpassword, #resetemail {width:71%;}
	.standardbtn {padding:8px 10px; border-radius:8px;}
	.mxLRbutton {width:75%;}
.lessonanchor {display:block; margin-left:3.2rem;}
.mark2  {top:36px !important; left:10px !important;}
.purpose2 {margin:0 0.5rem 0rem 3.4rem !important;}
#standardbtns TR TD  {padding:0px 1px;}
.standardbtn {padding:6px 2px; border-radius:5px; height:55px;}
}


@media screen and (max-width: 414px) {
.standardbtn {font-size:0.8rem; line-height:0.9rem;}
}
*/