/**
 $Id: main.css 14157 2012-05-22 06:41:04Z zefredz $
 **/


/******************************************************************************
                        MAIN HTML MARKUP
******************************************************************************/
a {
    color: #343d44;
}

a:hover, a:focus {
    /*#0c80df*/
    color: #343d44;
}


/*h1, 
h2, 
h3, 
h4, 
h5 {
    font-weight: bold;
}

h1 {font-size: 2em;}
h2 {font-size: 1.6em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.1em;}
h5 {font-size: 1.0em;}*/


/******************************************************************************
                        MEDIA QUERIES
******************************************************************************/

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/


#city {
    padding-top: 5px;
    width: 100%;
    aspect-ratio: 2.95;
    -webkit-overflow-scrolling: touch;
    overflow:hidden;
}


/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
    #turn{ display: none; }
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
    #turn{ display: none; }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    #city {
        height: 350px;
    }

    #turn{ display: none; }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    #city {
        display: none;
    }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
    #city {
        display: initial;
        /*height: 20%;*/
    }

    #turn{ display: none; }

    footer {
        max-height: 10%;
    }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
    #city {
        display: none;
    }

    footer {
        max-height: 10%;
    }
}

/******************************************************************************
                        LIST PANELS
******************************************************************************/
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
    background-color: #343d44;
    border-color: #343d44;
}

.list-group-item .list-group-link:hover {
    color: #343d44;
}


/******************************************************************************
                        NAVBAR STYLE
******************************************************************************/



/******************************************************************************
                        FORMS MARKUP
******************************************************************************/



/******************************************************************************
                        DAVINCI PAGE
******************************************************************************/



/******************************************************************************
                        DAVINCI HEADER
******************************************************************************/



/*-----------------------------------------------------------------------------
                        PLATFORM BANNER
-----------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------
                        CAMPUS BANNER
-----------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------
                        USER BANNER
-----------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------
                        BREAD CRUMB TRAIL
-----------------------------------------------------------------------------*/



/******************************************************************************
                        DAVINCI BODY
******************************************************************************/



/******************************************************************************
                        PORTLETS and ITEMS
******************************************************************************/

/**
Use .item to easily display lists of items (announces, descriptions, ...)
Use .portlet for desktop or course portlets
**/


/******************************************************************************
                        COURSE PAGE
******************************************************************************/

/*-----------------------------------------------------------------------------
                        COURSE TABS
-----------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------
                        COURSE INFOS
-----------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------
                        COURSE CONTENT
-----------------------------------------------------------------------------*/




/*-----------------------------------------------------------------------------
                        COURSE TOOL LIST
-----------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------
                        GROUP TOOL LIST
-----------------------------------------------------------------------------*/




/******************************************************************************
                        COURSE LISTS
******************************************************************************/



/*-----------------------------------------------------------------------------
                        SUB LISTS (for session courses)
-----------------------------------------------------------------------------*/




/******************************************************************************
                        TOOL TITLE
******************************************************************************/




/******************************************************************************
                        ADMIN PANEL
******************************************************************************/

/*-----------------------------------------------------------------------------
                        ADMIN TABLE
-----------------------------------------------------------------------------*/
.dataTables_wrapper table thead tr th{
    /*color: #343d44;*/
}


/*-----------------------------------------------------------------------------
                        ADMIN TABLE FORMS
-----------------------------------------------------------------------------*/




/******************************************************************************
                        COMMAND LINKS
******************************************************************************/



/* Added for document view mode toolbar */



/******************************************************************************
                        HOT STUFF (new events)
******************************************************************************/

