html.bonesAdmin { margin-top:40px; }

#bonesAdmin,
#bonesAdmin select,
#bonesAdmin input,
input.editable,
select.editable {
  font-family:Helvetica, Arial, sans-serif;
  font-size:15px;
  line-height:20px;
  }
#bonesAdmin a { text-decoration:none; }
#bonesAdmin ul { list-style:none; }
#bonesAdmin input { border:0; }

#bonesAdminToolbar {
  position:fixed;
  left:0px;
  right:0px;
  top:0px;
  z-index:100;

  height:0px;
  padding:0px 40px 0px 0px;
  background:#444;
  overflow:hidden;
  transition:height .25s;
  -moz-transition:height .25s;
  -webkit-transition:height .25s;
  box-shadow:rgba(0,0,0,.5) 0px 0px 5px;
  -moz-box-shadow:rgba(0,0,0,.5) 0px 0px 5px;
  -webkit-box-shadow:rgba(0,0,0,.5) 0px 0px 5px;
  }

html.bonesAdmin #bonesAdminToolbar {
  height:40px;
  overflow:visible;
  }

#bonesAdmin { color:#eee; }
#bonesAdmin a { color:#eee; }
#bonesAdmin a:hover { color:#fe6; }

#bonesAdminToolbar .panel {
  float:left;
  padding:10px 0px 10px 20px;
  height:20px;
  }

#bonesAdminToolbar .label { margin-right:10px; }

/**
 * # Dropdown menus ###########################################################
 */
#bonesAdmin .menus {
  float:right;
  height:40px;
  }

#bonesAdmin .dropdown {
  float:left;
  height:40px;
  border-left:1px solid #555;
  position:relative;
  }

#bonesAdmin .dropdown a {
  display:block;
  padding:5px 20px;
  position:relative;
  white-space:nowrap;
  }

#bonesAdmin .dropdown a:hover { background:#222; }

#bonesAdmin .dropdown > a { padding:10px 50px 10px 10px; }

#bonesAdmin .dropdown > a .down {
  position:absolute;
  right:0px;
  top:10px;
  }

#bonesAdmin .dropdown.expanded > a { background:#222; }

#bonesAdmin .dropdown ul {
  margin: 0px;
  padding:0px;
  position: absolute;
  left: -999em;
  border-radius:0px 0px 5px 5px;
  -moz-border-radius:0px 0px 5px 5px;
  -webkit-border-radius:0px 0px 5px 5px;
  }

#bonesAdmin .dropdown.expanded ul {
  left: 0;
  padding:0px 0px 10px;
  background:#333;
  }

/**
 * # Admin toggler ############################################################
 */
#bonesAdmin a.toggle {
  position:fixed;
  right:0px;
  top:0px;
  display:block;
  width:40px;
  height:40px;
  opacity:0;
  filter:alpha(opacity=0);

  background:url(sprite.png) -360px 0px no-repeat;
  color:#fff;
  text-indent:-999px;
  overflow:hidden;

  border-radius:0px 0px 0px 3px;
  -moz-border-radius:0px 0px 0px 3px;
  -webkit-border-radius:0px 0px 0px 3px;
  transition:opacity .25s;
  -moz-transition:opacity .25s;
  -webkit-transition:opacity .25s;
  transition:border-radius .5s;
  -moz-transition:border-radius .5s;
  -webkit-transition:border-radius .5s;
  }

html.bonesAdmin #bonesAdmin a.toggle,
#bonesAdmin a.toggle:hover {
  opacity:1;
  filter:alpha(opacity=100);
  }

html.bonesAdmin #bonesAdmin a.toggle {
  border-radius:0px;
  -moz-border-radius:0px;
  -webkit-border-radius:0px;
  }

/**
 * # Form elements ############################################################
 */
#bonesAdminToolbar form {
  padding:10px;
  height:20px;
  }

#bonesAdminToolbar form.login { float:right; }

#bonesAdmin select,
#bonesAdmin textarea,
#bonesAdmin input[type=text],
#bonesAdmin input[type=password] {
  vertical-align:middle;
  line-height:20px;
  height:20px;
  padding:0px 5px;

  color:#fff;
  background:#666;

  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  }

#bonesAdmin input[type=submit],
#bonesAdmin input[type=button] {
  vertical-align:middle;
  font-weight:bold;
  text-shadow:#000 0px -1px 0px;

  padding:0px 15px;
  background:#555;
  border:1px solid #666;
  color:#eee;
  cursor:pointer;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  }

#bonesAdmin input[type=submit]:hover,
#bonesAdmin input[type=button]:hover {
  background:#666;
  color:#fff;
  border-color:#888 #888 #777;
  box-shadow:rgba(0,0,0,.5) 0px 0px 5px;
  -moz-box-shadow:rgba(0,0,0,.5) 0px 0px 5px;
  -webkit-box-shadow:rgba(0,0,0,.5) 0px 0px 5px;
  }

#bonesAdmin input[type=submit]:active,
#bonesAdmin input[type=button]:active {
  background:#333;
  color:#ccc;
  border-color:#222 #222 #666;
  box-shadow:inset rgba(0,0,0,.5) 0px 0px 5px;
  -moz-box-shadow:inset rgba(0,0,0,.5) 0px 0px 5px;
  -webkit-box-shadow:inset rgba(0,0,0,.5) 0px 0px 5px;
  }

#bonesAdmin input.editing { display:none; }
html.bonesAdminEditing #bonesAdmin input.viewing { display:none; }
html.bonesAdminEditing #bonesAdmin input.editing { display:inline; }

