body  {
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
/*font-family : "Segoe UI", "Lucida Grande", "Helvetica Neue", sans-serif; */
margin : 0em; /*was 0.3em */
}
/* todo 
style="cursor: pointer;" */
/* todo
a {
cursor: url("custom.gif"), url("custom.cur"), default;
}
*/
/*
@page {
  size: A4;
  margin: 0;
}
*/
/* don't use yet
 * will affect padding on home.inc, tables, etc
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
*/

/* https://www.w3schools.com/cssref/playdemo.php?filename=playcss_mix-blend-mode */
/* Boost sample */
/*color: #fff; */ /*pref #fff #e7f163*/
/*mix-blend-mode: exclusion; /* /* pref exclusion; difference; */
/* mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity; */

html::before {
/*background-image : url(../pix/pg_background011_v3.png); 
background-image: url(../pix/CSLogin17_01_v2.jpg) top left no-repeat;  */
/*background-size: cover;
content: "";
height: 15rem;
overflow: hidden;
display: block;*/
}
/* 
 *
 ***  todo for presentations w/ js show / hide
https://www.w3schools.com/cssref/pr_class_visibility.asp

The visibility property specifies whether or not an element is visible.
Tip: Hidden elements take up space on the page. Use the display property to both hide and remove an element from the document layout!

h2.a {
    visibility: visible;
    }
h2.b {
        visibility: hidden;
        }
 *
 */
img {
border: 0;
}
img.border_1 {
border: 1;
}
meter {
    /* Firefox */
    /* background: none; /* Required to get rid of the default background property */
    /*  background-color: whiteSmoke;  */
        box-shadow: 0 5px 5px -5px #333 inset;
      }
/* https://www.w3schools.com/howto/howto_js_off-canvas.asp */
/* The side navigation menu */
/*********** not used anymore but keep just in case ********/
.sidenav {
height: 70%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 8px;
bottom: 5px;
left: 0;
/*background-image : url(../pix/pg_background011_v3.png); */
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
/*box-shadow: 0px 16px 16px 4px rgba(0,0,0,0.2);*/
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
background-color: #efefef; /* #111 Black*/
/*background-color: #052a3a; */ /* #111 Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 10px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 1.2em;
font-weight : bold; 
color: #3b0083;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #red;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtnXXX {
position: absolute;
top: 0;
right: 25px;
margin-left: 50px;
font-size: 36px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
/*#main {
transition: margin-left .5s;
padding: 10px;
} */
    /* sidenav not needed anymore */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/*** was needed for simple.css but now superseded by new menu ***/
#alternative_to_sidenav {
display: none;
}

/* inc/home.inc - carousel */
div.transbox {
  background-color: rgba(17, 18, 20, 0.6);
  /*background-color: rgba(0, 2, 2, 0.4); */
  /*background-color: rgba(255, 255, 255, 0.4); */
/*  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px); */
  padding: 20px;
  margin: 30px;
  -webkit-backdrop-filter: opacity(30%);
  backdrop-filter: opacity(30%);
  /*-webkit-backdrop-filter: sepia(100%);
  backdrop-filter: sepia(100%); */
  /*backdrop-filter: brightness(70%); */
}

/*********** sbook_floating_toc ************/
/* not used any more - replaced by home icon */
div.sbook_draw_menu_icon {
width: 2.8em;
height: 0.4em;
margin: 0.4em 0; 
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
background-color: #888;
color: transparent;
}

#sbook_floating_toc {
z-index: 1000; 
position: fixed; /* Stay in place */
top: 3em;
right: 1em;
bottom: 5px;
height: 5%; /*2%; /* 100% Full-height */
width: 4%; 
overflow-y: hidden; /* Disable horizontal scroll */
background-color: #efefef; /* #111 Black*/
/*background-image : url(../pix/pg_background011_v3.png); */
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
/*background-color: #052a3a; */ /* #111 Black*/
overflow-x: hidden; /* Disable horizontal scroll */
/* settings for home icon */
padding-top: 0.5em;
padding-left: 1.5em;
padding-right: 1.5em;
padding-bottom: 1em; 
transition: 0.5s; 
}
#sbook_floating_toc a {
/*padding: 8px 8px 8px 32px; */
padding: 0.5em 0.5em 0.5em 0.5em;
text-decoration: none;
font-size: 1.2em;
font-weight : bold; 
color: #3b0083;
display: block;
transition: 0.3s
}
#sbook_floating_toc:hover {
height: 80%; /* 100% Full-height */
width: 80%; /* 0 width - change this with JavaScript */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
overflow-y: auto; 
color: #red;
}
#sbook_floating_toc a:hover, .offcanvas a:focus{
color: #red;
}

/*********** sbook_floating_session_dates ************/
/* left side w/ course log, wordlists, session dates */
#sbook_floating_session_dates {
z-index: 800; 
position: fixed; /* Stay in place */
margin-top: -18px;
left: 1em; /*-0.4em; */
/*bottom: 5px; */
height: 5%; /*2%; /* 100% Full-height */
width: 4%; 
overflow-y: hidden; /* Disable horizontal scroll */
overflow-x: hidden; /* Disable horizontal scroll */
background-color: #efefef; /* #111 Black*/
/*background-image : url(../pix/pg_background011_v3.png); */
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
/*background-color: #052a3a; */ /* #111 Black*/
/* optional */
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius:8px;
/* settings for icon */
padding-top: 0.5em;
padding-left: 1.2em;
padding-right: 0.2em;
padding-bottom: 0.5em; 
transition: 0.5s; 
}
#sbook_floating_session_dates:hover { 
  /* todo - should depend on mobile, tablet, vs screen display size */
left: 2%;
height: 60%; /* 100% Full-height */
width: 70%; /* 0 width - change this with JavaScript */
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
background-image: linear-gradient(to bottom right, #ffeead, #ffcc5c); 
/*background-image: linear-gradient(to bottom right, #fefbd8, #ffef96); */
transition: 0.8s; /* 0.5 */
overflow-y: auto; 
}
/*#sbook_floating_session_dates a:hover, .offcanvas a:focus{  */
#sbook_floating_session_dates a:hover, a:focus{
/*padding: 0.5em 0.5em 0.5em 0.5em; */
/*margin-top: -10%; */
color: #red;
background-color: #9bbfb4;
}
/********** settings for mobile phone *************/
/* min-width: 768 */
@media only screen and (max-width: 1024px) {
#sbook_floating_session_dates {
margin-top: -100px;
left: 85%; /* 1.6em; */
/*bottom: 5px; */
height: 8%; /*2%; /* 100% Full-height */
width: 7%; 
background-color: #588c7e; /* #e3eaa7; /*lime; /*#888; /*#abcabc; */
}
#sbook_floating_session_dates:hover { 
left: 45%;
height: 70%; 
width: 35%;
background-color: #efefef; /*#888; /*#abcabc; */
}
/*#sbook_floating_session_dates a:hover, .offcanvas a:focus{  */
#sbook_floating_session_dates a:hover, a:focus{
left: 45%;
background-color: #efefef; /*#888; /*#abcabc; */
}
}

.sbook_dropbtn-menu {
font-size: 150%;
background-color: transparent;
color: #c1b2d5;
border: none;
cursor: pointer;
/*padding: 0.5em; */
}

.sbook_dropdown {
position: relative;
display: inline-block;
/* display: block; */
/*min-width: 100%; will display 1 column */
text-decoration: none;
}

.sbook_dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
opacity: 0.9;
filter: alpha(opacity=90);
/*box-shadow: 0px 8px 16px 0px rgba (0,0,0,0.2); */
z-index: 5;
background-color: #c3d3d5;
text-decoration: none;
}
.sbook_dropdown-content a {
transition: 0.3s;
display: block; /* 1 column */
padding: 0.5em;
/*display: inline-block;
padding-top: 1em;
padding-left: 1.5em;
padding-right: 1.5em; */
color: black;
text-decoration: none;
}
.sbook_dropdown-content a:hover {
/*margin-left: -10%;  */
background-color: #9bbfb4;
text-decoration: none;
}
.sbook_dropdown:hover .sbook_dropdown-content {
min-width: 150%; 
/*display: inline-block; */
display: block;
color: white;
font-size: 90%; /* set 130% for at media */
text-decoration: none;
}
.dropbtn-menu2 {
font-size: 100%;
background-color: transparent;
color: #c1b2d5;
border: none;
cursor: pointer;
padding: 0.5em;
}
.sbook_dropdown2 {
position: relative;
display: inline-block;
width: 100%; 
text-decoration: none;
}
.sbook_dropdown-content2 {
display: none;
position: absolute;
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
opacity: 0.9;
filter: alpha(opacity=90);
/*box-shadow: 0px 8px 16px 0px rgba (0,0,0,0.2); */
z-index: 6;
margin-left: 5em; 
background-color: #c3d5c7; /* #c3d3d5; */
text-decoration: none;
}
.sbook_dropdown-content2 a {
transition: 0.3s;
display: block;
color: black;
padding: 0.5em;
/*overflow-y: auto;
overflow-x: hidden; */
text-decoration: none;
}
.sbook_dropdown-content2 a:hover {
display: block; 
background-color: #9bbfb4;
text-decoration: none;
}
.sbook_dropdown2:hover .sbook_dropdown-content2 {
display: block; /*mandatory */
color: white;
font-size: 95%; /* set 130% for at media */
text-decoration: none;
}

.sbook_btn_label {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
}
.sbook_btn_label:hover {
  visibility: visible;
}

