/* CSS reset */
html, body, div, p, form, input, textarea, select, ul, ol, dl, dt, dd, li, h1, h2, h3, h4, h5, h6, img {margin:0px; padding:0px;}  

/* Site achtergrond */
body {
   background: #444a56 url('../../resources/images/background.png') no-repeat top center;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   letter-spacing: 0px;
   min-height: 400px;
}

/* main */
#main {
   background: transparent url('../../resources/images/menu.png') repeat-x center -336px;
   margin: 0px;
}

/* header */
#header {
   //background: rgba(255, 255, 255, 0.1);
   height: 52px;
   margin: 0 auto;
   overflow: hidden;
   padding: 0px;
   width: 960px;
}  
   /* logo */
   #header #logo .logo {
      background: transparent url('../../resources/images/menu.png') no-repeat 0px 0px;
      display: block;
      float: left;
      height: 48px;
      margin: 0px;
      text-indent: -9999px;  
      width: 350px;
   }
   
   /* navigation */
   #header #menu {
      height: 48px;
      margin: 0px;
      float: right;
      width: 350px;
   }
      /* navigation list */
      #header ul#menu {
         list-style: none;
         float: right;
      }
         /* navigation item */
         #header ul#menu li {
            background: transparent url('../../resources/images/menu.png') no-repeat;
            display: block;
            float: right;
            height: 48px;
            margin: 0px;
            padding: 0px;
            text-indent: -9999px;
         }
            #header ul#menu li.portfolio a {
               display: block;
               height: 48px;
               width: 135px;
            }
            #header ul#menu li.portfolio {
               background-position: 0px -192px;
               width: 135px;
            }
               #header ul#menu li.portfolio:hover {
                  background-position: 0px -240px;
               }
               #header ul#menu li.portfolio:active {
                  background-position: 0px -288px;
               }
            #header ul#menu li.portfolio.current {
               background-position: 0px -48px;
            }
               #header ul#menu li.portfolio.current:hover {
                  background-position: 0px -48px;
               }
               #header ul#menu li.portfolio.current:active {
                  background-position: 0px -144px;
               }
            #header ul#menu li.contact a {
               display: block;
               height: 48px;
               width: 119px;
            }
            #header ul#menu li.contact {
               background-position: -168px -192px;
               width: 119px;
            }
               #header ul#menu li.contact:hover {
                  background-position: -168px -240px;
               }
               #header ul#menu li.contact:active {
                  background-position: -168px -288px;
               }
            #header ul#menu li.contact.current {
               background-position: -168px -48px;
               width: 119px;
            }
               #header ul#menu li.contact.current:hover {
                  background-position: -168px -48px;
               }
               #header ul#menu li.contact.current:active {
                  background-position: -168px -144px;
               }

/* container */
.container {
   background: transparent;
   height: 100%;
   margin: 0 auto;
   width: 960px;
}

