/* Module & General CSS (was core_layout.css) */

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #3b3b3b;
    margin: 0;
    padding: 10px;
    background: url("pix/bg.png") repeat center center; /* get 404 if not full path*/
    background-color: #f5f5f5;
}
body.haniscontrol {
    margin: 0;
    background: transparent;
}

/* ensure Hinst images don't overflow iframe */
canvas {
    max-width:100%
}

/* mod form */
/* move Delete field to right of Published */
#mform1 div[id$='_hinst_delete'].fitem,
#mform1 div[id$='_hinst_published'].fitem {
    display: inline-block;
}
#mform1 div[id$='_hinst_delete'].fitem {
    margin-left: 61px;
}
#mform1 textarea.readonly {
    color: grey;
}

/* hide some 'Common module settings' */
#page-mod-wfsim-mod #fitem_id_cmidnumber,
#page-mod-wfsim-mod #fitem_id_groupmode {
    display: none;
}

/* Hide some fields in activity edit form */
#fitem_id_simpage_title,
#fitem_id_hcommon_controls_style, /* these in Player settings */
#fitem_id_hcommon_buttons_style,
#fitem_id_hcommon_framelabel_style {
    display: none;
}

/* lessonnotes title on textarea, vbl window seem to appear on right of widget when new, so force back */
#fitem_id_simpage_lessonnotes, #fitem_id_simpage_variablewindow  {
   clear: left;
}


/* index.html */
#indexpage #wrapper {
    margin: 0 20px 20px 20px;
}
#indexpage #intro div {
    margin-bottom: 20px;
}
#indexpage #intro #linelast {
    font-weight: bold;
}

/* intro.html */
#intropage {
    background: url("pix/bg2.png") repeat center center;
}
#intropage .titles {
    text-align: center;
}

/* sim.html */
#simpage .wrapper {
    position:relative;
}
#simpage .banner img {
    max-width:1085px;
}
#simpage .brand {
    max-width:1085px;
    height:36px;
    line-height:36px;
    margin:5px 0 10px;
    background: #13100d url("pix/brand.png") no-repeat right center;
}
#simpage iframe {
    position: absolute;
    left: 210px;
    top: 118px;
    padding:0;
    border:none;
    background: #ededed url("pix/bg2.png") repeat center center;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.6);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#simpage #ticktock {
    position: absolute;
    left: 0;
    top: 0;
    background: url("pix/bg2.png") repeat center center;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}
#simpage #ticktock #clock {
    width: 200px;
    height: 200px;
}

#simpage #casedate {
    position: absolute;
    left: 0;
    top: 200px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    width: 200px;
    padding: 0 0 10px;
    background: url("pix/bg2.png") repeat center center;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -o-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

#simpage #left-nav {
    position: absolute;
    left: 10px;
    top: 260px;
    font-size: 11px;
    text-align: left;
    width: 200px;
    height: 658px;
    overflow: scroll;
}
#simpage #left-nav h2 {
    font-size: 15px;
    text-transform: uppercase;
    color: #3b3b3b;
    margin-left: 10px;
    padding-left: 15px;
}
#simpage #left-nav a,
#simpage #left-nav a:link,
#simpage #left-nav a:visited {
    font-size: 14px;
    color: #4682B4;
    text-decoration: none;
    font-weight: bold;
}
#simpage #left-nav a:hover,
#simpage #left-nav a:active {
    text-decoration:underline;
}
#simpage #lessonnotes {
    margin: 0;
    padding-left: 30px;
}
#simpage #liveupdates {
    margin: 0;
    padding-left: 15px;
}
#simpage #lessonnotes li {
    list-style-type:none;
    margin: 0 0 10px -6px;
    padding-left: 15px;
}
#simpage #lessonnotes li.note {
    display: none;
}
#simpage #credits a {
    position: absolute;
    left:157px;
    top: 3px;
    font-size: 12px;
    color: #4682b4;
}
#simpage #return a {
    position: absolute;
    left: 5px;
    top: 3px;
    font-size: 12px;
    color: #4682b4;
}
#simpage #pause-run {
    position: absolute;
    top: 930px;
    font-size: 18px;
    padding: 5px 5px 30px;
}
#simpage #pause-run #buttons {
    position: relative;
    top: -38px;
    left: 15px;
}
#simpage #pause-run #ctrlfile {
  font-size: 12px;
  margin-top: 5px;
}
#simpage #pause-run select {
    padding:5px;
    margin:0 10px;
    border-radius:2px;
}

