@charset "utf-8";
/* CSS Document */

body{
	background-color:#f0f0e8;
	background-color:#72828b;
	background-color:#EBEBEB;
	
	text-align:center;
	background-image:url(/images/layout/body_bg.gif);
	background-image:none;
	background-repeat:repeat-x;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	display:block;
	margin:auto;
	margin-top:0px;
	margin-bottom:0px;
	
	/* added on 15 May 2015 */
	line-height:1.4em;
}

h1 {
	font:Arial, Helvetica, sans-serif;
	font-size:18px;
	margin-top:0px;
	margin-bottom:10px;
	line-height:1.5em;
	color:#CA0000;
	text-transform:capitalize;
}

h2 {
	font:Arial, Helvetica, sans-serif;
	font-size:16px;
	margin-top:15px;
	margin-bottom:5px;
	color:#CA0000;
}

/* using a wrapper because it also holds top menu, not just the columns container */
#wrapper{
	width:100%;
	margin:auto;
	margin-top:10px;
	margin-bottom:10px;
	text-align:center;
}


#top_menu{
	display:block;
	box-sizing:border-box;
	width:762px;
	margin:auto;
	text-align:right;
}

#top_menu a{
	text-transform:uppercase;
	text-decoration:none;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:13px;
	display:inline-block;
	padding:5px;
	color:#777;
}
#top_menu a:hover{
	color:#000;
}



#cols_container{
	text-align:left;
	
	display:flex;
	box-sizing:border-box;
	width:762px;
	height:100%;

	margin:auto;
	margin-top:0px;
	margin-bottom:0px;
	
	font-size:0px;

	/* hide overflow because pagination bottom border is lighter and it would overlap layout bottom border which is darker */
	overflow:hidden;
}


#left_col {	
	
	display:block;
	box-sizing:border-box;
	width:200px;
	/* disable this for full height, seems to work :P */
	height:fit-content;
	
	padding:10px;
	
	background-color:#FFF;
	
	text-align:left;
	font-size:12px;

	border:1px solid #CCC; 
	margin-right:10px;
}


#main_col {
	
	/* this need to allow overflow (default), in order to allow pagination bottom border to overlap layout border */
	
	display:block;
	box-sizing:border-box;
	width:552px;
	/* disable this for full height, seems to work :P */
	height:fit-content;

	background-color:#FFF;

	text-align:left;	
	
	padding:10px;
	padding-top:10px;
	padding-bottom:10px;
	font-size:13px;

	/* border on both left and main col, then we overlap them, to make sure border is always filled vertically */
	border:1px solid #CCC;
}



#main_col h1{
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:18px;
	color:#e10000;
	margin:0px;
	margin-bottom:10px;
}



#footer {
	display:block;
	clear:both;
	margin-top:8px;
	color:#777;
	font-family: monospace;
	font-size:13px;
}
#footer a:link, #footer a:visited {
	color:#999999;
	text-decoration:none;
}
#footer a:hover {
	color:#333333;
	text-decoration:underline;
}

.message_success {
	padding:1em;
	background-color:#009900;
	border:1px solid #006600;
	color:#FFFFFF;
	margin-top:0px;
	margin-bottom:10px;
}

.message_error {
	padding:1em;
	background-color:#CE0000;
	border:1px solid #990000;
	color:#FFFFFF;
	margin-top:0px;
	margin-bottom:10px;
}


.message_info {
	padding:4px;
	background-color:#FFFFCC;
	border:1px solid #993300;
	color:#990000;
	margin-top:0px;
	margin-bottom:10px;
}

a:link, a:visited {
	color:#CA0000;
}
a:hover{
	color:#FF0000;
}

.breadcrumb {
	color:#999999;
	font-size:11px;
	margin-top:-10px;
	margin-bottom:20px;
	padding:0px;
	letter-spacing:1px;
}
.breadcrumb a:link, .breadcrumb a:visited {
	color:#999999;
}
.breadcrumb a:hover {
	color:#333333;
}

.red_text {
	color:#FF0000;
}



/* listings list >>> */
.listings_list{
	width:100%;
	display:block;
	float:left;
	/* for when there are few listings and no pagination underneath, hide page bottom pagging */
	margin-bottom:-10px;
}

.listings_list_item{
	display:block;
	float:left;
	box-sizing:border-box;
	width:calc(100% + 20px);
	margin-left:-10px;
	margin-right:-10px;
	padding:10px;
}

.listings_list_item:nth-child(even){
	background-color:#F7F7F7;
}

a.listings_list_thumbnail{
	margin-right:10px;
	display:inline-block;
	float:left;
}

h3.listings_list_title{
	
	display:block;
	float:left;
	/* minus thumb, padding and margin(s) */
	width:calc(100% - 80px - 10px);
	
	font-size:14px;
	margin:0px;
	margin-top:-3px;
	padding:0px;
}

h3.listings_list_title a{
	text-decoration:none;
}


