body{
	background-color: #f2f2f2;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	color: #49494b;
	line-height:1.6;
}

a:link{
	color: #49494b;
	text-decoration: none;
}
a:visited{
	color:#49494b;
	text-decoration:none;
}

a:hover{
	color: black;
	text-decoration: underline;
	font-weight:bold;
}

a:active{
	color: black;
	text-decoration: underline;
	font-weight:bold;
	
}
.header {
  
  padding: 10px 20px;
  text-align: justify;
  background-color:#bd8c7d;
  color: #49494b;
  margin:auto;
  width:700px;
  font-size:16px;
  font-family:"Lato", sans-serif;
  
}  

hr{
	border: 1px solid #49494b;
}

#weblink{
	width: 500px;

}

#storybackground{
	line-height:1.6;
	padding-left: 30px;
	padding-right:30px;

}

.card {
	background-color:white;
	padding: 20px;
	margin-top: 20px;
	border-radius: 10px;
	border: 2px solid  #49494b;
}

#main {
	
	margin-top: 20px;
	background:#f2f2f2;
	padding:20px;
	width:700px;
	margin:auto;
	
	
}

input {
	margin-bottom: 10px;
}

::-webkit-input-placeholder { /* Edge */
  color: #aaa;
  font-size: 14px;

}

:-ms-input-placeholder { /* Internet Explorer */
  color: #aaa;
  font-size:14px;
}

::placeholder {
  color: #aaa;
  font-size: 14px;
 
}



#textbox_short {
	height: 25px;
	font-size: 16px;
	border-radius: 4px;
	border:1px solid #49494b;
	padding-left:5px;
	width: 150px;
	box-sizing:border-box;
	outline: none;
	background:  #e5e5e6;
}

#textbox_long {
	height: 25px;
	font-size: 16px;
	border-radius: 4px;
	border:1px solid #49494b;
	padding-left:5px;
	width: 300px;
	box-sizing:border-box;
	outline: #49494b;
	background:  #e5e5e6;
}
	
#button1, #button2, #button3, #button4, #button5, #button6, #button7, #button8, #button9, #button10, #button11, #button12, #buttonind, #buttonex{
	background: #e5e5e6;
	border: 2px solid #49494b;
	border-radius:3px;
	padding:5px;
	color: #49494b;
	font-size:14px;
	margin-top:10px;
	font-family:sans-serif;
}

#button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover, #button6:hover, #button7:hover, #button8:hover, #button9:hover, #button10:hover, #button11:hover, #button12:hover, #buttonind:hover, #buttonex:hover{
	background: #49494b;
	border:2px solid #49494b;
	color: #e5e5e6;
	cursor: pointer;
	font-family:sans-serif;
}

#total{
	
	margin-top: 10px;
	background-color:  white;
	width: 600px;
	margin: auto;
	color: #49494b;
	font-size: 20px;
	text-align: center;
	padding: 10px 20px 20px 20px;
	border-radius:5px;
	display:none;
	border: 2px solid  #49494b;
	
}
	
table{
	border-collapse: collapse;
	border-spacing:0;
	width: 100%;
	border-radius: 4px;
	background:  white;
}

th, td{
	text-align: center;
	padding: 10px;
	font-size: 14px;
	color: #554c11;

}

table#figureofspeech td{
	
	text-align: left;
		
}

tr:nth-child(even){
	background-color: #e5e5e6;
	
}


	
#answer1, #answer2, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8, #answer9, #answer10, #answer11, #answer12,#answerex{
	
	width:90%;
	float:center;
	border-radius:5px;
	margin:auto;
	padding:10px;
	border:1px dotted  #e5e5e6;
	display:none;
	background-color: #e5e5e6;
	color: #49494b;
	text-align: justify;
	
}

.correct{
	color: green;
}

.wrong{
	color: red;
}

#main:after {
  content: "";
  display: table;
  clear: both;
}

#extention{
	background-color: #cccccc;
	padding: 5px 20px;
	margin-top: 20px;
	text-align: justify;
	border-radius: 5px;
	
	
}

#footer{
	background:#f2f2f2;
	font-size: 12px;
	padding:20px;
	width:700px;
	margin:auto;
	margin-top:20px;
	text-align: justify;
	border-top: 2px solid #49494b;
	
}