/**
 * SGS Onlinebestellsystem. Copyright 2007 - {CURRENT_YEAR}
 * Kontakt: https://www.sgsoft.eu
 * E-Mail: info@sgsoft.eu
 */

/*
 * General Styles
 */
body
{
	background-image: url(../../images/frontend/hintergrund.jpg);
	margin: 0px;
	font-family: 'Source+Sans+Pro',Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 20px;
}

a, a:link, a:active, a:visited
{
	text-decoration: 	none;
	color: 				#000000;
}

a:hover
{
	text-decoration: 	none;
	color: 				#FF0000;
}

a.active
{
	color: #D60B0E;
}

hr
{
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	border-color: #CCCCCC -moz-use-text-color -moz-use-text-color;
	border-image: none;
	border-right: 0 none;
	border-style: solid none none;
	border-width: 1px 0 0;
	display: block;
	height: 1px;
	margin: 1em 0;
	padding: 0;
}

img
{
	border: 0;
}

table
{
	border: 0;
}

.alignLeft
{
	text-align: left;
}

.alignCenter
{
	text-align: center;
}

.alignRight
{
	text-align: right;
}

.nobr
{
	white-space: nowrap;
}

.bold
{
	font-weight: bold;
}

.underline
{
	text-decoration: underline;
}

.italic
{
	font-style: italic;
}

div.errorBox
{
	background-color: rgba(255, 0, 0, 0.5);
	border: 1px solid red;
	padding: 5px;
	margin-bottom: 20px;
}

div.hintBox
{
	background-color: rgba(255, 242, 0, 0.5);
	border: 1px solid yellow;
	padding: 5px;
	margin-bottom: 20px;
}

input::placeholder 
{
	font-style: italic;
	color: gray;
}

/**
 * Shop Header
 */
div.pageHeader
{
	height: 160px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	text-align: center;
}

div.headerSpacerLeft
{
	width: 301px;
	display: inline-block;
}

div.headerLogo
{
	width: 274px;
	padding-top: 10px;
	padding-right: 18px;
	display: inline-block;
}

div.headerAdresses
{
	width: 192px;
	display: inline-block;
}

div.headerAddress
{
	font-size: 17px;
	font-size: calc(0.3vw + 11px);
	font-weight: bold;
	color: #8D522B;
}

div.headerPhoneNumber
{
	font-size: 25px;
	font-size: calc(0.7vw + 11px);
	font-weight: bold;
	color: #8D522B;
}

div.headerKroko
{
	width: 109px;
	vertical-align: bottom;
	display: inline-block;
}

div.redYellowLine
{
	background-image: url(../../images/frontend/checkers.png);
	background-repeat: repeat-x;
	background-position: top;
	min-height: 20px;
}

div.mainNavi
{
	background: none repeat scroll 0 0 #FFFFFF;
	box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.5);
	padding-left: 5%;
	width: 90%;
	max-width: 940px;
	position: absolute;
	top: 160px;
	left:0;
	right:0;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

div.mainNaviLink
{
	width: 20%;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: bold;
	text-transform: uppercase;
	height: 40px;
	white-space: nowrap;
	font-size: 18px;
	font-size: calc(0.3vw + 12px);
	display: inline-flex;
}

div.mainNaviLink > a
{
	padding-top: 10px;
}

/**
 * Shop Navigation
 */
div.shopNavigation
{
	text-align: center;
}

ul.shopNavigation
{
	background: none repeat scroll 0 0 #FFFFFF;
	box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.5);
	margin: 0 auto;
	padding-bottom: 10px;
	padding-top: 10px;
	display: inline-block;
	text-align: center;
}

ul.shopNavigation > li
{
	white-space: nowrap;
	display: inline;
	list-style: none;
	margin-right: 28px;
	padding-top: 10px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 13px;
	font-size: calc(0.3vw + 9px);
}

li.shopNavigation a, li.shopNavigation a:visited
{
	color: #666666;
	text-decoration: none;
}

