doc-msp-theme 0.1.0

data/_sass/_button.scss

@@ -0,0 +1,146 @@
+//
+// Buttons
+// ----------------------------------------
+
+.btn {
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: $button-border-radius;
+  font-size: $font-size-regular; // prevent font-size inherit in other modules / scopes
+  line-height: $line-height-regular; // prevent line-height inherit in other modules / scopes
+  padding: $button-padding;
+  font-weight: normal;
+  white-space: nowrap;
+  background-image: none;
+  text-decoration: none;
+  @include transition(all $transition-time-out $transition-function);
+
+  > .icon {
+    margin-top: -1px;
+    padding-right: $button-icon-indent;
+  }
+
+  > .icon-right {
+    padding-left: $button-icon-indent;
+    padding-right: 0;
+  }
+
+  &.focus,
+  &:focus {
+    color: $font-color-regular;
+    text-decoration: none;
+    @include tab-focus();
+  }
+
+  &.hover,
+  &:hover {
+    text-decoration: none;
+    @include transition($transition-time-in, '-duration');
+  }
+
+  &.disabled,
+  &[disabled] {
+    cursor: not-allowed;
+    background: hsv-lighten($color-element-background, 5%, true);
+    border-color: hsv-lighten($color-element-border, 14%, true);
+    color: hsv-lighten($font-color-regular, 50%, true);
+  }
+}
+
+%btn-default,
+.btn-default {
+  @include button-variant($font-color-regular, $color-element-background, $button-border-color-default);
+}
+
+.btn-brand {
+  @include button-variant($color-bright, $color-brand, $button-border-color-brand);
+}
+
+.btn-positive {
+  @include button-variant($font-color-regular, $color-positive, $button-border-color-positive);
+}
+
+.btn-negative {
+  @include button-variant($color-bright, $color-negative, $button-border-color-negative);
+}
+
+.btn-clean {
+  @extend %btn-default;
+  background-color: transparent;
+
+  &,
+  &.focus,
+  &:focus,
+    &.hover,
+    &:hover,
+    &.active,
+    &:active {
+    border-color: transparent;
+  }
+}
+
+.btn-small {
+  font-size: $font-size-small;
+  padding: $button-padding-small;
+}
+
+.btn-large {
+  font-size: $font-size-large;
+  padding: $button-padding-large;
+}
+
+.btn-icon {
+  padding: $button-padding-minimal;
+
+  .icon {
+    padding: 0;
+  }
+}
+
+.btn-minimal {
+  padding: $bu-padding-minimal;
+}
+
+.btn-block {
+  width: 100%;
+}
+
+.btn-sectioned {
+  display: block;
+  @include clearfix();
+
+  > .btn,
+  > .pager,
+  > .pager + .pager {
+    margin-left: -1px;
+    margin-right: 0;
+    float: left;
+    position: relative;
+
+    &:hover {
+      z-index: 2;
+    }
+
+    &:focus,
+      &:active {
+      z-index: 3;
+    }
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:not(:last-child) {
+      @include border-right-radius(0);
+    }
+
+    &:not(:first-child) {
+      @include border-left-radius(0);
+    }
+  }
+}
+
+

data/_sass/_cancel.scss

@@ -0,0 +1,13 @@
+
+
+.cancel {
+  color: inherit;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  font-size: 24px;
+  line-height: 1;
+  float: right;
+  background: none;
+  margin-top: -1px; // fix icon top padding
+}

data/_sass/_checkbox.md

