body
{
	background-color: rgb(178, 201, 215);
	background-image: linear-gradient(rgb(40, 118, 157) 49%, rgb(178, 201, 215) 51%);
}
a
{
	color:hsl(0,0%,8%);
}
a:not(.locked):hover
{
	color:white;
}
select, input[type='date']
{
	border-radius:0.7em;
	border-width:1px;
}
input
{
	border-radius:0.2em;
}
.button
{
	background-color:hsl(0,0%,10%);
	color:hsl(0,0%,100%);
	border-radius:1em;
}
.button.small
{
	border-radius:0.8em;
}
.locked
{
	background-color:#777;
	color:#DDD;
	cursor:default;
}
nav.main>:first-child, nav.main>:first-child>.button:first-of-type
{
	border-radius:0 1em 1em 0;
}
.callout
{
	opacity:1;
}
.callout:hover
{
	color: hsl(0, 0%, 100%);
  background-color: hsl(359, 97%, 61%);
}

.accent
{
	color: hsl(0, 0%, 100%);
  background-color: hsl(359, 77%, 54%);
}

.accent:not(.button) 
{
	color: hsl(359, 77%, 54%);
	background-color: inherit;
}

.accent:hover
{
	color: hsl(359, 100%, 65%);
	background-color: hsla(0, 0%, 50%, 0.3);
}

.sidebar, nav.main, nav.main>div
{
	color: hsl(0, 0%, 100%);
	background-color:hsl(0,0%,10%);
}

.backing
{
	background-color:hsla(240,20%,100%,0.5);
	border:0.08em solid hsla(240,20%,100%,0.6);
}
.modal>*
{
	background-color:hsla(240,20%,100%,0.7);
	border:0.08em solid hsla(240,20%,100%,0.6);
}
.backing.accent
{
	background-color:hsla(0,100%,100%,0.3);
	border:0.08em solid hsla(0,0%,90%,0.6);
}
.preview
{
	background-color:hsl(130, 45%, 65%);
}

.tab
{
	background-color:hsla(240,20%,100%,1);
	border-color:hsla(240,20%,100%,1);
	border-bottom-width:0;
}
.tab.backing
{
	background-color:hsla(0,0%,100%,0.5);
	border-color: hsla(0,0%,100%,0.6);
}

.cardbox>*, .card {
	background-color:hsla(240,100%,88%,0.5);
	border-color:hsla(240,100%,95%,0.7);
}

.grid>*:after
{
	border-color: hsla(240,100%,95%,0.7);
}


.viney
{
	background-image: url('../images/corner_vine.png');
	background-position: top right;
	background-repeat: no-repeat;
}
.viney.tiny
{
	background-size:50%;
}



@media screen and (-ms-high-contrast: active) 
{
	.accent
	{
		forced-color-adjust: none;
		border-color: hsl(359, 77%, 54%);
		color: hsl(359, 77%, 54%);
		background-color:buttonface;
	}
	.button.accent:not(.locked):hover
	{
		background-color:hsl(359, 77%, 54%);
		color: White;
		border-color: White;
	}
	a.accent:not(.locked):hover
	{
		color: hsl(359, 77%, 54%);
		background-color:unset;
	}
}

/* Small Screen, mobile view */
@media screen and (max-width: 620px)
{
	.box
	{
		border-left-width:0;
		border-right-width:0;
	}


}