.sbook_btn_tidy_up::before {
content: "";
background : url(../pix/icons8-construction-worker-100.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
.sbook_btn_tidy_up {
background-color: transparent;
color : #3b0083;
border: none;
cursor: pointer;
text-decoration: underline;
/*padding: 0.5em; */
}
.sbook_btn_tidy_up:hover {
color : red;
}

.sbook_btn_browse::before {
content: "";
background : url(../pix/icons8-opened-folder-64.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
.sbook_btn_browse {
/*color : white; */
background-color: transparent;
color : #3b0083;
border: none;
cursor: pointer;
text-decoration: underline;
/*padding: 0.5em; */
}
.sbook_btn_browse:hover {
color : red;
}

.sbook_btn_load_file::before {
content: "";
background : url(../pix/icons8-upload-to-the-cloud-100.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
.sbook_btn_load_file {
background-color: transparent;
color : #3b0083;
border: none;
cursor: pointer;
text-decoration: underline;
/*padding: 0.5em; */
}
.sbook_btn_load_file:hover {
color : red;
}

.sbook_btn_save::before {
content: "";
background : url(../pix/icons8-save-100.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
.sbook_btn_save {
background-color: transparent;
color : #3b0083;
border: none;
cursor: pointer;
text-decoration: underline;
/*padding: 0.5em; */
}
.sbook_btn_save:hover {
color : red;
}

.sbook_btn_save_as::before {
content: "";
background : url(../pix/icons8-save-as-100.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
.sbook_btn_save_as {
background-color: transparent;
color : #3b0083;
border: none;
cursor: pointer;
text-decoration: underline;
/*padding: 0.5em; */
}
.sbook_btn_save_as:hover {
color : red;
}

/* http://jsfiddle.net/4cwpLvae/
needed to hide the browse-web browser dependent box
 */
input[type="file"] {
    display: none;
}

/*  https://www.htmlgoodies.com/css/multi-select-lists-css/ */
select {
  // styles reset, including removing the default dropdown arrow
 /***/ appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none; /***/
  /*background-color: rgba(17, 18, 20, 0.6); */
  background-color: transparent; 
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;

  // Stack above custom arrow
  z-index: 1;

  // Remove focus outline
  outline: none;
}

.select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;

  select,
  &::after {
    grid-area: select;
  }

  min-width: 15ch;
  max-width: 50ch;
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  font-size: 110%; /*1.25rem; */
  cursor: pointer;
  line-height: 1.1;

  // Optional styles
  // remove for transparency
  background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);

  // Custom arrow
/*  &::after {
    content: "";
    justify-self: end;
    width: 0.8em;
    height: 0.5em;
    background-color: var(--select-arrow);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%); */
  }
}


/*********** deprecated new menu ************/
#button_toggle_visibility_menu{
position: fixed;
z-index: 5;
left : 2%; 
margin-top: 1%;
border: none;
font-size: 100%;
background-color: transparent; 
/*background-size: cover;
background-image : url(pix/sbook_01.svg);
background-image : url(../pix/sbook_01.png); 
background-image : url(../pix/pg_background011.png);*/
}
.menu_to_toggle {
position: relative;
z-index: 5;
margin-top: 10%;
width: 70%;
/*border: solid 1px;*/
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
background-color: #efefef;
/*#c3d4d5 grey cyan  #9bbfb4 grey blue* d1e33a yellow sticker #111 Black*/
opacity: 0.9;
filter: alpha(opacity=90);
/*overflow-x: hidden; */ /* Disable horizontal scroll */
padding-top: 10px; 
transition: 0.5s; 
}
.menu_to_toggle a {
font-size: 1.2em;
padding-top : 0em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.8em;
text-decoration: none;
font-weight : bold; 
color: #3b0083;
/*display: inline-block; */
display: block;
transition: 0.3s;
overflow-y: auto;
}
.menu_to_toggle a:hover, a:focus{
color: red;
}

.dropbtn-menu {
font-size: 150%;
background-color: transparent;
color: #c1b2d5;
border: none;
cursor: pointer;
padding: 0.5em;
}
.dropdown {
position: relative;
display: inline-block;
/*min-width: 100%; will display 1 column */
text-decoration: none;
}
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
opacity: 0.9;
filter: alpha(opacity=90);
/*box-shadow: 0px 8px 16px 0px rgba (0,0,0,0.2); */
z-index: 5;
background-color: #c3d3d5;
text-decoration: none;
}
.dropdown-content a {
transition: 0.3s;
display: block; /* 1 column */
padding: 0.5em;
/*display: inline-block;
padding-top: 1em;
padding-left: 1.5em;
padding-right: 1.5em; */
color: black;
text-decoration: none;
}
.dropdown-content a:hover {
background-color: #9bbfb4;
text-decoration: none;
}
.dropdown:hover .dropdown-content {
min-width: 200%; 
display: inline-block;
color: white;
font-size: 90%; /* set 130% for at media */
text-decoration: none;
}
.dropbtn-menu2 {
font-size: 100%;
background-color: transparent;
color: #c1b2d5;
border: none;
cursor: pointer;
padding: 0.5em;
}
.dropdown2 {
position: relative;
display: inline-block;
width: 100%; 
text-decoration: none;
}
.dropdown-content2 {
display: none;
position: absolute;
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
opacity: 0.9;
filter: alpha(opacity=90);
/*box-shadow: 0px 8px 16px 0px rgba (0,0,0,0.2); */
z-index: 6;
margin-left: 5em; 
background-color: #c3d5c7; /* #c3d3d5; */
text-decoration: none;
}
.dropdown-content2 a {
transition: 0.3s;
display: block;
color: black;
padding: 0.5em;
/*overflow-y: auto;
overflow-x: hidden; */
text-decoration: none;
}
.dropdown-content2 a:hover {
display: block; 
background-color: #9bbfb4;
text-decoration: none;
}
.dropdown2:hover .dropdown-content2 {
display: block; /*mandatory */
color: white;
font-size: 95%; /* set 130% for at media */
text-decoration: none;
}

/* doesn't seem to work */
/*
a.dropdown-content:hover {
text-decoration: none;
line-height: 1.4em;
font-size: 150%;
}
*/

/* works but not needed
.dropdown:hover .dropbtn-menu {
background-color: #efefef;
}
*/

/*** not used anymore ***/
#button_toggle_visibility_menu_per_level {
border: none;
font-size: 150%;
color: blue;
text-decoration: underline;
}
.menu_per_level {
display: block;
transition: 0.2s; 
}

/**********************************************/
/* default a href*/
A:link {
color: #588c7e; /*#3b0083; */
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
A:active {
color: #588c7e; /*#3b0083; */
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
A:visited {
color: #588c7e; /*#3b0083; */
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
} 
A:hover  {
color: #ff7b25;
font-size : 1em; 
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
/*A:hover.central_menu  { */
A:link.central_menu  {
color: #588c7e; /*#3b0083; */
font-size : 1.8em; 
/* font-weight : bold;  */
background : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
A:link.member {
color : orange;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
A:active.member {
color : orange;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
A:visited.member {
color : orange;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
A:hover.member {
color : red;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
} 
A:link.film_title  {
color: #588c7e; /*#3b0083; */
font-weight: bold;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
} 
A:active.film_title {
color: #588c7e; /*#3b0083; */
font-weight: bold;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
A:visited.film_title {
color: #588c7e; /*#3b0083; */
font-weight: bold;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
A:hover.film_title {
color: #ff7b25;
/*color : red; */
font-weight: bold;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
} 
A:link.film_title02  {
color: white; /*#588c7e; /*#3b0083; */
letter-spacing: 2px;
font-weight: bold;
/*opacity: 0.7;
background-color : #000; */
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
} 
A:active.film_title02 {
color: white; /*#588c7e; /*#3b0083; */
letter-spacing: 2px;
font-weight: bold;
opacity: 0.7;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
A:visited.film_title02 {
color: white; /*#588c7e; /*#3b0083; */
letter-spacing: 2px;
font-weight: bold;
opacity: 0.7;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
A:hover.film_title02 {
color: #f2f2f2;/*#ff7b25;*/
letter-spacing: 2px;
/*color : red; */
font-weight: bold;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : underline;
text-decoration-color: #cdcd;
text-decoration-thickness: 10%; /**/
/*background-color: #f2f2f2;/*#04AA6D; */
transition: 0.5s;
opacity: 1;
}  
A:link.strong  {
font-weight : bold;
color : #3b0083;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
A:active.strong {
font-weight : bold;
color : #3b0083;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
A:visited.strong {
font-weight : bold;
color : #3b0083;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
A:hover.strong {
font-weight : bold;
color : #3b0083;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : underline;
} 
/* child of topic_area */
A:link.clog  {
color : #3e21ec;
background : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
A:active.clog {
color : #3e21ec;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : underline;
}
A:visited.clog {
color : #3e21ec;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : underline;
}
A:hover.clog {
color : red;
background : none;
font-size : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : underline;
/*text-decoration : none; */
}  
span.links_right_column {
color : #3b0083;
font-size: 100%;
}
/********* end of href **********/
/********** default h values******/
h1 {
font-size : 160%;
} 
h2  {
font-size : 120%;
display : inline;
margin : 0;
}
h3 {
font-size : 105%;
display : inline;
margin : 0;
}
h66 {
font-size : 90%;
display : inline;
margin : -10px;
border-bottom : 1px solid #3b0083;
}
/**** grep 'h22' * / *inc ***/
h22 {
font-size : 90%;
font-weight : bold;
margin : 0.2em 0 0.4em 0;
}
/* used for index menu - was in sidenav - check if still needed */
span.index_menu {
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
font-size : 500%;
font-weight : bold; 
color : #3b0083; 
/*background-image : url(../pix/index_more03.png); */
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
span.page_title {
/*font-style : italic;
font-weight : bold;  */
font-size : 200%;
letter-spacing: 2px;
display : block; 
/*color: #f2f2f2;
background-image: linear-gradient(to bottom right, #bdcebe, #3e4444); */
/* almost golden on green British establishment look & feel ...
color: #ffeead;
background-image: linear-gradient(to bottom right, #96ceb4, #454140); */
color : #ff7b25; /*#82b74b; /*#588c7e; #f2ae72; #3b0083; */
/*background-image: linear-gradient(to bottom right, #ffeead, #ffcc5c); /*light orange*/ /*font-weight: bold;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius:8px;
box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2); */
/*font-style : italic; */
}
div.page_title2 {
text-align : center;
color : #3b0083;
font-size: 300%;
}
div.page_title3 {
text-align : right;
color : #3b0083;
font-size: 75%;
}
/* inc/localisation.inc */
div.details {
padding-left: 1em;
/*text-align : right; */
}
/****** js ********/
#button_toggle_visibility_type01 {
border: none;
font-size: 100%;
color: white;
background-color: transparent;  
}
div.toggle_type01 {
display : block;
font-size: 120%;
z-index : 210;
background-color: transparent;  
/*color : #b2d00b; */
color : white;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
opacity: 0.8;
filter: alpha(opacity=80);
padding-top : 0em;
padding-left : 1em;
padding-right : 1em;
margin-top : -2%;
padding-bottom : 0.5em;
margin-left : -2%;/* -3em; */
width: 100%;
}
#button_toggle_visibility_type02 {
border: none;
font-size: 100%;
color: #000;
background-color: transparent;  
}
div.toggle_type02 {
display : block;
font-size: 120%;
z-index : 210;
background-color: transparent;  
/*color : #b2d00b; */
color : #000;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
opacity: 0.8;
filter: alpha(opacity=80);
padding-top : 0em;
padding-left : 1em;
padding-right : 1em;
margin-top : -2%;
padding-bottom : 0.5em;
margin-left : -2%;/* -3em; */
width: 100%;
}

#button_toggle_visibility_edit_notes {
border: none;
font-size: 100%;
color: #b2d00b;
background-color: transparent;  
}
#button_toggle_visibility_edit_notes02 {
border: none;
font-size: 100%;
color: #b2d00b;
background-color: transparent;  
}
#button_toggle_visibility_edit_notes02:hover {
background-color: #9bbfb4;
}
#button_toggle_visibility_edit_notes03 {
border: none;
font-size: 100%;
color: #b2d00b;
background-color: transparent;  
}
#button_toggle_visibility_edit_notes03:hover {
background-color: #9bbfb4;
}

div.edit_notes {
display : block;
font-size: 90%;
z-index : 210;
background-color: transparent;  
color : #b2d00b;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
opacity: 0.8;
filter: alpha(opacity=80);
padding-top : 0em;
padding-left : 1em;
padding-right : 1em;
margin-top : -2%;
padding-bottom : 0.5em;
margin-left : -2%;/* -3em; */
width: 100%;
/*box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
border : 3px solid #b2d00b; */
}

div.edit_notes02 {
display : block;
font-size: 90%;
z-index : 210;
background-color: transparent;  
color : #b2d00b;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
opacity: 0.8;
filter: alpha(opacity=80);
padding-top : 0em;
padding-left : 1em;
padding-right : 1em;
margin-top : -2%;
padding-bottom : 0.5em;
margin-left : -2%;/* -3em; */
width: 100%;
/*box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
border : 3px solid #b2d00b; */
}

div.edit_notes3 {
display : block;
font-size: 90%;
z-index : 210;
background-color: transparent;  
color : #b2d00b;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
opacity: 0.8;
filter: alpha(opacity=80);
padding-top : 0em;
padding-left : 1em;
padding-right : 1em;
margin-top : -2%;
padding-bottom : 0.5em;
margin-left : -2%;/* -3em; */
width: 100%;
/*box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
border : 3px solid #b2d00b; */
}



/* https://www.w3schools.com/howto/howto_js_popup.asp */
/* Popup container */
/* wordlist in xml_clog */
.popup {
    position: relative;
      display: inline-block;
        cursor: pointer;
      }
.popup .popuptext {
  visibility: hidden;
  width: 16em;
  background-color: #efefef; /*#555; */
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  right: 50%;
/*  margin-left: 80px; */
}
.sbook_wordlist_popup {
  visibility: hidden;
  width: 16em;
  background-color: #efefef; /*#555; */
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  right: 150%;
/*  margin-left: 80px; */
}

/* Popup arrow not used */
/*
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
*/
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}
.popupPh .showPh {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}


/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}
/* edit_notes */
.popup_edit_notes {
    position: relative;
      display: inline-block;
        cursor: pointer;
      }
.popup_edit_notes .popuptext_edit_notes {
  visibility: hidden;
  width: 40em;
  background-color: #efefef; /*#555; */
  color: blue;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1000;
/*  margin-left: 80px; */
}
/* Popup arrow not used */
/*
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
*/
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup_edit_notes .show_edit_notes {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; 
}
.tooltip2 {
  position: relative;
  display: inline-block;
/*border-bottom: 1px dotted black; */
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
.tooltip2 .tooltiptext2 {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to centre the tooltip */
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.tooltip2:hover .tooltiptext2 {
  visibility: visible;
}
/* wordlist_generated_from_xml_clog_sbook_for_sbook_session.inc */
.sbook_tooltip {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted black;  */
}
.sbook_tooltip .sbook_tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: -50%;
  right: -500%;
  margin-right: -60px; /* Use half of the width (120/2 = 60), to centre the tooltip */
}
.sbook_tooltip:hover .sbook_tooltiptext {
  visibility: visible;
}

/* session support material */
.sbook_tooltip2 {
  position: relative;
  padding-top: 0.5em; /*1em; todo for mobile */
  display: inline-block; /*block; */
  /*display: inline; /*block; */
  /*border-bottom: 1px dotted black;  */
}
.sbook_tooltip2 .sbook_tooltip2text {
  visibility: hidden;
  width: 25%;
  /*background-color: black;
  color: #fff; */
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
background-color: #cdcdcd; 
font-size: 0.7em;
  text-align: left;
  /*padding-top: 5px 0; */
  padding: 0.5em;
  border-radius: 6px;
  z-index: 1;
  position: fixed;
top: 20%;
/*bottom: 40%; */
right: 35%;
/*
  position: absolute;
  bottom: -50%;
  right: -60%; */ /* -60% need 600% if session title null */
  /*margin-right: -150px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
.sbook_tooltip2:hover .sbook_tooltip2text {
  visibility: visible;
}

.closebtn {
  float: right;
  cursor: pointer;
/*position: absolute;
top: 0;
right: 25px;
margin-left: 50px;
font-size: 36px; */
}
#button_toggle_visibility_script{
border: none;
font-size: 100%;
color: purple; /* 066a3a; */
background-color: transparent; 
}
div.script {
display : block;
font-size: 90%;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
} 
#button_toggle_visibility_lead_in{
border: none;
font-size: 100%;
color: green; /* 066a3a; */
background-color: transparent; 
}
#button_sbook_toggle_visibility_lead_in{
border: none;
font-size: 100%;
/*color: green; /* 066a3a; */
background-color: transparent; 
}
div.lead_in {
display : block;
font-size: 150%;
z-index : 200;
color : #cfefcf;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
opacity: 0.8;
filter: alpha(opacity=80);
padding-top : 0em;
padding-left : 1em;
padding-right : 1em;
padding-bottom : 0.5em;
margin-left : -3em;
width: 60%;
/*margin-right : -7em;  */
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
background-color : black;
border : 3px solid green; 
/*background-image : url(../pix/CSLogin17_01_v2.jpg); 
background-attachment : fixed;
background-size: cover;*/
} 

div.sbook_construction::before {
content: "";
background : url(../pix/icons8-construction-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_construction {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}

div.sbook_warmer::before {
content: "";
background : url(../pix/icons8-cafe-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_warmer {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}

/* div.sbook_introduction::before { */
div.sbook_collaboration::before {
content: "";
background : url(../pix/icons8-collaboration-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
/* div.sbook_introduction { */
div.sbook_collaboration {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}
div.sbook_methodology::before {
content: "";
background : url(../pix/icons8-graduation-cap-100.png) top no-repeat;
/*background : url(../pix/icons8-signpost-96.png) top no-repeat; */
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_methodology {
display: block;
padding-top: 1.2em;
padding-left: 1.2em;
padding-right: 1.2em;
padding-bottom: 1.2em;
/*text-overflow: ellipsis; */
word-wrap: break-word; 
max-width : 80%;
/*opacity: 0.7;
filter: alpha(opacity=70);
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2); */
text-align : justify;
font-size : 100%;
font-style : italics;
font-family : sans-serif;
/*background-color: #cdcdcd; */
}

div.sbook_video::before {
content: "";
background : url(../pix/icons8-movie-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_video {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}

div.sbook_listening::before {
content: "";
background : url(../pix/icons8-sound-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_listening {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}

li.sbook_listening_qa {
font-size : 130%;
}

div.sbook_short_reading::before {
content: "";
background : url(../pix/icons8-reading-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_short_reading {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}

div.sbook_reading::before {
content: "";
background : url(../pix/icons8-reading-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_reading {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}

/*div.sbook_vocab_focus::before { */
div.sbook_vocab::before {
content: "";
background : url(../pix/icons8-dictionary-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
/*div.sbook_vocab_focus {*/
div.sbook_vocab {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}

/*div.sbook_reading_for_detail::before { */
div.sbook_in_detail::before {
content: "";
background : url(../pix/icons8-microscope-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
/*div.sbook_reading_for_detail { */
div.sbook_in_detail {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}
div.sbook_writing::before {
content: "";
background : url(pix/icons8-hand-with-pen-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_writing {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}


/*div.sbook_presentation::before { */
div.sbook_presentation::before {
content: "";
background : url(../pix/icons8-training-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_presentation {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}

div.sbook_grammar::before {
content: "";
background : url(../pix/icons8-automation-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_grammar {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}

div.sbook_controlled_practice::before {
content: "";
background : url(../pix/icons8-metronome-filled-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_controlled_practice {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}

div.sbook_practice::before {
content: "";
background : url(../pix/icons8-treadmill-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_practice {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}

div.sbook_freer_practice::before {
content: "";
background : url(../pix/icons8-soccer-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_freer_practice {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}

div.sbook_instructions_demo::before {
content: "";
background : url(../pix/icons8-communicate-100.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_instructions_demo {
display: block;
padding-top: 1.2em;
padding-left: 1.2em;
padding-right: 1.2em;
padding-bottom: 1.2em;
/*text-overflow: ellipsis; */
word-wrap: break-word; 
max-width : 80%;
/*line-height: 2em;
margin-left: 1%; */
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2); 
/*box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2); */
text-align : justify;
font-size : 100%;
font-style : italics;
font-family : sans-serif;
background-color: #cdcdcd;
}

div.sbook_role_play_icon::before {
content: "";
background : url(../pix/icons8-theatre-mask-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_role_play_icon {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}

div.sbook_communicating::before {
content: "";
background : url(../pix/icons8-communicate-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_communicating {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}

div.sbook_debate::before {
content: "";
background : url(../pix/icons8-people-100_white.png) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_debate {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #d6e51f;
/*background-color: #ababad; */
}

.collapsible-lines {
  background-color: #fff;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: right;
  outline: none;
}
span.next-line {
  background-color: #efefef; 
}
.content-lines {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  font-size: 150%;
/*  background-color: #f1f1f1; */
}

/*** edit_ol_qa_show_hide ***/
.collapsible-lines2 {
  background-color: #34abb3;
  cursor: pointer;
  width: 100%;
  /*border: none; */
  border-radius: 12px;
  text-align: right;
  outline: none;
}
span.next-line2 {
  /*background-color: #7e7ece;   */
  border: none;
}
.active, .collapsible-lines2:hover {
  /*background-color: #555; */
}

.content-lines2 {
  margin-top: -2em;
  margin-left: 4em;
  border: none;
  padding: 0;
  display: none;
  overflow: hidden;
  font-size: 100%;
/*  background-color: #f1f1f1; */
}


div.sbook_lead_in {
display : block;
/*font-size: 150%;
z-index : 200; */
/*color : #cfefcf; */
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
/*opacity: 0.8;
filter: alpha(opacity=80); */
padding-top : 0em;
padding-left : 1em;
padding-right : 1em;
padding-bottom : 0.5em;
/*margin-left : -3em;
width: 60%; */
/*margin-right : -7em;  */
/*box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2); */
/*background-color : black;
border : 3px solid green;  */
/*background-image : url(../pix/CSLogin17_01_v2.jpg); 
background-attachment : fixed;
background-size: cover;*/
} 
div.lead_in_v2 {
display : block;
font-size: 150%;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
} 
#button_toggle_visibility_vocab_pre_teach{
border: none;
font-size: 100%;
color: yellow; /* 066a3a; */
background-color: transparent; 
}
#button_toggle_visibility_listening_comprehension{
border: none;
font-size: 100%;
color: yellow; /* 066a3a; */
background-color: transparent; 
}

/* deprecated - was used w/ buttons
display : block;
font-size: 150%;
z-index : 200;
color : #cfefcf;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
opacity: 0.8;
filter: alpha(opacity=80);
padding-top : 0em;
padding-left : 1em;
padding-right : 1em;
padding-bottom : 0.2em;
line-height: 200%;
width: 90%;
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
background-color : black;
border : 3px solid silver; 
} 
*/
div.listening_comprehension {
display : block;
} 
#button_toggle_visibility_listening_for_detail{
border: none;
font-size: 100%;
color: yellow; /* 066a3a; */
background-color: transparent; 
}
div.listening_for_detail {
/*  float: left; */
display : block;
/*font-size: 150%; */
z-index : 200;
color : #cfefcf;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
opacity: 0.8;
filter: alpha(opacity=80);
padding-top : 0em;
padding-left : 1em;
padding-right : 1em;
padding-bottom : 0.2em;
line-height: 200%;
/*margin-left : -3em; */
width: 90%;
/*margin-right : -7em;  */
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
background-color : black;
border : 3px solid silver; 
} 
#button_toggle_visibility_role_play{
border: none;
font-size: 100%;
color: blue; /* 066a3a; */
background-color: transparent;  
}
/* not used anymore */
#button_toggle_visibility_mistakes_and_corrections{
display : block;
border: none;
font-size: 100%;
/*color: green;  066a3a;
background-color: transparent;  */
}
/* not used anymore */
div.mistakes_and_corrections {
display : block; 
font-size: 100%;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
/*z-index : 200;
color : #cfefcf;
opacity: 0.8;
filter: alpha(opacity=80); */
padding-top : 0em;
padding-left : 1em;
padding-right : 1em;
padding-bottom : 0.5em;
/*margin-left : -3em; */
/*width: 80%;
margin-right : -7em;  
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
background-color : black;
border : 3px solid green; 
background-image : url(../pix/CSLogin17_01_v2.jpg); 
background-attachment : fixed;
background-size: cover;*/
} 
/* not used anymore */
#button_toggle_visibility_mistakes{
border: none;
font-size: 100%;
color: green; /* 066a3a; */
background-color: transparent; 
}
div.mistakes {
display : block;
font-size: 150%;
z-index : 200;
color : #cfefcf;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
opacity: 0.8;
filter: alpha(opacity=80);
padding-top : 0em;
padding-left : 1em;
padding-right : 1em;
padding-bottom : 0.5em;
/*margin-left : -3em; */
width: 80%;
/*margin-right : -7em;  */
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
background-color : black;
border : 3px solid green; 
/*background-image : url(../pix/CSLogin17_01_v2.jpg); 
background-attachment : fixed;
background-size: cover;*/
} 
.collapsible {
  cursor: pointer;
  width: 100%;
font-size: 130%;
  border: none;
  text-align: left;
  outline: none;
}
.active, .collapsible_content:hover {
/*  background-color: #555;
color: #000; */
font-size: 130%;
}
.content_collapsible {
/*  padding: 0 18px; */
  display: none;
  overflow: hidden;
font-size: 130%;
/*  background-color: #f1f1f1; */
}
span.warning {
/*color: orange; */
text-decoration: underline;
text-decoration-color: orange;
text-decoration-style: wavy;
font-size: 130%;
}
div.warning2 {
font-size: 130%;
}
span.wrong {
color: red;
text-decoration: line-through; 
font-size: 130%;
}
span.right {
color: green;
font-size: 130%;
}
span.right2 {
color: green;
font-size: 90%;
}
div.wrong_and_right {
font-size: 130%;
}

/* deprecated - was used w/ buttons
div.column_vocab_pre_teach {
display : block;
font-size: 150%;
z-index : 200;
color : #cfefcf;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
opacity: 0.8;
filter: alpha(opacity=80);
padding-top : 0em;
padding-left : 1em;
padding-right : 1em;
padding-bottom : 0.2em;
line-height: 200%;
width: 40%;
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
background-color : black;
border : 3px solid silver; 
} 
*/
div.column_vocab_pre_teach {
display : block;
width: 40%;
}
div.display_test {
display : block;
z-index : 300;
color : #efefef;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
/*opacity: 1;
filter: alpha(opacity=100);   */
padding-top : 1em;
padding-left : 1em;
padding-right : 1em;
padding-bottom : 0.5em;
/*width: 60%; */
margin-left : -15% /*-7em*/;
margin-right : -19% /*-7em*/;
background-color : black;
/*box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
background-color : black;
border : 3px solid green;  */
/*background-image : url(../pix/CSLogin17_01_v2.jpg); 
background-attachment : fixed;
background-size: cover;*/
} 
/* xml_load_quarterly_test_from_xml_and_csv.inc */
div.column_test {
/*  float: left; */
display : block;
/*font-size: 90%; */
/*z-index : 200; */
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
padding-top : 0.2em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.2em;
/*line-height:90%; */
width: 48% /*32%*/;
} 

/* xml_load_quarterly_test_from_xml_and_csv.inc */
div.column_test32 {
/*  float: left; */
display : block;
/*font-size: 90%; */
/*z-index : 200; */
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
padding-top : 0.2em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.2em;
/*line-height:90%; */
width: 32% /*32%*/;
} 
#button_toggle_visibility_reading_for_detail_article_w_columns{
border: none;
font-size: 100%;
color: #e0cf17; /* 066a3a; */
background-color: transparent;  
}

#button_toggle_visibility_article_w_columns{
border: none;
font-size: 100%;
color: #e0cf17; /* 066a3a; */
background-color: transparent;  
}
/* check if below not duplicate of
div.sbook_article_w_columns { */
div.article_w_columns {
display : block;
font-size: 90%; /*90% when printing - todo */
font-family : 'Tahoma, Helvetica, Verdana';
/*font-style : italic; */
line-height: 180%;
text-align : justify;
letter-spacing: 0.2em;
word-spacing: 0.4em;
padding-top : 0.2em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.2em; 
margin-left: 0.5em;
margin-right: 0.5em;
margin-bottom: 0.5em;
width: 45%;
float: left; 
/*margin-right : -7em;  */
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
color : black; /*#cfefcf; */
background-color : #cdcdcd; /*black; */
border : 1px; 
/*border : 3px solid silver;  */
} 
div.qa_article_w_columns {
display : block;
font-size: 100%; /*90% when printing - todo */
font-family : 'Tahoma, Helvetica, Verdana';
/*font-style : italic; */
padding-top : 0.2em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.2em; 
margin-left: 0.5em;
margin-right: 0.5em;
margin-bottom: 0.5em;
width: 45%;
float: left; 
/*margin-right : -7em;  */
color : black; /*#cfefcf; */
border : 1px; 
/*border : 3px solid silver;  */
} 

/* todo for many columns */
div.controlled_practice_w_columns {
width: 40%; /* 100% at media */
display : block;
float: left; 
padding-top : 0em;
padding-left : 0.2em;
padding-right : 0.2em;
} 
div.match_2_columns_aa {
width: 70%; /* 70%; /* 100% at media */
margin-left: -35%;
display : block;
/*color : #b2d00b; */
float: left; 
padding-top : 0em;
padding-left : 0.2em;
padding-right : 0.2em;
} 
div.movable_match_2_columns_aa {
/* see div.swapper-first generated dynamically */
  width: 100%; /* 70%; /* 100% at media */
/*margin-left: -35%; */
display : block;
/*color : #b2d00b; */
/*border: 1px dotted #b2d00b;  */
float: left; 
padding-top : 0em;
padding-left : 0.2em;
padding-right : 0.2em;
/*resize: both;
overflow: scroll;*/
} 
div.moved_match_2_columns_aa {
/* see div.swapper-other generated dynamically */
width: 100%; /* 70%; /* 100% at media */
height: 70%; /* 70% */
/* margin-left: -35%; not needed when moving! */
display : block;
/*float: left;  */
padding : 0em;
/*padding-top : 0em;
padding-left : 0em;
padding-right : 0em; */
/*overflow-y: hidden; */
/*resize: both;
overflow: scroll;*/
} 
div.controlled_practice_column_aa {
width: 49%; /* 100% at media */
display : block;
float: left; 
padding-top : 0em;
padding-left : 0.2em;
padding-right : 0.2em;
} 
div.controlled_practice_column_bb {
width: 49%; /* 100% at media */
display : block;
float: left; 
padding-top : 0em;
padding-left : 0.2em;
padding-right : 0.2em;
} 
/* 3 columns become 2 on mobile phone*/
div.controlled_practice_column_a30-100 {
width: 32%; /* 100% at media */
text-align: bottom;
display : block;
float: left; 
padding-top : 0em;
padding-left : 0.2em;
padding-right : 0.2em;
} 
div.controlled_practice_column_b30-100 {
width: 32%; /* 100% at media */
text-align: bottom;
display : block;
float: left; 
padding-top : 0em;
padding-left : 0.2em;
padding-right : 0.2em;
} 
div.controlled_practice_column_c30-100 {
width: 32%; /* 100% at media */
text-align: bottom;
display : block;
float: left; 
padding-top : 0em;
padding-left : 0.2em;
padding-right : 0.2em;
} 

div.controlled_practice_column_a {
width: 24%; /* 100% at media */
text-align: bottom;
display : block;
float: left; 
padding-top : 0em;
padding-left : 0.2em;
padding-right : 0.2em;
} 
div.controlled_practice_column_b {
width: 24%; /* 100% at media */
text-align: bottom;
display : block;
float: left; 
padding-top : 0em;
padding-left : 0.2em;
padding-right : 0.2em;
} 
div.controlled_practice_column_c {
width: 24%; /* 100% at media */
text-align: bottom;
display : block;
float: left; 
padding-top : 0em;
padding-left : 0.2em;
padding-right : 0.2em;
} 
div.controlled_practice_column_d {
width: 24%; /* 100% at media */
text-align: bottom;
display : block;
float: left; 
padding-top : 0em;
padding-left : 0.2em;
padding-right : 0.2em;
} 

div.sbook_background_image {
border: 0;
position: absolute;
max-width: 100%;
/*
width: 120%;
margin-left: -20%;
*/
opacity: 0.3;
filter: alpha(opacity=30);
z-index : -100;
}


img.sbook01 {
border: 0;
/*
position: absolute;
max-height: 100%;
width: 120%;
margin-left: -20%;
opacity: 0.3;
filter: alpha(opacity=30);
z-index : -100;
*/
}

/* deprecated - generated dynamically */
img.sbook_activity_video_cover_photo {
border: 4px;
position: relative;
width: 150%;
margin-top: -5%;
margin-left: 40%;
z-index: -100;
}

/* deprecated - was used w/ buttons
div.role_play {
display : block;
z-index : 210;
width: 100%;
font-size: 150%; 
color : #cfefcf;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
opacity: 0.8;
filter: alpha(opacity=80);
padding-top : 0.2em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.5em;
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
background-color : black;
border : 3px solid blue;
}
*/
div.role_play {
display : block;
} 
div.role_play_v2 {
display : block;
font-size: 150%;
/* use for reading comprehension tasks...
letter-spacing: 0.2em;
word-spacing: 0.4em;
*/
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
} 
div.sbook_div_role_play {
display : block;
/*z-index : 210;
margin-top : -18%; */
/*margin-left : 20%; */
width: 100%;
font-size: 110%; 
/*color : #cfefcf; */
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
/*opacity: 0.8;
filter: alpha(opacity=80); */
padding-top : 0em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.5em;
} 
div.sbook_column_role_play_a {
display : block;
transform: rotate(-2deg);
float: left; 
margin-left : 1.2em; /* margin-left: 0em; for @media */
padding-top : 0.4em;
padding-left : 1.5em; /*0.3em; */
padding-right : 1em; /*0.3em;*/
padding-bottom : 0.3em;
width: 40%; /*was 45 - 100% at media */
/* border-image-source: url(../pix/sbook_border_01_rings.svg);
border: 10px solid transparent;
border-image-repeat: stretch;
border-image-slice: 100; */
/*background-image: url(../pix/sbook_border_01_rings.svg); */
background-color: #98fe6f; /*#aae891;/*#fff;*/ 
/*background-image: url(../pix/sbook_border_top_02_rings_white.svg);   */
/*background-image: url(../pix/sbook_border_top_03_rings_white.svg);  */
background-attachment : fixed;
background-size: cover;
/*background-repeat: no-repeat; */
background-position-y: -35px; 
background-position-x: -1em; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
/*background-color : black;
border : 3px solid blue; */
} 
div.sbook_column_role_play_b {
display : block;
transform: rotate(5deg);
float: left; 
margin-left : 1em; /* margin-left: 0em; for @media */
padding-top : 0.4em;
padding-left : 1.5em; /*0.3em; */
padding-right : 1em; /*0.3em;*/
padding-bottom : 0.3em;
width: 45%;
background-color: #d0ee30;/*#bbc745; /*#fff; */
/*background-image: url(../pix/sbook_border_top_01_rings.svg); */
/*background-image: url(../pix/sbook_border_top_02_rings_white.svg); */
/*background-image: url(../pix/sbook_border_top_03_rings_white.svg); */
background-attachment : fixed;
background-size: cover;
/*background-repeat: no-repeat; */
background-position-y: -35px; 
background-position-x: -1em; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
/*box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;*/
} 
div.sbook_voc_box_for_role_plays {
  float: left; /* display: none; for print */
/* margin-left: -10%; check for mobile phone */
}
/* check if not duplicate of div.sbook_column_role_play_a */
div.column_role_play_a {
display : block;
float: left; 
padding-top : 0em;
padding-left : 0.2em;
padding-right : 0.2em;
width: 45%; /* 100% at media */
/*margin-right : -7em;/
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
background-color : black;
border : 3px solid blue; */
} 
div.column_role_play_b {
display : block;
float: left; 
margin-left : 1.2em; /* margin-left: 0em; for @media */
padding-top : 0em;
padding-left : 0.2em;
padding-right : 0.2em;
width: 45%;
/*margin-right : -7em;  
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
background-color : black;
border : 3px solid blue;*/ 
} 

#button_toggle_visibility_grammar_focus {
border: none;
font-size: 100%;
color: #eda804;
background-color: transparent;  
}
div.grammar_focus {
display : block;
font-size: 150%;
z-index : 210;
color : #eda804;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
opacity: 0.8;
filter: alpha(opacity=80);
padding-top : 0em;
padding-left : 1em;
padding-right : 1em;
margin-top : 0%;
padding-bottom : 0.5em;
margin-left : 0%;/* -3em; */
width: 90%;
/*margin-right : -7em;  */
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
background-color : black;
border : 3px solid #eda804; 
} 
#button_toggle_visibility_grammar_drills {
border: none;
font-size: 100%;
color: #b2d00b;
background-color: transparent;  
}
div.grammar_drills {
display : block;
font-size: 150%;
z-index : 210;
color : #b2d00b;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
opacity: 0.8;
filter: alpha(opacity=80);
padding-top : 0em;
padding-left : 1em;
padding-right : 1em;
margin-top : 0%;
padding-bottom : 0.5em;
margin-left : 0%;/* -3em; */
width: 90%;
/*margin-right : -7em;  */
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
background-color : black;
border : 3px solid #b2d00b; 
} 
#div2mov_box {
position: absolute;
/*max-width: 100%; */
z-index: 9;
text-align: center;
padding: 0em;
display: inline-block;
float: left;
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
}
#div2mov_cards {
/* auto generated by foreach */
}
img.deck_image {
/*width: 500em  1980 */
width: 10em;
}
span.grammar1:before {
background-image : url(../pix/icons8-automation-100.png) middle no-repeat;
/*background-size: 3em 3em; */
/*content: url(../pix/icons8-automation-100.png); */
background-size: contain;
display: inline-block; /*mandatory*/
/*height: 0.2em;
width: 0.2em; */
height: 2%;
width: 4%;
border: solid;
/*transform: scale(.4); /* only version which works */
/*height: 3em;
width: 3em;
size: 0.5em;
background-image: url(../pix/CSLogin17_01_v2.jpg) top left no-repeat;  */
/*background-size: cover;
content: "";
height: 15rem;
overflow: hidden;
display: block;*/
}
.sb_grammar::before {
content: "";
background : url(../pix/icons8-automation-100.png) bottom no-repeat;
background-size: contain;
height: 4%;
width: 4%;
transform: scale(2);
display: inline-block; /*mandatory*/
/*border: solid; */
}
.sb_grammar {
left: 4%;
color: #efefef;
background-color: #000; 
/*text-decoration: underline;
font-weight : bold; 
font-style: italic; */
}
/*** clog - course log in xml format ***/
.clog_hw {
margin-left: 3%;
}
.clog_warmer {
margin-left: 3%;
}
.clog_support_materials_covered {
margin-left: 3%;
}
.clog_expressions {
margin-left: 3%;
}
.clog_deco {
margin-left: 3%;
margin-top: -4%;
margin-bottom: -5%;
}
.clog_pig {
margin-left: 3%;
}
@media only screen and (min-width: 1980px) {
img.deck_image {
/*width: 500em  1980 */
width: 500em;
}
}
/*
#div2mov {
position: absolute;
z-index: 9; */

/*max-width: 100%; */
/*border: 1px solid #d3d3d3;
background-color: #f1f1f1;*/

    /*text-align: center;
padding: 0em;
display: inline-block;
float: left;
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
} */
#div2mov_inside {
padding: 1em;
border: 1px solid; 
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
}

.zoom_1_3 {
/*padding: 3em; */
background-color: none;
transition: transform .5s;
/*width: 20%;
height: 20%;*/
margin: 0 auto;
font-size: 70%;
display: inline-block;
border: 1px;
}
.zoom_1_3:hover {
-ms-transform: scale(1.3); /* IE 9 */
-webkit-transform: scale(1.3); /* Safari 3-8 */
transform: scale(3); /* was 3 */
/* z-index: 1000;  pushkin only */
}
/* no zoom on mobile, only full width */
.zoom_1_2 {
/*padding: 3em; */
background-color: none;
transition: transform .8s;
width: 70%;
/*height: 20%;*/
margin: 0 auto;
font-size: 70%;
display: inline-block;
}
.zoom_1_2:hover {
-ms-transform: scale(2.5); /* IE 9 */
-webkit-transform: scale(2.5); /* Safari 3-8 */
transform: scale(2.5); 
z-index: 100;
}

.zoom_1_5 {
/*padding: 3em; */
background-color: none;
transition: transform .5s;
width: 40%;
height: 20%;
margin: 0 auto;
font-size: 70%;
display: inline-block;
}

.zoom_1_5:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(3); 
}

span.new_expressions {
  /* use for at media
display: inline-block;
padding-top: 1em;
padding-bottom: 1em; */
}
span.clog_new_expressions {
/* use for new expressions in course log generated by xml */
position: relative;
display: inline-block;
margin-left: 2em;
}
span.sbook_new_expressions {
position: relative;
display: inline-block;
/*margin-left: 2em; */ /* not needed anymore - was for clog xml */
}
span.smaller_text {
/*font-style : italic;
* font-weight : bold;  */
font-size : 85%; 
}
/*** used with js ***/
div.voc_to_recycle {
  display: none;
}
div.voc_box_for_role_plays {
float: left;
margin-left: 1%;
/*text-align: left; */
/* margin-left: -10%; */
/* margin-left: -10%; check for mobile phone */
}
div.sbook_voc_box_left_column{
text-align: left;
font-style: italic;
font-size: 90%;
}
div.sbook_voc_box_left_column:hover{
/*color: white;
background: #5e5b5b/*black*/; */
}
/* hide full screen */
div.sbook_voc_box_middle_column{
display: none;
}
div.sbook_voc_box_middle_column:hover{
display: none;
}
span.sbook_word_needing_popup {
display: inline-block;
border-bottom: 1px dotted grey;
}
div.sbook_definition_of_word_needing_popup {
display: none;
}
span:hover+div.sbook_definition_of_word_needing_popup {
position : absolute;
margin: 8% 0 0 0%; 
z-index : 230; 
display: block;
text-align: center;
color: white;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2); 
background-color: green; /* #333 #111 Black*/
padding: 0.8em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
width: 40%;
}

span.sbook_scrambled_word {
display: inline-block;
letter-spacing: 0.2em;
word-spacing: 0.4em;
padding-top : 0.1em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.1em; 
color: white;
background: #5e5b5b/*black*/;
}
/* not implemented after all */
span.sbook_scrambled_word:hover {
display: none;
}
span.sbook_unscrambled_word {
display: none;
}
span.sbook_unscrambled_word:hover {
display: inline-block;
background: #cdcdcd; /*#5e5b5b black*/;
}

@media only screen and (max-width: 768px /*768 1024*/) {
div.sbook_voc_box_left_column{
display: none;
}
div.sbook_voc_box_left_column:hover{
display: none;
}
/* doesn't work on laptop - check w/ mobile!!! */
div.sbook_voc_box_middle_column{
text-align: left;
font-style: italic; 
font-size: 70%;
width: 30%;
/*border: 2px blue; /* debug only */
}
div.sbook_voc_box_middle_column:hover{
/*color: white;
background: #5e5b5b/*black*/; */
}

span:hover+div.voc_to_recycle_left_column {
position :absolute;
}
}

div.voc_to_recycle_left_column {
  display: none;
}
span:hover+div.voc_to_recycle {
position : absolute;
margin: -30% 0 0 30%; 
z-index : 230; 
display: block;
text-align: center;
color: white;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2); 
background-color: green; /* #333 #111 Black*/
padding: 0.8em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
width: 40%;
}
/*li:nth-child(even){*/ /* works*/
/*li:nth-child(even).zebra{*/ /* works*/
/*li:nth-of-type(even).zebra {*/ /* works */
/*ol.zebra li:nth-child(even) { */ /* works but beow doesn;t? */
/* ol.zebra+span+li:nth-child(2n) { */
/* li:nth-child(2n) { */
ol.zebra > span > li:nth-child(2n) { 
  color: lime;
background-color: green;
}
/* li:hover+div.voc_to_recycle2 { can work too */
span:hover+div.voc_to_recycle2 { 
position : absolute;
margin: 0 0 0 10%;
z-index : 230; 
display: block;
color: white;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2); 
background-color: green; /* #333 #111 Black*/
padding: 0.8em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
width: 10%;
}
div.voc_to_recycle2 {
  display: none;
}
span:hover+div.voc_to_recycle_left_column {
position : absolute;
margin: -5% 0 0 20%; 
z-index : 230; 
display: block;
text-align: center;
font-style: normal;
font-size: 110%;
color: white;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2); 
background-color: green; /* #333 #111 Black*/
padding: 0.8em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
width: 40%;
}

div.sbook_methodology {
white-space: pre-wrap;
/*font-style: italic;
font-weight: bold; */
}
span.sbook_activity_lead_in {
font-family : "Lucida Grande", "Helvetica Neue", sans-serif;
/*letter-spacing: 0.1em;*/
word-spacing: 0.2em;
font-size: 110%;
font-weight: 700;
/*font-style: italic;*/
}
span.sbook_instructions {
font-family : "Lucida Grande", "Helvetica Neue", sans-serif;
/*letter-spacing: 0.1em;*/
word-spacing: 0.2em;
font-size: 110%;
/*font-style: italic;*/
/*font-weight: bold;*/
}
span.sbook_instructions02 {
font-size: 100%;
font-style: italic;
/*font-weight: bold;*/
}
span.sbook_instructions_white {
color: white;
font-size: 110%;
font-style: italic;
font-weight: bold;
/*background-color: rgba(45,35,35,0.1);
text-shadow: 0 0 4em #000; */
}
span.sbook_instructions_white:hover {
/*background: #5e5b5b/*black*/;
}
span.sbook_instructions02_white {
color: white;
font-size: 100%;
font-style: italic;
/*font-weight: bold;*/
}
span.sbook_instructions02_white:hover {
background: #5e5b5b/*black*/;
}
span.show_key {
color: transparent;
text-shadow: 0 0 1em rgba(0,0,0,0.9);
filter: blur(5px); 
}
span.show_key:hover {
color: black;
filter: none;
}
span.show_key2 {
-webkit-transform: rotateY(180deg);  /* Chrome, Safari, Opera */
transform: rotateY(180deg);
backface-visibility: visible; 
display: inline-block; /* mandatory */
transition: 0.3s
}
span.show_key2:hover {
-webkit-transform: rotateY(0deg);  /* Chrome, Safari, Opera */
transform: rotateY(0deg);
/*-webkit-backface-visibility: hidden;  /* Chrome, Safari, Opera */
/*backface-visibility: hidden; */
backface-visibility: visible;
transition: 0.3s
}
span.show_key4 {
color: white;
text-shadow: 0 0 1em rgba(0,0,0,0.9);
filter: blur(5px); 
}
span.show_key4:hover {
color: white;
filter: none;
}
span.show_key5 {
-webkit-transform: rotateY(180deg);  /* Chrome, Safari, Opera */
transform: rotateY(180deg);
backface-visibility: visible; 
display: inline-block; /* mandatory */
transition: 0.3s
}
span.show_key5:hover {
-webkit-transform: rotateY(0deg);  /* Chrome, Safari, Opera */
transform: rotateY(0deg);
/*-webkit-backface-visibility: hidden;  /* Chrome, Safari, Opera */
/*backface-visibility: hidden; */
backface-visibility: visible;
transition: 0.3s
}

/*span.question_sbook_white { */

li.question_sbook_white {
color: white;
text-shadow: 0.1em 0.3em 0.8em rgba(0,0,0,0.9);
}

li.question_sbook_white:hover {
background: #5e5b5b/*black*/;
/*display: inline-block;*/
}
li.question_sbook_black {
color: black;
}
li.question_sbook_black:hover {
color: white;
background: #5e5b5b/*black*/;
display: block; /* mandatory */
}

span.show_key_sbook {
text-shadow: 0 0 1em rgba(0,0,0,0.9);
filter: blur(5px); 
}
span.show_key_sbook_white {
color: white;
text-shadow: 0.1em 0.3em 0.8em rgba(0,0,0,0.9);
/*text-shadow: 0 0 1em rgba(0,0,0,0.9); */
filter: blur(5px); 
}
span.show_key_sbook:hover {
filter: none;
}
span.show_key_sbook_white:hover {
filter: none;
}


div.show_key3 {
padding: 0.2em;
color: transparent;
text-shadow: 0 0 1em rgba(0,0,0,0.9);
filter: blur(5px); 
}
div.show_key3:hover {
color: black;
filter: none;
padding: 0.2em;
background-color: lime;
}
div.show_key3_to_print_for_feedback {
color: black;
filter: none;
padding: 0.2em;
background-color: #cdcdcd; /*lime; */
}


/***** views not logged in ********/
#login_input_username {
border: none;
cursor: pointer;
border : 1px solid;
}
#login_input_password {
cursor: pointer;
border : 1px solid;
}
#login_input_password_btn {
cursor: pointer;
color : #3b0083;
font-size: 90%;
background-color : #d4e4d5; 
border : 1px solid;
}
/***** views logged in ********/
span.logged_in{
font-size : 0.9em;
color : #000000;
}
/******** text style ********/
span.small_txt {
color : #3b0083;
font-size: 75%;
}
span.small_text {
color : #3b0083;
font-size: 75%;
}
span.shaded_area {
  color : #353535;
font-size: 75%;
font-style: italic;
}
span.code {
white-space: pre-wrap;
font-size : 0.9em;
color : #000000;
} 
pre.code  {
white-space: pre-wrap;
font-size : 1.2em;
color : #000000;
padding-top : 0.5em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.5em;
background-color : #bcbcbc;
border : 1px solid;
}
/********* lessons **********/
pre.homework {
white-space: pre-wrap;
font-size : 1em;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
padding-top : 0.5em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.5em;
/*background-color : #b4e4f5; */
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
background-image: linear-gradient(to bottom right, #d5e1df, #587e76); 
/*background-image: linear-gradient(to bottom right, #e3eaa7, #b5e7a0);  */
/*background-color :  #96ceb4; /* #ffeead; /*#d4e4d5;  */
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
border : 1px solid;
}
pre.lesson_plan {
white-space: pre-wrap;
font-size : 1em; /* 1em */
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
/*overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word; */
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
padding-top : 0.5em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.5em;
/*margin-left : -1.8em;
margin-right : -3.2em; */
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
background-color : #efefef;
border : 1px solid;
}

pre.lesson_plan_ef {
white-space: pre-wrap;
font-size : 1em;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
/*overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word; */
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
padding-top : 0.5em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.5em;
/*margin-left : -1.8em;
margin-right : -3.2em; */
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
/*background-color : #efefef; */
border : 1px solid;
/*background-image : url(../pix/CSLogin17_01_v2.jpg);  */
/*background-image: url(../pix/Bg-2015.jpg); */
background-image: url(../pix/Bg-2015_lighter.jpg);
background-attachment : fixed;
background-size: cover;
}

pre.course_outline_ef {
white-space: pre-wrap;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
/*overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word; */
}

pre.lesson_plan img {
max-width: 90%
}
pre.homework a {
word-wrap: break-word;
text-overflow: ellipsis;
}
pre.lesson_plan a {
word-wrap: break-word;
text-overflow: ellipsis;
}

/*MarkDotto.com */
span.seriously_3d_text {
font-size: 150%;
background: #222;
text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

/* https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/ */
span.sbook_soft_emboss {
font-size: 150%;
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
}

#sbook_banner {
/* see xml_load_file_ref_sbook.inc for dynamic background: url */
/* margin-bottom : 0em; print */
}
#sbook_heading {
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
background-color: #222; /* #111 Black*/
color : #efefef;
} 
#sbook_ref {
min-width: 20%;
padding: 0.5em;
text-align : left;
font-size : 400%;
font-weight : bold;
font-family : sans-serif;
float: left;
overflow: hidden;
display: block;
} 

/* used in course_outline_generator_html_w_xml.php for EF */
.course_outline_page {
padding-left: 1.2em;
}
.course_outline {
color: #002060;
}
.course_outline_quarterly_test {
color: #003366; 
background-color: #00ff00;
}

/* used in xml_load_ref for efekta */
.sbook_flex-container {
display: flex;
flex-direction: column;
/*justify-content: center; */
justify-content: left;
align-items: center; 
/*align-items: left;*/
/*align-content: center;  */
align-content: left;
flex-wrap: wrap;
align-items: flex-start;
/*background-image : url(../pix/pg_background011.png);
background-size: cover; */
overflow: hidden;
display: block;
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
background-color: #222; /* #111 Black*/
}

#sbook_unit_title {
padding-top: 1em;
padding-left: 0.5em;
padding-right: 0.5em;
text-align : left;
font-size : 200%;
font-weight : bold;
font-family : sans-serif;
/*border-bottom : 2px solid #3b0083; */
} 

#sbook_lesson_title {
/*margin-left : 20%; 
margin-right : 1%;
margin-top : 10px; */
padding-left: 0.7em;
padding-right: 0.5em;
text-align : left;
font-size : 150%;
font-weight : bold;
font-family : sans-serif;
} 

#sbook_topic_reference  {
margin-top : 5px;
text-align : right;
font-size : 70%;
}

#sbook_front_page_left_column {
max-width : 19%;
/*white-space: pre-wrap; */
float : left;
margin-left : 0;
font-size : 70%;
text-overflow: ellipsis;
word-wrap: break-word; 
text-align : left;
padding-top : 0.3em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.3em;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
background-color: #222; /* #111 Black*/
display: block;
}

/*** used in xml_load_file for article_w_columns, role_a, role_b, sbook ***/
.flex-container {
display: flex;
-webkit-display: flex;
-moz-display: flex;
-ms--display: flex;
flex-direction: row;
justify-content: left;
align-items: center; 
align-content: left;
flex-wrap: wrap;
align-items: flex-start;
}

div.sbook_left_column {
width : 23%;
margin-left : -0.5em; /*-0.3em; */
font-size : 80%;
text-overflow: ellipsis;
word-wrap: break-word; 
text-align : left;
padding-top : 0em;
padding-left : 0em;/*0.5em; */
padding-right : 0.5em;
padding-bottom : 0.3em;
display: block;
}
/*
csv_load_deck_shuffled_lines_halign.inc
div.sbook_left_column02 {
width : 23%;
margin-left : -0.5em;
font-size : 80%;
text-overflow: ellipsis;
word-wrap: break-word; 
text-align : left;
padding-top : 0em;
padding-left : 0em;
padding-right : 0.5em;
padding-bottom : 0.3em;
display: block;
}
*/
div.sbook_middle_right_column {
width : 75%;  /* print 60*/
white-space: pre-wrap;
margin-top: 0em; /*-1.7em; */
margin-left : 0;
text-align : left;
padding-top : 0.1em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.3em;
display: block;
}
/*
csv_load_deck_shuffled_lines_halign.inc
div.sbook_middle_right_column02 {
width : 75%;
white-space: pre-wrap;
margin-top: 0em;
margin-left : 0;
text-align : left;
padding-top : 0.1em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.3em;
display: block;
}
*/
div.sbook_article_w_columns {
display : block;
font-size: 90%; /*90% when printing - todo */
font-family : 'Tahoma, Helvetica, Verdana';
/*font-style : italic; */
line-height: 180%;
text-align : justify;
letter-spacing: 0.2em;
word-spacing: 0.4em;
padding-top : 0.2em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.2em; 
margin-left: 0.5em;
margin-right: 1.5em;
margin-bottom: 2em;
width: 44%;
float: left; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
color : black; /*#cfefcf; */
background-color : #cdcdcd; /*black; */
border : 1px; 
/*border : 3px solid silver;  */
} 

/*
div.sbook_audio_script_w_colum::before {
width: 100%;
height: 0.1em;
background-color: #888;
margin: 0.6em 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
*/

div.sbook_audio_script_w_columns {
font-size: 50%;  /*90% when printing - todo */
text-align : justify;
color: white;
/*text-shadow: 0.1em 0.3em 0.8em rgba(0,0,0,0.9); */
text-shadow: 0 0 1em rgba(0,0,0,0.9); 
filter: blur(5px); 
transition: 0.3s
} 

div.sbook_audio_script_w_columns:hover {
filter: none;
transition: 0.3s
display : block;
font-size: 100%; /*90% when printing - todo */
text-align : justify;
font-family : 'Tahoma, Helvetica, Verdana';
/*font-style : italic; */
text-align : justify;
/*line-height: 180%;
letter-spacing: 0.2em;
word-spacing: 0.4em; */
padding-top : 0.2em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.2em; 
margin-left: 0.5em;
margin-right: 1.5em;
margin-bottom: 2em;
/*width: 44%;*/
float: left; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
color : black; /*#cfefcf; */
background-color : #cdcdcd; /*black; */
border : 1px; 
} 

/* not in sbook_plugins any more */
.sbook_flex-container_1-3 {
display: flex;
flex-direction: column;
/*justify-content: center; */
justify-content: left;
align-items: center; 
/*align-items: left;*/
/*align-content: center;  */
align-content: left;
flex-wrap: wrap;
align-items: flex-start;
/*background-image : url(../pix/pg_background011.png);
background-size: cover; */
overflow: hidden;
display: block;
}

span.sbook_exercise_no {
line-height: 2em;
margin-left: -5%; /* 1%; */
margin-right: 2%; /* 1%; */
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
padding-top: 1em;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-align : left;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #ababad;
}
span.sbook_feedback_no {
line-height: 2em;
/* margin-left: -5%; /* 1%; */
/* margin-right: 2%; /* 1%; */
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
padding-top: 1em;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-align : left;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #ababad;
}
div.column_feedback {
/*  float: left; */
display : block;
word-wrap: break-word; 
white-space: pre-wrap;
margin-left : 2%;
font-size: 90%;
/*z-index : 200; */
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
padding-top : 0.2em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.2em;
/*line-height:90%; */
width: 28% /*32%*/;
} 
span.sbook_feedback_comments {
display : block;
word-wrap: break-word; 
white-space: pre-wrap;
margin-left : 2%;
}
pre.sbook_lesson_plan {
white-space: pre-wrap;
font-size : 1em;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
margin-left : 2%;
max-width: 100%;
}
pre.sbook_lesson_plan img {
max-width: 90%
}
pre.sbook_lesson_plan a {
word-wrap: break-word;
text-overflow: ellipsis;
}

pre.lesson_plan_tbc {
  display: none;
/*
  white-space: pre-wrap;
font-size : 0.1em;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
padding-top : 0.5em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.5em;
opacity: 0.5;
filter: alpha(opacity=50);
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
border : 1px solid; 
         */
}
.lesson_plan_tbc img {
display: none;
}

/* not in sbook_plugins any more */
pre.lesson_plan2 {
white-space: pre-wrap;
font-size : 1em;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
padding-top : 0.5em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.5em;
background-color : #efefef;
border : 1px solid;
}
pre.black_board {
white-space: pre-wrap;
color : #cfefcf;
font-size :1.3em;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
opacity: 0.8;
filter: alpha(opacity=80);
padding-top : 0em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.5em;
margin-top : -4em;
margin-left : -3em;
margin-right : -9em; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
background-color : black;
border : 1px solid;
}
.wb-col-container {
    display: table;
    width: 99%;
}
.wb-col1 {
    display: table-cell;
    padding: 16px;
    width: 2%;
}
.wb-col2 {
    display: table-cell;
    padding: 16px;
    padding-left : 0em;
    width: 98%;
}
/* not in sbook_plugins any more */
pre.lesson_contents {
white-space: pre-wrap;
font-size : 1em;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
padding-top : 0.5em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 0.5em;
/*background-color : #a4b4c5;*/
background-color : #3b0083;
border : 1px solid;
}
/********** layout *********/
/*** central menu (actually top left ***/
/* not used anymore */
div.draw_menu_icon {
width: 4.9em; /*80%;*/
height: 0.4em;
margin: 0.4em 0; 
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: lime; /*#888; /*#abcabc; */
color: transparent;
}
/* not used anymore */
@media only screen and (max-width: 1024px) {
div.draw_menu_icon {
background-color: grey; /*#888; /*#abcabc; */
}
}
/* not used any more - replaced by central_menu02 */
#floating_central_menu {
z-index: 5; 
position: fixed; /* Stay in place */
top: 0.7em;
left: 0.5em; /* 1.6em; */
bottom: 5px;
height: 6%; /*2%; /* 100% Full-height */
width: 5%; 
overflow-y: hidden; /* Disable horizontal scroll */
overflow-x: hidden; /* Disable horizontal scroll */
/*background-image : url(../pix/pg_background011_v3.png); */
/*background-color: transparent;  */
background-color: #efefef; /* #111 Black*/
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
/*background-color: #052a3a; */ /* #111 Black*/
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius:6px;
/* settings for home icon */
padding-top: 0.5em;
padding-left: 1.5em;
padding-right: 1.5em;
padding-bottom: 1em; 
transition: 0.5s; 
}
#floating_central_menu a {
padding: 0.5em 0.5em 0.5em 0.5em;
text-decoration: none;
font-size: 1em; 
font-weight : bold; 
color: #3b0083;
display: block;
transition: 0.3s
}
#floating_central_menu:hover {
left: 2%;
height: 70%; /* 100% Full-height */
width: 40%; /* 0 width - change this with JavaScript */
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
transition: 0.8s; /* 0.5 second transition effect to slide in the sidenav */
overflow-y: auto; 
color: #red;
}
#floating_central_menu a:hover, .offcanvas a:focus{
left: 20%;
color: #red;
background-color: #9bbfb4;
}

/********** settings for mobile phone *************/
/* min-width: 768 */
@media only screen and (max-width: 1024px) {
/* not used any more - replaced by central_menu02 */
#floating_central_menu {
top: 0.7em;
left: 85%; /* 1.6em; */
bottom: 5px;
height: 8%; /*2%; /* 100% Full-height */
width: 8%; 
background-color: lime; /*#888; /*#abcabc; */
}

#floating_central_menu a {
font-size: 1em;
}
#floating_central_menu:hover {
background-color: #efefef; /*#888; /*#abcabc; */
left: 45%;
height: 60%; 
width: 40%;
}
#floating_central_menu a:hover, .offcanvas a:focus{
background-color: #efefef; /*#888; /*#abcabc; */
left: 70%;
}
/*
div.sbook_left_column02 {
width : 20%;
margin-left : 0em;
}
div.sbook_middle_right_column02 {
width : 65%;
margin-left : -0.5em;
}
*/
}

/*** old ***/
/*
#central_menu {
top: 1.2em;
position: fixed;
z-index : 1;
right: 0;
font-size : 60%;
padding-top : 0.2em;
padding-left : 1.2em;
padding-right : 1.2em;
border : none;
margin-bottom : -4em;
margin-left : 1em;
margin-right : 1em;
}
*/

/* 20230317 inc/central_menu.inc */
.central_menu02 {
  margin-top: -24px;
  padding-top: 1em;
  text-align: center;
  font-size: 0.9em;
  overflow: hidden;
/*background-image : url(../pix/background_showreel_slim_dvd_sleeve_touched.jpg);*/
  background-image: linear-gradient(to bottom right, #605555, #000); /*#2f3640 */
  /*background-image: linear-gradient(to bottom right, #5f646b, #000); /*#2f3640 */*/
  /*background-image: linear-gradient(to bottom right, #bdcebe, #000); */
  /*background-image: linear-gradient(to bottom right, #bdcebe, #3e4444); */
opacity: 0.7;
}

.central_menu02 a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 1em 1em;
  text-decoration: none;
}

.central_menu02 a:hover {
  /*background-color: #ffeea; /*d#ddd;*/
/*color: #3e4444;/*#feb236;*/
  color: white;
text-decoration : underline;
text-decoration-color: orange;
text-decoration-thickness: 10%; /**/

/*text-transform: uppercase; capitalize; */
transition: 0.5s;
/*background-image: linear-gradient(to bottom right, #d5e1df, #3e4444);  keep just in case! */
/* color: #feb236;
background-image: linear-gradient(to bottom right,#fefbd8, #ffef96); */
/*background-image: linear-gradient(to bottom right, #ffeead, #ffcc5c); 
-moz-border-radius: 48px;
-webkit-border-radius: 48px;
border-radius: 48px; */
opacity: 1;
}
.central_menu02 a.active {
  background-color: #f2f2f2;/*#04AA6D; */
  color: white;
}

.central_menu02 .icon_central_menu02 {
  display: none;
}

@media screen and (max-width: 600px) {
  .central_menu02 a:not(:first-child) {display: none;}
  .central_menu02 a.icon_central_menu02 {
  text-align : right;
  color: #f2f2f2;
    float: right;
    display: block;
-moz-border-radius: 48px;
-webkit-border-radius: 48px;
border-radius: 48px;
  }
}

@media screen and (max-width: 600px) {
  .central_menu02.responsive {position: relative;}
  .central_menu02.responsive .icon_central_menu02 {
    position: absolute;
    right: 0;
    top: 0;
-moz-border-radius: 48px;
-webkit-border-radius: 48px;
border-radius: 48px;
  }
  .central_menu02.responsive a {
    float: none;
    display: block;
    text-align: left;
  font-size: 1.4em;
-moz-border-radius: 48px;
-webkit-border-radius: 48px;
border-radius: 48px;
  }
}


/*  left_side_menu */
#left_side_menu {
position: relative; /*fixed; */
margin-top: 5%; 
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
/*top: 5px; */
float : left; 
/*clear: left; /* needed with display: inline and no <br /> */
margin-left : 0.2em;
padding-top : 0.3em;
padding-left : 0.2em;
padding-right : 1em;
padding-bottom : 0.3em;
border : none;
max-height: 85%; 
width: 8%; /* was 9% */
overflow-y: auto; /*visible; /*scroll; /*hidden;*/
overflow-x: hidden;
} 
#left_side_menu a:link {
display: inline; /*inline-block; needed if used <br /> */
/*line-height: 140%; */
padding-bottom: 0.4em;
}

/********** settings for mobile phone online vs offline version *************/
/* min-width: 768 */
@media only screen and (max-width: 1024px) {
  body  {
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
/*font-size: 30px; /* on-line version - mobile phone */
font-size: 12px; /* 12 or 16 off-line version - on laptop for web-brower display side by side on flat panel */
margin : 0.3em;
}

/*** not used but keep just in case
div.draw_menu_icon {
width: 6em;
height: 0.6em;
background-color: #888;
margin: 0.6em 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
***/
#left_side_menu {
position: relative; /*absolute; */
margin-top: -1em; 
/*margin-left: 1.5em; 
overflow: hidden; */
z-index: 1;
width: 100%; /*9%; */
height: 100%; /*5%; */
/*transition: transform .5s; */
font-size: 90%;
color: ##e6e2d3;
/*background-color: #3e4444/*#588c7e; /*lime; /* #111 Black*/
/*background-color: #708090; /*#20B2AA;*/
/*color: transparent;
opacity: 0.2;
filter: alpha(opacity=20);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: solid 2px lime;*/ /* #20B2AA; */
border-radius:3px;
padding: 4em;
/* settings for icon 
padding-top: 0.5em;
padding-left: 1.2em;
padding-right: 0.2em;
padding-bottom: 0.5em; */
      }
#left_side_menu a {
display: block;
color: #000;
padding: 0.4em;
}
/* deprecated
#left_side_menu:hover {
z-index: 20000;
height: 90%;
width: 40%;
background-color: #efefef;
font-size: 180%;
padding: 0.4em;
color: #000;
opacity: 0.9;
filter: alpha(opacity=90);
transition: 0.8s;
opacity: 0.9;
filter: alpha(opacity=90);
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
overflow-x: hidden;
padding-top: 0.5em;
padding-left: 1.5em;
padding-right: 1.5em;
padding-bottom: 1em; 
      }
      */
#left_side_menu a:hover, a:focus {
color: #000;
background-color: #9bbfb4;
}

A:link {
color : #588c7e;
}
A:active {
color : #588c7e;
}
A:visited {
color : #588c7e;
}
A:hover {
color : #feb236;
} 



/* old but works */
/*.sidenav {
height: 60%; 
width: 70%; 
position: fixed;
z-index: 2;
}
.sidenav .closebtn {
top: 8;
right: 50px;
margin-left: 50px;
}
*/
div.sidenav {
  display: none;
}

/*** deprecated - was in inc/central_menu.inc ***/
#button_toggle_visibility_menu{
position: fixed;
z-index: 5;
text-align: center;
left: 80%;
border: none;
font-size: 100%;
background-color: transparent; 
}
.menu_to_toggle {
position: relative;
z-index: 5; /* mandatory */
left : 45%; 
margin-top: 15%;
width: 60%;
max-height: 70%;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
opacity: 0.9;
filter: alpha(opacity=90);
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
background-color: #111; /*#efefef;  #111 Black*/
padding-top: 10px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
overflow-y: auto; /* doesn;t seem to work */
}
.menu_to_toggle a {
font-size: 1.2em;
padding-top : 0em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.8em;
text-decoration: none;
font-weight : bold; 
color: #cfcfcf;
/*color: #3b0083; lime */
display: inline-block;
/*display: block; */
transition: 0.3s
}
.menu_to_toggle a:link, a:active, a:visited {
text-decoration: none;
font-weight : bold; 
color: #cfcfcf;
}
.menu_to_toggle a:hover, a:focus{
color: red;
}
#central_menu {
  /* no changes needed */
}

#right_side_menu {
  display: none;
  /*
position: relative;
float: left;
right: -20%;
top: 10%;   */
}
.dropdown:hover .dropdown-content {
display: block;
color: white;
overflow: auto;
font-size: 130%; /* set 90% when not at media */
text-decoration: none;
}

#main {
width: 100%;
/*clear: both; will enable left_menu to overflow */ 
position: relative;
}
/* used for efekta flipped lessons review only! */
/* double entry - check if sthis one still relevant...
#page_contents {
width: 97%;
position: relative;
left: -10%; */
/*
background-image: linear-gradient(to bottom right, #bdcebe, #3e4444); 
opacity: 0.7;
margin-top : 0em;
border : 3px solid #dddddd;
margin-left : 0%;
margin-right : 0%;
padding-top : 0em;
padding-left : 0em;
padding-right : 0em;
padding-bottom : 0em;
*/
/* } */
div.lead_in {
z-index : 0;
opacity: 1;
filter: alpha(opacity=100);
padding-top : 0em;
padding-left : 0.3em;
padding-right : 0.3em;
padding-bottom : 0.3em;
margin-left : -1em;
width: 105%;
}
div.lead_in_v2 {
z-index : 0;
opacity: 1;
filter: alpha(opacity=100);
padding-top : 0em;
padding-left : 0.3em;
padding-right : 0.3em;
padding-bottom : 0.3em;
/*margin-left : -1em;
width: 105%; */
}
div.role_play {
opacity: 1;
filter: alpha(opacity=100);
padding-top : 0em;
padding-left : 0.3em;
padding-right : 0.3em;
padding-bottom : 0.3em;
margin-top : 1%;
margin-left : -1em;
width: 105%;
}
div.role_play_v2 {
opacity: 1;
filter: alpha(opacity=100);
padding-top : 0em;
padding-left : 0.3em;
padding-right : 0.3em;
padding-bottom : 0.3em;
margin-top : 1%;
/*margin-left : -1em;
width: 105%;*/
}
div.grammar_focus {
opacity: 1;
filter: alpha(opacity=100);
padding-top : 0em;
padding-left : 0.3em;
padding-right : 0.3em;
padding-bottom : 0.3em;
margin-top : 1%;
margin-left : -1em;
width: 105%;
} 
span.new_expressions {
display: inline-block;
padding-top: 0.8em;
padding-bottom: 0.5em;
}
/* doesn't work ? */
span.new_expressions_sbook_voc_box_left_column {
/* default - nothing to do - use for printing */
}
span.new_expressions_sbook_voc_box_left_column:hover {
color: white;
background: #5e5b5b/*black*/; 
}
.main img {
max-width: 90%
}
.page_contents img {
max-width: 90%
}
pre.lesson_plan img {
max-width: 90%
}
pre.homework a {
word-wrap: break-word;
text-overflow: ellipsis;
}
pre.lesson_plan a {
word-wrap: break-word;
text-overflow: ellipsis;
}
pre.lesson_plan {
word-wrap: break-word;
text-overflow: ellipsis;
}

/* xml_load_quarterly_test_on_line.inc
 * xml_load_quarterly_test_logs.inc */
div.show_key3 {
color: black;
text-shadow: none;
filter: none;
transform: rotateY(180deg);
backface-visibility: visible; 
display: inline-block; /* mandatory */
transition: 0.3s
}
div.show_key3:hover {
color: black;
filter: none;
padding: 0.2em;
background-color: lime;
-webkit-transform: rotateY(0deg);  /* Chrome, Safari, Opera */
transform: rotateY(0deg);
/*-webkit-backface-visibility: hidden;  /* Chrome, Safari, Opera */
/*backface-visibility: hidden; */
backface-visibility: visible;
transition: 0.3s
}

div.column_role_play_a {
width: 100%; /* 100% at media */
} 
div.column_role_play_b {
width: 100%;
margin-left: 0em;
} 

div.article_w_columns {
font-size: 110%; /*90% when printing - todo */
width: 95%;
} 
div.qa_article_w_columns {
font-size: 110%; /*90% when printing - todo */
width: 95%;
} 
div.sbook_article_w_columns {
width: 95%;
margin-bottom: 3em;
} 

/* sbook for mobile phone */
/* no zoom on mobile, only full width */
.zoom_1_2 {
/*padding: 3em; */
background-color: none;
transition: none;
width: 100%;
/*height: 20%;*/
margin: 0 auto;
font-size: 70%;
display: inline-block;
}
.zoom_1_2:hover {
width: 100%;
-ms-transform: none;
-webkit-transform: none;
transform: none;
}

span.sbook_exercise_no {
margin-left: 0%; /* 1%; */
}
div.sbook_warmer {
max-width : 100%;
}
div.sbook_video {
max-width : 100%;
}
div.sbook_introduction {
max-width : 100%;
}
div.sbook_listening {
max-width : 100%;
}
div.sbook_reading {
max-width : 100%;
}
/*div.sbook_vocab_focus { */
div.sbook_vocab {
max-width : 100%;
}
div.sbook_reading_for_detail {
max-width : 100%;
}
div.sbook_grammar {
max-width : 100%;
}
div.sbook_controlled_practice {
max-width : 100%;
}
/* 3 columns become 2 */
div.controlled_practice_column_a30-100 {
width: 45%;
}
div.controlled_practice_column_b30-100 {
width: 45%;
} 
div.controlled_practice_column_c30-100 {
width: 45%;
} 
div.sbook_practice {
max-width : 100%;
}
div.sbook_freer_practice {
max-width : 100%;
}
div.sbook_role_play_icon {
max-width : 100%;
}
div.sbook_column_role_play_a {
width : 90%;
}
div.sbook_column_role_play_b {
width : 90%;
margin-left : 0em; /* margin-left: 1.2em; */
}
div.sbook_communicating {
max-width : 100%;
}
div.sbook_debate {
max-width : 100%;
}
span.show_key_sbook {
color: black;
text-shadow: none;
filter: none;
transform: rotateY(180deg);
backface-visibility: visible; 
display: inline-block; /* mandatory */
transition: 0.3s
}
span.show_key_sbook:hover {
filter: none;
-webkit-transform: rotateY(0deg);  /* Chrome, Safari, Opera */
transform: rotateY(0deg);
/*-webkit-backface-visibility: hidden;  /* Chrome, Safari, Opera */
/*backface-visibility: hidden; */
backface-visibility: visible;
transition: 0.3s
}


} /* end  at media */

/****  login_area *****/
#login_area  {
font-size : 0.9em;
text-align : left;
padding-top : 0.3em;
padding-left : 0;
padding-right : 1.2em;
padding-bottom : 0.3em;
top : 5px;
}
/*  right_side_menu */
#right_side_menu {
position: fixed;
float : right;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
/*margin-left: 1200px; */
margin-left: 88%;
margin-top : -1.2em;
margin-right : 5px;
padding-top : 0.1em;
padding-left : 0.3em;
padding-right : 12em;
padding-bottom : 0.3em;
border : none;
/*max-height: 600px;  */
max-height: 99%; 
/* width: 125px;  */
width: 10%;
overflow-y: auto;
/*overflow-y: scroll; */
overflow-x: hidden;
}
#right_side_menu a:link {
/*font-size: 80%; */
display: inline-block;
/*line-height: 140%; */
padding-bottom: 0.4em;
}
#right_side_photo {
float : right;
margin-top : -2em;
margin-right : 15px;
padding-top : 0.1em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.3em;
width : 160px;
border : 1px solid #dddddd;
background-image : url(../pix/pg_background011.png);
} 
/* page_contents */
#page_contents {
position : relative;
margin-top : 1.7em;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-left : 9%;
margin-right : 12%;
padding-top : 1em;
padding-left : 0.7em;
padding-right : 0.7em;
padding-bottom : 0.3em;
/*background-image: linear-gradient(to bottom right, #efefef, #4b8b79);  */
background-attachment : fixed;
background-repeat : repeat;
}
#page_contents_photo {
position : relative;
margin-top : 0.1em;
margin-left : 150px;
margin-right : 200px;
padding-left : 0.7em;
padding-right : 0.7em;
}
/* main (div are in inc_cci/*.inc for all the page)
**************************************************/
#main {
  /* mandatory ie try display none to check whta is affected */
  /* old content layout in course_log*
  might be interfering w/ sidenav - hence to be deleted
text-align : justify;
padding-left : 0.4em;
padding-right : 0.4em; */
}
/* not used anymore? */                
#main_efb {
margin-top : 2em;
width : 710px;
text-align : justify;
margin-left : -25px;
}
#contact_sheet {
text-align : justify;
padding-left : 0.4em;
padding-right : 0.4em;
}
/* footer
**************************************************/
#footer  {
clear : both;
padding-top : 0.3em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.3em;
margin-top : 2em;
margin-left : 1em;
margin-right : 1em;
border : 1px solid #efdcde;
}
#footer_to_print {
display : none;
}
/* topic titles & references
**************************************************/
#logo {
display : none;
}
#ps_title_logo {
text-align : center;
font-size : 8px;
color : #aaaaaa;
}
/* is default w/ cci logo */
#topic_title {
/* margin-left : 220px; */
margin-left : 20%;
margin-right : 1%;
margin-top : 10px;
text-align : left;
font-size : 160%;
font-weight : bold;
font-family : sans-serif;
z-index: 1000; 
color : #3e5266; /*#344a60;/* #ff7b25; /*#3b0083; */
/*border-bottom : 2px solid #3b0083; */
} 
#topic_title2 {
text-align : left;
font-size : 150%;
font-weight : bold;
font-family : sans-serif;
color : #ff7b25; /*#3b0083; */
border-bottom : 2px solid #3b0083;
}   
 
