/*for All*/
* {
		margin: 0;
		padding: 0;
}
header, nav, section, article, footer, fieldset {
		display : block;
}
body {
		background : #003333;
		color : #FFCC66;
		font-family : 'Times New Roman';
		text-align : center;
}
.hed {
		background-image : url(../images/fieldset_02.jpg);
		background-repeat: repeat-y;
		background-size: 100%;
}
.hed h1 {
		font-size : 1.3em;
		margin: 0px;
		padding-top : 10px;
}
.mhed {
		background : url(../images/gradient_01.jpg);
		font-size : 0.6em;
		padding : 5px;
}
#show-menu button{
		background: url(../images/gradient_01.jpg);
		border: none;
		color: #FFCC66;
		font-size : 1.1em;
		text-align : center;
		width: 50%;
		height : 38px;
		padding : 5px;
		margin : 10px;
		box-shadow: 0 2px 5px #000;
		cursor: pointer;
}
#show-menu button img {
		width: 50px;
		height : 25px;
}
nav {
		background : #FFCC66;
		margin : 0px;
}
.clearfix ul {
		display:none;
		list-style-type : none;
		padding: 5px;
}
.clearfix ul li {
		background: url(../images/gradient_01.jpg);
		font-size : 1em;
		text-align : center;
		width: 45%;
		height : 28px;
		padding : 5px;
		margin : 0px 0px 5px 5px;
		box-shadow: 0 2px 5px #000;
		float: left;
}
.clearfix ul li a {
		text-decoration : none;
		color : #FFCC66;
}
.clearfix ul li:hover {
		font-size : 1.1em;
}
#m {
		font-size : 1.1em;
}
#m a {
		color : #280A00;
}
fieldset {
		background-image : url(../images/fieldset_01.jpg);
		border : 1px solid #003333;
		margin : 20px;
}
legend {
		background: #937025;
		font-size : 1.5em;
		margin-left : 10px;
		padding: 5px;
}
.images {
		padding: 10px;
		margin : 20px;
		background : #937025;
		width: auto;
		height: auto;
}
.poem{
		font-size : 1em;
		background-image : url(../images/fieldset_02.jpg);
		box-shadow: 0 2px 5px #000;
		padding: 10px;
}
.images img {
		width : 40%;
		max-width : 120px;
}
.word{
		background : url(../images/gradient_02.jpg);
		box-shadow: 0 2px 5px #000;
		margin : 10px 20px;
		padding:5px;
}
.word a{
		text-decoration : none;
		color : #F8A73E;
		cursor : pointer;
}
.word a p {
		padding : 10px;
		background: #6e4d0f;
}
.word a p:hover {
		background : none;
		color :  #280A00;
}
.clearfix:after, .mhed:after, .shed:after, #info:after{
		content :"";
		display : block;
		clear : both;
		height : 0;
}
.footer {
		text-align : center;
		margin : 10px 20px;
		float:right;
}




/*for tablet 600px-768px*/
@media only screen and (min-width: 600px) {
    .hed h1 {
		font-size : 2.2em;
            }
.mhed {
		font-size : 85%;
}
nav {
		width : 12%;
		min-width : 150px;
		margin : 0px 20px 0px 0px;
		float:left;
}
.clearfix ul {
		padding: 0px 0px;
}
.clearfix ul li {
		text-align : left;
		font-size : 1.1em;
		width : 90%;
		height : 32px;
		padding : 5px 0px;
		margin : 5px 0px 7px 0px;
}
.clearfix ul li a p {
		padding : 0px 10px 5px 10px;
}
.clearfix ul li:hover {
		width : 100%;
		text-align : right;
		font-size : 1.3em;
}
#m {
		font-size : 1.3em;
		width : 100%;
		text-align : right;
}
.images img {
		width : 30%;
		max-width : 130px;
}
.word{
		padding:5px;
		float : right;
		position : relative;
		right : 0px;
		bottom : 5px;
}
}




/* for desktop 768px-1024px*/
@media only screen and (min-width: 768px) {
    .hed h1 {
		font-size : 3em;
            }
.mhed {
		font-size : 100%;
}
#show-menu button{
		display : none;
}
nav {
		width : 15%;
		min-width : 200px;
		margin : 0px 20px 0px 0px;
		float:left;
}
.clearfix ul {
		display:block;
		padding: 5px 0px;
}
.clearfix ul li {
		text-align : left;
		font-size : 1.3em;
		width : 90%;
		height : 35px;
		padding : 5px 0px;
		margin : 5px 0px 10px 0px;
}
.clearfix ul li a p {
		padding : 0px 10px 5px 10px;
}
.clearfix ul li:hover {
		width : 100%;
		text-align : right;
		font-size : 1.5em;
}
#m {
		font-size : 1.5em;
		width : 100%;
		text-align : right;
}
.images img {
		width : 30%;
		max-width : 200px;
}
.word{
		padding:5px;
		float : right;
		position : relative;
		right : 0px;
		bottom : 10px;
}
.poem {
		font-size : 1.1em;
}
}

/*for desktop 1024px*/
@media only screen and (min-width: 1024px) {
.poem{
		padding: 20px 30px;
		margin: 10px;
		float: right;
}
.images img {
		width : 290px;
		max-width : 400px;
}
}