/*
 * Script: style.css
 * Author: Charles Lauzon
 * Date:   30 Mars 2015
 */
 
/* Reset CSS - Default Value */
*{ margin:0; padding:0 }
html, body, div, form, fieldset, ul, ol, table, p, input, select{ font:normal normal normal 100%/100% Arial, Times, serif; margin:0; padding:0; /*color:#fff*/ }
html, body, div{ height:100% }
img{ border:0 }
a{ text-decoration:none; cursor:pointer }
body{ width:100% }
h1{ font-size:32px }
h1, h2, h3{ line-height:120% }
td{ padding:10px }

@font-face{
	font-family: 'Droid Sans';
	src:url('fonts/droidsans-webfont.eot');
	src:url('fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/droidsans-webfont.woff') format('woff'),
		url('fonts/droidsans-webfont.ttf') format('truetype'),
		url('fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
	font-weight:normal;
	font-style:normal;
}
#page{ height:100%; background:#000 }
/*#header{ border-top:0 }
#body{ margin: 0 auto -34px }
#body-inner{ padding-bottom:72px }
#footer{ height:30px; border:0; border-top:2px solid #7fb1e0 }
#footer-inner{ height:100% }*/


/*body, form, fieldset, ul, ol, table, p, input, select{ margin:0; padding:0 }
body{ width:100%; height:650px; font:normal normal normal 16px/120% Arial, Helvetica, sans-serif; margin:0 auto }
/*enlever: div,*/

/* NEW CSS DESIGN for IE6 Fixed Header and Footer: http://www.pmob.co.uk/temp/fixedlayoutexample5.htm */
/* Header */
header{ position:absolute; top:0px; left:0px; width:100%; height:98px; background:#29649c; border-bottom:2px solid #7fb1e0; z-index:999 }
/*#header{ position:absolute; top:0px; left:0px; width:100%; height:111px; background:#29649c; border-bottom:2px solid #7fb1e0; z-index:999 }*/
#header-inner{ width:1024px; height:100%; margin:0 auto }

/* Body */
section{ min-height:100%; height:auto !important; height:100%; margin:0 auto -32px }
#body{ padding-top:120px; padding-bottom:100px; overflow:hidden }
/*#body{ width:100%; min-height:100%; height:auto !important; height:100%; margin:0 auto -32px }*/
#body-inner{ width:1024px; margin:0 auto; padding-top:154px; overflow:hidden } /* +20px a padding-top pour avoir une marge de 20 en haut */
#err{ float:left; width:100%; height:25px; font-size:16px; text-align:center; padding-top:10px }
#err span{ color:#f00; font-weight:bold; text-align:center; cursor:default }
#imgE{ width:15px; height:15px; background:url(images/error.png);}
#fSpacer{ float:left; width:100%; height:30px }
/* Array Data for PHP/Javascript System Message/Error */
#dData{ position:absolute; top:100px; left:0; /*top:82px;*/ width:96%; height:auto; padding:25px 2%; text-align:center; color:#fff; font-size:150%; font-weight:bold; /*white-space:pre;*/ cursor:default; z-index:6; display:none }
#dData p{ margin:0 10px }
#dData.anim_hide{ -moz-animation:anim_hide 5s ease-in 5s forwards; -webkit-animation:anim_hide 5s ease-in 5s forwards; -o-animation:anim_hide 5s ease-in 5s forwards; animation:anim_hide 5s ease-in 5s forwards; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; display:block }
.bgGreen{ background:rgba(120,188,232,0.9) }
.bgRed{ background:rgba(255,0,0,0.9) }
@keyframes anim_hide{ to{ top:-1000px } }
@-webkit-keyframes anim_hide{ to{ top:-1000px } }

/* Footer */
footer{ position:relative; width:100%; height:30px; background:#29649c; border-top:2px solid #7fb1e0; z-index:999 }
#footer{ position:relative }
/*#footer{ position:relative; width:100%; height:30px; color:#fff; background:#29649c; z-index:999 }
#footer-inner{ position:relative; width:1024px; height:30px; margin:0 auto; overflow:visible }*/
#sitemap{ float:left; line-height:30px }
#sitemap a{ color:#fff; text-decoration:none }
#sitemap a:hover{ color:#eab07c }
#copyright{ position:absolute; top:0; right:0; font-size:12px; line-height:30px; font-family:'Droid Sans'; color:#fff; cursor:default }
#initial{ position:absolute; top:-38px; right:20px; font-size:82px; color:#7fb1e0; letter-spacing:-5px; cursor:default }

.inner{ /*position:relative;*/ width:1024px; margin:0 auto } /* si je met position:relative le mouse over des items marche plus */

#logo a{ text-decoration:none }

/* X MAPS */
.t{ float:left; position:absolute; width:32px; height:32px; border:0; }

/* Formulaire */
.formulaire{ float:left; width:100%; height:100%; text-align:left }
.row, .rowC{ width:100%; height:16px; text-align:left; line-height:16px; }
.rowS{ width:100%; /*height:24px;*/ text-align:left }
.row{ width:100%; /*height:24px;*/ text-align:left }
.row30{ width:100%; height:30px; text-align:left }
.row5{ width:100%; height:120px; text-align:left }
.row6{ width:100%; height:144px; text-align:left }
.rowC{ text-align:center }
.row10px{ width:100%; height:10px; line-height:10px; overflow:hidden }
/* Label */
.lbl_40, .lbl_50, .lbl_60, .lbl_70, .lbl_80, .lbl_100{ float:left; /*height:24px;*/ color:#09f; /*line-height:24px;*/ text-align:left; margin-left:2px; }
.lbl_40{ width:40px }
.lbl_50{ width:50px }
.lbl_60{ width:60px }
.lbl_70{ width:70px }
.lbl_80{ width:80px }
.lbl_100{ width:100px }
.lbl_error{ float:left; font:normal normal 10px/100% Arial, Helvetica, sans-serif; color:#f00; padding:8px 0px 0px 3px }
.lbl_error b{ visibility:hidden }
/* Field */
/* Text */
.fld_30, .fld_50, .fld_70, .fld_250, .fld_250b{ float:left; text-align:left }
.fld_30 input, .fld_50 input, .fld_70 input, .fld_130 input, .fld_150 input{ height:24px; background:#000; color:#09f; border:0; padding-left:4px }
.fld_30 input{ width:30px }
.fld_50 input{ width:50px }
.fld_70 input{ width:70px }
.fld_130 input{ width:130px }
.fld_150 input{ width:150px }
.fld_250b input{ width:246px; height:18px; border:1px solid #000; font-size:13px; line-height:18px; padding-left:4px }
/* TextArea */
.fld_250 textarea{ float:left; text-align:left; width:246px; height:130px; font:normal italic 12px/120% Arial, Helvetica, sans-serif; border:1px solid #000; padding:0 0 0 4px; margin:0 }
/* Button */
#btnSoumettre{ width:120px; height:30px; background:url(./images/boutton/btnSoumettre.png); background-position:top left }
#btnSoumettre:hover{ background-position:bottom left }

#btnSNM, #btnSaNM{ color:#09f; border:2px solid #09f; width:210px; height:25px; font-weight:bold; padding:0; margin:2px; cursor:pointer }

/* Line = un DIV qui a les fields: span & text/combobox.. */
.line{ position:relative; height:auto; margin-bottom:5px; overflow:hidden }
.line:last-child{ margin:0 }
.line span{ display:inline-block; width:39% }
.line input[type=text], .line select, .line input[type=button], .line input[type=password], .line input[type=date], .line textarea{ width:60%; height:40px; border:2px solid #333; border-radius:5px; padding-left:5px; box-sizing:border-box; outline:none }
.line select{ padding-left:2px }
.line input[type=button]{ padding-left:0 }
.line textarea{ padding:5px }
.borderRed{ border:2px solid #f00 !important }
.center{ text-align:center }
.lineFull{ position:relative; height:auto; margin-bottom:5px; overflow:hidden }
.lineFull:last-child{ margin:0 }
.lineFull input[type=text], .lineFull select, .lineFull input[type=button], .lineFull input[type=password], .lineFull input[type=date], .lineFull input[type=time], .lineFull textarea{ width:100%; height:40px; border:2px solid #333; border-radius:5px; padding-left:5px; box-sizing:border-box; outline:none }
.lineFull select{ padding-left:2px }
.lineFull input[type=button]{ padding-left:0 }
.lineFull input[type=date], .lineFull input[type=time]{ font-size:16px }
.lineFull textarea{ padding:5px }


/* Truc que jai ajouter pour obtenir le "jquery.mobile-1.4.2.min.css" correctement comme je veux */
.ui-loader-default{ background:#fff !important; filter:Alpha(Opacity=100) !important; opacity:100 !important}

/* INVENTARIES */
.i{ float:left; position:relative; width:32px; height:32px; border:2px solid #09f; margin:2px }
.i_amout{ position:absolute; width:100%; height:auto; top:22px; font-size:10px; line-height:10px; text-align:right; }
.sItemP{ cursor:pointer }
#dItemP{ position:absolute; display:none; width:auto; height:auto; text-align:center; background:rgba(50,50,50,0.9); padding:5px }
#dItemA{ position:absolute; display:none; width:auto; height:auto; text-align:center; background:rgba(50,50,50,0.9); padding:5px; border:2px solid #09f; }
#sIA{ position:absolute; display:none; width:auto; height:auto; text-align:center; background:rgba(50,50,50,0.9); padding:5px; border:2px solid #09f; } 

/* Admin Login Form */
#fAdminLogin{ width:300px; margin:60px auto 30px; padding:10px; position:relative; border-radius:5px; background:#333 }
#fAdminLogin h2{ padding:10px 0 20px 0; text-align:center }
#fAdminLogin div{ position:relative }
#fAdminLogin input{ width:86%; height:20px; border:0; border-radius:5px; padding:10px 2% 10px 12%; margin-bottom:10px }
#fAdminLogin input[type=button]{ width:100%; height:40px; padding:10px 0; cursor:pointer; margin:0; color:#333; font-weight:bold; transition:all 0.3s ease-out; }
#fAdminLogin input[type=text]:hover ~ i, #fAdminLogin input[type=password]:hover ~ i{ color:#333 }
#fAdminLogin input[type=text]:focus ~ i, #fAdminLogin input[type=password]:focus ~ i, #fAdminLogin input[type=button]:hover{ color:#09f }
#fAdminLogin input[type=text]:focus, #fAdminLogin input[type=password]:focus, #fAdminLogin button[type=submit]:focus{ outline:none }
/* Font Awesome - Icons */
[class^="fa-"], [class*=" fa-"]{ color:#666; text-align:center; line-height:39px; transition:all 0.3s ease-out; pointer-events:none }
[class^="fa-"]:before, [class*=" fa-"]:before{ font-family:FontAwesome; font-weight:normal; font-style:normal; display:inline-block; text-decoration:inherit; position:absolute; left:0px; top:0px; height:39px; width:30px; border-right:1px solid rgba(0, 0, 0, 0.1); /*box-shadow:1px 0 0 rgba(255, 255, 255, 0.7);*/ pointer-events:none }

/* Admin Page */
#dAdminPage{ display:none }
#dAdminPage div{ margin-bottom:10px }
#dAdminPage label{ font-weight:bold }
#dAdminPage input, #dAdminPage textarea{ width:98%; height:20px; border:0; border-radius:5px; padding:10px 1% }
#dAdminPage textarea{ height:500px }
#dAdminPage i{ font-size:12px; line-height:12px }
#dAdminPage input[type=button]{ width:100%; height:40px; padding:10px 0; cursor:pointer; margin:0; color:#333; font-weight:bold; transition:all 0.3s ease-out; margin-bottom:10px; display:none }
#dAdminPage input[type=button]:hover{ color:#09f }













/* Menu pour Mobile et Tablet */
#cboMenu{ width:98%; height:44px; margin:0 1%; border-radius:90px; background-color:#29649c; border:2px solid #7fb1e0; position:relative; float:left; }
#cboMenu select{ width:60%; height:44px; border-radius:90px 0 0 90px; background-color:#29649c; border:0; border-right:1px solid #7fb1e0; margin-left:20px; }


/* Media Query - Dynamic Design POWER!! */
/* Screen Resolution */
/* 1440 x 1280 x 960 x 760 x 720 x 480 */
/*                      >           >  */
/* 3 Modes Design
	1. Desktop = @media screen{ }
	2. Tablet  = @media screen and (max-width:760px){ }
	3. Mobile  = @media screen and (max-width:480px){ }
 */
@media screen{ 
/*.inner{ background-color:#0ff } /*Rouge*/
#menu{ display:block } #cboMenu{ display:none }
}
@media screen and (max-width:1440px){
/*.inner{ background-color:#f00 } /*Rouge*/
}
@media screen and (max-width:1280px){
.inner{ width:960px }
nav > ul > li:first-child{ width:35px; font-size:0 }
nav > ul > li:first-child > a:after{ font-family:FontAwesome; content:"\f015"; font-size:22px; line-height:40px; }
/*.inner{ background-color:#0f0; width:960px } /*Vert*/
}
@media screen and (max-width:960px){
.inner{ width:100% }
/*.inner{ background-color:#00f; width:100% } /*Bleu*/
#menu{ display:none } #cboMenu{ display:block }
}
@media screen and (max-width:760px){ /* Tablet */
/*.inner{ background-color:#ff0 } /*Jaune*/
}
@media screen and (max-width:480px){ /* Mobile */
/*.inner{ background-color:#f0f } /*Mauve*/

#logo a span{ font-size:22px }
}