/*************************************************************************
 * p.notice
 ************************************************************************/

#sidewalk p.notice {
  color:#215010;
  border:1px solid #50ab32;
  border-bottom-color:#3e8826;
  border-radius:3px;
  padding:1em;
  text-shadow:0 1px #dbeed0;
  background-color: #b8ec9a;
  background-image:-webkit-linear-gradient(top, #b8ec9a, #83d660);
  background-image:   -moz-linear-gradient(top, #b8ec9a, #83d660);
  background-image:    -ms-linear-gradient(top, #b8ec9a, #83d660);
  background-image:       linear-gradient(top, #b8ec9a, #83d660);
  -webkit-box-shadow:inset 0 1px #dbeed0, 0 1px 2px #ccc;
  -moz-box-shadow:   inset 0 1px #dbeed0, 0 1px 2px #ccc;
  -ms-box-shadow:    inset 0 1px #dbeed0, 0 1px 2px #ccc;
  box-shadow:        inset 0 1px #dbeed0, 0 1px 2px #ccc;

  -webkit-transition:all 0.5s;
  -moz-transition:   all 0.5s;
  -ms-transition:    all 0.5s;
  transition:        all 0.5s;
}

#sidewalk p.notice:after {
  content:'\d7';
  float:right;
  font-weight:bold;
  cursor:default;
}

/*************************************************************************
 * a.button
 ************************************************************************/

#sidewalk a.button {
  cursor:default;
  display:inline-block;
  padding:5px 12px 4px 12px;
  color:black;
  text-shadow:#f5f5f5 0px 1px;
  border:1px solid #777;
  border-radius:3px;
  background:-webkit-linear-gradient(top, #f5f5f5, #d2d2d2);
  background:   -moz-linear-gradient(top, #f5f5f5, #d2d2d2);
  background:        linear-gradient(top, #f5f5f5, #d2d2d2);
  -webkit-box-shadow:inset 0 1px 1px #fff, 0 1px 2px #ccc;
  -moz-box-shadow:   inset 0 1px 1px #fff, 0 1px 2px #ccc;
  box-shadow:        inset 0 1px 1px #fff, 0 1px 2px #ccc;
}

#sidewalk a.button:hover {
  background:-webkit-linear-gradient(top, #f8f8f8, #dedede);
  background:   -moz-linear-gradient(top, #f8f8f8, #dedede);
  background:        linear-gradient(top, #f8f8f8, #dedede);
}

#sidewalk a.button:active,
#sidewalk a.button.pressed {
  /*padding:6px 12px 3px 12px;*/
  background:-webkit-linear-gradient(top, #bbb, #d2d2d2);
  background:   -moz-linear-gradient(top, #bbb, #d2d2d2);
  background:        linear-gradient(top, #bbb, #d2d2d2);
  -webkit-box-shadow:inset 0 1px 1px #aaa, 0 1px 2px #ccc;
  -moz-box-shadow:   inset 0 1px 1px #aaa, 0 1px 2px #ccc;
  box-shadow:        inset 0 1px 1px #aaa, 0 1px 2px #ccc;
}

#sidewalk a.button.def {
  color:#12223e;
  text-shadow:#c0d8f4 0px 1px;
  border:1px solid #38598f;
  background-color:#8eb8f3;
  background-image:-webkit-linear-gradient(top, #8eb8f3, #6094e8);
  background-image:   -moz-linear-gradient(top, #8eb8f3, #6094e8);
  background-image:    -ms-linear-gradient(top, #8eb8f3, #6094e8);
  background-image:        linear-gradient(top, #8eb8f3, #6094e8);
  -webkit-box-shadow:inset 0 1px 1px #c0d8f4, 0 1px 2px #ccc;
  -moz-box-shadow:   inset 0 1px 1px #c0d8f4, 0 1px 2px #ccc;
  box-shadow:        inset 0 1px 1px #c0d8f4, 0 1px 2px #ccc;
}

#sidewalk a.button.def:hover {
  background-color:#a0c4f4;
  background-image:-webkit-linear-gradient(top, #a0c4f4, #72a2e9);
  background-image:   -moz-linear-gradient(top, #a0c4f4, #72a2e9);
  background-image:    -ms-linear-gradient(top, #a0c4f4, #72a2e9);
  background-image:        linear-gradient(top, #a0c4f4, #72a2e9);
}

#sidewalk a.button.def:active,
#sidewalk a.button.def.pressed {
  background-color:#6094e8;
  background-image:-webkit-linear-gradient(top, #5688d6, #6094e8);
  background-image:   -moz-linear-gradient(top, #5688d6, #6094e8);
  background-image:    -ms-linear-gradient(top, #5688d6, #6094e8);
  background-image:        linear-gradient(top, #5688d6, #6094e8);
  -webkit-box-shadow:inset 0 1px 1px #4a76bb, 0 1px 2px #ccc;
  -moz-box-shadow:   inset 0 1px 1px #4a76bb, 0 1px 2px #ccc;
  box-shadow:        inset 0 1px 1px #4a76bb, 0 1px 2px #ccc;
}

#sidewalk a.button.small {
  padding:2px 8px 3px 8px;
  font-size:80%;
}

#sidewalk a.button + a.button {
  margin-left:0.5em;
}

#sidewalk .buttonGroup > a.button { border-radius:0; }
#sidewalk .buttonGroup > a.button:first-child { border-radius:3px 0 0 3px; }
#sidewalk .buttonGroup > a.button:last-child { border-radius:0 3px 3px 0; }
#sidewalk .buttonGroup > a.button + a.button { margin-left:-1px; }

/*************************************************************************
 * Popup
 ************************************************************************/

#sidewalk div.popup {
  position:absolute;
  padding:1em 2em;
  background:#f5f5f5;
  border:1px solid #9f9f9f;
  border-radius:12px;
  z-index:100;
  -webkit-box-shadow:inset #fff 0 1px, #999 0px 6px 12px;
  -moz-box-shadow:   inset #fff 0 1px, #999 0px 6px 12px;
  -ms-box-shadow:    inset #fff 0 1px, #999 0px 6px 12px;
  box-shadow:        inset #fff 0 1px, #999 0px 6px 12px;

  /* advised not to override - tied to javascript code */
  opacity:0;
  -webkit-transform: scale(0.25);
  -moz-transform:    scale(0.25);
  -ms-transform:     scale(0.25);
  transform:         scale(0.25);
  -webkit-transition: all 0.150s;
  -moz-transition:    all 0.150s;
  -ms-transition:     all 0.150s;
  transition:         all 0.150s;
}

#sidewalk div.popup div.callout {
  position:absolute;
  top:-22px;
}

#sidewalk div.popup div.callout.top-right {
  right:2em;
}