body{
    font-family: Verdana, serif;
	font-size:15px;
	color: #646464;
	background-color: #fafafa;
}

th, td{
    padding: .3em;
    vertical-align: top;
}

th{
    text-align: right;
}

p{
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0;
}

p:first-child{
    margin-top: 0;
}

p:last-child{
    margin-bottom: 0;
}

.past{
    color: lightgrey;
    /*font-style: italic;*/
}

.current{
    color: goldenrod;
}

.main{
    width: 50%;
    margin: 0 auto;
}

.header{
    position: sticky;
    z-index: 999;
    top: 0;
    width: 100%;
    padding: 10px 16px;
    background: #555;
    color: #fafafa;
    height: 30px;
    border-radius: 5px;
}

.header input[type=submit] {
    background-color: inherit;
    color: inherit;
    position: absolute;
    height: 25px;
    right: 13px;
    top: 13px;
    border-radius: 5px;
    border: 2px solid lightcoral;
}

.header input[type=submit]:hover {
    background-color: #888;
}

.header select {
    background-color: #666;
    color: inherit;
    padding: .2em;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.1;
    border: 1px solid #777;
    border-radius: 5px;
    background-image: linear-gradient(to top, #444, #777 75%);
}

.header option:checked {
    background-color: #444;
}

.icon{
    width: 25px;
}

.mail{
    width: 16px;
    cursor: pointer;
}

.logo{
    height: 25px;
    margin-right: 10px;
}

.star{
    width: 25px;
}

.img{
    width: 100%;
    border-radius : .3em;
    box-shadow: darkgray 5px 5px 10px;
}

.past img{
    opacity: .25;
}

@media (hover: none) {  /* mobile */
    .main{
        width: 90%;
        font-size:25px;
    }

    .header{
        height: 50px;
    }
}