* {
    margin: 0px;
    padding: 0px;
    outline: 0px;
    border: 0px;
    font-family: arial, helvetica, sans-serif;
}

::selection,
::-moz-selection,
::-webkit-selection {
	text-shadow: none !important;
	background-color: #DEE7D8 !important;
}
/*
a {
    -webkit-transition-property: background-color, color, text-shadow;
    -webkit-transition-duration: 0.2s, 0.2s, 0.2s;
    -webkit-transition-timing-function: linear, linear, linear;
    -moz-transition-property: background-color, color, text-shadow;
    -moz-transition-duration: 0.2s, 0.2s, 0.2s;
    -moz-transition-timing-function: linear, linear, linear;
    transition-property: background-color, color, text-shadow;
    transition-duration: 0.2s, 0.2s, 0.2s;
    transition-timing-function: linear, linear, linear;
} */

html, body {
    display: block;
    width: 100%;
    height: 100%;
    background: #FAFFFC url(../images/new_bg.png) repeat-x 0px 0px;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

#navbar {
    display: block;
    width: 100%;
    height: 51px;
    margin-bottom: 50px;
    border-top: #B9C3B4 5px solid;
    background: #F9F9F9 url(../images/dot.png) repeat-x left top;
    -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 8px;
    -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 8px;
    box-shadow: rgba(0,0,0,0.2) 0px 1px 8px;
}

#navlinks {
    display: block;
    height: 50px;
    width: 960px;
    margin: 0px auto;
}

    #navlinks .link {
        position: relative;
        float: left;
        display: block;
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        padding: 0px 10px;
        border-left: #b9c3b4 1px solid;
        text-decoration: none;
        font-size: 10px;
        font-weight: bold;
        color: #99a394;
        text-shadow: #FFFFFF 0px 1px 0px;
        border-bottom: #B9C3B4 1px solid;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    #navlinks .follow {
        position: relative;
        float: left;
        display: block;
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        padding: 0px 0px 0px 10px;
        border-left: #b9c3b4 1px solid;
        text-decoration: none;
        font-size: 12px;
        font-weight: bold;
        color: #99a394;
        text-shadow: #FFFFFF 0px 1px 0px;
    }
        #navlinks .link span {
            position: absolute;
            bottom: -8px;
            left: 50%;
            margin-left: -7px;
            display: block;
            width: 15px;
            height: 8px;
            background: transparent url(../images/navbar_arrow.png) no-repeat;
        }
    #navlinks a.link:hover {
        background-color: #b9c3b4;
        color: #FFF;
        text-shadow: #99a394 0px 1px 0px;
        border-bottom: #798374 1px solid;
    }
    #navlinks a#logo {
        float: left;
        display: block;
        width: 200px;
        height: 50px;
        padding: 0px 10px;
        text-shadow: #FFFFFF 0px 1px 0px;
        background: transparent url(../images/logo.png) no-repeat;
    }

    #navlinks a#twittericon {
        float: right;
        display: block;
        width: 26px;
        height: 26px;
        background: transparent url(../images/icons/twitter.png) no-repeat;
        margin: 12px 0px;
    }

    #navlinks a#dribbbleicon {
        float: right;
        display: block;
        width: 26px;
        height: 26px;
        background: transparent url(../images/icons/dribbble.png) no-repeat;
        margin: 12px 10px 12px 0px;
    }

    #navlinks a#groovesharkicon {
        float: right;
        display: block;
        width: 26px;
        height: 26px;
        background: transparent url(../images/icons/grooveshark.png) no-repeat;
        margin: 12px 10px 12px 0px;
    }

    #navlinks a#facebookicon {
        float: right;
        display: block;
        width: 26px;
        height: 26px;
        background: transparent url(../images/icons/facebook.png) no-repeat;
        margin: 12px 10px 12px 0px;
    }
    #navlinks a#gplus {
        float: right;
        display: block;
        width: 26px;
        height: 26px;
        background: transparent url(../images/icons/gplus.png) no-repeat;
        margin: 12px 10px 12px 0px;
    }

