html, body {
height: 100%;
/*
min-width: 1080px;
width: 100%;
*/
width:fit-content;
min-width: 100vw;
}
/*
body { padding-top: 40px; }
*/
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
/*
width: 100%;
min-width: 1080px;
*/
width: 100%;
position: fixed;
z-index: 10;
margin-bottom: 0;
border-radius: 0;
transition: top 0.3s;
}
/*
Pour ajouter avec le javascript pour faire une barre qui se cache d'elle meme en scroll down voir dant top.php
#navbar a {
padding: 15px;
text-decoration: none;
display: block;
}
Code enlever de la fonction car je n'aimait pas le rendu
*/
/*float: left;*/
/*color: #f2f2f2;*/
/*text-align: center;*/
/*font-size: 17px;*/
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
/*.row.content {height: 1000px}*/
.row.content {
height: 100%;
width: 100%;
display: flex;
padding-top: 52px;
}
/*height: 100vh*/
/*.row.content {height: 100%}*/
/* Set gray background color and 100% height */
.sidenav {
/*height: 100%;*/
padding-top: 20px;
background-color: #f1f1f1;
/*height: auto;
height: 100%;*/
}
/* Set black background color, white text and some padding */
footer {
/*
min-width: 1080px;*/
/*min-width: 100vw;*/
background-color: #555;
color: white;
padding: 15px;
min-width: 105vw;
/*
width: 100%;
position: relative;
position: fixed;*/
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
/*width: 100%;
padding: 15px;
*/
padding: 15px;
/*min-width: 100vw;*/
}
/*
.navbar {
width: 100%;
min-width: 100%;
}
html, body {
height: 100%;
width: 100%;
min-width: 100%;
}
footer {
width: 100%;
min-width: 100%;
}
*/
.row.content {height:auto; display: block;}
}
/* Changement de la navbar d'état entre le 767 et le 950' */
@media (max-width: 1020px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
/* Début des Attribues du bouton Vert */
.styledG {
border: 0;
line-height: 2.5;
padding: 0 20px;
/* font-size: 2rem; */
font-size: 16px;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
/* Couleur bouton original*/
background-color: rgba(0, 128, 0, 1);
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 30%,
rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
inset -2px -2px 3px rgba(0, 0, 0, .6);
}
/* Couleur bouton lorsqu'on passe dessus */
.styledG:hover {
background-color: rgba(141, 182, 0, 1);
}
.styledG:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
inset 2px 2px 3px rgba(0, 0, 0, .6);
}
/* Fin des Attribues du bouton Vert */
/* Début des Attribues du bouton Rouge */
.styledR {
border: 0;
line-height: 2.5;
padding: 0 20px;
/* font-size: 2rem; */
font-size: 16px;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
/* Couleur bouton original*/
background-color: rgba(204, 0, 0, 1);
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 30%,
rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
inset -2px -2px 3px rgba(0, 0, 0, .6);
}
/* Couleur bouton lorsqu'on passe dessus */
.styledR:hover {
background-color: rgba(255, 0, 34, 1);
}
.styledR:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
inset 2px 2px 3px rgba(0, 0, 0, .6);
}
/* Fin des Attribues du bouton rouge */
/*pour CSS pour le sub-menue*/
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
/*Fin CSS pour le sub-menue*/
/*CSS pour les image qui s'enligne'*/
img {
vertical-align:middle;
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
/*CSS pour le pop up bouton*/
/*
Source
http://web-pluss.org/node/9?name=ttest&email=fdsaa#
display: none;
*/
.form-popup {
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -250px;
/*
bottom: 0;
right: 14px;
*/
}
.form-container {
width: 500px;
height: 100%;
padding-bottom: 100px;
padding-top: 0px;
border: 2.5px solid black;
line-height: 2.5;
padding: 10px;
border-radius: 10px;
background-color: lightgray;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 30%,
rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.backdrop {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.2);
display: none;
}
.modal {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.2);
display: none;
}
.radioM{
/*background-color:blue;*/
vertical-align:middle;
height: 25px;
}
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
@media (max-width:1205px){.w3-auto{max-width:95%}}
@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-btn,.w3-button{border:2.5px solid black; display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
padding-top: 0px;
/*padding-bottom: 0px;*/
height: 50px;
width: 50px;
/* Couleur bouton original*/
background-color: rgba(204, 0, 0, 1);
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 30%,
rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
inset -2px -2px 3px rgba(0, 0, 0, .6);
/*text-align:center;*/
cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) }
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-bar .w3-button{white-space:normal}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}
.w3-button:hover{
color:#000!important;
background-color: rgba(255, 0, 34, 1);
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 30%,
rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
inset -2px -2px 3px rgba(0, 0, 0, .6);
border: 2.5px solid black;
border-radius: 10px;}
.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
/*Fin du CSS pour le pop up bouton*/
/*
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
*/
/*
Ajout pour le CSS du tableau des tarifs!
CSS-Tricks Example - Feature Table
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
/*
Monté en haut de la page
*/
/*
body { font: 13px "Lucida Grande", Helvetica, Arial, sans-serif; background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); }
*/
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#page-wrap { margin: 80px auto; width: 600px; padding: 10px; background: white; }
#feature-table { width: 100%; margin: 0 auto; border-collapse: collapse;}
#feature-table th { height: 120px; padding-bottom: 14px !important; vertical-align: bottom; }
/*Si je veux mettre des images dans mon tableau de tarif
#header-basic { background: url(../frame/images/autodidacte.png) no-repeat; }
#header-plus { background: url(../frame/images/header-35.png) no-repeat; }
#header-premium { background: url(../frame/images/header-99.png) no-repeat; }
#header-pro { background: url(../frame/images/header-150.png) no-repeat; }
*/
#feature-table th span { position: absolute; top: -9999px; left: -9999px; }
#feature-table td,
#feature-table th { width: 150px; padding: 8px 5px; text-align: center; border-left: 1px solid white; border-right: 1px solid white; }
#feature-table .final-row td { padding: 24px 5px; }
.basic { background-color: #d5e4bc; background-color: hsla(85, 30%, 80%, 1); }
.plus { background-color: #c1dcb7; background-color: hsla(110, 30%, 80%, 1); }
.premium { background-color: #bad6c8; background-color: hsla(150, 30%, 80%, 1); }
.pro { background-color: #bbd3dc; background-color: hsla(190, 30%, 80%, 1); }
.odd .table-col-1 { background-color: #edf3e2; background-color: hsla(85, 30%, 94%, 1); }
.odd .table-col-2 { background-color: #edf3e2; background-color: hsla(110, 30%, 94%, 1); }
.odd .table-col-3 { background-color: #edf3e2; background-color: hsla(150, 30%, 94%, 1); }
.odd .table-col-4 { background-color: #e2ecf0; background-color: hsla(190, 30%, 94%, 1); }
/*
Pour mettre la colone en surbrillace
*/
/*
.leftOfFeatured { background-image: url(../frame/images/shadow-left.png); background-repeat: repeat-y; background-position: right center; }
.rightOfFeatured { background-image: url(../frame/images/shadow-right.png); background-repeat: repeat-y; background-position: left center; }
*/
/* From http://css-tricks.com/examples/ButtonMaker/ */
.button {
border-top: 1px solid #a695b3;
background: #64548f;
background: -webkit-gradient(linear, left top, left bottom, from(#836c94), to(#64548f));
background: -moz-linear-gradient(top, #836c94, #64548f);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #755a99;
background: #755a99;
color: #ffffff;
}
.button:active {
border-top-color: #4f3463;
background: #4f3463;
position: relative;
top: 1px;
}