*{margin:0;padding:0;font-family:arial;font-size:14px;}
html{margin:0 auto; font-size: 100%;
-webkit-font-smoothing: antialiased !important;
}
body {background-color:#777;}
#info {
	margin: 20px;
	width: 800px;
	background-color:#fff;
	padding:20px;
}

#info ul {
padding-left:40px;
}

#info p  {padding-top:10px;padding-bottom:10px;}
#info ul {padding-top:10px;padding-bottom:10px;}

#dialogOut {
    top: 50%;
    left: 50%;
    position: absolute;
	z-index:9995;
	background-color:#ff0000;
	display:none;
}

#dialogIn{
    position: relative;
	font-size:5em;	
    width: 900px;
    margin-left: -450px;
    height: 140px;
    margin-top: -70px;	
	border:4px solid #ff0000;
	color:#fff;
	background-color:#000;
	text-align:center;
	font-weight:bold;
}

#bar {
	min-width:900px;
	height: 70px;	
	width: 100%;	
	position: fixed;
	top:0px;
	z-index:999;
	background-color:#dddddd;
}


#titleBar {
	height:14px;
	width:auto;	
	background-color:#000;
	color:#fff;
	overflow: hidden;	
	font-weight:bold;
	font-size:11px;	
}

.toolbar {	
	width:auto%;
	height: 50px;
	float:left;
	overflow: hidden;
}

.item{		/* toolbar item */
	cursor: pointer;	
	width:50px;
	height:50px;
	background-size: 40px 40px;
	background-position:center;
	background-repeat:no-repeat;
	display: inline-block;
	float:left;	
}

#tabs {	
	width:100%;
	min-width:900px;
	top:66px;
	width: 100vw;	
	position: fixed;
	z-index:999;		
	white-space: nowrap;
	overflow: hidden;
}

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;	
}

