@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css");
header{
	text-align: right;
	padding-top:1em;
	padding-right: 1em;
}
header img.headerlogo{
	width:135px;
	
}

body {
	max-width: 1000px;
	min-width:300px;
	height: 100%; 
	margin-left: auto;
	margin-right:auto; 
	font: 14px/1 'Open Sans', sans-serif;
  	color: #555;
  	border: 1px solid #ddd;
}

/*****************/
/* Non-60 Degree */
#acmeDrawing{
	width: 50%; /*test*/
	background: white;
	float: left;
	padding-top: 5%;
	/*position: absolute;*/
}


/*****************/


#container{
	background: white;
	/*width:700px;*/
	height:100%;
	
	color:#575c7a;
	line-height: 1.5em;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 14px;
	position: relative;  
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4
{
  display: block;
}

#panelDrawing{
	width: 50%; /*test*/
	background: white;
	float: left;
	padding-top: 5%;
	/*position: absolute;*/
}

#divPanelData{
	width: 50%;
	float:right;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
#panelData{
	/*width:300px;*/
	width:90%;
	background-color: rgba(160,160,160, 0.1);
	/*background-color: rgba(0,42,63, 0.1); #003a70 */
	border-radius: 10px;
	/*float: right;*/
	z-index: 1000;
	margin-left:auto;
	margin-right:auto;
	/*margin-right:10px;*/
	padding-top: 10px;	
}

#divTabNon60{
	width:50%;
	float:right;
	margin-left: auto;
	margin-right: auto;
}

#tabNon60Details{
	background-color: rgba(160,160,160, 0.1);
	/*background-color: rgba(0,42,63, 0.1); #003a70 */
	border-radius: 10px;
	/*float: right;*/
	z-index: 1000;
	margin-left:auto;
	margin-right:auto;
	/*margin-right:10px;*/
	padding-top: 10px;	
}

#divTabNon60Design{
	width:50%;
	float:right;
	margin-left: auto;
	margin-right: auto;
}

#tabNon60Design{
	background-color: rgba(160,160,160, 0.1);
	/*background-color: rgba(0,42,63, 0.1); #003a70 */
	border-radius: 10px;
	/*float: right;*/
	z-index: 1000;
	margin-left:auto;
	margin-right:auto;
	/*margin-right:10px;*/
	padding-top: 10px;	
}

#divTabJobDetails{
	width:50%;
	float:right;
	margin-left: auto;
	margin-right: auto;
}
#tabJobDetails{
	/*width:300px;*/
	
	background-color: rgba(160,160,160, 0.1);
	/*background-color: rgba(0,42,63, 0.1); #003a70 */
	border-radius: 10px;
	/*float: right;*/
	z-index: 1000;
	margin-left:auto;
	margin-right:auto;
	/*margin-right:10px;*/
	padding-top: 10px;	
}
#tabSpecialSizes, #tabCustomSizes{
	width: 95%;
	margin-left:auto;
	margin-right:auto;
	border-radius: .5em;
}
#tabSpecialSizes .td, #tabCustomSizes .td{
	/*width:50%;*/
	width:48%;
}
#tabCustomSizes .table{
	width:100%;
}
#panelContact{
	width:50%;
	float: right;
	margin-left:auto;
	margin-right:auto;
}
#panelCSAgent{
	float:left; 
	width:50%;
	/*background:#f00;*/
	margin: 0 auto;
	
}
#panelCSAgent h3{
	text-align:center;
	color: #003a70;
	padding-top: .5em;
}
#panelCSAgent img{
	width:90%;
	border-radius: 15px;
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:10%;
}
#modalRFQ img{
	width:90%;
	max-width: 533px;
	border-radius: 15px;
	margin-left:5%;
	margin-right:5%;
	margin-top:1em;
	
}

/*#butShowDrawing{
	display: none;
}
#butShowData{
	display: none;
}*/
#divCanvas2D{
	/*background: #0f0;*/
	margin:10px;
	/*height: 203px;
	width: 600px;*/
	width: 100%;
	margin-left:auto;
	margin-right:auto;
}
#divCanvas3D{
	
	z-index: -1;
	margin: 10px;
	height: 300px;
	width:100%;
	/*width: 50%;
	height: 60%;*/
	float: left;
	text-align:center;
	/*display: none;*/
}
#canvas2D{
	/*width: 600px;
	height: 203px;*/
	width:90%;
	/*background: #f00;*/
	/*border-radius: 15px;*/
	display:block;
	margin-left:auto;
	margin-right:auto;
}

#imgSpecialThreadForm{
		/*width:90%;*/
	/*background: #f00;*/
	/*border-radius: 15px;*/
	display:block;
	margin-left:auto;
	margin-right:auto;
}

