@font-face {
    font-family: "YOF";
    src: url("../font/Youthing_October_Fourteen_Italic.otf") format("truetype");
    src: url("../font/Youthing_October_Fourteen_Regular.otf") format("truetype");
}
body
{
    background-image:url('../img/bg.jpg');
    background-repeat:no-repeat;
    background-size:100%;
    background-attachment:fixed;
    margin-top:0px;
}
html
{
    font-family: "YOF";
    padding-top:10px;
    padding-left:10px;
}
h1
{
    padding-left:60px;
    margin-top: 0px;
    font-size:30px;
    color:white;
    text-shadow:2px 2px 5px black; 
}
.newLearnerForm
{
    cursor: url('../img/stylo.cur'), pointer; 
    width:287px;
    height:400px;
    max-height:400px;
    display:inline-block;
    padding:0px 0px;
    margin-left:300px;
    margin-top:60px;
    box-shadow: 20px 20px 20px black;
    float:left;
}
.newLearnerForm p
{
    width:90%;
    height:25px;
    color:black;
    text-align:center;
}
.backgroundPaper
{
    background-image:url('../img/papier.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-attachment: fixed;
}
.newLearnerForm ul li
{
    list-style-type: none;
    font-style:italic;
}
.newLearnerForm input[type=text],
.newLearnerForm select,
.newLearnerForm input[type=button],
.newLearnerForm input[type=date]
{
    font-family: "YOF";
    cursor: url('../img/stylo.cur'), pointer;     
    font-style:italic;
    height:25px;
    font-size:20px;
    margin-left:10px;
    margin:2px;
    display:inline-block;
    font-weight:bold;
    background-color:transparent;
    border:0px;
    width:90%;
}

.rotateLeft
{
    transform:rotate(-20deg);   
}
.rotateRight
{
    margin-left:-30px;
    transform:rotate(15deg); 
}
.newLearnerForm input[type=text]:hover,
.newLearnerForm select:hover,
.newLearnerForm textarea:hover,
.newLearnerForm input[type=date]:hover
{
    box-shadow:0px 0px 4px white;
    border:0px;
}
.newLearnerForm input[type=text]:focus,
.newLearnerForm select:focus,
.newLearnerForm textarea:focus,
.newLearnerForm input[type=date]:focus
{
    background:linear-gradient(to right,#FFFFFF, rgba(0,0,0,0) 90%);
}
.newLearnerForm input[type=button]
{
    font-size:25px;
    margin-top:15px;
    color:white;
    line-height:35px;
    font-weight:bold;
    text-shadow:2px 2px 4px black;
}
.newLearnerForm input[type=button]:hover
{
    text-shadow:1px 1px 2px black;
}
#errorMessage
{
    font-family: "YOF";
    width:30%;
    height:400px;
    color:white;
    font-size:25px; 
    padding:20px;
    position:fixed;
    top:70px;
    right:50px;
    box-shadow:2px 2px 10px black;
    border:10px;
    background:linear-gradient(to bottom left, #990000, rgba(0,0,0,0.5)90%);
    overflow:auto;
}
.error
{
    box-shadow:0px 0px 10px red;
    background-color:transparent;
    /*background-color:white;*/
}
.resume, .resumeErrors
{
    width:40%;
    background-image:url('../img/parchemin.gif');    
    background-repeat: no-repeat;
    background-size:100% 100%;
    display:inline-block;
    padding:12% 100px;
    margin-left:150px;
    margin-top:0px; 
    color:black;
    font-size:20px;
    text-shadow:2px 2px 3px white;
    text-align:justify;
}
.resumeErrors
{
    width:20%;
    margin-left:200px;
}
.valid ul li::before
{
    content:"=>";
}
.badge
{
    font-family: "Verdana";
    width:500px;
    height:339px;
    background-image:url('../img/badge2.png');    
    background-repeat: no-repeat;
    background-size:100%;
    /*background-position:center bottom;*/
    display:inline-block;  
    float:right;
    margin-right:100px;
    /*padding:90px 250px 0px 10px;*/
    text-align:center;
    padding-top:35px;
}
.badge p
{ 
    line-height:25px;
    color:black;
    font-size:22px;
    text-shadow:2px 2px 3px white;
    text-align:center;
    margin-right:200px;
}
.alert
{
    background:linear-gradient(to top left, #AA0000, rgba(0,0,0,0.3)90%); 
    border-radius:10px;
    width:500px;
    height:300px;
    float:right;
    margin-top:50px;
    margin-right:50px;
    box-shadow:5px 5px 10px black;
    padding:20px 20px;
}
.alert p
{
    color:white;
    font-size:25px;
    text-shadow:1px 1px 3px black;
}
.alert ul li
{
    list-style-type: none;
    color:white;
    font-size:20px;
    text-shadow:1px 1px 3px black;
    padding-left:100px;
}
.alert li:before
{
    content:"\2192\ ";
}
.newLearnerForm button
{
    border:0px;
    background-color:transparent;
}
.newLearnerForm button img
{
    height:65px;
}
.newLearnerForm button[type=reset]:hover,
.newLearnerForm button[type=submit]:hover
{
    cursor: url('../img/stylo.cur'), pointer; 
}
#footer
{
    background: linear-gradient(to top, #FFFFFF, rgba(0,0,0,0)90%);
    height:50px;
    position:fixed;
    vertical-align: baseline;
    bottom:0;
    left:0;
    right:0;
    text-align: center;
    color:white;
    padding-top:25px;
}
#testWriter
{
    width:100px;
    height:50px;
    color:white;
    font-size:20px;
    background-color:red;
}