/*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 {
		border : 1px solid #003333;
		margin : 20px;
}
legend {
		background: #003333;
		font-size : 1.5em;
		margin-left : 10px;
		padding: 5px;
}
.work li, .education li {
		font-size : 0.9em;
		list-style-type : none;
		margin : 10px;
		padding : 10px;
		background-image : url(../images/fieldset_01.jpg);
		box-shadow: 0 2px 5px #000;
}
.creative li {
		background : url(../images/gradient_02.jpg);
		list-style-type : none;
		font-size : 0.9em;
		margin : 10px;
		padding : 5px;
		box-shadow: 0 2px 5px #000;
}
.creative li a {
		text-decoration : none;
		color : #F8A73E;
		cursor : pointer;
}
.creative ul li div {
		padding: 10px;
		background : #6e4d0f;
}
.creative ul li div:hover {
		background : none;
}
.creative li a:hover {
		color : #280A00;
}
.clearfix:after, .mhed:after, .shed:after, #info:after {
		content :"";
		display : block;
		clear : both;
		height : 0;
}
.footer {
		margin : 10px 20px;
		float:right;
}




/*for tablet*/
@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;
}
}



/* for desktop*/
@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;
}
.creative {
		width : 35%;
		margin : 10px 0px;
		float:left;
}
}