body { font-family: tahoma,sans-serif; font-size: 14px; margin: 0px; padding: 0px; min-height: calc( 100vh - 200px ) }

header{ height: 144px; width: 100vw; position: fixed; z-index: 1; top: 0px; background-color: rgba( 255,255,255,0.8 ); transition: all 0.2s linear }
header>nav { position: absolute; right:40px; bottom: 15px; font-size: 1.2em; transition: all 0.2s linear }
header>img { height: 80%; width: auto; margin: 10px }

header>nav li {
  list-style: none;
  display: inline-block;
  height: 100%;
  padding: 5px 0px 5px 0px;
  margin: 0px 16px;
  position: relative;
  width: auto;
  border-bottom: 2px solid rgba(255,255,255,0)
 
}

.width-800 { max-width: 800px; margin: 40px auto }
.width-1000 { max-width: 1000px; margin: 40px auto }
.width-1080 { max-width: 1080px; margin: 40px auto }

form#search-vins { position: relative; top: -25px; left: 15px; z-index: 10 }

header>nav li:hover { border-bottom: 2px solid #333 }

header>nav li a { text-decoration: none; color: #333 }

main { margin-top: 144px; transition: all 0.2s linear; min-height: calc( 100vh - 204px); }

.div-table { display: table }
.div-table>div { display: table-row }
.div-table>div>div { display: table-cell; padding: 4px 4px 4px 0px }

.div-table>div.header>div { padding: 4px 8px 8px 0px; font-weight: bold }


body.scrolled main { margin-top: 60px; min-height: calc( 100vh - 60px); }
body.scrolled header{ height: 60px; }
body.scrolled nav { bottom: 0px; background-color: #FFF; border: 1px solid #CCC; border-radius: 4px }

body.scrolled header .introBanner { height: 0px; opacity: 0 }

header .introBanner { height: 80px; overflow: hidden; position: relative; transition: all 0.3s linear }
/*main .introBanner:before { content: " "; display: block; position: absolute; width: 100%; height: 100%; background-color: rgba( 0,0,0,0.6 ) }*/

header .introBanner { background-color: #000; background-image: url("/images/logo-wide.png"); background-size: 254px 45px;  background-repeat: no-repeat; background-position: calc( 100% - 20px ) center; }

header .introBanner h1, main .introBanner h2 { text-shadow: rgba(0,0,0,0.7) 0px 1px 3px; text-align: center; position: relative; color: #CCC  }

header .introBanner h1 { margin-top: 26px; font-size: 2em;  }
header .introBanner h2 { margin-top: 20px }

header .introBanner .attribution { opacity: 0; position: absolute; right: 3px; bottom: 3px; font-size: 0.7em; color: #CCC; transition: all 0.5s linear }
header .introBanner:hover .attribution { opacity: 1 }

main section.intro { background-color: #8e874f; overflow: hidden }

main section { color: #131001; }

main section .container { width: 1040px; max-width: calc( 100% - 20px ); margin: 0px auto }

main section.generate-vins form { margin: 40px auto; width: 800px; text-align: center; }

section.pad-a-bit { box-sizing: border-box; padding: 0px 15px }

iframe { max-width: 100% !important }

main section.events .table { margin-top: 60px }

.generate-vins .table, .search-vins .table { text-align: center }
.generate-vins .table table, .search-vins .table table { display: inline-block; border-spacing: 10px; border-collapse: separate; }

.search-vins .table table { min-width: 1080px }

.search-vins .table { position: relative;  }
.search-vins div.buttons { position: absolute; right: -150px; top: -20px; min-width: 200px}


@media (max-width: 1400px) {

	.search-vins div.buttons { position: absolute; right: 0px; margin-right: 5px }

}


@media (max-width: 840px) {

	.search-vins.vins-only .table table>*>tr>*:nth-child(3),  
	.search-vins.vins-only .table table>*>tr>*:nth-child(6), 
	.search-vins.vins-only .table table>*>tr>*:nth-child(7), 
	.search-vins.vins-only .table table>*>tr>*:nth-child(8) { display: none }
	
	.search-vins .table table { min-width: 430px }
	
	
	.search-vins.projects .table table>*>tr>.col-type { display: none }
	.search-vins.projects .table table>*>tr>.col-factory { display: none }
	.search-vins.projects .table table>*>tr>.col-customer { display: none }
	
	.generate-vins .table table>*>tr>*:nth-child(2),.generate-vins .table table>*>tr>*:nth-child(4), .generate-vins .table table>*>tr>*:nth-child(5) { display: none }

	/*
	
	main .introBanner h1 { margin-top: 18px; font-size: 2em;  }
	main .introBanner { height: unset; }
	
	header { height: 60px }
	main { margin-top: 60px; min-height: calc( 100vh - 135px); }
	
	header > nav { bottom: unset }
	
	main section.generate-vins form { width: unset }
	main section.generate-vins form label { white-space: nowrap; display: inline-block; margin-bottom: 15px; }

	body { min-height: calc( 100vh - 135px ) }
	*/
}

@media (max-width: 1080px) {


	header .introBanner { background-image: url("/images/logo.png"); background-size: 80px 90px;   background-position: calc( 100% - 20px ) center; }
	header .introBanner h1 { text-align: left; padding-left: 30px }

}

footer { height: 60px; background-color: #8e874f; color: #FFF; position: relative }
footer>span { color: #FFF; display: block; position: absolute; left: 17px; bottom: 17px; font-size: 1.2em }
footer>a>img.fb { height: 70%; width: auto; display: inline-block; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}

.faint { color: #999 }

.modal { display: none; width: 90vw; height: 90vh; position: fixed; top: 50%; left: 50%; transform: translate( -50%, -50% ); background: #FFF; z-index: 10000; border: 1px solid #433d82; border-radius: 5px;  }
.modal .content { width: 90%; margin: 40px auto 20px; max-height: calc( 100% - 80px ); overflow-y: scroll }
.modal>button.close { position: absolute; right: 5px; top: 5px; background: #FFF; box-shadow: none; outline: none; border: 1px solid #433d82; border-radius: 15%; font-size: 1.5em; /*line-height: 100%;*/ color: #1b1464; padding: unset; height: 23px; line-height: 17px; cursor: pointer}

.modal.shade:after { display: block; content: " "; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 1; background: rgba( 255,255,255,0.6 ) }

@keyframes rotate {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
  25% {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
  }
  75% {
    -webkit-transform: rotate3d(0, 0, 1, 270deg);
    transform: rotate3d(0, 0, 1, 270deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

.modal-waiting { display: none;  position: fixed; top: 50%; left: 50%; transform: translate( -50%, -50% ); z-index: 20000; font-size: 2.5em }
.modal-waiting span { animation: rotate 2s normal linear infinite; display: inline-block}

#form-build-data button#apply { position: absolute; right: 15px; bottom: 15px }
#form-select-vins a.edit { text-decoration: none; color: #000 }
#form-select-vins a.edit.hide { display: none }
#form-select-vins .build-plate { display: inline-block; width: 15px; height: 15px; border: 1px solid #999 }
#form-select-vins .build-plate.hide { display: none }

#form-select-vins table span.status.engstatus.download:after { content: "E\2193" }
#form-select-vins table span.status.ravstatus.download:after { content: "R\2193" }

#form-select-vins table span.status.engstatus.complete:after { content: "E\2713" }
#form-select-vins table span.status.ravstatus.complete:after { content: "R\2713" }

#form-select-vins table td.history span.status.ravstatus:after { content: "H";  text-decoration: line-through }

#form-select-vins tr.focus { background-color: #DDD }

#form-select-vins td { vertical-align: top; position: relative }
#form-select-vins td:nth-child(8) {max-width: 230px}
#form-select-vins td:nth-child(9),#form-select-vins td:nth-child(10),#form-select-vins td:nth-child(11) { white-space: nowrap }

#form-select-vins td.vin-cell { position: relative }
#form-select-vins td.vin-cell span.comment { display: none; position: absolute; width: 20px; background: #FFF; right: -20px; top: 0px }
#form-select-vins td.vin-cell:hover span.comment { display: block }
#form-select-vins td.vin-cell span.comment:after { content: "\1F5E8"; font-size: 1.2em }
#form-select-vins td.vin-cell span.comment.loaded { font-weight: bold }

#form-select-vins td span.edit-type { display: none; float: right; cursor: pointer }
#form-select-vins td span.edit-type:after { content: "\270E"; font-size: 1.2em }
#form-select-vins td:hover span.edit-type { display: block; position: absolute; right: -10px; top: 0px }

#form-select-vins td.comment { text-align: left; padding-left: 10px }

#form-select-vins button#delete { position: fixed; left: 20px; bottom: 20px }

.delete-vins-log .log-group:not(:last-child):after { content: " "; display: block; width: 100%; height: 1px; background: #999; margin: 0px 0px 15px }


ul.tabMenu li {
  list-style: none;
  display: inline-block;
  border-top: 1px solid #CCC;
    border-top-color: rgb(204, 204, 204);
  border-right: 1px solid #CCC;
    border-right-color: rgb(204, 204, 204);
  border-radius: 4px 4px 0px 0px;
  border-left: 1px solid #CCC;
    border-left-color: rgb(204, 204, 204);
  margin-right: 8px;
  border-bottom: 1px solid #888;
    border-bottom-color: rgb(136, 136, 136);
  position: relative;
  top: 1px;
}

ul.tabMenu li a {
  color: inherit;
  text-decoration: none;
  padding: 0px 8px 0px;
  display: inline-block;
  opacity: 0.5;
  height: 1.8em;
  line-height: 1.8em;
}

ul.tabMenu {
  padding: 0px;
  margin: 0px 0px 15px;
  border-bottom: 1px solid #888;
}

ul.tabMenu li.current {
  border-color: #000;
    border-bottom-color: rgb(0, 0, 0);
  border-bottom-color: #FFF;
}

#timesheet .toggledOff { pointer-events: none; opacity: 0.3 }