/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}
/* 
    USEFULL
*/
.clear {
    line-height: 0px; 
    font-size: 0px;
    height: 0px; 
    clear: both; 
}
.alignleft {
    float: left;
    margin: 0px 10px 0px 0px;
}
.inline {
    float: none;
    display: inline;
}

/* 
    BASIC
*/
body {
    background-color: #171714;
    font-family: arial;
    font-size: 12px;
    color: #d0d0d0;
}
.wrapper {
    width: 810px;
    margin: 0px auto;
}

.window_third {
    float: left;
    width: 230px;
    padding: 0px 20px;
    background: url(img/gfx_border.png) repeat-y top right;
}
.window_third.last {
    background: none;
}
.window_twothirds {
    float: left;
    width: 500px;
    padding: 0px 20px;
    background: url(img/gfx_border.png) repeat-y top right;
}
.grey_bar {
    background: url(img/gfx_grey_bar.png) repeat-y top right;
    width: 810px;
    display: block;
    height: 51px;
    padding: 5px 12px 19px;
}

/*
    TEXT
*/

h1 {
    text-shadow: 1px 1px 1px #FFF;
    color: #0e3839;
    font-family: verdana;
    font-size: 16px;
    font-weight: bold;
}
#price h2 {
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #171714;
    margin-bottom: 5px;
}
#total_price {
    text-shadow: 1px 1px 1px #FFF;
    color: #0e3839;
    font-family: verdana;
    font-size: 24px;
    font-weight: bold;
}
#total_price a {
    text-shadow: 1px 1px 1px #FFF;
    color: #0e3839;
    font-family: verdana;
    font-size: 24px;
    text-decoration: none;
    font-weight: bold;
}
#total_price a:hover {
    color: #FFF;
}
#total_price_exkl {
    color: #0e3839;
    font-family: verdana;
    font-size: 10px;
    text-decoration: none;
    font-weight: normal;
}
#total_price_info {
    color: #205f61;
    font-family: arial;
    font-size: 11px;
    text-decoration: none;
    font-weight: normal;
}

.window_third {
    font-family: arial;
    font-size: 12px;
    line-height: 22px;
}
#price .button .info {
    font-size: 12px;
    line-height: 15px;
}

/*
    HEADER
*/

#header {
    background: url(img/header_bg.jpg) repeat-x top center;
    height: 58px;
    padding: 15px 0px;
}
    ul#header_nav {
        float: right;
        display: block;
        width: 200px;
        height: 20px;
        margin-top: 25px;
        color: #d0d0d0;
    }
    #header_nav li {
        height: 20px;
        margin-left: 20px;
        float: right;
    }
