My updated theme for Blackboard 3800.13

-
As we move to SaaS soon I had to update our theme work to be compatible with the latest SaaS version. So this means I have a nice freshly compiled version to share. 

 The previously shared version had been lost in the transfer to the new Blackboard Community Site. This explains why I now back up all new posts to both this blog as well as posting on the community site. 

A lack of time means that right now I cannot share screenshots of how the new additions to the theme look, but I am providing the source code below so you can experiment with copying and pasting them into Stylus easily, without having to unzip the theme. You can get a good idea of how it all looks by referring to my post: Let me show you my Blackboard.

Watch this video for a guide on how to try the theme out without having to install it:


Note that the improvement to Review Status required me to apply a separate CSS just for instructors. In Blackboard the review status button has a double purpose when making a test (!) and to avoid an unwanted side effect for instructors I made a JSHack which fixes this behaviour when they build a test. (It's the box where you put in a score for a test question if I recall correctly). 

  So to use the theme you need:

If you are new to customising the Blackboard theme, check out our presentation A Bluffer's Guide to Customising the 2016 Blackboard theme.



Here follows the source to allow you to experiment with the customisations easily.  Let me know any feedback :)

/* Created by */
/* Matthew Deeprose: http://bit.ly/2IVuG4t */
/* Sam Cole: http://bit.ly/2H0ALdL */
/* Thanks to */
/* Rodney Hargis, Ester Muñoz, Colleen Cameron */
/* Kevin O'Connor, and the Blackboard Community */
/* All changes here can be added to a mods.css */
/* Except for puller section which should be in app_nav.css */


/* Colour changes */
/* Colour 0 */
/* Top Frame Background Color / Background Image */
#topFrame,
.bgBanner {
    background-color: #002E3B !important;
}


/* Colour 1 */
/* Change Content Frame Background (Applies to content frame within a Course) */
.contentPane {
    background: #F9F5E9;
}


/* Colour 2 */
/* Change Control Panel section colour as seen by instructors */
.menuWrap-inner {
    background: #002E3B !important;
}

/* Colour 3 */
/* Change Course Menu Title Area Colour- this should be set to be unobstructive*/
#courseMenuPalette div.navPaletteContent {
    background-color: #fff;
}
/* Colour 4 */
/* Change primary menu button colour - (+ Icon) */
.mainButton > a {
    background: #005c84;
}
/* Colour 5 */
/* Change secondary menu button colours (Reorder, Refresh, Course Files buttons) */
.secondaryButton > a,
.mainButton h2 > a,
.secondaryButton h2 > a {
    background: #005c84;
}
/* Colour 6 */
/* Change colour of Main tab highlight - this is the line which appears under the active tab */
.appTabs td.active {
    border-bottom: 3px solid #FCBC00 !important;
}
/* Colour 7 */
/* change colour of active tab text */
#topTabActive,
.appTabs .active a,
.appTabs .active a:hover,
.appTabs .active a:focus {
    color: #FCBC00 !important;
}


/* Colour 8 */
/* Change colour and style of modules title bar */
#moduleTitle,
.portlet h2 {
    color: #FFF;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    background-color: #002E3B;
}
.reorderableModule:hover h2 {
    color: #FCBC00;
    transition: all 0.5s ease-in-out !important;
}
/* Colour 9 */
/* Text on the content area, headers in bold, background in very light grey, rounded dark blue borders (down) */
#moduleTitle,
.portlet h3 {
    font-weight: bold;
}
#moduleTitle,
.collapsible,
.portlet {
    border-radius: 0px 0px 15px 15px;
    -moz-border-radius: 0px 0px 15px 15px;
    -webkit-border-radius: 0px 0px 15px 15px;
    border: 1px solid #bfc1b8fa !important;
    background-color: #FBFAF9 !important;
}

/* Colour 10 */
/* Removes border above course action bar (set to 0px to remove) */
.contentPane .shadow {
    border-top: 1px solid #fff;
}
/* Colour 11 */
/* Control Panel - hover over text colour */
#controlPanelPalette_contents a:hover {
    color: #FCBC00!important;
    transition: all 0.2s ease-in-out !important;
}

/* Colour 12 */
/* From EMUNOZ */
/* Change colour of re-order items button.  Seems to apply to content items rather than other re-ordering (like menu items)*/
.item .reorder {
    background: #FCBC00 url(images/reorder_bg.png) repeat 0 0;
}

/* Colour 13 */
/* Changes the colour of the Control Panel area when viewed in student preview / student view of course*/
.menuWrap {
    background-color: #F9F5E9;
}
/* Colour 14 */
/* Set Course Menu reorder color upon hovering over with mouse*/
span.reorder.reorderMouseOver:hover {
    background: #FCBC00 !important;
    transition: all 0.2s ease-in-out !important;
}
/* Colour 15 */
/* Make course menu text change on rollover */
#courseMenuPalette .courseMenu a:hover span {
    color: #002E3B !important;
    font-weight: bold;
    transition: all 0.2s ease-in-out !important;
}
/* Colour 16 */
/* course menu "+" button menu, set colour, and make text bold and white */
#courseMenuPalette ul li a:hover {
    color: #FCBC00 !important;
    font-weight: bold;
}
#courseMenuPalette ul {
    background-color: #002E3B;
}
/* Colour 17 */
/* Success Message background colour */
.good {
    background: #C1D100 !important;
    border-color: #C1D100 !important;
    color: #00131D !important;
}
.good a {
    color: #00131D !important;
    text-decoration: none !important;
}
.good a.close:before,
.adding a.close:before {
    color: #00131D;
}


/* Colour 18 */
/* Controls color and format of open Control Panel Items */
.controlpanel a.comboLink_active,
.controlpanel h4 a.open {
    color: #FCBC00 !important;
}
/* Colour 19 */
/* Change colour of Announcements grey bar (Institution / Course) */
.localViewToggle {
    background: #f9f5e9;
}
/* Colour 20 */
/* Change colour of subheader */
#courseMenuPalette h3 span {
    color: #000 !important;
}

