/* Search filters */
ul.filter {
  float: left;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
  list-style: none;
  width: 510px;
  height: 24px;
  position: relative;
  z-index: 90;
}

ul.filter li {
  float: left;
  background: white url(../../images/frontend/elements/filter/filter_bg.png) repeat-x;
  list-style-type: none;
  border: 1px solid #ccc;
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 5px;
  width: 154px;
}
ul.filter li.first {
  width: 155px;
}
ul.filter li.last {
  width: 155px;
  margin-right: 0;
}
ul.filter li a {
  display: block;
  color: black !important;
  font-size: 11px;
  background: url(../../images/common/arrows/arrow_black_down.png) no-repeat center right;
  padding: 4px;
  padding-right: 15px;
  outline:0;
}
ul.filter li a.selected {
  background: url(../../images/common/arrows/arrow_black_up.png) no-repeat center right;
}
ul.filter li a:hover {
  text-decoration: none;
}
ul.filter li ul {
  position: absolute;
  width: 240px;
  left: -999em;
}
ul.filter li ul.active {
  left: auto;
  margin-left: -6px;
  padding-top: 5px;
}
ul.filter li.inactive a {
  color: #999999 !important;
}
ul.filter li.inactive a:hover {
  text-decoration: none !important;
}
ul.filter li ul li {
  float: left;
  position:relative;
  width: 100% !important;
  background: none;
  border: 0;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  background: #FAFAFA;
  padding: 0;
}
ul.filter li ul li.first {
  border-top: 1px solid #ccc;
}
ul.filter li ul li.last {
  border-bottom: 1px solid #ccc;
}
ul.filter li ul li a {
  background: none;
  padding-left: 10px;
}
ul.filter li ul li a.selected {
  background: none;
}
ul.filter li ul li a:hover {
  background: #89C131;
  color: white;
  text-decoration: none;
}
ul.filter li ul li a.edit, ul.filter li ul li a.validate, ul.filter li ul li a.show, ul.filter li ul li a.cancel {
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 5px !important;
  color: #3D8EAB !important;
}
ul.filter li ul li a.edit:hover, ul.filter li ul li a.validate:hover, ul.filter li ul li a.show, ul.filter li ul li a.cancel {
  background: none;
  text-decoration: underline;
}
ul.filter li ul li input {
  margin-left: 10px;
  border: 1px solid #ccc;
  height: 20px;
  width: 160px;
}

ul.filter li ul li ul {
  position: relative;
  left: 0;
  border: 0;
}
ul.filter li ul li ul li a {
  padding-left: 30px;
}
ul.filter li ul li ul li, ul.filter li ul li ul li.first, ul.filter li ul li ul li.last {
  border: 0;
}

ul.filter li.info {
  background: #eee;
  font-size: 11px;
}
ul.filter li.info span {
  display: block;
  padding-top: 3px;
  padding-left: 5px;
  padding-right: 5px;
}
ul.filter li.info a {
  padding-left: 5px;
  color: #3D8EAB !important;
}
ul.filter li.info a:hover {
  background: none;
}

ul.filter .accordion a.opening {
  background: transparent;
}


/* autocomplete */
li.autocomplete a {
  padding-right: 50px !important;
}

.ac_results {
  background: white;
  border: 1px solid #ccc;
  z-index: 150;
}
.ac_results ul li {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 5px;
}
div.ac_results li.ac_over {
  background: #89C131;
  color: white;
}



/* Calendar */