#topic_reference  {
margin-left : 20%;
margin-top : 5px;
text-align : left;
font-size : 70%;
}
/****** current course contents ***********/
.ccc_toc {
    display: block;
    width: 100%;
    font-weight : bold; 
    /*background: #cdcdcd; */
}
.col-container_ccc_toc {
    width: 100%;
    display: table;;
}
.col_ccc01_toc {
float: left;
    display: table-cell;
    padding: 8px;
    width: 8%;
}
.col_ccc02_toc {
float: left;
    display: table-cell;
    padding: 8px;
    width: 18%;
    /*font-weight : bold;  */
}
.col_ccc03_toc {
float: left;
    display: table-cell;
    padding: 8px;
    width: 18%;
    /*font-style: italic;*/
}
.col_ccc04_toc {
float: left;
    display: table-cell;
    padding: 8px;
    width: 18%;
    /*font-size: 80%; */
}
.col_ccc05_toc {
float: left;
    display: table-cell;
    padding: 8px;
    width: 18%;
    /*font-size: 80%;*/
}
.ccc {
    width: 100%;
    /*border: solid;  debug only */
}
.col-container_ccc {
    width: 100%;
    display: table;
}
.col_ccc01 {
float: left;
    padding: 8px;
    width: 8%;
text-overflow: ellipsis;
}
.col_ccc02 {
float: left;
    padding: 8px;
    width: 18%;
text-overflow: ellipsis;
    /*font-weight : bold;  */
}
.col_ccc03 {
float: left;
    padding: 8px;
    width: 18%;
text-overflow: ellipsis;
    /*font-style: italic;  */
}
.col_ccc04 {
float: left;
    padding: 8px;
    /*background: #efefef;*/
    width: 18%;
text-overflow: ellipsis;
    /*font-size: 80%;*/
}
/* only for on-line display */
.col_ccc05 {
float: left;
    padding: 8px;
    width: 30%;
    font-size: 70%;
/*word-warp: break-word;
white-space: nowrap;*/
word-break: all;
overflow: hidden;
text-overflow: ellipsis;
/*text-overflow: clip; */
/*overflow-y: hidden; 
overflow-x: hidden;  */
}
/* only for printing */
.col_ccc06 {
display: none; 
}
.hr4ccc {
/*  display: none; */
}
/******  end of current course contents ***********/
/**** videos.inc ******/
div.flowplayer {
/*max-width: 53%; /*570px;  */
width : 53%;
}
div.flowplayer_description {
margin-left : 1%; 
width : 44%;  /* print 60*/
}