#txtSpecialThreadFormNotes{
	display:block;
	margin-left:3em;
	margin-right:3em;
	line-height: 1.5em;
	height: auto;
	max-height: 20em;
	overflow: auto;
}


 /* Popular vs Custom */
#tabSizeType{
	width:100%;
	margin-top:1em;
}
#tabSizeType a{
	width:5em;
	padding-left:2em;
}

#tabJob3DCanvas{
	/*border:dashed;
	border-color: #003a70;*/
	/*width: 375px;
	height: 375px;*/
	width: 50%;
	height: 60%;
	/*max-width: 400px;*/
	float: left;
	text-align:center;
	
}
/*#tabJobDetails{
	display: block;
	float: right;
	background-color: rgba(255, 255, 255, 0.3);
	padding: 1em;
	width: 250px;
	
}*/

footer{
	width: 90%;
	margin-right:auto;
	margin-left:auto;
	padding-top:2em;
	clear: both;
	text-align: center;
}



/* ------  C L A S S    S T Y L I N G  -------------------------------- */
.hide{
	display: none;
}
.table {
    display: table;
    /*width: 300px;*/
    /*width: 90%;*/
}
.tr { 
    display: table-row;
   
}
.td { 
    display: table-cell;
    padding: .75em;
}
.oneHundred{
	width:100%;
}
.blueborder{
	/*border: solid 1px #ddd;*/
	border: solid 1px #888;
}

.ReqWarning{
	width:70%;
	margin-left:auto;
	margin-right:auto;
	color:red;
	padding:.5em;
	text-align:center;
	
}

.contactInfo{
	background-color: rgba(160,160,160, 0.1);
	/*background-color: rgba(0,42,63, 0.1); #003a70 */
	border-radius: 10px;
	width: 300px;	
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	padding-left:10px;
	padding-right:10px;
}
/*.tabJobDetailsParam{
	width: 100%;
	text-align: center;	
}*/
/* ------  B U T T O N   S T Y L I N G  -------------------------------- */
button,
.button {
  display : inline-block;
  cursor : pointer;
  background: #003a70;
  border-style : solid;
  border-width : 1px;
  border-radius : 50px;
  padding : 10px 18px;
  box-shadow : 0 1px 4px rgba(0,0,0,.6);
  font-size : 9.5pt;
  font-weight : bold;
  color : #fff;
  text-shadow : 0 1px 3px rgba(0,0,0,.4);
  font-family : sans-serif;
  text-decoration : none;
}

button[disabled=disabled], button:disabled {
    background: #dddddd;
    font-weight:normal;
    text-shadow : 0 1px 3px rgba(255,255,255,.4);
    color: #999;
}

#butSizeType label{
	padding-top: 5px;
	padding-bottom: 5px;
	color:#555;
}

/* ------  I N P U T   S T Y L I N G  -------------------------------- */
input {
  display: none;
}

 /* Currently Selected Main Tab*/
input[id^="tab"]:checked + label {
  color: #555;
  border-radius:0px;
  border: 1px solid #ddd;
  border-top: 2px solid #003a70;
  border-bottom: 1px solid #fff;
}

 /* Currently Selected Sub Tab*/
input:checked + label {  
  color: #555;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  /*border-top: 2px solid red;*/
  border-top: 2px solid #003a70;
  border-left: 1px solid #888;
  border-right: 1px solid #888;
  border-bottom: 1px solid #efefef;
  
}
.contactInfo textarea{
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
}
input[type="text"] {
  display: block;
  margin: 0;
  width: 50%;  /* 75% */
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  -webkit-appearance: none;
  -moz-appearance: none;
  /*appearance: none;*/
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: none;
  -moz-border-radius: none;
  -ms-border-radius: none;
  -o-border-radius: none;
  border-radius: none;
}
input[type="text"]:focus {
  outline: none;
}

 /*create glow around text box with focus*/
.textinputs input[type="text"] {
  padding: 10px;
  border: solid 1px #969696;
  -webkit-transition: box-shadow 0.3s, border 0.3s;
  -moz-transition: box-shadow 0.3s, border 0.3s;
  -o-transition: box-shadow 0.3s, border 0.3s;
  transition: box-shadow 0.3s, border 0.3s;
}
.textinputs input[type="text"]:focus, .style-1 input[type="text"].focus {
  border: solid 1px #707070;
  -webkit-box-shadow: 0 0 5px 1px #969696;
  -moz-box-shadow: 0 0 5px 1px #969696;
  box-shadow: 0 0 5px 1px #969696;
}