div.calendar {
  float: left;
  width: 210px;
  background: url(../../images/common/boxes/box_type2_head.png) no-repeat 0 0;
}
div.calendar table {
  float: right;
  width: 209px;
  color: #333;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
  div.calendar table {
    float: left;
    width: 209px;
  }
}
div.calendar table td, div.calendar table th {
  font-size: 11px;
  text-align: center;
}
div.calendar table thead {
  font-weight: bold;
}
div.calendar table thead tr {
  background: #eee;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
div.calendar table thead th {
  font-weight: bold;
}
div.calendar table thead tr.title {
  background: transparent;
  border: 0;
}
div.calendar table thead td.title {
  height: 24px;
  color: #333;
  font-size: 12px;
  text-align: center;
  padding: 0;
}
div.calendar table tbody {
  border: 1px solid #ccc;
}
div.calendar tr.days td {
  width: 2em;
  height: 24px;
  cursor: pointer;
}
div.calendar tr.days td:hover,
div.calendar td.button:hover
{
  cursor: pointer;
}

div.calendar tr.days td.today
{
  font-weight: bold;
  color: #FF0000;
}
div.calendar tr.days td.selected
{
  font-weight: bold;
  background: url(../../images/frontend/elements/calendar/calendar_cell_bg.png) no-repeat center -90px;
}
div.calendar tr.days td.weekend {
  background-color: #F7F7F7;
}
div.calendar tr.days td.favorite {
  background: url(../../images/frontend/elements/calendar/calendar_cell_bg.png) no-repeat center -121px;
}
div.calendar tr.days td.noclick {
  cursor: default;
}
div.calendar tr.days td.event {
  background: url(../../images/frontend/elements/calendar/calendar_cell_bg.png) no-repeat center -30px;
}
div.calendar tr.days td.favorite.selected {
  background: url(../../images/frontend/elements/calendar/calendar_cell_bg.png) no-repeat center -150px;
}
div.calendar tr.days td.event.selected {
  background: url(../../images/frontend/elements/calendar/calendar_cell_bg.png) no-repeat center -210px;
}

.calendar_legend ul {
  float: left;
}
.calendar_legend ul li {
  float: left;
  width: 70px !important;
  margin-top: 5px;
  padding-left: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 11px;
}
.calendar_legend .event {
  background: url(../../images/frontend/elements/calendar/calendar_cell_bg.png) no-repeat left -30px;
}
.calendar_legend .favorite {
  background: url(../../images/frontend/elements/calendar/calendar_cell_bg.png) no-repeat left -121px;
}
.calendar_legend .selected {
  background: url(../../images/frontend/elements/calendar/calendar_cell_bg.png) no-repeat left -90px;
}


/* Bubble canvas */
#bubble {
  float: left;
  position: relative;
  z-index: 90;
  width: 521px;
  height: 80px;
  left: -10px;
  margin-bottom: 20px;
  background: url(../../images/frontend/elements/bubble/bubble_bg.png) no-repeat;
}
#bubble.medium {
  background: url(../../images/frontend/elements/bubble/bubble_bg_medium.png) no-repeat;
  
}
#bubble.small {
  background: url(../../images/frontend/elements/bubble/bubble_bg_small.png) no-repeat;
}
#bubble.small p {
  width: 300px;
  color: #666;
  float: left;
  margin:15px 0 0 20px;
}

#bubble ul {
  float: left;
  margin-left: 10px;
}
#bubble ul li {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
#bubble ul li a {
  float: left;
  width: 150px;
  height: 61px;
  color: #333;
  font-weight: bold;
  background: url(../../images/frontend/elements/bubble/bubble_button_bg.png) no-repeat;
}
#bubble ul li a:hover {
  text-decoration: none;
  background: url(../../images/frontend/elements/bubble/bubble_button_bg.png) no-repeat left bottom;
}
#bubble ul li a span {
  display: table-cell;
  padding-left: 55px;
  padding-right: 10px;
  height: 60px;
  padding-left: 55px;
  vertical-align: middle;
}

