/* www.zilteklei.nl | copyright d-artagnan */
/* --------------------------------------- */ 
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; list-style: none; }
body { line-height:1; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration: none; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } 
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* --------------------------------------- */ 
body {
	background: #000;
}

#header {
	height: 60px;
	width: 1000px;
	margin: 20px auto 60px auto;
	position: relative;
}
	#header #logo,
	#header #kromme,
	#header #menu {
		position: absolute;
	}
	#header #logo {
		top: 0;
		right: 0;
		
	}
		#header #logo h1,
		#header #logo h2 {
			display: block;
			height: 0 !important;
			padding: 34px 0 0 0;
			overflow: hidden;
			width: 144px;
			background: url(../img/zilteklei_logo.gif) 0 0 no-repeat;
			float: left;
		}
		#header #logo h2 {
			background-position: 0 -34px;
			width: 177px;
			margin-left: 11px;
		}
	#header #kromme {
		bottom: 0;
		left: 0;
		display: block;
		height: 0 !important;
		padding: 50px 0 0 0;
		overflow: hidden;
		width: 112px;
		background: url(../img/krommewatergang_logo.gif) 0 0 no-repeat;
	}
	#header #menu {
		bottom: 0;
		right: 0;
	}
		#header #menu li {
			background: url(../img/menu_divider.gif) 0 50% no-repeat;
			padding: 0 0 0 17px;
			margin: 0 0 0 12px;
			float: left;
		}
		#header #menu li:first-child {
			padding: 0;
			margin: 0;
			background: none;
		}
			#header #menu li a {
				text-transform: uppercase;
				color:#FFF;
			}
			#header #menu li a:hover,
			#header #menu li a.active {
				color:#ec611a;
			}
	
#book {
	margin:0 auto 20px auto;
	width: 1000px;
	height: 686px;
	position: relative;
}
	#book #pages,
	#book #cover,
	#book #binding,
	#book #nav,
	#book #page {
		position: absolute;
	}
	#book #pages {
		top:4px;
		left:42px;
		z-index:5;
		background: #FFF;
		height: 578px;
		width: 916px;
	}
		#book #pages ul {
			position: absolute;
			top:0;
			z-index: 7;
		}
		#book #pages #pages-book {
			z-index: 6;
		}
	#book #cover {
		top:0;
		right: 0;
		background: url(../img/boek_cover.jpg) no-repeat;
		height: 586px;
		width: 491px;
		z-index: 15;
		cursor: pointer;
	}
	#book #binding {
		top:1px;
		right: 0;
		height: 686px;
		width: 999px;
		background: url(../img/boek_layer.png) no-repeat;
		z-index: 10;
	}
	
	#book #nav {
		top:100px;
		left: -20px;
		width: 1040px;
		z-index: 11;
	}
		#book #nav a {
			background: #FFF;
			display: block;
			height: 0 !important;
			padding: 14px 0 0 0;
			overflow: hidden;
			width: 15px;
			background: url(../img/nav_sprite.gif) 0 0 no-repeat;
		}
		#book #nav #nav-next {
			float: right;
			background-position: -15px 0;
		}
		#book #nav #nav-prev {
			float: left;
		}
		#book #nav #nav-next:hover {
			background-position: -15px -14px;
		}
		#book #nav #nav-prev:hover {
			background-position: 0 -14px;
		}
	#book #page {
		z-index: 14;
		left:500px;
	}
		#book #page #page-info,
		#book #page #page-order {
			position: absolute;
			top:4px;
			padding:34px;
			width: 390px;
			font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
			font-size:11px;
			line-height: 1.8em;
			color:#58564f;
		}
		#book #page #page-info {
			width: 390px;
			padding-right: 34px;
		}
			#book #page #page-order #page-order-info {
				position: absolute;
				left:-457px;
				top:290px;
				top:380px;
				padding:34px 34px 0 34px;
				width: 389px;
			}
			#book #page div p {
				margin-bottom: 18px;
			}
			#page-order form {
				
			}
				#page-order legend {
					font-weight:bold;
				}
				#page-order form li {
					width: 185px;
					float: left;
					padding: 0 10px 10px 0;
				}
				
				#page-order form .big li {
					width: 389px;
				}
					#page-order form li label {
						float: left;
						line-height: 24px;
					}
					#page-order form .big li label {
						width: 320px;
						float:right;
						font-size:1.1em;
					}
					#page-order form li select,
					#page-order form li input {
						float: right;
						width: 105px;
						height: 24px;
					}
					#page-order form .big select {
						width: 60px;
						float:left;
					}
					#page-order form button {
						float: right;
					}
			#orderlist {
			/*	border:1px solid #DDD;*/
			/*	background: #EEE;	*/
				padding: 5px 0;
				margin:10px 0;
			}
			#orderlist .l {
				float:left;
			}
			#orderlist .r {
				float:right;
				text-align: right;
			}
				#orderlist .orderlist-book {
					padding: 0 5px 0px 5px;
				}
				#orderlist .orderlist-ship {
					padding: 0 5px;
					margin:5px 0 0 0;
				}
				#orderlist .orderlist-total {
					border-top:1px solid #BBB;
					padding: 5px 5px 0 5px;
					margin: 5px 0 0 0;
				}

