/*Styles for code demos and template using RWD
Author:   Jason A. Clark
Version:  screen,projection,handheld - October 2014
----------------------------------------------- */
/*typography presets*/
/*@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);*/
/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lato Regular'), local('Lato-Regular'),
       url('../fonts/lato-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v11-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/lato-v11-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Italic'), local('Lato-Italic'),
       url('../fonts/lato-v11-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v11-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v11-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v11-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v11-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */
}

html {box-sizing:border-box;}
*, *:before, *:after {box-sizing:inherit;margin:0;padding:0;}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}
body{font-size:small;font:20px/1.6 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;max-width:80%;margin:0 auto;padding:50px 25px;}
html{background:url("../img/library-card-zoom-bg.jpg") no-repeat fixed bottom;background-position:center center;background-size:cover;color:#666;}
html ul{margin:1em 0;padding:0 0 0 40px;}
header,main,aside {background-color:#fff;padding:0 1rem;}
header{display:block;float:left;width:100%;-webkit-border-top-left-radius:5px;-moz-border-radius-topleft:5px;border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topright:5px;border-top-right-radius:5px;}
main{display:block;float:left;width:100%;min-height:320px;}
aside{display:block;float:left;left:0;bottom:0;height:auto;width:100%;border-top:1px dotted silver;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;padding:1rem;}
nav{width:95%;margin:0 auto;white-space:nowrap;text-align:center;}
h1{font-weight:700;font-size:50px;line-height:1;color:#777;margin:1rem 0 0;}
h2{font-weight:400;font-size:40px;text-transform:none;line-height:1;word-spacing:8px;margin:0 0 2rem;padding:0;}
h3{display:inline;font-weight:700;font-size:20px;}
p{margin:1rem 0;}
table{font-size:inherit;font:100%;}
pre,code,kbd,samp,tt{font-family:monospace;font-size:108%;line-height:100%;}
pre{word-wrap:break-word;white-space:-moz-pre-wrap;white-space:pre-wrap;}
a{outline:none;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none;display:inline-block;color:#777;position:relative;margin:0;padding:0;}
a:hover{color:#f74f4f;}
aside a{margin:0 .25rem;padding:0 .25rem;}
a:hover.twitter{color:#00acee;}
a::after {position: absolute;top: 100%;left: 0;width: 100%;height: 1px;background: rgb(192,192,192);content: '';opacity: 0;-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;transition: height 0.3s, opacity 0.3s, transform 0.3s;-webkit-transform: translateY(-13px);-moz-transform: translateY(-13px);transform: translateY(-13px);}
a:hover::after {height: 2px;opacity: 1;-webkit-transform: translateY(-3px);-moz-transform: translateY(-3px);transform: translateY(-3px);}
a,button,input,select,textarea,label,summary {touch-action:manipulation;}
.button {background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));background:-moz-linear-gradient(center top, #79bbff 5%, #378de5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#79bbff", endColorstr="#378de5");background-color:#79bbff;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;text-indent:0;border:1px solid #84bbf3;display:block;color:#fff;height:45px;line-height:45px;width:131px;text-decoration:none;text-align:center;}
.button:hover {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#378de5", endColorstr="#79bbff");background-color:#378de5;}
.button:active {position:relative;top:1px;}
input{border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 0 4px #666 inset;-moz-box-shadow:0 0 4px #666 inset;box-shadow:0 0 4px #666 inset;height:45px;line-height:25px;margin-bottom:15px;width:70%;text-indent:7px;}
input:focus,button:focus{outline:none;}
select,input,button,textarea{font:99% Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;}
fieldset{border:0;}
label{display:none;}
.expand {background:url("../img/expand.gif") 0 50% no-repeat;padding-left:16px;}
.refresh {background:url("../img/refresh.gif") 0 50% no-repeat;padding-left:18px;}

/* small and medium screen styles */
@media only screen and (max-width: 768px) {
 body{padding:20px;max-width:100%;}
 main{min-height:250px;}
 aside h3,aside a{display:block;}
 aside{border:none;}
 aside a{border-top:1px solid silver;margin:0;padding:.25rem 0;}
 nav{width:100%;text-align:left;}
 h1{font-size:40px;}
 h2{font-size:30px;line-height:1.2;}
 input{width:100%;}
}