/* Sim navigation bar */
#simpage #top-menu {
    position: absolute;
    left: 210px;
    top: 0;
    width: 1000px;
    min-height:90px;
    margin: 0 0 3em 0;
    padding: 10px;
    list-style: none;
    background: url("pix/bg2.png") repeat center center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#simpage #top-menu li {
    float: left;
}
#indexpage .startbutton,
#simpage #pause-run button,
#simpage #top-menu li button {
    display: inline-block;
    text-decoration: none;
    color: #3b3b3b;
    border: 1px solid #fff;
    background: #ffffff;
    background-image: -webkit-linear-gradient(top, #ffffff, #ebebeb);
    background-image: -moz-linear-gradient(top, #ffffff, #ebebeb);
    background-image: -ms-linear-gradient(top, #ffffff, #ebebeb);
    background-image: -o-linear-gradient(top, #ffffff, #ebebeb);
    background-image: linear-gradient(to bottom, #ffffff, #ebebeb);
    color: #3b3b3b;
    font-size: 14px;
    padding: 10px 15px;
    text-decoration: none;
    box-shadow: 0 1px 1px rgba(0,0,0,0.4);
    text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}
#indexpage .startbutton:hover,
#simpage #top-menu li button:hover {
    color: #3b3b3b;
    cursor: pointer;
    background: #ffffff;
    background-image: -webkit-linear-gradient(top, #ebebeb, #ffffff);
    background-image: -moz-linear-gradient(top, #ebebeb, #ffffff);
    background-image: -ms-linear-gradient(top, #ebebeb, #ffffff);
    background-image: -o-linear-gradient(top, #ebebeb, #ffffff);
    background-image: linear-gradient(to bottom, #ebebeb, #ffffff);
}
#simpage #top-menu li button.active {
    color: #3b3b3b;
    background: #bebebe;
    background-image: -webkit-linear-gradient(top, #bebebe, #efefef);
    background-image: -moz-linear-gradient(top, #bebebe, #efefef);
    background-image: -ms-linear-gradient(top, #bebebe, #efefef);
    background-image: -o-linear-gradient(top, #bebebe, #efefef);
    background-image: linear-gradient(to bottom, #bebebe, #efefef);
    border: 1px solid #aaaaaa;
    box-shadow: 0 1px 1px rgba(0,0,0,0.4), inset 0 3px 3px rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 rgba(255,255,255,1);
}

#indexpage .startbutton {
    font-weight:bold;
    color:#ffffff;
    text-shadow:none;
    margin:0 20px 10px;
    border-color:#379418;
    background: #94d934;
    background-image: -webkit-linear-gradient(top, #94d934, #379418);
    background-image: -moz-linear-gradient(top, #94d934, #379418);
    background-image: -ms-linear-gradient(top, #94d934, #379418);
    background-image: -o-linear-gradient(top, #94d934, #379418);
    background-image: linear-gradient(to bottom, #94d934, #379418);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}
#indexpage .startbutton:hover {
    color:#ffffff;
    background: #379418;
    background-image: -webkit-linear-gradient(top, #379418, #94d934);
    background-image: -moz-linear-gradient(top, #379418, #94d934);
    background-image: -ms-linear-gradient(top, #379418, #94d934);
    background-image: -o-linear-gradient(top, #379418, #94d934);
    background-image: linear-gradient(to bottom, #379418, #94d934);
}
#simpage #top-menu .nav2 {
    position: absolute;
    left: 0;
    top: 58px;
    width: 1000px;
    margin: 0 0 0 0;
    padding: 0 10px 0;
    list-style: none;
    background: url("pix/bg2.png") repeat center center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#simpage #top-menu .nav2 li {
    float: left;
    display: none;
}
#simpage #top-menu .nav2 li button {
    display: block;
    margin: 0 0 10px;
}
#simpage #top-menu #nav3 li button {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #3b3b3b;
}
#simpage #top-menu .nav1:last-of-type .nav2 button,
#simpage #top-menu li:first-of-type .nav2 li button,
#simpage #top-menu li .nav2 li:last-of-type button {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
#simpage #top-menu .nav1:last-of-type button,
#simpage #top-menu    li .nav2 li:last-of-type button,
#simpage #top-menu    li:last-of-type .nav2 li:last-of-type button {
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}
#simpage #top-menu .nav1:first-of-type button,
#simpage #top-menu .nav1 .nav2 li:first-of-type button,
#simpage #top-menu    li:first-of-type .nav2 li:first-of-type button,
#simpage #top-menu    li:last-of-type .nav2 li:first-of-type button {
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}
#simpage #pause-run button {
    margin: 2px 0 2px 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#simpage #pause-run button:hover {
    color: #ff0000;
    cursor: pointer;
    background: #ffffff;
    background-image: -webkit-linear-gradient(top, #ebebeb, #ffffff);
    background-image: -moz-linear-gradient(top, #ebebeb, #ffffff);
    background-image: -ms-linear-gradient(top, #ebebeb, #ffffff);
    background-image: -o-linear-gradient(top, #ebebeb, #ffffff);
    background-image: linear-gradient(to bottom, #ebebeb, #ffffff);
}



/* hanis control files */
.haniscontrol {
    width: 800px;
}
.haniscontrol #handiv {
    width: 800px;
    padding-bottom:10px;
    background-color: transparent;
}
.haniscontrol #handiv div {
    padding:5px !important;
}
.haniscontrol #handiv span {
    margin-left:0 !important;
}
.haniscontrol #handiv button {
    width:40px;
    position:relative;
    text-indent: -9999px;
    display: inline-block;
    color: #3b3b3b;
    font-size: 14px;
    margin:0 10px 0 0;
    padding: 10px 10px;
    text-decoration: none;
    border: 1px solid #fff;
    background: #ffffff;
    background-image: -webkit-linear-gradient(top, #ffffff, #ebebeb);
    background-image: -moz-linear-gradient(top, #ffffff, #ebebeb);
    background-image: -ms-linear-gradient(top, #ffffff, #ebebeb);
    background-image: -o-linear-gradient(top, #ffffff, #ebebeb);
    background-image: linear-gradient(to bottom, #ffffff, #ebebeb);
    box-shadow: 0 1px 1px rgba(0,0,0,0.4);
    text-shadow: 0 1px 0 rgba(255,255,255,1);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.haniscontrol #handiv button:before {
    content:"";
    width:40px;
    height:37px;
    position:absolute;
    top:0;
    left:0;
    background-image: url("pix/sprite.png");
    background-repeat: no-repeat;
}
.haniscontrol #handiv button.startstop:before {
    background-position: -3px center;
}
.haniscontrol #handiv button.startstop.stop:before {
    background-position: -84px center;
}
.haniscontrol #handiv button.speed.slower:before {
    background-position: -122px center;
}
.haniscontrol #handiv button.speed.faster:before {
    background-position: -159px center;
}
.haniscontrol #handiv button.step.back:before {
    background-position: -197px center;
}
.haniscontrol #handiv button.step.forward:before {
    background-position: -238px center;
}
.haniscontrol #handiv button.looprock:before {
    background-position: -274px center;
}
.haniscontrol #handiv button.looprock.loop:before {
    background-position: -305px center;
}
.haniscontrol #handiv button.zoom:before {
    background-position: -343px center;
}
.haniscontrol #handiv button.zoom.on:before {
    background-position: -383px center;
}
.haniscontrol #handiv button.first:before {
    background-position: -422px center;
}
.haniscontrol #handiv button.last:before {
    background-position: -462px center;
}
.haniscontrol #handiv button:focus,
.haniscontrol #handiv button:hover {
    cursor:pointer;
    background: #ffffff;
    background-image: -webkit-linear-gradient(top, #ebebeb, #ffffff);
    background-image: -moz-linear-gradient(top, #ebebeb, #ffffff);
    background-image: -ms-linear-gradient(top, #ebebeb, #ffffff);
    background-image: -o-linear-gradient(top, #ebebeb, #ffffff);
    background-image: linear-gradient(to bottom, #ebebeb, #ffffff);
}
.haniscontrol #handiv button.framelabel {
    text-indent:0;
    font-size:14px;
    background:#3B3B3B;
    color:#FFFFFF;
    border:none;
    border-radius:4px;
    box-shadow:none;
    padding:12px;
    width:220px;
}
.haniscontrol #handiv button.framelabel:before {
    background:transparent;
}
.haniscontrol #handiv button.framelabel:focus,
.haniscontrol #handiv button.framelabel:hover {
    cursor:inherit;
    opacity:1;
}

/* hanis hinst widget */
#ddgroup {
    border: solid 1px #d5d5d5;
    position: absolute;
    top: 300px;
    background: white;
    padding: 20px;
    box-shadow:0 0 10px rgba(0,0,0,0.5);
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
}
#ddgroup .title {
    font-size: 21px;
    text-align: left;
    margin: 0 0 15px 5px;
}
#ddgroup .row {
    clear: left;
    height: 95px;
    width: 225px;
    margin: 0 0 2px;
    background-color: #f5f5f5;
    position: relative; /* set 'positioned' element for button positions */
}
#ddgroup .col.rowerror,
#ddgroup .hdr.colerror,
#ddgroup .dropzone.colerror {
    border: dotted 1px red;
}
#ddgroup .group {
    clear: left;
    margin: 10px 10px 10px 10px;
}
#ddgroup .dropzone {
    float: left;
    width: 100px;
    height: 80px;
    border: dotted 1px grey;
    margin: 5px 10px 5px 5px;
}
#ddgroup .fnameholder {
    float: left;
    height: 20px;
    margin: 12px 5px 0 0;
    font-size: 12px;
    background: #fff;
    padding: 0 2px 0 2px;
}
#ddgroup .fnameholder .addimage {
    font-style: italic;
    background: #fff;
}
#ddgroup .flabelname {
    float: left;
    margin: 7px 0 0 5px;
}
#ddgroup input.labelname {
    width: 65px;
    margin-bottom: 5px;
}
#ddgroup .fuploadstatus {
    float: left;
    height: 20px;
    margin: 10px 0 5px 5px;
    width: 80px;
    text-align: center;
    line-height: 25px;
    line-height: -moz-block-height;
    font-size: 12px;
}

