/* Cascading style sheet for the Hampstead Scientific Society \*/
/* Astronomy Section Website                                  \*/
/* by: Daniel Pooley.                                         \*/
/* on: 2008-02-23pm                                           \*/
/*                                                            \*/
body {
	margin		: 0px;
	margin-right	: 3px; 
	font-family		: sans-serif;
	font-size		: 12px;
	background-color	: #fff;
	color			: #444;
}

/** Banner headline formatting ****************************** \*/
/*                                                            \*/#banner {
	font-size			: 100%; 
	background-image		: url(./images/astro_banner.jpg); 
	background-repeat		: no-repeat; 
	background-position	: top left; 
	background-color		: transparent;
	color				: #bbb; 
	height			: 103px; 
}
#banner h1 {
	background-color	: transparent;
	padding-top		: 30px;
	padding-right	: 10px;
	padding-left	: 450px;
	margin-left		: 80px;
	margin-right	: 100px;
	border-bottom	: 1px #444 solid;
	border-top		: 0px;
	font-size		: 26px;
	font-weight		: bold;
	text-align		: right;
}

a {
	font-size		: 100%;
	font-weight		: 700; 
	color			: #390; 
	position		: static; 
	text-decoration	: underline;
}
a:link {
	font-size		: 100%;
}
a:visited {
	font-size		: 100%;
	color			: #259; 
	position		: static; 
}
a:hover {
	font-size		: 100%;
	font-weight		: 900; 
	color			: #900; 
	position		: static; 
}
p {
	padding-right	: 25px; 
	padding-left	: 25px; 
	padding-bottom	: 5px;  
	padding-top		: 5px;
	font-size		: 100%; 
	margin		: 0px; 
	line-height		: 140%;
	text-align		: left;
}
p.small {
	font-size		: 80%; 
	margin		: 0px; 
	line-height		: 200%;
	text-align		: center;
}

/* The notes paragraph class is used only for the various notes \*/
/* I left around the site to draw attention to something needing\*/
/* work.                                                        \*/
/*                                                              \*/
p.notes {
	font-style		: italic;
	font-family		: serif;
	text-align		: left;
}
p.notes b {
	font-style		: normal;
}

.right {
	float			: right;
	text-align		: right;
}
.left {
	float			: left;
}
.centre {
	margin-left		: auto;
	margin-right	: auto;
	text-align		: center;
}
.centred {
	text-align		: center;
}

img.left {
	float			: left;
	margin		: 10px;
	margin-left		: 0px;
}

img.right {
	float			: right;
	margin		: 10px;
	margin-right	: 0px;
}

br.both {
	clear			: both;
}
hr {
	color			: #ccc;
	background-color	: transparent;
}
hr#footerBottom {
	color			: #ccc;
	width			: 55%;
	height		: 1px;
	background-color	: transparent;
}
hr#footerTop {
	color			: #ccc;
	width			: 85%;
	height		: 1px;
	background-color	: transparent;
}
table {
	padding		: 2px;
	font-size		: 100%;
}
tr {
	border-top		: 1px #666 solid;
	border-bottom	: 1px #666 solid;
}
th {
	border		: 1px #333 solid;
	padding-left	: 6px;
	padding-right	: 6px;
	font-size		: 100%;
	text-align		: center;
}
td {
	border		: 1px #999 solid;
	padding		: 3px;
	padding-right	: 20px;
	padding-left	: 20px;
	font-size		: 100%;
	text-align		: center;
}

th.officers {
	border		: 1px #999 solid;
	padding-left	: 6px;
	padding-right	: 6px;
	font-size		: 100%;
	text-align		: right;
}
td.officers {
	border		: 1px #999 solid;
	padding-left	: 20px;
	padding-right	: 20px;
	font-size		: 100%;
	text-align		: center;
}
td.officersEmail {
	border		: 1px #999 solid;
	padding-left	: 6px;
	padding-right	: 6px;
	font-size		: 100%;
	text-align		: left;
}
table.centred-table {
	margin-left		: auto;
	margin-right	: auto;
}

