body {
    font-family: 'lucida grande',tahoma,arial,sans-serif;
    font-size: 11px;
    background-color: Gray;
}

a {
    color: #15428B;
}

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

    a:hover {
        text-decoration: underline;
    }

#header {
    background-color: #ffffff;
    border-top: #3a477a 5px solid;
}

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

#HeaderStudyLogo {
    padding-right: 0px;
    padding-left: 0px;
    vertical-align: bottom;
}

#HeaderUserArea {
    padding-right: 5px;
    margin-top: 5px;
    padding-left: 5px;
    float: right;
    padding-bottom: 5px;
    padding-top: 5px;
    text-align: right;
    font-size: 9.45pt;
}

#footer {
    background-color: #eaece0;
}

.footerleft {
    text-align: left;
    float: left;
    padding-left: 10px;
    padding-top: 10px;
}

.footerright {
    float: right;
    text-align: right;
}

.footercentered {
    text-align: center;
    padding-top: 25px;
}

.add {
    background-image: url(Images/add.gif) !important;
}

.config {
    background-image: url(Images/cog.png) !important;
}

.zoom {
    background-image: url(Images/zoom.png) !important;
}

.icon-pdf {
    background-image: url(Images/pdf_small_transparent.gif) !important;
}

/* Custom displayfield located in ROME.Core/Misc.js */
.x-form-miscfield {
    font-weight: bold;
}

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

.ux-layout-center {
    text-align: center;
}

/* These are align fixes caused by Ext.ux.layout.CenterLayout */
.x-panel-body {
    text-align: left;
}

.x-window {
    text-align: left;
}

.x-combo-list-inner {
    text-align: left;
}

.x-menu a.x-menu-item {
    text-align: left;
}

.x-form-element {
    text-align: left;
}

/* add some padding so it spaces nice and relative elements dn't get clipped */
.form-group {
    padding-bottom: 5px;
    overflow: hidden;
}

    /* Simple blue border */
    .form-group .form-group-header {
        padding: 0;
        background: transparent;
    }

    /* Position the text element so it appears over the border added above */
    .form-group .form-group-header-text {
        font-size: 11px;
        font-family: tahoma,arial,sans-serif;
        line-height: 13px;
        position: relative;
        left: 5px;
        top: 5px;
        padding: 1px 5px 1px 20px;
        color: #4e79b2;
        background: transparent no-repeat 2px 0;
    }

/* Copied from x-plain (for IE + layouts to work) */
.form-group-body {
    overflow: hidden;
}

/* Copied from x-plain (for IE + layouts to work) */
.form-group-bwrap {
    overflow: hidden;
    padding: 5px;
    zoom: 1;
}

/* Change the toggle icon when collapsed */
.x-panel-collapsed .form-group-header-text {
    background-position: 2px -15px;
}

.SiteDashboard {
    table-layout: fixed;
}

    .SiteDashboard td {
        font: normal 11px arial, tahoma, helvetica, sans-serif;
        -moz-outline: none;
        -moz-user-focus: normal;
    }

.SiteDashboard-Row {
    background-color: #f6f6f6;
}

.SiteDashboard-Row-Alt {
    background: transparent;
}

.SiteDashboard-div {
    font-family: 'lucida grande',tahoma,arial,sans-serif;
    font-size: 14px;
    background: #516275 url('ExtJS/images/slate/toolbar/bg.gif') repeat-x scroll left top;
    color: White;
    padding: 2px;
}

.ParticipantDashboard {
    table-layout: fixed;
}

    .ParticipantDashboard .x-panel-body {
        font: normal 16px arial, tahoma, helvetica, sans-serif;
        -moz-outline: none;
        -moz-user-focus: normal;
        background-color: transparent;
    }

    .ParticipantDashboard td {
        font: normal 16px arial, tahoma, helvetica, sans-serif;
        -moz-outline: none;
        -moz-user-focus: normal;
    }

.ParticipantDashboard-Row {
    background-color: #f6f6f6;
}

.ParticipantDashboard-Row-Header {
    font-family: 'lucida grande',tahoma,arial,sans-serif;
    font-size: 22px;
    background: transparent url('ExtJS/images/slate/tabs/tabs-sprite.gif') repeat-x -351px;
    color: Black;
    padding: 10px;
}