/*@media only screen and (max-width: 1024px) { */
@media only screen and (max-width: 768px /*768 1024*/) {
div.flowplayer {
/*max-width: 53%; /*570px;  */
width : 90%;
}
div.flowplayer_description {
margin-left : 1%; 
width : 90%;  /* print 60*/
}
}


/**** end of videos.inc ******/
#voc_area {
width : 610px;
font-size : 12px;
padding-top : 0.8em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.8em;
/*background-image : url(../pix/pg_background015.gif); */
border : 1px solid #3b0083;
}
#topic_activities {
width : 98%;
font-size : 12px;
padding-top : 0.8em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.8em;
border : 1px solid #3b0083;
/*background-image : url(../pix/pg_background014.gif); */
}
#topic_area {
width : 100%; /* was 630 610 700 */
font-size : 1em;
padding-top : 0.8em;
padding-left : 0.6em;
padding-right : 0em;
padding-bottom : 0.8em;
/*background-color: #efefef;  */
/*background-image : url(../pix/pg_background011_v3.png);  */
/*border : 1px solid #3b0083;*/
} 
#topic_area_ef {
width : 98%; /* was 630 610 700 */
font-size : 1em;
padding-top : 0.8em;
padding-left : 0.6em;
padding-right : 0em;
padding-bottom : 0.8em;
background-image: url(../pix/Bg-2015.jpg);  
background-attachment : fixed;
background-size: cover;
/*background-color: #efefef;  */
/*background-image : url(../pix/pg_background011_v3.png);  */
/*border : 1px solid #3b0083;*/
} 
#topic_area a:link, #topic_area a:active, #topic_area a:visited {
font-size : 1em;
color : #06363f;
text-decoration: underline;
}
/* doesn't work */
/* .dropdown-links a:link, .dropdown-links a:active, .dropdown-links a:visited, .dropdown-links a:hover { */
A:link.dropdown-links A:active.dropdown-links {
text-decoration: none;
}


