/* the course pages - based on old website css */

/* Raleway is used by the new website... just in the login area
   Think about whether we *really* need this font
   Note that @import MUST appear before all other rules
*/

/* Nick 17 Nov 2021 - CD-1084 - replaced by fonts.css / core_css so we can serve fonts off our own server instead of Google CDN */
/*@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);*/


/* this one fixes the annoying left/right shift (for centered pages) we get
   when moving from a short page (no scrollbar) to a long page (with scrollbar).
   Solution is to always display the scroll bar
*/
   
/* Nick 21 July 2020 - removed so we can have a fixed scrolling bottom_content_wrapper for new course pages */

html { /*overflow-y:scroll;*/ }

/* ================================================================== */

/* 
    SSB Bart Group suggestion (and Bryan Garaventa suggested something similar),
    for hiding text offscreen so screen reader can see it and will read it in
    a browse mode reading of page, but sighted users can't see it.

    It is used for hiding text that you want to be read 'inline' with a
    linear reading of the page content. And it *may* work better with older screen
    readers with less aria markup support than some other techniques.
*/


/*  
    13 March 2017
    Review these two pages to see if we should adjust to use clip also...
    Note also that hiding to the left of the screen doesn't work for right to left languages
    https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
    http://itstiredinhere.com/accessibility/

    18 April 2017 - it also falls over if your content is at the right side of a wide screen
                    so add overflow hidden to prevent any more than one pixel displaying
*/

/*
.screen-reader-offscreen {
  position:absolute;
  left:-999px;
  width:1px;
  height:1px;
  top:auto;
  overflow: hidden;
}
*/

	/*
		Nick 11 March 2022 - try a newer offscreen pattern from https://labs.levelaccess.com/index.php/Offscreen_Text
		Level Access was formerly SSB Bart Group.

		The newer pattern does not try to position way offscreen but instead uses clip / clip-path and other techniques
		to hide closer to where you would expect the content to actually be based on its position in the html.

		That seems to give better results with NVDA at least which seems to read the offscreen content one word (ie. line) at a time
		with Edge 99 (so that might actually be Edge rather than NVDA causing the problem there).
		In any case this seems to work better so try it out.
		It may also fix some slightly odd focus shifting / scrolling in JAWS 2022 / Chrome 98
		https://labs.levelaccess.com/index.php/Offscreen_Text
	*/


    .screen-reader-offscreen {
		/* For defensive coding, !important is appropriate here. If any one of these declarations gets overridden, it will cause hard-to-detect bugs*/
		position: absolute!important;					/* Take the element out of the page flow - for visual hiding */
		clip: rect(1px 1px 1px 1px)!important; 			/* For IE6 and IE7 - for visual hiding */
		clip: rect(1px, 1px, 1px, 1px)!important;		/* clip:rect is deprecated, but required for browsers that don't yet support clip-path */
		clip-path: inset(50%)!important;				/* For modern browsers - for visual hiding */
		padding: 0!important;							/* Prevent visual glitches */
		border: 0!important;							/* Prevent visual glitches */
		height: 1px!important; 							/* Necessary so assistive technologies won't treat it as completely hidden */
		width: 1px!important; 							/* Necessary so assistive technologies won't treat it as completely hidden */
		overflow: hidden!important;						/* Combined with clipping - for visual hiding */
		white-space: nowrap!important;					/* Without this, certain assistive technologies will announce a sentence as if it has no whitespace between words */
	}


/* 
    This one just hides the given element so sighted users will never see it, 
    and screen reader will never see / read it when giving a page summary.
    But you can give element an id and refer to it with aria-describedby, aria-labelledby etc. 

    aria-hidden is generally not necessary as well because the screen readers
    work off the accessibility tree API and the browser will not even expose an
    element that has display: none
*/
.screen-reader-desc
{
    display: none;
}


/* Nick 8 Sept 2022 - override to get Firefox and Chrome working the same
   In Firefox, the default definition for the b tag is bolder, and in Chrome it is bold
   That gives us excessively large headings in our reports
*/
b
{
	font-weight: bold;
}


/* ================================================================== */
/* Body                                                               */
/* ================================================================== */

/* set some table defaults */
table {border-collapse: collapse;}
table td {vertical-align: top;}

body.SmartsimsBody
{
    background-color: white;

    margin:             0 0 0 0;
    padding:            0 0 0 0;
    font-family:        Verdana,Arial,Helvetica,sans-serif;
    font-size:          14px;
    font-size:          16px;
    color:              #6B6B6B;

    text-align:         center;
}        

div.body_content_wrapper
{
    /* Nick 17 July 2020 - body_content_wrapper is now ALWAYS after the top_wrapper, so set margin-top */
    /* default behaviour is to keep expanding until we hit the max-width of 1124px (+38px + 38px = 1200px) */
    top: 65px;
    top: 79px;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-left: 38px;
    padding-right: 38px;
    max-width: 1124px;
    text-align:         left;
    padding-bottom: 20px;
	/* Nick 20 June 2023 - course page scrolling
	   Interesting - it looks like this is not required for smooth scrolling in iOS 15 but it is in iOS 12 */
	-webkit-overflow-scrolling:touch; 
}

div.body_content_wrapper.sections
{
    /* This is for new single course page where the body content has full width SectionContainers
       with content constrained inside SectionContent.  This lets us have full width background colour strips.
       In that case, we rely on the SectionContainers and SectionContent to do the layout */
    margin: 0;
    padding: 0;
    max-width: none;
    width: auto;

    /* keep the top menu in a fixed position as you scroll */
    overflow-y:auto;
    position: fixed;
    bottom: 0px;

    /* getting problems between 800px wide and 900px wide where the body_content_wrapper
       does not go full width.  adding right: 0px seems to fix it
       Actually - I'm not sure how it ever worked correctly without right: 0px :) */
    right: 0px;

    padding-bottom: 20px;
}

div.top_wrapper
{
    max-width: 1140px;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    position: relative;
}

div.top_wrapper.sections
{
    /* keep the top menu in a fixed position as you scroll */
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 74px;
}


div.SectionContainer
{
    margin: 0;
    padding: 0;
    position: relative;
    padding-bottom: 15px;
}

/*div.SectionContainer:nth-child(odd)*/
div.SectionContainer:nth-child(even)
{
    background-color: #F3F3F3;
}