/* Bubble cases */
#bubble li.post a span {
  background: url(../../images/frontend/elements/bubble/picto_button_post.png) no-repeat 10px center;
}
#bubble li.service a span {
  background: url(../../images/frontend/elements/bubble/picto_button_service.png) no-repeat 10px center;
}
#bubble li.event a span {
  background: url(../../images/frontend/elements/bubble/picto_button_event.png) no-repeat 10px center;
}
#bubble li.add_school a span {
  background: url(../../images/frontend/elements/bubble/picto_button_school.png) no-repeat 10px center;
}
#bubble li.add_contact a span {
  background: url(../../images/frontend/elements/bubble/picto_button_add_user.png) no-repeat 10px center;
}
#bubble li.contacts a span {
  background: url(../../images/frontend/elements/bubble/picto_button_people.png) no-repeat 10px center;
}
#bubble li.join a span {
  background: url(../../images/frontend/elements/bubble/picto_button_join.png) no-repeat 10px center;
}
#bubble li.manage a span {
  background: url(../../images/frontend/elements/bubble/picto_button_manage.png) no-repeat 10px center;
}
#bubble li.photo a span {
  background: url(../../images/frontend/elements/bubble/picto_button_photo.png) no-repeat 10px center;
}
#bubble li.document a span {
  background: url(../../images/frontend/elements/bubble/picto_button_document.png) no-repeat 10px center;
}
#bubble li.video a span {
  background: url(../../images/frontend/elements/bubble/picto_button_video.png) no-repeat 10px center;
}
#bubble li.association a span {
  background: url(../../images/frontend/elements/bubble/picto_button_association.png) no-repeat 10px center;
}
#bubble li.list a span {
  background: url(../../images/frontend/elements/bubble/picto_button_list.png) no-repeat 10px center;
}
#bubble li.write a span {
  background: url(../../images/frontend/elements/bubble/picto_button_write.png) no-repeat 10px center;
}
#bubble li.folder a span {
  background: url(../../images/frontend/elements/bubble/picto_button_folder.png) no-repeat 10px center;
}
#bubble li.add_link a span {
  background: url(../../images/frontend/elements/bubble/picto_button_earth.png) no-repeat 10px center;
}
#bubble li.add_document a span {
  background: url(../../images/frontend/elements/bubble/picto_button_document.png) no-repeat 10px center;
}
#bubble li.exchange a span {
  background: url(../../images/frontend/elements/bubble/picto_button_arrows.png) no-repeat 6px center;
}
#bubble li.follow a span {
  background: url(../../images/frontend/elements/bubble/picto_button_heart_plus.png) no-repeat 6px center;
}
#bubble li.unfollow a span {
  background: url(../../images/frontend/elements/bubble/picto_button_heart_minus.png) no-repeat 6px center;
}
#bubble li.more_neighbors a span {
  background: url(../../images/frontend/elements/bubble/picto_button_plus.png) no-repeat 6px center;
}
#bubble li.poke a span {
  background: url(../../images/frontend/elements/bubble/picto_button_hand.png) no-repeat 6px center;
}
#bubble li.liked a span,
#bubble li.like a span {
  background: url(../../images/frontend/elements/bubble/picto_button_thumb_up.png) no-repeat 6px center;
}
#bubble li.back a span {
  background: url(../../images/frontend/elements/bubble/picto_button_arrow_left.png) no-repeat 6px center;
}
#bubble li.delete a span {
  background: url(../../images/frontend/elements/bubble/picto_button_trash.png) no-repeat 6px center;
}
#bubble li.edit a span {
  background: url(../../images/frontend/elements/bubble/picto_button_service.png) no-repeat 10px center;
}


/* Sharing bar */
div.sharing {
  position: relative;
  float: left;
  width: 510px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding-top: 3px;
  font-size: 11px;
  margin-bottom: 20px;
}
div.sharing ul {
  width: 400px;
}
div.sharing ul li {
  float: left;
  margin-right: 20px;
}
div.sharing ul li.twitter {
  position: absolute;
  top: 3px;
}
div.sharing ul li.like {
  padding-left: 24px;
  padding-top: 3px;
  background: url(../../images/frontend/icons/16x16/thumb_up.png) no-repeat left center;
}
div.sharing ul li.like .count {
  margin-right:4px;
}
div.sharing a.abuse {
  position: absolute;
  padding-top: 3px;
  top: 3px;
  right: 0;
}