/* inc/home.inc
**************************************************/
span.gallery_icon {
width : 110px; 
clear: both;
float : left;
margin-left : 0;
text-align : left;
padding-left : 0em;
padding-right : 0.8em;
padding-bottom : 0em;
}
span.gallery_icon_02 {
width : 150px;
float : left;
margin-left : 0;
text-align : justify;
padding-top : 0.3em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.3em;
}
span.gallery_description {
clear: both;
text-align : justify;
padding-top : 0.3em;
padding-right : 1.2em;
padding-bottom : 0.3em;
}
/******** CV layout **********/
#cv_area  {
font-size : 11px;
font-family : sans-serif;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.8em;
color : #000;
text-align : left;
}
#select_cv_left {
float : left;
margin-left : 0;
padding-top : 0;
padding-left : 0;
padding-right : 1.2em;
padding-bottom : 0;
width : 250px;
} 
#select_cv_right  {
float : right;
margin-left : 0;
padding-top : 0;
padding-left : 0;
padding-right : 1.2em;
padding-bottom : 0;
width : 250px;
}
#left_address {
float : left;
margin-left : 0;
padding-top : 0;
padding-left : 0;
padding-right : 1.2em;
padding-bottom : 0;
width : 40%; /*350px*/
}
/* ctn scb cci related
**************************************************/
#welcome_area {
font-size : 1em;
padding-top : 0.8em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.8em;
border : 1px solid #000;
background-color : #e3e7c3;
}
#local_links_area {
margin-top : 0.9em;
padding-top : 0.3em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.3em;
/* todo background-image: linear-gradient(to bottom right, #bdcebe, #3e4444); */
} 
/* use . for div */
.div_not_to_print  {
/* don't add anythg here */
}
/* use # for class */
#not_to_print_area0  {
/* don't add anythg here */
}
#not_to_print_area  {
margin-top : 0.9em;
padding-top : 0.3em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.3em;
/*background-image : url(../pix/pg_background014.gif); */
}
#not_to_print_area02  {
font-size: 0.7em;
color: #dfdfdf;
}
#not_to_print_area03  {
padding-top : 0.3em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.3em;
}
.div_print_only  {
/* border : 1px solid #efefef; */
    display: none;
}
#print_only_area  {
/* border : 1px solid #efefef; */
    display: none;
}
#print_scaled_down {
}
#topic_area_white {
font-size : 1em;
padding-top : 0.8em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.8em;
color : #000;
background-color : #fff;
}
#topic_reading {
font-size : 12px;
padding-top : 0.8em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.8em;
color : #000;
background-color : #efefef;
border : 1px solid #3b0083;
}
/*** 127_srp/clog_web_interface_old.php ***/
#wordlist_show {
font-size : 16px;
}
#wordlist_hide {
color : green;
font-size : 10px;
}
#esp_page_centre {
/****
position : absolute;
top : 300px;
left : 10px;
***/
text-align : center;
      }
