/****************************************************
*   Stylesheet fuer die Bildschirmausgabe           *
*   Zuletzt bearbeitet: 10.01.2006 / 11.26 Uhr      *
****************************************************/

* {
	margin: 0;
	padding: 0;
	border: 0 none transparent;}
	
body {
	background: #444 url(/img/basics/bg-body.gif) repeat-y;}


/********** | alles schoen warm einpacken | **********/
	
#overall {
	width: 743px;
	background: #FFCC9A;
	border-right: 1px solid #AB5546;}
	
/********** | header mit flaggen | **********/

#header {
  width: 743px;
  height: 223px;
  position: relative;}
  
#header img {
  width: 743px;
  height: 223px;
  display: block;}
  
#header ul#flags {
  width: 80px;
  height: 11px;
  position: absolute;
  right: 2px;
  bottom: 35px;
  list-style: none;}
  
#header ul#flags li {
  width: 16px;
  height: 11px;
  margin-right: 4px;
  float: left;}
  
#header ul#flags li a {
  width: 16px;
  height: 11px;
  display: block;
  background: url(/img/basics/bg-flaggen.gif) no-repeat;
  font: 0/0 sans-serif;
  text-decoration: none;
  text-indent: -3000px;}
  
#header ul#flags li#de a {
  background-position: 0 0;}
  
#header ul#flags li#en a {
  background-position: -16px 0;}
  
#header ul#flags li#es a {
  background-position: -32px 0;}
  
#header ul#flags li#it a {
  background-position: -48px 0;}
  
#header ul#flags li.active a {cursor: default;}
  
#header ul#flags li#de.active a {
  background-position: 0 -11px;}
  
#header ul#flags li#en.active a {
  background-position: -16px -11px;}
  
#header ul#flags li#es.active a {
  background-position: -32px -11px;}
  
#header ul#flags li#it.active a {
  background-position: -48px -11px;}


	
/********** | navigation und linke spalte | **********/

#main-navi {
	width: 180px;
	float: left;
	text-align: center;}

#main-navi * {
	text-align: left;}
	
#main-navi #navi {
	width: 157px;
	margin: 0 auto;
	background: url(/img/basics/bg-mainnav-ul.gif) repeat-y;
	font: 12px verdana, sans-serif;}

	
#main-navi #navi ul#fst-lvl {
	padding: 9px 8px 0 0;
	background: url(/img/basics/bg-mainnavi-ul-top.gif) no-repeat;
	list-style: none;
	}

#main-navi #navi div {
	height: 13px;
	background: url(/img/basics/bg-mainnavi-ul-bottom.gif) no-repeat;
	font:0/0 sans-serif;
	text-indent: -3000px;}
	
img.sidebar-image {
	margin: 20px auto;
	display: block;}
	
#main-navi strong.rand-ue {
	width: 157px;
	margin: 0 auto;
	display: block;
	font: bold 12px verdana, sans-serif;
	color: #922616;}
	
#main-navi p {
	width: 157px;
	margin: 0 auto 20px;
	font: 11px verdana, sans-serif;}
	
/*links - erste ebene*/
#main-navi ul#fst-lvl li {
	border-bottom: 1px solid #932717}
	
#main-navi ul#fst-lvl li.active-li {
	background: #B54737 url(/img/basics/bg-mainnav-li-active.gif) no-repeat 0 50%;}

#main-navi ul li a {
	padding-left: 33px;
	display:block;
	position: relative;
	background: url(/img/basics/bg-mainnav-a.gif) no-repeat 0 50%;
	line-height: 24px;
	text-decoration: none;
	color: #fff;}

#main-navi ul li a:hover, #main-navi ul li a.active-a {
	background: #B54737 url(/img/basics/bg-mainnav-ahover.gif) no-repeat 0 50%;}

body#info #main-navi ul li#eins a,
body#kalender #main-navi ul li#zwei a,
body#projekte #main-navi ul li#drei a,
body#freunde #main-navi ul li#vier a,
body#newsletter #main-navi ul li#sieben a,
body#bilder #main-navi ul li#acht a,
body#vita #main-navi ul li#neun a,
body#kontakt #main-navi ul li#elf a,
body#impressum #main-navi ul li#zwoelf a,
body#material #main-navi ul li#dreizehn a {
	background: #B54737 url(/img/basics/bg-mainnav-ahover.gif) no-repeat 0 50%;}


/*links - zweite ebene*/
#main-navi ul ul {
	list-style: none;}

#main-navi ul#fst-lvl ul li{
	border-bottom: 0;}

#main-navi ul#fst-lvl ul li {
	padding-left: 30px;}

#main-navi ul#fst-lvl ul li a {
	padding-left: 12px;
	background: url(/img/basics/bg-mainnavi-ulul-a.gif) no-repeat 0 50% !important;}
	
