body    {background: rgb(215, 229, 142) url(images/background.jpg);
	width: 100%;
        color: black;
        margin: 0px auto;
        padding: 0px;
        text-align: center;
        font-family: Verdana, sans-serif;
        font-weight: 600}

h1    {color: rgb(147,79,44);
        margin: 10px auto 30px;
	max-width: 50%;
        padding: 5px;
        background-color: white;
        border: 10px groove rgb(194,133,70);
        outline: 10px groove rgb(147,79,44); 
	font-style: italic;
	font-weight: bold;
        font-family: garamond, serif;}

h2   {color: rgb(147,79,44);
        margin-top: 2em}

h3   {margin-top: 3em;
        color: rgb(64, 64, 64);
        background-color: rgb(242, 255, 162);
        clear: both}

#copyright
        {font: italic small sans-serif;
        clear: both}

#copyright a
        {color: black}

#menu   {list-style-type: none;
        text-align: center;
        background-color:  rgb(147, 153, 116); 
        margin: 1em;
        padding: 10px}

#menu li
        {display: inline;
        margin: 0px 1em}

#menu a
        {color: rgb(157, 60, 44);
        display: inline-block;
        background-color: rgb(181, 195, 108); 
        border: medium double black;
        padding: 0px 1em;
        text-decoration: none}

#menu a:hover, #menu a:active
        {color: white;
        background-color: rgb(147,79,44)}

.pic    {width: 300px;
	max-width: 100%;
           height: 300px}

.pic_name {position: relative;
          z-index: 2;
          background: white;
          bottom: 10px;
          left: -160px}

@media all and (max-width: 4in) {		/* small screen */
	#menu	{background-color: transparent; 
		padding: 0px;
		margin: 0px;}

	#menu li
		{display: block;
		font-size: 150%;
		width: 80%;
		margin: 1em auto;}

	#menu a
		{width: 100%;
		padding: 0px;
}
}