/*
 * Stylesheet for the Voidwalkers website.
 * Author: Mattijs Hoitink <mattijs@voidwalkers.nl>
 * Website: http://voidwalkers.nl
 *
 * Main colors:
 *  - #00234A (Dark blue)
 *  - #007497 (Blue)
 *  - #7dbdcf (Light blue)
 */

/* General */
body {
    font-size: .75em;
    line-height: 1.5em;
    font-family: 'arial', 'Trebuchet MS', 'Verdana', sans-serif;
    background-color: white;
    background-image: url('../images/background.png');
    background-repeat: no-repeat;
    background-position: top center;
}

a, a:link, a:active {
    color: #007497;
}
a:hover {
    text-decoration: none;    
    color: #007497;
}

a.hint {
    color: #000000;
    text-decoration: none;
    border-bottom: 1px dotted #AAAAAA;
    cursor: help;
}

p {
    line-height: 1.5em;
    margin-bottom: 1em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Trebuchet MS', 'Arial', 'Verdana', sans-serif;
    font-weight: bold;
}
h1 { font-size: 1.4em; color: #00234A; }
h2 { font-size: 1.3em; color: #007497; }
h3 { font-size: 1.1em; color: #007497; }
h4 { font-size: 1.0em; color: #007497; }
h5 { font-size: 1.0em; color: #7dbdcf; }
h6 { font-size: 1.0em; color: #7dbdcf; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: none;
}

.clear, .clr {
    clear: both;
}
/* Navigation */

#navigation {
    margin: 2.6em 0 3em 0;
    background-image: url('../images/navigation.png');
    background-repeat: no-repeat;
}

#navigation ul {
    height: 43px;
    margin: 0 0 0 141px;
    padding: 0;
    list-style: none;
    background-image: url('../images/navigation-border.png');
    background-repeat: no-repeat;
    background-position: left;
}

#navigation ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

#navigation ul li a {
    height: 1.5em;
    padding: 1.1em 1em 1em 1em;
    margin: 0;
    display: block;
    background-image: url('../images/navigation-border.png');
    background-repeat: no-repeat;
    background-position: right;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}

#navigation #nav-home {
    width: 56px;
    background-image: url('../images/home-button.png');
    background-repeat: no-repeat;
    background-position: 1.5em 1em;
}

/* Content */
#content {}

img.left{
    float: left;
    margin: 1em;
}
img.right{
    float: right;
    margin: 1em;
}
img.logo{
    width: 80px;
}
.blue {
    color: #4899B4;
}

/* Footer */
#footer {
    margin-top: 4em;
}

#footer h3 {
    font-size: 1.2em;
    color: #007497;
    margin: 0 0 .5em 0;
}

#footer a {
    color:#7dbdcf;
    text-decoration: none;
}
#footer a:hover {
    color:#007497;
}

#footer ul {
    margin: 0;
    padding: 0 0 0 5px;
    list-style: none;
}

#copyright {
    text-align: center;
    color: #CACACA;
    margin-bottom: 2em;
}

/* Homepage */

#intro, #logo {
    height: 190px;
    margin-bottom: 3em;
}
#intro { font-size: 1.1em; }
#intro p { 
    margin: 2em 1em 0 1em;
    height: 4.5em;
}
#intro .intro-top {
    font-weight: bold;
    color: #163A5A;
}
#intro .intro-bottom { color: #4899B4; }

#logo { text-align: center; }

#showcase ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#showcase h2 {
    height: 1em;
    padding: .8em 0 0 0;
    color: white;
    font-size: 1.2em;
    margin: 0 0 0 1.2em;
}
#showcase h3 {
    margin: 0;
    font-size: 1.1em;
    color: #2087A6;
}
#showcase h3 a { text-decoration: none; }
#showcase p { margin: 0; }

#showcase .casing {}
#showcase .casing-head { 
    height: 3em;
}
#showcase .casing-body {
    background-image: url('../images/casing-body.png');
    background-repeat: repeat-y;
    height: 335px;
}
#showcase .casing-body h3 { margin: 0 0 .3em 0; }
#showcase .casing-body p { line-height: 1.2em; }
#showcase .casing-bottom {
    height: 10px;
    display: block;
    background-image: url('../images/casing-bottom.png');
    background-repeat: no-repeat;
}

/* #showcase-blog */
#showcase #showcase-blog ul { margin: 0 20px; }
#showcase #showcase-blog .casing-head {
    background-image: url('../images/casing-head-left.png');
    background-repeat: no-repeat;
}
#showcase #showcase-blog .post {
    height: 90px;
    padding: 10px 0;
    border-bottom: 1px solid #E5F1F4;
}
#showcase #showcase-blog .post .meta {
    font-size: .8em;
    color: #8ec6d3;
}
#showcase #showcase-blog .post h3 {}
#showcase #showcase-blog .post .content {}
#showcase #showcase-blog .post .read { text-align: right; line-height:1.2em; }
#showcase #showcase-blog .post .read a {
    text-decoration: none;
}
/* #service */
#showcase #services ul { 
    margin: 0 3px; 
}
#showcase #services .service {
    height: 90px;
    padding: 10px 15px;
}
#showcase #services .first { 
    height: 74px;
    padding-top: 26px; 
}
#showcase #services .alt {
    background-color: #E5F1F4;
}
#showcase #services img {
    float: right;
    width: 55px;
    margin: 0 0 20px 10px;
}

