.wrapper {width: 1100px; margin: 0 auto;}

/* ---- /Page Profil ---- */
.wrapper {background:grey; padding: 20px 55px ;  margin: 30px 0 30px; background:url(images/fond_stripes.png)}
.wrapper h3 {float:left;margin:10px 0;text-transform:uppercase;color:black;font-size:26px;font-weight:normal;}
.form {background:white; padding: 10px 8px ; color:black; overflow:hidden;/*width:100%;*/
-moz-box-shadow: 0px 0px 5px 0px #656565;
-webkit-box-shadow: 0px 0px 5px 0px #656565;
-o-box-shadow: 0px 0px 5px 0px #656565;
box-shadow: 0px 0px 5px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=5);}
.wrapper .donnees {border-bottom: solid 1px #bbb; overflow:hidden; margin:20px 0 20px;}
.wrapper span.titre {float:left;color:#2584c2; margin:10px 0 20px 5px; font:18px "Helvetica";}
.wrapper span {float:right;margin:0 0 20px 50px; padding:1px; height:50px;}
.wrapper span p{width:75px;margin:5px 2px 0 45px; text-align:center;}
.wrapper  span.compte {background: url("images/compte.png") no-repeat 10px 5px;color:#457186;}
.wrapper  span.contact {background: url("images/contact.png") no-repeat 0 5px;color:#4989a8;}
.wrapper  span.resa {background: url("images/resa.png") no-repeat;color:#4989a8;}
#ccm-profile-sidebar a{color:black;}
#ccm-profile-sidebar{color:black;}
.form dl {margin:0; float:left; width: 50%; padding: 10px 0;}
.form dl dt {float:left; width:125px; padding:7px; text-transform:uppercase; font-size: 1.5em;text-align: right;}
.form dl dd {float:left; margin:0;}
.form #input {float:left; margin:0; width: 260px; height: 36px; padding-left: 5px; 
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;}
.form input[type="submit"] {margin:0 20px 20px; padding:6px 12px;float:right; border: 0; background-color:#2873e6; color:white;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
cursor: pointer;
}

.form input[type="button"] {margin:0 20px 20px; padding:6px 12px;float:right; border: 0; background-color:#2873e6; color:white;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
cursor: pointer;
font-family: effra;	}
/* ---- /fin de Page Profil ---- */

/* ---- /Page Connexion ---- */
.form {padding:20px 8px;}
.form .login {overflow:hidden;width:700px;}
.form .login p.titre {float:left;color:#2584c2; margin:10px 0 20px 10px; font:18px "Helvetica";}
.form .login  dl {margin:0; float:left;overflow:hidden;width:670px;}
.form .login  dl dt {float:left; margin-left:20px; width:130px; padding:7px; text-transform:none;}
.form .login  dl dd {float:left; margin:0 20px 20px 0;width:360px;}
.form .login #input {float:left; margin:0; width: 360px; height: 36px; padding-left: 5px; }
.form .login a {float:left; color:#086b9e; font-size:11px; width:650px; text-align:center;} 
.form .login input {margin:0; padding:8px 12px; float:left;}
.form .login2 article {margin:0; padding:10px 12px; float:rigth; font-size: 16px;}
.form .login2 {width:400px; margin:0; padding:0 12px; float:left;}
.form .login2 span.titre {float:left;color:#2584c2; margin:10px 0; font:18px "Helvetica"; height:5px;}
dl.edit_profil span{float:none ;margin:0;}
.form .login2 p{float:left;}
#inscript{
    border-radius: 3px;
    float: left;
    cursor: pointer;
    margin: 10px 100px;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 16px;
    background: #2873e6;
    text-transform: uppercase;
    padding: 9px;
    font-family: effra;
}
.form article {background:#eee; margin:10px 10px; padding:20px 25px; width:430px;float:right;border:1px solid #ddd;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
font-family: effra;}
/* ---- /fin de Page Connexion ---- */

/* --- Styles gestion/reservations des parcours --- */
a{color: inherit;}
.name{color: #000000; text-transform: uppercase; font-weight: bold;}
.choice {color: blue; background-color: #f0f0f0; padding: 10px}
.choice div{color: #000000;}
.choice .course{background-image: url(images/tick.png); background-repeat: no-repeat; margin-right: 20px;}

hr {margin-bottom: 30px; margin-top: 30px;}
.button-group {color: blue; background-color: #f0f0f0; padding: 10px}


.input, .button {margin: 10px 0;}
#hours .ccm-without-border{border:none;text-align:center;margin: 10px 0 20px;}
#reserve .ccm-border{margin-right:10px;border:solid;width:100%;border-width:thin}
#tab .ccm-border{margin-right:10px;width:100%}
#tab {margin: 20px 0;}
#reserve .ccm-cellth{text-align:center;border:solid white;border-width:thin; color: #4b84c4;}
#tab .ccm-cellth{text-align:center;border-bottom:solid}
#tab .ccm-cellth-name{text-align:center;width:70%;border-bottom:solid}
#reserve .ccm-celltd{text-align:center;border:solid;width:50%;height:50%;border-width:thin}
#tab .ccm-celltd{text-align:center;width:30px;height:20px;border-bottom:solid}
#reserve .ccm-frame{margin-left:20px;float:left;width:22%}
#close{text-align:center;width:70px;background-color:red;border-radius:5px;}
#open{text-align:center;width:70px;background-color:green;border-radius:5px;}
.divDialog{display:none;}
/* --- Fin gestion/reservations des parcours --- */

/* ---- /Donnees personnelles ---- */
#profil .wrapper .form dl dd  {color:red; background:blue;}
/* ---- /fin de Donnees personnelles ---- */

/* ---- /Page Resa_heures ---- */
#resa #profil .form .form_titre {background:url(images/fond_stripes.png)}
/* ---- /fin de Page Resa_heures ---- */

/* ---- /Donnees personnelles ---- */
#profil .wrapper .form dl dd  {color:red; background:blue;}
/* ---- /fin de Donnees personnelles ---- */

/* ---- /Page Resa ---- */
#resa #profil .form {padding:20px 8px;}
#resa #profil .form .login {overflow:hidden;width:460px; float:left;}
#resa #profil .form .login p.titre, #resa_heure p.titre {float:left;color:#2584c2; margin:0 0 20px 10px; font:18px "Helvetica";text-transform:uppercase;}
#resa #profil .form .login  dl {margin:0; float:left;overflow:hidden;width:470px;}
#resa #profil .form .login  dl dt {float:left; margin-left:0; width:65px; padding:7px; text-transform:none;}
#resa #profil .form .login  dl dd {float:left; margin:0; width:341px; height:60px}
#resa #profil .form .login a {line-height:60px; color:black;font-size:14px;text-decoration:underline;text-align:left;text-transform:uppercase;}
#resa #profil .form .login .selected {color:green;font-size:13px;}
#resa #profil .form .login  dl select {width:300px;margin-bottom:20px;}
#resa #profil .form .login2 {width:100%; font-size: 14px;}
#resa #profil .form .login2 p{width:100px; float:right;color:white;text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);font-size:16px}
#resa #profil .form .login2 article {margin:10px 10px; padding:20px 25px; width:290px;float:left;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
border:none;}
#resa #profil .form .login2 .compte{background: url("/images/compte_max.png") no-repeat center left 25px #457186; }
#resa #profil .form .login2 .contact  {background: url("/images/compte_max.png") no-repeat center left 25px #4989a8; }
#resa #profil .form .login2 .resa {background: url("/images/compte_max.png") no-repeat center left 25px #62a6c7; }

#resa #profil .form .login .course-action {
    width: 60px;
    height: 60px;
    border-radius: 3px;
    float: left;
    cursor: pointer;
    margin: 3px;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 15px;
    background: #447186;
    text-transform: uppercase;
    padding-top: 15px;
    padding-left: 1px;
}

#resa #profil .form .login .disabled{
   background: url("images/croix.png") no-repeat center #447186; 
}
/* ---- /fin de Page Resa ---- */

/* ---- /Titre rouge Resa ---- */
#resa #profil .form_t .form_titre {background:url(images/fond_stripes.png);height:60px;color:#cd1212;text-shadow:2px 2px 2px rgba(255, 255, 255, 1);border:1px solid #ddd; text-align:center;line-height:55px;font-weight:bold;}
#resa #profil .form_t {background:white; padding: 8px 8px; text-transform:uppercase;
-moz-box-shadow: 0px 0px 5px 0px #656565;
-webkit-box-shadow: 0px 0px 5px 0px #656565;
-o-box-shadow: 0px 0px 5px 0px #656565;
box-shadow: 0px 0px 5px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=5);}
/* ---- /fin de Titre rouge Resa ---- */

/* ---- /Page Resa_heures ---- */
#resa #profil #resa_heure span {float:none;margin:0;}
#resa #profil #resa_heure article {background:white; color:black; text-transform:uppercase; margin-top:20px; height:230px;
-moz-box-shadow: 0px 0px 5px 0px #656565;
-webkit-box-shadow: 0px 0px 5px 0px #656565;
-o-box-shadow: 0px 0px 5px 0px #656565;
box-shadow: 0px 0px 5px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=5);}
#resa #profil #resa_heure .left_hour {width:16%; height:100%;background:#457186;float:left;}
#resa #profil #resa_heure .left_hour p{color:white;text-shadow:2px 2px 4px rgba(0, 0, 0, 0.8);font-size:38px;text-align:center;}
#resa #profil #resa_heure .liste {float:left; width:300px; height:83%; background:#eee; border-radius:4px;margin:20px 30px 20px 30px;padding:10px;text-transform:none;}
#resa_heure p.titre {float:center; margin:10px 0 20px 0;text-transform:none;}
#resa #profil #resa_heure .liste dl{margin:0;width:100%;float:left; color:#555;}
#resa #profil #resa_heure .liste dl dd, dl dt{float:left;}
#resa #profil #resa_heure .liste dl dd{width:25%;}
#resa #profil #resa_heure .liste dl dt{width:60%;padding:2px;text-align:right;}
#resa #profil #resa_heure .depart{float:left;width:400px; height:83%;border-left:1px solid #eee; margin:20px 30px 20px 0; padding-left:40px;text-transform:none;font-size:17px;}
#resa #profil #resa_heure .depart div {margin-bottom: 25px;}
#resa #profil #resa_heure .depart input[type="number"] {width:50px;}
#resa #profil #resa_heure .depart input[type="submit"] {margin:0 20px 20px; padding:6px 12px; border: 0; background-color:#2873e6; color:white;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;}
/* ---- /fin de Page Resa_heures ---- */

/* ---- /Page Resa_liste ---- */
#resa #profil #resa_liste {background:white; color:black; padding:30px 60px; margin-top:20px;
-moz-box-shadow: 0px 0px 5px 0px #656565;
-webkit-box-shadow: 0px 0px 5px 0px #656565;
-o-box-shadow: 0px 0px 5px 0px #656565;
box-shadow: 0px 0px 5px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=5);}
/*--Table--*/
#resa_liste p{ float:left; padding:10px; color:#555;font-size:18px;margin:0;}
#resa_liste table {width:100%; border-radius: 5px;  overflow:hidden; border-spacing: 0; border-right:1px solid #ccc; border-top:1px solid #ccc; border-collapse:0; margin-bottom: 1em;}
#resa_liste tr { border-spacing: 0; position:relative;}
#resa_liste td {  padding:10px; background:#fbfbfb;border-left:1px solid #ccc; border-bottom:1px solid #ccc;}
#resa_liste tbody > tr:nth-child(odd) > td, #resa_liste tbody > tr:nth-child(odd) > th {background:#eee;}
#resa #profil #resa_liste input[type="submit"] {margin:20px 20px 0 0; padding:6px 12px; border: 0; background-color:#2873e6; color:white;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;}
/* ---- /fin de Page Resa_liste ---- */


/* --- Style des competitions --- */
.ccm-table {width:100%; }
.ccm-table tbody { overflow:hidden; border-spacing: 0; background:blue;border-radius:9px}
.ccm-table th {  padding:10px; color:#ffffff;font-size:18px;}
.ccm-table td {  padding:4px; background:#fbfbfb;border:1px solid #ccc; text-align:center; color:#333; font-size:1.2em;}
.ccm-table td img{ width:80px; height:70px;}
.ccm-table td a{  color:#111; font-weight:bold; font-size:1.1em;}
.ccm-table tbody > tr:nth-child(odd) > td, #resa_liste tbody > tr:nth-child(odd) > th {background:#eee;}
.ccm-table input[type="submit"] {margin:20px 20px 0 0; padding:6px 12px; border: 0; background-color:#2873e6; color:white;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;}
/* --- FIN des competitions --- */

/* --- ClearFix --- */
.clearfix:after {content: ""; display: table; clear: both;}

/* ---- Responsive Design ---- */
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    #wrapper{width: 978px; padding: 0 9px;}
    #recherche {margin-left: 176px;}
    #actualites.membres {padding: 15px 10px 0;}
    .membres #actu-left, .membres #actu-right {width: 450px;}
    #contenu .fRight {width: 541px;}
}
/* Landscape phones and down */
@media (max-width: 480px) {
    header { position: relative; }
    #header-top { height: auto; }
    #logo { float: none; }
    #langues { position: absolute; top: 20px; right: 20px; }
    #langues #fr,#langues #en { display: none; }
    #langues select { display: block; }
    #wrapper { width: 460px; padding: 0 10px; }
   /* #recherche, #espace-membre { margin-top: 12px; } */
    #recherche { margin-left: 0; }
    #menu { width: 100%; margin-top:11px;}
    nav { width: 100%; float: none; }
    nav ul { display: none; }
    nav select { display: block; width: 100%; }
    #slides { display: none; }
    
    #ouverture, #parcours { width: 100%; border-radius: 10px; margin: 6px auto; }
    #actualites { font-size: 1.2em; height: auto; background-size: auto 100%; padding-bottom: 39px; }
    #parcours-18 div:first-child { margin: 0 50px 0 55px; }
    #copyright {display: inline-block; float: none;}
    
    ul#mini { float: none; display: inline-block; }
    #prima { display: inline-block; float: none; }
    ul#pages { display: none; }
    #pied-de-page { margin: 50px 0 0px; text-align: center; font-size: 1em; line-height: 1.8; }
    
    #contenu { font-size: 1.4em; }
    #contenu h1 { font-size: 1.4em; }
    #contenu img.fleft { float: none; padding: 0; display: block; margin: 0 auto; }
   /* #contenu img { width:300%;}*/
	#contenu table { font-size:1em;}
	
    #actualites.membres { height: auto; padding: 25px; margin-top: 30px; }
    .membres #actu-right, .membres #actu-left { float: none; }
    .membres #actu-left, .membres #actu-right { width: auto; }
	
	#profil .contact, #profil .compte, #profil .resa {margin: 0 -7px;}
	#profil .form .login  dl dd {width:100%}
	#profil .form .login  dl {width:100%}
	#profil .form .login #input {width:none}
	#profil .form .login2 {width:100%;}
	
	#resa #profil .form .login .course-action {width: 39px;height: 44px;font-size: 9px; line-height: 10px;text-transform: uppercase;padding: 6px;}
	
	#profil .form article {width:100%; margin: 0;}
	#resa #profil .form_t .form_titre {line-height:30px;}
	#resa #profil #resa_heure article {height:430px}
	#resa #profil #resa_heure .left_hour {width:100%; height:12%;}
	#resa #profil #resa_heure .left_hour p{font-size:25px;margin-top:10px;}
	#resa #profil #resa_heure .liste {width:83%; height:35%;}
	#resa #profil #resa_heure .liste dl dt{width:58%;}
	#resa #profil #resa_heure .depart{float:left;width:83%; padding-top:20px; border-top:1px solid #eee; border-left:0; margin:0 30px 20px 30px;font-size:15px;}
	#resa_liste p{ font-size:12px;}
	
	.ccm-layout-table .ccm-layout-col {float:none; min-width:100%}

	#contenu .contact h1 {font-size:1.2eme;margin:0;}
	#contenu .contact h2, #contenu .contact h3 , #contenu .contact table {font-size:0.8em;}
	.contact p {font-size:0.7em;}
	
	.ccm-table td , .ccm-table th {padding:0;font-size:0.9em;}
	.ccm-table td a{font-size:0.9em;}
	
	
}

/* --- Police Amaranth --- */
@font-face {
    font-family: 'Amaranth';
    src: url('fonts/Amaranth-webfont.eot');
    src: url('fonts/Amaranth-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Amaranth-webfont.woff') format('woff'),
         url('fonts/Amaranth-webfont.ttf') format('truetype'),
         url('fonts/Amaranth-webfont.svg#AmaranthRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AmaranthItalic';
    src: url('fonts/Amaranth-Italic-webfont.eot');
    src: url('fonts/Amaranth-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Amaranth-Italic-webfont.woff') format('woff'),
         url('fonts/Amaranth-Italic-webfont.ttf') format('truetype'),
         url('fonts/Amaranth-Italic-webfont.svg#AmaranthItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AmaranthBold';
    src: url('fonts/Amaranth-Bold-webfont.eot');
    src: url('fonts/Amaranth-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Amaranth-Bold-webfont.woff') format('woff'),
         url('fonts/Amaranth-Bold-webfont.ttf') format('truetype'),
         url('fonts/Amaranth-Bold-webfont.svg#AmaranthBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AmaranthBoldItalic';
    src: url('fonts/Amaranth-BoldItalic-webfont.eot');
    src: url('fonts/Amaranth-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Amaranth-BoldItalic-webfont.woff') format('woff'),
         url('fonts/Amaranth-BoldItalic-webfont.ttf') format('truetype'),
         url('fonts/Amaranth-BoldItalic-webfont.svg#AmaranthBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-appearance: none;
}

input[type="button"].btn_enregistrer{
    margin: 0px;
    width: 150px;
    margin-left: 110px;
}