@import url(http://fonts.googleapis.com/css?family=Khand);
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700);
@import url(http://fonts.googleapis.com/css?family=Inconsolata);

html {
    position: relative;
    min-height: 100%;
}

body {
    padding-top: 20px;
    margin-bottom: 120px;
}

h1 {
    font-family: 'Khand', sans-serif;
    font-size: 48px;
    word-spacing: 0px;
    text-align: center;
}

h1 span {
    color: #b81e0d;
}

.logo {
    float: right;
    margin-right: -10px;
    height: 60px;
    margin-top: -10px;
}

#message {
    line-height: 14px;
    white-space: inherit;
    font-size: 120%;
}

#options {
    float: right;
    position: relative;
    top: -15px;
}

.evolutions {
    float: right;
    position: relative;
    left: -10px;
}


.export {
    float: right;
    width: 172px;
}

.editable {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    height: 610px;
    overflow: auto;
    resize: both;
    width: 100%;
    background-color: white;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    flex-direction: column;
    resize: auto;
    cursor: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Ubuntu Mono' !important;
    font-size: 1.15em;
}

.highlight-green {
    color: #468847;
    border: 1px solid #d6e9c6;
    background-color: #dff0d8;
    border-radius: 4px;
}
.matching .highlight-green {
    color: #c09853;
    border: 1px solid #fbeed5;
    background-color: #fcf8e3;
    border-radius: 4px;
}

span.fn {
    font-weight: bold;
    border-top: 2px dotted #b0b0b0;
    border-bottom: 2px dotted #b0b0b0;
}

span.fn.head {
    border-left: 2px dotted #b0b0b0;
}

span.fn.tail {
    border-right: 2px dotted #b0b0b0;
}

span.fp {
    color: #02749c;
    /*border-top: 1px dotted #b0b0b0;
    border-bottom: 1px dotted #b0b0b0;*/
    background-color: #d9edf7;
    border-radius: 4px;
}

span.fp.head {
    /*border-left: 1px solid #fbeed5;*/
}

span.fp.tail {
    /*border-left: 1px solid #fbeed5;*/
}

span.tp {
    color: #02749c;
    border-top: 2px dotted #b0b0b0;
    border-bottom: 2px dotted #b0b0b0;
    background-color: #d9edf7;
    border-radius: 4px;
    font-weight: bold;
}

span.tp.head {
    border-left: 2px dotted #b0b0b0;
}

span.tp.tail {
    border-right: 2px dotted #b0b0b0;
}


.list-group-item {
    cursor: pointer;
}


.removex {
    float: right;
    margin-left: 5px;
}

.regexpanel .panel-heading {
    position: relative;
}

.right-link {
    color: #468847;
    top: 0px;
    position: absolute;
    right: 5px;
}

.right-link:hover {
    color: #fff;    
}

#drop_zone, #drop_zone_raw, #drop_zone_res {
    border: 2px dashed #bbb;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    color: #bbb;
}

label.btn.btn-default {
    color: #ffffff;
    background-image: -webkit-linear-gradient(#e72510, #d9230f 6%, #cb210e);
    background-image: -o-linear-gradient(#e72510, #d9230f 6%, #cb210e);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e72510), color-stop(6%, #d9230f), to(#cb210e));
    background-image: linear-gradient(#e72510, #d9230f 6%, #cb210e);
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe72510', endColorstr='#ffcb210e', GradientType=0);
    -webkit-filter: none;
    filter: none;
    border: 1px solid #a91b0c;
    opacity: 0.75;
}

label.btn.btn-default.active {
    opacity: 1.0;
}

.error {
    background-color: #dd4814;
    cursor: pointer;
}

.success {
    color: #468847;
    background-color: #d6e9c6;
    cursor: pointer;
}

td, th {
    text-align: right;
    font-size: 0.9em;
}

td.text, th.text {
    text-align: left;
}

td.icon-btn, th.icon-btn {
    width: 34px;
    max-width: 34px;
}

.pagination {
    display: inline;
}

.hint {    
    line-height: 240px;
    height: 240px;
    border-top: 1px solid #dddddd;
    margin-bottom: 20px;
    margin-top: -20px;
}

.stat-chart{
    margin: 0 auto 5px;
    width: 50px;
}

.panel-heading a {
    color: #ffffff;
    /*text-decoration: underline;*/
}

.page-header {
    padding-bottom: 14px;
    /*margin-bottom: 55px;*/
}

footer {
    margin: 20px 0;
}

footer ul li {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

footer p {
    clear: left;
    margin-bottom: 0;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
}

footer .separator {
    border-top: 1px solid #dddddd;
    padding-top: 10px;
}

footer .container {
    position: relative;
}

p.question {
    font-weight: bold;
    font-size: 15px;
}

div#share {
    /*position: absolute;
    bottom: -35px;
    left: 30px;*/
    float: left;
}

footer ul.list-unstyled {
    float: left;
}

blockquote span.regex {
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
    word-break: break-all;
    word-wrap: break-word;
    color: #444444;
}

video {
    width: 1080px;
    margin: 10px 35px;
}
span.g {
    margin-left: -6px;
}

h1 small {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    margin-left: 10px;

}
.has-error .help-block, .has-error .control-label {
    color: #d9230f;
}

.has-error .form-control, .has-error .form-control:focus {
    border-color: #d9230f;
}

span.clock {
    font-family: 'Khand', sans-serif;
    font-size: 3em;
    /*position: absolute;    
    top: 24px;*/
    display: inline-block;
    margin-top: 14px;
}

.stats .stat {
    display: table-cell;
    vertical-align: top;
    font-size: 0.9em;
    text-align: right;
    margin-top: 10px;
}

.stat-value {
    font-family: 'Inconsolata';
    display: block;
    margin-bottom: -10px;
    font-size: 3.0em;
}

span.stat-value.perfect {
    color: #468847;
}

td, th {
    text-align: left;
}

.regeximg {
    margin: 1cm auto;
}

.well-regex {
    font-family: 'Ubuntu Mono' !important;
    font-size: 1.15em;
    background-color: transparent;
}

.animated {
    margin-bottom: 60px;
}

.regex.form-control[disabled] {
    cursor: initial;
    background-color: white;
    opacity: 1;
}

.loading {
    height: 610px;
}

.loading img {
    margin-top: 200px;
}

.credits {
    text-align: right;
    position: relative;
    top: -35px;
    right: -15px;
}

span.score {
    font-family: Inconsolata;
    font-size: 1.6em;
    color: #dd4814;
    font-weight: bold;
}

/* Large desktop */
@media (min-width: 1200px) { span.clock {left: 550px;} }

@media (max-width: 1200px) { span.clock {left: 350px;} }

/* Portrait tablet to landscape and desktop */
@media (max-width: 979px) { span.clock {left: 350px;} }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { span.clock {left: 270px; font-size: 2.5em;} }

/* Landscape phones and down */
@media (max-width: 480px) { span.clock {left: 220px; font-size: 2.5em;} }