/* Général ------------------------------------------------------------------------------------- */

/* Structure base html 

<link rel="stylesheet" media="screen" type="text/css" href="/css/onglet-style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#tabs").tabs();
});
</script>

<div id="content">
    <div id="tabs">
        <ul> 
           <li><a href="#tabs-1">Onglet 1</a></li>
           <li><a href="#tabs-2">Onglet 2</a></li>
           <li><a href="#tabs-3">Onglet 3</a></li>
        </ul>
        <div id="tabs-1">Contenu de l'onglet 1</div>
        <div id="tabs-2">Contenu de l'onglet 2</div>
        <div id="tabs-3">Contenu de l'onglet 3</div>
    </div>
</div>

*/
/* Forms --------------------------------------------------------------------------------------- */
#content {
    /*margin: 0 auto;*/
    width: auto;
    height: auto;
}
#tabs ul {
    margin: 0;
   	padding: 0;
    float: left;
    list-style: none;
    height: 31px;
    border-bottom: 1px solid #666;
    border-left: 1px solid #666;
    width: auto
}
#tabs ul li {/* onglet base*/
   float: left;
   margin: 0;
   padding: 0;
   height: 30px;
   line-height: 30px;
   border-left: none;
   margin-bottom: -1px;
   overflow: hidden;
   position: relative;
   background: #aeaeae
}
#tabs ul li a {
   text-decoration: none;
   color: #ffffff;
   display: block;
   font-family: "Trebuchet MS";
   font-size: 15px;
   padding: 7px 20px 7px 20px
}
#tabs ul li a:hover {
   background: none;
   color: #ffffff
}
.ui-tabs {
   position: relative
}
.ui-tabs .ui-tabs-nav {
   margin: 0
}
.ui-tabs .ui-tabs-nav li {
   float: left;
   margin: 0;
   padding: 0;
   border: 1px solid #ccc;
   border-left: none;
   margin-bottom: -1px;
   overflow: hidden;
   position: relative;
   background: #ddd
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
   float: left;
   padding: 0;
   text-decoration: none;
   padding: 0 0px
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
   margin-bottom: -1px;
   padding-bottom: 1px;
   border-bottom: 1px solid #fff;
   background: #4FA066;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
   cursor: text;
   color: #666;
   background: #fff
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
   cursor: pointer
}
.ui-tabs .ui-tabs-panel {
   display: block;
   border: 1px solid #ccc;
   overflow: hidden;
   clear: both;
   float: left;
   width: 90%;
   background: #fff;
   margin: 0;
   padding: 10px
}

.ui-tabs .ui-tabs-hide {
   display: none;
}

.ui-tabs li.ui-tabs-selected {/* onglet selectionné*/
   background: #4FA066 !important;
}

.ui-tabs li.ui-tabs-selected.red {/* onglet selectionné*/
   background: #FB2525 !important;
}

.ui-tabs li.ui-state-hover {/* onglet survolé*/
   background: #4FA066 !important;
}

.ui-tabs li.ui-state-hover.red {/* onglet survolé*/
   background: #FB2525 !important;
}