@import url("/styles/fonts.css");

/* We use one generic site-wide font family */

* {
    font-family: "font" !important;
}

/* Remove blue glow around jQuery items */

.ui-focus, .ui-btn:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.ui-page {
    width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
}

.ui-field-contain {
    padding: 0 !important;
    margin: 0 !important;
}

#settings {
    background: #888 !important;
}

/* Increase the size of the settings icon */

#settings h3 a::after {
    height: 32px !important;
    width: 32px !important;
    top: 42.5% !important;
    background-size: 75% !important;
}

/* Adjust the size of the close icon */

#settings h3 a.ui-icon-delete::after {
    background-size: 60% !important;
}

#settings-container {
    width: 100% !important;
}

#settings-container .ui-controlgroup-controls {
    width: 100% !important;
}

#settings-container .ui-controlgroup-controls .ui-select {
    width: 100% !important;
}

#settings-container .ui-controlgroup-controls .ui-select span {
    text-align: left !important;
}

/* Make the close settings button stand out */

#close {
    background: #c00;
}



#newtask {
    font-size: 1em;
    color: #fff !important;
    background: #2ad !important;
    margin: 1em auto !important;
    position: relative !important;
}

.ui-footer {
    text-align: center !important;
}

html {
    font-size: 16px;
}

header {
    margin: 0;
    padding: 0;
    background: #333333;
    border-shadow: none;
}

.content {
    margin: 0 auto;
    padding: 0;
}

#task, #solution {
    direction: rtl;
}

#task {
    padding: 1em 0;
}

#task img {
    height: 2.5em;
    vertical-align: middle;
}

@media screen and (min-width: 320px) {
    .content {
        width: 100%;
    }

    #task {
        width: 95%;
        margin: 0 auto;
    }


    #task, #solution p {
        font-size: 1.5em;
        line-height: 2.0em;
    }

    #solution {
        border-radius: 0;
    }

    #logo {
        height: 32px;
    }
}

@media screen and (min-width: 720px) {
    .content {
        width: 720px;
    }

    #task, #solution p {
        font-size: 2.0em;
        line-height: 2.7em;
    }

    #solution {
        border-radius: 5px;
    }

    #logo {
        height: 40px;
    }
}

/* Generic classes for alignment and coloring */

.center {
    text-align: center;
}

.keeptogether {
    display: inline-block;
}

.red {
    color: #e00;
}