#esp_footer {
/***
position : absolute;
top : 750px;
left : 10px;
***/
      }
#contact_sheet2 {
font-size : 12px;
padding-top : 0.8em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.8em;
}
/*** deprecated? *******/
  table.voc  {
display : table;
margin-left : 0;
font-size : 10px;
}
td.line {
width : 70px;
text-align : left;
line-height : 20px;
padding-left : 1.2em;
padding-right : 1.2em;
border-bottom : 1px solid #efefef;
}
/*** irregular verbs ***/
td.odd_line {
background-color : #fff;
}
td.key {
width : 70px;
line-height : 20px;
padding-left : 1.2em;
padding-right : 1.2em;
font-style : italic;
font-weight : bold;
}
td.cci_vocabulary {
width : 105px;
font-size : 10px;
line-height : 20px;
padding-left : 1.2em;
padding-right : 1.2em;
text-align : left;
} 
  table.contract  {
display : table;
font-size : 12px;
line-height : 20px;
padding-left : 1.2em;
padding-right : 1.2em;
text-align : left;
}
table.ptec {
display : table;
font-size : 1em;
border-collapse: collapse;
border: 1px solid;
}
table.lesson_plan {
display : table;
margin-left : 0;
}
#lesson_plan td {
width : 210px;
font-size : 10px;
line-height : 20px;
padding-left : 1.2em;
padding-right : 1.2em;
}
table.scb_offer {
font-size : 10px;
}
td.scb_offer {
font-size : 10px;
}
/* lindy hop footage
***************************************************/
span.comments_for_dancers {
color : #dfdfdf;
font-size : 9px;
} 
  #interview_tbc  {
