/* @override http://dps206.dev/templates/dps/frontend/_resources/styles/framework.css
	http://www.dsq206.com/templates/dps/frontend/_resources/styles/framework.css */
	/*
	Shopware CSS-Framework
	
	@author:	Tino Hußlack (c) Wizmo
	@version	v1.0
	@date: 		11-08-2011
	@package:	css/framework
	
	
	Blueprint grid.css file for version 1.0
	Width: 940px
	Columns: 12
	Column width: 60px
	Gutter width: 20px
			
	
	CSS RESET
	------------------------------
	based on YUI 2 Reset
	License: http://developer.yahoo.com/yui/license.html
	Version: 2.8.1
	
	
	FRAMEWORK
	------------------------------
	based on BlueprintCSS Framework
	License: http://wiki.github.com/joshuaclayton/blueprint-css/license
	Version: 0.8
	
*/ /*	GRID GLOBAL
	------------------------ */
	/* --------------------------------------------------------------

   grid.css
   * Sets up an easy-to-use grid of 24 columns.

   By default, the grid is 950px wide, with 24 columns
   spanning 30px, and a 10px margin between columns.

   If you need fewer or more columns, namespaces or semantic
   element names, use the compressor script (lib/compress.rb)

-------------------------------------------------------------- */
	/* A container should group all your columns. */
.container {
	width: 940px;
	margin: 0 auto;
}

/* Use this class on any .span / container to see the grid. */
.__showgrid {
	background: url(src/940grid.png) no-repeat center -2px; 
/*	background: url(src/DS206-06-E-Produktdetail-Fashion-05-Accordion-01.jpg) no-repeat center -2px; */

/*	background: url(src/DS206-02-E-Kategorieeinstieg-03-MouseOver.jpg) no-repeat center -2px;
*/
}

/* Columns
-------------------------------------------------------------- */
	/* Sets up basic grid floating and margin. */
.column,.span-1,.span-2,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-10,.span-11,.span-12
	{
	float: left;
	margin-right: 20px;
}

/* The last column in a row needs this class. */
.last {
	margin-right: 0;
}

/* Use these classes to set the width of a column. */
.span-1 {
	width: 60px;
}
.span-1.extended {
	width: 80px;
}

.span-2 {
	width: 140px;
}

.span-2.extended {
	width: 160px;
}

.span-3 {
	width: 220px;
}

.span-3.extended {
	width: 240px;
}

.span-4 {
	width: 300px;
}

.span-4.extended {
	width: 320px;
}

.span-5 {
	width: 380px;
}

.span-5v {
	width: 400px;
}

.span-6 {
	width: 460px;
}

.span-6.extended {
	width: 480px;
}

.span-7 {
	width: 540px;
}

.span-7.extended {
	width: 560px;
}

.span-8 {
	width: 620px;
}

.span-8.extended {
	width: 640px;
}

.span-9 {
	width: 700px;
}

.span-9.extended {
	width: 720px;
}

.span-10 {
	width: 760px;
}

.span-10.extended {
	width: 800px;
}

.span-11 {
	width: 860px;
}

.span-11.extended {
	width: 880px;
}

.span-12 {
	width: 940px;
	margin-right: 0;
}

.no-rightmargin { 
	margin-right: 0; 
}
.no-leftmargin { 
	margin-left: 0; 
}


.span-10 .span-1 {
	width: 56px;
}

.span-10 .span-2 {
	width: 132px;
}

.span-10 .span-3 {
	width: 208px;
}

.span-10 .span-4 {
	width: 284px;
}

.span-10 .span-5 {
	width: 360px;
}

.span-10 .span-6 {
	width: 436px;
}

.span-10 .span-6.no-rightmargin {
	width: 455px;
}

.span-10 .span-7 {
	width: 512px;
}

.span-10 .span-8 {
	width: 588px;
}

.span-10 .span-9 {
	width: 664px;
}


/* Use these classes to set the width of an input. */
input.span-1,textarea.span-1,input.span-2,textarea.span-2,input.span-3,textarea.span-3,input.span-4,textarea.span-4,input.span-5,textarea.span-5,input.span-6,textarea.span-6,input.span-7,textarea.span-7,input.span-8,textarea.span-8,input.span-9,textarea.span-9,input.span-10,textarea.span-10,input.span-11,textarea.span-11,input.span-12,textarea.span-12
	{
	border-left-width: 1px;
	border-right-width: 1px;
	padding-left: 5px;
	padding-right: 5px;
}