div.SectionContent
{
    max-width: 1124px;
    padding-left: 38px;
    padding-right: 38px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

div.SectionContent h1, div.SectionContent h2
{
    color: #005FAD;
    font-size: 24px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* The 'Hero' section design is based on the public www.smartsims.com product pages */
.HeroContainer + div.SectionContainer
{
    /* the first SectionContainer after the HeroContainer should have a larger top margin
       but use padding-top instead so that we get the same background colour if the SectionContainer has background shading */
    padding-top: 15px;
}

.HeroContainer
{
    margin: 0;
    padding: 0;
    position: relative;
    min-height: 250px;          /* We need a placeholder while the image loads - this needs to reduce on smaller screens */
    max-height: 350px;          /* We may need some different max heights for the different products - eg. Music2Go cuts off the eyes of the girl on wider screens at max-height: 300px */
    max-height: 500px;          /* Ian wants a higher hero for large screens and is happy to have students scroll as required */
    overflow: hidden;
}

.HeroContainer img:first-child
{
    width: 100%;
    position: relative;
}

.HeroContent
{
    width: 100%;
    max-width: 1124px;
    padding-left: 38px;
    padding-right: 38px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
.SectionHeader
{

	margin: 0;
    padding: 0;
    position: relative;

	background: rgb(0,158,255) !important;
	background: linear-gradient(132deg, rgba(0,158,223,1) 0%, rgba(0,191,255,1) 70%) !important;
	box-shadow: -1px 3px 15px -6px black;

}
.SectionHeader .WelcomeBox
{
        max-width: 1124px;
    padding-left: 38px;
    padding-right: 38px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    color: white;
    bottom: 10px;
}

.SectionHeader .WelcomeBox h1
{    color: white;
    font-size: 18px;
    margin-top: 8px;
    margin-bottom: 8px;
}
.SectionHeader .WelcomeBox h2
{
    color: white;
    font-size: 18px;
}

.SectionHeader .WelcomeBox .h_line 
{
    line-height: 1px;
    width: 50%;
    border-top: 1px solid #fff;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-bottom: ;
}

.SectionHeader .WelcomeBox .subheading 
{
    display: block;
    font-family: "Raleway",sans-serif;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    margin: 0;
}


.SectionHeader.MBAdvanced 
{
    /*background-color: #234290;*/
	background-color: #00b9ff;
}

.SectionHeader.MBIntro
{
    /*background-color: #00ACEE;*/
	background-color: #00b9ff;
}

.SectionHeader.MBAccounting
{
    /*background-color: #93C73F;*/
	background-color: #00b9ff;
}

.SectionHeader.Music2Go 
{
    /*background-color: #EF4023;*/
	background-color: #00b9ff;
}

.SectionHeader.Adsim
{
    /*background-color: #EE1941;*/
	background-color: #00b9ff;
}

div.PageBanner, div.PageTopMenu, h1, h2, h3, a:link, a:visited
{
    color:              #005FAD;
}

a
{
    text-decoration:    none;
}

a:hover, a:focus
{
    text-decoration:    underline;
    color:              blue;
}

a img
{
    border:             none;
}


div.PageTopMenu, div.PageFooter
{
    font-size:          15px;
    font-size:          11pt;
    font-size:          10pt;
    text-align:         center;
    margin-bottom:      0px;
    margin-right:       0px;
	display: none;
}

div.PageTopMenu
{
    text-align:         right;
}

div.PageFooter
{
    font-size:          13px;
    font-size:          11px;
    margin-top:         10px;
    line-height:        150%;
}

div.PageFooter a
{
    margin-left:        15px;
    margin-right:       15px;
}

span.TopMenu
{
    margin-left:       15px;
    padding-left:       5px;
    padding-right:      5px;
}

span.TopMenuLeft
{
    margin-right:       15px;
    float:              left;
}

span.TopMenu:hover, span.TopMenu a:hover, span.TopMenuLeft:hover, span.TopMenuLeft a:hover
{
	cursor:					pointer;
    background-color:       #F5F4F3;
    color:                  #A5A7AA;
    text-decoration:        none;
}


div.PageBanner
{
    position:           absolute;
    top:            0px;
    left:           0px;
    /* Note - width just has to be at least as wide as the area of the image we want to display
       It no longer has to match the width of the background-image below
       Height should be at least as tall as background-image */
    width:  350px;
    height: 71px;
    z-index:        0;

    /* New Smartsims Logo Sept 2016, Smaller Business Simulations Text, No Menu Bar */
    background-image:   url('https://static.smartsims.com/images/website/newheaderbar_2016_businesssims_nobar.jpg');
}

/* India version - New Smartsims Logo Sept 2016, Smaller Business Simulations Text, No Menu Bar */
div.PageBanner.India
{
    background-image:   url('https://static.smartsims.com/images/website/newheaderbar_2016_businesssims_nobar_India.jpg');
}

div.PageTopMenu
{
    position:               relative;
    top:                    52px;
    z-index:                2;
    padding-right:          0px;
}

div.PageTopMenu, div.PageTopMenu a:link, div.PageTopMenu a:visited
{
    text-transform:     uppercase;
    font-family:        Raleway,Arial,Verdana;
    font-size:          14px;
    font-weight:        700;
    line-height:        18.2px;
}

span.TopMenu:hover, span.TopMenu a:hover, span.TopMenuLeft:hover, span.TopMenuLeft a:hover
{
    background-color:       #F5F4F3;
    color:                  #7A3E76;
}



ul.PageTopMenu
{
    display:            block;

    font-size:          10pt;
    text-align:         right;

    position:           absolute;
    z-index:            1000;
    top:            23px;

    /* Nick 17 July 2020 */
    right:30px;
    padding: 0;
    margin: 0;
    position: absolute;
}


ul.PageTopMenu, ul.PageTopMenu a:link, ul.PageTopMenu a:visited
{
    text-transform:     uppercase;
    color:              #005B92;
    text-decoration:        none;

    font-family:        Raleway,Arial,Verdana;
    font-size:          14px;
    font-weight:        700;
    line-height:        18.2px;
}



li.TopMenu
{
    display:            block;
    position:          relative;
    float:              right;
    width:              auto;
    top:                0px;
    list-style-type: none;
    color:              red;
        margin-left:       15px;
    padding-left:       5px;
    padding-right:      5px;

	margin: 0;
    padding: 5px;
    border: 2px solid #005B92 !important;
    border-radius: 5px;
	min-width: 100px;
    margin-right: 10px;
	text-align: center;
	
}


/* New Smartsims Logo May 2016 */
li.TopMenu
{
    border-left:        0;
}

li.TopMenuLeft
{
    list-style-type: none;
    color:              red;
    margin-right:       15px;
    float:              left;
}

ul.PageTopMenu li
{
    list-style-type: none;
}

/* you can't see the default Chrome focus border due to blue background */
/* however we really need clear focus indication for accessibility */
ul.PageTopMenu a:focus
{
    /*border: 1px dotted white;*/
}

ul.PageTopMenu ul
{
    display:            none;
    width:              auto;
    position:           absolute;
    top:                14px;
    left:               0;
    background-color:   #3675CF;
    border:             1px solid black;
    text-align:         left;
    padding-left:       5px;
    padding-right:      5px;
}

ul.PageTopMenu ul li
{
    width:              150px;
    margin-top:         7px;
    margin-bottom:      5px;
}

/* This is the magic that makes the CSS menus work on mouseover without javascript
   Unfortunately you can't do the same trick with the focus, so you need javascript
   for keyboard expansion of the menus.
   The issue is that as soon as the focus moves to one of the children
   then the focus moves off the parent, and you can't form a selector for the
   parent ul based on matching attributes of children.
*/
ul.PageTopMenu li.TopMenu:hover ul
{
    display:            block;
    /* New Smartsims Logo May 2016 */
    background-color:       #F5F4F3;
}

ul.PageTopMenu li ul a
{
    width:      140px;
    padding-left:   5px;
    padding-right:  5px;
    display:    block;
    text-transform:        none;
    text-decoration:        none;
}

ul.PageTopMenu a:hover, ul.PageTopMenu li ul a:hover
{
	cursor:					pointer;
    background-color:       #F5F4F3;
    color:                  white;
}


/* New Smartsims Logo May 2016 */
/*
ul.PageTopMenu a:hover, ul.PageTopMenu li ul a:hover
{
    background-color:       #005B92;
    color:                  white;
}
*/

/* Nick 15 Sept 2016 - removing menu bar */
ul.PageTopMenu a:hover, ul.PageTopMenu li ul a:hover, ul.PageTopMenu a:focus, ul.PageTopMenu li ul a:focus
{
    /*background-color: white;
    color: black;
    text-decoration: underline;*/
}


/* Nick 15 Sept 2016 - larger font size for consistency with new www.smartsims.com
   and it looks better when LOGOUT is the only thing in the menu */
ul.PageTopMenu a:link
{
    font-size: 14px;
}



/* right - originally had problems floating ul to the right of a left floated image
       temporary solution was to increase right margin of all left floated images */

.FlowLeft, img.FlowLeft
{
    float:               left;
    margin-right:       15px;
}

.FlowRight, img.FlowRight
{
    float:               right;
    margin-left:        15px;
}

h2
{
    font-size:          14px;
    font-weight:        normal;
    padding-bottom:     0;
    margin-bottom:      0;
    /*font-family:        "Century Gothic","Trebuchet MS","Lucida Sans",Verdana,Arial,Helvetica,sans-serif;*/
}

h3
{
    font-size:          14px;
    font-weight:        normal;
    padding-top:     0;
    margin-top:      0;
    margin-bottom:      6px;
    line-height:       135%;
    /*font-family:        "Century Gothic","Trebuchet MS","Lucida Sans",Verdana,Arial,Helvetica,sans-serif;*/
}


div.LeftColumn
{
    float:              left;
    width:              372px;
    padding:            0;
    width:  calc(100% - 430px);
}

div.RightColumn
{
    float:              right;
    width:              400px;
    padding:            0;
}


/* ================================================================== */
/* Menu Row															  */	
/* ================================================================== */
.LeftMenu[numitems='1']
{
	display: none;
}
.LeftMenu
{
    width:              200px;
    float:              left;
    text-align:         left;
    padding-top:        20px;
    background-color:       transparent;
}

ul.LeftMenu
{
    /* resets required if we use ul instead of div */
    list-style-type:    none;
    padding: 0;
    margin: 0;
    padding-top: 20px;
}

div.SmartsimsBody
{
    padding-top:        0px;
}

.MenuRow
{
    margin-top:         6px;
    margin-bottom:      5px;
    font-size:          14px;
    margin-left:        0px;
    padding-top:        2px;
    padding-bottom:     2px;
    padding-left:       7px;
    padding-right:      7px;

    /* resets required if we use ul instead of div */
    display: block;
}

.MenuRow:focus
{
	/*border: 2px solid black;*/
	color: white;
	background: #1386C8;	
}

.MenuRow a:focus
{
	background: #1386C8;
}

.LeftMenu .MenuRow
{
    padding-top:        0px;
    padding-bottom:     0px;
    padding-left:       0px;
    padding-right:      0px;

    display: block;
}

.MenuRow a:focus span
{	
	color: white;
}
.MenuRow a:hover
{
    background-color:       #138ACB;
}

.MenuRow a{
	display: block;
	width: 100%;
	height: 100%;
	padding: 2px 7px 2px 7px;
}

.MenuRow[depth='2']
{
    margin-left:      16px;
}

.LeftMenu img
{
    border:     none;
}

.MenuRow
{
	cursor:					pointer;
}

.MenuRow:hover
{
    background-color:       #138ACB;
    color:                  white;
}

.MenuRow span
{
	cursor:					pointer;
}


/* ugh... need more CSS to make unopened divs turn red when you mouseover 
   if they don't have an anchor wrapped around them */

.MenuRow a:link, .MenuRow a:visited, .MenuRow[open='0'] span
{
    color:              #A5A7AA;
    text-decoration:    none;
}

.MenuRow:hover span
{
    color: white;
}

.MenuRow[type='image']:hover
{
    background-color:       transparent;
    cursor:                auto;
}



/* 29 July 2010 and do the same for the links when MenuRow is open now that we put links in too */
.MenuRow[open='1'] a:link, .MenuRow[open='1'] a:visited, .MenuRow[open='1'] span
{
    color:              #138ACB;
}

.MenuRow[open='1']:hover span
{
    color: white;
}



/* login system... */
div.MenuLabel
{
	padding-left:			6px;
	padding-top:			3px;
	padding-bottom:			3px;
	padding-right:			2px;
	right:					0px;
}

div.MenuLabel span
{
	color:					blue;
	font-size:				12px;
	font-weight:			bold;
}


/* get rid of the border that an anchor adds to each image by default */
.MenuRow img
{
    border-width:           0px;
}

/* New Look */
.MenuRow:active, .MenuRow:hover, .MenuRow:link, .MenuRow:visited
{
    background-image:       none;
}

/* ================================================================== */
/* Login Area														  */	
/* ================================================================== */

.LoginArea
{
	background-color:		transparent;
    font-family: 			Verdana, Arial, Helvetica, sans-serif; 
/*	font-size:				10px;*/
    text-align:                     right;

    /*color:              #1386C8;*/

}

/* tweak to make it look better on seperate login page */
/*
.LoginArea
{
    width: 250px;
    margin-left: 50px;
    display: block;
    margin-top: 25px;
    margin-bottom: 25px;

    background-color: #f8f8f8;
    padding: 10px 10px 10px 10px;
}
*/

/* 15 Sept 2016 - new look for course.smartsims.com */
.LoginArea
{
    width: 300px;
    text-align: center;
    background-color: rgba(0, 0, 0, .2);
    border-radius: 5px;
    padding: 40px;
}

.LoginArea div.LoginBlock
{
    margin-bottom:                          8px;
}

.LoginArea div.LoginErrorMsg
{
	color:             red;
    margin-bottom:     10px;
}

/* Nick 15 Sept 2016 - course login page facelift to work like www.smartsims.com */
.LoginArea .forgot_text
{

	font-family: "Raleway",Arial,Helvetica,sans-serif;
	font-size: 12px;
    font-weight: bold;
	color: #fff;
	text-transform: uppercase;
	margin-top: 25px;
	display: block;
}

.LoginArea .forgot_text:hover, .LoginArea .forgot_text:focus
{
    color: #009CE1;
    color: yellow;
    text-decoration:    none;
}



.LoginArea div.LoginBlock label.LoginLabel
{
	font-size:				12px;
	margin-top:				3px;
    color:                  #138ACB;
    margin-right:           10px;

    /* Nick 15 Sept 2016 - new website design doesn't show the labels, but they still need to be here 
       So... for now just copy-paste the .screen-reader-offscreen handling
       I *think* this is a better solution than adding screen-reader-offscreen as a class on LoginLabels in the code... 
    */
    

        position:absolute;
        left:-999px;
        width:1px;
        height:1px;
        top:auto;

}


/* 15 Sept 2016 - new look for course.smartsims.com */
.LoginArea div.LoginBlock input.LoginInput
{
    width: 90%;
    background-color: #fff;
    border-radius: 8px;
    height: 38px;
    padding-left: 27px;
    margin-bottom: 12px;
    border: none;
    box-shadow: none;
    /*text-transform: capitalize;*/
    font-family: "Raleway",Verdana,Arial,Helvetica,sans-serif;
    font-size: 16px;
    color: #000;
}

/* font-awesome icons */

.fa-lock, .fa-user {
    font-size: 12px;
    color: #a0a0a0;
    float: left;
    position: absolute;
    padding-top: 15px;
    padding-left: 10px;
}

/* Nick 15 Sept 2016 - consistency with new website */

.LoginArea .login_btn:hover, .LoginArea .login_btn:focus
{ 
    color:#000; 
    background:#fff; 
    /* lets run with a blue button based on the old css buttons */
    background-color: #009CE1;          /* darker blue - old normal colour */
    background-color: #00ABF0;          /* lighter blue - old hover colour */
    color:#ffffff; 
    transition-duration:0.5s;
    cursor: pointer;
}

.LoginArea .login_btn {
    transition-duration: 0.5s;
    font-family: "Raleway",Arial,Helvetica,sans-serif;
    font-size: 14px;
    color: #fff;
    color: #009CE1;
    color: #FFFFFF;
    text-align: center;
    float: none;
    width: 95%;
    /*height: 25px;*/
    line-height: 25px;
    background-color: none;
    /* lets run with a blue button based on the old css buttons */
        background-color: #009CE1;          /* darker blue - old normal colour */

    border: 2px solid #fff;
    box-shadow: none;
    /*height: 27px;*/
    line-height: 27px;
    font-weight: 700;
    border-radius: 7px;
    text-transform: uppercase;

/* and pull this in too... */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;

}

/* Nick 8 March 2017 - responsiveness for smaller screen sizes */
.LoginAreaWrapper
{
    width: 400px; 
    margin-left: auto; 
    margin-right: auto;
}


.MenuLabel + .login_btn
{
    margin-top: 10px;
}

.login_btn + .ClearLeftRight
{
    margin-top: 10px;
}

.LoggedInTop
{
    background-color: white;
    border-radius: 7px;
/*    color: white;*/
    font-weight: bold;
    
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.LoginArea div.MenuLabel
{
    background-color:                       #1386C8;
    padding-right:                          15px;
}

.LoginArea div.MenuLabel span
{
    color:                                  white;
}

.LoginArea .MenuRow
{
	text-align:				center;
}

.LoginArea .MenuRow
{
        margin-right:                   0px;
        margin-left:                    30px;
        border-left:                    2px solid grey;
        border-bottom:                  2px solid grey;
        height:                         auto;
        margin-bottom:  2px;
        margin-top:  5px;
}

.LoginArea .MenuRow:hover
{
        color:          red;
        color:          yellow;
}

.LoginArea .MenuRow[depth='3']
{
        margin-left:                    140px;
}

.LoginArea .MenuRow, .LoginArea .MenuRow span
{
        border:                                 0;
        text-align:                             right;
        font-size:                              10px;
       /* color:                                  gray;*/
}

.LoginArea .MenuRow:hover span
{
    color:      white;
}

.LoginArea .MenuRow
{
        padding-right:                          20px;
}



.LoginArea div.LoggedInAs
{
	text-align:				center;
}

.LoginArea div.LoggedInAs span
{
	color:					blue;
	font-size:				14px;
	font-weight:			bold;
}

.LoginArea div.Header
{
    color: 					Blue;
    font-family: 			Verdana, Arial, Helvetica, sans-serif; 
    font-size: 				12px; 
	font-weight:			bold;
    border-bottom: 			1px solid olive; 
	padding-top:			2px;
	padding-bottom:			2px;
}

/* ================================================================== */
/* Dasp                                                               */
/* ================================================================== */


div.Dasp
{
    /*width:              620px;*/
    float:              right;
    padding-left:       0px;
    padding-right:      0px;

    width:              calc(100% - 225px);

    padding-top:        0px;

    /* javascript system - hide by default... */
    display:				none;

    padding-top:        15px;

}

div.Dasp p, div.Dasp ul
{
    line-height:        140%;
    font-size:          14px;
}

div.Dasp ul
{
    margin-left:        0;
    padding-left:       15px;
}

div.Dasp li
{
    margin-bottom:       15px;
}

div.Dasp h1
{
    font-size:          16px;
    font-weight:        bold;
    line-height:        150%;
    margin-top:         5px;
    padding-top:        0px;
    margin-bottom:      15px;
    /* make sure this appears in front of the dvd product box */
    position:           relative;
    z-index:    2;
    /*font-family:        "Century Gothic","Trebuchet MS","Lucida Sans",Verdana,Arial,Helvetica,sans-serif;*/
}


div.Dasp div.LeftColumn h2, div.Dasp h2
{
    font-size: 14px;
    text-transform:     none;
    font-family:        "Century Gothic","Trebuchet MS","Lucida Sans",Verdana,Arial,Helvetica,sans-serif;
}

div.Dasp div.LeftColumn
{
    float:  left;
    width:  calc(100% - 200px);
}

div.Dasp div.RightColumn
{
    float:  right;
    width:  170px;
}


div.Dasp[open='1']
{
	display:				block;
}

/*  Used by the 404 error page
    put this here rather than in IE6 styles just in case
    some other browsers also ignore attribute selectors */
div.IE6HackOpen
{
    display:				block;
}

div.Dasp img.FlowLeft
{
	float:					left;
    /* hack - having problems floating ul to the right of a left floated image
       temporary solution is to increase right margin of all left floated images */
    margin-right:           20px;
}

div.Dasp img.FlowRight
{
	float:					right;
    margin-left:           10px;
}


/* ================================================================== */
/* Dasp Form                                                          */
/* ================================================================== */

div.Dasp form
{
	text-align:				left;
}

div.Dasp form div,
div.Dasp form h3
{
	clear:					both;
}

div.Dasp form span
{
	float:					left;
	min-width:				200px;
    margin-bottom:                          5px;
}

div.Dasp form label
{
	float:					left;
	min-width:				100px;
}

div.Dasp form input[type="text"]
{
	float:					left;
}

/* Bloody IE7 does not support :after */
/* We can probably get a similar effect using background-image / background-position */
/* Problem is that 'content' is not supported by IE6 / 7 - and only for before/after on Firefox */
/* Would be nice to avoid background images... */
/* Will have to inline I think... */
div.Dasp form label.Required:after
{
	color:					Red;
	font-weight:			bold;
	font-size:				14px;
	content:				" * ";
}
 
div.Dasp form h3.Required:after
{
	color:					Red;
	font-weight:			bold;
	font-size:				14px;
	content:				" * ";
}
 
/* ================================================================== */
/* Dasp Selector                                                      */
/* ================================================================== */

div.Dasp div.SectionSelector
{
	height:					3em;
}

div.Dasp div.SectionSelector label
{
	font-weight:			bold;
}

div.Dasp div.Element
{
	display:				none;
}

div.Dasp div.Element[open='1']
{
	display:				block;
}

div.Dasp div.ElementSelector
{
	height:					13em;
	overflow:				auto;
	border:					1px solid grey;
}

/* if we have a SectionSelector then reduce size accordingly */
div.Dasp div.SectionSelector div.Element div.ElementSelector
{
	height:					10em;
}

div.Dasp div.ElementSelector div
{
	border-bottom:			1px solid lightgrey;
	color:					#336699;
	font-size:				12px;
	font-weight:			bold;
	cursor:					pointer;
	padding-left:			4px;
	padding-right:			4px;
	padding-top:			1px;
	padding-bottom:			1px;
}

div.Dasp div.ElementSelector div[open='1']
{
	color:					#0066FF;
}

div.Dasp div.ElementDisplay
{
	position:				absolute;
	top:					14em;
	bottom:					4px;
	right:					1em;
	left:					1em;

	margin-top:				0.5em;
	margin-left:			0.5em;
	margin-right:			0.5em;

	overflow:				auto;

	padding-top:			4px;
	padding-left:			10px;
	padding-right:			10px;
	padding-bottom:			4px;

	border-top:				1px solid grey;
	border-left:			1px solid grey;
	border-right:			3px solid darkgrey;
	border-bottom:			3px solid darkgrey;
}

div.Dasp div.ElementDisplay > div
{
	padding:				12px;
	display:				none;
}

div.Dasp div.ElementDisplay > div[open='1']
{
	display:				block;
}

div.Dasp div.ElementDisplay h2
{
	font-size:				16px;
	color:					Red;
}

div.Dasp div.ElementDisplay h3
{
	font-size:				16px;
	color:					Green;
}

div.Dasp div.ElementDisplay h2 + div, div.Dasp div.ElementDisplay a
{
	font-size:				14px;
	font-weight:			bold;
}

div.Dasp div.ElementDisplay p 
{
	font-size:				14px;
}


/* ================================================================== */
/* Mainsite                                                           */
/* ================================================================== */

div.Nag, div.LoginError
{
    margin-left:            40px;
    color:                  red;
}

.Indent
{
    margin-left:            40px;
}

div.LaunchWebApp, div.LaunchWebAppWithOffline
{
    margin-top:             10px;
    margin-left:            40px;
    margin-bottom:          10px;
}

/* copy the Download layout for now */
div.LaunchWebAppOffline
{
    float: right;
    display: block;
    background-image:   url('https://static.smartsims.com/images/website/button_download_green_small.png');
    background-repeat:  no-repeat;
    height:             26px;
    padding-top:        5px;    /* anchor now wraps the entire div */
    padding-bottom:     0px;
    padding-left:       33px;
    /*margin-bottom:      10px;*/
    margin-left:        25px;
}

div.LaunchWebAppWithOffline
{
    clear: both;
    display: inline-block;
}

div.LaunchWebAppWithOffline + div.LaunchWebAppWithOffline
{
    margin-top: 0px;
}

div.LaunchWebAppOffline a
{
    position:           relative;
    top:                5px;
}

/*
	Need a bit more spacing before the Prof launch control headings
    Note that because we check for LaunchWebApp first, this does not affect
    the first heading in Prof's launch list - only subsequent headings.
    Ah... and this may fall over if the previous section just contains an error message too.
    Nevermind - it is an improvement in most cases
*/
div.LaunchWebApp + h2, div.LaunchWebAppWithOffline + h2
{
    margin-top: 45px;
}


.AppLoginErrorMsg
{
    box-sizing:         content-box;        /* required to make buttons behave like spans for layout */

    display:            block;
    margin-top:         10px;
    background-color:		#F0F0F0;
    border:             1px solid black;
    -moz-border-radius: 	5px;
    -webkit-border-radius:  5px;
    padding:            10px 10px 10px 10px;

    border-radius: 	5px;
}

/* Nick 28 July 2020 - CD-722 - remove the old graphics for course pages, but leave the LHS webapp graphics in place
   see modern2.css for the old style layout for div.Resource, div.Video, div.Download */

/* CD-722 - simplified look for course pages */

li div.Resource, li div.Video, li div.Download
{
    display: inline;
}

div.ResourceBox
{
    background: url(https://www.smartsims.com/images/mike-bikes-back.png) no-repeat;
    padding: 40px 50px;
    background-size: cover;
    background-position: center center;
    margin-top: 20px;
    margin-bottom: 40px;
}

div.ResourceBox h3
{
  color: white;

  font-size: 18px;
}

.ResourceBox ul li:before {    
    font-family: 'Font Awesome 5 Pro';
    content: '\f15c';
    margin: 40px 15px -20px -40px;
    font-size: 20px;
}
.ResourceBox ul li
{
	list-style-type: none;
}

div.ResourceBox div.Resource, div.ResourceBox div.Video, div.ResourceBox div.Download, div.ResourceBox h2, div.ResourceBox a span
{
    color: white;
}

div.ResourceBox li
{
    color: white;
}

div.ResourceBox a:hover, div.ResourceBox a:focus 
{
    text-decoration: underline;
    color: white;
}


/*wrappers for embedded youtube videos so they are responsive*/
.video-container {										   
  position: relative;									   
  padding-bottom: 56.25%; /*16:9*/
  padding-top: 30px; 
  height: 0; 
  overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*-------------------------------------------------------------*/

/*
div.ResourceGetAdobeReader
{
    margin-left:        60px;
}
*/

div.Video
{
    /* Nick 28 July 2020 - CD-722 - remove the old graphics for course pages, but leave the LHS webapp graphics in place */
    /*background-image:   url('https://static.smartsims.com/images/website/button_video_small.png');*/
}

div.Download
{
    /* Nick 28 July 2020 - CD-722 - remove the old graphics for course pages, but leave the LHS webapp graphics in place */
    /*background-image:   url('https://static.smartsims.com/images/website/button_download_green_small.png');*/
}

div.Resource a, div.Video a, div.Download a
{
    /* Nick 28 July 2020 - CD-722 - remove the old graphics for course pages, but leave the LHS webapp graphics in place */
    /*
    position:           relative;
    top:                5px;
    */
}


/* ======================================= */

p.quote, blockquote
{
    margin-left:            40px;
    font-style:            italic;
    color:             #666666;
    font-size:              12px;
}


/* Decide if we need anything for a GettingStarted area or custom message - review logins2.php */

div.GettingStarted
{
    /* IE7 likes the Gray spelling, not Grey */
	border-top:			1px solid DarkGray;
	border-bottom:		1px solid DarkGray;

    width:              auto;
	min-height:			4em;
    
    padding-left:       20px;
    padding-right:      20px;
    padding-bottom:     15px;

    font-size:          16px;
}

div.GettingStarted h3
{
	font-size:				13px;
	font-weight:			bold;
	color:					#0066FF;
}

div.GettingStarted ul
{
    font-weight:            bold;
}

div.GettingStarted ul a
{
    margin-left:        10px;
    margin-right:       10px;
    font-size:          larger;
	color:				#0066FF;
}

div.GettingStarted ul a img
{
    margin-left:        5px;
    margin-right:       5px;
    height:             50px;
}


/* ================================================================== */
/* Generic                                                            */
/* ================================================================== */

.Bold
{
    font-weight:        bold;
}

.LargeBold
{
	font-size: 16px;
    font-weight:        bold;
}

ul li
{
    margin-bottom:      10px;
}

ul.disc li
{
	list-style-type:	disc;
}

ul.circle li
{
	list-style-type:	circle;
}

ul.square li
{
	list-style-type:	square;
}

ul.Number li
{
	list-style-type:	decimal;
}

.ClearLeft
{
	clear:				left;
}

.ClearRight
{
	clear:				right;
}

.ClearLeftRight
{
	clear:				both;
}


/* Nick 29 July 2020 - pull in the topmenuui.css overrides for ButtonBackgroundBlue2 - the old style is butt ugly :) */

.ButtonDisabled[size='250']
{
    width:              250px;
}

.ButtonDisabled[size='300']
{
    width:              300px;
}

.mpLaunchBtn
{
	/*background-color: #005897 !important;*/

	/*temporarily chnage to dark bkue to show Ian*/
	/*background-color: #01AEEF !important;*/
	background-color: #005897 !important;
}
.spLaunchBtn
{
	background-color: #005897 !important;
	/*background-color: #012C63 !important;*/
}

.mpLaunchBtn:hover
{
	/*background-color: #005897 !important;*/

	/*temporarily chnage to dark bkue to show Ian*/
	/*background-color: #00a1de !important;*/
	background-color: #00406d !important;
}
.spLaunchBtn:hover
{
	background-color: #00406d !important;
	/*background-color: #012C63 !important;*/
}

.ButtonBackgroundBlue2, .ButtonOffline, .ButtonDisabled
{
	width: 160px;
    height: 35px;
    background-color: #39688E;      /* darker currently works better for MB-Intro where there is too much light blue */
    background-color: #00aaec;      /* lighter blue is more consistent with our traditional launch but may now clash with extra light blue ResourceBox etc. in revised course page */
    border: 0;
    border-radius: 3px;
    color: white;
    font-family: Open Sans,Arial,Helvetica,sans-serif !important;
    font-size: 14px !important;
    font-weight: 600;
	cursor: pointer;
	padding: 0;
}

.ButtonDisabled
{
    background: #e0e0e0;
    background: #d0d0d0;
    margin-left: 25px;
}

.ButtonOffline
{
    background-color: #ffffff;
    color: #01AEEF;
    border: 2px solid #01AEEF;
    margin-left: 25px;
}

.ButtonBackgroundBlue2:active, .ButtonOffline:active
{
    /* cute - the browser changes the style to 'inset' to pull off the button click effect */
    border: 2px inset buttonface;
}

.ButtonBackgroundBlue2:focus, .ButtonOffline:active
{
    background-color: #00bbfc;
    border: 2px outset lightskyblue;
}

.ButtonBackgroundBlue2:hover
{
    background-color: #0088cc;
}

.ButtonOffline:hover
{
    background-color: #3fb924;

	background-color: #01AEEF;
    color: white;
    border: 2px solid #01AEEF;
    margin-left: 25px;
}


.ButtonBackgroundBlue2[size='75']
{
    width:              75px;
}

.ButtonBackgroundBlue2[size='100']
{
    width:              100px;
}

.ButtonBackgroundBlue2[size='125']
{
    width:              125px;
}

.ButtonBackgroundBlue2[size='150']
{
    width:              150px;
}

.ButtonBackgroundBlue2[size='200']
{
    width:              200px;
}

.ButtonBackgroundBlue2[size='250']
{
    width:              250px;
}

.ButtonBackgroundBlue2[size='300']
{
    width:              300px;
}
.ButtonBackgroundBlue2[size='400']
{
    width:              400px;
}



div.Announcements
{
    border:             0;
    background-color:   #F1F7FC;
    width:              auto;
    padding-left:       13px;
    padding-top:        10px;
    padding-bottom:     10px;
    padding-right:      13px;
    margin-bottom:      15px;
    -moz-border-radius: 	5px;
    -webkit-border-radius:  5px;
	min-height:			4em;

    border-radius: 	5px;

    /* Nick 2 March 2020 - make the border more obvious - too easy to miss */
    border: 1px solid black;

    margin-top: 30px;
}

div.Announcements h3
{
    /* needs to be at least same same as the body text */
    font-size:          16px;
}

div.Announcements ul
{
    padding-left:       35px;
}

/* Hmm... looks like I used div.GettingStarted for the Phoenix Pages - see above... */
ul.GettingStarted li
{
    list-style-type:	decimal;
    margin-left:        5px;
    padding-bottom:     5px;
}

ul.GettingStarted li div.Resource, ul.GettingStarted li div.Video, ul.GettingStarted li div.Download
{
    margin-top:         10px;
}


body.Portal h1, body.Error404 h1
{
    padding-top:        35px;
}



/* Nick 3 Aug 2010 - any WYSIWYG css required to get TinyMCE laying out correctly */

body.mceContentBody, body.mceContentBody td
{
    font-family:        Verdana,Arial,Helvetica,sans-serif;
    font-size:          12px;
    line-height:        140%;
    color:              #6B6B6B;
}


/* Nick 1 Aug 2010 - add in reusable NewsStory CSS */

table.News_MWCScoreboard, table.News_DataTable {border-spacing: 0; border-collapse: collapse; font-size: 8pt; width: 100%;}
table.News_MWCScoreboard thead, table.News_DataTable thead {font-weight: bold; border: 1px solid black;}
table.News_MWCScoreboard td, table.News_DataTable td {vertical-align: top; 
				        padding-left: 5px; 
				        padding-right: 5px; 
				        margin-top: 0; 
				        margin-bottom: 0; 
				        padding-top: 5px; 
				        padding-bottom: 5px; 
				        border: 1px solid black;
                        font-size: 8pt;
				        }

table.News_MWCScoreboard td.Col1, table.News_MWCScoreboard td.Col3, td.News_HighlightCol
{
    font-weight: bold;
    background-color: #EDF4F9; 
}

table.News_MWCScoreboard td.Col3, table.News_MWCScoreboard td.Col4, table.News_MWCScoreboard td.Col5, table.News_MWCScoreboard td.Col6
{
    text-align: right;
}

table.News_MWCScoreboard td.Col3, table.News_MWCScoreboard td.Col4
{
    width:      50px;
}

table.News_MWCScoreboard td.Col5, table.News_MWCScoreboard td.Col6
{
    width:      75px;
}



table.News_PhotoTable
{
    width:      100%;
}

table td.News_PhotoCell { width: 150px; font-size: 8pt; vertical-align: top; padding-left: 20px; text-align: center; }
table td.News_PhotoCell_Left { width: 150px; font-size: 8pt; vertical-align: top; padding-right: 20px; text-align: center; }

table td.News_PhotoCell p, table td.News_PhotoCell_Left p { margin-top: 4px; font-size: 8pt; }

table.DateTimeTable select
{
    font-size:   11px;
}

/* Nick 3 April 2014 - Video overlay window */

/* The WindowLayer greys out and covers the screen */

div#WindowLayer
{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    //background-color: lightgrey;
    background-color: black;
    opacity:0.6; 
    filter:alpha(opacity=60);
    /*transition: opacity 2.25s ease-in-out;*/
    z-index: 20000;
    visibility: hidden;
}

div#WindowLayer[windowframeopen='1']
{
    visibility: visible;
}

/* The WindowFrame should be absolutely positioned within the <div class='body_wrapper'> wrapper div
   I tried to use fixed position for WindowFrame but that screws up on iOS when you change zoom
   I think putting it inside the body_wrapper div should ensure it zooms consistently with the rest of the page
   AAAAAGGGGHHHH.... that doesn't work when we are scrolled down the screen... bugger...
   Probably go back to fixed... */

div#WindowFrame
{
    /*transition: opacity 2.25s ease-in-out;*/
    position: fixed;
    z-index: 20001;
    left: 0;
    right: 0;
    top: 30px;
    margin: auto;
    visibility: hidden;
    
    width: 824px;
    height: 590px;
    background-color: white;
    border: 8px solid white;
    box-shadow: 10px 10px 10px #444444;
    /*overflow: hidden;*/
    overflow: visible;      /* changed this to visible just so we can have the close button outside the window frame */
}

    /* ok... display property is NOT animatable, so you can't have that in the animation */
    @keyframes WindowLayerOpen
    {
        0%  { transform: scale(0.1); -ms-transform: scale(0.1); -webkit-transform: scale(0.1); -moz-transform: scale(0.1); }
        99% { transform: scale(1.0); -ms-transform: scale(1.0); -webkit-transform: scale(1.0); -moz-transform: scale(1.0); }
        /* IMPORTANT - YOU MUST FINISH WITH TRANSFORM: NONE
           This is different from scale(1.0)
           In particular if an ancestor of a position: fixed element has transform other than none, then that ancestor is
           used as the container for fixed positioning instead of the viewport. So that stuffed up the YouTube fullscreen
           effect in Chrome 58
        */
        100% { transform: none; -ms-transform: none; -webkit-transform: none; -moz-transform: none; }
    }

    @-webkit-keyframes WindowLayerOpen
    {
        0%  { transform: scale(0.1); -ms-transform: scale(0.1); -webkit-transform: scale(0.1); -moz-transform: scale(0.1); }
        99% { transform: scale(1.0); -ms-transform: scale(1.0); -webkit-transform: scale(1.0); -moz-transform: scale(1.0); }
        /* IMPORTANT - YOU MUST FINISH WITH TRANSFORM: NONE
           This is different from scale(1.0)
           In particular if an ancestor of a position: fixed element has transform other than none, then that ancestor is
           used as the container for fixed positioning instead of the viewport. So that stuffed up the YouTube fullscreen
           effect in Chrome 58
        */
        100% { transform: none; -ms-transform: none; -webkit-transform: none; -moz-transform: none; }
    }

    div#WindowFrame[windowframeopen='1']
    {
        visibility: visible;
        animation: WindowLayerOpen 0.6s ease-in;
        animation-fill-mode: forwards;
        -webkit-animation: WindowLayerOpen 0.6s ease-in;
        -webkit-animation-fill-mode: forwards;
    }

div#WindowHeader
{
    left: 0;
    right: 0;
    top: 0;
    height: 28px;

    background-color: white;
    border: 0;
    text-align: right;
    padding: 0;
    margin: 0;
    padding-right: 10px;
}

div#WindowTitle
{
    border: 0;
    padding-top: 5px;
    text-align: left;
    color: black;
    font-weight: bold;

    overflow: hidden;
    float: left;
    width: 90%;
}

/* Nick 20170525 - nicer CSS close button for popup video window - just put an X inside it */
.CloseButton {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border: solid;
  border-radius: 28px;
  font-family: Arial;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  color: #ffffff;
  font-size: 20px;
  font-size: 15px;
  padding: 10px 15px 10px 15px;
  padding: 7px 12px 7px 12px;
  text-decoration: none;
}

.CloseButton:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

/* offset the WindowClose area towards top-right of WindowFrame */
#WindowClose
{
    position: relative;
    top: -33px;
    right: -40px;
    top: -25px;
    right: -30px;
}

div#WindowBody
{
    margin: 0;
    padding: 0;
    color: red;
    text-align: center;
}



/*=====================================================================*/

/*  Nick 21 May 2014 - not sure if this will stay here or not
    CSS for new Basic LTI portal
*/


div.box_header, div.box_contents, iframe.PortalFrame , div#noCookie, div#noJavascript
{
    margin-left:        50px;
    margin-right:       auto;
    width:              675px;
    padding-left:       10px;
    padding-right:      10px;

}

div.box_header
{
    margin-top:         20px;
    margin-bottom:      0px;
    padding-top:        0px;
    padding-bottom:     0px;
    background-image:   url('/?action=img&type=png&name=UPhoenix/bluebutton');
    background-repeat:  repeat-x;
    border:             1px solid #BBCCDC;
    -moz-border-radius-topleft: 	5px;
    -moz-border-radius-topright: 	5px;
}

div.box_header h2
{
    color:              rgb(0, 69, 100);
    font-size:          13px;
    margin-top:         4px;
    margin-bottom:      0px;
    padding-bottom:     4px;
}


div.box_contents, iframe.PortalFrame, div#noCookie, div#noJavascript
{
    margin-top:         0px;
    padding-top:        5px;
    border:             1px solid #BBCCDC;
    border-top:         0;
    -moz-border-radius-bottomleft: 	5px;
    -moz-border-radius-bottomright: 	5px;
}

iframe.PortalFrame
{
    height:             200px;
}



/* Responsiveness for different screen sizes */

/* The break sizes I ran with for webapp were 900px, 600px, 400px, and that
   works ok here.  The original layout width of div.body_wrapper is 898px (822px wide with 38px padding either side)
*/

#userQuestion
{
    max-width: 95%;
}


div#LeftMenuHamburger
{
    display: none;      /* do not show for fullscreen */
}

#LeftMenuHamburgerBtn:focus span
{
	border-top: 7px solid #4c7dd8;

}
#LeftMenuHamburgerBtn:focus
{
   border: 2px solid lightblue;
}



@media (min-width: 1200px)
{
    /* need to pre-set the hero image width rather than relying on max-width to avoid screen starting off
       left aligned before the hero image is loaded */

    .HeroContainer img:first-child
    {
        width: calc(100vw - 15px);  /* note the vw width unit - ie. 100% of the viewport width
                                       this is necessary to ensure that the screen content centers correctly
                                       before the hero image loads (or if it does not load)
                                       and make it a bit smaller otherwise the scroll bar disappears */
    }
}

li.TopMenu
{
	padding: 0;
}
li.TopMenu a
{
	padding: 5px;
	display: block;
}

li.TopMenu:hover
{
	background-color: #005B92  !important;

}
li.TopMenu:hover a
{
	color: white;
	background-color: #005B92  !important;
}


li.TopMenu a:focus
{

	background-color: #208bcc;
	color: white;
}

@media (max-width: 900px)
{

div.body_content_wrapper
{
	/* this (sort of) centers the login boxes vertically in the course login pages
	   if your phone is in portrait mode.
	   But if it is in landscape mode, then it probably pushes the login boxes off the bottom of the screen
	   Try 30px.  Ah... nope... the 107px is chosen to line up the top of the scrollable top_wrapper.sections
	   (which you get once you log in) with the bottom of the top_wrapper / menu block.
	   No change for now...  */
    top: 107px;
	/*top: 30px;*/
}

div.top_wrapper.sections 
{
	height: 107px;
}

div.top_wrapper
{
	padding: 0;
}

#SecondaryBanner
{
	width: 270px;
    background: white;
    height: 72px;
    position: fixed;
    right: 0;
    top: 0;

}


#FlatSecondaryLogo{
	margin: 15px;
    margin-bottom: 0px;
    margin-top: 10px;
    /*background-image: url(https://static.smartsims.com/images/webapp/LiteCI/MBI_SS_Logo3.png);*/
    background-repeat: no-repeat;
    height: 42px;

    /* Nick 10 Feb 2020 - Nick and Ian decided to replace the Smartsims logo with the small Year / Sim Name text at the top left
       of the screen with product specific logos to make it obvious which sim you are using
       The Home screen should display more detail about what year it is and whether this is offline mode or not etc. */
    /*background-image: url(https://static.smartsims.com/images/webapp/LiteCI/MBI_Logo.png);*/
    /*background-size: cover;*/
    /*width: 240px;*/
    height: 60px;
}

.HeroContainer img:first-child
{
    display: none;
}
.HeroContainer
{
	min-height: unset;
	max-height: unset;
}
/* Playing around with larger / proportional font sizes */

body.SmartsimsBody
{
    /*font-size: 16px;*/        /* replaces font-size 10pt */
}

div.Dasp form h3, div.Dasp form span, div.Dasp form label, div.Dasp form input, div.Dasp form textarea,
.MenuRow
{
    font-size: 100%;         /* replaces font-size 11px */
}



    div.PageBanner
    {
        width: 100%;   /* just has to be wider than background image... */
		position: relative;
    }

    ul.PageTopMenu
    {
		width: 100%;
		left: auto;
		height: 33px;
		margin-top: 3px;
		position: initial;
		background-color: #005B92;
    }
	ul.PageTopMenu a:link, ul.PageTopMenu a:visited 
	{
		color: white;
		padding: 8px;
		display: block;
	}

    div.body_wrapper
    {
        width: auto;
    }
	li.TopMenu
	{
		border: none !important;
		border-radius: 0px;
		padding: 0;
		height: 100%;
	}
	li.TopMenu:hover
	{
		background-color: white !important;

	}
	li.TopMenu:hover a
	{
		color: #005B92;
		background-color: white !important;
	}

    div#LeftMenuHamburger
    {
       display: block;
       text-align: center;
       padding-top: 10px;
       padding-bottom: 10px;
       border-bottom: 2px solid black;
    }

    .LeftMenu
    {
        float: none;
        width: auto;
        display: none;
    }

	div.LeftColumn
	{
		width:  100%;
	}

	div.RightColumn
	{
		float:              left;
		width:              unset;
		margin-left: 40px;
	}

	.ButtonOffline, .ButtonDisabled {
		margin-top: 2px;
		margin-left: 0px;
	}

    /* ok... display property is NOT animatable, so you can't have that in the animation */
    @keyframes LeftHamburgerOpen
    {
        0%  { max-height: 0px; }
        99% { max-height: 300px; }
        /* max-height: none seems to evaluate to max-height: 0 on Edge when used in this animation
           none works correctly in Edge for simple cases, but not in an animation
           none works correctly on Chrome / Firefox
           Using a large fixed max-height works in all browsers */
        /*100% { max-height: none; }*/
        100% { max-height: 2000px; }
    }

    @-webkit-keyframes LeftHamburgerOpen
    {
        0%  { max-height: 0px; }
        99% { max-height: 300px; }
        /* max-height: none seems to evaluate to max-height: 0 on Edge when used in this animation
           none works correctly in Edge for simple cases, but not in an animation
           none works correctly on Chrome / Firefox
           Using a large fixed max-height works in all browsers */
        /*100% { max-height: none; }*/
        100% { max-height: 2000px; }
    }

    div#LeftMenuHamburger[hamburgeropen='1'] + #LeftMenu
    {
        display: block;     /* this MUST be here because CSS animation will not update the display property */
        /* try CSS animation instead */
        /* For smoother menu animation, you need to set max-height: 0 to ensure that you don't get an
           initial flash as the full menu is displayed then immediately hidden as the animation kicks in.
           But it feels a bit dangerous relying on the animation because if it does not kick in on an older
           browser then the max-height will remain locked at zero
           eg. what happens with IE9 or a later version of IE in compatibility mode? */
        /*max-height: 0;*/
        overflow: hidden;
        animation: LeftHamburgerOpen 0.4s 1 ease-in;
        animation-fill-mode: forwards;
        -webkit-animation: LeftHamburgerOpen 0.4s 1 ease-in;
        -webkit-animation-fill-mode: forwards;
    }

    /* Nick 25 Aug 2020 - hide the hamburger if it has zero or 1 items in it with latest changes to course pages */
    div#LeftMenuHamburger[numitems='0'], div#LeftMenuHamburger[numitems='1']
    {
        display: none;
    }

    div.Dasp
    {
        float: none;
        width: auto;
    }
}

/* left column / right column breaks down at this point */
/* Right column is usually decoration like school logo or product logo
   and Facebook like / AddThis
   We start to have trouble with that below about 680px
 */

@media (max-width: 680px)
{

    /* Nick 20 July 2020 - might be preferable to wrap that underneath the logo now
       Ah - except if we keep hamburger.  Then no point having top menu plus hamburger */

    /*ul.PageTopMenu
    {
		display: none;  // hide here instead of at 400px
       
    }
	*/
    div.body_wrapper
    {
        padding-left: 10px;
        padding-right: 10px;
    }

	div.body_wrapper h1
    {
        font-size: 20px;
    }

    div.Dasp div.LeftColumn
    {
        float: none;
        width: auto;
    }

    div.Dasp div.RightColumn
    {
        float: none;
        width: auto;
        margin-left: 40px;
        margin-top: 25px;
    }


    div.Dasp img.FlowRight, img.ProductBox
    {
        float: none;
    }

}

@media (max-width: 600px)
{
	#SecondaryBanner
	{
		display: none;
	}
}

@media (max-width: 400px)
{
    /* No room for top menu, and all it shows now is Logout and Support, so hide it */

    /* Nick 16 July 2020 - check course page behaviour when Hamburger is hidden - new SingleCoursePage design */

    ul.PageTopMenu
    {
       /* display: none;*/
    }

    .LoginAreaWrapper h1
    {
        font-size: 20px;
    }

    .LoginAreaWrapper
    {
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .LoginArea
    {
        width: auto;
    }
	li.TopMenu.hideOnSmall
	{
		display: none;
	}

	div.RightColumn
	{
		margin-left: 0;
	}
	div.LaunchWebApp, div.LaunchWebAppWithOffline
	{
		margin-left: 0;
	}

	div.LaunchWebApp button, div.LaunchWebAppWithOffline button
	{
		width: auto !important;
		padding: 5px;
		min-width: 200px;
	}
	
}


/*=======================================================*/

/* Animated Hamburger Menu - based on example by Nicholas M Smith */

.menu {
  cursor: pointer;
  margin: 0 auto;
  padding-left: 1.25em;
  position: relative;
  width: 30px;
  height: 40px;

  background-color: white;

  margin-bottom: 15px;
}

.menu:focus
{
    /*border: 1px dotted red;*/
}

.menu-global {
  backface-visibility: hidden;
  position: absolute;
  left: 0;
  border-top: 7px solid #18acd1;
  width: 100%;
  transition: 0.55s;
}
.menu-top {
  top: 0;
}
.menu-middle {
  top: 18px;
}
.menu-bottom {
  top: 36px;
}
.menu-top-click {
  backface-visibility: hidden;
  top: 15px;
  transform: rotate(50deg);
  -webkit-transform: rotate(50deg);
/*  transition: 0.55s 0.5s;*/
}
.menu-middle-click {
  opacity: 0;
  transition-duration: 0.25s;
}
.menu-bottom-click {
  backface-visibility: hidden;
  top: 15px;
  transform: rotate(-410deg);
  -webkit-transform: rotate(-410deg);
  /*transition: 0.55s 0.5s;*/
}



/*----------------------------Modern processing screen---------------------------*/

/* Nick 20 July 2020 - I think this was an example / concept.  I don't think we ended up using this... */

.event-processing
{
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
	background: #00afef
}

.loading-event
{
    vertical-align: middle;
    display: table-cell;
}

.loading-event h2
{
	padding-top: 10px;
    text-align: center;
	padding-bottom: 20px;
	font-size: 16px;
	color: white;
}

.loading-event .loading-banner{
    background-image: url(/?action=img&type=png&name=liteci/MBI_SS_Logo3_FlatWhite);
	background-repeat: no-repeat;
	height: 40px;
	 background-position: center;

}

#fountainG{
	position:relative;
	width:234px;
	height:28px;
	margin:auto;
	margin-bottom: 150px;
}

.fountainG{
	position:absolute;
	top:0;
	background-color:rgb(255,255,255);
	width:28px;
	height:28px;
	animation-name:bounce_fountainG;
		-o-animation-name:bounce_fountainG;
		-ms-animation-name:bounce_fountainG;
		-webkit-animation-name:bounce_fountainG;
		-moz-animation-name:bounce_fountainG;
	animation-duration:1.105s;
		-o-animation-duration:1.105s;
		-ms-animation-duration:1.105s;
		-webkit-animation-duration:1.105s;
		-moz-animation-duration:1.105s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
	transform:scale(.3);
		-o-transform:scale(.3);
		-ms-transform:scale(.3);
		-webkit-transform:scale(.3);
		-moz-transform:scale(.3);
	border-radius:19px;
		-o-border-radius:19px;
		-ms-border-radius:19px;
		-webkit-border-radius:19px;
		-moz-border-radius:19px;
}

#fountainG_1{
	left:0;
	animation-delay:0.446s;
		-o-animation-delay:0.446s;
		-ms-animation-delay:0.446s;
		-webkit-animation-delay:0.446s;
		-moz-animation-delay:0.446s;
}

#fountainG_2{
	left:29px;
	animation-delay:0.5525s;
		-o-animation-delay:0.5525s;
		-ms-animation-delay:0.5525s;
		-webkit-animation-delay:0.5525s;
		-moz-animation-delay:0.5525s;
}

#fountainG_3{
	left:58px;
	animation-delay:0.659s;
		-o-animation-delay:0.659s;
		-ms-animation-delay:0.659s;
		-webkit-animation-delay:0.659s;
		-moz-animation-delay:0.659s;
}

#fountainG_4{
	left:88px;
	animation-delay:0.7755s;
		-o-animation-delay:0.7755s;
		-ms-animation-delay:0.7755s;
		-webkit-animation-delay:0.7755s;
		-moz-animation-delay:0.7755s;
}

#fountainG_5{
	left:117px;
	animation-delay:0.882s;
		-o-animation-delay:0.882s;
		-ms-animation-delay:0.882s;
		-webkit-animation-delay:0.882s;
		-moz-animation-delay:0.882s;
}

