/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *


 */

/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/

/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/


:not(.h-feed) .h-event {
	margin-top: 2em;
}

.h-event .event-date {
	border-radius: 5px;
	border: 1px solid #aaa;
	text-align: center;
	padding: 0.7em;
	box-shadow: 0px 0px 5px black;
	box-sizing: border-box;
	font-weight: normal;
	float: right;
	background: #eee;
	color: black;
	margin: 1em;
}

.h-event .header-image .event-date a {
    color: gray;
    font-style: italic;
}

.h-event .event-date span {
	display: block;
}

.h-event .header-image {
	min-height: 180px;
	margin: 0 -80px;
	max-width: none;
	background-position: center center;
	background-size: cover;
	box-shadow: inset 0 0 50px black;
	background-color: #333;
	color: white;
}

.h-event .header-image header {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.h-event .header-image .p-name {
	color: white;
	text-shadow: 2px 1px 1px black;
	font-size: 2em;
	padding: 0.5em 0;
}

.h-event .header-image a {
	color: white;
}

.h-feed .h-event {
	clear: both;
	margin-bottom: 1em;
}

.h-feed .h-event .p-name {
	padding: 0;
	line-height: 0.9;
	margin: 0;
}

.h-feed .h-event .event-date {
	margin: 0;
}

.h-feed .h-event .header-image {
	box-sizing: border-box;
	padding: 1em;
}

.h-feed .future > h2, .h-feed .past > h2 {
	font-size: 60px;
}

.h-feed .future {
	padding-bottom: 2em;
}

.h-feed .past {
	opacity: 0.5;
}

#welcome #whats-new > article.h-event .header-image {
	margin: 0;
	padding: 0 1em;
	line-height: 0.9;
}

@media only screen and (max-width: 1024px) {
	.h-event .header-image {
		margin-left: -20px;
		margin-right: -20px;
		padding: 0 20px;
		min-height: 120px
	}

	.h-feed .h-event .header-image {
		margin: 0;
	}
}
body {
	font-family: 'Gill Sans', sans-serif; 
	font-weight: lighter; 
	line-height: 1.3em; 
	font-size: 22px; 
	padding: 20px 80px; 
	background: white; 
	color: rgb(0, 0, 100);
	margin: 0 auto;
}