#content {
   float: left;
   margin: 30px 0px 0px 0px;
   padding: 0px 15px;
   width: 930px;
}

   #content .item {
      display: block;
      float: left;
      height: 220px;
      margin: 0px;
      padding: 0px;
      text-align: center;
      width: 310px;
   }
      #content .thumb {
         background: #000000;
         cursor: pointer;
         height: 160px;
         margin: 10px 30px 10px 30px;
         width: 250px;
         
         -moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
         -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
         box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
      }
         #content .thumb img {
            opacity: 0.67;
         }
   
   #content a.arrow {
      float: left;
      height: 80px;
      margin: 200px 0px 0px 0px;
      opacity: 0.5;
      text-indent: -9999px;
      width: 60px;
   }
      #content a.arrow:hover {
         opacity: 1;
      }
      #content a.arrow.right {
         background: url('../../resources/images/arrowRight.png') no-repeat top left;
      }
      #content a.arrow.left {
         background: url('../../resources/images/arrowLeft.png') no-repeat top right;
      }
   
   #content .itemBig {
      display: block;
      float: left;
      height: 540px;
      margin: 0px;
      padding: 0px;
      text-align: center;
      width: 810px;
   }
      #content .thumbBig {
         background: #000000;
         height: 480px;
         margin: 10px 30px 10px 30px;
         width: 750px;
         
         -moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
         -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
         box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
      }
         #content .thumbBig img {
            width: 750px;
         }
   
   div.contact {
      margin: 10px auto 0px;
      padding: 60px;
      width: 410px;
   }
      .contact label {
         color: #dddddd;
         clear: both;
         float: left;
         text-shadow: #16181c 0px 1px 5px;
         width: 125px;
      }
      .contact input, textarea {
         background: #1A1C1F;
         border: 0;
         color: #dddddd;
         float: left;
         margin: 4px;
         outline: none;
         padding: 7px 9px 9px 9px;
         width: 250px;
         
         -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 2px 2px rgba(0, 0, 0, 0.5);
         -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 2px 2px rgba(0, 0, 0, 0.5);
         box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 2px 2px rgba(0, 0, 0, 0.5);
         
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
      }
         .contact input:focus, textarea:focus {
            background: #24262A;
            
            -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 2px 2px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 2px 2px rgba(0, 0, 0, 0.4);
            box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 2px 2px rgba(0, 0, 0, 0.4);
         }
         .contact textarea {
            height: 100px;
            resize: vertical;
         }
         .contact input#submit {
            margin-left: 213px;
            padding: 8px 9px 8px 9px;
            width: 100px;
            
            -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 0px rgba(0, 0, 0, 1);
            -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 0px rgba(0, 0, 0, 1);
            box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 0px rgba(0, 0, 0, 1);
         }
            .contact input#submit:active {
               margin-top: 6px;
               padding: 7px 9px 9px 9px;
               
               -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 2px 2px rgba(0, 0, 0, 0.5);
               -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 2px 2px rgba(0, 0, 0, 0.5);
               box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 2px 2px rgba(0, 0, 0, 0.5);
            }
         
         .contact input#submit {
            background: #2695D7;
            font-family: Helvetica;
            font-size: 17px;
            font-weight: ;
            line-height: 23px;
            margin-left: 217px;
            padding: 8px 12px 5px 12px;
            text-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px;
            width: 104px;
            
            -webkit-box-shadow:
            inset 0px 1px 0px rgba(255, 255, 255, 0.4),
            inset 0px -1px 0px rgba(255, 255, 255, 0.2),
            
            0px 1px 0px #1C6DBA,
            0px 2px 0px #1F7CCD,
            0px 3px 0px #175CA1,
            
            0px -2px 0px #31353D,
            1px -1px 0px #31353D,
            2px 0px 0px #31353D,
            2px 3px 0px #31353D,
            0px 4px 0px #31353D,
            -2px 3px 0px #31353D,
            -2px 0px 0px #31353D,
            -1px -1px 0px #31353D,
            
            0px 5px 0px rgba(255, 255, 255, 0.15)
            ;
            
            -moz-box-shadow:
            inset 0px 1px 0px rgba(255, 255, 255, 0.4),
            inset 0px -1px 0px rgba(255, 255, 255, 0.2),
            
            0px 1px 0px #1C6DBA,
            0px 2px 0px #1F7CCD,
            0px 3px 0px #175CA1,
            
            0px -2px 0px #31353D,
            1px -1px 0px #31353D,
            2px 0px 0px #31353D,
            2px 3px 0px #31353D,
            0px 4px 0px #31353D,
            -2px 3px 0px #31353D,
            -2px 0px 0px #31353D,
            -1px -1px 0px #31353D,
            
            0px 5px 0px rgba(255, 255, 255, 0.15)
            ;
            
            box-shadow:
            inset 0px 1px 0px rgba(255, 255, 255, 0.4),
            inset 0px -1px 0px rgba(255, 255, 255, 0.2),
            
            0px 1px 0px #1C6DBA,
            0px 2px 0px #1F7CCD,
            0px 3px 0px #175CA1,
            
            0px -2px 0px #31353D,
            1px -1px 0px #31353D,
            2px 0px 0px #31353D,
            2px 3px 0px #31353D,
            0px 4px 0px #31353D,
            -2px 3px 0px #31353D,
            -2px 0px 0px #31353D,
            -1px -1px 0px #31353D,
            
            0px 5px 0px rgba(255, 255, 255, 0.15)
            ;
         }
            .contact input#submit:active {
               margin-top: 5px;
               padding: 8px 12px 5px 12px;
               -webkit-box-shadow:
               inset 0px 1px 0px rgba(255, 255, 255, 0.4),
               inset 0px -1px 0px rgba(255, 255, 255, 0.2),
               
               0px 1px 0px #1C6DBA,
               0px 2px 0px #1F7CCD,
               
               0px -2px 0px #31353D,
               1px -1px 0px #31353D,
               2px 0px 0px #31353D,
               2px 2px 0px #31353D,
               0px 3px 0px #31353D,
               -2px 2px 0px #31353D,
               -2px 0px 0px #31353D,
               -1px -1px 0px #31353D,
               
               0px 4px 0px rgba(255, 255, 255, 0.15)
               ;
               
               -moz-box-shadow:
               inset 0px 1px 0px rgba(255, 255, 255, 0.4),
               inset 0px -1px 0px rgba(255, 255, 255, 0.2),
               
               0px 1px 0px #1C6DBA,
               0px 2px 0px #1F7CCD,
               
               0px -2px 0px #31353D,
               1px -1px 0px #31353D,
               2px 0px 0px #31353D,
               2px 2px 0px #31353D,
               0px 3px 0px #31353D,
               -2px 2px 0px #31353D,
               -2px 0px 0px #31353D,
               -1px -1px 0px #31353D,
               
               0px 4px 0px rgba(255, 255, 255, 0.15)
               ;
               
               box-shadow:
               inset 0px 1px 0px rgba(255, 255, 255, 0.4),
               inset 0px -1px 0px rgba(255, 255, 255, 0.2),
               
               0px 1px 0px #1C6DBA,
               0px 2px 0px #1F7CCD,
               
               0px -2px 0px #31353D,
               1px -1px 0px #31353D,
               2px 0px 0px #31353D,
               2px 2px 0px #31353D,
               0px 3px 0px #31353D,
               -2px 2px 0px #31353D,
               -2px 0px 0px #31353D,
               -1px -1px 0px #31353D,
               
               0px 4px 0px rgba(255, 255, 255, 0.15)
               ;
            } 

