/* Reset for CSS */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend
table, caption, tbody, tfoot, thead, tr, th, td  {
	margin: 0px;
	padding: 0px;
	border: 0px;
	outline: 0px;
	font-size: 100%;
}


/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0px;
}


html, body, ul, li {
	list-style: none;
}



/* End of CSS reset */


/*   Links   */

a, a:visited{
        font-weight: bold;
	text-decoration: none;
	color: #3C3CA0;
}


a:hover{
	text-decoration: underline;
	color: #3C3CA0;
}

/* End of links */

.more {
	text-align: right;
}
.left {
	float: left;
}
.right {
        float: right;
}
.center{
        text-align: center;
}

.inline{
    display: inline;
}

.clear {    /* Any element with this class will clear the left and right floats, 
                and have 0 height to be unobtrusive */
    clear: both;
    height: 0px;
    line-height: 0px;      /* fix empty div height bug for IE 7 */
    font-size: 0px;
}


body, h1, h2, h3, form {
	font: 10px tahoma, arial, sans-serif;
        color: #3C3C3C;     /* text color */
}


/* IE does not allow styling of noscript tag, so we need to use a class */
noscript, .noJscript {
        color: #FF0000;
        font-weight: bold;
}


body {
        text-align: center;
        background: url(../images/headBG.gif) repeat-x;
        background-color: #FAFAFF;     /* #FAFAFF; #F4F4F9; light blue */

}

#wrapper {
	text-align: left;
	margin: auto;
	width: 800px;
	position: relative;    /* All containers inside wrapper are relative to its borders */
}


/* ----------------------- Styles for adjustable text controller ---------------------------- */

#adjustsize {

       position: absolute;
       z-index: 5;
       top: 10px;
       right: 0px;
       text-align: right;
       width: 200px;
       height: 25px;
       color: #707070;
       font: 14px tahoma, arial, sans-serif;

}

#adjustsize a {
       color: #707070;
}

#adjustsize a:hover {
       text-decoration: none;
       cursor: pointer;
}


#tooltip1, #tooltip2 {
        position: absolute;
        z-index: 6;
        background-color: #F4F4F9;

        font: 14px tahoma, arial, sans-serif;
        font-weight: bold;
        text-align: center;

        border: solid #000000 2px;
        padding: 5px;


        -khtml-opacity: 0.95;       /*  Safari 1.x */
        -moz-opacity: 0.95;         /* Older than Firefox 0.9 */
	filter: alpha(opacity:95);  /* IE 5 - 9 */
        opacity: 0.95;              /* Modern browsers & IE 9+ */

}

#tooltip1 {
        right: 40px;
        top: 20px;
}

#tooltip2 {
        right: 20px;
        top: 20px;
}

/* ----------------------- End of styles for adjustable text controller ------------------- */



#header {                   /* Contains Logo and Navigation menu */
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 4;
	width: 790px;
	height: 160px;
}


/* ------------------------- Logo area ------------------------- */

#HH {
       position: relative;
       width: 790px;
       height: 106px;
       z-index: 1;   /* This allows Flags to overlap on top of menu */
}


#HH0 {      /*  Logo  */
    /*   position: absolute;
       left: 150px;
       top: 25px;

       font: 40px tahoma, arial, sans-serif;
       font-weight: bold;
       color: #EAEAFF;
       font-style: italic;
       text-align: center;    */


       position: absolute;
       left: 145px;
       top: 0px;
}

#HH0, #HH0 img {   /*  Logo size */
       width: 525px;
       height: 97px;
}


#HH1 {       /* text */

   /*    position: absolute;
       left: 180px;
       top: 75px;

       font: 11px tahoma, arial, sans-serif;
       font-weight: bold;
       color: #EAEAFF;
       font-style: italic;
       text-align: center;   */

}

#HH2 {       /* Xmas stuff */
   /*
       position: absolute;
       left: 660px;
       top: 15px;
       width: 60px;
       height: 105px;
       background: url(../images/XmasCane.gif) no-repeat;
   */
}


#HH3 {       /* image German Flag */
       position: absolute;
       left: 0px;
       top: 27px;
       width: 90px;
       height: 84px;
       background: url(../images/FlagA.png) no-repeat;
}

#HH4 {       /* image US Flag */
       position: absolute;
       left: 720px;
       top: 30px;
       width: 90px;
       height: 84px;
       background: url(../images/FlagB.png) no-repeat;
}

#HH5 {
}

#HH6 {
}

#HH7 {       /* image */
       position: absolute;
       left: 89px;
       top: 32px;
       width: 41px;
       height: 80px;
       background: url(../images/Beerstein2.png) no-repeat;

  /*
       left: 68px;
       top: 32px;
       width: 90px;
       height: 84px;
       background: url(../images/XmasPoin.gif) no-repeat;
 */

}


/* -------------------- end of Logo area ------------------- */


/* -------------------- Menu Navigation -------------------- */

#menu {
      position: absolute;
      left: 10px;
}

#menu ul {
      display: block;
      width: 790px;            /* width of entire menu */
      height: 30px;
      list-style-type: none;
      background: url(../images/menu1.gif) repeat-x;
}

#menu li {    /* display: list-item */
      height: 30px;
      float: left;  /*  Needed to make the menu horizontal */
}

#menu a, #navlast div { /* To make entire cell a link, we turn link into a block */
       display: block;
       height: 30px;
}

#menu a:hover {
       text-decoration: underline;
       background: url(../images/menuhighlight.gif) repeat-x;
       cursor: pointer;
       color: #FFFFFF;
}