img {
	margin		: 5px;
}
img a {
	border		: 2px solid;
}

h1 {
	font-size         : 120%;
	background-color  : #fff;
      padding-bottom    : 9px;
      padding-right     : 5px;
      padding-left      : 15px;
      padding-top       : 7px;
      margin            : 0px;
	margin-right	: -20px;
	border-top        : #999 1px solid;
	text-align		: left;
}
h2 {
	padding-left	: 15px; 
	padding-right	: 5px; 
	padding-bottom	: 2px; 
	padding-top		: 3px; 
	font-size		: 110%; 
	margin		: 10px 0px; 
	text-align		: left;
}
h3 {
	padding-right	: 10px; 
	padding-left	: 15px; 
	padding-top		: 5px;
	padding-bottom	: 5px; 
	margin		: 0px; 
	font-size		: 100%; 
	text-align		: left;
}

ol {
	list-style-type	: upper-roman;
}
ul {
	padding-left	: 20px; 
	margin-bottom	: 0px; 
	margin-top		: 0px; 
	font-size		: 100%;
}
li {
	margin-top		: 1px; 
	font-size		: 100%;
	border-bottom	: 1px #bbb solid;
	text-align		: left;
}

/** Leftnav formatting ************************************** \*/
/*                                                            \*/#leftnav {
	float			: left; 
	width			: 12.5%; 
	padding-bottom	: 0px; 
	text-align		: left;
	margin-right	: 3px;
	background-color	: transparent;
	text-align		: center;
}
#leftnav li {
	font-size		: 100%;
	text-align		: left;
	list-style-type	: none;
	padding-top		: 0px;
	padding-right 	: 0px;
	background-color	: #999;
}
#leftnav span {
	display		: block;
	font-size		: 100%;
	font-weight		: bold;
	margin-top		: 1px;
	margin-left		: 3px;
	border-left		: 4px #ddd solid; 
	padding-top		: 3px;
	padding-bottom	: 3px;
	padding-left	: 3px;
	background-color	: #eee;
	text-align		: left;
}
#leftnav li span {
	display		: block;
	font-size		: 100%;
	font-weight		: bold;
	margin-bottom	: 0px;
	margin-left		: 0px;
	border-left		: 4px #ddd solid; 
	padding-top		: 3px;
	padding-bottom	: 3px;
	padding-left	: 6px;
	background-color	: #eee;
}
#leftnav a {
	display		: block; 
	background-color	: #ddd;
	padding-bottom	: 2px; 
	padding-top		: 2px; 
	padding-left	: 3px;
	border-bottom	: 1px #bbb solid;
	border-left		: 1px #bbb solid;
	border-top		: 1px #eee solid;
	border-right	: 1px #eee solid;
	margin-top		: 1px;
	margin-left		: 3px;
	font-size		: 100%;
	text-align		: left; 
	text-decoration	: none;
}
#leftnav a img {
	display		: block;
	margin-top		: 2px;
	margin-bottom	: 2px;
	margin-left		: auto;
	margin-right	: auto;
	width			: 75px;
	border		: 0px;
	padding-top		: 10px;
	padding-bottom	: 10px;
	text-align		: center;
}
#leftnav ul {
      margin-left       : 3px;
      padding-left      : 7px;
}
#leftnav ul li a {
      background-image  : none;
      text-align        : left;
      list-style-type   : none;
      padding-left      : 7px;
      border            : 0px;
}
#leftnav a:hover {
	color			: #ddd;
	background-color	: #555; 
}
#leftnav a:hover span {
	color			: #ddd;
	background-color	: #555; 
}

/** Content formatting ************************************** \*/
/*                                                            \*/#content {
	float				: left; 
	padding-bottom		: 10px; 
	padding-right		: 20px;
	width				: 64%;
	border-left 		: #888 2px solid;
	background-image		: url(./images/HSS_Logo_bckg.gif); 
	background-repeat		: no-repeat; 
	background-position	: bottom right; 
	background-color		: #eee;
	text-align			: center;
}
#content ul {
	padding-left		: 12px;
	margin-left			: 60px; 
	font-size			: 100%;
}
#content li {
	margin-top			: 1px; 
	font-size			: 100%;
	border-bottom		: 0px #bbb solid;
	list-style-type		: none;
}
#content ol li {
	list-style-type		: upper-roman;
}

