styles.css

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,600,700);

body
{
font-family: 'Titillium Web', 'Segoe UI', 'Lucida Grande', sans-serif;
margin: 0;
padding: 0;
font-size: 10pt;
background: #f0f0f0;
}

.top
{
background: #000000;
padding: 5px 0px 5px 10px;
color: #ffffff;
}

.top h1
{
font-size: 12pt;
font-weight: normal;
margin: 0;
}

strong
{
font-weight: 600;
}

/****** TABS ******/

tabs
{
display: block;
background: #f0f0f0;
padding: 12px 0px 2px 8px;
margin: 0;
border-bottom: solid #d0d0d0 1px;
font-weight: 600;
}

tab
{
padding: 2px 10px 1px 10px;
border: solid #e0e0e0 1px;
border-bottom: solid #fafafa 1px;
background: #fafafa;
color: rgba(0, 0, 0, .80);
}

tab.active
{
padding: 2px 10px 4px 10px;
border: solid #d0d0d0 1px;
border-top: solid #d00000 2px;
border-bottom: none;
background: #ffffff;
color: #000000;
}

tab:hover
{
border-top: solid #ce8a8a 1px;
background: #f7f7f7;
cursor: pointer;
}

tab.active:hover
{
border-top: solid #d00000 2px;
background: #ffffff;
cursor: default;
}

filter
{
display: block;
margin-top: -7px;
font-size: 8pt;
float: right;
margin-right: 5px;
padding: 3px;
color: #404040;
border: solid #f0f0f0 1px;
cursor: pointer;
text-transform: uppercase;
}

filter.selected
{
color: #000000;
border: solid #30cf30 1px;
background: #50df50;
}

/****** CONTENT ******/

.main
{
background: #ffffff;
border: solid #ffffff 1px;
}

ul
{
list-style-type: none;
margin: 0;
padding: 0;
font-size: 0;
}

.content
{
margin: 9px;
margin-left: 0;
margin-right: 0;
display: none;
}

.content.active
{
display: block;
}

/****** TILE ******/

tile
{
display: inline-block;
vertical-align: top;
border: solid #d0d0d0 1px;
margin: 0px;
margin-left: 10px;
margin-bottom: 10px;
padding: 1px;
font-size: 10pt;
cursor: default;
}

tile span.renter, tile span.release
{
color: #ffffff;
font-weight: 600;
text-decoration: underline;
}

tile.notowned
{
background: #f0f0f0;
opacity: .4;
}

tile.notreleased
{
background: #f0f0f0;
opacity: .2;
}

tile.rented
{
border-color: #ffa0a0;
background: #fff0f0;
}

tile.completed
{
border-color: #60af60;
background: #f0fff0;
}

tile.notplayed
{
background: #f0f0f0;
opacity: .75;
}

tile.invisible
{
display: none;
}

tile img
{
width: 180px;
height: 247px;
display: block;
}

tile achievements
{
display: block;
font-size: 11px;
background-color: #e0e0e0;
padding: 2px;
border-top: solid #d0d0d0 1px;
}

tile.rented achievements
{
background-color: #e0a0a0;
border-top: solid #d09090 1px;
}

tile id
{
display: none;
}

tile.notreleased progress
{
display: none;
}

tile.notreleased achievements
{
display: none;
}

tile progressbar
{
display: block;
margin: 0;
background-color: #ffffff;
border: solid #909090 1px;
height: 6px;
padding-right: 2px;
}

tile.rented progressbar
{
background: white;
}

tile progressbar bar
{
display: block;
height: 4px;
margin: 1px;
font-size: 0;
}

tile progressbar bar.p0
{
background-color: #ff0f00;
}

tile progressbar bar.p10
{
background-color: #ff4300;
}

tile progressbar bar.p20
{
background-color: #ff7900;
}

tile progressbar bar.p30
{
background-color: #ffad00;
}

tile progressbar bar.p40
{
background-color: #ffc700;
}

tile progressbar bar.p50
{
background-color: #ffd800;
}

tile progressbar bar.p60
{
background-color: #c7e007;
}

tile progressbar bar.p70
{
background-color: #aae50b;
}

tile progressbar bar.p80
{
background-color: #72ed12;
}

tile progressbar bar.p90
{
background-color: #39f619;
}

tile progressbar bar.p100
{
background-color: #06fe20;
}

tile cover
{
display: block;
position: relative;
}

tile cover name
{
display: block;
position: absolute;
background-color: rgba(4, 4, 4, .70);
bottom: 0;
left: 0;
padding: 5px;
width: 170px;
max-width: 170px;
color: #ffffff;
text-shadow: 0 0 8px #000000;
}

tile.rented cover name
{
background-color: rgba(240, 4, 4, .70);
}

/****** FOOTER ******/

footer
{
display: block;
border-top: solid #d0d0d0 1px;
padding: 5px;
clear: both;
}

footer a
{
color: #005000;
}

footer right
{
float: right;
}

clear
{
cursor: pointer;
}

sort
{
display: inline;
color: #404040;
cursor: pointer;
}

sort.selected
{
color: #005000;
font-weight: 700;
}