/* -------------------------------------------------
    Version :   2.0
    Author  :   Tremani
    Email   :   info@tremani.nl
    Website :   http://tremani.nl
    Client  :   Jigsaw (http://www.jigsaw.nl)
---------------------------------------------------- */


/* GLOBALS + reset whitespace ----------------------------------------------------------- */

html { text-align: center; background: #4e84c4 url(../images/body-bg.png) repeat-x 0 0; }
body { font:69%/1.5em "Lucida Grande", Verdana, Arial, Helvetica, serif;  color:#000; margin:0; padding:0; background:transparent; }
div { margin:0; padding:0;}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, li, fieldset, address { margin:18px 0; background-color:transparent; }
img { border: 0; }


/* BASIC DOCUMENT ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-family:helvetica, arial, verdana, sans-serif; }
h1 {font-size:155%; line-height:1.3em; background:none;}
h2 {font-size:135%; line-height:1.3em; color:#4e84c4;}
h2.nobotmarg {margin-bottom: 0em;}
h3 {font-size:112%; line-height:1.3em; color:#4e84c4; margin-bottom:0em;}
h3.margbot { margin-bottom:18px;}
h3.bulletdown {font-size:112%; line-height:1.3em; background:url(../images/bullet-h3.png) no-repeat 0 9px; padding-top:8px; padding-left:15px; margin-bottom:18px; }
h4 {font-size:100%; margin-bottom:0em;  }
h5 {font-size:100%;}
h6 {font-size:90%;}

a { color:#000;}
a:hover {color:#b54926;}
a:active {color:#000;}

ul { list-style:none; padding-left:0;}
li { margin:0.5em 0 0.5em 0; background:url(../images/bullet-blue_on_white.png) no-repeat 0 6px; padding-left:12px;}

/* SITE SPECIFIC ----------------------------------------------------------- */

#outer-wrapper {margin:0 auto 0 auto; width:912px; text-align:left; background:url(../images/ui-repeat.png) repeat-y 0 210px;  }
#outer-wrapper * {margin-top:0;}
#inner-wrapper {/*border:1px solid green;*/ position:relative; padding:0 0 12px 0;  margin:0 0 -2px 0 ; width:912px; background:transparent url(../images/ui-top.png) no-repeat 0 0;}
#outer-content { /*border:1px solid red;*/ position:relative; width:888px; float:left; margin:210px 12px 0 12px; padding:0px 0; min-height:324px;  background:transparent url(../images/subnav-bg.png) repeat-y 0 0; }
* html #outer-content { height:328px; margin:210px -888px 0 12px; display:inline;  }

#inner-content { /* border: 1px solid blue; */ position: relative; padding: 18px 0 22px 0; float: right; margin-right: 32px; width: 626px; display: inline; }
#resume #inner-content { position: relative; padding: 18px 16px 22px 0; float: right; margin-right: 16px; width: 400px; display: inline; border-right: 1px dotted #d9e0f0; /*border: 1px solid blue; */ }

#sidebar {position:relative; padding:18px 0 22px 0; float:right; margin-right:32px; width:200px; display:inline; /*border:1px solid blue;*/ }

.clearfix:after {content:"."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* Bovenbalk ----------------------------------------------------------- */
#header {position:absolute; top:0; left:-54px; height:178px; width:964px; background:#fff url(../images/jigsaw-header-repeat.png) repeat-x 0 0;    /*border:1px solid green;*/}
#header-logo {position:absolute; top:0px; left:0px; height:178px; width:256px; overflow:hidden; background:transparent url(../images/jigsaw-header-logo.png) no-repeat 0 0;    /*border:1px solid green;*/}
#header a.gohome {position:absolute; display:block; text-indent:-5000px; padding:0; margin:0; top:0px; left:0px; height:178px; width:256px; overflow: hidden;}
#header-image {position:absolute; top:13px; right:0px; height:150px; width:671px; overflow:hidden; background:#fff url(../images/jigsaw-header-image.jpg) no-repeat 0 0;}
#header-image h2 {position:absolute; top:23px; right: 0px; height:150px; width:671px; color: #fff;}

/* Main Nav ----------------------------------------------------------- */
#nav { position:absolute; left:237px; top:125px; width:560px; height:38px; background:transparent url(../images/main-nav-bg-alg.jpg) no-repeat 0 0;}

    ul#main-nav { position: relative; font-size:15px; margin:0; padding:0; list-style:none; width:600px; }
    ul#main-nav li { width:158px; height:38px; padding:0; margin:0 0 0 -24px; background-position:0 0; background-repeat:no-repeat; float:left; position:relative; }
    ul#main-nav li a {
        width:158px;
        height:38px;
        display:block;
        overflow:hidden;
        text-align:center;
        vertical-align:middle;
        font-family:helvetica, arial, verdana, sans-serif;
        font-size:12px;
        color:#000;
        text-decoration:none;
        font-weight:bold;
        position:absolute;
        padding:0;
        margin:0;
        top:0;
        left:0;
        background-color:transparent;
        background-repeat:no-repeat;
        background-position:0 0; }
    ul#main-nav li a:hover { background-position:0 -38px; color:#fff;}
    ul#main-nav li a:active { background-position:0 -76px;}

    ul#main-nav li a span,
    ul#main-nav li a:visited span { background:transparent url(../images/bullet-main-nav.png) no-repeat 100% -9px; padding:3px 17px 3px 9px; margin:0 0 0 0; vertical-align:middle; line-height:48px;}
    ul#main-nav li a:hover span {background:transparent url(../images/bullet-main-nav.png) no-repeat 100% -47px;}
    ul#main-nav li a:active span {background:transparent url(../images/bullet-main-nav.png) no-repeat 100% -85px;}

    #btn-1 { z-index:40; }
    #btn-2 { z-index:30; }
    #btn-3 { z-index:20; }
    #btn-4 { z-index:10; }

    body#home         #btn-1,
    body#expertise    #btn-2,
    body#resume       #btn-3,
    body#contact      #btn-4 { z-index:100; }

    body#home         #btn-1 a,
    body#expertise    #btn-2 a,
    body#resume       #btn-3 a,
    body#contact      #btn-4 a { background-position:0 -114px; color:#000;}

    body#home         #btn-1 a span,
    body#expertise    #btn-2 a span,
    body#resume       #btn-3 a span,
    body#contact      #btn-4 a span { background-position:100% -123px; }

    ul#main-nav li#btn-1 { margin-left:3px;}

     #btn-1 a:active, #btn-1 a:focus { background-image:url(../images/btn1-alg-8bits.png); }

         #btn-1,      #btn-1 a,      #btn-1 a:visited { background-image: url(../images/btn1-alg-8bits.png);  }
    ul > #btn-1, ul > #btn-1 a, ul > #btn-1 a:visited { background-image: url(../images/btn1-alg-16bits.png); }


         #btn-2,      #btn-2 a,      #btn-2 a:visited { background-image: url(../images/btn-alg-8bits.png);  }
    ul > #btn-2, ul > #btn-2 a, ul > #btn-2 a:visited { background-image: url(../images/btn-alg-16bits.png); }

         #btn-3,      #btn-3 a,      #btn-3 a:visited { background-image: url(../images/btn-alg-8bits.png);  }
    ul > #btn-3, ul > #btn-3 a, ul > #btn-3 a:visited { background-image: url(../images/btn-alg-16bits.png); }

         #btn-4,      #btn-4 a,      #btn-4 a:visited { background-image: url(../images/btn-alg-8bits.png);  }
    ul > #btn-4, ul > #btn-4 a, ul > #btn-4 a:visited { background-image: url(../images/btn-alg-16bits.png); }

/* Subnav ----------------------------------------------------------- */
#sub { position:relative; width:191px; background-color:#d9e0f0; float:left; display:inline; /*border:1px solid green;*/ padding-bottom:7px;}
    .kop {width:174px; height:24px; background-color:#4e84c4; background-position:0 0; background-repeat:no-repeat; color:#fff; text-align:right; margin:-1px 0 0 0; padding:22px 17px 0 0; border:none; }
    * html .kop { position:relative; top:-1px; }
    .kop.blank {background:#d9e0f0 url(../images/subnav-kop-blank.png); color:#4e84c4; }
    .kop.blankblue {background:url(../images/subnav-kop-blankblue.png);}

    ul#sub-nav {margin:0; padding:0; list-style:none; }
    ul#sub-nav li { width:auto; height:auto; margin:0; padding:0; background-image:none;  }
    ul#sub-nav li a,
    ul#sub-nav li a:visited {width:169px; display:block; text-decoration:none; text-align:right; padding:5px 17px 5px 5px; color:#4e84c4; font-weight:bold; line-height:1.3em; background: #d9e0f0 url(../images/dotted-divider-line.png) repeat-x 0 100%; font-size:11px; }
    ul#sub-nav li a:hover {color:#fff; background-color:#b54926;}
    ul#sub-nav li a:active,
    ul#sub-nav li a:focus {color:#fff; background-color:#000;}
    ul#sub-nav li.current a {color:#000;}
    ul#sub-nav li.current a:hover {color:#fff;}
    .foot {position:absolute; left:0; bottom:0; width:191px; height:7px; background:#4e84c4 url(../images/subnav-foot.png) no-repeat 0 0;  }
    * html .foot {height:7px; line-height:7px; font-size:1px; }


/* Footer ----------------------------------------------------------- */
#footer {position:relative; margin:0 auto 0 auto; width:912px; height:10px; background:#fff url(../images/ui-bottom.png) no-repeat 0 0;}
    * html #footer {font-size:8px;line-height:10px;}
#footer-xtras { position:absolute; left:0; top:10px; padding:2px 30px; width:912px; height:25px; line-height:19px; }
#footer-xtras .icon a,
#footer-xtras .icon a:visited {background-position:0 0; height:19px; display:block; overflow:hidden; text-indent:-9999px; background-color:transparent; background-repeat:no-repeat; background-position:0 0; float:left; }
#footer-xtras .icon a:hover {background-position:0 -19px; }
#footer-xtras .icon a:active,
#footer-xtras .icon a:focus {background-position:0 -38px; }

.icon #w3c-xhtml, #w3c-xhtml { background-image: url(../images/W3C-icon-xhtml.png); width:95px; }
.icon #w3c-css,   #w3c-css   { background-image: url(../images/W3C-icon-css.png);   width:42px; }

/* Standard extras ----------------------------------------------------------- */
.seo {position:absolute; left:-5000px; top:-5000px}
.usability {text-indent:-5000px; }


/* Resume ----------------------------------------------------------- */

.job {border-bottom: 7px solid #d9e0f0; border-left: 1px dotted #d9e0f0; padding:0 0 0 15px; margin:0 0 18px 0; }

.job_details ul {margin:0; padding:0; list-style:none; position:relative;}
.job_details li {margin:0 0 3px 0; padding:0 0 4px 0; background-image:none; border-bottom: 1px dotted #d9e0f0; /*padding-left:0;*/}
.job_details li.title {font-weight:bold;}

.recent_urls {margin:0 0 0 10px;}
.recent_urls span { color:#8ab7e2; float:right; width:150px; display:block; }

.recentlist {margin:0 0 18px 0; padding:0; /*border-bottom: 1px dotted #d9e0f0;*/   }
.recentlist li {border-bottom: 1px dotted #d9e0f0; padding:0 0 4px 0; color:#8ab7e2; background-image:none; position:relative;  }
.recentlist > li {overflow:auto;}
.recentlist li:hover {  background:#f9f9f9; }
.recentlist li span { color:#000; }
.recentlist li > span { float:right; width:145px;  margin-top:-18px; padding:0; position:relative; /*border:1px solid #000;*/}

.downloadlist {margin:0 0 18px 0;   padding:0; border-bottom: 1px dotted #d9e0f0; /*border-bottom: 1px dotted #d9e0f0;*/}
.downloadlist li { padding:0 0 4px 0; color:#8ab7e2; background-image:none; position:relative; height:18px; }
.downloadlist li a {padding:0 0 0 18px; width:100%; /*color:#8ab7e2;*/  background:#fff url(../images/bullet-download.png) no-repeat 0 0;  position:absolute; display:block; height:18px;}
.downloadlist li a:hover {background-position:0 -18px;}
.downloadlist li a:active {background-position:0 -36px;}

/* index ----------------------------------------------------------- */

h1.home {width:583px; height:58px;/*background:transparent url(../images/h1-homepage.png) no-repeat 0 0;*/}
#keep-jigsawpieces-in-place {position:absolute; top: 8px; left: 0;}
#jigsaw {width:100%; height:359px; background:transparent url(../images/index-jigsaw.jpg) no-repeat 0 0; margin-left:-12px; position:relative;}

ul#sub-nav li a span { display:block; position:absolute; background-color:transparent; background:none;}

ul#sub-nav li a span#jigsaw1 {width:202px; height:99px; top:96px; left:340px;}
ul#sub-nav li a span#jigsaw2 {width:210px; height:120px; top:110px; left:536px;}
ul#sub-nav li a span#jigsaw3 {width:268px; height:185px; top:204px; left:473px;}
ul#sub-nav li a span#jigsaw4 {width:260px; height:166px; top:182px; left:230px;}
ul#sub-nav li a span#jigsaw5 {width:238px; height:146px; top:140px; left:394px; z-index:10; }

ul#sub-nav li a:hover span#jigsaw1 {background:url(../images/index-jigsaw1.jpg) no-repeat 0 0;}
ul#sub-nav li a:hover span#jigsaw2 {background:url(../images/index-jigsaw2.jpg) no-repeat 0 0;}
ul#sub-nav li a:hover span#jigsaw3 {background:url(../images/index-jigsaw3.jpg) no-repeat 0 0;}
ul#sub-nav li a:hover span#jigsaw4 {background:url(../images/index-jigsaw4.jpg) no-repeat 0 0;}
ul#sub-nav li a:hover span#jigsaw5 {background:url(../images/index-jigsaw5.jpg) no-repeat 0 0;}

#nr1 {position:absolute; bottom:0; right:20px; }

/* stuff for the quote boxes ... */

.quote { width:209px; height:96px; background: transparent url(../images/quote.png) no-repeat 0 0; z-index: 100; padding: 60px 45px 45px 60px; }
.quote h3 { color:#000; line-height: 18px; }

#outer-content > .quote { background: transparent url(../images/quote-16bits.png) no-repeat 0 0; }
#inner-content > .quote { background: transparent url(../images/quote-16bits.png) no-repeat 0 0; }

#inner-content .quote.float-l { float: left;  display:inline; position:relative; margin-top:-24px; margin-right:-30px; }
#inner-content .quote.float-r { float: right; display:inline; position:relative; margin-top:-24px; margin-right:-30px; }