/** Thumbbox formatting ************************************* \*/
/*                                                            \*/
div.thumbbox {
	margin-left			: auto;
	margin-right		: auto;
	width				: 510px;
}

div.thumbbox a {
    	text-decoration 		: none;
}

/** Thumbs formatting *************************************** \*/
/*                                                            \*/
.thumbs {
    	float         		: left;
	width				: 250px;
	padding-bottom		: 0px;
	margin			: 1px;
	margin-top			: 1px;
	background-color		: #ccc;
	background-image		: url(./images/film_edge.gif);
	background-position	: right center;
	background-repeat		: no-repeat;
	border-top			: 1px #999 solid;
	border-bottom		: 1px #999 solid;
	border-left			: 1px #999 solid;
	font-size			: 100%;
	font-weight			: normal;
    	text-decoration 		: none;
    	text-align			: left;
	color				: #333;
}
.thumbs a:link, .thumbs a:visited {
	display			: block;
	width				: 250px;
	height			: 100%;
	background-color		: #ccc;
	background-image		: url(./images/film_edge.gif);
	background-position	: right center;
	background-repeat		: no-repeat;
	font-weight			: normal;
}
.thumbs a:hover {
	background-color		: #ddd;
}
.thumbs img {
	margin-top			: 10px;
	margin-left			: 5px;
	margin-right		: 30px;
	border			: 3px #fff solid;
}
.thumbs:hover {
	background-color		: #ddd;
}
.thumbs span {
	display			: block;
	float				: left;
	width				: 145px;
	margin-top			: 10px;
	padding-bottom		: 10px;
	margin-left			: 10px;
	padding-right		: 0px;
	color				: #333;
	text-align			: left;
}

/** Alert formatting **************************************** \*/
/*                                                            \*/
#alert {
	background		: #ef7;
	color			: #333;
	float			: right; 
	padding		: 0px;
	padding-bottom	: 5px; 
	width			: 17%; 
	border	 	: #000 3px ridge;
	text-align		: left;
	margin-top		: 0px;
	margin-right	: 5px;
	margin-left		: 0%;
}
#alert h1 {
	padding		: 0px;
	padding-top		: 10px;
	padding-bottom	: 10px;
	margin		: 0px;
	border		: 0px;
	text-align		: center;
	text-decoration	: none;
	font-size		: 130%;
	background-color	: transparent;
}
em.blink {
	font-style		: normal;
	text-decoration	: blink;
}

#alert h2 {
	text-align		: center;
	margin		: 0px;
	padding		: 0px;
	padding-bottom	: 5px;
	padding-top		: 5px;
	font-size		: 80%;
}
#alert p {
	text-align		: left;
	margin-top		: 0px;
	padding-right	: 5px;
	padding-left	: 5px;
	padding-top		: 0px;
	padding-bottom	: 15px;
}
#alert a:link {
	color			: #194;
}

/** TimeStamp formatting ************************************ \*/
/*                                                            \*/
#timeStamp {
	background-image		: url(./images/hss_logo_small.png);
      background-position     : right;
      background-repeat       : no-repeat;
	text-align			: right;
	font-size			: 80%;
}

