/* =============================================================================
   Variables
   ========================================================================== */

@blue: #122737;
@dark-blue: #081521;


/* =============================================================================
   Mixins
   ========================================================================== */

@import "../../wpboilerplate/css/mixins.less";


/* =============================================================================
   Style
   ========================================================================== */
   
html {
    body {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #333;
        line-height: 1.6;
        background: #eee;
        
        h1 {
            font-family: "Droid Serif", serif;
            font-weight: 400;
        }
        
        h1, h2, h3, h4, h5, h6 {
            color: #000;
        }
        
        a {
            color: @dark-blue;
            text-decoration: underline;
        }
        
        form {
            .field {
                margin: 0 0 20px 0;
                padding: 0 18px 0 0;
            }
            
            label {
                display: inline-block;
                font-size: 13px;
                margin: 0 0 5px 0;
            }
            
            input, select, textarea {
                padding: 8px;
                border: none;
                .border-radius(3px);
                
                &[type=submit] {
                    padding: 8px 12px;
                    color: #fff;
                    .vertical-gradient(lighten(@blue, 25%), lighten(@blue, 10%));
                    
                    &:hover {
                        .vertical-gradient(lighten(@blue, 25%), lighten(@blue, 20%));
                    }
                }
                
                &.input_80p { width: 80%; }
                &.input_100p { width: 100%; }
            }
        }
        
        #wrap {
            #header {
                background: @blue url(../img/header-bg.png) 0 0 repeat;
                
                #overhead {
                    padding: 10px 0;
                    background: @dark-blue url(../img/overhead-bg.png) left bottom repeat-x;
                    line-height: 1.0;
                    
                    #meta {
                        font-size: 11px;
                        color: #fff;
                        color: rgba(255,255,255,0.618);
                    }
                }
                
                #head {
                    background: url(../img/head-bg.png) left bottom repeat-x;
                    border-top: 1px solid #203753;
                    
                    .container {
                        background: url(../img/glow.png) center center no-repeat;
                    }
                    
                    #site-title {
                        line-height: 45px;
                        font-size: 36px;
                        text-align: center;
                        white-space: nowrap;
                        margin-top: 0 !important;
                        margin-bottom: 0 !important;
                        padding: 45px 0;
                        
                        a {
                            color: #fff;
                            text-decoration: none;
                        }
                    }
                    
                    #main-nav {
                        padding: 50px 0;
                        font-size: 12px;
                        
                        ul {
                            margin: 0;
                            padding: 0;
                            list-style: none;
                        }
                        
                        ul.menu {
                            float: right;
                            background: @dark-blue;
                            
                            a {
                                display: block;
                                padding: 2px 4px;
                                text-decoration: none;
                            }
                            
                            > li {
                                display: block;
                                float: left;
                                position: relative;
                                
                                > a {
                                    color: #fff;
                                    padding: 8px 10px;
                                }
                                
                                &:hover, &.current-menu-item, &.current-menu-parent {
                                    .vertical-gradient(#af0000, #880000);
                                }
                                
                                &.has-sub-menu > a {
                                    background: url(../img/menu-arrow.png) right center no-repeat;
                                    padding-right: 25px;
                                }
                                
                                ul.sub-menu {
                                    position: absolute;
                                    left: 0;
                                    top: 100%;
                                    visibility: hidden;
                                    background: #fff;
                                    .box-shadow(0, 1px, 2px, #ccc);
                                    z-index: 900;
                                    
                                    > li {
                                        white-space: nowrap;
                                        border-bottom: 1px solid #ddd;
                                        
                                        &:last-child {
                                            border-bottom: none;
                                        }
                                        
                                        > a {
                                            color: #555;
                                            padding: 4px 24px 4px 12px;
                                            border: 1px solid #fff;
                                        }
                                        
                                        &:hover, &.current-menu-item, &.current-menu-parent {
                                            background: #eee;
                                            
                                            > a {
                                                color: #333;
                                                padding: 4px 22px 4px 14px;
                                            }
                                        }
                                    }
                                }
                                
                                &:hover > ul.sub-menu {
                                    visibility: visible;
                                }
                            }
                        }
                    }
                }
            }
            
            #content {
                padding: 20px 0;
                
                > .container {
                    background: #fff;
                    border: 1px solid #ccc;
                    .box-shadow(0, 0, 2px, #ccc);
                }
                                
                h2, h3, h4, h5, h6 {
                    margin: 10px 0 20px 0;
                }
                
                p {
                    margin: 0 0 30px 0;
                }
                
                ul {
                    margin: 0 0 30px 0;
                    
                    &.two_cols > li, &.three_cols > li, &.four_cols > li, &.five_cols > li {
                        float: left;
                    }
                    
                    &.two_cols > li { width: 50%; }
                    &.three_cols > li { width: 33%; }
                    &.four_cols > li { width: 25%; }
                    &.five_cols > li { width: 20%; }
                    
                    ul {
                        margin: 0;
                    }
                }
                
                .box {
                    margin: 0 0 20px 0;
                    
                    .box-head {
                        padding: 20px 30px 10px 30px;
                        border-bottom: 1px solid;
                        
                        h1, h2, h3, h4, h5, h6 {
                            margin: 0 0 10px 0;
                            color: inherit;
                        }
                        
                        p {
                            margin: 0 0 10px 0;
                        }
                    }
                    
                    .box-body {
                        padding: 20px 30px;
                        border-top: 1px solid;
                        
                        form {
                            margin: 10px 0;
                            padding: 30px 50px;
                        }
                    }
                    
                    &.blue {
                        background-color: @blue;
                        color: #fff;
                        
                        .box-head {
                            border-color: darken(@blue, 15%);
                        }
                        
                        .box-body {
                            border-color: lighten(@blue, 10%);
                            
                            a {
                                color: #fff;
                            }
                            
                            form {
                                background: @dark-blue;
                                
                                input, select, textarea {
                                    border: 1px solid #000;
                                }
                            }
                        }
                    }
                    
                    &.dark-grey {
                        background-color: #444;
                        color: #fff;
                        
                        &.noisy {
                            background: url(../img/dark-grey-noisy.png);
                        }
                        
                        .box-head {
                            border-color: #333;
                        }
                        
                        .box-body {
                            border-color: #666;
                            
                            a {
                                color: #fff;
                            }
                        }
                    }
                    
                    &.glow > .container {
                        background-image: url(../img/glow.png);
                        background-position: center -200px;
                        background-repeat: no-repeat;
                    }
                }
                
                #main {
                    > .container {
                        padding: 30px 15px 30px 30px;
                    }
                    
                    h1.page-title {
                        font-size: 32px;
                        margin: 0 0 20px 0;
                        padding: 20px 0;
                        border-bottom: 1px solid #ccc;
                    }
                    
                    img {
                        padding: 5px;
                        border: 1px solid #ddd;
                    }
                }
                
                #sidebar {
                    font-size: 13px;
                    
                    > .container {
                        padding: 30px 30px 30px 15px;
                    }
                    
                    h3 {
                        font-size: 16px;
                    }
                    
                    p, ul {
                        margin: 0 0 10px 0;
                    }
                    
                    .widget {
                        margin: 0 0 20px 0;
                    }
                    
                    .box {
                        .box-head {
                            padding: 15px 20px 5px 20px;
                        }
                        
                        .box-body {
                            padding: 10px 20px;
                        }
                    }
                }
            }
        }
    }
}