/*
	Centre for Flexible and Distance Learning
	authors: Craig Housley, WenChen w.hol@auckland.ac.nz
*/
@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/masks.corner-cuts.min.css";
html {
	overflow-x:auto;
	height:100%;
	scroll-behavior: smooth;
}
[id]{
	scroll-margin-top: 4rem;
}
body {
	background-color: #FFFFFF;
	margin: 0 0 0 0;
	padding: 0 1px 0 0;  
	font-size: 1rem;
	font-weight: normal;
	font-family: "LatoWeb","Helvetica Neue",Helvetica,Verdana, Arial,sans-serif;
	line-height: 1.5;
	color: #2D3B45;
	height:100vh;
}
body:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;
          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          z-index: 100;
}
#content-outer, #content{
	min-height:100%;
	height:auto !important;
	height:100%;
	background: url('../images/side_nav_back.png') repeat-y 170px; /* x-pos is calculated as width of sidenav + 10 */
	margin: 0 auto -45px;
}
.nobackgroundimage{
	background:none !important;
}
a:link, a:visited {
	text-decoration: none;
	color: #00468C;
	}
	
a:hover {
	text-decoration: underline;
	color: #8B7B73;
	}
a img{ border:none; }

/*a[href^="mailto:"]:before { content: "\2709"; color:#ccc;padding-left:2px;  }*/
/* MAIN HEADER */
	/* start course title shadow*/
	.courseTitle {
		position:absolute;
		margin-left:0px;
		margin-top:20px;
		font: 1.4em Verdana;		
	}
	.courseTitle_shadow {
		position:absolute;
		margin-left:1px;
		margin-top:21px;
		font: 1.4em Verdana;	
		color: #333;	
	}
	
	.title22 {
		font: 1.4em Verdana;
	}
	.title08, .title08_shadow {
		font-size: 0.7em;
	}
				.oldcourseTitle {
						position:absolute;
						margin-left:20px !important;
						margin-top:20px !important;
						font: 1.4em Verdana;
				}
				.oldcourseTitle_shadow {
						position:absolute;
						margin-left:21px !important;
						margin-top:21px !important;
						font: 1.4em Verdana;
						color: #333;
				}
				.oldtitle22 {
						font: bold 1.8em Verdana;
				}
				.oldtitle08, .oldtitle08_shadow {
						font-size: 0.7em;
				}
	#logoTable {
		padding-left: 5px;
		padding-top: 2px;
	}
		/* end course title shadow*/
.header {
	background-color: #125E92;
}
	
.bar {
	background-color: #8B7B73;
	text-align: right;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #fff;
	font-size:14px;
}

.adminBar {
	background-color: #EDEFF0;
	border-top: 1px solid #fff;
}
.adminBar img{
	margin:0 5px 0 0;
}
.bar a:link, .bar a:visited {
	text-decoration: none;
	color: #CCC !important;
	padding-left: 5px;
	padding-right: 5px;
	border-left: 1px solid #fff;
}
	
.bar a:hover {
	color: #F1F7FF !important;
}
	
.header_title {
	color: #000;
}
	
.rightAlign {
	padding-left: 14px;
}


/* ABOUT page NAV see: http://www2.auckland.ac.nz/cfdl/nursing704/index.html for example*/

#about_nav {
	display: block;
	font-size: medium;
	font-weight: bolder;
	color: #737373;
	border-bottom: 1px solid #CCC;
}

#about_nav a {
	font-size: medium;
}

/* LEFT-HAND NAVIGATION */

#navcontainer {
	width: 169px;
	float: left;
	margin: 5px -500px -9000px 0;
}
				
#navcontainer ul, #submenu_topic ul, #submenu_section ul {
	margin-left: 0;
	padding-left: 0;
	margin-top: 0;
	list-style-type: none;
}
#submenu_topic ul, #submenu_section ul{
	margin-left:6px;
}
#navcontainer a {
	display: block;
	padding: 3px 0 3px 6px;
	background-color: #FFF;
	border-top: 1px solid #CCC;
	width: auto;
}
	
#navcontainer a:link, #menu a:visited {
	color: #96852C;
	text-decoration: none;
}

#navcontainer a:hover {
	color: #51778A;
	background-color: #EDEFF0;
}
/* Hide from IE5-mac. Only IE-win sees this. Fixes the peek-a-boo bug!!! */
 
* html #navcontainer {
  margin-right: 10px;
 }
 
* html p {
  /*height: 1%;*/
  margin-left: 0;
 }

.blogTitle {
	background:url(../images/bar_bg.png) repeat-x;
	color:#eee;
	font-size:medium;
}
/* End hide from IE5/mac */

div #active{
	padding: 0;
	width: auto;
	color: #0059B3;
}
	
.active{ 
	color:#484848; 
	padding:0 4px;
	background-color: #E4E4E4;
}

div #subnav, li #subnav {
	border-top: 1px solid #CCC;
}
	
#subnav a, #submenu_topic a,  #submenu_section a {
	display: block;
	border: 0 !important;
	width: auto;
	margin-left: 10px;
	padding: 3px 0 3px 6px;
	border-top: 1px solid #FFF;
}

#subnav a:hover, #submenu_topic a:hover,  #submenu_section a:hover {
	color: #51778A;
	background-color: #EDEFF0;
}	
	
#subnav #active, #submenu_topic #active, #submenu_section #active{
	margin-left: 10px;
	color: #0059B3;
	width: auto;
}	
	
#active a, #active a:hover {
	border-bottom:0 !important;
	margin-left: 0 !important;
	color: #0059B3;
	background-color: #E4E4E4;
}

/* MAIN CONTENT STYLES */

.container {
	border-top: 1px solid #CCC;
	overflow:auto;
}

#main {
	padding: 10px;
	margin: 5px 5px 45px 180px;
	background-color: #EDEFF0;
	line-height: 140%;
	min-height:550px;
	height:auto !important;
	height:550px;
}

#main a:visited:hover { 
	background: none;
}

.noprt a:visited, .iiDiv a:visited, a[id^="imap"]:visited, .gross a:visited, .adminLink a:visited, .top, a[href="#trigger"] {
        padding-right: 0 !important;
        background:none !important;
}

.navLinks{
	clear:both;
	font-weight:bold;
}
#courseLinks select{ width:170px; }

H1 { 	
	color: #003366;
  	font-size: large;
	margin: 4px;
	border-top: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
}
.h1s {
	padding-left:20px;	
}
.h2s {
	padding-left:20px;	
}
H2 {
	color: #003366;
	font-size:medium;
}

h3 {
	color: #003366;
	font-size:  1.1em;
}
		
h4 {
	color: #003366;
	font-size:  1.0em;
}

dl, ol {
	margin-top:0;
	margin-bottom:0;
}

.icon {
	color: #51778A;
	font-weight: bold;
	font-stretch: wider;
	font-size: small;
	vertical-align: middle;
}
	
