/**********************************************************
  PCHT basic CSS stylesheet

  VERSION 2

  use twitter bootstrap
*/

/**********************************************************
 font-face
 */
@font-face {
    font-family: 'GraublauWebRegular';
    src: url('fonts/graublauweb-webfont.woff') format('woff'),
	     url('fonts/graublauweb-webfont.ttf') format('truetype'),
	     url('fonts/graublauweb-webfont.svg#webfont1OpJtlVt') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Droid Sans';
    src: url('fonts/DroidSans-webfont.woff') format('woff'),
         url('fonts/DroidSans-webfont.ttf') format('truetype'),
         url('fonts/DroidSans-webfont.svg#webfont6rGBoMAO') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* from http://www.google.com/webfonts */

@font-face {
    font-family: 'Concert One';
    font-style: normal;
    font-weight: 400;
    src: local('Concert One'), 
         local('ConcertOne-Regular'), 
         url(http://themes.googleusercontent.com/static/fonts/concertone/v4/eNLG875uBc3mU2X9z56PW9Ih4imgI8P11RFo6YPCPC0.woff) format('woff');
}

@font-face {
    font-family: 'Fredericka the Great';
    font-style: normal;
    font-weight: 400;
    src: local('Fredericka the Great'), 
         local('FrederickatheGreat'), 
         url(http://themes.googleusercontent.com/static/fonts/frederickathegreat/v2/7Es8Lxoku-e5eOZWpxw18vc3vBAn7YvtW9hNjxWZBR0.woff) format('woff');
}

/**********************************************************
 HTML tags
 */
body { 
    background-color: #f7f7f7; 
    font-family: 'Droid Sans', 'Trebuchet MS', sans-serif; 
    text-shadow: 0px 1px 1px white;
}

h1, h2, h3, h4, h5, h6 {
    text-shadow: 0px 0px 3px rgba(0, 0, 0, .31), 0px 1px 1px white, 1px 1px 1px rgba(0, 0, 0, .31);
}

h1 {
    /* font: 40px/60px 'Fredericka the Great',serif; */
    font: 35px 'Fredericka the Great',serif;
    color: rgba(25,25,255,.5);
    text-transform: capitalize;
}
h1, h2 {
    text-align: center;
}
h2, h3, h4, h5, h6 {
    color: #333;
}

p {
    /* 
    font-family: 'Droid Sans', 'Trebuchet MS', sans-serif; 
    margin: 0px; padding: 10px; 
    */
}
a {
    color: rgba(25,25,255,.75);
    font-weight: bold;
}
a.ext {
    color: rgba(25,25,255,.5);
    text-decoration: none;
}
a.email {
    color: #555;
    font-family: 'Droid Sans', 'Trebuchet MS', sans-serif;
}
a:hover {
    text-decoration: underline;
}

ul {
    list-style-type:none;
    list-style-position:inside;
}

li {
}

li a {
    padding:0;
    /*border: */
}
code {
    font-weight: bold;
    background-color: white;
}
dt {
    font-weight: bold;
    /*font-family: monospace;*/
}

pre {
    font-stretch:narrower;
    /*white-space:pre;*/
    background-color: white;
    border-left: 1px solid #444;
}
button {
    font-size: 12px;
    font-stretch:narrower;
}

/**********************************************************
 classes 
 */

/* rewrite bootstrap classes */
.nav {
    margin-bottom: 0px;
    /* keep other attrs */
    margin-left: 0;
    list-style: none;
}
.box {
    border: 1px solid #444;
    background-image: url(/static/WIP.png);
    background-repeat: repeat-y;
    background-position: top center;
    background-color: #fff;
}
.box > h1 {
    margin-top:0;
    padding-top: 10px;
    padding-bottom: 10px;
    background: rgba(200,200,200,.5);

}
.cliquable {
    cursor:pointer;
}
.cliquable:hover {
    text-decoration:underline;
}
.help {
    cursor:help;
}
.hover:hover {
    background-color: rgba(200,200,200,.5);
}
.hide {
    display: none; 
}

dl.dl-horizontal dt {
    font-family: GraublauWebRegular;
    font-stretch: condensed;
}
ul.news {
    margin-left:0;
    list-style:none;
}
ul.news > li:not(:first-child) {
    list-style:circle inside;
}
.shadow {
    margin: 20px 20px 30px 0px;
    padding: 10px;
    background-color: rgba(255,255,255,.6);
    box-shadow: -1px 2px 3px rgba(0, 0, 0, .5);
    -webkit-box-shadow: -1px 2px 3px rgba(0, 0, 0, .5);
    -moz-box-shadow: -1px 2px 3px rgba(0, 0, 0, .5);
    /*
    */
}
.separator {
    border-bottom: 2px solid #F0F0F0;
    height: 3px;
    margin: 0px; padding: 0px; 
}

.term {
    font: bold 10px "VT-100",Terminal,monospace;
    font-stretch: ultra-condensed;
    /* white-space:pre; */
    background-color: white;
    color: green;
}
.toggle,
.toggle-all {
    /* class for users list toggle visibility in page /group/xx */
    font-family: mono;
}
.toggle-item {
    /* class for users list toggle visibility in page /group/xx */
    border: 1px solid #999;
    background-color: #DDD;
    margin-left: 5px ;
    padding:0;
    display: none;
}
.toggle-item dl {
    padding: 0;
    margin: 0;
}
/* change left align in .toggle-item */
.toggle-item .dl-horizontal dt {
    width: 90px;
}
.toggle-item .dl-horizontal dd {
    margin-left: 100px;
}

.warning {
    font: 16px Arial,sans-serif;
    color: red;
    background-color: rgba(200,200,200,.5);
}
.warn {
    color: red;
    background-color: rgba(200,200,200,.5);
}
.widget_ok {
    background-color: green;
}
.widget_notok {
    background-color: red;
}
/* .server { */
/*     float: left; */
/* } */
/* .noserver { */
/*     clear: left; */
/* } */
.nfs {
    border-radius: 2em 1em;
    -moz-border-radius: 2em 1em;
    color: #f40;
}
.ldap {
    border-radius: 1em 2em;
    -moz-border-radius: 1em 2em;
    color: #808;
}
.log:hover {
    background-color: rgba(200,200,200,.5);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
}
.sectionlog {
    margin: 0px; padding: 10px; 
    font: 16px/10px Helvetica, 'Liberation Sans', Arial, sans-serif;
    font-variant: small-caps;
    font-weight: bold;
    color: rgba(0,0,0,.75);
}
/* multilangue */
/* https://stackoverflow.com/a/24035422 */
.fr, .en, .de { display:none; }
.fr:lang(fr), .en:lang(en), .de:lang(de), .it:lang(it) { display:inline; }



/**********************************************************
 title 
 */
#top {
    /*
    background-image: url(black.png);
    */
    background: #444;
    padding: 5px 0 10px;
}
#top-container {
}
/*
#top-center {
    width: 1000px;
    margin: 0px auto;
}*/
#top-logo {
    cursor:pointer;
    background: url(/static/logo.png) no-repeat left top;
    background-size: contain; 
    height:60px;
}



