html, body
{
height: 100%;
}
body
{
background-image: url('/img/champ-etoiles-b.png');
background-color: black;
background-repeat: no-repeat;
background-position: center top;
color: white;
}
.jumbotron
{
background: transparent;
border: 0;
}
.bloc
{
position: relative;
border: 2px solid #525252;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
text-align: left;
padding: 0;
}
.jaffa
{
position: absolute;
z-index: 105;
margin-left: -60px;
margin-top: -86px;
}
.title
{
background-color:#141311;
height:27px;
text-align: center;
padding-top: 3px;
filter:Alpha(opacity=70);
-moz-opacity:0.70;
opacity: 0.70;
}
.title p
{
font-size: 15px;
font-weight: bold;
}
.cont
{
min-height: 320px;
margin:0px;
padding: 3px;
padding-top: 10px;
border: none;
border-top: 1px solid #7D7C7B;
background: #000;
filter:Alpha(opacity=50);
-moz-opacity:0.50;
opacity: 0.50;
}
.cont p
{
font-size: 12px;
margin-bottom: 12px;
padding-left: 170px
}
.cont div {text-align: center;}
@media screen and (max-width: 900px)
{
.jaffa {display: none;}
.cont p {padding-left: 0;}
}
@media screen and (max-height: 500px)
{
.jaffa {display: none;}
.cont p {padding-left: 0;}
}
@media screen and (max-width: 250px)
{
.cont div img {width: 100%;}
}
/******************************************
* http://jsfiddle.net/hashem/ut5sbqvz/ *
******************************************/
.jumbotron.vertical-center
{
margin-bottom: 0; /* Remove the default bottom margin of .jumbotron */
}
.vertical-center
{
/* Fallback for vh unit */
min-height: 100%;
/*
* You might also want to use 'height' property instead.
*
* Note that for percentage values of 'height' or 'min-height' properties,
* the 'height' of the parent element should be specified explicitly.
*
* In this case the parent of '.vertical-center'is the element
*/
min-height: 100vh;
/* Make it a flex container */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Align the bootstrap's container vertically */
-webkit-box-align : center;
-webkit-align-items : center;
-moz-box-align : center;
-ms-flex-align : center;
align-items : center;
/* In legacy web browsers such as Firefox 9 we need to specify the width of the flex container */
width: 100%;
/*
* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
* hence the bootstrap's container won't be aligned to the center anymore.
*
* Therefore, we should use the following declarations to get it centered again
*/
-webkit-box-pack : center;
-moz-box-pack : center;
-ms-flex-pack : center;
-webkit-justify-content : center;
justify-content : center;
}