body {
	font-family: Helvetica, Arial;
	font-size: 100%;
}

#content {
	margin-left: auto;
    margin-right: auto;
	width: 100%;
}

@media only screen 
and (min-width : 1224px) {
#content { max-width: 700px; }
}

.alista {
	float: left;
	width: 50%;
	display: block;
}
.blista {
	float: right;
	width: 50%;
	display: block;
} 

h1 { 
	font-size: 2.4em;
	color: #333;
	padding: 0px;
	margin: 20px 0px 0px 30px;
}
h2 { 
	font-size: 1.5em;
	color: #333;
	padding: 0px;
	margin: 2px 0px 20px 30px;
}

p {
	font-size: 1.0em;
	margin: 10px 0px 5px 30px;
}

ul {
	list-style-type: none;
	padding: 0px 2px 20px 0px;
}

@media only screen 
and (min-width : 1224px) {
li { max-width: 330px; }
}

li {
	border: 1px solid #e2e8ed;
	border-radius: 10px;
	padding: 10%;
	margin: 4%;
	display: block;
	background: #e2e8ed;
	/* IE10 */ 
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #C2E0FF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #e2e8ed 100%);

/* Opera */ 
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #C2E0FF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #C2E0FF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #C2E0FF 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #FFFFFF 0%, #C2E0FF 100%);
	}
a {
	text-decoration: none;
	color: #003366;
	font-size: 1.8em;
} 
@media only screen 
and (min-width : 1224px) {
a { font-size: 1.2em; }
}

a:hover {
  text-decoration: underline;
  display: block;
}
li:hover {
  background: #FFF;
}
img {
padding: 25px;
}