/* icons font-face */

html.js form#filters input[type="submit"] {
	display: none;
}

ul#container li {
	transition: opacity 1s linear;
}

#filters {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	width: 100%;
	padding: .5rem 0 0 0;
	background-color: #ffffff;
}

@media (min-width: 768px) {
	#filters.stuck {
		position: fixed;
		z-index: 100;
		top: 0;
		left: 22.5%;
		width: 75.5%;
		box-shadow: 0 1rem 1rem -1rem #808080;
	}
}

#filters fieldset {
	margin: .5rem;
}

#filters input[type='reset'],
#filters input[type='submit'],
#filters a {
	margin: 0 1rem 0 0;
}

#filters input:not([type='reset']):not([type='submit']),
#filters select {
	padding: .125rem .25rem;
}

#filters input[type='reset'],
#filters input[type='submit'] {
	padding: .25rem .5rem;
}

#filters fieldset.help,
#filters fieldset.buttons {
	flex-grow: 1;
}

#filters fieldset.buttons {
	text-align: right;
}

@keyframes pulse {
	0% { color: #036; }
	50% { color: #ffffff; }
}

#summary.busy {
	animation-name: pulse;
	animation-duration: .5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#container h2 {
  margin: 0 0 .6em 0;
  padding: 0;
  line-height: 1;
  overflow-wrap: break-word;
}

ul#container > li {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  min-width: 20em;
  margin: 1em auto 0 auto;
  border-style: solid;
  border-color: #d2cfcf;
  border-width: 1px 0 0 0;
  padding: 1em 1em 0 1em;
  vertical-align: top;
}

ul#container > li > p,
ul#container > li > ul {
	padding: 0;
}

ul#container > li > p {
  margin-bottom: .2em;
}

ul.taglist li{
  display: inline-block;
  position: static;
  color: black;
  font-size: 12px;
  line-height: 10px;
  padding: 4px 8px;
  margin: 2px 0.5px;
}

ul.editorlist {
  margin-top: 4px;
  padding-left:20px;
  line-height: 1.1;
}
ul.editorlist li {
  display: inline;
  color: black;
  font-size: smaller;
}
ul.editorlist li:after {
  content: ", ";
}
ul.editorlist li:last-child:after {
  content: "";
}
div#triggers > span {
  margin-right: 30px;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 5px 15px;
  border: none;
  display: inline-block;
  color: #2e2e2e;
  background-color: rgba(0, 0, 0, 0.05);
}
div#triggers > span:hover {
	background-color: rgba(0, 0, 0, 0.1);
}
.selected {
  color: #2D3743;
  font-weight: bold;
  cursor: default !important;
  background-color: rgba(0, 0, 0, 0.1);
}

.profile {
  float: right;
  margin-left: 15px;
  background-color: #036;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;

}

div#legend > p > em {
  margin-right: 5px;
  color: #2D3743;
}

p.deliverer, p.deliverer + p {
  padding-top:0;
}

p.deliverer {
  color: #777;
}

p.pubdetails {
  font-size: 0.9em;
  margin: 1em 0;
}

input#search {
	border: 2px solid #CCC;
	padding: 5px 9px;
	margin: 5px;
    height: 21px; /*added to normalise w.r.t other boxes*/
    background: none !important;
}

/* == Cosmetic enhancements == */