input.span-1,textarea.span-1 {
	width: 48px;
}

input.span-2,textarea.span-2 {
	width: 128px;
}

input.span-3,textarea.span-3 {
	width: 208px;
}

input.span-4,textarea.span-4 {
	width: 278px;
}
input.span-4.last,textarea.span-4.last {
	width: 288px;
}

input.span-5,textarea.span-5 {
	width: 368px;
}

input.span-6,textarea.span-6 {
	width: 448px;
}

input.span-7,textarea.span-7 {
	width: 528px;
}

input.span-8,textarea.span-8 {
	width: 608px;
}

input.span-9,textarea.span-9 {
	width: 688px;
}

input.span-10,textarea.span-10 {
	width: 768px;
}

input.span-11,textarea.span-11 {
	width: 848px;
}

input.span-12,textarea.span-12 {
	width: 928px;
}


.span-10 input.span-1,.span-10 textarea.span-1 {
	width: 36px;
}

.span-10 input.span-2,.span-10 textarea.span-2 {
	width: 116px;
}

.span-10 input.span-3,.span-10 textarea.span-3 {
	width: 196px;
}

.span-10 input.span-4,.span-10 textarea.span-4 {
	width: 276px;
}

.span-10 input.span-5,.span-10 textarea.span-5 {
	width: 356px;
}

.span-10 input.span-6,.span-10 textarea.span-6 {
	width: 436px;
}

.span-10 input.span-7,.span-10 textarea.span-7 {
	width: 516px;
}

.span-10 input.span-8,.span-10 textarea.span-8 {
	width: 596px;
}

.span-10 input.span-9,.span-10 textarea.span-9 {
	width: 676px;
}

.span-10 input.span-10,.span-10 textarea.span-10 {
	width: 756px;
}


/* Add these to a column to append empty cols. */
.append-1 {
	padding-right: 80px;
}

.append-2 {
	padding-right: 160px;
}

.append-3 {
	padding-right: 240px;
}

.append-4 {
	padding-right: 320px;
}

.append-5 {
	padding-right: 400px;
}

.append-6 {
	padding-right: 480px;
}

.append-7 {
	padding-right: 560px;
}

.append-8 {
	padding-right: 640px;
}

.append-9 {
	padding-right: 720px;
}

.append-10 {
	padding-right: 800px;
}

.append-11 {
	padding-right: 880px;
}

/* Add these to a column to prepend empty cols. */
.prepend-1 {
	padding-left: 80px;
}

.prepend-2 {
	padding-left: 160px;
}

.prepend-3 {
	padding-left: 240px;
}

.prepend-4 {
	padding-left: 320px;
}

.prepend-5 {
	padding-left: 400px;
}

.prepend-6 {
	padding-left: 480px;
}

.prepend-7 {
	padding-left: 560px;
}

.prepend-8 {
	padding-left: 640px;
}

.prepend-9 {
	padding-left: 720px;
}

.prepend-10 {
	padding-left: 800px;
}

.prepend-11 {
	padding-left: 880px;
}

.span-10 .w20 {
	width: 135px;
}


.span-10 .prepend-1 {
	padding-left: 76px;
}

.span-10 .prepend-2 {
	padding-left: 152px;
}

.span-10 .prepend-3 {
	padding-left: 228px;
}

.span-10 .prepend-4 {
	padding-left: 304px;
}

.span-10 .prepend-5 {
	padding-left: 380px;
}

.span-10 .prepend-6 {
	padding-left: 456px;
}

.span-10 .prepend-7 {
	padding-left: 532px;
}

.span-10 .prepend-8 {
	padding-left: 608px;
}

.span-10 .span-9 {
	width: 664px;
}



/* Border on right hand side of a column. */
.border {
	padding-right: 9px;
	margin-right: 10px;
	border-right: 1px solid #ddd;
}

/* Border with more whitespace, spans one column. */
.colborder {
	padding-right: 49px;
	margin-right: 50px;
	border-right: 1px solid #ddd;
}

/* Use these classes on an element to push it into the
next column, or to pull it into the previous column.  */
.pull-1 {
	margin-left: -80px;
}

.pull-2 {
	margin-left: -160px;
}

.pull-3 {
	margin-left: -240px;
}

.pull-4 {
	margin-left: -320px;
}

.pull-5 {
	margin-left: -400px;
}

.pull-6 {
	margin-left: -480px;
}

.pull-7 {
	margin-left: -560px;
}

.pull-8 {
	margin-left: -640px;
}

.pull-9 {
	margin-left: -720px;
}

