/* RESET
--------------------------------------------------------------------------------------*/
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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
body {
	line-height: 1.1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
.clearfix:after {   
    content: ".";   
    display: block;   
    clear: both;   
    visibility: hidden;   
    line-height: 0;   
    height: 0;   
}   
  
.clearfix {   
    display: inline-block;   
}   
  
html[xmlns] .clearfix {   
    display: block;   
}   
  
* html .clearfix {   
    height: 1%;   
}

/* REDEFINITIONS
--------------------------------------------------------------------------------------*/
body,
table,
input,
textarea {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: .9em;
	color: #c9c9c9;
}
body {
    background: #1c1c1c;
}
a {
	color: #78b6d6;
}
a:hover {
	color: #b1ddf4;
	text-decoration: none;
}
h1 {
    font-size: 2.2em;
    color: #7fc1e3;
    margin: 0 0 15px 0;
}
h2 {
    font-size: 1.8em;
    color: #fff;
    margin: 0 0 15px 0;
}
h3 {
    font-size: 1.4em;
    color: #fff;
    margin: 0 0 15px 0;
}
h4 {
    font-size: 1.3em;
    color: #7fc1e3;
    margin: 0 0 15px 0;
}
p {
    margin: 0 0 15px 0;
}

/* RICHTEXT
--------------------------------------------------------------------------------------*/
.richtext ul {
    margin: 0 0 10px 30px;
}
.richtext ul li {
    list-style-type: square;
    margin: 0 0 5px 0;
}


/* LAYOUT
--------------------------------------------------------------------------------------*/
#headerContainer .inner,
#contentContainer .inner,
#footerContainer .inner {
	width: 950px;
	margin: auto;
}

#headerContainer {
	background: url('/Images/Layout/body_bg.jpg') repeat-x ;
    }
    #headerContainer .helper {
	    height: 130px;
	    background: url('/Images/Layout/header_bg.jpg') no-repeat center top;
    }
    #headerContainer .logo {
	    width: 280px;
	    float: left;
    }
    #headerContainer .navigation {
	    width: 670px;
	    float: right;
        }
        #headerContainer .navigation ul {
            margin: 0 0 0 50px;
        }
        #headerContainer .navigation ul li {
	        display: inline-block;
	        float: left;
	        margin: 0 0 0 10px;
	        padding: 60px 0 0 0;
        }
        #headerContainer .navigation ul li.active {
	        background: url('/Images/Layout/navigation_bg.png') no-repeat right top;
        }
        #headerContainer .navigation ul li a {
	        display: block;
	        color: #8cd8ff;
	        font-size: 1.4em;
	        text-decoration: none;
            }
            #headerContainer .navigation ul li a .number {
	            display: inline-block;
	            background: #2b2b2b;
	            padding: 5px 2px 2px 5px;
            }
            #headerContainer .navigation ul li a .text {
	            display: inline-block;
	            color: #fff;
	            padding: 5px 2px 2px 5px;
            }
        #headerContainer .navigation ul li a:hover {
	        background: #2b2b2b;
            }

#contentContainer {
	background: #313131 url('/Images/Layout/body_bg.jpg') repeat-x 0 -130px;
    }
    #contentContainer .helper {
	    min-height: 300px;
	    background: url('/Images/Layout/content_bg.jpg') no-repeat center top;
    }
    #contentContainer .content {
	    padding: 20px 10px;
    }

#footerContainer {
	background: url('/Images/Layout/footer_bg.gif') repeat-x;
	color: #575757;
    }
    #footerContainer .inner {
	    padding: 20px 10px;
	    text-align: right;
    }
    #footerContainer .inner a {
	    color: #747474;
    }

/* PAGES
--------------------------------------------------------------------------------------*/

/* PAGE / HOME
-----------------------------------------*/