/* d-artagnan signatuur */
#d-artagnan {
	position: fixed;
	z-index: 75;
	bottom: 10px;
	right: 10px;
	background: url('../img/d-artagnan_neg.png');
    display: block;
    height: 0 !important;
    padding: 8px 0 0 0;
    overflow: hidden;
    width: 104px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	filter: alpha(opacity=40);
	-moz-opacity: 0.4;
	-khtml-opacity: 0.4;
	opacity: 0.4;
}
#d-artagnan:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
}



/* formalize */
/* `Widths
----------------------------------------------------------------------------------------------------*/

.input_tiny {
  width: 50px;
}

.input_small {
  width: 100px;
}

.input_medium {
  width: 150px;
}

.input_large {
  width: 200px;
}

.input_xlarge {
  width: 250px;
}

.input_xxlarge {
  width: 300px;
}

.input_full {
  width: 100%;
}

/*
  Added via JS to <textarea> and class="input_full".
  Applies only to IE7. Other browsers don't need it.
*/
.input_full_wrap {
  display: block;
  padding-right: 8px;
}

/* `UI Consistency
----------------------------------------------------------------------------------------------------*/

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input[type="search"]::-webkit-search-decoration {
  display: none;
}

input,
button,
select,
textarea {
  margin: 0;
  vertical-align: middle;
}

button,
input[type="reset"],
input[type="submit"],
input[type="button"],
.foot a {
  -webkit-appearance: none;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  background: #ddd url(../img/frm_button.png) repeat-x;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ddd));
  background: -moz-linear-gradient(top center, #fff 0%, #ddd 100%);
  border: 1px solid;
  border-color: #ddd #bbb #999;
  cursor: pointer;
  color: #333;
  /*
    Helvetica Neue present, because it works better
    for line-height on buttons than Arial, on OS X.
  */
  font: bold 11px/1.3 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
  outline: 0;
  overflow: visible;
  padding: 3px 10px;
  text-shadow: #fff 0 1px 1px;
  width: auto;

  /* IE7 */
  *padding-top: 2px;
  *padding-bottom: 0px;
}

button {
  /* IE7 */
  *padding-top: 1px;
  *padding-bottom: 1px;
}

textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  -webkit-appearance: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  behavior:url(border-radius.htc);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  background-color: #fff;
  border: 1px solid;
  border-color: #848484 #c1c1c1 #e1e1e1;
  color: #000;
  outline: 0;
  padding: 2px 3px;
  font-size: 11px;
  /*
    Leaving out Helvetica Neue, to not throw off size="..."
    on inputs. Arial is more reliable, on Windows and OS X.
  */
  font-family: Arial, 'Liberation Sans', FreeSans, sans-serif;
  height: 1.8em;

  /* IE7 */
  *padding-top: 2px;
  *padding-bottom: 1px;
  *height: auto;
}

