/* Author: Carola Rocks, www.webtransleldit.de, for Humboldt University, Dept. of Soil Sciences, Carbon Storage Project CARBSTOR */
/* CSS Document */
@media screen {
*{margin: 0; padding: 0; border: 0; outline:none; }
	
html, body {width: 100%; height: 100%; min-height: 100%; background-color: #f5f5f5; } 
		/* this, plus the wrapper settings below, ensures that the container stretches to the bottom of the display */

body  {font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; color: #000; overflow-x:hidden; overflow-y:scroll; }
	   /* background must not have attribute overflow:hidden, because that would take away the scroll-bar on the right margin */ 
	   /* overflow-x:hidden however removes the otherwise appearing scroll-bat at the bottom */ 

/* ~~ global declarations ~~ */
h1, h2, h3, h4, p, form {color:#426601; font-weight:100; }
h1 {font-size:1.5em;}
h2 {font-size:1.3em;}
h3 {font-size:1.125em;}
h4 {font-size:0.9em;}
p  {font-size:0.8em;}
a  {outline:none;}
a img {border: none; } /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {color:#003366; text-decoration: none;} 
a:visited {text-decoration: none;} /* good color for visitid #6E6C64 or #000000 */
a:hover, a:active, a:focus {text-decoration: none;} /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	
.bold { font-weight:bold;}
.brown { color:#7E2715;} /* gleiches Braun wie Start, Home-Link und Ecken unten im Logo */
.center {text-align:center;}
.clearB {clear:both;}
.floatL {float:left;}
.floatR {float:right;}
.moveLeft1 {margin-left:-1em;}
.moveLeft2 {margin-left:6em;}
.moveRight1 {margin-left:1em;}
.moveRight4 {margin-left:4em;}
.moveRight5 {margin-left:5em;}
.moveDown1 {margin-top:1em;}
.moveDown1-7 {margin-top:1.695em;}
.moveDown2 {margin-top:2em;}
.moveDown3 {margin-top:3em;}
.moveDown4 {margin-top:4em;}
.moveDown5 {margin-top:5.3em;}
.moveUp    {margin-top:-0.5em;}
.moveUp1-8 {margin-top:-1.8em;}
.moveUp2-5 {margin-top:-2.5em;}
.moveUp4-5 {margin-top:-4.5em;}
.text-color {color:#000;}
.underline {text-decoration:underline;}
.zitate {color:#F00; font-weight:bold;}

#wrapper {margin: 0 0 -70px;       /* the bottom margin is the negative value of the footer's height */
	 width:100%; height: 100%; min-width: 780px; min-height:100%; height: auto !important;  /* this, plus the html-body settings above, ensures that the container image stretches to the bottom of the display */
	 overflow:hidden; /* necessary to hide the overflow of the sidebars, which need to have margin/padding:-99999/99999px in order to always stretch to the bottom */
	 background-color: #f5f5f5; background-image:url(../img/tile_moorland.jpg); background-repeat:repeat; background-position:top left;} 

/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
header        {height:12%; }
#headerTile   {background-image:url(../img/header_tile_grey_transp.png); height:110px; background-repeat:repeat-x; background-position:top left;}
#headerBg     {background-image:url(../img/header_grey_green_twirls.png); width:980px; height:110px; background-repeat:no-repeat; background-position: top left; margin-top:-110px;}
#headerLogo   {background-image:url(../img/logo_carbstor_small.png); width:117px; height:97px; margin:-106px 0 0 40px; padding-bottom:4px; background-repeat:no-repeat; background-position: top left;}
#headerLogo a {display:block; width:117px; height:97px;}
#headerImgRow {background-image:url(../img/header_image_row_s.png); width:100%; height:110px; background-repeat:repeat-x; background-position:top left; margin:-110px 0 0 192px; border-bottom:1px solid #AAB7A7;}

/* ~~ THREE COLUMN layout ~~ */
/* ~~ SIDEBAR LEFT - outer container in percent - necessary for liquidity ~~ */
.sidebarLeft {float:left; width:11%; min-height:100%; }
/* ~~ inner container of sidebar left - important to keep the bg and width of the sidebar to a fixed pixel width within the overall liquidity even on browser window resize ~~ */
#contLeft {float:left; width:180px; height:100%; min-height:100%; border-left: 8px solid #003366; background-image:url(../img/sidebar_gradL.png); background-position: left top; background-repeat:repeat-y; 
margin-bottom: -99999px; padding-bottom: 99999px; /* this does the trick of getting the sidebar column to stretch to the bottom */ }	
	
/* ~~ page CONTENTS at the center - contains the % balance between left and right columns/sidebars - the CONTENT itself is ruled in styles_content.css ~~ */
.content     {float:left; width:78%; min-height:100%; }
article      {padding:3em 7em 0 7em; }

/* ~~ SIDEBAR RIGHT - outer container in percent - necessary for liquidity ~~ */
.sidebarRight {float:right; width:8%; min-height:100%; } 
/* ~~ inner container of sidebar left - important to keep the bg and width of the sidebar to a fixed pixel width within the overall liquidity even on browser window resize ~~ */
#contRight {float:right; width:180px; min-height:620px; border-right: 8px solid #d5d5d5; background-image:url(../img/sidebar_gradR.png); background-position: left top; background-repeat:repeat-y;
margin-bottom: -99999px; padding-bottom: 99999px; /* this does the trick of getting the sidebar columns to stretch to the bottom */ }	

/* ~~ LEFT MENU - vertical menu inside left sidebar ~~ */
#menuL    {margin: -1px 0; padding:0; border-top: 1px solid #AAB7A7; width:184px;}
#menuL ul {list-style-type: none; float:left; width: 180px; } 
#menuL li {width: 180px; font:Verdana, Geneva, sans-serif; font-size:0.72em; font-weight:bold; color: #476B05; text-indent:8px; border-bottom: 1px solid #CCD6E0;
		   background-image:url(../img/sidebar_gradL.png); background-position: 8px top; background-repeat:repeat-y;} 
/* ~~ color info: HUB-blue: #036; DSS-Wamos green: #0D4110; headline green: #476B05; menu-button L brown: #593721; hover: #705238;  ~~ */
#menuL .heading {background:url(../img/sidebar_gradL.png) repeat-y 0 top; padding: 7px 0; border-top: 1px solid #999;}
#menuL .borderFirstL  {background:url(../img/sidebar_gradL.png) repeat-y 0 top; padding: 9px 0; line-height:1.1em; }
#menuL .borderLastL   {padding: 0 0 1px 0;}
#menuL .listbottom    {border-bottom:none; border-top: 1px solid #999; margin-top:-1px; } /* below last list item */
#menuL .start a		  {line-height:1.1em; padding-top:0.9em; height:13px; color:#7E2715;}
#menuL .start a:hover {color:#000;}

#menuL li a {display: block; width: 180px; padding: 7px 0; /* Vertical (top/bottom) padding for each menu link */
text-decoration: none; font-weight:bold; text-indent: 1.2em; color: #593721; /* font weight was: bold */
border-top: 1px solid #999;  } /* White or light border beneath each menu item link, to add depth */
#menuL li a:hover {background-image:url(../img/sidebar_gradL_menu.png); background-position: -8px top; background-repeat:repeat-y; color:#705238; } 
/* end of LEFT vertical menu */
/* ~~ end of sidebar LEFT ~~ */

/* content of RIGHT SIDEBAR - right margin logos inside right sidebar */
#rightMargin_logos {margin:0; padding:0; }
#rightMargin_logos ul {list-style:none; float:left; width:180px; height:260px;}
#rightMargin_logos li {clear:both; float:right; margin-right:1.8em;}
#rightMargin_logos a  {display:block; text-decoration:none; }
.rightMargin_LOGO_HUB {background-image:url(../img/logo_hub_blue.png); width:100px; height:100px; background-repeat:no-repeat; border:0; margin:20px 14px 0 0;}
.rightMargin_LOGO_DBU {background-image:url(../img/logo_DBU_2_111x78.png); width:111px; height:78px; background-repeat:no-repeat; border:0; margin:28px 0 0 0; }

/* ~~ RIGHT MENU - vertical menu inside right sidebar ~~ */
#menuR    {margin: 0; padding: 0;}
#menuR ul {list-style: none; float:left; width: 180px; border-right: 8px solid #42661D;}/* green rim; border adds to total width */
#menuR li {list-style: none; border-bottom: 1px solid #CCD6E0;   } 
/* menuR li was: color:#036; border-bottom: 1px solid #999; for gray border beneath each menu item */
#menuR .borderFirstR {border-top: 1px solid #CCD6E0;}
#menuR .listbottom   {border-bottom:none; border-top: 1px solid #999; }
#menuR .home a {color:#7E2715;} /* logo bottom layer brown is: #7E2715 */
#menuR .home a:hover {color:#454851;} 

#menuR a {display: block; width: auto; padding: 7px 0; background-image:url(../img/sidebar_gradR.png); background-position: right top; background-repeat:repeat-y;
	      text-indent:10px; font:Verdana, Geneva, sans-serif; font-size:0.72em; font-weight:bold; text-indent: 12px; text-decoration: none; color: #593721; 
          border-top: 1px solid #999;} /* white or light border beneath each menu item link, to add depth */ 
#menuR a:hover {color:#705238; background-image:url(../img/sidebar_gradR_menu.png); background-position: 8px top; background-repeat:repeat-y;  } 
/* end of right vertical menu */

/* ~~ The footer ~~ */
footer, #push {height:70px; clear:both;} /* #push must be the same height as #footer */
footer {height:70px; position: relative; background-color:#f5f5f5; border-left: 8px solid #003366;} /* 'postition:relative' here good for IE6, but also previous floats */
.footerImg {background-image:url(../img/sidebar_gradL.png); background-position: left top; height:70px; background-repeat:repeat-y; }
footer ul {margin:0; padding:0.6em 0 0 0; list-style-type: none; border-top: 1px solid #7F9CBE;  }
footer li {float:left; clear:both; font-size:0.7em; color:#003366; width:100%; text-align:center;}
footer a, footer a:link  {color:#003366; text-decoration:none;}
footer a:hover  {color:#395C00; text-decoration:underline;}

/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, nav, article, figure {
	display: block; }
} /* end bracket for media screen */

@media print {
header        {display:none; }
.sidebarLeft  {display:none; }
.sidebarRight {display:none; } 
footer        {display:none; }
}