@@ -0,0 +1,55 @@
+# Checkbox
+
+Für Checkboxen ist in HTML das Tag `<input type="checkbox">` vorgesehen. Da es für Checkboxen bisher keine Möglichkeit gibt, ihnen mit einfachen CSS-Mitteln ein angemessenes Aussehen zu verleihen kommt Javascript zum Einsatz. Zunächst sollte über die Klasse `.form-checkbox` der Checkbox das Grundgerüst verliehen werden. Ein jQuery-Plugin sorgt nun für die nötige Modifikation:
+
+```javascript
+$('.form-checkbox').checkbox()
+```
+
+<div class="tc-example" role="application">
+  <fieldset class="form-fieldset">
+    <legend>Gruppen Beschriftung</legend>
+    <div class="form-checkbox-set">
+      <label>
+        <input type="checkbox" name="cb0" value="0" class="form-checkbox">foo
+      </label>
+    </div>
+    <div class="form-checkbox-set">
+      <label>
+        <input type="checkbox" name="cb1" value="1" class="form-checkbox" checked>bar
+      </label>
+    </div>
+    <div class="form-checkbox-set">
+      <label>
+        <input type="checkbox" name="cb2" value="2" class="form-checkbox" disabled>Inaktiv
+      </label>
+    </div>
+  </fieldset>
+</div>
+
+```html
+<fieldset class="form-fieldset">
+  <legend>Gruppen Beschriftung</legend>
+  <div class="form-checkbox-set">
+    <label>
+      <input type="checkbox" name="cb0" value="0" class="form-checkbox">foo
+    </label>
+  </div>
+  <div class="form-checkbox-set">
+    <label>
+      <input type="checkbox" name="cb1" value="1" class="form-checkbox" selected>bar
+    </label>
+  </div>
+  <div class="form-checkbox-set">
+    <label>
+      <input type="checkbox" name="cb2" value="2" class="form-checkbox" checked>Inaktiv
+    </label>
+  </div>
+</fieldset>
+```
+
+<div class="tc-note">
+**Anmerkung:**
+Werden Checkboxen dynamisch via Javascript oder über einen Ajax-Call
+hinzugefügt, muss das Plugin explizit auf die neuen Elemente angewand werden.
+</div>

data/_sass/_checkbox.scss

@@ -0,0 +1,124 @@
+//
+// Checkbox - JS
+// ----------------------------------------
+
+.form-checkbox-js {
+  width: 22px;
+  height: 22px;
+  font-size: 24px;
+  padding: 0;
+  border: 0;
+  background-color: $checkbox-bgr-color;
+  border-radius: (12px / 3);
+  font-family: 'TeleIconUi';
+  line-height: 1px;
+  position: relative;
+  -webkit-font-smoothing: antialiased; // reduce font weight
+  -moz-osx-font-smoothing: grayscale; // reduce font weight
+  @include user-select(none);
+  @include transition(all $transition-time-out $transition-function);
+
+  &.focus,
+  &:focus {
+    outline: 0;
+  }
+
+  &.focus { // since we simulate the focus behavior, we need a real class
+    background-color: hsv-darken($checkbox-bgr-color, 21%, true);
+  }
+
+  &.hover,
+  &:hover {
+    background-color: hsv-darken($checkbox-bgr-color, 7%, true);
+    @include transition($transition-time-in, '-duration');
+  }
+
+  &.active,
+  &:active {
+    background-color: hsv-darken($checkbox-bgr-color, 15%, true);
+  }
+
+  // outline
+  > .border {
+    color: $checkbox-border-color;
+    position: absolute;
+    top: 9px;
+    left: -1px;
+
+    &:before {
+      content: 'A';
+    }
+  }
+
+  > .check {
+    font-size: 24px;
+    position: absolute;
+    top: 9px;
+    left: -1px;
+    color: $checkbox-check-color;
+
+    &:before {
+      content: '';
+    }
+  }
+
+  &.checked > .check:before {
+    content: 'B';
+  }
+
+  fieldset[disabled] &,
+  &[disabled],
+  &.disabled {
+    cursor: not-allowed;
+    background-color: $checkbox-disabled-bgr-color;
+
+    > .border:before {
+      color: $checkbox-disabled-border-color;
+    }
+
+    > .check:before {
+      color: $checkbox-disabled-check-color;
+    }
+  }
+
+  .form-checkbox-set & {
+    vertical-align: middle;
+    float: left;
+    margin-left: -36px;
+    margin-right: 12px;
+  }
+}
+
+// <= IE8
+
+.lte-ie8 {
+  .form-checkbox-js {
+    background-color: transparent !important;
+    background-repeat: no-repeat;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAYCAYAAAAxkDmIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozNzdDRDJBNDk3RTFFMzExODA1Q0VBNjZFMjk1MzI2MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxRDA0Mjc4MUUxQTcxMUUzOUIxMEY2RkFFQTZEM0FCMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxRDA0Mjc4MEUxQTcxMUUzOUIxMEY2RkFFQTZEM0FCMSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM4N0NEMkE0OTdFMUUzMTE4MDVDRUE2NkUyOTUzMjYyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM3N0NEMkE0OTdFMUUzMTE4MDVDRUE2NkUyOTUzMjYyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+HYcNygAAAP5JREFUeNrsmjFqwzAAReWQsRDImgNk8wlaqiUn6pqxa27SGxQ6lR7BNzAEhAWCroF8geZ2SD6C8B58Izw8Yx7ePCzLEsROO2nP7XwLs/atveWc53bP4k8pWf2lFKs/xmj11/OgwHsdfrRtuC9Ze1Hki9OvyFa/Ilv9imz1r3V5N8hDc1b3BX8/fw18CD4O7QXwd/LXwBvjA56CF/z/+FcBHhoCExgIDAQGAgOBgcBAYAIDgYHAQGAgMBAY/g5cjP5f/H39NfCX8QGf+Pv66x8dR+01eH76OrYz/k7++gVP2qh9aOc7iM/NNeacJ6c/pWT1l1Ks/hij1V/dVwEGAJDahM+tVIFSAAAAAElFTkSuQmCC');
+
+    &.focus,
+    &:focus {
+      background-position: -72px 0;
+    }
+
+    &.hover,
+    &:hover {
+      background-position: -24px 0;
+    }
+
+    &.active,
+    &:active {
+      background-position: -47px 1px; // -48px 0 -3d click fx ie
+    }
+
+    &[disabled],
+    &.disabled {
+      background-position: -96px 0;
+    }
+  }
+}
+
+.lte-ie8 fieldset[disabled] .form-checkbox-js {
+  background-position: -96px 0;
+}