ul.tab li {float: left;}
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 8px 10px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
	font-weight:bold;
}
ul.tab li a:hover {background-color: #ddd;}
ul.tab li a:focus, .active {background-color: #ccc;}
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

.seatingPlan {
	position:relative;
	top: 114px;
	width:100%;
	/*height:500px;*/
	background-color:#777777;	
	padding:0px;
	margin:0px;
}

.seatingPlanTable {	
	border:1px solid #333333;	
	background-color:#fbfbfb;
	border-collapse: collapse;
	margin: 0px auto;
	
}

.place {
	border-width:1px;
	padding:4px;	
	background-clip: padding-box;
    border-radius: 5px;
	background-color:#fbfbfb;
	border-color: #b2b2b2;
	font-weight:bold;	
	height: 54px;
	width: 114px;
}

.empty {border-style:dashed;background-color:#fbfbfb;}
.seat {border-style:solid;background-color:#d5d5d5;}
.hilight {background-color:#ffff00;}
.cxLeft {width:94px;height:47px;float:left;} /*left column of place */
.cxRight {height:47px;width:15px;left:99px;position:relative} /*right column of place */
.nameOuter {width:100%;height: 32px;}

.nameInner {
overflow: hidden;
text-align:center;
cursor: text;
width: 100%;
background-color:#eee;
min-height: 1em;
position: relative;
top: 50%;
transform: translateY(-50%);
}

.sensitiveInfo { /*person info bar */
	border:0px solid #666;width:92px;height:20px;padding:0px;font-size:0.8em;clear:both;display:in-line;margin-top:3px;
	color:#666;
	overflow:hidden;
	
}

img.sIcon { /*sensitive info icon */
padding-right:1px;
height:20px;width:20px;
vertical-align:middle;

}

.drag {
	background-image: url("_images/drag.png");
	background-repeat: no-repeat;
	height: 15px;
	width: 15px;	
	background-size: 15px 15px;
	cursor: move;
}

.delete {
	margin-top: 3px;
	background-image: url("_images/cross.png");
	background-repeat: no-repeat;
	height: 15px;
	width: 15px;
	background-size: 15px 15px;
	cursor: pointer;
}

.side {
	text-align:center;
	background-color:#333333;
	font-size:18px;
	font-weight:bold;
	color:#ffffff;
}

.peopleForm {
	border:1px solid #333333;	
	background-color:#fbfbfb;
	border-collapse: collapse;
	font-size:14px;
	background-color:#cccccc;
	/*margin: 0px auto;*/
	margin: 10px;
}

.peopleForm tr th {font-weight:bold;vertical-align:Top;}

.peopleForm  td {}

.dataCell { /*editing cell*/
	background-color:#ffffff;
}

.dataDiv {
	background-color:#ffffff;overflow:hidden;
	min-width:100px;min-height:1em;
	white-space: pre;
}

.colHeadButton {
	width:26px;
	height:26px;
	background-repeat: no-repeat;
	background-position: center;
}

.fieldHeadingDiv {
	background-color:#ffffff;
	contenteditable=true;
	height:28px;
	padding-top:8px;
	width:100%;
}

.staticFieldHeadingDiv {
	padding-top:8px;
	padding-bottom:14px;
}

.icoAz {background-image: url("_images/az.png");}
.icoCross {background-image: url("_images/cross.png");}
.icoRight {background-image: url("_images/right.png");}
.icoClear {background-image: url("_images/clear.png");}
.icoLeft {background-image: url("_images/left.png");}
.icoSplit {background-image: url("_images/split.png");}
.icoGroup {background-image: url("_images/group.png");}
.icoIgnore {background-image: url("_images/ignore.png");}
.icoAddColumn{background-image:url("_images/addColumn.png");background-repeat:no-repeat;}
.icoIgnore {background-image: url("_images/ignore.png");}
.icoDownload {background-image: url("_images/save.png");}
.icoUpload {background-image: url("_images/open.png");}
.icoDemo{background-image:url("_images/demo.png");}
.icoFlip {background-image: url("_images/flip.png");}
.icoPeople {background-image: url("_images/people.png");}
.icoPlan {background-image: url("_images/plan.png");}
.icoAddCol {background-image: url("_images/addColumn.png");}
.icoAddRow {background-image: url("_images/addRow.png");}
.icoDelCol {background-image: url("_images/delColumn.png");}
.icoDelRow {background-image: url("_images/delRow.png");}
.icoPrint {background-image: url("_images/print.png");}
.icoHelp {background-image: url("_images/help.png");}
.icoBin {background-image: url("_images/bin.png");}
.icoNew {background-image: url("_images/new.png");}
.icoCrop {background-image: url("_images/crop.png");}
.icoClearNames {background-image: url("_images/clearNames.png");}
.icoRandom {background-image: url("_images/random.png");}
.icoAzName {background-image: url("_images/azName.png");}
.icoAuto {background-image: url("_images/auto.png");}
.icoRandomName {background-image: url("_images/randomName.png");}
.icoEyeOpen {background-image: url("_images/eyeOpen.png");}
.icoEyeClosed {background-image: url("_images/eyeClosed.png");}

h1 {font-size:20px;}
h2 {font-size:18px;}

#people {background-color:#777777;overflow-x: scroll;}

#tablePlan{background-color:#ffffff;top:114px;margin:20px;padding:20px;width:800px;}

#screenPlan{background-color:#ffffff;top:114px;padding:0px;width:100%;}

#info {position:relative; top: 114px;}

#divPrintTable {
	height:230mm;
	width:150mm;
	background-color:#fff;}
.printPlanTable{background-color:#ffffff;border-collapse: collapse;
	top:0;
	left:0;
	border:none;
	height:100%;
	width:100%;	
	/*rotation does not seem to work properly.*/
	/*
	-ms-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    transform: rotate(90deg);
	*/
}

tr.printTableRow:nth-child(odd) {background-color:#eee;}
tr.printTableRow:nth-child(even) {background-color:#fff;}

.printTopBottomCell {text-align:center;font-weight:bold;font-size:16px;}
.screenTopBottomCell {text-align:center;font-weight:bold;font-size:30px;background-color:#dddd00;}

.printTableCellSeat {border: 2px solid black;text-align:center;}
.screenTableCellSeat {border: 2px solid black;text-align:center;vertical-align:middle;min-height:48px !important;}

.printTableCellEmpty {border: 1px dashed black;text-align:center;}

.screenCellName {font-weight:bold;font-size:20px;}
.screenCellLastName {font-weight:normal;font-size:16px;}
.screenCellSensitive {font-weight:bold;font-size:12px;}

.printCellName {font-weight:bold;font-size:13px;}
.printCellLastName {font-weight:normal;font-size:12px;}
.printCellSensitive{font-size:10px;font-weight:normal;}

@media print {
  body * {visibility: hidden;}
  #printLayout, #printLayout * {visibility: visible;}
  #printLayout {	   
	position: fixed;
	z-index: 9999;
    left: 0;
    top: 0;
	margin: 0;
  }
}

.upAddRow {
	width:100%;height: 30px;
	background-image: url("_images/upAddRow.png");
	background-size: 100% 20px;
	background-repeat: no-repeat;background-position: center; 
}

.downAddRow {
	width:100%;height: 30px;
	background-image: url("_images/downAddRow.png");
	background-size: 100% 20px;	
	background-repeat: no-repeat;background-position: center; 
}

.leftAddCol {
	width:30px;height:100%;min-height: 200px;
	background-image: url("_images/leftAddCol.png");
	background-size: 20px 90%;
	background-repeat: no-repeat;background-position: center; 	
}

.rightAddCol {
	width:30px;height:100%;min-height: 200px;
	background-image: url("_images/rightAddCol.png");
	background-size: 20px 90%;	
	background-repeat: no-repeat;background-position: center;
}

table.tableTemplates {
	margin: 20px;
	background-color:#fff;	
	border-collapse: collapse;
}

table.tableTemplates td {
	padding: 10px;	
	text-align: center;
    vertical-align: middle;
	
	border: 1px solid #999;
}

table.tableTemplate {
	border-collapse: collapse;
	margin: 0px auto;
	border-width:1px;
	padding:4px;	
	background-clip: padding-box;
    border-radius: 5px;
	background-color:#fbfbfb;
	border-color: #b2b2b2;
	cursor: pointer;
}

table.tableTemplate td {
	height: 16px;
	width: 16px;
	padding:0px;
	font-size: 1px;
}

table.tableTemplate td.tEmpty{
	border-style:dashed;
	background-color:#fbfbfb;
}

table.tableTemplate td.tSeat{	
	background-color:#c5c5c5;
}