/* Profile completion */
#completion {
  float: right;
  width: 190px;
  height: 60px;
  padding: 10px;
  position: absolute;
  right: 0;
  background: url(../../images/frontend/elements/completion/completion.png) no-repeat bottom;
}
#completion a.step_button {
  float: left;
  width: 180px;
  height: 31px;
  padding: 5px;
  color: #333;
  margin-bottom: 5px;
  background: url(../../images/frontend/elements/completion/completion.png) no-repeat left top;
}
#completion a.step_button:hover {
  text-decoration: none;
  background: url(../../images/frontend/elements/completion/completion.png) no-repeat left -41px;
}
#completion span.step_title {
  float: left;
  font-weight: bold;
  margin-left: 5px;
}
#completion span.step_label {
  float: left;
  font-size: 11px;
  margin-left: 5px;
  width: 170px;
}
#completion #progress_legend     {font-size:11px;font-weight:bold;margin: 5px 0px;}
#completion #progress_bar        {margin:0px; padding:0px; margin-left: 10px; position:relative}
#completion #progress_first        {width:7px; height:13px; background:url(../../../../images/common/progress-corners.gif) no-repeat left top; float:left}
#completion #progress_background     {width:160px; height:13px; background-image:url(../../../../images/frontend/progress-background.gif); float:left}
#completion #progress_orange       {float:left}
#completion #progress_orange p     {float:left; font-size:8px; height:11px; margin:0px; padding:2px 5px 0px 0px; background-image:url(../../images/frontend/progress-orange.gif); color:#FFFFFF; text-align:right}
#completion .p25             {width:40px; background-image:url(../../../../images/frontend/progress-orange.gif); color:#FFFFFF; text-align:right}
#completion .p50             {width:80px; background-image:url(../../../../images/frontend/progress-orange.gif); color:#FFFFFF; text-align:right}
#completion .p75             {width:120px; background-image:url(../../../../images/frontend/progress-orange.gif); color:#FFFFFF; text-align:right}
#completion #progress_end        {width:7px; height:13px; background:url(../../../../images/common/progress-corners.gif) no-repeat right top; float:left}

#completion #additional_options_top                        {clear:left; margin:12px 0 0 -3px; padding:5px 0 0; width:190px; background:url(../../images/common/boxes/box-user-left-step-top.gif) no-repeat left top}
#completion #additional_options_content                    {display:block; text-decoration:none; margin:0px; padding:0px 10px; background:url(../../images/common/boxes/box-user-left-step-content.png) no-repeat left bottom}
#completion #additional_options_content span.step_label    {display:block; margin:0px; padding:0px; font-size:11px; color:#538618}
#completion #additional_options_content span.step_title    {display:block; margin:2px 0px 0px; padding:0px; font-size:12px; font-weight:bold; color:#333}
#completion #additional_options_content span.arrow         {margin:0px; padding:0px 0px 0px 9px; color:#FFFFFF}


/* Notifications */
/* new version */
#user_notifications {
  float: left;
  border-bottom: solid 0px #dddddd;
  border: 1px solid #ddd;
  border-top: 0;
  margin-bottom: 10px;
}
#user_notifications a.trigger {
  float: left;
  width: 208px;
  height: 28px;
  text-indent: -9999px;
  background: url(../../images/frontend/elements/notifications/left_back_notifications.gif) repeat-x left ;
  outline: 0;
}
#user_notifications a:hover {
  text-decoration:none;
}
#user_notifications a.trigger span.infos_notifications {
  float: left;
  margin: 0;
  padding: 0;
  background: url(../../images/frontend/elements/notifications/icon-notification.png) no-repeat 7px center;
  font-size: 11px;
  color: #333333;
  font-weight: bold;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 30px;
  width: 140px;
  text-indent: 0;
}
#user_notifications a.trigger span.infos_notifications span {
  color: #FE6000;
}
#user_notifications a.trigger span.show {
  float: right;
  padding-top: 15px;
  width: 30px;
  background: url(../../images/common/arrows/arrow_black_down.png) no-repeat center center;
}
#user_notifications a.trigger.active {
  border-bottom: 1px solid #ddd;
}
#user_notifications a.trigger.active span.show {
  background: url(../../images/common/arrows/arrow_black_up.png) no-repeat center center;
}

