/*
**	Stylesheet for the GEDCOM-Viewer
*/

/**
 * Overall settings
 */
body {background-color:whitesmoke; color:darkblue; font-family:Arial;}
h1, h3 {border-bottom: 0.05em solid orange;}
h1 {font-size:2em; font-weight:bold; margin-top:0em;}
h2 {font-size:1.75em; font-weight:normal;}
h4 {margin: 0.5em 0 0.25em 0;}
td {vertical-align:top;}
td.numeric {text-align: right;}
a {text-decoration:none; color:firebrick;}
a:hover {background-color: khaki;} 
.right {float: right;}
.left {float: left;}
.usedname {text-decoration: underline ;}
.lastname {text-transform: uppercase ;}
li {list-style-position: inside;}


/**
 * A section is something with a H3 header 
 */
.section h3 {font-weight:lighter; margin-top: 0.4em;}
.section img {float: left; height: 2.5em; margin: 0 1em 0 0.5em;}
.section {padding: 1em 0 1em 0;}


/**
 * The navigation area
 */
div.navigation
{
	z-index: 99; 
	position: absolute;
	top: 1em ;
	right: 3em ;
	border: solid crimson ;
	border-width: 1px 0px 1px 0px ;
	padding: 0em 1em 0em 1em; 
}
.navigation button
{
	cursor: pointer;
	width: 8em;
	margin: 0.2em;
	border: none;
	font-weight: bold;
}

/**
 * The header area
 */
div.header
{
	position: absolute;
	top: 1em;
	left: 4em;
	width: 60em;
	padding-top: 1.75em;
}
.header img
{
	float: left;
	height: 3em;
	margin: 0 1.5em 0 1em ;
}

/**
 * The content area
 */
div.content
{
	position: absolute;
	top: 6em;
	left: 4em;
	width: 60em;
}
div.endofcontent
{
	border-top: solid orange 0.1em;
	height: 1em;
	clear: both;
}

/**
 * A Record (such as a source or a repository) and the references to it 
 * filling the 60 em content area.
 */
div.record
{
	width: 29em;
	float: left;
}
div.record img
{
	width: 29em;
}
div.references
{
	width: 30em ;
	float: right;
}

/**
 * Special for multimedia-objects.
 * Give more space for the object, less for the references.
 */
div.showobje div.record 
{
	width: 39em;
}
div[class~="showobje"] div[class="record"] img
{
	/* IE6 won't see this */
	width: auto;
	max-width: 39em;
}
div.showobje div.references
{
	width: 20em ;
}
div.showobje iframe
{
	width: 39em;
	height: 25em;
}
div.showobje object
{
	width: 39em;
	height: 20em;
}

/**
 * The Welcome Screen
 */
.welcome
{
}

/**
 * The File Information Screen
 */
.fileinfo td
{
	padding: 0 1em 0.2em 1em;
}

/**
 *  An individual's vita and relatives 
 *  filling the 60 em content area
 */
div.vita
{
	float: left;
	width: 39em;
}
.vita table .symbol
{
	width: 1em ;
}
.vita table .date
{
	width: 6em ;
	text-align: right ;
	padding-right: 0.5em ;
}
.vita table .place
{
	width: 12em ;
}
.vita table .text
{
	width: 19em ;
}
div.relatives
{
	width: 20em;
	float: right;
}
div.object
{
	float: left;
	width: 12.5em ;
	margin: 0 1em 1em 0;
	background: lightgrey;
	padding: 0.2em;
	border: solid gray 1px; 
}
div.object img
{
	width:12.5em ;
}

/**
 *	The semi-graphical Ahnentafel
 */
div.tafel
{
	height:460px ;
}
div.tafel a
{
	text-decoration: none;
	color: green;
}
div.outer
{
	z-index: 2;
	width: 125px;
	height: 90px;
}
div.inner
{
	width: 115px ;
	height: 70px ;
	border-style: solid ;
	border-width: 1px;
	border-color: darkred ;
	background-color:khaki ;
	font-size: 10pt ;
	overflow:hidden;
	
	/* position is relative to the outer div */
	position:absolute;
	top:5px;
	left:5px;
}
.inner p
{
	width:112px;
	text-align:center;
	margin: 1px;
}
.inner p.south
{
	position: absolute;
	bottom: 0px;
	left: 0px;
}
.tafel .strich
{
	z-index: 1;
	position: absolute;
	border-color: darkgoldenrod ;
	border-style: solid ;
	border-width: 1px;
}

/**
 * Multi-Column tables
 */
.multi1 p, .multi2 p, .multi3 p {margin: 0.25em 0 0.25em 0;} 
.multi2 tr td {width: 29em; margin-right: 1em;} 
.multi3 tr td {width: 19em; margin-right: 1em;} 

/**
 * A tabbed property sheet.
 */
div.tabbed div.active
{
	display: block;
	border-top: solid orange 0.1em;
}
div.tabbed div.passive
{
	display: none;
}
div.tabbed button
{
	cursor: pointer;
	margin: 0 0.2em 0 0;
	border: none;
	-moz-border-radius: 0.4em 0.4em 0 0 ;
	font-weight: bold;
	color: darkblue ;
}
div.tabbed button.active
{
	background-color: gold ;
}

.showindi .tabbed button
{
	width: 8em;
}

.ahnentafel .tabbed .prefix
{
	margin: 0 0.2em 0 0;
	font-weight: bold;
	color: darkblue ;
}