/* i am, i am, i am
by fable.nu */

body {width:100%;height:100%;background-color:#f3f3f3;font-family:karla, Sans-Serif;}
a {text-transform:none;text-decoration:none;color:#e19d9e;border:none;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-m-transition-duration:500ms;transition-duration:500ms;}
a:hover {color:#999;}

.container {border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;background-color:#fff;width:600px;position:fixed;left:50%;margin-left:-300px;height:500px;margin-top:-250px;top:50%;border:1px solid #eee;overflow:hidden;}

.right-side {background-color:#fff;width:299px;float:right;height:570px;}
.title {color:#999;font-size:18px;margin:25px 0 0 17px}
.about-text {font-weight:lighter;font-size:13px;padding:20px 30px 15px 20px;line-height:180%;height:300px;overflow-x:hidden;overflow-y:scroll; text-align: justify;}
.window {margin-top:100px;}
.item {width:200px;margin-left:44px;background-color:#fff;z-index:99;display:block;margin-top:20px;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;padding:8px;font-size:11px;text-align:center;}
.item b, .navigation b {display:block;padding:1px;}
.navigation b {margin-bottom:10px;}
.navigation b::after {content:"";position:absolute;height:3px;width:20px;background-color:#f09f91/*ACCENT COLOR*/;margin-top:20px;margin-left:-38px;}
.navigation {border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;width:200px;padding:8px;padding-bottom:12px;margin-left:44px;font-size:11px;background-color:#fff;text-align:center;margin-top:20px;}
.navigation a {display:inline-block;width:90px;font-size:10px;letter-spacing:1px;margin-top:5px;text-transform:none;}

/* animation */

.side-image img,.side-image {width:299px;height:470px;float:left;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-m-transition-duration:500ms;transition-duration:500ms;transition-delay:1.2s;-webkit-transition-delay:1.2s;-o-transition-delay:1.2s;-ms-transition-delay:1.2s;-moz-transition-delay:1.2s;}
.menu {width:300px;float:left;height:500px;background-image:url(http://fable.nu/fan/plath/img/sylvia2.png);margin-top:-621px;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-m-transition-duration:500ms;transition-duration:500ms;transition-delay:600ms;-webkit-transition-delay:700ms;-o-transition-delay:700ms;-ms-transition-delay:700ms;-moz-transition-delay:700ms;}
.container:hover .side-image {margin-left:-300px;transition-delay:0ms;-webkit-transition-delay:0ms;-o-webkit-transition-delay:0ms;-ms-webkit-transition-delay:0ms;-moz-webkit-transition-delay:0ms;}
.container:hover .menu {margin-top:0;transition-delay:500ms;-webkit-transition-delay:500ms;-o-webkit-transition-delay:500ms;-ms-webkit-transition-delay:500ms;-moz-webkit-transition-delay:500ms;}
.un, .deux, .trois,.navigation {opacity:0;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-m-transition-duration:500ms;transition-duration:500ms;}
.container:hover .un {opacity:1;transition-delay:1s;}
.container:hover .deux {opacity:1;transition-delay:1.1s;}
.container:hover .trois {opacity:1;transition-delay:1.2s;}
.container:hover .navigation {opacity:1;transition-delay:1.3s;}

.navigation {transition-delay:0s;}
.trois {transition-delay:.1s;}
.deux {transition-delay:.2s;}
.un {transition-delay:.3s;}

u {  font-style:normal;text-decoration:none;padding:0.2px 0px;border-bottom:1px solid #eee;
}


nav {  background-image: linear-gradient(to bottom right, #e2b4b5, #e19d9e); color: #fad7d7;
padding: 10px;font-size:13px;margin-bottom: -19px;  border-bottom: 10px solid #bd8585;text-align: center; 
       }

nav a { margin:0px 20px;font-style:none;color: #fff;text-align: center; font-weight: bold; border-bottom:0px solid #eee;
}

nav a:hover {color: #fad7d7;
}

 * { margin:0;padding:0; }

.credit {position:fixed;text-transform:uppercase;font-size:7px;font-weight:bold;right:5px;bottom:5px;letter-spacing:1px;}

blockquote { background-image: linear-gradient(to bottom right, #efefef, #eee); padding: 10px; font-size: 13px; line-height: 16px; color: #999;}