.pull-10 {
	margin-left: -800px;
}

.pull-11 {
	margin-left: -880px;
}

.pull-12 {
	margin-left: -960px;
}

.pull-1,.pull-2,.pull-3,.pull-4,.pull-5,.pull-6,.pull-7,.pull-8,.pull-9,.pull-10,.pull-11,.pull-12
	{
	float: left;
	position: relative;
}

.push-1 {
	margin: 0 -80px 1.5em 80px;
}

.push-2 {
	margin: 0 -160px 1.5em 160px;
}

.push-3 {
	margin: 0 -240px 1.5em 240px;
}

.push-4 {
	margin: 0 -320px 1.5em 320px;
}

.push-5 {
	margin: 0 -400px 1.5em 400px;
}

.push-6 {
	margin: 0 -480px 1.5em 480px;
}

.push-7 {
	margin: 0 -560px 1.5em 560px;
}

.push-8 {
	margin: 0 -640px 1.5em 640px;
}

.push-9 {
	margin: 0 -720px 1.5em 720px;
}

.push-10 {
	margin: 0 -800px 1.5em 800px;
}

.push-11 {
	margin: 0 -880px 1.5em 880px;
}

.push-12 {
	margin: 0 -960px 1.5em 960px;
}

.push-1,.push-2,.push-3,.push-4,.push-5,.push-6,.push-7,.push-8,.push-9,.push-10,.push-11,.push-12
	{
	float: left;
	position: relative;
}

/*  */ /* Misc classes and elements
-------------------------------------------------------------- */
	/* In case you need to add a gutter above/below an element */
div.prepend-top,.prepend-top {
	margin-top: 1.5em;
}

div.append-bottom,.append-bottom {
	margin-bottom: 1.5em;
}

/* Use a .box to create a padded box inside a column.  */
.box {
	padding: 1.5em;
	margin-bottom: 1.5em;
}

/* Use this to create a horizontal ruler across a column. */
hr {
	background: #ddd;
	color: #ddd;
	clear: both;
	float: none;
	width: 100%;
	height: 1px;
	margin: 0 0 17px;
	border: none;
}

hr.space {
	background: #fff;
	color: #fff;
	visibility: hidden;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */
.clearfix:after,.container:after {
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	overflow: hidden;
}

.clearfix,.container {
	display: block;
}

/* Regular clearing
   apply to column that should drop below previous ones. */
.clear {
	clear: both;
}

/* Sets the margin to fit the full layout width of dps template */
.span-12.bleed-fullwidth {
	width: 1000px;
	margin-right: 0;
	margin-left: -30px;
	position: relative;
	overflow: hidden;
}

.row {
	overflow: hidden;
	clear: both;
}

.bleed-fullwidth .span-4 {
	width: 320px;
}

.bleed-left {
	margin-left: -20px;
}

.bleed-right {
	margin-right: -20px;
}

.bleed-both {
	margin-left: -20px;
	margin-right: -20px;
}

.layout-percent .span-4 {
	width: 33%;
}

/*	CLEAR FLOATED ELEMENTS
	------------------------ */
.clear {
	clear: both;
	display: block;
	width: 0;
	height: 1px;
	float: none;
	font-size: 0;
	line-height: 0;
	padding: 0 !important;
	margin: 0 !important;
}

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0
}

.clearfix {
	display: inline-block
}

* html .clearfix {
	height: 1%
}

.clearfix {
	display: block
}

hr.space {
	background: #fff;
	color: #fff;
}

/*	CSS-RESET
	------------------------ */
html {
	color: #000;
	background: #FFF
}

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;
	vertical-align: baseline;
	background: transparent;
	line-height: 16px;
}

article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary
	{
	display: block;
}

ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

mark {
	background-color: #ff9;
	color: #000;
	font-family: ProximaNovaA-SemiBoldItalic;
}

del {
	text-decoration: line-through;
}

