@import 'boilerplate';
@import 'helpless.0.0.3';


/*Site Color Library*/
@siteBackground: #CCC;
@siteMenuTextColor: #CCC;
@siteMainMenuTextColor: #333;
@siteMenuTextHoverColor: #555;
@siteMenuBackgroundColor: #FFF;
@siteMenuBackgroundHoverColor: #999;
@siteMainMenuTextHoverColor: #CCC;
@siteMainMenuBackgroundColor: #333;
@siteMainMenuBackgroundHoverColor: #003423;
@siteMainMenuBorderColor: #bbb;
@siteHeaderTextColor: #333;
@siteBodyTextColor: #666;
@siteLinkTextColor: #00F;
@siteLinkTextHoverColor: #009;
@siteDarkGreen: #003423;

#blr.normalize();
#hl.reset();

/*Common Shared Class*/

/* Custom FONT Style */
.introFont, .navigationFont, .longTitleFont, .bodyFont, .headlineFont {
    font-family: "Open Sans", "Verdana", "Arial", "sans-serif";
    font: "Open Sans", "Verdana", "Arial", "sans-serif";
}
.headlineFont, .navigationFont{
    font-weight: 700;
}
.introFont, .bodyFont{
    font-weight: 400;
}
.introFont{
    font-style: oblique;
    font-style: italic;
}
strong{
    font-weight: 700;
}

/*Body Text Styling*/
h1,h2,h3,h4,h5,h6{
    .headlineFont;
    margin: 0 0 10px 0;
    font-weight: 700;
    color: @siteHeaderTextColor;
}
h1{ font-size: 20px; }
h2{ font-size: 18px; }
h3{ font-size: 16px; }
h4{ font-size: 14px; }
h5{ font-size: 14px; }
h6{ font-size: 12px; }

p{
    color: @siteBodyTextColor;
    font-size: 12px;
    line-height: 18px;
    margin: 15px 0 5px;
}

a{
    text-decoration: none;
    font-weight: 700;
}

