* {
    box-sizing: border-box;
}

blockquote {
    background: #8ab6fc;
    color: #eee;
    font-style: italic;
    font-size: 1.2em;
    padding:5%;
    margin: 1% 0%;
    border-radius: 4px;
    text-align: center;
}
blockquote::before, blockquote::after {
    content: '"';
}

#content a {
    color: #4f1e7b;
    text-decoration: none;
    font-weight: bolder;
}

@media only screen and (max-width: 1000px) {

    html {
        font-size: 20px;
    }

    body {
        background: white;
        color:#111;
        font-family: "Open Sans", "NonBreakingSpaceOverride", "Hoefler Text", Garamond, "Times New Roman", serif;
        font-weight: 300;
        font-size: 1em;
        line-height: 1.8;
        text-rendering: optimizeLegibility;
        
    }

    video, img {
        max-width: 100%;
        outline: none;
        position: relative;
        z-index: 0;
    }

    h1 {
        font-size: 6vw;
    }

    #header {
        display: flex;
        align-items: center;
        top:0px;
        left:0px;
        right:0px;
        position: fixed;
        z-index: 9;
        background: white;
        border-bottom: 1px solid #aaa;
        padding: 2% 2%;
        height: 50px;
    }

    #title {
        font-weight: bold;
    }

    #mobilemenu + ul {
        transition: right 0.3s ease-in-out;
    }

    #mobilemenu:checked + ul {
        right: -10px;
    }

    #mobilemenu {
        display: none;
        float: right;
    }

    #menu {
        flex: 1;
        position: relative;
    }

    #menu label {
        float: right;
        cursor: pointer;
    }

    label[for="mobilemenu"] img {
        width: 25px;
    }

    #menu > ul {
        top:23px;
        background: white;
        position: absolute;
        right: -280px;
        width:260px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border:1px solid #aaa;
        border-top: none;
        z-index: 10;
        box-shadow: -1px 1px 2px #aaa;
        padding-top:10px;
        padding-bottom: 20px;
    }

    #menu ul {
        list-style: none;
        padding-left: 30px;
    }

    #menu li a {
        text-decoration: none;
        color: #111;
    }
    
    #contentwrapper {
        margin-top: 60px;
        padding: 0 3%;
    }

    #handle {
        display: none;
    }

    .parts {
        flex-direction: column;
    }

    .second {
        padding: 20px;
    }
}

