.red 	{ color:red; }
.green 	{ color:#33cc33; }
.bold 	{ font-weight:bold; }
.right	{ text-align: right !important; }



#f-anz { position:relative; float:right; }


* {
    box-sizing: border-box;
}

body {
	padding: 		20px;
	min-width:		320px;
	font-family: 	sans-serif;
	font-size:		14px;
	background: 	#f6f6f6;
}





@font-face {
    font-family:  'Open Sans';
    src:  url('fonts/OpenSans-Light.woff?201605230943') format('woff'),  url('fonts/OpenSans-Light.ttf?201605230943') format('truetype');
    font-weight:  300;
    font-style:  normal;
}
@font-face {
    font-family:  'Open Sans';
    src:  url('fonts/OpenSans-Regular.woff?201605230943') format('woff'),  url('fonts/OpenSans-Regular.ttf?201605230943') format('truetype');
    font-weight:  normal;
    font-style:  normal;
}
@font-face {
    font-family:  'Open Sans';
    src:  url('fonts/OpenSans-Semibold.woff?201605230943') format('woff'),  url('fonts/OpenSans-Semibold.ttf?201605230943') format('truetype');
    font-weight:  600;
    font-style:  normal;
}
@font-face {
    font-family:  'Open Sans';
    src:  url('fonts/OpenSans-Bold.woff?201605230943') format('woff'),  url('fonts/OpenSans-Bold.ttf?201605230943') format('truetype');
    font-weight:  bold;
    font-style:  normal;
}
@font-face {
    font-family:  'Open Sans';
    src:  url('fonts/OpenSans-ExtraBold.woff?201605230943') format('woff'),  url('fonts/OpenSans-ExtraBold.ttf?201605230943') format('truetype');
    font-weight:  800;
    font-style:  normal;
}


.mydel, .mychg {
	font-family: 		"FontAwesome";
	font-style: 		bold !important;
}


.button {
    padding:  			2px 10px 2px 10px;
    line-height:  		32px;
    border-radius:  	3px;
    background-clip:  	padding-box;
    font-size:  		14px;

    background-image:  	-ms-linear-gradient(top,  #fff,  #f8f8fa);
    background-image:  	linear-gradient(to bottom,  #fff 0%,  #f8f8fa 100%);

    display:  			inline-block;
    position:  			relative;
    font-weight:  		bold;
    text-align:  		left;
    cursor:  			pointer;
	
    border:  			1px solid #dadae5;
	background-color:  	#fff;
    color:  			#2e434f;
}
a.button  { text-decoration: none; }


.button:hover {
    background:  		#fff;
    color:  			#84b709;
    border-color:  		#84b709;
}
.button:focus {
    outline:  			none;
}

.b-center {
    text-align:  		center;
}
.b-checkout {
	background-image: linear-gradient(to bottom, #b1f806 0%, #84b709 100%);
	color: #fff;
	width:	25%;
}
.b-checkout:hover { background-color: #84b709; color:white; }
.b-checkout span.fa {
	position:		relative;
	float:			right;
	font-size:		18px;
	font-weight: 	bold;
	line-height:  	32px;
}
.b-shoppen {
	background-image: linear-gradient(to bottom, #2e434f 0%, #4a6c7f 100%);
	color: 			#fff;
	width:			25%;
}
.b-shoppen:hover { background-color: #2e434f; color:white;}
.b-shoppen span.fa {
	position:		relative;
	float:			left;
	font-size:		18px;
	font-weight: 	bold;
	line-height:  	32px;
}
@media (max-width: 700px), (max-device-width: 700px) { .b-checkout, .b-shoppen		{ width:100%; margin-bottom:10px; } }

.b-right 	{ float:right; }
.b-left		{ float:left;  }


textarea, input[type="text"] {
    border-radius:  	3px;
    background-clip:  	padding-box;
    box-sizing:  		border-box;
    line-height:  		19px;
    font-size:  		14px;
    width:  			40px;
    padding:  			10px 10px 9px 10px;
    box-shadow:  		inset 0 1px 1px #dadae5;
    background:  		#f8f8fa;
    border:  			1px solid #dadae5;
    border-top-color:  	#cbcbdb;
    color:  			#4a6c7f;
    text-align:  		left;
	position:			relative;
	float:				left;
}
textarea:focus, input[type="text"]:focus {
    box-shadow:  		0 0 0 transparent;
    outline:  			none;
    border-color:  		#84b709;
    background:  		#fff;
    color:  			#2e434f;
}

input[type="submit"] {
    cursor: 	pointer;
    position: 	relative;
    float: 	left;
}

/* zusammenfassung der rechnungsinformation */
.summary-area {
	padding: 		20px;
	border:			1px solid #dadae5;
	margin-top:		20px;
	margin-bottom:	20px;
	border-radius:	3px;
	background-clip:padding-box;
	line-height:	24px;
	display:		block;
	position:		relative;
}
.summary-area .inner-part:after {
	content: 		"";
	display: 		table;
	clear: 			both;
}
.sum-list {
    padding:  		20px 0px 20px 0px;
    border:  		0 none;
    background:  	transparent;
    margin:  		0;
    float:  		right;
    width:  		50%;
}
@media (max-width: 700px), (max-device-width: 700px) { .sum-list { width:100%; } }


.sum-list li {
	list-style:		none;
} 
.sum-list li:before {
	display: 		table;
	content: 		"";
	line-height: 	0;
}
.sum-list li:after {
	clear: 			both;
}
.li-label { 
	width:			70%;
	float:			left;
}
.li-value {
	width:			30%;
	float:			left;
	text-align:		right;
}
.summary {
	font-weight: 	bold;
	color: 			#4a6c7f;
	font-size:		18px;
	border-top: 	2px solid #4a6c7f;
}
.tax {
	font-size:		12px;
}

.img-box-inner i {
	width: 			100%;
	line-height: 	66px;
	font-size: 		45px;
	color: 			#ccc;
	text-align: 	center;
}

.product-all {
	width:			50%;
	float:			left;
	padding-left:	20px;
}
.product-all::before { content: " "; display: table; }
.product-all::after   { clear:both; }

.product-image {
	width:			14%;
	float:			left;
	padding: 		10px 0px 10px 0px;
	line-height: 	24px;
	display: 		inline-block;
}
.img-box {
	border-radius: 	2px;
	background-clip: padding-box;
	max-width: 		70px;
	max-height: 	70px;
	border: 		1px solid #dadae5;
	margin: 		0 auto;
	position:		relative;
	left:			-20px;
}
.img-box-inner {
	width: 			100%;
	position: 		relative;
	padding-bottom: 100%;
	height: 		0;
}
.img-box-inner img {
	padding: 		5%;
	position: 		absolute;
	top: 			0;
	bottom: 		0;
	left: 			0;
	right: 			0;
	margin: 		auto;
	display: 		block;
	max-width: 		100%;
	max-height: 	100%;
	height: 		auto;
}

.product-title {
	font-size:		16px;
	font-weight:	bold;
	color:			#2e434f;
	line-height:	24px;
	margin-top:		10px !important;
}

.product-head 		{ float:left; width:50%; padding-top:26px;}
.product-descr 		{   }
.product-add-info 	{	}


.product-info,
.product-number,
.product-unit-price, 
.product-total-price,
.product-action  { 
	position:		relative;
	line-height: 	24px; 
	padding: 		10px; 
	padding-top:	26px; 
	float:			left; 
	width:			15%;
}
.product-unit-price, .product-total-price 	{ padding-top:	30px; }
.product-action, .product-number			{ padding-top:	20px; }
.thead + .product-unit-price, 
.thead + .product-total-price, 
.thead + .product-action, 
.thead + .product-number 					{ padding-top:	26px; }


/* width calulation:   .product-all (.product-head) + .product-number + .product-unit-price + .product-total-price + .product-action = 100%  */
/*						    50%                     +       14%       +          15%        +           15%        +         6%      = 100%  */
.product-action 		{ float:	right;  width:	6%; }
.product-total-price{ font-weight:bold;	}
.product-number		{ width: 14%; min-width:110px;}
.product-info		{ width: 86%; padding:0;}
.product-info p 		{ margin:0; }

.product-action:after {
    content:  		"";
    display:  		table;
    clear:  		both;
}

.label-unit-price, 	
.label-total-price, 	
.label-number {
	color: 			#4a6c7f;
	font-weight:	bold;
	display:		none;
}

.basket-table {
	margin-top:			10px;
	background-color: 	#fff;
	padding: 			20px 20px 20px 20px;
	border: 			1px solid #dadae5;
	border-radius: 		3px;
	background-clip: 	padding-box;
	line-height:		24px;
	position:			relative;
}
.thead {
	font-weight: 	bold;
	color: 			#4a6c7f;
	line-height: 	24px;
	font-size:		16px;
}
.trow { border-bottom: 1px solid #dadae5;}
.trow::before, .trow::after { 
	display: 		table;
	content: 		"";
	line-height: 	0;
}
.trow::after { clear: both; }

.tabhead { border-bottom: 2px solid #dadae5;}
.tabhead::before, .tabhead::after { 
	display: 		table;
	content: 		"";
	line-height: 	0;
}
.tabhead::after { clear: both; }