@font-face { font-family: 'PTSansRegular'; src: url('PTS55F-webfont.eot'); src: url('PTS55F-webfont.eot?#iefix') format('eot'), url('PTS55F-webfont.woff') format('woff'), url('PTS55F-webfont.ttf') format('truetype'), url('PTS55F-webfont.svg#webfontakBUUg6U') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'PTSansBold'; src: url('PTS75F-webfont.eot'); src: url('PTS75F-webfont.eot?#iefix') format('eot'), url('PTS75F-webfont.woff') format('woff'), url('PTS75F-webfont.ttf') format('truetype'), url('PTS75F-webfont.svg#webfontaW07W6NV') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'PTSansItalic'; src: url('PTS56F-webfont.eot'); src: url('PTS56F-webfont.eot?#iefix') format('eot'), url('PTS56F-webfont.woff') format('woff'), url('PTS56F-webfont.ttf') format('truetype'), url('PTS56F-webfont.svg#webfontV5YcF68V') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'PTSansBoldItalic'; src: url('PTS76F-webfont.eot'); src: url('PTS76F-webfont.eot?#iefix') format('eot'), url('PTS76F-webfont.woff') format('woff'), url('PTS76F-webfont.ttf') format('truetype'), url('PTS76F-webfont.svg#webfont2oPncueb') format('svg'); font-weight: normal; font-style: normal; }
/*
@font-face { font-family: 'PTSansNarrowRegular'; src: url('PTN57F-webfont.eot'); src: url('PTN57F-webfont.eot?#iefix') format('eot'), url('PTN57F-webfont.woff') format('woff'), url('PTN57F-webfont.ttf') format('truetype'), url('PTN57F-webfont.svg#webfontpTBqgUZV') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'PTSansNarrowBold'; src: url('PTN77F-webfont.eot'); src: url('PTN77F-webfont.eot?#iefix') format('eot'), url('PTN77F-webfont.woff') format('woff'), url('PTN77F-webfont.ttf') format('truetype'), url('PTN77F-webfont.svg#webfontSTdD4QCq') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'PTSansCaptionRegular'; src: url('PTC55F-webfont.eot'); src: url('PTC55F-webfont.eot?#iefix') format('eot'), url('PTC55F-webfont.woff') format('woff'), url('PTC55F-webfont.ttf') format('truetype'), url('PTC55F-webfont.svg#webfont7qk7wodx') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'PTSansCaptionBold'; src: url('PTC75F-webfont.eot'); src: url('PTC75F-webfont.eot?#iefix') format('eot'), url('PTC75F-webfont.woff') format('woff'), url('PTC75F-webfont.ttf') format('truetype'), url('PTC75F-webfont.svg#webfont8zHvniZB') format('svg'); font-weight: normal; font-style: normal; }
*/


