@font-face {
    /* font-properties */
    font-family: chinacat;
    src:url('../font/chinacat.woff'),  
    	url('../font/chinacat.ttf'),
    	url('../font/chinacat.svg'),
    	url('../font/chinacat.eot'); /* IE9 */
}

html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    font-family: chinacat, serif;
}

body {
	font-family: chinacat;
	background:url(../images/bg_fine_art_paper.jpg);
	background-size: 100%;
}

p {
	color: yellow;
	filter: Glow(color=black, strength=1);
	-webkit-text-stroke: 0.3px black;
	text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
	-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
	-moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;	
	letter-spacing: 1px;
}


.content {
	padding: 20px;
}

.is-center {
	margin: auto;
	text-align: center;
}

.yellowbar {
	position: fixed;
	background-color: #ffcc33;
	width: 80px;
	height: 100%;
	top: 0px;
	right: 0px;
	left: auto;
	bottom: auto;
	z-index: -1;
	opacity:0.6;
	filter:alpha(opacity=60);
}

.start-img {
	width: 80%;
}

.start-button {
	margin: auto;
	width: 80%;
	margin-top: 10px;
	padding: 20px;
	white-space: normal;
}

.welcome-text {
	background:url(../images/aside_bg.png);
	padding: 10px;
	margin-top: 50px;
}

.welcome-text span {
	font-size: 35px;
}

.welcome-text p {
	font-size: 1.3em;
}

.welcome-text a {
	width: 100%;
	font-size: 1.5em;
}

.question-text {
	padding: 10px;
	margin-top: 50px;
}

.question-text-p {
	font-size: 1.2em;
}

.question-text .pure-button {
	width: 80%;
	padding: 15px;
	margin-top: 20px;
}

.analysis-text {
	margin: 5%;
	padding: 3%;
	border:5px solid black;
	background:rgba(255, 255, 255, 0.6);
}

.analysis-text-title {
	font-size: 2.0em;
}

.analysis-text-content {
	font-size: 1.5em;
}

.analysis-text-note {
	font-size: 1.0em;
}

.analysis-button {
	width: 100%;
	margin: auto;
	padding: 2%;
}

.aside-img-asker {
	position: fixed;
	width: 30%;
	left: 5%;
	bottom: 0px;
}

.aside-img-frame {
	width: 90%;
	padding-top: 20px;
}

.aside-img-judge {
	padding-left: 15%;
	width: 25%;
}

.aside-answer-single-img {
	background-image: url(../images/bg_answer.png);
	border:5px solid black;
	padding: 5%;
	width: 150px;
}

.aside-answer-double-img {
	background-image: url(../images/bg_answer.png);
	border:5px solid black;
	margin-top: 4%;
	padding: 10%;
	width: 150px;
}

.aside-question-img {
	
}

@media (max-width: 55em) {
	
	.welcome-text {
		font-size: 0.8em;
	}
	
	.question-text-p {
		font-size: 0.8em;
	}
	
	.analysis-text-title {
		font-size: 1.5em;
	}
	
	.analysis-text-content {
		font-size: 1.2em;
	}
	
	.aside-img-asker {
		width: 25%;
		left: 10%;
	}
	
	.aside-answer-single-img {
		width: 100px;
		padding: 1%;
	}

	.aside-answer-double-img {
		width: 100px;
		padding: 2px;
	}
	
}


@media (max-width: 35.5em) {
	
	.yellowbar {
		width: 100%;
		height: 80px;
		top: auto;
		right: auto;
		left: 0px;
		bottom: 0px;
	}
	
	.start-button {
		font-size: 0.8em; 
	}
	
	.welcome-text {
		margin-top: 0px;
		font-size: 0.8em;
		font-weight: bolder;
	}
	
	.question-text {
		margin-top: 0px;
		padding-top: 0px;
	}
	
	.question-text-p {
		font-size: 1.0em;
	}
	
	.analysis-text-title {
		font-size: 1.5em;
	}
	
	.analysis-text-content {
		font-size: 1.2em;
	}
	
	.aside-img-asker {
		margin: auto;
		position: relative;
		width: 50%;
		left: auto;
		bottom: auto;
	}

	
}

.button-style1,
.button-style2,
.button-style3,
.button-style4{
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	color: yellow;
	filter: Glow(color=black, strength=1);
	-webkit-text-stroke: 0.3px black;
	text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
	-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
	-moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;	
	letter-spacing: 1px;
}

.button-style1, .button-style1:link, .button-style1:hover {
	background: url(../images/btn-bg1.png) no-repeat;
	background-size:100% 100%;
}

.button-style2, .button-style2:link, .button-style2:hover {
	background: url(../images/btn-bg2.png) no-repeat;
	background-size:100% 100%;
}

.button-style3, .button-style3:link, .button-style3:hover {
	background: url(../images/btn-bg3.png) no-repeat;
	background-size:100% 100%;
}

.button-style4, .button-style4:link, .button-style4:hover {
	background: url(../images/btn-bg4.png) no-repeat;
	background-size:100% 100%;
}


.test {
	background-color: green;
}