/* --  Boutons en CSS3 
Réalisation © imaginative
http:// www.web-imaginative.com

-- */
/*
body {font-size: 100%; font-family: Arial,sans-serif;}
h1{font-family: century gothic,arial,sans-serif; color:#333; text-align:center; padding:0 0 20px 0; margin-top:40px; text-shadow: 0px 1px 0px rgba( 0, 0, 0, 0.4); }
a {text-decoration: none;}
h2 {font-size:14px; color:#555; border-bottom:1px solid #CCC; padding-bottom:6px; margin-bottom:20px; width:80%}
.contenu {margin: 0; padding: 0; width:900px; margin:0 auto;}
.section{width:300px; float:left;}
.section.small{width:260px;}
.section.large{width:340px;}
.content-empty{margin-bottom:30px;float:left; width:100%} 
.bouton.empty{height:22px; width:159px; float:left; margin:0 20px 20px 0; clear:none;}
*/
/* --  Boutons -- */

.bouton {
	width:auto; 
	padding:4px 0; 
	text-align:center; 
	display: inline-block; 
	margin:0 15px 15px 0; 
	font-size: 1.6em; 
	border-radius:7px; 
	box-shadow: 0 0 1px rgba( 0, 0, 0, 0.2), 0 -1px 0 rgba( 255, 255, 255, 0.1); 
	font-size: 1.3em; 
	width:120px; 
	color:#333; 
	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
	}	
	
.bouton.small{font-size: 0.8em; width:100px}
.bouton.medium{font-size: 1.1em; width:120px}	
.bouton.large{font-size: 1.1em; width:200px}
.bouton.extralarge{font-size: 1.1em; width:220px}


/* ************************** Couleurs des boutons / Hover et Active classes *************************** */

