/* -----------------------------
   --       styles.css        --
   -----------------------------
	-- lastmod: 02.01.2008     --
	-- Autor:   Karsten Berlin -- 
   -----------------------------*/

body { 
	background-color: #ffffff; color:#4D5D33;
	font: 1em/1.5em "Trebuchet MS", verdana, arial, sans-serif; 
	margin:0; padding:10px;}
	
#canvas { margin:0 auto; width:61.2em;  padding-right:1.2em; /*min-height:100em;*/ position:relative; background: url(../images/bg_canvas.gif) repeat-y 100% 100%; }
#header { height:100px; background-color:transparent; color:#5E723F; position:relative;}
#login  { position:absolute; bottom:0; right:0; width:200px; line-height:2em; color:#377d9e; font-size:0.8em; font-weight:bold; text-align:right; }
#buttons{ position:absolute; top:0; right:0; width:22px; height:80px; text-align:right; float:right; }
#topshadow { position:absolute; bottom:-6px; left:0; width:100%;height:8px; background: url(../images/icons/bg_topshadow.gif) repeat-x;}
#globalnav { position:absolute; top:108px; left:0; width:61.2em; height:50px; }
#wrapper { width:100%; float:none; min-height:40em; padding-top:80px; padding-bottom:10px;}
#container_l {	float: left; width: 18%;  font-size: 90%; padding-top:2em;}
#container_m { float: left; width: 55%; min-height:40em;  font-size: 90%; border-right:1px dashed #BCE57f; padding:2em 10px 10px 15px;}
#container_r {	float: right; width: 24%; font-size: 90%; padding-top:2em; }
#footer   { margin:0 auto; width:100%;clear: both; text-align:left; color: #ADA978; font-size:85%; padding:4px 10px; border-top:1px solid #D5D3BA; background-color:#fff; }


#globalnav table { width: 100%; font-size:100%; text-align: center; border-collapse: collapse; font-weight: bold; }
#globalnav td { /*border:1px solid #5E723F;*/ }
#globalnav td.top { width: 25%;}
#globalnav td.bottom { width: 20%;}
#globalnav ul { list-style: none; margin: 0; padding: 0; }
#globalnav li a { border:1px solid #5E723F; cursor: pointer; display: block; height: 1.8em; line-height:1.8em; background-color:#BCE57f;  font-weight: bold; color: #1f1300; text-decoration: none; }
#globalnav li.selected a { border:1px solid #5E723F; border-width:1px 1px 1px 1px; height: 1.8em; line-height:1.8em; background-color: #5E723F; color:#fff; }
#globalnav li a:hover {	color: #222; background-color:#ffff80; }

#submenue { float: left; width: 100%; }
#submenue ul { list-style: none; margin: 0; padding: 0; /*border-bottom: 1px solid #1f1300; border-top: 1px solid #1f1300;*/}
#submenue li { margin: 0; border-bottom: 1px solid #1f1300; background-color: #BCE580; color:#DBFFA6; font-size: 90%; }
#submenue li a { display: block; padding: 5px 5px 5px 20px; border-left: 8px solid #5e723f; border-right: 1px solid #5e723f; color: #2F381F; font-weight: normal; text-decoration: none; }
#submenue li a:hover { background-color: #FFFF80; border-left: 8px solid #1f1300; border-right: 1px solid #1f1300; text-decoration: none; color: #1f1300; }
#submenue li a:active { background-color: #1f1300; border-left: 8px solid #1f1300; color: #fff; }
#submenue li.selected { background-color: #5e723f; padding: 5px 5px 5px 28px; color: #fff;	font-weight: normal; } 

