/**
*
* @note                           css file for data tables
* 
* @appdef                         fapulous framework
* @app-myapp-theme  
* @app-myapp-used                 True
* @media                          screen
* @valid                          true
* 
* @author                         Alp Uçkan
* @version                        1.1
* @link                           http://fapulous.77elements.net/
* @copyright                      Copyright(c) by Alp Uçkan
* @license                        http://sam.zoy.org/wtfpl/
* 
* @date                           2008-09-22
* @lastmodified                   2009-10-04 17:24
* 
* @colordef                       rgb(0,0,0); Black; Text
* @colordef                       rgb(255,255,255); White; Background
*
*                                 Markup for data tables:
*                                 
*                                 <table class="dataTable greyScheme" summary="The summary describes the content of this table.">
*                                   <caption>table.dataTable.greyScheme</caption>
*                                   <thead>
*                                     <tr>
*                                       <th abbr="column1" id="HeaderOfCol1" class="col1">Title 1</th>
*                                       <th abbr="column2" id="HeaderOfCol2" class="col2">Title 2</th>
*                                       <th abbr="column3" id="HeaderOfCol3" class="col3">Title 3</th>
*                                       <th abbr="column4" id="HeaderOfCol4" class="col4">Title 4</th>
*                                     </tr>
*                                   </thead>
*                                   <tbody>
*                                     <tr>
*                                       <td headers="HeaderOfCol1" class="col1">data</td>
*                                       <td headers="HeaderOfCol2" class="col2">data</td>
*                                       <td headers="HeaderOfCol3" class="col3">data</td>
*                                       <td headers="HeaderOfCol4" class="col4">data</td>
*                                     </tr>
*                                     <tr class="odd" >
*                                       <td headers="HeaderOfCol1" class="col1">data</td>
*                                       <td headers="HeaderOfCol2" class="col2">data</td>
*                                       <td headers="HeaderOfCol3" class="col3">data</td>
*                                       <td headers="HeaderOfCol4" class="col4">data</td>
*                                     </tr>
*                                   </tbody>
*                                 </table>
*                                 
*                                 
*/

/**
* @section                        general table elements
*/

caption                           { text-align: center; font-weight: bold; }
.dataTable                        { width: 100%; margin: 1em 0; border-width: 1px 0 0 1px; border-collapse: collapse; }
.dataTable th,                    
.dataTable td                     { border-width: 0 1px 1px 0; padding: .4375em; }

/**
* @section                        grey table theme
*/

.greyScheme,
.greyScheme th,
.greyScheme td                    { border: 1px solid #444; }
.greyScheme .odd                  { background-color: #efefef; }
.greyScheme th,                   
.greyScheme thead td              { background-color: #ccc; }
.greyScheme tr:hover              { background-color: #ddd; }

/**
* @section                        red table theme
*/

.redScheme,
.redScheme th,
.redScheme td                     { border: 1px solid red; }
.redScheme .odd                   { background-color: #ffefef; }
.redScheme th,                    
.redScheme thead td               { background-color: #ffcfcf; }
.redScheme tr:hover               { background-color: #ffdfdf; }

/**
* @section                        yellow table theme
*/

.yellowScheme,
.yellowScheme th,
.yellowScheme td                 { border: 1px solid #afac00; }
.yellowScheme .odd               { background-color: #ffffef; }
.yellowScheme th,                                     
.yellowScheme thead td           { background-color: #feffaf; }
.yellowScheme tr:hover           { background-color: #ffffdf; }