/* -- Bouton noir -- */	
.bouton.noir, .bouton.noir:active { 
	background: #444; 
	background: linear-gradient( #555, #2C2C2C);
	background: -webkit-linear-gradient( #555, #2C2C2C); 
	background: -moz-linear-gradient( #555, #2C2C2C); 
	background: -ms-linear-gradient( #555, #2C2C2C); 
	background: -o-linear-gradient( #555, #2C2C2C); 
	background: linear-gradient( #555, #2C2C2C);
	}
.bouton.noir:hover {
	background: #555;
	background: -webkit-linear-gradient( #777, #333);
	background: -moz-linear-gradient( #777, #333);
	background: -ms-linear-gradient( #777, #333);
	background: -o-linear-gradient( #777, #333);
	background: linear-gradient( #777, #333);	
	}	
.bouton.noir:active{box-shadow: 1px 1px 10px #000 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton gris -- */	
.bouton.gris {
	background: #C8C8C8;
	background: -webkit-linear-gradient( #C8C8C8, #A0A0A0);
	background: -moz-linear-gradient( #C8C8C8, #A0A0A0);
	background: -ms-linear-gradient( #C8C8C8, #A0A0A0);
	background: -o-linear-gradient( #C8C8C8, #A0A0A0);
	background: linear-gradient( #C8C8C8, #A0A0A0);
	}	
.bouton.gris:hover {
	background: #D8D8D8;
	background: -webkit-linear-gradient( #D8D8D8, #B0B0B0); 
	background: -moz-linear-gradient( #D8D8D8, #B0B0B0); 
	background: -ms-linear-gradient( #D8D8D8, #B0B0B0); 
	background: -o-linear-gradient( #D8D8D8, #B0B0B0); 
	background: linear-gradient( #D8D8D8, #B0B0B0);
	}
.bouton.gris:active{box-shadow: 1px 1px 10px #999 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton blanc -- */	
.bouton.blanc, .bouton.blanc:active {
	background: #F8F8F8;
	background: -webkit-linear-gradient( #F8F8F8, #D7D7D7); 
	background: -moz-linear-gradient( #F8F8F8, #D7D7D7); 
	background: -ms-linear-gradient( #F8F8F8, #D7D7D7); 
	background: -o-linear-gradient( #F8F8F8, #D7D7D7); 
	background: linear-gradient( #F8F8F8, #D7D7D7);
	text-shadow: 0px 2px 0px rgba( 255, 255, 255, 0.8);
	}
.bouton.blanc:hover{ 
	background: #F5F5F5;
	background: -webkit-linear-gradient( #FFF, #CCC);
	background: -moz-linear-gradient( #FFF, #CCC);
	background: -ms-linear-gradient( #FFF, #CCC);
	background: -o-linear-gradient( #FFF, #CCC);
	background: linear-gradient( #FFF, #CCC);
	}
.bouton.blanc:active {box-shadow: 1px 1px 10px #CCC inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton bleu -- */
.bouton.bleu, .bouton.bleu:active{
	background: #3C98CF;
	background: -webkit-linear-gradient( #3C98CF, #2D74A0); 
	background: -moz-linear-gradient( #3C98CF, #2D74A0); 
	background: -ms-linear-gradient( #3C98CF, #2D74A0); 
	background: -o-linear-gradient( #3C98CF, #2D74A0); 
	background: linear-gradient( #3C98CF, #2D74A0);
	}
.bouton.bleu:hover {
	background: #3CA1D3;
	background: -webkit-linear-gradient( #3CA1D3, #3386AF);
	background: -moz-linear-gradient( #3CA1D3, #3386AF);
	background: -ms-linear-gradient( #3CA1D3, #3386AF);
	background: -o-linear-gradient( #3CA1D3, #3386AF);
	background: linear-gradient( #3CA1D3, #3386AF);
	}
.bouton.bleu:active {box-shadow: 1px 1px 10px #1E516B inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton rouge -- */	
.bouton.rouge, .bouton.rouge:active{
	background: #F4523D;
	background: -webkit-linear-gradient( #F4523D, #B43300);
	background: -moz-linear-gradient( #F4523D, #B43300);
	background: -ms-linear-gradient( #F4523D, #B43300);
	background: -o-linear-gradient( #F4523D, #B43300);
	background: linear-gradient( #F4523D, #B43300);
	}
.bouton.rouge:hover {
	background: #FF6A4F;
	background: -webkit-linear-gradient( #FF6A4F, #D33B11); 
	background: -moz-linear-gradient( #FF6A4F, #D33B11); 
	background: -ms-linear-gradient( #FF6A4F, #D33B11); 
	background: -o-linear-gradient( #FF6A4F, #D33B11); 
	background: linear-gradient( #FF6A4F, #D33B11);
	}
.bouton.rouge:active {box-shadow: 1px 1px 10px #A83318 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton rouge foncé -- */	
.bouton.rouge-fonce {
	background: #C53727;
	background: -webkit-linear-gradient( #C53727, #A82B22); 
	background: -moz-linear-gradient( #C53727, #A82B22); 
	background: -ms-linear-gradient( #C53727, #A82B22); 
	background: -o-linear-gradient( #C53727, #A82B22); 
	background: linear-gradient( #C53727, #A82B22);
	}
.bouton.rouge-fonce:hover{
	background: #D13A2F;
	background: -webkit-linear-gradient( #D13A2F, #BC2E2A);
	background: -moz-linear-gradient( #D13A2F, #BC2E2A);
	background: -ms-linear-gradient( #D13A2F, #BC2E2A);
	background: -o-linear-gradient( #D13A2F, #BC2E2A);
	background: linear-gradient( #D13A2F, #BC2E2A);
	}	
.bouton.rouge-fonce:active{box-shadow: 1px 1px 10px #8E2825 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}
	
/* -- Bouton orange -- */	
.bouton.orange, .bouton.orange:active {
	background: #F79E46;
	background: -webkit-linear-gradient( #F79E46, #C96928);
	background: -moz-linear-gradient( #FF6A4F, #D33B11); 
	background: -ms-linear-gradient( #FF6A4F, #D33B11); 
	background: -o-linear-gradient( #FF6A4F, #D33B11); 
	background: linear-gradient( #F28F22, #BD5D19);
	}
.bouton.orange:hover{
	background: #F79E46;
	background: -webkit-linear-gradient( #F79E46, #C96928);
	background: -moz-linear-gradient( #F79E46, #C96928);
	background: -ms-linear-gradient( #F79E46, #C96928);
	background: -o-linear-gradient( #F79E46, #C96928);
	background: linear-gradient( #F79E46, #C96928);
	}
.bouton.orange:active{box-shadow: 1px 1px 10px #D33B11 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton vert -- */	
.bouton.vert {
	background: #91BD09;
	background: -webkit-linear-gradient( #91BD09, #4E9939); 
	background: -moz-linear-gradient( #91BD09, #4E9939); 
	background: -ms-linear-gradient( #91BD09, #4E9939); 
	background: -o-linear-gradient( #91BD09, #4E9939); 
	background: linear-gradient( #91BD09, #4E9939);
	}
.bouton.vert:hover{
	background: #A3C416;
	background: -webkit-linear-gradient( #A3C416, #55A53C);
	background: -moz-linear-gradient( #A3C416, #55A53C);
	background: -ms-linear-gradient( #A3C416, #55A53C);
	background: -o-linear-gradient( #A3C416, #55A53C);
	background: linear-gradient( #A3C416, #55A53C);
	}	
.bouton.vert:active{box-shadow: 1px 1px 10px #285419 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton jaune -- */	
.bouton.jaune {
	background: #FFD217;
	background: -webkit-linear-gradient( #FFD217, #FFB515); 
	background: -moz-linear-gradient( #FFD217, #FFB515); 
	background: -ms-linear-gradient( #FFD217, #FFB515); 
	background: -o-linear-gradient( #FFD217, #FFB515); 
	background: linear-gradient( #FFD217, #FFB515);
	}
.bouton.jaune:hover{
	background: #FFDE1A;
	background: -webkit-linear-gradient( #FFDE1A, #FFC217);
	background: -moz-linear-gradient( #FFDE1A, #FFC217);
	background: -ms-linear-gradient( #FFDE1A, #FFC217);
	background: -o-linear-gradient( #FFDE1A, #FFC217);
	background: linear-gradient( #FFDE1A, #FFC217);
	}	
.bouton.jaune:active{box-shadow: 1px 1px 10px #E5B738 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton violet -- */	
.bouton.violet {
	background: #D34F8E;
	background: -webkit-linear-gradient( #D34F8E, #A9014B); 
	background: -moz-linear-gradient( #D34F8E, #A9014B); 
	background: -ms-linear-gradient( #D34F8E, #A9014B); 
	background: -o-linear-gradient( #D34F8E, #A9014B); 
	background: linear-gradient( #D34F8E, #A9014B);
	}
.bouton.violet:hover{
	background: #E256A0;
	background: -webkit-linear-gradient( #E256A0, #BC1766);
	background: -moz-linear-gradient( #E256A0, #BC1766);
	background: -ms-linear-gradient( #E256A0, #BC1766);
	background: -o-linear-gradient( #E256A0, #BC1766);
	background: linear-gradient( #E256A0, #BC1766);
	}	
.bouton.violet:active{box-shadow: 1px 1px 10px #7A294F inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* ************************** Couleurs des polices *************************** */
.bouton.noir, .bouton.noir:active {color:#000;}
.bouton.gris {color:#000000; text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.4);}
.bouton.bouton.gris:hover,  .bouton.gris:active {color:#000000;}
.bouton.blanc {color:#BBB; text-shadow: 0px 1px 0px rgba( 255, 255, 255, 1);}
.bouton.bouton.blanc:hover,  .bouton.blanc:active {color:#AAA;}
.bouton.bleu {color:#0B4968; text-shadow: 0px 1px 0px rgba( 200, 200, 200, 0.4);}
.bouton.bouton.bleu:hover,  .bouton.bleu:active {color:#0B4972;}
.bouton.rouge {color:#8E1015; text-shadow: 0px 1px 0px rgba( 200, 200, 200, 0.4);}
.bouton.rouge:hover,  .bouton.rouge:active {color:#8E1000;}
.bouton.rouge-fonce {color:#77140E; text-shadow: 0px 1px 0px rgba( 226, 160, 160, 0.4);}
.bouton.rouge-fonce:hover,  .bouton.rouge-fonce:active {color:#8E1010;}
.bouton.orange {color:#FFFFFF; text-shadow: 0px 1px 0px rgba( 226, 200, 200, 0.4);}
.bouton.orange:hover,  .bouton.orange:active {color:#FFFFFF;}
.bouton.vert {color:#3D722E; text-shadow: 0px 1px 0px rgba( 226, 200, 200, 0.4);}
.bouton.vert:hover,  .bouton.vert:active {color:#3A6D2C;}
.bouton.jaune {color:#AF772E; text-shadow: 0px 1px 0px rgba( 250, 250, 250, 0.4);}
.bouton.jaune:hover,  .bouton.jaune:active {color:#966729;}
.bouton.violet {color:#820845; text-shadow: 0px 1px 0px rgba( 200, 160, 160, 0.4);}
.bouton.violet:hover,  .bouton.violet:active {color:#720845;}




.button {
    margin: 10px;
    text-decoration: none;
    font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
    display: inline-block;
    text-align: center;
    color: #fff;    
    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);    
    box-shadow: 0 0 .05em rgba(0,0,0,0.4);   
}

.button.small{font-size: 0.8em; width:100px}
.button.medium{font-size: 1.1em; width:120px}	
.button.large{font-size: 1.1em; width:180px}
.button.extralarge{font-size: 1.1em; width:220px}

.button, 
.button span {
    -moz-border-radius: .3em;
    border-radius: .3em;
}

.button span {
    border-top: 1px solid #fff; /* Fallback style */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    padding: 0.5em 2.5em;    
    /* The background pattern */
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
                      linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

    /* Pattern settings */
    background-size: 3px 3px;            
}

.button:hover {
    box-shadow: 0 0 .1em rgba(0,0,0,0.4);
}

.button:active {
    /* When pressed, move it down 1px */
    position: relative;
    top: 1px;
}


.button-vert {
    background: #1e612b;
    background: -webkit-gradient(linear, left top, left bottom, from(#2c9b3f), to(#1e612b) );
    background: -moz-linear-gradient(-90deg, #2c9b3f, #1e612b);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#2c9b3f', endColorstr='#1e612b');
}

.button-vert:hover {
    background: #2c9b3f;
    background: -webkit-gradient(linear, left top, left bottom, from(#1e612b), to(#2c9b3f) );
    background: -moz-linear-gradient(-90deg, #1e612b, #2c9b3f);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#1e612b', endColorstr='#2c9b3f');            
}

.button-vert:active {
    background: #1e612b;
}

.button-rouge {
    background: #aa191e;
    background: -webkit-gradient(linear, left top, left bottom, from(#cd4e52), to(#aa191e) );
    background: -moz-linear-gradient(-90deg, #cd4e52, #aa191e);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#cd4e52', endColorstr='#aa191e');
}

.button-rouge:hover {
    background: #cd4e52;
    background: -webkit-gradient(linear, left top, left bottom, from(#aa191e), to(#cd4e52) );
    background: -moz-linear-gradient(-90deg, #aa191e, #cd4e52);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#aa191e', endColorstr='#cd4e52');            
}

.button-rouge:active {
    background: #aa191e;
}