/********************************************
  HTML
********************************************/
* {
    margin:0;
    padding:0;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    line-height: 150%;
    color: #000;
    background-color: #CCC;
}
a,
a:link,
a:visited,
a:active {
    cursor: pointer;
    text-decoration: none;
}
a:hover {
}
h1, h2, p, table, ul, ol {
    margin-bottom: 20px;
}
h1 {
    font-size: 1.4em;
}
h2 {
    font-size: 1.2em;
}
ul, ol {
    padding-left: 20px;
}
img {
    border: 0;
}
th, td {
    vertical-align: top;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
}
/********************************************
  GENERAL CLASSES
********************************************/
.breaker {
    clear: both;
    font-size: 1px;
    line-height: 1px;
}
/********************************************
  GENERAL LAYOUT
********************************************/
ul.xList {
    margin: 0;
    padding: 0;
}
ul.xList li {
    float: left;
    display: block;
    list-style-type: none;
}
ul.xList li a,
ul.xList li a:link,
ul.xList li a:visited,
ul.xList li a:active {
    float: left;
    display: block;
}
ul.xList li a:hover {
}
/********************************************
  LAYOUT
********************************************/
#container {
}
/********************************************
  HEADER
********************************************/
#header {
    background: #ffffff url('/img/header_bg.gif') repeat-x bottom left;
}
#headerContent {
    width: 1200px;
    height: 93px;
    overflow: hidden;
}
#logo,
#menu,
#projectenmenu {
    float: left;
    overflow: hidden;
}
#menu,
#projectenmenu {
    border-left: dashed 1px #ccc;
}
/********************************************
  LOGO
********************************************/
#logo {
    width: 350px;
    height: 92px;
    text-align: center;
}
#logo a,
#logo a:link {
    display: block;
    margin-top: 20px;
}
/********************************************
  MENU
********************************************/
#menu,
#projectenmenu {
    padding-top: 25px;
    height: 67px;
}
#menu h1,
#projectenmenu h1 {
    margin-bottom: 10px;
    background: transparent url('/img/triangle_right.gif') no-repeat bottom left;
    padding-left: 20px;
    font-weight: bold;
}
#menu ul.xList,
#projectenmenu ul.xList,
#breadcrumbs ul.xList {
    line-height: 1em;
    margin-left: 20px;
}
#menu ul.xList li,
#projectenmenu ul.xList li {
    border-left: 1px solid #000;
    padding: 0 8px 2px 8px;
    margin: 0;
}
#menu ul.xList li.first,
#projectenmenu ul.xList li.first,
#footer_menu ul.xList li.first {
    border-left: 0;
    padding-left: 0;
}
#menu ul.xList li,
#menu ul.xList li a,
#menu ul.xList li a:link,
#projectenmenu ul.xList li,
#projectenmenu ul.xList li a,
#projectenmenu ul.xList li a:link {
    color: #000;
    text-transform: owercase;
}
#menu ul.xList li.active a,
#projectenmenu ul.xList li.active a {
    color: #FF3300;
}
#menu {
    width: 330px;
}
#projectenmenu {
    width: auto;
}
/********************************************
  MAIN LEFT
********************************************/
#main_left {
    float: left;
    padding-top: 30px;
    width: 350px;
    overflow: hidden;
}
#main_left_image {
    float: right;
}
#main_left_contents {
    padding: 0 30px 15px 30px;
    line-height: 1.5em;
}
#main_left_contents a,
#main_left_contents a:link,
#main_left_contents a:visited,
#main_left_contents a:active,
#main_left_contents a:hover {
    color: #000;
    font-weight: bolder;
}
/********************************************
  MAIN RIGHT
********************************************/
#main_right {
    margin-left: 350px;
    background: #999 url('/img/left_bg.gif') top left repeat-y;
}
/********************************************
  BREADCRUMBS
********************************************/
#breadcrumbs {
    height: 10px;
    padding: 10px 0 ;
    margin-left: 1px;
}
#breadcrumbs {
    background-color: #CCC;
}
#breadcrumbs ul.xList li,
#breadcrumbs ul.xList li a,
#breadcrumbs ul.xList li a:link {
    padding-right: 5px;
}
#breadcrumbs ul.xList li a,
#breadcrumbs ul.xList li a:link {
    color: #999;
}
#breadcrumbs ul.footer li a,
#breadcrumbs ul.footer li a:link {
    color: #F30;
}
/********************************************
  CONTENTS
********************************************/
#content {
    padding: 20px;
    color: #fff;
}
#content h2,
#content h3,
#content .description {
    color: #000;
}
/********************************************
  FOOTER MENU
********************************************/
#footer_menu {
    clear: both;
    height: 30px;
    background: url(/img/header_bg.gif) bottom left repeat-x #f30;
    margin-left: 1px;
}
#footer_menu ul.xList {
    padding-top: 8px;
    padding-left: 19px;
    margin: 0;
}
#footer_menu ul.xList li {
    height: 14px;
    line-height: 14px;
    border-left: solid 1px #fff;
    padding: 0 5px;
}
#footer_menu ul.xList li,
#footer_menu ul.xList li a,
#footer_menu ul.xList li a:link {
    color: #fff;
    text-transform: lowercase;
}
#footer_menu ul.xList li.active,
#footer_menu ul.xList li.active a,
#footer_menu ul.xList li.active a:link  {
    color: #000;
}
/********************************************
  PROJECTS
********************************************/
#content #project_wrapper {
    width: 780px;
}
#content #project_image,
#content #projects {
    float: left;
}
#content #project_image {
    width: 440px;
    height: 470px;
    overflow: hidden;
}
#content #project_image .description {
    width: 440px;
    padding-top: 10px;
    font-size: 11px;
}
#content #projects {
    padding-left: 30px;
}
#content #projects ul.xList li {
    padding: 0 30px 0 3px;
}
#content #projects ul.xList li,
#content #projects ul.xList li a,
#content #projects ul.xList li a:link,
#content #projects ul.xList li a:visited,
#content #projects ul.xList li a:active {
    float: none;
    color: #000;
    line-height: 22px;
}
#content #projects ul.xList li.first {
    /*border-top: dashed 1px #fff;*/
}
#content #projects ul.xList li {
    /*border-bottom: dashed 1px #fff;*/
}
#content #projects ul.xList li a,
#content #projects ul.xList li a:link {
    padding-left: 12px;
}
#content #projects ul.xList li.active a {
    font-weight: bold;
    background: url(/img/studiospijker_pijltje.png) no-repeat center left;
}
#testimonials {
    width: 800px;
}
#content .testimonial {
    float: left;
    width: 245px;
    margin-right: 20px;
    height: 320px;
}
.testimonial h2 {
    margin-bottom: 5px;
    font-size: 14px;
}
#content .testimonial .project {
    color: #000;
    font-weight: bold;
    margin-bottom: 5px;
}
.newrow {
    /*clear: left;*/ /* RAAR opgezet, dus kan niet clearen.*/
}
#content .testimonial .project img {
    /* background: transparent url('/img/triangle_right_black.gif') top right no-repeat; */
    vertical-align: middle;
}
#content .testimonial .content,
#content .testimonial .website,
#content .testimonial .website a,
#content .testimonial .website a:link,
#content .testimonial .website a:visited,
#content .testimonial .website a:active {
    color: #fff;
}
#content .testimonial .website {
    padding-top: 10px;
}
/********************************************
  GLOSSARY
********************************************/
ul.glossary {
    float: left;
    display: block;
    width: 250px;
    margin-right: 20px;
    padding: 0;
}
ul.glossary li {
    display: block;
    list-style-type: none;
}
ul.glossary li.highlight,
ul.glossary li.active #glossary_title {
    color: #000;
    font-weight: bolder;
}