@media screen and (min-width: 481px) {
	body { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD8AAABACAIAAAAiSTicAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAEqtJREFUeNq8mklsG%2BcVx2fI4Sou2iUv8qYocGJntdOkiAPHTYrGbhLEQIICvfbQQ3sI2qJFgRx7bQv0FiCnAu2pBXrtMUAvLrIVjhM0qWO7XiVZkkWRFEmRnP7eezPDISXHko30AyENhzPf95b%2F%2B7%2F3Le5fTp3KTUx02%2B32%2Bnp2ZKSzseE4TjKV2qjV8tPTyXS6Pj%2FfWlvrNBrNO3e6nQ5P%2Bny63U6zyTUfx5fmuq7Dh%2Bb78td1k5kMn0y5vOvb337ipz8dPXzYCVvt1q2%2FnjpVX1wsHzq0%2F3vfm3399XO%2F%2Bc38Bx9MPvnkxJNPLn%2F%2BefX69Xaj4Xc69Ox0u8ls1stmRYxmM5FOIx5ynv7Tn5Lfz%2BddHZWfkZjP0K5dbiLRXF3lZaTvbmx0m02%2BJlIpXksNDfHhWoTudvlLR%2FTA645%2BdVQNaYkEHzrJjIzsfeEFbBRJny4UEGL%2B3LnW6qoomUqli0WxSKtlNmrXatjFy%2BUwaKpQSOVyiUyGB6TDbrdx%2B%2Fbw7OzxX%2F4yedp1kU%2BeGx1Nl0r0lfA8npCb2Wwqn0ddDE%2FvufFxDIkBxKKlUlc9wIt8RWh7keFR2HpASpTkFX69c%2FFiYe%2FeoelpbjaWl1uVCv0v%2FutfyIrP165e5UnU4%2B9Gtbq%2BuJhIJvOTk7nRUfpPFYt03m21MsPD3EESHnjiJz%2BZPHYsecbz0BW5eTk%2FPi4W8n3pHUjgf3QFFYkE1iru2zf%2B%2BOPten3tyhVcsbG2hn2RiU7pmse8TMbL55FerC7u8LjABNz01MN0wq945qPf%2Fvbff%2F7z2n%2F%2Fy0CIS58IhJ4jc3N4Q8zfbotRVABczV%2F0Qbbhubnmykp2bOypt9%2Fm%2BeT3s1lMhS35gupgiJ%2Bxd2HPHgYW62azMmomg%2B2zw8O7n38es%2BEN3sIw3OQBwJafmNio1xlGhuSTTDIeX5EDuQWBrVZ9YYGvGA%2BhCYZDr7229%2BRJbLx2%2BTIeYNzVr75iRPoktNZv32YgAycCtKpVtF354oul8%2Bcf%2B%2FGP9738sqCdn4EmAwMJ5GAAzMBgxb17JQIVAILwdptIwk61%2BXmB2dgYcBQRPQ%2BdZ994Y%2FnCBcazUJa4T6e5RiawZBACHlyDz7GjR0XoXbskVADS0hI%2FLXz4IZ1jde4wdH5qqnLpEoELdBFP7qskUAgwOXDmjMVP8rsgNZWygFi9eBH9LNoABvBgeOTD8HTB03TnKNugD%2FFkiK%2FduIHm40ePSkik0%2FSOi4AKHsecGB5o4VguEAK7YmwAIBDSxpPcvPb%2B%2B%2FhTgNpuoyHPM0rLIrjRQEP0F%2B%2FNzx%2F%2B4Q%2Fn3nwzkP6dX%2F3qzhdfcBfwYUuJuWSSQMG69OtvbGQJ1uFhUSOZdJRJzPDGCXyEdtbXGePA6dOF3bvRIaE4QQ36ND6QAMjl0uVybmyMUUv790fS0%2BBNhq7fukWfGAth7vznP9CODKfww3YWG8MPPXTyd79j9ED63%2F%2Fxj5%2F84Q8MxkPG0AIGQnljA%2BhjYAkGXFGvc5Oxh3bv5ub6woJo67pTx48jk7BEOs3z2Aw78ff4L34BNIM4xkWdDtKbRYszM6OPPIJYTqwRrzwJ9sAPbwn%2FeJ54JpOR0TWyIatnfv1rAi96K3n8%2FPkKaHFdcoxQB2E6NMQFtpx44gmsIhyiHdEAA8wj8aTgEWysrnYV2fxdunABvKGDoGVkBD8wHuABwRgPgyEf4CG0GIVf4%2BZHw%2FLsLJqDXskwSKJ5EJ0ldn2%2FsbIyffz4s%2B%2B8Y1wUvHXixg0gYaEt6SmbFfel06SD8oEDkr8qFaTMTU4iB9LAGAnlRHgAUHY0Ls2V5YMHRbJO5%2BCZM0gJIPnLqMJO%2BTw%2BJAR5HckgfmiKbuPmt0QBq0APSIw8o48%2Byk1AW7t%2BHWp%2B6d138XzfK6dVdEnImu3RWFTX9Iko1atXRWKywegoIsJ0kjLICWSzapUPASegr9cZRnSgh24XxbiD6HxQhjhBaD48ADUXZmZKBw9Ktm80qteuIZzITfJ2HJ5EN%2FgHZAKt6WeegVgv%2Fu1vmOmhs2fn3nrL6W%2FJVzSz9OoTNOGy3QboQnbAg6zueZXLl%2FEpwtE7aHGUQ7EoY7sKG56%2F8%2BWXQ1NT088%2BW%2FnqK8lNpRIMZsmLgEElbA8fpBQ%2F8AmvY1HSE1bAKMIIngcsQRpDYyk6vP7%2B%2B%2FTw8A9%2BcOznPxeG6G%2Be2NvkNnZHE0qxbhex6DSp9QxwNGiiW%2B3mTSSQIkL93tFw50WoBmsBsInHH0eHypUrOJCSS%2Bq8xcWaVl0UariCMAOEsAdAJ4gZkQd8LcWQGIWpDskqMA9KIt70c89hdYjL2dS8QGJNSYEmVHbcabXADM6lCJOSgzpiagpzilgaGAAas0mBQBWghEiWmfnOd6AgHI0mFJLgiri%2F8ve%2F0wkcgByY89Y%2F%2F4n5eYALQg4oYykciyEwDdGy9NlnXFiVgWyAZ%2FKpp5ytmhdhxvBjf6VKQxnfJ2oZGCYBxwzJX0eDRKxC4MKAans%2BJKCpY8cklAm4bhe8ofmaqippJJOBrIhUeoBk%2BUqdiHVIJvRGmC589JGU4pVKU4FEJ0llWy4ArRV%2FW9leizDJtYZ%2BFd3KFdFBC8mmJjwQmVX4IjQX9J7XqpCfcOueEydw%2Fe3z59eXlnAC0jMqcKrCaRTAhcL8hx%2BCCp7ElsgNH%2BBJ7iP30qefVrTUscJGRCJJkRDghrW1W%2BfOCYa3RI79i4veQxEd2VeYkaKlXpdUMjS067nnDp4%2BvUpsNRpglxoBqCABJiRfUk6BNCSWlKfVESG7%2B8QJUISIa9eu3f70U2wMVOA0KeiXlyVJ4VVlAvOklQwtqqZO5%2Bmf%2FWxL0GvUYmadHAU6hPwTBrJ4RnCs%2FrHpC1mJOMauEAUWvTEzw6%2Bk2w3lTcIDb3Tu3JHcPDFBcEuBQO09Pn79H%2F%2BgQkRtlGxWKsY2Nk5X66hAGDWZlFXr66RnWN%2B5S%2FPilo9k7s3x1AN23dVJIwMwc1v%2B7DObl1iiAKCgqKMpBq1IW0jDi8DGV82Z9RmHyHQELm42UTWY%2BMWCTf6GWJBoSaUIJ5nf3E36AOW8r2Z2ekb3Ax1CRrJODVR0LUlNiyqpQ2q11WqVm6jUunCBfGnVr8CXFNFuQ1BCvkw4NdytLDczB%2FM9GzecExsTIjckFtVkW9s%2BCtNI9F4LuwvCQGceBLMTzbyUHM1LXEhxYvCz5K1lqYhCQlBxe6Yx0blJkgqrVycMP%2BsZ4MGzRNHXIieGFnOfa8Mbh0aGsWFj6ArCOgw1fm0rgQ70GVkhKElCbNjrViM4lmp83zTxtSY98qMfMRd17t48d0DogYEjLjJlQlf0LiKV8IhFXhhzQZ%2BhMj25jY5Dd%2FXUiyfNTof8MPPiiwWd4t2tJeIgiYO7F0xxOEWosPFiykTBHTQFbp%2FfAgC6Vg5GLbJC9KvQg%2BtSSjBj3DJJ9Wcrg3X%2FMH0uDouI4H68qgsXcKLrQOd4DgmH6EHOGCLeIjWU9Q%2B88srL770XL%2BW3tn1k4GAZY6DmieWywTtxoe0TgnDz634UMGEsOQNdRU9SUY%2BM7Dl5Enb6esP3kNOH%2BHjNY9EW%2Fo2cG%2BHE6X8xDsOBzB0fIioN4yD0NXIIYsoh5L6n6D3p%2FRiZRNcD%2Fh2M6ThyBhi23xubYdmTOE7zSJNMUhTMnj07c%2BoUc8t7Sj%2BI%2B2A9dauL3nWcSWNS9jFS2Kc9n4iHb%2BjAiDeDO0xoyuWxI0cOvfba2NGjzjZaosdfAwbuR20Eg4gceprEwjHwVYgTS0ButC4bK8IHvapz%2FMmnnz70%2BuulAwec7TVvS9T3iuQwmvvGs6%2F9%2FomvHvf0j7BnIAmr8b5KRGyYIFJHDh%2BmLph56aXsNjDTz%2Fdxao%2BgEtkyVvfFk0tfZojwEIe4Asbo3415pi8MKMbyeUQ%2F9OqrwEaWce7CBFtJH2E37oNQmjhp9GX%2BCLgG6P4qJbK6H1PG74%2FRqE8itTgzM%2F7YYyAHurTib7vIiXoJZlhhvRngJ46ZuF23zFkx9Xopwq5Dgu%2Bxpy6R50ZGmINTzKAAJMOknunBYCK7Z53Ty38xPukFpe3t9PNGL8var%2FGbMdbvW27Rnm1pXxZICoWRhx%2Be%2Bta3ADoTXII1UypR%2BjNj3Lb0uho1QDX%2BQIW4mYushrENEluKG4BWVJDF4tWWVF3dFyElpYvFvM7Ts3NzTGhAv03inG03L6KUXlzGUmzEx4PYCKM1EC6c3Pj9FXxkbMMJEYmIzIyzuoEztGcPf2WF2XVtvQ3FsrrIvAPb2wrmgN%2FFIeYWo85%2BtukL3xDfvfKmH4SOVv%2BUXCldT5Z1RV1VN8XkDjqMjAhgts02gfSyoWUT1sj8asBgDydEdo8cQyaJLB3PQQakSG77ULow1eCCuJQCJpstHTyIyWWHIp%2BX9ZXRUVvD2ZHhA%2BSggAknyyk2U45cEYvXOJv4sYQq86NokmEg0U0yoGLLwraP0tFNP5nLp9OyQuq6ubExNBmansbJsiKi3L8z6aMw9cOIET3ClQlfV9Ti9aalRjesHcS6NrWLjG2FDShPpyEWdBC7ttuF3btlFbZQMAVkuaZazeoCNzokWi2mIwnP25n0trdqixnxKiqYL0dVUJytTUkFNBNC5LNdrWh6bruF5hBZMCyVkDihy9yyK7FnT%2FX6dTFNu91cWcEh8I9UxToXaSwvW0hsS3pPM5yj6919UA5X9Ht5imvl1mgeLes57bbslSOrLo24uoUYxYxdA%2Bvy7GxzedkWn2VNc2YGVUE8iJLNJc8zzNgBgh3YPlMuw7i9aahtooSyxjHjxoqwCCSuLs%2FbrEJ2F%2FVAgYAOW%2BjiKw9v1Gr1mzeJSFnFL5f5KsEK8%2FC1VCLYWpWKrHWWSnSFE3YgvcQ7sxiIoVAQvSFP3b0KwKBJXkJCw1pgpssHAiHMrKHp6mZRL2GpbrJ7p7g3RyVtx1wtDdB5EvzgCtmjrtVsZ9dY%2F2vma1tIX9y%2Fv7O%2BLpthi4tRqSPkE1shAh4GbtkRSiZlE0rDq61HGKxIDKJC7c1bBgCEhsuNLmWhs1ZDc5IUyOYn3uVi9JFHZIFNN1vvOQ3fhPtsVtb5h4awPbQlG7dYDnSmUrbTLftwegwhOPiRSglOkJ7HUinZ2OGmzkFl%2F4NfdUcoVyrZbgoGxgOyM6f3BUjVamn%2FfluH6ujmJKEcbOrvsHloL4de9DAH4wEkTLJuWz21WrNSQb0urFeriZIky1RK9tAbDXwSbcfKEjl66l4vL1JsoS0922abeUNOmUxOykJnpSJ7GVqluSEv7dTqgfQ4rnbrlnQ3Po4h4WCxiufBJJ2hIQxve%2BhRPsLwwaKuha8eVeiq4eUwBiGrAdPV%2FaLRI0cMhwl9xVMgSb2gzMNXSoadZqg%2B6amnZeeoVqtcuYJAcBngcYaHAQNkLGAIUREdn%2BAa24ulk8mOcotkMGU9cZSGuIEbQoS%2FrQSQhfxSyfgxodnKTi%2FdB2B60tuxIduiqS8smByMLWdSdO8WJ9jev%2BwQ6hZ5a3VV6sGQhez8jEDOttp17dtQtHThAlICGNs9TmrBk9HjGeCT1xc%2B%2Fnhkbu7%2BYKO2n5627cjxo0exjZwl8f20JoECA4%2BPywGBlRU5o5TPw0uQBu4SaOlhFpzm6kEd7sj5Co1jOROgRYEs63U6dBLV98Zp3DHHBrXt%2FTaxH6NKytCdHNmh%2F%2FJLOdUAKys%2FEBW2KMevRLOZzfYd7CgXLwanyppNOcmiu5887OvOoTCj0jkhTmlpZy3EG%2B02wW0sFG1X7dj2yM3YwTfGy%2BejbWsUE1zatnguV9y3D0dRopAfgrMtaK9OMNtbEIMcegDoaG677dwhKwEYbsL6rh74SdkpLxsWcIb1xY4rZDs2BHCRUoZsNmEe4XXEyueLmtWt1rWDb81SSY5MFIuoQajIIRRNUuK9chnUyVm0XM7XrSv6FGSjLVrBpJqV03qioSfEpi38HSAn%2Fh0zyAmrSgWusIqA4WWtottd%2FOSTxtLS8NycFc9y6GJtTU6vKMOmNT1xATwcPSsomaTVsn1PKy3tnKEcjQEwDwD3u0uvgLY9WgKOgJZisFhEn8rlywSA1EW1mk2g5JhIvb5B2Kh8ckLM96m9yNxApTAzg7YEiWklG5c7qWHuR%2FqBtn77ttVPUQzYiUOrKzeUZOzYFBe%2BHo21KBLgaVGEFWz3xs57BvvvYdXwgO0ecxkMKYPRwvFkZpTNokCnWgVdFHlyAGx0dPXSJSKS%2BKEQCLaXh4dxSO3GDTt0EBQFenj1QfLrDmy%2FeVMB2Jj97MAVssr5F9dNaeFJQkDQ4dnZ2s2bPInV7XytVDLb2E34hqXfpAyJrKNVgxwlcF2ZpKqscqihVrMK2fnG2v1LL9UOBZxOCG1aOLDC7Hzz7cFsv6mBe%2Bj%2F%2FyM67X8CDACeGksKRTqkWQAAAABJRU5ErkJggg%3D%3D) top left no-repeat; }
}