.ParticipantDashboard-Row-Alt {
    background: transparent;
}

.ParticipantDashboard-div {
    font-family: 'lucida grande',tahoma,arial,sans-serif;
    font-size: 18px;
    background: #F0F4F5 url('ExtJS/images/slate/toolbar/bg.gif') repeat-x scroll left top;
    color: White;
    padding: 2px;
}

.ParticipantDashboard-Heading-h1 {
    font-family: 'lucida grande',tahoma,arial,sans-serif;
    font-size: 22px;
    background: transparent url('ExtJS/images/slate/tabs/tabs-sprite.gif') repeat-x -351px;
    color: Black;
    padding: 10px;
}

.ParticipantDashboard-Heading-h2 {
    font-family: 'lucida grande',tahoma,arial,sans-serif;
    font-size: 18px;
    background: white;
    color: Black;
    padding: 10px;
}

.ParticipantDashboard-Paragraph {
    font-family: 'lucida grande',tahoma,arial,sans-serif;
    font-size: 16px;
    background: white;
    color: Black;
    padding: 10px;
}

/* 3.1.1 x-form-check-wrap has a height of 22px. This assumes a single line of text. */
.x-form-check-wrap {
    height: auto;
}

.RandResultsHeader {
    font-size: 18px;
    padding-bottom: 10px;
}

.randomize-link {
    font-size: 15px;
}

.RandResultsTable {
    width: 850px;
}

.RandResultsValue {
    font-weight: bold;
}

.x-panel-tbar .x-btn .x-btn-tl {
    background-position: 0px 0;
}

.x-panel-tbar .x-btn .x-btn-tr {
    background-position: -3px 0;
}

.x-panel-tbar .x-btn .x-btn-tc {
    background-position: 0 -6px;
}

.x-panel-tbar .x-btn .x-btn-ml {
    background-position: 0px -24px;
}

.x-panel-tbar .x-btn .x-btn-mr {
    background-position: -3px -24px;
}

.x-panel-tbar .x-btn .x-btn-mc {
    background-position: 0 -1096px;
}

.x-panel-tbar .x-btn .x-btn-bl {
    background-position: 0px -3px;
}

.x-panel-tbar .x-btn .x-btn-br {
    background-position: -3px -3px;
}

.x-panel-tbar .x-btn .x-btn-bc {
    background-position: 0 -15px;
}

.x-panel-tbar .x-btn button {
    color: #000000;
}

.x-nav-bar .x-btn .x-btn-tl {
    background-position: 500px 500px;
}

.x-nav-bar .x-btn .x-btn-tr {
    background-position: 500px 500px;
}

.x-nav-bar .x-btn .x-btn-tc {
    background-position: 500px 500px;
}

.x-nav-bar .x-btn .x-btn-ml {
    background-position: 500px 500px;
}

.x-nav-bar .x-btn .x-btn-mr {
    background-position: 500px 500px;
}

.x-nav-bar .x-btn .x-btn-mc {
    background-position: 500px 500px;
}

.x-nav-bar .x-btn .x-btn-bl {
    background-position: 500px 500px;
}

.x-nav-bar .x-btn .x-btn-br {
    background-position: 500px 500px;
}

.x-nav-bar .x-btn .x-btn-bc {
    background-position: 500px 500px;
}

.x-nav-bar .x-btn button {
    color: #FFFFFF;
}

.x-grid3-hd-inner {
    overflow: hidden;
    padding: 3px 3px 3px 5px;
    white-space: normal;
}

/*a composite field uses this color as its background when invalid instead of white*/
.x-form-invalid.x-form-composite {
    background-color: #eef4f8;
}

.rome-form-invalid {
    background-color: #fff;
    background-image: url(./ExtJS/images/default/s.gif);
}

.rome-form-field-rowseparator {
    border-bottom: 1px solid;
    padding-bottom: 1em;
}

.clickable-img-over {
    cursor: pointer;
}

.x-item-disabled {
    color: #505050 !important;
    -moz-opacity: 100;
    opacity: 1;
}

.x-form-item-label .x-item-disabled {
    color: #505050 !important;
    -moz-opacity: 100;
    opacity: 1;
}