#slice {
    background: url(img/slice_bg.jpg) no-repeat top center;
    margin-top: 10px;
}
    #slice .wrapper {
        width: 810px;
        background: url(img/site_seperator.png) no-repeat bottom center;
        padding: 4px 4px 40px 4px;
    }
        #price {
            height: 300px;
            position: relative;
            color: #171714;
        }
            #price .top {
                height: 40px;
            }
            #price h1 {
                padding: 14px;
            }
            ul#price_steps {
                margin: 4px 8px;
                float: right;
                width: 315px;
                height: 32px;
                background: url(img/price_steps/1.png) no-repeat top left;

                color: #43929a;

                display: none;
            }
                ul#price_steps li.current {
                    color: #0e3839;
                    font-weight: bold;
                }
                #price_steps li {
                    float: left;
                    display: block;
                    width: 83px;
                    padding: 11px;
                }
        #price_wrapper {
            width: 810px;
            position: relative;
            overflow: hidden;
            height: 300px;
        }
            #price_wrapper .items {
                width: 999999em;
                position: absolute;
            }
            #price_1, #price_2, #price_3 {
                float: left;
                position: relative;
                width: 810px;
                height: 300px;
            }
                #price_arrows {
                    width: 291px;
                    height: 162px;
                    display: block;
                    position: absolute;
                    background: url(img/price_arrows.png) no-repeat top left;
                    top: 45px;
                    left: 33px;
                }
                #price_wrapper .button {
                    width: 53px;
                    height: 53px;
                    display: block;
                    position: absolute;
                    background: url(img/gfx_buttons.png) -7px -67px;
                    cursor: pointer;
                    cursor: hand;
                }
                #price_wrapper .button .info {
                    position: absolute;
                    top: 0px;
                    left: 60px;
                    width: 200px;
                }
                    #price_wrapper .button.hover {
                        background: url(img/gfx_buttons.png) -67px -67px;
                    }
                    #html {
                        top: 20px;
                        left: 14px;
                    }
                        #html.is_active {
                            background: url(img/gfx_buttons.png) -67px -7px;
                        }
                    #wordpress {
                        top: 20px;
                        left: 289px;
                    }
                        #wordpress.is_active {
                            background: url(img/gfx_buttons.png) -7px -7px;
                        }
                #nr_of_pages {
                    position: absolute;
                    top: 115px;
                    left: 55px;
                    z-index: 2;
                }
                #pages {
                    position: absolute;
                    height: 48px;
                    width: 550px;
                    top: 135px;
                    left: 18px;
                }
                    .price_bar_left {
                        float: left;
                        height: 48px;
                        width: 7px;
                        background: url(img/gfx_buttons.png) -128px -10px;
                    }
                    .price_bar_content {
                        float: left;
                        height: 40px;
                        width: 530px;
                        padding-top: 8px;
                        background: url(img/gfx_buttons.png) 0px -130px;
                    }
                        #pages_slider {
                            width: 480px;
                            float: left;
                            margin-top: 9px;
                        }
                    .price_bar_right {
                        float: left;
                        height: 48px;
                        width: 10px;
                        background: url(img/gfx_buttons.png) -166px -10px;
                    }
                #total_price {
                   position: absolute;
                   width: 140px;
                   top: 210px;
                   text-align: center;
                   left: 45px;
                }
                #total_price_exkl {
                   position: absolute;
                   width: 140px;
                   top: 236px;
                   text-align: center;
                   left: 45px;
                }
                #total_price_info {
                   position: absolute;
                   width: 300px;
                   top: 218px;
                   text-align: left;
                   left: 175px;
                }
                #button_forward_1 {
                    display: none;

                    width: 152px;
                    height: 48px;
                    background: url(img/gfx_buttons.png) -10px -190px;
                    position: absolute;
                    top: 200px;
                    left: 190px;
                    cursor: pointer;
                    cursor: hand;
                }
            #price_2 {
            }
                #attachment {
                    position: absolute;
                    height: 48px;
                    top: 35px;
                    left: 18px;
                }
                #attachment_content {
                    width: 250px;
                }
        #extra_info {
            padding-top: 20px;
        }
            #extra_info .window_third {
                height: 215px;
            }
            #extra_info .window_third ul {
                list-style: disc outside;
                padding-left: 15px;
                margin-top: 10px;
            }
            #extra_info .window_third ul li {
                margin: 5px 0px;
                line-height: 18px;
            }
            #design_button {
                width: 53px;
                height: 53px;
                display: block;
                cursor: pointer;
                cursor: hand;
                text-indent: -9999px;
                background: url(img/gfx_buttons.png) -126px -67px;
                float: left;
            }
