layout.css #3

/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *

 * http://extjs.com/license
 */ /*===================================
/*   Basic page styles
/*===================================*/
body {
    font-family: 'lucida grande', tahoma, arial, sans-serif;
    font-size: 11px;
}

a {
    color: #15428B;
}

a:link,a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.x-splitbar-h {
    background:#DFE8F6;
}

#header {
    background: #7F99BE url(images/layout-browser-hd-bg.gif) repeat-x center
        ;
}

#header h1 {
    font-size: 16px;
    color: #fff;
    font-weight: normal;
    padding: 5px 10px;
}

#start-div h2 {
    font-size: 12px;
    color: #555;
    padding-bottom: 5px;
    border-bottom: 1px solid #C3D0DF;
}

#start-div p {
    margin: 10px 0;
}

#details-panel h2 {
    padding: 10px 10px 0;
    font-size: 12px;
    color: #15428B;
}

#details-panel p {
    padding: 10px 10px 0;
}

#details-panel pre {
    border-top: 1px dotted #ddd;
    border-bottom: 1px dotted #ddd;
    margin-top: 10px;
    padding: 0 5px;
    background: #f5f5f5;
}

#details-panel .details-info {
    margin: 15px;
    padding: 15px;
    border: 1px dotted #999;
    color: #555;
    background: #f9f9f9;
}

/*===================================
/*   Customized layout styles
/*===================================*/
    /* Remove the border around the tabs and override the default white background: */
.x-tab-panel-header-plain .x-tab-strip-top {
    background: #DFE8F6 url(../images/default/tabs/tab-strip-bg.gif)
        repeat-x scroll center bottom !important;
}

/* Custom CSS applied to a single panel in an accordion: */
.custom-accordion .x-panel-body {
    font-family: georgia, serif;
    padding: 20px 80px !important;
    background: #ffe;
    font-size: 18px;
    text-align: center;
    color: #15428B;
}

.custom-accordion .x-panel-header-text {
    font-weight: bold;
    font-style: italic;
    color: #555;
}

/* Custom style for the FormLayout footer so that it integrates into the border layout nicely: */
#form-panel .x-panel-footer {
    background: #DFE8F6;
    border-color: #99BBE8;
    border-style: none solid solid;
    border-width: 0pt 1px 1px;
}

/* Customize the TableLayout html using standard CSS rules: */
#table-panel .x-table-layout {
    padding: 5px;
}

#table-panel .x-table-layout td {
    vertical-align: top;
    padding: 5px;
    font-size: 11px;
}

/* Toolbar icons for absolute form example: */
.icon-send {
    background-image: url(images/email_go.png) !important;
}

.icon-save {
    background-image: url(images/disk.png) !important;
}

.icon-print {
    background-image: url(images/printer.png) !important;
}

.icon-spell {
    background-image: url(images/spellcheck.png) !important;
}

.icon-attach {
    background-image: url(images/page_attach.png) !important;
}

/* Custom rule to make the toolbar fit within a framed panel with no margin: */
.email-form .x-panel-mc .x-panel-tbar .x-toolbar {
    border-top: 1px solid #C2D6EF;
    border-left: 1px solid #C2D6EF;
    border-bottom: 1px solid #99BBE8;
    margin: -5px -4px 0;
}

/* Custom styles for the "Tabs with nested layouts" example: */
.inner-tab-custom .x-border-layout-ct {
    background: #fff;
}

/*===================================
/*  Rules for custom ux layouts
/*====================================*/ /*

 * Ext.ux.layout.CenterLayout
 */
.ux-layout-center-item {
    margin: 0 auto;
    text-align: left;
}

.ux-layout-center .x-panel-body, /* if the container is a panel */ body.ux-layout-center
    { /* if the container is the doc body (for viewport) */
    text-align: center;
}