select {
    margin: 5px;
    border: 1px solid #111;
    background: white;
    width: 80%;
    padding: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    /*height: 34px;*/
    height: 2em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select.dropdown {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(.9em),
    calc(100% - 15px) calc(.9em),
    calc(100% - 2.5em) 0;
  background-size:
    5px 5px,
    5px 5px,
    1px 2em;
  background-repeat: no-repeat;
}

/*select.minimal:focus {
  background-image:
    linear-gradient(45deg, green 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, green 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}*/


label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

label[for*='0']:before {
  /*content: '\f1cb';*/
  content: url("../images/tab1.png");
}

label[for*='4']:before {
  /*content: '\f17d';*/
 content: url("../images/tab2.png");
}

label[for*='1']:before {
  /*content: '\f1cb';*/
  content: url("../images/tab1.png");
}

label[for*='2']:before {
  /*content: '\f17d';*/
 content: url("../images/tab2.png");
}

label[for*='3']:before {
  /*content: '\f16b';*/
 content: url("../images/tab3.png");
}

label:hover {
  color: #888;
  cursor: pointer;
}

.RequiredAsterisk{
	display:inline;
	color: red;
	float:left;
	padding-top:.5em;
	padding-right:.5em;
	font-weight:bold;
	
}

/* ------ M o d al   Dialogs  ------- */
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div {
    width: 70%;
    min-width: 320px;
    max-width: 600px;
    position: relative;
    margin: auto;
    /*padding: 5px 20px 13px 20px;*/
   	padding: .25em 0 0 0;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #ccc);
    background: -webkit-linear-gradient(#fff, #ccc);
    background: -o-linear-gradient(#fff, #ccc);
}
.modalDialog > div h2 {
	color:red;
	text-align: center;
	
}

.modalDialog > div button {
	width:70%;
	margin-left:15%;
	margin-right:15%;
	margin-top:1em;
	margin-bottom:1em;
}

.close {
    background: #003a70;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background: #ee0000;
}

#modalOther{
	padding: 1.5em 0 0 0;
}
#modalOther .close{
	right:.25em;
	top:.25em;
}
#modalOther > div{
	padding: .25em 0 0 0;
	
}
#modalOther hr{
	width:60%;
	margin-top:-1em;
}
#modalOther h1{
	margin-top: .25em;
	margin-bottom: 1.25em;
	font-size: 1.2em;
	color: red;
	text-align:center;
}
#modalOther h2{
	text-align: left;
	color:#333;
	padding:.4em 1em .4em 1em;
	line-height: 1.1em;
}
#modalOther h3{
	text-align:center;
	padding-top:.5em;
	padding-bottom:.5em;
}
#modalOther label{
	color:#555;
	text-align: right;
}
#modalOther .table{
	margin-top:.25em;
	width:100%;
}
#modalOther .td{
	padding: .25em;
}
#modalOther textarea{
	margin-top:.25em;
}
#butNot60{
	width: 10em;
	margin-left:auto;
	margin-right:auto;
}

/* ------  M E D I A    Q U E R I E S  -------------------------------- */

@media screen and (min-width: 980px) /* Desktop */ {
  #panelData{
  	/*width: 30%;*/
  	display: block;
  }
}

@media screen  and (max-width: 979px) /* Tablet */ {
  body {
    width:100%;
  }
  /* TAB1 - Job Details ------------*/
  #tabJobDetails{
  	width:100%;
  }
  
}
@media screen  and (max-width: 810px) /* Tablet */ {
	
}
@media screen  and (max-width: 710px) /* Tablet */ {
  header img.headerlogo{
  	width: 20%;
  }
  header img.headerpartner{
	width: 35%;	
  }
	
}
@media screen and (max-width: 600px) /* Phablet */ {
  
  .table {
    width: 100%;
	}
	
  /* T A B S -----------------------*/
  label[for^="tab"] {
    font-size: 0;
  }
  label:before {
    margin: 0;
    font-size: 18px;
  }
  /* TAB1 - Job Details ------------*/
  #tabJob3DCanvas{
  	width:100%;
  }
  #divTabJobDetails{
  	width:100%;
  }
  /* TAB2 - Tap Design -------------*/
  #divPanelData{
  	width: 100%;
  	margin-left:auto;
  	margin-right:auto;
  }
  #canvas2D{
	width: 100%;
	height: auto;
	margin-left:auto;
  	margin-right:auto;
  }
  #divCanvas2D{
  	width: 100%;
  	text-align:center;
  }
  #panelDrawing{
  	width:100%;
  	margin-left:auto;
  	margin-right:auto;
  	display: block;
  }
  #panelData{
  	width: 100%;
  }
  #panelCSAgent{
  	width: 100%;
  }
  #panelContact{
  	width: 100%;
  	margin-left:auto;
  	margin-right:auto;
  }
  
  /* Non 60 */
  #acmeDrawing{
  	width:100%;
  	margin-left:auto;
  	margin-right:auto;
  	display: block;
  }
  
  #divTabNon60Design{
  	width: 100%;
  	margin-left:auto;
  	margin-right:auto;
  }
  
}

 /* PHONES */
@media screen and (max-width: 400px) {
  label {
    padding: 15px;
  }
}