body {
	font-family: Arial;
	font-size: 12px;
	color: #333333;
}

.container
{
    margin: 0px;
	padding: 0px;
    width: 940px;
    height: 616px;
	top:0px;
	left: 0px;
    position:absolute;
    background-color: #fff;
	overflow: hidden;
}

#loading {
	font-size: 14px;
	font-family: Arial;
	background-color: #fff;
	height: 460px;
	padding-top: 240px;
	text-align: center;
	width: 940px;
	position: absolute;
	line-height: 18px;
	z-index: 999999999;
	left: 0;
	top: 0;
	color: #999;
}

#header
{
	position:absolute;
	top: 0px;
	left: 0px;
	width: 940px;
	height: 155px;
	background-color: #ddd;
}

#info-group
{
	position:absolute;
	width: 940px;
	height: 155px;
}

#image-holder
{
	position:absolute;
	width: 153px;
	height: 155px;
	background-color: #999;
	overflow: hidden;
}

#image-holder img
{
	height: 100%;
}

.tinter {
	position: absolute;
	width: 153px;
	height: 155px;
	opacity:0.4;
	filter:alpha(opacity=40); /* For IE8 and earlier */
}


#missing-name
{
	position:absolute;
	top: 35px;
	left: 175px;
	font-family: Georgia;
	font-size: 20px;
	color: #801100;
}

#missing-info
{
	position:absolute;
	top: 62px;
	left: 175px;
	font-family: Arial;
	font-size: 12px;
	width: 440px;
	height: 84px;
	color: #666;
	line-height: 14px;
	overflow: hidden;
}

#missing-additional
{
	position:absolute;
	top: 62px;
	right: 10px;
	width: 280px;
	font-family: Arial;
	font-size: 12px;
	line-height: 14px;
	padding-left: 10px;
	border-left: 1px dotted #666;
}

#missing-additional strong
{
	font-weight: bold;
}

#page-counter
{
	position:absolute;
	bottom: 0px;
	right: 0px;
	font: 10px Arial;
    color: #801100;
    font-style: italic;
    padding: 4px 10px 4px 10px;
}

#prisoner-counter
{
    color: #801100;
   
}


#blocker {
	
	 margin: 0px;
	padding: 0px;
    width: 940px;
    height: 616px;
	top:0px;
	left: 0px;
    position:absolute;
    background-color: #fff;
    z-index: 101;
}

#grid-container {
	position: absolute;
	top: 165px;
	left: 0px;
	width: 940px;
	z-index: 100;
}



#grid {
	position: absolute;
	top: 0px;
	left: 53px;
}

#grid-background {
	position: absolute;
	height: 415px;
	background-color: #fff;
}



.cell {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #000;
	cursor: pointer;
	overflow: hidden;
}

div.cell:hover {
	border: 4px solid #333;
	width: 92px;
	height: 92px;
}

div.cell:hover img {
	position: absolute;
	top: -10px;
	left: -10px;
	width: 120px;
	height: 120px;
	
}

.cell-details {
	position: absolute;
	bottom: 0px;
	width: 100%;
	
	color: #fff;
	font-family: Arial;
	font-size: 10px;
	padding: 5px;
	/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

.cell img {
	position: absolute;
	width: 100%;
	
}

.nav {
	position: absolute;
	width: 48px;
	height: 415px;
	background-color: #666;
	top: 165px;
	z-index: 999;
	cursor: pointer;
	transition: opacity 0.4s;
	-moz-transition: opacity 0.4s; /* Firefox 4 */
	-webkit-transition: opacity 0.4s; /* Safari and Chrome */
	-o-transition: opacity 0.4s; /* Opera */
}

.nav-bg {
	position: absolute;
	width: 48px;
	height: 415px;
	background-color: #ddd;
	top: 165px;
	z-index: 998;
}


.nav:hover {
	background-color: #801100;
	
}

#left-nav-bg {
	
	left: 0px;
}

#right-nav-bg {
	right: -1px;
}

#left-nav {
	
	left: 0px;
	background-image:url('../images/left-chevron.png');
	background-position: 15px 195px;
	background-repeat: no-repeat;
}

#right-nav {
	right: -1px;
	background-image:url('../images/right-chevron.png');
	background-position: 14px 195px;
	background-repeat: no-repeat;
}

#controls-strip {
	position: absolute;
	left: 153px;
	width: 787px;
	height: 22px;
	background-color: #fff;
}

