/*****************************************************************************
** Overall Site Style
*****************************************************************************/

/*
 * Overall page styles.
 */
body {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	
	background-color:#eee;
	font-family: sans-serif;
	font-size: 95%;
}


/*****************************************************************************
** Common Page Structure
*****************************************************************************/

/*
 * The menu sidebar.  We make this fixed to the browser top so
 * it's always visible.
 */
#sidebar {
    float: left;
    margin-left: 10px;
    /* Don't understand why this is 10px too much: margin-top: 10px; */
	width: 170px;
}


/*
 * The box we display the preferences summary in within the sidebar.
 */
#prefbox {
	margin-top: 10px;
	border: 1px solid #888; 
    padding: 10px;
	width: 138px; /* Width of Menu Items */ 
	background-color: #f0e0ff;
	font-size: 85%;
}
#prefbox h3 {
	margin-top: 0;
	font-size: 115%;
}


/*
 * The page heading section, with the title etc.
 */
#header {
    margin: 10px 10px 0px 180px;
	overflow: auto;
	border: 2px none #f00;  */
	/* border-bottom-style: groove; */
}


/*
 * Page title; large, bold and right.
 */
.title {
	margin-bottom: 10px;
	border: 1px solid #888; 
	background-color: #c0c0d0;
    padding: 20px 10px 10px 10px;
}
.title h1 {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0px 10px 0px 10px;
	text-align: right;
	font-weight: bold;
	font-size: 180%;
}
.title h3 {
	margin-top: 0;
}
.title.what {
	background-color: #f09080;
}
.title.when {
	background-color: #7FCA9F;
}
.title.why {
	background-color: #85C1F5;
}
.title.lists {
	background-color: #e0c0d0;
}
.title.site {
	background-color: #c0c0d0;
}
.title.eclipse {
	background-color: #F4BA70;
}
.title.eclipse.home {
    padding: 4px 10px 8px 10px;
}
.title.log {
	background-color: #e0f070;
}
.title.shoggoth {
	background-color: #a050c0;
}
.title.error {
	background-color: #ff4040;
}


/*
 * The home page boxes match the title colours.
 */
.homebox {
	margin: 10px;
	padding: 10px;
	border: 1px solid #ccc;
}
.homebox h1 {
	margin-top: 0;
	padding: 10px 10px 5px 10px;
	font-size: 150%;
	color: #000;
}
.homebox.what {
	background: #ffd0c0;
}
.homebox.when {
	background: #b0f0c0;
}
.homebox.why {
	background: #d0e8f0;
}
.homebox.lists {
	background: #ffe0f0;
}
.homebox.site {
	background: #e8e8ff;
}


/*
 * The page main content section.
 */
#body {
	margin: 0px 10px 0px 180px;
	overflow: auto;
	border: 1px solid #ccc; 
    padding: 10px;
	background-color:#fffafa;
	line-height: 140%;
}

#body.specialsec {
    border: 6px solid #8ee;
	padding: 5px;
}


/*
 * The page tail section, sometimes used for tabs.
 */
#pagetail {
    margin: 0px 10px 10px 180px;
	/* border: 1px solid #ccc; */
	/* border-top-style: groove;  */
}


/*
 * The page footer section, for copyright and stats.
 */
#footer {
    margin: 0px 10px 10px 180px;
	/* border: 1px solid #ccc; */
	/* border-top-style: groove;  */
}


/*
 * The footer info table, which is inside #footer.
 */
#foottable {
	width: 100%;
}
#copy {
	font-size: 80%;
	text-align: left;
}
#attribs {
	font-size: 80%;
	text-align: right;
}


/*****************************************************************************
** Home Page Structure
*****************************************************************************/

#box_holder {
	width: 100%;
}
#box_holder td {
	vertical-align: top;
	width: 50%;
}


/*****************************************************************************
** Page Sub-Structure
*****************************************************************************/

/*
 * An alert box; indent, box and highlight the text.
 */
.alert {
    margin: 0px 30px 40px 30px;
	border: 4px groove #f88; 
    padding: 10px 20px 10px 20px;
	text-align: center;
	font-size: 150%;
	font-weight: bold;
	color: #d33;
}


