/*********
** Layout
*********/
#regex-editor {
    position: relative;
    margin: 0.5em;
    padding: 0.5em;
    border: 1px solid #AAA;
    border-radius: 15px;
    line-height: normal;
}


/*********
** Syntax highlighting
** This places a formatted <pre> behind the raw <textarea>. The <textarea> must have a transparent
** background (so the cursor shows through), the text formatting must match exactly (so the
** text aligns), and the preview must auto-expand to fit its content (the <textarea> will be
** resized to align the text). This glorious hack is inspired by regexpal.com, whose open-source
** library is used for the syntax highlighting.
*********/
#regex-editor .re-syntax-highlighted {
    position: relative;
}

#regex-editor .search,
#regex-editor .replace {
    border: 1px solid #a2a9b1;
}

#regex-editor .search,
#regex-editor .preview {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 2em;
    width: 100%;
    margin: 0;
    padding: .1em;
    box-sizing: border-box;
    font-family: 'courier new', monospace;
    line-height: 1.3em;
    font-size: 1em;
}

#regex-editor .preview {
    z-index: 1;
    height: auto; /* expand to fit content */
    background: #FFF;
    color: #FFF;
}

#regex-editor .search {
    z-index: 2;
    background: transparent;
}


/*********
** Button formatting
*********/
#regex-editor .re-close,
#regex-editor .re-add,
#regex-editor .re-execute,
#regex-editor .re-undo,
#regex-editor .re-save,
#regex-editor .re-session-apply,
#regex-editor .re-session-delete {
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

#regex-editor .re-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    background: url('//upload.wikimedia.org/wikipedia/commons/thumb/4/47/Noun_project_-_supprimer_round.svg/16px-Noun_project_-_supprimer_round.svg.png') no-repeat;
}

#regex-editor .re-add,
#regex-editor .re-execute,
#regex-editor .re-undo,
#regex-editor .re-save {
    margin-right: 0.5em;
    padding-left: 18px;
}

#regex-editor .re-add {
    background: url('//upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Noun_project_-_plus_round.svg/16px-Noun_project_-_plus_round.svg.png') no-repeat;
}

#regex-editor .re-execute {
    background: url('//upload.wikimedia.org/wikipedia/commons/thumb/5/57/Noun_project_-_crayon.svg/16px-Noun_project_-_crayon.svg.png') no-repeat;
}

#regex-editor .re-undo {
    background: url('//upload.wikimedia.org/wikipedia/commons/thumb/1/13/Noun_project_-_Undo.svg/16px-Noun_project_-_Undo.svg.png') no-repeat;
}

#regex-editor .re-save {
    background: url('//upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Noun_project_-_USB.svg/16px-Noun_project_-_USB.svg.png') no-repeat;
}

#regex-editor #re-sessions {
    display: inline-block;
    padding: 2px;
    border: 1px solid #CCC;
    border-radius: 2px;
}

#regex-editor .re-session-apply {
    padding: 2px;
    font-size: 0.9em;
    background-color: #6C6;
    border-radius: 2px;
}

#regex-editor .re-session-delete {
    padding: 0;
    margin-right: 0.5em;
    font-family: monospace;
    font-weight: bold;
    color: red;
}