/*
  Separate rule for Firefox.
  Separate rule for IE, too.
  Cannot stack with WebKit's.
*/
::-webkit-input-placeholder {
  color: #888;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #888;
}

input.placeholder_text,
textarea.placeholder_text {
  color: #888;
}

:invalid {
  /*
    Suppress red glow that Firefox
    adds to form fields by default,
    even when user is still typing.
  */
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

button:focus,
button:active,
input:focus,
input:active,
select:focus,
select:active,
textarea:focus,
textarea:active {
  -moz-box-shadow: #dc5b18 0 0 7px;
  -webkit-box-shadow: #dc5b18 0 0 7px;
  box-shadow: #dc5b18 0 0 7px;

  /* for Opera */
  z-index: 1;
}

input[type="file"]:focus,
input[type="file"]:active,
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

select[disabled],
textarea[disabled],
input[type="date"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="email"][disabled],
input[type="month"][disabled],
input[type="number"][disabled],
input[type="password"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="text"][disabled],
input[type="time"][disabled],
input[type="url"][disabled],
input[type="week"][disabled] {
  background-color: #eee;
}

button[disabled],
input[disabled],
select[disabled],
select[disabled] option,
select[disabled] optgroup,
textarea[disabled] {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: #888;
  cursor: default;
}

textarea,
select[size],
select[multiple] {
  height: auto;
}

/* Tweaks for Safari + Chrome. */
@media (-webkit-min-device-pixel-ratio: 0) {
  select {
    background-image: url(../img/frm_select_arrow.gif);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 20px;
  }

  select[size],
  select[multiple] {
    background-image: none;
    padding: 0;
  }

  ::-webkit-validation-bubble-message {
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #000));
    border: 1px solid;
    border-color: #747474 #5e5e5e #4f4f4f;
    color: #fff;
    font: 11px/1 'Lucida Grande', Arial, 'Liberation Sans', FreeSans, sans-serif;
    padding: 15px 15px 17px;
    text-shadow: #000 0 0 1px;
  }

  ::-webkit-validation-bubble-top-outer-arrow,
  ::-webkit-validation-bubble-top-inner-arrow {
    display: none;
  }
}

textarea {
  min-height: 40px;
  overflow: auto;
  resize: vertical;
  width: 100%;
}

optgroup {
  color: #000;
  font-style: normal;
  font-weight: normal;
}

/* `IE6
----------------------------------------------------------------------------------------------------*/

/*
  Everything below this line is for IE6.
  Delete it if you don't support it! :)

  Classes are added dynamically via JS,
  because IE6 doesn't support attribute
  selectors: .ie6_button, .ie6_input, etc.

  Note: These style rules are somewhat
  duplicated because IE6 bombs out when
  it sees attribute selectors. Example:

  .ie6_button {
    This works in IE6.
  }

  .ie6_button,
  input[type=submit] {
    This doesn't work.
  }
*/

.ie6_button,
* html button {
  background: #ddd url(../img/frm_button.png) repeat-x;
  border: 1px solid;
  border-color: #ddd #bbb #999;
  cursor: pointer;
  color: #333;
  font: bold 12px/1.2 Arial, sans-serif;
  padding: 2px 10px 0px;
  overflow: visible;
  width: auto;
}

* html button {
  padding-top: 1px;
  padding-bottom: 1px;
}

.ie6_input,
* html textarea,
* html select {
  background: #fff;
  border: 1px solid;
  border-color: #848484 #c1c1c1 #e1e1e1;
  color: #000;
  padding: 2px 3px 1px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  vertical-align: top;
}

* html select {
  margin-top: 1px;
}

.placeholder_text,
.ie6_input_disabled,
.ie6_button_disabled {
  color: #888;
}

.ie6_input_disabled {
  background: #eee;
}