#showcase #services .casing-head {
    background-image: url('../images/casing-head-middle.png');
    background-repeat: no-repeat;
}


/* #portfolio */
#showcase #portfolio ul { 
    margin: 0 3px; 
}
#showcase #portfolio .casing-head {
    background-image: url('../images/casing-head-right.png');
    background-repeat: no-repeat;
}

#showcase #portfolio .intro {
    display: block;
    height: 74px;
    padding: 26px 15px 10px 15px; 
}

#showcase #portfolio .screenshot {
    padding: 20px;
    background-color: #E5F1F4;
    text-align: center;
}
#showcase #portfolio .more {
    padding: 5px 20px 0 0;
    text-align: right;
}
#showcase #portfolio .more a {
    text-decoration: none;
}

/* Page */
#page {
    margin-top: 1em;
    line-height: 1.4em;
}
#page .content { margin: 0 1em; }

#page h1 {
    margin-bottom: 1.5em;
    color: #00234A;
    font-size: 1.75em;
}
#page h2 {
    color: #007497;
    margin-top: 1.2em;
}
#page h3 { margin-top: 1em; }

#page p {}
#page p.intro {
    margin-bottom: 1.75em;
    color: #007497;
    font-weight: bold;
}

.top {
    margin: .5em;
    text-align: right;
}
.top a {
    color: #7dbdcf;
    text-decoration: none;
}

/* Bedrijf */
.voidwalker {
    margin-bottom: 2em;
}
.voidwalker .block {
    width: 200px;
    margin: 0 1.5em 0 1em;
    float: left;
    display: inline-block;
}
.voidwalker .block .block-body {
    padding: 5px 15px;
}
.voidwalker .description {
    line-height: 1.2em;
    padding: 0 2em 0 1.5em;
}
.voidwalker .description p {
    margin-bottom: .5em;
}

/* Blog */
#page .post {
    margin-bottom: 3em;
}
#page .post h2 {
    color: #007497;
    margin: 1.1em 0 .25em 0;
}
#page .post h1 span.meta, #page .post h2 span.meta {
    margin-left: 1em;
    font-size: .8em;
    color: #8ec6d3;
    font-weight: normal;
}

.blog .post p {}
.blog .post p.intro {
    margin-bottom: 1.75em;
    color: #007497;
    font-weight: bold;
}
.blog .post .body { margin: 1em 0; }
#page .post .more {
    margin: 0 2em 0 0;
    text-align: right;
}

.blog-list {
    font-size: .85em;
    line-height: 1.2em;
}

.blog-list .post {
    display: block;
    padding-bottom: 1em;
    margin-bottom: 1em;
    border-bottom: 1px solid #CACACA;
}

.blog-list .feed { margin: 2em 0 0 0; }
.blog-list .feed p { margin-bottom: 0; }
.blog-list .feed img {
    float: left;
    margin: 0 1em;
}

#disqus_thread {
    margin-top: 1.5em;
    border-top: 1px solid #DFDFDF;
}

/* Sidebar */
#sidebar { padding-top: 5em; }
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin-bottom: 1em;
}
#sidebar a {
    color: #00234A;
    font-weight: bold;
    text-decoration: none;
}
.block {
    width: 200px;
    margin-bottom: 2em;
}
.block-top {
    display: block;
    height: 10px;
    padding: 0;
    margin: 0;
    line-height: 1px;
    font-size: 1px;
    background-image: url('../images/block-top.png');
    background-repeat: no-repeat;
}
.block-header {
    display: block;
    background-image: url('../images/block-header.png');
    background-repeat: no-repeat;
    height: 35px;
}
.block-header h3 {
    height: 1.65em;
    padding: .8em 0 0 0;
    color: white;
    font-size: 1.2em;
    margin: 0 0 0 1em;
}

.block-body {
    display: block;
    padding: 20px 20px 10px 20px;
    background-image: url('../images/block-body.png');
    background-repeat: repeat-y;
}
.block-bottom {
    display: block;
    height: 10px;
    background-image: url('../images/block-bottom.png');
    background-repeat: no-repeat;
}

/* Portfolio */

.portfolio-item {
    margin-bottom: 1em;
    border-bottom: 1px solid #DFDFDF;
}

.portfolio-item img { width: 170px; }
.portfolio-item .info {
    float: left;
    width: 200px;
    margin-right: 1.5em;
    margin-bottom: 1em;
}
.portfolio-item .block-body { padding: 5px 15px; }
.portfolio-item .info h4 { margin: 0 0 5px 20px; }
.portfolio-item .info ul { margin-bottom: 5px; color: #DFDFDF; list-style: square; }
.portfolio-item .info ul span { color: #000000; }
.portfolio-item .description {
    float: left;
    width: 350px;
}
#page .portfolio-item .description h2 { margin-top: .5em; }