/* Colour 21 */
/* Customise Global Navigation Flyout */
.flyout-menu {
    background-color: #002E3B;
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
/*This is the sidebar, all the way*/
.flyout-menu .mybb-tools {
    background-color: #002E3B !important;
}
/*This is the sidebar, only the part with icons*/
.flyout-menu a {
    color: #002E3B !important;
}
/*links*/
.flyout-menu a:hover {
    color: #0099E6 !important;
}
.flyout-menu .accordion_toggle span {
    background-color: #E1E8EC;
    color: #333333 !important;
}
/*titles*/
.flyout-menu .accordion_toggle:hover span {
    background-color: #9FB1BD;
    color: #333333 !important;
}
.accordion_content {
    background-color: #FFFFFF!important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none!important;
}
/*content*/
.accordion_content li a {
    color: #005C84;
    font-size: 100%;
    text-decoration: none;
}
.bottom-buttons a:hover,
.bottom-buttons a:focus {
    background-color: #B3DBD2!important;
}
/*buttons to help and institution*/
/* Colour 22 */
/* Fix adaptive release popup on performance dashboard */
div.treeContainer ul.tree,
ul.tree {
    color: #000 !important;
    background-color: #FFF0 !important;
}

/* Colour 23 */
/* Set colour of breakout course map/menu background */
#courseMenu_folderView ul {
    background-color: #fff0 !important;
}
/* More fixes for course menu pop out */
/* Make subheader appear */
div.treeContainer ul.tree li.subhead h4.treeSubhead-collapsed a {
    color: #000 !important;
}
/* Make subheader rollover stay the same colour */
div.treeContainer ul.tree li.subhead h4.treeSubhead-collapsed hover {
    color: #000 !important;
}

/* Colour 24 */
/* Removes the purple outline from course menu items [Issue 31 on Community Thread] */
.global-nav-bar input:focus,
.global-nav-bar button:focus,
.global-nav-bar select:focus,
.global-nav-bar a:focus {
    outline-color: #1E8765 !important;
}


.appTabs input:focus,
.appTabs button:focus,
.appTabs select:focus,
.appTabs a:focus {
    outline: 2px dotted #FCBC00 !important;
    transition: outline-offset .2s linear !important;
    text-transform: none !important;
}

.navPalette input:focus,
.navPalette button:focus,
.navPalette select:focus,
.navPalette a:focus {
    outline-color: #74C9E5 !important;
}

/* Colour 25 */
/* Configure rollover of Course title */
#courseMenuPalette a:hover {
    color: #00131D!important;
}

/* Configure rollover of Subheader */
#courseMenuPalette span:hover {
    color: #00131D !important;
}

/* Changes mouseover / hover colour of Course Name and Course ID above the course menu */
.path a:hover {
    color: #758D9A !important;
}

/* Colour 26 */
/* Fix colour of error message to black */
.error .pageTitle h1 {
    color: #00131D !important;
}
/* Colour 27 */
/* Set "warning" bar colour and text */
/* Warning Messages */
/* Warning Message Link Text */
/* More accessible warning */
.warningReceipt {
    background: #005C84 !important;
    border-color: #005C84 !important;
    color: #ffffff !important;
    font-weight: bold !important;
}
/* More accessible warning 2 */
/* Warning Message Link Text */
.warningReceipt a.areceipt {
    background: #005C84 !important;
    border-color: #005C84 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}
.warningReceipt a,
.warningReceipt a:visited {
    color: #fff!important;
    font-style: italic;
}

.warningReceipt a:hover,
.warningReceipt a:focus,
.warningReceipt a:active {
    color: #fff!important;
    background-color: black;
}
/* Make general links have higher contrast and be on brand */
a,
.portlet .subCategories li a,
.blockGroups .itemHead,
.blockGroups .itemHeadOpen {
    color: #005C84;
}
/* More accessibility focus things */
.vtbegenerated a:focus,
.localViewToggle a:focus,
.additionalInfo a:focus {
    outline: 3px solid #00131D !important;
    outline-offset: 2px !important;
    transition: outline-offset .2s linear !important;
}
.button-1:focus {
    background-color: #8D3970 !important;
    color: #FFFFFF !important;
    outline: 3px solid #00131D !important;
    outline-offset: 1px !important;
    transition: outline-offset .2s linear !important;
}

/* Help link icon more accessible */
.helpLink a[title*="Off"]:before,
.helpLink a[title*="Off"]:hover:before,
.helpLink a[title*="Off"]:focus:before {
    color: white;
}














/* Colour 28 */
/* Course Menu Accessibility Focus Colour*/
.listCm .courseMenu a:hover span,
.listCm .courseMenu a:focus span {
    color: #00131D !important;
    font-weight: bold !important;
}
/* Colour 29 */
/* More fixes for Course Map */
.popupMenu #controlPanelPalette,
.popupMenu h2,
.popupMenu .menuWrap {
    background-color: #002E3B !important;
}
.popupMenu #courseMenuPalette a:hover {
    color: #002E3B !important;
    font-weight: bold;
    transition: all 0.2s ease-in-out !important;
}

/* Colour 30 */
/* Course menu focus colour only (not control panel) */
#courseMenuPalette div.navPaletteContent a:focus {
    background-color: white !important;
    border: #00131D 1px;
    outline-color: rgba(255, 255, 255, 0) !important;
    border-style: hidden hidden double hidden;
}
/* Colour 31 */
/* Improve Edit mode toggle */
/* button switch to edit mode */
.modeSwitch {
    border: 1px solid #00131D;
}
/* Edit mode off indicator dot */
.read-off:before {
    color: #00131D;
}
/* Edit mode off text */
.read-off {
    color: #00131D;
}
/* Edit mode is... text */
.switcherLabel {
    color: #00131D !important;
}

/* Buttons */
/* Change Button Text Colour for buttons on Action Bar*/
.actionBar ul li a {
    background: 0;
    color: #FFF;
    /* White */
}
/* ACTION BAR BUTTONS ONLY FROM EMUNOZ MENU (comment / uncomment my own action bar stuff near top of page) */
/* This will remove the border */
.pageTitle + .actionBar {
    border: none;
}

/* buttons, mainButton on the left, secondaryButton on the right of the screen */
.actionBar .mainButton > a {
    color: #FFFFFF !important;
    background: none scroll 0 0 #002E3B !important;
    text-shadow: none !important;
    text-decoration: none;
    box-shadow: none !important;
    border: none;
    border-radius: 8px !important;
    margin: auto 3px;
    font-weight: bold !important;
}

.actionBar .mainButton > a:hover {
    color: #FFFFFF !important;
    background: none scroll 0 0 #FCBC00 !important;
}

.actionBar .secondaryButton > a {
    color: #FFFFFF !important;
    font-weight: bold !important;
    background: none scroll 0 0 #005C84 !important;
    text-shadow: none !important;
    text-decoration: none;
    box-shadow: none !important;
    border: none;
    border-radius: 8px;
    margin: auto 3px;
}

.actionBar .secondaryButton > a:hover {
    color: #FFFFFF !important;
    background: none scroll 0 0 #FCBC00 !important;
}

.actionBar .mainButton h2 > a {
    color: #FFFFFF !important;
    background: none scroll 0 0 #002E3B !important;
    text-shadow: none !important;
    text-decoration: none;
    box-shadow: none !important;
    border: none;
    border-radius: 8px !important;
    margin: auto 3px;
}

.actionBar .secondaryButton h2 > a {
    color: #FFFFFF !important;
    background: none scroll 0 0 #002E3B !important;
    text-shadow: none !important;
    text-decoration: none;
    box-shadow: none !important;
    border: none;
    height: 100%;
    border-radius: 8px;
    margin: auto 3px;
    font-weight: bold !important;
}

