/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 50px;
}

*.unselectable {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	
	/* IE 10 */
	-ms-user-select: none;
	user-select: none;
}

/*
 * Set default elements
 */

form {
	display: inline-block;
}

canvas {
	background: #000000;
}

.card {
	display: grid;
	grid-template-rows: 2fr 1fr;
	align-items: end;
	padding: 1em;
	border-radius: 1em;
	background: #fee6;
	box-shadow: 0 0.25em 0.5em #1006;
}

/*
 * Global add-ons
 */

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}


/*
 * Player controls
 */
.player-control {
	padding: 10px 40px;
	font-size: 30px;
	-webkit-appearance: button;
	cursor: pointer;
}

.grid-main {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
	grid-gap: 2em;
	text-align: center;
	padding: 4em 2em;
	width: 100%;
	max-width: 72em;
	margin: 0 auto;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  display: none;
}

.navbar-sidebar img,
.navbar-right img {
    float: left;
}

@media (min-width: 768px)
{
	.sidebar {
		position: fixed;
		top: 51px;
		bottom: 0;
		left: 0;
		z-index: 1000;
		display: block;
		padding: 20px;
		overflow-x: hidden;
		overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
		background-color: #f5f5f5;
		border-right: 1px solid #eee;
	}
	
	.row
	{
		margin-top: 0px;
	}
}

#site-logo
{
	margin-top: 0px;
	height: 20px;
}

@media (max-width: 1000px)
{
	#site-logo
	{
	}
}

@media (max-width: 767px)
{
	#site-logo
	{
		margin-top: 0px;
	}
}

/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}
.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}
.nav-sidebar > .active > a {
  color: #fff;
  background-color: #428bca;
}

/*
 * Above main
 */
.above-main
{
	background-color: #e5e5e5;
}

/*
 * Main content
 */

.main {
  padding: 20px;
}
@media (min-width: 768px) {
  .main {
    padding-right: 40px;
    padding-left: 40px;
  }
}
.main .page-header {
  margin-top: 0;
}


/*
 * Placeholder dashboard ideas
 */

.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  margin-bottom: 20px;
}
.placeholder img {
  display: inline-block;
  border-radius: 50%;
}

.placeholder .presetnumber-container {
  position: absolute;
  left: 50%;
}

.placeholder .presetnumber {
  position: absolute;
  padding: 2%;
  left: -15px;
  
  width: 30px;
  height: 30px;
  
  background-color: #ffffff;
  border-radius: 50%;
  
  text-align: center;
  font-size: 20px;
}

/*
 * Make tables more appealing
 */
.daletTable
{
	min-width: 640px;
}

.listTable td, th
{
	vertical-align: top;
	border: 1px solid #dddddd;
	padding: 4px;
}

.listTable th
{
	text-align: center;
	cursor: default;
	
	/* Prevent that users can select the text */
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.listTable .selectableTableRow:hover
{
	background-color: #eeeeee;
	cursor: pointer;
}

.selectable-cell:hover
{
	background-color: #eeeeee;
	cursor: pointer;
}

.selectable-cell
{
	border: 1px solid #dddddd;
}

.royal-spacing
{
	padding-left: 30px;
	padding-right: 30px;
}

.royal-spacing-td
{
	padding-right: 30px !important;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

.dropzone 
{
	cursor: pointer;
	min-height: 200px;
	border: 2px solid #dddddd;
	background: #eeeeee;
	padding: 100px 50px;
}

.popup
{
	position: absolute;
	width: 100%;
	height: 100%;
	
	padding: 20px;
	padding-right: 40px;
	padding-left: 40px;
	
	background: rgba(0,0,0,0.7);
}

.gradient-glow {
	background: transparent url(../img/lines-glowfm.jpg);
    /*background: -webkit-repeating-linear-gradient(-45deg,white,white 5%,#00b9f5 5.1%,#00b9f5 10%); /* For Safari 5.1 to 6.0 /
    background: -o-repeating-linear-gradient(-45deg,white,white 5%,#00b9f5 5.1%,#00b9f5 10%); /* For Opera 11.1 to 12.0 /
    background: -moz-repeating-linear-gradient(-45deg,white,white 5%,#00b9f5 5.1%,#00b9f5 10%); /* For Firefox 3.6 to 15 /
    background: repeating-linear-gradient(-45deg,white,white 5%,#00b9f5 5.1%,#00b9f5 10%); /* Standard syntax (must be last) */
}

.gradient-040 {
	background: transparent url(../img/lines-studio040.jpg);
    /*background: -webkit-repeating-linear-gradient(-45deg,white,white 5%,red 5.1%,red 10%); /* For Safari 5.1 to 6.0 /
    background: -o-repeating-linear-gradient(-45deg,white,white 5%,red 5.1%,red 10%); /* For Opera 11.1 to 12.0 /
    background: -moz-repeating-linear-gradient(-45deg,white,white 5%,red 5.1%,red 10%); /* For Firefox 3.6 to 15 /
    background: repeating-linear-gradient(-45deg,white,white 5%,red 5.1%,red 10%); /* Standard syntax (must be last) */
}

.gradient-vt {
	background: transparent url(../img/lines-voicetrack.jpg);
}