@charset "ISO-8859-1";

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * main frame
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

body {
	background-color: #fff;
	color: #000;
	padding: 0;
	margin: 0 0 20pt 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	line-height: 1.2em;
	text-align: left;
	text-decoration: none;
}

body.market_journal {
	margin: 0 3pt 0 3pt;
}

body.blog {
	margin: 0 3pt 0 3pt;
}

p {
	margin: 0.9em 0 0 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-variant: normal;
	line-height: inherit;
	text-align: inherit;
	text-decoration: inherit;
}

p.ad_picture {
}

p.portrait {
	margin: 0.6em 0 0 0;
}

p.delete_picture {
	margin-top: 0.1em;
}

p.delete_portrait {
	margin-top: 0.1em;
}

p.contact_data {
	margin: 0.5em 0 0 0;
}

p.printingorder {
    font-size: 14pt;
    margin: 1.1em 0 -1em 0;
	font-variant: small-caps;
}

p.subprintingorder {
    font-size: 12pt;
    margin: 1.2em 0 -1em 0;
}

p.rightaligned {
	text-align: right;
}

p.centered {
	text-align: center;
}

p.indented {
	margin-left: 3em;
	margin-top: 0.4em;
}

p.aed_futter {
	margin: 0.15em 0 0 0;
	padding: 0;
	color: #777;
    background-color: inherit;
	font-size: 0.9em;
	font-weight: normal;
}

p.request {
	font-style: italic;
}

p.offer {
}

p.upload_picture {
}

p.upload_portrait {
}

p.deleted {
	color: #777;
    background-color: inherit;
}

p.information {
	color: #d00;
    background-color: inherit;
}

em.printingord,
em.subprintingord {
	font-weight: normal;
	font-style: normal;
}

em.dimmed, div.dimmed {
	font-style: normal;
	color: #aaa;
}

code {
    font-family: "Courier New", Courier, monospace;
}

@media not (min-width: 630pt) {		/* This defines "small screen" */
	div.bodytext p, 
	div.bodytext th, 
	div.bodytext td, 
	div.bodytext li,
	div.standard p {
		font-size: 10pt;
		line-height: 1.2em;
	}
}

@media (min-width: 630pt) {			/* This defines "large screen" */
	div.bodytext p, 
	div.bodytext th, 
	div.bodytext td, 
	div.bodytext li,
	div.standard p {
		font-size: 11pt;
		line-height: 1.2em;
	}
}

div.blog p,
div.blog div.bodytext p {
	font-size: 10pt;
	margin: 0.2em 0 0 0;
}

div.pagebreak {
	page-break-after: always;
}

div.transactions p {
    line-height: 1.2em;
	font-size: 10pt;
	margin: 0;
}


/* This improves the visual apperance if someone does copy-and-past between the market journal web page
 * and MS Word 
 */
div.marketjournal p,
div.marketjournal h2,
div.marketjournal h3,
div.marketjournal h4,
div.marketjournal h5 {
    line-height: 1em;
}


/* fixup IE & Opera
 * otherwise they forget to inherit
 * the font-size value, resulting in improper em units
 */
