.headContainer
  {
  position: relative;
  width: 1024px;
  margin: 0 auto;
  }

.headSide
  {
  display: inline-block;
  position: relative;
  float: left;
  }

.heading
  {
  position: relative;
  margin-top: 1em;
  margin-bottom: 1em;
  width: 900px;
  float: left;
  padding: 0.6em;
  text-align: center;
  white-space: nowrap;
  font-size: 2em;
  color: black;
  background: #E0E0F0;
     -moz-box-shadow: 0 0 1em #C0C0C0;
  -webkit-box-shadow: 0 0 1em #C0C0C0;
          box-shadow: 0 0 1em #C0C0C0;
  background:    -moz-linear-gradient(left, #FF8080, #FFFF80, #80FF80, #8080FF, #FF80FF);
  background:     -ms-linear-gradient(left, #FF8080, #FFFF80, #80FF80, #8080FF, #FF80FF);
  background:      -o-linear-gradient(left, #FF8080, #FFFF80, #80FF80, #8080FF, #FF80FF);
  background: -webkit-linear-gradient(left, #FF8080, #FFFF80, #80FF80, #8080FF, #FF80FF);
  background:         linear-gradient(left, #FF8080, #FFFF80, #80FF80, #8080FF, #FF80FF);
  -pie-background:    linear-gradient(left, #FF8080, #FFFF80, #80FF80, #8080FF, #FF80FF);
  background: -webkit-gradient(linear, left top, right top, from(#FF8080), to(#FF80FF));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF8080', endColorstr='#FF80FF');
  }

.tabs
  {
  display: inline-block;
  margin: 0;
  padding: 1em 1em 0;
  overflow: hidden;
  margin-bottom: -1px;
  }

.tabs li, .classMenu li
  {
  z-index: 1;
  position: relative;
  padding: 0.5em 0.5em;
  display: table-cell;
  list-style: none;
  background: #E0E0F0;
  color: #000000;
  border: 1px solid #C0C0C0;
     -moz-box-shadow: 0 0 1em #C0C0C0;
  -webkit-box-shadow: 0 0 1em #C0C0C0;
          box-shadow: 0 0 1em #C0C0C0;
  }

.tabs li
  {
     -moz-border-radius: 0.5em 0.5em 0 0;
  -webkit-border-radius: 0.5em 0.5em 0 0;
          border-radius: 0.5em 0.5em 0 0;
  border-bottom: 0;
  }

.tabs a
  {
  white-space: nowrap;
  text-decoration: none;
  }

.tabs li:hover, .classMenu li:hover
  {
  background:    -moz-linear-gradient(#FFFFFF, #E0E0F0 100%);
  background:     -ms-linear-gradient(#FFFFFF, #E0E0F0 100%);
  background:      -o-linear-gradient(#FFFFFF, #E0E0F0 100%);
  background: -webkit-linear-gradient(#FFFFFF, #E0E0F0 100%);
  background:         linear-gradient(#FFFFFF, #E0E0F0 100%);
  -pie-background:    linear-gradient(#FFFFFF, #E0E0F0 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#E0E0F0));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E0E0F0');
  }

.tabs li.selected
  {
  z-index: 3;
  background: #FFFFFF;
  }

.classMenu li:active
  {
     -moz-box-shadow: 0 1px 2px #C0C0C0 inset;
  -webkit-box-shadow: 0 1px 2px #C0C0C0 inset;
          box-shadow: 0 1px 2px #C0C0C0 inset;
  }

.heading,
.mcuListHeader, .mcuList, .classMenu li, .mcuLink,
.featList, .featTableName, .featName,
.configList, .confTableName, .configWord, .confOptName,
.ramMap, .ramTableName, .ramBank,
.sfrMap, .sfrTableName, .sfrBank, .sfrName, .sfrNameX,
.srcInfo
  {
     -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
          border-radius: 0.5em;
  }

.mcuList, .featList, .configList, .ramMap, .sfrMap
  {
  z-index: 2;
  position: relative;
  width: auto;
  padding: 1em 1em;
  background: #FFFFFF;
  border: 1px solid #C0C0C0;
     -moz-box-shadow: 0 0 1em #C0C0C0;
  -webkit-box-shadow: 0 0 1em #C0C0C0;
          box-shadow: 0 0 1em #C0C0C0;
  }

.mcuList
  {
  display: inline-block;
  min-width: 95%;
  }

.mcuTable
  {
  display: inline;
  table-layout: fixed;
  }

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

.classMenu
  {
  white-space: nowrap;
  height: 2em;
  margin-bottom: 1.5em;
  }

.classMenu li
  {
     -moz-box-shadow: 0 0 1em #C0C0C0;
  -webkit-box-shadow: 0 0 1em #C0C0C0;
          box-shadow: 0 0 1em #C0C0C0;
  }

.classMenu a
  {
  text-decoration: none;
  }

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

.mcuListHeader, .featTableName, .confTableName, .ramTableName, .sfrTableName
  {
  background: #CAB2DE;
  border-color: #CAB2DE;
  border-style: outset;
  }

.mcuAttrP12, .mcuAttrP14, .mcuAttrP16, .mcuAttrP12E, .mcuAttrP14E, .mcuAttrP16E
  {
  padding: 0.2em 0.625em;
  text-align: center;
  font: bold 1em Georgia;
  }

.mcuAttrP12
  {
  background: #FFB4B4;
  }

.mcuAttrP14
  {
  background: #B4B4FF;
  }

.mcuAttrP16
  {
  background: #B4FFB4;
  }

.mcuAttrP12E
  {
  background: #FFB4FF;
  }

.mcuAttrP14E
  {
  background: #B4FFFF;
  }

.mcuAttrP16E
  {
  background: #FFFFB4;
  }

.mcuListHeader, .configWord,
.featValue,
.confSwName, .confSwValue, .confSwExpl,
.ramBank,
.sfrBank, .sfrAddr, .sfrSep
  {
  padding: 0.2em 0.625em;
  }

.mcuListHeader
  {
  text-align: left;
  white-space: nowrap;
  font-size: 1.2em;
  border-width: 4px;
  }

.mcuLink
  {
  width: 12em;
  padding: 0.2em;
  text-align: left;
  background: #D7DEB2;
  border: 2px outset #D7DEB2;
  }

.mcuLink:active
  {
  border: 2px inset;
     -moz-box-shadow: 0 0 10px 6px #B7BD97 inset;
  -webkit-box-shadow: 0 0 10px 6px #B7BD97 inset;
          box-shadow: 0 0 10px 6px #B7BD97 inset;
  }

.mcuLink a
  {
  display: block;
  padding: 0 0.5em 0 0.5em;
  text-decoration: none;
     -moz-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
          border-radius: 0.3em;
     -moz-box-shadow: 0 0 10px 6px #F0FFA1 inset;
  -webkit-box-shadow: 0 0 10px 6px #F0FFA1 inset;
          box-shadow: 0 0 10px 6px #F0FFA1 inset;
  }

.mcuLink a:hover
  {
  background: #49DDFF;
  }

.featValue,
.confSwName, .confSwValue, .confSwExpl,
.sfrAddr
  {
  background: #BAE7B8;
  }

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

.featTableName,
.confTableName, .configWord,
.ramBank, .ramTableName,
.sfrBank, .sfrTableName
  {
  text-align: center;
  border-width: 4px;
  }

.featTableName, .confTableName, .ramTableName, .sfrTableName
  {
  font:bold 1.5em Georgia;
  line-height: 1.75em;
  }

.mcuGap, .featGap, .confGap, .ramGap, .sfrGap
  {
  height: 1em;
  background: transparent;
  }

.configWord, .ramBank, .sfrBank
  {
  font-size: 1.3em;
  background: #D7DEB2;
  border-color: #D7DEB2;
  border-style: ridge;
  }

.featName, .featValue,
.confOptName, .confSwName, .confSwValue, .confSwExpl,
.sfrName, .sfrNameX, .sfrAddr
  {
  text-align: left;
  }

.vMargin
  {
  width: auto;
  background: transparent;
  }

.featName, .confOptName, .sfrName, .sfrNameX, .sfrSep
  {
  padding: 0.5em 0.75em;
  }

.featName, .confOptName, .sfrName, .sfrNameX
  {
  border-style: solid;
  border-width: 0;
  }

.featName, .confOptName, .sfrName, .sfrNameEx
  {
  background: #A5BDE4;
  }

.ramColumn, .sfrColumn
  {
  width: 130px;
  padding: 5px;
  background: #DEFFFE;
  border: 1px solid #C0C0C0;
     -moz-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
          border-radius: 0.3em;
     -moz-box-shadow: 0 0 0.2em #C0C0C0;
  -webkit-box-shadow: 0 0 0.2em #C0C0C0;
          box-shadow: 0 0 0.2em #C0C0C0;
  }

.ramColCont
  {
  position: relative;
  }

.ramColCont a
  {
  display: block;
  background: #F0FFA1;
  text-decoration: none;
     -moz-border-radius: 0.75em 0.75em 0.75em 1.5em;
  -webkit-border-radius: 0.75em 0.75em 0.75em 1.5em;
          border-radius: 0.75em 0.75em 0.75em 1.5em;
     -moz-box-shadow: 0 0 10px 6px #F0FFA1 inset;
  -webkit-box-shadow: 0 0 10px 6px #F0FFA1 inset;
          box-shadow: 0 0 10px 6px #F0FFA1 inset;
  }

.ramColCont a:link
  {
  color: #874EAD;
  }

.ramColCont a:hover
  {
  background: #49DDFF;
  }

/* This a tooltip. */

.ramTt
  {
  display: none;
  font-size: 0.7em;
  text-align: center;
  position: relative;
  left: 20px;
  background: #F0FFA1;
  padding: 0.2em 0.8em;
     -moz-border-radius: 0 1em 1em 2em;
  -webkit-border-radius: 0 1em 1em 2em;
          border-radius: 0 1em 1em 2em;
     -moz-box-shadow: 0 0 1.5em #C0C0C0;
  -webkit-box-shadow: 0 0 1.5em #C0C0C0;
          box-shadow: 0 0 1.5em #C0C0C0;
  }

.ramGPR:hover .ramTt,
.ramSFR:hover .ramTt,
.ramSHA:hover .ramTt,
.ramBAD:hover .ramTt
  {
  z-index: 100;
  display: block;
  }

/* This accessories of the tooltip. This is a beak which point towards the left side. */

.ramGPR:hover .ramTt:before,
.ramSFR:hover .ramTt:before,
.ramSHA:hover .ramTt:before,
.ramBAD:hover .ramTt:before
  {
  display: block;
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: 0;
  left: -15px;
  border-right: 15px solid #F0FFA1;
  border-bottom: 5px solid transparent;
  }

.ramAcc
  {
  z-index: 5;
  position: absolute;
  width: 1px;
  height: 0;
  background: transparent;
  box-shadow: 2px 0 #303030,
              2px 0 #303030,
              7px 0 #303030,
              12px 0 #303030,
              17px 0 #303030,
              22px 0 #303030,
              27px 0 #303030,
              32px 0 #303030,
              37px 0 #303030,
              42px 0 #303030,
              47px 0 #303030,
              52px 0 #303030,
              57px 0 #303030,
              62px 0 #303030,
              67px 0 #303030,
              72px 0 #303030,
              77px 0 #303030,
              82px 0 #303030,
              87px 0 #303030,
              92px 0 #303030,
              97px 0 #303030,
              102px 0 #303030,
              107px 0 #303030,
              112px 0 #303030,
              117px 0 #303030,
              122px 0 #303030,
              127px 0 #303030;
  }

.ramGPR, .ramGPREx
  {
  background: #76CB76;
  }

.ramSFR, .ramSFREx
  {
  background: #F48282;
  }

.ramSHA, .ramSHAEx
  {
  background: #76CBFF;
  }

.ramBAD, .ramBADEx
  {
  background: #C0C0C0;
  }

.ramGPR, .ramSFR, .ramSHA, .ramBAD
  {
  position: relative;
  width: 130px;
  }

.ramSFR .ramTt:active
  {
  background: #94A9FF;
  }

.ramMap, .sfrMap
  {
  min-width: 55%;
  }

.ramSum
  {
  padding: 0.4em 0;
  font-size: 0.75em;
  text-align: center;
  }

.sfrColumn
  {
  vertical-align: top;
  }

.sfrName, .sfrNameX, .sfrAddr, .sfrSep
  {
  font-size: 0.75em;
  }

.sfrNameX, .sfrNameXEx
  {
  background: #ECA4FC;
  }

.sfrNameX span
  {
  display: none;
  position: absolute;
  text-align: left;
  background: #F0FFA1;
  padding: 0.2em 0.4em;
     -moz-border-radius: 0 0.75em 0.75em 0.75em;
  -webkit-border-radius: 0 0.75em 0.75em 0.75em;
          border-radius: 0 0.75em 0.75em 0.75em;
     -moz-box-shadow: 0 0 1.5em #C0C0C0;
  -webkit-box-shadow: 0 0 1.5em #C0C0C0;
          box-shadow: 0 0 1.5em #C0C0C0;
  }

.sfrNameX:hover span
  {
  z-index: 100;                 /* This will surely be enough. */
  display: block;
  cursor: text;
  }

.ramSFREx, .ramGPREx, .ramSHAEx, .ramBADEx,
.sfrNameEx, .sfrNameXEx, .menuEx
  {
  padding: 0;
  width: 50px;
  margin-left: 20px;
     -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
          border-radius: 3px;
     -moz-box-shadow: 0 0 0.5em #C0C0C0;
  -webkit-box-shadow: 0 0 0.5em #C0C0C0;
          box-shadow: 0 0 0.5em #C0C0C0;
  }

.sfrAccess
  {
  background: #C87548;
  color: #FDFFC7;
     -moz-border-radius: 0;
  -webkit-border-radius: 0;
          border-radius: 0;
  }

.legendContainer
  {
  position: relative;
  width: 1024px;
  margin: 0 auto;
  }

.legend
  {
  display: inline-block;
  position: relative;
  vertical-align: top;
  width: 22em;
  }

.ramAccEx
  {
  position: absolute;
  width: 1px;
  height: 1.15em;         /* .explanation->(font-size + padding-top + padding-bottom) */
  background: transparent;
  box-shadow: 2px 0 #303030,
              2px 0 #303030,
              7px 0 #303030,
              12px 0 #303030,
              17px 0 #303030,
              22px 0 #303030,
              27px 0 #303030,
              32px 0 #303030,
              37px 0 #303030,
              42px 0 #303030,
              47px 0 #303030;
  }

.explanation, .ramSumEx
  {
  font-size: 0.75em;
  background: #BAA78F;
     -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
          border-radius: 0.5em;
  }

.explanation
  {
  position: relative;
  padding: 0.2em 0.4em;
  top: -1px;
  left: 55px;
  white-space: nowrap;
  }

.ramSumEx
  {
  padding: 0.3em 0.4em;
  }

.srcInfo
  {
  width: 92%;
  font-size: 0.8em;
  padding: 0.3em 0.5em;
  background: #BA8F94;
  }