/*
 * Page intro section; slightly highlighted.
 */
.intro {
	margin-bottom: 14px;
	border: 2px none #ccc; 
	border-bottom-style: groove; 
    padding: 10px 20px 10px 20px;
	font-size: 102%;
}


/*
 * Page outtro section; boxed and slightly highlighted.
 */
.outtro {
    margin: 30px 30px 30px 30px;
	border: 2px groove #ccc; 
    padding: 10px 20px 10px 20px;
	font-size: 102%;
}


/*****************************************************************************
** Boxes
*****************************************************************************/

/*
 * A note box; fairly low-key.
 */
.notebox {
    margin: 20px 30px 20px 30px;
	border: 1px groove #ccc; 
    padding: 4px 20px 4px 20px;
	font-size: 95%;
}


/*
 * A note box with a coloured bg.
 */
.colbox {
    margin: 30px 30px 30px 30px;
	background: #ada;
	border: 1px groove #ccc; 
    padding: 0px 20px 0px 20px;
	font-size: 95%;
}


/*
 * A note box with a coloured bg.
 */
.redbox {
    margin: 30px 30px 30px 30px;
	background: #fcc;
	border: 1px groove #ccc; 
    padding: 0px 20px 0px 20px;
	font-size: 95%;
}


/*
 * A more prominent note box.
 */
.noticebox {
    margin: 30px 30px 30px 30px;
	border: 1px groove #ccc; 
    padding: 5px 20px 5px 20px;
    text-align: center;
	font-size: 95%;
}


/*
 * A more prominent note box.
 */
.rednoticebox {
    margin: 15px 30px 15px 30px;
	border: 1px groove #ccc; 
	background: #fcc;
    padding: 5px 20px 5px 20px;
    text-align: center;
	font-size: 95%;
}


/*
 * "Special site" info box.  Use with div.
 */
div.specialbox {
    margin: 10px 15% 10px 15%;
    border: 6px solid #8ee;
	padding: 0px 8px;
	text-align: center;
}


/*
 * A full-width news flash box.
 */
div.newsflash {
    margin: 15px 0 15px 0;
    width: auto;
	border: 3px groove #a0f0f0;
	background: #a0f0f0;
    padding: 20px 20px 20px 20px;
    text-align: left;
	font-size: 105%;
}


/*
 * A full-width news flash box, black background.
 */
div.newsblack {
    margin: 15px 0 15px 0;
    width: auto;
	border: 3px groove #a0f0f0;
	background: #000000;
	color: #ccc;
    padding: 20px 20px 20px 20px;
    text-align: left;
	font-size: 105%;
}
div.newsblack a.intlink:link {
    color: #60e0e0;
}
div.newsblack a.intlink:visited {
    color: #a080ff;
}

/*
 * Eclipse technical info box.  Use with div.  Note that this also picks up
 * the ".technical" style.
 */
div.technical {
	margin-left: 35%;
	border-width: 1px;
	border-style: solid;
	border-color: #aaa;
	padding: 0px 6px;
	text-align: right;
}


/*
 * A sidebar info box.  Use with div.  Note that this includes a copy of
 * the ".technical" style.
 */
div.sidebar {
	float: right;
	clear: right;
	margin-left: 10px;
	margin-bottom: 6px;
	width: 30%;
	border-width: 2px;
	border-style: solid;
	border-color: #888;
	padding: 0px 10px;
	font-size: 85%;
	background: #faf6f6;
	color: #077;
}


/*
 * A "news" sidebar.
 */
div.newsbar {
	float: right;
	clear: right;
	margin: 2px 0px 2px 6px;
	border-width: 1px;
	border-style: solid;
	border-color: #aaa;
	min-height: 26px;
	text-align: right;
	width: 30%;
	background-image: url('/File/Graphics/site/news.gif');
	background-position: 4px 2px;
	background-repeat: no-repeat;
	padding: 2px 6px 2px 36px;  /* width of the image plus a little extra padding */
	color: #0000EE;
}


/*
 * A double-indented paragraph.
 */
div.indented {
	margin: 0px 40px 0px 40px;
}