/*
 * Classes family to emphase some item in the tool interface.
 * These two classes has to be used together to work correctly.
 *
 * SOME EXAMPLES :
 *
 *  <a href="0" class="item"><img src="icon.gif" />lorem ipsum</a><br />
 *  <a href="0" class="item hot"><img src="icon.gif" />lorem ipsum</a><br />
 *
 *  <span class="item"><img src="icon.gif" />lorem ipsum</span><br>
 *  <span class="item hot"><img src="icon.gif" />lorem ipsum<br>
 *
 *  <ul style="list-style-image:url(icon.gif);list-style-position:inside">
 *   <li class="item">lorem ipsum</li>
 *   <li class="item hot">lorem ipsum</li>
 *  </ul>
 */

.hot {
    padding-left: 15px;
    background-image: url(img/hot.png);
    background-repeat: no-repeat;
    background-position: center left;
}

.toolList .hot {
    margin-left: -15px;
}

.item h1.hot, 
.portlet h1.hot {
    padding: 2px 5px 2px 15px;
}

/*
 *Visually the same as the claroTable headerX but can be used outside of a table 
 * best on a block type tag
 */


/******************************************************************************
                        DAVINCI TABLES
******************************************************************************/

/* Uniformize davinci table format. The class provide 3 header type
 *
 *     - superHeader : allowing to define table title above the column header
 *     - headerX : define header in the X axis for each column
 *     - headerY : define header in the Y axis for each rank
 *
 * Example of table using a super header and header in X axis
 *
 * <table class="claroTable">
 * <tr class="superHeader">
 * <th colspan="3">User Birthdate</th>
 * </tr>
 * <tr class="headerX">
 * <th>Firstname</th>
 * <th>Lastname</th>
 * <th>Birthdate</th>
 * </tr>
 *
 * <tbody>
 *
 * <tr>
 * <td>Hugues</td>
 * <td>Peeters</td>
 * <td>1969-09-27</td>
 * </tr>
 * <tr>
 * ...
 * </tr>
 *
 * </tbody>
 *
 * </table>
 *
 * Example of table using header in Y axis
 *
 *
 * <table class="claroTable">
 *
 * <tr class="superHeader">
 * <th colspan="3">User Birthdate</th>
 * </tr>
 *
 * <tr>
 * <th class="headerY">Firstname</th>
 * <td>Hugues</td>
 * <td> ...  </td>
 * </tr>
 *
 * <tr>
 * <th class="headerY">Lastname</th>
 * <td>Peeters</td>
 * <td> ...  </td>
 * </tr>
 *
 * <tr>
 * <th class="headerY">Birthdate</th>
 * <td>1969-09-27</td>
 * <td> ...  </td>
 * </tr>
 *
 * </table>
 */


/* extension of claroTable class for Image Viewer */


/* Pager */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus{
    background-color: #343d44;
    border-color: #343d44;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    color: #343d44;
}

/******************************************************************************
                        DAVINCI FOOTER
******************************************************************************/
.footer {
    text-align: center;
    color: #888;
    font-weight: 500;
    background: #fff;
    height: 45px;
    line-height: 45px;
    display: block;
}
/******************************************************************************
                        INTERNAL MESSAGING
******************************************************************************/

/*TR line for platform message*/


/*TR line for unread message*/


/******************************************************************************
                        DEBUG BAR
******************************************************************************/


/******************************************************************************
                        MISCELLANEOUS
******************************************************************************/


/* specific styling for dialog box messages */


/*
 * 'invisible' is generally attached to element that shouldn't be visible into
 * common user interface but which are visible in course manager or platform
 * administrator screen, showing that the element is deactivated or isn't
 * visible fo the other users
 */



/* menu */



/*
    'correct' is attached to element that must be highlighted as correct
    example : a good score in exercices
*/


/*
    'error' is attached to element that must be highlighted as correct
    example : a wrong score in exercices
    example : an error message
*/

/*
    'highlight' is used when something needs to be especially shown to the user
    example : 'today' in the agenda
*/


/*
    'required' is used to set the color of the asterisk displayed before the required form field
*/


/*
 * 'rightMenu' is mainly use in the platform home page
 */



/*
 * Navigation with tabs : configuration, modules, ...
 */



/* Use it to highlight admin tools */