body > header { text-align: right; color: #aaa; max-width: 800px !important; }
body > header a { color: #aaa; }
body > header + * { margin-top: 2em; }
footer { margin: 2em 0 0 0; display: block; clear: both; }

body > header,
article > *:not(.e-content), 
article .e-content > *:not(.big-img),
.h-feed > header {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.big-img { text-align: center; }

a img { border: 0; }
pre, .beispiel, code { font-family: 'Droid Sans Mono', monospace; overflow-x: auto; font-size: 16px; line-height: 1.3; }
a { color: rgb(66, 63, 55); }
blockquote { font-style: italic; color: rgb(87, 83, 74); }

h1, h2, h3, h4 { color: rgb(66, 63, 55); font-weight: normal; }
h1 a, h2 a, h3 a { text-decoration: none; }

.hidden { display: none; }
.notice { border: 1px solid green; background: #B7FFA8; padding: 0.5em 1em; }
.error { border: 1px solid red; background: #FCC0C0; padding: 0.5em 1em; }
.feedlink { float: right; font-size: 0.7em; font-weight: lighter; }
.feedlink a { text-decoration: none; }
.feedlink a:before { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABA5JREFUeNqMlF1Mm2UUx59%2BQ1vagQxtQSihcShscTOxJCVceIFxQQOGSCDRMFi40AsvvfLGIAkhcZKZccMdHwnhAgwCcRdcIMaJZB9x4FpAQGyttmZIBvTrbf2dpiSbGvVNTs77POec%2F%2Fl%2BdEajcVGn0zmUUtFsNhuCb8C%2Fg9%2BDEsgUZyX89Hv8%2F6%2Bfzul0irELJS2TyRg0TTPA4%2FAt%2BE3AppHv%2Fm9Al8v1jcFgeFqv16ckEoBUOp3WpVIpM2ThPwbNoHsDivwXoIEI%2BwoKCooKCwszZrNZmUymHFEKDUrgzAxAA84uQ79j8%2BBfAaurq9%2FGyEpk%2Bng8bpa0AcwCngVQIctCCTKQOrcgF%2F4VlP1HwL29vVRHR8d6S0tLoK6u7leAtFgsZjs4OLBKpAIMoABrRJbGxg%2BoB74Epf9Ww5WVlVxN3G63xePxnOXOA2D9xMREw%2Fj4%2BKVwOOyw2WxJMsgmk0mVSCQUmZyBT1OC99HXngCErpBO2uFwbNbU1Gw0Nzcf9vT0KK%2FX%2B1w0Gm3q7%2B9%2FY3p6%2BrzFYknjOPMYqJP%2F64B%2B%2FESINOR7GhKF9qjZGlfXaZSvr69P7e7u6jDwjY6O3igvL9%2BqqKjYqqqqCjAZgZKSkk2r1bpPWS6fNlLIwOU7eDZRoxSAUrcLeH5zdXXVOzY2dluMu7u77wPkmJube0FGi4yy%2BaboqedF7mSsTnJNAfAqYHYZE3gG8KSkxvnFo6OjV2dmZu5WVlb%2B0NXVdZ%2ByuObn55%2BXxokxQBr0DKByXM4BMrzvUXCngAGSwfvp4MqoPIXBa7Ozs98S4WZvb%2B%2BD7e3tS2tra25qegqahs4B%2BgXHQ8Pg4OAFakON4%2FpIJGKXNEg7k98IaYQdZf%2FCwsJ8W1vbz62trQ8nJydfIXqTpJ7%2FitF5iMkt8VANvczFW4zJtdra2js0aKe0tDRQXFwcKCoqCnD%2BBeVPfT6f6BsGBgY%2Bw%2Bm%2B6NAc0dmluTe5M6v6%2Bnpre3u7WlpaEmV3KBS60tjY%2BDV12hFAOh5gDjdJcQfQl6amphRz2lhWVhaUURMdeBCnPwJ4UTL7EvocamVb1OHhoRHQDlbyHkpbKAfsdnuACMLofOL3%2B8WxmdRnqfueOMxnEQbwqsLzKoIIJGl92NTUlEuLkfmI808CJiQRoHMLfobtUSMjIx8gDwlYXh4iq2t6eQehYwr8CIN3l5eXXx8aGtI6OzvH2ZYYW2GU2ZO9lWfu5OTk3OLioiLSO7Jh8tzl5TJCz0qbjDLYMkJwPbx7eHgYXX2woaFhg7Gy0jATJMA25N5gMKjo8r6sI59F5PJa4fCskdr8JosvD6wYsSUFUCF7fMQ43aYu50nlkUSB3I6RcX19XdGoA%2Bnu8fGxTV4isQXjjz8FGACHTi4%2BDF8uMgAAAABJRU5ErkJggg%3D%3D); }

header h1 { font-size: 60px; font-weight: normal; text-shadow: 2px 1px 1px #aaa; margin: 10px 0; line-height: 0.9; }
header h1:hover { text-shadow: 3px 2px 0 #aaa; }
header h2 { font-size: 21px; font-weight: normal; text-align: left; margin: -0.4em 0 0 10px; padding: 0; }
header a { text-decoration: none; }
article article header a { text-decoration: underline; }

p.details { margin: 10px 0; display: block; font-style: normal; font-style: italic; color: rgb(66, 63, 55); float:left; }
aside { font-size: 26px; text-align: right; color: rgb(66, 63, 55); text-shadow: 1px 0 0 #aaa; display: block; margin: 10px 0 2em 10px; padding-left: 30px; }

body > article { margin-bottom: 80px; display: block; }

body > article > aside + p:first-letter:not(.update) { font-size: 50px; float: left; line-height: 45px; padding: 0.1em 0.2em 0 0;  font-style: normal; text-shadow: 2px 1px 1px #aaa; color: rgb(66, 63, 55); }

.update { color: red; }

.fr { float: right; padding: 0 0 1em 1em; }
.fl { float: left; padding: 0 1em 1em 0; }
.center { text-align: center; }
article img:not(.noborder), article iframe, article canvas, .pods .big-img img {
	max-width: 100%; padding: 3px; border: 1px solid #aaa;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-moz-box-shadow: 3px 3px 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
img.noborder, video { max-width: 100%; }

input, textarea, button { font-size: 15px; font-family: 'Gill Sans', 'Georgia', sans-serif; border: 1px solid #aaa; background: transparent; padding: 0 5px;
	border-radius: 10px;
	-moz-border-radius: 10px;
}
input[type=submit], button {
	border-radius: 3px;
	-moz-border-radius: 3px;
	padding: 5px 10px;
	background: #efefef;
}
textarea { width: 98%; background: transparent; }

.u-photo { vertical-align: text-bottom; border-radius: 3px; }

#index table { margin-top: 2em; border-collapse: collapse; }
#index table tbody td { vertical-align: top; }
table thead th, table tbody td { border-bottom: 1px solid #ddd; padding: 0.3em 1em 0.6em 0; text-align: left; }
table tbody tr:last-child td { border-bottom: none; }
table tfoot td { border-top: 2px solid #ddd; }
#index table tr th:last-child, #index table tr td:last-child { width: 3em; padding-right: 0; }
#index table th img { padding: 0 0 0 1em; }
#index table th a { text-decoration: none; }
#index table p { margin: 0; padding: 0; }
#index table h2 { font-size: 1em; margin: 0; padding: 0; font-weight: lighter; }
#index table h2 a { text-decoration: underline; }
#index table .mentions { font-size: 0.8em; font-style: italic; white-space: nowrap; }

#comments { clear: both; }

#comments h2 { padding-top: 1em; }

#welcome #about { margin-top: 0; }

.listen { margin-top: 2em; max-width: 640px; margin-left: auto; margin-right: auto; }
.listen > header { margin-bottom: 0.5em; font-size: 1.1em; font-weight: normal; }
.listen > header img { float: left; margin-right: 20px; max-width: 100px; }
.listen > header .playing-now { float: none; vertical-align: middle; margin: 0; }
.listen > .e-content { margin-left: 120px; word-wrap: break-word; }
.listen > .e-content table { margin-left: 0; border-collapse: collapse; }
.listen th { text-align: left; font-weight: lighter; }
.listen td { text-align: left; border: none; padding: 0 0 0 0.5em; font-weight: normal; }
.listen > header a.date:hover { text-decoration: underline; }

.person_tag .field { float: left; margin-right: 2em; }
.person_tag, .person_tag + .field { clear: both; }

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

@media only screen and (max-device-width: 480px) {
	.listen > header img { max-width: 50px; padding-bottom: 1em; }
	.listen > .e-content, .listen .in-reply-to { margin-left: 0; }
}


/* iPhone */
@media only screen and (max-width: 1024px) { 
	body { background: white; padding: 5px 20px; font-size: 1.1em; }
	header h1 { font-size: 30px; margin-top: 0; padding-top: 0; }
	header h2 { font-size: 17px; }
	p.details { margin-left: 0; }
	aside { font-size: 16px; margin-right: 0; }
	article > section h2 { margin-left: 0; }
	article > section { padding: 0; }
	canvas#imageView { display: none; }
}


/* from rails TODO: fix this */

.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}

/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/

/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/

.note { margin-top: 2em; max-width: 640px; margin-left: auto; margin-right: auto; }
.note > header { margin-bottom: 0.5em; font-size: 1.1em; font-weight: normal; }
.note > header img { float: left; margin-right: 20px; max-width: 100px; }
.note > .e-content, .note .in-reply-to { margin-left: 120px; word-wrap: break-word; }
.note > .e-content p:first-child { margin-top: 0; }
.note > header a.date:hover { text-decoration: underline; }
.note > .in-reply-to { font-size: 0.8em; font-style: italic; }

.note > #persontags { clear: both; padding-top: 1em; }

.note > #media-links { clear: both; padding-top: 1em; }
.note > #media-links img { max-width: 100%; image-orientation: from-image; }

@media only screen and (max-device-width: 480px) {
	.note > header img { max-width: 50px; padding-bottom: 1em; }
	.note > .e-content, .note .in-reply-to { margin-left: 0; }
}

.h-feed > .note .u-photo { opacity: 0.2; }
.h-feed > .note:first-of-type .u-photo { opacity: 1; }
/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/

.people table { display: block; }
/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/


.h-as-photo > header { margin-top: 3em; }
.h-as-photo .description { text-align: center; font-style: italic; }
.h-as-photo .big-img img { max-height: 80vh; }

@media screen and (max-width: 1980px) {
	.h-as-photo .big-img {
		margin-left: -80px;
		margin-right: -80px;
		text-align: center;
	}
	.h-as-photo .big-img img {
		border: 0;
		padding: 0;
		margin: 0;
		border-radius: 0;
	}
}

@media only screen and (max-width: 1024px) {
	.h-as-photo .big-img {
		margin-left: -20px;
		margin-right: -20px;
	}
}

.exif { text-align: right; margin-top: 2em; }
.exif dt { font-weight: normal; float: left; }
.exif dt:after { content: ": "; padding-right: 0.5em; }
.exif dd { margin: 0; padding: 0;  }
.exif .geo { display: none; }
.exif .map { margin-top: 1em; }

.h-as-photo #media-links { margin-top: 2em; }
.h-as-photo .previousnext a { text-decoration: none; font-weight: bold; color: #ddd; font-size: 2em; }
.h-as-photo .previousnext .previous:before { content: "<"; vertical-align: top; padding-right: 0.1em }
.h-as-photo .previousnext .next:after { content: ">"; padding-left: 0.1em; }
.h-as-photo .webmention-form { padding-bottom: 2em; }
.h-as-photo .previousnext { margin-top: 2em; }
.h-as-photo .previousnext img { width: 100px; height: 100px; }

#photo_photo { display: block; height: 100px; border: 0; }

.h-feed .h-as-photo { display: inline; }
.h-feed .photo-index { clear: both; text-align: center; margin-top: 2em; }
.h-feed .photo-index img.lazy { display: none; }
.h-feed .photo-index img { vertical-align: middle; width: 100px; height: 100px; }
.h-feed .photo-index .e-content { position: relative; display: inline-block; margin: 0 0.5em 0.5em 0; }
.h-feed .photo-index .e-content p {
	position: absolute;
	display: none;
	background: white;
	z-index: 2;
	padding: 0.5em;
	border-radius: 5px;
	margin: 0.5em 0 0 -2em;
	min-width: 7.8em;
	box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);
}
.h-feed .photo-index .e-content:hover p { display: block; }
/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/


.h-as-podcast .photo { clear: both; }
.h-as-podcast .audio { text-align: center; display: block; width: 100%; }
.h-as-podcast .photo img { max-height: 60vh; }
.h-feed header h1 { line-height: 1; }
.h-feed .h-as-podcast, #welcome .h-feed .h-as-podcast { margin-top: 2em; max-width: 640px; margin-left: auto; margin-right: auto; }
.h-feed .h-as-podcast img, #welcome .h-as-podcast img { float: left; margin: 0 1em 1em 0; }
.h-feed .h-as-podcast h2, #welcome .h-as-podcast h2 { margin: 0; padding: 0; line-height: 1.1; }
.h-feed .h-as-podcast .date, #welcome .h-as-podcast .date { margin: 0; padding: 0; }
.h-feed.pods .big-img img { max-width: 60vh; }
.h-feed.pods .big-img { margin-bottom: 4em; }
.h-feed .h-as-podcast.future { opacity: 0.5; }
article.h-entry {
	margin-top: 2em;
}
/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/


.onoff {
    text-align: center;
}

    .onoff .button {
      border-radius: 5px;
      border: 1px solid black;
      position: relative;
      width: 50%;
      height: 100px;
      display: inline-block;
      background: #ddd;
      vertical-align: middle;
    }
    .onoff .button span {
      position: absolute;
      border: 1px solid #aaa;
      width: 50%;
      display: inline-block;
      border-radius: 5px;
      background: gray;
      height: 98px;
      left: 0;
    }
    .onoff .button.on span {
      left: 49%;
      left: calc(50% - 2px)
    }
    .onoff .button.active span {
      background: green;
    }
    .onoff strong {
      vertical-align: middle;
      font-size: 42px;
      font-weight: lighter
    }

.swierczyniec .loader {
    visibility: hidden;
    text-align: center;
}

.swierczyniec .loader.visible {
    visibility: visible;
}
.p-comment { clear: both; margin-bottom: 1.5em; }
.p-comment .avatar { float: left; margin-right: 20px; }
.p-comment h3, .p-comment .e-content { font-size: 1em; margin: 0 0 0 68px; padding: 0; }
.p-comment .e-content { font-weight: inherit; }

.p-name { margin-bottom: 0; padding-bottom: 0; }
.p-name + .e-content { padding-top: 0; margin-top: 0; }

.webmention-form {
	color: black;
	font-size: 0.75em;
	margin-top: 4em;
	line-height: 1em;
}
.webmention-form p { margin: 0; padding: 0 0 0.5em 0; }
.webmention-form input {
	width: 50%;
	padding: 0.4em;
	border-radius: 3px;
}
#welcome {
	text-align: center;
}

#welcome > section > header > h1 {
	font-size: 1.6em;
	padding-left: 5px;
	padding-bottom: 0.3em;
}

#welcome section {
	text-align: left;
	display: inline-block;
	width: 30%;
	vertical-align: top;
	padding: 0 3% 0 0;
}

#welcome #whats-new {
	width: 60%;
	padding-right: 0;
}

#welcome #whats-new .photo {
    text-align: center;
}

@media only screen and (max-width: 800px) { 
	#welcome section {
		width: auto;
		min-width: auto;
		display: block;
		padding-right: 0;
	}

	#welcome #whats-new {
		width: auto;
	}
}

#welcome section ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

#welcome li {
	background: #efefef;
	border-radius: 5px;
	margin-bottom: 1em;
	padding: 1em;
}

#welcome header h2 {
	margin: 0;
}

#welcome header .feedlink {
	margin: 0;
	padding-right: 5px;
}

#welcome .note {
	margin-top: 1em;
}

#welcome .h-as-photo .photo {
	margin-bottom: 0;
}

#welcome .h-as-photo .description {
	margin-top: 0;
}

#welcome .h-as-article h1 {
	font-size: 2.2em;
}

#welcome .h-as-article h1 a {
	text-decoration: none;
}

#welcome #whats-new > article {
	margin: 0 0 3em 0;
}

#welcome article header a {
	text-decoration: none;
}