/* Changed 25/4 to make bold menu item while hovering */
.actionBar ul li a:hover {
    background-color: #FCBC00 !important;
    font-weight: bold !important;
    transition: all 0.2s ease-in-out;
}



.actionBar li.mainButton:first-child h2 > a,
.actionBar li.mainButton:first-child > a {
    font-weight: bold !important;
}
.actionBar li.mainButton:first-child h2 > a:hover,
.actionBar li.mainButton:first-child > a:hover {
    font-weight: bold !important;
}
/* Changes text colour for primary and secondary buttons when hovering */
.mainButton h2 > a:hover,
.actionBar .mainButton > a:hover,
.actionBar .secondaryButton > a:hover,
.secondaryButton h2 > a:hover {
    color: #000 !important;
}

/* Changes spacing for primary / main buttons on My UoS tab page */
/* Changes spacing for primary / main buttons in a content area */
/* Margin order is top, right, bottom, left */
.actionBar .secondaryButton h2 > a,
.actionBar .secondaryButton > a,
.actionBar .mainButton > a,
.actionBar .mainButton h2 > a,
.actionBar li.mainButton:first-child h2 > a,
.actionBar li.mainButton:first-child > a {
    padding-left: 20px;
    margin: 10px 3px 0px 3px;
}

/* Removes bottom border from buttons when screen is zoomed in / mobile view */
.actionBarMicro,
.actionBar,
.actionBar ul li {
    border-bottom: None;
}


/* Submit button */
.button-1 {
    color: #FFFFFF !important;
    background-color: #005C84 !important;
    border-radius: 4px;
    text-decoration: none;
    box-shadow: none !important;
    border: #990000!important;
    text-shadow: none!important;
    font-weight: normal !important;
    font-size: 125% !important;
    vertical-align: middle;
    padding: 6px 16px 7px !important;
    text-transform: uppercase;
}
.button-1:hover {

    transition: all 0.2s ease-in-out !important;

    background-color: #B3DBD2 !important;
    color: #00131D !important;
    font-weight: bold;
    border: #990000 !important;
    box-shadow: none !important;
}

.button-1:active {
    transform: translateY(4px) !important;
}

.button-1:focus {


    background-color: #8D3970 !important;
    color: #FFFFFF !important;
}
/* Cancel button */
.button-2 {
    color: #fff !important;
    background-color: #495961 !important;
    border-radius: 4px;
    text-decoration: none;
    box-shadow: none !important;
    border: #CCCCB8!important;
    text-shadow: none !important;
    font-size: 125% !important;
    font-weight: normal;
    vertical-align: middle;
    padding: 6px 16px 7px !important;
    text-transform: uppercase;
}
.button-2:hover {

    transition: all 0.2s ease-in-out !important;

    color: #00131D !important;
    background-color: #E1E8EC !important;
    border-color: #A71930!important;
}

.button-2:active {
    transform: translateY(4px) !important;
}
.button-2:focus {
    color: #fff !important;
    background-color: #495961 !important;
}






/* Layout changes */
/* Layout 0 */
/* Makes grade center cells look more like 2012 theme and allow for more grades on-screen [Issue 3 on BB Community Master List] */
.gbtable tbody tr td,
.gbtable tbody tr th {
    height: auto !important;
}
/* Layout 1 */
/* Center quick enrol button */
.singleControl a,
.navPalette .discover a {
    text-align: center;
}
/* Layout 2 */
/* Assignment Details Grey Bar */
/* Changed from 100% */
.stepcontent {
    width: auto;
}
/* Layout 3 */
/* Fix View Attempts Headings */
.steptitle {
    margin: 5px 5px 5px 5px;
    position: static;
}

/* Layout 4 */
/* Criteria Summary - Grey Bar in Needs Marking */
/* Sets width of the bar */
/* adds a bit of space beneath the bar */
/* Has issues in older Firefox, needs testing */
.criteriaSummary {
    width: 100pc;
    margin-bottom: 10px;
}
/* Layout 5 */
/* Changes border weight around various things */
/* Work Offline Button Expanded Menu */
/* Add Menu Item Expanded Menu */
.nav .sub ul,
.nav.gb_currView .sub > ul,
.menumini ul,
.quickAddPal,
.keyboardAccess,
span.currentTags,
.liveArea,
.liveArea-slim,
.previewArea,
.jumptopage,
.panelTabs li.active a.edit,
.panelTabs li.active a.edit:hover,
.panelTabs li.active a.edit:focus,
.flyout,
.bcContent .flyout,
ul.tree li a + img + a:focus,
ul.tree li img + img + a:focus,
div.treeContainer ul.tree li a.itemActive,
#learningUnitToc ul.tree li a.itemActive,
ul.tree li a.itemActive,
#loginLang ul {
    border: 1px solid #000;
}
/* Layout 6 */
/* Show dividers on action menus for content */
.cmdiv ul {
    border-top: 1px solid #ddd;
}
/* Layout 7 */
/* Fix for annoying chevrons in next to embedded images in content items */
.vtbegenerated img + .contextMenuContainer {
    display: none !important;
}
/* Layout 8 */
/* Make my courses and system admin links underline when hovering over them */
.portlet a:hover {
    text-decoration: underline !important;
}
/* Layout 9 */
/* Fixes course titles on a mobile device not display correctly in the course menu [Issue 30 on Community Thread] */
#courseMenuPalette a,
#controlPanelPalette_contents a,
#controlPanelPalette_contents span {
    margin-bottom: 0px !Important;
}
/* Layout 10 */
/* Fixes bars appearing over course menu items in edit mode in mobile view */
.ineditmode div.listCm ul.courseMenu li:hover {
    background-color: #f4f4f4 !important;
}

/* Layout 11 */
/* The course name in the top of the course menu can sometime be close to the home icon this adds a bit of padding */
.listCm h3 {
    padding-right: 2px !important;
}
/* Layout 12 */
/* Hide the floating avatar and number in the collapsed mode  */
#badgeTotal {
    left: 1000px !important;
}

/* Layout 13 */
/* Hide My instituion etc that goes over minimised global nav area */
#topTabActive,
.appTabs .active a,
.appTabs .active a:hover,
.appTabs .active a:focus {
    z-index: 100 !important;
}
/* Layout 14 */
/* Fix home icon in course menu so that it has original behaviour */
#courseMenu_combo {
    display: inline-block !important;
    opacity: 0.0 !important;
}
/* Layout 15 */
/* Change top tabs alignment properties for right or left aligned top tabs */
/* Changes top tabs alignment when tabs are aligned left */
@media (min-width: 1000px) {
    .tabWrapper-left {
        width: auto !important;
        margin-top: 7px !important;
        padding: 0px 180px !important;
        Height: 66px !important;
    }
}
/* Changes top tabs alignment when tabs are aligned right */
@media (min-width: 1000px) {
    .tabWrapper-right {
        width: auto !important;
        margin-top: 20px !important;
        padding: 0px 0px !important;
        Height: 66px !important;
    }
}
/* Make top tab area single line */
.brandingImgWrap {
    height: 2px !important;
}
/* Set padding / margin for UoS logo image */
.brandingImgWrap img {
    top: 5px !important;
    left: 35px !important;
}

