/* CSS for software sales form */

	body {
		font: 12pt 'Avenir', 'Raleway', 'Arial', 'Helvetica';
		text-align: justify;
		padding: 20px;
		padding-top: 0.25in;
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
	}

	h1 {
		font-size: 18pt;
		text-align: center;
	}

	h2 {
		font-size: 13pt;
		text-align: left;
		padding-bottom: 0px;
	}

	p {
		margin: 10px;
	}

	.button {
		font-size: 14pt;
		font-weight: bold;
	}

	.mute {
		font-size: 10pt;
	}

	.footblock {
		display: inline-block;
		margin-bottom: 20px;
	}

	.img-container {
		position: relative;
		height: 0;
		top: -20px;
	}

	.img-container img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	}

	.pb_ratio {
		padding-bottom: 40%;
	}

	.offertable, .ordertable, .leadtime {
			font-size: 14pt;
			margin-top: 20px;
			margin-bottom: 10px;
			border: 1px rgba(0, 0, 0, 0.75);
			border-collapse: collapse;
			background: rgba(255, 255, 255, 0.9);
			/*
			-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.75);
			-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.75);
			box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.75);
			*/
	}

	.leadtime {
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}

	.offertable, .ordertable {
		width: 100%;
	}

	.offertable td, .leadtime td {
		border-bottom: none;
		padding: 8px;
		padding-top: 16px;
		padding-bottom: 16px;
		text-align: center;
	}

	.offertable tr.line1 td, .leadtime td {
		border-bottom: none;
	}

	.prod-desc {
		display: inline-block;
	}

	.leadtime td {
		text-align: left;
		padding: 16px;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	.ordertable td {
		/*border-bottom: solid 1px rgba(0, 0, 0, 0.1); */
		padding: 4px;
		text-align: left;
	}

	td.rj {
		text-align: right;
	}

	td.rjl {
		text-align: right;
		width: 50%;
	}

	td.lj {
		text-align: left;
	}

	.strike {
		text-decoration: line-through;
	}

	.ordertable input{
		font-size: 18px;
	}

	.ordertable select, .offertable select{
		padding:8px;
		margin: 0;
		font-size: 14px;
		width:65px;
		-webkit-border-radius:4px;
		-moz-border-radius:4px;
		border-radius:4px;
		text-indent: 4px;
		/*
		-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
		-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
		box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
		*/
		background: #eee;
		color:#000;
		border:1px solid;
		outline:none;
		display: inline-block;

		-webkit-appearance:none;
		-moz-appearance:none;
		appearance:none;

		cursor:pointer;
	}

	#country {
		max-width: 250px;
		width: 250px;
	}

	/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		select {padding-right:18px}
	}

	.ordertable label, .offertable label {position:relative}
	.ordertable label:after, .offertable label:after {
		height: 22px;
		/*content:'<>'; /*'<>';*/
		font: bold 18px "Consolas", monospace;
		color:#888;
		-webkit-transform:rotate(90deg);
		-moz-transform:rotate(90deg);
		-ms-transform:rotate(90deg);
		transform:rotate(90deg);
		right:4px; top:2px;
		padding:0 0 2px;
		border-bottom:1px solid #aaa;
		position:absolute;
		pointer-events:none;
	}
	.ordertable label:before {
		content:'▾';
		right:6px; top:0px;
		width:20px; height:20px;
		background:#eee;
		position:absolute;
		pointer-events:none;
		display:block;
	}
	.ordertable option{
		/*font-size: 20px;*/
	}

	.ilb {
		display: inline-block;
		border: 1px solid;
		padding: 8px;
		border-radius: 10px;
		margin: 8px;
		background-color: #eee;

		font-size: 12pt;
		font-weight: 700;

		cursor:pointer;

		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none;	 /* Chrome/Safari/Opera */
		-khtml-user-select: none;	 /* Konqueror */
		-moz-user-select: none;		 /* Firefox */
		-ms-user-select: none;		 /* IE/Edge */
		user-select: none;			 /* non-prefixed version, currently */
	}

	.ilb-disable {
 	   opacity: 0.5;
       cursor: not-allowed;
       pointer-events: none;
 	 }

	.ilb-on {
		background-color: #00ccff;
	}

	.ilb-on-clicked {
		background-color: #0088aa;
	}

	.ilb-clicked {
		background-color: #ddd;
	}

	/*
	.ilb:hover {
		background-color:#5cbf2a;
	}
	*/

	.ilb:active {
		background-color: #00ccff;
		/*
		position:relative;
		top:1px;
		*/
	}


	.hide {
		display: none;
	}

	.ugn {
		width: 10%
	}

	.button_width {
		width: 150px;
	}

	#disc {
		font-weight: 700;
	}

	#sdisc {
		font-weight: 700;
	}

	#udisc {
		font-weight: 700;
	}

	.bold {
		font-weight: 700;
	}

	.cj {
		color: #080;
		font-size: 18pt;
	}

	#login-cover, #progress-cover {
		background: rgba(0,0,0, 0.65);
		position: fixed;
		z-index: 90;
		top:0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	#login, #progress, #reset-message-succeeded, #reset-message-failed {
		border-radius: 10px;
		text-align: center;
		border: solid 1px #888;
		width: 300px;
		height: 250px;
		font-size: 20px;
		padding: 20px;
		background: #fff;
		-webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.7);
		-moz-box-shadow:	0px 10px 20px 0px rgba(0,0,0,0.7);
		box-shadow:			0px 10px 20px 0px rgba(0,0,0,0.7);
		z-index: 100;
		position: fixed;
		top:0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	#reset-message-succeeded, #reset-message-failed {
		z-index: 200;
	}

	#login input{
		font-size: 18px;
		padding:10px;
		margin: 10px;
	}

	#login button{
		font-size: 18px;
		padding:8px;
		margin: 15px;
		margin-top: 10px;
	}

	#auth-err button {
		font-size: 18px;
		padding:8px;
		margin: 15px;
		margin-top: 10px;
	}

	#auth-err {
		margin-top: 40px;
	}

	#eligibility-err button {
		font-size: 18px;
		padding:8px;
		margin: 15px;
		margin-top: 10px;
	}

	#eligibility-err {
		margin-top: 40px;
	}

	#progress {
		width: 450px;
		height: 350px;
	}
	.a_input {
		max-width: 250px;
	}

	#login-error {
		color: #A00;
		font-size: 12px;
		text-align: center;
		width: 100%;
	}

	#orderheader {
		display: none;
		background-color: #eee;
	}

	#payarea {
		display: none;
	}

	#salesTaxLine {
		display: none;
	}

	.ext {
		width: 15%;
	}

	#upgrade_99_serials {
		width: 96%;
		margin-left:2%;
		margin-right:2%;
		display:none;
	}

	.name_col {
		font-weight: bold;
	}
	.soldout {
		color: red;
	}

	.uitd {
	  text-align: center;
	}
	.ui_thumb {
	  display: inline-block;
	  max-width:500px;
	  max-height:300px;
	  width: auto;
	  height: auto;
	}
	.ui_thumb_container {
	  display: inline-block;
	  width:500px;
	  margin-left: 8px;
	  margin-right: 8px;
	  /*float: right;*/

	  text-align: center;
	}

	.line1 {
		background-color: #333;
		color: #fff;
	}
	.line2 {
		background-color: #888;
	}

	.prodhead {
		background-color: #333;
		color: #fff;
		height: 80px;
	}

	.table_spacer {
		height: 40px;
		background-color: #888;
	}

	.header_spacer {
		height: 0px;
		background-color: #888;
	}

	.header_spacer td {
		padding: 4px;
	}

	.inline-logo {
		max-height: 60px;
	}

	#logo_header {
		vertical-align: middle;
	}

	#logo_header img {
		vertical-align: middle;
	}

	.dark h2 {
		color: #fff;
	}

	.dark h1 {
		font-size: 16pt;
		color: #fff;
		margin-bottom: 14px;
		font-style: normal;
		text-align: center;
	}

	.dark {
		text-align: left;
		font-size: 12pt;
		border-radius: 12px;
		background-color: #333; /*#081927;*/
		padding: 20px;
		margin-top: 20px;
		margin-bottom: 20px;
		/*margin-right: 20px; */
		color: #fff;
		border: 1px solid black;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
		/*font-family: "Didact Gothic";*/
	}

	.dark a {
		color: #d3dbdc;
	}

	.dark_a {
		color: #d3dbdc;
	}

	.tahead {
		font-size: 14pt;
	}
	.tahead input {
		font-size: 14pt;
		margin-top: 20px;
	}
	.tahead input[type="submit"] {
		-webkit-appearance: button;
		font-size: 16pt;
	}