/* pseudo-classes work? Don't seem to yet
#ddgroup .dropzone:valid-drop-target,
#ddgroup .dropzone:invalid-drop-target,
#ddgroup .dropzone:active-drop-target {
    border: solid 1px orange;
} */
/* dummy styles that are used up in hinst.js */
#ddgroup .dropzone #dragenterstyle,
#ddnotes .dropzone #dragenterstyle {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
}
#ddgroup .dropzone #dragleavestyle,
#ddnotes .dropzone #dragleavestyle {
    box-shadow: none;
}
#ddgroup .dropzone #dropzonestyle,
#ddnotes .dropzone #dropzonestyle {
    box-shadow: none;
}

/* button on mod edit page */
.openhinst {
    display: inline-block;
    padding: 4px 12px;
    margin: 0 5px 10px 265px;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color: #b3b3b3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
.openhinst:hover {
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#f5f5f5,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#f5f5f5),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#f5f5f5,#e6e6e6);
    background-image: -o-linear-gradient(top,#f5f5f5,#e6e6e6);
    background-image: linear-gradient(to bottom,#f5f5f5,#e6e6e6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5',endColorstr='#e6e6e6',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}


#exit.group::before,
#exitbulk::before,
#msgboxexit::before,
#ddgroup .deleterow::before,
#ddgroup .deletecol::before,
#ddgroup .deletecol::before {
    font-family:verdana, sans-serif;
    content: 'X';
}


.openhinst,
#exit.group,
#exitbulk,
#msgboxexit,
#ddgroup #addrow,
#ddgroup #addcol,
#ddgroup #addcolbulk,
#ddgroup .deleterow,
#ddgroup .deletecol,
#ddgroup #saveselection,
#ddgroup #savebulk,
#ddmenu #savemenu,
#ddnotes #savenotes {
    display: inline-block;
    padding: 4px 12px;
    margin: 5px;
    float: left;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color: #b3b3b3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
.openhinst {
    margin: 5px 5px 5px 265px;
}

.openhinst:hover,
#ddgroup #addrow:hover,
#ddgroup #addcol:hover,
#ddgroup #addcolbulk:hover,
#ddgroup .deleterow:hover,
#ddgroup .deletecol:hover,
#ddgroup #saveselection:hover,
#ddgroup #savebulk:hover {
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#f5f5f5,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#f5f5f5),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#f5f5f5,#e6e6e6);
    background-image: -o-linear-gradient(top,#f5f5f5,#e6e6e6);
    background-image: linear-gradient(to bottom,#f5f5f5,#e6e6e6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5',endColorstr='#e6e6e6',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

#ddgroup .fnameholder .addimage {
    font-size: 11px;
    font-style: italic;
    font-weight: normal;
    padding: 2px 8px;
    margin: 0 5px;
}

#ddgroup #addrow,
#ddgroup #addcol,
#ddgroup #addcolbulk,
#ddgroup #saveselection,
#ddgroup #savebulk  {
    display: block;
    clear: none;
}

#ddgroup #saveselection,
#ddgroup #savebulk {
    float: left;
}

#ddgroup .deletecol,
#ddgroup .deleterow,
#ddgroup #msgboxexit {
    font-size: 8px;
    font-weight: bold;
    float: right;
    padding: 1px 3px;
    margin-top: 12px;
    line-height: normal;
    color: #fff;
    text-shadow: none;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#e50000,#b70000);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#e50000),to(#b70000));
    background-image: -webkit-linear-gradient(top,#e50000,#b70000);
    background-image: -o-linear-gradient(top,#e50000,#b70000);
    background-image: linear-gradient(to bottom,#e50000,#b70000);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e50000',endColorstr='#b70000',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
#ddgroup .deletecol:hover,
#ddgroup .deleterow:hover {
    color: #fff;
    text-shadow: none;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#bf0000,#b70000);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#bf0000),to(#b70000));
    background-image: -webkit-linear-gradient(top,#bf0000,#b70000);
    background-image: -o-linear-gradient(top,#bf0000,#b70000);
    background-image: linear-gradient(to bottom,#bf0000,#b70000);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf0000',endColorstr='#b70000',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
#ddgroup .deleterow {
    position: absolute;
    top: 38%;
    right: 5px;
    margin: 5px 0;
}
#ddgroup .deletecol {
    margin: 8px 5px 5px 0;
}


#exit.group,
#exitbulk {
    right: 10px;
    top: 10px;
    padding: 3px 5px;
    font-size: 10px;
    line-height: 10px;
    color: #fff;
    position: absolute;
    background-color: #333333;
    background-image: -moz-linear-gradient(top,#6b6b6b,#3b3b3b);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#6b6b6b),to(#3b3b3b));
    background-image: -webkit-linear-gradient(top,#6b6b6b,#3b3b3b);
    background-image: -o-linear-gradient(top,#6b6b6b,#3b3b3b);
    background-image: linear-gradient(to bottom,#6b6b6b,#3b3b3b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b6b6b',endColorstr='#3b3b3b',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

#exit.group:hover,
#exitbulk:hover {
    background-color: #4b4b4b;
    background-image: -moz-linear-gradient(top,#4b4b4b,#3b3b3b);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#4b4b4b),to(#3b3b3b));
    background-image: -webkit-linear-gradient(top,#4b4b4b,#3b3b3b);
    background-image: -o-linear-gradient(top,#4b4b4b,#3b3b3b);
    background-image: linear-gradient(to bottom,#4b4b4b,#3b3b3b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4b4b4b',endColorstr='#3b3b3b',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}


/* overlay controls */
#ddgroup .hrow {
    height: 35px;
    margin: 0 0 2px;
    background: #e0e0e0;
}
#ddgroup .hrow .hdr {
    float: left;
}
#ddgroup .hrow .hdr {
    width: 118px; /* width of dropzone col (100) plus its margins */
}
#ddgroup .hrow .hdr#c0 {
    width: 210px;
    font-weight: bold;
    line-height: 35px;
    text-transform: uppercase;
    margin: 0 0 0 0px;
    text-align: center;
}
#ddgroup .hdr input {
    float: left;
    width: 76px;
    margin: 2px 0 0 4px;
}
#ddgroup .col .fnameholder {
    margin: 7px 0 0 -103px;
}
#ddgroup .col .fuploadstatus {
    margin: 28px 0 0 -96px;
    padding: 0 2px;
}
#ddgroup .col0 {
    float: left;
    clear: left;
    width: 210px
}
#ddgroup .col0 .fnameholder {
    margin: 7px 0 0 5px;
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#ddgroup .col0 .fuploadstatus {
    margin: 0 0 5px 5px ;
}
#ddgroup .fuploadstatus.error {
    color: red;
    background-color: white;
    width: 37px;

}
#ddgroup .fuploadstatus.ok {
    color:green;
    background-color: white;
    width: 20px;
}

#ddgroup .msgbox {
    border: solid 1px #d5d5d5;
    position: absolute;
    top: 0px;
    left: 64px;
    background: white;
    padding: 5px;
    box-shadow:0 0 10px rgba(0,0,0,0.5);
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
}
#ddgroup .msgtext,
#ddgroup #msgboxexit {
    float: left;
    margin: 0 0 0 5px;
}
#ddgroup .msgtext {
    font-size: 12px;
    color: red;
    width: 164px;
}


