@import "./lesshat.less";

.content-form {
    ul {
        margin-left: 20px;
    }
}
.content-form .wrp {
    /*padding-left:3p;*/
    /*padding-left: 10px;*/
    padding-right: 10px;
    margin-bottom: 5px;
}
.content-form fieldset {
    border-bottom:none;
    border-right: none;
    border-left: none;
    margin-bottom: 30px;
    padding-top: 15px;
    border-top: 1px solid darken(#e8e8e8, 13%);
    .box-shadow(0 -1px 0 rgba(255,255,255,0.4));
    legend {
        font-size: 18px;
        // line-height: 38px;
        // margin-top: 10px;
        // padding-bottom: 20px;
        font-family: 'PT Sans Caption Bold','trebuchet ms',arial,sans-serif;
    }
}
.content-form table {
    width: 100%;
    margin-left: -10px;
}
.content-form table tr td {
    padding: 6px;
    padding-left: 10px;
    padding-right: 10px;
}
.content-form label {
    display: block;
}
.content-form input[type="text"], textarea {
    display: block;
    width: 100%;
    border-radius: 4px;
    border:none;
    outline: none;
    padding: 7px 10px;
    border: 1px solid darken(#aaa, 0%);
    .background-image(linear-gradient(to bottom, #FFFFFF 0%,#eeeeee 100%));
    .transition(all linear 0.2s);
    background-position: 0 0;
    .box-shadow(0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0px #FFF, 0 1px 0px #FFF);
    .placeholder(darken(#e8e8e8, 50%));
    &:focus {
        .background-image(linear-gradient(to bottom, #eeeeee 0%,#FFFFFF 50%));
        // background-position: -100px 0;
        border: 1px solid darken(#5897fb, 0%);
        .box-shadow(0 1px 1px #5897fb, 0 1px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0px #FFF);
    }
}

.content-form textarea {
    display: block;
    min-height: 40px;
}

.content-form {
    hr {
        border-top: 1px solid darken(#e8e8e8, 13%);
    }
    .select2-container {
        width: 111%;
        // margin-right: -20px;
    }
}

.in.no-icon:after {
    background: none!important;
}

.top-form-wrapper {
    position: fixed;
    // display: none;
    // top: -100%;
    top:-100px;
    left: 0;
    height: auto;
    min-height: 100px;
    z-index: 9998;
    width:100%;
    .background-image(linear-gradient(to bottom, #161818 0%,#363b3c 100%));
    .box-shadow(0 1px 10px rgba(0, 0, 0, 0.5));
    border-bottom:1px solid rgba(255,255,255,0.4);
    padding-top: 100px;
    .close {
        position: absolute;
        display: block;
        width:auto;
        // background: red;
        right:15px;
        margin-top:15px;
        font-size: 16px;
        color: #FFF;
        .transition(all linear 0.2s);
        text-decoration: none;
        img {
            padding-top: 3px;
            display: block;
            float: left;
            margin-left: -15px;
            .transition(all linear 0.2s);
        }
        &:hover {
            color: #fca713;
            img {
                opacity: 0.5;
            }
        }
    }
    .content-wrap {
        position: relative;
        clear:both;
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 20px;
        width:960px;
        color: #FFF;
    }
    h6 {
        font-size: 20px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
    p {
        font-size: 13px;
        margin-bottom: 20px;
    }


}

.content-form.black {
    input[type="text"], textarea {
        display: block;
        width: 98%;
        border-radius: 4px;
        border:none;
        outline: none;
        padding: 7px 10px;
        border: 1px solid darken(#363b3c, 0%);
        .background-image(linear-gradient(to bottom, #FFFFFF 0%,#eeeeee 100%));
        .transition(all linear 0.2s);
        background-position: 0 0;
        .box-shadow(0 1px 3px rgba(0, 0, 0, 0.6), inset 0 1px 0px #FFF);
        .placeholder(darken(#e8e8e8, 50%));
        &:focus {
            .background-image(linear-gradient(to bottom, #fca713 0%,#ffeb58 50%));
            // background-position: -100px 0;
            border: 1px solid darken(#fca713, 0%);
            .box-shadow(0 1px 15px rgba(0, 0, 0, 0.8), inset 0 1px 0px #ffb400);
        }
    }
    label {
        font-size: 12px;
        margin-bottom: 0;
        &.bold {
            font-family: 'PT Sans Caption Bold','trebuchet ms',arial,sans-serif;
            margin-bottom: 15px;
            font-size: 16px;
        }
    }
}

table.InnerCatalog {
    width: 100%;
    tr {
        margin-bottom: 20px;
        background: url(/static/app/images/how_it_looks.png) 0px -50px repeat;
        .transition(all linear 0.2s);
        .border-top-left-radius(4px);
        .border-top-right-radius(4px);
        .border-bottom-right-radius(4px);
        cursor: pointer !important;
        td {
            img {
                display: block;
                max-width: 99%;
                margin-right: 1%;
                .border-top-left-radius(4px);
                .border-bottom-left-radius(4px);
                margin-top: -6px;

            }
            border-top: 1px solid darken(#eee, 10%);
            // border-bottom: 1px solid darken(#eee, 20%);
            .border-top-left-radius(4px);
        .border-top-right-radius(4px);
            padding: 6px;
            padding-left: 0;
            .price, .ttl {
                font-family: 'PT Sans Caption';
                font-size: 16px;
                color: #292d30;
                text-transform: uppercase;
                font-weight: bold;
                line-height: 16px;
                margin: 9px 0px 0px 0px!important;
                span {
                    font-size: 14px;
                    opacity: 0.6;
                }
            }
            p.data {
                color: gray;
                margin-top: 10px;
            }
            &.last{
                .border-top-right-radius(4px);
                .border-bottom-right-radius(4px);
            }
        }
    }
    tr:hover {
        background-position: 0px -200px;
        td {
            border-bottom: 1px solid darken(#eee, 0%);
        }
    }
}