/**
 * This is a pseudo CSS file to test Kate's CSS syntax highlighting.
 */

/* Properties */

body {
	font-size: 15pt;
	font-family: Verdana, Helvetica, "Bitstream Vera Sans", sans-serif;
	margin-top: 0px;			/* yet another comment */
	margin-bottom: 0px;
	// this is no comment, it's just broken!
	background-color: hsl(0, 0%, calc(95% - 3%));
    font-family: "Droid Sans", Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.5em;
    background: #fff000;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
	font-variant-alternates: styleset(nice-style);
}

/* Selectors */

body, blockquote {
    margin: 0;
}

header #logo {
    width: 100px;
}

div#footer .link {
    color: blue;
}

.something
{
	margin-right: 0px;
	color: #cdd;
	color: #AAFE04;
	color: rgb(10%,30%,43%);
	background: maroon;
}

sidebar #subscribe .subscribe_form input[type="text"] {
    font-size: 20px;
}

sidebar #subscribe .subscribe_form:nth-child(2n + 1):hover input[class*="small-"] {
    font-weight: bold;
}

input[value=text]
input[value= text ]
input[value= text i]
input[value= "text" i]
input[value=i]
input[value= i] {
    font-size: 20px;
}

#header,
a:hover,
p.intro:first-letter,
p:lang(nl),
img[align="right"]
{
	border: 1px solid Qt::red !important;
	-moz-border-radius: 15px; /* unknown properties render italic */
}

.nice-look {
}

ul {
	list-style: thumbs;
}

/* SVG <a> */
svg|a {}

/* XHTML and SVG <a> */
*|a {}

*{}
.class{}
#id{}
:hover{}
:lang(fr){}
E{}
E F{}
E>F{}
E > F{}
E~F{}
E ~ F{}
E:first-child{}
E:visited{}
E::after{}
E:lang(c){}
E:lang(fr-ca){}
E + F{}
E+F{}
E[foo]{}
E[foo=warning]{}
E[foo="warning"]{}
E[foo~="warning"]{}
E[foo^="warning"]{}
E[foo$="warning"]{}
E[foo*="warning"]{}
E[lang|="en"]{}
DIV.warning{}
DIV .warning{}
E#myid{}
E #myid{}
E,E{}
E, E{}
E ,E{}
E , E{}

p:nth-child(2) {
	background: red;
}

/* Elements that are not <div> or <span> elements */
body :not(div):not(span) {
	font-weight: bold;
}

/* Elements that are not `.crazy` or `.fancy` */
/* Note that this syntax is not well supported yet. */
body :not(.crazy, .fancy) {
	font-family: sans-serif;
}

:nth-child(odd) { color: lime; }
:nth-child(even) { color: lime; }
:nth-child(4) { color: lime; }
:nth-child(4n) { color: lime; }
:nth-child(3n+4) { color: lime; }
:nth-child(-n+3) { color: lime; }
:nth-child(n+8):nth-child(-n+15) { color: lime; }

.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
	background-color: lime;
	unknown-property: lime;
}

:root{
	--foo: if(x > 5) this.width = 10; /* valid custom property, invalid in any normal property */
}

:root,
:root:lang(en) {--external-link: "external link";}
:root:lang(de) {--external-link: "externer Link";}

a[href^="http"]::after {content: " (" var(--external-link) ")"}

one   { --foo: 10px; }
two   { --bar: calc(var(--foo) + 10px); }
three { --foo: calc(var(--bar) + 10px); }
.foo {
	--gap: 20;
	margin-top: var(--gap)px; /*20 px*/
	margin-top: calc(var(--gap) * 1px); /*20px*/
}

foo {
	width: calc(50% -8px); /* invalid */
	width: calc(50%- 8px); /* invalid */
	width: calc(50% +8px); /* invalid */
	width: calc(50%+ 8px); /* invalid */
	width: calc(2px -var(--a)); /* invalid */
	width: calc(50%*-8px);
	width: calc(50% - 8px);
	width: calc(50% + -8px);
	width: calc(50% +(8px));
	width: calc(2px -(var(--a)));
}

sweet-alert input:focus::-moz-placeholder {
	-webkit-transition: opacity 0.3s 0.03s ease;
	transition: opacity 0.3s 0.03s ease;
	opacity: 0.5;
}