#nav1 a, #NAV1 a {
        width: 60px;
}
#nav2 a, #NAV2 a {
        width: 140px;
}
#nav3 a, #NAV3 a {
        width: 100px;
}
#nav4 a, #NAV4 a {
        width: 110px;
}
#nav5 a, #NAV5 a {
        width: 70px;
}
#nav6 a, #NAV6 a {
        width: 100px;
}
#nav7 a, #NAV7 a {
        width: 80px;
}
#nav8 a, #NAV8 a {
        width: 80px;
}
#navlast div{
        width: 3px;
}


#nav1 a, #nav2 a, #nav3 a, #nav4 a, #nav5 a, #nav6 a, #nav7 a,
#nav8 a, #nav9 a,
#NAV1 a, #NAV2 a, #NAV3 a, #NAV4 a, #NAV5 a, #NAV6 a, #NAV7 a,
#NAV8 a, #NAV9 a {
       border-right: solid #333333 1px;
       border-left: solid #888888 1px;
}
#nav1 a, #NAV1 a {
       border-left: solid #555555 1px;
}
#navlast div {
       border-left: solid #888888 1px;
}
#menu ul {
       border-right: solid #555555 1px;
}


#menu a span {
    display: block;
    width: 100%;
    height: 12px;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    
    font: bold 10px tahoma, arial, sans-serif;


    padding-top: 9px;
}


#NAV1 a, #NAV2 a, #NAV3 a, #NAV4 a,
#NAV5 a, #NAV6 a, #NAV7 a, #NAV8 a,
#NAV9 a {
    background: url(../images/menuhighlight.gif) repeat-x;
}




/* ------------------------- Begin body and content -------------------------------- */


#headline {
	 padding-top: 160px;
	 z-index: 3;
}

#body {
	/* padding-top: 2em; */
	padding-top: 10px;
	text-align: justify;
}

#body-left {
	float: left;
	width: 420px;
	padding-left: 5px;
}
#body-right {
	float: right;
	width: 340px;
}



#body h2, #body p {
	margin: 0.3em 0;
}

#body-right p {
	margin-right: 2em;
}


.left1 {
  float: left;
  width: 210px;
}
.right1 {
  float: right;
  width: 190px;
}


#footer {
        text-align: center;
	color: #AAAAAA;
        padding: 25px 0 5px 0;
	margin-top: 2em;
	font-weight: bold;
}



/* ------------------------ dropshadows ------------------------------------- */


/* Dropshadow for navigation menu */

#menush1 {      /* menu bottom dropshadow */
      float: left;             /* shrink wrap the shadows around the menu */
      background: url(../images/navshadow1.gif) bottom left repeat-x;
}

#menush2 {      /* menu bottom-right corner dropshadow */
      float: left;
      background: url(../images/navshadow2.gif) bottom right no-repeat;
}

#menush3 {      /* menu bottom-left corner dropshadow */
      float: left;
      padding-bottom: 12px;
      padding-right: 14px;
      background: url(../images/navshadow3.gif) bottom left no-repeat;
}


/* -------------------------------------------------------------------------------------- */

/*Nifty Corners Cube CSS by Alessandro Fulciniti
The following classes are added dynamically by javascript,
and their use should be avoided in the markup */

b.niftycorners,b.niftyfill{display:block}
b.niftycorners *{display:block;height: 1px;line-height:1px;font-size: 1px;
    overflow:hidden;border-style:solid;border-width: 0 1px}
/*normal*/
b.r1{margin: 0 3px;border-width: 0 2px}
b.r2{margin: 0 2px}
b.r3{margin: 0 1px}
b.r4{height: 2px}
b.rb1{margin: 0 8px;border-width:0 2px}
b.rb2{margin: 0 6px;border-width:0 2px}
b.rb3{margin: 0 5px}
b.rb4{margin: 0 4px}
b.rb5{margin: 0 3px}
b.rb6{margin: 0 2px}
b.rb7{margin: 0 1px;height:2px}
b.rb8{margin: 0;height:2px}
b.rs1{margin: 0 1px}
/*transparent inside*/
b.t1{border-width: 0 5px}
b.t2{border-width: 0 3px}
b.t3{border-width: 0 2px}
b.t4{height: 2px}
b.tb1{border-width: 0 10px}
b.tb2{border-width: 0 8px}
b.tb3{border-width: 0 6px}
b.tb4{border-width: 0 5px}
b.tb5{border-width: 0 4px}
b.tb6{border-width: 0 3px}
b.tb7{border-width: 0 2px;height:2px}
b.tb8{border-width: 0 1px;height:2px}
b.ts1{border-width: 0 2px}


/* ------------------------------------------------------------------------ */
/*
  Login Form for RoundCube email page

*/


#login-form {
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  width: 380px;
  border: 1px solid #999;
}

#login-form table td.title
{
  color: #666;
  text-align: right;
  padding-right: 10px;
}

.boxcontent {
  padding: 20px 20px 10px 20px;
}


#login-form table td {
  padding-bottom: 11px;
}

#login-form table {
  margin-bottom: 10px;
}


/* ------------------------------------------------------------------------ */
/*
  This section is for resizing the text on a web page. It contains the classNames
  whose values will change when text is being resized.
  These values correspond to the sizeable2.css stylesheet.

*/

.size1 {
    font: 14px tahoma, arial, sans-serif;
}

.title1 {
    font: 17px tahoma, arial, sans-serif;
    font-weight: bold;
}

.showM {
   line-height: 16px;
   font-size: 14px;
}