/* bulk */
#ddgroup #bulk {
    position: absolute;
    Xtop: 101px;
    background-color: white;
    border: solid black 1px;
    z-index: 100;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    width: 287px;  /* relate to dropzone wxh */
    height: 300px;
}

#ddgroup .ui-draggable-handle {
    cursor: crosshair;
}

#ddgroup #bulk #progress {
  position: absolute;
  top: 6px;
  right: 90px;
  background-color: white;
  height: 36px;
  width: 36px;
}

#ddgroup #bulk .ui-progressbar-overlay {
  background-image: url("pix/file-loader.gif");
  background-repeat: no-repeat;
  height: 36px;
}

#ddgroup #bulk #bulkhdr {
    margin-top: 15px;
}

#ddgroup #bulk .fnameholder {
    display: none;
    Xmargin: -163px  5px 0px 91px;
}

#ddgroup #bulk .dropzone {
    margin: 5px 0px 5px 5px;
    width: 272px;
    height: 200px;
    overflow: auto;
}
#ddgroup #bulk .dropzone img {
    margin: 2px 0 0 2px;
}

#ddgroup #bulk #exitbulk {
    top: 5px;
    margin: 5px 0 0 0;
}
#ddgroup #bulk .ui-progressbar-value {
  background-color: #aaaaaa;
  height: 12px;
}

