body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;background:#FFFFFF;color:#303030;padding:0px;}
div.section{vertical-align:middle;padding:20px;}
div.box-header{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:24px;color:#337AB7;}
p.blocktext{margin-left:auto;margin-right:auto;width:75%;padding:5px;}
 .center{display:block;margin-left:auto;margin-right:auto;padding:10px;text-align:center;}
 .maininfobox,.detailsbox,.noticebox{margin-left:auto;margin-right:auto;width:85%;padding:20px;min-height:32px;background-repeat:no-repeat;background-position:10px 10px;border:1px solid #999999;border-color:#999999;margin-top:15px;margin-bottom:15px;}
 .maininfobox{background-color:#FBDF6E;}
 .noticebox{background-color:#F2F2F0;}
 .detailsbox{background-color:#FBEE83;}
 .topheader{font-size:140%;font-weight:bold;}
 .overview{font-size:100%;font-weight:bold;}
 .figuretext{font-size:90%;font-weight:bold;}
table{margin-left:auto;margin-right:auto;}
table.centertext{text-align:center;}
td{padding:10px;padding-bottom:0px;}
a.codedirection{white-space:nowrap;unicode-bidi:bidi-override;direction:rtl;}

li {
  margin-bottom:5px;
}

.button3d {
  margin: 0 0 5px;
  padding: 0 12px;
  line-height: 28px;
  // font-size: 11px;
  //font-weight: bold;
  color: #555555;
  text-decoration: none;
  text-shadow: 0 1px white;
  background: #ececec;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #cecece #bababa #b8b8b8;
  border-radius: 12px 12px 12px 12px;
  outline: 0;
  display: inline-block;
  vertical-align: baseline;
  zoom: 1;
  *display: inline;
  *vertical-align: auto;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  background-image: -webkit-linear-gradient(top, #f1f1f1, #ececec 70%, #e2e2e2);
  background-image: -moz-linear-gradient(top, #f1f1f1, #ececec 70%, #e2e2e2);
  background-image: -o-linear-gradient(top, #f1f1f1, #ececec 70%, #e2e2e2);
  background-image: linear-gradient(to bottom, #f1f1f1, #ececec 70%, #e2e2e2);
  -webkit-box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #b8b8b8, 0 3px #cccccc, 0 4px #b8b8b8, 0 5px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #b8b8b8, 0 3px #cccccc, 0 4px #b8b8b8, 0 5px 2px rgba(0, 0, 0, 0.25);
}

.button3d:hover, .button3d:active {
  background: #ececdc;
  border-top-color: #c9c9b9;
}

.button3d:active {
  margin-bottom: 1px;
  margin-top:4px;
  border-radius: 12px;
  -webkit-box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
}

.smallbutton {
  margin: -1px 0 2px;
  padding: 0 8px;
  line-height: 20px;
  border-radius: 6px;
  vertical-align: top;
  -webkit-box-shadow: inset 0 0px #fdfdfd, inset 0 0 0 0px #eaeaea, 0 0px #b8b8b8, 0 1px #cccccc, 0 2px #b8b8b8, 0 2px 0px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0px #fdfdfd, inset 0 0 0 0px #eaeaea, 0 0px #b8b8b8, 0 1px #cccccc, 0 2px #b8b8b8, 0 2px 0px rgba(0, 0, 0, 0.25);

}


.smallbutton:active {
  margin: 2px 0 -1px;
  vertical-align:top;
  border-radius: 6px;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px white;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px white;

  //  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
  //  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
}



a.previouspage {
   position:absolute;
   left:30px;
}
a.previouspage:before {
    content: "";
    display: block;
    background: url("userguide/arrowLeft.png") no-repeat;
    width: 18px;
    height: 18px;
    float: left;
    margin: 2px 6px 0 0;
}


a.contentpage {
    position:absolute;
    left:50%;
}
a.contentpage:before {
    content: "";
    display: block;
    background: url("userguide/arrowUp.png") no-repeat;
    width: 18px;
    height: 18px;
    float: left;
    margin: 0 6px 0 0;
}



a.nextpage {
   position:absolute;
   right:30px;
}

a.nextpage:after {
    content: "";
    display: block;
    background: url("userguide/arrowRight.png") no-repeat;
    width: 18px;
    height: 18px;
    float: right;
    margin: 2px 0 0 6px;
}

li.optional:before {
    content: "Optional:";
    color: #A0A0A0;
    display: block;
    float: left;
    margin-right:8px;
}


/* The following are used for NeLS Storage Data Transfers (added on 2020-05-05) */

div.nels-transfer {
   margin:6px 10px 20px 10px;
}
div.nels-transfer-inner {
   display:grid;
   grid-template-columns: 5fr 1fr;
   grid-gap: 10px;
}
div.nels-transfer-progress {
   border:1px solid #303030;
   background-color:#F0F0F0;
   margin-top:5px;
   height:24px;
}
div.nels-transfer-progress-value {
    position:relative;
    top:0px;
    left:0px;
    height:100%;
    width:0%;
    background-color:#C0D0FF;
}
div.nels-transfer-progress-text {
   position:relative;
   top:-21px;
   left:0px;
   padding-left:8px;
}
button.nels-transfer-button {
   height:24px;
   margin-top:5px
}
