@charset "utf-8";
/* CSS Document */
body {
	width:1900px;
	height:1000px;
	margin:auto;
	background:no-repeat;
	background-image:url('/images/printing-diagram-background2.jpg');
}

h4{
	margin-top:5px;
	margin-bottom:0px;
}

h3{
	font-family:'Arial';
	font-weight:bold;
	margin-top:5px;
}
h2{
	font-family:'Arial';
	font-weight:bold;
	margin-top:5px;
	text-align:center;
	margin:8px 0px -10px;
}
hr {
	width:100%;
	visibility:hidden;
}
.error{
	border:1px solid red;
	box-shadow:0px 0px 10px red;
}
.delete{
	cursor:pointer;
	float:right;
	margin-left:5px;
}
.contentWrapper{
	margin:auto;
}
.appPanel{
	height:auto;
	position:relative;
}
#pressFrame {
	position:relative;
	max-height:75%;
	max-width:75%;
	margin-top:245px;
	z-index:0;
}
.pressHead {
	position:absolute;
	height: 125px;
	width: 90px;
	text-align:center;
	font-family:'Arial';
	font-size:24px;
	color:#5F6A70;
 	background-color:#C5CAC6;
	border:3px solid #5F6A70;
	border-radius: 20px;
	cursor:pointer;
	box-sizing: border-box;
	z-index:1;
}
.active {
	box-shadow:0px 0px 25px #000000;
 	background-color:#E4E4E4;
}
#head1:hover, #head2:hover, #head3:hover, #head4:hover, #head5:hover,
#head6:hover, #head7:hover, #head8:hover, #head9:hover, #head10:hover{
	box-shadow: 0px 0px 25px #000000;
}
#head1 {
	transform:rotate(135deg);
	left:1155px;
	top:720px;
}
#head2 {
	transform:rotate(105deg);
	left:1250px;
	top:560px;
}
#head3 {
	transform:rotate(75deg);
	left:1250px;
	top:375px;
}
#head4 {
	transform:rotate(45deg);
	left:1155px;
	top:215px;
}
#head5 {
	transform:rotate(15deg);
	left:998px;
	top:123px;
}
#head6 {
	transform:rotate(-15deg);
	left:813px;
	top:123px;
}
#head7 {
	transform:rotate(-45deg);
	left:655px;
	top:215px;
}
#head8 {
	transform:rotate(-75deg);
	left:562px;
	top:375px;
}
#head9 {
	transform:rotate(-105deg);
	left:562px;
	top:560px;
}
#head10 {
	transform:rotate(-135deg);
	left:655px;
	top:720px;
}

/*DETAIL DISPLAY CONTAINERS*/
.headDisplay {
	font-family:'Arial';
	font-size:12px;
	position:relative;
	z-index:5;
	background-color:#cccccc;
	border-radius:8px;
	padding:0px 5px;
	border:1px solid silver;
}
.left{
	float:left;
	margin-right:5px;
}
.right{
	float:right;
	margin-left:5px;
}
#Head1_Display {
	display:none;
	position:absolute;
	top:765px;
	left:1280px;
	content:"\f00d";
}
#Head2_Display{
	display:none;
	position:absolute;
	top:590px;
	left:1375px;
}
#Head3_Display{
	display:none;
	position:absolute;
	top:385px;
	left:1375px;
}
#Head4_Display{
	display:none;
	position:absolute;
	top:210px;
	left:1280px;
}
#Head5_Display{
	display:none;
	position:absolute;
	top:75px;
	left:1110px;
}
#Head6_Display{
	display:none;
	position:absolute;
	top:75px;
	right:1105px;
}
#Head7_Display{
	display:none;
	position:absolute;
	top:210px;
	right:1275px;
}
#Head8_Display{
	display:none;
	position:absolute;
	top:385px;
	right:1370px;
}
#Head9_Display{
	display:none;
	position:absolute;
	top:590px;
	right:1370px;
}
#Head10_Display{
	display:none;
	position:absolute;
	top:765px;
	right:1275px;
}

/*END DISPLAY CONTAINERS*/
.shirtColor {
	display:none;
}

.detailLabel {
	margin-right:2px;
	margin-bottom:5px;
	float:left;
	clear:left;
	margin-left:5px;
}
.detailInput[type="text"] {
	border:1px solid silver;
	border-radius:3px;
	float:right;
	clear:right;
	box-sizing:border-box;
	width:150px;
	margin-right:10px;
}
textarea.detailInput {
	border:1px solid silver;
	border-radius:3px;
	float:right;
	clear:right;
	box-sizing:border-box;
	width:150px;
	margin-right:10px;
}
.detailInput[type="number"] {
	border:1px solid silver;
	border-radius:3px;
	float:right;
	clear:right;
	box-sizing:border-box;
	width:150px;
	margin-right:10px;
}
.detailInput[type="checkbox"] {
	float:left;
}
button{
	border-radius:5px;
	border:1px solid silver;
	padding:5px;
	width:60px;
	cursor:pointer;
	margin-top:25px;
	margin-bottom:10px;
}
.downloadButton{
	width:80px;
	margin:0px 0px 15px 25px;
}
.addButton {
	float:left;
	margin-left:5px;
}
.saveButton {
	float:right;
	margin-right:10px;
}
.cancelButton {
	float:right;
	margin-right:15px;
}
.saveJobName{
	color:#5f6a70;
}
.controlPanel{
	width:250px;
	min-height:50px;
	background-color:#EDEDED;
	position:relative;
	top:750px;
	border:1px solid silver;
	border-radius:5px;
	padding:0px 5px;
	margin:auto;
	box-shadow:0px 15px 50px -10px;
}
.jobInput{
	border:1px solid silver;
	border-radius:3px;
	padding:5px;
	margin:15px 5px -5px 5px;
}

.hidden {
	display:none;
}
.headingContainer{
	background-color:#5F6A70;
	width:300px;
	padding:10px;
	margin:auto;
	border: 1px solid #888;
	border-radius:10px 10px 0px 0px;
}


/* The Modal (background) */
.modal, .detailsPanel{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modalWrapper {
    margin: 15% auto; /* 15% from the top and centered */

}
.pressDetails{
	border-radius: 0px 0px 10px 10px;
	background-color:#fefefe;
	margin:-16px auto;
	padding:20px 10px 0px 10px;
	width:300px;
	min-height:175px;
	border-left:1px solid silver;
	border-right:1px solid silver;
	border-bottom:1px solid silver;
	overflow:auto;
}

/* The Close Button */
.close {
	margin-left:356px;
	margin-top:5px !important;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}