body  
{ 
	background-color: #FFFFFF; color: #000000; font-family:calibri,arial; text-align:justify;
}

img.logo { margin:35px 20px 0px 20px; }
div.header 
{ /*position:fixed; top: -6px;*/ width:100%; background-color:white; height:174px; 
/*border-bottom:1px solid gray; */
}
div.col1 { float:left;  width:47% }
div.col2 { float:right; width:47% }
fieldset { padding : 10px 20px 0px 20px; }
legend { font-size:24px; font-weight:bold; }
label              { display:inline-block; width:44%; /*background-color:lightgray;*/ margin-right:5%; padding-left:1%; }
.col1 label,
.col2 label   { width:40%; }
.col1 input,
.col2 input   { background-color:#DDEBF6; border:none; }
fieldset span { display:inline-block; width:9%; background-color:yellow; padding-left:1%; }
fieldset input,
fieldset select { width:45%; }
.buttons { display:inline-block; position:relative; top:-10px; margin:0px auto; /*width:100%;*/ text-align:center; }
.buttons input { width:120px; height:40px; margin:0px 0px 5px 20px; font-size:18px; background-color:Silver; cursor:pointer; }
.entete { display:inline-block; position:relative; top:-10px; width:40%; /*float: right;*/ margin-left:20px; }
.notice1 { font-style:italic; }
.notice2 { float:left; display:block; color:red; width: 100%; margin:2px 0 20px 80px; font-style:italic; text-align:left; }
.note { color:red; font-style:italic; width:auto; background-color:inherit; padding-left:0px; }

p {font-size:14px; color:#000000; /*font-weight:bold;*/ }
p.organisation { line-height:2em; }
p.organisation span { font-size:24px; font-weight:bold; }

h1 { display:none; }
h2 { 
/*background-color:#0066cc; color:white;*/ color:#152167; width:100%; text-align:center; padding:5px 0px; margin:0px; /*font-style:italic;*/ 
font-size:36px;
font-weight:bold;
}
h3 { font-size:22px; /*background-color:#0066cc; color:white;*/ color:#555555; width:100%; text-align:left; 
}

div.logo { width:100%; margin-bottom:50px; }

@media screen and (max-device-width:480px),
       screen and (max-width       :480px)
{
	div.col1 { float:left; width:100% }
	div.col2 { float:left; width:100% }
	p { font-size: 2em; }
	h2 { font-size: 2em; }
	.buttons input { width:200px; height:60px; font-size:2.2em; }
	label { width:45%; } 
	legend { font-size:3em; }
	fieldset { width:90%; margin:0px auto; }
	fieldset span { width:12%; }
	fieldset input   { width:35%; font-size: 1.1em; }
	fieldset select { width:35%; font-size: 1.1em; }
	p.notice { font-size: 1.2em; }
}

.cli_gp fieldset span, .cli_gp label { background-color:#5EB373 /*#47774F*/; }
.cli_ps fieldset span, .cli_ps label { background-color:#FFAC59 /*#FF8753*/; }
/*.col2*/ input { background-color:white; border:1px solid black; }


.test1 fieldset span, .test1 label { background-color:LemonChiffon; }
.test1 .col2 input                         { background-color:NavajoWhite; }
.test2 fieldset span, .test2 label { background-color:LemonChiffon; color:#0066cc; }
.test2 .col2 input                         { background-color:NavajoWhite;  color:#0066cc; }
.test3 fieldset span, .test3 label { background-color:white; }
.test3 .col2 input                         { background-color:white; }
.test4 fieldset span, .test4 label { background-color:white; color:#0066cc; }
.test4 .col2 input                         { background-color:white; color:#0066cc; }
.test5 fieldset span, .test5 label { background-color:white; }
.test5 .col2 input                         { background-color:NavajoWhite; }
.test6 fieldset span, .test6 label { background-color:white; color:#0066cc;}
.test6 .col2 input                         { background-color:NavajoWhite; color:#0066cc; }

#calc1 { height:0px; position:relative; top:-120px; } 
#calc2 { height:0px; position:relative; top:-120px; } 

table.fair .c1,
table.fair .c2,
table.fair .c3 { width:25%; }

table.fair .c2 { text-align:center; }
table.fair td.ratio { text-align:right; border:1px solid black; }
table.fair td.titre { text-align:center; }

table.fair input,
table.fair select    { width:100%; text-align:center; background-color:gray; color:white; }
table.fair td.result {             text-align:center; background-color:gray; color:white; }

table.fair td.head { font-weight:bold; font-style:italic; }
table.fair td.lib { text-align:left; }

body {
	background-color:white;
	background-image:url('../images/calculateur-thermique-img-fond.jpg');	
	background-position:50% 232px;
	background-repeat:no-repeat;
}
#conteneur {
	margin: auto;
	width : 1140px;
}
div.tabs {
  min-height: 7em;	
  position: relative;
  line-height: 1;	
  z-index: 0}		
div.tabs a {
	text-transform : uppercase;
	text-decoration : none;
}
div.tabs > div {
  display: inline-block; width:380px; height:50px; }	
div.tabs > div > a {
	color:#152167;
	font-size:22px;
  background: #CCC;
  padding: 0.2em 0;
  width : 100%;
  height: 24px;
  padding: 12px 0;
  display: inline-block;
  text-align:center;
} 
div.tabs > div:not(:target) > a {
    border-bottom: none;	
	background-color:#E9F0F4;
/*	background-image:url('../images/calculateur-thermique-select-none.jpg');	 */
	background-position:0 0;
	background-repeat:no-repeat;
}		
div.tabs > div:target > a,
:target #default2 > a {		
    border-bottom: 0.1em solid white; 
	background-color:white;
/*	background-image:url('../images/calculateur-thermique-select-checked.jpg');	*/
	background-position:0 0;
	background-repeat:no-repeat;
	border-top:2px solid navy;
	border-left:1px solid lightgray;
	border-right:1px solid lightgray;
}		
div.tabs > div > div {
  background: white;		
  z-index: -2;		
  left: 0; top: 1.3em;
  bottom: 0; right: 0;
  height: 710px;
  margin-top:28px;
  }
div.tabs > div:not(:target) > div { 
  position: absolute;
}		
div.tabs > div:target > div, :target #default2 > div {
  border-top : 1px solid #212D6F;
  position: absolute;		
  z-index: -1;
}
div.tabs > div:not(:target) div.results_set {
  display: none;
} 
div.tabs > div:target div.results_set {
  display: block;
} 
div.titre {
	color:#152167;
	display:inline-block;
	position:relative;
	top:-30px;
	font-size:36px;
	font-weight:bold;
}	
div.references{
	float:right;
	margin:20px 0 0 0;
	display:inline-block;
	border : 2px solid #E9F0F4;
	border-radius: 10px;
	color : #555555;
	width: 450px;
	font-size:22px;
	padding:8px 0;
}	
div.references label {
	background-color: white;	
	text-align:right;
}
input {
	font-size:16px;
	width:428px;
	display:inline-block;
	margin:5px 0;
	color : #555555;
	border : 2px solid #E9F0F4;
	border-radius: 4px;
	padding:0 10px;
	height:35px;
}
select {
	font-size:16px;
	width:428px;
	display:inline-block;
	margin:5px 0;
	color : #555555;
	border : 2px solid #E9F0F4;
	border-radius: 4px;
	padding:0 10px;
	height:35px;
}
div.references input {
	font-size:22px;
	margin:5px 0;
	color : #555555;
	border : 2px solid #E9F0F4;
	border-radius: 4px;
	padding:0 10px;
	width:168px;
	height:35px;
}
div.ima_jardin {
	float:right;
	width:570px;
	height:710px;
	background-color:white;
	background-image:url('../images/calculateur-thermique-img.jpg');
	background-position:0 0;
	background-repeat:no-repeat;
}
div.left {
	float:left;
}
div.content {
	  padding: 20px 0 0 70px;
}
div.btn_next {
	width:210px;
	height:40px;
	font-size:20px;
	border-radius: 5px;
	background-color:#152167;
	text-align:center;
	position:relative;
	left:+470px;
	top:+45px;
	line-height:40px;
	text-transform : uppercase;
	font-weight:bold;
}
div.btn_next a {
	color:white;
}
div.btn_next span {
/*	font-size:25px;*/
}
div.content2 {
	  padding: 20px 0 0 70px;
	  width:450px;
}
div.content3 {
	float:right;
	width:550px;
}
div.content2 input {
	width:45%;
	margin:0;
}
div.content2 select {
	width:50%;
	margin:0;
}
div.content3 input {
	width:45%;
	margin:0;
}
div.content3 select {
	width:45%;
	margin:0;
}
div.content2 label,
div.content3 label {
	color : #555555;
	font-size:22px;
	width:40%;
}
#tab2 div.btn_next {
	left:+400px;
	top:+10px;
}
#tab2 div.btn_next button {
	border: none; background: none; cursor: pointer;
	height:100%;color:white;
	font-size:18px;
	font-weight:bold;
}
#tab3 div.btn_next {
	left:+0px;
	top:+10px;
}
#tab3 div.btn_next button {
	border: none; background: none; cursor: pointer;
	height:100%;color:white;
	font-size:18px;
	font-weight:bold;
}
div.final {
	text-align:center;
	margin:0px auto;
}
#tab3 h2 {
	text-align:center;
	margin:30px 0;
}
div.results span {
	font-size:22px;
	font-weight:bold;	
	color:#152167;
	width:365px;
	display:inline-block;
	text-align:left;
}
div.results span.titre1 {
	margin:27px 0px 12px 300px;
	text-align:center;
}
div.results span.titre2 {
	text-align:center;
}
div.final span.lib{
	color:#555555;
	font-size:18px;
	margin-left:20px;
	width:300px;
	font-weight:bold;
}
div.final p span{
	font-size:18px;
	width:182px;
	color:#8B8B8B;
	font-weight:normal;
}
div.btn_next.fiche1 {
	left:+375px;
	top:30px;
}
div.btn_next.fiche2a {
	left:+750px;
	top:-10px;
}
div.btn_next.fiche2b {
	left:+750px;
	top:-50px;
}
div.btn_next.fiche1a {
	left:+325px;
	top:30px;
	width:150px;
}
div.btn_next.fiche1b {
	left:+500px;
	top:-10px;
	width:150px;
}
div.results {
	/*background-image:url('../images/calculateur-thermique-cadre.jpg');
	background-position:0 0;
	background-repeat:no-repeat;*/
	width:1140px;/*1050px;*/
	height:500px;
	display:inline-block;
	text-align:left;
}
div.results_set {
	background-color: white;
	padding:0px 30px;
	line-height: 0.8em;
	display: block;
}
div.results_row {
	column-count: 2;
	margin-bottom: 20px;
	padding:5px 0px;
}
div.results_model {
	height:295px;
	border:1px solid black;
	background-color: white;
}
div.results_model.invisible {
	border:1px solid white;
}
div.noresults {
	margin-top : 100px;
	width:100%;
	font-size:20px; color:#555555; text-align:center; font-weight:bold;	
}
div.caract_impr {
	display:none;
	border: 2px solid #E9F0F4;
	max-height: 400px;
}

@media print {
	html { height: 100px !important; overflow: hidden; border:10px solid white; }
	body { position:absolute !important; top : -30px !important; }
	h2 { margin : 10px 0 0 0 !important; }
	.noImpr { display:none !important; }
	div.header  { height: 160px !important; }
	div.infos  { position:absolute !important; top: +30px !important; border: 2px solid #E9F0F4; max-height: 190px; overflow:hidden; }
	div.caract { /* position:absolute !important; top : +180px !important; max-height: 200px !important;*/ display:none; }
	div.caract_impr { display:block; position:absolute !important; top : +280px !important;}
	div.content3 { position:relative !important; top : +30px !important; }
	div.final  { position:absolute !important; top : /*+820px*/ +720px !important; height: 100px !important;}
	div.notice2 { position:relative !important; top : +20px !important; }
	div.clientpro   { position:relative !important; top : +0px !important; }
	div.clientfinal { position:relative !important; top : -140px !important; left: +510px !important; width:100px !important; }
	div.clientpro input, div.clientfinal input { font-size:24px; border:none; margin:0px; } 
	div.references { position:relative !important; left : +0px !important; top: +10px !important; }
	div.results_set { display: block !important; }
	
	#TypePeriode         { width: 35% !important; }
	#TemperatureInitiale { width: 30% !important; }
	#CoutKwh             { width: 30% !important; }

  ::-webkit-input-placeholder { /* WebKit browsers */
      color: transparent;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: transparent;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: transparent;
  }
  :-ms-input-placeholder { /* Internet Explorer 10+ */
      color: transparent;
  }	
}