dm/DWeb/style.css

/*  ########### commun*/

@font-face {
    font-family: 'source_sans_proregular';
    src: url('police/sourcesanspro-regular-webfont.eot');
    src: url('police/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/sourcesanspro-regular-webfont.woff2') format('woff2'),
         url('police/sourcesanspro-regular-webfont.woff') format('woff'),
         url('police/sourcesanspro-regular-webfont.ttf') format('truetype'),
         url('police/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body
{
    background-color: rgb(249,249,249);
    font-family: SourceSansPro-Regular, Verdana, arial, serif;
    color: rgb(30,30,30);
}

#bloc_page
{
    width: 90%;
    margin: auto;
}

header h1
{
    text-align: center;    
    border: 2px grey groove; 
    border-radius: 5px;
    box-shadow: 5px 5px 5px maroon;
    padding-bottom:5px;
}

section h1
{
    color: maroon;     
    text-shadow: 1px 1px 2px rgba(128,0,0,0.7);
}

section h2
{
    color: maroon;     
    font-size: 1.1em;
}

em
{
    color: maroon;    
    text-shadow: 3px 3px 1px rgba(100,100,100,0.4);
}


/*  ############## menu*/
nav ul
{
    list-style-type: none;
}
nav a:hover
{
    color: rgba(168, 0, 0, 0.9);
}

nav a
{
    font-size:1.3em;
    color: maroon;
    padding-bottom: 3px;
    text-decoration: none;
}
    
@media all and (min-width: 1024px)   /*menu horizontal slt pour resolutions larges*/
{
    nav
    {
        display: inline-block;
        width: 90%;
        text-align: center;
    }
       
    nav a:hover
    {
        border-bottom: 3px solid rgba(168, 0, 0, 0.9);
    }
    
    nav li
    {
        display: inline-block;
        margin-right: 15px;
    }
}


/* ############## Bannière */
#banniere_image
{
    margin-top: 15px;
    height: 75px;
    width: 85%;
    border-radius: 5px;
    background: url('img/banniere.jpg') no-repeat;
    position: relative;
    left: 7.5%;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}

#banniere_description
{
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 5px 5px;
    width: 99.5%;
    height: 25px;
    padding-top: 15px;
    padding-left: 6px;
    background-color: rgb(24,24,24); /* Pour les anciens navigateurs */
    background-color: rgba(24,24,24,0.8);
    color: white;
    font-size: 0.9em;
}

.bouton_rouge
{
    display: inline-block;
    height: 25px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    background-color: rgba(200, 0, 0, 0.8);
    border: 1px solid #760001;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    padding: 3px 8px 0px 8px;
    color: white;
    text-decoration: none;
}

.bouton_rouge:hover
{
  background-color: rgba(240, 0, 0, 0.9);
}


.bouton_rouge img
{
    border: 0;
}

@media all and (max-width: 1024px)   /*menu horizontal slt pour resolutions larges*/
{
    #banniere_image
    {
        display:none;
    }
}

/* ################# agencement */

section, aside
{
    display: inline-block;
    vertical-align: top;
    text-align: justify;      
}

section
{
    position: relative;
    left: 5%;
    width: 100%;
}

#p_app, #p_jeu
{
    display: inline-block;
    vertical-align: top;  
    text-align: justify;
    width: 70%;
    border: 2px solid maroon;
    border-radius: 5px;     
    padding: 10px;  
    padding-top: 3px;   
    box-shadow: 0px 2px 5px #1c1a19; 
    margin-bottom: 30px;    
    background-image: linear-gradient(to bottom right, rgba(0,0,0,0), rgba(200,100,0,0.7));
}

@media all and (min-width: 1024px)   /*decalage des blocs slt pour resolutions larges*/
{
    #p_jeu
    {
        margin-left: 40%;
    }
    
    section
    {
        width: 60%;
    }
}

.bouton_lien
{          
    display: inline-block;
    vertical-align: top;  
    text-align: center;
    position: absolute;
    height: 25px;
    right: 3%;
    bottom: 5%; 
    background-color: rgba(128, 0, 0, 0.8);
    border: 1px solid #760001;
    border-radius: 5px;
    font-size: 1.1em;
    padding: 3px 8px 3px 8px;
    margin-top: 3px;
    color: white;
    text-decoration: none; 
}

.bouton_lien:hover
{
  background-color: rgba(168, 0, 0, 0.9);
}    


/* ############ actus*/
aside
{
    position: relative;   
    width: 15%;   
    min-height:300px;
    margin-left: 20%; 
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 0.8em;  
}

@media all and (max-width: 1024px)  /*resolution etroites: actus en bas*/

{
    aside
    {
        width: auto;
        min-height: 0px;
    }
}

aside p
{
    text-align: justify;
    margin: 5px;
} 

/* ################# tableau versions*/
#tbl_versions
{
    border: 1px solid black;  
    border-collapse: collapse;
    width: 60%;  
}

#tbl_versions td, #tbl_versions th
{
    border: 1px solid black;
    padding: 10px;  
}

#tbl_versions_col0
{
    width: 80%;
}

#tbl_versions_col1
{
    width: 20%;
}

#tbl_versions caption
{
    color: maroon;     
    font-size: 1.1em;
    margin-bottom: 5px;
    text-align: left;
}

.tbl_versions_ligneOS
{
    padding-left: 5px;
    font-size: 1.05em;
    background-color: rgba(128, 0, 0, 0.8);
    color: white;
}

/*frm d'inscription*/
#frm_inscr
{
    display: inline-blocks;
    vertical-align: center;
    text-align: left;
}    



/*pied de page*/
footer
{
    text-align: right;
    font-size: 0.8em;
    padding: 20px;
}

/*conte*/
#conte
{
    width: 100%
    /*nombre de colonnes*/
    -webkit-column-count:3; /* Opera, Safari, Google Chrome */
    -moz-column-count: 3; /* Firefox */
    column-count: 3; /* Internet Explorer */
    
    /*espace entre les colonnes*/
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    
    /*bordure entre les colonnes*/
    -webkit-column-rule: 1px solid #555;
    -moz-column-rule: 1px solid #555;
    column-rule: 1px solid #555;
    
}

#conte h2
/*etaler le titre sur plusieurs colonnes*/
{
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;
}