.quote {
	display: block;
	margin: 0px 0px 10px 20px;
}
	
.highlight {
	border: 1px solid rgb(173, 173, 173) !important;
	padding: 10px;
	margin-left: 15px;
	margin-right: 15px;
}

.speechHighlight {
    background-color: #ffff99;
}
/*caseStudy style*/
.caseStudy {
	background-image:url('../images/dogearCS.gif');
	background-repeat: no-repeat;
	border-right:1px solid #D1D1D1;
	background-color:transparent;
}

.caseStudyInner {
	border-bottom: 1px solid #D1D1D1;
	border-left: 1px solid #D1D1D1;
	background-color: #ffffff;
	padding:15px;
}
/*end caseStudy style*/
li {
	margin-bottom: 0px;
	line-height: 140%;
}
	
.mediaFile {
	background-color: #eee;
	border: solid 1px #000000;
	padding: 0 10px 10px 10px;
	position: absolute;
	z-index:999;
}

.mediaFileWhite {
	background-color: #fff;
	border: solid 2px #10607B;
	padding: 0 10px 10px 10px;
	position: absolute;
}


hr {
	margin-top: 5px;
}

.arrows a:link, .arrows a:visited {
	color: #9D9DA1 !important;
}

/* SCHEDULE TABLE */
.schedule {
	border-bottom: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	border-collapse: collapse;
	background-color: #e7e7e7;
}
 
.schedule td, .schedule th {
	border-top: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
	padding: 5px;
	vertical-align: top;
}
.schedule th {
	background-color: #0085b7;
	color: #ffffff;
}


.logininfo {
	color:white;
}
.logininfo a, .adminBar a{
	border:0;
}
.adminBar {
	position:relative;
	background-color:#fff;
	color:#111;
	padding:2px;
}
#hidden, .hidden
{
	display:none !important;
	visibility:hidden;
}
/*new dropshadow by Craig Housley 31/07/08*/
.caption {
	color:#666;
	text-align:center;
	font-size:0.85em;
	font-family:Verdana;
	padding:0 12px 6px 6px;
	border-top: 1px solid #CCCCCC;
	display:block;
}
#captionTop {
	color: #777;
	display:block;
	border-bottom: 1px solid #CCCCCC;
	font: italic 0.8em;
}
.imgCaption {
	color:#666;
	text-align:center;
	font-size:0.85em;
	word-wrap: break-word;
	white-space:normal;
}
	
.captionbottom {
	margin-left:6px;
	background:url(../images/shadowAlpha1.png) no-repeat bottom right;
	height:6px;
}

/*fancyZoom image Gallery*/
.photo a{
	text-decoration:none;
	padding:3px;
	position:relative;
}
a span.enlarge {
	width: 25px;
	height: 25px;
	display: block;
	position: absolute;
	bottom: 10px;
	left: 10px;
	background: url( ../icons/enlarge_image_overlay.png ) no-repeat;
}
a span.magnify {
	width: 25px;
	height: 25px;
	display: block;
	position: absolute;
	bottom: 10px;
	left: 10px;
	background: url( ../icons/magnify_image_overlay.png ) no-repeat;
}
.photo p {
	margin: 0px; 
	font-size: x-small; 
	line-height: normal; 
	color: rgb(136, 136, 136);
}

/* Cloud-zoom This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens {
	border: 4px solid #888;
	margin:-4px;	/* Set this to minus the border thickness. */
	background-color:#fff;	
	cursor:move;		
}

.empty, #empty, .clear {
        clear: both;
        height: 1px;
        overflow: hidden;
}

/* This is for the title text. */
.cloud-zoom-title {
	font-family:Arial, Helvetica, sans-serif;
	position:absolute !important;
	background-color:#000;
	color:#fff;
	padding:3px;
	width:100%;
	text-align:center;	
	font-weight:bold;
	font-size:10px;
	top:0px;
}

/* This is the zoom window. */
.cloud-zoom-big {
	border:4px solid #ccc;
	overflow:hidden;
}

/* This is the loading message. */
.cloud-zoom-loading {
	color:white;	
	background:#222;
	padding:3px;
	border:1px solid #000;
}

.cloudphotos img{ border:0;}
.cloudCaption{
	color:#666;
	text-align:center;
	font-size:0.85em;
	font-family:Verdana;
	padding-top:3px;
}

/*hideShowEye*/
#container {
	padding-left: 15px;
	padding-right: 15px;
	background-repeat: no-repeat;
}

a.hideShowToggle {
	color: rgb(0, 89, 179); 
}

/*form stuff*/
.iiDiv {
	padding: 1em;
}

.iiTitle {
	font-weight: bolder;
	font-size: large;
	vertical-align: middle;
}

.iiQ {
	padding: 2px;
	font-weight:bold;
}

.formRequired:after {
	content:"*";
	color: red;
}

.toggleSurveyFeedback a {
	display:none;
}

.toggleSurveyFeedback a:visited{
	display:block;
}
/*end form stuff*/

/*to avolid image float out of a pane*/
.item { 
	border: 0;
}
.item:after {
	content: "";
	display: block;
	height: 0;
	clear: both; 
}

/*framed image style*/
.frame {
	position:absolute; 
	top:0; 
	left:0; 
	width:100%; 
}

#background {
	position:absolute; 
	z-index:1; 
	width:100%; 
	height:100%;
}

/* for sequential content*/
.sequentialContent{
	padding:0;
	margin:0;
	list-style-type:none;
	border:0;
}

.caseStudyHidden{
	display:none;
}

.caseStudyShow{
	display:block;
}
/*end for sequential content*/

/*start tooltip hack*/
 a.toolTip, a.toolTip:visited {
	color:#c00; 
	position:relative;
}

a.toolTip img {
	position:absolute;
	width:0; /* make the image zero size */
	height:0; 
	left:0;
	top:2em; /* position the image where you like */
	border:0; /* with no border */
}

a.toolTip:hover {
	z-index:1001;
	text-decoration:none;
	border:0;  /* needed for this to work in IE */
}

a.toolTip:hover img {
	z-index:1001;
	width:auto; 
	height:auto;
	border:5px solid #c9ba65; /* add a nice border */
	max-width:800px;;
}

/* 25/Aug/09 new add for glossary*/
.glossary, a.toolTip, a:hover.toolTip {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #317082;
	text-decoration:none !important;
}
	
#bubble_tooltip{
	width:147px;
	position:absolute;
	display:none;
}
#bubble_tooltip .bubble_top{
	background-image: url('../images/bubble_top.gif');
	background-repeat:no-repeat;
	height:16px;	
}
#bubble_tooltip .bubble_middle{
	background-image: url('../images/bubble_middle.gif');
	background-repeat:repeat-y;	
	background-position:bottom left;
	padding-left:7px;
	padding-right:7px;
}
#bubble_tooltip .bubble_middle span{
	position:relative;
	top:-8px;
	font-size:11px;
}
#bubble_tooltip .bubble_bottom{
	background-image: url('../images/bubble_bottom.gif');
	background-repeat:no-repeat;
	height:44px;
	position:relative;
	top:-6px;
}
/*end tooltip*/

