/* style reset */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset, img {border:0;}
address, caption, cite, code, dfn, em, strong, th, var {font-style:normal;font-weight:normal;}
ol, ul, li {list-style:none;}
caption, th {text-align:left;}
h1 {font-size:2em;font-weight:normal;}
h2 {font-size:1.8em;font-weight:normal;}
h3 {font-size:1.6em;font-weight:normal;}
h4 {font-size:1.4em;font-weight:normal;}
h5 {font-size:1.2em;font-weight:normal;}
h6 {font-size:1em;font-weight:bold;}
q:before, q:after {content:'';}
strong {font-weight:bold;}
em {font-style:italic;}
a img {border:none;} /* Gets rid of IE's blue borders */
sup {font-size:70%;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
* {box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}

/***************************************************************************************************/
/*
    #010169
    #0048bf
    #eeeeee
    #6f717f
    #111111
*/

body {
    background: #eee;
    color: #111;
    font-family: arial, helvetica, sans-serif;
    font-size: 16px;
}
body,
html {
    height: 100%;
}
a {
    color: #0048bf;
    outline: none;
}
a:hover {
    border-bottom: 1px solid #010169;
    color: #010169;
    padding-bottom: 1px;
    text-decoration: none;
}
.txt-blue { color: #0048bf; }

#container {
    position: relative;
    margin: 0 auto;
    width: 940px;
}

#pgheader { margin-left: 76.6%; }
#mylogo {
    background: #fff;
    width: 120px;
    height: 320px;
    padding: 20px;
    
            box-shadow: 0 1px 2px #6f717f;
       -moz-box-shadow: 0 1px 2px #6f717f;
    -webkit-box-shadow: 0 1px 2px #6f717f;
}
#mylogo .logo {
    margin-top: 190px;
    width: 100%;
    height: auto;
}
#myname {
    padding: 10px 0px;
    text-transform: lowercase;
}
#myname .r,
#myname .s {
    display: block;
}

#pgcontent {
    position: absolute;
    top: 0;
    left: 0;
    width: 74.5%;
}
.context {
    max-width: 700px;
    padding: 135px 25px 20px 20px;
    text-align: right;
}
.greet { font-size: 2.6em; }
.greet .hi {
    display: block;
    font-size: 1.4em;
}
.greet .dev,
.greet .call {
    display: block;
}
.about {
    line-height: 2;
    margin-top: 30px;
}

#pgfooter { margin-left: 76.6%; }
.contacts { overflow: auto; }
.contacts li {
    float: left;
    margin-right: 20px;
}
.contacts a {
    display: inline-block;
    color: inherit;
}
.contacts a:hover {
    border: none;
    padding: 0;
}

.cicon {
    background: url(element/conicons.png) no-repeat;
    display: inline-block;
    width: 24px;
    height: 24px;
}
.cicon.email            { background-position: 0px 0px; }
.cicon.email:hover      { background-position: 0px -26px; }
.cicon.linkedin         { background-position: -26px 0px; }
.cicon.linkedin:hover   { background-position: -26px -26px; }



/*** media query ***/
@media screen and (min-width: 1024px) {
    body {
        min-height: 540px;
        
                box-shadow: 0 1px 5px #666 inset;
           -moz-box-shadow: 0 1px 5px #666 inset;
        -webkit-box-shadow: 0 1px 5px #666 inset;
    }
}

@media screen and (max-width: 960px) {
    #container { width: 100%; }

    #pgheader {
        position: relative;
        height: 170px;
        margin: 0;
        padding: 1px 5% 0;
    }
    #mylogo {
        position: absolute;
        top: 0;
        left: 5%;
        height: 160px;
    }
    #mylogo .logo { margin-top: 40px; }
    #myname { margin: 51px 0 0 140px; }
    
    #pgcontent {
        position: static;
        width: 100%;
    }
    .context {
        max-width: inherit;
        padding: 30px 5% 20px;
        text-align: left;
    }
    
    #pgfooter {
        margin: 0;
        padding: 20px 5%;
    }
    .contacts li {
        float: none;
        margin: 10px 0;
    }

    .cicon.email:after      { content: "roni.sambiangga@gmail.com"; }
    .cicon.linkedin:after   { content: "/in/ronisambiangga"; }
    .cicon.email:after,
    .cicon.linkedin:after {
        position: absolute;
        margin: 2px 0 0 36px;
    }
    .cicon.email:hover:after,
    .cicon.linkedin:hover:after {
        color: #010169;
    }
}

@media screen and (max-width: 500px) {
    body { font-size: 14px; }
    
    #pgheader {
        background: #fff;
        height: 115px;
        
                box-shadow: 0 1px 2px #6f717f;
           -moz-box-shadow: 0 1px 2px #6f717f;
        -webkit-box-shadow: 0 1px 2px #6f717f;
    }
    #mylogo {
        padding: 0;
        width: 72px;
        height: auto;
        
                box-shadow: none;
           -moz-box-shadow: none;
        -webkit-box-shadow: none;
    }
    #mylogo .logo { margin-top: 20px; }
    #myname { margin: 10px 0 0 90px; }
    
    .greet .dev,
    .greet .call {
        display: inline;
    }
    
    #pgfooter { background: #d6d6d6; }
}