/*
	VERLAGSKG WOLF
	==============
	URL:      www.vkgw.de
	Client:   VerlagsKG Wolf (info@vkgw.de)
	Code:     Chris Ribal (c.ribal@ribal-webentwicklung.de)
	            
	TABLE OF CONTENTS
	=================
	1. CSS RESET
	2. GLOBAL
	3. LAYOUTING/GRIDS
	4. PRIMARY
	5. TYPOGRAPHY
	6. NAVIGATION
	7. TEASER
	8. CONTENT
	9. FOOTER
	9. SHOPPING CART
	 
*/

/*==============================
	1. CSS RESET 
================================*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%; font: inherit;	vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q {	quotes: none; }
blockquote:before, blockquote:after,q:before, q:after {	content: ''; content: none;}
table {	border-collapse: collapse; border-spacing: 0; }

/*==============================
	2. GLOBAL STYLES  
================================*/
body { background: #fff url(../images/page-bg.jpg) no-repeat center top; background-attachment: fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; font: normal 12px/18px Arial, Helvetica, sans-serif; color: #2d2929; }
* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
img { max-width: 100%; }
h1 a, h2 a, h3 a, h4 a { text-decoration: inherit; color: inherit; text-decoration: inherit; }
a, a:visited { color: #887169; text-decoration: underline; }
a:hover { text-decoration: none; }
a.readmore { display: inline-block; height: 20px; line-height: 20px; padding-left: 30px; background: url(../images/readmore-arrow.png) no-repeat left center; font: bold 12px/20px Arial, Helvetica, sans-serif; color: #000; text-decoration: none; }
a.readmore:hover { text-decoration: underline; }
a.button, a.button:focus, button.button { display: inline-block; border: none; cursor: pointer; background: #887169; color: #fff; padding: 9px 20px; text-decoration: none; text-align: center; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; }
a.button:hover, a.button:active, button.button:active, button.button:hover { background: #C9A89D; }
hr { margin: 20px 0; background: none; border: none; border-top: 1px dotted #887169; }
.pagination a, .pagination strong { display: inline-block; height: 20px; padding: 0 6px; border: 1px solid #887169; font: normal 12px/18px Arial, Helvetica, sans-serif; vertical-align: middle; text-align: center; text-decoration: none; color: #887169; }
.pagination strong, .pagination a:hover { background: #887169; color: #fff; }
.pagination strong { font-weight: bold; }
.pagination .totals { font: normal 11px/20px Arial, Helvetica, sans-serif; color: #888; float: right; }
ul { 
   list-style-type: disc; 
   list-style-position: outside;
   margin-left: 15px;
}
ol { 
   list-style-type: decimal; 
   list-style-position: outside; 
   margin-left: 15px;
}
ul li, ol li { padding-left: 10px; }
ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: outside;
   margin-left: 15px; 
}
ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: outside;
   margin-left: 15px; 
}

/*==============================
	3. LAYOUTING/GRID STYLES  
================================*/
.row:after, .clearfix:after { content: " "; display: block; width: 0px; height: 0px; clear: both; }
.row { margin: 0px -10px; }
.row .col { float: left; padding: 0px 10px; }
.row .col.half { width: 50%; }
.row .col.one-third { width: 33.3333333333%; }
.row .col.two-third { width: 66.6666666666%; }
.row .col.one-fourth { width: 25%; }
.row .col.three-fourth { width: 75%; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.clear { clear: both; }

/*==============================
	4. PRIMARY STYLES  
================================*/
.page-container { width: 920px; margin: 50px auto 50px; position: relative; }
.page { background: #fff; background: rgba(255,255,255,.8); border-top: 10px solid #887169; box-shadow: 2px 3px 4px rgba(0,0,0,.75); -webkit-box-shadow: 2px 3px 4px rgba(0,0,0,.75); -moz-box-shadow: 2px 3px 4px rgba(0,0,0,.75); }
.page .content-container { position: relative; display: table; }
.page .content-container > .left { position: relative; display: table-cell; width: 180px; height: 100%; padding: 20px 25px; vertical-align: top; }
.page .content-container > .right { position: relative; display: table-cell; width: 740px; height: 100%; vertical-align: top; }
.page .content-container .content { padding: 20px 100px 10px 0px; }
.box { padding: 20px; margin-bottom: 10px; background: #fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); -wekbit-box-shadow: 0px 0px 10px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.2); }

/*==============================
	5. TYPOGRAPHY STYLES  
================================*/
h1 { font: normal 26px/36px Arial, Helvetica, sans-serif; color: #887169; margin: 20px 0 15px; text-decoration: none; }
h2 { font: normal 20px/26px Arial, Helvetica, sans-serif; color: #887169; margin: 15px 0 10px; text-decoration: none; }
h3 { font: bold 16px/24px Arial, Helvetica, sans-serif; color: #887169; margin: 10px 0 10px; text-decoration: none; }
h4 { font: bold 14px/22px Arial, Helvetica, sans-serif; color: #887169; margin: 10px 0 10px; text-decoration: none; }
p { margin: 0px 0px 15px; }
strong { font-weight: bold; }
em { font-style: italic; }

/*==============================
	6. NAVIGATION STYLES  
================================*/
/* TOP NAVIGATION */
nav.top { background: #ccada1; }
nav.top .page-nav { float: left; width: 100px; }
nav.top .page-nav a { display: block; color: #000; font: normal 13px/25px Arial, Helvetica, sans-serif; text-decoration: none; padding: 0px 10px; }
nav.top .page-nav a:hover, nav.top .page-nav a.active { background: #efc9b8; }
nav.top .page-nav-big a { font-size: 13px; line-height: 50px; text-align: center; }
nav.top .categories { display: block; float: left; list-style: none; margin: 0; padding: 0; width: 540px; background: #887169; }
nav.top .categories li { display: inline-block; float: left; margin: 0; padding: 0; }
nav.top .categories li a { display: inline-block; width: 108px; padding: 5px 10px; height: 50px; text-align: center; font-size: 14px; line-height: 40px; color: #fff; text-decoration: none; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; }
nav.top .categories li:hover a, nav.top .categories li.active a { background: #efc9b8;  box-shadow: inset 0px 20px 20px -20px rgba(0,0,0,.8); }

/* SERIES NAVIGATION */
nav.series { }
nav.series a { display: inline-block; width: 100%; margin-bottom: 10px; }
nav.series a img { zoom: 1; display: block; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; }
nav.series a:hover img, nav.series a.active img { opacity: 0.5; filter: alpha(Opacity=50); }

/*==============================
	7. TEASER STYLES  
================================*/
.teaser { position: relative; width: 740px; height: 250px; overflow: hidden; }
.teaser img { positon: relative; z-index: 0; }
.teaser .caption { position: absolute; background: #fff; background: rgba(255,255,255,.9); font-size: 13px; top: 22px; left: 90px; width: 545px; height: 219px; padding: 11px 20px; opacity: 0; filter: alpha(opacity=0); margin-top: 20px; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; z-index: 1; }
.teaser .caption p { margin-bottom: 10px; }
/*.teaser:hover .caption { opacity: 1; filter: alpha(opacity=100); margin-top: 0px; transition-delay: 0s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; }*/

/*==============================
	7. CONTENT STYLES  
================================*/
.top-nbb-logo { margin-left: 10px; }
#search-form { position: absolute; right: 0px; top: 0px; width: 250px; }
#search-form input { display: block; width: 250px; height: 37px; padding-left: 40px; background: transparent url(../images/search-bg.png) no-repeat left top; border: none; font: normal 14px/20px Arial, Helvetica, sans-serif; color: #7f5122; }
#minicart { position: absolute; right: 260px; top: 0px; width: 250px; height: 37px; background: url(../images/cart-bg.png); font-size: 14px; padding: 10px 10px 10px 50px; text-decoration: none; }
.vkgw-logo { }

/* AUTHOR LIST */
.authors-list { }
.authors-list .author { border-top: 1px dotted #aaa; padding-top: 20px; margin-top: 20px; }
.authors-list .author:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.authors-list .thumbnail { float: left; margin-right: 20px; width: 101px; height: 141px; border: 1px solid #ccc; }
.authors-list .thumbnail img { float: left; }
.authors-list .details { overflow: hidden; }

/* AUTHOR INFO */
.author-info .author-image { float: left; margin: 0px 20px 10px 0; }

/*==============================
	9. FOOTER STYLES  
================================*/
.footer { clear: both; background: #887169; font: normal 12px/20px Arial, Helvetica, sans-serif; color: #fff; border-top: 10px solid #ccada1; padding: 10px 20px; }
.footer a { display: inline-block; margin-left: 10px; color: #fff; font-weight: bold; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/*==============================
	10. TABLE STYLES  
================================*/
table.table { border-collapse: collapsed; }
table.table th { font-weight: bold; text-align: left; }
table.table tbody td, table.table tbody th { padding: 2px 5px; }
table.table tbody tr th { padding-right: 10px; }

/*==============================
	11. SHOPPING CART STYLES  
================================*/
table.shopping-cart { width: 100%; }
table.shopping-cart thead th { border-bottom: 2px solid #ccc; padding: 5px; }
table.shopping-cart tbody td { border-top: 1px solid #ccc; padding: 7px 5px; vertical-align: middle; }
table.shopping-cart tbody input.qty { width: 50px; padding: 4px; margin-right: 5px; }
table.shopping-cart tfoot { border-top: 2px solid #ccc; }
table.shopping-cart tfoot td { padding: 2px 5px; white-space: nowrap; }

.steps .step.box .step-heading { color: #887169; font-size: 16px; line-height: 20px; }
.steps .step.box .step-heading span { display: inline-block; float: left; margin-right: 10px; vertical-align: middle; width: 20px; height: 20px; background: #887169; color: #fff; font-size: 13px; border-radius: 50%; line-height: 20px; text-align: center; }
.steps .step.box .step-content { display: none; border-top: 1px solid #ccc; padding-top: 15px; margin-top: 10px; padding-left: 50px; padding-right: 50px; }
.steps .step.box.done .step-heading { color: #479e47; }
.steps .step.box.done .step-heading span { background: #479e47; }
.steps .step.box.done .step-heading:after { content: "✓"; font-size: 30px; display: inline-block; float: right; }
.steps .form-control { margin-top: 5px; }
.steps .form-control:after { content: " "; clear: both; display: table; height: 0px; }
.steps .form-control .label { float: left; width: 33.33333% }
.steps .form-control .input { float: right; width: 66.66666%; }
.steps .form-control .label label { line-height: 30px; height: 30px; }
.steps .form-control .input input,
.steps .form-control .input select { width: 100%; padding: 5px; height: 30px; border: 1px solid #ccc; outline: none; background: #fff; border-radius: 2px; transition: border-color .3s, box-shadow .3s; }
.steps .form-control .input input:focus,
.steps .form-control .input select:focus { border-color: #887169; box-shadow: inset 0px 1px 3px #887169; }
.steps .form-control label.checkbox, .steps .form-control label.radio { display: block; position: relative; padding-left: 20px; cursor: pointer; }
.steps .form-control label.checkbox input[type=checkbox], .steps .form-control label.radio input[type=radio] { position: absolute; top: 0px; left: 0px; margin: 0; }
.steps .form-control.error .label label { color: #a52a2a; }
.steps .form-control.error .input input,
.steps .form-control.error .input select { border-color: #a52a2a; }
.steps .form-control.error label.checkbox { color: #a52a2a; }
.steps .form-control.error label.checkbox input { border: 5px solid #000; }


.steps .step-content .step-buttons { margin-top: 15px; }
.steps .step-content .step-buttons:after { content: " "; clear: both; display: table; height: 0px; }