/*
 * Breaks and Spacers
 */
.breakS {
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #808080;
}

.breakL {
  width: 100%;
  height: 50px;

  box-sizing: border-box;
  background-color: #282626;
  border-bottom: 1px solid #808080;
}

/*
 * Layout for One Column Content
 */
#layout1 {
  width: 100%;
  height: auto;
  padding-top: 50px;
  
  display: flex;
  position: relative;
  box-sizing: border-box;
  background-color: #282626;
}

#layout1 .col1 {
  margin-left: 50px;
  width: calc(100% - (2 * 50px));
}

/*
 * Layout for Two Column Content
 *
 * |  col1  | col2 |       |
 * |--------|------|-------|
 * | 150 px |      | 50 px |
 *
 */
#layout2a {
  width: 100%;
  height: auto;
  padding-top: 50px;

  position: relative;
  vertical-align: top;
  display: inline-block;
  box-sizing: border-box;
  background-color: #282626;
}

#layout2a .col1 {
  float: left;
  width: 150px;
}

#layout2a .col2 {
  float: left;
  width: calc(100% - 150px - 50px);
}

#layout2a .foot {
  bottom: 0px;
  position: absolute;
}

/*
 * Layout for Two Column Content
 *
 * |       | col1 |       | col2 |       |
 * |-------|------|-------|------|-------|
 * | 50 px |      | 50 px |      | 50 px |
 *
 */
#layout2b {
  width: 100%;
  height: auto;
  padding-top: 50px;

  position: relative;
  vertical-align: top;
  display: inline-block;
  box-sizing: border-box;
  background-color: #282626;
}

#layout2b .col1 {
  float: left;
  margin-left: 50px;
  width: calc((100% - (3 * 50px)) / 2);
}

#layout2b .col2 {
  float: left;
  margin-left: 50px;
  width: calc((100% - (3 * 50px)) / 2);
}

#layout2b .foot {
  bottom: 0px;
  position: absolute;
}

/*
 * Layout for Three Column Content
 *
 * |  col1  | col2 |      |  col3  |      |
 * |--------|------|------|--------|------|
 * | 150 px |      | 50px |        | 50px |
 *
 */
#layout3a {
  width: 100%;
  height: auto;
  padding-top: 50px;

  position: relative;
  vertical-align: top;
  display: inline-block;
  box-sizing: border-box;
  background-color: #282626;
}

#layout3a .col1 {
  float: left;
  width: 150px;
}

#layout3a .col2 {
  float: left;
  width: calc((100% - 150px - (2 * 50px)) / 2);
}

#layout3a .col3 {
  float: left;
  margin-left: 50px;
  width: calc((100% - 150px - (2 * 50px)) / 2);
}

#layout3a .foot {
  top: 0px;
  left: 50px;
  width: calc(100% - 100px);
  height: auto;
  position: absolute;
}

/*
 * Layout for Three Column Content
 *
 * |       | col1 |      | col2 |      | col3 |      |
 * |-------|------|------|------|------|------|------|
 * | 50 px |      | 50px |      | 50px |      | 50px |
 *
 */
#layout3b {
  width: 100%;
  height: auto;
  padding-top: 50px;
  
  position: relative;
  vertical-align: top;
  display: inline-block;
  box-sizing: border-box;
  background-color: #282626;
}

#layout3b .col1 {
  float: left;
  margin-left: 50px;
  width: calc((100% - (4 * 50px)) / 3);
}

#layout3b .col2 {
  float: left;
  margin-left: 50px;
  width: calc((100% - (4 * 50px)) / 3);
}

#layout3b .col3 {
  float: left;
  margin-left: 50px;
  width: calc((100% - (4 * 50px)) / 3);
}

#layout3b .foot {
  bottom: 0px;
  position: absolute;
}

/*
 * Anchor Layout
 */
#layout-anchor {
  width: 100%;
  height: auto;
  padding-top: 50px;
  
  display: flex;
  position: relative;
  vertical-align: top;
  box-sizing: border-box;
}

#layout-anchor .col1 {
  float: left;
  margin-left: 50px;
  width: 175px;
}

#layout-anchor .col2 {
  float: left;
  margin-left: 50px;
  width: calc(100% - 175px - (3 * 50px));
}

#layout-anchor .col2a {
  float: left;
  margin-left: 0px;
  width: calc((100% - 50px) / 2);
}

#layout-anchor .col2b {
  float: left;
  margin-left: 50px;
  width: calc((100% - 50px) / 2);
}