/* Styles for the personal website of Karsten Berlin */

body { 
	background-color: #222;
	color: #AAAAAA;
/*	font: 0.8em/1.4em verdana, arial, sans-serif;   */
	font:0.8em/1.5em "Trebuchet MS", verdana, arial, sans-serif;
	margin:0;
}

/* Bereichsfarben - wird nicht von älteren Browsern unterstützt */
[id="bg_gallery"]			{ background-color: #D3D330; color: #333333; }
[id="bg_gisusability"]	{ background-color: #8383D3; color: #333333; }
[id="bg_restricted"]		{ background-color: #C60000; color: #333333; }
[id="bg_disclaimer"]		{ background-color: #C60000; color: #333333; }
[id="bg_professional"]	{ background-color: #8DC254; color: #333333; }


[id="f_gallery"]			{ background-color: inherit; color: #D3D330; }
[id="f_galleryfade"]		{ background-color: inherit; color: #696928; }
[id="f_professional"]	{ background-color: inherit; color: #8DC254; }
[id="f_gisusability"]	{ background-color: inherit; color: #8383D3; }
[id="f_restricted"]		{ background-color: inherit; color: #FF4848; }
[id="f_disclaimer"]		{ background-color: inherit; color: #FF4848; }

/* Seitenbestandteile */
.header						{ width:100%; height:30px;/*2em;*/ position:fixed; top:0; left:0; display:inline; z-index: 100; }
.titlebar					{ width:100%; height:80px; background: url(../images/karsten_logo.gif) no-repeat left 5%;     line-height:80px; font-size:250%; font-weight: normal; margin-top:0.8em; margin-left:0.5em; padding:0 0 0 80px;  }
.fontsizer					{ width:100px; height:2em; line-height:2em; text-align:right; padding-right:30px; float:right; color:#222;}
.contentpane				{ width:60%; min-height:44em; padding:0 20px 0 20px; position:relative; float:left; margin-bottom:30px;}
.rightpane					{ width:30%; padding:0 20px 0 20px; position:relative; float:left; margin-bottom:30px;}
#footer						{ margin:15px 0 8px 0; width:100%; height:20px; line-height:20px; clear:both; background-color:inherit; color: #777; text-align:right; border-top:1px solid #777;}
#pagecounter				{ width:20em; height:40px; line-height:40px; display:inline; position:absolute; top:0; right:0; padding:0 20px 0 20px; float:right; }
#startpic					{ width:520px; height:380px; position:relative; top:10px; margin-left:auto; margin-right:auto;}
.section                { width:40em; /* -- vom contentpane --  margin-left:20px;*/ position:relative; padding-bottom: 1.5em; }
.sectioninfo            { width:20em; position:absolute; top:-1em; left:42em; } /* die kleine box mit Links und Infos rechts oben */
label                   { width:10em; font-weight:bold; float:left; }
label.result            { width:26em; float:left; font-weight:normal; }

/* Dia-Rähmchen */
.slide 						{ width:160px; height:160px; background: url(../images/slideframe.gif) 0 0 no-repeat; margin: 2em 0.5em -1em 0.5em;  text-align:center; position: relative; float:left;}
.slide img.v				{ border:1px solid #222222; height:120px; margin-top:15px; margin-bottom: -10px; cursor:pointer; float:none; }
.slide img.h				{ border:1px solid #222222; width:120px; margin-top:35px; margin-bottom: 10px; cursor:pointer;  float:none; } 

/* menuedefinitionen */
#topnav                 { display:inline; float:right; }
#topnav ul              { margin:0; padding:0; list-style: none; }
#topnav li              { padding:0; width:10em; text-align:center; color:#555; font-style:italic; font-weight:bold; border-right:1px solid #222; line-height: 25px; float:left; }
#topnav li.first        { border-left:1px solid #222; }
#topnav li a            { display:block; line-height: 25px; background:inherit; color:#222; font-style:normal; text-decoration:none; }
#topnav li a:hover      { width:10em; background-color:#222; color:#ccc; }
#topnav ul#professional li a:hover      { width:10em; background-color:#618b32; color:#ddd; }
#topnav ul#gallery li a:hover      { width:10em; background-color:#696928; color:#ddd; }
#topnav ul#gisusability li a:hover      { width:10em; background-color:#4141b6; color:#ddd; }
#topnav ul#disclaimer li a:hover      { width:10em; background-color:#860000; color:#ddd; }
#topnav ul#restricted li a:hover      { width:10em; background-color:#860000; color:#ddd; }

.menuebox            { width:20em; position:absolute; top:-50px; left:44em; padding:0; float:right; }
.menuebox ul         { width:100%; margin:0 !important; padding:0 !important; list-style: none; background-color:#8dc254; color:#222; }
.menuebox li         { padding:0; height:2.5em; line-height:2.5em; text-indent:10px; border: solid #cccccc; border-width:0 1px 0 1px;}
.menuebox li a       { width:100%; padding:0; height:2.5em; text-decoration:none; color:#222; display:block; border: solid #cccccc; border-width:0 0 1px 0;}
.menuebox li a:hover { width:100%; padding:0; height:2.5em; line-height:2.5em; color:#fff; }
/* kurven einbringen */
.menuebox li.first, 
.menuebox li.firstselected         { border-right:0; border-left:0; border-bottom:1px solid #ccc; background: url(./../images/box-ul.gif) no-repeat left top; }
.menuebox li.first a, 
.menuebox li.firstselected a       { margin-right:-1px; background: url(./../images/box-ur.gif) no-repeat right top; }
.menuebox li.last, 
.menuebox li.lastselected          { border-right:0; border-left:0; background: url(./../images/box-ll.gif) no-repeat left bottom; }
.menuebox li.last a, 
.menuebox li.lastselected a        { margin-right:-1px; border-bottom:0;  background: url(./../images/box-lr.gif) no-repeat right bottom; }
/* Farben festlegen */
.menuebox li.firstselected a,
.menuebox li.lastselected a, 
.menuebox li.selected a              { color:#FFFFFF; font-weight:bold;}
.menuebox ul[id^="professional"]     { background-color:#8DC254; }
.menuebox ul[id^="gisusability"]     { background-color:#8383D3; }
.menuebox ul[id^="restricted"]       { background-color:#C60000; }
.menuebox ul[id^="private"]          { background-color:#BABA27; }
.menuebox ul[id^="professional"] li.firstselected,
.menuebox ul[id^="professional"] li.lastselected, 
.menuebox ul[id^="professional"] li.selected { background-color: #618b32; }
.menuebox ul[id^="gisusability"] li.firstselected,
.menuebox ul[id^="gisusability"] li.lastselected, 
.menuebox ul[id^="gisusability"] li.selected { background-color: #4141b6; }
.menuebox ul[id^="restricted"]   li.firstselected,
.menuebox ul[id^="restricted"]   li.lastselected, 
.menuebox ul[id^="restricted"]   li.selected { background-color: #860000; }
.menuebox ul[id^="private"]      li.firstselected,
.menuebox ul[id^="private"]      li.lastselected, 
.menuebox ul[id^="private"]      li.selected { background-color: #696928; }

.startmenugis     { height:285px; background: url(../images/menue_gis.gif) no-repeat; position:relative; }

.startmenugis li  { font-weight:bold; color:#aaa; font-size:110%; width:200px; line-height:25px; text-align:center; }

.startmenuprof     { height:285px; background: url(../images/menue_prof.gif) no-repeat; position:relative; }
.startmenuprof ul  { position:absolute; top:100px; left:30px; }
.startmenuprof li  { font-weight:bold; color:#aaa; font-size:110%; width:200px; line-height:25px; text-align:center; }

.startmenupriv     { height:285px; background: url(../images/menue_priv.gif) no-repeat; position:relative; }
.startmenupriv ul  { position:absolute; top:80px; left:10px; }
.startmenupriv li  { font-weight:bold; color:#222; font-size:110%; width:130px; line-height:25px; text-align:center; }
.startmenugis ul,
.startmenuprof ul,
.startmenugall ul  { position:absolute; top:100px; left:20px; }
.startmenugis li a,
.startmenupriv li a, 
.startmenuprof li a { padding-left: 20px; color:#fff; }
.startmenugis li a:hover,
.startmenuprof li a:hover, 
.startmenupriv li a:hover { background: url(../images/icon_rarr_fff.gif) no-repeat; color:#fff; text-decoration:none;}
/* Schriften */
h2								{ font-size: 175%; font-weight: normal; }
h3								{ font-size: 140%; font-weight: normal; }
h4								{ font-size: 110%; font-weight: normal; }
.fontsizer .sf	         { font-size: 100%; font-weight: normal; margin:0; padding:10px; cursor:pointer;}
.fontsizer .lf          { font-size: 150%; font-weight: normal; margin:0; padding:10px; cursor:pointer;}
.contentpane > h1       { font-size: 175%; font-weight: normal; margin:0; padding:0 0 0 10px; line-height:40px; }
.contentpane h2, 
.contentpane h3         { padding:0 0 0 20px; }
.rightpane > h1         { font-size: 175%; font-weight: normal; margin:0; padding:0; line-height:40px; }
.rightpane h2				{ font-size: 125%; font-weight: bold; width:70%; border-bottom:1px solid #777; }
#pagecounter h3         { display:inline; margin: 0em 0 0.5em 1em;}
.slideText              { width:130px; text-align:center; position:absolute; top:130px; left:0px; font-size: 70%; background-color: inherit; color: #777; }
.slideNr                { width:20px; text-align:center; position:absolute; top:0px; left:-5px; font-size: 70%; background-color: inherit; color: #777; }
p								{ clear:both; margin-bottom:1em; padding-left:20px;}
.box p                  { padding-top:1.5em; }
.highlight              { font-weight:bold; color:#ccc; }
p.up                    { line-height:15px; text-align:right; margin-bottom:-10px; background: url(./../images/icon_up.gif) no-repeat 98% 80%; }
code							{ font-weight:bold; color:#ccc; font-size:130%; }

/* Links */
a     						{ text-decoration: none; color: #FFB340; }
a:hover				   	{ text-decoration: underline; color: #ff9900; }
a[href^="http:"]        { background: url(./../images/link_external.gif) no-repeat right top; padding-right:12px; }
a[href^="mailto:"]        { background: url(./../images/link_email.gif) no-repeat right top; padding-right:16px; }
a[href^="http://www.webcounter.goweb.de/"] { background-image:none; padding-right:0;
}
#startpic a					{ width:95px; height:75px; text-indent:-3000em; }
#startpic .england a    { position:absolute; top:60px; left:66px; }
#startpic .germany a		{ position:absolute; top:183px; left:361px; }
#startpic .italia a		{ position:absolute; top:262px; left:220px; }
#startpic .scotland a   { position:absolute; top:60px; left:265px; }
#startpic .sweden a     { position:absolute; top:158px; left:105px; }
.titlebar a             { cursor: pointer; text-decoration: none; }
.link							{ cursor: pointer; text-decoration: none; }
.link:hover					{ text-decoration: underline; }
#footer a					{ cursor: pointer; text-decoration: none; color: #777; padding-right:20px;}
#footer a:hover			{ text-decoration:underline; color:#aaa;}



/* Listen */
.rightpane ul				{ margin:0; padding:0; list-style: none; width:200px; display:block; }
.rightpane li a:link    { display:block; width:200px; height:29px; line-height:29px;       
                          color: #696928; text-decoration: none; 
								  background: #222222 url(./../images/bg_menugallery.gif) no-repeat left top; 
								  text-indent: 8px; }
.rightpane li a:hover   { background-position: -200px top; color: #d3d330;}		
.rightpane li a.selected { background-position: -400px top; color: #222; }								  

ul                      { clear:both; margin:0; padding:0; list-style:none; }
li                      { padding:0.25em 12px; }
ul.dotted               { margin-left:30px; margin-right:20px; text-indent:-20px; }
ul.hierarchical         { margin:0 20px; }
ul.hierarchical li      { background: url(../images/icon_list.gif) no-repeat left top; padding-left: 25px; }

/* Boxen */
.box						   { width:40em; background: #222 url(./../images/bottom-left.gif) no-repeat left bottom; }
.box_outer              { background: url(./../images/bottom-right.gif) no-repeat right bottom; padding-bottom: 1.5em; }
.box_inner              { background: url(./../images/top-left.gif) no-repeat left top; }
.box p.first		      { background: url(./../images/top-right.gif) no-repeat right top; padding-top: 1.5em; }
.box p                  { padding-left: 1.5em; padding-right: 1.5em; }

.smbox					   { width:20em; background: #222 url(./../images/bottom-left.gif) no-repeat left bottom; }
.smbox_outer              { background: url(./../images/bottom-right.gif) no-repeat right bottom; padding-bottom: 1.5em; }
.smbox_inner              { background: url(./../images/top-left.gif) no-repeat left top; }
.smbox p.first		        { background: url(./../images/top-right.gif) no-repeat right top; padding-top: 1.5em; }
.smbox p                  { padding-left: 1.5em; padding-right: 1.5em; }

.closediv               { margin:0px 0px 12px 12px; float:right; cursor:pointer; border:0;}

/* Bilder */
img                     { border:1px solid #000; }
a:hover img             { border:1px solid #ff9900; }
.noborder               { border:1px solid #222; }
.inlinepic              { margin:10px; border:1px solid #222; float:right; }
.radio                  { border:0; margin-right:10px; }

/* eingabe */
input                   { background-color:#444; color:#fff; padding:3px 5px; border-right:1px solid #999; border-bottom:1px solid #999; border-left:1px solid #555; border-top:1px solid #555; }

/* table */
table                   { border-collapse:collapse; font-size:100%;}
td                      { vertical-align:top; padding:4px; }
.inc_tbl                { margin-bottom:12px; }
.inc_tbl td              { border:1px solid #999; width: 16%; text-align:center; }