li.accessibility {background-color: #ede5f4}
li.browser {background-color: #a8c5a9}
li.css {background-color: #a7cd78}
li.data {background-color: #94c4b4}
li.dom {background-color: #e48497}
li.graphics {background-color: #82e3ff}
li.html {background-color: #ff9c49}
li.http {background-color: #99dcd4}
li.i18n {background-color: #b5e6fd}
li.media {background-color: #b093b6}
li.performance {background-color: #88bcc7}
li.privacy {background-color: #bbb2b0}
li.protocol {background-color: #f0ffbb}
li.security {background-color: #7ba4c2}
li.webapi {background-color: #f5c45d}
li.wot {background-color: #a6b2ef}
li.xml {background-color: #95d3d4}

/** future tags
li. {background-color: #e5e1de}
li. {background-color: #dbe9df}
li. {background-color: #dba6a2}
li. {background-color: #c6e1cf}
li. {background-color: #d0e876}
li. {background-color: #f8d7de}
li. {background-color: #b5f0f5}
li. {background-color: #b4bbfa}
li. {background-color: #fcf4b5}
li. {background-color: #99b8d6}
li. {background-color: #fbceed}
li. {background-color: #a4a1a1}
li. {background-color: #d4e5be}
li. {background-color: #afabe1}
li. {background-color: #a6c5dd}
li. {background-color: #f09a6d}
li. {background-color: #8bc8fa}
li. {background-color: #ffb1b2}
li. {background-color: #9bbada;}
li. {background-color: #fbeede}
li. {background-color: #dbd372}
li. {background-color: #b68bbf}
li. {background-color: #B8FF92}
li. {background-color: #dedeea}
li. {background-color: #ffb4b4}
li. {background-color: #fef7cd}
li. {background-color: #d6dae9}
li. {background-color: #b3a7a5}
li. {background-color: #bf6972}
li. {background-color: #76cdf1}
li. {background-color: #9fc814}
li. {background-color: #afb0ab}
li. {background-color: #8dc688}
li. {background-color: #fa8888}
li. {background-color: #b87db0}
li. {background-color: #aaa5a1}
li. {background-color: #B987B0}
li. {background-color: #90bcb4}
li. {background-color: #d6e6e3}
li. {background-color: #d1f0f5}
li. {background-color: #f0fef0}
li. {background-color: #d0c5b1}
li. {background-color: #cdccfe}
li. {background-color: #f8c1af}
li. {background-color: #71c77a}
li. {background-color: #a0ffff}
li. {background-color: #56aba2}
li. {background-color: #edeef3}
li. {background-color: #7598ad}
li. {background-color: #d8ffff}
li. {background-color: #73A4DC}
li. {background-color: #ffdeff}
li. {background-color: #c1cf95}
li. {background-color: #ffeb70}
li. {background-color: #ffe24f}
li. {background-color: #cc9759}
li. {background-color: #d8b5bc}
li. {background-color: #dfffc9}
li. {background-color: #70a8fc}
li. {background-color: #80ffff}
li. {background-color: #d7a35e}
li. {background-color: #d5c8ff}
li. {background-color: #c1b9b8}
li. {background-color: #dfffc9}
li. {background-color: #98c1dd}
li. {background-color: #A6FFFF}
li. {background-color: #adfb94}
li. {background-color: #f6cdc8}
li. {background-color: #7bc2d4}
li. {background-color: #d4a9ff}
li. {background-color: #e5ff4d}
li. {background-color: #b5ffea}
li. {background-color: #e2e4af}
li. {background-color: #a4a0d5}
li. {background-color: #e5665d}
li. {background-color: #f6e4e2}
li. {background-color: #e8e4a3}
li. {background-color: #969b9c}
li. {background-color: #cdfb0c}
li. {background-color: #92d2a3}
li. {background-color: #ff855f}
li. {background-color: #b5a5a5}
li. {background-color: #9798e1}
li. {background-color: #f8d593}
li. {background-color: #e4a7b4}
li. {background-color: #fceee5}
li. {background-color: #d3f894}
li. {background-color: #fd7575}
li. {background-color: #94cb76}
li. {background-color: #95b3d4}
li. {background-color: #f3f4ef}
li. {background-color: #82e3fc}
li. {background-color: #edeee9}
li. {background-color: #fc8b82}
li. {background-color: #f4c482}
li. {background-color: #a7c3aa}
li. {background-color: #1dd803}
li. {background-color: #d7d5bc}
li. {background-color: #12a1f8}
li. {background-color: #8586c6}
li. {background-color: #aa7177}
li. {background-color: #a574ba}
li. {background-color: #e5deee}
li. {background-color: #faacdd}
li. {background-color: #6fc88d}
li. {background-color: #f4c96f}
li. {background-color: #5da29b}
*/

a.trhelp {
	border: 0 solid #c6d4e0;
	border-radius: .75rem;
	padding: .25rem .5rem;
	font-weight: bold;
	color: black;
	background-color: #ebf0f4;
	transition: background-color .25s linear;
}

a.trhelp:hover,
a.trhelp:active,
a.trhelp:focus {
	background-color: #c6d4e0;
}

a.trhelp span {
	display: none;
	font-weight: normal;
}

a.trhelp:hover span,
a.trhelp:active span,
a.trhelp:focus span {
	display: block;
	position: absolute;
	border: 1px solid #c6d4e0;
	padding: .125rem .5rem;
	background-color: #ffffff;
	color: #000000;
}

/* == RWD == */

ul#container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

@media all and (min-width: 992px) {
  ul#container > li {
		width: 50%;
	}
}

@media all and (min-width: 1200px) {
  ul#container > li {
		width: 33%;
	}
}

/* Smartphones & tablets */

@media all and (max-width: 920px) {

  h3.category .ribbon{
    font-size: 90%;
    }

  .w3c_leftCol, h1.logo{
      min-width: 150px;
    }

  .title{
      padding: 15px;
    }

  .bct{
      padding: 10px 5px;
    }

  .main_nav{
      padding: 7px 5px;
    }

  .w3c_sec_nav{
      padding: 3px 0px;
    }

  #w3c_nav{
      padding-bottom: 10px;
    }

}

/* Smartphones only */
@media all and (max-width: 520px) {

    ul.editorlist {
      padding-left: 5px;
}

    ul ul, ol ol {
      padding: 0px 3px;
}

    .tMargin{
      margin-top: 0 !important;
    }

    #w3c_mast h1{
      width: 100%;
    }
}