color : orange;
font-size : 10px;
}
#footage {
color : green;
font-size : 10px;
}

/* heading tmp_topics --------------------------------------- */
/* deprecated?
#cci_scb_topic_title {
height : 35px;
font-size : 18px;
font-weight : bold;
font-family : sans-serif;
}
#cci_topic_reference {
text-align : right;
font-size : 9px;
color : #aaaaaa;
}
td.cci_href_online {
font-size : 10px;
width : 250px;
}
td.cci_href_offline {
font-size : 10px;
width : 250px;
}
tr.grey_bar {
font-size : 14px;
font-family : sans-serif;
background-color : #dedede;
} 
  td.cci_vocabulary  {
font-size : 10px;
}
table.cci_scb_topic_area {
width : 640px;
font-size : 12px;
}
table.vocabulary {
font-size : 11px;
}
td.vocabulary {
width : 480px;
}
td.empty_margin {
width : 75px;
}
td.sentences {
font-size : 12px;
width : 550px;
}
*/
dd {
display : none;
}
/***************** rem2html **********/
/* todo XXXXXXXXXX */
span.cal_msg_zoom {
background-color : #cyan;
}
.pal-cal {
width : 630px;
margin-left : auto;
margin-right : auto;
margin-bottom : 15px;
border : 2px solid black;
} 
  .pal-dayname  {
color : #3b0083;
font-size : 80%;
width : 100px;
}
.pal-month {
background-color : #818599;
color : #3b0083;
font-weight : bold;
font-size : 100%;
}
.pal-today, .pal-mon, .pal-tue, .pal-wed, .pal-thu, .pal-fri, .pal-sat, .pal-sun {
border : 1px solid black;
height : 100px;
background-color : #acacab;
}
.pal-sat, .pal-sun {
background-color : #bcbcab;
}
.pal-today {
background-color : #acacab;
}
/* green colour for ps.cal */
.pal-event-black {
font-size : 10px;
font-weight : bold;
color : #229911;
}
.pal-event-red {
font-size : 10px;
font-weight : bold;
color : #ae6127;
} 
  .pal-event-green  {
font-size : 10px;
font-weight : bold;
color : #115217;
}
.pal-event-yellow {
font-size : 10px;
font-weight : bold;
color : #ffff99;
}
.pal-event-blue {
font-size : 10px;
font-weight : bold;
color : #123899;
}
/* black colour for personal.cal */
.pal-event-magenta {
font-size : 10px;
font-weight : bold;
color : #a1a1a1a1; /*3b0083;*/
}
.pal-event-cyan {
font-size : 10px;
font-weight : bold;
color : #115217;
}
.pal-event-white {
font-size : 10px;
font-weight : bold;
color : #efefef;
} 
/*** start lp - lesson plans ******/
#lp_area {
width : 610px; /* was 630 */
font-size : 12px;
padding-top : 0.8em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.8em;
background-color : #3b0083; 
/* background-color : #a3a3a3; 
border : 1px solid #3b0083; */
} 
/* heading only for TB display */
#lp_heading_box {
width : 100%;
/* background-color : #cdcdcd;
border : 1px solid black; */
}
#lp_heading_left {
width : 10%;
float : left;
margin-left : 0;
font-size : 9px;
font-weight : bold;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
padding-top : 0.3em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.3em;
}
#lp_sub_heading_box {
width : 100%;
border : 1px solid black; 
/* background-color : #cdcdcd; */
}
#lp_heading_middle {
float : left; 
width : 35%;
font-size : 9px;
font-weight : bold;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
text-align : justify;
padding-top : 0.3em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.3em;
}
#lp_heading_right {
width : 98%;
font-size : 9px;
font-weight : bold;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
text-align : justify;
padding-top : 0.3em;
padding-left : 1.2em; 
padding-right : 1.2em;
padding-bottom : 0.3em;
}
#lp_box {
width : 100%;
background-color : #3b0083;
/* border : 1px solid black; */
clear: both;
}
#lp_left {
width : 10%;
float : left;
margin-left : 0;
font-size : 8px;
font-weight : bold;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
padding-top : 0.3em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.3em;
}
#lp_sub_box {
width : 100%;
background-color : #3b0083;
/* clear: right; */
}
/* middle & right column for TB display */
pre.lp_middle {
white-space: pre-wrap;
float : left; 
width : 35%;
font-size : 10px;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
text-align : justify;
padding-top : 0.3em;
/*padding-left : 5%;  */
padding-right : 1.2em;
padding-bottom : 0.3em;
}
#lp_right {
width : 45%;
font-size : 12px;
font-weight : italic;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
text-align : justify;
padding-top : 0.3em;
padding-left : 50%;
padding-right : 1.2em;
padding-bottom : 0.3em;
}
/* wb for both TB & SB display */
pre.lp_middle_wb {
white-space: pre-wrap;
float : left; 
width : 80%;
font-size : 16px;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
background-color : #cdcdcd;
text-align : justify;
padding-top : 0.3em;
padding-left : 1.2em; 
padding-right : 1.2em;
padding-bottom : 0.3em;
}
/* right column for SB display i.e w/o TB */
#lp_middle_sb {
float : left; 
width : 80%;
font-size : 16px;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
background-color : #3b0083;
text-align : justify;
padding-top : 0.3em;
padding-left : 1.2em; 
padding-right : 1.2em;
padding-bottom : 0.3em;
}
/**** start vae ********/
#main_vae {
/* background-color : #bcbcbc; */
text-align : justify;
}
span.page_title_vae {
font-size : 200%;
font-style : bold;
}
#left_column_vae {
width : 25%;
float : left;
margin-left : 0;
font-size : 14px;
text-align : justify;
padding-top : 0.3em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.3em;
}
span.outils_vae {
font-size : 70%;
}
#right_column_vae_heading {
background-color : #cdcdcd;
border : 1px solid black;
font-size : 12px;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
text-align : justify;
padding-top : 0.3em;
padding-left : 35%; 
padding-right : 1.2em;
padding-bottom : 0.3em;
}
#right_column_vae {
background-color : #3b0083;
border : 1px solid black;
font-size : 12px;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
text-align : justify;
padding-top : 0.3em;
padding-left : 35%; 
padding-right : 1.2em;
padding-bottom : 0.3em;
}
#left_column_acquis_heading_vae {
width : 17%;
float : left;
/*background-color : #3b0083;
border : 1px solid black; */
margin-left : 0;
font-size : 14px;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
padding-top : 0.3em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.3em;
}
#middle_column_acquis_heading_vae {
width : 35%;
float : left;
/*background-color : #3b0083;
border : 1px solid black; */
font-size : 14px;
text-align : left;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
padding-top : 0.3em;
padding-left : 1%; 
padding-right : 1.2em;
padding-bottom : 0.3em;
}
#right_column_acquis_heading_vae {
background-color : #cdcdcd;
border : 1px solid black;
font-size : 14px;
text-align : left;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
padding-top : 0.3em;
padding-left : 20%; 
padding-right : 1.2em;
padding-bottom : 0.3em;
}

