* { /* RESET */ font-size: medium; margin: 0; padding: 0; text-decoration: none; font-weight: normal; color: black; background-color: white; box-sizing: border-box; } html, body { background-color: #DDD; } body { position: absolute; width: 100%; min-height: 100%; } .folder, form.newfolder{ display: block; width: 98%; border: 1px solid black; border-radius: .5em; margin: 1em auto; padding: 0; overflow: hidden; } .folder > h1 { font-size: 1.25em; font-weight: bold; padding: .125em 1em .125em 2em; border-bottom: 1px solid black; background-color: #ACF; border-radius: .375em .375em 0 0; min-height: 1em; } .folder > h1 + a { display: block; position: relative; top: -1.5em; margin-left: 1em; color: transparent; width: 0; height: 0; } .folder > h1 + a:before { content: '\2699'; color: #333; } .dialog { display: block; position: fixed; width: 30em; min-width: 240px; min-height: 3em; left: 50%; top: 20%; margin: -3em -15em; text-align: center; z-index: 10; border-radius: .5em; border: 1px solid black; padding: .125em 0; background-color: #ACF; word-spacing: -.5ex; } .dialog:before { display: block; content: ''; border: 1px solid black; border-radius: 0 0 .5em .5em; border-top: 0px; top: 1.75em; bottom: .125em; left: .5%; right: .5%; position: absolute; background-color: white; z-index: -1; } .newbookmark:before { border-top: 1px solid; } .dialog + *:after { content: ' '; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.5); } .dialog > * { word-spacing: 0; } .dialog > h1 { background-color: transparent; text-align: left; font-weight: bold; padding-left: .25em; } .dialog > .tab { display: inline-block; width: 33%; padding: .25em; border: 1px solid black; border-radius: .5em .5em 0 0; } .dialog.modbookmark > .tab { width: 49.5%; } .dialog > label.tab { border-bottom: 0px; } .dialog > a.tab { background-color: #EEE; } .newbookmark > label, .dialog > label:nth-of-type(2), .dialog > label:nth-of-type(3), .dialog > select, .modfolder > input { display: block; float: left; text-align: left; margin: 1em 0 0 1em; } .newbookmark > label, .dialog > label:nth-of-type(3), .dialog > label:nth-of-type(2) { clear: left; font-weight: bold; } .dialog > select { width: 10em; max-width: 95%; } .dialog > input { width: 28em; max-width: 95%; } .modbookmark > select, .dialog > button { display: inline-block; float: right; margin: 1.5em .5em .5em .5em; padding: 0 .5em; clear: left; } .bookmark { position: relative; width: 16em; display: inline-block; margin: .5em 1em; white-space: nowrap; } .bookmark > a.modify { display: inline-block; color: transparent; width: .75em; } .bookmark > a.modify:before { content: '\2699'; color: #333; } .bookmark > a.bmove { display: none; color: transparent; overflow: hidden; vertical-align: top; font-size: 0; } .bookmark:hover { left: -1em; padding-left: 1em; } .bookmark:hover > a.bmove { display: inline-block; } .bookmark > a.bmove:before { color: #888; font-size: medium; } .bookmark > a.bmove:nth-last-of-type(2) { position: absolute; left: 0; } .bookmark > a.bmove:nth-last-of-type(2):before { content: '\25c0'; } .bookmark > a.bmove:nth-last-of-type(1):before { content: '\25b6'; } .bookmark img { height: 1.25em; vertical-align: text-bottom; margin: 0 .5ex; } footer { position: absolute; bottom: 0; display: block; width: 100%; padding: 1em; background-color: white; border-top: 1px solid black; }