@import "base";

/* MOBILE */
@media all and (max-width: 768px) {
    body {
        font-size: 25px;
        margin: .2em;
    }

    #body {
        margin: 0;
    }

    #welcome {
        margin: 0;

        .signup {
            float: none;
            clear: both;
            width: 100%;

            input[type="email"]#email {
                width: 90%;
            }

            ul {
                margin: 0;
                padding: 0;
            }
        }

        ul.features {
          padding: 0;
          margin: 1em 0;
        }
    }

    .readable {
        font-size: 16px;

        h1 a.bmark {
            display: block;
            max-width: 100%;
            overflow: hidden;
        }

        #readable_content {
            max-width: 98%;
        }
    }

    .button span.desc {
        display: none;
    }

    span[data-icon="\\"] {
        display: none;
    }

    .buttons {
        width: auto;
    }

    .button {
        font-size: 25px;
        line-height: inherit;
    }

    .logo {
        display: none;
    }

    .user {
        padding-right: .2em;
    }

    .navigation {
        display: block;
        float: none;
        text-align: center;
        width: 100%;

        span {
            margin: 0 .1em;

        }

        .button {
            &.nav_button {
                padding: .3em;
                border-radius: 0;
                margin-top: 0;

                .icon {
                    font-size: 1.2em;
                }

                .text {
                    display: none;
                }
            }
        }
    }

    .controls {
        clear: both;
        margin: 1em 0;
        padding: .5em 0;

        div {
            float: none;
        }

    }

    .filter_control {
        clear: both;
        margin-top: 1em;
        display: block;

        input[type="submit"] {
            display: none;
        }

        .yui3-bookie-tagcontrol-tags {
            border: 2px solid #bbb;
            box-shadow: 2px 2px 0 0 #666;

        }

    }

    .data_list {
        margin-top: 2em;

        .bmark {
            &:hover {
                background-color: #FFF;

            }

            a {
                font-size: 24px;
            }

            .description {
                max-width: 100%;
                overflow: hidden;
            }

            .url, .url * {
                opacity: 1;
            }

            .icon {
                opacity: .7;
            }

            .tags {
                display: block;
                float: none;
                padding-left: 0;
                text-align: left;
                max-width: 100%;

                .tag {
                    font-size: 20px;
                }
            }

            .url {
                display: none;
            }

            /* We float this right because you'll only have this if you don't
             * have the name of the user that owns it. So you'll either get
             * edit controls or the user it belongs to
             */
            .actions {
                clear: both;
                float: right;
                padding-top: .3em;
                padding-right: .3em;

                .icon {
                    font-size: 25px;
                }

                .readable {
                    display: inline-block;
                }
            }
        }
    }

    .form {
        display: inline-block;
        width: 100%;
        margin: 1em 0;
        padding: 0;

        ul {
            margin: 0;
            padding: 0;
        }
        li {
            padding: .5em 0;
        }

        label {
            text-align: left;
            display: block;
            margin: .3em 0;

            &:empty {
                display: none;
            }
        }

        input[type=text], input[type="email"], input[type="url"], input[type="password"], textarea {
            border: 1px solid $darkgrey;
            display: block;
            padding: 5px;
            width: 95%;
        }

        input[type=submit] {
            padding: 5px;
            min-width: 5em;
        }
    }

    /* Update the tagcontol with some more touch friendly buttons */
    ul.yui3-bookie-tagcontrol-tags {
        width: 95%;
    }

    li.yui3-bookie-tagcontrol-item {
        padding: .2em .3em;
    }

    form ul .yui3-bookie-tagcontrol {
        display: block;
        ul {
            width: 98%;
        }
    }

    .yui3-bookie-tagcontrol li.yui3-aclist-item {
        font-size: 26px;
        padding-bottom: .5em;
        margin: 5px 2px;
    }

    .account_info {
        display: none;
    }

    .tabs .user_import {
        display: none;
    }
}
