* { outline-color: #8a8a8a; }

html {
 font-family: Garamond, 'Times New Roman', serif;
 font-size: 12px;
 line-height: 1.4;
 margin: 0;
 padding: 0;
 color: #fff;
 }

body {
 padding: 0;
 margin: 0;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 905px;
 height: 601px;
 margin-left: -452px;
 margin-top: -301px;
 }

label {
 cursor: pointer;
 }

input, textarea, select {
 font-family: Garamond, 'Times New Roman', serif;
 font-size: 12px;
 line-height: 1.4;
 border: 1px solid #d1d0d3;
 background: #fff;
 }

input.error {
 border: 1px solid #ec2a44;
 }

#sidebar {
 width: 91px;
 padding: 23px 40px 0 0;
 }

#content {
 position: absolute;
 top: 0;
 left: 154px;
 width: 750px;
 height: 601px;
 color: #717981;
 }

#footer {
 clear: both;
 display: none;
 }

h1, h2, h3 {
 margin: 0;
 }

h1 a {
 text-indent: -9999em;
 overflow: hidden;
 display: block;
 width: 150px;
 height: 126px;
 position: relative;
 left: -37px;
 background: transparent url(img/h1.gif) no-repeat 0 0;
 }

/*img {
 display: block;
 }*/

#productions h1 a {
 background-position: -150px 0;
 }

#studio h1 a {
 background-position: -300px 0;
 }

#shop h1 a {
 background-position: -450px 0;
 }

h2 {
 margin: 0 0 0 1px;
 padding: 32px 0 0 0;
 position: absolute;
 top: 496px;
 left: -155px;
 text-transform: lowercase;
 font-size: 1.2em;
 color: #ec2a44;
 font-weight: normal;
 background: transparent url(img/hr-home.gif) repeat-x 0 -7px;
 width: 91px;
 }

h3 {
 display: none;
 }

a {
 text-decoration: none;
 color: #009dde;
 outline: 0;
 }

a img {
 border: 0;
 }

a:hover, a:focus {
 color: #ec2a44;
 }

#menu a:focus, .submenus a:focus {
 background: #eee;
}

abbr {
 border: 0;
 }

hr {
 display: none;
 }

#content p {
 /*margin-top: 12px;*/
 /*margin-top: -12px;*/
 margin-top: 0;
 margin-bottom: 1em;
 }

#sidebar hr, #sidebar .hr {
 background: transparent url(img/hr-home.gif) repeat-x 0 0;
 display: block;
 width: 100%;
 height: 7px;
 border: 0;
 padding: 0;
 }

#home h2, #home #sidebar hr, #home #sidebar .hr {
 background-image: url(img/hr-home.gif);
 }

#productions h2, #productions #sidebar hr, #productions #sidebar .hr {
 background-image: url(img/hr-productions.gif);
 }

#studio h2, #studio #sidebar hr, #studio #sidebar .hr {
 background-image: url(img/hr-studio.gif);
 }

#shop h2, #shop #sidebar hr, #shop #sidebar .hr {
 background-image: url(img/hr-shop.gif);
 }

#sidebar .hr {
 margin: 7px 0;
 }

#shopping-cart li input, .cart-list li input {
 border: none;
 padding: 0;
 cursor: pointer;
 color: #ec2a44;
 }

#menu, #submenu, .submenu, #shopping-cart, .cart-list, #cart-totals {
 margin: 0;
 padding: 0;
 color: #000;
 }

#menu {
 padding-top: 17px;
 height: 283px;
 }

#menu li, #submenu li, .submenu li, #shopping-cart li, .cart-list li, #cart-totals li {
 list-style: none;
 margin: 0;
 padding: 0;
 text-transform: lowercase;
 }

#shopping-cart li, .cart-list li, #cart-totals li {
 position: relative;
 }

#shopping-cart li span, .cart-list li span, #cart-totals li span {
 position: absolute;
 right: 0;
 }

#menu li a {
 color: #000;
 display: block;
 width: 100%;
 font-size: 1.2em;
 }

#menu li.shop-menu a { text-align: right; font-size: 90%; }

#menu li a:hover, #menu li a:focus, #menu li.current a {
 color: #ec2a44;
 }

#submenu li a, .submenu li a {
 color: #000;
 display: block;
 width: 100%;
 }

#submenu li a:hover, #submenu li a:focus, .submenu li a:hover, .submenu li a:focus, #shopping-cart li input:hover, #shopping-cart li input:focus, .cart-list li input:hover, .cart-list li input:focus {
 color: #009dde;
 background: #eee;
 }