/* Layout 16 */
/* Make the 'hit box' for the top tab links smaller so that it is easier */
/* For users with fat fingers to access the course menu on */
/* Mobile Devices */
.appTabs a {
    padding-bottom: 1px !important;
    position: relative !important;
}
.appTabs td.active a {
    padding-bottom: 1px !important;
    position: relative !important;
}


/* Layout 18 */
/* Make breadcrumbs visible */
#breadcrumbs ol li:nth-child(3) {
    border-left: 1px solid #002E3B !important;
    padding: 2px 20px 0px 10px !important;
}
#breadcrumbs ol li:nth-child(4) {
    border-left: 1px solid #002E3B !important;
    padding: 2px 20px 0px 10px !important;
}
#breadcrumbs ol li:nth-child(5) {
    border-left: 1px solid #002E3B !important;
    padding: 2px 20px 0px 10px !important;
}
#breadcrumbs ol li:nth-child(6) {
    border-left: 1px solid #002E3B !important;
    padding: 2px 20px 0px 10px !important;
}
#breadcrumbs ol li:nth-child(7) {
    border-left: 1px solid #002E3B !important;
    padding: 2px 20px 0px 10px !important;
}
#breadcrumbs ol li:nth-child(8) {
    border-left: 1px solid #002E3B !important;
    padding: 2px 20px 0px 10px !important;
}

/* Layout 19 */
/* Make divider nicer */
.listCm .courseMenu .divider hr,
.buttonCm .courseMenu .divider hr {
    height: 1px !important;
}
/* Layout 20 */
/* Test Feedback Options: Answers Table Width */
.test_score {
    width: 11% !important;
}
.test_feedback {
    width: 10%;
}
.test_answersIncorrectColumn {
    width: 14%;
}
/* Layout 21 */
/* Removes scrollbar from VTBE #43498 */
html {
    min-height: 0px !important;
}
/* Layout 22 */
/* Fix grade center grades that disappear when browser width below 368px */
@media only screen and (min-width: 0px) and (max-width: 736px) {
    .gbtable td.cellClick div.gbText,
    .gbtable div.gbText,
    .gbtable td.cellhigh div.gbText {
        width: 34% !important;
        margin-right: 40px !important;
    }
}
/* Layout 23 */
/* Address issues in tablet mode */
/* Spacing of Control Panel list */
@media only screen and (min-width: 737px) and (max-width:1024px) {
    .navPaletteContent h4 {
        padding-bottom: 5px !important;
    }
    .navPaletteContent .submenu {
        padding-top: 14px !important;
    }
}

/* Box shadow on portlets */
#moduleTitle,
.collapsible,
.portlet {
    border-radius: 0px 0px 15px 15px;
    -moz-border-radius: 0px 0px 15px 15px;
    -webkit-border-radius: 0px 0px 15px 15px;
    -webkit-box-shadow: -8px 11px 16px -5px rgba(58, 57, 66, .64);
    -moz-box-shadow: -8px 11px 16px -5px rgba(58, 57, 66, .64);
    box-shadow: -8px 11px 16px -5px rgba(58, 57, 66, .64);
    border: 0px solid #bfc1b842 !important;
    background-color: #FBFAF9 !important;
}
/* Add box shadow to course menu and control panel */
.singleControl,
.menuWrap-inner {
    -webkit-box-shadow: -8px 11px 16px 5px rgba(58, 57, 66, .64);
    -moz-box-shadow: -8px 11px 16px 5px rgba(58, 57, 66, .64);
    box-shadow: -8px 11px 16px 5px rgba(58, 57, 66, .64);
}
/* Add box shadow to content container background */
.container {
    -webkit-box-shadow: 31px 40px 58px -41px rgba(153, 144, 153, 1);
    -moz-box-shadow: 31px 40px 58px -41px rgba(153, 144, 153, 1);
    box-shadow: 31px 40px 58px -41px rgba(153, 144, 153, 1);
}


}
/* Layout 25 */
/* Move Quick Links to top */
#quick_links_wrap {
    top: initial !important;
}
/* Layout 26 */
/* Change width of 'Add Course Menu Item' Popup */
.actionBarMicro .sub li {
    width: 190px !important;
}
/* Layout 27 */
/* Move buttons / action bar slightly to the right so that it lines up with content frames */
.actionBar {
    margin-left: 12px !important;
}
/* Layout 28 */
/* Preview with correct height */
.student-preview-mode {
    margin-top: 60px !important;
}
/* Layout 29 */
/* Adjust bar in certain areas */
div.containerOptions {
    padding-left: 30px !important;
    padding-right: 30px !important;
    margin: 5px auto !important;
}
/* browsing between users on sites such as assignments*/
.user-navigator {
    background: none #fff !important;
}
/* Layout 30 */
/* Make avatar nice on large screens and disable in small screens */
@media (min-width: 1040px) {
    #global-nav .global-top-avatar {
        width: 3em !important;
        height: 3em !important;
        border-radius: 31px 31px 31px 31px !important;
        -moz-border-radius: 31px 31px 31px 31px !important;
        -webkit-border-radius: 31px 31px 31px 31px !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 -0.5em !important;
        margin-left: -15px !important;
    }
    .nav-link {
        background: #fff0 !important;
        color: #fff !important;
    }
}
@media (max-width: 1039px) {
    #global-nav .global-top-avatar {
        display: none !important;
    }
}