.listings_list_description {
	
	display:block;
	float:left;
	/* minus thumb, padding and margin(s) */
	width:calc(100% - 80px - 10px);

	margin-top:4px;
	
	font-family:Verdana, Arial, sans-serif;
	font-size:12px;
	color:#555;
	
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;

}

.listings_list_meta{
	float:left; 
	color:#999; 
	display:flex;  /* for better vertical centering of inner items */
	align-content:center; 
	align-items:center; 
	margin-top:4px;
}


hr{
	display:block;
	width:calc(100% + 20px);
	clear:both;
	height:0px;
	border:none;
	border-top:1px solid #B7B7B7;
	margin-left:-10px;
	margin-right:-10x;
	margin-top:10px;
	margin-bottom:10px;
}


/* generally remove IOS styling from some form elements */
/* !!! DO NOT remove webkit-appearence greedy like that or radio buttons would dissapear in Chrome !!! */
/*
input{
	-webkit-appearance: none;
    border-radius: 0;
}
*/


.pagination{
	display:inline-flex; 
	float:left;
	clear:both;
	box-sizing:border-box;
	width:calc(100% + 20px);
	margin-left:-10px; 
	margin-right:-10px;
	margin-bottom:-1px;
	bottom:0px;
	border-top:1px solid #EBEBEB;
	/* bottom border color should match site columns container that it usually overlaps */
	border-bottom:1px solid #CCC; 
	color:#999;
}

.pagination_center{
	display:flex;
	flex-grow:1;
	align-items:center;
	align-content:center;
	justify-content:center;
}

.pagination a{
	color:#DB0003;
	display:flex;
	text-decoration:none;
	margin:0px;
	font-size:24px;	
}
.pagination a svg{
	width:24px;
	height:24px;
	padding:0.5em;
	fill:#DB0003;
}

.pagination a:nth-of-type(1){
	border-right:1px solid #EBEBEB;
}
.pagination a:nth-of-type(2){
	border-right:1px solid #EBEBEB;
}
.pagination a:nth-of-type(3){
	border-left:1px solid #EBEBEB;
}
.pagination a:nth-of-type(4){
	border-left:1px solid #EBEBEB;
}

.pagination a:hover, .pagination a svg:hover{
	background-color:#DB0003;
	color:#FFF;
	fill:#FFF;
}

a.pagination_disabled, a.pagination_disabled svg{
	color:#CCC;
	fill:#CCC;
}
a.pagination_disabled:hover, a.pagination_disabled svg:hover{
	background-color:#FFF;
	color:#CCC;
	fill:#CCC;
	cursor:default;
}



.listing_actions {
	font-size:13px;
}

.listing_actions a:link, .listing_actions a:visited{
	border:1px solid #CCCCCC;
	background-color:#FAFAFA;
	background-repeat:no-repeat; 
	text-decoration:none;
	padding:2px;
	padding-left:24px;
	line-height:18px;
	color:#000000;
	/*width:175px;*/
	display:block;
	margin-bottom:5px;
	margin-top:5px;
}
.listing_actions a:hover{
	border:1px solid #FDBE00;
	background-color:#FFFF00;
	margin-bottom:5px;
}





.left_col_categories{
	box-sizing:border-box;
	display:block;
	width:calc(100% + 20px);
	margin:-10px;
	float:left;
}
.left_col_categories a:link, .left_col_categories a:visited{
	font-size:13px;
	color:#999999;
	text-decoration:none;
	padding:5px;
	padding-left:10px;
	display:block;
	box-sizing:border-box;
width:100%;
	border-top:1px solid #EBEBEB;
	border-top:none;
}
.left_col_categories a:hover{
	color:#CA0000;
	background-color:#FAFAFA;
}

.left_col_categories a.active_cat:link, .left_col_categories a.active_cat:visited{
	color:#CA0000;
	background-color:#FAFAFA;
	
	/*
	background-color:#CC0000;
	color:#FFF;
	*/

}
.left_col_categories a.active_cat:hover{
	color:#CA0000;
	background-color:#FAFAFA;
	cursor:default;
}

.left_col_categories a:first-of-type{
	border-top:0px;
}
.left_col_categories a:nth-child(even){
	/*background-color:#FAFAFA;*/
}





input.button_110{
	border:none;
	color:#FFF;
	background-color:#e10000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	letter-spacing:1px;
	text-transform:uppercase;
	padding:0px;
	padding-top:1px;
	width:110px;
	height:30px;
	/* note that it is "background" NOT "background-image", that would not work in IE and PNG would not be 100% transp*/
	background: url(/images/button_110.gif) no-repeat;
	cursor:pointer;
	
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	 
	text-shadow:-1px -1px #9A0000;

}

input.button_110:hover{
	background-position:0px -30px;
}


input.button_190{
	border:none;
	color:#FFF;
	background-color:#e10000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	letter-spacing:1px;
	text-transform:uppercase;
	padding-top:2px;
	width:190px;
	height:30px;
	/* note that it is "background" NOT "background-image", that would not work in IE and PNG would not be 100% transp*/
	background: url(/images/button_190.gif) no-repeat;
	cursor:pointer;
	
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	
	text-shadow:-1px -1px #9A0000;
}

