.topimage{
	width: 1200px;
	height: 200px;
	background-position: center bottom;
	background-image : url(./img/yule_topbn_on.png) ;
	background-repeat : no-repeat;
}
h1{
	font-size: 200%;
	font-family:Times New Roman;
	font-weight: bold;
	font-color:#
	;
	text-decoration:underline;
}
h3{
	font-size: 142%;
	font-family:Times New Roman;
	font-weight: bold;
	font-color:#502a2c;
}
pre {
	white-space: -moz-normal-wrap; /* Mozilla */
	white-space: -normal-wrap; /* Opera 4-6 */
	white-space: -o-normal-wrap; /* Opera 7 */
	white-space: normal-wrap; /* CSS3 */
	word-wrap: break-word; /* IE 5.5+ */
}
.item{
  float: center;
  margin-right: 10px;
  padding: 10px;
  text-align: center;
  opacity: 0;
  -webkit-transform: translateY(-2%);
    -ms-transform: translateY(-2%);
    transform: translateY(-2%);
}
.item:nth-child(1) {
  -webkit-animation: moveitem 0.5s ease 0.5s 1 forwards;
  animation: moveitem 1.5s ease 0.4s 1 forwards;
}
@-webkit-keyframes moveitem {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes moveitem {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.item2{
  float: center;
  margin-right: 10px;
  padding: 10px;
  text-align: center;
  opacity: 0;
}
.item2:nth-child(1) {
  -webkit-animation: moveitem 0.5s ease 0.5s 1 forwards;
  animation: moveitem2 3.0s ease 0.0s 1 forwards;
}
@-webkit-keyframes moveitem2 {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes moveitem2 {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}