/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}




/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}



/* ==========================================================================
   Author's custom styles
   ========================================================================== */

 body {
background-color: #aeaeae;    color: #999999;
    font-style:normal; font-variant:normal; font-weight:normal;     
        font: 12px/20px Helvetica, Helvetica Neue, Arial;
    
   margin: 0px 5px;
}



a, a:visited { color: #e61e85; text-decoration: underline; }


#wrap {	padding:0px; width: 100%; 
   margin: 0px auto;
	background-color:#291727; }

#inner_wrap { width: 100%;
			
  -webkit-align-content: stretch;
   align-content: stretch;

				 }	

.rounded { 	    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
		}	


.shadow {box-shadow:  rgba(0,0,0,0.8)  2px 2px 1px 1px;
		 -webkit-box-shadow:  rgba(0,0,0,0.8)  2px 2px 1px 1px; 
		 -moz-box-shadow:  rgba(0,0,0,0.8)  2px 2px 1px 1px; 

		}



.clear {clear:both;}

.flex-container {   display: -webkit-box;
 					display: -moz-box;
 					display: -ms-flexbox;
  					display: -webkit-flex;
  					display: flex;

				     -webkit-flex-wrap: wrap;
				    flex-wrap: wrap; 
					
				    align-items: stretch; 
				    webkit-align-items: stretch;
    /* justify-content: space-around; */
     }	



.item-wrapper { width: 100%; display: -webkit-flex;
    display: flex;
     -webkit-flex-wrap: wrap;
    flex-wrap: wrap; 
    align-items: stretch; 
     justify-content: space-around;
 } 	



.leftpanel { max-width: 100%; width: 100%;
			 flex: 0 1 auto; 
			 order: 1; overflow: hidden;
			 display: inline-block; 
			 position: relative;
			}
			 
.rightpanel {   margin: 0px 0px 5px 5px;  display: none;
			flex: 1 1 auto;
			order: 2;
			 
			/* max-width: 250px; */
			/* background-color:#fff;
			-webkit-border-radius: 4px;
   			 -moz-border-radius: 4px;
  			  border-radius: 4px; */
  			  display: none;
  			    			
				position: relative;

			}		 



.white { background-color:#fff;
		 		 padding: 10px 4px 10px 4px;
		 
		 -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    margin: 10px 5px; font-size: 1em;}
    
h2, h1 {
    text-align: left;
    margin: 0px 0px 10px 0px;
    color: #e61e85;
    font-weight: bold;
   font-size: 14px;
    text-transform: uppercase; }   
    
#updates h1, #featured h2 { padding: 10px 0px; border-bottom: 1px solid #c9c9c9; }    
    
.rightpanel .white {   width: 96%;    position: absolute; height: 100%; overflow: hidden; }  
    
    
    
    
.white h3 { text-align:center;
			margin: 10px;
			font-family: 'Hind', sans-serif;
			font-size: 18px;
			 color: #5191FB;
			 text-shadow: 1px 1px #000000;
			 text-transform: uppercase;
			 line-height: 24px;
			}    
    
    
a.btn { text-decoration: none; }    

.btn-more {
  box-sizing: border-box;
  position: relative;
  display: block;
  padding: 10px 0;
  border: 1px solid #343434;
  border-radius: 2px;
  color: #fff;
  text-decoration: none !important;
  text-align: center;
  text-transform: uppercase;
  font: 300 14px/16px 'Nunito', sans-serif;

  margin: 5px auto 15px auto;
  width: 720px;
  max-width: 95%;
 
  overflow: visible;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */

  
/*   background-color:rgba(19,19,19,1); */
 /* box-shadow:  rgba(0,0,0,0.8)  2px 2px 1px 1px;
		 -webkit-box-shadow:  rgba(0,0,0,0.8)  2px 2px 1px 1px; 
		 -moz-box-shadow:  rgba(0,0,0,0.8)  2px 2px 1px 1px; */
		 
		 -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

}

