/* BASIC, GENERIC STYLING */

body {
  font-family: "Trebuchet MS";
  width: 100%;
  margin: 0px;
}

div#page_wrapper {
  /*text-align: center;*/
  /*background: white;*/
}

h1, fieldset h2 {
  margin-top: 0px;
}

h1 {
  color: #336699;
}
.page_subtitle {
	font-size: 14px;
	font-weight: normal;
}


div#inlineMsg {
  padding: 15px;
	border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.15);
	display: none;
}
div#inlineMsg h2 {
  margin: 0px;
  font-size: 20px;
}
div#inlineMsg p {
	/*margin-top: 5px;*/
  margin-bottom: 0px;
  /*font-weight: bold;*/
}


div.errorMsg {
  color: #e63232;
  /*background-color: rgba(255, 0, 0, 0.2);*/
  background-color: #ffd9d9;
  border: 1px solid red;
}
div.confirmMsg {
  /*border: 1px solid red;*/
  
  color: #328714;
  background-color: #ebffe4;
}
div.infoMsg {
  /*border: 1px solid red;*/
  
/*  color: #328714;*/
  background-color: #fffcdb;
}



/* *********** 
div.errorMsg {
  color: #e63232;
  padding: 15px;
  background-color: #ffd9d9;
  border: 1px solid red;
	border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.15);
	display: none;
}
div.errorMsg h2 {
  margin: 0px;
  font-size: 20px;
}
div.errorMsg p {
  margin-bottom: 0px;
}
 
*/

div#credits {
	display: block;
	
}
 
div#credits p {
	font-size: 10px;
	margin-bottom: 0px;
	color: gray;
	font-style: italic;
}

div#credits p.credCompInfo {
	font-size: 11px;
	margin-bottom: 0px;
	color: gray;
	font-style: normal;
	line-height: 15px;
}
 
 
div#credits p a:link, div#credits p a:visited, div#credits p a:hover, div#credits p a:active {
	text-decoration: none;
	color: gray;
}
 
/* PROGRESSBAR */

ul#progressBar {
  overflow: hidden;
  /*margin-bottom: 20px;*/
  counter-reset: stepCntr;
}

ul#progressBar li {
	list-style-type: none;
	text-transform: uppercase;
	font-size: 11px;
	float: left;
	width: 75px;
	text-align: center;
	position: relative;
  /*z-index: 3;*/
}

/* create a "counter" element as first child of li to contain the step no. */
ul#progressBar li:before { 
  content: counter(stepCntr);
  counter-increment: stepCntr;
  display: block;
  
  font-size: 12px;
  font-weight: bold;
	width: 30px;
	line-height: 30px;
	
  border-radius: 3px;
  /*background-color: rgba(0, 0, 0, 0.1);*/
  background-color: lightgrey;
  margin: 0 auto 5px auto;
  /*z-index: 3;*/
}
/* bar/line connecting the boxes with step numbers */
ul#progressBar li:after { 
  content: '';
  width: 100%;
  height: 5px;
  
  /*background-color: rgba(0, 0, 0, 0.1);*/
  background-color: lightgrey;
  
  position: absolute;
  top: 13px;
  left: -50%;
  z-index: -1;
}

#progressBar li:first-child:after {
	/*connector not needed before the first step*/
  content: none; 
}

/*marking active/completed steps */
#progressBar li.active:before, #progressBar li.active:after {
	background-color: #336699;
	color: white;
}

 
/* FORM */

div#form_wrapper {
  display: inline-block;
/*  background-color: red;*/
  overflow: visible;
}

#mainForm {
	/*display: inline-block;*/
}

#mainForm fieldset {
	border: 0;
  margin: 0px;
  padding: 0px;

	/*stacking fieldsets above each other*/
  /*position: absolute;*/
}
 
#mainForm fieldset:not(:first-of-type) {
	display: none;
}   

#mainForm label.fixed {
	display: inline-block;
	width: 125px;
}

#mainForm input {
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  
  margin-bottom: 10px;
}

#mainForm input.wide {
	width: 220px;
}
#mainForm input.middle {
	width: 120px;
}
#mainForm input.narrow {
	width: 60px;
}

#mainForm input[type="radio"] {
	border: 0px;
	margin-bottom: 0px;
}

#mainForm input.errHighlight {
/*	box-shadow: 0 0 10px 1px red;*/
	box-shadow: 0 0 10px 1px rgba(255, 0, 0, 0.5);
}

div.button-bar {
  margin-top: 50px;
  text-align: center;
  border-top: 2px solid lightgrey;
  padding-top: 15px;
}

#mainForm .action-button {
  width: 100px;
  background-color: #336699;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  
  margin-top: 25px;
}

#mainForm input.disabled {
  background-color: lightgray;
}

#mainForm input[type="button"].previous {
	margin-right: 10px;
}


/* POPUP */
div.popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 400px;
  margin: 20px auto;
  
  border: 0 solid gray;
  border-radius: 5px;  
}

div.popup h2 {
  margin: 0px;
  font-size: 20px;
}

div.popup p {
	/*margin-top: 5px;*/
  margin-bottom: 0px;
  /*font-weight: bold;*/
}

div.popupNeg {
  color: #e63232;
  background: #ffd9d9;
}

div.popupPos {
  color: #328714;
  background: #ebffe4;
}

div.popupInline {
  border-radius: 5px;
  margin: 20px 0;	
  padding: 20px;
}

/* POPUP - prices */
span.priceTblLeft {
  width: 350px; 
  display: block; 
  float: left;	
}
span.priceTblMiddle {
  width: 15px; 
  display: block; 
  float: left;	
}
span.priceTblRight {
  width: 60px; 
  display: block; 
  float: left;	
  text-align: right;
}

span.sum {
	border-top: 1px solid black;
}