#top-content {
    /* font: 40px small-caps 'Concert One',sans-serif; */ 
    font: 40px 'GraublauWebRegular',sans-serif; 
    /* text-shadow: 0px 0px 3px rgba(0, 0, 0, .31), 0px 1px 1px white, 1px 1px 1px rgba(0, 0, 0, .31); */
    color: rgba(25,25,255,.5);
    
}

/**********************************************************
 content 
 */
#content-container {
/*
    width: 1000px;
    margin: 0px auto;
*/
}
#content-center {
    /*
    margin: 0;padding: 0 20px;
    */
}
#warning-empty {
/*
    margin: 0 0 20px 0;
*/
}
#warning {
    padding: 10px;
    /* margin: 0 0 0 192px; */
    /* margin: 0 0 20px 0; */
    font: 16px Arial,sans-serif bold;
    text-align: center;
    color: #444;
    background-color: rgba(255,0,0,.5);

    border: 1px inset #444;
    border-top:0;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    -webkit-border-bottom-left-radius: 30px;
    -webkit-border-bottom-right-radius: 30px;
    -moz-border-radius-bottomleft: 30px;
    -moz-border-radius-bottomright: 30px;

    box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
}

/**********************************************************
 navigation bar
 */

/* .nav-tabs > .active > a{ */
/*     border-bottom:1px solid #FFF; */
/* } */
/* .nav-border { */
/* 	/1* border-left: 2px solid #f0f0f0; *1/ */
/*     padding-left: 7px; */
/* 	border-right: 2px solid #f0f0f0; */
/*     padding-right: 5px; */
/* } */
#nav {
    padding-top: 30px;
}
#nav li {
    /* font: 16px/10px Helvetica, 'Liberation Sans', Arial, sans-serif; */
    font: 16px Helvetica, 'Liberation Sans', Arial, sans-serif;
    font-variant: small-caps;
    font-weight: bold;
}
#nav a {
    text-decoration: none;
    /* margin-bottom:0; */
    /* margin-top:20px; */
    /* border-left: 2px solid #F0F0F0; */
}
#nav li > a {
    /* display:block; */
    color: rgba(25,25,255,.5);
    padding: 0 15px;
}
#nav li a:hover {
    color: rgba(255,255,255,1);
    background-color: rgba(25,25,255,.5);
}
#nav li.nav-here,
#nav li.active {
    color: rgba(0,0,0,.75);
    background-color: rgba(200,200,200,.5);
    font-weight: bold;
    /* copy boostrap background extention */
    margin: 0 -15px;
    padding: 0 15px;

}
#nav li.nav-title {
    border-top: 2px solid #F0F0F0;
    color: rgba(0,0,0,.5);
    font-weight: bold;
    font-size: 120%;
    /* copy boostrap backgroud extention */
    /* margin: 0 -15px 10px; */
    /* padding: 0 15px; */
}