/* Headings with pictures in them *************************** \*/
/*                                                            \*/
h1#index {
      background-position     : right;
      background-image        : url(./images/sub_banner_dome.jpg);
      background-repeat       : no-repeat;
}
h1#observatory {
      background-position     : right;
      background-image        : url(./images/sub_banner_observatory.jpg);
      background-repeat       : no-repeat;
}
h1#history {
      background-position     : right;
      background-image        : url(./images/sub_banner_history.jpg);
      background-repeat       : no-repeat;
}
h1#events {
      background-position     : right;
      background-image        : url(./images/sub_banner_events.jpg);
      background-repeat       : no-repeat;
}
h1#links {
      background-position     : right;
      background-image        : url(./images/sub_banner_links.jpg);
      background-repeat       : no-repeat;
}
h1#skylights {
      background-position     : right;
      background-image        : url(./images/sub_banner_chart.jpg);
      background-repeat       : no-repeat;
}
h1#comets {
      background-position     : right;
      background-image        : url(./images/sub_banner_comets.jpg);
      background-repeat       : no-repeat;
}
h1#meteors {
      background-position     : right;
      background-image        : url(./images/sub_banner_meteors.jpg);
      background-repeat       : no-repeat;
}
h1#eclipses {
      background-position     : right;
      background-image        : url(./images/sub_banner_eclipses.jpg);
      background-repeat       : no-repeat;
}
h1#moon {
      background-position     : right;
      background-image        : url(./images/sub_banner_moon.jpg);
      background-repeat       : no-repeat;
}
h1#solar {
        background-position   : right;
        background-image      : url(./images/sub_banner_solar.jpg);
        background-repeat     : no-repeat;
}
h1#planets {
        background-position   : right;
        background-image      : url(./images/sub_banner_planets.jpg);
        background-repeat     : no-repeat;
}
h1#transits {
        background-position   : right;
        background-image      : url(./images/sub_banner_transits.jpg);
        background-repeat     : no-repeat;
}
h1#deep_sky {
        background-position   : right;
        background-image      : url(./images/sub_banner_deep_sky.jpg);
        background-repeat     : no-repeat;
}
h1#members {
        background-position   : right;
        background-image      : url(./images/sub_banner_members.png);
        background-repeat     : no-repeat;
}
h1#contact {
        background-position   : right;
        background-image      : url(./images/sub_banner_contact.jpg);
        background-repeat     : no-repeat;
}
h1#galleries {
        background-position   : right;
        background-image      : url(./images/sub_banner_galleries.jpg);
        background-repeat     : no-repeat;
}
h1#conjunctions {
        background-position   : right;
        background-image      : url(./images/sub_banner_conjunctions.jpg);
        background-repeat     : no-repeat;
}

/* These are used for formatting on the links page.           \*/
/*                                                            \*/
div.linkbox {
	margin-left		: 25px;
	margin-right	: 25px;
	width			: 590px;
	background-color	: transparent;
	text-align		: left;
}
div.heading{
	float			: left;
	width			: 30%;
	font-weight		: bold;
	text-align		: left;
}
div.link {
	float			: left;
	width			: 70%;
	text-align		: right;
	background-color	: transparent;
	padding		: 0px;
	margin		: 0px;
	text-align		: right;
}
div.link a {
	text-decoration	: underline;
}
p.caption {
	padding		: 0px;
	margin		: 0px;
	width			: 60%;
	padding-bottom	: 10px;
	clear			: left;
}	
div.caption {
	float			: left;
	width			: 60%;
	font-weight		: normal;
	padding-bottom	: 10px;
	padding-right	: 240px;
	clear			: both;
	background-color	: transparent;
	text-align		: left;
}
hr.topLink {
	color			: #ccc;
	width			: 65%;
	height		: 1px;
	background-color	: transparent;
}

/* In the reports there is a small icon at the top leading to \*/
/* the pdf version. This bit is all about that.               \*/
/*                                                            \*/
div.pdf_icon {
	float			: right;
	width			: 80px;
	padding		: 1px;
	margin		: 1px;
	margin-top		: 5px;
	border	 	: #bbb 1px solid;
	text-align		: left;
	background-color	: transparent;
}
.pdf_icon a:link, .pdf_icon a:visited {
	display			: block;
	height			: 100%;
	background-color		: transparent;
	background-image		: url(./images/pdf_icon.gif);
	background-repeat		: no-repeat; 
	background-position	: center left; 
	font-weight			: normal;
	font-size			: 8pt;
	padding			: 0px;
	padding-left		: 20px;
	padding-right		: 2px;
	padding-top			: 2px;
	padding-bottom		: 2px;
}
.pdf_icon a:hover {
	background-color		: #fff;
}