/*
    Matrix Search CSS
*/


/* Matrix index page and basic styles

BODY  { font-family:'Noto Serif'; }
/*
H2  { margin-top: 40px; margin-bottom: 20px; }
H3  { margin-top: 25px; }

P, UL, OL  { margin: 0px 0px 10px 0px; }
OL LI, UL LI  { padding-left:0; margin-left: 15px; }


H1.lessonH1  { font-size: 2em; line-height: 1.1em; color: #333333; font-weight: 300; margin-top: 25px; margin-left: 10px; }
H2.lessonH2  { font-size: 1.5em; line-height: 1.2em; color: #333333; font-weight: normal; text-align: left; margin: 5px 0; }
H4.lessonH4  { margin-top: 25px; margin-left: 0px; }
H1.resourceH1  { margin-left: 10px; margin-top: 20px; }
#page  { box-sizing: border-box; padding-left: 3%; padding-right: 3%; }
p.mediatype  { font-size: 1.5em; margin: 0px 0px 7px 15px; }


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;}

h2.matrixh2 {font-size:2.3rem; line-height:2.5rem; text-transform:none; }
.searchhead {text-align:left; font-size:1.8rem; line-height:2rem; margin-left:10px; margin-bottom:0;}

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

/*MyBinder*
.deletebtn  { padding: 5px 20px; margin: 5px 15px 20px 10px; background-color: #4d2711; color: #f4d0ab; border-radius: 6px; border: none; display: inline-block; font-size: 1em; line-height: 1em; cursor: pointer; }
.deletebtn:hover  { background-color: #361f11; }
.deletebtn.disable  { background-color: #a7a7a7; color: #ffffff; }
.deletebtn.disable:hover  { background-color: #bbbbbb; color: #ffffff; }
.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; }
.mark2  {top:12px !important; left:10px !important;} /*position of checkbox for only MyBinder
.purpose2  { margin: 3px 0px 20px 55px; font-size:1.1rem; line-height:1.6rem; font-weight:400;}
.purpose2 p  { margin:0; }*/

/*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/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: #4d2711; color: #f4d0ab; font-size: 1em; cursor: pointer; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.6); transition:all 0.3s;}
.showallbtn:hover  { background-color: #361f11; }
.showrest.hidden  { display: none; }

/*used in searchresult*
.purpose  { margin: 5px 0px 20px 25px; font-size:1.1rem; line-height:1.6rem; font-weight:400;}
.purpose p  { margin:0; }

/* lessons *
#standardbtns  { width: 100%; border-collapse: collapse; margin:35px 5px 25px 5px; border: none; }
#standardbtns TR TD  { border: none; width: 33.3%; padding: 0px 5px; margin: 0px; }
#standardbtns.four TR TD  { width: 25%; }
#standardbtns TR TD  { vertical-align: top; font-size: 16px; line-height: 20px; }
#standardbtns TR TH  { vertical-align: middle; font-size: 16px; line-height: 20px; }
#standards  { width: 100%; min-height: 200px; }

/*View more...button in lesson*
#backgroundcrop  { width: 100%; overflow: hidden; height: 170px; position: relative; }
#showmorebackground  { width: 104%; height: 40px; position: absolute; bottom: 0px; left: -2%; background-image: url("/images/whiteblend.svg"); background-size: auto 100%; background-repeat: repeat-x; }
#seemore  { color:#f4d0ab !important; background-color: #4d2711; 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: #361f11; }
#showmorebackground.hidden  { background-image: none; bottom: 0px; }
#backgroundcrop.show  { height: auto; overflow: visible; padding-bottom: 35px; }

/*lesson, resource button's action*
.action  { display: inline-block; margin: 0; width: 47%; background-color: #4d2711; border-radius: 6px; color: #f4d0ab; text-align: center; font-size: 1.1em; line-height: 1em; padding: 7px 0px; text-decoration: none; cursor: pointer; }
.action:hover  { background-color: #361f11; text-decoration: none; }
.action.disabled  { background-color: #999999; } 
.action.disabled:hover  { color: #ffffff; }
.action.inbinder  { background-color: #b71d21; color: #dddddd; transition:all 0.3s;}
.action.inbinder:hover  { background-color: #d73d41; color: #ffffff; }
.additionalactions  { width: 98%; margin-left: 1%; margin-bottom:35px;}
.additionalactions a {color:#f4d0ab;} /*to change button link color*/

