/**
 * Projet Name : Dynamic Form Processing with PHP
 * URL: http://techstream.org/Web-Development/PHP/Dynamic-Form-Processing-with-PHP
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2013, Tech Stream
 * http://techstream.org
 */
*/*Set's border, padding and margin to 0 for all values*/
{
    padding: 0;
    margin: 0;
    border: 0;
}
body, html {
    color: #373C40;
    font-family: TSTARPRO-Medium, sans-serif;
    height: 100%;
    background-color: #eeeeee;

}
body {
    font-size: 70%;

}

/* style all elements with a required attribute */



@font-face {
  font-family: "TSTARPRO-Regular";
  src: url("./fonts/TSTARPRO-Regular.eot"); /* IE9 Compat Modes */
  src: url("./fonts/TSTARPRO-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./fonts/TSTARPRO-Regular.woff") format("woff"); /* Modern Browsers */
  font-weight: 200;
}

@font-face {
  font-family: "TSTARPRO-Medium";
  src: url("./fonts/TSTARPRO-Medium.eot"); /* IE9 Compat Modes */
  src: url("./fonts/TSTARPRO-Medium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./fonts/TSTARPRO-Medium.woff") format("woff"); /* Modern Browsers */
  font-weight: 300;
}

@font-face {
  font-family: "TSTARPRO-Light";
  src: url("./fonts/TSTARPRO-Light.eot"); /* IE9 Compat Modes */
  src: url("./fonts/TSTARPRO-Light.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./fonts/TSTARPRO-Light.woff") format("woff"); /* Modern Browsers */
  font-weight: 100;
}

@font-face {
  font-family: "TSTARPRO-Heavy";
  src: url("fonts/TSTARPRO-Heavy.eot"); /* IE9 Compat Modes */
  src: url("fonts/TSTARPRO-Heavy.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/TSTARPRO-Heavy.woff") format("woff"); /* Modern Browsers */
  font-weight: 500;
}

@font-face {
  font-family: "TSTARPRO-Bold";
  src: url("fonts/TSTARPRO-Bold.eot"); /* IE9 Compat Modes */
  src: url("fonts/TSTARPRO-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/TSTARPRO-Bold.woff") format("woff"); /* Modern Browsers */
  font-weight: 400;
}


p {
    padding: 7px 0 7px 0;
    /*font-weight: 500;*/
    font-size: 10pt;
}
a {
    color: rgb(0, 92, 128);
    text-decoration:none;
    text-transform: none;
}
a:hover{
    color: #007691;
    text-decoration: none;
}
h1 {
    font-weight:300;
    color: #000000;
    font-size:30px;
    display: inline-block;
    padding-left: 30px;
    margin-top: 30px;
      text-transform: uppercase;
}
.clear{
	width:100%;
	float:none;
	clear:both;
}

div.header{
  height: 95px;
}

img.logo{
  float: right;
  padding-right: 30px;
  margin-top: 19px;
  transform: scale(0.95);
}

div.bblack{
  height: 24px;
  background-color: #1d1d1b;
}

div.bblack p{
  font-size: 15px;
  color: white;
  font-family: "TSTARPRO-Medium";
  font-weight: 300;
  padding: 4px 0px 0px 30px;
  line-height: 1;
  text-transform: uppercase;
  float: left;
}
div.bblack span.language-link {
	float: right;
    padding-right: 30px;
}

/*form.register, */
div.wrapper {
    width:750px;
    margin: 50px auto 50px auto;
    background-color:#fff;

}

form.register .inputRow {
  width: 48%;
  float: left;
}

form.register .inputRow:only-child,
div.wrapper .inputRow:only-child{
  float: right;
}

form.register input[name="customer"] {
    width: 90%;
}
form.register input[name="customer-number"] {
    width: 90%;
}
form.register input[name="purchase-order-number"] {
    width: 90%;
}

form.register input[name="city"] {
    width: 90%;
}

form.register input[name="email"] {
    width: 90%;
}

form.register input[name="name_en[]"] {
    width: 325px;
}


tr td:nth-child(1) {


  padding-right: 5px;
  padding-left: 5px;
}
form.register tr td:nth-child(2)  input[type="checkbox"]{

  padding: 0px;
}

