/* All divs are coloured red on border */
/* div {
	border: 1px solid red;
    margin: 0px auto 0px;
} */

/* A punction select all elements of type class */
/* A #hash select all element with id="hash" */

/* Adjusting padding for the navbar when the screen gets smaller*/
@media (max-width: 1024px) {
    body { padding-top: 100px; }
}

.navbar-logo {
    width: 300px;
    height: 50px;
}

/* This is the dropdown for the search results */
#paragraph {
    position: absolute;
    top: 100px;
    right: 100px;
    background: #212121;
    background-color: azure;
    border: none;
    opacity: 0.9;
    filter: alpha(opacity=80);
    text-align: left;
    z-index: 5;
}


/* The spinner should follow the search box */
#spin {
    position: absolute;
    top: 100px;
    right: 350px;
    width: 50px;
    height: 50px;
    z-index: 5;
}


#mapbox {
    position: relative;
    right: 10px;
    top: 10px;
    height: 25px;
    width: 25px;
    float: right;

}

#infobox {
    position: relative;
    right: 10px;
    top: 10px;
    height: 25px;
    width: 25px;
    float: right;

}

#shiplink {
    position: relative;
    left: 0px;
    top: 2px;
}

#shiptypeimg {
    width: 42px;
    height: 42px;
    border: 0;
    font-size: 15px;

}


/* This is the search result table */
.result-table {
    padding: 10px;
}


/* #ul {
    display: block;
    padding: 5px;
    background: white;
    } */


/*https://coderwall.com/p/xybujw/create-a-list-hover-effect-to-highlight-elements-using-pure-css*/
ul>li {
    opacity: 1.0;
}

/*Fade out elements not hovered over */
ul:hover>li:not(:hover) {
    opacity: 0.5;
}

.li-header {
    /* class */
    background: #212121;
    color: azure;
    list-style-position: inside;
    border: 2px solid #aaa;
    /*height:auto; */
}

.li-body {
    /* class */
    background: 212121;
    color: azure;
    list-style-position: inside;
    border: 2px solid #ddd;
    /*height:auto; */
    line-height: 50%;
}

.li-body>a {
    font-size: 12px;
}

/* make left side show whats active */
.li-body:hover {
    border-left: 5px solid #528cf7;
    border-top: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    margin-left: -5px;
    margin-top: 3px;
    margin-bottom: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* .floatright {
    float:right;
} */

.li-header a:hover {
    border-left: 5px solid blue;
    background-color: white;

}

.li:hover {
    border-left: 5px solid blue;
    background-color: white;

}





/* .navbar-nav > li { background-color: #00dd00; color: #dd0000 } //colours all navbar li's */

/* .navbar-nav > li > .dropdown-menu > li { background-color: #00dd00; color: #dd0000 } /*works but ugly */
/* .navbar-nav > li > .dropdown-menu a{     background-color: #00dd00;  }  /*works but ugly */

/* Dropdown menu font color*/
/* .navbar-nav > li > .dropdown-menu a{   color: #999999;  } */