/*
  DJO-Andy Template : Common/Default Component Formatting
  -------------------------------------------------------
*/

/* component header */

.componentheader
{
    background-color: #e6f3df;
    border-bottom: 1px solid #FFF;
    border-left: 5px solid #d8ffd0;
    border-right: 5px solid #d8ffd0;
    border-top: 1px solid #EEE;
    color: #768271;
    margin-bottom: 20px;
    padding: 0;
    height: auto !important;
    height: 1px;
}

/* component header - heading */

.componentheading
{
    margin: 0;
    font-size: 1.25em;
    font-weight: normal;
    padding: 5px 10px;
    text-align: left;
    border-left: 10px solid #d8ffd0;
    border-right: 10px solid #d8ffd0;
    border-top: 0 none;
}

.componentheading .results
{
    color: #999;
    float: right;
    border-left: 1px solid #CCC;
    padding-left: 10px;
    margin-left: 10px;
}

/* component header - filter */

.componentfilter
{
    color: #555;
    background-color: #FFF;
    border-left: 0 none;
    border-right: 0 none;
    border-top: 0 none;
    border-bottom: 1px solid #DDD;
    font-size: 14px;
    font-weight: inherit;
    margin: 0;
    padding: 5px 10px 0 10px;
    text-align: left;
}

.componentfilter .title
{
    border: 0 none;
    padding: 0 10px 5px 10px;
    border-bottom: 1px solid #DDD;
}

.componentfilter .title .options-handle
{
    color: #AAA;
    border-left: 1px solid #DDD;
    padding-left: 5px;
    margin-left: 5px;
    text-decoration: none;
}

.componentfilter .title .options-handle-open
{
    color: #333;
}

.componentfilter .title .button
{
    border: 0 none;
    padding: 0 5px;
    margin: 0 0 0 5px;
    color: #999;
    cursor: pointer;
    float: right;
    background-color: #EEE;
}

.componentfilter .title .button:hover
{
    color: #333;
    background-color: #DDD;
}

.componentfilter .options
{
    border-top: 1px solid #DDD;
    padding: 10px 10px 5px 10px;
    margin: 0;
}

.componentfilter .options-first
{
    border-top: 0 none;
}

.componentfilter .options table
{
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    border: 0 none;
}

.componentfilter .options td
{
    padding: 0 0 0 4px;
}

.componentfilter .options td.col1
{
    padding: 0;
}

.componentfilter .options label
{
    display: block;
    border: 0 none;
    padding: 2px 4px 6px 4px;
    background-color: #F0F0F0;
    margin: 0 0 5px 0;
}