.page.home {
    }
    .page.home .left {
        width: 590px;
        float: left;
        }
        .page.home .left .column {
            width: 175px;
            margin: 0 15px 10px 0;
            float: left;
        }
        .page.home .left .double {
            width: 390px;
            margin: 0 0 10px 0;
            float: left;
            text-align: center;
        }
        .page.home .left .quote {
            width: 580px;
            height: 85px;
            padding: 25px 0 0 0;
            margin: 0 0 10px 0;
            color: #7fc1e3;
            font-size: 1.3em;
            text-align: center;
            background: url('/Images/Layout/home_quote_bg.png') no-repeat;
        }
    .page.home .right {
        width: 330px;
        float: right;
        }
        .page.home .right .blogCanvas {
            margin: 0 0 10px 0;
            }
            .page.home .right .blogCanvas .top {
                background: url('/Images/Layout/home_blog_bg_top.png') no-repeat;
                height: 15px;
            }
            .page.home .right .blogCanvas .center {
                background: url('/Images/Layout/home_blog_bg.png') repeat-y;
                padding: 0 15px;
            }
            .page.home .right .blogCanvas .bottom {
                background: url('/Images/Layout/home_blog_bg_bottom.png') no-repeat;
                height: 15px;
            }
        .page.home .right .blogCanvas .blogMeta {
            margin: 0 0 20px 0;
            }
            .page.home .right .blogCanvas .blogDate {
                display: inline-block;
                background: #1c1c1c;
                font-size: 1.4em;
                color: #7fc1e3;
                padding: 5px 3px 3px 5px;
                float: left;
                margin: 0 10px 0 0;
                }
            .page.home .right .blogCanvas .blogAuthor {
                display: inline-block;
                padding: 7px 5px 5px 20px;
                float: left;
                background: url('/Images/Icons/16x16_pencil.png') no-repeat 0 5px;
                }
        .page.home .right .blogCanvas .blogTags {
            background: #1c1c1c;
            padding: 6px 8px 10px 8px;
            margin: 0 0 1px 0;
            }
            .page.home .right .blogCanvas .blogTags ul li {
                padding: 2px 2px 2px 20px;
                }
            .page.home .right .blogCanvas .blogTags ul li.tags {
                background: url('/Images/Icons/16x16_tag_blue.png') no-repeat 0 5px;
                }
            .page.home .right .blogCanvas .blogTags ul li.categories {
                background: url('/Images/Icons/16x16_sitemap.png') no-repeat 0 5px;
                }
        .page.home .right .blogCanvas .blogShare {
            background: #1c1c1c;
            padding: 10px;
            }
            .page.home .right .blogCanvas .blogShare a {
                display: block;
                width: 16px;
                height: 16px;
                float: left;
                margin: 0 5px 0 0;
            }
        .page.home .right .blogCanvas .blogButtonContainer {
            padding: 10px 0 0 0;
            text-align: right;
            }
            .page.home .right .blogCanvas .blogButtonContainer a {
                display: inline-block;
                width: 115px;
                height: 23px;
                text-align: center;
                padding: 9px 0 0 21px;
                background: url('/Images/Layout/home_blog_button_more.png') no-repeat;
                color: #fff;
                text-decoration: none;
            }

/* PAGE / WORK
-----------------------------------------*/

.page.work {
    }
    .page.work .clients {
        margin: 0 0 5px 0;
    }
    .page.work .clients .client {
        width: 228px;
        height: 107px;
        float: left;
        position: relative;
        cursor: pointer;
        margin: 0 4px 5px 0;
        }
        .page.work .clients .client .clientFront {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            right: 0;
            }
            .page.work .clients .client .clientFront.flipped {
                background: url('/Images/Layout/work_item_bg.png') no-repeat;
            }
            .page.work .clients .client .clientFront.flipped p {
                margin: 0 0 5px 0;
            }
            .page.work .clients .client .clientFront.flipped .title {
                color: #fff;
                font-size: 1.1em;
                margin: 15px 15px 5px 15px;
            }
            .page.work .clients .client .clientFront.flipped .description {
                margin: 0 15px 5px 15px;
            }
            .page.work .clients .client .clientFront.flipped .link {
                margin: 0 15px;
            }
        .page.work .clients .client .clientData {
            display: none;
            }

/* PAGE / BLOG
-----------------------------------------*/

