/* econowars global presentation
1) html elements
2) action area styles
3) marginalien styles
4) footer
5) global layout
6) inherited typography corrections
7) media screen: navigation
8) media print: print styles
*/
/* econowars multipurpose styles */
/* =================================================================== */
/* general colors */
/* =================================================================== */
/*
white: #ffffff;
#000000: #000000;
body: #efe8dd;
#inhalte: #ffc
#diverses: #dda;
-- nav --
#oberkante: #45a28f;
#unterkante: #bfa174;
#navigation: #6784b8;
#inhaltsverzeichnis: #af8951;
--- captions ---
h1 #333;
h2 #900;
h3 #456296;
h4 #aaa;
a #8c6e41;
*/
/* =================================================================== */
/* typographische zeichen */
/* =================================================================== */
/*
en dash – \2013
em dash — \2014
- minus − \2212
ellipsis … \2026
leerzeichen ==
deutsche anführungszeichen 99-66 regel, doppelt, einfach
„ “
‚ ‘
\201e \201c
\201a \2018
<> == < >
Attributbedingte Formatierung
=============================
Beispiel Beschreibung
*[title] Bezieht sich auf alle Elemente, die das TITLE-Attribut besitzen.
p[align=center] Nur zentriert ausgerichtete Absätze werden mit den angegebenen CSS-Befehlen formatiert.
a[title~="extern"] Um alle Links, die im TITLE-Attribut das Wort "extern" enthalten, zu formatieren, benutzen Sie diese Notation.
link[hreflang|="de"] Alle LINK-Tags mit HREFLANG-Attribut sind von dieser Formatierung betroffen, sofern Sie als Wert entweder exakt "de" besitzen oder mit "de-" beginnen (z.B. oder ).
img[alt^="Bild"] Bilder, deren ALT-Attribut mit "Bild" beginnt, sind von diesem Selector betroffen.
a[href$=".php"] Links, deren Zieldateien die Dateiendung ".php" besitzen, sind von diesem Selector betroffen.
img[alt*="Foto"] Bilder, in deren ALT-Attribut die Zeichenkette "Foto" vorkommt, sind von diesem Selector betroffen.
img[alt^="Bild"][src^="http://"] Sie können die verschiedenen Varianten natürlich auch kombinieren. Beispielsweise bewirkt dieser Selector, dass alle Bilder, deren ALT-Attribut mit "Bild" und deren SRC-Attribut mit "http://" beginnen, entsprechend formatiert wird.
*/
/* =================================================================== */
/* alle medientypen BEGINN */
/* =================================================================== */
@media all {
/* html elements BEGINN */
html {
min-height:100%;
margin-bottom:1px;
}
body {
margin:0;
padding:0;
background: #efe8dd;
color:#333;
}
/* [lang|="de"]>* {
quotes: "„" "“" "‚" "‘";
}
*/
a {
color:#8c6e41;
font-weight:bold;
}
a:link, a:visited {
text-decoration:none;
}
a:active, a:hover {
text-decoration:underline;
}
h1 a {
font-weight:normal;
}
a[href^="http://"]:before,
a[href^="https://"]:before {
content: "\2196\00a0";
font-weight:bold;
color: red;
}
a[href^="mailto:"]:before {
content: "@\00a0";
font-weight:bold;
color: red;
}
a[href*="#"]:before, a[class="intern"]:before {
content: "\2197\00a0";
font-weight:bold;
color: #00008B;
}
ul, ol, dl {
margin-top:1em;
margin-bottom:1em;
padding-left:2em;
}
li {
padding-left:1em;
}
ul {
list-style-type: square;
}
ul ul {
list-style-type: circle;
}
li.noDots {
list-style-type: none;
}
dd {
font-style:italic;
margin-left:1em;
}
h1 {
color: #404000;
font-weight:normal;
font-size:1.538em;
text-indent:-0.55em;
padding-bottom:0.3em;
}
h1.endIt {
font-size:200%;
}
h2 {
color: #910;
font-weight:normal;
font-size:1.154em;
margin-top:0.9em;
margin-bottom:0.45em;
text-indent:-0.75em;
}
h2 a {
color: #333;
font-weight:normal;
}
h3 {
margin-bottom:0.45em;
margin-top:1.8em;
font-weight:normal;
font-size:1.077em;
clear:left;
}
h4 {
text-indent:-0.125em;
margin-bottom:0em;
margin-top:1em;
font-weight:normal;
font-size:1.083em;
}
/* font-size: 0.923em; */
p, blockquote, li, td {
line-height:1.5em;
}
blockquote {
padding: 0 0 0 0;
margin: 0 0 0 0;
font-style:italic;
}
blockquote.pull {
font-size:135%;
}
blockquote.pull {
font-size:125%;
}
blockquote.pull p:first-letter {
font-size: 250%;
line-height: 0.85em;
color : #008B8B;
}
q {
font-style:italic;
font-weight:bold;
quotes: "‚" "‘";
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
blockquote q {
font-style:italic;
text-indent:2em;
padding: 0.5em 0em 0em 0.75em;
margin: 0.5em 0em 0em 0.75em;
}
blockquote q:before {
content: "";
}
blockquote q:after {
content: "";
}
span.blue {
font-weight:bold;
color: #00008B;
}
span.red {
font-weight:bold;
color: red;
}
p.firstP {
}
p + p.firstP {
text-indent:0em;
}
p.firstP:first-letter {
float: left;
margin-top: 0.05em;
margin-right: 0.05em;
margin-bottom: 0em;
line-height: 0.75em;
font-size: 500%;
color: #bfa174;
}
p.firstL:first-line {
font-weight:bold
}
p.firstPL {
float: left;
margin-top: 0.05em;
margin-right: 0.05em;
margin-bottom: 0em;
line-height: 0.75em;
font-size: 500%;
font-weight:bold;
color: #bfa174;
}
pre {
font-size: 0.9167em;
border-left:1px dotted #bbb;
padding-left:0.5em;
/*overflow: auto;*/
}
fieldset {
width: 85%;
margin-left: 0.35em;
background: #fff;
border:1px solid #bfa174;
}
fieldset + a:active, a:hover {
text-decoration:none;
}
legend {
background: #fff;
border:1px dotted #bfa174;
}
p.vcard {
margin-top:1em;
margin-bottom:1em;
padding:0 1.5em 0 2em;
font-style:normal;
}
p.vcard span.n {
clear: left;
float: left;
margin-top: 0.35em;
margin-bottom:0.35em;
}
p.vcard span.org {
clear: left;
float: left;
margin-top: 0.35em;
margin-bottom:0.35em;
}
p.vcard span.adr {
clear: left;
float: left;
margin-top: 0.35em;
margin-bottom:0.35em;
}
p.vcard span.tel {
clear: left;
float: left;
margin-top: 0.25em;
margin-bottom:0.25em;
}
p.vcard a {
clear: left;
float: left;
margin-top: 0.35em;
}
p.bodyQR {
float: right;
width: 35%;
font:italic 1.4em/1.4 Georgia;
font-weight:bold;
text-indent:0em;
padding:0.75em;
border-top:3px solid #bfa174;
border-bottom:3px solid #bfa174;
background-color:#fcd2aa;
}
p.bodyQL {
float: left;
width: 35%;
font:italic 1.4em/1.4 Georgia;
font-weight:bold;
text-indent:0em;
padding:0.75em;
border-top:3px double #bfa174;
border-bottom:3px double #bfa174;
background-color:#fcd2aa;
}
p.pullquote {
margin:.25em .75em .25em 0;
padding:.5em;
color:#955B36;
background:transparent;
text-align:center;
}
p.illus {
font-variant: small-caps;
letter-spacing:0.1em;
font-weight:bold;
font-size:108.333%;
text-align: center;
}
strong.pull {
font-size : 1.2em;
text-transform : uppercase;
font-weight:bold;
color : #45a17e;
}
strong {
color:#555;
}
acronym, abbr {
text-transform: lowercase;
font-variant: small-caps;
letter-spacing:0.1em;
font-style:normal;
font-size:108.333%;
}
acronym[title], abbr[title] {
border-bottom:2px dotted #bbb;
}
h1 acronym, h1 abbr, h1 .caps, h2 acronym, h2 abbr, h3 acronym, h3 abbr, dt acronym, dt abbr {
text-transform: uppercase;
font-variant: normal;
letter-spacing:0;
}
code, kbd {
font-size:1em;
font-style:normal;
}
dfn {
font-style:normal;
}
ins {
font-style:italic;
text-decoration: none;
}
ins:before {
content: "(Eingefügt am ";
}
ins:after {
content: ")";
}
img {
border:0;
vertical-align:middle;
}
sup { line-height: 0em; }
/* ============ TABLE ============================ */
table {
font: normal 12px/20px "trebuchet ms", verdana, arial, helvetica, sans-serif;
border-top:1px solid #e5eff8;
border-right:1px solid #e5eff8;
margin:0.5em auto;
border-collapse:collapse;
border-left: 1px solid #a2adbc;
text-align: left;
}
table caption {
margin: 0em auto;
padding: 0;
width: auto;
background: #a2adbc;
color: #000;
font: bold 16px "trebuchet ms", verdana, arial, helvetica, sans-serif;
text-align: center;
}
table thead th {
background:#f4f9fe;
text-align:center;
font:bold 1.2em/2em "century gothic","trebuchet ms",arial,helvetica,sans-serif;
color:#66a3d3;
}
table thead th strong {
font:bold 1.2em "century gothic","trebuchet ms",arial,helvetica,sans-serif;
color:#900;
}
table thead th span {display: none;}
table thead th:hover span {
display: block;
position: absolute;
top: 58em; left: 70em;
width: 12em;
padding: 0.5em;
z-index: 100;
border: 1px solid #000000;
color: #000000;
background: #FFFBF0;
font: 10px Verdana, sans-serif; text-align: left;
}
table th {
font: bold 11px/20px "trebuchet ms", verdana, arial, helvetica, sans-serif;
color: #616b76;
background: #d9e2e1;
border-right: 1px solid #a2adbc;
border-bottom: 1px solid #a2adbc;
border-top: 1px solid #a2adbc;
text-align: left;
}
table tbody th {
padding-left: 0.3em;
padding-right: 0.5em;
text-align: left;
}
table tbody th.centre {
text-align: center;
}
table th strong {
color:#900;
}
table tfoot th {
background:#f4f9fe;
text-align:left;
vertical-align:top;
padding-left: 0.25em;
}
table tfoot td {
text-align:center;
font-size: 1.2em;
border-top: 1px solid #a2adbc;
}
table tfoot td.right {
text-align:right;
}
table tfoot th strong {
font:bold 1.2em "century gothic","trebuchet ms",arial,helvetica,sans-serif;
margin:.5em .5em .5em 0;
color:#66a3d3;
}
table tfoot th em {
color:#f03b58;
font-weight: bold;
font-size: 1.1em;
font-style: normal;
}
table td {
border-right: 1px solid #a2adbc;
border-bottom: 1px solid #a2adbc;
width: auto;
height: 20px;
text-align: right;
padding-right: 0.5em;
padding-left: 0.3em;
background-color: white;
}
table td.left {
text-align: left;
}
table td.center {
text-align: center;
}
table td.red {
color: #900;
font-weight: bold;
}
table td a {
color: #900;
font-weight: bold;
text-decoration: underline;
}
table td a:link, td a:visited {
color: #608194;
}
table td a:hover, td a:active {
color: #6aa3ae;
}
/* ====== html elements ENDE ================= */
/* =========================================== */
/* action area styles */
#inhalte {
border-top:1px solid #ffffff;
border-left:5px solid #ffffff;
border-right:1px solid #cfb997;
border-bottom:1px dashed #cfb997;
background-color:#eee;
}
#inhalte ul ul, #inhalte ul ol {
margin-top:0;
margin-left:0;
}
#inhalte dl {
background:#ffd;
border:2px dashed #cfb997;
margin:1em;
margin-left:3em;
padding-bottom: 1em;
padding-right: 1em;
width: 75%;
}
#inhalte dt, ol li {
margin-top:1em;
margin-bottom:1em;
font-weight:bold;
}
#inhalte dd {
list-style-type: circle;
margin-bottom:1em;
font-style:normal;
}
#inhalte ol {
background:#eec;
border:3px dotted #cfb997;
margin:1em;
width: 85%;
list-style-type: decimal;
}
#inhalte p {
margin:0 0 1em 0;
}
.intro {
margin:0 0 1em 0;
letter-spacing:2pt;
}
#inhalte p.intro {
margin:0 0 1em 0;
letter-spacing:2pt;
}
#inhalte p + p {
text-indent:2em;
margin-top:-1em;
}
/* ============================================= */
/* econowars.com – inhalts-bereiche layout */
/* ============================================= */
/* marginalien styles */
#diverses {
background:#dda;
border-left:5px solid #efe8dd;
border-right:1px solid #bfa174;
}
#diverses #photo img {
border:2px solid #411;
border-right: 5px double #fff;
}
#diverses #photo img {
width: 99%;
max-width:111px;
height: auto;
}
#diverses div {
border-top:1px solid #dfd0ba;
border-bottom:1px dashed #bfa174;
border-left:3px solid #fff;
margin-left:0;
padding-left:0;
text-indent:0;
}
#diverses a, .anmerkungen a {
font-weight:normal;
}
.anmerkungen {
background:#ffc;
border-left:5px solid #efe8dd;
border-right:1px solid #bfa174;
border-top:1px solid #fff;
}
.anmerkungen ul {
list-style-type: none;
list-style-image: none;
border-bottom:1px dashed #bfa174;
border-left:1px dashed #bfa174;
padding-left:1em;
text-indent:-1em;
}
.anmerkungen li, #diverses p, #diverses dl {
font-size: 0.846em;
line-height:1.583em;
}
.anmerkungen li li {
border:0;
padding-left:1em;
text-indent:-1em;
}
.anmerkungen li {
margin-left:0;
margin-bottom: 1em;
padding-left:0;
text-indent:0;
}
.anmerkungen h2 {
font-weight:bold;
font-size:1.154em;
color:#456296;
text-indent:-0.125em;
}
/* ============================================= */
/* footer */
#footer {
clear:both;
font-size: 0.846em;
color:#808080;
padding:4em 2.5% 0 2.7%;
}
#footer a:link, #footer a:visited {
color:#808080;
}
#footer img {
border:0;
margin:0.25em;
}
#footer a span.impressum {
color: #900;
font-size: 1.3em;
font-weight: 700;
}
/* =============================================== */
/* ============ PLATZIERUNGEN ==================== */
/* action area */
#hintergrund {
position:relative;
}
#hintergrund #inhalte {
margin:0 2.5%;
width:60%;
}
#hintergrund #inhalte h2, #hintergrund #inhalte ul, #hintergrund #inhalte p {
margin-left:5.29%;
margin-right:5.29%;
}
#inhalte h2 {
margin-left:4.17%;
margin-right:4.17%;
}
/* marginalien */
#anmerkungen, #diverses {
position:absolute;
top:2px;
}
#diverses {
width:35%;
right:0;
}
#anmerkungen {
width:21.75%;
right:2.5%;
}
#diverses h2, #diverses p, #diverses dl, #diverses ul, #anmerkungen h2, #anmerkungen ul {
margin-left:5.74%;
margin-right:5.74%;
}
#diverses #photo img {
margin-top:5.74%;
margin-left:5.74%;
margin-right:5.74%;
}
/* ============================================= */
/* inherited typography corrections */
/* ============================================= */
li li, li blockquote, li p, blockquote p {
font-size:1em !important;
}
blockquote p {
margin-bottom:0.5em !important;
text-indent:0 !important;
margin-top:0.5em !important;
}
blockquote, li p {
margin-left:0 !important;
margin-right:0 !important;
}
}
/* =================================================================== */
/* alle medientypen ENDE */
/* =================================================================== */
/* =================================================================== */
/* medientyp screen BEGINN */
/* =================================================================== */
@media screen {
/* header */
#topcontainer {
width: 100%;
position: fixed;
z-index:999;
}
#bottomcontainer {
width: 100%;
position:absolute;
top:103px;
}
#motto {
color: #e6e6e6;
text-indent: 3.5em;
margin-top: -0.55em;
margin-bottom: 0.55em;
}
#oberkante {
width:100%;
height:3px;
background:#45a28f;
border-bottom:1px solid #af8951;
clear:left;
line-height: 0.25em;
}
#unterkante {
width:100%;
height:3px;
background:#45a28f;
border-top:1px solid #cfb997;
border-bottom:1px solid #af8951;
clear:left;
line-height: 0.25em;
}
#navigation {
background:#6784b8;
background-image: url(images/weiji.png);
background-repeat:no-repeat;
background-position:top right;
border-top:1px solid #bfa174;
border-bottom:1px solid #8c6e41;
height:7em;
}
#navigation img {
position:relative;
left:1.5%;
top:8px;
margin-bottom:1em;
}
/* ============ PLATZIERUNGEN ENDE ==================== */
#inhaltsverzeichnis {
color:#e6e6e6;
background:#8c6e41;
margin:0% 7.5% 0% 0%;
}
#inhaltsverzeichnis li {
padding-left:0;
font-size: 0.846em;
line-height:1.1em;
list-style:none;
list-style-image:none;
margin:0;
text-indent:0;
width:10.66%;
float:left;
}
#inhaltsverzeichnis a {
display:block;
padding:0.5em 0.5em;
color:#003333;
background:#afa951;
border-top:2px solid #bfa174;
border-left:2px solid #bfa174;
border-right:2px solid #8c6e41;
border-bottom:2px solid #735a34;
text-decoration:none;
font-weight:bold;
}
#inhaltsverzeichnis a:hover, #inhaltsverzeichnis a:focus {
color:#e6e6e6;
background:#8c6e41;
font-weight:bold;
padding:0.5em 0.4em;
border-top:1px solid #735a34;
border-left:1px solid #8c6e41;
border-right:1px solid #bfa174;
border-bottom:1px solid #bfa174;
}
#inhaltsverzeichnis a.miActive {
background:#8c6e41;
color:#e6e6e6;
}
.anmerkungen a:hover {
color:#8c6e41;
background:#eee;
font-weight:bold;
}
div#inhalte a:hover {
color: #411;
background: #AAA;
}
/* ------------- box für einschübe --------------- */
/* ----------------------------------------------- */
div.ideenbox{
width:35%;
float:left;
margin:10px 10px 0 0;
}
div.wide {
width:65%;
float:left;
margin:10px 10px 0 0;
}
div.hgr1{
width:100%;
float:left;
height:12px;
margin:0!important
}
div.hgr2{
width:100%;
background:#f8a24b;
clear:both;
float:left;
margin-bottom:0;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}
/* div.hgrspalte1{
width:39%;
background:#f8a24b;
line-height:11px;;
float:left;
border-bottom:1px solid #f8a24b;
margin:0;;
padding:0;
height:11px;
}
*/
/* div.lrand{
width:6%;
float:left;
border:1px solid #f8a24b
}
*/
div.hgrspalte2{
width:61%;
float:left;
line-height:11px;
margin-bottom:0;
}
div.bgidee{
width:93%;
float:left;
background:#fcd2aa;
margin-bottom:0;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}
p.idee{
width:95%;
padding-top: 1.5em;
line-height:1.15em;
font-weight:700;
}
p.autor{
width:99%;
color:#968e8c;
margin:0 0 0 0;
}
p.nachweis {
margin:0 0 0 0;
}
/* ------------- box für einschübe ENDE ------------------------------ */
}
/* =================================================================== */
/* medientyp screen ENDE */
/* =================================================================== */
/* =================================================================== */
/* medientyp druck BEGINN */
/* =================================================================== */
@media print {
/* #diverses, .anmerkungen,
*/
#oberkante, #unterkante, #inhaltsverzeichnis,
.impressum, #navigation ul + a, #valid, .ideenbox, .clustrmaps, script {
display: none;
}
body {
margin: 0;
padding: 0;
background: transparent;
}
h1, h2, h3, h4, h5, h6 {
margin: .75em 0 .5em 0;
page-break-after: avoid;
color: #000000;
}
h1 {
margin-top: 5px;
text-indent:3em;
}
h2 {
margin-bottom: 15px;
padding-right: 15px;
text-indent:2em;
}
p {
margin: 0 0 1em 0;
orphans:3;
widows:4;
}
#diverses, .anmerkungen {
clear: both;
float: left;
position: relative;
width: 100%;
margin:0.25em 0 0 0;
padding: 0;
border: none;
}
#diverses anmerkungen p+p {
margin-top: 0em;
text-indent: 0em !important;
}
#footer {
border-top: 1.5pt solid;
font-size: .95em;
color: #333;
text-align: center;
}
table {
width: 85%;
color: #000000;
}
#navigation {
border: none;
}
#hintergrund {
width: 150%;
margin:0 0 0 0;
padding: 0 0 0 0;
border: none !important;
clear: both;
float: left;
}
#inhalte {
width: 100%;
border: none !important;
}
a[href]:after {
content: " " attr(href) "\00a0\00a0";
color: #000 !important;
font-weight: normal !important;
overflow: visible;
}
#inhalte table caption a[href]:after {
content: " " !important;
color: #000 !important;
font-weight: normal !important;
}
}
/* =================================================================== */
/* medientyp druck ENDE */
/* =================================================================== */