#portfolio {
    width: 834px;
    margin: 0 auto;
    position: relative;
    top: 10px;
}
    #portfolio_bar {
        position: relative;
    }
        #portfolio_bar .portfolio_header {
            background: url(img/gfx_portfolio.png) -9px -7px;
            width: 173px;
            height: 34px;
            text-indent: -9999px;
            display: block;
            margin: 8px 0px 0px 8px;
            float: left;
        }
        #portfolio_bar .portfolio_equal {
            background: url(img/gfx_portfolio.png) -187px -7px;
            width: 20px;
            height: 34px;
            text-indent: -9999px;
            display: block;
            margin: 8px 0px 0px 8px;
            float: left;
        }
        #skills_tooltip {
            display: none;
            background: transparent url(img/gfx_tooltip.png);
            font-size:12px;
            height:74px;
            width:161px;
            padding:10px;
            color:#fff;
            text-align: center;
            line-height: 16px;
            z-index: 4;
        }
        ul#skills {
            display: block;
            margin: 6px 0px 0px 6px;
            float: left;
            line-height: 40px;
            width: 500px;
            position: relative;
            z-index: 3;
        }
            #skills li {
                display: block;
                float: left;
                text-indent: -9999px;
                margin-left: 4px;
                cursor: pointer;
                cursor: hand;
            }
                #skills li.ps {
                    background: url(img/gfx_portfolio.png) no-repeat -9px -42px;
                    width: 42px;
                }
                #skills li.ai {
                    background: url(img/gfx_portfolio.png) no-repeat -55px -42px;
                    width: 40px;
                }
                #skills li.fla {
                    background: url(img/gfx_portfolio.png) no-repeat -99px -42px;
                    width: 40px;
                }
                #skills li.w3c {
                    background: url(img/gfx_portfolio.png) no-repeat -144px -42px;
                    width: 63px;
                }
                #skills li.php {
                    background: url(img/gfx_portfolio.png) no-repeat -212px -42px;
                    width: 67px;
                }
                #skills li.js {
                    background: url(img/gfx_portfolio.png) no-repeat -284px -42px;
                    width: 48px;
                }
                #skills li.wp {
                    background: url(img/gfx_portfolio.png) no-repeat -400px -42px;
                    width: 44px;
                }
        #portfolio_bar .portfolio_arrow {
            background: url(img/gfx_portfolio.png) -214px -7px;
            width: 18px;
            height: 34px;
            text-indent: -9999px;
            display: block;
            margin: 8px 0px 0px 8px;
            float: left;
        }
        #portfolio_bar .filter {
            background: url(img/gfx_filter.png);
            width: 291px;
            height: 251px;
            display: block;
            position: absolute;
            right: -15px;
            top: 1px;
        }
        #portfolio_bar .filter_label {
            background: url(img/gfx_filter_label.png);
            width: 111px;
            height: 56px;
            display: block;
            position: absolute;
            right: -123px;
            top: -38px;
        }
    #portfolio .wrapper {
        width: 810px;
        background: url(img/site_seperator.png) no-repeat bottom center;
        padding: 4px 4px 40px 4px;
        min-height: 150px;
    }
        ul#gallery {
            text-align: center;
            position: relative;
            z-index: 3;
        }
            ul#gallery li {
                display: inline;
                padding: 0px 5px;
            }
