/*	Autor:						Claude Roulet
	Autor URL:					http://exquisito.ch/
	Kunden URL:					http://miramicus.ch/
	Angelegt:					2009-11-01
	Letzte Änderungen:			2012-01-15		*/

html {
	font-size: 100%;
}

body, h1, h2, h3, h4, p, ul, ol, dl, li, dt, dd, form, fieldset, button, input, select, textarea {
	font-family: proxima-nova, sans-serif;
	padding: 0;
	margin: 0;
	border: 0 none;
}

article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
	padding: 0;
	margin: 0;
}

audio, canvas, video {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

source {
	display: inline;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th, td {
	text-align: left;
	vertical-align: top;
}

a {
	text-decoration: none;	
	outline: 0 none;
}


@media screen {

body {
	font-size: 14px;		/* 14px */
	line-height: 1.5; 		/* 21px */
	color: #33312d;
	text-align: left;
	padding: 0;
	background: #fff;
}

h1, h2, h3, h4 {
	text-rendering: optimizeLegibility;
}

h1 {
	font-size: 2.286em;		/* 32px */
	line-height: 1.25;		/* 40px */
	color: #9b9995;
	font-weight: 400;
	padding: 0;
	margin: 0 0 .875em;		/* 28px */
}

#blog h1 {
	font-size: 2em;			/* 28px */
	line-height: 1.25;		/* 35px */
	padding: 0;
	margin: 0 0 1em;		/* 28px */
}

h1 em, #mira-neumann h1, #kontakt h1, #blog h1 {
	color: #ff9b00;
	font-style: normal;
}

h2 {
	font-size: 1.286em;		/* 18px, Elementhöhe 49px */
	line-height: 1.333;		/* 24px */
	color: #ff9b00;
	padding: 1em 0 0;		/* 18px */
	margin: 0 0 .389em;		/* 7px */
}

h1 + h2 {
	margin-top: -.167em;
}

h1 + a.gross + h2 {
	padding-top: 0;
}

h3, h4 {
	color: #898783;
}

h3 {
	font-size: 1.143em;		/* 16px, Elementhöhe 42px */
	line-height: 1.313;		/* 21px */
	padding: .875em 0 0;	/* 14px */
	margin: 0 0 .438em;		/* 7px */
}

h1 + h3 {
	padding-top: 0;
}

h4 {
	font-size: 1em;			/* 14px, Elementhöhe 35px */
	line-height: 1.286;		/* 18px */
	padding: .714em 0 0;	/* 10px */
	margin: 0 0 .5em;		/* 7px */
}

h2 + h3, h3 + h4 {
	padding-top: .5em;
}

p, ul, ol {
	margin-bottom: .5em;
}

ul + p, ol + p {
	padding-top: 1em;
}

a {
	color: #ff9b00;
	border-bottom: .071em solid #ff9b00;
}

a:hover, a:focus, a:active { 
	color: #f56c00;
	border-bottom-color: #f56c00;
}

a:focus {
	outline: 1px dotted;
}

h2 a, h3 a {
	color: #898783;
	border: 0 none;
}

h2 a:hover, h2 a:focus, h2 a:active, h3 a:hover, h3 a:focus, h3 a:active { 
	color: #ff9b00;
	border: 0 none;
}

#blog h2 a, #blog h2 a em {
	font-style: normal;
	color: #ff9b00;
}

#blog h2 a:hover, #blog h2 a:focus, #blog h2 a:active {
	color: #ffb037;
}

strong {
	color: #ff9b00;
}

#angebot strong {
	color: #33312d;
}

strong a {
	border: 0 none !important;
}

a img {
	cursor: url(/grafiken/lupe.cur), pointer;
}

#content abbr, #content .versalien {
	font-size: 0.929em;
}

abbr[title] {
	border-bottom: 1px dotted #c3c1bd;
	cursor: help;
}

a abbr[title] {
	cursor: pointer;
	border: 0 none;
}

.eng, .enger {
	word-spacing: -.143em;
}

.weiter {
	word-spacing: 1em;
}


#wrapper {
	position: relative;
	top: 0;
	width: 960px;
	min-height: 570px;
	height: auto !important;
	height: 570px;	
	margin: 0 auto;
	padding: 0 0 63px;
}

