main.css

.clear {
clear: both;
float: none !important;
}

body {
position: relative;
margin: 5px;
background-color: #161616;
color: #aeaeae;
font-family: arial, sans-serif;
}

a {
color: white;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

body > div {
float: left;
position: absolute;
}

body > div:first-child {
top: 0;
left: 0;
width: 295px;
}

body > div:nth-child(2) {
top: 0;
left: 295px;
right: 0;
}

header {
margin: 5px;
min-height: 143px;
}

header > h1 {
float: left;
margin: 0.67em 0.6em;
}

header > img {
float: left;
height: 80px;
width: 80px;
}

header > aside {
float: left;
}

section {
background-color: #363636;
margin: 5px;
padding: 5px 10px;
position: relative;
-webkit-box-shadow: 0 0 4px black;
border: 1px solid #191919;
}

#friends {
clear: left;
}

#selected, #games {
min-width: 507px;
}

input[type="text"] {
background-color: #161616;
border: 1px solid #777777;
color: #e1e1e1;
border-radius: 2px;
}

input[type="submit"], input[type="button"] {
background-color: #4A4846;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(92,89,86, 1)), to(rgba(74,72,70, 1)));
color: #D1CFCD;
border: 1px solid #706D69;
text-transform: uppercase;
font-size: 0.6em;
height: 20px;
position: relative;
top: -2px;
padding: 0 5px;
border-radius: 2px;
}

input[type="submit"]:hover, input[type="button"]:hover,
input[type="submit"]:focus, input[type="button"]:focus {
border-color: #99938D;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(105,102,99, 1)), to(rgba(75,73,71, 1)));
}

h2 {
margin: 5px;
}

section > h2 {
float: left;
}

section > form {
float: left;
margin: 7px 0;
}

.help {
display: none;
clear: both;
margin: 0 auto;
padding: 5px;
text-align: left;
max-width: 600px;
line-height: 1.4em;
}

.help > code {
display: block;
text-align: center;
}

.help strong {
text-decoration: underline;
font-size: larger;
}

.help:last-child {
display: block;
}

#friends > form {
margin-top: 0;
}

#friends > form > input[type="text"] {
width: 135px;
}

.content {
margin: 5px 0;
background-color: #161616;
border: 1px solid #4b4b4b;
-webkit-box-shadow: inset 0px 0px 4px black;
border-radius: 4px;
overflow: auto;
clear: left;
min-height: 84px;
}

#games > .content {
min-height: 210px;
}

#games > .content[visiblegames]:after,
#games > .content[visiblegames]:before {
content: attr(visiblegames) " games shown here, " attr(nonvisiblegames) " other games not visible";
display: block;
text-align: center;
margin: 15px auto;
}

#games > .content[visiblegames][nonvisiblegames="0"]:after,
#games > .content[visiblegames][nonvisiblegames="0"]:before {
content: attr(visiblegames) " total games";
}

#games > .content[nonvisiblegames][visiblegames="0"]:after,
#games > .content[nonvisiblegames][visiblegames="0"]:before {
display: none;
}

#friends > .content {
min-height: 263px;
}

#selected > .content {
max-height: 168px;
height: 168px;
}

#selected > .content > .user {
float: left;
}

.user, .game {
padding: 5px;
margin: 5px;
font-weight: normal;
border: 1px solid black;
border-radius: 4px;
}

.user.selected {
background-color: #333;
}

/*users with visibilitystate != 3 or 2 should be darkred*/
.user[visibilitystate] {
border-color: darkred;
}

/*totally visible to me*/
.user[visibilitystate="3"] {
border-color: black;
}

/*friendsonly, not a friend*/
.user[visibilitystate="2"] {
border-color: #aa5000;
}

.user[fetchinguser="true"] {
border-color: #111;
}

.user[fetchinguser="true"] > input {
border-style: dashed;
}

.user[fetchinggames="true"] {
border-style: dotted;
}

.user[fetchinggames="true"] > input {
border-style: dotted;
}

.user[onlinestate="in-game"] > input {
border-color: #b1fb50;
}

.user[onlinestate="online"] > input {
border-color: #6fbdff;
}

.user:hover {
background: -webkit-gradient(linear, left top, right top, from(rgba(51, 51, 51, 1)), to(rgba(62, 92, 133, 0)));
}

.user.selected:hover {
background: -webkit-gradient(linear, left top, right top, from(rgba(51, 51, 51, 1)), to(rgba(51, 51, 51, 0)));
}

.game[notsharedamong] {
background-color: #321515;
}

.game[notsharedamong="0"] {
background-color: #153215;
}

/*If we're just looking at one user's games, don't color*/
.game[notsharedamong="0"][sharedamong="1"] {
background-color: transparent;
}

.game[notsharedamong="1"] {
background-color: #323215;
}

.game[notsharedamong="2"] {
background-color: #322215;
}

.user > input, .user > div,
.game > img, .game > div  {
float: left;
}

.user > input, .game > img {
margin: 3px;
border: 4px solid #676767;
border-radius: 4px;
background-color: #454545;
}

.user > input {
height: 48px;
width: 48px;
cursor: pointer;
color: #aeaeae;
}

.user > input:hover, .user > input:focus {
border-color: white;
}

.game > img {
width: 184px;
height: 69px;
}

.user > div, .game > div {
margin-top: 3px;
margin-left: 5px;
margin-right: 5px;
}

.user > div {
width: 150px;
cursor: default;
}

.user > div > h4, .user > div > h6 {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.user > div > h4 {
margin: 0;
font-weight: inherit;
font-size: 0.9em;
}

.game > div > h4 {
margin: 0;
font-weight: bolder;
font-size: 1.2em;
} 

.user > div > h6 {
margin: 0 10px;
font-weight: inherit;
font-size: 0.6em;
}

.game > div > h6 {
margin: 0;
color: #777;
font-weight: inherit;
font-size: 0.7em;
}

.game > div > a + a {
margin-left: 10px;
}

.game > div > a:last-child {
display: block;
margin-top: 7px;
}

.game > div > a:last-child:after {
content: attr(sharedamong) " people own this game, " attr(notsharedamong) " don't";
}

.game > div > a[sharedamong="1"]:after {
content: attr(sharedamong) " person owns this game, " attr(notsharedamong) " don't";
}

.game > div > a[notsharedamong="1"]:after {
content: attr(sharedamong) " people own this game, " attr(notsharedamong) " doesn't";
}

.game > div > a[sharedamong="1"][notsharedamong="1"]:after {
content: attr(sharedamong) " person owns this game, " attr(notsharedamong) " doesn't";
}

.game > .ownership {
clear: left;
float: none;
background-color: #161616;
border: 1px solid black;
border-radius: 3px;
display: none;
padding: 5px;
margin: 0 3px;
/*Yucky hack to just get some top margin*/
position: relative;
top: 5px;
margin-bottom: 8px;
}

.game > .ownership > ul {
overflow: auto;
display: block;
border-radius: 2px;
margin: 5px;
padding: 5px;
}

.game > .ownership > ul:first-child {
background-color: #153215;
}

.game > .ownership > ul:last-child {
background-color: #321515;
}

.game > .ownership > ul > li {
list-style-type: none;
float: left;
margin: 0;
}

.game > .ownership > ul > li:after {
content: ",";
margin-right: 4px;
}

.game > .ownership > ul > li:last-child:after {
content: none;
}

.user a, .game a {
font-size: smaller;
}

.user > div > a {
font-size: 0.7em;
}

.user > div > a + a {
margin-left: 5px;
}