/* style input-placeholder text */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #555;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #555;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #555;
}
:-moz-placeholder { /* Firefox 18- */
  color: #555;
}


/* stuff for the 'welcome widget' (horizontal drag, etc.) */
.drag {	/* a draggable area's 'containment' div */
	overflow-x: auto; /* show scrollbar */
	overflow-y: hidden;
	margin-bottom: 0 !important; /* this needs important, as it's usually used alongside .blue - and .blue's margin-bottom would take precendence otherwise */
}
.dragx { /* this div grows horizontally */
	line-height: 1.1;
	white-space: nowrap;
	padding-bottom: 4px;
}
.dragblock { /* may be imgs or a-hrefs; these inline-blocks don't wrap thanks to its parent's white-space:nowrap, thus arrange themenselves one next to another */
	display: inline-block;
	margin-right: 5px;
}
.arrow {
	position: absolute;
	right: 0;
	margin-top: 30px;
	z-index: 5;
	vertical-align: bottom;
	padding: 8px;
	background: #357;
	color: #ccc;
	opacity: 0.8;
	border: 1px solid #246;
}
.arrow:hover {
	width: 36px;
	transition: all 0.2s linear 200ms;
}


/* styles for the login-logout dropdown menu */
.dropdown {
	display: none;
	position: absolute;
	z-index:777;
	width: 200px;
	background: #ddd;
	border: 1px solid #357;
	color: #222;
}
@media (max-width: 399px) {
	.dropdown {
		top: 38px;
		left: 0;
		width: 100%;
	}
}
.dropdown a {
	display: block;
	color: #222 !important;
	text-decoration: none;
	border-bottom: 1px dashed #bcc;
	height: 38px;
	line-height: 38px;
	padding-left: 10px;
}
.dropdown a:last-child {
	border: 0;
}
.dropdown a:hover {
	background: #bbb;
	text-decoration: none;
}


/* our mixins to override some of kylefox's jquery-modal styles */
.modal {
	background: #357 !important;
	-webkit-border-radius: 0 !important;
	-border-radius: 0 !important;
}
.blocker {
	background-color: rgba(0,0,0,0.5) !important;
}

#cookie-compliance {
	display: block;
	visibility: visible;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #0d1013; /*080e13;*/
	text-align: center;
	color: #bbb;
	padding: 10px 20px;
	z-index: 2222;
}
#cookie-compliance button {
	background: transparent;
	border: 1px solid #357;
	font-size: 0.7em;
	height: 30px;
	line-height: 30px;
	margin-top: -5px;
	color: #bbb !important;
}
@media (max-width: 399px) {
	#cookie-compliance button {
		float: none !important;
		margin-top: 5px !important;
	}
}
#cookie-compliance button:hover {
	background: #123;
}

#suggest {
	background: #fff;
	color: #222;
	position: absolute; /* we want results to overlay the normal page */
	z-index: 9999;
	display: none;
	overflow: hidden;
	overflow-y: auto;
	width: 100%;
}
#suggest div {
	padding: 6px 10px;
	height: 25px; /* 38px height, - 1px top-border - 2x 6px padding (top,bottom) */
	border-top: 1px dotted #357;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
}
/* suggest.js works with beautifully employed css selectors, but autoComplete relies on assigned classes to select elements etc, that why we need to have the below 'less bautiful' css */
.autocomplete-suggestion.selected {
	background-color: #a9a9a9;
	color:#fff;
 }
.autocomplete-suggestion span {
	margin-left: 15px;
	color:#999; /* comments in suggestions are greyed a little.. */
 }
.autocomplete-suggestion svg {
	vertical-align: text-top;
}
.autocomplete-suggestion.selected span {
	color:#fff; /* .. but go to full white when in a selected item div */
}

a svg {
	vertical-align: middle;
}

/* throbber via font-awesome's fa-spin classes, mostly, done on a html dash char */
.spin {
	position:absolute;
	height: 28px;
	width:28px;
	color: #333;
	font-weight: 800;
	text-align: center;
	line-height: 1.1;
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
	-webkit-transform: rotate(0deg); transform: rotate(0deg);
  }
  100% {
	-webkit-transform: rotate(359deg); transform: rotate(359deg);
 }
}
.relative {
	position:relative;
}