li.shopNavigation a:hover
{
	color: #009DDF;
	text-decoration: none;
}

/**
 * Shop Navigation right side
 */
div.navigationRight
{
	background-color: rgba(120, 70, 43, 0.5);
	float: right;
	padding: 10px;
	vertical-align: top;
	min-width: 270px;
	max-width: 270px;
}

div.rightShoppingCart
{
	width: 100%;
}

div.rightCartDescriptionHeader
{
	display: inline-flex;
	font-weight: bold;
	text-shadow: 2px 2px 3px black;
	color: white;
}

div.rightCartPriceHeader
{
	float: right;
	font-weight: bold;
	text-shadow: 2px 2px 3px black;
	color: white;
}

div.rightCartMenuProductAmount
{
	margin-left: 30px;
	margin-right: 5px;
	display: inline-block;
	vertical-align: top;
}

div.rightCartProductAmount
{
	margin-left: 0px;
	margin-right: 5px;
	display: inline-block;
	vertical-align: top;
}

div.rightCartEntryDescription
{
	display: inline-block;
}

div.rightCartEntryDescriptionTruncate
{
	white-space: nowrap;
 	overflow: hidden;
  	text-overflow: ellipsis;
	width: 200px;
}

div.rightCartEntryMenuDescriptionTruncate
{
	white-space: nowrap;
 	overflow: hidden;
  	text-overflow: ellipsis;
	width: 170px;
}

div.rightCartPrice
{
	float: right;
	vertical-align: top;
	text-align: right;
}

div.rightCartTotalArea
{
	margin-top: 15px;
	margin-bottom: 15px;
	float: left;
	width: 100%;
}

div.rightCartTotalEntry
{
	float: right;
	text-align: right;
	width: 100%;
}

div.rightInformationBlockHeader
{
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: center;
	font-weight: bold;
	text-shadow: 2px 2px 3px black;
	color: white;
}

div.rightDeliveryCollectionTime
{
	text-align: center;
	font-weight: bold;
	font-size: 26px;
}

div.rightOpeningEntry
{
	display: flex;
}

div.rightOpeningDay
{
	vertical-align: top;
	margin-right: 10px;
	width: 65px;
	display: inline;
}

div.rightOpeningTimes
{
	display: inline;
}

/**
 * Set Address Page
 */
 img.setAddressTitleImage
 {
	 margin-top: 10px;
	 margin-bottom: 10px;
 }

div.setAddressPage
{
	left:0;
	right:0;
	margin-left: auto;
	margin-right: auto;
	width: 410px;
	text-align: center;
	display: block;
}

div.setAddressLine
{
	display: flex;
	margin-bottom: 5px;
	text-align: left;
}

div.setAddressLabel
{
	width: 150px;
	text-align: right;
	margin-right: 10px;
}

div.setAddressForm
{
	width: 300px;
}

div.setAddressFormLeft
{
	width: 220px;
}

div.setAddressFormRight
{
	width: 75px;
	margin-left: 5px;
}

div.setAddressFormRight > button
{
	margin: 0;
}

div.setAddressSubmit
{
	padding-left: 140px;
}

div.setAddressSubmit > input
{
	/* Why 500px? But it works. */
	width: 500px;
}

div.setAddressGloss
{
	margin-top: 20px;
	text-align: center;
}

div.setFreeAddressNotFound
{
	color: red;
	text-align: center;
	font-style: italic;
	font-weight: bold;
	display: none;
}

div.setFreeAddressLoadingSpinner
{
	border: 2px solid #222222; /* Light grey */
	border-top: 2px solid #222222; /* Blue */
	border-radius: 50%;
	width: 30;
	height: 30;
	animation: spin 2s linear infinite;
	display: none;
	text-align: center;
}
  