#subsubmenue { clear: both; width: 100%; }
#subsubmenue ul { list-style: none; margin: 0px; padding: 0; /*border-bottom: 1px solid #D7D7E6; */}
#subsubmenue li { margin:0; background-color: /*#dfd500*/#8dab5f; color: #1f1300; font-size: 80%; }
#subsubmenue li a { display: block; padding: 2px 5px 2px 20px; color: #1f1300; text-decoration: none; }
#subsubmenue li a:hover { background-color: #1f1300; border-left: 8px solid #1f1300; border-right: 1px solid #1f1300; text-decoration: none; color: #1f1300; }
#subsubmenue li a:active { background-color: #1f1300; border-left: 1px solid #1f1300; color: #fff; }
/*#subsubmenue li.selected { border-right: 1px solid #1f1300;	border-left: 8px solid #1f1300; 	padding: 2px 15px 2px 20px; color: #1f1300; font-weight: normal; } */


img { float:left; border:0;}
.icon { cursor:pointer; }

#header h1 { margin:0; padding:0.3em 6em 0 0;text-align:center; font-size:230%; font-weight:bold; line-height:1.1em; }
#buttons .icon { margin:0 0 0.3em 0; }

h1, h2, h3 { padding:0; margin:0; }
h1 { font-weight:normal; font-size:175%; padding-bottom:15px; }
h2 { font-weight:normal; font-size:130%; padding-bottom:15px; padding-top:1em;}

