/** thespaceinvader.co.uk main style sheet**/

body {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  margin: 0;
}

td {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	width: auto;
}

th {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
}

img {
	border-style: none;
}

/**Round off the corners of the background box**/
.border {diplay:block;
	margin-top: 25px;
	margin-bottom: 25px;
}
.contents {display:block;
	margin-right: 25px;
	margin-left: 25px;}
.contents *{
  display:block;
  height:1px;
  overflow:hidden;
  background:#bfbfbf}
.contents1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #e3e3e3;
  border-right:1px solid #e3e3e3;
  background:#cfcfcf}
.contents2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #f8f8f8;
  border-right:1px solid #f8f8f8;
  background:#cbcbcb}
.contents3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #cbcbcb;
  border-right:1px solid #cbcbcb;}
.contents4{
  border-left:1px solid #e3e3e3;
  border-right:1px solid #e3e3e3}
.contents5{
  border-left:1px solid #cfcfcf;
  border-right:1px solid #cfcfcf}

/**Content shares an alignment**/
.contentsfg {
	margin-right: 25px;
	margin-left: 25px;
	text-align: left;
	background-color: #bfbfbf;
	padding: 1px 25px 25px 25px;
	border: none;
}
/**Finally, attempt to make menu which appears floating left dropping down into the padding gap, depending from a menu subhead appearing above the horizontal bar.

Ideally, need to extend to border out to meet the one under the other header, but not sure how to do this as yet.**/
.menu {
	text-align:right;
	margin-right: 25px;
	float: left;
	width: 125px;
}
.menuhead {
	font-family: Impact, Charcoal, sans-serif;
	color: black;
	font-weight: bold;
	font-size: 250%;
	border-bottom-style: solid;
	margin-bottom: 0;
	margin-top: 10px;
}
.menuhead a, .menuhead a:link, .menuhead a:visited {
color: black;
font-weight: bold;
text-decoration: none;
}
.menuhead a:hover {
text-decoration:underline;
border-bottom-style:none;
background-color: #d9d9d9;
}
.menuitem {
  font-family: Impact, Charcoal, sans-serif;
  font-style: normal;
  font-size: 200%;
  margin-top: 0;
  margin-bottom: 0.1em;
}
.menuitem a, .menuitem a:link, .menuitem a:visited {
color: black;
border-bottom: 1px dotted;
text-decoration: none;
}
.menuitem a:hover, .menuitem a:hover visited{
color: black;
border-bottom: none;
text-decoration: underline;
background-color: #d9d9d9;
}

.contentright {
padding-left: 150px;
}

/**Links in contents are dotted underlined, solid underline when hovered with lighter background. Make small popup descriptions appear below each link on the home page when hovered.**/

.contentmain a, .contentmain a:link, .contentmain a:visited {
color: black;
border-bottom: 1px dotted;
text-decoration: none;
}
.contentmainsmall {
font-size: 70%;
}
.contentmain a:hover, .contentmain a:hover visited {
display: inline;
color: black;
border-bottom: none;
text-decoration: underline;
background-color: #d9d9d9;
}
/**.contentmain a span{
display: none;
}**/
/**.contentmain a:hover span{
font-size: 70%;
display: inline;
color: black;
border-bottom: none;
text-decoration: underline;
background-color: #d9d9d9;
}**/
/**Make header display with horizontal bar between header and subhead.**/
.header {
	font-family: Impact, Charcoal, sans-serif;
	color: black;
	font-weight: bold;
	font-size: 250%;
	border-bottom-style: solid;
	margin-bottom: 0;
margin-top: 11px;
}
.subheader{
	font-family: Impact, Charcoal, sans-serif;
  font-style: normal;
  font-size: 200%;
  margin-top: 0;
  margin-bottom: 0;
}
/**Make classes for the images such that their borders pop out when hovered if they are links.**/
.img {
}

.img a, .img a:link{
padding: 88px 3px 0 3px;
border: 1px dotted black;
}
 .img a:visited{
padding: 88px 3px 0 3px;
border: 1px dotted black;
}
.img a:hover, .img :hover visited{
background-color: #d9d9d9;
border: 1px solid black;
}
/**  Make the images they are links to pop up in an element on top on click, surrounded by a darker grey border.  Requires a small javascript snippet**/
#popUpDiv {
background-image:url('../image/overlay.png');
position:absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
#popUpDiv1 {
background-image:url('../image/overlay.png');
position:absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}#popUpDiv2 {
background-image:url('../image/overlay.png');
position:absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}#popUpDiv3 {
background-image:url('../image/overlay.png');
position:absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}#popUpDiv4 {
background-image:url('../image/overlay.png');
position:absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}#popUpDiv5 {
background-image:url('../image/overlay.png');
position:absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}#popUpDiv6 {
background-image:url('../image/overlay.png');
position:absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}#popUpDiv7 {
background-image:url('../image/overlay.png');
position:absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}#popUpDiv8 {
background-image:url('../image/overlay.png');
position:absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}#popUpDiv9 {
background-image:url('../image/overlay.png');
position:absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}#popUpDiv10 {
background-image:url('../image/overlay.png');
position:absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}#popUpDiv11 {
background-image:url('../image/overlay.png');
position:absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}#popUpDiv12 {
background-image:url('../image/overlay.png');
position:absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}

.popupcontent {
margin: 35px 35px 100px 35px;
padding: 25px 10px 25px 25px;
background-color: #eeeeee;
float: left;
}
.popupimage {
background-color: #eeeeee;
float: left;
border-right: 2px solid black;
padding-right: 15px;
}
.popuptext {
position: relative;
left: 15px;
padding: 0;
margin-top: 0;
margin-right: 35px;
}
.popuptext a, .popuptext a:link, .popuptext a:visited {
color: black;
border-bottom: 1px dotted;
text-decoration: none;
}
.popuptext a:hover, .popuptext a:hover visited {
display: inline;
color: black;
border-bottom: none;
text-decoration: underline;
background-color: #d9d9d9;
}

/**Footer**/

.Declaration {
	font-size: 70%;
	color: black;
}