.content {
    position: relative;
    display: block;
    width: 938px;
    padding: 10px;
    background: #F6FAF8;
    border: #868A88 1px solid;
    margin: 100px auto !important;
    font-size: 12px;
    color: #899384;
    text-shadow: #fff 0px 1px 0px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    line-height: 20px;
    -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 8px, inset #FFF 0px 2px 0px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0px 1px 5px, inset #FFF 0px 1px 0px;
    box-shadow: rgba(0,0,0,0.2) 0px 1px 8px, inset #FFF 0px 2px 0px;
}
.content #about {
	height: 151px;
    padding: 0px 0px 0px 130px;
    background: transparent url(../images/me.png) no-repeat left top;
}
.content .testimonial {
    position: relative;
    padding: 0px 0px 0px 130px;
}
    .content .testimonial .name {
        position: absolute;
        top: 0px;
        left: 0px;
        display: block;
        width: 87px;
        height: 30px;
        line-height: 15px;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: bold;
        font-size: 10px;
        border-right: #b9c3b4 1px solid;
        -webkit-box-shadow: #FFF 1px 0px 0px;
        -moz-box-shadow: #FFF 1px 0px 0px;
        box-shadow: #FFF 1px 0px 0px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background: #f6f6f6;
        border: 1px solid #d1d4d3;
        border-bottom: 3px solid #d1d4d3;
        padding: 5px 10px;
        -webkit-box-shadow: inset #fff 0px 0px 1px 2px;
        -moz-box-shadow: inset #fff 0px 0px 1px 2px;
        box-shadow: inset #fff 0px 0px 1px 2px;
    }
        .content .testimonial .name span {
            position: absolute;
            top: 50%;
            right: -6px;
            margin-top: -6px;
            display: block;
            width: 6px;
            height: 13px;
            background: transparent url(../images/right_arrow.png) no-repeat;
        }
        .content .testimonial_separator {
            height: 1px;
            background: #b9c3b4;
            margin: 10px 0px;
            border-bottom: #FFF 1px solid;
        }
.content h1 {
    position: absolute;
    top: -51px;
    left: -1px;
    display: block;
    width: 938px;
    height: 30px;
    padding: 10px;
    line-height: 30px;
    background: #B9C3B4;
    color: #798374;
    font-size: 14px;
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
    -webkit-box-shadow: inset #CED7C8 0px 1px 0px;
    -moz-box-shadow: inset #CED7C8 0px 1px 0px;
    box-shadow: inset #CED7C8 0px 1px 0px;
    text-shadow: #CED7C8 0px 1px 0px !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: #798374 1px solid;
}
.content a.more {
	position: absolute !important;
	top: -40px !important;
	right: 7px !important;
	display: block;
	height: 28px !important;
	line-height: 28px !important;
	padding: 0px 10px !important;
	border: 1px solid #899384;
	background-color: #C4D0C0 !important;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: inset #DAE4D5 0px 1px 0px;
	-moz-box-shadow: inset #DAE4D5 0px 1px 0px;
	box-shadow: inset #DAE4D5 0px 1px 0px;
	text-shadow: #DAE4D5 0px 1px 0px !important;
	color: #798374 !important;
	text-transform: uppercase !important;
	font-size: 10px !important;
	letter-spacing: 1px;
	font-weight: bold;
}
    .content a.more:hover {
        background-color: #D4E0D0 !important;
        -webkit-box-shadow: inset #EAF4E5 0px 1px 0px;
        -moz-box-shadow: inset #EAF4E5 0px 1px 0px;
        box-shadow: inset #EAF4E5 0px 1px 0px;
        text-shadow: #EAF4E5 0px 1px 0px !important
    }
.content a {
    background: #d9e3d4;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-shadow: none !important;
    color: #798374;
    text-decoration: none;
    padding: 3px 5px;
    margin: 0px 3px;
}
.content a:hover {
    background: #b9c3b4;
    color: #FFF;
}

