@charset "utf-8";


* {
  box-sizing: border-box;
}

body {
  font-family: Trebuchet ms, Verdana, sans-serif;
  padding: 5px;
  background-image: url(../figs/decor/background-dark.png); background-repeat: repeat;
  max-width: 1240px;
  margin: auto;
}
    
h1	{	
	font-family:		Trebuchet ms, Verdana, sans-serif;
	font-size:		2em;
	font-weight:		800;
	font-style:		normal;
	text-decoration:	none;
	word-spacing:		normal;
	letter-spacing:		normal;
	text-transform:		none;
	margin-top: 		0;
	padding-right: 		15px;
	padding-left: 		15px; 
	}	
		
h2	{	
	font-family:		Trebuchet ms, Verdana, sans-serif;
	font-size:		1.5em;
	font-weight:		400;
	font-style:		normal;
	text-decoration:	none;
	word-spacing:		normal;
	letter-spacing:		normal;
	text-transform:		none;
	margin-top: 		0;
	padding-right: 		15px;
	padding-left: 		15px; 
	}	
		
h3	{	
	font-family:		Trebuchet ms, Verdana, sans-serif;
	font-size-adjust:	.53;
	font-size:		1.3em;
	font-weight:		800;
	font-style:		normal;
	text-decoration:	none;
	word-spacing:		normal;
	letter-spacing:		normal;
	text-transform:		none;
	margin-top: 		1em;
	margin-left:		0;
	padding-right: 		15px;
	padding-left: 		15px; 
	}	
	
h4	{	
	font-family:		Trebuchet ms, Verdana, Myriad Web, Syntax, 宋体, SimSun, 华文细黑, STXihei, Microsoft YaHei New, Microsoft Yahei, 微软雅黑, sans-serif;
	font-size-adjust:	.53;
	font-size:		1.25em;
	font-weight:		400;
	font-style:		normal;
	text-decoration:	none;
	word-spacing:		normal;
	letter-spacing:		normal;
	text-transform:		none;
	margin-top: 		0;
        padding-top: 		0px;        
	padding-right: 		15px;
	padding-left: 		15px; 
	}	
		
h5, dt	{	
	font-family:		Trebuchet ms, Verdana, sans-serif;
	font-size:		    1.17em;
	font-weight:		400;
	font-style:		    normal;
	text-decoration:	none;
	word-spacing:		normal;
	letter-spacing:		normal;
	text-transform:		none;
	margin-top: 		0;
	padding-right: 		15px;
	padding-left: 		15px; 
	}	
		
h6	{	
	font-family:       Trebuchet ms, Verdana, sans-serif;
	font-size-adjust:	.53;
	font-size:		    1em;
	font-weight:		700;
	font-style:		    normal;
	text-decoration:	none;
	word-spacing:		normal;
	letter-spacing:		normal;
	text-transform:		none;
	margin-top: 		0;
	padding-right: 		15px;
	padding-left: 		15px; 
	}	
		

p	{
  	font-family: 	      Trebuchet ms, Verdana, sans-serif;
    margin-top:            0;
	padding-right:         15px;
	padding-left:          15px;
    font-size : 	       1.2em;
	text-align:            left;
	line-height:           1.2;
}

p.year	{
	margin-top:	0px;
	margin-bottom:	  12px;
  	font-family: 	   Trebuchet ms, Verdana, sans-serif;
	font-size : 	  150%;
	font-weight : 	  bold;
	text-align: 	  left;
	color: 		      #21387D;
}

p.indent {
  	font-family: 	      Trebuchet ms, Verdana, sans-serif;
	font-weight :         normal;
	color: 		      #000000;    
	margin-top: 	      0;
	text-align: 	      left;
	text-indent:	      1em;
}

p.quote	{
  	font-family:         Trebuchet ms, Verdana, sans-serif;
	font-weight : 	     normal;
	color: 		         #000000;
  	margin-left: 	     35px;        
}

