* {
    box-sizing: border-box;
}

body {
    font-family: Arial;
    padding: 10px;
    background: #f1f1f1;
    font-size: 90%;
}

/* Header Title */
.header {
    padding: 1px;
    text-align: center;
    background: white;
    font-family: Impact, Charcoal, sans-serif;
    font-style: italic;
}

.header h1 {
    font-size: 30px;
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #333;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.topnav a.active {
    background-color: #8C05FF;
    color: white;
}

/* Change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
    float: left;
    width: 75%;
}

/* Right column */
.rightcolumn {
    float: left;
    width: 25%;
    background-color: #f1f1f1;
    padding-left: 20px;
}

.fullcolumn {   
    float: left;
    width: 100%;
}

/* Add a card effect for articles */
.card {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Footer */
.footer {
    padding: 5px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
}

/* Table */

.list {
    font-family: Helvetica, "Trebuchet MS", Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

.list td, .list th {
    border: 1px solid #ddd;
    padding: 8px;
}

.list td.bold {
    font-weight: bold;
}

.list tr.today {
    color: #FD0404;
}

.list tr:nth-child(even){background-color: #f2f2f2;}

.list tr:hover {background-color: #ddd;}

.list tr.category {
    background-color: #999;
    color: #fff;
}

.list tr.today { color: #FD0404; }

.list tr.clickable { cursor: pointer; }

.list th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #555;
    color: white;
}

.list th.light {
    background-color: #ccc;
    color: black;
}

.price_1000 { color: #8C05FF; }
.price_600 { color: #09AFFF; }
.price_400 { color: #26B450; }
.price_0 { color: #FF9300; }

/* Form */

input[type=text], input[type=password], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

.container input[type=submit] {
    background-color: #8C05FF;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

input[type=submit] { /* normal button */
    background-color: #8C05FF;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit].grey { background-color: #777 }

input[type=submit]:hover {
    background-color: #A949FB;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

.col-100 {
    float: left;
    width: 100%;
    margin-top: 6px;
}

.logincolumn {   
    float: none;
    margin: auto;
    width: 50%;
}

.signup { 
    padding: 15px 10px 0px 0px;
    text-align: center;
}
.signup a:link {  
    color: #8C05FF;
    text-decoration: none; 
}
.signup a:visited { text-decoration: none; }
.signup a:hover { text-decoration: underline; }
.signup a:active { text-decoration: underline; }

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
    input[type=submit] { /* because height of the button is too small on iPhone */
        padding: 20px;
    }
    .logincolumn {
        float: left;
        width: 100%;
    }
    body {
        font-size: 80%;
        padding: 0px; 
    }
    .card {
        padding: 5px;
    }
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
    .leftcolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
    }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
    .topnav a {
        float: none;
        width: 100%;
    }
}