.popup {
	background-color: #eff7df;
	border: solid 1px #b0c38b;
	color: #59624a;
	padding: 6px;
	position: absolute;
	font-size: 0.95em;
	line-height: 120%;
	z-index:100000;
}

blockquote.pullquote {
	float:left;
	max-width:20em;
	margin:0.25em 0.75em 0.25em 0;
	padding:0.5em;
	border:3px double #ccc;
	border-width:3px 0;
	color:#333;
	background:transparent;
	font:italic 1.3em/1.3 Georgia;
}

blockquote.alt {
	float:right;
	margin:0.25em 0 0.25em 0.75em;
}

.pullquote p {
	margin:0;
	text-align:center;
}

* html .dropCap {	
	margin-right:-2px; 
	margin-top:3px;
}
.dropCap{
	padding: 2px; 
	font-size: 50px;
	color: #111111;
	font-weight: bold;
	float: left;
	height: 34px;
	line-height: 34px;
	margin-top: -0.1em;
}

.circleWord img{
	height: 30px;
	left: 0;
	position: absolute;
	top: 0;
	width: 30px;
	z-index: 0;
}

.circleWordBox {
	float: left;
	margin-left: 1px;
	margin-top: 1px;
	position: relative;
	font-size: 1.5em;
	font-weight: bold;
}

.imagestack{ 
	cursor:n-resize; 
}


/*for accordion*/
.accordion_toggle {
	display: block;
	min-height: 25px;
	margin: 0 0 0 0;
	cursor:pointer;
	border: 1px solid #999; 
	font-weight:bold;
	padding:5px;
	padding-right:40px;
}
.accordion_content {
	padding:0 5px;
	overflow: auto;
}

/*end for accordion*/
/*start glider*/
.scrollerContainer {
	margin-bottom:10px;
}
div.scroller { 
	height: auto;
	overflow: auto;
	min-width: 94%;
	border:1px solid #cccccc;
	width:100% !important;
}

div.scroller div.section {
	height:auto;
	min-width:94%;
	overflow:auto;
	float:left;
	padding:1em;		
}
/*text-wrap solution for long url*/
.scroller a, .accordion_content a, .transcript p, .galleryDesc p {
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	hyphens: auto;
}

div#section2 {
	background:#666666;
	color:#ffffff;
}
.linkButton{
	padding: .4em 1em;
	display: inline-block;
	position: relative;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid #cccccc;
	border-radius:3px;
	background-color: #e7e7e7;
	/* Support: IE <= 11 */
	overflow: visible;
}

.current{
	text-decoration:underline;
}
/*end glider*/
a.hiddenPage{
	background:url( ../images/info_tiny.gif ) right no-repeat !important;
}

/*img decoration purpose*/
.photo {
	position: relative;
	*height:1%;
}
.pin{
	width: 28px;
	height: 21px;
	display: block;
	position: absolute;
	top: -12px;
	left: 50%;
	overflow:display;
	background: url(../images/pin.png) no-repeat;
}
.tape{
	width: 77px;
	height: 27px;
	display: block;
	position: absolute;
	top: -12px;
	left: 40%;
	background: url(../images/tape.png) no-repeat;
}
.paper_clip{
	width: 30px;
	height: 60px;
	display: block;
	position: absolute;
	top: -5px;
	left: -2px;
	background: url(../images/paper-clip.png) no-repeat;
}
.floral_corner {
	width: 122px;
	height: 72px;
	display: block;
	position: absolute;
	top: -22px;
	left: -15px;
	background: url(../images/floral-corner.png) no-repeat;
}

.round_corner{
	display: block;
	position: absolute;
	width:100%;
	height:100%
}

/*glossary */
.pagesubnav {
	margin-top: 8px;
	margin-bottom: 4px;
	margin-left: 8px;
}

.pagesubnav a {
	padding-left: 8px;
	padding-right: 8px;
	text-decoration: none;
}

.pagesubnav a.active {
	font-weight: bold;
	color: #000 !important;
}

.pagesubnav a:link, .pagesubnav a:visited {
	color: #666;
}

.pagesubnav a:hover {
	color: #000;
}

.pagesubnav span a {
	border-left: 1px solid #B1B1B1;
}
h2.glossaryH2 {
	font-size: 1.1em;
	font-weight: normal;
	letter-spacing: 0.1ex;
	padding-left: 10px;
	margin: 30px 0 20px;
	border-left: 1.1em solid;
}
/*correct prompt color*/
.col{ 
	color:rgb(0, 51, 204);;
}
/*incorrect prompt color*/
.ool{
	color:#c00;
}
#up { background: url("../images/up.gif") 0 0 no-repeat; }
/*end glossary*/
#updateWarningMsg {
	background-color:#ebd9b2;
	border:thick double silver;
	-moz-border-radius: 12; 
	width:95%; 
	margin:0 auto;
	padding:10px;
}
/*this is for IE to avoid security warning for removeChild func*/
#popupmessage{
	background-image:url( "../images/spacer.gif" );
	z-index: 100000;
}
/*hideShowText style*/
.hideShowText
{
	text-decoration:none !important;
}
.hideShowDiv{
	border:1px dashed #ccc;
	padding:2px;
}
.hideShowDesc{
	display:flow-root;
}
/*quiz options*/
.quizBody label{ cursor:pointer;}
.quizBody input[type="radio"] { clear:both !important;}
/* FOOTER */
#clearfooter {
	height: 60px;
	clear:both;
}
#footer {
	background-color: #333333;
	color: #FFFFFF;
	margin: 0 auto 0 auto;
	height: 45px;
	clear:both;
	overflow:hidden;
	max-width:98% !important;
}

