/*

Title:		Screen Styles for melamedia.ch Microsite
Author: 	Stefan Rechsteiner, stefanrechsteiner.com

!!! WE LOVE HTML5, CSS3 & WEBKIT !!!

*/

/* reset */
html,body,div,h1,p,a,img,fieldset,form,label,legend,footer,header{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
footer,header{display:block}

/* general */
html{height:100%;overflow:auto;-webkit-font-smoothing:antialiased;background:rgba(232,234,233,1);}
body{font:normal 62.5%/1.4 "Myriad Pro","Myriad","Lucida Grande",sans-serif;height:100%;background:rgba(232,234,233,1)}
body.webkit{position:absolute;top:0;left:0;bottom:0;right:1em;overflow-x:hidden}
.none{display:none}
.container{width:100%;height:100%}
.wrap{width:24em;height:80em;margin:0 auto;overflow:hidden}

#main{position:relative;height:27.6em;width:23.8em;margin:6em auto}
header img{position:absolute;left:0;-webkit-transition:opacity 1s ease-in-out;-moz-transition:opacity 1s ease-in-out;-o-transition:opacity 1s ease-in-out;-ms-transition:opacity 1s ease-in-out;transition:opacity 1s ease-in-out}
header img.bottom{-webkit-animation:logoFadeIn ease-in-out infinite 10s alternate;opacity:0}
header img.top{-webkit-animation:logoFade ease-in-out infinite 10s alternate}

.container:hover > .wrap #main form,
.container:hover > footer{opacity:1}

form{margin:4em 0;width:100%;font-size:2em;position:absolute;top:12em;opacity:0;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;transition:all 1s ease-in-out}
form label{display:none}
form input,form textarea{border:.2em solid rgba(0,0,0,1);width:20.4em;margin:0 0 1em 0;padding:.5em;font-size:11px}
form input:hover,form textarea:hover,form input:focus,form textarea:focus{outline:none}

form div.black input:hover,form div.black textarea:hover,form div.black input:focus,form div.black textarea:focus{border:.2em solid rgba(44,44,44,1)}
form div.blue input:hover,form div.blue textarea:hover,form div.blue input:focus,form div.blue textarea:focus{border:.2em solid rgba(0,90,191,1)}
form div.green input:hover,form div.green textarea:hover,form div.green input:focus,form div.green textarea:focus{border:.2em solid rgba(75,147,0,1)}
form div.purple input:hover,form div.purple textarea:hover,form div.purple input:focus,form div.purple textarea:focus{border:.2em solid rgba(170,0,121,1)}
form div.white input:hover,form div.white textarea:hover,form div.white input:focus,form div.white textarea:focus{border:.2em solid rgba(211,211,211,1)}

form textarea{margin-bottom:0;resize:vertical;height:3em;max-height:18em}
button{white-space:nowrap;padding:.5em;float:right}

footer{position:fixed;bottom:0em;padding:2em 0;background:rgba(225,227,226,1);width:100%;text-align:center;-webkit-box-shadow:0 0 .5em rgba(18,18,18,.5);-moz-box-shadow:0 0 .5em rgba(18,18,18,.5);box-shadow:0 0 .5em rgba(18,18,18,.5);opacity:0;-webkit-transition:all 1s ease-in-out;z-index:10}
footer p.creator{font-size:2em;padding-bottom:.2em}
footer p.creators{padding-bottom:1em;position:relative;height:5em}
footer p.creators img{width:3em;height:3em;outline:.1em solid rgba(202,204,203,1);border:.1em solid transparent;margin:1em}
footer p.creators img:hover{width:5em;height:5em;margin:0;-webkit-animation: pulse 1.5s infinite ease-in-out}
footer p.sosumi{font-size:1em;color:rgba(76,78,77,1)}
footer p.sosumi a{text-decoration:none;color:rgba(76,78,77,1)}
footer p.sosumi a:hover{text-decoration:underline}
label.error{color:red;font-size:.7em}
input.error{border-color:red;margin-bottom:0}
#response{color:rgba(75,147,0,1);font-size:.7em}

/* beauty webkit scrollbar */
::-webkit-scrollbar{width:.6em;height:.6em}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment{display: block;height:1em}
::-webkit-scrollbar-button:vertical:increment{background-color:rgba(232,234,233,1)}
::-webkit-scrollbar-track-piece{background-color:rgba(238,238,238,1);-webkit-border-radius:.3em}
::-webkit-scrollbar-thumb:vertical{height:5em;background-color:rgba(204,204,204,1);-webkit-border-radius:.3em}
::-webkit-scrollbar-thumb:horizontal{width:5em;background-color:rgba(204,204,204,1);-webkit-border-radius:.3em}

/* css3 webkit animations */
@-webkit-keyframes pulse{
    0%{-webkit-box-shadow: 0 0 1em rgba(18,18,18,0);}
   50%{-webkit-box-shadow: 0 0 1em rgba(18,18,18,.5);}
  100%{-webkit-box-shadow: 0 0 1em rgba(18,18,18,0);}
}

@-webkit-keyframes logoFadeIn{
    0%{opacity:0}
	100%{opacity:1}
}

@-webkit-keyframes logoFade{
    0%{opacity:1}
	100%{opacity:0}
}