/* 
 * xHTML/CSS by 46bit.com
 * 
 * Copyright QualityAvatars.com 2009
 */

/* ------------------------------------- */

/* 
 * Reset Styles to make browsers more consistent.
 */

* {
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
}

a {
	color: #CC0000;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

/* ------------------------------------- */

/* 
 * Setup the main structure of the page.
 */

.clearfix {
	clear: both;
}

.space5 {
	padding-bottom: 5px;
}

.space10 {
	padding-bottom: 10px;
}

.space15 {
	padding-bottom: 15px;
}

.space20 {
	padding-bottom: 20px;
}

body {
	background: #C0C0C0 url(../img/background-tile.png) repeat-x top;
	font: 0.75em/1.7em Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
}

#container {
	width: 906px;
	margin: 0px auto;
	padding: 30px 30px 0px;
	background: #FFFFFF;
}

#footer {
	height: 25px;
	width: 966px;
	clear: both;
	margin: 0px auto;
	padding-bottom: 30px;
}

#footer #left-corner, #footer #right-corner {
	height: 25px;
	width: 50%;
	float: left;
	background: url(../img/container-footer.png) no-repeat left top;
}

#footer #right-corner {
	float: right;
	background: url(../img/container-footer.png) no-repeat right top;
}

/* ------------------------------------- */

/* 
 * This is the logo.
 */

h1, h1 a {
	display: block;
	height: 84px;
	width: 155px;
}

h1 {
	margin-bottom: 15px;
	background: url(../img/logo.png) no-repeat center center;
}

h1 span {
	display: block;
	text-indent: -9999px; /* Imagine what old websites will look like when people use displays this size! */
}

/* ------------------------------------- */

/* 
 * Main general content styling.
 */

.subtle-text {
	color: #666666;
}

/* ------------------------------------- */
p.small {line-height: 95%;font-size:x-small;color:#999999;}
p.smalltitle {line-height: 95%;font-size:x-small;color:#666666;}
h3 {color:#666666;font-size: 18px; font-weight: bold; color: rgb(102, 102, 102); margin-bottom: 10px;font-size:x-small;}

table.sample {
	border-width: 1px 1px 1px 1px;
	border-spacing: 5px;
	border-style: dashed dashed dashed dashed;
	border-color: gray gray gray gray;
	border-collapse: separate;
	background-color: white;
}



/* 
 * Breadcrumb Navigation
 * 
 * ie: home / category1 / category2
 */

.breadcrumb {
	display: inline;
	list-style: none;
}

.breadcrumb li {
	display: inline;
	padding-right: 7px;
}

.breadcrumb li.title {
	font-weight: bold;
}

.breadcrumb li.title span {
	font-weight: normal;
}

.breadcrumb li span {
	padding-left: 10px;
}

/* ------------------------------------- */

/* 
 * Pagination
 */

.pagination {
	list-style: none;
	position: relative;
}

.pagination li {
	display: inline;
	color: #C7C7C7;
	font-size: 0.83em;
	margin: 2px;
}

.pagination li.righten {
	color: #666666;
	font-size: 1em;
	position: absolute;
	right: 0;
	top: 1px;
}

.pagination li a {
	padding: 5px;
	border: 1px solid #C2C2C2;
	background: #F3F3F3;
	text-decoration: none;
}

.pagination li.number {
	background: #FFFFFF;
	padding: 5px;
	border: 1px solid #E2E2E2;
	text-decoration: none;
	color: #A7A7A7;
}

.pagination li.etc {
	padding: 5px;
	font-weight: bold;
	color: #B2B2B2;
}

.pagination li.active a, .pagination li a:hover {
	text-decoration: none;
	font-weight: bold;
	padding: 5px;
}

.pagination li.active a {
	color: #626262;
}

/* ------------------------------------- */

/* 
 * Category/Avatar List Styling
 */

.directory {
	list-style: none;
	min-width: 909px;
	margin-left: -3px; /* Stop this being indented by the li padding. */
	margin-right: -3px; /* Stop this being indented by the li padding. */
	margin-bottom: 0;
	text-align: justify;
	line-height: 0; /* Make sure only li padding affects the height of each row. */
}

.directory a {
	text-decoration: none;
}

.directory li {
	float: left;
	margin: 3px;
	text-align: justify;
}

.directory li:hover {
	background-color: #FFFF33;
}

.directory li.missingImageLi:hover {
	background-color: #FFFF99;
}

.directory img, .directory .missingImage {
	padding: 3px;
	border: 1px solid #CCCCCC;
	background: url(../img/ajax-loader.gif) no-repeat center center;
	display: block;
	width: 120px;
	height: 120px;
}

.directory .missingImage {
	background: url(../avatars/missing.jpg) no-repeat center center;
	width: 120px;
	height: 120px;
}

.directory .missingImage span {
	margin-left: 10px;
	font-size: 12px;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	display: block;
	line-height: 104px;
}

.directory img.alternate {  /* Applied to every second avatar. */
	border: 1px solid #999999;
}

/* ------------------------------------- */

/* 
 * Download Notes for images.
 */

.notes {
	float: right;
	width: 490px;
}

.notes .imagehosts {
	display: inline;
	list-style: none;
}

.notes .imagehosts li {
	display: inline;
	padding-right: 10px;
}

/* ------------------------------------- */