/*lesson.tpl*
h4.lessontitle {font-size:2.6rem; line-height:2.8rem; margin:0.2rem 0.2rem 0.5rem 0.3rem; font-weight:500;}
h5.Lcategory  {font-size:1.7rem; line-height:1.9rem; margin:0.9rem 0.2rem 0rem 0rem; font-weight:400;}
.Lsection {margin:0.2rem 0.2rem 0.5rem 0.9rem; font-size:1.1rem !important; line-height:1.45rem !important; font-weight:400;}
.Lsection li {padding:0 !important;}
.Lsection ul, .Lsection > div ol  {margin:0 0.2rem 0.2rem 2rem;}
.Lsection p {margin:0 0.2rem 0.1rem 0rem;}
.Lsection OL LI UL LI, .Lsection UL LI UL LI  {margin-left:0; padding-left:0;}
.Lsection IMG  {padding:15px;}

.standardbtn  { border: none; font-size: 1em; line-height: 1.2em; cursor: pointer; width: 100%; background-color: #4d2711; color:#f4d0ab; display: block; text-align: center;  transition:all 0.3s;}
.standardbtn:hover  { background-color: #815c36; color: #f4d0ab; } 
.standardbtn.clicked  { background-color: #1e0f03; color: #f4d0ab; transition:all 0.3s; }
.standardbtn.clicked:hover  { background-color: #815c36; }

.showstd.hidden  { display: none; }
/*.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; margin-top: 20px; text-align: left; }
.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; }
.ccdesc  { padding-left: 8px; }
.showstd P.contentstandard  { margin-bottom:0px; font-size:1.1rem; }
.showstd UL.pl55  { margin-left:55px; }
.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:5px 5px 10px 15px; }
.showstd ul li {padding-left:0;}

.showstd h5 {font-size:1.8rem; line-height:2.0rem; font-weight:500; margin:3px 15px 10px 10px;}
.showstd h6 {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  {margin:5px 15px 25px 50px;}
.showstd ul.stdul {margin:-3px 0px 15px 37px !important;}
.showstd .statestandard  {margin:0 15px 5px 35px;}
.showstd .contentstandard  {margin:0 15px 5px 35px;}
.ccdesc {padding: 10px 0px 2px 0px; font-size:1.15rem;}

/*resource.tpl *
h4.resourcetitle {font-size:2.6rem; line-height:2.8rem; margin:1.5rem 0.2rem 0.5rem 0.1rem; font-weight:500;}
h5.Rcategory  {font-size:1.6rem; line-height:1.8rem; margin:0.5rem 0.2rem 0rem 0.2rem; font-weight:400;}
.Rsection {margin-left:25px; margin-bottom:15px; font-size:1.1rem !important; line-height:1.45rem !important; font-weight:400;}
.Rsection p {margin:0 !important;}
.Rsection li {padding:0 !important;}
.Rsection ul, .Rsection ol {margin:0 0.2rem 0.2rem 2rem;}
.Rsection IMG  {padding:15px;}
#thumbnail  { margin: 20px 0px 15px 0px; max-width: 100%; height: auto; }

/*
.section  { display: block; margin: 5px 0px 5px 20px; clear: both; }
.section > div {margin-left:30px;}
.section P, .section UL, .section LI, .section SPAN, .section, .section TEXT {margin:0;}
.section > div li {padding-top:1px; padding-left:3px}
.section > div ul, .section > div ol  {margin-left:30px; margin-bottom:10px;}
.section > div p  { margin: 0px 20px 10px 2px; }
.section OL LI UL LI, .section UL LI UL LI  { margin-left: 0px; padding-left: 0px; }
.section IMG  { padding: 15px; }
.section P, .section UL, .section LI, .section SPAN, .section, .section TEXT  { font-size: 1em; line-height: 1.4em; font-family: 'Open Sans', sans-serif; }
.section p {margin-bottom:12px !important;}
.section A  { font-size: 1em; line-height: 1.1em; }
.section A:hover  {  }
.section ol, .section ul  { margin-left:50px; }
.section ol li, .section ul li  { padding-left:0 !important; }
.lessons  { margin: 10px 0px 10px 10px; padding-left: 25px; }
*/

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

.mxbutton {
  font-family:'Raleway'; font-size:1.1rem; line-height:1.0rem; text-align:center; color:#f4d0ab;
  border-radius:6px; display:inline-block;
  border:none; background-color:#4d2711;
  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:#361f11; color:#ffecd9;}
.mxbutton a {color:#f4d0ab;}
.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;}


/* Login *
#mybinderlogin  { border: none; display: block; padding: 10px 40px; border-radius: 6px; cursor: pointer; background-color: #4d2711; color: #f4d0ab; font-size: 1em; line-height: 0.9em; margin: 10px 0px 30px 20px; }
#mybinderlogin:hover  { background-color: #361f11; }
/*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: #4d2711; color: #f4d0ab; font-size: 1em; line-height: 0.9em; margin: 25px 0px 40px 0px; }
#createmybinder:hover  { background-color: #361f11;}
#create  { margin: 0px 20px; }
#location  { cursor: pointer; }
.required  { color: #cc1313; }
.half  { width: 50%; padding-right: 2%; }
.whole  { width: 100%; }
.half, .whole  { float: left; margin: 5px 0px; box-sizing: border-box; }
.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) {
    /*.inputField  { padding: 5px 10px; width: 380px; font-size: 16px; }
    #address  { width: 500px; }
}
@media screen and (max-width: 1050px){
    #address  { width: 70%; }   
}
@media screen and (min-width: 851px) {
    /*.section H2  { margin: 15px 0px 5px -10px; }
    .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) {
    /*.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; 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%;}

h2.matrixh2 {font-size:1.5rem; line-height:1.7rem;}
.lessonanchor {display:block; margin-left:3.2rem;}
.mark2  {top:36px !important; left:10px !important;}
.purpose2 {margin:0 0.5rem 0rem 3.4rem !important;}
}
*/