.page.blog {
    }
    .page.blog .left {
        width: 660px;
        float: left;
        }
        .page.blog .left .blogMeta {
            margin: 0 0 20px 0;
            }
            .page.blog .left .blogDate {
                display: inline-block;
                background: #1c1c1c;
                font-size: 1.4em;
                color: #7fc1e3;
                padding: 5px 3px 3px 5px;
                float: left;
                margin: 0 10px 0 0;
                }
            .page.blog .left .blogAuthor {
                display: inline-block;
                padding: 7px 5px 5px 20px;
                float: left;
                background: url('/Images/Icons/16x16_pencil.png') no-repeat 0 5px;
                }
        .page.blog .left .blogTags {
            background: #1c1c1c;
            padding: 6px 8px 10px 8px;
            margin: 0 0 1px 0;
            }
            .page.blog .left .blogTags ul li {
                padding: 2px 2px 2px 20px;
                }
            .page.blog .left .blogTags ul li.tags {
                background: url('/Images/Icons/16x16_tag_blue.png') no-repeat 0 5px;
                }
            .page.blog .left .blogTags ul li.categories {
                background: url('/Images/Icons/16x16_sitemap.png') no-repeat 0 5px;
                }
        .page.blog .left .blogShare {
            background: #1c1c1c;
            padding: 10px;
            margin: 0 0 15px 0;
            }
            .page.blog .left .blogShare a {
                display: block;
                width: 16px;
                height: 16px;
                float: left;
                margin: 0 5px 0 0;
            }
        .page.blog .left .commentInputLink {
            display: inline-block;
            padding: 0 0 0 20px;
            background: url('/Images/Icons/16x16_pencil.png') no-repeat;
            margin: 10px 0 0 0;
            float: right;
            }
        .page.blog .left .blogComments {
            margin: 0 0 20px 0;
            }
            .page.blog .left .blogComments .comment {
                background: #1c1c1c;
                padding: 10px 10px 0 10px;
                margin: 0 0 10px 0;
            }
            .page.blog .left .blogComments .comment img.avatar {
                float: left;
                margin: 0 5px 0 0;
            }
            .page.blog .left .blogComments .comment .header {
                margin: 0 0 10px 0;
                }
                .page.blog .left .blogComments .comment .header .userContainer {
                    width: 500px;
                    float: left;
                    height: 32px;
                }
                .page.blog .left .blogComments .comment .header .userContainer .user {
                    display: block;
                    margin: 0 0 3px 0;
                }
                .page.blog .left .blogComments .comment .header .userContainer .date {
                    display: block;
                    font-size: .8em;
                }
                .page.blog .left .blogComments .comment .header .quote {
                    float: right;
                    display: inline-block;
                    width: 75px;
                    height: 20px;
                    padding: 4px 0 0 0;
                    color: #fff;
                    text-decoration: none;
                    text-align: center;
                    background: url('/Images/Layout/blog_search_button.png') no-repeat;
                }
        .page.blog .left .blogCommentInput {
            margin: 0 0 20px 0;
            }
            .page.blog .left .blogCommentInput label {
                color: #7fc1e3;
                display: block;
                font-size: 1.2em;
                margin: 0 5px 3px 0;
                width: 200px;
                float: left;
                text-align: right;
                padding: 6px 5px 4px 5px;
                background: #1c1c1c;
            }
            .page.blog .left .blogCommentInput textarea {
                background: url('/Images/Layout/contact_textarea.png') no-repeat;
                width: 439px;
                height: 174px;
                padding: 3px;
                border: 0;
                margin: 0 0 10px 0;
                float: left;
            }
            .page.blog .left .blogCommentInput .input {
                background: url('/Images/Layout/contact_input.png') no-repeat;
                width: 439px;
                height: 21px;
                padding: 3px;
                border: 0;
                margin: 0 0 10px 0;
            }
            .page.blog .left .blogCommentInput .submit {
                background: url('/Images/Layout/contact_submit.png') no-repeat;
                width: 150px;
                height: 24px;
                padding: 0;
                border: 0;
                color: #fff;
                margin: 10px 0 0 215px;
            }
    .page.blog .right {
        width: 250px;
        float: right;
        }
        .page.blog .right .rssContainer {
            text-align: right;
            margin: 0 0 10px 0;
            }
            .page.blog .right .rssContainer a {
                display: inline-block;
                color: #ff7d01;
                padding: 0 0 0 20px;
                background: url('/Images/Icons/16x16_rss.png') no-repeat;
            }
        .page.blog .right .menuContainer {
            margin: 0 0 10px 0;
            }
            .page.blog .right .menuContainer h2 {
                font-size: 1.5em;
                margin: 0 0 5px 0;
            }
            .page.blog .right .menuContainer .top {
                background: url('/Images/Layout/blog_side_bg_top.png') no-repeat;
                height: 15px;
            }
            .page.blog .right .menuContainer .center {
                background: url('/Images/Layout/blog_side_bg.png') repeat-y;
                padding: 0 15px;
            }
            .page.blog .right .menuContainer .bottom {
                background: url('/Images/Layout/blog_side_bg_bottom.png') no-repeat;
                height: 15px;
            }
            .page.blog .right .menuContainer .searchContainer {
                margin: 0 0 20px 0;
                }
                .page.blog .right .menuContainer .searchContainer .input {
                    background: url('/Images/Layout/blog_search_input.gif') no-repeat;
                    width: 214px;
                    height: 21px;
                    padding: 3px;
                    border: 0;
                    margin: 0 0 4px 0;
                }
                .page.blog .right .menuContainer .searchContainer .checkbox {
                    float: left;
                    margin: 3px 0 0 0;
                }
                .page.blog .right .menuContainer .searchContainer .label {
                    float: left;
                    margin: 5px 0 0 0;
                }
                .page.blog .right .menuContainer .searchContainer .submit {
                    float: right;
                    display: inline-block;
                    width: 75px;
                    height: 20px;
                    padding: 4px 0 0 0;
                    color: #fff;
                    text-decoration: none;
                    text-align: center;
                    background: url('/Images/Layout/blog_search_button.png') no-repeat;
                }
            .page.blog .right .menuContainer .calendarContainer {
                margin: 0 0 20px 0;
                }
            .page.blog .right .menuContainer .archiveContainer {
                margin: 0 0 20px 0;
                }
                .page.blog .right .menuContainer .archiveContainer ul {
                    float: left;
                    margin: 5px 0 0 0;
                }
                .page.blog .right .menuContainer .archiveContainer ul li {
                    display: inline-block;
                    float: left;
                    height: 24px;
                    margin: 0 5px 2px 0;
                }
                .page.blog .right .menuContainer .archiveContainer ul li.title {
                    font-size: 1.4em;
                    color: #fff;
                }
                .page.blog .right .menuContainer .archiveContainer ul li a {
                    display: block;
                    background: #1c1c1c;
                    padding: 4px 5px;
                    text-decoration: none;
                }
                .page.blog .right .menuContainer .archiveContainer ul li a:hover {
                    background: #000;
                    text-decoration: underline;
                }
            .page.blog .right .menuContainer .tagsContainer {
                margin: 0 0 20px 0;
                }
                .page.blog .right .menuContainer .tagsContainer ul {
                }
                .page.blog .right .menuContainer .tagsContainer ul li {
                    float: left;
                    }
                    .page.blog .right .menuContainer .tagsContainer ul li.smallest { font-size: .7em; }
                    .page.blog .right .menuContainer .tagsContainer ul li.small { font-size: .9em; }
                    .page.blog .right .menuContainer .tagsContainer ul li.medium { font-size: 1.1em; }
                    .page.blog .right .menuContainer .tagsContainer ul li.big { font-size: 1.4em; }
                    .page.blog .right .menuContainer .tagsContainer ul li.biggest { font-size: 1.7em; }
                .page.blog .right .menuContainer .tagsContainer ul li a {
                    display: inline-block;
                    height: 25px;
                    line-height: 25px;
                    background: #1c1c1c;
                    padding: 2px 5px;
                    text-decoration: none;
                    margin: 0 3px 3px 0;
                }
                .page.blog .right .menuContainer .tagsContainer ul li a:hover {
                    background: #000;
                    text-decoration: underline;
                }
            .page.blog .right .menuContainer .categoriesContainer {
                margin: 0 0 20px 0;
                }
                .page.blog .right .menuContainer .categoriesContainer ul {
                }
                .page.blog .right .menuContainer .categoriesContainer ul li {
                }
                .page.blog .right .menuContainer .categoriesContainer ul li a {
                    display: block;
                    background: #1c1c1c;
                    text-decoration: none;
                    padding: 4px 5px;
                    margin: 0 0 1px 0;
                }
                .page.blog .right .menuContainer .categoriesContainer ul li a:hover {
                    background: #000;
                    text-decoration: underline;
                }
            .page.blog .right .menuContainer .blogrollContainer {
                }
                .page.blog .right .menuContainer .blogrollContainer ul {
                }
                .page.blog .right .menuContainer .blogrollContainer ul li {
                    width: 220px;
                    height: 24px;
                    margin: 0 0 1px 0;
                }
                .page.blog .right .menuContainer .blogrollContainer ul li a {
                    display: inline-block;
                    line-height: 24px;
                    white-space: nowrap;
                    background: #1c1c1c;
                }
                .page.blog .right .menuContainer .blogrollContainer ul li a:hover {
                    background: #000;
                    text-decoration: underline;
                }
                .page.blog .right .menuContainer .blogrollContainer ul li a.link {
                    width: 181px;
                    height: 24px;
                    overflow: hidden;
                    text-decoration: none;
                    padding: 0 5px;
                    margin: 0 5px 0 0;
                }
                .page.blog .right .menuContainer .blogrollContainer ul li a.rss {
                    width: 24px;
                    height: 24px;
                    background-image: url('/Images/Icons/16x16_rss.png');
                    background-position: 4px 4px;
                    background-repeat: no-repeat;
                }