span.grippie img {
    cursor: move;
}

/* Menu */
#ddmenu {  /* positioned statically*/
    font-size: 13px;
    Xborder-top: solid 1px #dddddd;
}
#ddmenu .mtitle {
    float: left;
    font-size: 14px;
    font-weight: 600;
    width: 245px;
    font-weight: 600;
    padding-top: 5px;
    text-align: right;
}
#ddmenu .mtitle .helptooltip {
    vertical-align: bottom;
}
#ddmenu li.menuhdr {
    display: block; /* so can set width */
    width: auto;
    margin: 0;
    border-right: 1px solid #f7f7f7;
    background: #e5e5e5;
}
#ddmenu li.menuhdr div {
    display: table-cell;
    font-weight: 600;
    line-height: normal;
    vertical-align: middle;
    padding: 5px 6px 5px 10px;
    border-right: 1px solid #f7f7f7;
    background: #e5e5e5;
}
#ddmenu li.menuhdr#menuhdr1 .title {
    width: 243px;
    padding-left: 31px;
}
#ddmenu li.menuhdr#menuhdr2 .title {
    width: 173px;
    padding-left: 60px;
}
#ddmenu li.menuhdr .fv {
    width: 24px;
}
#ddmenu li.menuhdr .dtm {
    width: 63px;
}
#ddmenu li.menuhdr .gap {
    width: 55px;
}