#notifications_list {
  float: left;
  width: 208px;
  background-color: white;
  display: none;
}
#notifications_list ul {
  list-style: none;
  width: 200px;
  float: left;
}
#notifications_list ul li {
  border-bottom: 1px solid #DDDDDD;
  background-color: white;
  padding: 5px 13px 5px 5px;
  color: #333333;
  width: 190px;
  float: left;
}
#notifications_list ul li span {
  color: #333333;
  font-size: 10px;
  float: left;
  width: 150px;
  margin-left: 10px;
}
#notifications_list ul li div.association_small {
  background-image: url(../../images/frontend/icons/icon-asso-small.png);
  background-repeat: no-repeat;
  background-position: center;
  background-color: #FFFFFF;
  width: 25px;
  height: 25px;
  float: left;
}
#notifications_list ul li div.labo_small {
  background-image: url(../../images/frontend/icons/icon-labo-small.png);
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  width: 25px;
  height: 25px;
  float: left;
}
#notifications_list ul li div.building_small {
  background-image: url(../../images/frontend/icons/icon-building-small.png);
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  width: 25px;
  height: 25px;
  float: left;
}
#notifications_list ul li div.neighbour_small {
  background-image: url(../../images/frontend/icons/icon-people2.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-color: #FFFFFF;
  width: 25px;
  height: 25px;
  float: left;
}
#notifications_list ul li div.services_small {
  background-image: url(../../images/frontend/icons/icon-service-small.png);
  background-repeat: no-repeat;
  background-position: center;
  background-color: #FFFFFF;
  width: 25px;
  height: 25px;
  float: left;
}
#notifications_list ul li div.member {
  width: 25px;
  height: 25px;
  float: left;
  padding-top: 3px;
}
#notifications_list ul li.active {
  background-color: #f7f7f7;
}

#notifications_list .view_all {
  float: left;
  background-color: #eee;
  text-align: right;
  padding-bottom: 5px;
  padding-top: 5px;
  text-align: center;
  width: 100%;
}
#notifications_list .view_all a {
  display: block;
}

/* old version */
#left_user_notifications {
  float: left;
  height: 28px;
  background: url(../../images/frontend/elements/notifications/left_back_notifications.gif) repeat-x left ;
  border-bottom: solid 0px #dddddd;
  border: 1px solid #ddd;
  border-top: 0;
  margin-bottom: 10px;
}
#left_user_notifications a {
  float: left;
  width: 208px;
  height: 28px;
  text-indent: -9999px;
  outline: 0;
}
#left_user_notifications a:hover {
  text-decoration:none;
}
#left_user_notifications a span.infos_notifications {
  float: left;
  margin: 0;
  padding: 0;
  background: url(../../images/frontend/elements/notifications/icon-notification.png) no-repeat 7px center;
  font-size: 11px;
  color: #333333;
  font-weight: bold;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 30px;
  width: 140px;
  text-indent: 0;
}
#left_user_notifications a span.infos_notifications span {
  color: #FE6000;
}
#left_user_notifications a span.show {
  float: right;
  padding-top: 15px;
  width: 30px;
  background: url(../../images/common/arrows/arrow_black_down.png) no-repeat center center;
}
#left_user_notifications a.active span.show {
  background: url(../../images/common/arrows/arrow_black_up.png) no-repeat center center;
}