#fehlerseite #wrapper {
	min-height: 55em;
	height: auto !important;
	height: 55em;	
}


/*	Kopfbereich Logo
––––––––––––––––––––––––– */

header {
	position: relative;
	height: 150px;
	background: url(/grafiken/logo.png) 38px 20px no-repeat;
}

header h1 {
	text-indent: -300em;
}

header h2 {
	font-size: 1.143em;				/* 16px */
	line-height: 1.5;				/* 24px */
	font-weight: 400;
	color: #acaaa6;
	position: absolute;
	top: 70px;
	left: 130px;
}

a.skip {
	position: relative;
	top: -1500px;
	left: -3000px;
	border: 0 none;
}

a.skip:focus, a.skip:active {
	position: relative;
	top: 21px;
	left: 40px;
}


/*	Inhalt
––––––––––––––––––––––––– */

#content {
	width: 560px;
	margin: 0 0 0 320px;
	padding: 0 40px;
}

#kontakt #content {
	width: 400px;
	padding-left: 160px;
}

#content a.gross {
	width: auto;		/* wird von TxP für das enthaltene img ausgegeben */
	float: left;
	display: block;
	line-height: 0;
	margin: .5em 40px 1.5em 0;
	border: 0 none;
	outline: 0 none;
}

#content ul {
	margin-left: 0;
}

#content ul li {
	list-style: none;
	margin-bottom: .5em;
	padding-left: 16px;
	background: url(/grafiken/orange-6.png) 0 .571em no-repeat;
}

#content ol {
	margin-left: 1.5em;
}

#content a {
	white-space: nowrap;
}

.spruch {
	margin-bottom: 2em;
	padding: 0 0 0 12px;
	border-left: 1px dotted #dad7d3;
}

.spruch p {
	font-size: .857em;		/* 12px */
	line-height: 1.5;		/* 18px */
	color: #898783;
	font-style: italic;
	margin: 0 0 .5em;
}

p.links-intern {
	margin: 0 0 1.5em -4px;
}

.links-intern a, button {
	position: relative;
	display: inline-block;
	line-height: 1;
	font-weight: bold;
	color: #fff;
	border: 0 none;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	-moz-box-shadow: 1px 1px 3px #c3c1bd;
	-webkit-box-shadow: 1px 1px 3px #b8b5b1;
	box-shadow: 1px 1px 3px #c3c1bd;
	margin: 0 40px 0 0;
	padding: .429em .857em .571em;
	background: url(/grafiken/hg-links.png) repeat-x;
}

.links-intern a:hover, .links-intern a:focus, .links-intern a:active, button:hover, button:focus, button:active {
	background-position: 0 -60px;
	border: 0 none;
}

.links-intern a:active, button:active {
	top: 1px;
	left: 1px;
	-moz-box-shadow: 0px 0px 3px #c3c1bd;
	-webkit-box-shadow: 0px 0px 3px #c3c1bd;
	box-shadow: 0px 0px 3px #c3c1bd;
}

button {
	display: block;
	font-size: 1em;
	margin: 0;
}

#kursliste {
	padding-bottom: 98px;
}

#kursliste h3 {
	padding-left: 16px;
	background: url(/grafiken/dreieck-10.png) 0 78% no-repeat;
}

#kursliste p {
	padding-left: 16px;
}

p.links-einzelkurs {
	color: #acaaa6;	/* bestimmt Farbe des "|", der Rest sind Links */
	word-spacing: 1em;
}

.kein-kurs {
	padding-top: 1em;
	background: url(/grafiken/dreieck-10.png) 0 75% no-repeat;
}

#links a {
	border: 0 none;
}

#links a:hover, #links a:focus, #links a:active { 
	border-bottom: .071em solid #f56c00;
}

audio {
	margin: 1em 0;
}



/*	Blog spezifisch
––––––––––––––––––––––––– */

#blog h2 {
	clear: both;		/* wegen eventuell vorkommender Fotos im Vorgängerartikel */
}

#blog p {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

#blog .artikel-angaben, #blog .weiter, #blog-nav {
	font-size: .857em;		/* 12px */
	color: #acaaa6;
	margin-bottom: 1.416em;
}

