/*=== File 'cssexmext.css' ===================================================*/
fieldset{
  margin: 1em 0;
}
/*------------------------------- CSS pseudo-element ::after -----------------*/
#aft::after{
  content: " <== ";
}
/*------------------------------- CSS pseudo-element ::before ----------------*/
#bfr::before{
  content: " ==> ";
}
/*------------------------------- CSS pseudo-class :checked ------------------*/
#chk input:checked{
  color: blue;
  width: 3em;
}
/*------------------------------- CSS element content ------------------------*/
#cn1::after{
  content: " (= " attr(href) ")";
}
#cn2::after{
  content: close-quote;
}
#cn2::before{
  content: open-quote;
}
#cn3 span{
counter-increment: ctr;
}
#cn3 span::before{
content:  "-Teller: " counter(ctr) "-Teller: ";
}
/*------------------------------- CSS pseudo-class :empty --------------------*/
#emp li:empty{
  background-color: red;
  height: 1em;
  width: 3em;
}
/*------------------------------- CSS pseudo-class :first-child --------------*/
#fch li:first-child{
  border: blue solid 1px;
}
/*------------------------------- CSS pseudo-class :focus --------------------*/
#fcs input:focus{
  background-color: lime;
}
/*------------------------------- CSS pseudo-class :first-of-type ------------*/
#ftp li:first-of-type{
  border: blue solid 1px;
}
/*------------------------------- CSS pseudo-class a:xxxxxxx -----------------*/
#hpr a:link{
  background-color: white;
  color: red;
}
#hpr a:visited{
  background-color: white;
  color: blue;
}
#hpr a:hover{
  background-color: yellow;
}
#hpr a:active{
  background-color: blue;
  color: white;
}
/*------------------------------- CSS pseudo-class :invalid ------------------*/
#inv input:invalid{
  border: red solid 2px;
}
/*------------------------------- CSS pseudo-class :in-range -----------------*/
#irn input:in-range{
  border: green solid 2px;
}
/*------------------------------- CSS pseudo-class :last-child ---------------*/
#lch li:last-child{
  border: blue solid 1px;
}
/*------------------------------- CSS pseudo-element ::first-line ------------*/
#lin::first-line{
  color: blue;
}
/*------------------------------- CSS pseudo-class :lang ---------------------*/
#lng q:lang(be){
  color: blue;
  quotes: "[.." "..]";
}
#lng q:lang(de){
  color: blue;
  quotes: "<<" ">>";
}
/*------------------------------- CSS pseudo-class :last-of-type -------------*/
#ltp li:last-of-type{
  border: blue solid 1px;
}
/*------------------------------- CSS pseudo-element ::first-letter ----------*/
#ltr::first-letter{
  font-family: monospace;
  font-size: 200%;
  font-weight: bold;
  color: blue;
}
/*------------------------------- CSS pseudo-class :nth-child ----------------*/
#nch li:nth-child(2){
  border: blue solid 1px;
}
/*------------------------------- CSS pseudo-class :nth-last-of-type ---------*/
#nlt li:nth-last-of-type(2){
  border: blue solid 1px;
}
/*------------------------------- CSS pseudo-class :nth-of-type --------------*/
#ntp li:nth-of-type(2){
  border: blue solid 1px;
}
/*------------------------------- CSS pseudo-class :required -----------------*/
#ntx :not(p){
  border: blue solid 1px;
}
/*------------------------------- CSS pseudo-class :only-child ---------------*/
#och em:only-child{
  border: blue solid 1px;
}
/*------------------------------- CSS pseudo-class :only-of-type -------------*/
#oot em:only-of-type{
  border: blue solid 1px;
}
/*------------------------------- CSS pseudo-class :optional -----------------*/
#opt input:optional{
  background-color: lime;
}
/*------------------------------- CSS pseudo-class :out-of-range -------------*/
#orn input:out-of-range{
  border: navy solid 2px;
}
/*------------------------------- CSS element quotes -------------------------*/
#qts q{
  quotes:  "[" "]" "<" ">" "«" "»";
}
/*------------------------------- CSS pseudo-class :read-only ----------------*/
#rdo input:read-only{
  background-color: silver;
}
/*------------------------------- CSS pseudo-class :read-write ---------------*/
#rdw input:read-write{
  background-color: lime;
}
/*------------------------------- CSS pseudo-class :required -----------------*/
#rqr input:required{
  background-color: red;
}
/*------------------------------- CSS pseudo-class :required -----------------*/
#slt ::selection{
  background-color: yellow;
  color: red;
}
/*------------------------------- CSS regel-element :@supports ---------------*/
#sppnox{
  color: red;
}
#sppyes{
  display: none;
}
@supports(display: block){
  #sppnox{
    display: none;
  }
  #sppyes{
    color: green;
    display: inline;
  }
}
/*------------------------------- CSS element transition ---------------------*/
.trs{
  background-color: lime;
  letter-spacing: 0;
  transition-delay: 1s;
  transition-duration: 3s;
  transition-property: all;
  width: 5em;
}
.trs#tr1{
  transition-timing-function: cubic-bezier(0.1,0.9,0.1,1);
}
.trs#tr2{
  transition-timing-function: ease;
}
.trs#tr3{
  transition-timing-function: ease-in;
}
.trs#tr4{
  transition-timing-function: ease-in-out;
}
.trs#tr5{
  transition-timing-function: ease-out;
}
.trs#tr6{
  transition-timing-function: lineair;
}
.trs:hover{
  background-color: teal;
  color: white;
  letter-spacing: 1em;
  width: 10em;
}
/*------------------------------- CSS pseudo-class :valid --------------------*/
#vld input:valid{
  background-color: lime;
}
/*------------------------------- CSS pseudo-class :disabled and ::enabled ---*/
#xbl input:disabled{
  background-color: silver;
}
#xbl input:enabled{
  background-color: lime;
}
/*------------------------------- CSS pseudo-class :nth-last-child -----------*/
#xch li:nth-last-child(2){
  border: blue solid 1px;
}
/*------------------------------- CSS element z-index ------------------------*/
#zi0{
  height: 145px;
  width: 225px;
}
#zi1{
  background-color: red;
  color: white;
  height: 120px;
  left: 10px;
  position: relative;
  top: 10px;
  width: 200px;
}
#zi2{
  background-color: white;
  color: black;
  height: 80px;
  left: 20px;
  position: absolute;
  top: 20px;
  width: 150px;
  z-index: 2;
}
#zi3{
  background-color: blue;
  color: white;
  height: 40px;
  left: 40px;
  position: absolute;
  top: 40px;
  width: 100px;
  z-index: 3;
}
/*------------------------------- CSS rule-element @font-face ----------------*/
@font-face{
  font-family: ffn;
  src: url(/prd/oth/handalfabet.eot),
       url(/prd/oth/handalfabet.ttf),
       url(/prd/oth/handalfabet.woff),
       url(/prd/oth/handalfabet.svg#nha);
}
#ffn{
  font-family: ffn, Courier New;
  font-size: 3em;
}
/*------------------------------- CSS rule-element @keyframes ----------------*/
@keyframes an1{
  from{
    background-color: lime;
    letter-spacing: 0;
    width: 4em;
  }
  to{
    background-color: teal;
    color: white;
    letter-spacing: 1em;
    width:10em;
  }
}
@keyframes an2{
  0%{
    background-color: lime;
    letter-spacing: 0;
    width: 4em;
  }
  25%{
    background-color: yellow;
    letter-spacing: 1em;
    width: 10em;
  }
  50%{
    background-color: fuchsia;
    color: white;
    letter-spacing: 0;
    width: 4em;
  }
  75%{
    background-color: aqua;
    letter-spacing: 1em;
    width: 10em;
  }
  100%{
    background-color: lime;
    letter-spacing: 0;
    width: 4em;
  }
}
/*============================================================================*/