sandbox-kinderlandwien/sandbox/css/default.css

/**
 * Basic elements
 *
 * very general basic rules for all fitting elements.
 *
 * @what
 *   everything reset
 *   html
 *   body
 *   headings
 *   content elements
 *   list styles
 *   code
 *   image
 *   abbreviation
 *   horizontal rule
 *   tables
 *   forms
 *   paginations
 *   helper classes
 *   columns
 *   skip link
 */
*{
  margin: 0;
  padding: 0;
}

/* Font size to 10px at body */
html{
  font-size:1.25em;
}
body{
  font-size: 0.5em;
}

/**
 * container for non-responsive elements
 *
 * youtube/video 16:9 iframe
 * @see  https://benmarshall.me/responsive-iframes/?utm_source=duckduckgo.com&utm_medium=organic&utm_campaign=DuckDuckGo&redirect=1
 *
 * tables
 * @see  https://mdbootstrap.com/docs/jquery/tables/responsive/
 *
 * @see  more posibilities with aspect ratio
 *       https://css-tricks.com/responsive-iframes/
 *
 */
.iframe-container{
  overflow:hidden;
  padding-top:56.25%; /* 16:9 aspect ratio */
  position:relative;
}
.iframe-container > iframe{
  border:0;
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
}
.table-container{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  -ms-overflow-style:-ms-autohiding-scrollbar;
}

/* headings */
h2,
h3,
h4,
h5,
h6 {
  margin:0 0 0.3em 0;
}

/* content elements */
p,
table,
ul,
ol,
dl,
dt,
dd,
.columns,
img {
  margin:0 0 1em 0;
}
ul,
ol{
  padding-left:1.5em;
}

/* list styles */
ul          { list-style-type: disc;   }
ul ul       { list-style-type: circle; }
ul ul ul    { list-style-type: square; }
ul ul ul ul { list-style-type: circle; }

ol       { list-style-type: decimal;     }
ol ol    { list-style-type: lower-alpha; }
ol ol ol { list-style-type: decimal;     }
ul ul,
ul ol,
ol ol,
ol ul{
  padding-top:0.5em;
}
dt {
  margin-bottom:0;
}
dd {
  margin-bottom:0.5em;
}

/* code */
pre, code, tt{}
pre{}

/* image */
img{
  height:auto;
}

/* abbreviation */
abbr {
  cursor: help;
  white-space: nowrap;
}

/* horizontal rule */
hr{
  border:1px solid #E1E1E1;
  border-width:0 0 1px 0;
  margin:3em 0;
}
.content hr{
  clear:both;
}

/* tables */
table{
  width:100%;
}
th{
  text-align:left;
}
tbody{
  border-color:transparent;
}
tr.even,
tr.odd{
  background:none;
}
td,
th{
  padding:0.3em 0.5em;
}
tr.even td,
tr.odd td{
}
tr + tr td,
thead + tbody tr:first-child td{
  border-top:1px solid #E1E1E1;
}
table .views-field-title{
  min-width:50vw;
}

