#colleft h1 {text-shadow: 1px 2px 9px #949494; padding-top: 8px; padding-bottom: 25px; text-align: center}
#colleft h2 {color: #F60}
#colleft h3 {font-size: 18px}
#ng {font-weight: bold; width: 160px; margin-left: 20px; height: 50px; font-size: 30px; text-align: center; line-height: 50px; opacity: 0.6}
#carte {position: relative; float: right; width: 370px; height: 275px}
#carte iframe {border: none; width: 100%; height: 100%}
#carte a {position: absolute; top: 10px; right: 10px; text-decoration: none;}
#carte a:hover {background: lightgrey}
#myCanvas {border: 1px solid grey; border-radius: 2px}
#rempcarte {position: relative; width: 370px; height: 275px; float: right; text-align: center}
#rempcarte p {position: absolute; top: 60px; text-align: center; font-size: 1.8em; line-height: 1.7em; width: 300px; left: 10%; color: brown}
#divcentrale {float: right; width: 290px; margin-right: 10px}
#info {border: 1px solid lightgrey; padding: 6px 0 0 8px}
#info p {padding-bottom: 5px}
.rougegras {color: red; font-weight: bold!important}
.rouge {color: red}
.vertgras {color: green; font-weight: bold!important}
.vert {color: green}
.bleu {color: #36c}
#tablonotes {width: 200px; margin-top: 10px; border: 1px solid lightgrey; border-collapse: collapse; line-height : 20px}
#tablonotes th {text-align: left; padding-left: 3px; border: 1px solid lightgrey; width: 80%; font-weight: normal}
#tablonotes td {border: 1px solid lightgrey; text-align: center}
#tablonotes tr:last-child th, #tablonotes tr:last-child td {font-weight: bold!important}
#nobt {margin-top: 5px}
#vilprox {clear: right; padding-top: 9px}
.beaulien {text-decoration: none; padding: 7px; box-shadow: inset -1px -1px 1px 1px #949494; font-weight: 700; background: #ffa366; color: #fff!important; display: block; text-align: center; font-size: 14px}
.beaulien:hover {box-shadow: inset 1px 1px 1px 1px #949494; background: linear-gradient(#f2f2f2, #fff); color: #f60!important}
.comm {border: 3px solid #ccc; padding: 8px 5px 0px; min-height: 55px; margin-top: 15px}
.comm p:first-child {float: left; width: 220px}
.comm p:first-child span {color: #999}
.comm table {width: 560px; border-collapse: collapse; float: right; font-size: 11px}
.comm table th {border: 1px solid lightgrey; text-align: center; font-weight: normal}
.comm table tr:first-child {background-color: #f2f2f2}
.comm table th:last-child {font-weight: bold}
.comm table td {border: 1px solid lightgrey; text-align: center; background-color: #fafafa; font-weight: bold}
.moyenne {float: left; padding: 10px; font-size: 24px; opacity: 0.6}
.provisoire {border: 1px solid #b2b2b2; padding: 12px; margin-top: 15px; background-color: #ccc}
.provisoire span {font-size: 1.7em; color: #fff; float: right; margin-right: 20px}
#pageactu {background-color: #FFB870!important}
#pageactu:hover {color: #000!important}
#pages {text-align: center; margin-top: 30px;}
#pages a {border: 1px solid lightgrey; background: #e6e6e6; color: black; text-decoration: none; padding: 3px; font-weight: bold; border-radius : 2px}
#pages a:hover {color: #f60}
/*#pages a:first-child {margin-right: 5px}
#pages a:last-child {margin-left: 5px}
*/
.lieninactif {opacity: 0.5}
.lieninactif:hover {color: inherit!important}
#recavis {margin-top: 10px}
#recavis input[type="submit"] {padding: 2px 5px; margin-left: 5px}
#recavis label {font-weight: bold}
#colleft h4 {text-align: right}
#classt {border: 1px solid lightgrey; padding: 5px 0 5px 8px; margin-top: 15px; line-height: 25px}
#premierenote {font-size: 16px; font-weight: bold; margin-top: 20px; text-align: center; border: 2px solid #a2d246; background-color: #ebf8a4; width: 500px; padding: 8px 20px; margin-left: auto; margin-right: auto}
section {margin-top: 20px}
.divlienform {margin-top: 30px; text-align: center}
.lienformul {display: inline-block; text-align: center; border: 1px solid #03A9F4; border-radius: 3px; padding: 10px 20px; background-color: #f2f2f2}
.lienformul a {text-decoration: none; font-weight: bold; background-color: aliceblue; font-size: 16px; background-color: #f2f2f2}
.lienformul a:hover {color: #f60!important}
.interact {position: relative; height: 20px; margin-top: 10px}
.interact button {color: #00f; border: none; padding-right: 5px}
.interact strong {margin-left: 15px}
.interact button:first-child {background-color: transparent; font-size: 12px; font-style: italic; float: left}
.interact p {float: right}
.interact p button {background-color: #eee; padding: 0px 5px 1px 4px}
.boutondisabled {color: #000 !important}
.disab {position: absolute; top: 0; background-color: rgba(192,192,192,0.2); width: 100%; height: 20px; text-align: center; display: none; color: #b3b3b3; z-index: 10}
.interact em {color: red}
#interpub {height: 95px; text-align: center; margin-top: 15px; margin-bottom: -5px}

@media only screen and (max-device-width:480px) {
	#colleft h1 {text-shadow: 1px 2px 6px #949494; padding-top: 0; padding-bottom: 20px; font-size: 1.4em; }
	#divcentrale {float: none; margin: 20px auto 0 auto;}
	#carte {width: 100%; float: none}
	#rempcarte {width: 100%; float: none}
	#ng {margin: 20px auto 0 auto}
	#tablonotes {margin: 10px auto 0 auto}
	#nobt {text-align: center}
	#vilprox {clear: none; padding-left: 10px}
	.lienformul a {font-size: 1em}
	#colleft h2 {text-align: center}
	#recavis {margin-top: 20px; text-align: center}
	#colleft h4 {text-align: left; margin-top: 20px; padding-left: 10px}
	.provisoire {text-align: center; line-height: 24px; padding: 4px 0}
	.provisoire span {float: none; font-size: 1.5em}
	.comm {padding: 2px 5px 0}
	.moyenne {font-size: 1.6em; margin-left: 50px; padding: 8px 10px}
	.comm table {width: 100%; float: none; font-size: 0.6em}
	#interpub {height: auto; margin-top: 5px}
	#pagencour {padding: 0 10px}
	#pagencour span {color: #f60}
}