litejs/ui/css/theme/blue.css

/**
 *  1. These selection rule sets have to be separate.
 *  2. Do not forget to kill the text-shadow in ::selection.
 */

html {
	background: linear-gradient(#fff, #cde) fixed;
	will-change: transform;
}

/**
 * Do not remove focus retangle,
 * do it more visible when needed.
 *
 *  - for IE8
 *    :focus { outline: 5px solid red; }
 */


::-moz-selection {             /* 1 */
	text-shadow: none;     /* 2 */
	background: var(--bg-color);
}

::selection {                  /* 1 */
	text-shadow: none;     /* 2 */
	background: var(--bg-color);
}

input[disabled],
input[readonly] {
	color: #666;
	font-style: italic;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 1em 0 .5em;
}

/*
 * Most browsers don't print background images by default.
 * Use foreground images as sprites
 */

/**
 * Mobile Safari respect the EXIF orientation tag by default in HTML documents.
 *
 * image-orientation property is supported by Firefox 26.
 * When the style image-orientation: from-image is applied to a JPEG image, the browser will take its EXIF orientation tag into account when performing layout and rendering.
 *
 * image-orientation: 270deg flip;
 *
 * When you specify an orientation manually, image-orientation gives CSS the same capabilities as the EXIF orientation tag.
 * You can use this to manually correct JPEGs lacking EXIF data, or to reorient PNGs and other types of images that can’t include orientation information.
 * @see http://sethfowler.org/blog/2013/09/13/new-in-firefox-26-css-image-orientation/
 *
 */
img {
	image-orientation: from-image; /* 1 */
}

.bg-1 {
	background-image: linear-gradient(#257, #27b);
	border-bottom: 1px solid #257;
}

.bg-2 {
	border-top: 1px solid #6ae;
	border-bottom: 1px solid #123;
	background-image: linear-gradient(#38c, #269);
}

.bg3 {
	background-color: #ccc;
	border-color: #fff;
}

.t-1 {
	color: #def;
	text-shadow: 2px 1px 1px #000;
}

.lang > .selected {
	text-decoration: underline;
}

.Menu {
	padding-top: 9px;
}

.Menu-item {
	line-height: 44px;
	padding: 0 1em;
	margin: 2px 5px 0 0;
	color: #123;
	background-color: #fafafa;
	background-image: linear-gradient(#def, #cde);

	border: 1px solid #123;

	border-radius: 6px 6px 0 0;

	text-align: center;
	text-shadow: 0 0 1px #fff;
	display: block;
	float: left;
}
[dir="rtl"] .Menu-item {
	float: right;
}

.Menu-item:hover, .Menu-item.selected {
	background-image: linear-gradient(#fff, rgba(255,255,255,0));
	border-bottom-color: #f2f7fb;
	color: #000;
}

.Menu-item:active {
	background-image: linear-gradient(#49d, rgba(255,255,255,0));
}


.nav {
	display: block;
	height: 2.4em;
}

.nav a {
	display: block;
	float: left;
	margin: 0 .3em;
	padding: .3em;
	background: #eee;

}


.content {
	padding: 1em 1em 3em;
}

.c0 { color: #000; }
.c1 { color: #fff; }
.c2 { color: #789; }
.c3 { color: green; }
.c4 { color: red; }


.p0t { padding-top:    0; }
.p4t { padding-top: 16px; }
.p0r { padding-right:  0; }
.p0b { padding-bottom: 0; }
.p0l { padding-left:   0; }

.m1b { margin-bottom: 4px; }
.m2b { margin-bottom: 8px; }



[data-on-empty]:empty:after {
	content: attr(data-on-empty);
	color: #999;
	font-style: italic;
	text-align: center;
	font-weight: normal;
	display: block;
	padding: 1em;
}

.loading[data-on-loading]:empty:after {
	content: attr(data-on-loading);
}

.loading[data-on-empty]:empty:after {
	content: "Loading..";
}
.loading[data-on-empty]:lang(et):empty:after {
	content: "Laen..";
}