/* Styles used for both bootloader & archive */
/* Not used for archive any more - using nav-dweb below */
#statuselement { margin: 0 0 3px 10px; float: right; clear: right; text-align: right; position: relative; }  /* "floatright" Grouped in top right corner */
#statuselement li {display: table-row; padding-top: 3px; padding-right: 0; margin: 0 0 3px 3px;}

/* Styles used for bootloader */

/* Styles used for archive.html */
.floatright {margin: 0 0 3px 10px; float: right; clear: right; text-align: right;
    position: fixed; z-index: 999999; top: 100px; right: 10px; font-size: 50% }
.floatright li {padding-top: 1px; margin: 0 0 3px 3px;} /* Wide enough for two indicators */
.floatright ul {margin: 0 0 3px 10px; width: 150px;
    display: grid;  grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));  grid-auto-flow: dense;}  /* Wide enogh for two indicators */

.transportstatus0 {color: lawngreen}
.transportstatus1 {color: red}
.transportstatus2 {color: yellow}
.transportstatus3 {color: black}
.transportstatus4 {color: purple}

/* These edits are made to archive-min.js as they are bugs in the CSS rather than changes.
   because that file is minimized its hard to see
   if update archive-min.js will need to reapply, or can apply here*/
/*
-body.ia-module.tiles .row>.tilebars .item-ia .item-parent .item-parent-img img{max-height:90px;max-width:90px
+body.ia-module.tiles .row>.tilebars .item-ia .item-parent .item-parent-img img{max-height:90px;max-width:90px;width:45px;width:45px}
-body.ia-module.tiles .item-ia .item-parent .item-parent-img img{max-height:90px;max-width:90px}
+body.ia-module.tiles .item-ia .item-parent .item-parent-img img{max-height:90px;max-width:90px;width:45px;width:45px}
-body.ia-module.tiles .item-ia .item-parent .item-parent-img img{max-height:90px;max-width:90px}
+body.ia-module.tiles .item-ia .item-parent .item-parent-img img{max-height:90px;max-width:90px;width:45px;width:45px}
 */


body.navia .navbar #nav-dweb{position:static;margin:0;width:100%;background-color:#353535;text-align:center}
body.navia .navbar #nav-dweb li:hover{color:white !important}
body.navia .navbar #nav-dweb ul{margin-bottom: 0px; display: inline}

/* TODO check and figure out why these break the above rules
@media (max-width:991px){body.navia .navbar #nav-dweb li{margin-left:9px;margin-right:9px}}
@media (max-width:820px){body.navia .navbar #nav-dweb li{margin-left:7px;margin-right:7px}}
@media (max-width:767px){body.navia .navbar #nav-dweb{display:none !important}}
*/

#nav-dweb {
    text-align: left;
    width: 100%;
    color: #ccc;
    background-color: #2A2A2A;
    padding: 4px 0px 4px 0;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
    height: auto;
    display: block; /* Make sure Dweb ipfs, etc all on one line - flexgrid could be better*/
}
#dweb-status {
    display: inline-block;
}
#dweb-status ul {
    padding-left:0;
}
body.navia .navbar #nav-dweb #dweb-status li, body.navia .navbar #nav-dweb a {
    height: auto;
    font-size: 12px;
    cursor: pointer;
    margin: 0 6px;
    vertical-align:top;
    zoom:1;
    line-height:1;
}
body.navia .navbar #nav-dweb #dweb-status li {
    padding: 5px 8px 5px 20px;
    border: 1px solid #848484;
    border-radius: 3px;
    background-position: 5px 50%;
    background-size: 10px;
    background-repeat: no-repeat;
    display:inline-block;
}
body.navia .navbar #nav-dweb a {
    padding: 5px 0px 5px 0px;
    display: inline
}
body.navia .navbar #nav-dweb a img {
    height: 30px;
    margin-top: 4px;
}
.transportstatus0 {
    color: #ccc;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="200" height="200"><circle cx="100" cy="100" r="95" fill="green" /></svg>');
}
.transportstatus1 {
    color: #ccc;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="200" height="200"><circle cx="100" cy="100" r="95" fill="red" /></svg>');
}
.transportstatus2 {
    color: #ccc;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="200" height="200"><circle cx="100" cy="100" r="95" fill="yellow" /></svg>');

}
.transportstatus3 {
    color: #ccc;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="200" height="200"><circle cx="100" cy="100" r="95" fill="black" /></svg>');

}
.transportstatus4 {
    color: #ccc;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="200" height="200"><circle cx="100" cy="100" r="95" fill="purple" /></svg>');

}

.dweb-message { padding-top: 60px; padding-left; 3em } /*Else gets hidden behind navwrap - not sure why */

.dweb-nav-left {
    position: relative;
    top: 1px;
}
body.ia-module .welcome { padding-top: 75px;}