body {
       margin: 0;
	background-color: #cfdfff;
	padding: 0;
       }
/*
td {	background-color: #ffffef;
}
*/

td img {
	margin-top: 0;
	margin-bottom: -20px;
	padding: 0px 0px 0px 0px;
}

img {
	max-width: 100%;
	height: auto;
}

dt {
	font-style: italic;
}

summary {
	font-weight: bold;
}

#wind {
	background-image: url(pics/windpic.png);
	background-position: 50% 50%;
}

div#tables{
	float: center;
}
div#sundata {
	float: left;
	width: 50%;
}
div#moondata {
	float: right;
	width: 50%;
}

table#suntable {
	background-color:#ffffcf;
	float: right;
}

table#moontable {
	background-color:#dfdfff;
}

/* This gives an element of "responsive design" so that it will move the moon data table under
the sun data table if the screen is smaller than 850 pixels wide */

@media screen and (max-width: 850px) {

	div#sundata {
		width: 100%;
	}
	div#moondata {
		width: 100%;
	}

	table#suntable {
		margin-left:auto; /* this is how we do centre alignment; set both margins to auto */
		margin-right: auto;
		float: none; /* But we also need to cancel the float: right from above */
	}
	table#moontable {
		margin-left:auto;
		margin-right: auto;
	}


}

#header {
	line-height: 3em; /* specifying line-height rather than height enables single line text to be centred */
	background-color: #eaefff;
	border-bottom: solid thin #8080b0;
	border-top: solid thin #8080b0;
	width: 100%;


/*

	background-image: url(pics/trawsalltsunset.jpg);
	background-position: 50% 90%;
*/
	background-image: url(pics/trawsallteira.jpg);
	background-position: 50% 60%;

/* Cors Caron image taken Christmas Day 2014 from footpath along leat above Pontrhydygroes */
/*	background-image: url(pics/cors-caron.jpg);
	background-position: 50% 70%;

	background-image: url(pics/lookingwest.jpg);
	background-position: 50% 30%;

	background-image: url(pics/Gwanwyn-eira.jpg);
	background-position: 50% 30%;

	background-image: url(pics/trawsalltgwanwyn.jpg);
	background-position: 50% 60%;
*/

	background-size: cover;

	text-align: center;
}

#menu {
/*      position: fixed; */
        float: left;
        width: 8em;
        padding-top: 0em;
/*      background-color: #cfcfff;
        border-right: solid thick #8080b0;
	border-bottom: solid thick #8080b0; */
        }

#menu p {
          margin-left: 10px;
          margin-top: 2px;
          margin-bottom: 2px;
          }

#menu a {
          color: #500050;
          text-decoration: none;
          padding-left: 0.25em;
          padding-right: 0.25em;
          }

#menu a:hover {
                background-color: #404090;
}

#menu a:focus { 
                 background-color: #a0a0ff;
}

#menu a:active { 
	color: #ffff00;
}

.innershadow {
	box-shadow: 0px 0px 10px #333 inset;
	border-radius: 15px;
}

#wdata {
	max-width: 1024px;
}

#content {
        margin-left: 8em;
        padding-left: 1em;
        }

.emboss {
	text-shadow: 0px -1px 0px rgba(255,255,255,.5); /* 50% white from top */
}

.lightshadow {
	text-shadow: 0px 0px 3px #FFFFFF;
 }
.darkshadow {
	color: white;
	text-shadow: 0px 0px 3px #000000;
 }