#home #submenu li a:hover, #home #submenu li a:focus, #home .submenu li a:hover, #home .submenu li a:focus {
 color: #009dde;
 }

#productions #submenu li a:hover, #productions #submenu li a:focus, #productions .submenu li a:hover, #productions .submenu li a:focus, #productions #menu li a:hover, #productions #menu li a:focus, #productions .numbers li:hover, #productions .numbers li:focus, #productions .arrows li:hover, #productions .arrows li:focus {
 color: #f99c25;
 }

#studio #submenu li a:hover, #studio #submenu li a:focus, #studio .submenu li a:hover, #studio .submenu li a:focus, #studio #menu li a:hover, #studio #menu li a:focus, #studio .numbers li:hover, #studio .numbers li:focus, #studio .arrows li:hover, #studio .arrows li:focus {
 color: #818286;
 }

#submenu li.current a, .submenu li.current a {
 color: #ec2a44;
 }

#productions #submenu li.current a, #productions .submenu li.current a, #productions #menu li.current a, #productions h2, #productions .numbers li.current, #productions .arrows li.current {
 color: #c17dae;
 }

#studio #submenu li.current a, #studio .submenu li.current a, #studio #menu li.current a, #studio h2, #studio .numbers li.current, #studio .arrows li.current {
 color: #7ccdd0;
 }

#images, #products {
 padding: 0;
 margin: 0;
 overflow: auto;
 white-space: nowrap;
 width: 750px;
 min-height: 480px;
 }

#images li, .figure {
 display: inline;
 padding: 0;
 margin: 0;
 white-space: nowrap;
 /* line-height: 0; *//* fix voor schijnbare padding-bottom */
 }

.figure {
 line-height: 30px; /* zodat .figure + p correct gealigneerd staat */
 }

/*#images img {
 display: inline;
 }*/

#contact #content {
 color: #000;
 }

#contact #content div {
 float: left;
 width: 177px;
 margin: 0 10px 0 0;
 }

#contact img {
 margin-bottom: 39px;
 }

#about #content, #updates #content {
 padding-top: 186px;
 height: 415px;
 color: #000;
 width: 410px;
 }

#updates #content {
 padding-top: 188px;
 height: 413px;
 }

#about h3 {
 display: block;
 margin-bottom: 10px;
 text-transform: lowercase;
 word-spacing: -3px;
 color: #009dde;
 }

#about h3 span {
 color: #ec2a44;
 }

#submenu li a {
 float: left;
 margin: 0;
 padding: 0;
 width: 216px;
 }

/* Shop */

#image-navigation {
 margin-right: 5px;
 }

#products {
 min-height: 480px;
 }

#products .product {
 border: 1px solid #b1b1b5;
 border-width: 1px 0;
 height: 478px;
 width: 245px;
 float: left;
 margin-right: 5px;
 }

#products .product h3 {
 padding-top: 35px;
 display: block;
 font-weight: normal;
 font-size: 12px;
 }

#products .product h3 span {
 color: #e31a37;
 text-transform: uppercase;
 }

#products .products-view {
 
 }

.product-info {
 display: block;
 text-align: right;
 width: 245px;
 }

.product-info p {
 margin: 0;
 }

.product-sizes li {
 display: block;
 float: right;
 }

.quantity {
 clear: both;
 text-transform: lowercase;
 }

.quantity input {
 width: 20px;
 }

.add-to-cart input, .confirm-order input, .thank-you {
 font-family: Garamond, 'Times New Roman', serif;
 border: 0;
 padding: 0;
 cursor: pointer;
 color: #ec2a44;
 background: transparent;
 text-transform: uppercase;
 position: relative;
 top: -8px;
 }

.confirm-order input, .thank-you {
 font-size: 1.3em;
 top: 26px;
 float: right;
 }

.thank-you, .confirm-order input {
 cursor: default; 
 position: absolute;
 top: 421px;
 right: 0;
 }

.confirm-order input {
 cursor: pointer;
 }

#images li {
 display: inline;
 }
 
.product-info ul {
 margin: 0;
 padding: 0;
 list-style-type: circle !important;
 }

.product-info ul li {
 display: block !important;
 }

.product-info p.description {
 /*width: 105px !important;*/
 }

.price {
 color: #000;
 font-weight: bold;
 }

.enlarge a, .reduce {
 display: block;
 width: 245px;
 height: 325px;
 text-indent: -9999em;
 overflow: hidden;
 background: transparent url(img/arrows-shop.png) no-repeat -25px 300px;
 cursor: pointer;
 }