table, tr, td, th, col, code, img, option, select, input, caption, ul, li {
    font-size: 10pt;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Links
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* normal links           */
/* ====================== */
a:link {
    color: #03c;
    background-color: inherit;
	text-decoration: underline;
}

a:visited {
    color: #807;
    background-color: inherit;
	text-decoration: underline;
}

a:link:active,
a:visited:active,
a:link:hover,
a:visited:hover {
    color: #03c;
    background-color: #ddd;
	text-decoration: none;
}

table.navigation a:link {
    color: #fff;
    background-color: #348;
    text-decoration: none;
}

table.navigation a:visited {
    color: #fff;
    background-color: #348;
    text-decoration: none;
}

table.navigation a:link:active,
table.navigation a:visited:active,
table.navigation a:link:hover,
table.navigation a:visited:hover {
    color: #fff;
    background-color: #348;
    text-decoration: none;
    font-weight: bold;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Headings
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* h1                     */
/* ====================== */
@media not (min-width: 630pt) {		/* This defines "small screen" */
	h1 {
	    padding: 0;
	    margin: 0.8em 0 0 0;
	    border-style: none;
	    background-color: inherit;
	    color: #777;
	    text-decoration: none;
	    font-size: 15pt;
	    font-weight: bold;
	    line-height: 1.2em;
	}
}

@media (min-width: 630pt) {			/* This defines "large screen" */
	h1 {
	    padding: 0;
	    margin: 0.8em 0 0 0;
	    border-style: none;
	    background-color: inherit;
	    color: #777;
	    text-decoration: none;
	    font-size: 19pt;
	    font-weight: bold;
	    line-height: 1.2em;
	}
}

/* h2                     */
/* ====================== */
@media not (min-width: 630pt) {		/* This defines "small screen" */
	h2 {
	    padding: 0;
	    margin: 1em 0 0 0;
		border-style: none;
		background-color: inherit;
		color: #777;
	    text-decoration: none;
	    font-size: 13pt;
	    font-weight: bold;
	    line-height: 1.2em;
	}
}

@media (min-width: 630pt) {			/* This defines "large screen" */
	h2 {
	    padding: 0;
	    margin: 1em 0 0 0;
		border-style: none;
		background-color: inherit;
		color: #777;
	    text-decoration: none;
	    font-size: 16pt;
	    font-weight: bold;
	    line-height: 1.2em;
	}
}

/* take care of <a name>s inside */
h2 a,
h2 a:hover,
h2 a:active {
    color: inherit;
    background-color: inherit;
    text-decoration: none;
}

/* h3, h4                 */
/* ====================== */
@media not (min-width: 630pt) {		/* This defines "small screen" */
	h3 {
	    background-color: inherit;
	    color: #000;
	    text-decoration: none;
	    font-weight: bold;
	    font-size: 11pt;
	    margin: 1.1em 0 0 0;
	    padding: 0;
	    line-height: 1.2em;
	}
}

@media (min-width: 630pt) {			/* This defines "large screen" */
	h3 {
	    background-color: inherit;
	    color: #000;
	    text-decoration: none;
	    font-weight: bold;
	    font-size: 14pt;
	    margin: 1.1em 0 0 0;
	    padding: 0;
	    line-height: 1.2em;
	}
}

h3.category {
	background-color: #fd9;
	margin-top: 1.7em;
}

p.initial {
    font-weight: bold;
    font-size: 12pt;
	background-color: #fd9;
	margin: 0.9em 0 0 0;
	text-align: center;
}

h4 {
    background-color: inherit;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    font-size: 12pt;
    margin: 1.2em 0 0 0;
    padding: 0;
    line-height: 1.2em;
}

h4.subcategory {
	color: #03c;
}

h5 {
    background-color: inherit;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    font-size: 11pt;
    margin: 1.2em 0 0 0;
    padding: 0;
    line-height: 1.2em;
}

h5.adtypeheading {
	margin: 0.9em 0 0 0;
	font-weight: normal;
	letter-spacing: 0.2em;
}

/* take care of <a name>s inside and the logo */
h3 a,
h3 a:hover,
h3 a:active,
h4 a,
h4 a:hover,
h4 a:active,
h5 a,
h5 a:hover,
h5 a:active,
a.logo,
a.logo:visited {
    color: inherit;
    background-color: inherit;
    text-decoration: none;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Form
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

form {
	border-style: none;
	background-color: inherit;
	color: inherit;
	float: none;
	margin: 0;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Tables
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* general                */
/* ====================== */
table {
	/* table-layout = auto|fixed|inherit */
	table-layout: auto;

	/* float = left|right|none|inherit */
	float: none;

	/* border-style = (none|hidden|dotted|dashed|solid|double|groove|ridge
						|inset|outset){1,4}|inherit */
	border-style: none;

	/* border-collapse = collapse|separate|inherit */
	border-collapse: collapse;

	/* border-width = <length>{1,4}|inherit */
	border-width: 0;

	/* border-spacing = <length>{1,2}|inherit
	   The second length, if present, specifies vertical spacing. */
/*	border-spacing: 0; for some reasons this does not work with IE.
	In case of "border-collapse: separate" one can use cellspacing="length" at the 
	HTML document to control the cell spacing */

	/* border-color = #rgb{1,4}|transparent|inherit */

	/* background-color = #rgb|transparent|inherit */
	background-color: transparent;

	margin: 0;
}

table.forms {
	border-style: outset;
	border-width: 2px;
	border-color: #fff;
	background-color: #ddd;
	border-collapse: separate;
/*	border-collapse: collapse;	this conflicts with outer border style "outset" */
	border-spacing: 0;	/* doesn't work at IE; use cellspacing="0" in HTML code */
	margin: 10pt 0 15pt 0;
}

table.fineline {
	margin: 10pt 0 15pt 0;
}

table.cheques {
	border-style: solid;
	border-width: 2px;
	border-color: #000;
	background-color: #fff;
	margin: 0 0 5pt 0;
}

table.textboxes {
	border-collapse: separate;
	border-spacing: 0;	/* doesn't work at IE; use cellspacing="0" in HTML code */
	margin: 20pt 0 8pt 10pt;
}

table.navigation {
	margin: 1.5em 1em 1.5em 0;
	border-collapse: collapse;
	background-color: #ccc;
}

caption {
	/* caption-side = top|bottom|left|right|inherit */
	caption-side: bottom;

	margin: 1em;
}

col.leftmargin {
	width: 20pt;
}

col.rightmargin {
	width: 20pt;
}

col.rightbox {
	width: 150pt;
}

col.mainbox {
	width: 600pt;
}

col.widebox {
	width: 750pt;
}

td, th {
	/* border-style = (none|hidden|dotted|dashed|solid|double|groove|ridge
						|inset|outset){1,4}|inherit */
	border-style: none;

	/* border-width = <length> */
	border-width: 0;

	/* border-color = #rgb{1,4}|transparent|inherit */

	/* Whether borders are drawn around empty cells. empty-cells = show|hide|inherit */
	empty-cells: show;

	/* vertical-align = baseline|top|bottom|middle */
    vertical-align: top;

	/* text-align = left|right|center|justify|<string>|inherit
	   <string> can be "." to align a column along the decimal point. */
    text-align: left;

	/* padding = (<length>|<percentage>){1,4}|inherit */
	padding: 0;
}

td.middlealigned, 
th.middlealigned {
	vertical-align: middle;
	padding: 0.3em 0.9em 0.3em 0;
}

th {
    font-weight: bold;
}

@media not (min-width: 630pt) {		/* This defines "small screen" */
	th.logo {
		font-size: 18pt;
		color: #03c;
	    background-color: inherit;
	    padding: 0.2em 0 2pt 0;
	    text-align: right;
	    vertical-align: bottom;
	    line-height: 1em;
	}
}

@media (min-width: 630pt) {			/* This defines "large screen" */
	th.logo {
		font-size: 25pt;
		color: #03c;
	    background-color: inherit;
	    padding: 0.2em 0 1pt 0;
	    text-align: right;
	    vertical-align: bottom;
	    line-height: 1em;
	}
}

@media not (min-width: 630pt) {		/* This defines "small screen" */
	th.title {
		font-size: 14pt;
		color: #777;
	    background-color: inherit;
	    padding: 0.2em 0 2.5pt 0;
	    vertical-align: bottom;
	    line-height: 1em;
	}
}

@media (min-width: 630pt) {			/* This defines "large screen" */
	th.title {
		font-size: 19pt;
		color: #777;
	    background-color: inherit;
	    padding: 0.2em 0 1.5pt 0;
	    vertical-align: bottom;
	    line-height: 1em;
	}
}

td.orange {
	color: inherit;
	background-color: #f90;
	height: 1.5pt;
}

td.twopix {
	height: 1.5pt;
}

@media not (min-width: 630pt) {		/* This defines "small screen" */
	td.motto {
		display: none;				/* hide */
		position: absolute;			/* avoids displacing other content */ 
	}
}

@media (min-width: 630pt) {			/* This defines "large screen" */
	td.motto {
		font-size: 10.2pt;
		font-weight: bold;
		letter-spacing: 0.2pt;
		text-align: right;
		padding: 1.5pt 0 0 0;
		color: #777;
	    background-color: inherit;
	}
}

td.navigation {
	font-size: 10pt;
	padding: 1.5pt 0 0 0;
}

th.rightpadded,
td.rightpadded {
	padding: 0 0.9em 0 0;
}

th.centered, 
td.centered {
    text-align: center;
}

th.rightaligned, 
td.rightaligned {
    text-align: right;
}

table.forms tr.highlighted {
	background-color: #eee;
	color: inherit;
}

table.forms tr.darkened {
	background-color: #45a;
	color: #fff;
}

table.forms tr.highlighted td {
	border-style: solid none none none;
    border-width: 1px;
	border-color: #fff;
}

table.forms th,
table.forms td {
    border-width: 0;
	padding: 0.15em 0.3em;
	height: 2em;
    vertical-align: middle;
}

table.forms tr.lineabove th,
table.forms tr.lineabove td {
	border-style: solid none none none;
    border-width: 1px;
	border-color: #fff;
}

table.forms tr td.lineleft {
	border-style: none none none solid;
    border-width: 1px;
	border-color: #fff;
}

table.forms tr.lineabove td.lineleft {
	border-style: solid none none solid;
    border-width: 1px;
	border-color: #fff;
}

table.forms td.submitrow {
	padding: 0.5em 0.3em;
}

table.textboxes th,
table.textboxes td {
	border-style: solid;
    border-width: 1px;
	border-color: #888;
	font-size: 10pt;
}

table.textboxes th {
	border-style: solid solid none solid;
	background-color: #57b;
	color: #fff;
	font-size: 12pt;
	padding: 0.35em 0.2em 0.35em 0.4em;
}

table.textboxes td {
	border-style: none solid solid solid;
	background-color: #eee;
	padding: 0em 0.2em 0.8em 0.5em;
}

table.textboxes td.spacer {
	border-style: none;
	height: 0.8em;
	background-color: #fff;
}

table.fineline th {
	font-size: 1.1em;
	padding: 0 0.3em 0.15em 0.3em;
	height: 1.5em;
    vertical-align: middle;
	border-style: none none none solid;
    border-width: 1px;
	border-color: #ccc;
}

table.fineline td {
	padding: 0.15em 0.3em 0.15em 0.3em;
	height: 1.7em;
    vertical-align: middle;
	border-style: solid none none solid;
    border-width: 1px;
	border-color: #ccc;
}

table.fineline td.leftcol {
	padding-left: 0;
	border-style: solid none none none;
}

table.fineline th.leftcol {
	padding-left: 0;
	border-style: none;
}

table.fineline td.rightcol {
	padding-right: 0;
	border-style: solid none none solid;
}

table.fineline th.rightcol {
	padding-right: 0;
	border-style: none none none solid;
}

table.cheques td,
table.cheques th {
	border-style: solid;
    border-width: 1px;
	border-color: #000;
	padding: 0.15em 0.3em;
    vertical-align: middle;
}

table.cheques p {
	margin: 0.2em 0 0 0;
	font-size: 11pt;
	line-height: 1.2em;
}

table.cheques p.small {
	margin: 0;
	font-size: 7pt;
	line-height: 1.2em;
}

table.footnote td {
	padding: 0.3em 0.3em 0.3em 0.3em;
}

table.navigation td {
	border-color: #aaa;
	border-style: none none solid none;
	border-width: 1px;
	padding: 3pt 4pt 3pt 4pt;
	background-color: #348;
	font-size: 12pt;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Lists
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* list default values    */
/* ====================== */

ul {
	margin: 0;
	padding: 0;
    list-style-type: disc;
}

ul ul {
    list-style-type: square;
}

ul ul ul {
    list-style-type: circle;
}

li, dt, dd {
	margin: 0.5em 0 0 2em;
}

dt {
    margin-top: 0.5em;
    font-weight: bold;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Drop-down menu build of two-level-nested <ul>
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

div.drop_down_menu {
	margin-top: 4pt;
}

div.drop_down_menu ul {
	list-style-type: none;		/* no bullets to list items here */
}

div.drop_down_menu li {
	width: 149.5pt;			/* unfortunately, with Opera we see a line wrap of the drop-down columns, 
								if we make it 150pt wide */
	margin: 0;
}

div.drop_down_menu li {
	float: left;			/* this causes side-to-side alignment of the top menu items */
}

@media not (min-width: 630pt) {		/* This defines "small screen" */
	div.drop_down_menu li ul {
		display: none;			/* hide submenu when not hovering */
		position: absolute;		/* avoids displacing other content by the submenu */
		left: 80pt;
	}
}

@media (min-width: 630pt) {			/* This defines "large screen" */
	div.drop_down_menu li ul {
		display: none;			/* hide submenu when not hovering */
		position: absolute;		/* avoids displacing other content by the submenu */
	}
}

div.drop_down_menu li:hover ul {
	display: block;			/* show submenu when hovering over the topmenu item or over the submenu */
}

div.drop_down_menu li ul li {	/* submenu item */
	clear: left;
}

div.drop_down_menu p {
	text-align: center;
	font-weight: bold;
	margin: 0;
	padding: 2pt 2pt 3pt 2pt;
	border-style: outset;
	border-width: 1px;
	border-color: #fff;
	background-color: #ddd;
}

div.drop_down_menu p:hover {
	background-color: #ccf;		/* light blue */
}

div.drop_down_menu a:active p:hover {
	background-color: #fcc;		/* light red */
	border-style: inset;		/* looks like a pressed button when hovering over */
}

div.drop_down_menu li ul li p {		/* submenu item */
	font-weight: normal;
	color: #000;
}

/* prevent that some browsers are underlining and coloring links in the usual manner */
div.drop_down_menu a:link, div.drop_down_menu a:visited, div.drop_down_menu a:hover,
	div.drop_down_menu a:active, div.drop_down_menu a:focus {
	color: #000;
	text-decoration: none;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Images
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

img.klammeraffe {
	width: 11pt;
	margin: 0 0 -3pt 0;
}

img.punkt {
	width: 3pt;
	margin: 0 0 -0.7pt 0;
}

img.inline_icon {
	margin: 0 0 -0.15em 0;
	border-style: none;
}

img.floatleft {
	float: left;
	margin: 0 1em 0 0;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Screen size dependent
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@media not (min-width: 630pt) {		/* This defines "small screen" */

	div.hide_on_small_screen, table.hide_on_small_screen {
		display: none;				/* hide everything */
		position: absolute;			/* avoids displacing other content by the hidden object */ 
	}

	col.hide_on_small_screen {
		width: 0;					/* reduce table column width to zero */
	}

	col.enlarge_on_small_screen {
		width: 749pt;				/* enlarge table column width */
	}

	col.in_communities {
		width: 669pt;				/* enlarge table column width */
	}

	img.show_on_small_screen {
		display: block;
	}
}

@media (min-width: 630pt) {			/* This defines "large screen" */

	div.hide_on_small_screen, table.hide_on_small_screen {
		display: block;				/* show everything */
	}

	col.hide_on_small_screen {		/* normal table column width */
		width: 299pt;
	}

	col.enlarge_on_small_screen {	/* normal table column width */
		width: 450pt;
	}

	col.in_communities {
		width: 369pt;				/* normal table column width */
	}

	img.show_on_small_screen {
		display: none;
		position: absolute;
	}
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * -> The End <-
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