#left_column_acquis_vae {
width : 17%;
float : left;
/*background-color : #3b0083;
border : 1px solid black; */
margin-left : 0;
font-size : 12px;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
padding-top : 0.3em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.3em;
}
#middle_column_acquis_vae {
width : 35%;
float : left;
/*background-color : #3b0083;
border : 1px solid black; */
font-size : 12px;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
text-align : left;
/*text-align : justify;*/
padding-top : 0.3em;
padding-left : 1%; 
padding-right : 1.2em;
padding-bottom : 0.3em;
}
#right_column_acquis_vae {
background-color : #3b0083;
border : 1px solid black;
font-size : 12px;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
text-align : left;
padding-top : 0.3em;
padding-left : 60%; 
padding-right : 1.2em;
padding-bottom : 0.3em;
}
#vae_header {
  /***
position : absolute;
top : 20px;
left : 10px;
***/
      }
#vae_page_centre {
/****
position : absolute;
top : 300px;
left : 10px;
***/
text-align : center;
      }
#vae_footer {
/***
position : absolute;
top : 750px;
left : 10px;
***/
      }
#left_div {
width : 45%;
float : left;
margin-left : 0;
font-size : 12px;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
padding-top : 0.3em;
padding-left : 1.2em;
padding-right : 1.2em;
padding-bottom : 0.3em;
}
#right_div {
border : 1px solid black;
font-size : 12px;
font-family : 'Tahoma, Helvetica, Verdana, Arial, sans-serif';
padding-top : 0.3em;
padding-left : 50%; 
padding-right : 1.2em;
padding-bottom : 0.3em;
}
A:link.outils_vae {
color : #ababab;
background : none;
font-size : 10px;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
A:active.outils_vae {
color : #ababab;
background : none;
font-size : 10px;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
A:visited.outils_vae  {
color : #ababab;
background : none;
font-size : 10px;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
} 
  A:hover.outils_vae {
color : red;
background : none;
font-size : 10px;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
A:link.right_column_vae {
color : #ababab;
background : none;
font-size : 12px;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
A:active.right_column_vae {
color : #ababab;
background : none;
font-size : 12px;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
A:visited.right_column_vae  {
color : #ababab;
background : none;
font-size : 12px;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
} 
  A:hover.right_column_vae {
color : red;
background : none;
font-size : 12px;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
/**** end vae ********/
/* rem2html */
table.caltable {
border-collapse: collapse;
border: 1px solid;
padding: 3px 7px 2px 7px;
font-size : 10px;
background-color : #ffffff;
}
#nada {
/*background-color : #a9e890; */
}
div.numeral {
font-size : 14px;
text-align : center;
background-color : #90a9e8;
}
div.innercell {
/* background-color : #d00606; */
}
div.bottomcell {
/* increases space between span.msg blocks */
font-size : 20px;
/* text-align : center; */
/* background-color : #07a716; 
background-color : #a9e890; */
}
span.msg{
font-size : 12px;
color : #000000;
display : block;
/* padding-top : 1.5em;
padding-left : 0.5em;
padding-right : 0.5em;
padding-bottom : 1.5em; */
background-color : #bcbcbc;
}
/* end rem2html */
#hide200 {
display : block;
position : absolute;
z-index : 100;
color : black;
background-image : url(../pix/pg_background02.jpg);
border : 1px solid black;
width : 250px;
right : 50px;
top : 300px;
text-align : justify;
} 
  #hide201  {
display : block;
position : absolute;
z-index : 100;
color : black;
background-image : url(../pix/pg_background02.jpg);
border : 1px solid black;
width : 250px;
right : 50px;
top : 300px;
text-align : justify;
}
#hide202 {
display : block;
position : absolute;
z-index : 100;
color : black;
background-image : url(../pix/pg_background02.jpg);
border : 1px solid black;
width : 250px;
right : 50px;
top : 300px;
text-align : justify;
}
#hide203 {
display : block;
position : absolute;
z-index : 100;
color : black;
background-image : url(../pix/pg_background02.jpg);
border : 1px solid black;
width : 250px;
right : 50px;
top : 300px;
text-align : justify;
}