ul.glossary li.highlight {
    padding-top: 10px;
}

ul.glossary li a,
ul.glossary li a:link,
ul.glossary li a:visited,
ul.glossary li a:active {
    color: #fff;    
}
ul.glossary li.active #glossary_title {
    display: block;
    background: transparent url('/img/triangle_right_black.gif') center left no-repeat;
    padding-left: 15px;
}
ul.glossary li.active #glossary_contents {
    display: block;
    color: #525151;
    padding-left: 15px;
}
/********************************************
  INSPIRATION RESOURCES
********************************************/
#inspirationresources div {
    float: left;
    display: block;
    width: 220px;
    height: 220px;
    overflow: hidden;
}
#inspirationresources img {
    width: 220px;
    height: 220px;
}
/********************************************
  LINKS
********************************************/
#links .linksgroep {
    float: left;
    display: block;
    width: 170px;
    padding-right: 20px;
}
#links .linksgroep ul {
    margin: 0;
    padding: 0;
}
#links .linksgroep ul li {
    display: block;
    list-style-type: none;
}
#links .linksgroep ul li a,
#links .linksgroep ul li a:link,
#links .linksgroep ulli a:visited,
#links .linksgroep ul li a:active {
    color: #fff;
}
/********************************************
  HOME PROJECTS
********************************************/
#home_projects {
    width: 800px;
}
#home_projects a {
    float: left;
    display: block;
    height: 262px;
    width: 262px;
    overflow: hidden;
}
#home_projects img {
    width: 262px;
}
#contact_form {
    float: left;
    width: 337px;
    padding-bottom: 20px;
}
#contact_form p {
    margin: 10px 0;
}
#contact_info {
    margin-left: 30px;
    float: left;
    color: #000;
}