/*************************************************************************
  Enigmail New Site - Main CSS (for SCREEN display on recent browsers)
  - Order of style definitions:
    - in general follow their appearance in a typical page and
    - the followinf scheme:
      - global tag styles
      - section styles and classes
      - general classes
      - special formatting
  Olav's comments:
  - Thanks to selfhtml.org and fractatulum.de for teaching me CSS
*************************************************************************/
body {						/* contains the background only, sets some defaults */
	text-align:center;			/* center page for Internet Explorer */
	margin:15px 0 0 0;			/* ---------- change top margin here ---------- */
	background:#C5CFD0 url(../_img/body.png) repeat-x;	/* the fading background that only appears aside the content */
	color:black;				/* site wide default although set that way in most cases anyway */
	font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;	/* Verdana (wide) and Tahoma (condensed) are better readable than Arial */
}
hr {						/* mimic horizontal lines size=1, color them like the title bottom border */
	margin:1.8em 0 1.5em 0;			/* nice spacing */
	border-top:1px solid #cccccc;		/* the line itself */
	border-bottom:0;			/* we only want 1px top (around the default 0px hr line itself) */
	border-left:0;				/* we only want 1px top (around the default 0px hr line itself) */
	border-right:0;				/* we only want 1px top (around the default 0px hr line itself) */
}
h2 {						/* I would not recommend to use h2, it is too big, looks ugly then in this layout */
	font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;	/* Verdana (wide) and Tahoma (condensed) are better readable than Arial */
	font-weight:normal;			/* looks ugly with bold font */
	font-size:1.4em;			/* do not let the browser decide how big to render headings */
	margin-top:1.4em;			/* space too big after heading if not set */
	margin-bottom:0.6em;			/* space too big after heading if not set */
}
h3 {						/* treat h2 and h3 equal except for margin-top, see below */
	font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;	/* Verdana (wide) and Tahoma (condensed) are better readable than Arial */
	font-weight:normal;			/* looks ugly with bold font */
	font-size:1.25em;			/* do not let the browser decide how big to render headings */
	margin-bottom:0.5em;			/* space too big after heading if not set */
}
h4 {
	font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;	/* Verdana (wide) and Tahoma (condensed) are better readable than Arial */
	font-weight:normal;			/* looks ugly with bold font */
	font-size:1.05em;			/* do not let the browser decide how big to render headings */
	margin-bottom:0.25em;			/* space too big after heading if not set */
}
a {						/* site wide default */
	color:#005FA9;				/* the default link color */
	text-decoration:none;			/* links are made visible by their color, so don't underline */
}
a:hover {					/* site wide default */
	text-decoration:underline;		/* give visible link feedback if the mouse is over the link */
}
tr {						/* It was just too much of a hassle to use float within floats */
						/* because of the inability to clear only the inner ones, */
						/* so we use tables for the inner 3-column view now */
	vertical-align:top;			/* well, headline shall start right on top ;-) */
}
/************************************************************************/
div#center {					/* contains the whole, centered page of a certain width */
	text-align:left;			/* back to left-aligned within the IE centered container */
	margin:0 auto;				/* center page according to CSS standards */
	width:960px;				/* ---------- change page width here ---------- */
}
div#logo {					/* contains one item left aligned and one right aligned */
	height:40px;				/* without, margin does not work in the next element */
	font-size:0.85em;			/* small, but brower-resizable */
}
div#logo span {					/* contains the text of the left item, use .right first! */
	display:inline;				/* add next element on the right if that is inline, too */
}
div#logo .left {				/* text to be displayed on the left must precede this one */
	float:left;				/* overlay; other text flows around but there itonly one element */
}
div#logo .right {				/* text to be displayed on the right must precede the left one */
	float:right;				/* overlay; other text flows around but there itonly one element */
}
div#logo a {					/* ignore the usual formatting for this link */
	color:white;				/* well, black text is quite bad readable on blue/gray */
}
div#navi {					/* contains the menu background, and two left/right aligned items */
	clear:both;				/* stop previous inlines and floats, continue below them */
	margin:12px 0 18px 0;			/* -------------- change spaces between top elements -------------- */
	height:32px;				/* without, margin does not work in the next element */
	background:url(../_img/navi_middle.gif) repeat-x;	/* the onmouseover highlighter background */
}
div#navi span {					/* contains the text of the left item, use .right first! */
	display:inline;				/* add next element on the right if that is inline, too */
}
div#navi .left {				/* text/image to be displayed on the left must precede this one */
	float:left;				/* overlay; other text flows around but there itonly one element */
	font-weight:bold;			/* well, the menu shall be readable */
}
div#navi .left a {				/* text to be displayed on the left must follow the right float */
	border-left:1px solid #a0a0a0;		/* separator lines between footer links */
	padding:2px 8px 2px 8px;		/* distance to separator */
	font-size:0.95em;			/* manu buttons can be smaller than normal text */
	color:#21536A;				/* darker link color for items on colored background, similarly set in menu */
	text-decoration:none;			/* one link indicator is enough */
}
div#navi .left a:hover {			/* menu section, mouse currently over it */
	background:url(../_img/navi_selected.gif) repeat-x;	/* overlay, must match background image's y position */
}
div#navi .navi {				/* it is allowed to call for several classes at once */
	margin:7px 7px 4px 0;			/* adjust the text but not the images by adding this class to the text floats only */
}
div#navi .active {				/* well, I would have liked to only define this in .left a context but that didn't work */
	color:black !important;			/* the !important was necessary to overwrite the color defined in div#navi .left a */
}
div#navi .right {				/* text/image to be displayed on the right must precede the left one */
	float:right;				/* overlay; other text flows around but there itonly one element */
}
div#navi .search {				/* it is allowed to call for several classes at once */
	margin:5px 6px 0px 0px;			/* adjust the text but not the images by adding this class to the text floats only */
}
div#curves {					/* contains the rounded white/gray corners on the left and right */
	height:4px;				/* without, margin does not work in the next element */
	background-color:white;			/* otherwise only the menu and the content section were on white */
}
div#curves span {				/* contains the text of the left item, use .right first! */
	display:inline;				/* add next element on the right if that is inline, too */
}
div#curves .left {				/* text to be displayed on the left must precede this one */
	float:left;				/* overlay; other text flows around but there itonly one element */
}
div#curves .right {				/* text to be displayed on the right must precede the left one */
	float:right;				/* overlay; other text flows around but there itonly one element */
}
div#main {					/* this solves the issue that we cannot use the left and right border ... */
	background:white url(../_img/menu_line.gif) repeat-y;	/* to be set in menu and content because of the 3px hack */
}
div#forum {					/* forum: iframe without menu */
	background-color:white;			/* don't show the menu/content line background image */
}
h1#title {					/* only this title and the content section are printed */
	clear:both;				/* stop previous inlines and floats, continue below them */
	margin:0;				/* get rid of h1's standard bottom margin */
	padding:5px 10px 8px 10px;		/* place text nicely */
	font-size:1.45em;			/* keep texts size adjustable whereever possible by using em */
	font-weight:normal;			/* get rid if h1's standard bold font */
	border-bottom:1px solid #cccccc;	/* border below the page title that separates from menu and content */
	background-color:white;			/* overwrite the menu/content line introduced in main */
}
div#menu {					/* the navigation menu on the left */
	float:left;				/* overlay; other text would flow around it but: see div#content margin */
	width:178px;				/* ---------- change menu width here and ... ---------- */
	font-size:0.85em;			/* reduced size to fit descriptive menu items, set here as it did not work to set it in div only */
}
div#menu hr {					/* divide menu items without adding another heading */
	margin:1em 0 0.9em 0;			/* reduced spacing */
}
div#menu h3 {					/* menu section as formatting shall be mouse sensitive, most of it is applied to the a tag */
	margin:0;				/* get rid of h3's standard top margin */
	font-size:1.1em;			/* inflate reduced size relative to div#menu*/
	font-weight:bold;			/* needs some more focus */
}
div#menu h3 a {					/* menu section, mouse not over it */
	display:block;				/* activate link (at least in Gecko browsers) for the whole button */
	border-top:1px solid #ffffff;		/* 3D effect of the menu sections */
	border-bottom:1px solid #cccccc;	/* 3D effect of the menu sections */
	padding:3px 0px 3px 10px;		/* place text nicely */
	background-color:#ebebeb;		/* fade to be continued with plain background color */
	color:#21536A;				/* darker link color for items on colored background, similarly set in navi */
}
div#menu h3 a:link, div#menu h3 a:visited {	/* menu section, mouse not over it */
	background:#ebebeb url(../_img/menu_section.gif) repeat-x;	/* fade to be continued with plain background color */
}
div#menu h3 a:hover {				/* menu section, mouse currently over it */
	background-image: none;			/* remove the image to make changed background-color visible */
	background-color:#ddeeff;		/* highlighted background as link indicator */
	text-decoration:none;			/* one link indicator is enough */
}
div#menu .menu {				/* menu items below the menu section */
	padding:9px 0 5px 0;			/* space after section link */
	border-bottom:1px solid #cccccc;	/* 3D effect of the menu sections */
	background-color:#f5f7f7;		/* menu background */
}
div#menu p {					/* menu comment */
	margin:0 0 3px 0;			/* get rid of p's standard top margin */
	padding:0 0 0 10px;			/* set the site's standard left padding */
}
div#menu ul {					/* menu link group */
	margin:0 0 9px 0;			/* get rid of ul's standard top margin */
	padding:0 0 0 10px;			/* place text nicely */
	list-style:none;			/* get rid of ul's bullets */
}
div#menu li {					/* menu link group */
	padding:0 0 1px 0;			/* place text nicely */
}
div#content {					/* the real page content */
	margin:0 0 0 179px;			/* ---------- ... also change menu width +1px (!) here ---------- */
	padding:10px 15px 15px 15px;		/* nicely place the text                 ^ this is due to menu_line.gif */
	font-family:Arial,Helvetica,sans-serif;	/* Verdana is too wide for the main text */
}
/* this line hides the following hack from IE5 on Macintosh as that IE does not suffer that bug \*/
* html div#content {				/* browser selector hack: only interpreted by IE */
	height:1px;				/* fixes that IE moves 3 pixels to the left if preceded by a float */
}
div#content p {					/* assumed that each page starts with p -> content padding-top reduced by 3px */
	margin:4px 0 0 0;			/* paragraph spacing hack */
	padding:4px 0 0 0;			/* paragraph spacing hack */
}
div#content .red {				/* assumed that each page starts with p -> content padding-top reduced by 3px */
	color:red;				/* let everybody notice it first */
}
div#content .redhead {				/* assumed that each page starts with p -> content padding-top reduced by 3px */
	color:red;				/* let everybody notice it first */
	font-size:110%;				/* mimic heading */
}
div#content .float-right {			/* right aligned with some space to the surrounding text */
	margin:10px 0 10px 0;			/*  */
	padding:5px 0 0 20px;			/*  */
	float:right;				/*  */
}
div#content .float-left {			/* left aligned with some space to the surrounding text */
	margin:10px 20px 10px 0;		/*  */
	padding:0 0 5px 0;			/*  */
	float:left;				/*  */
}
div#content .top {				/*  */
	margin-top:0 !important;		/*  */
}
div#content .caption {				/*  */
	text-align:center;			/*  */
	font-size:0.85em;			/*  */
}
div#content .caption img {			/*  */
	margin-bottom:10px;			/*  */
}
div#fineprint {					/* contains one item left aligned and one right aligned */
	clear:both;				/* stop previous inlines and floats, continue below them */
	background-color:white;			/* overwrite the menu/content line introduced in main */
	border-top:1px solid #cccccc;		/* separate menu and content from the fineprint */
	position:relative;			/* hack to hide the double separator line from menu and fineprint */
	top:-1px;				/* hack to hide the double separator line from menu and fineprint */
	left:0;					/* hack to hide the double separator line from menu and fineprint */
	height:31px;				/* exactly the height of the images */
	padding:5px 6px 4px 10px;		/* visibly center the items with a nice white inner border */
	font-size:0.85em;			/* small, but brower-resizable */
}
div#fineprint span {				/* contains the text of the left item, use .right first! */
	display:inline;				/* add next element on the right if that is inline, too */
}
div#fineprint .left {				/* text to be displayed on the left must follow the right float */
	float:left;				/* without float-left, the top-alignment was too difficult */
	margin-top:7px;				/* only the text in the left float must be vertically aligned */
}
div#fineprint .left a {				/* text to be displayed on the left must follow the right float */
	border-left:1px solid #a0a0a0;		/* separator lines between footer links */
	padding-left:5px;			/* distance to separator */
}
div#fineprint .right {				/* graphics to be displayed on the right must precede the left one */
	float:right;				/* overlay; other text flows around but there itonly one element */
}
/************************************************************************/
@media print {					/* only print title and content */
	body { margin:0; text-align:left; background:none; }
	div#center { width:auto; }
	div#logo, div#navi, div#curves, div#menu, div#fineprint { display:none; }
	div#main { background-image:none; }
	div#content { margin:0; }
}
pre { margin-left:2em; }