input.button_190:hover{
	background-position:0px -30px;
}

a.liquid_button, .liquid_button{
	color:#FFF;
	text-decoration:none;
	text-align:center;

	padding:5px;
	display:inline-block;
	background: url(/images/liquid_button.gif) no-repeat;
	/* "background:" can overwrite the "background-color:", depending on the order */
	background-color:#e10000;
	border:1px solid #9a0000;
	
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	
	/* needed for the div/span version */
	cursor:pointer;
}

a.liquid_button:hover, .liquid_button:hover{
	background-position:0px -50px;
}


.comments{
	display:block;
	width:100%;
	margin-top:1em;
	margin-bottom:-10px;
	float:left;
}

.comment_row{
	box-sizing:border-box;
	width:calc(100% + 20px); 
	padding:10px; 
	margin:0px; 
	margin-left:-10px; 
	margin-right:-10px; 
	border-top:1px dotted #999; 
	clear:both; 
	float:left;
}

.comment_avatar{
	float:left;
	border:0px;
}

.comment_meta{
	float:left; 
	/* minus avatar size and padding */
	width:calc(100% - 64px - 10px);
	margin:0px; 
	margin-left:10px; 
	margin-bottom:5px;
}

.comment_meta_name{
	float:left; 
	width:200px;
}

/* the span that contains comment date and edit/delete links */
.comment_meta_actions{
	width:200px;
	float:right; 
	text-align:right; 
	color:#999;
}

.comment_meta_actions a{
	text-decoration:none;
}

.comment_text{
	float:left; 
	/* minus avatar size and padding */
	width:calc(100% - 64px - 10px);
	padding:0px; 
	margin:0px; 
	margin-left:10px; 
	color:#555;
}








/* the lightbox appearing in center of the screen and showing content */
#center_lightbox{
	display:none; /* note that display should be set to 'TABLE' when activating the lightbox */
	position:fixed;
	top:0px; 
	left:0px; 
	height:100%; 
	width:100%; 
	text-align:center;
	/* black transparent background */
	background-color: rgba(0,0,0, 0.3);
}

#center_lightbox_cell{
	display:table-cell; 
	vertical-align:middle; 
	text-align:center; 
	width:100%;
}

#center_lightbox_content{
	box-sizing:border-box;
	padding:10px; 
	background-color:#FFF; 
	min-width:300px;
	display:inline-block;
	text-align:left;
	border:4px solid #C60000;

	
	border:0px;
	border-radius:4px;
	/* withot hiding overflow it would show square corners on rollover of rounded margins */
	overflow:hidden;
}




a.facebook_button{
	background-color:#3b5998; 
	color:#FFF; 
	text-decoration:none; 
	display:inline-flex; 
	box-sizing:border-box;
	padding:0.5em; 
	padding-right:1em; 
	align-content:center; 
	align-items:center; 
	border-radius:3px; 
	border:1px solid #293e79; 
	text-shadow:-1px -1px #293e79; 
	font-family:Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; 
	font-size:14px; 
	font-weight:600; 
	line-height:1em;
}
a.facebook_button svg{
	display:inline-block;
	width:24px; 
	height:24px; 
	margin-right:0.5em;
	-webkit-filter: drop-shadow(-1px -1px 0px #293e79); 
	filter: drop-shadow(-1px -1px 0px #293e79);
}


a.twitter_button{
	background-color:#1da1f2; 
	color:#FFF; 
	text-decoration:none; 
	display:inline-flex; 
	box-sizing:border-box;
	padding:0.5em; 
	padding-right:1em; 
	align-content:center; 
	align-items:center; 
	border-radius:3px; 
	border:1px solid #1485ee; 
	text-shadow:-1px -1px #1485ee; 
	font-family:Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; 
	font-size:14px; 
	font-weight:600; 
	line-height:1em;
}
a.twitter_button svg{
	display:inline-block;
	width:24px; 
	height:24px; 
	margin-right:0.5em;
	-webkit-filter: drop-shadow(-1px -1px 0px #1485ee); 
	filter: drop-shadow(-1px -1px 0px #1485ee);
}




/* ratings >>> */

.tnt_ratings{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	display:block;
	width:200px;
	height:60px;
	
}

.rating_stars{
	margin-bottom:4px;
}

.rating_star{
	padding:2px;
	color:#F00;
	float:left; 
	cursor:pointer;
}

.rating_message_1{
	color:#555;
	display:inline-block;
	clear:left; /* this is needed to go to next line in IE */
	line-height:1.5em;
	margin-left:2px;
}

.rating_message_2{
	display:block;
	clear:left; /* this is needed to go to next line in IE */
	line-height:1.5em;
	color:#CCC;
	margin-left:2px;
	display:none; /* hide on this site (click to rate, you voted, etc), make it simpler */
}
/* <<< ratings */