/* IMFP style sheet ©2012 Charles Houghton-Webb */
body {
	background: #000 url('../images/bg.jpg') no-repeat;
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	color:#FFF;
	padding:0;
	margin: 0 auto;
}
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
/* hover { display:none; }*/

footer, header { position: relative; clear: both; }

a img { border: none; }

.bol { font-weight: bold; }
.bol-none { font-weight: normal; }
.ita { font-style: italic; }

.sml { font-size:10px; }
.big { font-size:14px; }
.hdr { font-size:18px; }

.cent { text-align:center; }
.padL5 { padding-left:5px; }
.mar10 {margin-left: 10px;}
.wht { color: #fff; }
.blk { color: #000; }
.rd { color: #f00; }
.grn { color: #6f6; }
.grn2 { color: #393; }
.yel { color: #ff0; }
.gol { color: #FC6; }
.org { color: #f90; }
.pnk { color: #fcc; }
.blu {color: #339;}

.bgred { background-color:#D25; }
.bggrey { background-color:rgba(0, 0, 0, 0.7); }
.odd {background:#333;}
.even {background:#666;}

.ResultTextY {color: #ff0; margin-left:10px;}
.ResultTextG {color: #6f6; margin-left:10px;}

.note {font-size: 10px;font-weight: bold;color: #00F;background:#FF9;}
.ScreenRes {font-size: 24px; font-style: italic; font-weight: bold; color: #00F;}

.blackBG {background-color:#000;font-size:14px;}

.hideIt { visibility: hidden; }

a, a:visited, a:hover, a:focus, a:active {text-decoration:none;}
a {color:#ff3}
a:hover  {color:#fcc}

.deadlink {color:#444;}

a.lnk1, a.lnk1:visited, a.lnk1:hover, a.lnk1:focus, a.lnk1:active, a.lnk2, a.lnk2:visited, a.lnk2:hover, a.lnk2:focus, a.lnk2:active, a.lnk3, a.lnk3:visited, a.lnk3:hover, a.lnk3:focus, a.lnk3:active  {text-decoration:none;}

a.lnk1, a.lnk1:visited, a.lnk1:active {color: #09F;}
a.lnk1:hover, a.lnk1:focus {color: #ff3;}

a.lnk2, a.lnk2:visited, a.lnk2:active {color: #F00;}
a.lnk2:hover, a.lnk2:focus  {color: #F99;}

a.lnk3, a.lnk3:visited, a.lnk3:active {color: #333;}
a.lnk3:hover, a.lnk3:focus  {color: #999;}

#textArea {
    width: 100%;
	height: 100px;
    padding: 8px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box;
    margin-top: 6px; 
    margin-bottom: 2px; 
    resize: vertical;
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;	
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

}

#submitButton {
	background-color: rgb(163, 1, 20);
  	border: none;
	border-radius: 4px;
 	color: white;
	text-align: center;
 	padding: 8px 24px;
 	text-decoration: none;
  	margin-top: 2px;
  	cursor: pointer;
	width: 100%;
	transition: background-color 0.3s;
}

#submitButton:hover {
	background-color: rgb(202, 0, 24);
	transition: background-color 0.3s;
}

.success {
	font-family: inherit;
	font-size: 12pt;
	margin: 0 auto;
	float: right;
	position: fixed;
	right: 0px;
	top: 0px;
	overflow: none;
	border-left: solid #009900 6px;
	z-index: 100;
    padding: 20px;
    background-color: green;
    color: white;
    margin-bottom: 15px;
	box-shadow: 2px 2px 10px #222;
}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}


/********************  responsive columns  *****************************/
.left-column, .right-column, footer, header { border: none; padding: 10px; margin: 5px; }

.inline-items { margin-top: 0; }

.inline-items li { margin-left: 0; border-left: 1px solid black; padding-left: 10px; padding-right: 10px; }

.inline-items li:first-child { margin-left: 0; border: none; padding-left: 0; padding-right: 10px; }

.inline-items li:last-child { padding-right: 0; }

.textBox { height: 100%; line-height: auto; text-align: center; }
.active {background-color: #FFF; }
.clearCols { clear: both; padding: 0; text-align: center; }

.left-column { float: left; width: 47%; max-width: 390px; padding: 0 1%; }
.right-column { float: right; width: 47%; max-width: 390px; padding: 0 1%; }
.columns-container { width: 100%; max-width: 800px; }
.columns-container:after { content:""; display: table; clear: both; }
.columns-container img { max-width: 100%; height: auto; }

.comment-container { width: 98%; max-width: 800px; }

@media screen and (max-width: 600px ) {
.columns-container { float: left; flex: auto; }

.left-column, .right-column { float: none; width: 99%; padding: 0 1%; align-content: center; }
.textBox { height: 100%; line-height: 160px; text-align: left; }
.comment-container { width: 100%; max-width: 800px; }
}

/*********************** responsive menu *****************************/
ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #999; }
ul.topnav li {float: left;}
ul.topnav li a { display: inline-block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 12px; }
ul.topnav li a:hover {background-color: #FFF;}
ul.topnav li.icon {display: none; }

/***********************  Media Queries  *******************************/
@media screen and (max-width:620px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon { float: right; display: inline-block; }
ul.topnav.responsive { position: relative; }
ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; }
ul.topnav.responsive li { float: none; display: inline; }
ul.topnav.responsive li a { display: block; text-align: left; }
}
/***********************************************************************/

.TableFrame { margin:0px; border-collapse:collapse; padding:0px; border: 0px; width: 100%; }

#TableTop {font-size:10px; margin-left:10px; text-align:left; border-collapse:collapse;}
#TableTop th {background:#000; font-weight:bold; padding:10px 8px; color:#fff;}
#TableTop td {background: none; padding:4px; color:#fff;}

#TableNote {font-size:10px; margin-left:15px; text-align:left;background:#333;}
#TableNote th {background:#333; font-weight:bold; color:#00F;}
#TableNote td {padding:10px; color:#FFF;}
#TableNote .cell {font-weight: bold; color: #00F;background:#FF9;}

.TableGen {font-size:12px; margin-left:10px; text-align:left; border-collapse:collapse; width: 100%; max-width: 680px;}
.TableGen th {font-size:11px; background-color: rgba(34, 34, 34, 0.6); font-weight:bold; padding:4px 6px; color:#fff;}
.TableGen tfoot {background:#777; font-weight:bold; font-size:12px; padding:4px 6px; color:#fff;}
.TableGen td {background: none; padding:4px 0px; color:#fff;}

.AltRows tr:nth-child(odd) {background-color: rgba(51, 51, 51, 0.8);}
.AltRows tr:nth-child(even) {background-color: rgba(102, 102, 102, 0.8);}

.TableGenSel , .TableGenSel select {font-family:"Arial Black", Gadget, sans-serif; padding:0px;font-size:14px; font-weight:bold; color:#6F6; border:0px; height:22px; background: transparent; }

#dlg {width: 90%; height:20px; text-align:center;}

.TableSmall {font-size:10px; margin-left:10px; text-align:left; border-collapse:collapse;}
.TableSmall th {background:#111; font-weight:bold; padding:4px 6px; color:#fff;}
.TableSmall tfoot {background:#777; font-weight:bold; font-size:12px; padding:4px 6px; color:#fff;}
.TableSmall td {background: none; padding:4px; color:#fff;}
.TableSmall .odd {background:#333;}
.TableSmall .even {background:#666;}

.TableSmall td a, .TableSmall td a:hover, .TableSmall td a:visited {text-decoration:none;font-weight:bold;}
.TableSmall td a {color:#6f6;}
.TableSmall td a:hover {color:#f9f;}
.TableSmall td a:visited {color:#6f6;}
.TableSmall td a:visited:hover {color:#f9f;}
.TableSmall th a {color:#c6f;}
.TableSmall th a:hover {color:#cc3;}
.TableSmall th a:visited {color:#c6f;}
.TableSmall .BigB {font-size: 14px; font-weight: bold; color: #FFF;}
.TableSmall a.Bullet {text-decoration:none;font-size: 14px; color: #F90;font-weight:bold;}
.TableSmall a.Bullet:hover {text-decoration:none;font-size: 14px; color: #33F;font-weight:bold;}
.TableSmall a.Bullet:visited {text-decoration:none;font-size: 14px; color: #F96;font-weight:bold;}
.TableSmall img{ width:100%; max-width:20px; }
/*    >>>>>>>>>>>>>>>>>  Emploi du temps  <<<<<<<<<<<<<<<<<<<    */
#TableEDT {font-size:9px; margin-left:0px; margin-top:10px; text-align:left;}
#TableEDT th {background:#222;font-size:10px;font-weight:bold;padding:4px 6px; color:#FFF;}
/*#TableEDT tfoot {background:#777; font-weight:bold; font-size:12px; padding:4px 6px; color:#FFF;}*/
#TableEDT td {padding:2px; border-right-style:solid; border-right-color:#000; border-right-width:thin;}

#TableEDT .oddO, #TableEDT .oddE, #TableEDT .evenO, #TableEDT .evenE {color:#A00;
border-top-style:solid; border-top-color:#000; border-top-width:thin;}

#TableEDT .oddO, #TableEDT .oddE {background:#DDD;}
#TableEDT .evenE, #TableEDT .evenO {background:#EEE;}

#TableEDT .on {background:#FF9; color:#00C; font-weight:bold;
border-top-style:solid; border-top: double; border-top-color:#000;}
#TableEDT .onf {background:#FFC; color:#A00;}

#TableEDT .col1 {background:#666;}
#TableEDT .col2 {background:#444;}
#TableEDT .col1, .col2 {font-weight:bold; text-align:right; font-size:9px;}

#EDT {position:absolute;top:0px;left:0px;width:680px;height:500px; z-index:999;}
/***********************************************************************/

.TableSmallSp {font-size:10px; margin-left:0px; text-align:left; border:1; border-collapse:collapse; width:100%; max-width:480px; border-color:#FFFFFF; /*display:block;*/}
.TableSmallSp th {background:#111; font-weight:bold; padding:4px 6px; color:#fff;}
.TableSmallSp tfoot {background:#777; font-weight:bold; font-size:12px; padding:4px 6px; color:#fff;}
.TableSmallSp td {background: none; padding:4px; color:#fff;}
.TableSmallSp .odd {background:#333;}
.TableSmallSp .even {background:#666;}

.TableSmallSp td a, .TableSmallSp td a:hover, .TableSmallSp td a:visited {text-decoration:none;font-weight:bold;}
.TableSmallSp td a {color:#6f6;}
.TableSmallSp td a:hover {color:#afa;}
.TableSmallSp td a:visited {color:#c6f;}
.TableSmallSp td a:visited:hover {color:#f9f;}
.TableSmallSp th a {color:#c6f;}
.TableSmallSp th a:hover {color:#cc3;}
.TableSmallSp th a:visited {color:#c6f;}
.TableSmallSp .BigB {font-size: 14px; font-weight: bold; color: #FFF;}
.TableSmallSp a.Bullet {text-decoration:none;font-size: 14px; color: #F90;font-weight:bold;}
.TableSmallSp a.Bullet:hover {text-decoration:none;font-size: 14px; color: #33F;font-weight:bold;}
.TableSmallSp a.Bullet:visited {text-decoration:none;font-size: 14px; color: #F96;font-weight:bold;}

/***********************************************************************/
#TablePlng {font-size:9px; margin-left:15px; margin-top:10px; border-collapse:collapse;}
#TablePlng th {background:#666;font-size:10px;font-weight:bold;padding:4px 6px; color:#FFF;}
#TablePlng tfoot {background:#777; font-weight:bold; font-size:12px; padding:4px 6px; color:#FFF;}
#TablePlng td {background:none; padding:2px; color:#000;}

#TablePlng .mt {background:#FFF; border-width:thin; border-style: solid;}
/* Time column */
#TablePlng .evenO {background:#DDD; text-align:center;}
#TablePlng .evenE {background:#CCC; text-align:center;}
/*Period borders */
#TablePlng .onh1, #TablePlng .onh2, #TablePlng .onh3, #TablePlng .onh4, #TablePlng .onh5, #TablePlng .onh6 {color:#000; border-width:thin; border-style: solid solid none solid;}
#TablePlng .onb1, #TablePlng .onb2, #TablePlng .onb3, #TablePlng .onb4, #TablePlng .onb5, #TablePlng .onb6 {border-width:thin; border-style: none solid none solid;}
/*Period colours */
#TablePlng .onh1, #TablePlng .onb1 {background:#BEF;} /* Blue */
#TablePlng .onh2, #TablePlng .onb2 {background:#FCF;} /* Pink */
#TablePlng .onh3, #TablePlng .onb3 {background:#FC3;} /* Orange */
#TablePlng .onh4, #TablePlng .onb4 {background:#FF9;} /* Yellow */
#TablePlng .onh5, #TablePlng .onb5 {background:#F66;} /* Red */
#TablePlng .onh6, #TablePlng .onb6 {background:#DFD;} /* Green */
#TablePlng tr:hover { color: #fff; background-color: transparent; }
#TablePlng tr:hover td { background-color: #ffe; }
/***********************************************************************/
#TableCal {font-size:12px; margin-left:10px; text-align:center; border-collapse:collapse; background-color: #FFFFFF;}
#TableCal th {font-size:14px; text-align:center; background:#666; font-weight:bold; padding:4px 6px; color:#fff;}
#TableCal tfoot {background:#777; font-weight:bold; font-size:12px; padding:4px 6px; color:#FFF;}
#TableCal td {background: none; padding:4px; color:#333; font-weight:bold;}
#TableCal .aDate {background:#FFF;}
#TableCal .curDate {background:#FF9; color:#6FC}

#TableCal td a, #TableCal td a:hover, #TableCal td a:visited {text-decoration:none;font-weight:bold;}
#TableCal td a {color:#93E;}
#TableCal td a:hover {color:#393;}
#TableCal td a:visited {color:#93E;}
#TableCal td a:visited:hover {color:#393;}
#TableCal th a {color:#FFF;}
#TableCal th a:hover {color:#0F0;}
#TableCal th a:visited {color:#FFF;}
#TableCal th a:visited:hover {color:#0F0;}
#TableCal .BigB {font-size: 14px; font-weight: bold; color: #FFF;}
#TableCal a.Bullet {text-decoration:none;font-size: 14px; color: #F90;font-weight:bold;}
#TableCal a.Bullet:hover {text-decoration:none;font-size: 14px; color: #33F;font-weight:bold;}
#TableCal a.Bullet:visited {text-decoration:none;font-size: 14px; color: #F96;font-weight:bold;}

/***********************************************************************/

.HelpStyle {font-size: 12px; font-weight: bold; color: #c33; text-align:center; margin:5px;}

textarea.style1, textarea.style2 { color:#FFF; width: 100%; height: 100%; border: 3px solid #FFF; padding: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; resize:none; }

textarea.style2 { color:#000; }

#temp {position:absolute;top:600px;left:0px;width:400px;height:850px;visibility:visible;background-color:#fff;vertical-align:top; padding:10px 20px;font-size: 12px; font-weight: bold; color: #000;}
.selectStyle , .selectStyle select {background: transparent;padding:0px;font-size:10px;font-weight:bold;color:#FFF;border:0px;height:14px;}
.selectStyle1 , .selectStyle1 select {font-family:"Arial Black", Gadget, sans-serif; background: transparent; padding:0px;font-size:14px;font-weight:bold;color:#6F6;border:0px;height:22px;}
/***********************  Pop-ups  ***********************************/

.popup1, .popup2, .popup3 { margin: 0 auto; width: 90%; max-width: 480px; height: auto; position:relative; top: 15%; font-size:14px; text-align: justify; padding: 10px; border: 3px solid #fff; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-transition: opacity 0.8s ease; -moz-transition: opacity 0.8s ease; transition: opacity 0.8s ease; z-index: 1000; }

#overlayH, #overlayM, #overlayF, #overlayV { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); cursor: default; position: absolute; margin-top: -40px; visibility: hidden; z-index: 10; }

#overlayH:target, #overlayM:target, #overlayF:target, #overlayV:target { visibility: visible; display: block; }

.popup1, textarea.style1 { background: #77F; background: -webkit-gradient(linear, left top, left bottom, from(#00F), to(#77F)); background: -moz-linear-gradient(top, #00F, #77F); background: -ms-linear-gradient(#00F, #77F); }

.popup2 { background: #222; background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#888)); background: -moz-linear-gradient(top, #222, #888); background: -ms-linear-gradient(#222, #888); }

.popup3, textarea.style2 { background: #FFD664; background: -webkit-gradient(linear, left top, left bottom, from(#DF7100), to(#FFD664)); background: -moz-linear-gradient(top, #DF7100, #FFD664); background: -ms-linear-gradient(#DF7100, #FFD664); }

.close { background-color: rgba(247,177,0,0.8); height: 30px; line-height: 30px; position: absolute; left: -15px; top: -15px; width: 30px; -webkit-border-radius: 15px;  -moz-border-radius: 15px; border-radius: 15px; }
.close:before { color: rgba(255, 255, 255, 0.9); content: " "; font-size: 24px; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); }
.close:hover { background-color: rgba(255, 128, 60, 0.9); }

.button { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em;  -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.button:hover { text-decoration: none; }
.button:active { position: relative; top: 1px; }

.bigrounded { -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; }
.medium { font-size: 12px; padding: .4em 1.5em .42em; }
.varSize, .small { font-size: 11px; padding: .25em 1em .275em; }
/*.varSize { font-size: 11px; padding: .25em 1em .275em; }*/

/* orange */
.orange { color: #fef4e9; border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top, #faa51a, #f47a20); background: -ms-linear-gradient(#faa51a, #f47a20); }
.orange:hover { background: #f47c20; background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); background: -moz-linear-gradient(top, #f88e11, #f06015); background: -ms-linear-gradient(#f88e11, #f06015); }
.orange:active { color: #fcd3a5; background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); background: -moz-linear-gradient(top, #f47a20, #faa51a); background: -ms-linear-gradient(#f47a20, #faa51a); }
/* green */
.green { color: #e8f0de; border: solid 1px #538312; background: #64991e; background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); background: -moz-linear-gradient(top, #7db72f, #4e7d0e); background: -ms-linear-gradient(#7db72f, #4e7d0e); }
.green:hover { background: #538018; background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c)); background: -moz-linear-gradient(top, #6b9d28, #436b0c); background: -ms-linear-gradient(#6b9d28, #436b0c); }
.green:active { color: #a9c08c; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f)); background: -moz-linear-gradient(top, #4e7d0e, #7db72f); background: -ms-linear-gradient(#4e7d0e, #7db72f); }
/* blue */
.blue {color: #d9eef7; border: solid 1px #0076a3; background: #2a7cef; background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#2a7cef)); background: -moz-linear-gradient(top, #00adee, #2a7cef); background: -ms-linear-gradient(#00adee, #2a7cef); }
.blue:hover { background: #007ead; background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#005ccf)); background: -moz-linear-gradient(top, #0095cc, #005ccf); background: -ms-linear-gradient(#0095cc, #005ccf); }
.blue:active { color: #80aed6; background: -webkit-gradient(linear, left top, left bottom, from(#005ccf), to(#00adee)); background: -moz-linear-gradient(top, #005ccf, #00adee); background: -ms-linear-gradient(#005ccf, #00adee); }
/* red */
.red { color: #faddde;  border: solid 1px #980c10;  background: #d81b21;  background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)); background: -moz-linear-gradient(top, #ed1c24, #aa1317); background: -ms-linear-gradient(#ed1c24, #aa1317); }
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); background: -ms-linear-gradient(#c9151b, #a11115); }
.red:active { color: #de898c; background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24)); background: -moz-linear-gradient(top, #aa1317, #ed1c24); background: -ms-linear-gradient(#aa1317, #ed1c24); }
/* black */
.black { color: #d7d7d7; border: solid 1px #333; background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); background: -moz-linear-gradient(top,  #666,  #000); background: -ms-linear-gradient(#666, #000); }
.black:hover { background: #000; background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)); background: -moz-linear-gradient(top,  #444,  #000); background: -ms-linear-gradient(#444, #000); }
.black:active { color: #666; background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)); background: -moz-linear-gradient(top,  #000,  #444); background: -ms-linear-gradient(#000, #444); }
/* yellow */
.yellow { color: #333; border: solid 1px #f9f68a; background: #ecca06; background: -webkit-gradient(linear, left top, left bottom, from(#fff2aa), to(#ffd700)); background: -moz-linear-gradient(top, #fff2aa, #ffd700); background: -ms-linear-gradient(#fff2aa, #ffd700); }
.yellow:hover { background: #fffadd; background: -webkit-gradient(linear, left top, left bottom, from(#fffadd), to(#ffd700)); background: -moz-linear-gradient(top, #fffadd, #ffd700); background: -ms-linear-gradient(#fffadd, #ffd700); }
.yellow:active { color: #fcd3a5; background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); background: -moz-linear-gradient(top, #f47a20, #faa51a); background: -ms-linear-gradient(#f47a20, #faa51a); }
/* grey */
.grey { color: #afafaf; border: solid 1px #555; background: #6e6e6e; background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); background: -moz-linear-gradient(top,  #888,  #575757); background: -ms-linear-gradient(#888, #575757); }

#tap, #TextApprSt, #TextApprPr {background-color:#FFC; resize: none; padding: 10px; width: 100%; max-width: 800px; height: 200px;}

.scroll, .comment { font-size:14px; border:0px solid; margin: 0; padding:2px; -webkit-border-radius: 2px;  -moz-border-radius: 2px; border-radius:2px; width:100%; height:100%; text-align:justify; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; resize:vertical; overflow:auto; -webkit-overflow-scrolling: touch; z-index:1500; vertical-align:top; }

.scroll { color:#FFF; background-color: transparent; min-height:180px; }

.comment { color:#000; background-color: #FFC; min-height: 200px; }

.orangeBack { background: #FFD664; background: -webkit-gradient(linear, left top, left bottom, from(#DF7100), to(#FFD664)); background: -moz-linear-gradient(top, #DF7100, #FFD664); background: -ms-linear-gradient(#DF7100, #FFD664); font-size:14px; border: 3px solid #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; display: inline-block; opacity: 1; padding: 5px; text-align: justify; position:relative; width: 100%; max-width: 800px; }

.blueBack { background: #77F; background: -webkit-gradient(linear, left top, left bottom, from(#00F), to(#77F)); background: -moz-linear-gradient(top, #00F, #77F); background: -ms-linear-gradient(#00F, #77F); font-size:14px; border: 3px solid #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; display: inline-block; opacity: 1; padding: 5px; text-align: justify; position:relative; width: 100%; max-width: 800px; }


ul.erreurs { background-color: #f00; border: solid 1px #fff; width:90%; list-style-type: none; vertical-align: middle; font-weight:bold; }
ul.erreurs li { padding: 0;  text-align: left; margin: 0.6em 0; }
/*ul.erreurs li a:before, ul.erreurs li .item:before, ul.erreurs li .separator:before { */

.png { background:none; }
.transBG{ background-image:url('../images/fondtransp.png'); width:97%; height:auto; max-width:680px; margin: 0 10px; padding-top: 5px; }

.pushDown {padding-top: 100px; text-align: left; }

.logoBig { width: 70%; max-width: 350px; height: auto; }
.logoSmall { display: none; width: 100%; max-width: 150px; height: auto; }
.logoBig img, .logoSmall img { background:none; max-width: 100%; height: auto; }

/*------------------------------------*\
             NOT Smartphone/Tablet
\*------------------------------------*/
@media only screen and (min-width: 621px){
body, .body1, .body2, .body3 { margin-left: 20px;margin-top: 20px;}
.body1 {background-color: #777; background-image:none; color:#000;}
.body2 {background-color: #FFF; color:#000;}

/***************** Popup ******************/
/*.popup1, .popup2, .popup3 { min-width:460px; }*/
.comment { min-height:240px; }
.image-container img{ max-width:80% !important; height:auto; display:block; }

/*.varSize { font-size: 11px; padding: .25em 1em .275em; }*/

}
/*------------------------------------*\
                Smartphone/Tablet
\*------------------------------------*/
@media only screen and (min-width : 320px) and (max-width : 620px){

body, .body1, .body2 {  margin-left: 0px; margin-top: 5px;}
.body3 {  margin-left: 0px; margin-top: 5px;}
/*img{ max-width:100%; height:auto; }*/
.image-container img{ max-width:50% !important; height:auto; display:block; }
	
a.lnk1, a.lnk1:visited, a.lnk1:hover, a.lnk1:focus, a.lnk1:active {font-size:14px;}
.deadlink {font-size:14px;}

.notesm {font-size: 10px;font-weight: bold;color: #00F;background:#FF9; }

.TableSmall { margin-left: 0; }
.TableSmall img{ width:100%; min-width: 30px; max-width:40px; }

.varSize  { font-size: 12px; padding: .4em 1.5em .42em; }
.comment { min-height:120px; }

.pushDown {padding: 5px; text-align: center; }

#TextApprPr { height:120px; } /*280px; height:360px;}*/
#TextApprSt { height: 120px; padding: 5px; }

}
/*------------------------------------*\
                Smartphone only
\*------------------------------------*/
@media only screen and (max-width: 480px){
	
	.logoBig{ display: none; }
	.logoSmall{ display: block; }
	
	.TableSmall { margin-left: 0; }
	.TableSmall img{ width:100%; min-width: 25px; max-width:40px; }
	
	.popup1, .popup2, .popup3 { margin: 0; width: 90%; max-width: 460px; top: 80px;}
	
	.pushDown {padding: 5px; text-align: center; }
	
	.transBG{ background-image:url(../images/fondtransp.png); width:100%; height:auto; margin: 0; padding-top: 5px; }
}