.content .left_box {
    position: relative;
    float: left;
    width: 469px;
}

.content .right_box {
    position: relative;
    float: right;
    width: 469px;
}

.right_box .overlay {
    display: block;
    width: 460px;
    height: 200px;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 500;
    -webkit-box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px;
    -moz-box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px;
    box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px;
}

.left_box .overlay {
    display: block;
    width: 460px;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 500;
    -webkit-box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px;
    -moz-box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px;
    box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px;
}

    .content .left_box .work {
        float: left;
        width: 460px;
        height: 200px;
    }
    .content .right_box .work {
        float: right;
        width: 460px;
        height: 200px;
    }
    .content .right_box p, .content .left_box p {
        text-align: justify;
        font-size: 10px;
    }
    .content .right_box .icon_container, .content .left_box .icon_container {
        position: absolute;
        top: 0px;
        right: 0px;
    }
    .content .right_box .frontend, .content .left_box .frontend {
        float: right;
        display: block;
        width: 16px;
        height: 16px;
        margin-left: 10px;
        background: transparent url(../images/frontend.png) no-repeat center center;
    }
    .content .right_box .backend, .content .left_box .backend {
        float: right;
        display: block;
        width: 16px;
        height: 16px;
        margin-left: 10px;
        background: transparent url(../images/backend.png) no-repeat center center;
    }

.content h2 {
    display: block;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    font-weight: normal;
    padding-left: 26px;
    margin-bottom: 10px;
}
    .content h2#frontend {
        background: transparent url(../images/frontend.png) no-repeat left center;
    }
    .content h2#backend {
        background: transparent url(../images/backend.png) no-repeat left center;
    }
    .content h2#client, .content h2.client {
        background: transparent url(../images/client.png) no-repeat left center;
    }
    .content h2#contact {
        background: transparent url(../images/contact.png) no-repeat left center;
    }
    .content h2#mail {
        background: transparent url(../images/mail.png) no-repeat left center;
    }

.client_info {
    height: 16px;
    line-height: 16px;
    padding-left: 26px;
    font-size: 10px !important;
}

.project_description {
    display: block;
    height: 20px;
    background: transparent url(../images/project_info.png) no-repeat center center;
}

.info_content {
    width: 468px !important;
}

#footer {
    display: block;
    width: 960px;
    height: 50px;
    margin: 50px auto;
    text-align: center;
    font-size: 12px;
    color: #798374;
    text-shadow: #FFF 0px 1px 0px;
}
    #footer a {
        background: #d9e3d4;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        text-shadow: none !important;
        color: #798374;
        text-decoration: none;
        padding: 3px 5px;
        margin: 0px 3px;
    }
    #footer a:hover {
        background: #b9c3b4;
        color: #FFF;
    }

.hidden {
    display: none;
}

label {
    display: block;
    width: 150px;
    height: 12px;
    line-height: 12px;
    font-size: 10px !important;
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    text-shadow: #fff 0px 1px 0px;
}

input#subject, input#email, input#name, textarea {
    display: block;
    width: 458px;
    margin-bottom: 10px;
    padding: 10px;
    border: #B9C3B4 1px solid;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: #fff 0px 1px 0px, inset #ccc 0px 1px 3px;
    -moz-box-shadow: #fff 0px 1px 0px, inset #ccc 0px 1px 3px;
    box-shadow: #fff 0px 1px 0px, inset #ccc 0px 1px 3px;
}

input#subject, input#email, input#name {
	width: 214px;
}

textarea {
    height: 200px;
    margin-bottom: 0px;
}

