@charset "utf-8";
@import url('font.css');
@import url('css3.css');

/* Other */

.csswinner{
    position:fixed;
    bottom: 0; left:0;
    z-index: 999;
}

    .csswinner a{
        position:absolute;
        bottom: 50px; left: 0;
        z-index: 999;
        width: 81px;
        height: 59px;
        text-indent: -9000px;
        display: block;
        background: url('../nominee-black-left.png') no-repeat;
    }

.cssdesign{
    position:fixed;
    bottom: 100px; left: 0;
    z-index: 999;
}

    .cssdesign a{
        position:absolute;
        bottom: 50px; left: 0;
        width: 68px;
        height: 96px;
        text-indent: -9000px;
        display: block;
        background: url('../css-design.png') no-repeat;
    }

/* Main */

body {
    font-family: arial;
    background: #232b29;
}

h1 {
    font-family: 'Demibold';
    font-size: 30px;
    color: #71f3a2;
}

h3 {
    font-family: 'Medium';
    font-size: 18px;
    color: white;
}

img {
    border: none;
}

#dawidjestem {
    margin: 0;
}

#hello{min-height: 1200px; display: block; padding-top: 50px;}

header{
    margin: 50px 0 50px 50px;
    width: 180px;
    position: fixed;
    top: 0; left: 0;
}

    header a.logo{margin: 0 0 55px 0; display: block;}
    header nav ul li a{
        list-style-type: none;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 11px;
        color: #848685;
        text-decoration: none;
        display: block;
        line-height: 20px;
    }

    header nav ul li a:hover,
    header nav ul li.current a{ color: #71f3a2;}


section{
    width: 930px;
    margin: 0 0 0 280px;
    padding: 0 0 300px 0;
    clear: both;
    color: #848685;
}

    #folio a,
    #skillzy a,
    #contact a{
        color: #747474; 
        text-decoration: none;
    }

    section a:hover{color: #848685; text-decoration: underline;}
    
    section p.clear{text-align: center; margin: 20px 0 10px 0;}
    section p{
        text-align: left;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 28px;
    }

    section h1{
        text-align: center;
        margin: 0 0 50px 0;
    }

    section h1 span.left{
        margin: 0 20px 0 0; 
        width: 70px; 
        height: 20px; 
        display: inline-block; 
        background: url("../_img/line.gif") no-repeat 0 45%;
    }

    section h1 span.right{
        margin: 0 0 0 20px; 
        width: 70px; 
        height: 20px; 
        display: inline-block; 
        background: url("../_img/line.gif") no-repeat 0 45%;
    }

    #hello h1.hi:hover strong{color: white;}
    #hello .social{
        margin: 0 auto;
        width: 930px;
        text-align: center;
        clear: both;
    }

        #hello p, #contact p{font-size: 18px; line-height: 30px; color: #fff;}

        #hello .social a{
            display: inline-block;
            width: 48px; 
            height: 49px; 
            margin: 20px 20px 50px 0; 
            text-indent: -9999px; 
            cursor: pointer;
        }

        #hello .social a.be{background-image: url('../_img/social.png'); background-position: 0 48px;}
        #hello .social a.be:hover{background-image: url('../_img/social.png'); background-position: 0 0;}

        #hello .social a.gp{background-image: url('../_img/social.png'); background-position: 48px 48px;}
        #hello .social a.gp:hover{background-image: url('../_img/social.png'); background-position: 48px 0;}

        #hello .social a.fr{background-image: url('../_img/social.png'); background-position: 96px 48px;}
        #hello .social a.fr:hover{background-image: url('../_img/social.png'); background-position: 96px 0;}

        #hello .social a.dr{background-image: url('../_img/social.png'); background-position: 142px 48px;}
        #hello .social a.dr:hover{background-image: url('../_img/social.png'); background-position: 142px 0;}

        #hello .social a.tw{background-image: url('../_img/social.png'); background-position: 190px 48px;}
        #hello .social a.tw:hover{background-image: url('../_img/social.png'); background-position: 190px 0;}

        #hello .social a.fb{background-image: url('../_img/social.png'); background-position: 238px 48px;}
        #hello .social a.fb:hover{background-image: url('../_img/social.png'); background-position: 238px 0;}

        #hello .steps{
            width: 930px; 
            min-height: 120px;
            text-align: center; 
            margin: 0 auto; 
            background: url("../_img/progress.gif") no-repeat 50% 40px;
        }
        
        #hello .step{
            width: 220px;
            display: inline-block;
            text-align: center;
            margin: 0 auto;
        }

        #hello .step:hover{cursor: pointer;}
        #hello .step img{margin: 0 0 30px 0;}