/* Layout 31 */
/* Make login buttons better */
@media only screen and (min-width: 1025px) {
    div.global-nav-bar .logout-link {
        background: #005C84 !important;
        margin-right: 0.5em !important;
        color: #FFFFFF !important;
        margin-top: 9px !important;
        width: 72% !important;
        text-indent: 0px !important;
        overflow: visible !important;
        border-radius: 28px 28px 28px 28px !important;
        -moz-border-radius: 28px 28px 28px 28px !important;
        -webkit-border-radius: 28px 28px 28px 28px !important;
        font-family: Arial !important;
        font-size: medium !important;
        font-weight: bold !important;
        padding: 2px 10px 2px 10px !important;
        border: solid #005C84 0px !important;
        transition: all 0.2s ease-in-out !important;
        text-align: center !important;
    }
    div.global-nav-bar .logout-link:hover {
        font-weight: bold !important;
        margin-right: 0.5em !important;
        font-family: Arial !important;
        color: #FFFFFF !important;
        margin-top: 9px !important;
        width: 72% !important;
        text-indent: 0px !important;
        overflow: visible !important;
        background: #495961 !important;
        text-decoration: none !important;
        font-size: medium !important;
        padding: 2px 10px 2px 10px !important;
        border: solid #005C84 0px !important;
        border-radius: 28px 28px 28px 28px !important;
        -moz-border-radius: 28px 28px 28px 28px !important;
        -webkit-border-radius: 28px 28px 28px 28px !important;
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        transition: all 0.2s ease-in-out !important;
        text-align: center !important;
    }
    div.global-nav-bar .logout-link:active {
        transform: translateY(4px) !important;
    }
    div.global-nav-bar .logout-link:focus {
        font-weight: bold !important;
        margin-right: 0.5em !important;
        font-family: Arial !important;
        color: #FFFFFF !important;
        margin-top: 7px !important;
        width: 72% !important;
        text-indent: 0px !important;
        overflow: visible !important;
        background: #4BB694 !important;
        text-decoration: none !important;
        font-size: medium !important;
        padding: 2px 10px 2px 10px !important;
        border: solid #005C84 0px !important;
        border-radius: 9px 9px 9px 9px;
        -moz-border-radius: 9px 9px 9px 9px;
        -webkit-border-radius: 9px 9px 9px 9px;
        text-align: center !important;
    }
    .topGlobalLinks ul li {
        background: #1e876500 !important;
        color: #FFFFFF !important;
        padding: 9px !important;
    }
    .topGlobalLinks ul li .logout:focus {
        background: #fff !important;
        color: #000 !important;
        font-weight: bold !important;
        border-radius: 9px 9px 9px 9px !important;
        -moz-border-radius: 9px 9px 9px 9px !important;
        -webkit-border-radius: 9px 9px 9px 9px !important;
    }
    .topGlobalLinks ul li .logout {
        background: #fff !important;
        color: #000 !important;
        font-weight: bold !important;
        border-radius: 9px 9px 9px 9px !important;
        -moz-border-radius: 9px 9px 9px 9px !important;
        -webkit-border-radius: 9px 9px 9px 9px !important;
        border: 3px solid #E73238 !important;
        text-transform: uppercase !important;
        transition: all 0.5s ease-in-out !important;
    }
    .topGlobalLinks ul li .logout:hover {
        background: #00131D !important;
        color: #fff !important;
        border: 3px solid #EF7D00 !important;
        font-weight: bold !important;
        border-radius: 9px 9px 9px 9px !important;
        -moz-border-radius: 9px 9px 9px 9px !important;
        -webkit-border-radius: 9px 9px 9px 9px !important;
        transition: all 0.5s ease-in-out !important;
    }
}

/* Layout 32 */
/* Fix number of items to grade list in Needs Grading */
.criteriaSummary {
    width: 99% !important;
}
/* Layout 33 */
/* Fix achievement control panel screen */
.mapTabs {
    bottom: 15px;
}
/* Layout 34 */
/* Make GC in Chrome Scoll Bar better */
/* Add border around thumb part to make it clearer */
#nonAccessibleTableDiv ::-webkit-scrollbar-thumb {
    border: 1px solid #00131D;
}
/* Add Scroll Buttons */
#nonAccessibleTableDiv ::-webkit-scrollbar-button:single-button {
    background-color: #005C84;
    display: block;
    border-style: none;
    height: 13px;
    width: 14px;
}
/* Scroll Buttons Hover colour */
#nonAccessibleTableDiv ::-webkit-scrollbar-button:single-button:hover {
    background-color: #E73238;
    transition: all 0.2s ease-in-out !important;
}
/* Up Button */
#nonAccessibleTableDiv ::-webkit-scrollbar-button:single-button:vertical:decrement {
    border-radius: 300px 200px 0px 0px;
    -moz-border-radius: 200px 200px 0px 0px;
    -webkit-border-radius: 200px 200px 0px 0px;
}
/* Down Button */
#nonAccessibleTableDiv ::-webkit-scrollbar-button:single-button:vertical:increment {
    border-radius: 0px 0px 200px 200px;
    -moz-border-radius: 0px 0px 200px 200px;
    -webkit-border-radius: 0px 0px 200px 200px;
}
/* Left button */
#nonAccessibleTableDiv ::-webkit-scrollbar-button:horizontal:decrement {
    border-radius: 200px 0px 0px 200px;
    -moz-border-radius: 200px 0px 0px 200px;
    -webkit-border-radius: 200px 0px 0px 200px;
}
/* Right button */
#nonAccessibleTableDiv ::-webkit-scrollbar-button:horizontal:increment {
    border-radius: 0px 200px 200px 0px;
    -moz-border-radius: 0px 200px 200px 0px;
    -webkit-border-radius: 0px 200px 200px 0px;
}
/* Help Text  */
/* Help 01  */
/* Add warning to Force Completion in Tests */
#fIsForceComplete + label:after {
    content: " (Not Recommended) ";
    color: #8D3970;
    font-weight: bold;
}
span#help_fIsForceComplete.stepHelp.fieldHelp:after {
    content: " If a student's network connection is interrupted they will not be able to complete the assessment.";
    color: #8D3970;
}
/* Help 02  */
/* Remove "copy links to course files" option from course copy */
#copyLinkToCourseFiles,
#copyLinkToCourseFiles + label {
    display: none;
}

/* Help 04  */
/* Add warning to Delegated Grading in Assignments */
span#help_gradingOptions_delegatedGradingId.stepHelp.fieldHelp:after {
    content: " Grades do not appear to the students until the instructor has reconciled each score. Note: once this feature has been enabled it cannot be turned off. ";
    color: #8D3970;
}

/* Help 05 */
/* Hide buttons option in teaching style */
#buttonMenuNavStyle,
#buttonMenuNavStyle + label {
    display: none;
}
/* Help 06 */
/* Add warning to Hide results completely in Tests */
span#help_fIsHideAttempt.stepHelp.fieldHelp:after {
    color: #8D3970 !important;
    content: " Not Recommended: This choice cannot be reversed.  ";
}
/* Help 07 */
/* Users viewing help */
#UserInformation.u_floatThis-left:after {
    content: "The above search box will only return currently enrolled users, if you wish to add new users, click on the \0022 Find Users to Enrol\0022  button above." !important;
    margin-top: 10px !important;
    color: #00131D !important;
    background-color: #FCBC00 !important;
    display: block !important;
    clear: both !important;
    text-align: left !important;
    border: 10px #fff0 dotted !important;
    font-weight: bold !important;
    border-radius: 10px 10px 10px 10px !important;
    -moz-border-radius: 10px 10px 10px 10px !important;
    -webkit-border-radius: 10px 10px 10px 10px !important;
}