.btn-more:after {
  position: absolute;
  bottom: -14px;
  left: 50%;
  margin-left: -12px;
  width: 16px;
  height: 14px;
  background: url(../images/bg-btn-more3.png) 0 0 no-repeat;
  content: "";
}
 
 
 
 
 
.joinbutton { width: 100%; max-width: 483px;
			  height: 76px;
			      background-image: url("../images/joinbutton_big.png");
   			 background-repeat: no-repeat;
    		background-position: center top;
    			background-size: 100% 100%; 
    			display: block; }
    			
.rightpanel .joinbutton {    background-image: url("../images/joinbutton-small.png"); }    	

#ticklist_left { display: block; }		
    			
/*------------------- tag search -------------------------------------------
---------------------------------------------------------------------------*/    			
 
.searchform input { font-size: 14px; padding: 4px; color:#000; width: 67%; max-width: 67%}
.searchform #find2, .searchform #sitename { width: 75%; max-width: 75%; }
.searchform { text-align: left; border-bottom: 1px dotted #9f9e9e; margin-bottom: 20px; 
			display: block; color: #fff; background-color:#d2d1d1; line-height: 21px; padding: 10px 5px;  
			margin: 2px 5px 15px 5px;
			-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; }
    
.searchform #search-button { margin: 0px 5px 0px 10px; cursor: pointer; } 

#searchform { padding: 0px; margin:0px; }  
 
 

 
 
p.tagsearch { margin: 2px; font-size: 11.5px; text-align: left;  }
/* p.tagsearch a { color: #000080; margin-right: 10px; font-weight: normal; text-decoration: underline;}	*/

p.tagsearch a { display: inline-block; color: #fff; background-color:rgba(19,19,19,1); padding: 5px 15px; -webkit-border-radius: 3px;
	font-weight: normal; 
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 3px 10px 3px 0px;
    line-height: 1em;
    text-decoration: none;
     }


p.tagsearch a:hover { background-color:#d51477; color:#000; }


/*--------------------------------------  breadcrumbs --------------------------------- */

 #breadcrumbs { padding: 5px; text-align: left; font-size: 100%; margin-bottom: 0px;}

#breadcrumbs a { color:#0000ff; font-weight:500; }

#breadcrumbs img.right-icon { vertical-align: middle; margin: 0px 5px; }



#breadcrumbs ol { list-style-type: none;
				text-align: left;
				font-size: 100%; 
				margin: 0px; padding: 0px; }
				
				
#breadcrumbs ol li { display: inline; padding: 4px 10px; }
 
#breadcrumbs ol li a { color:#0000ff; font-weight:500; }
/* -------------------------------------- header stuff --------------------------------------------------
========================================================================================================== */

.header { height: 100px; background-image: url('../images/toplogo-narrow.jpg'), url('../images/toplogo_back.jpg');
		  background-position: left top, left top;
		  background-repeat:no-repeat, repeat-x; 
		  background-size: 100% 100px, auto;
		 position: relative; width: 100%;
		border-bottom: 1px solid #999; }
		
.header .social_bar { float: right; position: absolute; top: 64px; right: 5px; display: none; margin-right:5px; 
					background-color: rgba(255, 255, 255, 0.6);
					padding: 0px 2px 4px 5px; }	
/* .header .social_bar img { margin: 0px 2px; width: 28px; } */


.header .like_bar { position: absolute; top: 21px; right: 130px; display:none; }
.header .social_bar .like_button { margin: 4px 5px 0px 5px; float: left; }
	
img.icon { margin: 0px 5px; height: 25px; }
.header .over300 { position: absolute; left: 430px; top: 1px; display: none; }


#logo { float: left; width: 100%; max-width: 450px; height: 100px;  }



.header a.button { 	background-color: #000;
					background-repeat: no-repeat;
					background-position: left middle;
							padding: 3px 2px 0px 25px; font-size: 14px;
							color: #fff;
							vertical-align: middle;
							border: 2px solid #f10c82;
							-webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;
							text-decoration: none;
							background-image:url('/hub6/images/sprite.png');
							background-size: auto;
					}




a.menubutton { display: none; 
							position:absolute; top: 21px; right: 10px; 
							height: 22px;
							width: 50px;
							
							
							}
							

a.tacmobile { 	display: none; 
							position:absolute; top: 21px; right: 100px; 
							height: 22px;
							width: 60px;
							background-position: left -27px;
							
				}						
							
							

nav.hmenu {
	/* overflow:hidden; */
	margin:0 0px;
	clear:both;
	width: 100%;
	/* height:35px; */
	padding:3px 0px; 
	/* display: none; */
		background: #000; /* Old browsers */
	border-bottom: 2px solid #F10C82;
	z-index: 99;
	
		}



.main-menu{
	text-align:center;
	overflow:hidden;
		margin: 0px; padding: 0px;
	list-style-type: none;

	display: none;
		width:100%;
		  align-items: stretch; 
	  webkit-align-items: stretch;
		
		
		
	
}
.main-menu li{
	/* float: left; */
	display: inline-block;
white-space: nowrap;
	vertical-align:middle;
	overflow:hidden;
	box-sizing: initial;
	
	text-align: center;
	border-left:1px solid #6e6e6e;
	height: 25px;
	padding-top: 6px;
	flex: 1 1 auto;
}


.main-menu li.home{ width: 50px; max-width: 50px; }

.main-menu li.home span { display: block; 
						  width: 25px; height: 25px; padding: 0px 10px;
						  background: transparent url("../images/home.png") no-repeat scroll 50%;
}



.main-menu li:hover{
	background-color:#d51477;
	
	}
.main-menu a{
	color:#fff;
	font-size:13px; font-weight: normal; 
	text-transform: uppercase;
	text-decoration: none;
	 display:block; 
	/* overflow:hidden; */
	height:25px;
	min-width:38px;
	/* padding-top:26px; */
	/* width:100%; */
	
}
.main-menu .selected a,
.main-menu a:hover{
	color:#000;
	text-decoration:none;
}
.main-menu .selected{
	background:#000;
}


.main-menu li#webmaster_menu { display: none; }


img.drop { vertical-align: middle; margin-left: 7px; }
							
/*Style 'show menu' label button and hide it by default*/
#show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background-image:url('../images/bar5.png'); background-repeat:repeat-x;		background-size: auto 40px; 
	text-align: center;
	padding: 10px 0;
	
	font-size: 18px;
	/* position: absolute; */
	top: 96px;
	z-index: 99;
	width: 100%;
	text-align: center;
	display:block;
	/* border-bottom: 2px solid #f10c82; */
}

/*Hide checkbox*/
input[type=checkbox]{
     display: none; 
}




/*=================Paginador==============================================
===========================================================================*/
.nav-bar {
text-align: center;
overflow: hidden;
margin: 6px 0px;
padding: 0px;
list-style-type: none;
display: table;

}

.nav-bar li {
float:left;
width:32px;
height:28px;
margin-top:0px;
margin-left:0px;
margin-right:3px;
margin-bottom:5px;
padding-top:6px;
text-align: center;
overflow:hidden;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */

 -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

display: table-cell;
}

.nav-bar li.selected {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f2f2+0,f3f3f3+22,dbdbdb+58,efefef+100 */
background: #f2f2f2; /* Old browsers */
background: -moz-linear-gradient(top,  #f2f2f2 0%, #f3f3f3 22%, #dbdbdb 58%, #efefef 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f2f2f2 0%,#f3f3f3 22%,#dbdbdb 58%,#efefef 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f2f2f2 0%,#f3f3f3 22%,#dbdbdb 58%,#efefef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */
border: 1ps solid #999;
}
.nav-bar li.selected a.link-button.nav {color:#020202}

.nav-bar li a.link-button.nav {
width:100%;
height:23px;
margin-top:0px;
margin-bottom:0px;
margin-left:2px;
margin-right:2px;
padding-top:0px;
text-align:center;
overflow:hidden;
color:#FFFFFF;
display: block;

}

.nav-bar li a.link-button.nav img {
border:0px;
margin-top:0px;
}


.white p.toolbar { font-size: 14px; margin:8px 0px; }




/*-------------------- item stuff----------------------------------
------------------------------------------------------------------*/


.item {display: inline-block;
/*		background: #aaa9a9 none repeat scroll 0% 0%; */

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,898989+100 */
background: #c9c9c9; /* Old browsers */
background: -moz-linear-gradient(top,  #c9c9c9 0%, #898989 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #c9c9c9 0%,#898989 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #c9c9c9 0%,#898989 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#898989',GradientType=0 ); /* IE6-9 */




		padding: 5px;
		/* margin-right: 0.8em; */
		margin: 0px 2px 10px 2px;
		-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
text-align: center;

   }


.item .item-content {
   
    padding: 4px 2px;
    background: #000 none repeat scroll 0% 0%;
    text-align: center;
      -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }
    
    
#top10 { height: auto; }    
    
    
#top10 .item .item-content .title, #featured .item .item-content .title { color:#e38fba; margin: 3px 0px; text-align: center; }    
    
.last-item { margin-right: 0px;}    


#top10 .item, #featured .item, #joinlist .item {  width: 46%;  flex: 0 1 auto; max-width: 230px; }

#updates .item {width: 98%;  flex: 1 1 auto; }


#top10 .item .item-content img, #featured .item .item-content img,  #new .item .item-content img, #joinlist .item .item-content img { width: 100%; max-width: 170px; }

.item .text-wrapper { display: block; font-size: 12px; height: 100px; overflow: hidden; color:#e9e9e9; }

 .item .item-content p { margin: 3px; line-height: 120% }
 
 .item .item-content p a.sitelink { color:#e38fba; text-decoration: underline; font-size: 1.0em; }
 
#featured  .item .item-content p a.sitelink { font-size:1.2em; }
.item .item-content p a.titlelink, #picks .item .item-content p a.titlelink { color:#fff; text-decoration: underline; font-size: 1.1em; line-height:130%; }
	 .item .item-content p.date { float: right; margin: 0px 3px; font-size: 11px; color:#cdcdcd; }

.item .item-content .thumbwrapper { position: relative; display:inline-block; margin:0 auto; border: 1px solid #aaa9a9; }

#updates .updates-wrapper .item .item-content { height: 97%; min-height: 260px; overflow:hidden; }
#updates .updates-wrapper .item .item-content .text-wrapper { height: auto; }
.updates-wrapper { font-size: 12px; }
.updates-wrapper .item .item-content .thumbwrapper img.thumb { width: 97%; }
.updates-wrapper .item .item-content .thumbwrapper img.updatetype { position: absolute; top:0px; left:0px; z-index: 10; width: auto;}
.updates-wrapper .item .item-content .thumbwrapper img.hdicon { position: absolute; top:2px; right:5px; z-index: 10; width: auto;}



.updates-wrapper .item .item-content p { text-align: center; margin: 2px 0px; }
.updates-wrapper .item .item-content p.title { text-align: left; }
.updates-wrapper .item .item-content p a.sitelink { font-size: 12px; }
.updates-wrapper .item .item-content .thumbwrapper { margin: 4px 2px;  position: relative; }



.updated_corner {
    width: 75px;
    height: 75px;
    background-image: url("../images/update_corner2.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.updated_corner span {
	font-size: 11.5px;
	color: #000;
	position: absolute;
	left: 25px;
	top: 36px;
	margin: 0px;
	font-weight: 400;
	line-height: 14px;
	font-family: "Open Sans",sans-serif;
	letter-spacing: 0px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);	
	-o-transform: rotate(-45deg);	
	writing-mode: horizontal-tb; }


#ownsite { height: 215px; }

#ownsite .item .item-content p { font-size: 13px; }



/*------------------------ lists -------------------------------------- 
----------------------------------------------------------------------- */

ul.toplist {margin: 10px 0px;
			text-align: center;
			
			list-style-type: none;
			padding: 0px; 
			width: 100%; display: -webkit-flex;
    display: flex;
     -webkit-flex-wrap: wrap;
    flex-wrap: wrap; 
    align-items: stretch; 
     justify-content: space-around;  }
			
ul.toplist li { width: 97%;
				font-size: 130%;
				margin: 6px 0px;
				text-align: left;
				flex: 0 1 auto; 
				color: #4d4d4d;
				font-weight: 600;	
				display: inline-block;	
				font-family: 'Cabin', sans-serif;
				
					}

ul.ticklist li { 				background-image: url("../images/black_tick.png");
				background-repeat: no-repeat;
				background-position: 5px center;
								padding: 6px 8px;
				background-color:#e4e3e3;
				border:1px solid #7b7b7b;
				box-sizing: border-box;
				 -webkit-border-radius: 4px;
			    -moz-border-radius: 4px;
			    border-radius: 4px;
box-shadow:  rgba(0,0,0,0.6)  2px 2px;
		 -webkit-box-shadow:  rgba(0,0,0,0.6)  2px 2px; 
		 -moz-box-shadow:  rgba(0,0,0,0.6)  2px 2px; 
				
				padding-left: 25px; color:#e61e85;	}
				
.rightpanel ul.toplist li {	font-size: 110%; width: 96%;
							/* height: 30px; background-image: url("../images/pointer.png"); */

							 }

.quotes { font-size: 90%; }
.quotes ul.toplist li { font-weight: bold; font-style: italic; width: 97%; 
					padding: 2px 5px;
					box-sizing: border-box;
					margin: 5px 0px; 
					border: 1px dotted rgb(144, 143, 143);
					color: #746dff;
					}
.quotes ul.toplist li span { color: #7A7A79; font-size: 90%;  font-style: normal; font-weight: normal}
.quotes ul.toplist li a { color: #7A7A79; text-decoerarion: none; }

.blue { 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7f7f7+0,dedede+100 */
background: #fff; /* Old browsers */
	border-1px solid #ccc; padding: 6px 2px; margin-bottom: 20px;  }

p.big { padding: 4px 8px; font-weight: bold; font-size: 120%; color:#000; margin: 5px; }

.leftpanel p.big { font-size: 150%; }

/*----------------------------- cat buttons ----------------------------------------------
------------------------------------------------------------------------------- */



/*---------------------------- tag list -----------------------------------------
--------------------------------------------------------------------------------*/



.taglist { background-color:#fff; padding: 10px 4px; margin: 10px auto 10px auto; position: relative }

#ajaxlist { max-width: 310px; margin-top: 30px; position: relative; margin: 10px auto 10px auto; 
			 background-color:#fff; padding: 10px 4px; 
			  -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;


			}

.taglist ul { list-style-type: none;
			  margin: 0px; padding: 0px; }
			  
.taglist ul li { width: 97%; padding: 1px 4px 1px 2px; font-size: 1.1em;
				   			 
   			 text-align: left; display: inline-block; }
   			 
#ajaxlist .list_wrapper_2col { display: inline-block;
						float: left;
						box-sizing: border-box; 
						width: 98%; }
						
					


.taglist ul li h4 { margin: 8px 0px 0px 0px; font-weight: bold; font-size: 110%; color:#3c3c3c; }

.taglist ul li:first-child h4 { margin-top: 0px; }

.taglist ul li a, .taglist ul li .tagwrapper ul li a { 
		display: block;
		 -webkit-border-radius: 4px;
   			 -moz-border-radius: 4px;
   			 border-radius: 4px;
   			 color:#fff;
   			 padding: 5px 3px;
			font-weight: 600; 
   			 border: 1px solid #888888;
   			 margin-bottom: 2px;
   			 margin-left: 0px;
   			 text-decoration: none;
 }
 
.taglist > ul > li > a.all-sites { font-size: 110%; } 
 
 
.taglist > ul > li > a { background: #0062a5; /* Old browsers */
					background: -moz-linear-gradient(top,  #0062a5 0%, #090e6d 100%); /* FF3.6-15 */
					background: -webkit-linear-gradient(top,  #0062a5 0%,#090e6d 100%); /* Chrome10-25,Safari5.1-6 */
					background: linear-gradient(to bottom,  #0062a5 0%,#090e6d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0062a5', endColorstr='#090e6d',GradientType=0 ); /* IE6-9 */

				} 
 
 
.taglist > ul > li > a small { margin-left: 6px; }
 
 
 .taglist ul li .tagwrapper ul li a {
 			background-color:#D2D1D1;
color:#6B6B6B;

					}
 
 
 
 
 



.taglist ul li a span { float: right; font-size: 90%; font-weight: normal;
						display: inline-block;
						min-width: 10px;
						padding: 3px 7px;
						font-size: 12px;
						font-weight: bold;
						line-height: 1;
						color: #6B6B6B;
						text-align: center;
						white-space: nowrap;
						vertical-align: baseline;
						background-color: #fff;
						border-radius: 10px; 
						border: 1px solid #6B6B6B;
						}
						
.taglist > ul > li > .tagwrapper > ul > li > a span	{ color:#6B6B6B; }
						
.taglist ul li .tagwrapper { display: none; font-size:1em;
							 padding-left: 10px; }						
						

.taglist ul li a:hover,  .taglist ul li .tagwrapper ul li a:hover { background: #ff0084; /* Old browsers */
						background: -moz-linear-gradient(top,  #ff0084 0%, #ff0084 100%); /* FF3.6-15 */
						background: -webkit-linear-gradient(top,  #ff0084 0%,#ff0084 100%); /* Chrome10-25,Safari5.1-6 */
						background: linear-gradient(to bottom,  #ff0084 0%,#ff0084 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
						filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0084', endColorstr='#ff0084',GradientType=0 ); /* IE6-9 */

						color:#fff;
}


/*--------- black button for update tags */
.update-tags > ul > li > a {  
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
color:#6B6B6B;




}




/*-------------------------------- search options button --------------------
----------------------------------------------------------------------- */

.small-button { display: inline-block;
				background: #ffffff; /* Old browsers */
				background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
		/* max-width: 100px; */
		padding: 4px 6px 4px 25px;
		margin: 2px 4px;
		-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
	text-align: center;
	/* position: absolute;	top: 10px; right: 5px; */
	float: left;
	/* font:caption; */
	color:#3c3c3c !important;
	 border: 1px solid #888888;
	 text-decoration: none; }


#small-cats { background-color: #ffffff; 
				background: url('../images/categories.png') 3px 5px no-repeat; 
				background: url('../images/categories.png') 3px 5px no-repeat, -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); 
				background: url('../images/categories.png') 3px 5px no-repeat, -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); 
				background: url('../images/categories.png')  3px 5px no-repeat, linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); 

		}


#small-search { background-color: #ffffff; 
				background: url('../images/search3.png') 3px 5px no-repeat; 
				background: url('../images/search3.png') 3px 5px no-repeat, -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); 
				background: url('../images/search3.png') 3px 5px no-repeat, -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); 
				background: url('../images/search3.png') 3px 5px no-repeat, linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); 

		}

#small-rss { background-color: #ffffff; 
				background: url('../images/rss.png') center center no-repeat; 
				background: url('../images/rss.png')  center center no-repeat, -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); 
				background: url('../images/rss.png') center center no-repeat, -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); 
				background: url('../images/rss.png')  center center no-repeat, linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); 
				float: right;
		}
		
		
#small-to-top { background-color: #ffffff; 
				background: url('../images/top.png') 3px 5px no-repeat; 
				background: url('../images/top.png') 3px 5px no-repeat, -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); 
				background: url('../images/top.png') 3px 5px no-repeat, -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); 
				background: url('../images/top.png') 3px 5px no-repeat, linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); 
				float: right;

		}		
	

#small-rss span { width: 5px; height: 1em; display: inline-block; }

.rss_wrapper { width: 100%; margin-bottom: 4px; height: 28px; }

.reset { margin-left: 10px;
	
		color: #00F !important;
		text-decoration: none;
		font-size: 0.7em;
		display: inline-block;
			padding: 5px 5px;
		border: 1px solid #A4A4FF;
		border-radius: 6px;
		background-color: #DFDFFF;
		position: relative;
		top: 3px;
		line-height: 0.7em; }



/*---------------------------------- links ---------------------
---------------------------------------------------------------- */

#links, #bottom,  #joinlist { height: auto; overflow: hidden; width: 100%;  }

#quotes { height: auto; overflow: hidden; }

#links { order: 3; }

.linklist { list-style: none;
			margin: 0px 0px 25px 5px; padding: 0px;
			font-size: 12px; }
			
.linklist li { float: left; display: block; width: 99%; overflow: hidden; margin: 3px; }			

.linklist li a {display: block; padding: 2px 5px;  text-align: left; height:50px; border: 1px dotted #908f8f; color:#646363; line-height: 14px; text-decoration: none;
		 }


.linklist li a span.title { font-weight: bold; margin-bottom: 4px; color:#5191FB; text-decoration: underline; font-size: 1.1em;  }

.linklist li a p { margin: 0px; width: 100%; padding: 5px; }

#bottom { order: 4; font-size: 12px; }
#bottom p { margin: 5px 0px; }
#bottom ul.toplist li {font-size: 12px; text-align: center; margin: 3px 0px; font-family: arial; }
#bottom ul.toplist li a { display: block; padding: 7px 2px 2px 2px;  text-align: center; height:20px; 
					border: 1px dotted #908f8f;  line-height: 14px; text-decoration: underline;
		 }




/*--------------- order wrapper --------------------------*/


.order-wrapper { margin: 6px 3px 10px 3px; text-align: center;
				width: auto; font-size: 13px; color: #000; line-height: 15px; }
				
.order-wrapper span { padding: 0px 10px; }				

.order-wrapper span a {color:#5191FB !important; text-decoration: underline; }


.lazyload,
.lazyloading {
    opacity: 0;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 1200ms;
}

.blue { border: 1px solid #5191FB;	margin-bottom: 20px; padding-bottom: 10px;  }


.segment { border-bottom: 1px solid #5191FB;
			margin-bottom: 20px; 
			padding-bottom: 20px; }

.rightpanel .white { height: 99%; }

.last-updated { float: right; font-size: 13px; color: #5191FB; display: none; }


.links, .main-menu li#links_menu { display: none; }



/*------------- cookie law ------------------ */
#cookie-law {
    max-width:940px;
    background:#EEEADD;
    margin:10px auto 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
 
#cookie-law p {
    padding:5px;
    font-size:1em;
    font-weight:bold;
    text-align:center;
    color:#682008;
    margin:0;
}

#cookie-law a { color: #0000ff; text-decoration: underline; }

#cookie-law a.close-cookie-banner { color: #0000ff; float: right; margin: 5px; font-size: 10px; font-weight: bold; text-decoation: none }



#members-only-popup { width: 300px; position: relative; padding: 15px 5px; margin: 0px auto; }


.white p.text { color: #000; font-size: 130%; margin: 7px 0px; font-weight: normal }
.white p.bigtext { color: #000;  font-size: 1.4em; margin: 7px 0px;  font-weight: bold; }







/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
   
@media only screen and (min-width: 400px) {   

		.header {  background-size: auto, auto;			  }

		}
   

@media only screen and (min-width: 500px) {

	a.menubutton {  display: block; }
		#show-menu { display: none; }
	.main-menu { display: flex; }
	nav.hmenu { display: block; }
		 #pagemenu li { width: 49%; }
		 #top10 { height: auto; }
	#top10 .item, #featured .item { width: 31%;  font-size: 100%;  }
	#updates .item { width: 48%; }
	#updates .updates-wrapper .item .item-content .text-wrapper { height: 50px; }
	.white h3 { font-size: 24px; }
	ul.ticklist li { font-size: 160%; }
	.linklist li { width: 48%; }
	.last-updated { display:block; }	
	.leftpanel .taglist ul li { width: 48%; }
		
	#ajaxlist .list_wrapper_2col { width: 49%; }
	h2, h1 { font-size: 16px; }
	#joinlist .item { width: 32%; }
	.rss_wrapper { width: auto;
				  display: inline-block;
				  float: right; }
				  
	#bottom ul.toplist li { width: 32%; }	
	

	}
	
@media only screen and (min-width: 600px) {
				#quotes ul.toplist li { width: 49%; }
				a.tacmobile {  display: block; }
				#bottom ul.toplist li { width: 19%; }
				#joinlist .item { width: 24%; }
				.header .social_bar, .header .like_bar { display: block; }
				

				}
				
				
@media only screen and (min-width: 650px) {				

			.header { background-image: url('../images/toplogo.jpg'), url('../images/toplogo_back.jpg'); }
			}
	
	
@media only screen and (min-width: 720px) {
		 #pagemenu li { width: 32%; }
		 .linklist li { width: 32%; }
		 ul.ticklist li { font-size: 120%; }
		 	#top10 { height: auto; }
			#top10 .item{ width: 15.4%; font-size: 90%;  }
			.leftpanel ul.ticklist li, #jointop ul.ticklist li { width: 47%; font-size: 120%; }
			#featured { height: auto; }
			#joinlist .item { width: 19%; }
			#featured .item { width: 24%; font-size: 90%; flex: 0 1 auto; }
			#featured .item .item-content { min-height: none; }		
			#featured .item .text-wrapper { height: 100px;  }	
			#updates .item { width: 32%; max-width: 260px; }
				#updates .updates-wrapper .item .item-content .text-wrapper { height: 50px; }
			.header .over300 { display: block; }
			
			.main-menu li#webmaster_menu { display: inline-block; }
				}



@media only screen and (min-width: 760px) {
				
				

				}

				
@media only screen and (min-width: 850px) {
			.rightpanel { display: flex; }
					.leftpanel { flex: 0 1 75%; }
					.rightpanel { flex: 0 1 24%; }			
		
							/*	#featured { min-height: 3160px; } */
						/* .leftpanel #cat_buttons { height: 250px; } */

						#quotes_left ul.toplist li { font-size: 130%; }
						.leftpanel ul.ticklist li, #jointop ul.ticklist li { width: 46%; font-size: 120% !important; }
						#featured .item .text-wrapper { height: 80px;  }
						.small-button	{ display: none; }
						#small-to-top {display: block; }
						#quotes_left { display: none; }
						
						#ticklist_left, #cats { display: none; }
						.taglist ul li { font-size: 1em; }
						
													}
				
				
				
@media only screen and (min-width: 1000px) {
				body { font: 14px/20px Helvetica, Helvetica Neue, Arial; }
				#wrap {  max-width: 1200px; width:100%; }
					
					#pagemenu li { width: 24%; }
								#featured {min-height: 2920px; }
						
					/*	#quotes { height: 250px; } */
					
						
					#top10 { height: auto; }
					#top10 .item { width: 15.2%; font-size: 90%;  }
					ul.toplist li {  font-size: 100%; }			
						#quotes_left ul.toplist li { font-size: 130%; }		
					/*	#featured .item { width: 19%; font-size: 90%; flex: 0 1 auto; }	*/
					.leftpanel ul.ticklist li { width: 47%; font-size: 1.3em; }
						#updates .item { width: 32%; max-width: 290px; }
						
						#joinlist .item { width: 15%; }
						#jointop ul.ticklist li { width: 32%; font-size: 1.1em; }
						
					}