/* link */
a {
	color: #aaaaaa;
	text-decoration: none;
	text-shadow: #16181c 0px 1px 5px;
	
	-webkit-transition-duration: 0.5s;
	-webkit-transition-property: all;
	-webkit-transition-timing-function: linear;
}
a:hover {
	color: #ffffff;
	text-decoration: none;
}

/* clear */
.clear {
   display: block;
   height: 1px;
   overflow: hidden;
   margin-top: -1px;
   clear: both;
   font-size: 1px;
   line-height: 1px;
}

/* nbsp */
.nbsp {
   white-space: nowrap;
}

/* SELECT */
::-moz-selection {
   background: #000;
	xbackground: #000;
	color: #fff;
} 

::selection {
	background: #000;
	color: #fff;
} 

.showDone	{
	background: rgba(255, 255, 255, 0.5);
	margin: 0px 0px 5px 129px;	
	line-height: 16px;
	width: 268px;
	-webkit-border-radius: 5px;
	-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 0px rgba(0, 0, 0, 1);
}

.showError	{
	background: #bbbbbb;
	background-image: -webkit-gradient(
	    linear,
	    left top,
	    left bottom,
	    color-stop(0, rgb(247,247,247)),
	    color-stop(1, rgb(237,237,237))
	);
	background-image: -moz-linear-gradient(
	    center top,
	    rgb(247,247,247) 0%,
	    rgb(237,237,237) 100%
	);
	color: #333333;
	font-family: arial;
	font-size: 14px;
	letter-spacing: 0px;
	line-height: 16px;
	margin: 0px 0px 5px 130px;	
	padding: 0px 2px 0px 4px;
	width: 266px;
	-webkit-border-radius: 5px;
	-webkit-box-shadow: inset 0px 1px 0px #FEFEFE, 0px 0px 1px #000000, 0px 2px 2px rgba(0, 0, 0, 0.5);
}

.showInfo	{
	background: #bbbbbb;
	color: #333333;
	font-family: arial;
	font-size: 14px;
	letter-spacing: 0px;
	line-height: 16px;
	margin: 0px 0px 5px 129px;	
	width: 268px;
	-webkit-border-radius: 5px;
	-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 0px rgba(0, 0, 0, 1);
}