/* oldskool but working "submit button inside" trick from https://boulderinformationservices.wordpress.com/2011/02/02/input-field-and-submit-button-on-the-same-line-full-width/ */
/* declare class button-inside on parent <form> and have exactly one <button> followed by a <div> containing the input */
.button-inside > button  {
	float: right;
}
.button-inside > div {
	overflow: hidden;
}
.button-inside input {
	width: 100%;
}



.auth-social-button svg {
	width: 30px;
	height: 30px;
	position: absolute;
	top: 4px;
	left: 3px;
	padding-right:5px;
	border-right: 1px solid rgba(255,255,255,0.3);
}
/* no used anymore, but targeted by JS
.auth-form {
} */
.auth-social-button {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
/*    padding: 10px 0 !important; */
    padding: 7px 0 !important;
    margin-bottom: 10px;
/*    border-radius: 5px;*/
    width: 100%;
    position: relative;

	/* override skeleton .button */
	line-height: unset;
	text-align: left;
	text-transform: none;
}
.input-block {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.form-error {
	border: 1px solid #c33;
	padding: 8px;
	margin: 0 0 15px;
}

.auth-social-button em {
	font-style: normal; /* we have replaced span auth button styling with em, so that we can use span to mHide stuff, without redeclaring em as not being not italic */

	color: #fff;
	text-shadow: 1px -1px rgba(0, 0, 0, 0.25); /* 1px right, -1px up means light is coming, a drop-shadow falling from upper right */
	display: inline-block;
	margin-left: 54px; /* 42px + 12px margin on left */
/*	margin-top: -3px; */
}
/* having the button and auth-social-button class brings the complication that we can't override the :hover */
/* behaviour of .button, thus we resort to these hover classes below with !important, so they win when side-by-side  */
/* -webkit-gradient, the oldest syntax, Apple proposal, still required on Webkit 534.24 auf Android 4.3, also tought us to use a basic fallback */
.colors-facebook {
	background: #5678bc;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5678bc), color-stop(100%,#314a7b));
	background: linear-gradient(to bottom, #5678bc, #314a7b);
}
.colors-facebook:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4658ac), color-stop(100%,#213a6b)) !important;
	background: linear-gradient(to bottom, #4658ac, #213a6b) !important;
}
.colors-google {
	background: #f87474;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f87474), color-stop(100%,#e65858));
	background: linear-gradient(to bottom, #f87474, #e65858);
}
.colors-google:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e86464), color-stop(100%,#d64848)) !important;
	background: linear-gradient(to bottom, #e86464, #d64848) !important;
}
.colors-twitter {
	background: #5fbee4;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5fbee4), color-stop(100%,#2091bd));
	background: linear-gradient(to bottom, #5fbee4, #2091bd);
}
.colors-twitter:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4faed4), color-stop(100%,#1081ad)) !important;
	background: linear-gradient(to bottom, #4faed4, #1081ad) !important;
}
.colors-openid {
	color: #fff; /* we style non-(openid)-orange buttons with this class as well, so we need to alter text-color, which is dark on general buttons */
	border: 1px solid #1a2b3c; /* body color */
	background: #f78c40;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f78c40), color-stop(100%,#e16309));
	background: linear-gradient(to bottom, #f78c40, #e16309);
}
.colors-openid:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e77c30), color-stop(100%,#d15300)) !important;
	background: linear-gradient(to bottom, #e77c30, #d15300) !important;
}

/* produced by IcoMoon.io*/
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
.icon-search {
  width: 0.9285714285714285em;
}

.icon-user {
  width: 0.7142857142857142em;
}

.icon-twitter {
  width: 0.9285714285714285em;
}

.icon-youtube {
  width: 0.8571428571428571em;
}

.icon-facebook {
  width: 0.8571428571428571em;
}

.icon-wikipedia-w {
  width: 1.2857142857142856em;
}

.icon-vimeo {
  width: 1.005em;
}

.icon-imdb {
  width: 0.8571428571428571em;
}


/* general */
body {
	margin: 0;
	padding: 0;
	font-family: "Arial", arial, helvetica, sans-serif;
	font-size: 16px;
	color: #efefef; /* accessibility, main color was #ededed */
	background-color: #1a2b3c;

/*	background: url(/res/test_grad3.png)  no-repeat center top fixed  #123; */  /* new */
}
@media (max-width: 399px) {
	body {
		margin-top: 5px;
	}
}

h1 {
	margin: 2px 4px 2px 4px;
	font-size: 1.5em;
}
.row h1 {
	margin-left: 6px;
	font-size: 1.5em;
	display: inline;
}
h2 {
/*
	border-bottom: 1px solid #ccc;
	margin-top: 50px; */
	margin: 0; /* override skeleton's 2rem margin on bottom */
	font-size: 1.1em;
}
h2:first-child {
	margin-top: 0;
}

h3 {
	margin: 0;
	margin-top: 25px;
	font-size: 1.1em;
/*	text-decoration: underline; *//* nonsense?? */
}
h4 {
	margin-top: 10px;
	margin: 0;
	font-size: 1em;
}

p {
	margin-top: 5px;
}

/* remove white space reserved for descenders on all img tags */
img {
	display: block;
}


/* zoom an image on hover fx */
.image {
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* dont forget to set fixed width+height on the containing div! */
}
.image img {
    -webkit-transition: all 0.3s ease; /* Safari and Chrome */
    -moz-transition: all 0.3s ease; /* Firefox */
    -ms-transition: all 0.3s ease; /* IE 9 */
    -o-transition: all 0.3s ease; /* Opera */
    transition: all 0.3s ease;
}
.image:hover img {
    -webkit-transform:scale(1.05); /* Safari and Chrome */
    -moz-transform:scale(1.05); /* Firefox */
    -ms-transform:scale(1.05); /* IE 9 */
    -o-transform:scale(1.05); /* Opera */
     transform:scale(1.05);
}



a:link{ color:#efefef; } /* was: #cde, then #ededed, now lighter for accessibility */
a:visited{ color:#ddd; } /* was: bcd */
a:hover{ color:#fff; } /* was: def */
a:active{ color: #fff; }

/* nondecolight actually is used quite often..  */
a.NonDecoLight { color: #efefef; text-decoration: none; white-space: nowrap; } /* was: #cde, then ededed */
a.NonDecoLight:hover { text-decoration: underline; }


/* adverts */
/* einige slots top+bottom nutzen die skeleton breakpoints um responsive banner größenmäßig zu begrenzen */
/* über min-width bekommen wir es hin, dass bei >= angegebener größe das banner zentriert ist */
/* ABER min-width ist von den (DFP zumindest) tags nicht erkannt, sondern braucht width */
/* height aber kann min-height sein (damit banner 60-250 hoch sein können), und muss in allen mediaqueries als min-height notiert sein, damit es sich nicht gegenseitig überschreibt */
#top-ad, #bottom-ad {	/* top-ad hat keine abstand-zu-oben funktion mehr, wir haben jetzt ein margin-top in #header */
	width: 320px; /* "mobile leaderboard" */
	min-height: 50px;
	margin: 0 auto; /* adtop is now a div inside a div.row -> auto to center horizontally */
}
#ad-zone {
/*	min-height: 90px; */
	/* tonight.de nutzt einen 150px hohen bereich quer ueber die seite für 5 rectangular ads */
}

/* styling of fallback ad banner space on page top */
#ad-fallb {
/*	margin-bottom: 25px; */
	text-align: center;
	display: none;
/*	clear: both; */ /* mitigate RSS icon float: right */
}
#ad-fallb > em, #top-ad > em {
	display: block;
	margin: 0 auto;
	width: 728px;

	font-size: 11px;
	font-style: normal;
	text-align: left;
	color: #ccc;
}
#top-ad > em {
	width: auto; /* the above inclusion of #top-ad was a little broad, the google ad element where it is used isn't as smartly handling diplay-and-hide and it ended up pushing the page too wide on mobile, the default auto is good here */
}
#ad-fallb > div {
	margin: 0 auto;
	width: 728px;
	height: 90px;
	overflow: hidden;
}
#ad-fallb a {
	color: #bbb;
	font-weight: normal;
	font-size: 11px;
	display:block;
/*	background: #fafafa;
	width:728px;
	height: 90px;
*/
}
@media (min-width: 470px) {/* normally 400px, lifted to 470 for next banner; Larger than mobile */
	#top-ad, #bottom-ad {
		width: 468px; /* "mobile leaderboard" */
		min-height: 60px;
		margin: 0 auto; /* adtop is now a div inside a div.row -> auto to center horizontally */
	}
}
@media (min-width: 750px) {/* Larger than tablet */
	#top-ad, #bottom-ad {
		width: 728px;
		min-height: 90px;
		margin: 0 auto; /* adtop is now a div inside a div.row -> auto to center horizontally */
	}
}
@media (min-width: 980px) {/* normally 1000px; Larger than desktop */
	#top-ad, #bottom-ad {
		width: 970px;
		min-height: 90px;
		margin: 0 auto; /* adtop is now a div inside a div.row -> auto to center horizontally */
	}
}
.sky {
	position: absolute; /* #header is the relative anchor element */
	top: 0px;
	width: 200px;
	height: 600px;
	display: none; /* both skyscrapers are initially hidden on smaller layout, and shown via media-query on wider ones */
}
#left-sky {
	text-align: right;
	left: -210px;
}
#right-sky {
	text-align: left;
	right: -210px; /* go outboard right, next to .container */
}
@media (min-width: 1170px) {/* normally 1200px; Larger than Desktop HD */
	#left-sky, #right-sky {
		display: block;
	}
}

