/* -------- General layout: -------- */

.topMargin0 { margin-top: 0px; }
.topMargin6 { margin-top: 6px; }
.topMargin12 { margin-top: 12px; }
.topMargin24 { margin-top: 24px; }
.topMargin48 { margin-top: 48px; }

.bottomMargin0 { margin-bottom: 0px; }
.bottomMargin6 { margin-bottom: 6px; }
.bottomMargin12 { margin-bottom: 12px; }
.bottomMargin24 { margin-bottom: 24px; }
.bottomMargin48 { margin-bottom: 48px; }

.rightMargin0 { margin-right: 0px; }
.rightMargin12 { margin-right: 12px; }
.rightMargin24 { margin-right: 24px; }

.leftMargin0 { margin-left: 0px; }
.leftMargin12 { margin-left: 12px; }
.leftMargin24 { margin-left: 24px; }

.rightPad0 { padding-right: 0px; }
.rightPad12 { padding-right: 12px; }
.rightPad24 { padding-right: 24px; }

.leftPad0 { padding-left: 0px; }
.leftPad12 { padding-left: 12px; }
.leftPad24 { padding-left: 24px; }

.topPad0 { padding-top: 0px; }
.topPad12 { padding-top: 12px; }
.topPad24 { padding-top: 24px; }

.bottomPad0 { padding-bottom: 0px; }
.bottomPad12 { padding-bottom: 12px; }
.bottomPad24 { padding-bottom: 24px; }

.pad3 { padding: 3px; }

.width80px { width: 80px; }
.width90px { width: 90px; }
.width100px { width: 100px; }
.width110px { width: 110px; }
.width120px { width: 120px; }
.width160px { width: 160px; }

.alignLeft { text-align: left; }
.alignRight { text-align: right; }
.alignCenter { text-align: center; }

.floatLeft {
  float: left;
}

.floatRight {
  float: Right;
}

.indent4 {
  margin-left: 4px;
  margin-bottom: 3px;
}
.indent10 {
  margin-left: 10px;
}
.indent20 {
  margin-left: 40px;
  text-indent: -20px;
}
.indent40 {
  margin-left: 60px;
  text-indent: -20px;
}
.indent60 {
  margin-left: 60px;
  text-indent: -20px;
}

/* -------- Colors: -------- */