/* PAGE / CONTACT
-----------------------------------------*/
.page.contact {
    }
    .page.contact .left {
        width: 590px;
        float: left;
        }
        .page.contact .left label {
            color: #7fc1e3;
            display: block;
            font-size: 1.2em;
            margin: 0 5px 3px 0;
            width: 120px;
            float: left;
            text-align: right;
            padding: 6px 5px 4px 5px;
            background: #1c1c1c;
        }
        .page.contact .left #submitted {
            color: #c9c9c9;
            display: block;
            font-size: 1.2em;
            margin: 10px 5px 3px 0;
            /*width: 120px;*/
            float: left;
            text-align: left;
            padding: 6px 5px 4px 5px;
            background: #1c1c1c;
        }
        
        .loader {
        	height:32px;
        	width:32px; 
        	background: transparent url(/Images/Layout/ajax-loader.gif) no-repeat center center;
        	margin:0;
        	vertical-align:middle;
        }
        
        .page.contact .left textarea {
            background: url('/Images/Layout/contact_textarea.png') no-repeat;
            width: 439px;
            height: 174px;
            padding: 3px;
            border: 0;
            margin: 0 0 10px 0;
            float: left;
        }
        .page.contact .left .input {
            background: url('/Images/Layout/contact_input.png') no-repeat;
            width: 439px;
            height: 21px;
            padding: 3px;
            border: 0;
            margin: 0 0 10px 0;
        }
        .page.contact .left .submit {
            background: url('/Images/Layout/contact_submit.png') no-repeat;
            width: 150px;
            height: 24px;
            padding: 0;
            border: 0;
            color: #fff;
            margin: 10px 0 0 135px;
        }
    .page.contact .right {
        width: 330px;
        float: right;
        }
        .page.contact .right h2 {
            font-size: 1.5em;
            margin: 0 0 5px 0;
        }
        .page.contact .right .sideCanvas {
            margin: 0 0 15px 0;
            }
            .page.contact .right .sideCanvas .top {
                background: url('/Images/Layout/home_blog_bg_top.png') no-repeat;
                height: 15px;
            }
            .page.contact .right .sideCanvas .center {
                background: url('/Images/Layout/home_blog_bg.png') repeat-y;
                padding: 0 15px;
            }
            .page.contact .right .sideCanvas .bottom {
                background: url('/Images/Layout/home_blog_bg_bottom.png') no-repeat;
                height: 15px;
            }
            .page.contact .right .sideCanvas ul {
                margin: 0 0 10px 0;
            }
            .page.contact .right .sideCanvas ul li a {
                display: block;
                background: #1c1c1c;
                text-decoration: none;
                padding: 4px 5px;
                margin: 0 0 1px 0;
            }
            .page.contact .right .sideCanvas ul li a:hover {
                background: #000;
                text-decoration: underline;
            }