.xside-cat {
	display:table;
	width: 230px;
	height: 350px;
	margin: 0px;
	padding: 0px;
	margin-top:0px;
}

.xcategory {
	display: block;
	text-align: left;
	width: 180px;
	min-height:17px;
	margin-bottom:2px;
	padding:2px;
	padding-left: 10px;
	padding-top: 2px;
	background-color: #11ACD8;
	 border-radius: 2px;
  -moz-border-radius: 2px;
 	-webkit-border-radius: 2px; 
 	color: #FFFFFF;
}

.xcategory:hover {
	background-color: #AAAAAA;
	color: #FFFFFF;
 	/* smooth rollovers */
   transition: background-color 0.3s ease;
   -webkit-transition: background-color 0.3s ease;
   -moz-transition: background-color 0.3s ease;
   -o-transition: background-color 0.3s ease;
   -ms-transition: background-color 0.3s ease;
	/*********************/
}

@media screen and (min-width: 320px) and (max-width: 980px) { /*use min-width AND max-width for it to work*/
	
	.xside-cat {
		display:table;
		width: 680px;
		height: 100px;
		margin: 0px;
		padding: 0px;
		margin-top:0px;
	}
	.xcategory {
		display: block;
		text-align: left;
		float: left;
		width: 155px;
		min-height:19px;
		margin-bottom:2px;
		margin-right:3px;
		padding:2px;
		padding-left: 10px;
		padding-top: 2px;
		background-color: #11ACD8;
		 border-radius: 2px;
	  -moz-border-radius: 2px;
	 	-webkit-border-radius: 2px; 
	 	color: #FFFFFF;
	}
	
}