/*
Auteur: Oliver Michas
Date de publication: 04-09-2011
Date d'édition: 04-09-2011
Version: 0.0.1
URL: www.2pulse.com

This administration template is free to use on any personal or professional project. Do whatever you like with it. But please be fair and don't use as is and then take credit for it. A thank you is not needed, but appreciated of course. Feedback would be fabulously helpful too, as I intend to maintain this as long as I can. I am much obliged to the entire community for bringing me to the coding and design world. Last and least, find me on twitter @OliverMichas !

Credit and humble thanks to:
@Nicholas Gallagher: normalize is greatly abused here
@Harry Roberts: would not be so many comments without him 
@Sublime Text: I now dream about Distraction Free Mode at night...
@Oliver Reichenstein: Has guided many of my decisions.
@Clara: Helps me get better every day and live my dreams.
*/

/* NORMALISATION DU SITE */

    html {
        font-size: 100%; /*100% permet aux internautes de ne pas se crever les yeux*/
        -webkit-text-size-adjust: 100%; /*correction du rendu lors de la rotation...*/
        -ms-text-size-adjust: 100%; /*...de l'écran d'un iphone ou tout iOS*/
        font-family:Arial;
        height:100%;
        line-height:1.5em;}
        
    body, form {
        margin: 0; /*marges mal gérées par ie*/}
        
    article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {display: block;} /*ie, ce sont des blocs !*/

    a {
        text-decoration: none; /*suppression du sous-lignage*/}
        
    a:focus {
        outline: thin dotted; /*mauvais rendu de contour sous chrome*/}

    a:hover, a:active {
        outline: 0; /*suppression du contour de lien*/}

    img {
        border: 0; /*suppression de la bordure quand liée*/
        -ms-interpolation-mode: bicubic; /*meilleur rendu des images sous ie7*/}

    legend {
        border: 0; /*couleur non héritée dans ie*/
        *margin-left: -7px; /*marges mal gérées par ie*/}

    button, input, select, textarea {
        font-size: 100%; /*les navigateurs déconnent sur la taille de police*/
        margin: 0; /*marges mal gérées par ie, ff, safari et chrome*/
        vertical-align: baseline; /*meilleure lisibilité*/
        *vertical-align: middle; /*idem*/}

    button, input {
        line-height: normal; /*corrige gestion de hauteur de ligne de ff*/
        *overflow: visible;  /*corrige bug d'espacement sous ie*/}


    button, html input[type="button"], input[type="submit"] {
        cursor: pointer; /*affiche un pointeur*/
        -webkit-appearance: button; /*permet de styliser les input sous iOS*/}

    input[type="checkbox"], input[type="radio"] {
        box-sizing: border-box; /*suppression du content-box sous ie */
        padding: 0; /*corrige padding forcé sour ie*/}

    textarea {
        overflow: auto; /* supprime la scrollbar sous ie */
        vertical-align: top; /*meilleure lisibilité */}

    table {
        border-collapse: collapse; /*retire les marges*/
        border-spacing: 0; /*idem*/}

