/*
Element eigentschaften
*/

html
		{
		}

body
		{ 
		height: 99%;
		color: black;
		background-color: #dddddd;
		font-size: 100%;
		font-weight: normal;
		font-family: "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
		margin:0.2em;
		}

div.headline
		{
		height: 2.3em;
		background-color:silver;
		border: 1px solid gray;
		padding-left: 0.4em;
		padding-top: 0.2em;
		padding-right: 0.4em;
		vertical-align:middle;
		}

div.margin-left
		{
		position: absolute;
		z-index: 0;
		left: 1px;
		bottom: 1px;
		width: 500px;
		height: 94%;
		}

div.center	{
		position: absolute;
		margin-left: 18%;
		width: 60%;
		}

div.content
		{
		position: relative;
		margin-top: 0.3em;
		margin-left: auto; /* centered */
		margin-right: auto;
/*		background-color:silver; */
/*		border: 1px solid gray; */
		padding: 0.3em;
		}

div.margin-right
		{
		position: absolute;
		z-index: 0;
		right: 1px;
		bottom: 1px;
		width: 500px;
		height: 94%
		}

div.footer
		{
		position: absolute;
		height: 2.3em;
		padding-bottom: 0.4em;
		z-index: 0;
		right: 1px;
		bottom: 0.4em;
		}

a
		{
		color: black;
		font-weight:bold;
		text-decoration:none;
		}

img
		{
		border: 0;
		}

h1
		{
		font-size: 150%;
		font-weight: bold;
		margin: 0;
		}

p.intro		{
		margin: 0;
		}

div.imagelink
		{
		position: relative;
		margin-top: -0.5em;
		margin-bottom: 1em;
		margin-left: auto;
		margin-right: auto;
		height: 120px;
		width: 400px; /* TODO!: */
		}

/* div.imagelink span.image */
span.image
		{
		position: absolute;
		z-index: 4;
		width: 120px;
		height: 120px;
		}
		
span.image span.alt
		{
		display: none;
		}

div.imagelink span.namewrap
		{
		position: absolute;
		display: none;
		width: 145px; /* a little bit of overlap*/
		}

div.imagelink span.name
		{
		font-weight: bold;
		font-size: 22px;
		padding: 2px 6px 2px 6px;
		}

div.imagelink span.descr
		{
		display: none;
		position: absolute;
		font-size: 12px;
		width: 145px; /* a little bit of overlap*/
		top: 10px;
		border-top: 1px solid gray;
		padding-top: 5px;
		}

/* sichtbarwerdung */
div.imagelink:focus span.namewrap
		{
		display: block;
		z-index: 2;
		}

div.imagelink:focus span.descr
		{
		display: block;
		z-index: 2;
		}

div.imagelink:hover span.namewrap
		{
		display: block;
		z-index: 2;
		}

div.imagelink:hover span.descr
		{
		display: block;
		z-index: 2;
		}


/*
All diese Scheisse nur weil der IE keine transparenten PNGs kann!
Der IE < 7 ignoriert diese (wegen dem [class]) und included
dann die aus dem hack in der HTML datei..
*/

div.margin-left[class]
		{
		background-image:url(images/bg_left.png);
		background-repeat: no-repeat;
		}

div.margin-right[class]
		{
		background-image:url(images/bg_right.png);
		background-repeat: no-repeat;
		}

div.imagelink#dorf span.image[class]
		{
		background-image:url(images/dorf.png);
		background-repeat: no-repeat;
		}

div.imagelink#zimmerei span.image[class]
		{
		background-image:url(images/zimmerei.png);
		background-repeat: no-repeat;
		}

div.imagelink#festival span.image[class]
		{
		background-image:url(images/festival.png);
		background-repeat: no-repeat;
		}

div.imagelink#kulturcafe span.image[class]
		{
		background-image:url(images/kulturcafe.png);
		background-repeat: no-repeat;
		}


/*
Positionierung der Kern-Elemente
*/

div.imagelink#dorf
		{
		left: 6%;
		}

div.imagelink#zimmerei
		{
		left: -8%;
		}

div.imagelink#festival
		{
		left: 6%;
		}
		
div.imagelink#kulturcafe
		{
		left: -8%;
		}


/*
Positionierung der unterelemente
*/

/* dorf */
div.imagelink#dorf span.namewrap
		{
		bottom: 47px;
		left: 0px;
		color: white;
		background: black;
		}

div.imagelink#dorf span.image
		{
		left: 140px;
		}

div.imagelink#dorf span.descr
		{
		right: -15px;
		padding-left: 15px;
		}

/* zimmerei */
div.imagelink#zimmerei span.descr
		{
		text-align: right;
		left: -15px;
		padding-right: 15px;
		}

div.imagelink#zimmerei span.image
		{
		left: 140px;
		}

div.imagelink#zimmerei span.namewrap
		{
		bottom:	47px;
		right: 0px;
		color: white;
		background: black;
		text-align: right;
		}

/* festival */
div.imagelink#festival span.namewrap
		{
		bottom:	47px;
		left: 0px;
		color: white;
		background: black;
		}

div.imagelink#festival span.image
		{
		left: 140px;
		}

div.imagelink#festival span.descr
		{
		right: -15px;
		padding-left: 15px;
		}

/* kulturcafe*/
div.imagelink#kulturcafe span.descr
		{
		text-align: right;
		left: -15px;
		padding-right: 15px;
		}

div.imagelink#kulturcafe span.image
		{
		left: 140px;
		}

div.imagelink#kulturcafe span.namewrap
		{
		bottom: 47px;
		right: 0px;
		color: white;
		background: black;
		text-align: right;
		}