#container_r h1 { padding-left:8px; }
#container_r h2 { padding:1em 8px 0 8px; }
#container_r p { padding:3px 8px; }
.error { font-weight:bold; color:#CC0033; }
.success { font-weight:bold; color:#339933; }
.tipp { color:#777; font-weight:bold; font-size:85%; }

ul { list-style: none; padding:0; margin:0 0 12px 12px;}

#container_m ul li.atlas, #container_r ul li.atlas { padding:3px 5px 10px 30px; background: url(../images/icons/icon_list_circle.png) no-repeat 2% 0%; position:relative; }
#container_m ul li.atlas { margin:0.3em 0; }

/* links */
a:link, 
a:visited  { color: #377d9e; font-weight: bold; text-decoration: none; }
a:hover    { text-decoration:underline; }
a[href^="mailto:"] { background: url(../images/icons/link_email.gif) no-repeat right top; padding-right:15px; }
a[href^="http:"] { background: url(../images/icons/icon_link_new.gif) no-repeat right top; padding-right:15px; }
a[href^="http://www.karsten-berlin.net"] { background: none; padding-right:0; }
.link { color: #6699AC; font-weight: bold; text-decoration:none; cursor:pointer; }
.link:hover { text-decoration: underline; }

/* box */
.box		     { position:relative; width:17em; height:auto; background: transparent url(./../images/box_bottomleft.gif) no-repeat left bottom; }
.box_outer     { background: url(./../images/box_bottomright.gif) no-repeat right bottom; padding-bottom: 1.5em; }
.box_inner     { background: url(./../images/box_topleft.gif) no-repeat left top; }
.box p.first   { background: url(./../images/box_topright.gif) no-repeat right top; padding-top:10px; font-size:100%; font-weight:bold; font-size:125%; margin-left:-5px;}
.box p         { padding-left: 1.5em; padding-right: 1.5em; }
.box .close    { position:absolute; top:5px; right:10px; width: 20px; height:20px; z-index:10; cursor:pointer; }
.fade     { color:#bea976; font-size:90%; }
.box .icon_ok  { float:right; margin:-15px 5px 5px 5px; border:0; cursor:pointer; }
.box label     { width:35%; float:left; }

#searchroom, .showroom { font-size:90%; width:90%; height:100%; padding:10px 15px; background-color:#efefef; border:1px solid #ccc; }
.showroom { border-top:1px solid #aaa; }


input, option, textarea     { border:1px solid #999;  padding:3px 5px; font-size:95%; background-color:#fff; color:#0f30f /*#377d9e*/; font-weight:bold; }
input.widthSmall    { width:62px; height:15px; }
input.widthMedium   { width:180px; height:15px; }
input.widthLarge    { width:400px; height:15px; }
textarea.widthLarge { width:400px; height:150px; font-size:110%; }
select.widthLarge   { width:310px; padding:3px 5px; color:#377d9e; font-weight:bold; }

select.widthSmall   { width:100px; padding:3px 5px; color:#377d9e; font-weight:bold; }
option              { border:0; font-size:95%; color:#214B5F; font-weight:normal; }

.btn_submit         { border:1px solid #3f3d26; height:25px; background-color:#3f3d26; color:#fff; font-weight:normal; cursor:pointer; }
.btn_submit:hover   { background-color:#fff; color:#3f3d26; }
.btn_logout         { border:1px solid #3f3d26; height:25px; background-color:#377d9e; color:#fff; font-weight:normal; cursor:pointer; }
.btn_logout:hover   { background-color:#fff; color:#3f3d26; }
.btn_select         { border:1px solid #3f3d26; height:25px; background-color:#ebeade; color:#333; font-weight:normal; cursor:pointer; }
.btn_select:hover   { background-color:#90a4ea; color:#000; }

.btn_letter         { width:24px; height:24px; background: url(../images/icons/icon_letter.png) no-repeat 0% 0%; color:#54683E; border:0; font-weight:bold; font-size:90%; cursor:pointer; padding-bottom:3px; }
.btn_letter:hover   { background: url(../images/icons/icon_letter_selected.png) no-repeat 0% 0%; color:#fff; border:0; }
.btn_go             { width:20px; height:20px; background: url(../images/icons/icon_go.png) no-repeat 0% 0%; border:0; cursor:pointer; }
.btn_go:hover       { background: url(../images/icons/icon_go.png) no-repeat 0% 0%; border:0; }
.simplebutton { cursor:pointer; background:transparent url(../images/bg_button.png) repeat-x; color:#333; font-weight:bold; font-size:90%; border:1px solid #ccc; border-right:1px solid #777; border-bottom:1px solid #777; line-height:35px; width:auto; height:35px; padding:0 8px; }
.simplebutton:hover { cursor:pointer; background:transparent url(../images/bg_button_hover.png) repeat-x; color:#333; font-weight:bold; font-size:90%; border:1px solid #ccc; border-right:1px solid #777; border-bottom:1px solid #777; line-height:35px; width:auto; height:35px; padding:0 8px; }



a.info { position:relative; z-index:24; color:#fff; }
a.info:hover {z-index:25; cursor:help; color:#fff; text-decoration: none;}
a.info span  {display: none; }
a.info:hover span{ display:block; position:absolute; top:-3em; left:0em; width:34em; border:1px solid #666; 
	 padding: 5px; background-color:#FFFFCC; color:#000; font-weight:normal; font-size:100%; line-height:130%;}
	

.news { width:100%; height:auto; /*min-height:280px;*/ margin-bottom:2.5em; position:relative; float:none; clear:both; }
.newsimg  { float:left; margin:0.1em 1em 1em 0;}
.newsimg img { border:1px solid #333; float:none; }
.newsimg p.imgtxt { margin:0.5em 0 0 0; padding:0; font-size:80%; font-style:italic; max-width: 150px;}
.newsdate { position:absolute; top:0; left:0; width:100%; font-weight:bold;border-bottom:1px solid #5e723f;  }
.newsicon { position:absolute; top:0; right:0; width:25px; border:0 !important; cursor:pointer; }
.news h2  { padding-top:1.8em; clear:both;}
.news ol, .news ul { margin:0; padding:0.5em 1em 0.5em 1.5em;}
.news ol li { margin-left:1.5em; padding:0.15em; }

.pictext { width:100%; font-style:italic; font-size:90%;  }

#container_m ul { margin:0; padding:0; list-style-image: none; }
#container_m ul li { padding:3px 5px 5px 30px; background: url(../images/icons/icon_list.gif) no-repeat 2% 0%; }

table.info { border-collapse: collapse; }
table.info tr { border-bottom: 1px solid #aaa; }
table.info tr:hover { background-color:#eee; }
table.info td { padding: 3px 5px; vertical-align: top;}
td.right { text-align:right; }