abbr[title],dfn[title] {
	border-bottom: 1px dotted #000;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

fieldset,img {
	border: 0
}

address,caption,cite,code,dfn,em,strong,th,var,optgroup {
	font-style: inherit;
	font-weight: inherit
}

del,ins {
	text-decoration: none
}

li {
	list-style: none
}

caption,th {
	text-align: left
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal
}

q:before,q:after {
	content: ''
}

abbr,acronym {
	border: 0;
	font-variant: normal
}

sup {
	vertical-align: baseline
}

sub {
	vertical-align: baseline
}

legend {
	color: #000
}

input,button,textarea,select,optgroup,option {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit
}

input,button,textarea,select {
	font-size: 100%
}

/*	GENERAL & TYPOGRAPHY
	------------------------ */
html {
	font: 11px/1.3em "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
	color: #333;
}

p {
	margin: 0 0 1.5em;
}

img.left {
	float: left;
	margin: 1.5em 1.5em 1.5em 0;
	padding: 0;
}

img.right {
	float: right;
	margin: 1.5em 0 1.5em 1.5em;
}

blockquote {
	margin: 1.5em;
	color: #666;
	font-style: italic;
}

em,dfn {
	font-style: italic;
}

dfn {
	font-family: ProximaNovaA-SemiBold;
}

sup,sub {
	line-height: 0;
}

abbr,acronym {
	border-bottom: 1px dotted #666;
}

address {
	margin: 0 0 1.5em;
	font-style: italic;
}

del {
	color: #666;
}

pre {
	margin: 1.5em 0;
	white-space: pre;
}

pre,code,tt {
	font: 1em 'andale mono', 'lucida console', monospace;
	line-height: 1.5;
}

ul {
	list-style-type: disc;
}

ol {
	list-style-type: decimal;
}

dl {
	margin: 0 0 1.5em 0;
}

dl dt {
	font-family: ProximaNovaA-SemiBold;
}

dd {
	margin-left: 1.5em;
}

th {
	font-family: ProximaNovaA-SemiBold;
}

th,td,caption {
	padding: 4px 10px 4px 5px;
}

caption {
	background: #eee;
}

hr {
	background: #ddd;
	color: #ddd;
	clear: both;
	float: none;
	width: 100%;
	height: .1em;
	margin: 0 0 1.45em;
	border: none;
}
/* 2012/10/26 delete after 20 days without nuclear explosion. 
.smallsize {
	font-size: .8em;
	margin-bottom: 1.875em;
	line-height: 1.875em;
}
*/
.large {
	font-size: 12px;
	line-height: 12px;
	margin-bottom: 21px;
	text-align: center !important;
}

input.large {

}

.hide {
	display: none;
}

.quiet {
	color: #666;
}

.loud {
	color: #000;
}

.highlight {
	background: #ff0;
}

.top {
	margin-top: 0;
	padding-top: 0;
}

.bottom {
	margin-bottom: 0;
	padding-bottom: 0;
}

.alt {
	color: #666;
	font-family: "Warnock Pro", "Goudy Old Style", "Palatino",
		"Book Antiqua", Georgia, serif;
	font-style: italic;
	font-weight: normal;
}

.hide {
	display: none;
	visibility: hidden;
	height: 0px;
	width: 0px;
}

.none {
	padding: 0;
	margin: 0;
	clear: both;
	width: 100%;
	overflow: hidden;
}

.uppercase {
	text-transform: uppercase
}

.lowercase {
	text-transform: lowercase
}

.hidden {
	text-indent: -9999em;
	display: none;
}

strong,
.bold {
	font-family: ProximaNovaA-SemiBold;
}

.big {
	font-size: 18pt;
}

.italic {
	font-style: italic;
}

.left {
	float: left !important;
}

.right {
	float: right !important;
}

.center {
	text-align: center;
}

.textcenter {
	text-align: center;
}

.textright {
	text-align: right;
}

.textleft {
	text-align: left;
}

.displaynone {
	display: none;
}

.hide_script {
	display: none !important;
}

/*	HORIZONTAL LINES
	------------------------ */
hr {
	background: #ddd;
	color: #ddd;
	clear: both;
	float: none;
	width: 100%;
	height: 0.1%;
	margin: 0 0 1.45em;
	border: none;
	position: static;
}

.space,.doublespace {
	background: transparent;
	border: 0 none;
	height: 10px;
	clear: both;
	float: none;
}

.doublespace {
	height: 20px;
}

hr.line {
	background: #dedede;
	width: 100%;
	height: 10px;
	visibility: visible;
	border: 0 none;
}

hr.smallline {
	width: 100%;
	height: 1px;
	visibility: visible;
	background: #ebebeb;
	border: 0 none;
	position: static;
	line-height: 0;
	font-size: 0;
}

/*	FORM ELEMENTS
	------------------------ */
	
label {
	font-family: ProximaNovaA-SemiBold;
	margin: 0px;
	padding-top: 5px;
	line-height: 22px;
	display: table-cell;
	vertical-align: center;
}

fieldset {
	padding: 1.4em;
	margin: 0 0 1.5em 0;
	border: 1px solid #ccc;
}

legend {
	font-family: ProximaNovaA-SemiBold;
	font-size: 1.2em;
}

input[type=text],input[type=password],input[type=email],input.text,input.title,textarea,select
	{
	background-color: #fff;
	border: 1px solid #bbb;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input.text:focus,
input.title:focus,
textarea:focus,
select:focus
	{
	border-color: #666;
}

input[type=text],input[type=password],input.text,input.title,textarea,select {
	margin: 0.5em 0;
}

input.title {
	font-size: 1.5em;
}

textarea {
	width: 390px;
	height: 250px;
	padding: 5px;
}

input[type=checkbox],input[type=radio],input.checkbox,input.radio {
	position: relative;
/*	top: .125em; */
}

form.inline {
	line-height: 3;
}

form.inline p {
	margin-bottom: 0;
}

.error,.notice,.success {
	padding: .0em;
	margin-bottom: 1em;
	border: 2px solid #ddd;
}

.error.span-10 {
	width: 738px;
}

.error {
	background: #FBE3E4;
	color: #8a1f11;
	border-color: #FBC2C4;
}

.notice {
	background: #FFF6BF;
	color: #514721;
	border-color: #FFD324;
}

.success {
	background-color: #E6EFC2;
	color: #264409;
	border-color: #C6D880;
}

.error a {
	color: #8a1f11;
}

.notice a {
	color: #514721;
	text-decoration: underline;
}

.success a {
	color: #264409;
}

/*	TABLE
	------------------------ */
table {
	margin-bottom: 1.4em;
}

thead {
	background-color: #F3F3F3;
	line-height: 30px;
}

thead tr {
	border: 1px solid #dfdfdf;
}

thead th {
	padding-left: 5px;
	font-family: ProximaNovaA-SemiBold;
	background-color: #F3F3F3;
}

tbody tr {
	border-bottom: 1px dashed #dfdfdf;
}
tbody tr:first-child,
tbody th:first-child {
	border-top: 0;
}

tbody td {
	padding: 10px;
}

tfoot {
	background-color: #f3f3f3;
	border: 1px solid #dfdfdf;
	border-top: none;
}

tfoot td {
	padding: 20px 10px
}

/*	HEADLINES
	------------------------ */
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	color: #111;
}

h1 {
	font-size: 3em;
	line-height: 1;
	margin-bottom: 0.5em;
	text-transform: uppercase;
}

h2 {
	font-size: 2em;
	margin-bottom: 0.75em;
}

h3 {
	font-size: 1.5em;
	line-height: 1;
	margin-bottom: 1em;
}

h4 {
	font-size: 1.2em;
	line-height: 1.25;
	margin-bottom: 1.25em;
}

h5 {
	font-size: 1em;
	font-family: ProximaNovaA-SemiBold;
	margin-bottom: 1.5em;
}

h6 {
	font-size: 1em;
	font-family: ProximaNovaA-SemiBold;
}

h1 img,h2 img,h3 img,h4 img,h5 img,h6 img {
	margin: 0;
}

/*	LINKS
	------------------------ */
a {
	text-decoration: none;
	color: #000;
}

a:hover {
	text-decoration: underline;
}

a.link {
	font-family: ProximaNovaA-SemiBold;
}

/*	RESPONSE ELEMENTS
	------------------------ */
.error,.notice,.success {
	padding: .8em;
	margin-bottom: 1em;
	border: 2px solid #ddd;
}

.error,.instyle_error,input.instyle_error {
	background: #FBE3E4;
	color: #8a1f11;
	border-color: #FBC2C4;
	clear: both;
	overflow: hidden;
}

input#email.instyle_error,
input#passwort.instyle_error,
.register .text.instyle_error,
.ui-selectmenu {
	clear: none;
}

.notice {
	background: #FFF6BF;
	color: #514721;
	border-color: #FFD324;
}

.success,.instyle_success {
	background: #E6EFC2;
	color: #264409;
	border-color: #C6D880;
}

.error a {
	color: #8a1f11;
}

.notice a {
	color: #514721;
}

.success a {
	color: #264409;
}

/* Inline validation */
input[type=text].instyle_error,input[type=password].instyle_error {
	background-color: #FBE3E4;
	color: #8a1f11;
	border-color: #FBC2C4;
}

input[type=text].instyle_success,input[type=password].instyle_success {
	background: #E6EFC2;
	color: #264409;
	border-color: #C6D880;
}

.relative {
	position: relative;
}