/* forms */
fieldset{
  margin:0 0 0.5em 0;
}
label[for]{
  cursor:pointer;
}
button,
input,
select,
textarea{
  background:#F6F6F6;
  border:none;
  padding:0.3em 1em 0.4em 1em;
  line-height:2;
  margin:0 2% 1em 0;
  color:#666666;
  max-width:100%;
  transition:all ease 500ms;
  box-sizing:border-box;
  border:1px solid #E6E6E6;
}
.content button,
.content input,
.content select,
.content textarea{
	font-size:1em;
}
.form-textarea-wrapper textarea{
  color:#666666;
}
input{
  padding-left:0;
  text-indent:1em;
}
input.text-full{
  width:100%;
  margin-right:0;
}
input,
select,
textarea{
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea{
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
textarea:focus{
	outline:0;
  color:#000000;
}
.content button,
.content input,
.content select,
.content textarea{
  padding:0.285714286em 0.714285714em;
}
textarea{
  line-height:1.4;
  padding-top:0.7em;
  padding-bottom:0.7em;
}
/* It's rather heartwarming to know you can style a <select> in a rather cross-browser friendly way that doesn't hurt accessibility. Kudos for documenting this Scott! */
select{
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0.1em 2em 0.2em 0.8em;
  border: 1px solid #E6E6E6;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%237F7F7F%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-color: #FFFFFF;
  background-position: right 0.7em top 50%;
  background-size: 1em auto;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
  display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
  select {
    background: none\9;
    padding: 5px\9;
  }
}
.content select{
  padding-right:2em;
  width:auto;
}
button,
input[type="color"],
input[type="reset"],
input[type="button"],
input[type="submit"]{
  text-align:center;
  padding-left:1em;
  padding-right:1em;
  text-indent:0;
  border:1px solid #D5D5D5;
  cursor:pointer;
}
button:hover,
button:focus,
input[type="submit"]:focus,
input[type="submit"]:hover{
  border-color:#CCCCCC;
  color:#000000;
}
button[disabled],
input[disabled],
select[disabled],
textarea[disabled]{
	opacity:.5;
}
#block-search-form div{
  display:block;
}
input[type="checkbox"],
input[type="radio"] {
	padding: 0;
	margin-bottom:0.5em:
}
/* Paginations */
.pager{
  padding:0;
  text-align:center;
}
.pager li{
  list-style:none;
  display:inline;
}
.pager li a{
  display:inline-block;
  padding:0 0.5em;
}
.pager li.pager-current{
  padding:0 0.5em;
}

.pager li.pager-first a,
.pager li.pager-previous a,
.pager li.pager-next a,
.pager li.pager-last a{
  text-indent: -999em;
}
.pager li.pager-first a:before,
.pager li.pager-previous a:before,
.pager li.pager-next a:before,
.pager li.pager-last a:before{
  display:block;
  float:left;
  text-indent: 0;
  font-size:1.8em;
  position:relative;
  text-align: center;
  top:-0.4em;
}
.pager li.pager-first    a:before { content:"\00AB"; }
.pager li.pager-previous a:before { content:"\2039"; }
.pager li.pager-next     a:before { content:"\203A"; }
.pager li.pager-last     a:before { content:"\00BB"; }

/**
 * Helper classes
 * ==============
 * They provide simple, selffulfilling properties
 * which are readable by their names.
 * ----------------------------------------------
 * hide-block     { display:block;
 *                  position:absolute;
 *                  left:-9999em;       }
 * hide-text      { text-indent:-999em; }
 * align-left     { text-align:left;    }
 * align-center   { text-align:center;  }
 * align-right    { text-align:right;   }
 * align-justify  { text-align:justify; }
 * nowrap         { white-space:nowrap; }
 * float-left     { float:left;         }
 * float-right    { float:right;        }
 * clear          { clear:both;         }
 * clear-left     { clear:left;         }
 * clear-right    { clear:right;        }
 * clearfix       - see below
 * ----------------------------------------------
 * Legacy names which have the same funcionality:
 * left, floatleft
 * right, floatright
 * clearFloat
 * invisible
 * hideBlock
 * hideText
 * hideAccessible
 */
/* Hidings / Image replacement */
.invisible {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 8 */

  filter: alpha(opacity=0);
  /* IE 5-7 */

  -moz-opacity: 0;
  /* Netscape */

  -khtml-opacity: 0;
  /* Safari 1.x */

  opacity: 0;
  /* Good browsers */
}
.hide-block {
  display: block;
  position: absolute;
  left: -999em;
}
.hide-text {
  text-indent: -999em;
}
/* Text alignment */
.align-left {
  text-align: left;
}
.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}
.align-justify {
  text-align: justify;
}
/* Text wrapping */
.nowrap {
  white-space: nowrap;
}
/* Floats */
.float-left,
img.alignleft,
figure.alignleft {
  float: left;
}
.float-right,
img.alignright,
figure.alignright {
  float: right;
}
/* Clear floats */
.clear {
  clear: both;
}
.clear-left {
  clear: left;
}
.clear-right {
  clear: right;
}
/**
 * Micro Clearfix for modern browsers by Nicolas Gallagher
 * =======================================================
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * -------------------------------------------------------
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */

  display: table;
  /* 2 */

}
.clearfix:after {
  clear: both;
}
/**
 * For IE 6/7 only
 * ===============
 * Include this rule to trigger hasLayout and contain floats.
 * ----------------------------------------------------------
 * THERE BE DRAGONS!
 * IF USING CLEARFIX FOR IE7 YOU HAVE TO AVOID MARGIN ON THE
 * INNER ELEMENT AND PUT PADDING ON THE OUTER.
 */
.lt-ie8 .clearfix {
  zoom: 1;
}


/**
 * columns
 */
.columns{
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -ms-flex-pack: distribute;
  justify-content: space-between;
}
.columns .column{
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}

/**
 * Media query: min-width: 600px
 * =============================
 */
@media screen and (min-width: 600px) {
  .columns.double .column,
  .columns.quadruple .column{
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }
}

/**
 * Media query: min-width: 767px
 * =============================
 */
@media screen and (min-width: 767px) {
  .columns.triple .column{
    -ms-flex-preferred-size: 32.17%;
    flex-basis: 32.17%;
  }
}

/**
 * Media query: min-width: 987px
 * =============================
 */
@media screen and (min-width: 987px) {
  .columns.quadruple .column{
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
  }
}

/* "Skip to Main Content" link
 * ---------------------------
 * This link useful for both visually impaired people and those with mobility impairments
 * who cannot use a mouse. http://www.webaim.org/techniques/css/invisiblecontent/ */
#skip{
  position:absolute;
  height:0;
  top:20px;
  left:20px;
  z-index:100;
}
#skip li{
  list-style:none;
}
#skip a{
  white-space:nowrap;
}
#skip a:link, #skip a:hover, #skip a:visited {
  position: absolute;
  left: -10000px;
  top: auto;
  display:block;
}
#skip a:active, #skip a:focus {
  left:auto;
  padding:3px 1em;
  background:#FFFFFF;
  color:#111111;
  outline:0;
  border:1px solid #111111;
  -webkit-box-shadow:  0px 0px 0px 10px rgba(0, 0, 0, 0.3);
  box-shadow:  0px 0px 0px 10px rgba(0, 0, 0, 0.3);
}