@import url('/api_auth/view/css/login.css'); /* LOGIN */
@import url('http://www.postfix-tutorial.com/postfix-tutorial/view/css/cms.css'); /* content management system stylesheet */
@import url('http://www.postfix-tutorial.com/postfix-tutorial/view/css/tab-menu-widget.css'); /* tab menu widget stylesheet */ 

#ruler {
  height: 0;
  width: 100px;
  background-color:blue;
}

.webcol1 {
  background-color: #ffffff;
}

.webcol2 {
  background-color: #dddddd;
}

.webcol3 {
  background-color: #9e9e9e;
}


h1, h2 {color: #606060}
h2 {font-size:18px;}
p {color: #404040}
div.entry {
padding:0px 0px 0px 40px;
}
#entry {
padding:0px 0px 0px 40px;
}
#banner {
font-style:italic;
padding: 0px 50px 0px 40px;
}


body {
  color:#333;
  background-color:#c0c0c0;
  margin:20px;
  padding:0px;
  font:11px verdana, arial, helvetica, sans-serif;
  }
h1 {
  margin:0px 0px 15px 0px;
  padding:0px;
  font-size:28px;
  font-weight:900;
  color:#ccc;
  }
h2 {
  font:bold 12px/14px verdana, arial, helvetica, sans-serif;
  margin:0px 0px 5px 0px;
  padding:0px;
  }
p {
  font:11px/20px verdana, arial, helvetica, sans-serif;
  margin:0px 0px 16px 0px;
  padding:0px;
  }
.Content>p {margin:0px;}
.Content>p+p {text-indent:30px;}

a {
  color:#09c;
  font-size:11px;
  font-family:verdana, arial, helvetica, sans-serif;
  font-weight:600;
  text-decoration:none;
  }
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}


/* All the content boxes belong to the content class. */
.content {
  position:relative; /* Position is declared 'relative' to gain control of stacking order (z-index). */
  width: max-content; /*relative;*/
  min-width:120px;
  margin:0px 15px 30px 25px;
  border:1px solid black;
  background-color:white;
  padding:10px;
  z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
  float:left;
  width: 65%;
  }

#wrapper {
  width: 15%;
  float:left;
  position:relative;
}

#navAlpha, #navAlpha2, #navAlpha3 {
  position:relative;
  top:0px;
  left:0px;
  border:1px solid black;
  background-color:white;
  padding:10px;
  z-index:2;

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
 * Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
 * IE5/Win incorrectly parses the ''}'' value, prematurely closing the style
 * declaration. The incorrect IE5/Win value is above, while the correct value is
 * below. See http://glish.com/css/hacks.asp for details. */
  voice-family: ''}'';
  voice-family:inherit;
  width:200px;
  }
/* I've heard this called the 'be nice to Opera 5' rule. Basically, it feeds correct
 * length values to user agents that exhibit the parsing error exploited above yet get
 * the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
 * a 'be nice to Opera 5' rule every time you use the Tantek Celik hack (above). */
body>#navAlpha {width:200px;}

#navAlpha {
  width: 100%;
  float:none;
  position:relative;
}

#navAlpha2 {
top: 250px;
}

#navAlpha3 {
  top: 460px;
  border:0px solid black;
  background-color:#c0c0c0;
}

#navBeta {
  position:relative;
  width: 100%;
  top:0px;
  right:0px;
  border:1px solid black;
  background-color:white;
  padding:10px;
  float:none;
  z-index:1;
/* Again, the ugly brilliant hack. */
  voice-family: ''}'';
  voice-family:inherit;
  width:120px;
  }
/* Again, 'be nice to Opera 5'. */
body>#navBeta {width:120px;}

@media screen and (max-width: 800px) {
  .content, #wrapper {
    float:none;
    width: 80%;
    clear: both;
  }
  #wrapper {
    overflow: auto;
  }
  .content {
    margin: 20px 0 0 0;
  }

  #navAlpha, #navBeta {
    width: 40%;
    float: left;
  }

}
 