tr td:nth-child(2) {

  width: 100px;
  padding-right: 8px;
}
form.register tr td:nth-child(2)  input[type="text"]{
  /*width: 100px;
  padding: 0px;
  padding-left: 5px;*/
}

tr td:nth-child(3) {

  /*width: 374px;*/
}
form.register tr td:nth-child(3)  input.no_input[type="text"]:disabled{

  /*width: 374px;
  padding: 0px;*/
}

tr td:nth-child(4){

  /*width: 70px;*/
}
form.register tr td:nth-child(4) input.no_input[type="text"]:disabled{

  /*width: 70px;
  padding: 0px;*/
  text-align: center;
}

tr td:nth-child(5){

  /*width: 50px;*/
}
form.register tr td:nth-child(5) input[type="number"]{

  width: 50px;
  padding: 0px;
  text-align: center;
}

form p{
  font-size: 15px;
  clear: both;
  margin: 0;
  color: black;
  font-weight: 100;
  font-family: "TSTARPRO-Light";
}
div.row1, fieldset.row1{
    width:100%;
    padding:30px;
    box-sizing: border-box;

}

fieldset.row1 .inputRow:nth-child(3){
  margin-left: 14px;


}
div.row2, fieldset.row2{

    padding:30px;
    box-sizing: border-box;

	min-height:220px;
}
fieldset.row3{
	padding: 5px 30px;
	/*margin-bottom: 15px;*/
	box-sizing: border-box;
}
fieldset.row4,fieldset.row5{
    padding:30px;
	box-sizing: border-box;
    clear:both;
}
fieldset.row5{
	width:100%;
  box-sizing: border-box;
}

table#dataTable {
	width: 100%;
	border-spacing: 5px 0px;
}

.register .form label, table#dataTable th, table#dataTable td {
    text-align: left;
    margin-right: 5px;
    margin-top:2px;
    width:auto;
}
.register .form label {
    /*float: left;*/
}

.register .form input{
	width:100px;
}
table{
  border: 1px;
}

 tr{
  border-bottom: 1px solid #eeeeee;

}

th{
  padding-bottom: 10px;

}
.form td{
  padding: 0px;
  margin: 0;
  border-bottom: 1px solid black;
  border-collapse: separate;
  border: 0px solid black;
  border-bottom: 1px solid #eeeeee;
  padding: 5px 0px;
}
.register h2{
    color: #000000;
    font-size: 24px;
    font-weight:300;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.register .row2 h2{
    margin-bottom: 10px;
}
.register label, table#dataTable th {
    color:#000000;
    text-align: left;
    margin-right: 6px;
    margin-top:2px;
    font-size: 15px;
    font-weight:300;
    text-transform: uppercase;
}
form.register label.optional{
    float: left;
    text-align: right;
    margin-right: 6px;
    margin-top:2px;
    color: #A3A3A3;
}
form.register label.obinfo{
    float:right;
    padding:3px;
    font-style:italic;
}
form.register input{
    width: 140px;
    color: #505050;
    font-size: 15px;
    /*padding-left: 10px;
    margin-right: 5px;*/
    height: 23px;
    border: 1px solid #eeeeee;
    border-radius: 1px;
    font-family: "TSTARPRO-Light";
    font-weight: 100;
}

form.register input[type="text"].no_input:disabled, table#dataTable td {
    color: #505050;
    font-size: 15px;
    margin-right: 5px;
    height: 23px;
    border: 1px solid #ffffff;
    font-family: "TSTARPRO-Light";
    font-weight: 100;
    background-color: white;
}
form.register input[type="text"].no_input:disabled {
	/*width: 140px;
	padding-left: 10px;*/
}


form.register input.long{
    width: 247px;
    color: #505050;
}
form.register input.short{
    width: 40px;
    color: #505050;
}
form.register input[type=radio]{
    float:left;
    width:15px;
}
form.register label.gender{
    margin-top:-1px;
    margin-bottom:2px;
    width:34px;
    float:left;
    text-align:left;
    line-height:19px;
}
form.register input[type=text], form.register textarea {
    border: 1px solid #eeeeee;

}
form.register input[type=password]{
    border: 1px solid #eeeeee;

}
form.register input[type=button]{
  background-color: rgb(0, 92, 128);
  color: white;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 0px 24px 0px;
  font-family: "TSTARPRO-Heavy";
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 5px;
}
form.register input[type=button]:hover{
	cursor:pointer;
	background:#007691;
}


