/*
HTML
Inputs
Tables
#listContent
Nav-Bar
Messages
------------------------------------------------------------------------------------------------------------------------
*/

/*HTML
------------------------------------------------------------------------------------------------------------------------
*/

html {
    font-family: Roboto, Arial, sans-serif;
    font-size: 55.5%;
}

@media (min-width: 550px) {
    html {
        font-size: 62.5%;
    }
}

a {
    color: #3742E1;
}

a:hover {
    color: #0FA0CE;
}

.container {
    padding: 0;
}

/*Inputs
------------------------------------------------------------------------------------------------------------------------
*/

input, textarea, select, button {
	margin-bottom: 0;
}

textarea {
    min-height: 250px;
}

.add,
.remove,
button,
select,
select:focus,
textarea,
textarea:focus,
input[type="file"],
input[type="file"]:focus,
input[type="text"],
input[type="text"]:focus,
input[type="password"],
input[type="password"]:focus,
input[type="email"],
input[type="email"]:focus,
input[type="url"],
input[type="url"]:focus,
input[type="number"],
input[type="number"]:focus,
input[type="submit"],
input[type="submit"]:focus {
    border-width: 1px 1px 2px 1px;
    height: 30px;
    margin: 5px;
    line-height: 26px;
    padding: 2px;
    color: #000;
    border-color: #c0c0c0;
}

select:hover,
select:focus,
textarea:hover,
textarea:focus,
input[type="file"]:hover,
input[type="file"]:focus,
input[type="url"]:hover,
input[type="url"]:focus,
input[type="email"]:hover,
input[type="email"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
input[type="text"]:hover,
input[type="text"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
    border-width: 1px 1px 2px 1px;
    color: #000;
    border-color: #888;
}

.add:hover,
.remove:hover,
button:hover,
textarea:hover,
input[type="submit"]:hover {
    color: #000;
    border-color: #888;
}

input[type="file"],
input[type="file"]:focus {
    margin: 5px 5px 0 5px;
}

form {
    margin-bottom: 10px;
    margin-left: 3px;
    color: #000;
}

form.delete,
form.favorite,
form.logout {
    display: inline;
}


/*Tables
------------------------------------------------------------------------------------------------------------------------
*/

td td {
	border: none;
}

tr tr + tr button.add {
	display: none;
}

tr:first-child button.remove {
	display: none;
}

th {
    padding: 3px 4px 0 0;
}

td, tr {
    padding: 3px 2px 3px 0;
}

.image {
    margin-top: 5px;
    max-height: 350px;
    max-width: 350px;
}

.thumbnail {
    vertical-align: middle;
    max-height: 50px;
    max-width: 50px;
}

a .thumbnail {
    vertical-align: bottom;
}

label {
    margin: 0 0 0 5px;
}

table {
    margin: 0 0 5px 4px;
}

.inception {
    margin: 0;
}

#profile td,
#profile th {
    padding: 3px;
}

/*#listContent
------------------------------------------------------------------------------------------------------------------------
*/

#listContent {
    margin-left: 3px;
    width: 97%;
}

@media (min-width: 550px) {
    #listContent {
        width: 75%;
    }
}


/*NAV-BAR
------------------------------------------------------------------------------------------------------------------------
*/

.nav {
    background-color: #1EAEDB;
    color: #fff;
    list-style-type: none;
    text-align: center;
    padding: 3px 0 3px 0;
}

.nav > li {
    display: inline-block;
    padding: 0.2% 1.5% 0.2% 1.5%;
    margin-bottom: 3px;
}

.nav > li > a {
    text-decoration: none;
    color: #000;
}

.nav > li > a:hover {
    color: #fff;
}

.column > ul {
    margin-bottom: 5px;
}

/*Messages
------------------------------------------------------------------------------------------------------------------------
*/

.message {
    margin: 0 3px 0 3px;
    border: 2px solid #000;
    text-align: center;
    display: inline;
    width: auto;
    padding: 1px 35px 1px 35px;
}

/*Sorting
------------------------------------------------------------------------------------------------------------------------
*/

#listContent span:not([id]) {
    visibility: hidden;
}

#listContent .sorttable_sorted span:not([id]),
#listContent .sorttable_sorted_reverse span:not([id]) {
    display: none;
}