body {
  font-family:Helvetica Neue, Arial, sans-serif;
  font-size:1em;
  margin:0;
  padding:0;
  background-color:#EEE;
  min-width:800px; 
}

header {
  width:800px;
  display:block;
  padding:0.5em 0 0.5em 0;
  overflow:hidden;
  margin-left:auto;
  margin-right:auto;
}

header h1 {
  font-size:1em;
  margin:0;
  float:left;
  position:relative;
}

header sup {
  color:#CCC;
}

header nav {
  display:inline-block;
  float:right;
}

header, footer {
  color:#656565
}
header a {
  padding:3px 5px;
}

header nav a {
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border:1px solid #CCC;
  border-bottom: 1px solid rgba(0,0,0,0.25);
  background: transparent url(/images/button-overlay.png) repeat-x; 
  
}

header nav a:hover {
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
/*  text-shadow:inset 1px 1px 2px #FFF;*/
/*  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
  text-decoration:none;
  background: #545454 url(/images/button-overlay.png) repeat-x; 
  border:1px;
  color: #fff; 
  text-decoration: none;

}

header a, footer a {
  color:#B4B5A7;
  text-decoration:none;
}
footer {
  margin-top:5px;
  display:block;
  width:800px;
  padding:0.3em;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
footer p + p {
  margin-top:10px;
}

a{ text-decoration:none; }
a:hover{text-decoration:underline;}

div.content {
  background-color:#F7F7F7;
  padding:2em 0 4em 0;
  border-top:1px solid #D3D5C9;
  border-bottom:1px solid #D3D5C9;
}

form{text-align:center;}
form p label {
  display:block;
  padding:10px;
  font-size:1.5em;
}
form p input[type='text'] {
  padding:5px;
  font-size:1.5em;
}

form p + p{margin-top:1em;}
form p.buttons input{font-size:1.2em;}

form.new h2 {
  font-size:2em;
  font-family:Georgia;
  margin-bottom:0.5em;
}

form p.name input {
  text-align:center;
}
form.new, form.update{padding:90px 0;}

form.new p.slug label{margin-bottom:20px;}
form.new p.slug input{
  font-size:25px;
  text-align:right; 
  width:16em;
  padding:5px;
  padding-right:8em;
}
form.new p.slug .slug-wrapper {
  position:relative;
  top:2px;
  right:3px;
  overflow:hidden;
}

form.new p.slug span{
  color:#CCC;
  font-size:25px;
  position:absolute;
  padding:0;
  right:14px;
  top:0px;
  z-index:1;
}
form.new p.error { 
  color:#990300;
  font-style:italic;
}
form.new p.error a {
  text-decoration:underline;
  color:#333;
}

div.status-list {
  padding:20px 20px 20px 20px;
  overflow:hidden;
  width:800px;
  margin-left:auto;
  margin-right:auto;
}

div.status-list div.bubble {
  font-size:9em;
  position:relative;
  margin-bottom:40px;
}

div.status-list dl.beards + dl.faces{margin-left:50px;}
div.status-list ul{
  margin-top:25px;
  padding-left:50px;
  position:relative;
  z-index:1;
}

div.status-list .beards .count {
  background-image:url(/images/beard-small.jpg);
}
div.status-list .faces .count {
  background-image:url(/images/no-beard-small.jpg);
}

div.status-list .count {
  background-attachment: scroll;
  background-position: left center;
  background-repeat:no-repeat;
  font-size:2em;
  display:inline;
  margin-left:50px;
  padding:5px 10px 5px 60px;
  background-color: #969696;
  
  box-shadow: 2px 2px 3px #000;
  -webkit-box-shadow: 2px 2px 3px #000;
  -moz-box-shadow: 2px 2px 3px #000;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  text-shadow:inset 1px 1px 2px #FFF;
  color:#FFF;
  text-decoration:none;
}

div.status-list ul li{display:inline-block; margin-bottom:10px;}
div.status-list ul li a {
  color:#AAA;
  margin-right:10px;
  padding:5px;
}

div.status-list ul li a:hover {
  background-color:#545454;
  box-shadow:inset 2px 2px 3px #000;
  -webkit-box-shadow:inset 2px 2px 3px #000;
  -moz-box-shadow:inset 2px 2px 3px #000;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  text-shadow:inset 1px 1px 2px #FFF;
  color:#FFF;
  text-decoration:none;
}

div.status-list .beards, div.status-list .faces {
  width:340px;
  margin-left:auto;
  margin-right:auto;
}

div.status-list .beards{float:left;}
div.status-list .faces{float:right;}

dl.individual-status {
  width:800px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  padding:20px;
  font-size:1em;
}
dl.individual-status dt {
  float:left;
  margin-right:50px;
  display:block;
  width: 150px;
}
dl.individual-status .icon {
  border:2px solid #CCC;
  width:150px;
  height:150px;
  text-align:center;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  background-color:transparent;
  background-position:center center;
  background-attachment:scroll;
  background-repeat:no-repeat;
  margin-bottom:15px;
  overflow:hidden;
}
dl.individual-status.beard .icon {
  background-image:url(/images/beard.jpg);  
}
dl.individual-status.no-beard .icon {
  background-image:url(/images/no-beard.jpg);
}
dl.individual-status dt p.edit {
  margin-top:5px;
  font-size:0.8em;
}
dl.individual-status dt p.edit a {
  color:#DDD;
}
dl.individual-status:hover p.edit a {
  color:#AAA;
}
dl.individual-status span {
  color:#666;
  display:block;
  padding-top:10px;
}
dl.individual-status dd {
  float:left;
  font-size:16em;
}

div.ribbon {
  text-align:center;
  padding:10px;
  opacity: 0.95;
  -moz-opacity: 0.95;
  filter:alpha(opacity=95);
  background-color: #474747;
  background-image: -moz-linear-gradient(top, #474747, #222222); 
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #474747),color-stop(1, #222222)); 
  background-image: -webkit-linear-gradient(#474747, #222222); 
  background-image: linear-gradient(top, #474747, #222222);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#474747', EndColorStr='#222222'); 
  box-shadow:inset 2px 2px 3px #000;
  -webkit-box-shadow:inset 2px 2px 3px #000;
  -moz-box-shadow:inset 2px 2px 3px #000;
  
}
div.ribbon h2 {
  font-size:1.2em;
  color:#FFF;
  display:inline-block;
  margin-right:10px;
}

div.ribbon a {
}

.bubble {
  margin-left:auto;
  margin-right:auto;
  color:#333;
  background:#FFF;
  font-size:1em;
  position:relative;
  padding:15px;
  margin:0;
  -moz-border-radius:20px;
  -webkit-border-radius:20px;
  border-radius:20px;
  box-shadow: 5px 5px 5px #CCC;
  -webkit-box-shadow:5px 5px 5px #CCC;
  -moz-box-shadow: 5px 5px 5px #CCC;
}

.bubble .tab {
  display:block;
  position:absolute;  
  overflow:hidden;
}

.bubble.bottom .tab {
  background:transparent url(/images/bottom-tab.png) no-repeat bottom left;
  width:100px;
  height:30px;
  bottom:-30px;
  left:20px;
}

.bubble.left .tab {
  width:50px;
  height:60px;
  background:transparent url(/images/left-tab.png) no-repeat top left;
  top:30px;
  left:-40px;
}

.bubble p {
  display:block;
  font-weight:bold;
  padding:0 0.1em;
  margin:0;
  text-align:center;
  color:#444;
/*  text-shadow:#CCC -1px -3px 0, #000 1px 3px 0;*/
  text-shadow: -2px 0px 0px #000, 1px 1px 0px #AAA;
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#F9F9F9));
  background-image:-moz-linear-gradient(0deg, #F4F4F4, #F9F9F9);
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  text-transform:uppercase;
}


.btn, .btn:visited {
  background: #222 url(/images/button-overlay.png) repeat-x; 
  display: inline-block;
  border:1px;
  padding: 5px 10px 6px; 
  color: #fff; 
  text-decoration: none;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  position: relative;
  cursor: pointer;
}
 
.btn:hover{background-color:#111;color:#fff;text-decoration:none;}
.btn:active{top:1px;}
.small.btn,.small.btn:visited{font-size:11px;padding:;}
.btn,.btn:visited,
.medium.btn,.medium.btn:visited{font-size:13px;font-weight:bold;line-height:1;text-shadow:0 -1px 1px rgba(0,0,0,0.25);}
.large.btn,.large.btn:visited{font-size:18px;padding:8px 14px 9px;}
.green.btn,.green.btn:visited{background-color:#91bd09;}
.green.btn:hover{background-color:#749a02;}
.blue.btn,.blue.btn:visited{background-color:#2daebf;}
.blue.btn:hover{background-color:#007d9a;}
.red.btn,.red.btn:visited{background-color:#e33100;}
.red.btn:hover{background-color:#872300;}
.magenta.btn,.magenta.btn:visited{background-color:#a9014b;}
.magenta.btn:hover{background-color:#630030;}
.orange.btn,.orange.btn:visited{background-color:#ff5c00;}
.orange.btn:hover{background-color:#d45500;}
.yellow.btn,.yellow.btn:visited{background-color:#ffb515;}
.yellow.btn:hover{background-color:#fc9200;}