body {
background: #999999;
color: rgba(0, 0, 0, .25);
}
h2 {
font-size: 18px;
font-style: italic;
}
#nas {
padding: 10px 40px;
background: #81DAF5;
color: black;
font-size: 18px;
font-style: italic;
border-radius: 25pt;
}
#phpmyadmin {
padding: 10px 40px;
background: #F7BE81;
color: black;
font-size: 18px;
font-style: italic;
border-radius: 25pt;
}
#deco {
padding: 10px 40px;
background: #FA5858;
color: black;
font-size: 18px;
font-style: italic;
border-radius: 25pt;
border: 1px solid black;
}
#terrarium {
padding: 10px 40px;
background: #58FA82;
color: black;
font-size: 18px;
font-style: italic;
border-radius: 25pt;
}
#conteneur
{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
text-align: center;
vertical-align: middle;
margin-top: 1%;
}
.element
{
margin: auto;
text-align: center;
}
#conteneur1
{
display: flex;
text-align: center;
flex-direction: column;
justify-content: space-around;
}
.element1
{
margin: 10%;
text-align: center;
border: 1px solid black;
}
#conteneur2
{
display: flex;
text-align: center;
flex-direction: column;
justify-content: space-around;
}
#conteneur3
{
display: flex;
text-align: center;
flex-direction: row;
justify-content: space-around;
}
.element2
{
margin: 8%;
text-align: center;
border: 1px solid black;
}
#model
{
padding: 10px 40px;
background: #BCF5A9;
color: black;
font-size: 15px;
font-style: italic;
border-radius: 25pt;
text-align: center;
}
#cpu
{
padding: 10px 40px;
background: #BCF5A9;
color: black;
font-size: 15px;
font-style: italic;
border-radius: 25pt;
text-align: center;
}
#loadavg
{
padding: 10px 40px;
background: #BCF5A9;
color: black;
font-size: 15px;
font-style: italic;
border-radius: 25pt;
text-align: center;
}
#mem
{
padding: 10px 40px;
background: #BCF5A9;
color: black;
font-size: 15px;
font-style: italic;
border-radius: 25pt;
text-align: center;
}
#bdd
{
width: 300px;
background: #BCF5A9;
color: black;
font-size: 15px;
font-style: italic;
border-radius: 25pt;
text-align: center;
border: 1px solid black;
border-radius: 7pt;
margin-top: 8px;
}
#date
{
margin: auto;
text-align: center;
font-size : 200%;
}
#heure
{
margin: auto;
text-align: center;
font-size : 300%;
}
#ephem{
text-align: center;
font-size : 100%;
font-family: sans-serif;
font-style: italic;
font-size: 130%;
}
#shell{
width: 800px;
height: 400px;
margin: 20px 10px;
border: 1px solid black;
border-radius: 7pt;
background-color: #A4A4A4;
}
#main {
min-height: 650px;
margin: 0px;
padding: 0px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > article {
font-family: sans-serif;
font-style: italic;
margin: 4px;
padding: 5px;
color: black;
text-align: center;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #BCF5A9;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
#main > nav {
margin: 4px;
padding: 5px;
text-align: center;
color: black;
font-family: sans-serif;
font-style: italic;
font-size: 18px;
font-style: italic;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 1;
order: 1;
}
#main > aside {
margin: 4px;
padding: 5px;
text-align: center;
color: black;
font-family: sans-serif;
font-style: italic;
font-size: 18px;
font-style: italic;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
header,
footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 80px;
border: 1px solid black;
border-radius: 7pt;
background: #ccccff;
text-align: center;
color: black;
}
input[type=submit] {
width:100px;
border: 1px solid black;
border-radius: 7pt;
color:black;
}
/* Too narrow to support three columns */
@media all and (max-width: 640px) {
#main,
#page {
-webkit-flex-flow: column;
flex-flow: column;
}
#main > article,
#main > nav,
#main > aside {
/* Return them to document order */
-webkit-order: 0;
order: 0;
}
#main > nav,
#main > aside,
header,
footer {
min-height: 50px;
max-height: 50px;
}
}