#ddmenu #initext {
    font-size: 14px;
    margin-left: 250px;
    padding-top: 7px;
}
fieldset.collapsed .fcontainer {
    display: none;
}
#ddmenu ul.listwrapper {
    float: left;
    list-style-type: none;
    padding: 0 0 10px;
    margin: 10px 3px 3px 20px;
}
#ddmenu ul.lev2 {
    list-style-type: none;
    margin-left: 18px;
    padding-left: 0;
}
#ddmenu li {
    margin: 3px 3px 3px 3px;
}
#ddmenu li.lev1 {
    padding: 10px;
    margin: 10px 3px 3px 3px;
    background: #f0f0f0;
}
#ddmenu li.lev2,
#ddmenu .lev1group {
    display: block; /* so can set width */
    width: auto;
    padding: 1px;
}
#ddmenu li.lev2 {
    width: 460px;
}
#ddmenu li.lev2.dummy span {
    display: none;
}
#ddmenu li.lev1 .lev1group input {
    border: 1px solid #ccc;
    vertical-align: sub;
}
#ddmenu li.lev2 span {
    display: inline-block; /* so can set width */
    Xoverflow: auto;
    text-align: left;
    padding: 3px;
}
#ddmenu li.lev2 span.edit img {
    cursor: pointer;
    display: inline-block;
    margin-left: 10px;
}
#ddmenu li .deleterow img {
    cursor: pointer;
}
#ddmenu li.lev2 span.edit.disabled {
    cursor: auto;
    color: grey;
}
#ddmenu li.lev2 span.grippie img {
    margin: -2px 0 0;
}
#ddmenu li.lev2 .inst { /* lev2 inst number */
    display: none;
}
#ddmenu li.lev2 span.title input, #ddmenu li.lev2 span.variable_dtm input, #ddmenu li.lev2 span.variable_gap input {
    width: 160px;
    border: 0;
    margin: -3px -6px 0 0;
    border: 1px solid #ccc;
}
#ddmenu li.lev2 span.variable_dtm input, #ddmenu li.lev2 span.variable_gap input  {
    width: 55px;
}
#ddmenu li.lev2 span.variable_dtm input:read-only, #ddmenu li.lev2 span.variable_dtm input:-moz-read-only,
#ddmenu li.lev2 span.variable_gap input:read-only, #ddmenu li.lev2 span.variable_gap input:-moz-read-only {
    background: white;
}
#ddmenu li.lev2 span.image_base {
    display: none;
}
#ddmenu li.lev2 span.fixed_variable select {
    border: 1px solid #ccc;
    margin: -4px -7px 0 0;
}
#ddmenu #menubot {
    clear: both;
    margin-left: 260px;
}
#ddmenu #savemenu {
    float: none;
    display: inline-block;
    vertical-align: super;
    margin: 0 0 25px 10px;
}
#ddmenu #menumsg,
#ddnotes #notesmsg {
    display: inline-block;
    vertical-align: super;
    padding: 4px 10px;
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
#ddmenu #menumsg.error,
#ddnotes #notesmsg.error{
    background-color: #f2dede;
    border: 1px solid #eed3d7;
    color: #b94a48;
}
#ddmenu #menumsg.ok,
#ddnotes #notesmsg.ok {
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    color: #468847;
}
#ddmenu #menumsg.warn,
#ddnotes #notesmsg.warn {
    background-color: #ffddaa;
    border: 1px solid #ffcc80;
    color: #c87300;
}