#main-navi ul#fst-lvl ul li a:hover {
	background: url(/img/basics/bg-mainnavi-ulul-ahover.gif) no-repeat 0 50%;
	color: #eee;}

body#curiosum #main-navi ul#fst-lvl ul li#dreieins a,
body#piraten #main-navi ul#fst-lvl ul li#dreizwei a {
	background: url(/img/basics/bg-mainnavi-ulul-ahover.gif) no-repeat 0 50% !important;
	color: #eee;}
	
/********** | inhalt | **********/

#content-wrap {
	width: 542px;
	margin: 0 0 0 183px;
	background: url(/img/basics/bg-content.gif) repeat-y;}

h1 {
	margin-bottom: 1em;
	padding: 10px 17px 0 10px;
	background: url(/img/basics/bg-content-top.gif) no-repeat;
	font: bold italic 1.6em "Palatino Linotype", georgia, palatino, serif;
	color: #922616;}
	
#content-bottom {
	height: 18px;
	background: url(/img/basics/bg-content-bottom.gif) no-repeat;
	font: 0/0 sans-serif;}

#content {
	padding: 1px 37px 1px 30px;
	font: 12px verdana, sans-serif;
	position: relative;}

#content #indent {
	padding: 0 20px;}

#content h2, #content h3 {
	margin: .6em 0;
	font: bold 1.4em verdana, sans-serif;
	color: #922616;}

#content p {
	margin: .6em 0;}

#content a {
	color: #922616}

#content a:hover {
	text-decoration: none;
	color: #444;}

#content ul {
	list-style: square;
	margin: .6em 0 .6em 24px;}

/*bilder mit pins im fliesstext*/
.pin-img-left {
	float: left;
	margin: .6em .4em .6em 0;
	position: relative;}

.pin-img-right{
	float: right;
	margin: .6em 0 .6em .4em;
	position: relative;}

.pin-img-left div, .pin-img-right div {
	width: 37px;
	height: 40px; 
	position: absolute;
	background: url(/img/basics/pin.png) no-repeat;}
/*die positionierung der pins erfolgt im quelltext via style="". das ist imho praktischer, da du so nicht fr jede breite eine eigene klasse anlegen musst und trotzdem die pins mittig setzen kannst*/
	
p.after-img {
	margin: 0 0 .6em;}

/* ::: Formular ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#kontaktform {
margin:	10px 0 4px 0px ;
font-size: 12px;
line-height: 18px;
}

#kontaktform fieldset {
width: 420px;
border:	1px solid #922616; 
margin:	0 0 1em 0; 
padding: 10px 20px 20px 20px; 
}

#kontaktform legend {
font-weight: bold; 
font-size: 1.1em; 
color: #922616;
padding: 0px 10px ; 
}

#kontaktform form {
margin: 0;
padding: 0;
}

#kontaktform label {
float: left;
line-height: 16px;
display: block;
width: 150px;
margin-bottom: 2px;
}

#kontaktform input
{
	width: 250px;
	border: 1px solid #FFA470;
	background: #FFE8B6;
	font: 0.9em/1.4em "lucida grande", "lucida sans unicode", lucida, Verdana, Arial, Helvetica, sans-serif;
	color: #333;
	margin-bottom:  4px;
}

#kontaktform textarea
{
	width: 250px;
	margin-bottom:  2px;
	border: 1px solid #FFA470;
	background: #FFE8B6;
	font: 0.9em/1.4em "lucida grande", "lucida sans unicode", lucida, Verdana, Arial, Helvetica, sans-serif;
	color: #333;
}

#kontaktform textarea:focus 
{
	color: #000;
	background: #FFF2C0;
}

#kontaktform input:focus 
{
	color: #000;
	background: #FFF2C0;
}

#kontaktform #senden
{
	margin: 5px 0px 5px 150px;
}

.pfeil {color: #FF9900;}

.fehler {color:	#FF0000;}

/* ::: Newsletter ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#nlform
{
	margin:			4px 0 4px 30px ;
	font-size:		12px;
	line-height:	18px;
}

#nlform fieldset {
width: 300px;
border:	1px solid #922616; 
margin:	1em 0 1em 0; 
padding: 10px 20px 20px 20px; 
}

#nlform legend {
font-weight: bold; 
font-size: 1.1em; 
color: #922616;
padding: 0px 10px ; 
}

#nlform form
{
	margin: 0;
	padding: 0;
}

#nlform label
{
	float:			left;
	line-height: 	16px;
	display:		block;
	width:			100px;
	margin-bottom:  2px;
}

#nlform input.eingabe
{
	width: 			150px;
	border: 		1px solid #FFA470;
	background: 	#FFE8B6;
	font: 			0.9em/1.4 "lucida grande", "lucida sans unicode", lucida, Verdana, Arial, Helvetica, sans-serif;
	color: 			#333;
	margin-bottom:  4px;
}

#nlform input.radio
{
	width: 			20px;
	color: 			#333;
	margin-bottom:  2px;
	margin:			0 0 0 100px;
}


#nlform input:focus 
{
	color: 			#000;
	background: 	#FFF2C0;
}

#nlform #senden
{
	width: 			150px;
	border: 		1px solid #FFA470;
	background: 	#FFE8B6;
	font: 			0.9em/1.0 "lucida grande", "lucida sans unicode", lucida, Verdana, Arial, Helvetica, sans-serif;
	color: 			#333;
	margin: 		5px 0px 5px 100px;
}


/* ::: Galerie ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* Rahmendiv */
#galery {font-family: Tahoma, sans-serif;}

