<!DOCTYPE html>
<html>
    <head>
        <title>${mojotrollz_page_title}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">               
        ${css}
        ${js}
    </head>

    <body style="color: gold;  background: url(${PICPATH}wall.jpg);">
        <div id="logo" style="text-align: center"><img src="${PICPATH}World-Of-Warcraft-Logo.png"/></div>
        <div id="wrapper"style="width: 1000px;  margin: auto; -webkit-box-shadow: 3px 3px 4px 2px rgba(0, 0, 0, 1); box-shadow: 3px 3px 4px 2px rgba(0, 0, 0, 1); border-radius: 5px;">
            <div id="wizard_navbar" class="navbar" style="background: black; height:48px; font-size: 22px;">
                 <div class="navbar-inner" style="background-image: url(${PICPATH}nav_test.png);">
                    <ul id="nav" class="nav">                                  

                    </ul>
                 </div>
                <img src="${PICPATH}border_top.png" width="100%"/>
             </div>
             <div  class="parent" style="background: url(${PICPATH}background.png);" >          
                <div style="display: table-row">
                    <div id="frame_left" class="left" style="background: url(${PICPATH}border_left.png) repeat-y;"></div>
                    <div id="content_wrapper" style="padding-left: 10px; padding-right: 10px; padding-bottom: 75px;">
                        <div id="content" >
                            <div style="float: left; color: black;">                               
                                <h4>Welcome to Endgame WoW.
                                    <br>
                                    This site is under construction.
                                    <br>
                                    Feel free to snoop around.
                                </h4>
                             <div style="">
                                <img src="${PICPATH}help_gnome.png" width="200px;" />
                                </div>
                            </div>
                            <div class="lifecraft" style="float: right; padding-right: 10px;">
                                <h3>Login</h3>
                                <form class="textbox" style="padding:10px" id="login_form">
                                    <div class="control-group">
                                        <div class="controls">
                                            <input  type="text"
                                                    size="30"
                                                    style="margin-bottom: 15px;"
                                                    id="bt_login_user"
                                                    placeholder="${login_username}"
                                                    minlength="3" data-validation-minlength-message="${login_username_too_short}"
                                                    maxlength="16" data-validation-maxlength-message="${login_username_too_long}"
                                                    required data-validation-required-message="${login_username_required}"/>
                                        </div>
                                        <div class="controls">
                                            <input  type="password"
                                                    size="30"
                                                    style="margin-bottom: 15px;"
                                                    id="bt_login_password"
                                                    placeholder="${login_password}"
                                                    minlength="5" data-validation-minlength-message="${login_password_too_short}"
                                                    maxlength="16" data-validation-maxlength-message="${login_password_too_long}"
                                                    required data-validation-required-message="${login_password_required}"/>
                                        </div>        
                                        <div class="help-block"></div>
                                        <input type="hidden" />
                                        <button class="btn" style="clear: left; height: 32px; font-size: 13px;"
                                                type="submit"
                                                id="login_submit">${login_login}</button>
                                    </div>
                                </form>                                
                            </div>
                        </div>
                        <div style="clear: both;"></div>
                        <div id="back" style="float: left; display: none;"><a href="#"><img src="${WOWICONS}arrow_left.png"/></a></div>
                        <div id="start" style="float: left;"><a href="#"><img src="${PICPATH}button.png"/></a></div>
                        <div id="next" style="float: right; display: none;"><a href="#"><img src="${WOWICONS}arrow_right.png"/></a></div>                        
                    </div>
                    <div class="right" style="background: url(${PICPATH}border_right.png) repeat-y;"></div>              
                </div>
                <div class="bottom">
                    <div class="" style="display: table-cell; background: url(${PICPATH}border_bot_l.png) no-repeat;">&nbsp;</div>
                    <div class="" style="display: table-cell; background: url(${PICPATH}border_bot_m.png) repeat-x;">&nbsp;</div>
                    <div class="" style="display: table-cell; background: url(${PICPATH}border_bot_r.png) no-repeat;">&nbsp;</div>
                </div>
        </div> 
                
        </div>
     
    </body>
</html>
