/*
CSS Document
White
Design par Olivier R.
*/
* { margin: 0; padding: 0; }
img { border: none; }
/* Generic classes */
.fleft { float: left; }
.fright { float: right; }
.center { text-align: center; }
.right { text-align: right; }
.left { text-align: left; }
.justify { text-align: justify; }
.hidden { display: none; }
.clearer { clear: both; font-size: 0; height: 0; }
body {
background: hsl(0, 0%, 100%) url(../img/lines.png);
font: normal 16px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
color: #505050;
}
/* MAIN ====================================================================== */
#main .inbox {
width: 600px;
margin: 20px auto 10px auto;
padding: 10px 30px 30px 30px;
background: hsl(0, 0%, 100%);
border: 2px solid #F0F0F0;
border-radius: 20px;
}
#main h1 {
margin: 5px 0 20px 0;
color: hsl(210, 50%, 50%);
font: bold 30px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}
#main h2 {
margin: 5px 0 2px 0;
color: hsl(0, 50%, 50%);
font: bold 20px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}
#main h3 {
margin: 3px 0 2px 0;
color: hsl(210, 50%, 50%);
font: bold 16px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}
#categories {
display: flex;
padding: 10px 0;
}
.category {
padding: 10px;
border-radius: 3px;
cursor: pointer;
}
.category:hover {
background-color: hsl(0, 0%, 90%);
}
.empty_section {
padding: 80px;
font-size: 24px;
text-align: center;
}
.section {
display: none;
padding: 10px;
}
.container {
display: flex;
}
.block {
flex-grow: 1;
margin: 5px;
padding: 10px 15px 15px 15px;
background-color: hsl(0, 10%, 96%);
border-radius: 3px;
}
input#word {
display: inline-block;
width: 230px;
margin-left: 5px;
padding: 5px 10px;
border: 2px solid hsl(0, 0%, 80%);
border-radius: 3px;
height: 24px;
background: transparent;
font: normal 20px Tahoma, "Ubuntu Condensed";
color: hsl(0, 0%, 30%);
}
input[placeholder]#word {
color: hsl(0, 0%, 70%);
}
#generated_words {
padding: 10px;
}
#buttonline {
text-align: right;
}
#add_to_dictionary {
display: inline-block;
padding: 7px 10px;
font-size: 20px;
background-color: hsl(0, 30%, 30%);
color: hsl(0, 30%, 60%);
border-radius: 3px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
cursor: pointer;
}
#add_to_dictionary:hover {
background-color: hsl(0, 60%, 40%);
color: hsl(0, 60%, 70%);
box-shadow: 0 0 2px hsl(0, 60%, 50%);
}