.enlarge a {
 position: relative;
 top: -330px;
 margin-bottom: -337px;
 }

.reduce {
 width: 25px;
 height: 25px;
 background-position: 0 0;
 position: absolute;
 top: 0;
 right: 0;
 }

#cart-totals {
 position: relative;
 }

#cart-totals li {
 width: 140px;
 }

#cart-totals abbr {
 text-transform: uppercase;
 border: 0;
 }

#cart-totals .total {
 width: 68px;
 position: absolute;
 right: 0;
 top: 10px;
 }

#cart-totals .total span {
 color: #ec2a44;
 font-weight: bold;
 }

.checkout a {
 clear: both;
 display: block;
 float: right;
 font-size: 15px;
 text-transform: uppercase;
 color: #000;
 margin-right: 5px;
 }

.checkout a:hover, .checkout a:focus {
 color: #ec2a44;
 }

#cart-summary ul, #cart-summary ul li, #cart-summary form {
 list-style: none;
 margin: 0;
 padding: 0;
 }

#cart-summary ul li a, #cart-summary input.paypal-submit {
 padding: 0;
 border: 0;
 color: #000;
 text-transform: uppercase;
 cursor: pointer;
 display: block;
 width: 100%;
 text-align: left;
 }

#cart-summary ul li a:hover, #cart-summary ul li a:focus, #cart-summary input.paypal-submit-hover {
 color: #009dde;
 background: #eee;
 }

#cart-summary, #shipping-information, #bank-details {
 width: 220px;
 color: #000;
 border: 1px solid #b1b1b5;
 border-width: 1px 0;
 height: 478px;
 float: left;
 margin-right: 5px;
 padding: 0 10px 0 15px;
 position: relative;
 }

#bank-details .confirmation {
 font-size: 9px;
 color: #717981;
}

#cart-summary h4, #shipping-information h4, #shipping-information h5, #bank-details h4, #bank-details h5 {
 text-transform: uppercase;
 color: #ec2a44;
 font-weight: normal;
 font-size: 12px;
 position: relative;
 }

#shipping-information h4, #bank-details h4 {
 margin-bottom: 36px;
 }

#shipping-information h5, #bank-details h5 {
 color: #000;
 margin-bottom: 17px;
 }

#bank-details h5 {
 margin-bottom: 15px;
 }

#shipping-information p {
 margin: 0 0 3px 0;
 }

#bank-details p {
 margin: 0 0 18px 0;
 line-height: 20px;
 }

#shipping-information label {
 display: block;
 float: left;
 width: 60px;
 line-height: 16px;
 }

#shipping-information p {
 line-height: 17px;
 }

#shipping-information input {
 margin: 1px 0;
 padding: 0;
 width: 150px;
 }

#shipping-information .same-address label {
 width: 216px;
 margin-top: 3px;
 margin-bottom: 4px;
 }

 #shipping-information .same-address input {
 width: auto;
 float: right;
 }

#cart-summary h4 strong {
 position: absolute;
 right: 0;
 font-weight: normal;
 }

#cart-summary table {
 width: 220px;
 height: 278px;
 text-transform: lowercase;
 margin-bottom: -17px;
 }

#cart-summary table tbody, #cart-summary table tr, #cart-summary table tr th, #cart-summary table tr td {
 padding: 0;
 margin: 0;
 }

#cart-summary table tfoot tr.subtotal th, #cart-summary table tfoot tr.subtotal td {
 padding-top: 0;
 }

#cart-summary table tfoot {
 display: block;
 margin-top: 21px;
 position: relative;
 top: -21px;
 }

#cart-summary table tfoot tr {
 height: 8px;
 line-height: 16px;
 }

#cart-summary table tfoot .total td {
 color: #ec2a44;
 }

#cart-summary table caption {
 padding-top: 20px;
 margin-bottom: 13px;
 text-transform: uppercase;
 text-align: left;
 }

#cart-summary table tr {
 display: block;
 height: 20px;
 }

#cart-summary table tbody {
 height: 191px;
 }

#cart-summary table tfoot tr {
 height: auto;
 }

#cart-summary table tr td {
 text-align: right;
 width: 45px;
 }

#cart-summary table tr th {
 text-align: left;
 font-weight: normal;
 width: 200px;
 }

/* CSS voor elementen die via JS worden toegevoegd */

.numbers, .arrows {
 margin: 0 0 0 10px;
 padding: 0;
 float: right;
 }

