css-mastery-16-master/cssmastery-examples/chapter-10/css/menu.css

body {
  font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
  background-color: #EDF5F8;
  margin: 0;
  padding: 1em;
}

button {
  display: inline-block;
  vertical-align: 20%;
  cursor: pointer;
  border: 0;
  padding: .25em 1em;
  color: #fff;
  border-radius: .25em;
  *outline: none;
  font-size: 12px;
  background-color: #173b6d;
  background-image: linear-gradient(to bottom, #1a4a8e, #173b6d);
  -webkit-box-shadow: 0 .25em 0 rgba(23, 59, 109, 0.3);
  box-shadow: 0 .25em 0 rgba(23, 59, 109, 0.3), inset 0 1px 0 rgba(0, 0, 0, 0.3);
  transition: all 150ms ease-in;
}
button:focus {
  background-color: #2158a9;
  background-image: -webkit-linear-gradient(top, #2063c0, #1d4d90);
  background-image: linear-gradient(to bottom, #2063c0, #1d4d90);
}
button:active {
  box-shadow: 0 0 0 rgba(23, 59, 109, 0.3), inset 0 1px 0 rgba(0, 0, 0, 0.3);
  transform: translateY(.25em);
}

.menu-wrapper {
  min-width: 9em;
  max-width: 25em;
}

.menu {
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
}
.menu-settings {
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #eee;
  margin: 10px 0 0;
}

.menu-title {
  margin: 0;
  margin-bottom: .5em;
  vertical-align: middle;
}
.flip-trigger {
  margin-left: 0.5em;
}
.menu-list {
  margin: 0;
}

.menu-list li {
  border-bottom: 1px solid #ccc;
  line-height: 1.5; /* 24 px */
}

.checkboxes {
  list-style: none;
  padding: 0;
}
.checkboxes li {
  margin-bottom: .5em;
}
/* only target IE8+, so to speak. */
:root input[type="checkbox"] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
}

:root input[type="checkbox"] + label {
  line-height: 1.5;
  color: #333;
  padding-left: 1.5em;
  background-position: .125em 36%;
  background-repeat: no-repeat;
  -moz-background-size: 18px 18px;
  background-size: 18px 18px;
}

/** 
* fallbacks to png for when :checked is supported but no svg support/no js.
* (in effect for Android 2.X)
*/
:root input[type="checkbox"] + label {
  background-image: url(../images/checkbox-unchecked.png);
}
:root input[type="checkbox"]:checked + label {
  background-image: url(../images/checkbox-checked.png);
}
:root input[type="checkbox"]:focus + label {
  background-image: url(../images/checkbox-unchecked-focus.png);
}
:root input[type="checkbox"]:focus:checked + label {
  background-image: url(../images/checkbox-checked-focus.png);
}
/**
* Modern browsers supporting SVG will get the inline SVG as data URI:s.
* The SVG file is basically raw in the URL, but encoded to escape the SVG
* code.
* This boosts performance by cutting the number of requests and prevents
* an ugly "white flash" as the browser switches from one graphic to the next
* before all images have loaded.
*/

/* unchecked checkbox: */
:root.svgbg input[type="checkbox"] + label {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%20width%3D%2236%22%20height%3D%2236%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M35%2029c0%203.3-2.7%206-6%206H7c-3.3%200-6-2.7-6-6V7c0-3.3%202.7-6%206-6h22c3.3%200%206%202.7%206%206v22z%22%2F%3E%3C%2Fsvg%3E);
}
/* checked checkbox: */
:root.svgbg input[type="checkbox"]:checked + label {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%20width%3D%2236%22%20height%3D%2236%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M35%2029c0%203.3-2.7%206-6%206H7c-3.3%200-6-2.7-6-6V7c0-3.3%202.7-6%206-6h22c3.3%200%206%202.7%206%206v22z%22%2F%3E%3Cpath%20fill%3D%22%231A4A8E%22%20d%3D%22M26%205l5.2%206.7S19.1%2031.2%2019.1%2031.3L5%2021l4-4%209%207%208-19z%22%2F%3E%3C%2Fsvg%3E);
}
/* focused (but unchecked) checkbox: */
:root.svgbg input[type="checkbox"]:focus + label {
  color: #000;
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%20width%3D%2236%22%20height%3D%2236%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%235DA2F8%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M35%2029c0%203.3-2.7%206-6%206H7c-3.3%200-6-2.7-6-6V7c0-3.3%202.7-6%206-6h22c3.3%200%206%202.7%206%206v22z%22%2F%3E%3C%2Fsvg%3E);
}
/* checked and focused checkbox: */
:root.svgbg input[type="checkbox"]:focus:checked + label {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%20width%3D%2236%22%20height%3D%2236%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%235DA2F8%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M35%2029c0%203.3-2.7%206-6%206H7c-3.3%200-6-2.7-6-6V7c0-3.3%202.7-6%206-6h22c3.3%200%206%202.7%206%206v22z%22%2F%3E%3Cpath%20fill%3D%22%231A4A8E%22%20d%3D%22M26%205l5.2%206.7S19.1%2031.2%2019.1%2031.3L5%2021l4-4%209%207%208-19z%22%2F%3E%3C%2Fsvg%3E);
}