/* Text Formatting */
/* Text Format 01 */
/* Title text in main content pane in Content, Announcement, Tool Areas */
#pageTitleText {
    font-weight: bold !important;
}
/* Text Format 02 */
/* Make Grade Center Column Titles Bold */
.gbtable_header div {
    font-weight: bold !important;
}
/* Text Format 03 */
/* Add Footer to every page */
#globalNavPageContentArea:after {
    content: "University of Southampton";
    font-size: .85em;
    color: #00131D;
    display: block;
    clear: both;
    text-align: center;
    bottom: .8em !important;
}
/* Text Format 04 */
/* Make additonal attempt text larger*/
.extraAttempt {
    font-size: 110% !important;
}
/* Text Format 05 */
/* Highlight the cell status area in Grade Centre*/
#cellInfo {
    background-color: rgba(252, 188, 0, .22);
}
/* Text Format 06 */
/* Improve list format in group areas */
.countList li {
    height: 22px;
}
/* Make drop down menu use full width on tablet mode */
@media only screen and (max-width: 1024px) and (min-width: 737px) {
    .appTabs {
        display: table !important;
    }
}
/* Mobile menu */
/* Other fixes for mobile hamburger menu */
@media only screen and (max-width: 1024px) {
    /* Set colour for Global Menu menu item and area below it */
    .main-nav-open div[class^="topTabs"] div[class^="tabWrapper"] {
        background: #00131D !important;
    }
    /* Set Color and background and row height for links in mobile menu */
    #appTabList td a {
        color: #FFFFFF !important;
        background-color: #00131D;
        transition: all 0.1s ease-in-out !important;
        height: 37px;
    }
    /* Set hover color for links in mobile menu */
    #appTabList td a:hover {
        background-color: #495961 !important;
        font-weight: bold !important;
        transition: all 0.2s ease-in-out !important;
    }
    /* Make the bug where the global menu stops clicks on Courses a bit better */
    .global-nav-bar {

        width: 30% !important;
        height: 0px !important;
        color: white !important
    }
    /* Change the presentation of the header area of the mobile menu */
    .global-nav-bar-wrap {
        height: 40px !important;
        background: url('images/logo.png') no-repeat scroll 50% 0% #005c84fc !important;

        padding: .5em 0 0 .5em !important;
        background-size: contain !important;
        background-origin: content-box !important;
        margin: 0px !important;
        border-bottom: #74C9E5 2px solid !important;
    }
}
/* Logout button in mobile view */
@media only screen and (max-width: 736px) {
    /* Phone mode - Hide the icon and position it above the logout box we make */
    .global-nav-bar a.logout-link,
    .global-nav-bar a.logout-link:hover,
    .global-nav-bar a.logout-link:focus {
        background-color: #fff0;
        background-image: none !important;
        width: 75px;
        height: 29px;
        bottom: 22px;
        left: -12px;
    }
}
@media only screen and (min-width: 737px) and (max-width:1024px) {
    /* Tablet mode -Hide the icon and position it above the logout box we make */
    .global-nav-bar a.logout-link,
    .global-nav-bar a.logout-link:hover,
    .global-nav-bar a.logout-link:focus {
        background-color: #fff0;
        background-image: none !important;
        width: 75px;
        height: 28px;
        bottom: 20px;
        left: -11px;
    }
}
@media only screen and (max-width: 1024px) {
    /* Make word Logout appear */
    .global-nav-bar.logout:before {
        content: "Logout";
        font-size: 1em;
        color: #00131D;
        text-align: center;
    }
    /* Make the logout button */
    .global-nav-bar.logout {
        height: 20px!important;
        margin-top: 6px !important;
        background: #E1E8EC !important;
        margin-right: 0.8em !important;
        color: #FFFFFF !important;
        width: 53px !important;
        text-indent: 0px !important;
        overflow: visible !important;
        border-radius: 28px 28px 28px 28px !important;
        -moz-border-radius: 28px 28px 28px 28px !important;
        -webkit-border-radius: 28px 28px 28px 28px !important;
        font-family: Arial !important;
        font-size: medium !important;
        font-weight: bold !important;
        padding: 2px 10px 2px 10px !important;
        border: solid #005C84 0px !important;
        transition: all 0.2s ease-in-out !important;
        text-align: center !important;
        line-height: 1.0;
    }
    .global-nav-bar.logout:hover,
    .global-nav-bar.logout:focus {
        height: 20px!important;
        margin-top: 6px !important;
        background: #FCBC00 !important;
        margin-right: 0.8em !important;
        color: #FFFFFF !important;
        width: 53px !important;
        text-indent: 0px !important;
        overflow: visible !important;
        border-radius: 28px 28px 28px 28px !important;
        -moz-border-radius: 28px 28px 28px 28px !important;
        -webkit-border-radius: 28px 28px 28px 28px !important;
        font-family: Arial !important;
        font-size: medium !important;
        font-weight: bold !important;
        padding: 2px 10px 2px 10px !important;
        border: solid #005C84 0px !important;
        transition: all 0.2s ease-in-out !important;
        text-align: center !important;
        line-height: 1.0;
    }
    .global-nav-bar.logout:active {
        transform: translateY(4px) !important;
    }
}

/* New since July 2019 */
/* Focus of course title within course menu */
#courseMenuPalette h3 a:focus {
    background-color: rgba(255, 255, 255, .85) !important;
    outline-color: rgba(255, 255, 255, 0) !important;
    border: #00131D 1px;
    border-style: hidden hidden double hidden;
    color: #00131D !important;
    transition: outline-offset .2s linear !important;
}

#courseMenuPalette .courseMenu a:focus span {
    color: #00131D !important;
    font-weight: bold;
    transition: outline-offset .2s linear !important;
}

/* Make Hover over course menu make bad colour choices better */
#courseMenuPalette h3 a:hover {
    background-color: white !important;
    transition: outline-offset .2s linear !important;
}
#courseMenuPalette_contents li:hover {
    background-color: white !important;
    transition: outline-offset .2s linear !important;
}
/* Adjust login links for guests in tablet mode */
@media only screen and (max-width: 1024px) {
    .topGlobalLinks ul {
        position: relative;
        top: -30px;
        width: 75px;
        left: 10px;
        background-color: #00131D;
    }
}
/* Adjust login links for guests in phone mode */
@media only screen and (max-width: 736px) {
    .topGlobalLinks ul {
        width: 75px;
        background-color: #00131D;
        position: relative;
        top: -30px;
        right: -24px
    }
}
/* Make Banners responsive */
#pageBanner img {
    max-width: 100%;
}
/* Make responsive banners better in mobile view */
@media only screen and (max-width: 1024px) {
    .customBanner,
    .currentBannerWrapper {
        margin-top: 5px;
    }
    /* Stop breadcrumbs from overflowing in mobile view 
    #breadcrumbs {
        overflow: hidden;
    }*/
    /* Make announcements area not overflow */
    div.localViewToggle {
        width: 97%;
    }
}
/* Review Status button changes */
.button-5,
.button-5:hover {
    padding-left: 0 !important;
    position: relative;
    color: white;
    border: white none;
    background-color: white;
}
.button-5:focus {
    outline: 3px solid #002E3B !important;
    outline-offset: 1px !important;
    transition: outline-offset .2s linear !important;
}
.button-5 img {
    display: none;
}
a[href*="javascript:markReviewed"]::after {
    content: "Confirm you have reviewed this content";
    visibility: visible;
    position: relative;
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
    font-family: Arial;
    color: #fff;
    background: #00131D;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    text-align: center;
    float: left;
}

