source: Dev/branches/rest-dojo-ui/client/rft/css/layout.css @ 354

*:focus {
    /* Disabled Chrome focus outlines! */
    outline: none;
}
html,body {
    width: 100%;
    height: 100%;
    font-size: 13px;
    background-color: #333333;
}
.claro {
    font-family: 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
    color: #ffffff;
}

/* Headings */
.claro h1 {   
    /* Main logo */
    float: left;
    clear: left;
    font-size: 48px;
    color: #999999;
    margin: 0 10px 8px 10px;
    padding: 0;
    line-height: 48px;
    font-weight: normal !important;
    -webkit-user-select: none;
    -moz-user-select: none;
}
.claro h2 {
    /* Content pane title */
    font-size: 22px;
    line-height: 30px;
    margin: 0;
    padding: 0;
}
.claro h2 .rftIcon {
    float: left;
    width: 32px;
    height: 32px;
    background-image: url('images/icons/rftIcons32.png');
    margin-right: 8px;
}
.claro h3 {
    /* Section headers */
    font-size: 18px;
    margin: 0 0 4px 0;
}
.claro h4 {
    /* Small text headers/paragraph headers */
    font-size: 16px;
}

/* Topbar  */
.claro .topbar {
    overflow-y: hidden;
}
.claro .topbar .dijitMenuBar {
    border: none;
    background-color: transparent;
    background-image: none;    
    float: right;
    clear: right;
    margin-top: 16px;
}

/* Breadcrumbs */
.claro .breadcrumbs {
    float: left;
    clear: left;
    width: 100%;
    text-align: center;
    height: 16px;
    line-height: 16px;
    margin: 0 0 4px 0;
}
.claro .breadcrumbs .breadcrumb {
    color: #999999;
    font-size: 13px;
}
.claro .breadcrumbs .breadcrumb.breadcrumbCurrent {
    color: #ffffff;
    font-size: 14px;
}
.claro .breadcrumbs .breadcrumb.breadcrumbHover {
    color: #0072bc;
}

/* Content */
.claro .dijitContentPane.page {
    padding: 0;
}
.claro .content.dijitContentPane {
    display: block;
    clear: both;
    padding: 0;
    background-color: #555555;
    /* Background gradient time! */
    background: -webkit-radial-gradient(
        50% 50%, 
        circle, 
        #666666 1%,
        #444444 100%
        );
    background: -moz-radial-gradient(
        50% 50%, 
        circle, 
        #666666 1%,
        #444444 100%
        );
}
.claro .content.dijitContentPane .dijitBorderContainer {
    padding: 2px;
}

/* General */
.loginLabel {
    float: left;
    clear: left;
    width: 100px;
}
.loginInput {
    float: left;
    clear: right;
    width: 150px;
}
.rftMultipleChoiceWidget {
    display: table;
}
.rftMultipleChoiceWidget .row {
    display: table-row;
}
.rftMultipleChoiceWidget .rowBox {
    display: table-cell;
}
.rftMultipleChoiceWidget .rowText {
    display: table-cell;
    width: 100px;
}
.rftMultipleChoiceWidget .rowBtn {
    display: table-cell;
    width: 30px;
}
.verticalTabList {
    width: 190px;
}

/* Tabs */
.claro .dijitTabContainerLeft-tabs {
    border: none;
    padding: 4px 16px 4px 4px;
}
.claro .dijitTabContainerLeft-tabs .dijitTab {
    margin: 4px 0;
    width: 200px;
    min-height: 30px;
}
.claro .dijitTab {
    padding: 2px 8px;
    color: #999999;
    border: 1px solid #999999;
    white-space: normal;
    overflow: hidden;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}
