/* Site
   -------------------------------- */

html {
    overflow-y: scroll;
    background: #fff url('../images/bg.png') repeat-x scroll;
}

body {
    margin: 0;
    padding: 0 0 0 20px;
    min-height: 100%;
    /* font-family: "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; */
    font-family: "Helvetica", "Arial", "sans-serif";
    font-size: 10px;

}

#wrapper {
    margin: 0 auto;
    width: 956px;
    position: relative;

}

#banner {
    height: 125px;

}

#content .bg {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}

table.layout-grid a.disabled, table.layout-grid a.disabled:hover {
    color: #aaa;
    cursor: default;
    text-decoration: line-through;
}


/* Logo
   -------------------------------- */

h1.logo {
    position: absolute;
    top: 55px;
    left: 28px;
    margin: 0;
}

h1.logo,
h1.logo a {
    width: 235px;
    height: 55px;
}

h1.logo a {
    display: block;
    background: url('../images/esb-logo.png') no-repeat;
}

h1.logo a span {
    display: none;
}



/* Content
   -------------------------------- */

#content-wrapper {
    background: #FFF url('../images/content_bg.png') repeat-y 0 0;
}

#content {
    background: url('../images/content_body_bg.png') no-repeat 0 13px;
    zoom: 1;
}

.content-top {
    font-size: 1px;
    height: 13px;
    background: url('../images/content_top_bg.png');
}

.content {
    padding: 0 3px 0 3px;
    overflow: hidden;
}

#content .content {
    min-height: 380px;
}



#ie6 #content .content {
    height: 380px;
    overflow-y: visible;
}

/* Layout */

.content-head {
    height: 74px;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
}

.content-head h2 {
    float: left;
    margin: 0;
    padding: 20px 0 20px 24px;
    color: #ff9c08;
    font: normal 29px/30px "Helvetica", "Arial", "sans-serif";
}

.content-head h2 span {
    padding-right: 16px;
    border-right: 1px solid #ccc;
}

.content-head p {
    margin: 0;
    padding: 28px 0 0 12px;
    float: left;
    font: bold 15px "Helvetica", "Arial", "sans-serif";
}


/* Layout
   -------------------------------- */

.layout-grid {
    width: 100%;
}

.layout-grid td {
    vertical-align: top;
}

.layout-grid td.left-nav {
    width: 200px;
}

.layout-grid td.normal {
    border-left: 1px solid #eee;
    padding: 20px 24px;
    font-family: "Helvetica", "Arial", "sans-serif";
}




/* Normal
   -------------------------------- */

h2,
h3,
h4 {
    margin: 0;
    font-weight: normal;
}

h2, h3 {
    padding: 0 0 9px;
}

h4 {
    padding-bottom: 21px;
    border-bottom: 1px dashed #999;
    font-size: 12px;
    font-weight: normal;
}

.pull-quote {
    padding: 6px 0;
    line-height: 20px;
    text-transform: uppercase;
    font-size: 12px;
}

p {
    font-size: 14px;
}


/* Footer
   -------------------------------- */

#footer {
    height: 45px;
    padding: 10px 0;
    position: relative;
}

#footer .inner {
    position: relative;
    z-index: 2;
}

#footer .inner ul{
    margin:10px 10px 0px 0px;
    padding: 0;
    list-style-type: none;
    text-align: center;
    float:right;
}

#footer .inner ul li{
    display:inline-block;
    padding:10px;
    font-size:10px;
    text-transform:uppercase;
    color:#333;
    font-weight:bold;
}

#ie6 #footer .inner {
    zoom: 1;
}

#footer .bg {
    background: url('../images/footer_bg.png') no-repeat left top;
    width: 100%;
    height: 65px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}


#footer p {
    padding: 0;
    color: #5e5e5e;
    font: normal 9px "Helvetica", "Arial", "sans-serif";
    text-transform: uppercase;
}

#footer ul li a {
    color: #333;
    text-decoration:none;
}

#footer ul li a:hover {
    color: #016c96;
    text-decoration:none;
}






/* Demos */
.response{
    color:green;
    font-weight:bold;
}
.formLabel{
    font-weight:bold;
}

h5{
color:#333; font-size:14px; float:left; font-weight:normal;
}

.demos-nav, 
.left-nav .demos-nav dt, 
.left-nav .demos-nav dd, 
.left-nav .demos-nav ul, 
.left-nav .demos-nav li {
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.left-nav .demos-nav {
    float: left;
    width: 155px;
    font-size: 1.3em;
    padding:14px 23px 8px 22px;
}

.left-nav .demos-nav dt,
.left-nav .demos-nav h4 {
    margin: 0;
    padding: 0;
    font: normal 1.1em "Helvetica", "Arial", "sans-serif";
    color: #016c96;
}

.left-nav .demos-nav dt,
.left-nav .demos-nav h4 {
    margin-top: 1.5em;
    margin-bottom: 0;
    padding-left: 8px;
    padding-bottom:5px;
    line-height: 1.2em;
    border-bottom: 1px solid #F4F4F4;
}

.left-nav .demos-nav dd a,
.left-nav .demos-nav li a {
    border-bottom: 1px solid #F4F4F4;
    display:block;
    padding: 2px 3px 2px 8px;
    font-size: 90%;
    text-decoration: none;
    color: #555 ;
    margin:2px 0;
    height:13px;
}

.left-nav .demos-nav dd a:hover,
.left-nav .demos-nav dd a:focus,
.left-nav .demos-nav li a:hover,
.left-nav .demos-nav li a:focus {
    background: #f3f3f3;
    color:#000;
    -moz-border-radius: 3px; -webkit-border-radius: 3px;
}

.left-nav .demos-nav .selected {
    background: #f3f3f3;
    color:#000;
    -moz-border-radius: 3px; -webkit-border-radius: 3px;
}
 .demos-nav dd a.selected {
    background: #555;
    color:#ffffff;
    -moz-border-radius: 3px; -webkit-border-radius: 3px;
}

.example-title {
    font-size: 16px;
    color: #016c96;
    font-weight: bold;
    padding:.5em 0 .5em;
}

.example-text {
    font-size: 12px;
}

.example-strong-text {
    font-size: 12px;
    font-weight: bold;
}

#demo-header { float:left; width:100%; border-bottom:1px solid #eee; }
.normal #demo-header h2, .normal #demo-header h4 { float:left; width:100%; }
.normal #demo-header h2 { clear:left; font-size:20px; padding:0 0 5px; color:#333; }
.normal #demo-header h4 { font-size:14px; color:#333; padding:8px 0 3px; border:0; margin:0; }


#demo-config { clear:left; padding:20px 0 0; }

#demo-frame-wrapper { float:left; width:auto; }
.normal #demo-frame-wrapper p { font-size:12px; margin:5px 0 0; color#333; }
#demo-frame-wrapper p span { float:left; margin-right:5px; }

#demo-frame { clear:right; width:700px; height:auto; border:1px solid #ddd; overflow:auto; position:relative; }
#demo-frame .demo { padding: 5px; }
#demo-frame .demo h3.docs { clear:left; font-weight:normal; margin:0; padding:.5em 0 1em; }


#demo-link a:link,
#demo-link a:visited { color:#999; text-decoration:none; }
#demo-link a:hover,
#demo-link a:active { text-decoration:underline; }



/* ---------------------------------------------------------------
Clearfix
--------------------------------------------------------------- */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
