body {
    font-family: 'Roboto', sans-serif;
    font-weight: 80;
    color: #424242;
    margin: 0;
}

a {
    color: #91244f;
    text-decoration: none;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
}

a:hover {
    outline:0;
    color: #333;
}

h2 {
    font-size: 22px;
    font-family: 'Kalam', cursive;
    font-weight: 100;
    color: #91244f;
}

h3 {
    font-size: 18px;
    font-family: 'Kalam', cursive;
    font-weight: 100;
    color: #424242;
    text-align: left;
}

h4 {
    font-size: 16px;
    font-family: 'Kalam', cursive;
    font-weight: 100;
    color: #555;
    text-align: left;
}

p {
    font-size: 15px;
    text-align: justify;
}

li {
    font-size: 15px;
}

td {
    width: 20%;
    font-size: 15px;
    text-align: center;
    border: solid 1px #999;
}

label{display:block;text-align:left;}
.ins{display:block;width:200px;float:left;text-align:right;margin-right:10px;}

#header h1{
    float: left;
    margin: 0;
    margin-left: -13px;
    text-align: left;
}

#header a.brand {
    display: inline-block;
    font-size: 8px;
    text-indent: -9999px;
    width: 280px;
    height: 60px;
    background: url(images/titre.png) 10px center no-repeat;
}

#slogan{

    margin: auto;
    margin-top:-5px;
    font-size: 12px;
    font-style: italic;
    font-weight: 100;
    line-height: 10px;
}

.colored{
    color: #91244f;
}
td.tarif{
    width: 40px;
    height: 40px;
    color: #91244f;
    background-color: #f4f4f4;
    border: solid 0px;
}
td.colored{
    background-color: #91244f;
    border: solid 0px;
    color: #FFF;
}
td.vide{
    border: solid 0px;
}
#conteneur{
    color: #666;
    text-align: center;
}

#pagewrap p{
    padding-left: 5px;
    padding-right: 5px;
}

#calendrier{
    float: right;
    width: 115px;
    margin-top:-75px;
    margin-left: 15px;
}
#calendrier .legende{
    font-size: 11px;
}
#calendrier .legende_orange{
    background: #F4A228;
    color: #FFF;
}
#calendrier .legende_rouge{
    background: #F13636;
    color: #FFF;
}
#planning-modo .legende{
    font-size: 11px;
}
#planning-modo .legende_orange{
    background: #F4A228;
    color: #FFF;
}
#planning-modo .legende_rouge{
    background: #F13636;
    color: #FFF;
}

#map_canvas {
    width:430px;
    height:430px;
    margin-bottom: 5px;
}

#map_canvas_large {
    width:100%;
    height:370px;

    margin-bottom: 30px;
}

#map_canvas_full {
    width:800px;
    height:600px;
}

#pave {
    float: left;
    display:block;

    margin-right: 3%;
    margin-bottom: 20px;
}

#pave-large {
    float: left;
    display:block;
    margin-right: 5%;
    margin-bottom: 20px;
}

#footer {
    margin: 0 auto;
    margin-top: 40px;
    padding-top: 10px;
    padding-bottom: 30px;
    background: #fafafa;
    color: #666;
    font-size: 12px;
    -moz-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset;
    -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset;
    box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset;
    text-align: center;
}
#footer_content {
    margin: 0 auto;
    max-width: 900px;
    text-align: justify;
}

#footer_side {
    float: right;
    display: inline;
    width: 36%;
    margin-left: 10px;
    text-align: right;
}

.login-form {
    width:560px;
}

/* calendar */
table.calendar {
    border-right:1px solid #666;
    border-bottom:1px solid #666;}
tr.calendar-row	{
}
td.calendar-day	{
    width:21px;
    font-size:12px;
    font-weight: 100;
    position:relative; }
* html div.calendar-day {line-height: 10px;}
td.calendar-day-np	{
    background:#F0F0F0; }
* html div.calendar-day-np {}
td.calendar-day-head, td.calendar-day-head a {
    color: #91244f;
    background:#F0F0F0;
    text-align:center;
    width:21px;
    height: 16px;
    border-bottom:0px;
    border-right:0px;
}
td.calendar-day, td.calendar-day-np, td.calendar-day a, td.calendar-day-np a {
    width:21px;
    height: 17px;
    color: #111;
    line-height: 15px;
    border-bottom:0px;
    border-right:0px;
}
td.calendar-day.today, td.calendar-day.today a {
    background-color: #91244f;
    color: #FFF;
}
td.calendar-day.red, td.calendar-day.red a {
    background-color: #F13636;
    color: #FFF;
}
td.calendar-day.yellow, td.calendar-day.yellow a {
    background-color: #F4A228;
    color: #FFF;
}
td.mois {
    width:0%;
    color: #FFF;
    background:#91244f;
    border-bottom:0px;
    border-right:0px;
}
.modo_cal {
    float:left;
    position: relative;
    display: inline;
    width: 180px;
    height: 160px;
}
.portrait{
    float:right;
    display: inline;
    margin-top: 15px;
    margin-bottom: 10px;
    margin-left: 20px;
}
.bulle {
    position: absolute;
    font-size: 16px;
    background: #FFF; /** couleur du fond (se retrouve 2 fois) **/
    border: 1px solid #CCC; /** taille de la bordure et couleur (se retrouve 2 fois) **/
    border-radius: 4px;
    padding: 7px;
    padding-top: 8px;
    margin-left:5px;
}
.bulle:after {
    right: 100%; /** right pour mettre la fl�che � gauche ! **/
    border: solid transparent; content: ""; position: absolute;
}
.bulle:before {
    right: 100%; /** right pour mettre la fl�che � gauche ! **/
    border: solid transparent; content: ""; position: absolute;
}
.bulle:after {
    border-right-color: #FFF; /** 2e indication de couleur du fond **/
    border-width: 5px; /** grandeur de la fl�che **/
    top: 50%; /** position de la fl�che (se retrouve 2 fois) **/
    margin-top: -5px;/** indication de la grandeur de la fl�che (valeur n�gative) **/
} 
.bulle:before {
    border-right-color: #CCC; /** 2e indication de la couleur de la bordure **/
    border-width: 6px; /** indication de la grandeur de la fl�che +7px **/
    top: 50%; /** 2e indication de la position de la fl�che **/
    margin-top: -6px;/** indication de la grandeur de la fl�che +7px (valeur n�gative) **/
}