
/* this declares a better box model */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }



.list-wrap label {
    float:left;
    # color:#00BDE8;
    color: #232323;
}
.search-box {
    float:left;
    clear:left;
    width:70%;
    padding:0.4em;
    font-size:1em;
    color:#232323;
}

.list-count {
    float:left;
    text-align:center;
    width:30%;
    padding:0.5em;
    color:#ddd;
}



li {
    transition-property: margin, background-color, border-color;
    transition-duration: .4s, .2s, .2s;
    transition-timing-function: ease-in-out, ease, ease;
}

.empty-item {
    transition-property: opacity;
    transition-duration: 0s;
    transition-delay: 0s;
    transition-timing-function: ease;
}

.empty .empty-item {
    transition-property: opacity;
    transition-duration: .2s;
    transition-delay: .3s;
    transition-timing-function: ease;
}

.hiding {
    margin-left:-100%;
    opacity:0.5;
}

.hidden {
    display:none;
}

ul {
    float:left;
    width:100%;
    margin:2em 0;
    padding:0;
    position:relative;
}

ul:before {
    content:'all links;';
    position:absolute;
    left:-2.8em;
    font-size:3em;
    text-align:right;
    top:1.5em;
    color:#ededed;
    font-weight:bold;
    font-family: sans-serif;
    transform:rotate(-90deg);
}

li {
    float:left;
    clear:left;
    width:100%;
    margin:0.2em 0;
    padding:0.5em 0.8em;
    list-style:none;
    background-color:#f2f2f2;
    border-left:5px solid #003842;
    cursor:pointer;
    color:#232323;
    position:relative;
    z-index:2;
}

li:hover {
    background-color:#f9f9f9;
    border-color:#ff460d;
    color: #ff460d;
}

a {
    text-decoration: none;
    color: #232323;
}

a:hover {
    background-color:#f9f9f9;
    border-color:#ff460d;
    color: #f9f9f9;
}


.empty-item {
    background:#fff;
    color:#232323;
    margin:0.2em 0;
    padding:0.5em 0.8em;
    font-style:italic;
    border:none;
    text-align:center;
    visibility:hidden;
    opacity:0;
    float:left;
    clear:left;
    width:100%;
}

.empty .empty-item {
    opacity:1;
    visibility:visible;
}







/*
The following are styles purely for the surroundings
*/



body {
    background-color:#fff;
    font-family:'Open Sans', sans-serif;
    margin:0;
    padding:0;
    font-size:1em;
}

h1 {
    font-size:2.6em;
    margin:0;
    padding-top:1.5em;
    text-align:center;
    font-family: sans-serif;
}

h3 {
    margin:0 0 2em;
    text-align:center;
    font-weight:normal;
    font-family: georgia, times;
    font-style:italic;
    color:#777;
    font-size:1em;
}

.info {
    float:left;
    width:60%;
    margin:2em 20%;
    padding:2em 0;
    background:#f9f9f9;
    border-left:5px solid #003842;
    padding:10px 20px;
}

.list-wrap {
    float:left;
    width:40%;
    margin:2em 30%;
    padding:2em 0;
}

p {
    text-align:left;
    font-size:1em;
}

.cta {
    float:left;
    width:100%;
    text-align:center;
    color:#999;
    font-family: georgia, times, system-ui;
    font-style:italic;
    margin:2em 0;
}

.cta a {
    font-size:1.5em;
    font-style:normal;
    font-family: sans-serif;
    text-decoration:none;
    line-height:1.5em;
}

.topdeco {
    float:left;
    width:100%;
    height:10px;
    position:fixed;
    z-index:10;
}

.topdeco span {
    float:left;
    width:25%;
    height:100%;
}

.deco span:nth-child(1) {
    background:#ff460d;
}
.deco span:nth-child(2) {
    background:#232323;
}
.deco span:nth-child(3) {
    background:#ff460d;
}
.deco span:nth-child(4) {
    background:#232323;
}