@media only screen and (min-width: 1000px) {
    
    #mobilemenu, label[for="mobilemenu"] {
        display: none;
    }

    html {
        font-size: 22px;
    }

    body {
        background: url(/images/bgbeach.jpg) fixed;
        background-size: cover;
        color:#111;
        font-family: "Open Sans", "NonBreakingSpaceOverride", "Hoefler Text", Garamond, "Times New Roman", serif;
        font-weight: 300;
        font-size: 1em;
        line-height: 1.8;
        text-rendering: optimizeLegibility;
    }

    video, img {
        max-width: 100%;
        outline: none;
        
    }

    #page {
        max-width: 1000px;
        margin: auto;
    }

    #header {
        display: flex;
        align-items: center;
        margin-top: 20px;
        position: relative;
    }

    #title {
        color:white;
        font-weight: 400;
        font-size: 2em;
    }

    #menu {
        flex: 1;
        text-align: right;
        font-weight: 400;

    }

    #menu ul {
        list-style: none;
        text-align: left;
    }

    #menu > ul {
        display: inline-block;
    }

    #menu ul:first-of-type {
        background: rgba(255,255,255,0.8);
        border-radius: 20px;
        padding: 0px 1em;
    }

    #menu > ul > li {
        display: inline-block;
        margin: 0 0.5rem;
    }

    #menu > ul >li > ul {
        background: white;
        border: 1px solid #aaa;
        border-top: none;
        border-radius: 0px 10px 10px 10px;
        position: absolute;
        width:280px;
        z-index: 900;
        margin-top: 40px;
        padding: 5px;
    }

    #menu > ul > li > ul ul {
        background: white;
        border: 1px solid #aaa;
        border-left: none;
        border-radius: 0px 10px 10px 0px;
        position: absolute;
        width:150px;
        z-index: 900;
        margin-left: 137px;
        margin-top: -5px;
        padding: 5px;
    }

    #menu ul > li > ul {
        display: none;
    }

    #menu ul > li > ul ul {
        display: none;
    }

    #menu ul > li:hover > ul {
        display: block;
    }

    #menu ul > li:hover >a {
        color: rgb(58, 139, 214);
    }

    #menu a {
        text-decoration: none;
        color: #111;
    }

    #contentwrapper {
        background: rgba(255,255,255,0.95);
        border-radius: 10px;
        margin-top: 20px;
    }

    #content {
        padding: 4% 0;    
        outline: none;
        cursor: auto;
        margin:auto ;
    }

    #content h1:first-child {
        margin-left: 30px;
        /* margin-right: -200px; */
        margin-top: -17px;
        margin-bottom: 12px;
        font-size: 170%;
    }

    #editor {
        padding:0 4%;
        text-align: right;
        display: none;
    }

    .article {
        margin-left:15%;
        margin-right: 15%;
    }

    .article h1 {
        margin-left: unset !important;
    }

    .edit {
        position: relative;
        cursor: pointer;
    }

    .edit:hover::before {
        content: '';
        background: url(/images/menu.png);
        height: 30px;
        width: 30px;
        position: absolute;
        z-index: 200;
        background-size: contain;
        right: -10px;
        top: -10px;
    }

    .editbox {
        max-height: 80vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-top: 0px !important;
    }

    #content a {
        display: inline-block;
    }

    button {
        background-size: cover !important;
        width: 24px;
        height: 24px;
        border: none;
        margin-right: 10px;
        border-radius: 9px;
        cursor: pointer;
    }

    /* Admin */

    #notify {
        display: none;
        background: rgba(158, 221, 129, 0.8);
        color: rgb(13, 33, 59);
        text-shadow: 1px 1px 1px #fff;
        position: fixed;
        top:0;
        left:0;
        right:0;
        height: 40px;
        width: 400px;
        margin-left:auto;
        margin-right:auto;
        text-align: center;
        font-size: 400;
        border-radius: 0px 0px 10px 10px;
        z-index: 10000;
    }

    #notify.visible {
        display: inline-block;
    }


    #handle {
        position: fixed;
        left:0;
        right:0;
        height: 670px;
        width: 1400px;
        top:-640px;
        margin: auto;
        font-size: 400;
        transition: top 0.3s ease-in-out;
        color: #111;
        z-index: 999;
        display: flex;
        flex-direction: column;
    }

    .bt {
        border-top:1px solid #aaa;
        border-radius: 0px 0px 10px 10px;
        cursor: pointer;
        color: transparent;
        text-align: center;
    }

    .bt:hover {
        background: white;
        color: #111;
    }

    #handle.visible {
        top: 0;
        box-shadow: 1px 1px 4px #888;
        border: 1px solid #888;
    }

    #handle.visible .bt  {
        background: white;
        color: #111;
        border-bottom: 1px solid black;
    }

    #admin {
        background: white;
        flex: 1;
    }

    #admin .tabs {
        display: flex;
        border-bottom: 1px solid #aaa;
    }

    #admin .tabs > div {
        flex: 1;
        color: #111;
        cursor: pointer;
        padding: 0 2%;
    }

    #admin .tabs > div.selected {
        background: rgb(83, 141, 228);
        color: white;
        font-weight: 400;
    }

    #admin .tab {
        display: none;
        padding:2% 1%;
        flex: 1;
        /* overflow-y: auto; */
    }

    #admin .tab.selected {
        display: flex;
    }

    #tab_p1 {
        display: flex;
    }

    #admin ul {
        list-style: none;
    }

    #admin ul:first-child {
        margin: 0;
        padding: 0;
    }

    #admin li {
        width:200px;
        background: #eee;
        border: 1px solid #aaa;
        margin-top:10px;
        font-size: 0.6em;
        padding-left:10px;
    }

    #admin li[data-level='1'] {
        margin-left: 20px
    }
    #admin li[data-level='2'] {
        margin-left: 40px
    }
    #admin li[data-level='3'] {
        margin-left: 60px
    }
    #admin li[data-level='4'] {
        margin-left: 80px
    }
    #admin li[data-level='5'] {
        margin-left: 100px
    }
    #admin li[data-level='5'] {
        margin-left: 120px
    }

    #admin li.selected {
        background: rgb(83, 141, 228);
        color: white;
        font-weight: 400;
        position: relative;
    }

    #cm {
        display: none;
        position: absolute;
        background: white;
        padding: 4px 10px;
        border: 1px solid #aaa;
        border-radius: 5px;
        font-size: 0.6em;
        z-index: 10000;
    }

    #cm.visible {
        display: block;
    }

    #admin #treedata {
        flex: 1;
        padding-top: 20px;
        overflow-y: auto;
        position: relative;
    }

    #admin #link {
        width: 400px;
    }

    #admin label {
        display: inline-block;
        min-width: 130px;
    }

    #admin {
        height: 600px;
        display: flex;
        flex-direction: column;
        overflow: auto;
    }
    
    
    #tree {
        overflow-y: auto;
        overflow-x: hidden;
        width: 400px;
    }
    


    /* Media stuff */

    #tab_p2 {
        display: flex;
        flex-direction: column;
    }
    #upload {
        height: 100px;
        background: #eee;
    }
    #files {
        flex:1;
        display: flex;
        max-height: 540px;
    }

    #selector {
        width: 100px;
    }

    #media {
        flex:1;
        display: flex;
        flex-wrap: wrap;
        overflow-y: auto;
    }

    #details {
        width: 280px;
        padding: 20px;
    }

    .item {
        width: 116px;
        padding: 2px 8px;
        border-radius: 10px;
        cursor: pointer;
    }

    .item.selected {
        background:#66abf0;
        color:white;
        font-weight: 400;
    }

    .src {
        width:84px;
        height:100px;
        margin:0px 7px;
    }

    .name {
        font-size:12px;
        word-break: break-all;
        text-align: center;
    }

    #preview {
        width: 100%;
        max-height: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
    }

    #preview img,
    #preview audio {
        max-width: 100%;
        max-height: 100%;
    }

    .filename, .sizing {
        display: flex;
        margin-bottom:5px;
        align-items: center;
    }

    #filename {
        /* flex:1; */
        border-radius: 4px;
        border: 1px solid #aaa;
        padding:0px 4px;
        height: 26px;
        margin: 0 5px;
        width:160px;
    }

    .sizing input {
        width:43px;
        border-radius: 4px;
        border: 1px solid #aaa;
        padding: 0px 4px;
        height: 21px;
        margin: 0 5px;
    }
    #uploadarea {
        height: 80px;
        border: 4px dashed #aaa;
        border-radius: 10px;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
    }

    #admin button {
        width: unset;
        border-radius: 6px;
        cursor: pointer;
        margin: 0px 3px;
        color: white;
        background: #548fec;
        font-weight: 400;
    }

    #admin button.insert {
        width: 100%;
        height:40px;
        margin-top:20px;
        margin-bottom: 30px;
    }

    #admin button.insertpage {
        width: 200px;
        height:40px;
        margin-top:20px;
    }

    #editt, #delete {
        position: absolute;
        z-index: 2;
        display: none;
        cursor: pointer;
        width:30px;
        height:30px;
        cursor: pointer;
        background: url(/images/menu.png);
        background-size: contain;
    }

    #editt.visible, #delete.visible {
        display: block;
    }

    #delete {
        background: url(/images/delete.png);

    }

    .wide {
        margin-left: -90px;
        margin-right: -90px;
        max-width: 780px;
    }

}