.error, .success {
    display: none;
    position: absolute;
    height: 20px;
    line-height: 20px;
    top: -15px;
    right: -4px;
    background: #B9C3B4;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-shadow: #798374 0px 1px 0px !important;
    color: #FFF;
    text-decoration: none;
    padding: 0px 10px;
    margin: 0px 3px;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    border: 1px solid #798374;
    -webkit-box-shadow: inset #D9E3D4 0px 1px 0px, rgba(0,0,0,0.3) 0px 1px 3px;
    -moz-box-shadow: inset #D9E3D4 0px 1px 0px, rgba(0,0,0,0.3) 0px 1px 3px;
    box-shadow: inset #D9E3D4 0px 1px 0px, rgba(0,0,0,0.3) 0px 1px 3px;
}

    #mail_success, #mail_fail {
        top: 0px !important;
    }

.error span {
    position: absolute;
    bottom: -5px;
    left: 50%;
    display: block;
    width: 10px;
    height: 5px;
    background: transparent url(../images/small_arrow.png) no-repeat;
    margin: 0px 0px 0px -5px;
}

#send_message {
    display: block;
    height: 50px;
    line-height: 50px;
    background: #B9C3B4;
    color: #798374;
    font-size: 14px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: inset #CBD5C6 0px 1px 0px;
    -moz-box-shadow: inset #CBD5C6 0px 1px 0px;
    box-shadow: inset #CBD5C6 0px 1px 0px;
    text-shadow: #CBD5C6 0px 1px 0px !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 5px;
    border: #798374 1px solid;
    cursor: pointer;
    position: absolute;
    bottom: 0px;
    right: -439px;
    width: 439px;
}
#send_message:hover {
    color: #FFF;
    text-shadow: #798374 0px 1px 0px !important;
}
#send_message:active {
    -webkit-box-shadow: inset rgba(0,0,0,0.3) 0px 1px 5px;
    -moz-box-shadow: inset rgba(0,0,0,0.3) 0px 1px 5px;
    box-shadow: inset rgba(0,0,0,0.3) 0px 1px 5px;
}
.form_container {
    position: relative;
}

.form_container.half {
	float: left;
	width: 234px;
	margin-right: 10px;
}

#contact_info {
    position: relative;
    display: block;
    width: 352px;
    z-index:1;
    -webkit-box-shadow: rgba(0,0,0,0.3) 0px 1px 5px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0px 1px 5px;
    box-shadow: rgba(0,0,0,0.3) 0px 1px 5px;
    margin: 17px auto 0px auto;
}

#contact_insides {
	position:relative;
	width: 320px;
	padding:15px;
	line-height: 20px;
	background: transparent url(../images/paper.png) repeat-y 0px 0px;
	border: 1px solid #d1d4d3;
	letter-spacing:1px;
	color: #697364;
	text-shadow: #fff 0px 1px 0px;
    -webkit-box-shadow: inset #FFF 0px 1px 0px;
    -moz-box-shadow: inset #FFF 0px 1px 0px;
    box-shadow: inset #FFF 0px 1px 0px;
}

#contact_info:before {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 1px;
    display:block;
    width:348px;
    border: 1px solid #d1d4d3;
    border-top: none;
    height: 20px;
    background: transparent url(../images/paper.png) repeat-y 0px 0px;
    z-index: 0;
}

.paper {
	float: left;
    position: relative;
    display: block;
    width: 352px;
    z-index:1;
    -webkit-box-shadow: rgba(0,0,0,0.3) 0px 1px 5px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0px 1px 5px;
    box-shadow: rgba(0,0,0,0.3) 0px 1px 5px;
    margin-bottom: 15px;
    margin-right: 10px;
}

.paper.small {
	width: 306px !important;
}

.paper.long {
	width: 468px !important;
}

.paper.full {
	width: 938px !important;
}

.paper.third {
	margin-right: 0px !important;
}

.paper:before {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 1px;
    display:block;
    width:348px;
    border: 1px solid #d1d4d3;
    border-top: none;
    height: 20px;
    background: transparent url(../images/paper.png) repeat-y 0px 0px;
    z-index: 0;
}

.paper.small:before {
	width: 302px !important;
}

.paper.long:before {
	width: 464px;
}

.paper.full:before {
	width: 934px !important;
}