/*****************************************************************************
** Tables
*****************************************************************************/

/*
 * Basic table adjustments.
 */
table td {
	vertical-align: top;
}
table dl {
	margin: 0;
}


/*
 * A borderless general information table.
 */
table.nakedtable {
    margin-left: 3em; 
	color: #333333;
}
table.nakedtable th {
	padding: 0px 2px;
	background: #ccc;
	text-align: left;
	font-size: 105%;
	font-weight: bold;
}
table.nakedtable th.thsmall {
	font-size: 90%;
}
table.nakedtable td {
	padding: 0px 2px;
}


/*
 * A general information table.
 */
table.infotable {
    margin-left: 3em; 
	border-width: 1px;
	border-color: #aaa;
	border-collapse: collapse;
	color: #333333;
}
table.infotable th {
	border-width: 1px;
	padding: 2px 8px;
	border-style: solid;
	border-color: #888;
	background: #ccc;
	text-align: left;
	font-size: 105%;
	font-weight: bold;
}
table.infotable th.thsmall {
	font-size: 90%;
}
table.infotable td {
	border-width: 1px;
	border-style: solid;
	border-color: #aaa;
	padding: 2px 8px;
}


/*
 * A technical information table.
 */
table.techtable {
    margin-left: 3em; 
	border-width: 1px;
	border-color: #aaa;
	border-collapse: collapse;
	color: #333333;
}
table.techtable th {
	border-width: 1px;
	padding: 2px 8px;
	border-style: solid;
	border-color: #888;
	background: #ccc;
	text-align: left;
	font-size: 95%;
	font-weight: bold;
}
table.techtable td {
	border-width: 1px;
	border-style: solid;
	border-color: #aaa;
	padding: 2px 8px;
	font-size: 85%;
}


/*
 * A table used to present a list of eclipses.
 */