/* --------------------------------------------------------- */
/* Common Styles
/* --------------------------------------------------------- */
html, body { height: 100%; }
body { font-family: Helvetica, Arial, Helvetica, sans-serif; color: #1a171b; cursor: default; line-height: 150%; }

h1 { }
h2 { }
h3 { }
h4 { }
h5 { }
h6 { }

p { }
b { font-weight: bold; }
i, em { font-style: italic; }

a { }
a:hover { }

input:focus { outline: none; }
input[type=text] { }

/* --------------------------------------------------------- */
/* Lay-out styles
/* --------------------------------------------------------- */
.light { color: #6a656b; }
.font { font-family: 'PTSansRegular' , Arial, Serif; letter-spacing: 1pt; }
.font h1 { font-family: 'PTSansBold' , 'PTSans' , Arial, Serif; }

/* --------------------------------------------------------- */
/* Menu styles
/* --------------------------------------------------------- */
header { height: 120px; position: relative; z-index: 600; /* extra z-index voor IE7/8 */ }
header a { color: inherit !important; text-decoration: none; }

#logo { position: absolute; left: 30px; top: 40px; text-transform: uppercase; }
#logo h1 { margin: 0; padding: 0; line-height: 20px; font-size: 18px; }
#logo h2 { margin: 0 0 3px 0; padding: 0; font-weight: normal; font-size: 13px; }
#logo .tagline { font-size: 10px; }

#navigation { position: absolute; left: 310px; top: 60px; }
#menu-toggle { margin: 0 0 3px 0; padding: 0; font-weight: normal; text-transform: uppercase; }
#menu-close { display: none; }
#breadcrumb li { color: #1a171b; float: left; text-transform: uppercase; font-size: 10px; padding-left: 15px; background: url('../img/sprite.png') no-repeat 5px -93px; }
#breadcrumb li:first-child { padding-left: 0; background: none; }
#breadcrumb li a { color: #888489 !important; }

#menu { display: none; position: absolute; z-index: 610; left: -30px; top: 40px; padding: 30px 30px 30px 30px; background-color: #fff; white-space: nowrap; text-transform: uppercase; }
#menu > li > a { font-size: 14px; color: #1a171b !important; line-height: 20px; }
#menu > li > ul > li a { font-size: 12px; color: #888489 !important; line-height: 20px; }
#menu a { }
#menu a:hover, #menu a.active { color: #c64c4c !important; }

#cloud { position: absolute; z-index: 610; right: 10px; top: 10px; text-align: right; padding-right: 30px; height: 17px; line-height: 17px; background: url('../img/sprite.png') no-repeat right 0; }
#cloud.full { background-position: right -50px; }
#cloud span { font-weight: bold; font-size: 10px; }

/* --------------------------------------------------------- */
/* Aside left styles
/* --------------------------------------------------------- */


/* --------------------------------------------------------- */
/* Aside right styles
/* --------------------------------------------------------- */


/* --------------------------------------------------------- */
/* Center content
/* --------------------------------------------------------- */
#photo-roll { z-index: 100; width: 100%; position: absolute; overflow: hidden; display: none; }
#photo-roll .scrollable { position: relative; overflow: hidden; width: 100%; height: 460px; padding-top: 20px; }
#photo-roll .browse { z-index: 450; position: absolute; top: 200px; height: 62px; width: 35px; cursor: pointer; }
#photo-roll .browse.disabled { display: none; }
#photo-roll .browse.prev { left: 15px; background: url('../img/sprite.png') no-repeat 0 -225px; }
#photo-roll .browse.next { right: 15px; background: url('../img/sprite.png') no-repeat 0 -150px; }
#photo-roll .items { width: 20000em; position: absolute; }
#photo-roll .item { z-index: 400; /* extra z-index for ie7/ie8*/ float: left; position: relative; cursor:pointer; }
#photo-roll .overlay { position: absolute; z-index: 410; left: 0; top: 0; width: 100%; height: 100%; background-color:; display: none; }
#photo-roll .icons { position: absolute; z-index: 420; left: 0; top: -20px; height: 20px; width: 100%; text-align: left; }
#photo-roll .icons .btn { cursor: pointer; float: left; -moz-opacity: .40; filter: alpha(opacity=40); opacity: .40; display: none; }
#photo-roll .icons .btn:hover { -moz-opacity: 1; filter: alpha(opacity=100); opacity: 1; }
#photo-roll .book-info { position: absolute; z-index: 430; left: 0; top: 0; background: url('../img/opa-white-60.png'); width: 100%; cursor:auto; }
#photo-roll .book-info h1 { font-size: 14px; padding: 20px 20px; }
#photo-roll .book-info p { font-size: 12px; padding: 0 20px 10px 20px; }
#photo-roll .book-info p.extralink a { padding: 0 10px 10px 26px; color:#c64c4c; text-decoration:none; }
#photo-roll .book-info p.extralink a:hover { color:#c64c4c; text-decoration:underline;}
/* added some padding to make the clickable area a bit bigger */
#photo-roll .icon-zoom { margin-right: 0px; width: 22px; height: 20px; background: url('../img/sprite.png') no-repeat 6px -295px; }
#photo-roll .icon-info { margin-right: 0px; width: 21px; height: 20px; background: url('../img/sprite.png') no-repeat 4px -321px; text-indent: 100px; overflow: hidden; }
#photo-roll .icon-detail { margin-right: 0px; width: 24px; height: 20px; background: url('../img/sprite.png') no-repeat 3px -600px; }
.rgba #photo-roll .book-info { background-image: none; background-color: rgba(255,255,255, .7); }

/* info layer/box */
.box { z-index: 500; width: 286px; color: #fff; background: url('../img/sprite-info.png') no-repeat -286px bottom; padding-bottom: 26px; }
.box a { color: #fff !important; text-decoration: underline; }
.box .top { width: 286px; height: 26px; background: url('../img/sprite-info.png') no-repeat 0 0; }
.box .cnt { padding: 0 20px; background: url('../img/sprite-info.png') repeat-y -572px 0; }
.box h1 { font-size: 15px; padding-bottom: 10px; font-weight: bold; }
#photo-roll .box { position: absolute; right: 0px; top: 10px; display: none; }

/* zoom */
#zoom-layer { z-index: 1000; background: #fff url('../img/loading.gif') no-repeat 50px center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: none; }
#zoom-img { z-index: 1001; position: absolute; top: 0; left: 0; margin: 15px; display: none; }
#zoom-close { z-index: 1002; position: absolute; top: 0; right: 0; height: 92px; width: 92px; background: url('../img/zoom-close.png') no-repeat center center; cursor: pointer; border-radius: 3px; -moz-border-radius: 3px; }

/* wrapper for the box that contains the close button and browse buttons */
#welcome { width: 286px; padding: 18px 18px 0 0; z-index: 500; position: absolute; top: 60%; left: 15%; }
#welcome .box { cursor: move; }
#welcome .box .top { background: url('../img/sprite-info.png') no-repeat -858px 0; }
#welcome .close { position: absolute; background: url('../img/sprite.png') no-repeat -17px -358px; height: 25px; width: 25px; border: 0px solid #f00; position: absolute; left: 250px; top: 0; cursor: pointer; }
#welcome .scrollable { position: relative; overflow: hidden; width: 246px; height: 150px; }
#welcome .browse { position: absolute; left: 283px; top: 80px; width: 20px; height: 22px; background-color: #221f1f; cursor: pointer; background: url('../img/sprite.png') no-repeat 0 0; }
#welcome .browse.disabled { background-position: 0 -435px; }
#welcome .next0 { top: 80px; background-position: 0 -390px; }
#welcome .prev0 { top: 102px; background-position: 0 -413px; }
#welcome .items { width: 20000em; position: absolute; }
#welcome .item { float: left; position: relative; width: 246px; }

/* TIP */
#tip { height:34px; padding: 11px 0 0 92px; background: url('../img/sprite.png') no-repeat 4px -764px; }
#tip p { color:#999999; font-size:11px; }
#tip p strong { color:#333333; }

#reference-list { margin: 40px 30px 30px 30px; border-top: 1px solid #dbdbdb; display: none; }
#reference-list ul { margin: 0; padding: 0; }
#reference-list li { border-bottom: 1px solid #dbdbdb; padding: 15px 0; list-style-type: none; }
#reference-list li span { display: inline-block; float: left; }
#reference-list li span.logo { width: 280px; text-align: center; }
#reference-list li span.name { width: 230px; font-size: 14px; text-transform: uppercase; }
#reference-list li span.name a { color: #888489; text-decoration: none; font-size: 12px; }
#reference-list li span.desc { width: 390px; }
#reference-list li:hover span.name a { color: #c64c4c; }

#reportage { padding: 60px 30px 0 30px; display: none; padding-bottom: 20px; /* must use padding because of floating elements inside */  }
ul.thumb-list { list-style-type: none; margin: 0; padding: 0; }
ul.thumb-list li { float: left; padding: 0; margin: 0 10px 10px 0; height: 160px; position: relative; }
ul.thumb-list li .overlay-white { z-index: 100; display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; -moz-opacity: .50; filter: alpha(opacity=50); opacity: .50; }
ul.thumb-list li .overlay-cloud { z-index: 110; display: none; position: absolute; right: 8px; top: 8px; width: 16px; height: 11px; background: url('../img/sprite.png') no-repeat 0 -575px; }
ul.thumb-list li.in-cloud .overlay-white { display: inline; }
ul.thumb-list li.in-cloud .overlay-cloud { display: inline; }
ul.thumb-list li .icons { z-index: 120; display: none; width: 100%; height: 42px; position: absolute; top: 59px; left: 0; text-align: center; background: url('../img/sprite.png') no-repeat center -475px; }
/* added some padding to make the clickable area a bit bigger */
ul.thumb-list .btn { cursor: pointer; display: inline-block; margin: 10px 2px; width: 24px; height: 21px; }
ul.thumb-list .icon-zoom { background: url('../img/sprite.png') no-repeat 0px -548px; }
ul.thumb-list .icon-cloud { background: url('../img/sprite.png') no-repeat 0px -523px; }
ul.thumb-list .icon-delete { background: url('../img/sprite.png') no-repeat 5px -698px; }

#text-page p { margin: 0 0 1em 0; }
#text-page h1 { font-size: 16px; margin-bottom: 15px; }
#text-page .col1 { margin: 35px 0 0 30px; float: left; overflow: hidden; width: 250px; }
#text-page .col2 { margin: 0 20px 0 30px; float: left; overflow: hidden; width: 400px; }
#text-page .col3 { margin: 35px 0 0 30px; float: left; overflow: hidden; width: 200px; background-color: #c64c4c; color: #fff; }
#text-page .col3 ul { list-style-type: none; padding: 0; margin: 0; }
#text-page .col3 li { list-style-type: none; font-size: 12px; padding: 6px 10px; margin: 0; border-top: 1px solid #dd9494; }
#text-page .col3 li.fat { font-weight: bold; font-size: 14px; text-transform: uppercase; }
#text-page .col3 li a, #text-page .col3 li a:hover, #text-page .col3 li a:visited { color: #fff; text-decoration: none; display: block; }

#profile { margin: 40px 0 30px 30px; width: 900px; padding-bottom: 15px; /* must use padding because of floating elements inside */ }
#profile a { color: #c64c4c !important; }
.account-details { border: 1px solid #dbdbdb; border-left: 0; border-right: 0; padding: 20px 15px; margin-bottom: 30px; }
.account-details label { width: 110px; display: inline-block; color: #888489; text-transform: uppercase; cursor: default; }
.account-history h1 { font-size: 14px; padding-left: 50px; background: url(../img/sprite.png) no-repeat 15px -630px; margin-bottom: .5em; }
.account-history p { padding-left: 50px; color: #888489; }
.account-history table { width: 100%; margin-top: 2em; }
.account-history table th { padding: 5px 10px; border: 1px solid #221f1f; border-left: 0; border-right: 0; text-align: left; text-transform: uppercase; font-size: 11px; }
.account-history table td { padding: 5px 10px; border-bottom: 1px solid #dbdbdb; color: #888489; }

#cart { margin: 40px 30px 0 30px; padding-bottom: 15px; /* must use padding because of floating elements inside */ }
#cart a { color: #c64c4c; }
.current-selection ul { list-style-type: none; padding: 0; margin: 0 0 10px 10px; border-style: solid; border-color: #dbdbdb; list-style-type: none; padding: 0; border-top-width: 1px; }
.current-selection li { height: 24px; border-style: solid; border-color: #dbdbdb; list-style-type: none; padding: 6px 0 2px 0; margin: 0; border-bottom-width: 1px; }
.current-selection p { padding-left: 45px; color: #888489; margin-bottom: 2em; }
.current-selection p span { color: #221f1f; }
.selection-group .desc { height: 24px; border-style: solid; border-color: #221f1f; border-width: 1px 0px 1px 0px; padding: 6px 0 2px 0; margin: 10px 0; }
.desc .icon-delete { vertical-align: middle; display: inline-block; margin: 0 10px 0 5px; width: 20px; height: 22px; background: url('../img/sprite.png') no-repeat 5px -700px; border: 0px solid red; }


/* for profile and cart */
.order .desc { color: #1a171b; }
.order .desc .count { font-weight: bold; }
.order .desc .type { color: #888489; }
.order h1 { font-size: 14px; padding-left: 50px; background: url(../img/sprite.png) no-repeat 15px -630px; margin-bottom: .5em; }

a.button { border-radius: 4px; padding: 5px 12px; color: #fff !important; font-weight: bold; text-decoration: none;
  background-color: #e66262;
  background-image: -moz-linear-gradient(top, #e66262, #c64c4c); 
  background-image: -ms-linear-gradient(top, #e66262, #c64c4c); 
  background-image: -o-linear-gradient(top, #e66262, #c64c4c); 
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e66262), to(#c64c4c)); 
  background-image: -webkit-linear-gradient(top, #e66262, #c64c4c); 
  background-image: linear-gradient(top, #e66262, #c64c4c);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e66262', EndColorStr='#c64c4c'); 
}
a.button:hover { text-decoration: underline; }


@media only screen and (orientation:landscape) and (min-device-width: 481px) and (max-device-width: 1024px) {
    header { height: 90px; }
    #logo { position: absolute; left: 30px; top: 30px; text-transform: uppercase; }
    #navigation { position: absolute; top: 40px; }
}
	
	/* Form styles --------------------------------- */
	div.form-wrapper { width:318px; }
	div.form-wrapper form ol { margin:0; padding:0; list-style:none; }
	div.form-wrapper form ol li { float:left; position:relative; width:318px; margin:0; padding:6px 0; list-style:none; }
	div.form-wrapper form ol li label { float:left; width:318px; text-align:left; margin:0; text-transform:uppercase; }
	div.form-wrapper form ol li label span { color:#bd2c16; }
	div.form-wrapper form ol li label.error { position:absolute; top:6px; right:0; color:#bd2c16; white-space:nowrap; width:auto; margin:0; }
	div.form-wrapper form ol li input[type=text], div.form-wrapper form ol li input[type=password] { float:left; width:306px; border:1px inset #CCC; margin:0; padding:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
	div.form-wrapper form ol li textarea { float:left; width:306px; border:1px inset #CCC; margin:0; padding:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
	div.form-wrapper form ol li select { margin:7px 0; }
	div.form-wrapper form ol li input:focus { border:1px solid #bd2c16; background:#F0F1F1; }
	div.form-wrapper form ol li textarea:focus { border:1px solid #bd2c16; background:#F0F1F1; }
	button {
		float:none;
		margin:0 auto;
		font-size:1em;
		background:#30383c url(../img/alert-overlay.png) repeat-x;
		display:inline-block;
		padding:6px 14px 5px;
		color:#fff;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		-moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);
		box-shadow:0 1px 3px rgba(0,0,0,0.5);
		text-shadow:0 -1px 1px rgba(0,0,0,0.25);
		border:none;
		border-bottom:1px solid rgba(0,0,0,0.25);
		position:relative;
		cursor:pointer;
		text-transform:uppercase;
	}
	button:hover { background:#bd2c16 url(../img/alert-overlay.png) repeat-x; }
	button:active { background:#ad2f4d url(../img/alert-overlay.png) repeat-x; }
	
	div.form-wrapper form ol li div.radiobutton, div.form-wrapper form ol li div.checkbox { float:right; width:390px; padding:5px 0; }
	div.form-wrapper form ol li div.radiobutton label, div.form-wrapper form ol li div.checkbox label { float:none; text-align:left; margin:0 0 0 6px; }
	
	div.form-wrapper form ol li div.checkbox input { float:left; }
	div.form-wrapper form ol li div.checkbox label { float:left; }
	
	div#required-field { float:left; margin:10px 0 0 0px; }

/* ------------------------------------------------- */
/* Footer styles
/* ------------------------------------------------- */
    footer { position:fixed; bottom:0px; background: #fff; z-index:10000; width:100%;}
	footer div#copyright { padding:4px;}
	footer div#copyright p { color:#999999; font-size:11px; }


/* ------------------------------------------------- */
/* Sticky footer solution 
/* ------------------------------------------------- */
    html, body { height:100%; }
    #wrapper { min-height:100%; }
    /*#content-wrapper { overflow:auto; padding-bottom:34px; }
    #footer {position: relative; margin-top:-34px; height:34px; clear:both; }*/
    /*Opera Fix*/
    /* thank you Erik J - negate effect of float*/
    body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px; }