#fountainG_6{
	left:146px;
	animation-delay:0.9985s;
		-o-animation-delay:0.9985s;
		-ms-animation-delay:0.9985s;
		-webkit-animation-delay:0.9985s;
		-moz-animation-delay:0.9985s;
}

#fountainG_7{
	left:175px;
	animation-delay:1.105s;
		-o-animation-delay:1.105s;
		-ms-animation-delay:1.105s;
		-webkit-animation-delay:1.105s;
		-moz-animation-delay:1.105s;
}

#fountainG_8{
	left:205px;
	animation-delay:1.2115s;
		-o-animation-delay:1.2115s;
		-ms-animation-delay:1.2115s;
		-webkit-animation-delay:1.2115s;
		-moz-animation-delay:1.2115s;
}

.niceScrollBar::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.niceScrollBar::-webkit-scrollbar
{
	height: 8px;
	background-color: #F5F5F5;
}

.niceScrollBar::-webkit-scrollbar-thumb
{
	background-color: #0ae;
	
	background-image: -webkit-gradient(linear, 0 0, 0 100%,
	                   color-stop(.5, rgba(255, 255, 255, .2)),
					   color-stop(.5, transparent), to(transparent));
}



@keyframes bounce_fountainG{
	0%{
	transform:scale(1);
		background-color:rgb(255,255,255);
	}

	100%{
	transform:scale(.3);
		background-color:rgb(0,175,239);
	}
}

@-o-keyframes bounce_fountainG{
	0%{
	-o-transform:scale(1);
		background-color:rgb(255,255,255);
	}

	100%{
	-o-transform:scale(.3);
		background-color:rgb(0,175,239);
	}
}

@-ms-keyframes bounce_fountainG{
	0%{
	-ms-transform:scale(1);
		background-color:rgb(255,255,255);
	}

	100%{
	-ms-transform:scale(.3);
		background-color:rgb(0,175,239);
	}
}

@-webkit-keyframes bounce_fountainG{
	0%{
	-webkit-transform:scale(1);
		background-color:rgb(255,255,255);
	}

	100%{
	-webkit-transform:scale(.3);
		background-color:rgb(0,175,239);
	}
}

@-moz-keyframes bounce_fountainG{
	0%{
	-moz-transform:scale(1);
		background-color:rgb(255,255,255);
	}

	100%{
	-moz-transform:scale(.3);
		background-color:rgb(0,175,239);
	}
}