form.register input[type=text].small{
    border: 1px solid #eeeeee;
    height: 18px;
    width:30px;
}
form.register input[type=textarea], form.register textarea {
	width: 100%;
	/*height: 150px;*/
	font-family: "TSTARPRO-Light";
	resize: none;
	font-size: 1.2em;
  padding: 3px 7px;
border-radius: 1px;
}
form.register input[type=text].small:hover{
    border: 1px solid #007691;

}

form.register input[type=checkbox] {
    width:14px;
    margin-top:4px;
}

form.register select{
    border: 1px solid #eeeeee;
    float:left;
    margin-bottom:3px;
    color: #505050;
    margin-right:5px;
}
input:focus, select:focus, textarea:focus {
    background-color: #fbfbfb;
}

label.pcs_pu {
	position: relative;
	float: none;
}
label.pcs_pu span.value i{
  margin-left: 5px;
}
label.pcs_pu span.help {
  display: none;

}
label.pcs_pu:hover span.help {
	color: #666;
	display: inline-block;
	border: 1px solid #666666;
	border-radius: 5px;
	font-size: 0.8em;
	text-transform: none;
	padding: 5px;
	width: 300px;
	background-color: #ffffff;
	position: absolute;
	left: 0px;
	bottom: 20px;
}

p.info{
    font-size:7pt;
    color: gray;
}
p.agreement{
    text-align: center;
    position: relative;
}

form.register p.agreement input[type="checkbox"]{
    top: 5px;
    /*position: absolute;*/
    position: relative;
    /*left: 211px;*/
}
p.agreement label{
    width:390px;
    text-align:left;
    margin-top:3px;
    font-family: "TSTARPRO-Light";
    font-weight: 100;
    text-transform: none;
}

div.recaptcha-center {
	text-align: center;
}
div.g-recaptcha {
	display: inline-block;
	margin: 0 auto;
	width: 304px;
}

form.register .order-container{
	height: 50px;
	position: relative;
}
form.register .submit{
  color: #fff;
  cursor: pointer;
  float: left;
  margin: 10px auto 0px auto;
  padding: 5px;
  background-color: rgb(0, 92, 128);
  height: 30px;
  position: absolute;
  /*tranform: translateX(50%);*/
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(0, 92, 128);
  color: white;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 0px 30px 0px;
  font-family: "TSTARPRO-Heavy";
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 5px;
}
form.register  .submit:hover{
	background:#007691;

}
form.register  .submit:active{
	background:#007691;
		color: #fff;
}

.footer{
  border-top: 1px solid black;
  position: relative;
  height: 40px;
}
.footer span{
  font-size: 35px;
  font-family: "TSTARPRO-Light";
  font-weight: 100;
  display: inline-block;
  margin-left: 432px;
  margin-bottom: 10px;
  top: -19px;
  position: absolute;
}

.footer a {
  display: inline-block;
  margin-top: 0px;
  margin-left: 30px;
  font-family: "TSTARPRO-Light";
  font-weight: 100;
  color: black;
  font-size: 15px;
  position: absolute;
  top: 9px;
}


/* process.php */

div.mail-submitted, div.mail-failed, div.mail-error {
	padding: 5px;
	font-size: 150%;
	margin:  10px 30px;
	color: white;
	border-radius: 5px;
	padding: 5px 20px;
    text-align: center;
}
div.mail-submitted {
	background-color: GoldenRod ;
}
div.mail-failed {
	background-color: red;
}

div.mail-error {
	background-color: red;
}

a#back-button, form input.back {
	background-color: rgb(0, 92, 128);
	padding: 8px 30px;
	color: white;
	border-radius: 5px;
	cursor: pointer;
	font-size: 15px;
	text-transform: uppercase;
	margin:  10px 30px;
	display: inline-block;
	font-family: TSTARPRO-Medium;
}