@font-face {
    font-family: 'SFSlapstickComicRegular';
    src: url('SF_Slapstick_Comic-webfont.eot');
    src: url('SF_Slapstick_Comic-webfont.eot?#iefix') format('embedded-opentype'),
         url('SF_Slapstick_Comic-webfont.woff') format('woff'),
         url('SF_Slapstick_Comic-webfont.ttf') format('truetype'),
         url('SF_Slapstick_Comic-webfont.svg#SFSlapstickComicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
  width: 100%;
	margin:auto;
	font-family: Arial, Helvetica, sans-serif;
	clear: both;
}

.content {
  width: 100%;
  padding: 10px;
  background: url('/img/bg.gif');
}

.submitted {
  /*width: 755px;*/
  width: 90%;
  margin:auto;
  //background-color: white;
  //box-shadow: 1px 1px 5px #000;
  //-webkit-box-shadow: 1px 1px 5px #000; /* Safari */
}

.submitted header {
  padding: 10px;
  clear: both ;
}

.submitted header .left{
  float: left; 
  text-align: left; 
  font-size: 1.25em; 
  line-height: 20%;
}

.submitted header .left p:first-child{
  font-size: 3em; 
  line-height: 100%; 
  font-family: SFSlapstickComicRegular, arial, verdana, helvetica; 
  margin-top: 0; 
  margin-bottom:0; 
  letter-spacing:-3px; 
  color: #F36;
}

form {
	margin:auto;
	font-family: TeXGyreAdventorRegular, Microsoft JhengHei, Arial, Helvetica, sans-serif;
	//background-color: white;
	//box-shadow: 1px 1px 5px #000;
	//-webkit-box-shadow: 1px 1px 5px #000; /* Safari */
}

form header {
  padding: 10px;
  clear: both ;
}

form header .left{
  float: left; 
  text-align: left; 
  font-size: 1.25em; 
  line-height: 20%;
}

form header .right{
  float: right; 
  text-align: right; 
  font-size: 1em; 
  line-height: 20%;
}

form header .right p:first-child{
  font-size: 1.75em; 
}

form footer {
  clear: both;
}

.formcolumnleft {
	float:left;
	clear: both;
}
.formcolumnright {
	float:right;
}
span.smallfont {
  font-size: small;
}
fieldset {
	display:block;
	width:85%;
	border-style:solid;
	border-width: 0px;
	border-width:thick;
	background-color: #f5f5f0;
	margin:auto;
	margin-bottom:10px;
	//border-radius: 15px;
}
legend {
	font-size: 24px;
	//text-shadow: 0 -1px 0 #231914;
	color: white;
  //width: 100%;
	//margin: 10px;
  //right: 20px;
  //float: left;
  //display: block;
  right: 15px;
  //position: relative;
  //padding: 5px 20px 5px 10px;
  bottom: 10px;
}

ul.fields {
  width: 100px;
  list-style-type:none;
  float:left;
  text-align:left;
  position:relative;
  left: -38px;
}
li.leftfield {
  display: inline; 
  width: 20%; 
  float: left;
  text-align: left;
  clear: both;
  font-size: 16px;
}
li.rightfield {
  display: inline; 
  width: 80%; 
  float: right; 
  text-align: left;
  margin-bottom:1em;
}
.rightfield ul {
  width: 100%;
	list-style-type:none;
	float:right;
	text-align:left;
	display:inline;
}
.rightfield li {
  width: 100%;
  float: none;
}
.rightfield p {
  font-size:75%; 
  margin-left: 20px; 
  margin-right:20px; 
  margin-top: 1px;
}

td.formlabel {
  width: 20%;
  text-align: left;
  vertical-align:text-top;
  
}
input[type="text"].formshortfield {
  width: 30%;
}

fieldset.personincharge {
	border-color:#F03;
}
  .personincharge legend {
  	background-color:#F03;
  }
  .personincharge input[type="text"] {
  	width:135px;
  }
  .personincharge input[name="idnumber"] {
  	width:50%;
  }
  .personincharge .error {
    color:#F03;
  }
  
fieldset.products {
	border-color:#3CC;
}
  .products legend {
  	background-color:#3CC;
  }
  .products input[name="workref"] {
    width: 90%;
  }
  .products .error {
    color:#3CC;
  }
  .product1 .product2 .product3 li label {
    width: 30%;
    float: left;
    text-align: left;
    font-size: .9em;
  }
  .product1 .product2 .product3 li input {
    font-size: .9em;
    float: left;
    text-align: left;
  }
  

fieldset.neighbors {
	border-color:#6C0;
}
  .neighbors legend {
  	background-color:#6C0;
  }
  .neighbors ul {
  	list-style-type:none;
  }
  .neighbors input[type="text"] {
    width: 50%;
  }
  .neighbors .error {
    color:#6C0;
  }

fieldset.notes {
	border-color:#CC0;
}
  .notes legend {
  	background-color:#CC0;
  }
  .notes p {
    font-size: 75%;
  }
  .note textarea {
    width:100%;
  }
  .notes .error {
    color:#CC0;
  }

fieldset.circle {
	border-color:#F60;
}
  .circle legend {
  	background-color:#F60;
  }
  .circle input[name="circle"] {
  	width:90%;
  }
  .circle input[name="circlewebsite"] {
  	width:90%;
  }
  .circle ul {
    text-ident: 5em;
  }
  .circle p {
    font-size: 75%;
  }
  .circle .error {
    color:#F60;
  }

fieldset.payment {
	border-color:#06C;
}
  .payment legend {
  	background-color:#06C;
  }
  .payment .error {
    color:#06C;
  }
  fieldset.payout {
  	border-color:#33C;
  }
  .payout legend {
  	background-color:#33C;
  }
  .payout .error {
    color:#33C;
  }

fieldset.confirm {
	border-color:#909;
}
  .confirm legend {
	  background-color:#909;
  }
  .confirm p {
	  font-size: 12px;	
  }
  .confirm ul {
	  font-size: 75%;	  
    list-style-type: decimal;
    list-style-position: outside;
  }
  .confirm li {
    list-style-type: decimal;
    list-style-position: outside;
    color: black;
  }
  .confirm .error {
    color:#909;
  }
  
input, select, textarea {
  //width:450px;  
  border: 1px solid gray;  
  margin-bottom:0px;  
  font-size: 13px;
  padding:4px;  
  //background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E0E6E6), to(#DDD));
  //background: -webkit-linear-gradient(top, #E0E6E6, #DDD);
  //background: -moz-linear-gradient(top, #E0E6E6, #DDD);
  //background: -ms-linear-gradient(top, #E0E6E6, #DDD); 
  //background: -o-linear-gradient(top, #E0E6E6, #DDD);
}

input[disabled] {
  border: 1px solid #989898;  
  background-color: #bebebe;
}

input:focus, select:focus, textarea:focus {
  -moz-box-shadow: 0 0 4px #769ea7;
  -webkit-box-shadow: 0 0 4px #769ea7;
  box-shadow: 0 0 4px #769ea7;
}

input[type="submit"] {
  font-size: 18px;
  width: 100%;
  //padding: 5px; 
}

input[type="radio"] {
  width: 20px;
}

.error {
  font-size: 13px;  
}

input[type="file"] {
  width: 100%
}