/* header */
#header {
	position: relative;
	margin: 1.3rem 0; /* top and bottom 1.3, sides 0 */
	min-height: 38px;
}
@media (max-width: 399px) {
	margin-top: 0; /* we always need bottom margin, but on mobile make the logo+header align with top */
}


#header h1 {
	position: absolute;
	margin: 0;
	top: 0;
	left: 0;
	width: 210px;
	height: 38px;

	background: url("/res/clipland_logo_210x38.png") no-repeat;
/*	background: url("/res/clipland_logo_210x38_xmas2.png") no-repeat; */
}
/* remove "active border", dotted line around logo (but it doesnt work
#header h1 a:active {
	outline: none;
}
*/
@media	(-webkit-min-device-pixel-ratio: 1.25),
	(min-resolution: 120dpi) { 
	#header h1 {
		background: url("/res/clipland_logo_210x38_2x.png") no-repeat;
/*		background: url("/res/clipland_logo_210x38_2x_xmas2.png") no-repeat; */
		background-size: 210px 38px;
	}
}

#header h1 a {
	display: block;
	text-indent: -700em;
	height: 100%;
	width: 100%;
	text-decoration: none;
	overflow: hidden;
}

/* treat login button like an iframe, which we restrict to 38x38px on mobile devices */
.login {
	height: 38px;
	width: 38px;
	overflow: hidden;
}
@media (min-width: 400px) {
	.login { /* revert to default values on wider screens */
		width: auto;
		overflow: visible;
	}
}

