Advanced Navigation Toolbar Source

Link to article: Advanced Navigation Toolbar Source.

.cell-container {
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
    overflow: hidden;
    font-size: small;
    justify-content: center;
}
@media (max-width: 450px) {
.cell-container {
    font-size: xx-small;
}
}

.base-cell {
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
@media (max-width: 450px) {
.base-cell {
    height: 60px;
}
}


/*
|-----------------------------------------------------------------------------------|  
|                                IMAGE DIVS ANT                                     |
|-----------------------------------------------------------------------------------|
*/

.image-cell {
    width: 80px;
    height: 70px;
    font-size: 15px;
    overflow: visible;
    background-position: 50%,50%;
    background-size: 70px, 20px;
    background-repeat: no-repeat;
    object-fit: contain;
}
@media (max-width: 450px) {
.image-cell{
    font-size: xx-small;
    width: 4em;
    height: 30px;
}
}

.main-text-cell.image {
    background-size: 54px, 54px;
    background-repeat: no-repeat;
    background-position: 50%,50%;
    margin-bottom: 0.75em;
}
@media (max-width: 450px) {
.main-text-cell.image {
    background-size: 30px, 30px;
    background-repeat: no-repeat;
    background-position: 50%,50%;
}
}

/*
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|  
>>>>>>>>>>>>>>>>|                                      IMAGE CENTER                                        |
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|
*/

.image-cell.center {
    background-position: 50%;
    width: 5em;
    height: 140px;
}
@media (max-width: 450px) {
.image-cell.center{
    background-size: 30px;
    height: 60px;
}
}

.image-cell.center.style-one {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_MID_LEFT.png");
}
.image-cell.center.style-two {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_MID_LEFT_ALT.png");
}
.image-cell.center.style-three {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_MID_LEFT_ALT2.png");
}

/*
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|  
>>>>>>>>>>>>>>>>|                                  IMAGE DUAL CENTER                                     |
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|
*/

.image-cell.dual-center {
    background-position: 50%;
    width: 5em;
    height: 140px;
}
@media (max-width: 450px) {
.image-cell.dual-center{
    width: 4em;
    height: 60px;
    background-size: 35px;
}
}

.image-cell.dual-center.style-one {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_DUAL_LEFT.png");
}
.image-cell.dual-center.style-two {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_DUAL_LEFT_ALT.png");
}
.image-cell.dual-center.style-three {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_DUAL_LEFT_ALT2.png");
}

/*
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|  
>>>>>>>>>>>>>>>>|                                         IMAGE LEFT                                         |
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|
*/

.image-cell.left {
    background-position: 50%, 17%;
    width: 5em;
    height: 140px;
}
@media (max-width: 450px) {
.image-cell.left{
    background-position: 50%,21%;
    background-size: 35px, 25%;
    height: 60px;
}
}

.image-cell.left.style-one {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_LEFT.png"), url("{$prevImage}");
}
.image-cell.left.style-two {
  background-image: url(" http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_LEFT_ALT.png"), url("{$prevImage}");
}
.image-cell.left.style-three {
  background-image: url(" http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_LEFT_ALT2.png"), url("{$prevImage}");
}


.image-cell.left.bottom {
    margin-top: -2.05em;
    height: 85px;
}
@media (max-width: 450px) {
.image-cell.left.bottom {
    margin-top: -1.75em;
    margin-bottom: -1.15em;
    height: 55px;
}
}

.image-cell.left.bottom.style-one {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_LEFT.png"), url("{$prev2Image}");
}
.image-cell.left.bottom.style-two {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_LEFT_ALT.png"), url("{$prev2Image}");
}
.image-cell.left.bottom.style-three {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_LEFT_ALT2.png"), url("{$prev2Image}");
}

/*
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|  
>>>>>>>>>>>>>>>>|                                         IMAGE RIGHT                                        |
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|
*/

.image-cell.right {
    background-position: 50%,83%;
    width: 5em;
    height: 140px;
}
@media (max-width: 450px) {
.image-cell.right{
    background-position: 50%,78%;
    background-size: 35px, 25%;
    height: 60px;
}
}

.image-cell.right.style-one {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_RIGHT.png"), url("{$nextImage}");
}
.image-cell.right.style-two {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_RIGHT_ALT.png"), url("{$nextImage}");
}
.image-cell.right.style-three {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_RIGHT_ALT2.png"), url("{$nextImage}");
}

.image-cell.right.bottom {
    margin-top: -2.05em;
    height: 85px;
}
@media (max-width: 450px) {
.image-cell.right.bottom {
    margin-top: -1.75em;
    margin-bottom: -1.15em;
    height: 55px;
}
}

.image-cell.right.bottom.style-one {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_RIGHT.png"), url("{$next2Image}");
}
.image-cell.right.bottom.style-two {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_RIGHT_ALT.png"), url("{$next2Image}");
}
.image-cell.right.bottom.style-three {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_RIGHT_ALT2.png"), url("{$next2Image}");
}

/*
|-----------------------------------------------------------------------------------|  
|                                                 TEXT DIVS ANT                                               |
|-----------------------------------------------------------------------------------|
*/

.side-text-cell {
  display: inline-grid;
  font-size: 15px;
  flex-basis: 40%;
  text-align: center;
  align-items: center;
  max-width: 30em;
  min-width: 6em;
}
@media (max-width: 450px) {
.side-text-cell {
  font-size: xx-small;
  flex-basis: 20%;
  max-width: 8em;
  min-width: 6em;
}
}

.side-text-cell.full {
    height: 140px;
}
@media (max-width: 450px) {
.side-text-cell.full {
    height: 60px;
    width: 10em;
}
}

.main-text-cell {
    flex-basis: 10%;
    max-width: 8em;
    font-size: 15px;
    overflow-wrap: break-word;
}
@media (max-width: 450px) {
.main-text-cell {
    font-size: xx-small;
    max-width: 8em;
    min-width: 5em;
}
}

/*
|-----------------------------------------------------------------------------------|  
|                                               ALT MODES ANT                                                |
|-----------------------------------------------------------------------------------|
*/

/*
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|  
>>>>>>>>>>>>>>>>|                                          RIGHT MODE                                        |
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|
*/

.rightmode-\{\$rightmode\}.normal {
    display: flex;
    justify-content: end;
    align-items: end;
}
.rightmode-\{\$rightmode\}.end {
  display: none;
}
@media (max-width: 450px) {
.rightmode-\{\$rightmode\}.normal {
  max-width: 15em;
}
}

.rightmode-\{\$rightmode\}.normal.text {
    margin-top: -3.5em; 
    margin-bottom: 1.5em;
    height: 50%;
}
@media (max-width: 450px) {
.rightmode-\{\$rightmode\}.normal.text {
    margin-top: -0.1em; 
    margin-bottom: 0.25em;
    height: 40%;
}
}

.rightmode-a.normal {
  display: none;
}
.rightmode-a.end {
  display: inherit;
}

/*
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|  
>>>>>>>>>>>>>>>>|                                           LEFT MODE                                        |
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|
*/
   
.leftmode-\{\$leftmode\}.normal {
    display: flex;
    justify-content: end;
    align-items: end;
}
.leftmode-\{\$leftmode\}.end {
  display: none;
}
@media (max-width: 450px) {
.leftmode-\{\$leftmode\}.normal {
  max-width: 15em;
}
}


.leftmode-\{\$leftmode\}.normal.text {
    margin-top: -3.5em; 
    margin-bottom: 1.5em;
    height: 50%;
}
@media (max-width: 450px) {
.leftmode-\{\$leftmode\}.normal.text {
    margin-top: -0.1em; 
    margin-bottom: 0.25em;
    height: 40%;
}
}

/* needed to fix alignment issues present on the small version but not the big one */
.leftmode-\{\$leftmode\}.normal.small {
    justify-content: start;
    align-items: start;
    text-align: center;
}

.leftmode-a.normal {
  display: none;
}
.leftmode-a.end {
  display: inherit;
}

/*
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|  
>>>>>>>>>>>>>>>>|                                     IMAGE SERIES END                                    |
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|
*/

.image-cell.center.endstyle-one {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_MID_LEFT_END.png");
}
.image-cell.center.endstyle-two {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_MID_LEFT_ALT_END.png");
}
.image-cell.center.endstyle-three {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_MID_LEFT_ALT2_END.png");
}

.image-cell.dual-center.endstyle-one {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_DUAL_LEFT_END.png");
}

.image-cell.dual-center.endstyle-two {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_DUAL_LEFT_ALT_END.png");
}

.image-cell.dual-center.endstyle-three {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_DUAL_LEFT_ALT2_END.png");
}

/*
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|  
>>>>>>>>>>>>>>>>|                                     ADDITIONAL THEMES                                 |
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|
*/

.image-cell.left.style-nightfall {
  background-image: url("http://timebox.wikidot.com/local--files/advanced-navigation-toolbar-source/ANT_END_LEFT_NIGHTFALL.png"), url("{$prevImage}");
}
.image-cell.left.bottom.style-nightfall {
  background-image: url("http://timebox.wikidot.com/local--files/advanced-navigation-toolbar-source/ANT_END_LEFT_NIGHTFALL.png"), url("{$prev2Image}");
}
.image-cell.right.style-nightfall {
  background-image: url("http://timebox.wikidot.com/local--files/advanced-navigation-toolbar-source/ANT_END_RIGHT_NIGHTFALL.png"), url("{$nextImage}");
}
.image-cell.right.bottom.style-nightfall {
  background-image: url("http://timebox.wikidot.com/local--files/advanced-navigation-toolbar-source/ANT_END_RIGHT_NIGHTFALL.png"), url("{$next2Image}");
}

.image-cell.center.style-nightfall {
  background-image: url("http://timebox.wikidot.com/local--files/advanced-navigation-toolbar-source/ANT_MID_LEFT_NIGHTFALL.png");
}
.image-cell.dual-center.style-nightfall {
  background-image: url("http://timebox.wikidot.com/local--files/advanced-navigation-toolbar-source/ANT_DUAL_NIGHTFALL_ALT.png");
}

.image-cell.dual-center.endstyle-nightfall {
  background-image: url("http://timebox.wikidot.com/local--files/advanced-navigation-toolbar-source/ANT_DUAL_LEFT_NIGHTFALL_END.png");
}
.image-cell.center.endstyle-nightfall {
  background-image: url("http://timebox.wikidot.com/local--files/advanced-navigation-toolbar-source/ANT_MID_LEFT_NIGHTFALL_END.png");
}

```
transform: scaleX(-1);
```
```
transform: scaleX(-1);
```
```
flex-basis: 100%;
```
```
margin-top: 1.25em;
```
```
background-image: url(
```
```
transform: scaleX(-1);
```
```
transform: scaleX(-1);
```
```
flex-basis: 100%;
```

(none)

```
cell-container
```
```
rightmode-{$rightmode}
```
```
normal
```
```
image-cell
```
```
left
```
```
style-{$styleNum}
```
```
side-text-cell
```
```
full
```
```
image-cell
```
```
center
```
```
style-{$styleNum}
```
```
rightmode-{$rightmode}
```
```
end
```
```
image-cell
```
```
center
```
```
endstyle-{$styleNum}
```
```
main-text-cell
```
```
leftmode-{$leftmode}
```
```
end
```
```
image-cell
```
```
center
```
```
endstyle-{$styleNum}
```
```
leftmode-{$leftmode}
```
```
normal
```
```
small
```
```
image-cell
```
```
center
```
```
style-{$styleNum}
```
```
side-text-cell
```
```
full
```
```
image-cell
```
```
right
```
```
style-{$styleNum}
```
```
cell-container
```
```
base-cell
```
```
image-cell
```
```
left
```
```
style-{$styleNum}
```
```
rightmode-{$rightmode}
```
```
normal
```
```
image-cell
```
```
left
```
```
bottom
```
```
style-{$styleNum}
```
```
base-cell
```
```
side-text-cell
```
```
rightmode-{$rightmode}
```
```
normal
```
```
text
```
```
side-text-cell
```
```
rightmode-{$rightmode}
```
```
normal
```
```
image-cell
```
```
dual-center
```
```
style-{$styleNum}
```
```
rightmode-{$rightmode}
```
```
end
```
```
image-cell
```
```
dual-center
```
```
endstyle-{$styleNum}
```
```
base-cell
```
```
main-text-cell
```
```
main-text-cell
```
```
image
```
```
leftmode-{$leftmode}
```
```
normal
```
```
image-cell
```
```
dual-center
```
```
style-{$styleNum}
```
```
leftmode-{$leftmode}
```
```
end
```
```
image-cell
```
```
dual-center
```
```
endstyle-{$styleNum}
```
```
base-cell
```
```
side-text-cell
```
```
leftmode-{$leftmode}
```
```
normal
```
```
text
```
```
side-text-cell
```
```
base-cell
```
```
image-cell
```
```
right
```
```
style-{$styleNum}
```
```
leftmode-{$leftmode}
```
```
normal
```
```
image-cell
```
```
right
```
```
bottom
```
```
style-{$styleNum}
```

[[iftags -component-backend]]
[[module CSS]]
.cell-container {
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
    overflow: hidden;
    font-size: small;
    justify-content: center;
}
@media (max-width: 450px) {
.cell-container {
    font-size: xx-small;
}
}

.base-cell {
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
@media (max-width: 450px) {
.base-cell {
    height: 60px;
}
}


/*
|-----------------------------------------------------------------------------------|  
|                                IMAGE DIVS ANT                                     |
|-----------------------------------------------------------------------------------|
*/

.image-cell {
    width: 80px;
    height: 70px;
    font-size: 15px;
    overflow: visible;
    background-position: 50%,50%;
    background-size: 70px, 20px;
    background-repeat: no-repeat;
    object-fit: contain;
}
@media (max-width: 450px) {
.image-cell{
    font-size: xx-small;
    width: 4em;
    height: 30px;
}
}

.main-text-cell.image {
    background-size: 54px, 54px;
    background-repeat: no-repeat;
    background-position: 50%,50%;
    margin-bottom: 0.75em;
}
@media (max-width: 450px) {
.main-text-cell.image {
    background-size: 30px, 30px;
    background-repeat: no-repeat;
    background-position: 50%,50%;
}
}

/*
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|  
>>>>>>>>>>>>>>>>|                                      IMAGE CENTER                                        |
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|
*/

.image-cell.center {
    background-position: 50%;
    width: 5em;
    height: 140px;
}
@media (max-width: 450px) {
.image-cell.center{
    background-size: 30px;
    height: 60px;
}
}

.image-cell.center.style-one {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_MID_LEFT.png");
}
.image-cell.center.style-two {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_MID_LEFT_ALT.png");
}
.image-cell.center.style-three {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_MID_LEFT_ALT2.png");
}

/*
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|  
>>>>>>>>>>>>>>>>|                                  IMAGE DUAL CENTER                                     |
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|
*/

.image-cell.dual-center {
    background-position: 50%;
    width: 5em;
    height: 140px;
}
@media (max-width: 450px) {
.image-cell.dual-center{
    width: 4em;
    height: 60px;
    background-size: 35px;
}
}

.image-cell.dual-center.style-one {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_DUAL_LEFT.png");
}
.image-cell.dual-center.style-two {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_DUAL_LEFT_ALT.png");
}
.image-cell.dual-center.style-three {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_DUAL_LEFT_ALT2.png");
}

/*
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|  
>>>>>>>>>>>>>>>>|                                         IMAGE LEFT                                         |
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|
*/

.image-cell.left {
    background-position: 50%, 17%;
    width: 5em;
    height: 140px;
}
@media (max-width: 450px) {
.image-cell.left{
    background-position: 50%,21%;
    background-size: 35px, 25%;
    height: 60px;
}
}

.image-cell.left.style-one {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_LEFT.png"), url("{$prevImage}");
}
.image-cell.left.style-two {
  background-image: url(" http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_LEFT_ALT.png"), url("{$prevImage}");
}
.image-cell.left.style-three {
  background-image: url(" http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_LEFT_ALT2.png"), url("{$prevImage}");
}


.image-cell.left.bottom {
    margin-top: -2.05em;
    height: 85px;
}
@media (max-width: 450px) {
.image-cell.left.bottom {
    margin-top: -1.75em;
    margin-bottom: -1.15em;
    height: 55px;
}
}

.image-cell.left.bottom.style-one {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_LEFT.png"), url("{$prev2Image}");
}
.image-cell.left.bottom.style-two {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_LEFT_ALT.png"), url("{$prev2Image}");
}
.image-cell.left.bottom.style-three {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_LEFT_ALT2.png"), url("{$prev2Image}");
}

/*
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|  
>>>>>>>>>>>>>>>>|                                         IMAGE RIGHT                                        |
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|
*/

.image-cell.right {
    background-position: 50%,83%;
    width: 5em;
    height: 140px;
}
@media (max-width: 450px) {
.image-cell.right{
    background-position: 50%,78%;
    background-size: 35px, 25%;
    height: 60px;
}
}

.image-cell.right.style-one {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_RIGHT.png"), url("{$nextImage}");
}
.image-cell.right.style-two {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_RIGHT_ALT.png"), url("{$nextImage}");
}
.image-cell.right.style-three {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_RIGHT_ALT2.png"), url("{$nextImage}");
}

.image-cell.right.bottom {
    margin-top: -2.05em;
    height: 85px;
}
@media (max-width: 450px) {
.image-cell.right.bottom {
    margin-top: -1.75em;
    margin-bottom: -1.15em;
    height: 55px;
}
}

.image-cell.right.bottom.style-one {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_RIGHT.png"), url("{$next2Image}");
}
.image-cell.right.bottom.style-two {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_RIGHT_ALT.png"), url("{$next2Image}");
}
.image-cell.right.bottom.style-three {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_END_RIGHT_ALT2.png"), url("{$next2Image}");
}

/*
|-----------------------------------------------------------------------------------|  
|                                                 TEXT DIVS ANT                                               |
|-----------------------------------------------------------------------------------|
*/

.side-text-cell {
  display: inline-grid;
  font-size: 15px;
  flex-basis: 40%;
  text-align: center;
  align-items: center;
  max-width: 30em;
  min-width: 6em;
}
@media (max-width: 450px) {
.side-text-cell {
  font-size: xx-small;
  flex-basis: 20%;
  max-width: 8em;
  min-width: 6em;
}
}

.side-text-cell.full {
    height: 140px;
}
@media (max-width: 450px) {
.side-text-cell.full {
    height: 60px;
    width: 10em;
}
}

.main-text-cell {
    flex-basis: 10%;
    max-width: 8em;
    font-size: 15px;
    overflow-wrap: break-word;
}
@media (max-width: 450px) {
.main-text-cell {
    font-size: xx-small;
    max-width: 8em;
    min-width: 5em;
}
}

/*
|-----------------------------------------------------------------------------------|  
|                                               ALT MODES ANT                                                |
|-----------------------------------------------------------------------------------|
*/

/*
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|  
>>>>>>>>>>>>>>>>|                                          RIGHT MODE                                        |
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|
*/

.rightmode-\{\$rightmode\}.normal {
    display: flex;
    justify-content: end;
    align-items: end;
}
.rightmode-\{\$rightmode\}.end {
  display: none;
}
@media (max-width: 450px) {
.rightmode-\{\$rightmode\}.normal {
  max-width: 15em;
}
}

.rightmode-\{\$rightmode\}.normal.text {
    margin-top: -3.5em; 
    margin-bottom: 1.5em;
    height: 50%;
}
@media (max-width: 450px) {
.rightmode-\{\$rightmode\}.normal.text {
    margin-top: -0.1em; 
    margin-bottom: 0.25em;
    height: 40%;
}
}

.rightmode-a.normal {
  display: none;
}
.rightmode-a.end {
  display: inherit;
}

/*
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|  
>>>>>>>>>>>>>>>>|                                           LEFT MODE                                        |
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|
*/
   
.leftmode-\{\$leftmode\}.normal {
    display: flex;
    justify-content: end;
    align-items: end;
}
.leftmode-\{\$leftmode\}.end {
  display: none;
}
@media (max-width: 450px) {
.leftmode-\{\$leftmode\}.normal {
  max-width: 15em;
}
}


.leftmode-\{\$leftmode\}.normal.text {
    margin-top: -3.5em; 
    margin-bottom: 1.5em;
    height: 50%;
}
@media (max-width: 450px) {
.leftmode-\{\$leftmode\}.normal.text {
    margin-top: -0.1em; 
    margin-bottom: 0.25em;
    height: 40%;
}
}

/* needed to fix alignment issues present on the small version but not the big one */
.leftmode-\{\$leftmode\}.normal.small {
    justify-content: start;
    align-items: start;
    text-align: center;
}

.leftmode-a.normal {
  display: none;
}
.leftmode-a.end {
  display: inherit;
}

/*
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|  
>>>>>>>>>>>>>>>>|                                     IMAGE SERIES END                                    |
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|
*/

.image-cell.center.endstyle-one {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_MID_LEFT_END.png");
}
.image-cell.center.endstyle-two {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_MID_LEFT_ALT_END.png");
}
.image-cell.center.endstyle-three {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_MID_LEFT_ALT2_END.png");
}

.image-cell.dual-center.endstyle-one {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_DUAL_LEFT_END.png");
}

.image-cell.dual-center.endstyle-two {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_DUAL_LEFT_ALT_END.png");
}

.image-cell.dual-center.endstyle-three {
  background-image: url("http://scp-wiki.wikidot.com/local--files/component:advanced-navigation-toolbar-source/ANT_DUAL_LEFT_ALT2_END.png");
}

/*
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|  
>>>>>>>>>>>>>>>>|                                     ADDITIONAL THEMES                                 |
>>>>>>>>>>>>>>>>|----------------------------------------------------------------------|
*/

.image-cell.left.style-nightfall {
  background-image: url("http://timebox.wikidot.com/local--files/advanced-navigation-toolbar-source/ANT_END_LEFT_NIGHTFALL.png"), url("{$prevImage}");
}
.image-cell.left.bottom.style-nightfall {
  background-image: url("http://timebox.wikidot.com/local--files/advanced-navigation-toolbar-source/ANT_END_LEFT_NIGHTFALL.png"), url("{$prev2Image}");
}
.image-cell.right.style-nightfall {
  background-image: url("http://timebox.wikidot.com/local--files/advanced-navigation-toolbar-source/ANT_END_RIGHT_NIGHTFALL.png"), url("{$nextImage}");
}
.image-cell.right.bottom.style-nightfall {
  background-image: url("http://timebox.wikidot.com/local--files/advanced-navigation-toolbar-source/ANT_END_RIGHT_NIGHTFALL.png"), url("{$next2Image}");
}

.image-cell.center.style-nightfall {
  background-image: url("http://timebox.wikidot.com/local--files/advanced-navigation-toolbar-source/ANT_MID_LEFT_NIGHTFALL.png");
}
.image-cell.dual-center.style-nightfall {
  background-image: url("http://timebox.wikidot.com/local--files/advanced-navigation-toolbar-source/ANT_DUAL_NIGHTFALL_ALT.png");
}

.image-cell.dual-center.endstyle-nightfall {
  background-image: url("http://timebox.wikidot.com/local--files/advanced-navigation-toolbar-source/ANT_DUAL_LEFT_NIGHTFALL_END.png");
}
.image-cell.center.endstyle-nightfall {
  background-image: url("http://timebox.wikidot.com/local--files/advanced-navigation-toolbar-source/ANT_MID_LEFT_NIGHTFALL_END.png");
}

[[/module]]


[!--
|-----------------------------------------------------------------------------------|  
|                               SINGLE SIZE ANT                                     |
|-----------------------------------------------------------------------------------|
--]

>[!-[[#if {$dual} | - |  ]]
[[div class="cell-container"]]

[[div class="rightmode-{$rightmode} normal"]]
[[div class="image-cell left style-{$styleNum}"]]
@@@@
@@@@
[[/div]]

[[div_ class="side-text-cell full"]]
[[[{$prev}|{$prevtext}]]]
[[/div]]
 
[[div class="image-cell center style-{$styleNum}")]]
@@@@
@@@@
[[/div]]
[[/div]]

[[div class="rightmode-{$rightmode} end"]]
[[div class="image-cell center endstyle-{$styleNum}"]]
@@@@
@@@@
[[/div]]
[[/div]]

[[div class="main-text-cell"]]
[[[{$hub}|{$hubtext}]]]
[[/div]]

[[div class="leftmode-{$leftmode} end"]]
[[div class="image-cell center endstyle-{$styleNum}" style="transform: scaleX(-1);"]]
@@@@
@@@@
[[/div]]
[[/div]]

[[div class="leftmode-{$leftmode} normal small"]]
[[div class="image-cell center style-{$styleNum}" style="transform: scaleX(-1);"]]
@@@@
@@@@
[[/div]]

[[div_ class="side-text-cell full"]]
[[[{$next}|{$nexttext}]]]
[[/div]]

[[div class="image-cell right style-{$styleNum}"]]
@@@@
@@@@
[[/div]]
[[/div]]

[[/div]]
[!-- --]

[!--
|-----------------------------------------------------------------------------------|  
|                               DOUBLE SIZE ANT                                     |
|-----------------------------------------------------------------------------------|
--]

>[!-[[#if {$dual} |  | - ]]
[[div class="cell-container"]]
[[div class="base-cell"]]
[[div class="image-cell left style-{$styleNum}"]]
@@@@
@@@@
[[/div]]

[[div class="rightmode-{$rightmode} normal"]]
[[div class="image-cell left bottom style-{$styleNum}"]]
@@@@
@@@@
[[/div]]
[[/div]]
[[/div]]

[[div class="base-cell"]]
[[div_ class="side-text-cell"]]
[[[{$prev}|{$prevtext}]]]
[[/div]]

[[div class="rightmode-{$rightmode} normal text"]]
[[div_ class="side-text-cell" style="flex-basis: 100%;"]]
[[[{$prev2}|{$prev2text}]]]
[[/div]]
[[/div]]
[[/div]]

[[div class="rightmode-{$rightmode} normal"]]
[[div class="image-cell dual-center style-{$styleNum}"]]
@@@@
@@@@
[[/div]]
[[/div]]

[[div class="rightmode-{$rightmode} end"]]
[[div class="image-cell dual-center endstyle-{$styleNum}"]]
@@@@
@@@@
[[/div]]
[[/div]]

[[div class="base-cell"]]
[[div_ class="main-text-cell" style="margin-top: 1.25em;"]]
[[[{$hub}|{$hubtext}]]]
[[/div]]

[[div class="main-text-cell image" style="background-image: url("{$hubImage}");"]]
@@@@
@@@@
[[/div]]
[[/div]]

[[div class="leftmode-{$leftmode} normal"]]
[[div class="image-cell dual-center style-{$styleNum}" style="transform: scaleX(-1);"]]
@@@@
@@@@
[[/div]]
[[/div]]

[[div class="leftmode-{$leftmode} end"]]
[[div class="image-cell dual-center endstyle-{$styleNum}" style="transform: scaleX(-1);"]]
@@@@
@@@@
[[/div]]
[[/div]]

[[div class="base-cell"]]
[[div_ class="side-text-cell"]]
[[[{$next}|{$nexttext}]]]
[[/div]]

[[div class="leftmode-{$leftmode} normal text"]]
[[div_ class="side-text-cell" style="flex-basis: 100%;"]]
[[[{$next2}|{$next2text}]]]
[[/div]]
[[/div]]
[[/div]]

[[div class="base-cell"]]
[[div class="image-cell right style-{$styleNum}"]]
@@@@
@@@@
[[/div]]

[[div class="leftmode-{$leftmode} normal"]]
[[div class="image-cell right bottom style-{$styleNum}"]]
@@@@
@@@@
[[/div]]
[[/div]]
[[/div]]
[[/div]]


[!-- --]
[[/iftags]]

Advanced Navigation Toolbar Source

Module Styles

Inline Styles

Includes

CSS Classes

Page Source