/**
 * responsejs.com primary styles
 * @author Ryan Van Etten
 */
 
::-moz-selection { background:#ed0; color:#002b36; }
   ::selection { background:#ed0; color:#002b36; }
 
html.not(.solarized) { background:#ffd; color:#222; }

:not(details) [contenteditable],:not(details) [contenteditable]:focus{outline:0 solid transparent}
:not(details) [contenteditable]:focus{border-color:#ed3}
.dark :not(details) [contenteditable]:focus{border-color:#268bd2}

div.codex pre,.dark div.codex pre{padding:1em 2em!important}
div.codex pre { border-left:1em solid #eee8d5; }
.dark div.codex pre { border-left:1em solid #073642 }

.h code { font-family:sans-serif }
body {
  font:normal 1em sans-serif;
  line-height:1.4;
  width:96%; max-width:1024px;
	padding:0 2%; margin:0 auto;
}
nav ul { padding-left:0;list-style-type:none }

/*hide style switcher by default below 320 and always when there's no native media queries:*/
[data-taos-style] { display:none }
.no-mediaqueries [data-taos-style] { display:none!important }

code abbr[title]{border-bottom:0}
pre,table.docblock{}
table.docblock+pre { padding-top:0 }
pre a { color:#d33682;font-weight:bold }
code a { color:inherit;font-weight:inherit }
a.hashtag { color:#b58900 }
code a:hover,a.hashtag:hover { color:#268bd2 }
.docblock tr { margin:.5em 0 }
.docblock td { padding:.5em 1.5em .5em }
a.docblock-tag,.docblock-tag a,a.docblock-type,.docblock-type a{color:inherit;font-weight:inherit}
.docblock-desc a { color:#839496 }
.docblock-desc a:hover { color:#c41 }
.freeform a:hover { color:#67c }
.docblock-tag,a.docblock-tag { color:#268bd2 }
.docblock-type,a.docblock-type { color:#b58900 }
.docblock-code { color:#839496 }
.attr { color:#859900 }
.esc_char { }
.solarized .cutoff { color:#dc322f }
 
/* no space between consecutive headers */
h1+h2,h2+h3,h3+h4,h4+h5,h5+h6,#branding h1{margin:0}

/* links */
a,summary,[role="button"] { color:#268bd2;font-weight:bold;text-decoration:none }
a:hover,summary:hover, [role="button"]:hover { color:#2aa198 } 
.oldie a { font-weight:inherit }

/* Header */
#header { display:block;overflow:hidden;padding-top:.36em }
#branding { width:100% }
#site-title { font-weight:normal;color:#002b36 } 
#site-title .extension{ display:none }
#tagline, #subtag { 
  display:inline-block;
  font-weight:normal;font-size:138%;
  width:90%; padding:5px 5% 1em;
  background:#268bd2; color:#fdf6e3;
}
#subtag, #byline { font-weight:normal;display:none}
#byline { 
  padding:1em 7% 1em 3%; margin-top:2px;
  background:#268bd2; color:#fdf6e3; 
}
.hlink,.solarized .hlink{ color:#002b36; }
.hlink:hover,.solarized .hlink:hover{ color:#fdf6e3 }

/* Logo (all CSS) */
#logo { 
  font-size:162%;
  background:#268bd2; color:#fdf6e3;
  padding:2em 5% 1em;width:90%; 
}
/* specify both these next rules for better cross-browser compat: */
#logo:first-letter,#site-title:first-letter {
  color:#268bd2; padding:.36em .36em 0 0;
  border-top:.6em solid #002b36; border-left:.6em solid #002b36;
}

/* Navigation */
#nav { text-transform:lowercase;font-weight:bold;margin:2px 0 0}
#nav { float:right;width:100%}
#nav .h { margin:0; background:#268bd2; color:#fdf6e3; }
#nav li { display:block;margin:0 0 2px}
#nav li a { display:inline-block; width:90%; padding:.9em 5%; background:#268bd2; color:#fdf6e3; }
#nav li a:hover { background:#d33682;color:#fdf6e3 }
.aside nav ul { list-style-type:disc;margin:1em 0 1em 1em;padding-left:1em }

/* Subheads (golden ratio borders) */ 
#main h2 { padding:.6em;border-left:.6em solid #eee8d5;margin:1em 0 .6em }
.dark #main h2 { border-left:.6em solid #073642 }
#main .h a,#main a .h { color:#d33682 }
.sub h1 a{ color:#d33682 }
.sub h1 a:hover { color:#cb4b16 }
#main a:hover .h,#main .h a:hover { color:#cb4b16 }
.oldie.no-js .h { border:0 }

/* Sections */
#main{clear:both;padding:1em 0}
#main abbr{}
.doc,.intro,#links section{margin:1em 0}
.doc,.intro{font-size:120%;padding:0 .36em}
@media all and (min-width:961px) {
  .doc,.intro{ padding:0 1.7em; }
}
.aside nav{width:94%;padding:1em 3%;margin:1em 0}
.aside nav>.h a{color:#678}
.sub:not(#overview){margin-bottom:3em}
#disqus_thread{clear:both;width:94%;margin:1em auto}
#share-buttons{clear:both;width:94%;margin:0 auto 2em}
.twitter-share-button{}
.fb-like{margin:10px!important}

@media all and (min-width:240px){
  #logo { font-size:200% }
}
@media all and (min-width:320px){
	#logo { font-size:320%; padding:1em 3% .8em; width:94%; border-top:.6em solid #268bd2; }
	#tagline, #subtag { padding:0 7% 1em 3% }
}
@media all and (min-width:481px){
	#logo{font-size:424%}		
	#subtag{display:inline-block}
	#links nav{max-width:42%;float:left}
	#links nav:nth-of-type(odd)  {margin:0 4% 4% 0!important}
	#links nav:nth-of-type(even) {margin:0 0 4% 0!important}
	.taos [data-taos-style] { 
    display:block; position:fixed;
    cursor:pointer;
    right:0;bottom:0;
    padding:2px 6px;
    background:#cb4b16;color:#fdf6e3; 
  }
	.taos.editable [data-taos-style] { background:#859900 }
	.taos [data-taos-style]:hover { background:#dc322f;color:#002b36 }
}

@media all and (min-width:641px) {

	#header { margin-top:2em; }
	#branding{float:left;width:40%}
	#logo {
    font-size:685%;
    background:#fdf6e3;
    padding:1em 0 0;
    border-top:1em solid #268bd2;
    border-left:1em solid #268bd2;
    word-wrap:normal;
  }
	.dark #logo{ background:#002b36 }
	#site-title{ font-weight:bold;color:#268bd2 }
	#site-title:hover { color:#d33682 }/*or green 0c1*/
	#logo:first-letter,#site-title:first-letter { color:#fdf6e3;padding:0;border:0 }
	.dark #logo:first-letter,.dark #site-title:first-letter { color:#002b36 }
	.no-js #logo { border:0 }
	.no-js #logo:first-letter,.no-js #site-title:first-letter { color:#002b36 }
	#tagline, #subtag, #byline { 
    font-size:162%;
    display:block;text-align:right;
    background:#d33682; color:#fdf6e3;
    width:376px; padding:.2em;
  }
	#tagline { margin:1.4em 0 0 }
  #subtag { padding-top:0 }
	.hlink { color:#fdf6e3!important; font-weight:inherit; }
	.hlink:hover { background:#d33682;color:#ed0!important; }
	#nav { width:40%;margin:0 }
	#nav li { margin:0 0 2px;white-space:nowrap }
	#nav li a { margin-left:40%;width:50%;text-align:right }
	/*  CSS3 transitions on <a>'s (excluding some of the header text) 
	  (The .csstransitions class is added on the <html> tag by Modernizr when supported.)
		These are what makes tracer effect in the logo. Syntax @link css3please.com */
	/*.csstransitions #logo,.csstransitions a:not(.hlink):not(#site-title),.csstransitions .hlink:hover,.csstransitions #site-title:hover{
		-webkit-transition:all .2s ease-out;
		   -moz-transition:background .2s ease-out;
		  -ms-transition:background .2s ease-out;
		   -o-transition:background .2s ease-out;
		    transition:background .2s ease-out;
	}*/
}
@media all and (min-width:701px){
  #site-title{margin-left:20%} 
}
@media all and (min-width:961px){
	/*body{width:98%;padding:0 1%}*/
	#logo {
    background:#268bd2;
    border-top:1em solid #fdf6e3;
    border-left:.8em solid #fdf6e3;
    padding:1em 0 0 .6em;
    font-size:685%;
  }
	.dark #logo { 
    background:#268bd2;
    border-top:1em solid #002b36;
    border-left:.8em solid #002b36;
  }
	#site-title { margin-left:79%;color:#268bd2}
  .dark #site-title { color:#ddc }
	#site-title:hover { color:#d33682 }
	#logo:first-letter,#site-title:first-letter { color:#ddc }
	.dark #logo:first-letter,.dark #site-title:first-letter { color:#ddc }
	#tagline,#subtag,#byline { 
    font-weight:normal;
    text-align:right;
    margin-left:540px;
    background:#fdf6e3;
    padding:0; 
  }
	.dark #tagline,.dark #subtag,.dark #byline { background:#002b36 }
	#tagline { margin-top:0 }
	.hlink { color:#d33682!important }
	.hlink:hover { color:#268bd2!important;background:#fdf6e3 }
	.dark .hlink:hover { color:#268bd2;background:#002b36 }
	#nav { padding-top:1em }
}
@media all and (min-width:1130px){
	/*html{border-left:1em solid #eee8d5}
	html.dark{border-left:1em solid #073642}*/
	/*html{background:#9aa}.dark{background:#012}*/
}

/* Browsers w/o JavaScript */
.no-js body{max-width:960px}
.no-js #logo{border-left:0}
.no-js #site-title,.no-js #tagline,.no-js #subtag,.no-js #byline{margin:0;float:none;color:#000}
/*/SITE */

.codex pre,.codex .pre{margin:.25em 0!important}

/*details{background:#eee8d5}.dark details{background:#073642}.oldie details{}
summary{background:#eee8d5}.dark summary{background:#073642}*/
summary{margin:1em 0 0;padding:1em 2%!important;width:96%}
details,summary{margin:0!important}
summary{margin:1em 0 !important}
details>*{padding:0 4%;width:92%}
details>summary+*{margin-top:0;padding-top:0}
/*details>:not(summary){padding:0 0 0 3%}*/
details>:last-child{padding-bottom:2em}
details+details{/*margin-top:1px!important;*/padding-top:0!important}
summary code{font:normal 138% sans-serif}
html.details summary,.taos summary{cursor:pointer}
/* fallback for <details> uses github.com/ryanve/taos 
   including .taos ensures that taos has been loaded */
/*.taos.no-details summary~*{display:none}*/
/*summary~*{display:none}
details[open] summary~*{display:block}*/

#getters a:not(:hover),.getters summary:not(:hover){color:#d33682}
#booleans a:not(:hover),.booleans summary:not(:hover){color:#859900}
#events a:not(:hover),.events summary:not(:hover){color:#268bd2}
#dom-dataset a:not(:hover),.dom-dataset summary:not(:hover){color:#cb4b16}
#filters a:not(:hover),.filters summary:not(:hover){color:#dc322f}
#extending a:not(:hover),.extending summary:not(:hover){color:#6c71c4}

/*.returns-r summary:after{content:" R";font-size:120%;color:#b58900}.returns-r summary:hover:after{color:#2aa198}*/
.jqueryish summary:after{content:" optional";font-size:120%;color:#b58900}.jqueryish summary:hover:after{color:#2aa198}
@media all and (min-width:540px) {
	/*.returns-r summary:after,*/.jqueryish summary:after{display:block;float:right}
}

/*.docblock dd,.solarized .docblock dt br+code{margin-left:1em}*/
.docblock dl+pre{margin-top:1em!important}
.docblock dt,.docblock dd{display:inline-block;*display:inline}
.docblock dd{margin-left:1em}
.solarized .docblock dt :first-child{color:#6c71c4}  /* violet (tags)*/
.solarized .docblock dt :first-child+em{color:#b58900} /* yellow (types) */
.nth-child{border-left:1em solid red}
.solarized code .string{color:#6c71c4} /* violet */
.solarized .keyword{color:#c41}
.solarized .language-javascript .number,.solarized .language-html .number{color:#dc322f} /* red */


/* custom helper classes */
.mixedcase{text-transform:none}
.normal{font-weight:normal!important}
.debug{display:none}
abbr.obvious{border-bottom:0}

/* helper class for curbing (suppressing) table displays via js: */
.curb table,.curb thead,.curb tbody,.curb th,.curb td,.curb tr{display:block!important}.curb tr+tr{margin-top:1em!important}

/* Accessibility/outlining: visually hide these but keep accessible for screen readers.
   See .visuallyhidden @link github.com/h5bp/html5-boilerplate/blob/master/css/style.css */
#nav >.h,#main>.h,aside>.h,#overview >.h{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}