#cplayer {
	margin-bottom: 10px;
	text-align: center; /* iframe inside this div centered, please */
	/* no media queries, as this element is width-adjusted via JS */
}

.share-button {
	padding-right: 8px;
}
@media (max-width: 549px) { /* one breakpoint earlier, not on 300 */
	/* Google, Lighthouse complained about inappropirate tap target size: */
	.share-buttons {
		line-height: 2.5em;
	}
	.share-button {
		padding-right: 20px;
	}
}


#paginator {
	clear: both;
	text-align: center;
}
#paginator span {
	padding: 5px;
	margin: 0 2px;
	text-align: center;
	border: 1px solid #aaa;
}
.paginator-results {
	margin-top: 10px;
	color: #aaa;
}


.footer { /* new */
	font-size: 0.8em;
/*	text-align: center; */
/*	line-height: 1.4em; */
/*	border-bottom: 0 !important; */
	padding: 25px 0 !important;
	opacity: 0.8;
}
@media (max-width: 549px) { /* one breakpoint earlier, not on 300 */
	.footer {
		text-align: center;
		line-height: 2.5em; /* Google, Lighthouse complained about inappropirate tap target size */
	}
}

.copyright {
/*	background-color: transparent; */
	font-size: 0.8em;
	padding: 10px 0 !important;
	color: #909090;
	text-align: center;
}





	/* sprite images classes */