#folio article{
    width: 950px;
    min-height: 200px;
    margin: 0 0 50px 0;
    float: right;
}

    #folio article .txt{
        width: 240px;
        min-height: 100px;
        margin: 100px 0 0 20px;
        display: block;
        float: left;
    }

        #folio article .txt h2{
            font-size: 22px;
            font-family: 'Demibold';
            color: #fff;
            margin: 0 0 20px 0;
            padding: 0 0 20px 0;
            border-bottom: 1px solid #39413f;
        }

        #folio article .txt p{
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 22px;
        }

        #folio article .details{
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 25px;
            color: #848685;
            padding: 40px 0 0 0;
            display: block;
        }

        #folio article .details p{color: #848685;}
        #folio article .details a{color: #848685; text-decoration: none;}
        #folio article .details a:hover{text-decoration: underline;}

    #folio article .thumb{
        float: left;
        width: 650px;
        min-height: 100px;
    }

    #dawidjestem .show-more{
        width: 620px;
        height: 60px;
        display: block;
        margin: -50px 0 200px 0;
        color: #fff;
        font-size: 18px;
        left: 50%; margin-left: -340px;
        padding: 30px 30px;
        border: 1px solid #39413f;
        clear: both;
        position: relative;
    }

    #dawidjestem .show-more div.more{
        width: 100px;
        height: 42px;
        display: block;
        padding: 12px 0 0 15px;
        font-size: 14px;
        font-family: 'Demibold';
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
        color: #fff;
        position: absolute;
        bottom: -18px;
        left: 50%; margin-left: -58px;
        background: url('../_img/more.png') no-repeat;
        opacity: 1.0;
        cursor: pointer;
    }

        #dawidjestem .show-more div.more:hover{opacity: 0.8;}
   
    #skillzy h1{clear: both; display: block; margin-bottom: 40px;}

    #skillzy ol li{
        line-height: 19px;
        font-size: 14px;
        color: #fff;
        padding: 0 0 12px 23px;
        background: url('../_img/star.png') no-repeat 0 3px;
    }

        #skillzy ol li.smore{color: #848685; background: transparent;}
        li.smore{background: transparent;}

    #skillzy ol li a{color: #fff;}
    #skillzy ol li a:hover{color: #fff; text-decoration: underline;}

    #skillzy ul li{
        line-height: 24px;
        font-size: 14px;
        margin-bottom: 30px;
        padding: 0 0 0 68px;
    }

        #skillzy ul li.webdesign{background: url('../_img/wdes.png') no-repeat top left;}
        #skillzy ul li.development{background: url('../_img/wdev.png') no-repeat top left;}
        #skillzy ul li.wordpress{background: url('../_img/wp.png') no-repeat top left;}

            #skillzy ul li strong{
                font-family: 'Medium';
                font-size: 18px;
                color: white;
                margin: 0 0 15px 0;
                display: block;
            }

            #skillzy ul li em{
                font-style: normal;
                font-weight: bolder;
            }

            #skillzy ul li img{float: left; margin: 0 20px 0 0;}

    #skillzy div.left,
    #skillzy div.right{width: 46%;}

    #skillzy div.left{float: left; display: inline-block; }
    #skillzy div.right{float: right; display: inline-block; }

    #skillzy, 
    #contact{padding: 50px 0 0 0; position: relative;}

    span.show, span.less{cursor: pointer;}
    span.show:hover, span.less:hover{text-decoration: underline;}
    
    #contact div.left{display: block; float: left; width: 600px; margin: 30px 30px 0 0;}
    #contact div.right{
        display: block; 
        float: right; 
        text-align: left; 
        line-height: 24px; 
        font-size: 14px;
        width: 300px; 
        margin-top: 30px;
    }

        #contact div.right .links{color: #fff;}
        #contact div.right .links a{color: #fff; padding-left: 26px; background: url('../_img/mail.png') no-repeat left;}
        #contact div.right .links a:hover{color: #fff; text-decoration: underline;}

    #contact form{width: 600px;}

    #contact input[type="text"]{
        width: 258px;
        height: 36px;
        border: 1px solid #39413f;
        background: #232b29;
        display: block;
        float: left;
        font-size: 12px;
        font-family: arial;
        color: #fff;
        padding: 0 15px 0 15px;
        margin: 0 10px 10px 0;
    } 

    #contact a.submit{
        width: 120px;
        height: 24px;
        padding: 12px 0 0 15px;
        background: #5be18d;
        display: block;
        float: left;
        font-size: 14px;
        font-family: 'Demibold';
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
        color: #fff;
        opacity: 1.0;
        position: relative;
        clear: both;
    }

    #contact a.submit:after {
        content: "";
        position: absolute;
        right: -18px;
        top: 0;
        border-top: 18px solid transparent;
        border-bottom: 18px solid transparent;
        border-left: 18px solid #5be18d;
    } 

    #contact a.submit:hover{
        opacity: 0.8;
    }

    #contact input.no{margin: 0 0 10px 0;}

    #contact textarea{
        width: 559px;
        min-height: 140px;
        font-size: 12px;
        font-family: arial;
        color: #fff;
        border: 1px solid #39413f;
        background: #232b29;
        padding: 10px 15px 15px 15px;
        margin: 0 0 10px 0;
    }

    #contact input[type="text"]:focus,
    #contact textarea:focus{
        border-color: #71f3a2;
    }

    #contact input[type="text"].error,
    #contact textarea.error{
        border-color: #e01212;
    }

    #contact h3{margin-bottom: 20px;}

    #contact .warning{float: left; margin: 12px 0 0 35px;}
    #contact .warning div{margin: 0 3px 8px 0;}
    #contact .errors{display: none; font-size: 12px; color: #71f3a2;}
    #contact #success { display: none; float: left; margin: 12px 0 0 -35px; text-align: center; font-weight: bold; font-size: 12px; color: #71f3a2;}

    #contact{position: relative;}

    #footer{
        position: absolute;
        font-size: 13px;
        width: 100%;
        display: block;
        bottom: 50px; 
    }

    #footer footer{
        display: block-inline;
        float: left;
    }

    #footer ul{
        display: block-inline;
        float: right;
    }

    #footer ul li{
        float: right;
        padding: 0 0 0 20px;
    }

        #footer ul li a:hover{
            color: #fff;
        }