#search-holder {
	position: absolute;
	right:0px;
	z-index: 9999999;
	font: 14px Arial;
    color: #333;
    background-repeat: no-repeat;
	background-image:url('../images/search-button.png');
	width: 178px;
	height: 22px;
}

#search-holder input {
	height: 15px;
	width: 150px;
	position: absolute;
	right: 0px;
}

#filter-heading {
	position: absolute;
	font-weight: bold;
	font-size: 12px;
	left: 15px;
	top: 4px;
	color:#999;
}

#reset-button {
	position: absolute;
	font-size: 12px;
	left: 560px;
	top: 4px;
	color:#801100;
	z-index: 99999999;
	cursor: pointer;
}

#reset-button:hover {
	text-decoration: underline;
}

#filters-holder {
	position: absolute;
	z-index: 9999999;
	height: 22px;
	left: 60px;
	top: -1px;
}



#filter-checkbox .checkbox {
	display: inline-block;
	float: left;
	margin-right: 15px;
}


.checkbox,
.radio {
    /* Enable absolute positioning of the hidden form controls */
    position:relative;
    /* Just a bit of space. */
    margin-bottom:0.5em;
    /*
    Match line-height to the height of the replacement image to ensure it
    doesn't get clipped
    */
    line-height:22px;
   	font: 12px Arial;
    color: #666;
}
fieldset :last-child {
    margin-bottom:0;
}
/*
Position and hide the real checkboxes and radio buttons.
The inputs are made transparent instead of completely hidden to preserve
clickability in browsers that don't have clickable labels, like Safari for
iOS 5 and older.
*/
input[type="checkbox"],
input[type="radio"] {
    position:absolute;
    /* Match the image dimensions */
    width:22px;
    height:22px;
    /* Reset anything that could peek out or interfere with dimensions */
    overflow:hidden;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    opacity:0;
}
/*
Insert a pseudo element inside each label and give it a background
image that will become the custom checkbox or radio button.
Using inline-block lets you use vertical-align to adjust it vertically
as needed.
*/
.cb_0 input[type="checkbox"] + label:before {
    display:inline-block;
    width:22px;
    height:22px;
    margin-right:5px;
    padding-top:2px;
    background:url('../images/checkbox_red.png') no-repeat;
    content:" ";
    vertical-align: middle;
}

.cb_1 input[type="checkbox"] + label:before {
    display:inline-block;
    width:22px;
    height:22px;
    margin-right:5px;
     padding-top:2px;
    background:url('../images/checkbox_yellow.png') no-repeat;
    content:" ";
    vertical-align: middle;
}

.cb_2 input[type="checkbox"] + label:before {
    display:inline-block;
    width:22px;
    height:22px;
    margin-right:5px;
     padding-top:2px;
    background:url('../images/checkbox_green.png') no-repeat;
    content:" ";
    vertical-align: middle;
}

.cb_3 input[type="checkbox"] + label:before {
    display:inline-block;
    width:22px;
    height:22px;
    margin-right:5px;
     padding-top:2px;
    background:url('../images/checkbox_blue.png') no-repeat;
    content:" ";
    vertical-align: middle;
}

.cb_4 input[type="checkbox"] + label:before {
    display:inline-block;
    width:22px;
    height:22px;
    margin-right:5px;
     padding-top:2px;
    background:url('../images/checkbox_purple.png') no-repeat;
    content:" ";
    vertical-align: middle;
}


/*
Position the background image differently depending on the state of each
checkbox and radio button.
*/
input[type="radio"]:focus + label:before {
    background-position:0 -22px;
}
input[type="radio"]:checked + label:before {
    background-position:0 -44px;
}
input[type="radio"]:checked:focus + label:before {
    background-position:-0 -66px;
}
input[type="checkbox"] + label:before {
    background-position:0 0;
}
input[type="checkbox"]:focus + label:before {
    background-position:0 -22px;
}
input[type="checkbox"]:checked + label:before {
    background-position:0 -44px;
}
input[type="checkbox"]:checked:focus + label:before {
    background-position:0 -66px;
}


.activity-box {
	display: inline-block;
	float: left;
	width: 15px;
	height: 5px;
}

.activity-holder {
	position: absolute;
}


.red {
	background-color: #d61d00;
}

.yellow {
	background-color: #ffcd17;
}

.green {
	background-color: #afcd00;
}

.blue {
	background-color: #4c8dc6;
}

.purple {
	background-color: #553c8c;
}


