UI Experimentation

by dfederighi

HTML

<html>

<body>    
 
    <div class="shader">
        <div id="hdr">
            <div>Allegiance</div>
        </div>
    </div>
    
    
    <div id="content">
        <div id="left"></div>
        <div id="right">
            <div class="top">This is a bunch of words that I want to write. I need to tweak the line-height and a number of other things before I decide on this.</div>
            <div class="bottom"></div>                
        </div>  
    </div>
 
    
    </body>
    
</html>

CSS

#hdr {
background: #000000 url(http://dale-7.smugmug.net/img/allegiance-sprite.png) repeat-x;
background-position: 0 0;
height: 60px;
margin: 0;
 padding: 0;
line-height: 60px;    
}

#hdr div {
 color: #330000;
font-size: 40px;
font-family: helvetica; 
margin-left: 10px;
 text-shadow: 0px 1px 1px #993333;
    
}

.shader {
    z-index: 2;
    position: relative;        
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, .60);
}

#hdr:hover {
 background-position: 0 -65px;   
}

body {
    background-color: #ccc;
}

#content {
 height: 400px;
background-color: #444;
  margin: 0;
    padding:0;
overflow: hidden;
position: relative;
 z-index: 1;
box-shadow: 0 0 8px 2px rgba(0, 0, 0, .60);    
}

#left {
    float: left;
 width: 150px;
    height: 400px;
 border-right: 1px solid rgba(0, 0, 0, .40);   
}

#right {
    float: left;
    width: 300px;
    height: 400px;
    border-left: 1px solid rgba(255, 255, 255, .10);
}

.top {
    border-bottom: 1px solid rgba(0, 0, 0, .40);
    height: 125px; 
  font-family: "Proxima Nova Regular", "Helvetica Neue", Arial, Helvetica, sans-serif;
    color: #ccc;
    font-size: 14px;
    line-height: 18px;
    _font-family: helvetica;
    _text-shadow: 0px -1px 0px rgba(0, 0, 0, .60);
  
}

.bottom {

    height: 275px;
    border-top: 1px solid rgba(255, 255, 255, .10);
}