a:hover[href*="javascript:markReviewed"]::after {
    content: "Confirm you have reviewed this content";
    background: #8D3970;
    transition: all 0.5s ease-in-out !important;
}
a:active[href*="javascript:markReviewed"]::after {
    transform: translateY(4px) !important;
}


a[href*="javascript:markUnreviewed"]::after {
    content: "✓ I have reviewed this content" !important;
    visibility: visible;
    position: relative;
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
    font-family: Arial;
    color: #ffffff;
    background: #005C84;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    text-align: center;
    float: left;
}
/* Lesson plan button 5 link colour fix */
a.button-5.customFormBuilderLabel {
    color: #002E3B !important;
}
/* Make focus on global nav areas 3px */
.global-nav-bar a:focus {
    outline: 3px solid !important;
    outline-offset: 3px !important;
    transition: outline-offset .2s linear !important;
}


/* Make instructor cog a bit better */
@media (max-width: 1024px) {
    .breadcrumb-controls {
        background: #00131D;
    }
    .switcherLabel {
        color: #fff !important;
        font-weight: bold !important;
    }
    .student-preview-control a::after {
        content: attr(title);
        color: #fff;
        position: absolute;
        right: 45px;
        top: 10px;
    }
}

/* Improve spacing around name so it is not */
/* obscured by the badge count */
@media (min-width: 1040px) {
    .nav-link {
        padding: 0px 57px 10px 25px;
        background: #002E3B !important;
    }
}
/* Make details around content items clearer */
/* Make heading details e.g. 'Availability', 'Attached files' bold and black */
.detailsLabel {
    font-weight: bold;
    color: #00131D
}

/* Make details after heading bold */
.detailsValue {
    font-weight: bold;
    color: #00131D;
}
/* Prevent attachments from being bold */
ul.attachments {
    font-weight: normal;
}
/* Improve accessibility of keyboard navigation */
/* Inputs and selections */
input:focus,
select:focus,
.datePickerButton:focus,
.timePickerButton:focus {
    outline: 3px solid !important;
    outline-offset: 2px !important;
    transition: outline-offset .2s linear !important;
}

/* Buttons */
.mainButton a:focus,
.secondaryButton a:focus,
.path a:focus,
div#puller a:focus,
.item a:focus,
.student-preview-control a:focus {
    outline: 3px solid #00131D !important;
    outline-offset: 3px !important;
    transition: outline-offset .2s linear !important;
}

/* Content attachments and My Institution links */
.attachments a:focus,
.portlet a:focus {
    outline: 2px solid #00131D !important;
    outline-offset: 1px !important;
    transition: outline-offset .2s linear !important;
}
/* Helps */
.helpLink a:focus {
    outline: 3px solid !important;
    outline-offset: 2px !important;
    transition: outline-offset .2s linear !important;
}

.helphelp a:focus {
    outline: 3px solid !important;
    outline-offset: 2px !important;
    transition: outline-offset .2s linear !important;
}
/* Receipt x to close */
.receipt a.close:focus {
    outline: 7px solid #00131D !important;
    outline-offset: 2px !important;
    transition: outline-offset .2s linear !important;
}

/* More button changes */
/* Button 4 is cancel on reorder screen */
/* And go under files area and in user search */
.button-4 {
    color: #fff !important;
    background-color: #495961 !important;
    border-radius: 4px;
    text-decoration: none;
    box-shadow: none !important;
    border: 0px !important;
    text-shadow: none !important;
    font-size: 100% !important;
    font-weight: normal;
    vertical-align: middle;
    padding: 6px 16px 7px !important;
}
.button-4:active,
.button-3:active {
    transform: translateY(4px) !important;
}

.button-4:hover {
    background-color: #00131D !important;
}
.button-4:focus,
.button-3:focus {
    outline: 3px solid #00131D !important;
    outline-offset: 1px !important;
    transition: outline-offset .2s linear !important;
}
/* Button 3 is submit on reorder screen */
.button-3 {
    color: #fff !important;
    background-color: #00131D !important;
    border-radius: 4px;
    text-decoration: none;
    box-shadow: none !important;
    border: 0px !important;
    text-shadow: none !important;
    font-size: 100% !important;
    font-weight: normal;
    vertical-align: middle;
    padding: 6px 16px 7px !important;
}
.button-3:hover {
    background-color: #00131D !important;
}
/* Button 2 focus */
.button-2:focus {
    color: #00131D !important;
    background-color: #E1E8EC !important;
    transition: outline-offset .2s linear !important;
}
/* More focus elements */
.sortable a.sortheader:focus,
.contextMenuContainer a:focus,
.cmdiv a:focus,
.breadcrumbs a:focus,
.keyboardAccess .selectArrows a:focus,
.keyboardAccess .y-arrows a:focus,
.keyboardAccess .y-arrows button:focus,
.keyboardAccess .selectArrows button:focus,
.portlet .subCategories li a:focus,
.table-data-cell-value a:focus,
button#moveSelButton:focus,
button#moveAvailButton:focus,
.stepHelp a:focus {
    outline: 3px solid #00131D !important;
    outline-offset: 2px !important;
    transition: outline-offset .2s linear !important;
}

a:focus {
    transition: outline-offset .2s linear !important;
}

.genericButton:focus,
.genericButtonImg:focus,
.browse:focus,
.browseIcon:focus,
input[type="submit"].genericButton:focus,
.rumble h3 + ul > li > a:focus,
.rumble_top h3 + ul > li > a:focus,
.paging a:focus,
.itemHeaderControl a:focus,
.actionMenuButton:focus,
.button-3:focus,
.button-4:focus,
.button-3-img:focus,
.button-4-img:focus,
.navPaletteContent ul li:first-child .paletteSearch .button-4:focus,
h3#cs_search + ul div.none:first-child .button-4:focus,
#toolsSearchBox + .button-4:focus,
.treeContainer .tree li a.button-4-img:focus,
.rumble a:focus,
.rumble_top a:focus {
    outline: 3px solid #00131D !important;
    outline-offset: 2px !important;
    transition: outline-offset .2s linear !important;
}
.landingPageColumn ul li a:focus {
    outline: 3px solid #00131D !important;
    outline-offset: 2px !important;
    transition: outline-offset .2s linear !important;
}

.vtbegenerated a:focus {
    outline: 2px solid #00131D !important;
    outline-offset: 2px !important;
    transition: outline-offset .2s linear;
}