#blog .weiter a {
	color: #000;
	border: 0 none;
	background: #ffb644;
	padding: .25em .666em .167em;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#blog .weiter a:hover, #blog .weiter a:focus, #blog .weiter a:active {
	background: #ffc66d;
}

#blog .weiter a:after {
	content: " »";
}

#blog-nav {
	padding-top: 2.916em;
	word-spacing: 1em;
}

#blog-nav a, dl#blog-nav {
	word-spacing: 0;
}

#blog-nav dt {
	width: 9em;
	float: left;
	display: inline;
}

#blog-nav dd {
	margin: 0 0 .75em 9em;
}


/*	Adresse
––––––––––––––––––––––––– */

#impressum .vcard {
	padding: 7px 0 0;
	margin: 0 0 21px;
}

#kontakt abbr {
	border: 0 none;
}

.org, .url {
	display: none;
}

.street-address, .country-name {
	display: block;
}

.country-name {
	font-weight: bold;
}

.country-name {
	padding-top: .5em;
}

.tel a {
	color: #33312d;
	border: 0 none;
	cursor: default;
}

.tel:before {
	content: "Telefon: ";
}

.email:before {
	content: "eMail: ";
}

.skype img {
	position: relative;
	bottom: -7px;
	left: 1em;
	width: 26px;
	height: 26px;
	float: none;
	margin: 0;
}

.skype:before {
	content: "Skype: ";
}


/*	Anmeldeformular
––––––––––––––––––––––––– */

form {
	width: 402px;
}

label, input, textarea {
	display: block;
	font-family: inherit;	/* ohne Angabe benutzt FF in 'textarea' monospace */
	font-size: 1em;
	font-weight: normal;
	color: #33312d;
}

label {
	cursor: pointer;
	padding: 1em 0 0;
	margin: 0 0 .214em 2px;
	color: #898783;
}

label span {
	display: none;
}

label abbr {
	border: 0 none;
}

input, textarea, #anleitung, #notwendig, #fehler, .versendet {
	width: 390px;
	padding: .214em 6px;
	background: #fdfefd url(/grafiken/hg-formular.png) repeat-x;
	border: 1px solid #dad7d3;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

input:hover, input:focus, input:active, textarea:hover, textarea:focus, textarea:active {
	border: 1px solid #ff9b00;
}

input:focus, textarea:focus {
	outline: 1px solid #ff9b00;
	background: #fff;
}

/* 'button' wird weiter oben bei '.links-intern a' definiert */

.hinweis {
	font-size: .857em;		/* 12px */
	line-height: 1.333;		/* 16px */
	color: #000;
	display: block;
	width: 18em;
	position: relative;
	bottom: .167em;
	left: 250px;
	margin-top: -4.417em;
	padding: .583em;
	background: #ff9b00;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 2px 2px 4px #cfccc8;
	-moz-box-shadow: 2px 2px 4px #cfccc8;
	box-shadow: 2px 2px 4px #cfccc8;
}

div#plz {
	width: 102px;
	float: left;
}

#plz abbr {
	border: 0 none;
}

input#postleitzahl {
	width: 80px;
}

div#ort {
	width: 300px;
	margin-left: 102px;
}

input#ortschaft {
	width: 288px;
}

textarea {
	margin: 0 0 1em;
	overflow: auto;			/* eliminiert im IE die standardmässig gezeigte Scrollleiste */
}

input#agb {
	width: auto;
	font-size: 1em;
	vertical-align: .071em;
	margin: 0 0 1.5em 2px;
	padding: 0;
	background: none;
	border: 0 none;
}

#agb, #agb + label {
	display: inline;
}

#agb + label {
	font-size: .929em;
	white-space: nowrap;
	overflow: visible;
}

#frosch {					/* Für FF Win, unverständlich, da es ein input:hidden ist */
	display: none;
}

#anleitung, #notwendig, #fehler, div.versendet {
	padding: .5em 6px .357em;
	margin: 1em 0 0;
}

#fehler {
	color: #900;
	border-color: #ffc66d;
	background: #fff0da;
}

#fehler strong {
	color: #900;
}

div.versendet {
	color: #536b00;
	border-color: #7b9e00;
	background: #dbf970;
}