#contact {
    width: 834px;
    margin: 0 auto;
    position: relative;
    top: 20px;
}
    #contact .wrapper {
        width: 810px;
        background: url(img/site_seperator.png) no-repeat bottom center;
        padding: 4px 4px 40px 4px;
    }
    #contact_bar {
        position: relative;
    }
        #contact_bar .contact_header {
            background: url(img/gfx_portfolio.png) -237px -7px;
            width: 260px;
            height: 34px;
            text-indent: -9999px;
            display: block;
            margin: 8px 0px 0px 8px;
            float: left;
        }
        #contact_bar ul {
            position: absolute;
            top: 15px;
        }
            #contact_bar ul#direct {
                right: 303px;
            }
                #contact_bar ul#direct img {
                    float: left;
                    margin-right: 5px;
                }
            #contact_bar ul#other {
                right: 32px;
            }
        #contact_bar ul li {
            display: block;
            float: left;
            color: #898d84;
            text-shadow: 1px 1px 1px #000;
            font-family: verdana;
            font-size: 18px;
            background: url(img/tabs/middle.png);
            line-height: 41px;
            height: 41px;
            padding: 0px 8px;
        }
        #contact_bar ul li img {
            line-height: 41px;
            vertical-align: top;
            padding-top: 3px;
        }
        #contact_bar ul li.left {
            padding: 0px;
            width: 4px;
            background: url(img/tabs/left.png);
        }
        #contact_bar ul li.right {
            padding: 0px;
            width: 4px;
            background: url(img/tabs/right.png);
        }
    #contact .notice {
        line-height: 20px;
        font-size: 14px;
        margin-bottom: 20px;
    }
    #contact form {

    }
        #contact form li {
            margin-bottom: 20px;
        }
        #contact form label {
            margin-right: 5px;
            font-weight: bold;
            display: block;
            width: 100px;
            padding-top: 12px;
            float: left;
        }
        #contact form input {
            background-color: #252623;
            border: none;
            padding: 10px;
            color: #a8aaa5;
            font-family: arial;
            font-size: 14px;
            width: 200px;
            margin-right: 10px;
            border-bottom: 1px solid #0d0d0c;
            border-left: 1px solid #141412;

            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
        }
        #contact form textarea {
            background-color: #252623;
            border: none;
            padding: 10px;
            color: #a8aaa5;
            width: 360px;
            font-family: arial;
            font-size: 14px;
            border-bottom: 1px solid #0d0d0c;
            border-left: 1px solid #141412;
            height: 120px;

            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
        }
        #contact form li.textonly {
            line-height: 20px;
            margin-bottom: 5px;
        }
        #contact form .cf_upload {
            border: 1px solid #333;
            margin-top: 5px;
        }
        #contact form .captcha {
            margin-left: 105px;
            margin-top: 10px;
        }
        #contact .cf-sb {
            border-top: 1px solid #333;
            text-align: right;
            padding-top: 5px;
        }
        #contact form input.sendbutton {
            text-indent: -9999px;
            line-height: 0px;
            width: 113px;
            height: 41px;
            display: block;
            float: right;
            background: url(img/btn_skicka.png) no-repeat top left;
            margin: 0;
            border: 0;
            cursor: pointer;
            cursor: hand;
        }
        #contact .cf_info.failure {
            background-color: #575855;
            padding: 10px;
            margin: 0px 0px 15px;
            border-left: 1px solid #111;
            border-bottom: 1px solid #111;

            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
        }
        #contact .cf_info.success {
            background-color: #575855;
            padding: 10px;
            margin: 0px 0px 15px;
            border-left: 1px solid #111;
            border-bottom: 1px solid #111;

            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;

            font-weight: bold; 
        }
        #contact .cf_error {
            background-color: #dd4343;
            color: #000;
        }
        #contact img.captcha-reset {
            vertical-align:text-bottom;
            background:	url(img/captcha_reset_black.gif) no-repeat;
            margin:0 0 2px 3px;
            width:21px;
            height:21px;
            border:none;
        }
    #contact .window_third ul li {
        font-size: 14px;
        color: #898d84;
        font-weight: bold;
        margin-bottom: 15px;
        line-height: 32px;
        vertical-align: middle;
    }
        #contact .window_third ul li.home_info {
            line-height: 20px;
        }
        #contact .window_third ul li.home_info img {
            padding-top: 4px;
        }
.overlay {
    display: none;
    width: 400px;

    z-index:10000;

    padding: 20px;

    background-color: #252623;


    /* CSS3 styling for latest browsers */
    -moz-box-shadow:0 0 200px 5px #000;
    -webkit-box-shadow: 0 0 200px #000;

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
    .overlay h2 {
        font-size: 24px;
    }
    .overlay p {
        line-height: 20px;
        margin: 10px 0px;
    }
    .overlay a {
        color: #61dbde;
        text-decoration: none;
    }
    .overlay .visit_site {
        font-size: 16px;
        font-weight: bold;
        color: #d0d0d0;
        margin: 20px 0px 0px;
    }
    .overlay a.visit_site:hover {
        color: #46c0c0;
    }
    .overlay .tags {
        margin: 5px 0px;
        font-size: 12px;
        border-bottom: 1px solid #333;
        padding-bottom: 10px;
        font-style: italic;
    }
    .overlay .overlay_arrow {
            background: url(img/gfx_window_arrow.png) no-repeat top left;
            width: 26px;
            height: 13px;
            position: absolute;
            bottom: -13px;
            left: 217px;
    }
    .overlay .close {
        background-image:url(img/btn_close.png);
        position:absolute;
        right:15px; 
        top:15px;
        cursor:pointer;
        height:35px;
        width:35px;
    }