/* removed, for sprite.svg
	.sprite {
		display: inline-block;
		background-image: url(sprite.png);
	}
	.xml_feed {
		background-position: 0 -225px;
		width: 44px;
		height: 14px;
		vertical-align: middle;
	}
	.no_avatar {
		background-position: 0 -116px;
		width: 50px;
		height: 50px;
	}
	.quote_left {
		background-position: 0 -168px;
		width: 20px;
		height: 21px;
	}
	.quote_right {
		background-position: 0 -190px;
		width: 20px;
		height: 21px;
	}
	.amazon_mp3 {
		background-position: 0 0;
		width: 78px;
		height: 22px;
		vertical-align: middle;
	}
	.amazon_vod {
		background-position: 0 -24px;
		width: 126px;
		height: 26px;
		vertical-align: middle;
	}
	.social_button_facebook {
		background-position: 0 -52px;
		width: 68px;
		height: 30px;
	}
	.social_button_google {
		background-position: 0 -84px;
		width: 48px;
		height: 30px;
	}
*/

/* new styling helpers */
	.valignTop {
		vertical-align: top;
	}
	.right {
		text-align: right;
	}
	.floatr {
		float: right;
	}
	.clear {
		clear: both;
	}
/* results: browse,search */
	.nslot { /* nslot = "new slot" css, replaces rslot ("results slot") */
		padding-bottom: 15px;
		border-bottom: 1px dashed #246;
		margin-bottom: 15px;
		height: 108px;
		overflow: hidden;
		display: block; /* not always a div, so make it a block element in case it's a <a> */
	/*	white-space: nowrap; */
	}
	@media (min-width: 550px) {
		.nslot {
			float: left;
			width: 48%;
			margin-right: 2%;
		}
	}
	.rimg {
	/*	display: inline-block; */
		float: left;
		margin-right: 15px;
		width: 160px;
		height: 90px;
	}
	.rperson {
		background: #123;
/*		background-image: url(/res/noavatar.gif); */
		border: 1px solid #246;
	}
	.rvideo {
		background: #123;
		background-image: url(/res/nothumb.jpg);
		background-size: cover;
		border: 1px solid #246;
		width: 160px;
		height: 90px;
	}
	.rname {
		display: inline-block;
	/*	margin-top: 20px; */
		vertical-align:top;
	/*	width: 300px; */
	}
	.rtags {
		width: 340px;
	}

