@font-face {font-family: "Picowa";src: url('fonts/picowa.TTF');}

/* -- General -- */

body {
    background-color:#99d9ea /*variant: #aed0ff */;
    
    vertical-align:middle;
    text-align:center;
}

a > img {
    border:inherit;
}

abbr[title] {border-bottom:none} /* for Firefox */

#bigblock {
    display:inline-block;
    position:relative;
    margin:20px auto;
    padding:5px 10px 20px 10px;
    
    top:20px;
    
    background-color:white;
    
    text-align:left;
    
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
        -ms-border-radius: 15px;
         -o-border-radius: 15px;
            border-radius: 15px;
    
    -webkit-box-shadow: 4px 4px 15px rgba(50,50,80,0.5);
       -moz-box-shadow: 4px 4px 15px rgba(50,50,80,0.5);
        -ms-box-shadow: 4px 4px 15px rgba(50,50,80,0.5);
         -o-box-shadow: 4px 4px 15px rgba(50,50,80,0.5);
            box-shadow: 4px 4px 15px rgba(50,50,80,0.5);
    
    min-width:320px;
    min-height:80px;
}

/* Title */

h1 {
    position:relative;
    font-weight:400;
    font-family:dotum, sans-serif;
    margin:5px 20px 5px 6px;
    
    cursor:default;
}

/* Menu */
#menu,
#menu ul {
    padding:0px;
    font-family:arial,helvetica;
    position:relative;
    text-align:right;
}

#menu li {
    position:relative;
    list-style-type:none;
    display:inline-block;
    padding:2px;
    margin:0px 8px;
}
#menu a,
#menu a:visited {
    text-decoration:inherit;
    color:inherit;
    
    padding:1px 0px;
    border-bottom:2px solid #fff;
    
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
    
}

#menu a:hover {
    border-bottom-color:#11e;
}
#menu a[rel=external]:hover {
    border-bottom-color:#1A7F14;
}

/* Body */

#main {
    position:relative;
    font-family:georgia, serif;
    max-width:320px;
    text-align:justify;
    margin:20px 35px;
}

/* -- Contacts -- */

/* logos */
.logo abbr {
    text-decoration:inherit;
    
    border-bottom:none;
}

#contact > div {
    height:40px;
    width:40px;
    overflow:visible;
    
    padding:0px;
    
    display:inline-block;
    margin:5px;
}
#contact a,
#contact a:visited {
    color:inherit;
    text-decoration:inherit;
}

#contact > div > p {
    position:relative;
}

#contact .logo {
    color:white;
    font-size:2em;
    
    padding:4px;
    margin:0;
    
    height:100%;
    width:38px;
    
    text-align:center;
    vertical-align:middle;

    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
        -ms-border-radius: 6px;
         -o-border-radius: 6px;
            border-radius: 6px;
    
    z-index:2;
    
    cursor:default;
}
#twitter .logo {
    font-family:"Picowa", verdana;
    background-color:#abcdef;

    -webkit-box-shadow: 5px 5px 10px #bcdeff inset;
       -moz-box-shadow: 5px 5px 10px #bcdeff inset;
        -ms-box-shadow: 5px 5px 10px #bcdeff inset;
         -o-box-shadow: 5px 5px 10px #bcdeff inset;
            box-shadow: 5px 5px 10px #bcdeff inset;
    
}

#contact .logo a {cursor:inherit;}

#twitter .name {
    font-family: georgia, serif;
    background-color:#ffd;
    font-weight:bold;
    
    margin:0px 5px 0px 0px;
    padding:6px 5px 4px 4px;
    
    top:-42px;
    height:24px;
    left:15px;
    width:10px;
    
    text-align:right;
    overflow:hidden;
    
    border-top:2px solid lightgray;
    border-right:2px solid lightgray;
    border-bottom:2px solid lightgray;

    -webkit-border-top-right-radius: 4px;
       -moz-border-top-right-radius: 4px;
        -ms-border-top-right-radius: 4px;
         -o-border-top-right-radius: 4px;
            border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
       -moz-border-bottom-right-radius: 4px;
        -ms-border-bottom-right-radius: 4px;
         -o-border-bottom-right-radius: 4px;
            border-bottom-right-radius: 4px;
    
    -webkit-box-shadow: 0px 0px 2px #aaa inset;
       -moz-box-shadow: 0px 0px 2px #aaa inset;
        -ms-box-shadow: 0px 0px 2px #aaa inset;
         -o-box-shadow: 0px 0px 2px #aaa inset;
            box-shadow: 0px 0px 2px #aaa inset;
        
    z-index:1;
    
    cursor:pointer;
}

#twitter:hover .name {
    width:84px;
    left:28px;
}
#twitter:hover .logo {
    -webkit-transform:rotate(-90deg);
       -moz-transform:rotate(-90deg);
        -ms-transform:rotate(-90deg);
         -o-transform:rotate(-90deg);
            transform:rotate(-90deg);
}

#twitter:hover .logo,
#twitter .name {
    -webkit-transition:all 0.2s ease-in-out;
       -moz-transition:all 0.2s ease-in-out;
        -ms-transition:all 0.2s ease-in-out;
         -o-transition:all 0.2s ease-in-out;
            transition:all 0.2s ease-in-out;
}
#twitter .logo,
#twitter:hover .name {
    -webkit-transition:all 0.2s 0.2s ease-in-out;
       -moz-transition:all 0.2s 0.2s ease-in-out;
        -ms-transition:all 0.2s 0.2s ease-in-out;
         -o-transition:all 0.2s 0.2s ease-in-out;
            transition:all 0.2s 0.2s ease-in-out;
}

/* iPhone & Co */
@media only screen and (max-width:480px) {
    #bigblock {
        margin:3px auto;
        padding:5px 10px 20px 10px;
        
        /*top:20px;*/
        min-width:275px;
    }
    
    h1 {
        margin-bottom:15px;
    }
}