.componentfilter .options label input,
.componentfilter .options label select,
.componentfilter .options label textarea
{
    border: 0 none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.componentfilter .options label input.tickbox
{
    width: auto;
    margin: 0;
    padding: 0;
}

.componentfilter .options label em
{
    display: block;
    font-style: normal;
    color: #777;
    padding: 0 4px;
}

.componentfilter .options label span
{
    display: block;
    font-style: normal;
    color: #777;
    padding: 0;
    border: 1px solid #DDD;
    background-color: #FFF;
}

.componentfilter .options ul,
.componentfilter .options ol
{
    margin: 0;
    list-style-type: none;          
    list-style-position: outside; 
    list-style-image: none;      
}

.componentfilter .options li
{
    margin-left: 0;
    border-left: 10px solid #F0F0F0;
    padding-left: 6px;
}

.componentfilter .options li li
{
    margin-left: 0;
    border-left: 10px solid #E8E8E8;
    padding-left: 6px;
}

.componentfilter .options li li li
{
    border-left: 10px solid #E0E0E0;
}

.componentfilter .options li label
{
    padding: 2px 4px;
}

.componentfilter .buttons
{
    padding: 0 10px 5px 10px;
    margin: 0;
    text-align: right;
}

.componentfilter .buttons .button
{
    border: 0 none;
    padding: 2px 2px;
    margin: 0 0 0 5px;
    background-color: #EEE;
    color: #999;
    cursor: pointer;
    float: right;
}

.componentfilter .buttons .button:hover
{
    color: #333;
    background-color: #DDD;
}

/* component header - content */

.componentcontent
{
    border: 0 none;
    font-size: 1em;
    font-weight: inherit;
    margin: 0;
    padding: 5px 10px 10px 10px;
    text-align: left;
    background-color: #e6f3df;
    border-bottom: 0 none;
    border-left: 10px solid #D8FFD0;
    border-right: 10px solid #D8FFD0;
    border-top: 1px solid #DDD;
}

/* component admin */

.componentadmin
{
    text-align: left;
    padding: 5px 10px;
    border: 0 none;
    margin: 0 0 20px 0;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #DDD;
    background-color: #EEE;
}

.componentadmin a.icon
{
    text-decoration: none;
    border-bottom: 2px solid #AAA;
    border-left: 2px solid #CCC;
    border-right: 2px solid #AAA;
    border-top: 2px solid #CCC;
    padding: 0 4px;
    margin: 0;
    background-color: #EEF;
    font-size: 12px;
    color: #888;
}

.componentadmin a.icon-first
{
}

.componentadmin a.icon:hover
{
    color: #666;
    background-color: white;
}

/* component item */

.componentitem
{
    background-color: white;
    padding: 0;
    margin: 0 0 20px 0;
    border: 0 none;
    border-top: 15px solid #D1D2D1;
    border-bottom: 15px solid #D1D2D1;
    height: auto !important;
    height: 1px;
}

/* component item - date */

.componentitemdate
{
    margin: -15px 0 0 0;
    padding: 0;
    border: 0 none; 
}

.componentitemdate div
{
    text-align: left;
    margin: 0;
    border: 0 none;
    border-right: 15px solid #D1D2D1;
    border-left: 15px solid #D1D2D1;
    padding: 5px 10px;
    background-color: #d1d2d1;
    color: #777;
    height: auto !important;
    height: 1px;
}

.componentitemdate div.in-the-future
{
    border-left: 15px solid #99F;
    border-right: 15px solid #99F;
}

.componentitemdate div.today
{
    border-left:  15px solid #F36200;
    border-right: 15px solid #F36200;
}

.componentitemdate div.in-the-past
{
    border-left:  15px solid #E0E0E0;
    border-right: 15px solid #E0E0E0;
}

.componentitemdate span.time
{
    float: right;
}

/* component item - admin */

.componentitemadmin
{
    background-color: #EEE;
    border-bottom: 1px solid #D1D2D1;
    border-left: 15px solid #D1D2D1;
    border-right: 15px solid #D1D2D1;
    border-top: 0 none;
    color: #222;
    font-size: 12px;
    font-weight: normal;
    height: auto !important;
    height: 1px;
    margin: 0;
    padding: 5px 5px;
    text-align: left;
}

.componentitemadmin input
{
    float: left;
}

.componentitemadmin a.icon
{
    color: #777;
    text-decoration: none;
    border-left: 1px solid #777;
    padding: 0 0 0 4px;
    margin: 0 0 0 4px;
}

.componentitemadmin a.icon-first
{
    border-left: 0 none;
    margin-left: 0;
}

.componentitemadmin a.icon:hover
{
    color: #333;
}

/* component item - heading */

.componentitemheading
{
    background-color: #FFF;
    border-bottom: 1px solid #E0E0E0;
    border-left: 15px solid #D1D2D1;
    border-right: 15px solid #D1D2D1;
    border-top: 0 none;
    color: inherit;
    font-size: 1.5em;
    font-weight: normal;
    height: auto !important;
    height: 1px;
    margin: 0;
    padding: 5px 10px 5px 10px;
    text-align: left;
}

.componentitemheading a.icon
{
    color: #AAA;
    text-decoration: none;
    border-left: 1px solid #DDD;
    padding: 0 0 0 8px;
    margin: 0 0 0 4px;
    font-size: 0.8em;
}

.componentitemheading a.icon-first
{
    border-left: 0 none;
}

.componentitemheading a.icon:hover
{
    color: #666;
}

/* component item - meta */

.componentitemmeta
{
    background-color: #FFE4E1;
    border-bottom: 1px solid #DDD;
    border-left: 0 none;
    border-right: 0 none;
    border-top: 1px solid #FFF;
    font-size: 0.8em;
    color: #777;
    height: auto !important;
    height: 1px;
    margin: 0;
    padding: 2px 15px;
    text-align: left;
}

.componentitemmeta a
{
    color: #777;
}

.componentitemmeta p
{
    padding: 2px 0;
    margin: 0;
    border: 0 none;
}

.componentitemmeta p.follows-another-p
{
    margin: 0;
    border-top: 1px solid #DDD;
}

/* component item - share */

.componentitemshare
{
    background-color: #EEF;
    border-bottom: 0 none;
    border-left: 15px solid #D1D2D1;
    border-right: 15px solid #D1D2D1;
    border-top: 0 none;
    color: #AAA;
    font-size: 12px;
    font-weight: normal;
    height: auto !important;
    height: 1px;
    margin: 0;
    padding: 5px 15px;
    text-align: left;
}

.componentitemshare a.icon
{
    line-height: 12px;
    color: #AAA;
    text-decoration: none;
    border-left: 1px solid #CCC;
    padding: 0 0 0 5px;
    margin: 0 0 0 5px;
}

.componentitemshare a.icon-first
{
    padding-left: 0;
    border-left: 0 none;
    margin-left: 0;
}

.componentitemshare a.icon:hover
{
    color: #666;
}

/* component item - content */

.componentitemcontent
{
    background-color: white;
    border-bottom: 0 solid #DDD;
    border-left: 15px solid #D1D2D1;
    border-right: 15px solid #D1D2D1;
    border-top: 0 none;
    font-size: inherit;
    color: inherit;
    height: auto !important;
    height: 1px;
    margin: 0;
    padding: 10px;
    text-align: left;
}

/* component item - details (faqs, facts, definitions, etc.) */

.componentitemdetails
{
    background-color: #FFF;
    border-bottom: 0 none;
    border-left: 15px solid #D1D2D1;
    border-right: 15px solid #D1D2D1;
    border-top: 0 none;
    height: auto !important;
    height: 1px;
    margin: 0;
    padding: 10px;
    text-align: center;
}

.componentitemdetails table
{
    width: 100%;
    margin: 0 auto;
    border: 1px solid #DDD;
    padding: 0;
    border-collapse: collapse;
}

.componentitemdetails th
{
    color: #AAA;
    text-align: right;
    vertical-align: middle;
    padding: 5px;
    border: 1px solid #DDD;
}

.componentitemdetails td
{
    text-align: left;
    border: 1px solid #DDD;
    padding: 5px;
    vertical-align: top;
}

/* component item - form */

.componentitemform
{
    background-color: #FFE4E1;
    border-bottom: 1px solid #DDD;
    border-left: 0 solid #EEE; 
    border-right: 0 solid #EEE; 
    border-top: 1px solid #FFF;
    font-size: inherit;
    color: inherit;
    height: auto !important;
    height: 1px;
    margin: 0;
    padding: 15px;
    text-align: left;
    color: #777;
}

.componentitemform .title
{
    border: 0 none;
    padding: 0;
    margin-bottom: 10px;
    color: AAA;
}

.componentitemform .title .options-handle
{
    color: #AAA;
    border-left: 1px solid #DDD;
    padding-left: 5px;
    margin-left: 5px;
    text-decoration: none;
}

.componentitemform .title .options-handle-open
{
    color: #333;
}

.componentitemform .options
{
    border: 1px solid #CCC;
    padding: 10px 10px 0px 10px;
    margin: 20px 0 0 0;
    background-color: #FFF;
}

.componentitemform .options-first
{
    margin-top: 0;    
}

.componentitemform .options h6
{
    margin: 0 0 10px 0;
}

.componentitemform .options label
{
    display: block;
    border: 1px solid #DDD;
    padding: 0;
    background-color: #FFF;
    margin: 0 0 10px 0;
}

.componentitemform .options label.required
{
    border: 1px solid #FBF; 
}

.componentitemform .options label.invalid
{
    border: 1px solid #CCC; 
}

.componentitemform .options label input,
.componentitemform .options label select,
.componentitemform .options label textarea
{
    border: 0 none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.componentitemform .options label em
{
    background-color: #EEE;
    border: 0 none;
    color: #777;
    display: block;
    font-style: normal;
    padding: 0 4px;
}

.componentitemform .options label.invalid em
{
    color: #F36200;
    border-right: 5px solid #F36200;
}

.componentitemform .options label span
{
    display: block;
    font-style: normal;
    color: #777;
    padding: 4px;
    border-top: 1px solid #DDD;
    background-color: #FFF;
}

.componentitemform .buttons
{
    padding: 0;
    margin: 10px 0 0 0;
    text-align: center;
}

.componentitemform .buttons .button
{
    border-left: 1px solid #DDD;
    border-right: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    padding: 2px 2px;
    margin: 0 0 0 5px;
    background-color: #FFF;
    color: #999;
    cursor: pointer;
}

.componentitemform .buttons .button:hover
{
    color: #333;
    background-color: #DDD;
}

/* component item - footer */

.componentitemfooter
{
    background-color: #FFF;
    border-bottom: 0 none;
    border-left: 15px solid #D1D2D1;
    border-right: 15px solid #D1D2D1;
    border-top: 0 none;
    color: inherit;
    height: auto !important;
    height: 1px;
    margin: 0;
    padding: 5px 15px;
    text-align: right;
}

.componentitemfooter a.icon
{
    color: #AAA;
    text-decoration: none;
    border-left: 1px solid #DDD;
    padding: 0 0 0 8px;
    margin: 0 0 0 4px;
    font-size: 0.9em;
}

.componentitemfooter a.icon-first
{
    border-left: 0 none;
}

.componentitemfooter a.icon:hover
{
    color: #666;
}

/* component table */

.componenttable
{
    border: 5px solid #EEE;
    background-color: #FFF;
    margin: 0 0 20px 0;
    padding: 0;
}

.componenttable table
{
    border: 0 none;
    padding: 0;
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}

.componenttable tr
{
    padding: 0;
    margin: 0;
    border: 0 none;
}

.componenttable th,
.componenttable td
{
    border-bottom: 1px solid #DDD;
    border-top: 1px solid #DDD;
    padding: 4px 8px;
}

.componenttable thead th
{
    color: #768271;
    text-align: center;
    font-weight: normal;
    white-space: nowrap;
}

.componenttable thead th a
{
    font-weight: normal;
    text-decoration: none;
    color: #999;
    background-color: #EEE;
    padding: 0 4px;
}

.componenttable thead th a:hover
{
    background-color: #DDD;
    color: #333;
}

.componenttable tbody td
{
    background-color: red; /* alert: missing tr.odd | tr.even */
    text-align: left;
}

.componenttable tbody tr.odd td
{
    background-color: #FFFFEF;
}

.componenttable tbody tr.even td
{
    background-color: #FFEFFF;
}

.componenttable tbody tr.hover td
{
    background-color: #FFFFFF;
}

.componenttable .meta,
.componenttable .even .meta,
.componenttable .odd .meta
{
    width: 1%;
    color: #768271;
    vertical-align: top;
    background-color: #EEE;
    border-bottom: 1px solid #EEE;
    border-top: 1px solid #EEE;
    padding: 0 4px;
    text-align: right;
}

.componenttable tbody tr.hover td.meta
{
    color: #555;
    background-color: #DDD;
}

.componenttable tfoot td
{
    color: #768271;
    text-align: center;
    font-weight: normal;
}

.componenttable tfoot td a
{
    /* todo? */
    color: #666666;
}

/* component footer */

.componentfooter
{
    background-color: #e6f3df;
    border-bottom: 1px solid #FFF;
    border-left: 15px solid #D8FFD0;
    border-right: 15px solid #D8FFD0;
    border-top: 1px solid #EEE;
    color: #768271;
    font-size: 1.0em;
    font-weight: normal;
    margin: 0 0 20px 0;
    padding: 5px 0;
    text-align: center;
}

.componentfooter p
{
    margin: 0;
    font-size: 1em;
}

.componentfooter p.follows-another-p
{
    margin: 0;
    border-top: 1px solid #DDD;
}