/* newer styling, originated in forum */
	.blue {
		background-color: #357;
		margin-bottom: 1.3rem;
	}
	.blueDark { /* used as well-style sub-headings */
		background-color: #246;

		padding: 5px 15px;
	/*	border-top: 1px solid #123;
		border-bottom: 1px solid #557; */
	}
	/*mobileFix: mobile fixes */
	@media (max-width: 549px) {
		.mobileDark { /* used only on right-pulled stuff, on summary.tt */
			background-color: #246;
			padding: 5px 15px;
			font-size: 0.85em; 
		}
		.mobilePad15{
			padding-top: 8px !important; /* on credits*/
		}
		.mobileSmall {
			font-size: 1.2em !important; /* normally h1 would be 1.6em */
		}
	}
	/* mobileFix: on the middleground width the slim columns tend to overflow (buy link on summary.tt) so this hotfix here: middlegroundHide */
	@media (min-width:550px) and (max-width:990px) {
		.mHide {
			display: none;
		}
		.mZoom { /* on summary.tt, the Videos thumbnails tend to ueberstehen on middleground size, simply zoom them small to fix that */
			transform: scale(0.75);
			transform-origin: left top;
		}
	}

	.blueDark h2 { /* used anywhere?? todo: find out */
		margin-top: 4px !important;
		margin-bottom: 3px !important;

		font-weight: bold !important;
	}

	@media (max-width: 399px) {
		.colophon {
			font-size: 0.7em;
		}
	}

	/* breadcrumbs, derzeit nur im Forum benutzt */
	@media (max-width: 399px) {
		span.crumb {
			display: block;
			height: 38px;
		}
	}
	span.crumb::after {
		content: " > ";
		color: #ccc;
	}

	/* TABLES - we only use them on summary credits */
	table {
		width: 100%;
	}
	td {
		vertical-align: top;
	}
	/* stuff on name.tt */
	.name { /* person image */
		float: left;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.work {
		display: block;
		border-bottom: 1px dashed #246;
		margin-bottom: 10px;
		padding-bottom: 10px;
	}
	.thumb {
		max-width: 85px; /* a fixed 67px wide is 16:9, but it leaves mucb of the now 2 columns layout unused, and -size:conver keeps aspect anyway, only limit width for small screens where it would stretch too wide */
		height: 38px;
		background-image: url(/res/nothumb.jpg); /* is actually 125x76px */
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
	.title {
		line-height: 1; /* counter line-height: 1.6 in body to valign two row title entry on top */
	}

	/* used on name to overlay image credit in <small> tag over img */
	.link-overlay {
		position: relative;
	}
	.link-overlay > a {
		background-color: #000;
		position: absolute;
		opacity: 0.5;
		right: 0;
		bottom: 0;
		font-size: 0.8em;
	}

	/* used on summary.tt */
	.video-info {
		background-color: #000;
		position: absolute;
		padding: 2px 5px 5px;;
		opacity: 0.75;
		right: 0;
		bottom: 0;
		display: inline;
	}
	.video-wrap {
		position: relative;
		display:inline-block;
	}
	@media (max-width: 549px) {
		.video-wrap {
			margin-bottom: 12px; /* lighthouse complained about clicktargets too close together on mobile, somewhere when this is below 10px, be safe with 12px and include breakpoint for tablet */
		}
	}
	.video {
		line-height: 1;
		margin-top: 15px;
	}
	.video:first-child {
		margin: 0;
	}


	/* credits on summary.tt */
	.credits {
		/* sometimes we have very long names on credits (mostly erros with multiple names..), and these, especially on the middleground wide layout stretch the dashed slots far to wide to the right */
		/* offering a scrollbar with "auto" might be better, but these are unwanted errors anyway, so: hide */
		overflow: hidden;
	}
	@media (min-width: 550px) {
		.credits {
			padding-left: 15px;
		}
	}
	.credits tr {
		border-top: 1px dashed #246;
		height: 38px;
	}
	.credits tr:first-child {
		border: 0;
	}
	.credits td {
		vertical-align: middle;
		height: 38px;
	}
	.credits td a {
		display: block;
		line-height: 38px;
	}
	.credits td:first-child {
		width: 49%;
		padding-right: 15px; /* very long names might compress the left side of the table so much so there's no gap left - counter that, and make 50% -> 49% to compensate */
	}

	/* used anywhere?? */
	form table input {
		margin: 7px 0;
	}

	/* todo: really think about general table styles... we need to counter some normalize.css stuff in userContrib */
	table.contrib {
		border-collapse: separate;
		border-spacing: 2px;
	}
	table.contrib td {
		vertical-align: middle;
	}
	form.contrib input {
		margin: 0 2px 2px 0;
	}

	.pad15 {
		padding: 15px;
	}
	@media (min-width: 400px) {
		.pad23 {
			padding: 2em 3em; /* a more spacious padding override used on contribute.tt - but ONLY on large layouts */
		}
	}
	.xlargeFont {
		font-size: 1.4em;
	}
	.largeFont {
		font-size: 1.2em;
	}
	.smallFont {
		font-size: 0.9em;
	}
	.tinyFont {
		font-size: 0.8em;
	}
	@media (max-width: 399px) {
		.tinyFont {
			font-size: 0.7em; /* normally set via tinyFont class to 0.8, but that's still large on mobile phones */
		}
	}
	.microFont {
		font-size: 0.7em;
	}
	.bold {
		font-weight: bold;
		letter-spacing: 0.05rem; /* font tends to be a little dense when bolded */
	}
	.inline {
		display: inline; /* used on summary, to have Videos heading in-line with buy link */
	}
	.relative {
		position: relative;
	}
	.center {
		text-align: center;
	}
	.darkerFont {
		color: #c6c6c6; /* accessibility, was #b6b6b6 */
	}

/* horizontal timeline */
.timeline .dot {
  display: block;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ccc;
}

@media screen and (min-width: 501px) {
 .timeline {
	margin-top: 20px;
	margin-left: 10%;
	margin-right: 10%;
	padding-bottom: 20px; /* to have some space between content and scrollbar, in case scrollbar comes up */
	background: url(data:image/gif;base64,R0lGODlhAQAJAIABAMzMzAAAACH5BAEKAAEALAAAAAABAAkAAAIEjB8ABQA7) repeat-x;
	text-align: center;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
 }

 .timeline .event {
	display: inline-block;
	vertical-align: top;
	width: 30%;
	/* margin-top: -8px; */ /* half the dot's size */
	white-space: normal;
	padding: 0 8px;
 }

 .timeline p {
	text-align: center;
	overflow: hidden;
	margin-bottom: 0 !important;
 }
 .timeline span {
	color: #acacac;
	display: block;
	margin-top: 5px;
 }
}
@media screen and (max-width: 500px) {
 .timeline {
	border-left: 2px solid #ccc;
 }
 .timeline .event {
	margin-left: -8px; /* half the dot's size */
	padding-bottom: 20px;
 }
 .timeline .dot {
	float: left;
 }
 .timeline p {
	margin-left: 30px;

 }
}


/* Wiki Styling */
	.wikiToc {
		display: inline-block;
		padding: 10px;
		margin-right: 10px;
		border: 1px solid #ccc;
	}
	.wikiToc ol {
		margin:0;
		padding:0;
		margin-left: 20px;
	}

/* Browse Styling */
	#browse-by-letter ul {
		list-style: none; 
		padding: 0;
		margin: 0;
		overflow: hidden;
	}
	#browse-by-letter ul li {
		float: left;
		border-left: 1px solid #123;
		border-bottom: 1px solid #123;
	}
	#browse-by-letter ul li a {
		width: 21px;
		height: 18px;
		display: block;
		font-size: 12px;
		text-decoration: none;
		padding: 5px 0 0 0;
		text-align: center;
	}
	#browse-by-letter ul li a:hover {
		background-color: #a8a8a8;
		color: #123;
	}
	#browse-by-letter ul li.browse-by {
		width: 53px;
		height: 18px;
		text-align: right;
		font-size: 12px;
		text-decoration: none;
		padding: 5px 7px 0 0;
		border-left: 0;
		border-bottom: 1px solid #123;
	}
        #browse-by-letter ul li.right {
                border-right: 1px solid #123;
        }

	#browse-by-type ul {
		list-style: none; 
		padding: 0;
		margin: 0;
		overflow: hidden;
	}
	#browse-by-type ul li {
		float: left;
		border-left: 1px solid #123;
		border-bottom: 1px solid #123;
	}
	#browse-by-type ul li a {
		width: 110px;
		height: 18px;
		display: block;
		font-size: 12px;
		text-decoration: none;
		padding: 5px 0 0 0;
		text-align: center;
	}
	#browse-by-type ul li a:hover {
		background-color: #a8a8a8;
		color: #123;
	}
	#browse-by-type ul li.browse-by {
		width: 53px;
		height: 18px;
		text-align: right;
		font-size: 12px;
		text-decoration: none;
		padding: 5px 7px 0 0;
		border-left: 0;
		border-bottom: 1px solid #123;
	}
        #browse-by-type ul li.right {
                border-right: 1px solid #123;
        }



/* Feedback */
.feedback {
/* feedback used to appear fixed on the display-bottom; now only the popup behaves so (see #feedback)
	position: fixed;
	z-index: 1000;
*/
	left: 0;
	bottom: 0;
	right: 0;

	border: 1px solid #22dd88; /* base color #44ffaa */
	color: #222;
	padding: 6px 10px;
}

#feedback {
	position: fixed;
	z-index: 1000;

	display: none;
	background-color: #fff;
	border-width: 3px;
	text-align: left;
}
#feedback input, #feedback textarea {
	border: 1px solid #ccc;
}
#feedback_button {
	background-color: #88ffbb;  /* base color #44ffaa */

	opacity: 0;

	cursor: pointer;
}
#feedback_button a:link, #feedback_button a:visited, #feedback_button a:hover, #feedback_button a:active {
	color: #00cc77 !important;
	font-weight: bold;
}


@media all and (min-width: 746px) {
	#feedback {
		width: 400px;
	}
	.feedback {
		left: 10px;
		bottom: 25px;

		right: auto;

/*		-webkit-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px; */
	}
}