data/_sass/_close.scss

@@ -0,0 +1,16 @@
+//
+// Close
+// ----------------------------------------
+
+.close {
+  color: inherit;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  font-size: 24px;
+  line-height: 1;
+  font-family: 'TeleIconUi';
+  float: right;
+  background: none;
+  margin-top: -1px; // fix icon top padding
+}

data/_sass/_collapse.scss

@@ -0,0 +1,30 @@
+//
+// Collapse
+// --------------------------------------------------
+
+.collapse {
+  display: none;
+
+  &.in      { display: block; }
+}
+
+.collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  transition-property: height, visibility;
+  transition-duration: .35s;
+  transition-timing-function: ease;
+}
+
+.collapse-open {
+  margin-top: building-units(-4);
+  margin-left: building-units(1);
+  display: block;
+  opacity: 0;
+  @include transition(opacity $transition-time-out $transition-function);
+
+  &.collapsed {
+    opacity: 1;
+  }
+}

data/_sass/_content-list.md

@@ -0,0 +1,375 @@
+<!--
+//
+//
+// Content-Listen
+-->
+
+Die Content-Liste schließt die Lücke zwischen Textlisten und Tabellen.
+Sie kommt überall dort zum Einsatz, wo mehr als eine textuelle
+Aufzählung gefragt ist, aber es sich nicht um tabellarische Inhalte
+dreht.
+
+Da die Content-Liste eine unsorierte Liste ist, wird die CSS-Klasse
+`.content-list` auch auf das `<ul>`-Tag angewendet. Listen-Elemente `<li>`
+erhalten die CSS-Klasse `.content-list-item`.
+
+<div class="tc-example">
+  <div style="width: 270px; margin: 0 auto 20px auto;">
+    <h2 class="underline">Headline</h2>
+    <ul class="content-list">
+        <li class="content-list-item">Entry</li>
+        <li class="content-list-item">Entry</li>
+        <li class="content-list-item">Entry</li>
+        <li class="content-list-item">
+            <div class="text-ellipsis">Entry One with Example Content Ellipsed Ellipsed</div>
+        </li>
+    </ul>
+  </div>
+</div>
+
+```html 
+<ul class="content-list">
+    <li class="content-list-item">Entry</li>
+    ...
+    <! -- einzeilige Darstellung -->
+    <li class="content-list-item">
+        <div class="text-ellipsis">Entry One with Example Content Ellipsed Ellipsed</div>
+    </li>
+</ul>
+```
+
+## Content-Liste mit Beschreibung
+
+Für die Formatierung eines Listeneintrags kommt eine sog. Mikrokomponente
+zum Einsatz. Die CSS-Klasse `.media` fungiert dabei als Kontainerklasse
+für die Mikrokomponente. Die Media-Komponente besteht dabei mindestens
+aus einem `.media-body` und einem `.media-heading`.
+Beschreibungen werden innerhalb des `.media-body` mit der CSS-Klasse
+`.media-hint` versehen:
+
+<div class="tc-example">
+  <div style="width: 270px; margin: 0 auto 20px auto;">
+    <h2 class="underline">Headline</h2>
+    <ul class="content-list">
+        <li class="media">
+            <div class="media-body">
+                <div class="media-heading">Entry One</div>
+                <div class="media-hint">Additional information</div>
+            </div>
+        </li>
+        <li class="media">
+            <div class="media-body">
+                <div class="media-heading">Entry Two</div>
+                <div class="media-hint">
+                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+                    sed diam nonumy eirmod tempor invidunt ut labore et dolore
+                    magna aliquyam erat, sed diam voluptua. At vero eos et
+                    accusam et justo duo dolores et ea rebum. Stet clita
+                    kasd gubergren, no sea takimata
+                </div>
+            </div>
+        </li>
+        <li class="media">
+            <div class="media-body">
+                <div class="media-heading">Entry Three</div>
+                <div class="media-hint">Additional information</div>
+            </div>
+        </li>
+        <li class="media">
+            <div class="media-body">
+                <div class="media-heading text-ellipsis">Entry Four</div>
+                <div class="media-hint">Additional information</div>
+            </div>
+        </li>
+    </ul>
+  </div>
+</div>
+
+```html 
+<ul class="content-list"> 
+  ...
+  <li class="media">
+      <div class="media-body">
+          <div class="media-heading">...</div>
+          <div class="media-hint">...</div>
+      </div>
+  </li>
+  ...
+</div>
+```
+
+## Content-Liste mit Bild
+
+Zusätzliche Informationen können links von Listeneinträgen mit der CSS-Klasse
+`.media-left` oder rechts von Listeneinträgen mit der CSS-Klasse `.media-right`
+eingefügt werden. Für die vertikale Positionierung stehen die CSS-Klassen
+`.media-top`, `.media-bottom` zur Verfügung. Standard ist `middle`, also zentriert.
+
+Soll ein Listeneintrag mit einem Thumbnail versehen werden so wird ein
+`.img-frame` benötigt das das `.img-thumbnail` enthält.
+Bei Listen mit Bild aber ohne Beschreibung sieht der Styleguide vor eine
+kleinere Bild-Variante `.img-frame-small` zu wählen:
+
+<div class="tc-note">
+**Anmerkung:**
+Innerhalb der CSS-Klasse `.img-frame` dürfen keine Leerzeichen oder
+Zeilenumbrüche verwendet werden, da es sonst zu Problemen im Layout führen kann.
+</div>
+
+<div class="tc-example">
+  <div style="width: 270px; margin: 0 auto 20px auto;">
+    <h2 class="underline">Headline</h2>
+    <ul class="content-list">
+        <li class="media">
+            <div class="media-left media-top">
+                <div class="img-frame img-frame-small"><img src="assets/play.jpg" class="img-thumbnail" width="38" height="28" alt="Junge mit Hut horizontal"></div>
+            </div>
+            <div class="media-body">
+                <div class="media-heading">Entry One</div>
+            </div>
+        </li>
+        <li class="media">
+            <div class="media-left media-top">
+                <div class="img-frame img-frame-small"><img src="assets/play_square.jpg" class="img-thumbnail" width="38" height="38" alt="Junge mit Hut quadratisch"></div>
+            </div>
+            <div class="media-body">
+                <div class="media-heading">Entry Two</div>
+            </div>
+        </li>
+        <li class="media">
+            <div class="media-left media-top">
+                <div class="img-frame img-frame-small"><img src="assets/play_vert.jpg" class="img-thumbnail" width="28" height="38" alt="Junge mit Hut vertikal"></div>
+            </div>
+            <div class="media-body">
+                <div class="media-heading">Entry Three</div>
+            </div>
+        </li>
+    </ul>
+  </div>
+</div>
+
+```html 
+<ul class="content-list"> 
+  ...
+    <li class="media">
+        <div class="media-left media-top">
+            <div class="img-frame img-frame-small"><img class="img-thumbnail" ...></div>
+        </div>
+        <div class="media-body">
+            <div class="media-heading">...</div>
+        </div>
+    </li>
+  ...
+</div>
+```
+
+## Content-Liste mit Bild und Beschreibung
+
+Zuletzt noch die Content-Liste in der "Vollversion" mit Thumbnail und
+Beschreibung:
+
+<div class="tc-example">
+  <div style="width: 270px; margin: 0 auto 20px auto;">
+    <h2 class="underline">Headline</h2>
+    <ul class="content-list">
+        <li class="media">
+            <div class="media-left media-top">
+                <div class="img-frame"><img src="assets/play.jpg" width="48" height="36" class="img-thumbnail" alt="Junge mit Hut horizontal"></div>
+            </div>
+            <div class="media-body">
+                <div class="media-heading">Entry One</div>
+                <div class="media-hint">Additional information</div>
+            </div>
+        </li>
+        <li class="media">
+            <div class="media-left media-top">
+                <div class="img-frame"><img src="assets/play_square.jpg" width="48" height="48" class="img-thumbnail" alt="Junge mit Hut quadratisch"></div>
+            </div>
+            <div class="media-body">
+                <div class="media-heading">Entry Two</div>
+                <div class="media-hint">Additional information</div>
+            </div>
+        </li>
+        <li class="media">
+            <div class="media-left media-top">
+                <div class="img-frame"><img src="assets/play_vert.jpg" width="36" height="48" class="img-thumbnail" alt="Junge mit Hut vertikal"></div>
+            </div>
+            <div class="media-body">
+                <div class="media-heading">Entry Three</div>
+                <div class="media-hint">
+                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+                    sed diam nonumy eirmod tempor invidunt ut labore et dolore
+                    magna aliquyam erat, sed diam voluptua. At vero eos et accusam
+                    et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+                    no sea takimata
+                </div>
+            </div>
+        </li>
+    </ul>
+  </div>
+</div>
+
+```html 
+<ul class="content-list"> 
+  ...
+    <li class="media">
+        <div class="media-left media-top">
+            <div class="img-frame"><img class="img-thumbnail" ...></div>
+        </div>
+        <div class="media-body">
+            <div class="media-heading">...</div>
+            <div class="media-hint">...</div>
+        </div>
+    </li>
+  ...
+</div>
+```
+
+## Anwählbare Content-Liste
+
+Eine alternative stellt die anwählbare Content-Liste dar.
+Sie wird von der Syntax her jedoch anders aufgebaut.
+Da es sich bei einer wählbaren Liste um eine aneinanderreihung von Links
+handelt wird diese ebenso dargestellt:
+
+<div class="tc-example">
+  <div style="width: 270px; margin: 0 auto 20px auto;">
+    <h2 class="underline">Headline</h2>
+    <div class="content-list">
+        <a class="content-list-item" href="javascript: void(0);"><span class="badge badge-dark">1</span>Inbox</a>
+        <a class="content-list-item" href="javascript: void(0);"><span class="badge">1001</span>Outbox</a>
+        <a class="content-list-item" href="javascript: void(0);">Drafts</a>
+        <a class="content-list-item" href="javascript: void(0);">Deleted</a>
+    </div>
+  </div>
+</div>
+
+```html 
+<div class="content-list">
+    <a class="content-list-item">...</a>
+</div>
+```
+
+in Kombination mit dem Media-Modul:
+
+<div class="tc-example">
+  <div style="width: 270px; margin: 0 auto 20px auto;">
+    <h2 class="underline">Headline</h2>
+        <div class="content-list">
+            <a class="content-list-item media" href="javascript: void(0);">
+                <div class="media-left media-top">
+                    <div class="img-frame img-frame-small"><img src="assets/play.jpg" class="img-thumbnail" width="38" height="28" alt="Junge mit Hut horizontal"></div>
+                </div>
+                <div class="media-body">
+                    <div class="media-heading">Entry One</div>
+                </div>
+            </a>
+            <a class="content-list-item media" href="javascript: void(0);">
+                <div class="media-left media-top">
+                    <div class="img-frame img-frame-small"><img src="assets/play_square.jpg" class="img-thumbnail" width="38" height="38" alt="Junge mit Hut quadratisch"></div>
+                </div>
+                <div class="media-body">
+                    <div class="media-heading">Entry</div>
+                </div>
+            </a>
+            <a class="content-list-item media" href="javascript: void(0);">
+                <div class="media-left media-top">
+                    <div class="img-frame img-frame-small"><img src="assets/play_vert.jpg" class="img-thumbnail" width="28" height="38" alt="Junge mit Hut vertikal"></div>
+                </div>
+                <div class="media-body">
+                    <div class="media-heading">Entry</div>
+                </div>
+            </a>
+            <a class="content-list-item media" href="javascript: void(0);">
+                <div class="media-left media-top">
+                    <div class="img-frame img-frame-small"><img src="assets/play.jpg" class="img-thumbnail" width="38" height="28" alt="Junge mit Hut horizontal"></div>
+                </div>
+                <div class="media-body">
+                    <div class="media-heading">Entry</div>
+                </div>
+            </a>
+        </div>
+  </div>
+</div>
+
+```html 
+<div class="content-list">
+    <a class="content-list-item media">
+        <div class="media-left media-top">
+            <div class="img-frame img-frame-small"><img class="img-thumbnail" ...></div>
+        </div>
+        <div class="media-body">
+            <div class="media-heading">Entry One</div>
+        </div>
+    </a>
+    ...
+</div>
+```
+
+## Funktionale Betonungen
+
+Mit der CSS-Klasse `.selected` kann ein Eintrag einer Content-Liste vormarkiert werden:
+
+<div class="tc-example">
+  <div style="width: 270px; margin: 0 auto 20px auto;">
+    <h2 class="underline">Headline</h2>
+    <div class="content-list">
+        <a class="content-list-item selected" href="javascript: void(0);">
+          Menüpunkt 1<span class="sr-only">aktiv</span>
+        </a>
+        <a class="content-list-item" href="javascript: void(0);">Menüpunkt 2</a>
+        <a class="content-list-item" href="javascript: void(0);">Menüpunkt 3</a>
+        <a class="content-list-item" href="javascript: void(0);">Menüpunkt 4</a>
+    </div>
+  </div>
+</div>
+
+```html 
+<div class="content-list">
+  <a class="content-list-item selected">
+    Menüpunkt 1<span class="sr-only">aktiv</span>
+  </a>
+  ...
+</div>
+```
+
+Für Sonderfälle gibt es daneben auch noch die Brand-Variante `.content-list-item-brand`
+eines Content-Listen-Eintrags:
+
+<div class="tc-note tc-note-warning">
+**Achtung:**
+Die Brand-Variante darf nie in Kombination mit `.selected` auftreten,
+da die Schrift scheinbar verschwinden würde.
+</div>
+
+<div class="tc-example">
+  <div style="width: 270px; margin: 0 auto 20px auto;">
+    <h2 class="underline">Headline</h2>
+    <div class="content-list">
+        <a class="content-list-item" href="javascript: void(0);">Menüpunkt 1</a>
+        <a class="content-list-item" href="javascript: void(0);">Menüpunkt 2</a>
+        <a class="content-list-item content-list-item-brand" href="javascript: void(0);">Menüpunkt 3</a>
+        <a class="content-list-item" href="javascript: void(0);">Menüpunkt 4</a>
+    </div>
+  </div>
+</div>
+
+```html 
+<div class="content-list">
+  ...
+  <a class="content-list-item content-list-item-brand">
+    Menüpunkt 3
+  </a>
+  ...
+</div>
+```
+
+<div class="tc-note">
+**Anmerkung Barrierefreiheit:**
+Die eingesetzten Farben haben meist eine Bedeutung. Um diese Bedeutung auch
+beim Einsatz von Unterstützungstechnologien zu untermauern sollte der Text
+in den Content-Listen auch entsprechende Aussage haben. Alternativ kann
+zusätzlicher versteckter Text mit entsprechender Aussage durch
+die CSS-Klasse `.sr-only` hinterlegt werden.
+</div>
+