h2.versendet, div.versendet strong {
	color: #536b00;
	padding-left: 0;
	background: transparent;
	border: 0 none;
}

#anleitung p:last-child, #fehler p:last-child, div.versendet p:last-child {
	margin: 0;
}


/*	Navigation
––––––––––––––––––––––––– */

nav {
	width: 320px;
	position: absolute;
	top: 187px;
	left: 0;
}

nav h2 {
	position: absolute;
	left: -3000px;
	top: -1500px;
	width: 0px;
	height: 0px;
	overflow: hidden;
	display: inline;
}

/* Die Verschachtelung von "nav" und "nav > ul" garantiert die Position von "ul" bei fixed (durch jQuery produziert). */

nav > ul {					/* für IE 6 mit ".nav" per jQuery gelöst (".nav" befindet sich in "ie6-7.css") */
	width: 320px;
	position: absolute;
	top: 0;
	margin: 30px 0 0;
	background: #fff;
}

nav ul li {
	list-style: none;
	padding: .857em 40px .643em;
	background: url(/grafiken/nav-linie.png) 0 0 no-repeat;
}

nav > ul > li:first-child {
	background: #fff;
}

nav h3 {				/* wirkt bei ausgeschaltetem JS auf "nav h3", denen von jQuery keine "a" hinzugefügt wurde */
	font-size: 1.071em;
	color: #ff9b00;
	margin: 0;
	padding: 0;
}

#blog-aktuell h3 a {	/* wirkt bei ausgeschaltetem JS und wenn class="offen" von jQuery entfernt wurde */
	font-weight: bold;
	color: #ff9b00;
}

nav em {
	font-style: normal;
}

nav a {				/* hebt obige Definitionen wieder auf */
	font-size: 1em;
	font-weight: normal;
	color: #787672;
	border: 0 none;
}

nav h3 a {				/* hebt obige Definitionen wieder auf */
	font-size: .933em;
}

nav a:hover, nav a:focus, nav a:active, nav h3:hover, nav h3:focus, nav h3:active {
	color: #ff9b00;
}

nav a span {
	font-weight: bold;
	color: #ff9b00;
}

nav .offen {			/* class="offen" wird von jQuery hinzugefügt und entfernt */
	background-position: -400px 0;
}

nav .offen h3 a {
	font-size: 1em;
	color: #ff9b00;
	font-weight: bold;
	margin: 0 0 .333em;
}

nav li ul {
	margin: 4px 0 0 10px;
}

nav ul li ul li {
	line-height: 1.357;
	margin: 0;
	padding: .357em 0px;
	background: #fff;
}

nav .aktuell, nav .aktuell a, footer .aktuell {
	color: #33312d;
	font-weight: bold;
}


/*	Fussbereich
––––––––––––––––––––––––– */

footer {
	width: 960px;
	margin: 0 auto;
	padding: 0 0 3em;
	background: #fff;
}

footer p {
	font-size: .786em;		/* 11px */
	color: #898783;
	margin-left: 360px;
	padding-top: 1em;
	border-top: 1px solid #c3c1bd;
}

footer span {
	margin: auto 1em;
}

footer a[href="/agb"] + span, footer a[href="/impressum"] + span + abbr + span {
	position: absolute;
	left: -300em;
	top: -300em;
	width: 0px;
	height: 0px;
	display: inline;
	overflow: hidden;
}

footer a {
	color: #898783;
	border: 0 none;
}

footer a:hover, footer a:focus, footer a:active {
	color: #ff9b00;
}

footer a.feed {
	padding: .3em 0 .3em 22px;
	background: url(/grafiken/icon-feed-16.png) no-repeat 0 50%;
	margin-left: 6em;
}

footer abbr {
	font-size: .909em;		/* 10px */
}


/*	Clear
––––––––––––––––––––––––– */

#content:after, dl:after {
	content: "."; 
	height: 0; 
	clear: both; 
	display: block; 
	visibility: hidden;
}


/*	Slimbox 2.0.4
––––––––––––––––––––––––– */

#neueEbene {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #2a2825;
	cursor: pointer;
}

#bildBereich, #infoBereich {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.ladeGrafik {
	background: #fff url(/grafiken/slimbox/laden.gif) 50% 40% no-repeat;
}