@font-feature-values Font One {
	@styleset {
		nice-style: 12;
	}
}

@font-feature-values Font Two {
	@styleset {
		nice-style: 4;
	}
}

@font-palette-values --identifier {
  font-family: Bixa;
}

@counter-style thumbs {
	system: cyclic;
	symbols: "\1F44D";
	suffix: " ";
}

@font-face {
	font-family: "Open Sans";
	/* comments */
	unknown: 2px;
	src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
	url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

@page {
	margin: 1cm;
}

@page :first {
	margin: 2cm;
	/* comments */
	marks: crop cross;
}

@page :unknown {
	margin: 2cm;
}

@document url("https://www.example.com/") {
	h1 {
		color: green;
	}
}

@charset "UTF-8";

@import 'custom.css';
@import "common.css" screen;
@import url("fineprint.css") print;
@import url(fineprint.css) print;
@import url('bluish.css') speech;
@import url("chrome://communicator/skin/");
@import url('landscape.css') screen and (orientation:landscape);
@import url("othersheet.css") screen, print;

@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/* Animation (Keyframes) */

@keyframes important1 {
	from { margin-top: 50px; }
	50%  { margin-top: 150px !important; } /* ignored */
	to   { margin-top: 100px; }
}

@keyframes important2 {
	from { margin-top: 50px;
		margin-bottom: 100px; }
	to   { margin-top: 150px !important; /* ignored */
		margin-bottom: 50px; }
}

@keyframes slidein {
	from {
		margin-left: 100%;
		width: 300%;
	}

	to {
		margin-left: 0%;
		width: 100%;
	}
}

/* Media Queries */

@media print {
    .container {
        width: 100%;
    }
	a:hover { color: red }
	/* comments */
	a:hover { color: red }

	#header
	{
		display: none;
	}
}

@media screen and (min-width: 768px) and (max-width: 960px) {
    .container {
        width: 720px;
    }
}

@media (max-width: 600px) {
	.sidebar {
		display: none;
	}
}

@media print {
}

@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    line-height: 1.4;
  }
}

@supports (display: grid) {
	div {
		display: grid;
	}
}

@supports font-tech(color-COLRv1) {
  font-family: "Bungee Spice";
}

@supports not (not (transform-origin: 2px)) {
  div {}
}

@supports (display: grid) and (not (display: inline-grid)) {
  div {}
}

/*
 * CSS Syntax Highlight Sample File (Standard)
 *
 * This file contains most CSS syntax, CSS3 properties, @media, @font-face and
 * @keyframes annotations.
 *
 * @author  Guo Yunhe guoyunhebrave@gmail.com
 * @date    2016-09-16
 */

/*
 * Block comment
 *
 * Alert keywords:
 * TODO BUG FIXME
 */


/* Region markers */

/*BEGIN Comment */


/*END Comment */

/*
 * CSS Syntax Highlight Sample File (Complex)
 *
 * This file contains complex CSS syntax that can test unexpected situations.
 *
 * @author  Guo Yunhe guoyunhebrave@gmail.com
 * @date    2016-09-16
 */


/* Comments with special content */

/*
 * .class-selector #id "string" 'comment' // comment {} [] ()  /* comment
 * TODO BUG DEBUG
 * body {
 *    margin: 0 !important;
 * }
 */

/* Comments in special positions */

header/* comment here */.active /* comment here */ {
    /* comment here */ color : /* comment here */ blue/* comment here */;
    font-family: Arial /* comment here */,
        "Droid Sans", /* comment here */
        sans-serif/* comment here */;
}

@media screen /* comment here */ and (max-width: 300px /* comment here */) /* comment here */ {/* comment here */}


/* Strings with special content */

@import url("{} $variable /* comment */");


/* Without extra breaklines and spaces */

pre.primary:hover.large:nth-child(2n-1){font-size:17px;font-family:"Noto Sans";-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.3)}


/* With unnecessary breaklines and spaces */

blockquote .ref
    {
             flex : 0 1 30%;
        flex-wrap : wrap;
    }

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }


/* Special selectors: HTML5 allows user defined tags */

header {
    flex {
        width: 300px;
    }
}

/* CSS Nesting */

header {
    .abc {
        width: 300px;
    }
    width: 300px;
    & width:hover {
        width: 300px;
    }
    width: 300px;
}