p.details {
	text-align: 	     left;
  	font-family: 	     Trebuchet ms, Verdana, sans-serif;
	color : 	     #000000;
        padding-left: 	     15px;
	padding-right: 	     15px;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color:			#003300;
	background: 		 none;
	text-decoration: 	 none;
	font-family: 		 Trebuchet ms, Verdana, sans-serif;
}
a:visited {
	color: 			#003300;
	text-decoration: 	none;
	font-family: 		Trebuchet ms, Verdana, sans-serif;
	font-size: 		0.9em;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: 			#ffcc00;
	background: 		#999999;
	text-decoration: 	none;
	font-family: 		Trebuchet ms, Verdana, sans-serif;
}

a.more:link 	{
	color:			#960;
	font-family:		Trebuchet ms, Verdana, sans-serif;
	font-size : 		1em;
	font-weight:		400;
	background: 		none;
	text-decoration: 	none;
}

a.more:visited {
	color:			#960;
	font-family:		Trebuchet ms, Verdana, sans-serif;
	font-size : 		1em;
	font-weight:		400;
	background: 		none;
	text-decoration: 	none;
}

a.more:hover {
	color:			#003;
	font-size : 		1em;
	font-weight:		400;
	background: 		none;
	text-decoration: 	none;
}    

a.contents:link 	{
	color:			#003300;
	font-family:		Trebuchet ms, Verdana, sans-serif;

	font-size : 		1.1em;
	font-weight:		400;
	background: 		none;
	text-decoration: 	none;
}

a.contents:visited {
	color:			#003300;
	font-family:		Trebuchet ms, Verdana, sans-serif;
	font-size : 		1.1em;
	font-weight:		400;
	background: 		none;
	text-decoration: 	none;

}

a.contents:hover {
	color:			#800000;
	text-decoration: 	none;
	font-family:		Trebuchet ms, Verdana, sans-serif;
	font-size : 		1.1em;
	font-weight:		400;
}

li {
	font-size: 1em;
	line-height: 1.2em;
        margin: 14px 16px;}


/* Header/Blog Title */
.header {
  padding: 20px;
  text-align: left;
  background-image: url(../figs/decor/background-dark.png); background-repeat: repeat;
}


/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-image: url(../figs/decor/background-light.png); background-repeat: repeat;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%; 
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  background-image: url(../figs/decor/background-dark.png); background-repeat: repeat;
  padding-left: 5px;
}

/* Fake image */
.fakeimg {
  background-image: url(../figs/decor/background-light.png); background-repeat: repeat;
  width: 100%;
  padding: 15px;
}

/* Add a card effect for articles */
.card {
  background-image: url(../figs/decor/background-ultralight.png); background-repeat: repeat;
  padding: 20px;
  margin-top: 20px;
}

/* Add a card effect for articles */
.card-book {
  background-image: url(../figs/decor/background-ultralight.png); background-repeat: repeat;
  padding-top:      0px;
  padding-bottom:   0px;
  padding-left:     5px;
  padding-right:    20px;
  margin-top:       0px;
  margin-bottom:    20px;
  margin-left:      5px;
  margin-right:     20px;
}

/* Add a card effect for articles */
.card-rightdark {
  background-image: url(../figs/decor/background-dark.png); background-repeat: repeat;
  padding-left: 10px;
  padding-right: 1px;
  padding-top: 20px;
  padding-bottom: 20px; 
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 5px;
  margin-right: 0px;
}


/* Add a card effect for articles */
.card-contents {
  background-image: url(../figs/decor/background-ultralight.png); background-repeat: repeat;
  padding: 20px;
  margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background-image: url(../figs/decor/background-dark.png); background-repeat: repeat;
  margin-top:       5px;
  margin-bottom:    20px;
  margin-left:      5px;
  margin-right:     20px;
}

/* Responsive layout - when the screen is less than 820px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 820px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}