article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
} audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
} audio:not([controls]) {
display: none;
height: 0;
} [hidden] {
display: none;
}  html {
font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html,
button,
input,
select,
textarea {
font-family: sans-serif;
} body {
margin: 0;
}  a:focus {
outline: thin dotted;
} a:hover,
a:active {
outline: 0;
}  h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.75em;
margin: 2.33em 0;
} abbr[title] {
border-bottom: 1px dotted;
} b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
} dfn {
font-style: italic;
} mark {
background: #ff0;
color: #000;
} p,
pre {
margin: 1em 0;
} pre,
code,
kbd,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
} pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}  q {
quotes: none;
} q:before,
q:after {
content: '';
content: none;
}
small {
font-size: 75%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}  dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
} menu,
ol,
ul {
padding: 0 0 0 40px;
} nav ul,
nav ol {
list-style: none;
list-style-image: none;
}  img {
border: 0; -ms-interpolation-mode: bicubic; } svg:not(:root) {
overflow: hidden;
}  figure {
margin: 0;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}  form {
margin: 0;
} fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
} legend {
border: 0; padding: 0;
white-space: normal; *margin-left: -7px; } button,
input,
select,
textarea {
font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button,
input {
line-height: normal; } button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer; -webkit-appearance: button; *overflow: visible; } button[disabled],
input[disabled] {
cursor: default;
} input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; } input[type="search"] {
-webkit-appearance: textfield; -moz-box-sizing: content-box;
-webkit-box-sizing: content-box; box-sizing: content-box;
} input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
} button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
} textarea {
overflow: auto; vertical-align: top; }  table {
border-collapse: collapse;
border-spacing: 0;
}   * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body{
font-family: Cambria, Georgia, serif;
background: #f9f9f9 url(//145cafeandbar.com/circle/images/bg.jpg);
font-weight: 300;
font-size: 15px;
color: #333;
-webkit-font-smoothing: antialiased;
overflow-y: scroll;
overflow-x: hidden;
}
a{
color: #555;
text-decoration: none;
}
.container{
width: 100%;
position: relative;
}
.clr{
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.main{
width: 90%;
margin: 0 auto;
position: relative;
}
.container > header{
margin: 10px;
padding: 20px 10px 10px 10px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
text-align: center;
}
.container > header h1{
font-size: 32px;
line-height: 32px;
margin: 0;
position: relative;
font-weight: 300;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
}
.container > header h2{
font-size: 14px;
font-weight: 300;
font-style: italic;
margin: 0;
padding: 15px 0 5px 0;
color: #888;
text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
} .codrops-top{
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
z-index: 9999;
position: relative;
box-shadow: 1px 0px 2px rgba(0,0,0,0.1);
}
.codrops-top a{
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover{
background: rgba(255,255,255,0.3);
}
.codrops-top span.right{
float: right;
}
.codrops-top span.right a{
float: left;
display: block;
} .codrops-demos{
text-align:center;
display: block;
line-height: 30px;
padding: 5px 0px;
}
.codrops-demos a{
display: inline-block;
font-style: italic;
margin: 0px 4px;
padding: 0px 6px;
color: #aaa;
line-height: 20px;	
font-size: 13px;
text-shadow: 1px 1px 1px #fff;
border: 1px solid #fff;
background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.codrops-demos a:hover{
color: #333;
background: #fff;
}
.codrops-demos a:active{
background: #fff;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover{
background: #f0f0f0;
border-color: #d9d9d9;
color: #aaa;
box-shadow: 0 1px 1px rgba(255,255,255,0.7);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); }
.support-note span{
color: #ac375d;
font-size: 16px;
display: none;
font-weight: bold;
text-align: center;
padding: 5px 0;
}
.no-cssanimations .support-note span.no-cssanimations,
.no-csstransforms .support-note span.no-csstransforms,
.no-csstransforms3d .support-note span.no-csstransforms3d,
.no-csstransitions .support-note span.no-csstransitions{
display: block;
}