.paper_insides {
	position:relative;
	width: 320px;
	padding:15px;
	line-height: 20px;
	background: transparent url(../images/paper.png) repeat-y 0px 0px;
	border: 1px solid #d1d4d3;
	letter-spacing:1px;
	text-align: justify;
	color: #697364;
	text-shadow: #fff 0px 1px 0px;
    -webkit-box-shadow: inset #FFF 0px 1px 0px;
    -moz-box-shadow: inset #FFF 0px 1px 0px;
    box-shadow: inset #FFF 0px 1px 0px;
}

.paper.small .paper_insides {
	width: 274px !important;
}

.paper.long .paper_insides {
	width: 436px !important;
}

.paper.full .paper_insides {
	width: 906px !important;
}

.paper .kind_work {
	top: 10px !important;
}

.kind_work {
	position: absolute;
	top: 5px;
	right: 10px;
}

.frontend_work {
	float: right;
	margin-left: 10px;
	display: block;
	width: 50px;
	height: 50px;
	background: transparent url(../images/frontend_glyph.png) no-repeat 0px 0px;
}

.backend_work {
	float: right;
	margin-left: 10px;
	display: block;
	width: 50px;
	height: 50px;
	background: transparent url(../images/backend_glyph.png) no-repeat 0px 0px;
}

#about_left {
	float: left;
	margin-right: 10px;
	width: 429px;
	text-align: justify;
	line-height: 20px;
}

#about_left p {
	 margin-bottom: 10px;
}

#about_right {
	float: right;
	width: 369px;
}

a#madsoft {
	background: transparent;
	color: #a89eb0;
	font-weight: bold;
}

a#madsoft:hover {
	background: #a89eb0 !important;
	color: #FEFAFF !important;
}

.badge {
	position: absolute;
	top: -20px;
	right: -20px;
	display: block;
	width: 158px;
	height: 161px;
	background: transparent url(../images/badge.png) no-repeat 0px 0px;
}

.dribbble {
    display:block;
    width:960px;
    margin:0px auto;
}

.dribbble_shot {
    position:relative;
    float:left;
    display:block;
    width:288px;
    height:216px;
    padding:10px;
    border:#868A88 1px solid;
    background:#F6FAF8;
    margin-right:15px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 8px, inset #FFF 0px 2px 0px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0px 1px 5px, inset #FFF 0px 1px 0px;
    box-shadow: rgba(0,0,0,0.2) 0px 1px 8px, inset #FFF 0px 2px 0px;
    text-decoration: none !important;
}

.dribbble_shot h1 {
    position: absolute;
    top: -51px;
    left: -1px;
    display: block;
    width:288px;
    height: 30px;
    padding: 10px;
    line-height: 30px;
    background: #B9C3B4;
    color: #798374;
    font-size: 14px;
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
    -webkit-box-shadow: inset #CED7C8 0px 1px 0px;
    -moz-box-shadow: inset #CED7C8 0px 1px 0px;
    box-shadow: inset #CED7C8 0px 1px 0px;
    text-shadow: #CED7C8 0px 1px 0px !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: #798374 1px solid;
    text-decoration: none !important;
}

.dribbble_shot img {
    width:288px;
}

.dribbble_shot:hover h1,
.dribbble_shot h1:hover {
    background: #EA4C89;
    color: #AA1C59;
    -webkit-box-shadow: inset #FF6CA9 0px 1px 0px;
    -moz-box-shadow: inset #FF6CA9 0px 1px 0px;
    box-shadow: inset #FF6CA9 0px 1px 0px;
    text-shadow: #FF6CA9 0px 1px 0px !important;
    border: #AA1C59 1px solid;
}
.dribbble_shot:hover {
    border:#9A0C49 1px solid;
    background:#FFACE9;
    -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 8px, inset #FFCCFC 0px 2px 0px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0px 1px 5px, inset #FFCCFC 0px 1px 0px;
    box-shadow: rgba(0,0,0,0.2) 0px 1px 8px, inset #FFCCFC 0px 2px 0px;
}

.dribbble_shot.last {
    margin-right:0px !important;
}