#left_notifications_open { float:left; width:208px; background-color:white; border: 1px solid #ddd; display:none; }
#left_notifications_open ul { list-style:none; width:200px; float:left; }
#left_notifications_open ul li { border-bottom:1px solid #DDDDDD; background-color:white; padding:5px 13px 5px 5px; color:#333333; width:190px; float:left; }
#left_notifications_open ul li span { color:#333333; font-size:10px; float:left; width:150px; margin-left:10px; }
#left_notifications_open ul li div.association_small {background-image:url(../../../../images/frontend/icons/icon-asso-small.png); background-repeat:no-repeat; background-position:center; background-color:#FFFFFF; width:25px; height:25px; float:left;}
#left_notifications_open ul li div.labo_small {background-image:url(../../../../images/frontend/icons/icon-labo-small.png); background-repeat:no-repeat; background-position:center; background-color:transparent; width:25px; height:25px; float:left;}
#left_notifications_open ul li div.building_small {background-image:url(../../../../images/frontend/icons/icon-building-small.png); background-repeat:no-repeat; background-position:center; background-color:transparent; width:25px; height:25px; float:left;}
#left_notifications_open ul li div.neighbour_small {background-image:url(../../../../images/frontend/icons/icon-people2.gif); background-repeat:no-repeat; background-position:center; background-color:#FFFFFF; width:25px; height:25px; float:left;}
#left_notifications_open ul li div.services_small {background-image:url(../../../../images/frontend/icons/icon-service-small.png); background-repeat:no-repeat; background-position:center; background-color:#FFFFFF; width:25px; height:25px; float:left;}
#left_notifications_open ul li div.member {width:25px; height:25px; float:left; padding-top:3px;}
#left_notifications_open ul li.active { background-color:#f7f7f7; }

#left_notifications_open .view_all { background-color:#eee; text-align:right; margin-top:-5px; padding-bottom:5px; padding-right:5px; padding-top:5px; text-align:center; }
#left_notifications_open .view_all a {
  display: block;
  padding-top: 5px;
}


/************************************ Progress bar *************************************************************************************/

/* Instructions: to change the width of the progress bar, change it in the two folowwing elements 
   The actual progress is given in PHP, from 0 to 100%
*/
.progress_bar_red,
.progress_bar_blue                                          {width:214px; height:13px ; margin:0px; padding:0px; position:relative}
.progress_bar_red .progress_background,
.progress_bar_blue .progress_background                     {width:200px; height:100%; background:url(../../../../images/frontend/progress-background.gif) repeat-x left top; float:left}

.progress_bar_red .progress_start                           {width:7px; height:100%; background:url(../../../../images/common/progress-corners.gif) no-repeat left top;; float:left}
.progress_bar_red.progress_100 .progress_end                {width:7px; height:100%; background:url(../../../../images/common/progress-corners.gif) no-repeat right top; float:left}
.progress_bar_red .progress_background .progress            {height:100%; background:url(../../images/frontend/progress-orange.gif) repeat-x left top; float:left}

.progress_bar_blue .progress_start                           {width:7px; height:100%; background:url(../../../../images/common/progress/progress-blue-corners.gif) no-repeat left top; float:left}
.progress_bar_blue.progress_100 .progress_end                {width:7px; height:100%; background:url(../../../../images/common/progress/progress-blue-corners.gif) no-repeat right top; float:left}
.progress_bar_blue .progress_background .progress            {height:100%; background:url(../../../../images/common/progress/progress-blue-bg.gif) repeat-x left top; float:left}

.progress_bar_red.progress_0 .progress_start,
.progress_bar_blue.progress_0 .progress_start                                 {width:7px; height:100%; background:url(../../../../images/common/progress-corners.gif) no-repeat left top; float:left}
.progress_bar_red .progress_end,
.progress_bar_blue .progress_end                                              {width:7px; height:100%; background:url(../../../../images/common/progress-corners.gif) no-repeat right top; float:left}

.progress_bar_blue .progress_background .progress p, .progress_bar_red .progress_background .progress p {
  margin-bottom:0px !important;
  font-size:10px;
  margin-left:80px;
  font-weight:bold;
}

.poll li {
  position: relative;
}
.poll li p.progress_text {
  left: 210px;
  margin-left: 10px;
  position: absolute;
  top: 14px;
  width: 100px;
}