/* Galerie-bersicht */
#galpreview {display:inline;width:140px;}
#galpreview p {width:140px;} 
#galpreview .gal {display:inline;width:140px;float:left;text-align:center;margin: 10px;} /* margin: 0px 30px 20px 30px; */
#galpreview p.galgroup {font-weight:bold; font-size:16px;}
#galpreview p.galtitle {font-weight:bold; font-size:16px;}
#galpreview p.galinfo {font-size:11px;}

/* Einzelgalerie */
#singlegalery {margin:1px;}
#singlegalery h3 {font-size:16px;margin:2px;}
#singlegalery p {text-align:center;margin:2px 30px 2px 30px;padding: 10px 0 !important;}

/* Vorschaubilder */
#preview {margin: 0 30px;text-align:center;}
#preview img {vertical-align:middle;margin:4px;}
#preview span {text-align:center;margin-right:10px;}
#preview span p {margin:2px 0;color:#000066;font-size:11px;}

/* Einzelbild */
#picture {text-align:center;font-family: Tahoma, sans-serif;color:#000 !important;}
#picture p {font-size:14px;margin-bottom:4px;padding: 10px 0 !important;}
#picture p.paging {font-size:12px;}
#picture p.paging a {padding:2px 4px 2px 4px;text-decoration:none;font-size:1.2em;}
#picture p.paging a:hover {text-decoration:underline;}
#picture p.paging span {margin:0 20px;font-size:12px;}

/* Paging */
#paging {font-size:12px;}
p.paging {font-size:12px;}
p.paging a {padding:2px 4px 2px 4px;text-decoration:none;font-size:1.2em;}
p.paging span {margin:0 20px;font-size:12px;}

/* Popup */
#popupheader {text-align:center;}
#popupheader p.forebacklink a {border:1px outset;color:#000;background-color:#f0f0f0;padding:2px 4px 2px 4px;text-decoration:none;font-size:0.85em;}
#popupheader p.closelink a {margin:0;}

/* allgemeine Elemente */
#galery h1 {
margin-bottom: 1em;
padding: 10px 17px 0 10px;
background: url(../img/basics/bg-content-top.gif) no-repeat;
font: bold italic 1.6em "Palatino Linotype", georgia, palatino, serif;
color: #922616;}

#galery h2 {font-size:18px;margin-bottom:6px;}
#galery h3 {font-size:16px;margin-bottom:4px;padding: 5px 30px !important;}
#galery h4 {font-size:14px;margin:4px;}
#galery h5 {font-size:12px;margin:4px;}
#galery h6 {font-size:10px;margin:4px;}

#galery img {border:0;}
#galery span.copyright {font-size:10px;color:#cccccc;}
#galery p {font-size:10px;margin-bottom:8px; margin: .6em 0px;}
#galery p.galfoot {font-size:10px !important;margin-bottom:8px; margin: .6em 30px;}
#galery p.big {font-size:12px;margin-bottom:8px; margin: .6em 30px;}
#galery p.error {color:#ff0000;}
#galery p.success {color:#3300cc;}
#galery ul {list-style:none;}
#galery ul li {margin-left:20px;}
#galery a {color:#000;}
#galery a:hover {text-decoration:underline;}

/* Form Elemente */
#galery form {display:inline;}
#galery label {display:block;width:140px;float: left;} 
#galery textarea {width:320px;height:120px;}

/* Admin specials */
#adminleft {width:120px;float:left;height:100%;text-align:center;}
#adminleft img.publicthumb {border:2px solid red;}
#adminleft img.activethumb {border:3px solid blue;}

#adminoptions label {display:block;width:240px;float: left;}
#adminoptions h5 {color:#003366;}

	
/********** | footer | **********/

#footer {
	padding: 5px 10px;
	clear: left;
	background: #9F3E31;
	border-top: 1px solid #fff;
	font: 10px verdana, sans-serif;
	text-align: right;
	color: #fff;}

#footer a {
	text-decoration: none;
	color: #fff;}

#footer a:hover {
	text-decoration: underline;}