.landingPageColumn ul li a:focus {
    outline: 3px solid #00131D !important;
    outline-offset: 2px !important;
    transition: outline-offset .2s linear !important;
}

/* Make symbol showing the sorting in the grade centre larger */
.gbtable_header thead tr th.sortedDown {
    background-size: 25px;
}

.gbtable_header thead tr th.sortedUp {
    background-size: 25px;
}
/* Quick Links focus navigation */
.content-lite ul.shortcut-list a:focus {
    outline: 3px solid #00131D !important;
    outline-offset: 2px !important;
    transition: outline-offset .2s linear !important;
}
/* Make unread notifications in discussion board accessible */
.unread-count {
    background-color: #D5007F !important;
}
span.unread-count.none {
    background-color: #495961 !important;
}
/* Stop GC header from changing size */
.gbtable_header div {
    font-size: 96%;
    height: 60px;
}
/* Make these colors accessible with white background - use plain black*/
.portlet .courseRole,
.portlet .dataBlockLabel,
.portlet .eventDate,
.portlet,
.portlet h3,
.portlet h4,
.noItems.container-empty .main-message,
.noItems.container-empty .secondary-message,
.reqfield,
div.label,
.stepcontent li.required,
.stepcontent .stepHelp,
.stepHelp,
.taskbuttonhelp {
    color: #231F20;
}
.read-on,
.helpLink a.browseIcon {
    background-color: #495961;
}
.read-on:hover,
.helpLink a.browseIcon:hover {
    background-color: #00131D;
}

/* Add info icon next to attachments and info */
.detailsLabel:before {
    content: '\f05a  ';
    font-family: 'FontAwesome';
    color: #495961;
    font-size: 130%;
}



/* Accessible logout box focus */
@media only screen and (min-width: 1024px) {
    div.global-nav-bar .logout-link:focus {
        background: #8D3970 !important;
    }
}







/* Puller */
/* Add to bottom of app_nav.css */
/* click to maximize the menu when hidden... button version */
@media only screen and (min-width: 1025px) {

    #puller.pullcollapsed a,
    #puller a {
        height: 40px;
        width: 40px;
        opacity: 1;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }
    /* Collapsed  puller box inactive */
    /* Animate using pulse */
    #puller.pullcollapsed a {
        background: no-repeat center center #E73238;
        animation: pulse 4s infinite !important;
    }
    /* Normal puller box inactive */
    #puller a {
        background: no-repeat center center #dbd7cb;
    }
    /* TBC */
    #puller a img {
        display: none;
    }
    /* TBC */
    #puller {
        right: -40px!important;
        top: 0;
    }
    /* TBC */
    #puller a:after {
        left: 15px;
    }
    /* Colour of arrow area of Normal puller (points left) */
    #puller a:after {
        position: relative;
        right: 0;
        top: 0;
        border: 0;
        text-shadow: none;
        padding: 0;
        background-color: #dbd7cb;
        line-height: 32px;
        opacity: 1;
    }
    /* Colour of arrow area of Collapsed puller (points right) */
    /* Animate using pulse2 */
    #puller.pullcollapsed a:after {
        position: relative;
        right: 0;
        top: 0;
        border: 0;
        text-shadow: none;
        padding: 0;
        background-color: #E73238;
        animation: pulse2 4s infinite !important;
        line-height: 32px;
        opacity: 1;
        left: 15px;
    }
    /* Hover Colour of normal (non focussed) puller box  */
    #puller a:hover {
        background-color: #dbd7cb;
    }
    /* Focus colour of normal puller box (after it has been clicked but nothing clicked afterwards) */
    #puller a:focus {
        background-color: #dbd7cb;
    }
    /* So that you don't step on it with the hide menu button */
    #pageTitleBar {
        padding-left: 0px;
        padding-top: 0px;
    }
    /* Move content across a bit so it is not covered by puller */
    div.shadow {
        margin-left: 15px !important;
    }
    #pageTitleDiv {
        padding-top: 0px;
    }
    /* Changes receipt / error bars to match up with hide menu button */
    .contentPane .receipt {
        margin-left: 25px;
        margin-top: -2px;
        line-height: 13px;
    }
    .receipt[id*="receipt_nested"] {
        margin-left: 40px;
        line-height: 12px;
    }
    receipt.bad {
        margin-left: 40px;
        line-height: 12px;
    }
    /* Centre page title */
    .pageTitle {
        text-align: center;
        padding-bottom: 0px;
    }
    /* Move alerts like 'System Wide Survey' so that they aren't behind the puller */
    .infoAlert span {
        padding: 5px 140px 5px 20px;
    }
    /* Set position of Learning Module TOC so it looks ok with the puller */
    .tocWrapper {
        margin-top: 49px;
        margin-left: 10px;
    }
    /* Set position of lesson plan header */
    /* Fix width of bar that appears */
    /* when creating lesson plans */
    .lesson-plan-page .mapTabs {
        margin: 0px 1px 5px 10px;
    }

    /* Animation cycle for pulse */
    @keyframes pulse {
        0% {
            background-color: #dbd7cb;
        }
        100% {
            background-color: #E73238;
        }
    }
    /* Animation cycle for pulse2 */
    @keyframes pulse2 {
        0% {
            background-color: #dbd7cb;
        }
        100% {
            background-color: #E73238;
        }
    }
}


/* Mobile puller */
@media only screen and (max-width: 1024px) {
    #puller.pullcollapsed a:after {
        color: #00131D !important;
    }
    /*open icon normal state*/
    #puller.pullcollapsed {
        animation: pulse3 20s infinite !important;
        border: black 2px solid;
    }
    /*mouse over close icon, and active after click */
    #puller a,
    #puller a:hover,
    #puller a:focus,
    #puller a:focus {
        background-color: #E73037;
        transition: all 0.1s ease-in-out !important;
    }


    /* Animation cycle for pulse3 */
    @keyframes pulse3 {
        0% {
            background-color: #fff;
        }
        70% {
            background-color: #E1E8EC;
        }
        100% {
            background-color: #fff;
        }
    }
}
@media (prefers-reduced-motion: reduce) {
    #puller.pullcollapsed a {
        animation: pulse 0s infinite !important;
    }
    #puller.pullcollapsed a:after {
        animation: pulse2 0s infinite !important;
    }
    #puller.pullcollapsed {
        animation: pulse3 0s infinite !important;
    }
}












































Comments











Post a Comment























Popular posts from this blog









Should you use Significant Figures or Decimal Places when setting Answer Set options for Calculated Formula questions in Blackboard?






-














Image







 Blackboard tests are a hot topic at the moment. I recently recently received a question from Dr Gabriel Weymouth :     "I'm positive this is clearly documented somewhere, but I can't find it. How do you make BB apply the correct error margins for calculated formula problems. The logical way of doing it (setting a, say, 2% margin) doesn't work:"








Read more