/* Lesson notes */
#ddnotes {      /* positioned statically*/
    font-size: 13px;
    margin-bottom: 15px;
}
#ddnotes .ntitle {
    float: left;
    font-size: 14px;
    font-weight: 600;
    width: 245px;
    font-weight: 600;
    padding-top: 5px;
    text-align: right;
}

#ddnotes li.notehdr {
    display: block; /* so can set width */
    width: auto;
    margin: 0;
    border-right: 1px solid #f7f7f7;
    background: #e5e5e5;
}
#ddnotes li.notehdr div {
    display: table-cell;
    font-weight: 600;
    line-height: normal;
    vertical-align: middle;
    padding: 5px 6px 5px 10px;
    border-right: 1px solid #f7f7f7;
    background: #e5e5e5;
}
#ddnotes li.notehdr .title {
    width: 160px;
    margin-left: 27px;
}
#ddnotes li.notehdr .dtm {
    width: 60px;
    margin-left: 10px;
}
#ddnotes li.notehdr .url {
    width: 127px;
    margin-left: 10px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
#ddnotes li.notehdr .loc {
    width: 86px;
    margin-left: 20px;
}

#ddnotes li.note {
    display: block; /* so can set width */
    width: auto;
    margin: 10px 10px 0;
}

#ddnotes li.note input {
    border: 1px solid #ccc;
    margin: 0;
}
#ddnotes li.note .loc select {
    border: 1px solid #ccc;
    margin: 0;
}
#ddnotes li.note .title input {
    width: 125px;
}
#ddnotes li.note .dtm input {
    width: 60px;
}
#ddnotes li.note .url input {
    width: 127px;
}
#ddnotes li.note .loc input {
    width: 60px;
}
#ddnotes li.note .url img {
    top: 5px !important;
    margin-right:3px;
}
#ddnotes span.grippie {
    padding: 3px;
}
#ddnotes .grippie img {
    border: none;
    vertical-align: sub;
    margin-bottom: -2px;
}
#ddnotes #notescontent {
    float: left;
    list-style-type: none;
    padding: 0 0 10px;
    margin: 10px 3px 3px 20px;
    background: #f0f0f0;
}
#ddnotes #notesbot {
    float: none;
    clear: both;
    margin-left: 260px;
}
#ddnotes #savenotes {
    float: none;
    display: inline-block;
    vertical-align: super;
}
#ddnotes li .deleterow img {
    cursor: pointer;
}

/* set .url to be relatve so we can set its child, .urlfileicon, to be absolute
then set that so right border is level with right border of parent, ie
overlapping right side of url field. */
#ddnotes .url {
    position: relative;
    display: inline-block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#ddnotes .url.dropzone:focus {
    border: none !important;
    display: inline-block;
    height: inherit;
    padding: 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
}
#ddnotes .urlfileicon { /* keep same as imageHeight/Width values in Hnotes.js */
    width: 25px;
    height: 20px;
    position: absolute;
    right: 0;
}

@media screen and (max-width: 1199px) {
    #ddmenu .mtitle,
    #ddmenu #menubot,
    #ddnotes .ntitle,
    #ddnotes #notesbot,
    #ddmenu ul.listwrapper,
    #ddnotes #notescontent {
        float: none;
        clear: both;
        text-align: left;
        margin-left: 0;
    }
}