#footer a {
	color: #fff;
}

	
  .sb, .sbi, .sb *, .sbi * { position:relative; z-index:1; }
  * html .sb, * html .sbi { height:1%; }
  .sbi { display:inline-block; }
  .sb-inner { background:#ddd; }
  .sb-shadow { background:#000; }
  .sb-border { background:#bbb; }
/*notification bar*/
.note-bar{
    display:none;
    overflow: hidden;
    background: rgba(0, 128, 128, 0.2);
    height: 200px;
    border-bottom: 4px solid #fff;
}
 
.note-bar p {
    color: #FFFFFF;
    float: left;
    font-size: 12px;
    line-height: 36px;
    margin: 0 0 0 10px;
    padding: 0;
    text-shadow: none;
}
 
.close{
    margin: 8px 10px 0 0;
    float: right;
}
 
.open-button {
    padding-top: 7px;
    width: 30px;
    background: rgba(0, 128, 128, 0.2);
    border: 4px solid #fff;
    border-top: 0px;
    position: fixed;
    top: 0;
    right: 20px;
    display: none; 
}
.blog {
	border-style:ridge double dotted dashed;
}
.blog a {
	text-decoration:none;
	border:0 !important;
	display:inline;
}
.blog br {
	line-height:1px !important;
}
.alert-error{
	background-color:#f2dede;
	border-color:#eed3d7;
	color:#c09853;
}
/*responsive design bit*/
.lt980#content-outer, .lt980#content{background-image:none;}
.lt980 .header{display:none}
.lt980 .navcontainer, .lt980 .content.navcontainer{display:none}
.lt980 .nav1, .lt980 .content#main.nav1{display:block !important;}
.lt980 #main, .lt980 .content #main{ margin-left:0;}
.lt980 .nav{ height:auto;}
.lt980 img:not(.decoWhiteVertical){
    max-width:100% !important;
    height:auto;

}
.lt980 .decoWhiteHorizontal{
	height:6px !important;
}
.nav1 { z-index:9999; }
/*highlighter*/
.hl{ cursor:url(/images/highlighter.cur),url(../images/highlighter.png),auto;}
/*time tag*/
.timeTag { width:98%; background-color:#666666;font-weight:bold;padding:3px;color:#eeeeee;}
.layoutFixWidthDiv p{ padding:3px; }
/*for image hotspot*/
area{ outline:0 none }
#expand + h2 { margin-top:0.5em; }
/*for drag drop*/
.dragDropDesc{ margin-top:5px; border-top: 1px solid #ccc;}
.dragable { 
	border:1px dotted;
	padding:0 5px;
	margin:2px;
	cursor:pointer;
	position:relative;
}
.dropable {
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
	border-bottom:1px solid;
	margin:5px;
	position:relative;
}

.dragCorrect::after {
        padding-right:-5px;
        content:  url( "../images/tick.gif" );
}

.mapDragCorrect{
	background:  url( "../images/tick.gif" ) no-repeat;
}

#editViewLink{ 
	float:right;
	display:none;
}
/*for sequential quiz*/
.caseStudyShow .quizOption { display:inline-block;float:left; padding:10px; margin:10px }
.quizBody .caseStudyShow{ padding:10px; border:1px solid #ccc; }
.pagebtn span{
  border-radius: 3px;
  padding: 15px 30px;
  line-height: 1em;
  display: block;
  text-align: center;
  background-color:#3e9dd3;
  color:#fff;
}
a.pagebtn{ text-decoration: none !important; }
.btnNext{ float:right; }
.btnPrev{ float:left; }
.bold{ font-weight:bold; font-size:large; }
/**/
.mejs-offscreen{ display:none; }
#skip-to-content{ 
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
 }
/*embed code button*/
.circle-text {
	/*display: inline;*/
	line-height:30px;
	padding:1px;
	vertical-align:middle;
	border-radius: 15%;
	background: #fff;
	border:1px solid #ccc;
	color:#ccc;
	/*font: 13px "josefin sans", arial; */
}
.flex-center {
  display: flex;
  justify-content: center;
}
.flex-left {
  display: flex;
  justify-content: flex-start;
}
.flex-right {
  display: flex;
  justify-content: flex-end;
}
/*for responsive image hotspot*/
img[usemap]{
	border:none;
	height:auto;
	max-width:100%;
	width:auto;
	display:block;
	margin: 0 auto;
}
.imageMapCanvas{ width:100; }
.imageMapViewport{ 
	width:100%;
	margin:0 auto;
}
/*youtube video*/
iframe[src*="youtube.com"] { 
	aspect-ratio: 16 / 9;
	max-width: 100%;
   
}
/*Notes*/
sl-drawer:not(:defined) {
    visibility: hidden;
  }
sl-drawer{
  --size:30rem;
}
#btn-addNote{
    cursor:pointer;
}
/**/
@media print {.noprt {display: none}}



.adminLink {
	display: none;
	clear:left;
}
.adminLinkLine {
	display: none !important;
}/* http://www.webtoolkit.info/css-drop-shadow.html */
.shadow-container {
    position: relative;
    left: 4px;
    top: 4px;
    margin-right: 4px;
    margin-bottom: 4px;
	padding-bottom:10px;
}

    .shadow-container .shadow2,
    .shadow-container .shadow3,
	.shadow-container .shadow4,
    .shadow-container .container {
        position: relative;
        left: -1px;
        top: -1px;
    }

    .shadow-container .shadow1 {
        background: #F8F8F8;
    }

    .shadow-container .shadow2 {
        background: #f3f3f3;
    }

    .shadow-container .shadow3 {
        background: #eeeeee;
    }
    .shadow-container .shadow4 {
        background: #e6e6e6;
    }
    .shadow-container .container {
        background: #ffffff;
        border: 1px solid #848284;
        padding: 10px;
    }

/*end shadow container*/
/*start quote stuff*/
.thickLeft {
	border-left: 0.8em solid;
	font: 120% Georgia, "Times New Roman", Times, serif;
	padding: 0.75em;
}

.thickRight {
	border-right: 0.8em solid;
	font: 120% Georgia, "Times New Roman", Times, serif;
	padding: 0.75em;
}

.doubleTB {
	border: 5px double;
	border-width: 5px 0;
	font: 150% Arial, Helvetica, sans-serif;
	padding: 0.5em 0.75em;
	text-align: left;
}

.thickBottom {
	border-bottom: 0.8em solid;
	font: 120% "Trebuchet MS", "Lucida Grande", sans-serif;
	padding: 0.5em 1em;
}

.thickBottom .quoter {
	 color: #333;
	 font: 75% Verdana, Helvetica, sans-serif;
	 line-height: 200%;
	 text-align: right;
}

.doubleLR {
	 border: 7px double;
	 border-width: 0 5px;
	 font: 130% "Times New Roman", Times, serif;
	 padding: .25em .75em;
	
}

.doubleLR .quote {
	 border-bottom: 1px solid;
	 padding: 0.5em 0;
}

.doubleLR .quoter {
	 font: 65% Arial, Helvetica, sans-serif;
	 line-height: 150%;
	 padding: 0.4em 0;
	 text-align: right;
}

.thickTB {
	  border: 1px solid;
	  border-width: 8px 0;
	  font: 120% Georgia, "Times New Roman", Times, serif;
	  line-height: 150%;
	  padding: 0 0em;
}

.thickTB p {
	  padding: 10px 5px;
}

.borderB {
	font: 140% Georgia, "Times New Roman", Times, serif;
	padding: .5em .75em;
	background: transparent url( icons/lquote.png ) no-repeat;
}

.borderB .quote {
	  border: 1px solid;
	  border-width: 1px 0;
	  padding: .4em .2em;
}

.borderB .quoter {
	  border-bottom: 1px solid;
	  font: 65% Arial, Helvetica, sans-serif;
	  padding: .3em .5em;
	  text-align: right;
}

.thickLR {
	border-left: 0.8em solid;
	border-right: 0.8em solid;
	font: 120% Georgia, "Times New Roman", Times, serif;
	padding: 0.75em;
}

.thickLR .quoter {
	font: 75% Arial, Helvetica, sans-serif;
	margin-top: 1em;
	text-align: right;
}

.thickLR .quoter span {
	padding: .2em .4em;
}
.speechBubble-end { margin:0 0 0 10px; background:url( ../icons/speechBubble.png) no-repeat left top; width:390px; height:20px;  padding-left:10px }	
.speechBubble {margin:0 0 0 10px; background:url( ../icons/speechBubble.png) no-repeat left bottom; padding:1px 10px 60px 10px; width:380px; color:#936D24; }
.speechBubbleGreen-end { margin:0 0 0 20px; background:url( ../icons/quoteGreen.gif) no-repeat left top; width:390px; height:20px;  padding-left:10px }	
.speechBubbleGreen {margin:0 0 0 20px; background:url( ../icons/quoteGreen.gif ) no-repeat left bottom; padding:1px 10px 60px 10px; width:380px; color:#936D24; }
.speechBubble p, .speechBubbleGreen p{ padding:10px; }
.author{ color:#161206; font-size:12px; padding-right:30px;
	margin:-10px 0 25px 20px;}
.authorGreen{ color:#161206; font-size:12px; 
	margin:-10px 0 25px 20px; text-align:right; }

/*end quote stuff*/
/**/
.testimonial {
  display: grid;
  grid-template-columns: minmax(40px, 10%) 1fr minmax(40px, 10%);
  grid-gap: 3ch;
}

.testimonial::before, .testimonial::after {
  background-image: url(../icons/lquote.png);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  grid-row: 1 / 3;
}

.quote {
  grid-column: 2 / 3;
}

.cite {
  grid-column: 2 / 3;
}

.testimonial::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  grid-column: 3;
}

.testimonial {
  max-width: 900px;
  margin: 50px auto;
}
.testimonial p {
  font-size: 24px;
  line-height: 1.5em;
}
.testimonial cite {
  text-align: right;
  display: block;
}
/**/
.notePaper {
	font-family: "Courier New", Courier, monospace;
	background: url(https://flexiblelearning.auckland.ac.nz/images/notepaper.png) top left repeat;
	display: block;
	font-size: 1em;
	color: #000;
	padding: 19px 10px 17px 10px;
	line-height: 18px;
	border: 1px solid #e2e2e2;
	overflow:auto;
}
.oldPaper{ 
	margin: 0.5em;
	padding: 2em;
	box-shadow: 2px 3px 20px black, 0 0 60px #8a4d0f inset;
	background: #fffef0;
}/* this is for fill in the blank quiz*/
.input {
	border-right: none !important;
	border-left: none !important;
	font-family: verdana, arial, helvetica, sans-serif;
	border-bottom: 1px solid #1E90FF !important;
	border-top: none !important;
	position: relative;
	top: -2px !important;
	top: -1px;
	margin-top: 1.0em;
	color: blue;
	margin-bottom: -2px;
	*margin-bottom: -4px;
	font-size: 1em;
	height: 1.4em;
	background-color: transparent;
}
.select {
	margin:0;
	line-height:1.6em;
	font-size:small;
	vertical-align:middle;
	border: none;
	border-bottom:solid 1px  #1E90FF;
	background:transparent;
}

.rubyt {
	font-size:0.9em;
	color:red;
	visibility:hidden;
	height: 1.1em;
	*height: 1.3em;
	padding:0.2em;
	z-index: 2;
	position: absolute;
	top: -0.7em !important;
	*top: 0.3em !important;
}
.rubytSelect {
	font-size:0.9em;
	color:red;
	visibility:hidden;
	height: 1.1em;
	*height: 1.3em;
	padding:0.2em;
	z-index: 2;
	position: absolute;
	top: -0.6em;
}
.clozTick {
	position: absolute; 
	left: 0pt; 
	top: -8px ! important; 
	*top: 0 !important;
	display: none;
}
.cloze_table {
	display: inline;
	line-height: 0.6em;
	position: relative;
	white-space: nowrap;
}
.retryCloz{
	display:none;
}span.footnote {
	color: #f30;
}

/* footnote links in text */
a.ftnlink {
	vertical-align: super;
	font-size: 0.8em;
}

/* div to hold all reformatted footnotes */
.footnoteholder {
	border-left: 1px solid #ccc;
	margin: 10px 0 0 0;
	padding: 0 10px;
	font-size: 0.8em;
	line-height: 1.2em;
}

/* div to hold single reformatted footnote */
.footnoteholder div.footnote {
	margin: 0 0 10px 0;
}
.textShadow {
	position: relative;
	text-shadow: 1px 1px 1px #444444;
}
.thickRoundShadowBorder {
	margin: 0 auto 0 auto;
	padding: 15px;
	border: 8px solid;
	position: relative;
	background-color:transparent;
	-moz-border-radius: 32px;
	-webkit-border-radius: 32px;
	border-radius: 32px;
	-moz-box-shadow: 4px 4px 4px #444444;
	-webkit-box-shadow: 4px 4px 4px #444444;
	box-shadow: 4px 3px 3px #444444;
	z-index:0;
	*z-index: 1;
}

.boxShadow{
	-webkit-box-shadow: 0 0 10px #444444; 
	-moz-box-shadow:0 0 10px #444444;
  	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#cccccc, strength=6)";
	filter: progid:DXImageTransform.Microsoft.Glow(color=#cccccc, strength=6);
}

.comment-border {
	position:relative;
	padding:0 10px;
	margin:0.5em 0 3em;
	border:5px solid #ccc;
	color:#333;
	background:#fff;
	
	/* css3 */
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

.comment-border .comment-border {
background:#ddd;
}
.comment-border .comment-border:after {
	border-top-color:#ddd;
}
.comment-border .comment-border .replyDiv {
display:none;
}
/* creates the larger triangle */
.comment-border:before {
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	bottom:-40px; /* value = - border-top-width - border-bottom-width */
	left:40px; /* controls horizontal position */
	width:0;
	height:0;
	border:20px solid transparent;
	border-top-color:#ccc;
}

/* creates the smaller  triangle */
.comment-border:after {
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	bottom:-26px; /* value = - border-top-width - border-bottom-width */
	left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
	width:0;
	height:0;
	border:13px solid transparent;
	border-top-color:#fff;
}

.comment-border + p {margin:-30px 0 1em 45px; font-style:italic;}

input[type=text], input[type=number],textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
 
input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}
a[href], input[type='submit'], input[type='image'], label[for], select, button, [onclick] {
       cursor: pointer;
}

.fixedFloat:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;
          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          z-index: 100;
}
.fixedFloat {
    z-index:99999;
    position:fixed;
    width:100%;
    top:0;
    border-bottom:1px solid #ccc;
}
/*for highliger*/
.highlighted{
	user-select: none;
	-o-user-select:none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;

    --mark-color: #f8db75;
    --mark-skew: 0.25em;
    --mark-height: 1.2em;
    --mark-overlap: 0.3em;

    margin-inline: calc(var(--mark-overlap) * -1);
    padding-inline: var(--mark-overlap);

    background-color: transparent;
    background-image:
        linear-gradient(
            to bottom right,
            transparent 50%,
            var(--mark-color) 50%
        ),
        linear-gradient(
            var(--mark-color),
            var(--mark-color)
        ),
        linear-gradient(
            to top left,
            transparent 50%,
            var(--mark-color) 50%
        )
    ;
    background-size:
        var(--mark-skew) var(--mark-height),
        calc(100% - var(--mark-skew) * 2 + 1px) var(--mark-height),
        var(--mark-skew) var(--mark-height)
    ;
    background-position:
        left center,
        center,
        right center
    ;
    background-repeat: no-repeat;
    color: inherit;

}

.quizBtn, button, input[type=submit], input[type=reset], input[type=button]{
    background: #f5f5f5;
    color: #2D3B45;
    border: 1px solid;
    border-color: #C7CDD1;
    border-radius: 3px;
    transition: background-color 0.2s ease-in-out;
    position: relative;
    padding: 8px 14px;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
}

.quizBtn:hover, button:hover,input[type=submit]:hover, input[type=reset]:hover {
    background: #e8e8e8;
    color: #2D3B45;
}

.imageBoxShadow{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.roundWrap{
	border-radius: 50%; 
	shape-outside: circle();
	shape-margin: 30px;
	margin: 1em;
}

.center{
	display: grid;
	place-items: center;
}

.roundbox {
        margin:0 5px;
        border-radius:8px;
}
/*details disclosure element*/
details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
    cursor: pointer;
}
details img, details figure{
    max-width:98%;
    height:auto;
}
summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}

details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}
/*style file input field*/
.uploader {
  color: #4a6dce;
  background-color: white;
  cursor: pointer;
  user-select: none;
  width: 100%;
  max-width: 400px;
  border: 2px solid #0033cc;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: bold;
  box-shadow: 0 2px 4px 2px #e6f1faee;
  transition: background-color 0.3s;
}
.uploader .icon {
  fill: currentcolor;
  display: inline-block;
  margin-right: 1rem;
}
.uploader input[type="file"] {
  display: none;
}
.uploader:hover {
  background-color: #f8f8f8;
}
/*flip cards style*/
.flipCards{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.flipCard img, .flipCards .roundWrap, .flipCards .imageBoxShadow img{
	max-width:70% !important;
	height:auto;
	max-height:70%;
	overflow:hidden;
}
.flipCard {
	display:flex;
	-webkit-perspective: 800;
	-ms-perspective: 800;
	-moz-perspective: 800;
	-o-perspective: 800;
	max-height:60vw;
	position: relative;
	margin: 10px auto;
}
.flipCard .card.flipped {
	transform:rotatey(-180deg);
	-ms-transform:rotatey(-180deg); /* IE 9 */
	-moz-transform:rotatey(-180deg); /* Firefox */
	-webkit-transform:rotatey(-180deg); /* Safari and Chrome */
	-o-transform:rotatey(-180deg); /* Opera */
}
.flipCard .card {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: 0.5s;
	-moz-transform-style: preserve-3d;
	-moz-transition: 0.5s;
	-ms-transform-style: preserve-3d;
	-ms-transition: 0.5s;
	-o-transform-style: preserve-3d;
	-o-transition: 0.5s;
	transform-style: preserve-3d;
	transition: 0.5s;
	margin: auto;
}
.flipCard .card .side {
	width: 100%;
	height: 100%;
	padding: 10px;
	cursor: pointer;
	position: absolute;
	box-sizing: border-box;
	z-index: 2;
	backface-visibility: hidden;  /* W3C */
	-webkit-backface-visibility: hidden; /* Safari & Chrome */
	-moz-backface-visibility: hidden; /* Firefox */
	-ms-backface-visibility: hidden; /* Internet Explorer */
	-o-backface-visibility: hidden; /* Opera */
	overflow: auto;
}
.flipCard .card .back {
	background: white;
	color: black;
	transform:rotatey(-180deg);
	-ms-transform:rotatey(-180deg); /* IE 9 */
	-moz-transform:rotatey(-180deg); /* Firefox */
	-webkit-transform:rotatey(-180deg); /* Safari and Chrome */
	-o-transform:rotatey(-180deg); /* Opera */
}

.flipCard .card .front {
	display: flex;
	justify-content:center;
	align-items:center;
    justify-content:center;
	padding:10px;
	width: 100%;
	text-align: center;
	line-height: 1.5em;
	border: 3px solid #ccc;
	color: white;

}
.flipCard .card .back {
	display: flex;
	justify-content:center;
	align-items:center;
        justify-content:center;
	padding:5px;
	border: 3px solid #ccc;
	text-align: center;
	color: black;
	line-height: 1.5em;
}
label.error{ display:none !important; }

div.circleBox {
  --s:600px;  /*Size of the circle */
  --p:15px;   /* padding */

  height: var(--s);
  width: var(--s);
  border-radius: 50%;
  /*background: #333;
  color:#fff;*/
  margin:30px auto;
  font-size:20px;
  text-align:justify;
}

.circleBox i,
.circleBox::before {
  content: '';
  float: left;
  height:100%;
  width: 50%;
  shape-outside: radial-gradient(farthest-side at right, transparent calc(100% - var(--p)), #fff 0);
}

.circleBox i {
  float: right;
  shape-outside: radial-gradient(farthest-side at left,  transparent calc(100% - var(--p)), #fff 0);
}
table thead, table tfoot {
  position: sticky;
}
table thead {
  inset-block-start: 0; /* "top" */
}
table tfoot {
  inset-block-end: 0; /* "bottom" */
}

/* make the current radio visually hidden */
input[type=radio][class*=raiting]{ 
	-webkit-appearance: none;
	margin: 0;
	box-shadow: none; /* remove shadow on invalid submit */
}
	
/* generated content is now supported on input. supporting older browsers? change button above to {position: absolute; opacity: 0;} and add a label, then style that, and change all selectors to reflect that change */
input[type=radio][class*=raiting]::after {
	content: '\2605';
	font-size: 32px;
}
	
/* by default, if no value is selected, all stars are grey */
input[type=radio][class*=raiting]:invalid::after {
	color: #ddd;
}
	
/* if the rating has focus or is hovered, make all stars darker */
rating:hover input[type=radio]:invalid::after,
rating:focus-within input[type=radio]:invalid::after
{color: #888;}
	
/* make all the stars after the focused one back to ligh grey, until a value is selected */
rating:hover input[type=radio]:hover ~ input[type=radio]:invalid::after,
rating input[type=radio]:focus ~ input[type=radio]:invalid::after  {
	color: #ddd;
}
	
	
/* if a value is selected, make them all selected */
rating input[type=radio]:valid {
	color: orange;
}
/* then make the ones coming after the selected value look inactive */
rating input[type=radio]:checked ~ input[type=radio]:not(:checked)::after{
	color: #ccc;
	content: '\2606'; /* optional. hollow star */
}

.button-animate{
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);	
}
/*heart shape masking image, idea from https://verpex.com/blog/website-tips/css-shapes-the-heart*/
img.heart {
 
	/*aspect-ratio: 1;*/
	object-fit: cover;
	--_m: radial-gradient(#000 69%,#0000 70%) 84.5%/50%;
	-webkit-mask-box-image: var(--_m);
			   mask-border: var(--_m);
	clip-path: polygon(-41% 0,50% 91%, 141% 0);
}
  
/* fallback until better support for mask-border */
@supports not (-webkit-mask-box-image: var(--_m)) { 
	img.heart {
		--_m:
		radial-gradient(at 70% 31%,#000 29%,#0000 30%),
		radial-gradient(at 30% 31%,#000 29%,#0000 30%),
		linear-gradient(#000 0 0) bottom/100% 50% no-repeat;
		-webkit-mask: var(--_m);
				mask: var(--_m);
	}
}
/*3d image, idea from https://css-tip.com/image-3d-effect/*/
img.threed {
	--d: 9px;  /* the depth */
	--a: 18deg; /* the angle */
	--x: 10px;
	padding-block: var(--d);
	transform: perspective(400px) rotateY(calc(var(--_i,1)*var(--a)));
	outline: var(--d) solid #cccccc50;
	outline-offset: calc(-1*var(--d));
	border-radius: 20px;
	--_d: calc(100% - var(--d));
	--_l: 0px;
	--_r: 0px;
	clip-path: polygon(
	  var(--_l) calc(var(--_d) - var(--x)),
	  var(--_l) calc(var(--d)  + var(--x)), 
	  var(--d) var(--d),var(--_d) var(--d),
	  calc(var(--_d) + var(--_r)) calc(var(--d)  + var(--x)),
	  calc(var(--_d) + var(--_r)) calc(var(--_d) - var(--x)),  
	  var(--_d) var(--_d),var(--d) var(--_d)
	 );
	transition: transform .3s,--_r .15s,--_l .15s .15s;
	transition-timing-function: linear;
	margin:10px;
	margin-left:30px;
  }
  
  img.blob{
    -webkit-mask-image: url(
    data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGZpbGw9IiNGRjAwNjYiIGQ9Ik00NiwtNzkuN0M2MC4yLC03MS42LDcyLjUsLTYwLjMsODEuMSwtNDYuNUM4OS42LC0zMi42LDk0LjUsLTE2LjMsOTEuNSwtMS43Qzg4LjUsMTIuOSw3Ny43LDI1LjcsNjkuMiwzOS42QzYwLjYsNTMuNSw1NC40LDY4LjQsNDMuMiw3NC44QzMyLjEsODEuMiwxNiw3OSwwLjUsNzguMUMtMTUuMSw3Ny4zLC0zMC4yLDc3LjksLTQzLjksNzNDLTU3LjYsNjguMSwtNjkuOSw1Ny44LC03NS44LDQ0LjdDLTgxLjcsMzEuNywtODEuMSwxNS44LC04MC40LDAuNEMtNzkuNiwtMTUsLTc4LjgsLTMwLC03My4xLC00My40Qy02Ny40LC01Ni44LC01NywtNjguNywtNDQsLTc3LjRDLTMxLC04Ni4yLC0xNS41LC05MS44LDAuMiwtOTIuMkMxNiwtOTIuNiwzMS45LC04Ny44LDQ2LC03OS43WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAwIDEwMCkiIC8+Cjwvc3ZnPgo=
    );
	shape-outside: url(
		data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGZpbGw9IiNGRjAwNjYiIGQ9Ik00NiwtNzkuN0M2MC4yLC03MS42LDcyLjUsLTYwLjMsODEuMSwtNDYuNUM4OS42LC0zMi42LDk0LjUsLTE2LjMsOTEuNSwtMS43Qzg4LjUsMTIuOSw3Ny43LDI1LjcsNjkuMiwzOS42QzYwLjYsNTMuNSw1NC40LDY4LjQsNDMuMiw3NC44QzMyLjEsODEuMiwxNiw3OSwwLjUsNzguMUMtMTUuMSw3Ny4zLC0zMC4yLDc3LjksLTQzLjksNzNDLTU3LjYsNjguMSwtNjkuOSw1Ny44LC03NS44LDQ0LjdDLTgxLjcsMzEuNywtODEuMSwxNS44LC04MC40LDAuNEMtNzkuNiwtMTUsLTc4LjgsLTMwLC03My4xLC00My40Qy02Ny40LC01Ni44LC01NywtNjguNywtNDQsLTc3LjRDLTMxLC04Ni4yLC0xNS41LC05MS44LDAuMiwtOTIuMkMxNiwtOTIuNiwzMS45LC04Ny44LDQ2LC03OS43WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAwIDEwMCkiIC8+Cjwvc3ZnPgo=
	);
	shape-margin: 30px;
    -webkit-mask-repeat:no-repeat;
}
/*stamp style https://verpex.com/blog/website-tips/modern-layouts-using-css-grid */
.stamp {
	--r: 10px; /* control the radius of the circles */
	padding: calc(2*var(--r));
	filter: grayscale(.4) drop-shadow(0 0 1px #0005) drop-shadow(0 0 1px #0005);
	background: 
	  radial-gradient(var(--r),#0000 98%,#fff) round
		calc(-1.5*var(--r)) calc(-1.5*var(--r)) /calc(3*var(--r)) calc(3*var(--r)),
	  linear-gradient(#fff 0 0)  no-repeat
		50%/calc(100% - 3*var(--r)) calc(100% - 3*var(--r));
}
	
/*headline balance*/ 
h1,h2,h3,h4,h5,h6 {
	text-wrap: balance;
}

.gradientTitle {
  --bg-size: 250%;
  --color-one: #0085b7;
  --color-two: #eeeeee08;
  
  background: linear-gradient(
      90deg,
      var(--color-one),
      var(--color-two),
      var(--color-one)
    )
    0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
/*checklist css*/
:checked + label, label:has(input:checked) {
	font-style: italic;
}
/*hideshow plugin textbox for practice*/
.hideShowTextarea {
	border: 1px solid #ccc;
	font-family: inherit;
	font-size: inherit;
	padding: 1px 6px;
	display: block;
	width: clamp(150px, 60%, 600px);;
	overflow: hidden;
	resize: both;
	min-height: 40px;
	line-height: 20px;
}
  
.hideShowTextarea[contenteditable]:empty::before {
	content: "Type your answer or recall with voice input";
	color: gray;
}

/*search field sample from https://codepen.io/jkantner/pen/eYmvvqQ */
 
.search-bar button, .search-bar input {
	font: 1em Hind, sans-serif;
	line-height: 1.5em;
}
.search-bar input {
	color: #171717;
}
.search-bar {
	display: flex;
}

.search-bar input,
.search-btn, 
.search-btn:before, 
.search-btn:after {
	transition: all 0.25s ease-out;
}
.search-bar input,
.search-btn {
	width: 2.5em;
	height: 2.5em;
}
.search-bar input:invalid:not(:focus),
.search-btn {
	cursor: pointer;
}
.search-bar,
.search-bar input:focus,
.search-bar input:valid  {
	width: 100%;
}
.search-bar input:focus,
.search-bar input:not(:focus) + .search-btn:focus {
	outline: transparent;
}
.search-bar {
	margin: auto;
	padding: 0;
	justify-content: center;
	max-width: 30em;
}
.search-bar input {
	background: transparent;
	border-radius: 1.5em;
	box-shadow: 0 0 0 0.4em #171717 inset;
	padding: 0.75em;
	transform: translate(0.5em,0.5em) scale(0.5);
	transform-origin: 100% 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.search-bar input::-webkit-search-decoration {
	-webkit-appearance: none;
}
.search-bar input:focus,
.search-bar input:valid {
	background: #fff;
	border-radius: 0.375em 0 0 0.375em;
	box-shadow: 0 0 0 0.1em #d9d9d9 inset;
	transform: scale(1);
}
.search-btn {
	/*background: #171717;*/
	background: #eeeeee;
	border-radius: 0 0.75em 0.75em 0 / 0 1.5em 1.5em 0;
	padding: 0.75em;
	position: relative;
	transform: translate(0.25em,0.25em) rotate(45deg) scale(0.25,0.125);
	transform-origin: 0 50%;
}
.search-btn:before, 
.search-btn:after {
	content: "";
	display: block;
	opacity: 0;
	position: absolute;
}
.search-btn:before {
	border-radius: 50%;
	box-shadow: 0 0 0 0.2em #f1f1f1 inset;
	top: 0.75em;
	left: 0.75em;
	width: 1.2em;
	height: 1.2em;
}
.search-btn:after {
	background: #f1f1f1;
	border-radius: 0 0.25em 0.25em 0;
	top: 51%;
	left: 51%;
	width: 0.75em;
	height: 0.25em;
	transform: translate(0.2em,0) rotate(45deg);
	transform-origin: 0 50%;
}
.search-btn span {
	display: inline-block;
	overflow: hidden;
	width: 1px;
	height: 1px;
}

/* Active state */
.search-bar input:focus + .search-btn,
.search-bar input:valid + .search-btn {
	background: #2762f3;
	border-radius: 0 0.375em 0.375em 0;
	transform: scale(1);
}
.search-bar input:focus + .search-btn:before, 
.search-bar input:focus + .search-btn:after,
.search-bar input:valid + .search-btn:before, 
.search-bar input:valid + .search-btn:after {
	opacity: 1;
}
.search-bar input:focus + .search-btn:hover,
.search-bar input:valid + .search-btn:hover,
.search-bar input:valid:not(:focus) + .search-btn:focus {
	background: #0c48db;
}
.search-bar input:focus + .search-btn:active,
.search-bar input:valid + .search-btn:active {
	transform: translateY(1px);
}
/*rough underline, use paint api*/
.superUnderline {
    --extra-underlineNumber: 2; 
    --extra-underlineSpread: 8; 
    --extra-underlineWidth: 1; 
    background: paint(extra-superUnderline);
    line-height:1.5;  
}
.roughbox {
    background: linear-gradient(#fff 0 0) padding-box, /*this is your grey background*/ linear-gradient(to bottom right, var(--color1), var(--color2)) border-box;
    box-shadow: var(--inner-shadow-4);
    padding: 10px;
    border: 5px solid transparent;
    /* border-radius: 5px; */
    display: block;
    border-radius: var(--radius-drawn-1);
}
.crumbs {
	/*height:2.3em;*/
 	float: left;
	clear:left;
	width: auto;
	border:1px solid #dedede;
	background:#fff;
	list-style-type:none !important;
	padding:0;
	margin:0 ;
	}
.crumbs li {
	float:left;
	line-height:2.3em;
	padding-left:.5em;
	list-style-image:none !important;
	margin-bottom:0 !important;
	}		
.crumbs li a {
	background:url(../images/crumbs.gif) no-repeat right center !important;
	display:block;
	padding:0 15px 0 0;
	font-weight:bold;
	}
.crumbs li:last-child a {
	background-image:none !important;
}
.crumbs li a:link,
.crumbs li a:visited {
	text-decoration:none !important;
	}		
.crumbs li a:hover,
.crumbs li a:focus {
	color:#0066CC;
	}
.crumbs .active{
	border-bottom: 1px solid;
}
#breadcrumb
{
  margin-top:-5px;
  font-size: 9px;
  line-height: 120%;
  height:24px;
}/*intersection observer*/
@media (min-width:1440px){
	#onthispage{
	  position: fixed;
	  /*right: 80px;*/
	  /*right: calc( 50% - 860px );*/
	  left: calc( 50% + 500px);
	  top:100px;
	  float:right;
	  width:300px;
	  max-height:calc( 100% - 100px );
	  height:fit-content;
	  text-decoration: none !important;
	  border-radius: 4px;
	  text-overflow: ellipsis;
	  background-color: #fff;
	  border: 1px solid #ccc;
	  overflow-y:auto;
	  overflow-x:auto;
	}
	.toc-Title{
	  padding-left:1em;
	  margin:5px;
	}
	.toc-Wrapper{
		padding:0;
	}
	#onthispage ul{
		margin:5px;
	}
	#onthispage ul li{
	  list-style: none;
	  display: flex;
      flex-direction: row;
	  margin-bottom:5px;
	}
	#onthispage a{
	  text-decoration: none !important;
	}
	#onthispage .toc-Link_H2{
	  padding-left:10px;
	}
	#onthispage .toc-Link_H3, #onthispage .toc-Link_SUMMARY{
	  padding-left:25px;
	}
	.current{
	  font-weight:bold;
	}
	details[open]{
		overflow:visible !important;
		height:auto !important;
	}
	#onthispagedetail{
		font-size:80%;
	}
  } 
  @media (min-width:1500px){
	#onthispage{
		position: fixed;
		left: calc( 50% + 500px);
		top:100px;
		float:right;
		width:350px;
		max-height:calc( 100% - 100px );
		height:fit-content;
		text-decoration: none !important;
		border-radius: 4px;
		text-overflow: ellipsis;
		background-color: #fff;
		border: 1px solid #ccc;
		overflow-y:auto;
		overflow-x:auto;
	}
	#onthispagedetail{
		font-size:100%;
	}
  } 
  @media (max-width:1439px){
	#onthispage{
		display:none;
	}
  }