@charset "utf-8";

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1,h2,h3,h4{
    font-family: Georgia, 'Times New Roman', Times, serif;
}

/*style links*/
.box a{
    color: aquamarine;
    text-decoration: none;
}

.box a:hover{
    text-decoration: underline;
}

/* the content position */

.wrapper{
	margin:0 auto;
	width: 960px;
}

/*style*/
#header,#footer{
    float:left;
	clear:both;
	padding: 10px;
	text-align:center;
	width:100%;
}

/* !!!create the fluid boxes */
.box{
    float: left;
    margin: 5px;
    padding: 10px;
    width: 285px;
    height: 480px;
    border: 1px solid rgb(241, 233, 144);
    background-color: white;
}

/*box content*/
.box img{
    width: 280px
}
.box h3, .box p{
    text-align: center;
}

#content {
    float: left;
    width: 100%;
    background-color:#fffeec;}

/*When the screen width is 960px, the width of.wrapper will become 640px */
@media screen and (max-width: 960px) {
    .wrapper {
        width: 640px;
    } }

@media screen and (max-width: 640px){
	.wrapper{
		width:320px;
	}
	h1, h2, h3, h4, p{
		word-wrap:break-word;
	}
	#header{
		padding:0;
	}
}