/**********************************************************
 The place to BE 
*/
#content {
    font: 13px 'Droid Sans', 'Trebuchet MS', sans-serif; 
    text-shadow: none;
}

/* #content-text { */
/* } */

#content h1, #content h2, #content h3 {
}

#content div#fiche th {
    font-family: monospace;
    text-align:left;
}
#content div#fiche input {
    font-family: monospace;
}
/*
#content ul {
    margin: 0; padding: 0; 
    list-style-type:none;
}
#content li {
    margin: 0; padding: 0; 
}
#content a {
    text-decoration: none;
    margin: 0; padding: 0; 
}
#content a:hover {
    text-decoration: underline;
    margin: 0; padding: 0; 
}
*/
#content a.server {
    text-decoration:none;
    display:block;
    /*
    color: rgba(25,25,255,.5);
    margin: 5px; padding:5px;
    */
    background-color: rgba(255,255,2555,.5);
    font-variant:small-caps;
    font-size:larger;
    border: 3px outset #aaa;
}
#content a.server:hover {
    text-decoration:none;
    /*
    color: #000;
    background-color: #fff;
    */
    background-color: rgba(200, 200, 200, .5);
    border: 3px inset #aaa;
}
/**********************************************************
 table sortable with JQuery and plugin tablesorter 
 http://tablesorter.com/docs/#Examples
*/
#content th.headerSortUp {
    background-image: url(/static/arrowu.gif);
    background-color: rgba(200, 200, 200, .5);
}

#content th.headerSortDown { 
    background-image: url(/static/arrowd.gif); 
    background-color: rgba(200, 200, 200, .5); 
} 

#content th.header { 
    cursor: pointer; 
    font-weight: bold; 
    background-image: url(/static/arrowud.gif);     
    background-repeat: no-repeat; 
    background-position: center left; 
    border-right: 1px solid #dad9c7; 
    padding-left: 20px; 
    margin-left: -1px; 
}

/**********************************************************
 onglets top classes
 http://babylon-design.com/apprendre-et-comprendre-jquery-2-3/
*/
#onglets ul {
    margin-top: 20px;
    margin-bottom: 0;
}
#onglets ul > li {
    margin-bottom: 0;
    line-height: auto;
}
/*
#onglets dt:after {
    content: ':';
}
#onglets dt + dd {
    margin-right: 5px;
}
#onglets dd + dd {
    border-left: 3px solid red;
}
#onglets dd + dt {
    clear: left;
    float : none;
}
*/
#onglets .onglet {
    margin-top: 0;
}
/*
#onglets > .nav-tabs > li.active {
    border-bottom: 2px solid #FFF;
}
*/
#onglets #logs .useradd {
    margin-bottom: 5px;
    border-bottom: 2px #444 solid;
    border-left: 2px #444 solid;
}
#onglets #logs .userdel {
    margin-top: 5px;
    border-top: 2px #444 solid;
    border-left: 2px #444 solid;
}
/**********************************************************
 boring (c) stuffs
*/
#bottom { 
    clear:both;
    background-color: #eee;
    font: 10px/16px 'lucida grande', tahoma, verdana, arial, sans-serif;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, .31), 0px 1px 1px white, 1px 1px 1px rgba(0, 0, 0, .31);
    color: #555;
    margin: 10px 0 0; padding: 0 50px 10px;
    border-top: 2px solid #111;

    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
}
#bottom-clear {
    background-color: black;
    cursor: pointer;
    left: 0; bottom: 0;
    position: absolute;
    width: 100%;
    z-index: 100000;
}


/**********************************************************
 jquery UI autocomplete css
*/
.ui-autocomplete-loading { 
    background: white url('/static/jquery-ui/images/ui-anim_basic_16x16.gif') right center no-repeat; 
}

.ui-autocomplete {
    font: 13px/22px 'Droid Sans', 'Trebuchet MS', sans-serif;
    background-color: #eeeeee;
    border: 1px solid #cccccc;
    cursor: pointer;
}


/**********************************************************
 raphael graph
*/
#pie {
    background-color: white;
    border: 1px solid;
    width: 400px;
    display: none;
}
#pie svg {
}
/* the closeme link*/
#pie div {
    position:relative;
    left: 5px;
    bottom: 0px;
}
#pie div a {
    font-size: 75%;
}

/* the grey tranparent background*/
#pieblack {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.5);
}