#main-logo
{
	max-width: 300px;
	margin:0 auto;
	text-align: center;
}

#main-logo img
{
	width: 250px;
}

#cat-display
{
	max-width: 900px;
	margin: 0 auto;
}

#cat-display ul
{
	list-style: none;
	padding: 0;
	  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#cat-display img
{
	  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#cat-display li
{
	width: 30%;
	display: inline-block;
}

@media (max-width: 460px)
{
	#cat-display li
	{
		width: 50%;
	}
	
	#main-logo img
	{
		width: 100%;
	}
}

@media (max-width: 260px)
{
	#cat-display li
	{
		width: 98%;
	}
}

#cat-display img
{
	width: 100%;
}

#cat-sel
{
	max-width: 900px;
}

#cat-sel ul
{
	list-style: none;
	padding : 0;
}

#cat-sel li
{
	  width: 204px;
	  display: inline-block;
	  vertical-align: middle;
}


@media (max-width: 460px)
{
	#cat-sel li
	{
		width: 65%;
		display: inline-block;
	}
	#cat-sel img
	{
		width : 100%;
	}
}

#joke-options
{
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	vertical-align: middle;
}

#joke-options div
{
	display: inline-block;
	margin-left: 20px;
}

@media (max-width: 680px)
{

	#joke-options div
	{
		width: 97%;
	}
}

#jokes-container
{
	max-width: 900px;
}

.joke-wrapper
{
	border:1px solid #e2e2e2;
	width:95%;
	margin: 0 auto;
	background-color:#fafafa;
	font-family:tahoma;
	font-size:17px;
}

.joke-title-wrapper
{
	width:100%;
	margin: 10px auto;
	text-align:center;
}

.joke-title
{
	font-weight:bold;
	text-decoration:underline;
	color:#232222;
	text-align:center;
	position: relative
}

@media (max-width: 460px)
{
	.joke-title
	{
		text-align: right;
	}

}