site.css

/* v1.0 | 20080212 */
@font-face {
  font-family: "Museo-500";
  src: url(/fonts/Museo500-Regular.otf);
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

html, body {
  height: 100%;
}

body{
	font:normal 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
//	background: #ececec;
  background: url(/images/noise.png) repeat;
	-webkit-transition:background 0.5s;
 	-moz-transition-duration:       0.5s;
	-o-transition-duration:         0.5s;
	-webkit-transition:background 0.5s;
	transition-duration:            0.5s;
}
body.lights_down{
  background:rgba(0,0,0,0.9);
}
a {
  color: #0072bc;
  -webkit-transition:    background 0.2s;
  -moz-transition:       background 0.2s;
  -o-transition:         background 0.2s;
  transition:            background 0.2s;
}
a.big_link {
  display:block;
  text-decoration:none;
  height:105px;
  padding:5px 5px 0;
  border-radius: 4px;
  -moz-border-radius: 4px;
}
#account a:hover {
  background-color: #0072bc;
  color: white;
  text-decoration: none;
}
.account a.big_link:hover { 
  background-color: #f7f7f7;
  -webkit-box-shadow:inset 0 0 5px #888;
  -moz-box-shadow:inset 0 0 5px #888;
}
/*.account.stay_alive a.big_link{
  background:rgba(152,251,152,0.3) url(/images/check.png) no-repeat 105% -20px;
}
.account.kill a.big_link{
  background:rgba(152,251,152,0.3) url(/images/reject.png) no-repeat 105% -20px;
}
*/.image-wrapper {
  max-width: 100px;
	float:left;
	margin:0 10px 0px 0;
}
.image-wrapper a:hover {
  background: none;
}
.image-wrapper img {
  width: 100%;
}

#container {
  clear: both;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin:0 auto -70px;
	width:960px;
	padding:0 10px;

}
.clear {
  height: 0;
  clear: both;
}

#site-header{
	overflow: auto;
}
#site-header h1 {
  float: left;
  margin: 0;
  font-family: 'Lato', arial, serif;
}

#logo{
	font-size: 20px;
	font-weight:bold;
	margin:0 0 20px;
	text-align:center;
	
}
#logo a {
  background: #C31E2A;
  border-bottom: 5px solid #8b030b;
  padding: 50px 20px 5px 20px;
  display: block;
  color: #fff;
  text-decoration:none;
/*text-shadow: 0 -1px 1px #8b030b;
  
  -webkit-transition:background 0.5s;
  -moz-transition-duration:       0.5s;
  -o-transition-duration:         0.5s;
  -webkit-transition:background 0.5s;
  transition-duration:            0.5s;*/
}
#logo a:hover{
  background: #b41c27;
}
#tagline {
  float: left;
  margin: 8px 20px;
  text-shadow: 0 1px 1px #fff;
  color: #444;
  font-size: 16px;
  line-height: 23px;
}
#tagline .byline {
  font-size: 10px;
  font-style: italic;
  font-weight: normal;
  color: #888;
}
.lights_down #tagline{
  color:#666;
  text-shadow:none;
}
#intro {
  float: left;
  font-size: 38px;
  text-shadow: 0 1px 1px #fff;
  color: #444;
  margin-top: 20px;
  margin-bottom: 40px;
}
#stats {
  float: left;
  margin-bottom:-5px;
  font-weight: bold;
  color: #444;
  text-shadow: 0 1px 1px white;
}
p{
  margin:0 0 10px;
}
#filter {
  float: right;
  margin-right: 10px;
  margin-bottom: -5px;
}
#filter .results {
  padding-right: 10px;
  text-shadow: 0 1px 1px #fff;
  color: #444;
  font-weight: bold;
}
input::-webkit-input-placeholder {
    color: #666;
}
#filter_by_username {
  width: 200px;
  font-size: 16px;
  background: #ddd;
  border: 1px solid #f7f7f7;  
  padding: 10px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow:inset 0 0 5px #888;
  -moz-box-shadow:inset 0 0 5px #888;
  
  -webkit-transition:    background 0.2s;
  -moz-transition:       background 0.2s;
  -o-transition:         background 0.2s;
  transition:            background 0.2s;
}
#filter_by_username:focus {
  background: white;
}

#accounts {
  clear: both;
	position: relative;
	z-index: 2;
	background: white;
	padding: 20px;
	border-radius: 4px;
  -moz-border-radius: 4px;
  -moz-box-shadow: 0px 0px 6px #aba;
  -webkit-box-shadow: 0px 0px 6px #aba;
}
#accounts .no_results {
  display: none;
  font-size: 20px;
}
#accounts .account{
  width:290px;
  float:left;
  margin:0 0 20px 0;
}
body.lights_down #account .account{
  -moz-box-shadow: 0 0 30px #aaa;
  -webkit-box-shadow: 0 0 30px #666;
}
#accounts .account h2{
  font-size:16px;
  margin:0 0 5px;
  font-family: "Museo-500", Museo, Helvetica, Arial, sans-serif;
}
#accounts .image-wrapper {
  width: 100px;
  height: 100px;
	overflow: hidden;
	
	border-radius:5px;
	-moz-border-radius:5px;
}
#accounts .image-wrapper img{	
	border-radius:5px;
	-moz-border-radius:5px;
}
#accounts .my_names {
  font-size: 14px;
  color: #444;
}
#accounts .account p {
  color: gray;
  
  -webkit-transition:    background 0.2s;
  -moz-transition:       background 0.2s;
  -o-transition:         background 0.2s;
  transition:            background 0.2s;
}
/*#accounts .account_hover {
  position: relative;
}
#accounts .account_hover header {
  position: absolute;
  -moz-border-radius: 4px;
  -moz-box-shadow: 0px 0px 6px #aba;
  -webkit-box-shadow: 0px 0px 6px #aba;
  padding: 25px;
  width: 290px;
  background: white;
  z-index: 10;
  left: -25px;
  top: -25px;
}
*/


