Danbred-na-portal Theme

by Eric Miller

HTML

<div class="workspace font-verdana font-13pt brown-text white-bg">
<div class="panel">
    <header class="header panel-header">
        <h1 class="title panel-title font-trebuchet red-text font-150">DanBred... Generations Ahead</h1>
    </header>
    <div class="content panel-content">
        <p>Danbred North America is a privately held company that is owned by pork producers. Not burdened with the market expectations of publicly traded companies, Danbred North America’s genetic program is designed to benefit producers, allow a simple and straightforward implementation within the customers system while providing unmatched genetic gain.</p>        
        <p>Danbred North America is unique in the swine genetics business because we are directly tied to the Danish genetics program. All of our nucleus herds are indexed against the nucleus herds in Denmark, giving DanBred the largest base of nucleus animals in the world.</p>
    </div>
    <footer class="footer panel-footer">
        <span class="panel-footer-staus">Good to Go.</span>
    </footer>
</div>    
</div>

CSS

body{
    background: #D9CCAC; /* Old browsers */
}

/*
Color Palate
Khaki - #F8F4EB
Dk. Khaki - #D9CCAC
red - #c94745
dk red - #9e2729
red border - #9f3333
White - #eee9d6
Text (Brown) - #65553e
*/

.font-verdana{ font-family:verdana, helvetica, arial, sans-serif;}
.font-trebuchet{ font-family:'Trebuchet MS', Helvetica, sans-serif;}

.font-13pt{font-size:13pt;}

.font-76{font-size:.76em;}
.font-117{font-size:1.17em;}
.font-125{font-size:1.25em;}
.font-150{font-size:1.5em;}
.font-200{font-size:2em;}

.brown-text{color:#65553E;}
.red-text{color:#C94745;}

.white-bg{background-color:#eee9d6;}

.workspace{
    position:absolute;
    top:0; left:0;
    width:100%;
    display:block;
}

.panel{
    max-width:960px;
    background:#F8F4EB;       
    position:absolute;
    display:inline-block;
    border:1px solid #666;
    box-shadow:#c3b89a 4px 4px 4px;
    resize:both;
    overflow:auto;
}
.panel-title{
color:#FFF;        
}
.panel-header{
    background:#9E2729;
    color:#FFF;
    padding:5px 10px;
    cursor:default;
}

.panel-content {
    background:#FFF;
    color:#000;
    padding:5px 10px;
}
.panel-content p{
 margin:5px 0;   
}

.panel-footer{
 height:1.5em;   
    overflow:hidden;
}

.page {
width:960px;
margin:0 auto;    
}

JavaScript

$('.panel').resizable().draggable();