/* Colors */
.active {background:white}
.assigned {background:skyblue}
.closed, .deferred {background:lightgrey}
.due, .tight, .nodate, .startstop {background:orange}
.ontime, .slack, .achieved {background:lightgreen}
.overdue, .atrisk, .cancelled {background:salmon}

/* Layout */
.center {text-align:center}
.inline {display:inline}

/* Elements */
aside {
    float: right;
    width: 20em;
    border: 1px solid gray;
    background: lightgreen;
    padding: 0.5em;
    margin-right: 3em;
}
a.title:link, a.title:visited {
    text-decoration: none;
    color: black;
}
body {
    margin: 0;
    /* Note: we want UI-elements sans-serif but content serif - maybe*/
    font-family: sans-serif;
}
.content {
    padding: 0.7ex;
}
footer {
    border-top: solid 1px;
    margin-top: 1em;
    padding: 0.7ex;
    background-color: lightgray;
}
header {
    display: flow-root;
    nborder-bottom: solid 1px;
    margin-bottom: 1em;
    padding: 0.7ex;
    padding-bottom: 0;

    background-color: lightgray;
}
.nav h1 {
    margin: 2px;
    font-size: small;
    font-family: sans-serif;
    font-weight: normal;
    margin-bottom: 1em;
}

.panel {
    margin: 0.7ex;
    padding-bottom: 1ex;
    border: 1px dotted lightgray;
    
}
p.messagebox {
    border: 1px solid;
    background: white;
	    
}
p.messagebox>span {
    font-weight: bold;
    font-family: sans-serif;
}
/* Note: to be moved/replaced by colors */
span.ok {background: green}
span.error {background: red}
span.note {background: yellow}

span.account {
    float: right;
    background-color: salmon;
}
span.nav {
    float: left;
}
span.tab {
    border-right: 1px solid;
    border-top: 1px solid;
    padding-left: 0.5ex;
    padding-right: 0.5ex;
    margin:0
}
span.tab a:link, a:visited {
    text-decoration: none;
    color: black;
}
span.tab.first {
    border-left: 1px solid;
}
td.effort, td.total, td.deadline, td.week {
    padding-right: 0.5ex;
    padding-left: 0.5ex;
    text-align: right;
}
table, tr, td {
    border: 0px;
    border-collapse: collapse;
}
td, th {
    border-right: solid 1px black;
    border-left: solid 1px black;
}
td.tasklistheader {
    padding-left: 2em;
    font-style: italic;
}
th.edit {
    text-align: right;
}
tr.deferred {background:lightgrey}
tr.nextday {border-top: solid 1px black}


/* small displays */
@media (max-width: 44em) {
    article {
	font-size: .9em;
	padding: 2em 1.5em;
	margin: 1em;
    }
}
/* wide displays */
@media (min-width: 44em) {
    article {
	max-width: 55em;
	width: 94%
	padding-left: 6%
    }