.claro .dijitTabContainerLeft-tabs .dijitTab .dijitTabContent {
    height: 48px;
    line-height: 24px;
    width: 190px;
}
.claro .dijitTab.dijitTabHover {
    color: #ffffff;
    border-color: #ffffff;
    transition: all 0.1s;
    -moz-transition: all 0.1s;
    -webkit-transition: all 0.1s;
    -o-transition: all 0.1s;
}
.claro .dijitTab.dijitTabActive {
    color: #0072bc;
    transition: all 0.1s;
    -moz-transition: all 0.1s;
    -webkit-transition: all 0.1s;
    -o-transition: all 0.1s;
}
.claro .dijitTab.dijitTabChecked {
    color: #ffffff;
    border: 1px solid transparent;
    transition: all 0.1s;
    -moz-transition: all 0.1s;
    -webkit-transition: all 0.1s;
    -o-transition: all 0.1s;
}
.claro .dijitTabContainer.blue .dijitTab.dijitTabChecked {
    background-color: #0072bc;
}
.claro .dijitTabContainer.orange .dijitTab.dijitTabChecked {
    background-color: #ff5b12;
}
.claro .dijitTabContainer.red .dijitTab.dijitTabChecked {
    background-color: #8c0310;
}
.claro .dijitTabContainer.purple .dijitTab.dijitTabChecked {
    background-color: #6529b7;
}
.claro .dijitTabContainer.green .dijitTab.dijitTabChecked {
    background-color: #3aa605;
}
.claro .dijitTabContainer.blue .dijitTab.dijitTabActive {
    color: #0072bc;
}
.claro .dijitTabContainer.orange .dijitTab.dijitTabActive {
    color: #ff5b12;
}
.claro .dijitTabContainer.red .dijitTab.dijitTabActive {
    color: #8c0310;
}
.claro .dijitTabContainer.purple .dijitTab.dijitTabActive {
    color: #6529b7;
}
.claro .dijitTabContainer.green .dijitTab.dijitTabActive {
    color: #3aa605;
}

/* Index Menu */
.claro .rftIndexMenuBlock {
    width: 400px;
    height: 400px;
    background: #444444;
    float: left;
    margin: 16px;
    overflow: hidden;
}
.claro .rftIndexMenuMask {
    height: 400px;
    width: 400px;
    background: #444444;
    color: #999999;
    margin-top: 0;
}
.claro .rftIndexMenuBlock:hover .rftIndexMenuMask {
    margin-top: -400px;
}
.claro .rftIndexMenuMask .label {
    color: #999999;
    font-size: 32px;
    line-height: 28px;
    height: 32px;
    margin: 184px 0;
    float: left;
}
.claro .rftIndexMenuMask .rftIcon {
    width: 32px;
    height: 32px;
    background-image: url('images/icons/rftIcons32.png');
    margin: 184px 8px 0 8px;
    float: left;
}


/* Inputs */
fieldset {
    border: none;
}
fieldset.align input,
fieldset.align .dijitTextBox,
fieldset.align textarea {
    margin-left: 0;
}
fieldset.align label {
    display: inline-block;
    width: 100px !important;
}


/* Question editor/Survey Advanced editor */
.claro .QuestionEditor .PreviewWindow {
    /* Nothing yet, put preview window styling options here after we've decided on a format to follow! */
}
.claro .dijitAccordionContainer {
    /* No styling for now, use this for margins and other layout-related business. This class does not affect the look of the AccordionContainer currently! */
}
.claro .dijitAccordionInnerContainer {
    /* This contains a title and a childWrapper. The two of these make up one "item" in the Accordion element */
    border: none;
    border-color: #333333;
    background-color: #0072bc;
    margin-bottom: 0;
}
.claro .dijitAccordionInnerContainer {
    background-color: transparent;
}
.claro .dijitAccordionTitle, .claro .dijitAccordionTitleSelected {
    background-color: #0072bc;
    background-image: none;
    color: #ffffff;
}
.claro .dijitAccordionTitle .rftIcon {
    width: 16px;
    height: 16px;
    background-image: url('images/icons/rftIcons16b.png');
    margin: 0 4px 2px 0;
}
.claro .dijitAccordionTitleSelected .rftIcon {
    background-image: url('images/icons/rftIcons16.png');
}
.claro .dijitAccordionContainer.blue .dijitAccordionTitle, .claro .dijitAccordionContainer.blue .dijitAccordionTitleSelected {
    background-color: #0072bc;
}
.claro .dijitAccordionContainer.blue .dijitAccordionTitleHover {
    background-color: #0794d1;
}
.claro .dijitAccordionContainer.orange .dijitAccordionTitle, .claro .dijitAccordionContainer.orange .dijitAccordionTitleSelected {
    background-color: #ff5b12;
}
.claro .dijitAccordionContainer.orange .dijitAccordionTitleHover {
    background-color: #ff9140;
}
.claro .dijitAccordionText {
    color: #ffffff;
}
.claro .dijitAccordionContainer .dijitAccordionChildWrapper {
    background-color: #444444;
    border: none !important;
    padding: 0;
    margin: 0;
}
.claro .dijitAccordionContainer .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper,
.claro .dijitAccordionContainer .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper {
    border: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    /* Override the box shadow and offset on hover */
}