body{
    .bodyFont;
    background-color: @siteDarkGreen;

    #container{
        width: 960px;
        margin: 0 auto;
        #hl.drop-shadow( 0px, 0px, 50px, #000 );
        background-color: #FFF;

        #header{
            background:url( '../images/header_background.png' ) repeat-x;
            #hl.drop-shadow( 0px, 2px, 7px, #333 );
            width: 100%;
            height: 120px;

            .enerG2Logo{
                float: left;
                margin: 25px 0 0 20px;
                background:url( '../images/energ2_logo.png' ) top left no-repeat;
                width: 210px;
                height: 80px;
        }

        #headTitle{
            float: left;
            font-size: 18px;
            text-align: center;
            line-height: 80px;
            vertical-align: middle;
            width: 500px;
            height: 80px;
        }

        a.banner{
            float: right;
            display: block;
            font-size: 12px;
            padding: 2px 20px;
            margin: 20px;
            line-height: 25px;
            background-color: #CCC;
            color: @siteDarkGreen;
            #hl.drop-shadow( 0px, 3px, 5px, #333 );

            &:hover{
                background-color: @siteDarkGreen;
                color: #FFF;
            }
        }

        #topMenu{
            .navigationFont;
            float: right;
            #hl.ui.list.horizontal();
            margin: 5px 0 0 0;

            li{
                margin: 0;

                a{
                    #hl.transition( all, 300ms );
                    padding: 10px 20px;
                    line-height: 30px;
                    vertical-align: middle;
                    color: @siteMenuTextColor;
                    font-size: 12px;
                    text-decoration: none;

                    &:hover{
                        color: @siteMenuTextHoverColor;
                    }
                }
            }
        }

        #menu{
            .navigationFont;
            z-index: 20;
            margin-left: 220px;

            height: 40px;
            width: 740px;
            @menu_row_height : 40px;

            a{
                padding: 0px 20px;
                display: block;
                line-height: @menu_row_height;
                height: @menu_row_height - 2px;
                vertical-align: middle;
                color: @siteMainMenuTextColor;
                text-decoration: none;
                #hl.transition( all, 300ms );

                &:hover{
                    color: @siteMainMenuTextHoverColor;
                    background-color: @siteMainMenuBackgroundHoverColor;
                }
            }

            ul.navMainMenu{
                float: right;
                #hl.ui.list.horizontal();
                margin-right: 90px;

                li.menuHeader{
                    display: block;
                    font-size: 12px;
                    margin: 0;
                    line-height: @menu_row_height;

                    ul.subMenu{
                        #hl.drop-shadow( 0px, 2px, 4px, #333 );
                        z-index: 20;
                        display: none;
                        background-color: #E5E5E5;
                        position: absolute;

                        li.menuHeader{
                            font-size: 10px;
                            line-height: 30px;
                            float: none;
                            border-left: 1px solid @siteMainMenuBorderColor;
                            border-right: 1px solid @siteMainMenuBorderColor;

                            &.last{
                                #hl.drop-shadow( 0, 1, 3, #333 );
                                border-bottom: 1px solid @siteMainMenuBorderColor;
                            }
                        }
                    }
                }
            }

            #siteSearch{
                float: right;
                margin: 10px 13px 0 0;
                border: solid 1px #333;

                .search{
                    border: none;
                    background-color:#FFF;
                }

                input{
                    width: 150px;
                    padding: 1px 0 3px 7px;
                    color: @siteMenuTextColor;
                    border: none;
                    #hl.transition( background-color, 500ms );

                    &:focus{
                        color: @siteMenuTextHoverColor;
                    }
                }

                img{
                    vertical-align: top;
                }
            }
        }
    }
    #content{
        min-height: 600px;
        #hl.clearfix();

        a.readMore{
            font-size: 10px;
            color: @siteDarkGreen;
            float: right;
            margin: 5px 15px 0 0;

            &:active,
            &:link,
            &:visited{
                color: @siteDarkGreen;
            }

            &:hover{
                color: @siteDarkGreen + 100;
            }
        }

        h3{
            color: @siteDarkGreen;
        }

        h4{
            background: url( '../images/section_header.png' ) repeat-x;
            line-height: 30px;
            vertical-align: middle;
            padding: 0 0 0 10px;
            color: #CCC;
        }

        #articles{
            margin: 20px 20px 60px 20px;
            #hl.clearfix();

            img{
                #hl.img.responsive();
                margin-right: 20px;
                float: left;
                border: 1px solid #999;
                background-color:#FFF;
                margin-bottom: 20px;
            }


            .column1, .column2, .column3{
                overflow: hidden;
                float: left;
                width: 32%;
                margin-right: 15px;

                .articleBox1{
                    position: relative;
                    #hl.transition( background-color, 200ms );
                    float: left;
                    margin-bottom: 20px;
                    padding: 0;
                    width: 100%;
                }

                .articleBox2{
                    position: relative;
                    #hl.transition( background-color, 200ms );
                    float: left;
                    width: 100%;
                }
            }

            .column3{
                margin-right: 0;
            }
        }

        #columnArticles{
            margin: 20px 0 30px 0;
            #hl.clearfix();

            .columnHeader{
                width: 920px;
                margin: 0 auto 10px;

                .pageTitle{
                    .longTitleFont;
                    font-size: 18px;
                    width: 180px;
                    height: 150px;
                    display: table;
                    background-color: #666;
                    color: #FFF;
                    padding-left: 10px;
                    margin: 0;
                    float: left;

                    div{
                        display: table-cell;
                        vertical-align: middle;
                    }
                }

                .articleImageHeader{
                    margin: 0 0 0 180px;
                    width: 740px;
                    height: 150px;
                    background-color: #333;

                    .imageCaption{
                        font-size: 10px;
                        padding: 20px;
                        line-height: 20px;
                        width: 30%;
                        color: #FFF;
                    }
                }
            }

            .column1, .column2, .column3{
                float: left;
                height: 100%;
                #hl.clearfix();
            }

            .column1{
                height: 300px;
                width: 170px;
                padding: 20px;

                ul.navMenu{
                    font-size: 12px;
                    li{
                        padding: 3px 10px;
                        a{
                            color: #666;
                            &:hover{
                                color: #333;
                            }
                        }
                    }
                }

                img,
                .squareImage{
                    background-color:#444;
                    margin: 10px 10px 0 20px;
                }

                .squareImage{
                    width: 180px;
                    height: 180px;
                }

                p,
                .imageCaption{
                    padding: 0;
                    margin: 5px 0 0 20px;
                    font-size: 10px;
                    width: 180px;
                }
            }

            .column2{
                width: 500px;

                h5{
                }

                .pageQuote{
                    font-size: 16px;
                    padding: 10px 0 20px 0;
                    line-height: 22px;
                    width: 100%;
                    color: @siteDarkGreen;
                }

                .slider-wrapper{
                    margin: 0 0 20px 0;

                    /* realign the left arrow for internal page */
                    a.nivo-prevNav{
                        left: 10px;
                    }
                }

                ul.newsList{
                    li{
                        list-style-type: none;
                        padding: 0;
                        margin: 25px 0;
                        h5{
                            margin: 0 0 5px;
                            font-size: 12px;
                        }
                        p, a{
                            margin: 0;
                            font-size: 12px;
                        }

                        #hl.clearfix();
                    }
                }
            }

            .column3{
                height: 600px;
                width: 250px;

                img,
                .squareImage{
                    background-color:#444;
                    margin: 10px 10px 0 20px;
                }

                .squareImage{
                    width: 210px;
                    height: 210px;
                }

                p,
                .imageCaption{
                    padding: 0;
                    margin: 5px 0 0 20px;
                    line-height: 12px;
                    font-size: 10px;
                    width: 210px;
                }
            }
        }
    }
    #footer{
        background-color: #EEEEEE;
        border-top: solid 2px #CCC;
        #hl.clearfix();

        .contacts{
            position: relative;
            @contactsColor: #999;
            margin: 30px 10px 0 30px;
            float: left;
            padding-bottom: 20px;
            width: 220px;
            height: 200px;

            h1,h2,h3,h4,h5,h6,p{
                color: @contactsColor;
            }

        }

        .copyright{
            font-size: 10px;
            margin: 0 20px 20px 0;
            float: right;
            clear: both;
            color: #333;
        }

        .siteMap{
            margin: 30px 10px 20px 10px;
            float: left;
            font-size: 10px;
            width: 660px;

            a{
                color: #999;

                &:hover{
                    color: @siteMenuTextHoverColor;
                }
            }

            ul.navMenu{
                #hl.ui.list.horizontal();

                li.menuHeader{
                    margin: 0 10px 5px 30px;

                    a{
                        font-size: 12px;
                        font-weight: 700;
                    }

                    ul.subMenu{
                        margin-top: 10px;

                        li.menuHeader{
                            margin-left: 0;
                            float: none;

                            a{
                                font-size: 10px;
                                font-weight: 300;
                            }
                        }
                    }
                }
            }
        }

    }

}
}