body {
	font-family:arial;
	box-sizing: border-box;
	margin: 0;
}
main{
	display:flex;
	width: 100%;
	flex-flow: row wrap;
	row-gap: 30px;
	padding: 10px 0 0 0;
}
.header {
	background:url("images/header.jpg") no-repeat;
	background-size: cover;
	height: 110px;
}
h2, h1{
	margin:0px;
	font-weight: normal;
}

/* Publish Button Area */
#pub_submit {
	margin: .5em auto .5em auto;
	display: block;
	width: 320px;
	border: none;
	background-color: #DD8A11;
	color: #fff;
	padding: 14px 28px;
	font-size: 16px;
	cursor: pointer;
	text-align: center;
	box-shadow:  3px 3px 5px #999;
}
#sub_status{
	margin :auto;
	font-size: 14px;
}

#pub_submit:disabled{
	background-color: #c0c0c0;
	cursor: auto;
	color: #ececec
}
.publish-container{
	background-color: #e9e9e9;
	padding:.5em;
	margin: 1em 0 0 0;
}
#belowSubmit{
	margin:.5em auto .5em auto;
	padding: .3em;
	font-size:14px;
}

/* Track Selection Area */

.sel > .edit-track{
	display:inherit;
	margin-left:auto;
}
.row-main{
	display:flex;
}
.row-title{
	margin: auto 0 auto 0;
}
.row-context{
	margin-left:auto;
	display:flex;
}
.row-reorder{
	margin: auto 0 auto 10px;
	overflow: hidden;
}
.row-delete{
	text-decoration:underline;
	color: blue;
	margin: auto 1.3em auto ;
	display:none;
}

.row-jump, .row-edit {
	display:none;
	text-decoration:underline;
	margin: auto auto auto 10px;
	color: blue;
}

.sel > div > div > .row-edit {
	display:inherit;
}

.sel{
	background-color:#cad8db !important;
    animation: slide-up 0.4s ease-in;
}
.track-row, .track-add{
	display:grid;
	grid-template-columns: 30px 1fr;
	padding:5px;
	align-items:center;
	
}
.track-row > div{
	padding:5px;
}
.track-row:nth-child(even){
	background-color: #f4f4f4;
}
.track-add > a {
	margin: auto;
}
.delete, .delete:visited{
	font-size: 14px;
	color: red;
}
.move-down , .move-up {
	opacity:0.20;
}

/* Form Input - Vertical */
.form {
	background-color: #eeeeee;
}
.form > label, .form > div {
	display:block;
	margin:1em 0 0 0;
}
.form > label {
	font-weight:600;
}
.form > input {
	display:block;
	padding:0 0 0 .3em;
	margin:.125em 0 0 0;
	height:2em;
	font-size:14px;
}
.input-description{
	font-family: inherit;
	resize: none;
	padding: .75em .3em .75em .3em;
	height: 4em;
	width: 95%;
}

/* Form Submit Area */
.submit-area{
	display:flex; 
	margin: 2em 0 0 0;
	justify-content:flex-start;
}
.submit-btn{
	align-self:center;
	margin: 0 2em 0 0;
	height: 2.5em;
	font-size: 16px;
}
.cancel-link{
	align-self:center;
	font-size: 16px;
}

/* Card Formatting */
.card{
	max-width:500px;
	min-width:320px;
	margin:0 auto auto auto ;
	flex:1;
}
.card-title{
	display:inline-block;
	font-size: 24px;
}
.card-edit{
	align-self: center;
	
}
.card-container{
	display:flex;
	flex: 1;
	margin:10px;
}
.card-header{
	margin-bottom:10px;
	border-bottom:1px solid #356F7A;
	display:flex;
	justify-content:space-between;
}

@media screen and (max-width : 680px){
	.sel > div > div >.row-jump{
		display: inherit;
	}

}