/*
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;
}
.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;
}
h1 {
margin: 5px 0 20px 0;
color: hsl(210, 50%, 50%);
font: bold 30px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}
h2 {
margin: 5px 0 2px 0;
color: hsl(0, 50%, 50%);
font: bold 20px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}
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;
}
#word_section2 {
display: none;
}
.category {
padding: 10px;
border-radius: 3px;
cursor: pointer;
}
.category:hover {
background-color: hsl(0, 0%, 90%);
}
#section_vide {
padding: 50px;
font-size: 24px;
text-align: center;
background-color: hsl(0, 20%, 90%);
color: hsl(0, 20%, 50%);
border-radius: 5px;
}
.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;
}
.typeline {
padding: 5px 10px;
}
.widelabel {
display: inline-block;
min-width: 80px;
}
.examples_true {
flex-grow: 1;
margin: 2px;
padding: 10px;
background-color: hsl(120, 10%, 90%);
color: hsl(120, 10%, 50%);
font-size: 14px;
border-radius: 3px;
}
.examples_false {
flex-grow: 1;
margin: 2px;
padding: 10px;
background-color: hsl(0, 10%, 90%);
color: hsl(0, 10%, 50%);
font-size: 14px;
border-radius: 3px;
}
input[type=text] {
display: inline-block;
width: 250px;
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%, 20%);
}
input[placeholder] {
color: hsl(0, 0%, 80%);
}
#actions {
display: none;
padding: 10px;
}
#results {
padding: 10px;
background-color: hsl(210, 10%, 90%);
border-radius: 3px;
margin: 5px 0;
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}
#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%);
}