ul {
    list-style: none;
    padding: 0;
}

p {
    color: #444;
    text-align: left;
    margin-left: 8%;
}

button:focus {
    outline: 0;
}

body
{
    height: 100%;
    background-image: url('bg.jpg');

}
.main
{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.65+0,0.66+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.66) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.65) 0%,rgba(255,255,255,0.66) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0.65) 0%,rgba(255,255,255,0.66) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6ffffff', endColorstr='#a8ffffff',GradientType=0 ); /* IE6-9 */
height: 700px;
width: 100%;
float: left;
}
.button, button {
    font-family: var(--button-font-family);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    text-align: center;
    text-decoration: none;
    color: var(--button-color);
    background-color: #2ecc40;
    border-radius: var(--button-border-radius);
    border: none;
    height: var(--button-height);
    line-height: var(--button-height);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    padding: 0 .75em;
    -webkit-box-shadow: var(--button-box-shadow);
    box-shadow: var(--button-box-shadow);
    cursor: pointer;
    display: inline-block;
    -webkit-transition: box-shadow .1s,background-color .1s;
    transition: box-shadow .1s,background-color .1s;
}
a {
    color: #0074d9;
    -webkit-text-decoration: var(--link-text-decoration);
    text-decoration: var(--link-text-decoration);
}
.note .header {
    font-size: 0.9em;
    color: #4c2525;
    margin-bottom: 10px;
}
.container {
    max-width: 85%;
    margin: 0 auto;
    padding: 100px 50px;
    text-align: center;
 
}

.container h1 {
    margin-bottom: 20px;
}

.page-description {
    font-size: 1.1rem;
    margin: 0 auto;
}

.tz-link {
    font-size: 1em;
    color: #1da7da;
    text-decoration: none;
}

.no-browser-support {
    display: none;
    font-size: 1.2rem;
    color: #e64427;
    margin-top: 35px;
}

.app {
    margin: 40px auto;
}

#note-textarea {
    margin: 20px 0;
}

#recording-instructions {
    margin: 15px auto 60px;
}

#notes {
    padding-top: 20px;
}

:root {
    --font-sans-serif: sans-serif;
    --font-serif: serif;
    --font-system: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue;
    --font-monospace: Menlo,Consolas,"DejaVu Sans Mono",monospace;
    --color-white: #fff;
    --color-navy: #001f3f;
    --color-blue: #0074d9;
    --color-aqua: #7fdbff;
    --color-teal: #39cccc;
    --color-olive: #3d9970;
    --color-green: #2ecc40;
    --color-lime: #01ff70;
    --color-yellow: #ffdc00;
    --color-orange: #ff851b;
    --color-red: #ff4136;
    --color-maroon: #85144b;
    --color-fuchsia: #f012be;
    --color-purple: #b10dc9;
    --color-black: #111;
    --color-gray: #aaa;
    --color-silver: #ddd;
    --state-primary: #2ecc40;
    --state-secondary: #a5a5a5;
    --state-success: var(--color-green);
    --state-info: var(--color-teal);
    --state-warning: var(--color-orange);
    --state-danger: var(--color-red);
    --state-light: #eee;
    --state-dark: var(--color-black);
    --component-bg-color: #f2f2f2;
    --component-border-color: #ddd;
    --component-border-radius: .25rem;
    --component-border-width: 1px;
    --component-padding-x: 1rem;
    --component-padding-y: 1rem;
}

.note .delete-note,
.note .listen-note {
    text-decoration: none;
    margin-left: 15px;
}

.note .content {
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .container {
        padding: 50px 25px;
    }

    button {
        margin-bottom: 10px;
    }

}   



/* -- Demo ads -- */

@media (max-width: 1200px) {
    #bsaHolder{ display:none;}
}

.appside
{
    width: 49%;
    float: right;
}