/* color scheme: top (220,71%,77%)=3967c4; button (220;52%,91%)=7098e8; block (220,23%,93%)=b7c9ed */

 /*
  * Updated stylesheet for Kevin Leyton‑Brown’s website.
  *
  * This version introduces a cooler, more modern colour palette that
  * harmonises better with the dominant tones in the site’s portrait
  * image.  Colour values have been refactored into CSS variables to
  * simplify future adjustments and ensure consistency throughout the
  * design.  Only colour values have changed; the layout, typography
  * and overall structure remain identical to the original file.
  */

 /* Define a palette of reusable colour variables.  These values were
    selected by extracting prominent shades from the home page’s
    portrait and verifying adequate contrast ratios for accessibility. */
 :root {
     --primary-dark: #3B5A82; /* deep indigo for headers and menu backgrounds */
     --primary:      #4D6FA9; /* mid-tone blue for buttons and section titles */
     --secondary:    #DDE6F3; /* pale blue-grey for content blocks */
     --border-light: #C5D4E8; /* light border colour for badges and lists */
     --text-dark:    #2F4156; /* dark slate for high‑contrast text */
 }

 /* smallest devices */
         .main{
                 width: 100%;
                 padding-left:8px;  
                 padding-right:8px;
         }
         .header{
                 width: 100%; 
                 margin-top:0px;
         }
         .picture-right{
                 width:min(100%, 435px);  /* 490px is width of photo; update it otherwise */
         }
         .address-left{
                 margin-top:10px;
                 margin-left:12px;
                 width:100%;
             float: left;
         }
         .fullNobullet ul {
                 padding-left: 10px;
                 padding-right: 10px;
         }
         .info {
                 padding-left: 15px;
         }
         .newscontainer{
                 float:none;   
                 width: 100%;
         }
         .twitter-timeline-container {
                 float:none;
                 width:100%;
                 height:500px;
                 overflow:auto;
         }
         #news-and-twitter {
                 margin-top: 35px;
         }
         .button-container{
                 display:flex;
                 flex-flow:column;
                 justify-content: flex-start;
                 align-items:stretch;
                 margin-left:12px;
         }
 .coursenumber {display:none}


 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) 
    The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

 @media only screen and (max-width: 760px) {
   .menu a:not(:first-child) {display: none;}
         /*.menu .menubutton {display: none;}*/
         .menu a.menuselected {display:block}
         .menu a.icon {
     float: right;
     display: block;
   }
   .menu.responsive {position: relative;}
   .menu.responsive a.icon {
     position: absolute;
     right: 0;
     top: 0;
   }
   .menu.responsive a {
     float: none;
     display: block;
     text-align: left;
   }
         .blankblockshow{display: none}
         .menu a.menufirst {
                 /*background-color: #ebd4ae; 
                 color: #585858;*/
         }
 }

 @media only screen and (min-width: 760px) {
         .picture-right{
            width: min(calc(100% - 290px), 435px);
            float: right;                
         }
         .address-left{
  /*              margin-top:calc(( (23 * (100vw - 760px)) / (880px - 760px) ) + 10px); */
                 margin-top:120px;
                 width:280px;
             float: left;
                 padding-left:.5em;
                 margin-left:0px;
         }
         .blankblockshow{display: block}
  /*      .blankblockshow{display: none} */
         .info { padding-left: 35px; }
         .info .info {padding-left: 20px}
         .menu a.menufirst {
                 /*background-color: #6f98e8;
                 color: white; */
                 background-color: white;
                 color: var(--primary-dark);
         }
         .newscontainer{
                 float:left;   
                 /*width: 49%; // twitter is dead */
                 width:100%;
         }
         .newsbox{
                 /*height:326px;*/
         }
         .twitter-timeline-container {
                 float:right; 
                 width:49%;
                 height:326px;
                 overflow: auto;
         }
         #news-and-twitter {
                 margin-top: 15px;
         }
         .button-container{
                 display:flex;
                 flex-flow:row nowrap;
                 justify-content: space-between;
                 gap: 10px;
                 margin-left:0px;
         }       
         .coursenumber{display:inherit}
         .picture-body {
                 width: 88%;
         }
 }
 @media only screen and (min-width: 820px) {
         .address-left{
                 margin-top:120px;
         }
         .picture-right{
                 padding-top:14px;
         }
         .main{
                    width: 820px; /* was 820 */
                    padding-left:24px;  
                    padding-right:24px;
         }
         .header{
                         width: 820px; /* was 820 */
                         margin-top:12px;
         }
         .menu{
                         margin-left: 12px;
         }
         .fullNobullet ul {
                 padding-left: 1em;
                 padding-right: .88em;
         }
 }

 @media only screen and (min-width: 1565px) { /* my laptop is 1266 wide at zoom 100%. 1407 at zoom 90% */
         .newscontainer{float:none;   width: 100%;}
         .twitter-timeline-container {
                 position:absolute;
                 top:18px;
                 left:850px;
                 width:285px;
                 padding-right:22px;
                 height:1662px;
                 overflow: auto;
         }
         .newsbox{
                 height:auto;
         }
         #news-and-twitter {
                 margin-top: 15px;
         }
 }

 html {overflow-y: scroll;}  /* prevents v-scroll bar from disappearing on short pages, which causes horizontal shift to the column */
 @font-face{
         font-family: 'Whitney';
         src: local('Whitney');
 }
 body { 
         /*font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
         font-family:  Cambria, Georgia; /* national post uses Georgia; Times uses Garamond */
         /*font-family: "Lato Extended","Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
         font-family:  Cambria, Georgia; /* national post uses Georgia; Times uses Garamond */
        /* Prefer the Whitney family when available.  As a free, open‑source
         * alternative when Whitney isn’t installed, fall back to Source Sans
         * Pro; this humanist sans serif shares balanced proportions and open
         * counters, making it a suitable substitute.  Open Sans remains
         * as a tertiary fallback. */
        font-family: 'Whitney SSm A','Whitney SSm B','Source Sans Pro','Open Sans',Arial,sans-serif;
     font-weight: 200;
     -webkit-font-smoothing: antialiased;
         font-smooth:auto;
         margin:0;
         padding:0;
         text-align:center;
         background:#ecf1f9;
 }
 a:visited    { 
        /* use a mid‑tone link colour so hyperlinks stand out against body text */
        color: var(--primary);
     text-decoration:underline;
     text-decoration:none;
 }
 a:link  {
         /*color: #2e5299; */
        /* match hyperlink colour to the mid‑tone palette */
        color: var(--primary);
     text-decoration:underline;
     text-decoration:none;
 }
 a:link:hover  {
 /*      color: #2e5299; */
         text-decoration:underline;
 }
 a:visited:hover  {
 /*      color: #2e5299; */
         text-decoration:underline;
 }

 .menu {
         background-color: var(--primary-dark); /* previously: #6f98e8 */
         overflow: hidden;
 /*      margin-left: 1px;*/
 }

 .menu a {
         float: left;
         display: block;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
         font-size: 16px;
         color: white;
         background-color: var(--primary-dark);
         font-weight: bold;
         /*font-family: Cambria, Georgia;*/
 }

 a.menuselected {
         /* Selected menu items should have a white background just like the original design */
         background-color: white;
         color: var(--primary-dark);
 }

 a.menufirst {
         /* defined in the media queries above */
 }

 a.menubutton,a.menubutton:visited {
         color: white;
 }
 a.menuselected:hover, a.menufirst:hover {
         text-decoration: none;
 }

 a.menubutton:hover{
         text-decoration: none;
 /*      background-color:#B7C9ED;*/
        /* Use a darker mid‑tone shade for the menu button hover state.  This
         * hue sits between the header colour and the pale block colour and
         * provides enough contrast for white text to remain legible. */
        /* Adjust the hover colour by varying brightness and saturation but keeping
         * the same hue as the menu bar.  This shade (#446ca0) is a lighter,
         * desaturated version of the base menu colour, providing contrast for
         * white text without shifting the hue. */
        background-color: #446CA0;
 /*      color: #3967c4;*/
 }

 /* Hide the link that should open and close the topnav on small screens */
 .menu .icon {
   display: none;
 }

 /* https://fontawesome.io */
 @font-face {
   font-family: 'FontAwesome';
   src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
   src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 .fa {
   display: inline-block;
   font: normal normal normal 14px/1 FontAwesome;
   font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 .fa-bars:before {
   content: "\f0c9";
 }

 p {
         margin:0;
         padding:0;
 }

 /* note: padding is added to length measurements (at least in browsers); margins aren't */

 .main {  /* main frame that contains everything else. Make sure the footer div is inside main but not full so that the white box goes all the way down to the bottom of page */
    box-sizing: border-box;
         background:#ffffff;
    text-align:left;
    padding-top:10px;
    padding-bottom:0px;
    margin-top:0px;
    margin-bottom:20px;
    margin-left:auto;
    margin-right:auto;
    border-bottom:1px solid #c0c0c0;
    border-left:1px solid #c0c0c0;
    border-right:1px solid #c0c0c0;
    font-size:12pt;
 }
 .header {
    box-sizing: border-box;
    height: auto;
    background: var(--primary-dark);
    padding-left:0px;
    padding-right:0px;
    padding-top: 0px;
    padding-bottom: 0px; 
    margin-bottom: 0px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    font-size:12pt;
 }
 .topblock {
         display:none;
    background: var(--primary-dark);
    width: 100%;
    height: 1.3em;
    font-size: 14pt;
    padding-top:5px;
    padding-bottom:9px;
    padding-left:0px;
    padding-right:0px;
    margin:0;
    color:#FFFFFF;
    font-weight: bold;
    font-family:  Cambria, Georgia;
 }
 .address-left {
    box-sizing: border-box;
    position: relative;
    /*width: 254px;*/
    margin-bottom:0px;
    background:#ffffff;
    z-index:2;
 }
 .addressFirstLine{
    font-size: 14pt;     
 }
 .picture-right {
    box-sizing: border-box;
    /*width:501px;*/
    margin-top:0px;
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    background:#ffffff;
    padding-left:0px;
    padding-bottom: 0px; 
    padding-right:0px;
 }
 .picture-body {
         margin-left:auto;
 }
 .picture-caption {
         padding-top:-10pt;
         color:silver;
         font-size:6pt;
         font-style:italic;
         float:right;
 }
 .footer { /* the page needs to end with this, as <p class="footer"> */
     box-sizing: border-box;
         position: relative;
     width: 100%;
     color:#808080;
     text-align:center;
     font-size:7pt;
     font-style:italic;  
     padding-top:10px;
     padding-bottom:0px;
     margin-bottom:0px;
         line-height: 400%;
 }
 .full { /* text inside the main frame. */
    box-sizing: border-box;
         position: relative;
    float: left;
    width: 100%;
    padding-top:12px;
    padding-bottom:0px;
    padding-left:0;
    padding-right:0;
    margin-top:0px;
    margin-bottom:0px;
    margin-left:0;
    margin-right:0;
    z-index:1;
 }
 .full-morespace { /* text inside the main frame. */
    box-sizing: border-box;
         position: relative;
    float: left;
    width: 100%;
         line-height: 150%;
    padding-top:16px;
    padding-bottom:0px;
    padding-left:0;
    padding-right:0;
    margin-top:0px;
    margin-bottom:0px;
    margin-left:0;
    margin-right:0;
    z-index:1;
 }
 .morespace{
         line-height:150%;
 }
 .fullNobullet { /* text inside the main frame. */
    box-sizing: border-box;
         position: relative;
    float: left;
    width: 100%;
    padding-top:12px;
    padding-bottom:12px;
    padding-left:0;
    padding-right:0;
    margin-top:0px;
    margin-bottom:0px;
    margin-left:0;
    margin-right:0;
    z-index:1;
 }
 .title {  /* inside Full */
    box-sizing: border-box;
         font-size:18pt;
    font-weight:bold;
    width:calc(100% - 10px);
    padding-bottom:.45em;
 }
 .subtitle {
    font-size:14pt;
    font-weight:bold;
    width:calc(100% - 10px);
 }

 .block {
     box-sizing: border-box;
         /* Darker panel colour to match the original block lightness */
         background: #C5D4E8;
     /*width: 754px; */        /* the negative margins make this 20 bigger than it would be otherwise */
     width: calc(100%+20px);   /* the negative margins make this 20 bigger than it would be otherwise */
         /*height: 35px;*/
     padding-top:8px;
     padding-bottom:8px;
     padding-left:18px;
     padding-right:18px;
     margin:0;
     margin-bottom:10px;
     margin-left:-10px;
     margin-right:-10px;
     color: var(--text-dark);
     font-weight:bold;
     font-size:12pt;
     clear:both;
 }
 .block-collapsible {
         box-sizing: border-box;
         /* Darker panel colour to match the original block lightness */
         background: #C5D4E8;
         color: var(--text-dark);
         width: calc(100%+20px);   /* the negative margins make this 20 bigger than it would be otherwise */
         cursor: pointer;
         border: none;
         text-align: left;
         outline: none;
         /*width: 754px; */        /* the negative margins make this 20 bigger than it would be otherwise */
         /*height: 35px;*/
         padding-top:8px;
         padding-bottom:8px;
         padding-left:18px;
         padding-right:18px;
         margin:15px;
         margin-bottom:10px;
         margin-left:-10px;
         margin-right:-10px;
         font-weight:bold;
         font-size:12pt;
         clear:both;
 }
 .block-collapsible:hover {
   /* Slightly darker hover shade for collapsible blocks */
   background-color: #D8E2F0;
 }
 .block-collapsible:after {
   content: '+'; /* Unicode character for "plus" sign (+) */
   font-size: 150%;
   float: right;
   margin-top:-4.5px;
   margin-left: 5px;
 }

 .active:after {
   content: '\2013'; /* Unicode character for "minus" sign (-) */
   font-size: 150%;
   float: right;
   margin-top:-4.5px;
   margin-left: 5px;
 }
 .collapsible-content{
         display:none;
         overflow:hidden;
         margin-bottom:12px;
 }

 .info {  /* for teaching info box */
 }
 .info .info a {
         font-size: small;
 }
 .miniblock {
 /*      background:#dfe5f2;*/
         border-style: solid;
         border-width: thin;
     border-color: var(--border-light); /*hsla(202,60%,90%,1.00);*/
     /* Use a very light shade for miniblock buttons to match the original lightness. */
     background-color: #F7F9FC;
         color: var(--text-dark);
         font-size:10pt;
         padding-top:2px;
         padding-bottom:2px;
         padding-left:8px;
         padding-right:8px;
         text-align:center;
         float: left;
         border-radius: 2em;
         margin-right:3px;
         margin-bottom:3px;
 }
 .miniblock:hover {
    background: var(--secondary);
    background-color: #E6EDF7; /*hsla(202,60%,90%,1.00);*/
    cursor: pointer;
 }
 .miniblock a:visited {
    color: var(--text-dark);
    text-decoration:none;
 }
 .miniblock a:link {
    color: var(--text-dark);
    text-decoration:none;
 }
 .miniblock a:hover  {
    color:#383838;
         background-color: #E6EDF7; /*hsla(202,60%,90%,1.00);*/
    text-decoration:none;
 }
 .twohi {
         padding-top:10px;
         padding-bottom:9px;
 }
 .shadedblock {
    /* Selected miniblock buttons use a warm accent colour outside the regular palette */
    background: #FFFFB2;
    color: var(--text-dark);
    font-size:10pt;
    padding-top:2px;
    padding-bottom:2px;
    text-align:center;
         float:left;     
         border-style: solid;
         border-width: thin;
     border-color: var(--border-light); /*hsla(202,60%,90%,1.00);*/
         padding-left:8px;
         padding-right:8px;
         border-radius: 2em;
         margin-right:3px;
         margin-bottom:3px;

 }
 .shadedblock:hover {
    /* Use a darker accent colour on hover for selected miniblock buttons */
    background: #FFFF8C;
    cursor: pointer;
 }
 .shadedblock a:visited {
    color: var(--text-dark);
    text-decoration:none;
 }
 .shadedblock a:link {
    color: var(--text-dark);
    text-decoration:none;
 }
 .shadedblock a:hover {
    color:#383838;
    text-decoration:none;
 }
 .blankblock {
    font-size:10pt;
    padding-top:2px;
    padding-bottom:2px;
    padding-left:5px;
    padding-right:5px;
         float:left;
 }
 .blankblockshow {
    font-size:10pt;
    padding-top:2px;
    padding-bottom:2px;
    padding-left:5px;
    padding-right:5px;
         float:left;
 }
 .pubimg {
         border:0;
         width:1em;
         height:1em;
         margin-top:2px;
         margin-bottom:2px;
         margin-right:4px;
         vertical-align:bottom;
 }
 .fullNobullet ul {
         /*width:740px;*/
         box-sizing: border-box;
         width:100%;
         list-style-type: none;
         margin:0;
         padding:0;
         margin-bottom:6pt;
 }
 .fullNobullet ul li {
         /*width:740px;*/
         /*box-sizing: border-box;*/
         /*width:100%;*/
         width:100%;
         margin-bottom: 18pt;
 }
 .fullNobullet ul ul {
         margin-top: 0em;
         margin-bottom: 0em;
         margin-left: .5em;
         margin-right: 0em;
         padding-left: .5em;
         padding-right: 2.9em;
         /*width:665px;*/
         box-sizing: border-box;
         width:100%;
 }
 .fullNobullet ul ul li {
         margin-bottom:0pt;
         /*width:665px;*/
         box-sizing: border-box;
         width:100%;
         background-image:url(images/arrow.png);
         background-position: 0 .25em;
         background-repeat:no-repeat;
         padding:0 0 0 18px;
 }
 .fullNobullet ul ul li img {
         border:0;
         width:1em;
         height:1em;
         margin-top:2px;
         margin-bottom:2px;
         margin-right:4px;
         vertical-align:bottom;
 }
 .fullNobullet ul ul ul {
         margin-top: 0em;
         margin-bottom: 0em;
         margin-left: .5em;
         margin-right: 0em;
         padding-left: .5em;
         padding-right: 2.9em;
         /*width:665px;*/
         box-sizing: border-box;
         width:100%;
 }
 .full ul {
         margin-left:1em;   /* otherwise it messes up by inheriting these values from the definition of full */
         padding-left:1em;
         padding-right:49px;
         /*width:705px;*/
         box-sizing: border-box;
         width:100%;
 }
 .full ul ul {
         /*width:665px;*/
         box-sizing: border-box;
         padding-right:24px;
         width:100%;
 }
 .full ul ul ul {
         /*width:625px;*/
         box-sizing: border-box;
         width:100%;
         padding-right:24px;
 }

 .listSpacer {
         /*width:770px;*/
         width:100%;
         margin:0;
         padding:0;
         height:1px;
         margin-top:-8px;
         clear:both;
 }

 .twitter-timeline-container
 {
         /* all in media queries */
 }
 .newscontainer {
    padding-top:6px;
    padding-bottom:12px;
  /*   padding-left:10px;
    padding-right:10px; */
    margin-top:0px;
    margin-bottom:12px;
    margin-left:0;
    margin-right:0;
    z-index:1;
 }

 .newsbox { /* news box */
    padding-top:0px;
    padding-bottom:0px;
    padding-left:0;
    padding-right:0;
    margin-top:0px;
    margin-bottom:-6px; 
    margin-left:0;
    margin-right:0;
         border-radius:0.5em;
    z-index:2;
    background-color:#ecf1f9;
    border:1px solid #c0c0c0;
    font-size:10pt;
 }
 .newstitle
 {
        /* Make the news title background as dark as the block panels.  Using
         * the same pale‑medium blue as the blocks ensures the title stands
         * out without being too bright. */
        background-color: var(--border-light);
         font-size: 10pt;
         font-weight:bold;
         font-style:italic;
         border-top-left-radius: .5em;
         border-top-right-radius: .5em;
         border-bottom-left-radius: 0px;
         border-bottom-right-radius: 0px;
         margin-left:-1px;
         margin-top:-1px;
         margin-right:-1px;
         z-index:-1;
         padding:2px;
         border:1px solid #c0c0c0;
         border-bottom-style:none;
         padding-left:13.5px;
        /* Darken the text on the lighter news title background for
         * readability. */
        color: var(--primary-dark);
 }
 .newsbox ul {
         /*width:740px;*/
         box-sizing: border-box;
         width:100%;
         list-style-type: none;
         margin:0;
         padding:0;
         padding-left: 1em;
         padding-right: 1em;
         margin-bottom:0pt;
 }
 .newsbox ul li {
         /*width:740px;*/
         box-sizing: border-box;
         width:100%;
         padding-top: 4pt;
         padding-bottom: 4pt;
 }
 .newsbox ul ul {
         margin-top: 0em;
         margin-bottom: 0em;
         margin-left: .5em;
         margin-right: 0em;
         padding-left: .5em;
         padding-top:3pt;
         /*width:710px;*/
         box-sizing: border-box;
         width:100%;     
 }
 .newsbox ul ul li {
         margin-bottom:0pt;
         /*width:710px;*/
         box-sizing: border-box;
         width:100%;     
         background-image:url(images/arrow-trans.gif);
         background-position: 0 .25em;
         background-repeat:no-repeat;
         padding:0 0 0 18px;
         z-index:3;
 }
 .newsbox ul ul ul {
         margin-top: 0em;
         margin-bottom: 0em;
         margin-left: .5em;
         padding-left: .5em;
         /*width:670px;*/
         box-sizing: border-box;
         width:100%;
 }
 .course-details {
         margin-left: 2em;
         margin-top: -.4em;
         margin-bottom:.4em;
 }
 .books-left{
         float:left;
         width:calc(100% - 120px);
 }
 .books-right{
         float:right;
         width:115px;
 }
 .borderlesstbl {
         border-collapse: collapse;
         border-spacing: 0;
         border-width: 0;
         background-color: #FFFFFF;
         table-layout: fixed;
         vertical-align: top;
 }
 .borderlesstbl td {
         padding: 0px;
         padding-top:2px;
         padding-bottom:5px;
         padding-right:3px;
         vertical-align: top;
 }
 .borderlesstbl td:first-child {
         padding-left: 10px;
         vertical-align: top;
 }
 .borderlesstbl td:last-child {
         padding-right: 5px;
         vertical-align: top;
 }
 .borderlesstbl tr{
         vertical-align: top;
 }

 .fancytbl {
         border-collapse: collapse;
         border-spacing: 0;
         border-width: 0;
         background-color: #FFFFFF;
         table-layout: fixed;
         vertical-align: top;
 }
 .fancytbl td {
         padding: 0px;
         padding-top:2px;
         padding-bottom:1px;
         vertical-align: top;
 }
 .fancytbl td:first-child {
         padding-left: 10px;
 }
 .fancytbl td:last-child {
         padding-right: 5px;
 }
 .fancytbl tr:first-child {
         color: black;
         font-weight: 700;
         font-style: normal;
         border-left-style: none;
         border-right-style: none;
         border-top: 1.5pt solid windowtext;
         border-bottom: 1.0pt solid windowtext;
         padding-left: 1px;
         padding-right: 1px;
         padding-top: 2px;
         height: 22px;
 }
 .fancytbl tr{
         vertical-align: top;
 }
 .shadedrow{
         background-color: #ECF1F9;
 }
 .emphrow{
         font-style:italic;
         color:red;
 }
 .fancytbl tr:last-child {
         vertical-align: bottom;
         border-left-style: none;
         border-right-style: none;
         border-top-style: none;
         border-bottom: 1.5pt solid windowtext;
         padding-left: 1px;
         padding-right: 1px;
         padding-top: 1px;
         padding-bottom: 5px;
 }
 .centering {
         text-align: center;
 }
 .smallfont {
         font-size: small;
 }
 .tinyfont {
         font-size: x-small;
 }
 .courses {
         border:0;
         table-layout: fixed;
 }
 .courses tr {
         line-height: 20px;
 }
 .courses tr td:first-child {
         font-weight: bold;
         text-align:right;
         white-space: nowrap;
         vertical-align: top;
         padding-right: 8px;
 }
 .coursenumber {
         font-size: 65%;
         opacity: 0.6;
         font-weight:100;
 }
 .coursenumber::before {content:"("}
 .coursenumber::after {content:")"}
 a.ellipse{
         flex-shrink: 1;
         height: 1.3em;
     width: 165px;
         max-width: 250px;
     border-radius: 2em;
         border-width:thin;
         padding-top:.15em;
         padding-left:0.6em;
         padding-bottom:.2em;
         margin-top:.65em;
         text-decoration:none;
         cursor:pointer;
 }
 /*
 ellipse:first-child {
         margin-left:-.4em;
 }
 ellipse:last-of-type {
         margin-right:0px;
 }
 */
 a.ellipse:hover{ text-decoration:none; }

 a.ellipse-red{
         border-color: #F3DBD9; /* border-color: hsla(5,50%,90%,1.00); */
         border-style: solid;
         background-color: #FDF8F8; /*background-color: hsla(5,50%,90%,0.20);*/
 }
 a.ellipse-red:hover{
         background-color: #F3DBD9; /* background-color: hsla(5,50%,90%,1.00);*/
 }
 a.ellipse-green{
     border-color:#D9F3D9; /* hsla(120,50%,90%,1.00); */
         border-style: solid;
     background-color: #F8FDF8; /*hsla(120,50%,90%,0.20);*/
 }
 a.ellipse-green:hover{
     background-color: #D9F3D9; /*hsla(120,50%,90%,1.00);*/
 }
 a.ellipse-blue{
     border-color: #D7EAF5; /*hsla(202,60%,90%,1.00);*/
         border-style: solid;
     background-color: #F7FBFD; 
         background-color: hsla(217,52%,95%);
         /*hsla(202,58%,90%,0.20);*/
 }
 a.ellipse-blue:hover{
     background-color: #D7EAF5; /*hsla(202,60%,90%,1.00);*/
 }
 a.ellipse-yellow{
     border-color: #F8E9D4; /*hsla(36,70%,90%,1.0);*/
         border-style: solid;
     /*background-color: hsla(36,70%,90%,0.20); */
         background-color: #FEFBF7; /* hsl(34, 78%, 98%);*/
 }
 a.ellipse-yellow:hover{
     background-color: #F8E9D4; /*border-color: hsla(36,70%,90%,1.0);*/
 }
 a.ellipse-lblue{
     border-color: var(--border-light); /*hsla(202,60%,90%,1.00);*/
         border-style: solid;
     /* Match the unselected miniblock colour scheme for ellipse buttons */
     background-color: #F7F9FC;
 }
 a.ellipse-lblue:hover{
     /* Match the unselected miniblock hover colour for ellipse buttons */
     background-color: #E6EDF7;
 }
 a.ellipse-smaller{
         font-size: 95%;
         padding-top:.2em;
         padding-bottom:.3em;
 }

 /*
 a.ellipse-red{
     background-color: hsla(5,50%,90%,1.00);
 }
 a.ellipse-red:hover{
         background-color: hsla(5,50%,90%,.60);
 }
 a.ellipse-green{
     background-color: hsla(120,50%,90%,1.00);
 }
 a.ellipse-green:hover{
     background-color: hsla(120,50%,90%,.60);
 }
 a.ellipse-blue{
     background-color: hsla(202,60%,90%,1.00);
 }
 a.ellipse-blue:hover{
     background-color: hsla(202,60%,90%,.60);
 }
 a.ellipse-yellow{
     background-color: hsla(47,85%,90%,1.00);
 }
 a.ellipse-yellow:hover{
     background-color: hsla(47,85%,90%,.60);
 }
 */

 /*https://fdossena.com/?p=html5cool/buttons/i.frag
  a.recbutton{
  display:inline-block;
  padding:0.35em 1.2em;
  border:0.1em solid #FFFFFF;
  margin:0 0.3em 0.3em 0;
  border-radius:0.12em;
  box-sizing: border-box;
  text-decoration:none;
  font-family:'Roboto',sans-serif;
  font-weight:300;
  color:#FFFFFF;
  text-align:center;
  transition: all 0.2s;
  }
  a.recbutton:hover{
  color:#000000;
  background-color:#FFFFFF;
  }
  */
 /*@media all and (max-width:30em){
  a.recbutton{
   display:block;
   margin:0.4em auto;
  }
  }*/

/* Browsers normally interpret <b> and <strong> as “bolder than the parent,” but when the parent uses a very light weight (Whitney 200 / Source Sans 200), the computed result often ends up only slightly heavier — visually still “normal.” A universal rule will override this and restore proper bold everywhere */
b,
strong {
    font-weight: 600;   /* or 'bold' */
}