#menu-numbers, #menu-navigation, #cart-list-navigation {
 margin-top: 49px;
 }

#cart-list-navigation {
 position: relative;
 left: -260px;
 z-index: 20;
 }
 
#menu-navigation {
 clear: right; /* fix voor Webkit */
 }

.clear {
 clear: both;
 margin-bottom: -28px;
 }

.numbers li, .arrows li {
 list-style: none;
 margin: 0;
 padding: 0;
 display: block;
 float: left;
 text-align: center;
 height: 40px;
 line-height: 40px;
 color: #009dde;
 cursor: pointer;
 font-weight: bold;
 }

.numbers li {
 padding: 0 2px;
 }

.arrows li {
 width: 15px;
 text-indent: -9999em;
 overflow: auto;
 background: transparent url(img/arrows.gif) no-repeat 2px 14px;
 }

.arrows li#prev-image, .arrows li#prev-menu:hover, .arrows li#prev-menu.hover {
 background-position: 2px 14px;
 }

#productions .arrows li#prev-image, #productions .arrows li#prev-menu:hover, #productions .arrows li#prev-menu.hover {
 background-position: -118px 14px;
 }

#studio .arrows li#prev-image, #studio .arrows li#prev-menu:hover, #studio .arrows li#prev-menu.hover {
 background-position: -58px 14px;
 }

.arrows li#next-image, .arrows li#next-menu:hover, .arrows li#next-menu.hover {
 background-position: -13px 14px;
 }

#productions .arrows li#next-image, #productions .arrows li#next-menu:hover, #productions .arrows li#next-menu.hover {
 background-position: -133px 14px;
 }

#studio .arrows li#next-image, #studio .arrows li#next-menu:hover, #studio .arrows li#next-menu.hover {
 background-position: -73px 14px;
 }

.arrows li#prev-menu, .arrows li#prev-image:hover, .arrows li#prev-image.hover {
 background-position: -28px 14px;
 }

#productions .arrows li#prev-menu, #productions .arrows li#prev-image:hover, #productions .arrows li#prev-image.hover {
 background-position: -148px 14px;
 }

#studio .arrows li#prev-menu, #studio .arrows li#prev-image:hover, #studio .arrows li#prev-image.hover {
 background-position: -88px 14px;
 }

.arrows li#next-menu, .arrows li#next-image:hover, .arrows li#next-image.hover {
 background-position: -43px 14px;
 }

#productions .arrows li#next-menu, #productions .arrows li#next-image:hover, #productions .arrows li#next-image.hover {
 background-position: -163px 14px;
 }

#studio .arrows li#next-menu, #studio .arrows li#next-image:hover, #studio .arrows li#next-image.hover {
 background-position: -103px 14px;
 }

.arrows li:hover, .arrows li.hover {
 color: #ec2a44;
 background-color: #eee;
 }

.numbers li {
 color: #717981;
 }

.numbers li:hover, .numbers li.hover, .numbers li.current {
 color: #ec2a44;
 }

.numbers li:hover, .numbers li.hover {
 background-color: #eee;
 color: #009dde;
 }

#submenus {
 z-index: 5;
 margin-top: 0;
 }

#submenus ul, #cart-lists ul, #cart-totals {
 float: left;
 margin: 0 10px 0 0;
 padding: 10px 0 0 0;
 width: 216px;
 }

#cart-lists ul {
 width: 185px; margin-right: 65px;
 }

.popup {
 display: none;
 position: absolute;
 top: 0;
 z-index: 99;
 cursor: pointer;
 margin-bottom: 40px;
 background: #fff;
 height: 509px;
 overflow: hidden;
 } 

.description {
 display: none;
 }

.popup img {
 padding-bottom: 7px;
 }

.popup .price {
 float: right;
 color: #ec2a44;
 }

.popup .description {
 display: block;
 }

#shop-menu {

display: none; }

/* Vanaf hier staat enkel de CSS die de reeds zonder JS bestaande elementen wijzigt */

.js-enabled #images {
 overflow: visible; /* moet voor fade-effect */
 width: 100%;
 height: 480px;
 }

.js-enabled #images li {
 overflow: hidden; /* zodat afbeeldingen die groter dan #content zijn geen scrollbar veroorzaken */
 width: 750px;
 }

.js-enabled #products {
 overflow: hidden;
 height: 478px;
 }

.js-enabled #cart-totals {
 position: absolute;
 top: 521px;
 left: 520px;
 }

 .js-enabled .checkout a {
 position: absolute;
 right: 0;
 top: 578px;
 }