#neuesBild {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

#linkVorher, #linkNachher {
	display: block;
	position: absolute;
	top: 0;
	width: 45%;
	border: 0 none;
	outline: 0 none;
}

#linkVorher {
	left: 0;
}

#linkVorher:hover {		/* #linkVorher:focus und #linkVorher:active funktionieren in Firefox und Opera nicht */
	background: transparent url(/grafiken/slimbox/zurueck.gif) 0 33% no-repeat;
}

#linkNachher {
	right: 0;
}

#linkNachher:hover {
	background: transparent url(/grafiken/slimbox/weiter.gif) 100% 33% no-repeat;
}

#textBereich {
	font-size: .857em;		/* 12px bei 14px */
	color: #544545;
	text-align: left;
	padding: 0 20px 10px;
}

#schliessLink {
	display: block;
	float: right;
	width: 21px;
	height: 25px;
	background: transparent url(/grafiken/slimbox/schliessen.gif) center no-repeat;
	margin: 5px 0;
	border: 0 none;
	outline: 0 none;
}

#bildLegende, #bilderAnzahl {
	margin-right: 36px;
}

#bildLegende {
	line-height: 1.333;
}

#bilderAnzahl {
	font-weight: bold;
	padding-top: .667em;
}

}	/* Ende screen */



@media print {

/*	Nicht drucken
––––––––––––––––––––––––– */

.skip, .links-intern, #kursliste, #kursanmeldung, img, a.gross, .weiter, .skype img, #blog-nav, nav, footer {
	display: none;
}


/*	Drucken
––––––––––––––––––––––––– */

body {
	font-size: 10pt;
	line-height: 15pt;
	color: #000;
	text-align: left;
	margin: 15mm 15mm 20mm 20mm;
	background: #fff;
}

h1 {
	font-size: 14pt;
	line-height: 18pt;
	color: #acaaa6;
	font-weight: normal;
	width: 130mm;
	margin-bottom: 12pt;
}

h1 em {
	font-style: normal;
	color: #ff9b00;
}

h2, h3, h4 {
	font-size: 10pt;
	line-height: 14pt;
	font-style: normal;
	color: #898783;
	padding: 9pt 0 0;
	margin: 0 0 6pt;
}

p, ul, ol {
	orphans: 3;
	widows: 3;
	margin-bottom: 9pt;
}

.spruch {
	margin-bottom: 10mm;
}

.spruch p {
	font-size: 9pt;
	line-height: 14pt;
	font-style: italic;
	color: #898783;
}

li {
	margin-left: 5mm;
}

#mira-neumann img {
	display: block;
	width: 120px;
	height: 120px;
	float: left;
	margin: 2mm 6mm 5mm 0;
}

a { 
	color: #33312d;
}

a:after { 
	content: "";
}

a[href^='http://'] {
	font-size: 9pt;
	font-weight: bold;
	color: #565450;
}

a[href^='http://']:after { 
	content: " ("attr(href)")";
	font-size: 9pt;
	font-weight: normal;
	color: #33312d;
}

a[href^='http://miramicus'] {
	font-size: 10pt;
	font-weight: normal;
	color: #33312d;
}

a[href^='http://miramicus']:after { 
	content: "";
}

#content abbr, #content .versalien {
	font-size: 9pt;
}

abbr[title]:after {
	content: " ("attr(title)")";
}


.eng, .enger {
	word-spacing: -2pt;
}

.weiter {
	word-spacing: 3mm;
}


/*	Kontakt
––––––––––––––––––––––––––––––– */

.vcard {
	font-style: normal;
	margin-bottom: 24pt;
}

.vcard a {
	font-weight: normal;
	color: #000;
}

.org {
	font-size: 11pt;
	font-weight: bold;
}

.street-address, .country-name {
	display: block;
}

.country-name {
	margin-top: 9pt;
}

#kontakt abbr[title]:after {
	content: "";
}

.tel:before {
	content: "Telefon: ";
}

.email:before {
	content: "eMail: ";
}

.skype:before {
	content: "Skype: ";
}

.url:before {
	content: "Internet: ";
	color: #000;
}

}	/* Ende print */