@keyframes spin
{
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/**
 * Search Address
 */
div#searchAddressOverlay
{
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 100;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

div.searchAddressOverlayHidden
{
	display: none;
}

div.searchAddressOverlayInner
{
	position: fixed;
	top: calc(20% - 100px);
	bottom: calc(80% - 100px);
	left: 30%;
	right: 30%;
	border-radius: 10px;
	background-image: url(../../images/frontend/hintergrund.jpg);
}

div.searchAddressOverlayInner > div
{
	margin: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
}

button.searchAddressContinue
{
	float: right;
}

button.searchAddressCancel
{
	float: left;
}

input.search_address
{
	margin-bottom: 5px;
	padding: 0;
}

ul.search_address
{
	margin-bottom: 5px;
	padding: 0;
	height: 100px;
	max-height: 100px;
	overflow: auto;
	list-style-type: none;
	background: #FFFFFF;
	border: #000000 1px;
}

ul.search_address > li
{
	margin-left: 5px;
	line-height: 30px;
}

ul.search_address > li.selected
{
	background: #009DDF;
}

/**
 * Alternative Adresses
 */
 div#alternativeAdressesOverlay
 {
	 background-color: rgba(0, 0, 0, 0.7);
	 z-index: 100;
	 position: fixed;
	 width: 100%;
	 height: 100%;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
 }
 
 div.alternativeAdressesOverlayInner
 {
	 position: fixed;
	 top: calc(20% - 100px);
	 bottom: calc(80% - 100px);
	 left: 30%;
	 right: 30%;
	 border-radius: 10px;
	 background-color: #FFFFFF;
 }
 
 div.alternativeAdressesOverlayInner > div
 {
	 margin: 5px;
 }
 
 div.alternativeAddressRow
 {
	 margin: 10px;
	 text-align: center;
	 display: block;
 }
 
 div.alternativeAddressDesc
 {
	 display: inline;
	 text-decoration: underline;
	 cursor: pointer;
 }

/**
 * All Pages after Address Setup
 */
div.shopContent
{
	margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
	width: 90%;
	display: flex;
}

div.shopContentLeft
{
	display: block;
	width: 100%;
	margin-right: 10px;
}

div.shopContentRight
{
	float: right;
	display: block;
}

div.contentHeader
{
	border-bottom: 1px solid #000000;
}

div.contentTitle
{
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 14px;
	margin-top: 14px;
}

div.breadcrumb
{
	display: none;
	padding-left: 15px;
	font-weight: bold;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 15' width='10' height='15'><line x1='10' x2='5' y1='5' y2='10' stroke='black' stroke-width='2'/><line x1='5' x2='10' y1='10' y2='15' stroke='black' stroke-width='2'/></svg>") no-repeat;
	border-bottom: #000000 solid 1px;
}

div.breadcrumbBack
{
	display: inline-block;
}

div.breadcrumbForward
{
	float: right;
	padding-right: 10px;
	margin-right: 5px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 15' width='5' height='15'><line x1='0' x2='5' y1='5' y2='10' stroke='black' stroke-width='2'/><line x1='5' x2='0' y1='10' y2='15' stroke='black' stroke-width='2'/></svg>") right top no-repeat;
}

div.breadcrumbForward > a
{
	color: red;
}

div.phone
{
	display: none;
}

div.tablet
{
	display: none;
}

/**
 * Products
 */
div.productListing
{
	border-bottom: 1px solid #000000;
	display: flex;
	padding-top: 10px;
	padding-bottom: 10px;
}

div.productPreviewImage
{
	margin-right: 10px;
	cursor: pointer;
}

div.productText
{
	width: 100%;
}

div.productTitle
{
	font-weight: bold;
}

div.productDescription
{
	display: inline;
	float: left;
	width: calc(100% - 280px);
}

div.productPriceButtons
{
	text-align: center;
	float: right;
	display: flex;
}

div.productPriceButtons > div
{
	width: 60px;
	margin-left: 5px;
	margin-right: 5px;
	display: block;
}

div.productPriceButtonSize {
	font-weight: bold;
}

div.productPriceButton {
	background-color: green;
	border-radius: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
}

div.productPriceButton a, div.productPriceButton a:visited, div.productPriceButton a:hover
{
	color: white;
}

div.productFooter
{
	text-align: center;
	margin-top: 10px;
}

/**
 * Toppings
 */
div.toppingHeader
{
	margin-bottom: 10px;
}

div.breadcrumbToppings
{
	display: block;
}

div.toppingMaxReached
{
	color: red;
	font-weight: bold;
}

div.toppingPriceBracket
{
	background-color: green;
	font-weight: bold;
	color: white;
}

div.toppingRow
{
	width: 100%;
	display: inline-block;
	margin-top: 5px;
	margin-bottom: 5px;
}

div.toppingAmount
{
	display: inline;
}

div.toppingName
{
	display: inline;
}

div.toppingRight
{
	float: right;
}

div.toppingTotal
{
	display: inline-flex;
	vertical-align: top;
	padding-top: 2px;
}

div.amountButtonsPlusMinus
{
	display: inline-flex;
	width: 75px;
	height: 23px;
	background: url("../../images/frontend/but_minus_plus.gif") no-repeat;
}

div.amountButtonMinus
{
	display: inline-flex;
	width: 38px;
	height: 23px;
	background: url("../../images/frontend/but_minus_big.gif") no-repeat;
}

a.amountButtonMinus
{
	display: inline-flex;
	min-width: 37px;
	max-width: 37px;
	height: 23px;
}

a.amountButtonPlus
{
	display: inline-flex;
	min-width: 37px;
	max-width: 37px;
	height: 23px;
}

a.amountButtonDisabled
{
	background-color: white;
	opacity: 50%;
}

/**
 * Article Menu
 */
div.menuStepInformation
{
	margin-top: 20px;
	margin-bottom: 20px;
}

div.menuCategory
{
	padding-bottom: 20px;
	border-bottom: 1px solid #000000;
}

div.menuCategoryHeader
{
	font-weight: bold;
	border-bottom: 1px solid #000000;
	padding-bottom: 5px;
	display: content;
}

div.menuProduct
{
	width: 100%;
	margin-top: 20px;
	display: inline-block;
}

div.menuProductDescription
{
	display: inline-block;
	width: calc(100% - 70px);
}

div.menuProductName
{
	font-weight: bold;
}

div.menuCartButton
{
	float: right;
	width: 40px;
	margin: 0px 5px 1px 5px;
	background-color: green;
	border-radius: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
}

/**
 * Shopping Cart
 */
div.cartContent
{
	width: 100%;
}

div.cartAmount
{
	width: 30px;
	display: inline-block;
	vertical-align: top;
}

div.cartDescription
{
	/* 100% - cartAmount - cartPrice - cartPlusMinus - BlankSpace (15px) */
	width: calc(100% - 200px);
	display: inline-block;
}

div.cartPrice
{
	width: 80px;
	display: inline-block;
	vertical-align: top;
}

div.cartPlusMinus
{
	width: 75px;
	height: 23px;	
	display: inline-flex;
	vertical-align: top;
}

div.cartTotalSpacer
{
	height: 0px;
}

div.shoppingCartFooter
{
	font-style: italic;
	font-size: x-small;
}

/**
 * Page footer
 */ 
div.pageFooter
{
	background-color: #442615;
	color: #A69589;
	width: 100%;
}

div.centerFooter
{
	max-width: 940px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 9px;
}

span.leftFooter
{
	float: left;
	margin-top: 19px;
	font-size: 15px;
}

span.leftFooter a, span.leftFooter a:visited, span.leftFooter a:hover
{
	color: #FFFFFF;
	font-weight: bold;
	text-transform: uppercase;
	margin-right: 30px;
}

span.rightFooter
{
	float: right;
	margin-top: 19px;
	font-size: 15px;
}

div.innerFooter
{
	border: 1px solid #5F4434;
	text-align: center;
	padding: 10px;
}

div.phoneFooterImpressum
{
	display: none;
}

span.additiveLegend
{
	font-size: 12px;
}

/**
 * Attention View
 */
div.attentionView
{
	margin-left: auto;
	margin-right: auto;
}

div.attentionTitle
{
	text-align: center;
	font-weight: bold;
	margin-bottom: 20px;
}

div.attentionDescription
{
	text-align: center;
	margin-bottom: 20px;
}

div.attentionButtons
{
	text-align: center;
}

button.attentionButton
{
	cursor: pointer;
}

/**
 * Coupon View, ShoppingCart, Checkout
 */
div.couponRow, div.shoppingCartRow, div.checkoutRow
{
	width: 100%;
	display: inline-flex;
	margin-bottom: 5px;
}

div.couponDesc, div.checkoutDesc
{
	display: inline-flex;
	min-width: 160px;
}

div.couponInput, div.checkoutInput
{
	display: inline-flex;
	width: 100%;
}

div.couponCancel, div.shoppingCartCancel
{
	width: 50%;
}

div.couponRedeem, div.shoppingCartCheckout
{
	width: 50%;
	text-align: right;
}

/**
 * Checkout View
 */
div.checkoutInput > input.checkoutFullLine
{
	width: 303px;
}

div.checkoutInput > select.checkoutFullLine
{
	width: 308px;
}

div.checkoutInput > input[name=tele_prefix]
{
	width: 134px;
}

div.checkoutInput > input[name=tele_suffix]
{
	width: 149px;
}

div.checkoutInput > textarea.checkoutFullLine
{
	width: 300px;
}

div.checkoutDescTextarea
{
	min-width: 160px;
}

div.checkoutBottomSpace
{
	margin-bottom: 30px;
}

div.checkoutFootNote > div > sup
{
	margin-right: 5px;
}

div.checkoutFootNote
{
	font-style: italic;
}

span.checkoutTelephoneDevider
{
	width: 15px;
	text-align: center;
}

span.checkoutTitleDesc
{
	margin-right: 10px;
}

/*div.checkoutAddressLeft
{
	float: left;
}*/

div.checkoutAddressRight
{
	/*float: right;
	text-align: right;*/
	margin-top: 15px;
}

button.checkoutChangeAddress
{
	border-radius: 5px;
}

/**
 * History
 */
div.historyEntry
{
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #000000;
	display: flow-root;
}

/**
 * Product size edit
 */
div.productEditSizes
{
	text-align: center;
	display: inline;
}

div.productEditSize
{
	width: 33%;
	display: inline-block;
}

div.productEditSizeDisabled
{
	color: red;
	display: inline;
}













/**
 * OLD STUFF TO BE REPLACED!!!!
 */
table.content
{
	margin-top: 40px;
	margin-bottom: 100px;
	max-width: 940px;
	width: 90%;
}

.formDescLabel
{
	font-weight: bold;
	white-space: nowrap;
}

input[type="text"], select, textarea
{
	border: 1px solid #CCCCCC;
	border-radius: 2px;
	box-shadow: 3px 3px 5px #EEEEEE;
	color: #444444;
	padding-left: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
	width: 100%;
}

input:focus, select:focus, textarea:focus
{
	background-color: #E5E5E5;
	border: 1px solid #FFFFFF;
	outline: medium none;
}

input[type="submit"], button
{
	background: none repeat scroll 0 0 #D60B0E;
	border: 0 none;
	border-radius: 2px;
	box-shadow: 3px 3px 5px #AAAAAA;
	color: #FFFFFF;
	cursor: pointer;
	font-weight: bold;
	margin: 10px 0;
	padding: 5px 10px;
}

input[type="submit"][disabled], button[disabled]
{
	background: none repeat scroll 0 0 #c9bdbd;
	border: 0 none;
	border-radius: 2px;
	box-shadow: 3px 3px 5px #AAAAAA;
	color: #FFFFFF;
	cursor: default;
	font-weight: bold;
	margin: 10px 0;
	padding: 5px 20px;
}

.redBold
{
	font-weight: bold;
	color: #FF0000;
}

.privacyBack
{
	vertical-align: super;
}