/* 
    Document    : paint
    Created on  : Jan 26, 2014, 1:52:43 PM
    Author      : Claudiu Spatariu
    Description : Purpose of the stylesheet follows.
*/

/* LESS variables*/
@color: #E9EFF9;

/* General */
* {
    outline: 0 !important;
}

.body {
    background: @color;
    padding-bottom:0;
}

input {
    outline: 0 !important;
}
.border {
    border: 1px solid white; 
    border-radius: 4px 4px 0 0;
}
@font-face{
    font-family: login;
    src: url('html/fonts/KGCorneroftheSky.ttf');
}

@font-face {
    font-family: Jack;
    src: url('/html/fonts/Jack and the Beanstalk line.ttf');
}

@font-face {
    font-family: Old London;
    src: url('/html/fonts/OldLondon.ttf');
}

@font-face {
    font-family: Escape Great;
    src: url('/html/fonts/EscapeGreat.ttf');
}

@font-face {
    font-family: Snacker;
    src: url('/html/fonts/SnackerComic_PerosnalUseOnly.ttf');
}

@font-face {
    font-family: Young;
    src: url('/html/fonts/Young & Beautiful.ttf');
}

@font-face {
    font-family: Wonderland;
    src: url('/html/fonts/Beyond Wonderland.ttf');
}

/* Header */
.header_nav{
    height: 50px;;
}

.header_carousel {
    height:150px;
    background: #5A5A5A;
}

.header_carousel_img {
    width: 60px; 
    height: 60px;
    float:left;
    margin: 0 1px 0;
}

.header_quote {
    width:30px;
    margin-left:55px;
    margin-top : 1px; 
}

.dropdown-menu a {
    cursor: pointer;
}

.navbar-brand_active:after {
    background-color:rgba(0, 0, 0, 0);
    color:#FFFFFF;
}

/* sidebar*/

.sidebar {
    -webkit-box-shadow: 0px 0px 30px 0px rgba(96, 206, 255, 0.3);
    -moz-box-shadow:    0px 0px 30px 0px rgba(96, 206, 255, 0.3);
    box-shadow:         inset 0px 0px 30px 0px rgba(96, 206, 255, 0.1);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 15px;
}

.sidebar #subtitle {margin: 0 0 0 15px; font-size: 12px; font-style: italic; line-height: 22px;}

/* footer */
#footer {line-height: 50px; font-size: 10px; box-shadow:0 0 5px rgba(0, 0, 0, 0.9) !important;}
#footer img {max-height: 30px; max-width: 30px;display: block; float: left; margin: 10px 5px 0 0;}
.footer {padding: 0; }
#copyright {font-weight: bold; text-align: right; float:right; color:#999999;}

/* product */
.product_box { height: 155px;}
.product_image {}

.product_image img{max-height: 100px; margin: 0 auto;}

.product_name {text-align: center;}

/* modal bug chrome blue border*/
.modal-open .modal,.btn:focus{
    outline:none!important;
}


/* general */
.main_content {
    box-shadow:0 0 5px rgba(0, 0, 0, 0.3);
    min-height: 650px;
    padding: 0;
    background: #FEFCFF;
}

.login_input{
    padding: 0 5px;
    float:left;
}

.signup_row{
    padding: 0 10px;
    margin: 10px 0 10px;
}

#add_product_form, #edit_product_form {
    display: block;
    margin: 15px 0 0 0;
}

#add_product_form input, #add_product_form select, #edit_product_form input, #edit_product_form select {
    margin-bottom: 5px;
}

.edit_delete_container{
    display: none;
    margin: 0 auto; 
    width: 35px;
}

.product_box:hover .edit_delete_container{
    display:block;
}

.edit_product {
    width: 15px;
    height: 14px;
    float:left;
    margin: 0 5px 0 0;
    cursor: pointer;
    overflow: hidden;
    background: url("/html/images/edit.png");
}

.delete_product{
    overflow: hidden;
    cursor: pointer;
    width: 15px;
    height: 14px;
    background: url("/html/images/delete.png");
}




// about section
.about {

    display: block;
    overflow: hidden;
    margin: 5px 0 0 15px;
    width: 95%;
}

.about h1{
    font-family: Wonderland;
    font-size: 50px;
    line-height: 70px;
    margin: 0 0 20px 0;
}

.about p {
    font-size: 14px;
    font-style: italic;
    //font-family: Wonderland;
}




// contact
#contact_form{
    margin: 15px 0 0 10%;
}

#contact_form input, #contact_form textarea {
    display: block;
    margin-bottom: 15px;
}




// media queries
@media (max-width: 992px) {
    .blog-sidebar {
        display: none;
    }

    .about{
        width: 95%;
    }

    #contact_form {
        margin: 15px 0 0 17%;
    }

    #page_content{
        width:100%;
        font-size: 12px;
    }

}

@media (max-width: 1200px) {
    #content_row {
        width: 100% !important;
    }
}
/*
@media (min-width: 400px) and (max-width: 650px){
    .product_box {
        height: 100px;
    }
}

@media (min-width: 400px) and (max-width: 500px){
    .product_box {
        height: 75px;
        font-size: 9px;
    }
}*/