table.eclipselist {
    width: auto;
	margin-top: 10px;
	margin-left: 3%;
	margin-right: 3%;
	border-collapse: collapse;
}
table.eclipselist tr {
	display: block;
	border-top: 1px solid #aaa; 
}
table.eclipselist td {
	background: transparent;
}
table.eclipselist tr.past {
	background: #f0eaea;
}
table.eclipselist tr.lastpast {
	background: linear-gradient(#f0eaea, #f0eaea, #bdb0b0);
}
table.eclipselist tr.happening {
	background: #ffe080;
}
table.eclipselist tr.starred {
	background-image: url('/File/Graphics/site/BigAlert.png');
	background-position: 65% 50%;
	background-repeat: no-repeat;
}

table.eclipselist tr:last-child {
	border-bottom: 1px solid #aaa;
}
table.eclipselist td:nth-child(1) {
    width: 26%;
    padding: 8px 0px 8px 10px;
}
table.eclipselist td:nth-child(1).highlight {
	padding-left: 7px;
	border-left: 6px solid #8ee; 
}
table.eclipselist td:nth-child(2) {
    padding: 8px 6px 8px 12px;
}


/*****************************************************************************
** Lists
*****************************************************************************/

/**
 * General UL styling; put some space in it.
 */
ul.biglist li {
	margin-top: .5em;
	margin-bottom: .5em;
	margin-left: 1.5em;
	margin-right: 3em;
	list-style-position: outside;
}
 

/*
 * A DL used to present tabular data, like <dt>thing <dd> explanation...
 */
dl.glossary {
    /* margin: 20px auto; */
    overflow: hidden;
    position: relative;
}
dl.glossary dt {
    float: left;
    width: 15%;
    clear: both;
	border: 1px solid #ccc; 
    padding: 1px;
    position: relative;
}
dl.glossary dd {
    float: left;
    width: 80%;
	margin: 0;
	border: 1px solid #ccc; 
    padding: 1px;
}


/*
 * A DL used to present a menu, like <dt>title <dd> explanation...
 */
dl.menulist {
    overflow: hidden;
    position: relative;
    width: auto;
	margin-left: 5%;
	margin-right: 5%;
	border-bottom: 1px solid #ccc;
}
dl.menulist dt {
    float: left;
    width: 30%;
    clear: both;
	margin: 0;
	border-top: 1px solid #ccc; 
    padding: 3px 0px 3px 0px;
    position: relative;
	font-size: 105%;
	font-weight: bold;
}
dl.menulist dd {
    float: left;
    width: 70%;
	margin: 0;
	border-top: 1px solid #ccc; 
    padding: 3px 0px 3px 0px;
}


/*
 * A UL used to present a menu horizontally, like <li>text...
 */
.hmenulist {
	margin-left: 5%;
	margin-right: 5%;
	width: 90%;
    display: table;
	table-layout: fixed;
	border-top: 1px solid #ccc; 
	border-bottom: 1px solid #ccc; 
}
.hmenulist ul {
	display: table-row;
}

.hmenulist li {
	display: table-cell;
    padding: 3px 0px 3px 0px;
	text-align: center;
	font-size: 105%;
	font-weight: bold;
}


/*
 * A UL used to present a list of log legs.
 */
ul.loglist {
    overflow: hidden;
    position: relative;
    width: auto;
	margin-left: 3%;
	margin-right: 3%;
	border-bottom: 1px solid #aaa;
	list-style: none;
    padding-left: 0;
}
ul.loglist li {
    width: 100%;
    clear: both;
	margin: 0;
	border-top: 1px solid #aaa; 
    padding: 8px 0px 8px 0px;
}


/*
 * A UL used to present a list of log pages.
 */
ul.pagelist {
    overflow: hidden;
    position: relative;
    width: auto;
	margin-left: 8%;
	margin-right: 3%;
	list-style: none;
    padding-left: 0;
}
ul.pagelist li {
	margin: 0;
    padding: 8px 0px 8px 0px;
}


/*****************************************************************************
** Links
*****************************************************************************/

/*
 * A non-classed link: this is an error.
 */
a:link {
	color: #f00;
}
a:visited {
	color: #f00;
}


/*
 * A non-higlighted hyperlink.
 */
a.quietlink {
	color: #000;
	text-decoration: none;
}

/*
 * An in-site hyperlink.
 */
a.intlink:link {
	color: #06b;
}
a.intlink:visited {
	color: #60c;
}


/*
 * An external hyperlink.
 */
a.extlink {
	background-image: url('/File/Graphics/site/extlink.png');
	background-position: right;
	background-repeat: no-repeat;
	padding-right: 14px;  /* width of the image plus a little extra padding */
	color: #0000EE;
}
a.extlink:visited {
	color: #551A8B;
}


/*
 * Style a link like a button.
 */
.linkbutton {
    border-radius: 4px;
    border: solid 1px #20538D;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    background: #5bf;
    padding: 6px 12px 6px 12px;
    text-decoration: none;
	text-align: center;
	font-size: 105%;
	font-weight: bold;
}
.linkbutton:link {
	color: #049;
}
.linkbutton:visited {
	color: #049;
}
.linkbutton:hover { 
    background: #5ef;
} 


/*****************************************************************************
** Images
*****************************************************************************/

/*
 * Image setup styles.  We place images in a div, and align the div
 * appropriately.  This lets us group an image with its caption.
 */
div.imfloatleft {
	float: left;
	padding-right: 8px;
	text-align: left;
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
}

div.imfloatright {
	float: right;
	padding-left: 8px;
	text-align: right;
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
}

div.imcenter {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 80%;
	position:relative;
}
div.imcenter img {
	max-width: 100%;
}

div.imthumbleft {
	clear: both;
	float: left;
	margin-right: 8px;
	margin-bottom: 8px;
	padding: 6px;
	border: 1px solid #aaa; 
	width: 180px;
	text-align: left;
	font-size: 80%;
	position:relative;
}
div.imthumbleft img {
	max-width: 100%;
}

div.imthumbright {
	clear: both;
	float: right;
	margin-left: 8px;
	margin-bottom: 8px;
	padding: 6px;
	border: 1px solid #aaa; 
	width: 180px;
	text-align: right;
	font-size: 80%;
	position:relative;
}
div.imthumbright img {
	max-width: 100%;
}

div.imthumbcentre {
	margin-left: auto;
	margin-right: auto;
	padding: 6px;
	border: 1px solid #aaa; 
	width: 180px;
	text-align: centre;
	font-size: 80%;
	position:relative;
}
div.imthumbcentre img {
	max-width: 100%;
}

div.iminline {
}


/*
 * An image displayed in a page.
 */
.pageimg {
	max-width: 100%;
}


/*****************************************************************************
** Overlays
*****************************************************************************/

/*
 * An icon overlaid over something.
 */
.iconover {
    position: absolute;
    right: 2px;
    top: 2px;
    z-index: 9999;
}


/*****************************************************************************
** Maps
*****************************************************************************/

/*
 * A Google map view.
 */
.largemap {
	clear: both;
	display: block;
	height: 500px;
}
.smallmap {
	clear: both;
	display: block;
	height: 400px;
}
.hugemap {
	clear: both;
	display: block;
	height: 800px;
}

.mapcaption {
	text-align: center;
	font-size: 80%;
}


/*
 * Styles for map labels.
 */
.maplabelST {
	border: 1px solid #00f;
	background-color: white;
	padding: 0 2px 0 2px;
	text-align: center;
	font-size: 100%;
	line-height: 14px;
}
.maplabelSH {
	border: 1px solid #ff0;
	background-color: white;
	padding: 0 2px 0 2px;
	text-align: center;
	font-size: 100%;
	line-height: 14px;
}
.maplabelSA {
	border: 1px solid #f00;
	background-color: white;
	padding: 0 2px 0 2px;
	text-align: center;
	font-size: 100%;
	line-height: 14px;
}
.maplabelLT {
	border: 1px solid #00f;
	background-color: white;
	padding: 0 2px 0 2px;
	text-align: center;
	font-size: 100%;
	line-height: 14px;
}
.maplabelLP {
	border: 1px solid #f00;
	background-color: white;
	padding: 0 2px 0 2px;
	text-align: center;
	font-size: 100%;
	line-height: 14px;
}
.maplabelLN {
	border: 1px solid #ff0;
	background-color: white;
	padding: 0 2px 0 2px;
	text-align: center;
	font-size: 100%;
	line-height: 14px;
}
.maplabelLogEntry {
	border: 1px solid #00f;
	background-color: white;
	padding: 2px 4px 2px 4px;
	text-align: center;
	font-size: 110%;
	line-height: 14px;
}


/*****************************************************************************
** Text Effects
*****************************************************************************/

/*
 * A footnote, like an attribution; small.
 */
.footnote {
	font-size: 80%;
}


/*
 * Eclipse type, in lists.  Use with span.
 */
.eclisetype {
	font-weight: bold;
	color: #760;
}


/*
 * Eclipse technical info line.  Use with span.
 */
.technical {
	font-size: 85%;
	color: #077;
}


/*
 * An in-paragraph heading, as in:
 * 		<p><span class="parahead">Rotational Period</span>: The
 *		rotational period</i> of the Moon ...
 */
.parahead {
	font-size: 105%;
	font-weight: bold;
}


/*
 * Time display stypes, for local (tz) and UT times.
 */
.uttime {
	color: #930;
}

.tztime {
	color: #073;
}

/*
 * Display hinting for class of data available.  E.g. datapoor
 * used for text in eclipses where no supplementary info is available.
 */
.datapoor {
	color: #930;
}
.datagood {
	color: #073;
}


/*
 * Error text display.
 */
.errortext {
	color: #e00;
	font-weight: bold;
}
.warntext {
	color: #b40;
	font-weight: bold;
}
.oktext {
	color: #0a0;
	font-weight: bold;
}


/*
 * Emphasized text.
 */
.emph {
	font-weight: bold;
}
.big {
	font-size: 105%;
}
.bigemph {
	font-weight: bold;
	font-size: 105%;
}


/*
 * Special highlight.
 */
.special {
	font-weight: bold;
	font-style: italic;
	background: #8ed;
	padding: 0px 5px 0px 5px;
}


/*
 * Extreme emphasized text.
 */
.emph_warning {
	color: #a00;
}

.emph_danger {
	font-weight: bold;
	text-decoration: underline;
}