.textLight { color: #CCCCCC; }

.textGray {
  color: #999999;
}

.borderLightColor {
  border-color: #CCCCCC;
}

.borderDefaultColor {
  border-color: #666666;
}

a.light {
  color: #DDDDDD;
  text-decoration: underline;
}

.misapplied { color: #AA0000; }

/* -------- General Text styles: -------- */

p { text-align: justify; }

.headerFont {
  font-family: Century Gothic,Arial,sans;
}

.header1 {
  font-size: 160%;
}
.header2 {
  font-size: 140%;
}
.header3 {
  font-size: 120%;
}
.header4 {
  font-size: 100%;
}
.smalltext  {
  font-size: 70%;
}

/* -------- Miscellaneous styles: -------- */

.headerBar {
  width: 100%;
  padding-top: 6px;
  padding-bottom: 6px;
  border-top: 1px solid #666666;
  border-bottom: 1px solid #666666;
}

.dottedTopBorder {
  display: block;
  border-top-width: 3px;
  border-top-style: dotted;
}

.dottedBottomBorder {
  display: block;
  border-bottom-width: 3px;
  border-bottom-style: dotted;
}

.warning {
  font: 100% Century Gothic,Arial,sans;
  font-weight: bold;
  color: #DD0000;
}

.waitMessage {
  display: none;
  float: left;
  height: 20px;
  line-height: 20px;
  padding-left: 22px;
  background-image: url('../graphics/ajax-loader.gif');
  background-repeat: no-repeat;
  background-position: 0px 50%;
  background-size: 16px 16px;
}

.grayBox {
  display: block;
  border: 1px solid #666666;
  background-color: #F6F6F6;
}

.outlineBox {
  clear: both;
  position: relative;
  display: block;
  border-width: 1px;
  border-style: solid;
}

.outlineBoxCaption {
  position: absolute;
  top: -14px;
  left: 14px;
  padding: 0px 12px 0px 12px;
  background-color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.showMoreBox {
  display: none;
  max-width: 240px;
  margin: 24px auto 24px auto;
  padding: 12px 36px 12px 36px;
  border: 1px solid #666666;
  background-color: #EEEEEE;
  text-align: center;
  cursor: pointer;
}

.showMoreLabel {
  font-size: 14pt;
  white-space: nowrap;
  overflow: hidden;
}

.editIcon {
  width: 32px;
  height: 32px;
  border: 1px solid #BBBBBB;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-image: url('../graphics/edit.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 24px 24px;
  cursor: pointer;
}

.editIcon:hover {
  background-color: #EEEEEE;
  border: 1px solid #999999;
}

@media (min-width: 621px)
{

  /* -------- General layout: -------- */

  /* To show items that should only appear on wide screens: */
  .showIfWide {
  }

  /* To show items that should only appear on narrow screens: */
  .showIfNarrow {
    display: none;
  }

  .contentBlock {
    margin: 24px;
  }

  .hMarginAll {
    margin-left: 24px;
    margin-right: 24px;
  }

  .hPadAll {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hMarginWide {
    margin-left: 24px;
    margin-right: 24px;
  }

  .vMarginAll {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .vMarginWide {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .topMarginWide {
    margin-top: 24px;
  }

  .layoutTableAll {
    display: table;
    width: 100%;
  }

  .layoutTableCellAll {
    display: table-cell;
    vertical-align: top;
  }

  .layoutTableCellAll2columns {
    display: table-cell;
    width: 50%;
    vertical-align: top;
  }

  .layoutTableFullWidth {
    display: table;
    width: 100%;
  }

  .layoutTableCell {
    display: table-cell;
    vertical-align: top;
  }

  .layoutTableCell2columns {
    display: table-cell;
    width: 50%;
    vertical-align: top;
  }

  .layoutTableCellLeft {
    margin-right: 36px;
  }

  .layoutTableCellRight {
    margin-left: 36px;
  }

  .highlightBorderLeft {
    padding-left: 16px;
    border-left-width: 3px;
    border-left-style: solid;
  }

  .oneColumn {
    width: 100%;
  }

  .twoColumns {
    float: left;
    width: 50%;
  }

  .font16 {
    font-size: 1.6em;
  }
  .font14 {
    font-size: 1.4em;
  }
  .font12 {
    font-size: 1.2em;
  }
  .font10 {
    font-size: 1.0em;
  }
  .font07 {
    font-size: 0.7em;
  }
  
  /* -------- Tabs: -------- */

  .tabs {
    display: block;
    position: relative;
    width: 100%;
    height: 30px;
    margin-top: 20px;
    border-bottom: 1px solid #666666;
  }

  .tab {
    float: left;
    padding: 0px 8px 0px 8px;
    border-top: 1px solid #666666;
    border-left: 1px solid #666666;
    border-right: 1px solid #666666;
    font-size: 12pt;
    font-weight: bold;
    line-height: 29px;
    text-align: center;
  }
  .tabFirst {
    margin-left: 24px;
  }
  .tabNext {
    margin-left: 8px;
  }
  .tabDefault {
    height: 29px;
    background-color: #DDDDDD;
    cursor: pointer;
  }
  .tabDefault:hover {
    background-color: #FFFFFF;
  }
  .tabSelected {
    height: 30px;
  }
  .tabBar {
    display: block;
    width: 100%;
    height: 6px;
    border-bottom: 1px solid #666666;
  }

  .tabBox {
    display: none;
  }

  .tabBoxSelected {
    display: block;
    width: 100%;
    padding-bottom: 24px;
  }

  /* -------- app and book highlight blocks: -------- */
  
  .app_Images {
    width: 214px;
    padding-top: 4px;
  }
  .app_Image {
    float: left;
    width: 100px;
    height: 178px;
  }
  .app_ImageFirst {
    margin-right: 12px;
  }
  .book_Image {
    display: block;
    width: 124px;
    height: 178px;
    margin: 0px auto 0px auto;
  }
}

@media (max-width: 620px)
{

  /* -------- General layout: -------- */

  /* To show items that should only appear on wide screens: */
  .showIfWide {
    display: none;
  }

  /* To show items that should only appear on narrow screens: */
  .showIfNarrow {
  }

  .contentBlock {
    margin: 12px 0px 12px 0px;
  }

  .hMarginAll {
    margin-left: 12px;
    margin-right: 12px;
  }

  .hPadAll {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hMarginWide {
    margin-left: 0px;
    margin-right: 0px;
  }

  .vMarginAll {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .vMarginWide {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .topMarginWide {
    margin-top: 0px;
  }

  .layoutTableAll {
    display: table;
    width: 100%;
  }

  .layoutTableCellAll {
    display: table-cell;
    vertical-align: top;
  }

  .layoutTableCellAll2columns {
    display: table-cell;
    width: 50%;
    vertical-align: top;
  }

  .layoutTableFullWidth {
    display: block;
    width: 100%;
  }

  .layoutTablecell {
    display: block;
  }

  .layoutTablecell2columns {
    display: block;
  }

  .layoutTablecellLeft {
    margin-right: 0px;
  }

  .layoutTablecellRight {
    margin-left: 0px;
  }

  .highlightBorderleft {
    padding-left: 16px;
    border-left-width: 3px;
    border-left-style: solid;
  }

  .oneColumn {
    width: 100%;
  }

  .twoColumns {
    width: 100%;
  }

  .font16 {
    font-size: 2.0em;
  }
  .font14 {
    font-size: 1.8em;
  }
  .font12 {
    font-size: 1.6em;
  }
  .font10 {
    font-size: 1.4em;
  }
  .font07 {
    font-size: 1.0em;
  }
  
  /* -------- Tabs: -------- */

  .tabs {
    display: block;
    position: relative;
    width: 100%;
    height: 30px;
    margin-top: 20px;
    border-bottom: 1px solid #666666;
  }

  .tab {
    float: left;
    padding: 0px 8px 0px 8px;
    border-top: 1px solid #666666;
    border-left: 1px solid #666666;
    border-right: 1px solid #666666;
    font-size: 12pt;
    font-weight: bold;
    line-height: 29px;
    text-align: center;
  }
  .tabFirst {
    margin-left: 24px;
  }
  .tabNext {
    margin-left: 8px;
  }
  .tabDefault {
    height: 29px;
    background-color: #DDDDDD;
    cursor: pointer;
  }
  .tabDefault:hover {
    background-color: #FFFFFF;
  }
  .tabSelected {
    height: 30px;
  }
  .tabBar {
    display: block;
    width: 100%;
    height: 6px;
    border-bottom: 1px solid #666666;
  }

  .tabBox {
    display: none;
  }

  .tabBoxSelected {
    display: block;
    width: 100%;
    padding-bottom: 24px;
  }
  
  /* -------- app and book highlight blocks: -------- */
  
  .app_Images {
    width: 100px;
    padding-top: 6px;
  }
  .app_Image {
    width: 100px;
    height: 178px;
  }
  .app_ImageFirst {
    margin-bottom: 12px;
  }
  .book_Image {
    width: 124px;
    height: 178px;
  }
  
}