/* CLASSES GENERIQUES*/
    
    body{color:#444; /*couleur plus douce pour l'oeil*/}

    a{color:#006699; /*bleu royal*/}

    a:hover{color:#ff6633; /*orange sombre*/}

    ol{
        display:block;
        padding:10px;
        margin:-2.155% 0 0;
        list-style:none;
        border:1px solid #ddd;
        border-top:0;
        background:#efefef;
        color:#666;
    }

    ol li{
        display:inline-block;
    }

    ol li:before{
        content:' > ';
        font-weight:normal
    }

    ol li:first-child:before{
        content:none;
        font-weight:normal
    }

    mark{
        background:#fff0c6; /*surlignage du code*/}
     
    .table-listing{
        width:100%; /*table prend toute la largeur disponible*/
        border-left:1px solid #ddd;
        border-right:1px solid #ddd;}
     
    .table-listing tr:hover, .table-listing tr:first-child, .table-listing tr:last-child{
        background:#eee;/*les 1er, derniers et tr survolés sont grisés*/}

    .table-listing th{
        color:#444;
        font-weight:normal;}

    .table-listing th, .table-listing td{
        text-align:center; /*centrer les td comme les th, au centre*/
        border-top:1px solid #ddd;
        border-bottom:1px solid #ddd;
        padding:0.5em 0.75em;} 


    .table-listing th:nth-child(3), .table-listing td:nth-child(3),
    .table-listing th:nth-child(4), .table-listing td:nth-child(4){ 
        text-align:left; /*3e td/th est la description alignée a gauche*/} 
        
    .table-listing img{
        vertical-align:bottom;/*alignement correct des images dans la table*/} 

    .table-listing tr + .no-content{
        background:#fff0c6;
        display:none;}

    .table-listing tr:first-child + .no-content{
        background:#fff0c6;
        display:table-row;}

    .table-listing input[type="submit"]{
        background:none;
        border:none;
        color:#006699}

    .table-listing input[type="submit"]:hover{
        color:#ff6633}

    input[type="submit"].btn,
    input[type="submit"].btn-xs{
        padding:0.70em 0.95em; /*les em permettont de suivre la taille de police*/
        border-radius:3px;
        background:#006699;
        color:#fff;
        border:0;} 

    input[type="submit"].btn-xs{
        padding:0.40em 0.60em;} 
        
    a.btn, .btns a{
        display:inline-block;
        padding:0.5em 0.75em; 
        border-radius:3px;
        background:#006699;
        color:#fff;
        text-decoration:none;}
        
    input[type="submit"].btn:hover, input[type="submit"].btn-xs:hover, a.btn:hover, .btns a:hover{
        background:#ff6633;
        color:#fff;
        -webkit-transition: all 0.2s ease-in-out; /*adoucir la transition*/
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;}
        
    .btns li{
        list-style:none;
        float:left;}
    
    .btns a{
        border-radius:0}
        
    .btns li:first-child a{
        margin-left:-40px; /*reset hardcore de marge d'un ul basique*/
        border-top-left-radius:3px;
        border-bottom-left-radius:3px}
        
    .btns li:last-child a{
        border-top-right-radius:3px;
        border-bottom-right-radius:3px}
        
    .btns:after{ /*clear fix*/
        content:'';
        display:table;
        clear:both;}

    input[type="submit"].grey{background:#666}

    .green{color:green}
    .orange{color:orange}
    .red{color:red}
        
    h1 b, h2 b, h3 b{
        color:#006699;}
    

/* MINI GRID*/

    section[class^="grid"]{ /*regles pour tout les élements de classe grid*/
        float:left;
        margin-right:1.724%;
        margin-bottom:0.862%;}

    .grid-1{ width:23.148%}
    .grid-2{ width:48.148%}
    .grid-3{ width:73.148%}
    .grid-4{ width:98.148%; margin:0} 

    [class^="grid"] article{ /*regles pour les blocs de contenus*/
        background: #fafafa;
        border:1px solid #ddd; 
        padding:10px;
        margin-top:4.696%;}
    
    [class^="grid"] article:first-child{
        margin-top:0;}

    [class^="grid"] article:hover{ /*foncer la bordure au survol d'un bloc*/
        border:1px solid #d0d0d0;}   

/*HEADER*/
    
    header{
        background: #efefef;
        border:1px solid #ddd;
        padding:10px;
        height:66px; /*hauteur fixe importante pour le menu*/}
     

/*CONTENU*/	    
		
    header + section{ /*section immédiate après le header*/
        margin-top:0;
        padding-top:1.724%;
        overflow:hidden;}

    .locations label{margin-right:15px}

    .locations input[type="text"], .machines input[type="text"]{
        padding:0.30em 0.60em;
        background:#f1f1f1;
        border:1px solid #ddd;}

    .table-details td:first-child{
        color:#666;
        padding-right:10px}

    .machines .table-details td{padding:3px;}


/*MENU*/

    aside{
        float:left;
        margin:26px 1.724% 1.724%;
        width: 217px; /*215 + 2 px de bordure des liens.*/}

    aside ul{
        padding-left:0;
        padding-right:0;}
        
    aside li{
        list-style-type:none;}  
        
    aside li a{
        display:block;
        width:160px;
        padding:10px 10px 10px 45px;
        border-left:1px solid #ddd;
        border-right:1px solid #ddd;
        background:#fafafa;
        color:#444;}
        
    aside li a:visited{ /*A CHANGER*/
        color:#444;}
        
    aside li:last-child a{ /*ferme la "box" de liens*/
        border-bottom:1px solid #ddd;}
        
    aside li a:hover, aside li a.cur{ /*lien survolé ou actif en orange*/
        color:#ff6633;}

    aside a:hover{ /*transition plus douce sur l'oeil, mais reste réactive*/
        -webkit-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
        -o-transition: all 0.25s ease-in-out;
        -ms-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;}
        
    aside a[class^="onglet"]{ /*selection des classes débutant par ce mot*/
        background:url(icones-onglets.png) #efefef no-repeat;
        border:1px solid #ddd;
        color:#006699;}
    
    aside ul:hover > li a[class^="onglet"]{ /*hover de la liste modifie l'onglet*/
        background-color:#e0e0e0;
        color:#444;}
    
    /* application des bonnes icones en utilisant 
    le dernier mot de la classe avec [class$=mot]*/    
    aside a[class$="hom"]{background-position:7px 6px}
    aside a[class$="mac"]{background-position:7px -44px}
    aside a[class$="loc"]{background-position:7px -96px}
    aside a[class$="uti"]{background-position:7px -250px}
    aside a[class$="cod"]{background-position:7px -149px}
    aside a[class$="aff"]{background-position:7px -199px}
    aside a[class$="cat"]{background-position:7px -299px}
       
	
/*FOOTER*/

/*MISC*/

    /*detection de contenus spécifiques liés
    --détéctés plus bas: .csv, .xlsx, .pdf
    --ne fonctionne pas sur vieux navigateurs*/ 
        
    a[href$=".csv"]:after, a[href$=".xlsx"]:after, a[href$=".pdf"]:after{
        font-variant:caps;
        font-size:0.5em;
        vertical-align:super;/*mettre le format en exposante*/}
        
    a[href$=".csv"]:after, a[href$=".xlsx"]:after{
        content:' (EXCEL)'; /*afficher le type de fichier*/
        color:green;}
    
    a[href$=".pdf"]:after{
        content:' (PDF)';
        color:red}
    

/*REDIMENSIONS*/

#small-screen{display:none}

@media (max-width: 1280px) { /* A VOIR PLUS TARD */
    html{font-size:95%}
    aside{width:186px}   
    aside li a{padding-left:10px}   
    aside a[class^="onglet"]{background-image:none}   
}

@media (max-width: 1024px) { /* A VOIR PLUS TARD */
    html{font-size:90%;}
}

@media (max-width: 700px) { /* A VOIR PLUS TARD */
    #small-screen{
        display:block;
        position:absolute;
        top:0;
        height:100%;
        width:100%;
        background:#222;
        color:#ddd;}
    #small-screen p{
        position:absolute;
        text-align:center;
        color:#333;
        height:74px;
        width:248px;
        top:50%;
        left:50%;
        padding:26px;
        background:#fff;
        border:1px solid #666;
        margin-top:-50px;
        margin-left:-150px;
    }
}

/*
*/