/* Experimental background colour inheritance */
.claro div.blue.inheritBgColor,
.claro .blue .inheritBgColor,
.claro.blue .inheritBgColor {
    background-color: #0072bc;
}
.claro div.green.inheritBgColor,
.claro .green .inheritBgColor,
.claro.green .inheritBgColor {
    background-color: #3aa605;
}
.claro div.orange.inheritBgColor,
.claro .orange .inheritBgColor,
.claro.orange .inheritBgColor {
    background-color: #ff5b12;
}
.claro div.purple.inheritBgColor,
.claro .purple .inheritBgColor,
.claro.purple .inheritBgColor {
    background-color: #6529b7;
}
.claro div.red.inheritBgColor,
.claro .red .inheritBgColor,
.claro.red .inheritBgColor {
    background-color: #8c0310;
}
.claro div.trans.inheritBgColor,
.claro .trans .inheritBgColor,
.claro.trans .inheritBgColor {
    background-color: transparent;
}
.claro div.blue.inheritBgColor.light,
.claro .blue .inheritBgColor.light,
.claro.blue .inheritBgColor.light {
    background-color: #0794d1;
}
.claro div.green.inheritBgColor.light,
.claro .green .inheritBgColor.light,
.claro.green .inheritBgColor.light {
    background-color: #79ca0a;
}
.claro div.orange.inheritBgColor.light,
.claro .orange .inheritBgColor.light,
.claro.orange .inheritBgColor.light {
    background-color: #ff9140;
}
.claro div.purple.inheritBgColor.light,
.claro .purple .inheritBgColor.light,
.claro.purple .inheritBgColor.light {
    background-color: #993dec;
}
.claro div.red.inheritBgColor.light,
.claro .red .inheritBgColor.light,
.claro.red .inheritBgColor.light {
    background-color: #bd0013;
}

/*TODO: Apply these classes to display elements that need to inherit the interface's object colour!
Remove/disable other references to these colours from files like rftButtons, rftLineWithButtons, etc to make sure it works properly.
Put these settings in a separate "colours.css" file to separate the concern of styling these objects from other layout-oriented properties.
When we add things like highlightColours, borders, etc, the list could become quite long, especially if more colours are added to the colour scheme in time.


Dropdown menu on MenuBar*/
.claro .dijitMenuPopup {

}
.claro .dijitMenuPopup .dijitMenu {
    border: none;
    background-color: #333333;
    background-image: none;
    color: #999999;   
}
.claro .dijitMenuPopup .dijitMenu .dijitMenuItem {
    color: #999999;
    background-image: none;
    background-color: transparent;
}
.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.blue,
.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.blue {
    background-color: #0072bc;
}
.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.orange,
.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.orange {
    background-color: #ff5b12;
}
.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.purple,
.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.purple {
    background-color: #6529b7;
}
.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.green,
.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.green {
    background-color: #3aa605;
}
.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.red,
.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.red {
    background-color: #8c0310;
}
.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover .dijitMenuItemLabel,
.claro .dijitMenuPopup .dijitMenu .dijitMenuItemActive .dijitMenuItemLabel,
.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected .dijitMenuItemLabel {
    color: #ffffff;
}
.claro .dijitMenuPopup .dijitMenu .dijitMenuItem .rftIcon {
    height: 16px;
    width: 16px;
    margin: 0;
    margin-right: 4px;
    background-image: url('images/icons/rftIcons16.png');
} 
.claro .dijitMenuPopup .dijitMenu .dijitMenuItemActive .rftIcon {
    background-image: url('images/icons/rftIcons16b.png');
}




/* Alignment */
.claro .floatRight {
    float: right;
    margin: 0;
    padding: 0;
}