#footer-padding {
  height: 70px;
}

#site-footer {
  clear: both;
  position: relative;
  height: 80px;
  margin-top: 40px;
  border-top: 3px solid #666;
	background:#333;
	color: #aaa;
	padding:10px;
}
.wrapper {
  width: 960px;
  margin: 0 auto;
}
span.amp {
   font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif;
   font-size:110%;
   font-style:italic;
}
#site-footer .amp {
  color: #ddd;
}
#site-footer a {
  color: white;
}
#site-footer .copyright {
  float: left;
}
#site-footer .credits {
  float: right;
}

/* =SINGLE ACCOUNT
--------------------------*/
#account {
  width:540px;
  margin: 50px auto;
  position:relative;
}
#account .account {
  background: #fff;
  padding: 20px;
  padding-left: 130px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -moz-box-shadow: 0px 0px 6px #aba;
  -webkit-box-shadow: 0px 0px 6px #aba;
  position:relative;
  z-index:200;
  min-height: 160px;
}
#account .meta {
  overflow: auto;
}
#account header {
  margin-bottom: 10px;
  overflow: auto;
}
#account .my_names {
  font-family: 'Lato', arial, serif;
  color: #444;
  font-size: 20px;
  margin-top: 10px;
}
#account .nicks {
  margin-top: 10px;
  font-size: 16px;
  color: gray;
}
#account header p strong {
  color: gray;
}
#account .image-wrapper {
  position: absolute;
  background: white;
  padding: 10px;
  left: -30px;
  -moz-box-shadow: 0px 0px 6px #aba;
  -webkit-box-shadow: 0px 0px 6px #aba;
  max-width: 125px;
}
#account .image-wrapper img {
  width: 100%;
  display:block;
}
#account .account h2 {
  font-family: "Museo-500", Museo, Helvetica, Arial, sans-serif;
  font-size: 46px;
  line-height: 50px;
}
#account a.primary_site {
  text-decoration: none;
}
#account .primary_site + p {
  margin-top: 10px;
}
#account .col {
  float: left;
  margin-right: 20px;
  width: 185px;
}
#account .col.last {
  margin: 0;
}
#account .col h3 {
  font-size: 16px;
  padding-left: 20px;
  margin: .3em;
}
#account .col h3#title-books {
  background:url(/images/books.png) no-repeat left;
} 
#account .col h3#title-sites{
  background:url(/images/screen.png) no-repeat left;
}
#account .col li {
  padding: 4px 0;
}
#account .col li a {
  padding: 1px;
}

#account .my_services {
  position: absolute;
  right: -40px;
  background: #ccc;
  top: 20px;
  z-index: 1;
  border-radius: 4px;
  -moz-border-radius: 4px;
  
  -webkit-transition:all 0.5s;
 	-moz-transition:all 0.5s;
	-o-transition:all 0.5s;
	-webkit-transition:all 0.5s;
	transition:all 0.5s;
}
#account .my_services:hover{
  right:-60px;
  background:#eee;
}
#account .my_services ul {
  border: 1px solid #f7f7f7;  
  padding: 15px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow:inset 0 0 5px #888;
  -moz-box-shadow:inset 0 0 5px #888; 
}

.my_services a {
  display:block;
  text-indent:-9999px;
  outline:0;
  width:32px;
  height:32px;
  margin:0 0 10px;
  opacity: 0.7;
  -moz-opacity: 0.7;
  filter:alpha(opacity=70);
  
  -webkit-transition:background 0.2s;
 	-moz-transition-duration:       0.2s;
	-o-transition-duration:         0.2s;
	-webkit-transition:background 0.2s;
	transition-duration:            0.2s;
}
.my_services a:hover {
  opacity: 1.0;
  -moz-opacity: 1.0;
  filter:alpha(opacity=100);
  background-color: transparent !important;
}
.my_services li:last-child a {
  margin:0;
}
.tooltip {
  position: absolute;
  left: -40px;
  z-index: 50;
  background: white;
  padding: 3px 8px;
}
a.twitter{
  background:url(/images/twitter_32.png) no-repeat 0 0;
}
a.facebook{
  background:url(/images/facebook_32.png) no-repeat 0 0;
}
a.github{
  background:url(/images/git_32.png) no-repeat 0 0;
}
a.mixi{
  background:url(/images/mixi_32.png) no-repeat 0 0;
}
a.iddy{
  background:url(/images/iddy_32.png) no-repeat 0 0;
}
a.friendfeed{
  background:url(/images/friendfeed_32.png) no-repeat 0 0;
}