html.bonesAdminEditing *[contentEditable=true],
html.bonesAdminEditing .editable {
  min-height:10px;
  position:relative;
  z-index:10;
  background:rgba(255,255,255,.9);
  box-shadow:rgba(255,255,255,.9) 0px 0px 5px;
  -webkit-box-shadow:rgba(255,255,255,.9) 0px 0px 5px;
  -moz-box-shadow:rgba(255,255,255,.9) 0px 0px 5px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ddffffff, endColorstr=#ddffffff);
  }

input.editable,
select.editable {
  line-height:20px;
  height:20px;
  padding:0px 5px;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  }

textarea.editable {
  font:normal 13px/20px "Andale Mono",monospace;
  line-height:20px;
  padding:0px 5px;
  width:100%;
  height:auto;
  resize:none;
  overflow-y:hidden;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  }

/**
 * # Icons ####################################################################
 */
#bonesAdmin .icon {
  display:block;
  width:20px;
  height:20px;
  float:left;
  overflow:hidden;
  text-indent:-9999px;
  margin-right:5px;
  background:url(sprite.png) 20px 20px no-repeat;
  }

#bonesAdmin .icon.user { background-position:0px 0px; }
#bonesAdmin .icon.docs { background-position:-20px 0px; }
#bonesAdmin .icon.down { background-position:-40px 0px; }
#bonesAdmin .icon.close { background-position:-60px 0px; }

/**
 * # Overlay ##################################################################
 */
#bonesAdminOverlay {
  background:#000;
  position:fixed;
  left:0px;
  right:0px;
  top:0px;
  bottom:0px;
  z-index:-1;
  opacity:0;
  filter:alpha(opacity=0);
  transition:opacity .25s;
  -moz-transition:opacity .25s;
  -webkit-transition:opacity .25s;
  }

html.bonesAdminEditing #bonesAdminOverlay,
html.bonesAdminModal #bonesAdminOverlay {
  opacity:0.5;
  filter:alpha(opacity=50);
  z-index:5;
  }

html.bonesAdminModal #bonesAdmin .panel,
html.bonesAdminModal #bonesAdmin .menus,
html.bonesAdminModal #bonesAdmin a.toggle,
html.bonesAdminEditing #bonesAdmin .menus,
html.bonesAdminEditing #bonesAdmin a.toggle { display:none; }

/**
 * # Growl ####################################################################
 */
#bonesAdminGrowl {
  position:fixed;
  right:0px;
  left:0px;
  top:40px;
  z-index:5;
  }

#bonesAdminGrowl .AdminGrowl {
  max-width:400px;
  min-height:20px;
  margin:10px 10px 10px auto;
  padding:10px 40px 10px 20px;
  position:relative;
  float:right;
  clear:right;
  background:rgba(48,160,64,.95);
  box-shadow:rgba(0,0,0,.5) 0px 0px 5px;
  -moz-box-shadow:rgba(0,0,0,.5) 0px 0px 5px;
  -webkit-box-shadow:rgba(0,0,0,.5) 0px 0px 5px;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  }

#bonesAdminGrowl .AdminGrowl.error { background:rgba(160,64,48,.95); }

#bonesAdminGrowl .close {
  position:absolute;
  top:10px;
  right:10px;
  }

/**
 * # Popup ####################################################################
 */
#bonesAdminPopup {
  position:fixed;
  left:0px;
  top:0px;
  right:0px;
  z-index:5;
  }

#bonesAdminPopup .AdminPage,
#bonesAdminPopup .AdminPopup {
  position:fixed;
  left:50%;
  top:80px;
  width:600px;
  margin:0px 0px 0px -300px;
  box-shadow:rgba(0,0,0,.5) 0px 0px 5px;
  -moz-box-shadow:rgba(0,0,0,.5) 0px 0px 5px;
  -webkit-box-shadow:rgba(0,0,0,.5) 0px 0px 5px;
  }

#bonesAdminPopup .header {
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  height:20px;
  padding:10px 20px;
  background:#333;
  }

#bonesAdminPopup .header h2 {
  font-weight:bold;
  margin:0;
  font-size:100%;
}

#bonesAdminPopup .header .close {
  background-color:#222;
  border:10px solid #222;
  margin:0px;
  position:absolute;
  right:0px;
  top:0px;
  }

#bonesAdminPopup .content {
  position:absolute;
  top:40px;
  left:0px;
  right:0px;
  padding:10px 20px;
  overflow:auto;
  max-height:400px;
  background:#444;
  }

#bonesAdminPopup .content > form { margin:-10px -20px; }

#bonesAdminPopup .content > form > div {
  padding:10px 20px 9px;
  border-bottom:1px solid #333;
  }

#bonesAdminPopup form > div label { display:block; }
#bonesAdminPopup form div.inline { display:inline-block; }

/**
 * # AdminPage ################################################################
 * Full-ish screen variant of AdminPopup.
 */
#bonesAdminPopup .AdminPage {
  position:fixed;
  left:40px;
  top:80px;
  right:40px;
  bottom:40px;
  margin:0px;
  width:auto;
  background:#444;
  }

#bonesAdminPopup .AdminPage .content {
  max-height:none;
  bottom:0px;
  }

/**
 * # AdminTable ###############################################################
 */
#bonesAdmin .AdminTable .content { padding:0px; }
#bonesAdmin .AdminTable table { width:100%; }

#bonesAdmin .AdminTable td,
#bonesAdmin .AdminTable th {
  background:#444;
  padding:10px 20px 9px;
  border-bottom:1px solid #333;
  }

#bonesAdmin .AdminTable tr:hover td { background:#4c4c4c; }

#bonesAdmin .AdminTable th {
  text-align:left;
  font-size:12px;
  background:#333;
  color:#acc;
  }

#bonesAdmin .AdminTable .actions { text-align:right; }