/**
 * 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 are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

/*
 * KEEP YOUR CODE CONSISTENT
 * Decide on where your curly braces go.
 * Decide if you're putting a space between curly braces and selectors
 * Decide on TABs or SPACES
*/

/** {
	border: 1px dashed blue;
}*/

body {
	background-color: #ded7cb;

	/*You can't use Open Sans without importing it:
	https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans*/
	/*http://fonts.googleapis.com/css?family=Fredericka+the+Great*/
	font-family: Open Sans, Arial Narrow, Futura, Tahoma, sans-serif, "Microsoft YaHei", "·L?¶®¶Â", STXihei, "?¤å?¶Â", sans-serif;
}

#main {
	width: 960px;
	margin: auto;
}

.logo {
	float: left;
}

.main-nav {
	margin: 39px 0;
  padding: 5px;
  width: 465px;
  float: right;
}

.main-header{
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

.content{
	font-size: 25px;
	/*font-weight: bold;*/
}

.line-up{
	display: inline-block;
	vertical-align: text-top;
}

/* DON'T keep your CSS on one line, this is terrible readibility */
a:link {
  color: #575452; text-decoration: none; 
}

a:active {
  color: #575452; text-decoration: none;
}

a:visited{
  color: #575452; text-decoration: none;
}

a:hover{
	color: #575452;
	/*font-weight: bold;*/
	text-decoration: underline;
}


/*
Avoid setting up CSS for HTML elements like this unless you're setting up a global style for these elements.
These look like they're only for your nav, but they're affecting the other things that use lists like Flexbox.
Be more specific in what you want to style by using a class.
*/

.flexslider {
	border: none;
	background-color: transparent;
	box-shadow: none;
}

.flex-control-nav {
	position: relative;
	bottom: 0;
	height: 21px;
}

.flex-control-nav li {
	line-height: 1;
}

.main-nav ul {
  padding: 0;
  list-style-type: none;
}

.main-nav li {
	display: inline-block;
	padding: 5px;
}

.content-block {
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.2);
}

.media-item{
	display: inline-block;
	vertical-align: text-top;
	font-family: Fredericka the great;
	font-size: 24px;
	width: 312px;

}

.media-item li{
	font-family: Arial;
	font-size: 16px;
		
}

.content-header
{
	font-family: Arial;
	font-size: 16px;
	color: #FFA400;
	font-weight: bold;
	
}

.content p
{
	font-family: Arial;
	font-size: 16px;
	color: #575452;
	text-decoration: none;
	text-align: justify;
	
}

.content ol li{
	font-family: Arial;
	font-size: 16px;
	color: #575452;
	text-decoration: none;
	text-align: justify;
	
}

.chinese{
	font-family: SimHei; 
	font-size: 16px;
	color: #575452;
	text-decoration: none;
	text-align: justify;
}



/*
.font{
    font-family: fredrika the great;
	font-size: 12px;
   }*/