* { margin: 0; padding: 0; outline: 0; }
body { margin: 0; padding: 0; outline: 0; font-family: Geneva, sans-serif; font-size: 90%; color: #333; background: #f3f3f3 url(images/header) repeat-x; }
::selection { background: #eeee00; color: black; text-shadow: #555 2px 2px 2px; }
#header { top: 10px; left: 10px; height: 130px; right: 4px; background-image: url(images/logosmall); background-repeat: no-repeat; font-family: 'Arial Black', 'Arial',  sans-serif; overflow: hidden; margin-left: 4px; margin-top: 4px; z-index: 2; }
#header h1 { padding-left: 120px; padding-top: 14px; font-style: italic; font-size: 32pt; text-shadow: #555 2px 2px 2px; color: white; overflow: hidden; }
#header p { padding-left: 130px; font-style: italic; font-size: 16pt; color: #777; text-shadow: #555 2px 2px 2px; }
#menu { position: absolute; width: 100%; background: #222 url(images/menu-header) repeat-x; height: 32px; padding-top: 12px; text-align: right; z-index: 2; overflow: hidden; }
#menu { color: white; }
#menu.fixed { position: fixed; top: 0; }
#menu a { color: white; }
#menu ul { list-style: none; margin: 0; padding: 0; padding-right: 10px; }
#menu li { display: inline; padding: 8px; border-top-left-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
#menu li.tab { background-color: #038cca; border-top: 1px solid #23acea; border-left: 1px solid #23acea; border-right: 1px solid #006aaa; }
#menu a { text-decoration: none; }
#menu a:hover,a:focus { text-decoration: underline; }
#menu li:hover { background-color: rgba(0,76,138,0.5); }
#menu li.tab:hover { background-color: #139cda; }
#main { position: relative; top: 32px; padding-top: 14px; padding-bottom: 14px; padding-left: 10px; padding-right: 10px; overflow: auto; z-index: 1; }
#main ul { padding-left: 3em; list-style: circle outside; }
#main h2,h3 { font-family: Verdana, Arial, Helvetica, sans-serif; margin-top: 10px; margin-bottom: 10px; text-shadow: #bbb 2px 2px 2px; }
#main h2 { text-align: center; }
#main p { margin-bottom: 1em; }
#main a { text-decoration: none; color: #038cca; }
#main a:hover { text-decoration: underline }
#main img { border: 0px;  }
#main .centre { text-align: center; }
pre { font-size: 125%; font-family: 'Times New Roman', Times, serif; margin-left: 2em; margin-top: 1em; margin-bottom: 1em; font-style: italic; }
:lang(cy),span[lang=cy] { font-style: italic; }
table.gazetteer { width: 90%; background: #ddd; margin-left: 5%; margin-bottom: 1em; border: 1px solid grey; padding: 8px; border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; box-shadow: 2px 2px 6px rgba(0,0,0,0.6); -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
td.gazetteer { border: 2px solid grey; border-collapse: collapse; padding: 4px; margin: 4px; }
table.gazetteer th { font-style: italic; border-bottom: 1px solid grey; margin: 0; text-align: left; }
th.place,th.county { width: 30%; }
th.gridref,th.council { width: 20%; }
table.gazetteer tr:nth-child(even) { background: #eee; }
table.gazetteer td { margin-left: 0; margin-right: 0; }
.boxcentre { text-align: center; padding: 6px; margin-left: 6px; text-shadow: #bbb 2px 2px 2px }
.boxright { clear: right; float: right; border: 1px solid grey; padding: 6px; margin-left: 6px; text-shadow: #bbb 2px 2px 2px; border-radius: 4px 4px 4px 4px; font-size: 125%; }
.flagbox { clear: right; float: right; padding-left: 6px; padding-right: 0px; margin-left: 6px; text-shadow: #bbb 2px 2px 2px; width: 120px; text-align: center; }
.photobox { float: left; text-align: center; font-size: 80%;}
.boxright td { font-size: 75%; padding-right: 6px; }
.smallright { text-align: right; font-size: 50%; width: 100%; }
.flagpicture { box-shadow: 6px 6px 18px rgba(0,0,0,0.6); -webkit-box-shadow: 6px 6px 18px rgba(0,0,0,0.6); margin: 6px; }
#contents { float: left; border: 1px solid #ddd; margin-bottom: 1em; padding: 4px 8px 4px 4px; border-radius: 10px 10px 10px 10px; box-shadow: 2px 2px 6px rgba(0,0,0,0.6); -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
#contents p { font-weight: bold; margin-bottom: 2px; }
.clear { clear: both; }
.clearleft { clear: left; }
#footer { position: relative; bottom: 0; right: 0; height: 16px; width: 100%; padding-bottom: 6px; padding-top: 6px; margin: 0; margin-top: 3em; background: #ccc; font-size: 75%; text-shadow: white 2px 2px 2px;}
#footer a { color: #333; text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#links { padding-left: 20px; text-align: left; float: left; }
#copy { padding-right: 20px; text-align: right; float: right; }
#mapwrapper { float: right; clear: right; box-shadow: 3px 3px 3px rgba(0,0,0,0.6); margin-left: 1em; border: 1px solid grey;}
#mapwrapper p { margin: 0.5em; margin-right: 1em; text-align: right; }
#map { width: 300px; height: 300px; }
@media screen and (max-width: 900px) { #header h1 { letter-spacing: -1px; } }
@media screen and (max-width: 870px) { #header h1 { letter-spacing: -2px; } }
@media screen and (max-width: 690px) {
#staticmap { width: 290px; height: 334px; }
#menu { font-size: 90%; qtop: 30px; }
}
@media screen and (max-width: 600px) { #menu { font-size: 80%; height: 28px; } }
@media screen and (max-width: 850px) { #flagphotos { float: center; }}