/*
*
* !DO NOT EDIT THE CSS FILES, THEY ARE BUILT WITH THE LESS CSS!
* less/footer/feedback.less
*
* ---------------------------
* Styles associated with the Feedback and Ratings
* ---------------------------
*/
@import "../_mixins/all.less";

@media (min-width: 320px) {
    
}
@media (min-width: 480px) {

}
@media (min-width: 600px) {
    #wdn_footer_feedback {
    
        #wdn_feedback_comments {
            display: block;
            
            > fieldset {
                background: #e0e0e0;
                .border-radius(5px);
                padding: 5px;
                
                legend {
                    position: absolute;
                    font-weight: bold;
                }
                
                ol {
                    margin-top: 20px;
                    
                    li {
                        position: relative;
                        
                        &.wdn_comment_email, &.wdn_comment_name {
                            display: none;
                        }
                        
                        label {
                            .text-hidden();
                            color: #a1a1a1;
                            position: absolute;
                        }
                        
                        input, textarea {
                            border: 1px solid #DEDEDE;
                            background-color: #FDFDFD;
                            padding: 0;
                            width: 100%;
                            outline: none;
                            font-family: @impactFont;
                            &:active {
                                border: 1px solid #aaa;
                                border-bottom: 1px solid #888;
                                -moz-box-shadow: inset 0 0 3px 2px #ccc, 0 1px 0 0 #eee;
                                -webkit-box-shadow: inset 0 0 3px 2px #ccc, 0 1px 0 0 #eee;
                                box-shadow: inset 0 0 3px 2px #ccc, 0 1px 0 0 #eee;
                            }
                            &:focus {
                                background-color: #FFFFE0;
                                border: 1px solid #DEDEDE;
                            }
                        }
                        
                        textarea {
                            height: 50px;
                            font-size: 11px;
                            overflow: auto;
                        }
                    }
                }

                input.wdn_comment_submit {
                    background: -moz-linear-gradient(top, #efece9 0%, #f2f1ed 50%, #e7e4e3 51%, #e4e0dd 100%); // FF3.6+
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efece9), color-stop(50%,#f2f1ed), color-stop(51%,#e7e4e3), color-stop(100%,#e4e0dd)); // Chrome,Safari4+
                    background: -webkit-linear-gradient(top, #efece9 0%,#f2f1ed 50%,#e7e4e3 51%,#e4e0dd 100%); // Chrome10+,Safari5.1+
                    background: -o-linear-gradient(top, #efece9 0%,#f2f1ed 50%,#e7e4e3 51%,#e4e0dd 100%); // Opera11.10+
                    background: -ms-linear-gradient(top, #efece9 0%,#f2f1ed 50%,#e7e4e3 51%,#e4e0dd 100%); // IE10+
                    background: linear-gradient(to bottom, #efece9 0%,#f2f1ed 50%,#e7e4e3 51%,#e4e0dd 100%); // W3C
                    border: 1px solid #ccc;
                    border-bottom: 1px solid #bbb;
                    .border-radius(3px);
                    color: #333;
                    font-family: @impactFont;
                    font-size: 11px;
                    font-weight: bold;
                    line-height: 1;
                    padding: 8px 0;
                    text-align: center;
                    text-shadow: 0 1px 0 #eee;
                    width: 100px;
                    display: none;
                    &:hover {
                        background: -moz-linear-gradient(top, #e5e2df 0%, #f2f1ed 50%, #e7e4e3 51%, #e4e0dd 100%); /* FF3.6+ */
                        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e2df), color-stop(50%,#f2f1ed), color-stop(51%,#e7e4e3), color-stop(100%,#e4e0dd)); /* Chrome,Safari4+ */
                        background: -webkit-linear-gradient(top, #e5e2df 0%,#f2f1ed 50%,#e7e4e3 51%,#e4e0dd 100%); /* Chrome10+,Safari5.1+ */
                        background: -o-linear-gradient(top, #e5e2df 0%,#f2f1ed 50%,#e7e4e3 51%,#e4e0dd 100%); /* Opera11.10+ */
                        background: -ms-linear-gradient(top, #e5e2df 0%,#f2f1ed 50%,#e7e4e3 51%,#e4e0dd 100%); /* IE10+ */
                        background: linear-gradient(to bottom, #e5e2df 0%,#f2f1ed 50%,#e7e4e3 51%,#e4e0dd 100%); /* W3C */
                        border: 1px solid #bbb;
                        border-bottom: 1px solid #999;
                        cursor: pointer;
                        text-shadow: 0 1px 0 #ddd;
                    }
                    
                }
            }
        }
    }
}
@media (min-width: 768px) {

}
@media (min-width: 960px) {

}
@media (min-width: 1040px) {
    #wdn_footer_feedback #wdn_feedback {
        display: block;
        margin-bottom: 1em;
    }
    .rating {
        font-weight: bold;
        &:not(:checked) {
        
            > input {
                position:absolute;
                top:-9999em;
                clip:rect(0,0,0,0);
                &:focus {
                
                    + label {
                        color: gold;
                        text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
                    }
                }
            }
            
            > legend {
                font-size: 90%;
            }
            
            > label {
                float:right;
                width:1.1em;
                padding:0;
                margin: -1.1em 0 0 0;
                overflow:hidden;
                white-space:nowrap;
                cursor:pointer;
                font-size:140%;
                line-height:1.2;
                color:#fbfbfb;
                text-shadow:-1px -1px 0px #ddd, 1px 1px 3px #666;
                &:before {
                    content: '★';
                    margin-right:1.1em;
                    speak: none;
                }
                &:hover, &:hover ~ label {
                    color: gold;
                    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
                }
            }
        }
        
        > input {
        
            &:checked {
            
                ~ label {
                    color: #f70;
                    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
                }
            }
        }
        
        > label {
            
            &:active {
                position:relative;
            }
        }
    }
    
    .rating > input:checked + label:hover,
    .rating > input:checked + label:hover ~ label,
    .rating > input:checked ~ label:hover,
    .rating > input:checked ~ label:hover ~ label,
    .rating > label:hover ~ input:checked ~ label {
        color: #ea0;
        text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
    }
}