@charset "UTF-8";

// <copyright>
// Copyright (c) 2012, Motorola Mobility LLC.
// All Rights Reserved.
// 
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// 
// * Redistributions of source code must retain the above copyright notice,
//   this list of conditions and the following disclaimer.
// 
// * Redistributions in binary form must reproduce the above copyright notice,
//   this list of conditions and the following disclaimer in the documentation
//   and/or other materials provided with the distribution.
// 
// * Neither the name of Motorola Mobility LLC nor the names of its
//   contributors may be used to endorse or promote products derived from this
//   software without specific prior written permission.
// 
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
// </copyright>


//Base.scss
//Base styles for entire application.
//Note that colors and font definitions go in
//_scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss


.clear {
    display: block;
    clear: both;
    height: 0px;
    overflow: hidden;
}
.bold {
    font-weight: bold;
}
:focus {
    outline: none;
    border: none;
    -webkit-box-shadow: 0px 0px 1px 1px $color-focus-outline;

}
.layout-table {
    display: table;
}
.layout-row {
    display: table-row;
}
.layout-cell {
    display: table-cell;
}
.layout-table .flexor div:first-child {
    float: left;
}
.layout-table .flexor div:last-child {
    float: right;
}

// Begin: Basic skinning for form fields
// Reset all
input.nj-skinned,
textarea.nj-skinned,
button.nj-skinned,
select.nj-skinned,
select.nj-skinned option {
    -webkit-appearance: none;
    outline: none;
}

// Base styles
input[type="text"].nj-skinned,
input[type="password"].nj-skinned,
input[type="search"].nj-skinned,
textarea.nj-skinned,
select.nj-skinned,
select.nj-skinned option {
    border: 1px solid $color-input-border;
    color: $color-input;
    background-color: $color-input-bg;
    font-size: 12px;
    font-family: 'Droid Sans', sans-serif;
}

// Disabled styles
input.nj-skinned:disabled,
textarea.nj-skinned:disabled,
select.nj-skinned:disabled,
button.nj-skinned:disabled {
    opacity: 0.4;
}

// Text inputs and select boxes
input[type="text"].nj-skinned,
input[type="password"].nj-skinned,
input[type="search"].nj-skinned,
select.nj-skinned,
select.nj-skinned option {
    height: 13px;
}
//
input[type="text"].nj-skinned:focus,
input[type="password"].nj-skinned:focus,
input[type="search"].nj-skinned:focus,
textarea.nj-skinned:focus,
select.nj-skinned:focus,
select.nj-skinned option:focus {
    -webkit-box-shadow: 0px 0px 3px $color-focus-outline;
}


select.nj-skinned {
    background-image: url("../images/dropdown-bg.png");
    background-repeat: no-repeat;
    background-position: right center;
    font-size: 12px;
    height: 16px;
    padding-right: 20px;
}

input[type="search"].nj-skinned {
    height: 17px ;
    -webkit-box-shadow: none;
}
input[type="search"].nj-skinned::-webkit-search-cancel-button {
    -webkit-appearance: none;
    font-size: 10px;
    height: 10px;
    width: 10px;
}
input[type="search"].nj-skinned::-webkit-search-cancel-button:after {
    content:"\2716";
}

// Buttons
button.nj-skinned {
    font-size: 9px;
    cursor: pointer;
    display: block;
    border: 0px;
    margin: 0px;
    padding: 4px;
    border: 1px $color-input-border solid;
    background-color: $color-menu-bg;
    background-image: -webkit-linear-gradient(top, $color-formgrad-top 0%, $color-formgrad-bottom 100%);
    border-radius: 4px;
    color: $color-menu-text;
    text-transform: uppercase;
    cursor: pointer;
    text-shadow: 1px 1px 1px $color-app-shadow
}
button.nj-skinned:active, button.nj-skinned.active {
    background-image: -webkit-linear-gradient(top, $color-formgrad-bottom 0%, $color-formgrad-top 100%);
}
button.nj-skinned:hover {
    -webkit-box-shadow: 0px 0px 3px $color-focus-outline;
}

// Radio buttons
input[type="radio"].nj-skinned {
    background-color: $color-menu-bg;
    background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
    color: $color-radio;
    border: 2px solid $color-radio-border;
    width: 12px;
    height: 12px;
    overflow: hidden;
    border-radius: 10px;
    font-size: 16px;
    line-height: 7px;
    text-indent: -7px;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 2px $color-radio-shadow;
    -moz-box-shadow: 0px 0px 2px $color-radio-shadow;
    box-shadow: 0px 0px 2px $color-radio-shadow;
}
input[type="radio"].nj-skinned:checked {
    background: -webkit-radial-gradient(center,
                                        circle cover,
                                        $color-radio 0%,
                                        $color-radio 15%,
                                        $color-radio 30%,
                                        $color-transparent 31%),
                                        -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
    border: 2px solid $color-radio-border;
}
input[type="radio"].nj-skinned:hover {
    border: 2px solid $color-radio-border;
}
input[type="radio"].nj-skinned:active {
    background-image: -webkit-linear-gradient(top, $color-radio-gradient-bottom 0%, $color-radio-gradient-top 100%);
}
input[type="radio"].nj-skinned:disabled {
    background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
    border: 2px solid $color-radio-border;
    cursor: default;
}
// Checkboxes
input[type="checkbox"].nj-skinned {
    background-color: $color-menu-bg;
    background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
    color: $color-radio;
    border: 1px solid $color-radio-border;
    width: 10px;
    height: 10px;
    font-size: 12px;
    overflow: visible;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 2px $color-radio-shadow;
    -moz-box-shadow: 0px 0px 2px $color-radio-shadow;
    box-shadow: 0px 0px 2px $color-radio-shadow;
    line-height: 9px;
}

input[type="checkbox"].nj-skinned:checked {

}
input[type="checkbox"].nj-skinned:checked:after {
    content:"\2714";
}
input[type="checkbox"].nj-skinned:active {
    background-image: -webkit-linear-gradient(top, $color-radio-gradient-bottom 0%, $color-radio-gradient-top 100%);
}
input[type="checkbox"].nj-skinned:disabled {
    background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
    cursor: default;
}
// End: Basic skinning for form fields

// Begin:  Basic skinning for visual dividers
.nj-divider {
    background-color: $color-divider-second;
    border-width: 0px;
    overflow: hidden;
}
.nj-divider.divider-horizontal {
    border-top: 1px solid $color-divider-first;
    border-bottom: 1px solid $color-divider-third;
    height: 1px;
}
.nj-divider.divider-vertical {
    border-left: 1px solid $color-divider-first;
    border-right: 1px solid $color-divider-third;
    width: 1px;
}
// End: Basic skinning for visual dividers