@import "_form";
@import "_list";
@import "_editor";
@import "_layout";

/*
Form styleguide

Styleguide 1
 */

/*
Buttons

Styleguide 2
 */

a {
    color: #333333;

    &:hover {
        color: #888888;
    }
}

.clickable {
    cursor: pointer;
}

.rotate90 {
    -webkit-transform: rotate(90deg);
}



.tabs {
    list-style-type: none;
    height: 36px;
    border-bottom: 1px solid #ddd;

    .tabs-item {
        display: block;
        float: left;

        .tabs-item-button {
            line-height: 36px;
            padding: 0 15px;
            margin: 0 20px 0 5px;
            background: #eeeeee;
            color: #555555;
        }

        &.selected, &:hover {
            .tabs-item-button {
                background: #dddddd;
            }
        }

        &.right {
            float: right;
            margin: 0 5px 0 20px;
        }
    }
}


.tag {
    display: inline-block;
    padding: 0 10px 0 10px;
    margin-left: 10px;
    background: #888888;
    color: #EEEEEE;
    line-height: 36px;


    .tag-delete {
        display: inline-block;
        width: 36px;
        height: 36px;
        text-align: center;
        margin: 0 -10px 0 0;
        
        .clickable;

        &:hover {
            background: #DDDDDD;
            color: #555555;
        }
    }
}

.login-wrapper {
    width: 100%;
    height: 100%;

    .login {
        margin: 100px auto 0 auto;
        width: 300px;

        .login-title {
            font-weight: bold;
            text-align: center;
            color: #555555;
            font-size: 30px;
            margin: 20px 0;
            text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
        }

        input {
            width: 100%;
            margin: 5px 0 5px 0;
            padding: 5px 10px;
        }
    }
}