/**
 *
 * APART Global Stylesheet
 *
 * Contains basic style information for elements used on every page.
 *
 * @style       Standard Layout
 * @media       screen
 * @css-for		Mozilla Firefox
 * @version     0.1
 * @author      Milan Matull <http://www.twoantennas.com>
 * @copyright   Two Antennas, Matull & Schieben GbR
 * @licensor    Fork Unstable Media GembH
 * @layout      12 columns at 71px + 10 px gutter each
 				
 				in pixels:
 				| 972 |
 				| 5 | 71 | 10 | 71 | 10 | 71 | 10 | 71 | 10 | 71 | 10 | 71 | 10 | 71 | 10 | 71 | 10 | 71 | 10 | 71 | 10 | 71 | 10 | 71 | 5 | 	
 							 				
 * @todo		Extract and define color codes and prepare for theming in separate stylesheet.
 * 				Do further abstractions on elements that will be repeated in other sections.
 */

body {
	background: #fff;
	color: #5c5f65;
	font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
}


a {
	text-decoration: none;
	color: #5C5F65;
}

a:active, 
a:focus {
	outline: 0 none; /* hide dashed link outline */
}

h2 {
	font-size: 18px;
}

h4 {
	margin: 0 0 18px;
	font-size: 12px;
	line-height: 18px;
	font-weight: bold;
}

p {
	font-size: 12px;
	line-height: 18px;
}

p a {
	color: #5c5f65;
	text-decoration: underline;
}

p a:hover {
}

p strong, 
span strong {
	font-weight: bold;
}

img.loading {
	background: transparent URL('../img/nav/loading-s-white.gif') no-repeat 50% 50%;
}
.loading {
	background: transparent URL('../img/nav/loading-s-white.gif') no-repeat 50% 50%;
}

object, 
embed {
	margin: 0;
	padding: 0;
	outline: none;
}

/**
 * @section text
 * 
 * Text helper classes.
 * 
 */

.ap-text-small {
	font-size: 10px;
	line-height: 12px;
}

.ap-text-highlight {
	color: #82426f;
}



/**
 * @section global
 * 
 * Global wrapper element. Centered horizontally, Shadow applied via background image.
 * 
 */

#global {
	margin: 0 auto;
	width: 972px;
	padding: 0 9px;
	background: transparent url(../img/nav/global-bg.png) 0 0 repeat-y;
}

/**
 * @section header
 * 
 * Page header. position to relative, so elements within can be positioned absolute.
 * 
 */

#header {
	position: relative;
	width: 960px;
	height: 120px;
	margin: 0 6px;
	background: transparent url(../img/nav/header.png) 0 1px no-repeat;
	z-index: 100; /* @todo	global z-index stacking */
}

#header ul,
#header li {
	float: left;
	width: auto;
	font-weight: bold;
	text-transform: uppercase;
}


/**
 * @section 	logo
 * @see 		http://phark.typepad.com/phark/2003/08/accessible_imag.html
 * @todo		set background-color separate, so we can prepare theming in a central place.
 *
 * APART Logo. Set via transparent png mask. logo color set via background color. 
 * Text replacement done via negative text-indent.
 * 
 */

#logo {
	position: absolute;
	left: 367px;
	top: 15px;
	width: 246px;
	height: 42px;
	background-image: url("../img/nav/apart-logo-mask.png");
	background-position: 0 0;
	background-repeat: no-repeat;
	background-color: #5c5f65; /* replace */
	
}

#logo a {
	display: block;
	width: 246px;
	height: 42px;
	text-indent: -10000px;
}

/**
 * @section 	nav-meta
 * @todo		add .last in html instead of :last-child as internet explorer won't support it.
 *
 * Global navigation visible on every page, but not as important as main navigation
 * 
 * Shares common styles with nav-action. menu items: 'anmelden' | 'service/hilfe' | 'freunde einladen'.
 * Dotted background set to repeat over whole width. 
 * 
 */
 
#nav-meta {
	position: absolute;
	left: 1px;
	bottom: 40px;
	width: 960px;
	width: 958px;
	height: 16px;
	background: transparent url(../img/nav/nav-meta.png) 0 50% repeat-x;
}

#nav-meta ul, 
#nav-action ul {
	margin: 0 0 3px;
}

#nav-meta li, 
#nav-action li {
	font-size: 10px;
	line-height: 13px;
	background: transparent url(../img/nav/nav-action-li.png) 100% 0 no-repeat;
	padding: 0 1px 0 0;
}

#nav-meta li {
	background-color: #fff;
}

#nav-meta a, 
#nav-action a {
	padding: 0 11px 0 12px;	
	color: #999;
	background: #fff;
}

/** 
 * Hide right border on last list element.
 */ 

#nav-meta li.last,
#nav-action li.last {
	background: none;
	padding: 0;
}

#nav-meta a:hover, 
#nav-action a:hover {
	color: #ccc;
}

#nav-meta li {
	position: relative;
}

#nav-meta li .box {
	display: none;
}

/** 
 *
 * @todo		Set to JavaScript lightbox instead.
 *
 * Display child element .box if list element has class focus
 *
 */ 

#nav-meta li.focus .box {
	display: block;
}

/** 
 * @todo	Set to JavaScript lightbox instead.
 */ 


#nav-meta #nav-meta-invite .box {
	position: absolute;
	left: 66px;
	top: 52px;
	width: 496px;
	height: 527px;
	background: #fff;
}

/**
 * @section 	nav-meta-logged-id
 *
 * Navigation elements in nav-meta if user is logged in.
 * 
 */

#nav-meta #nav-meta-logged-in {
	color: #999;
	padding: 0 11px 0 12px;
}

#nav-meta-logged-in a {
	padding: 0;
}

/**
 * @section 	nav-action
 * @todo		add .last in html instead of :last-child as internet explorer won't support it.
 *
 * Global navigation containing quick acces to common actions.
 * 
 * Shares common styles with nav-meta. menu items: 'APART Tasche' | 'Newsletter' | 'Direkbestellung'.
 * Form elelements are displayed using .selected class
 * 
 */
 
#nav-action {
	position: absolute;
	right: 1px;
	bottom: 0;
	height: 56px;
	z-index: 1000;
}

#nav-action ul {
	position: relative;
	width: 316px;
}

#nav-action li {
	float: right;
}

#nav-action li.selected a.nav-action-link {
	display: block;
	background: transparent url(../img/nav/box-arrow-down.png) 50% 100% no-repeat;		
	padding: 0 11px 9px 12px; /* add bottom padding, so the arrow can be displayed */
}

#nav-action form { /* replace, to javascript */
	display: none; 
/*	border-left: 1px solid rgba(0,0,0,0.1);*/
}

#nav-action li.selected form {
	display: block;
	position: absolute;
	top: 23px;
	left: 0;
	height: 40px;
}

#nav-action fieldset {
	position: relative;
	width: 318px;
}

#nav-action input.text {
	float: left;
	margin: 0 0 0 12px;
	padding: 5px 22px 4px;
	border: none;	
	color: #b2b2b2;
	font-size: 12px;
}

#nav-action .ap-submit, 
.ap-submit {
	border: none;
	padding: 0;
	margin: 0;
	width: 113px;
	height: 24px;
	background: transparent url(../img/nav/nav-action-button.png) 0 0 no-repeat;
	text-transform: uppercase;
	color: #fff;
	text-align: center;	
	padding: 0 0 1px 6px;	
	position: absolute;
	right: 5px;
	cursor: pointer;	
	font-size: 10px;
	line-height: 14px;
}

#nav-action .ap-submit:hover, 
.ap-submit:hover {
	background: transparent url(../img/nav/nav-action-button.png) 0 -24px no-repeat;	
}

/**
 * @section 		nav-action-basket
 * 
 * Inline Basket. Shows number of articles in basket, price and link to detail basket.
 * 
 */

#nav-action-basket form {
	background: transparent url(../img/nav/nav-action-basket.png) 5px -3px no-repeat;
	padding: 0 0 0 68px;
}

#nav-action-basket form fieldset {
	width: 250px;
}

#nav-action-basket dl, 
#nav-action-basket dt, 
#nav-action-basket dd {
	float: left;
	font-size: 11px;
	line-height: 23px;
	color: #fff;
}

#nav-action-basket dt {
	margin: 0 15px 0 0;
	_display: inline;
}

/**
 * @section 		nav-action-newsletter
 * @todo			setup .ap-info tooltip 
 *
 * Inline newsletter subscription.
 * 
 */
 
#nav-action-newsletter input.text {
	width: 160px;
	width: 116px; /* minus padding */
	background: transparent url(../img/nav/nav-action-newsletter-input-text.png) 0 0 no-repeat;
}

#nav-action-newsletter .ap-info {
	float: left;
	width: auto;
	margin: 3px 6px;
}

#nav-action-newsletter .ap-info a {
	display: block;
	width: 18px;
	height: 18px;
	background: transparent url(../img/ico/ap-info-transparent.png) 0 0 no-repeat;
	text-indent: -10000px;
}

.ap-key-value .ap-info {
	position: absolute;
	right: 38px;
	top: -5px;
}

.ap-key-value .ap-info a {
	display: block;
	width: 18px;
	height: 18px;
	background: transparent url(../img/ico/ap-info-transparent.png) 0 0 no-repeat;
	text-indent: -10000px;
}

/**
 * @section 		nav-action-direct-order
 *
 * Inline newsletter subscription
 * 
 */
 
#nav-action-direct-order input.text {
	width: 175px;
	width: 131px; /* minus padding */
	background: transparent url(../img/nav/nav-action-direct-order-input-text.png) 0 0 no-repeat;	
}


/**
 * @section 	nav-main
 * 
 * Global main navigation. Quick access to main categories. Opens Flyout menus.
 * 
 */

#nav-sitemap {
	display: none;
}

#nav-main {
	position: absolute;
	bottom: 4px;
	width: 960px;
	height: 36px;
	background-color: #5c5f65; /* default apart color */
	background-image: url(../img/nav/nav-main.png); 
	background-position: 561px 0;
	background-repeat: no-repeat;
}

#nav-main li { /* we got some z-index issues here, width needed on li, but not wanted. */
	position: relative;	
	font-size: 12px;
	line-height: 36px;
	text-transform: uppercase;	
}

/**
 *
 * Reset child list elements so we can do further styling for the flyout menus.
 * 
 */

#nav-main li ul li { /* reset child li elements */
	position: static;
	border-right: none;
	font-size: auto;
	line-height: auto;
	text-transform: none;
} 
 
#nav-main a.nav-main-link { 
	float: left;	
	width: auto;
	padding: 0 15px;
	color: #fff;
	background: transparent url(../img/nav/border-black-opacity-10.png) 100% 0 repeat-y;
}


/**
 *
 * Adds basic 15% black overlay to menu items
 * 
 */

#nav-main li.hover {
	background: transparent url(../img/nav/overlay-black-opacity-15.png) 0 0 repeat;	
}

/**
 *
 * replace 'Home' text with Icon
 * 
 */

#nav-main-home a span { 
	display: block;
	width: 11px !important;
	text-indent: -10000px; 
	background: transparent url(../img/ico/nav-main-home-icon.png) 50% 50% no-repeat;
}

/**
 *
 * selected state of menu items, done via bodyid
 * 
 * @todo		rgba()-fix for IE.
 */

body#home #nav-main-home, 
body#fashiontopics #nav-main-fashiontopics,  
body#categories #nav-main-categories,  
body#sale #nav-main-sale,  
body#advice #nav-main-advice {
	background-image: url(../img/nav/nav-main-arrow-up.png);
	background-position: 50% 100%;
	background-repeat: no-repeat;	
	background-color: rgba(255,255,255,0.3);
}

/**
 * @section		nav-main, selected state
 *
 * Selected items get a less opaque border.
 * 
 */

body#home #nav-main-home > a, 
body#fashiontopics #nav-main-fashiontopics > a, 
body#categories #nav-main-categories > a, 
body#sale #nav-main-sale > a, 
body#advice #nav-main-advice > a  {
	background: transparent url(../img/nav/border-black-opacity-20.png) 100% 0 repeat-y;	
}

/* box-overlays */

#nav-main li .box {
	display: none;
}

/*#nav-main li:hover .box, */
#nav-main li.hover .box {
	display: block;
}

#nav-main .box-content {
/*	padding: 12px;*/
}

#nav-main .box { /* this is our basic box, size and position as normal. left/top, width/height needed. */
	position: absolute;
	left: -30px;
	top: 36px;
	width: 455px;
	background: #fff;
	z-index: 1000;
}

#nav-main-fashiontopics .box, 
#nav-main-categories .box, 
#nav-main-sale .box {
	width: 552px;
}

#nav-main .shadow-arrow-top .shadow-t { /* position our top shadow, - 400px + posLeft() */
	background-position: -363px 0;
}

#nav-main #nav-main-sale .box {
	left: -50px;
}

#nav-main #nav-main-advice .box {
	left: -39px;
}

/* = box
------------------------------------------------------------------------------------ */

#nav-main .box h2 {
	float: left;
	width: 100%;
	margin: 0;
	padding: 16px 0;
	color: #999;
	font-weight: bold;
	font-size: 14px;
	line-height: 21px;
	text-transform: uppercase;	
	text-align: center;
	
}

#nav-main .box a {
}

#nav-main .list-grid a {
	color: #5c5f65;	
}

/* = image-grid, extend to helper?
	= box-teaser-images
------------------------------------------------------------------------------------ */

.box-teaser-images {}

.image-grid {
	float: left;
	width: 100%;
	padding: 0 0 14px;
	background: transparent url(../img/nav/image-grid.png) 50% 100% no-repeat;
}

.image-grid .image {
	float: left;
	width: auto;
/*	text-align: center; */
}

.image-grid .image {
	position: relative;
	background: transparent url(../img/nav/image-grid-image.png) 0 0 no-repeat;
	height: 173px;
}

.image-grid .last {
}

.image-grid .first {
	background: none;
}

.image-grid-4 .image {
	width: 25%;
	width: 138px; /* set to px  */
}

.image-grid-3 .image {
	width: 33.33%;
	width: 152px;/* set to px */
}

.image-grid-3 .last {
	width: 151px;
}


/**
 * 
 * Reduced state in sale fylout menu
 * 
 */

.image-grid .image a.image-link {
	/*
	position: absolute;
	top: 0;
	z-index: 100;	
	*/
	position: relative;
	width: 83px;
	height: 117px;	
	border: 3px solid #fff;	
	display: block;
}

.image-grid .image a:hover {
	border: 3px solid #a2a2a2;	
}

.image-grid-4 .image a.image-link {
	left: 24px;
}

.image-grid-3 .image a.image-link {
	left: 31px;
}

/* on sale badge */

#nav-main span.ap-option-sale {
	position: absolute;
	right: 0;
	top: 0;
	width: 39px;
	height: 37px;
	background: transparent url(../img/nav/nav-main-sale-overlay.png) 0 0 no-repeat;
	z-index: 2;
}

.image-grid .image a.image-link img {
	position: absolute;
	top: 0;
	width: 77px;
	height: 111px;
/*	margin: 3px;*/
	padding: 3px;
	background: transparent url(../img/nav/image-grid-image-link.png) 0 0 no-repeat;
	z-index: 1;
}

/*
.image-grid-4 .image a.image-link img {
	left: 24px;	
}

.image-grid-3 .image a.image-link img {
	left: 31px;	
}
*/

/**
 *
 * @section 	subbrands
 * @todo 		Must be replaced by server-side image type generation script. 
 * 				Check for correct vertical (adjust to type baseline) alignment. This must be done in image generation process. 
 * 				Send to JavaScript instead. 
 * 
 * Prepare links in image grid for replacement. image urls to subbrand type are referenced inline in html.
 * 
 */

.image-grid .image h4 {
	margin: 0;
	position: absolute;
	bottom: 28px;
	top: auto;
	left: 0;
	width: 100% !important;
	line-height: 18px !important;
	text-align: center;
}

.image-grid .image h4 a {
	border: none;
	padding: 0;
	left: 0;
	position: static;
	display: block;
	width: 100% !important;
	height: auto;
	color: #b2b2b2;
	background-position: 50% 0;
	background-repeat: no-repeat;
	font-weight: normal;
	font-family: arial, helvetica, sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
}

.image-grid .image h4 a:hover {
	border: none;
}

/**
 *
 * @section nav-main-fashiontopics
 *
 * Fashion topics get special typography, so we use negative text indent here to hide normal text. 
 * 
 */

/*
.image-grid .image a {
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	height: 100px;
	display: block;
	text-indent: -10000px;
	background: #ff0 !important;
	z-index: 2000;
}
*/

/* = list-grid, extend to helper?
	= box-teaser-list
------------------------------------------------------------------------------------ */

.box-teaser-list {
	margin: 0 12px;
}

#nav-main .box-teaser-list h2 {
	padding: 8px 0 14px;
}

.list-grid {
	float: left;
	width: 100%;
	padding: 19px 0 22px !important;
}

.list-grid-3 .list {
	float: left;
	width: 33.33%;
	width: 158px;
	width: 176px;
}

#nav-main .list-grid ul,
#nav-main .list-grid li {
	display: block;
	float: left;
	width: 100%;
	width: 158px;
	width: 176px;
}

#nav-main .list-grid li {
	border: none;
	font-size: 12px;
	line-height: 24px;
}

#nav-main .list-grid a {
	float: none;
	display: block;
	text-transform: none;
	padding: 0 0 0 18px;
}

#nav-main .list-grid a:hover {
	color: #ccc;
}

/* = grid-fluid
	= box-teaser-overview 
------------------------------------------------------------------------------------ */

.box-teaser-overview {
	float: left;
	padding: 0 12px;
	text-align: center;
}

#nav-main-fashiontopics .box-teaser-overview,
#nav-main-categories .box-teaser-overview,
#nav-main-sale .box-teaser-overview {
	width: 528px;	
}

#nav-main-advice .box-teaser-overview {
	width: 431px;
}
	

.box-teaser-overview p {
	float: left;
	width: 100%;
	padding: 14px 0 13px;
	background: transparent url(../img/nav/pattern-dots-horizontal.png) 0 0 repeat-x;
}

.box-teaser-overview a {
	padding: 4px 8px 3px 16px;
	color: #fff;
	background: #b2b2b2 url(../img/nav/icon-arrow-right.png) 5px 6px no-repeat;
	font-size: 10px;
	line-height: 20px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
}

/*
.grid-fluid {
	float: left;
	width: 100%;
	background: #f00;
}

.grid-fluid-centered .grid-item {
	text-align: center;
}
*/




/* = nav-search
------------------------------------------------------------------------------------ */

#nav-search {
	position: absolute;
	right: -9px;
	top: -4px;
	z-index: 1000;
	width: 188px;
	padding: 4px 9px 0 /* shadow */
}

#nav-search form {
	margin: 7px 5px 0;
	width: 178px;
	height: 19px;
	background: transparent url(../img/nav/nav-search.png) 0 0 no-repeat;
}

#nav-search input.text {
	float: left;
	margin: 3px;
	border: 0px solid #fff;;
	padding: 0 3px;
	width: 142px;
	height: 13px;
	font-size: 11px;
	color: #999;
}

#nav-search input.text:focus {
	color: #5c5f65;
}

#nav-search_noresult {
	z-index: 1000;
	margin: 7px 5px 0;
	width: 188px;
	padding: 4px 15px 0 /* shadow */
}

#nav-search_noresult form {
	width: 178px;
	height: 19px;
	background: transparent url(../img/nav/nav-search.png) 0 0 no-repeat;
}

#nav-search_noresult input.text {
	float: left;
	margin: 3px;
	border: 0px solid #fff;;
	padding: 0 3px;
	width: 142px;
	height: 13px;
	font-size: 11px;
	color: #999;
}

#nav-search_noresult input.text:focus {
	color: #5c5f65;
}

/**
 *
 * Replace background to expandable shadow list on focus. 
 * 
 */
 
#nav-search.focus { 
	background: transparent url(../img/nav/nav-search-list.png) 0 100% no-repeat; 
	padding: 4px 9px 20px; /* shadow */	
}

#nav-search ul {
	padding: 20px 0;
}

#nav-search:hover ul, 
#nav-search.focus ul {
	display: block;
}

#nav-search li {
	float: left;
	width: 100%;
	font-size: 12px;
	line-height: 18px;
	text-transform: none;	
}

#nav-search a { /* whole suggested link */
	width: 172px;
	padding: 0 8px;
	display: block;
	color: #b2b2b2;	
}

#nav-search a span { /* text part of link that matches search term */
	color: #5c5f65;
}

#nav-search a:hover {
	background: transparent url(../img/nav/nav-search-list-hover.png) 0 0 no-repeat;
}



/* = main
------------------------------------------------------------------------------------ */

#main {
	float: left;
	width: 100%;
	min-height: 640px;
}

.debug #main {
	background: transparent url(../img/nav/ui-grid.png) 0 0 repeat;
}

/**
 * @section 	footer
 * 
 */

#footer {
	margin: 0 auto;
	width: 990px;
	background: transparent url(../img/nav/global-bg-bottom.png) 50% 0 no-repeat;
}

/**
 * @section 	nav-footer
 * 
 */

#nav-footer {
	width: 990px;
	padding: 12px 0 0;
	text-align: center;
	text-transform: uppercase;
	line-height: 24px;	
}

#nav-footer ul {
}

#nav-footer ul,
#nav-footer li {
	display: inline;
}

#nav-footer li {
	font-size: 11px;
	font-weight: bold;
}

#nav-footer li,
#nav-footer a {
	color: #5c5f65;
}

#nav-footer li.first {
	padding: 0 0 0 35px;
	background: transparent url(../img/nav/nav-footer-icon-global.png) 0 0 no-repeat;
}

#nav-footer p {
	padding: 12px 0 6px;
	font-size: 10px;
	color: #b2b2b2;
	background: transparent url(../img/nav/nav-footer-separator.png) 50% 6px no-repeat;
}

#nav-footer a:hover {
	color: #8f939b;
}

/**
 * @section footer-branding
 * 
 * Branding and SEO section within footer. 
 * Use classes 'has-seo' and 'no-seo' accordingly.
 * 
 */

#footer-branding {
	float: left;
	width: 960px;
	padding: 0 15px;
	background: transparent url(../img/nav/footer-branding.png) 50% 0 no-repeat;
	text-align: center;
	position: relative;
}

#footer.no-seo #footer-branding {
	height: 40px;
	padding: 17px 15px 0;
}

#footer.has-seo #footer-tagline {
	float: left;
	width: 960px;
	height: 40px;
}

#footer.has-seo #footer-tagline p {
	float: left;
	margin: 21px 0 0 235px;
}

#footer.no-seo #footer-tagline {
	float: left;
	width: 650px;
	height: 40px;
	/*
	position: absolute;
	left: 155px;
	top: 32px;
	*/
}

#footer.no-seo #footer-tagline p {
	float: left;
	margin: 14px 0 0 234px;
}

#footer-tagline p a {
	display: block;
	text-indent: -10000px;
	width: 179px;
	height: 18px;
	background: transparent url(../img/logo/logo-apart-loves-you.png) 0 0 no-repeat;
}

#footer-final {
	border-bottom: 30px solid #fff;
	float: left;
	width: 960px;
	background: transparent url(../img/nav/footer-final.png) 50% 0 repeat-y;
}

#footer.no-seo #footer-final {
	height: 40px;
}

#footer-description {
	float: left;
	width: 630px;
	padding: 10px 10px 0;
}

#footer-description p {
	font-size: 10px;
	line-height: 18px;
	color: #b2b2b2;
}

#footer-etrusted, 
#footer-help { 
	float: left;
	width: 155px;
	height: 90px;
}

#footer.no-seo #footer-etrusted, 
#footer.no-seo #footer-help {
	height: 40px;
}


#footer-etrusted a,
#footer-help a {
	float: left;
	width: 155px;
	height: 90px;
	text-indent: -10000px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

#footer.no-seo #footer-etrusted a, 
#footer.no-seo #footer-help a {
	height: 40px;
}

#footer-etrusted a {
	background-image: url(../img/logo/logo-etrusted.png);
}

#footer-help a {
	background-image: url(../img/nav/footer-help.png);
}

#footer.no-seo #footer-help {
	float: right;
}


/* = grid-system classes
	grid is 12 columns each 71px + 10px gutter
------------------------------------------------------------------------------------ */

.grid-container {
	width: 972px;
	margin: 0 auto;
}

.grid-1,
.grid-2, 
.grid-3, 
.grid-4, 
.grid-5, 
.grid-6, 
.grid-7, 
.grid-8, 
.grid-9, 
.grid-10, 
.grid-10-first, 
.grid-11, 
.grid-12 {
	float: left;
	margin: 0 5px;
	_display: inline;
}


.grid-1 { 
	width: 71px; 
}

.grid-2 { 
	width: 152px; 
}

.grid-3 { 
	width: 233px; 
}

.grid-4 { 
	width: 314px; 
}

.grid-5 { 
	width: 395px; 
}

.grid-6 {
	width: 476px;
}

.grid-7 {
	width: 557px;
}

.grid-8 {
	width: 638px;
}

.grid-9 {
	width: 719px;
}

.grid-10 {
	width: 800px;
}

.grid-10-first {
	width: 799px;
	padding: 0 0 0 1px;
}

.grid-11 {
	width: 881px;
}

.grid-12 {
	width: 962px;
	
	/*
	width: 960px;
	padding: 0 1px;
	*/
}

.grid-first {
}

.grid-last {
}

/* prefix */

.prefix-1 {
	padding-left: 71px;
}

/* suffix */

.suffix-1 {
	padding-right: 71px;
}


/* = helpers
------------------------------------------------------------------------------------ */

.pattern {
	background: transparent url(../img/nav/pattern-dots.png) 0 0 repeat;	
}

.pattern-top { /* as used in #nav-main > .box */
	padding-top: 20px;
	background: transparent url(../img/nav/pattern-dots-horizontal.png) 0 0 repeat-x;
}

.pattern-bottom { /* as used in #nav-main > .box */
	padding-bottom: 20px;
	background: transparent url(../img/nav/pattern-dots-horizontal.png) 0 100% repeat-x;
}


/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

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

* html .clearfix {
	height: 1%;
}

/* = feature-primary
	1 full image to left, 
	3 small teaser images + heading right
------------------------------------------------------------------------------------ */

.feature-primary {
	position: relative;
	float: left;
	margin: 0 7px 14px;
	width: 962px;
	height: 600px;
	z-index: 0;
	background: transparent url(../img/nav/feature-primary.png) 1px 0 repeat-x;	
}

.feature-primary-full {
	display: none;
}

.feature-primary li.selected .feature-primary-full {
	display: block;
}

/* small teasers to the right */

.feature-primary ul {
	position: absolute;
	right: 0;
	top: 0;
	width: 162px;
	padding: 15px 0;
	height: 570px;
}

.feature-primary ul li {
	float: left;
	width: 100%;
}

.feature-primary-teaser {
	padding: 25px 0 0;
	height: 165px;
	text-align: center;
	background: transparent url(../img/nav/feature-primary-teaser.png) 10px 0 no-repeat;	
}

.feature-primary .first {
	background: none;
}

.feature-primary-teaser a img {
	margin: 0 0 6px;
	padding: 3px;
	border: 3px solid #fff;
	background: transparent url(../img/nav/image-grid-image-link.png) 0 0 no-repeat;
}

.feature-primary-teaser a:hover img, 
.selected .feature-primary-teaser a img {
	border: 3px solid #a2a2a2;
}

/* subbrand typography */

.feature-primary-teaser h3 a {
	display: block;
	background-repeat: no-repeat;
	background-position: 50% 0;
	text-indent: -10000px;
}

/* full teasers to the left */

.feature-primary-full {
	position: absolute;
	left: -800px;
	top: 0;
	width: 800px;
	height: 600px;
}

/**
 * @section feature secondary
 * 
 * 3 medium teaser images.
 * 
 */
.feature-secondary {
	float: left;
	width: 100%;
	padding: 0 0 18px; /* 8px whitespace + 10px shadow */
	background: transparent url(../img/nav/feature-secondary.png) 1px 100% no-repeat;
}

.feature-secondary-teaser {
	float: left;
	margin: 0 5px;
	padding: 20px;
	width: 274px;
	height: 163px;
	position: relative;	
	background: transparent url(../img/nav/pattern-dots.png) 2px 0 repeat;
	overflow: hidden;
}

.feature-secondary-teaser a {
	float: left;
	width: 274px;
	height: 163px;
}

.feature-secondary-teaser a img {
	float: left;
}

.feature-secondary-teaser a span {
	position: absolute;
	left: 20px;
	top: 20px;
	width: 270px;
	height: 159px;
	text-indent: -10000px;	
	border: 2px solid #fff;
}

.feature-secondary-teaser a:hover span {
	width: 262px;
	height: 151px;
	border: 6px solid #fff;
}

.feature-secondary-teaser a span.feature-secondary-teaser-text, 
.feature-secondary-teaser a:hover span.feature-secondary-teaser-text {
	border: none;
	left: 172px;
	top: 39px;
	width: 104px;
	height: 122px;
	overflow: hidden;
	font-size: 12px;
	line-height: 18px;
	font-weight: bold;
	color: #fff;
	text-indent: 0;
}



/**
 * @section feature-newsletter
 * 
 * newsletter signup form, full spread
 * 
 */

.feature-newsletter {
	float: left;
	width: 940px;
	margin: 0 6px;
	padding: 10px;
	background: transparent url(../img/nav/pattern-dots.png) 0 0 repeat;		
}

.feature-newsletter form {
	float: left;
	width: 675px;
	padding: 8px 0 0 265px;
	background: #fff;
	text-align: center;
}

.feature-newsletter label {
	float: left;
	padding: 0 62px 0 0;
	height: 32px;
	background: transparent url(../img/nav/feature-newsletter-label.png) 100% 0 no-repeat;
	color: #5c5f65;
	font-size: 10px;
	line-height: 24px;
	font-weight: bold;
	text-transform: uppercase;
}

.feature-newsletter input.text {
	float: left;
	width: 154px;
	border: none;
	margin: 0;
	padding: 5px 12px 4px 0;
	background: #b2b2b2;
	color: #fff;
	font-size: 12px;	
}

.feature-newsletter input.submit {
	float: left;
}

.feature-newsletter .ap-info {
	float: left;
	margin: 3px 8px;
}

.feature-newsletter .ap-info a {
	display: block;
	width: 18px;
	height: 18px;
	background: transparent url(../img/nav/ap-info.png) 0 0 no-repeat;
	text-indent: -10000px;
}

/**
 * @section shadow
 * 
 */


.shadow-tl,
.shadow-t,
.shadow-tr,
.shadow-l,
.shadow-r,
.shadow-bl,
.shadow-b,
.shadow-br {
	position: absolute;
}

.shadow-tl,
.shadow-tr,
.shadow-bl,
.shadow-br {
	width: 40px;
	height: 40px;
}

.shadow {
	float: left;
	position: relative;
	/*
	height: 100%;
	width: 100%;
	*/
}

/* standard shadows, 9 slice */

.shadow-tl {
	left: -20px;
	top: -20px;
	background: transparent url(../img/nav/shadow-top-left.png) 0 0 no-repeat;
}

.shadow-t {
	top: -20px;
	left: 20px;
	width: 512px; /* box.getWidth() - 40 */
	width: auto;
	height: 20px;
	background: transparent url(../img/nav/shadow-top.png) 0 0 repeat-x;
}

.shadow-tr {
	right: -20px;
	top: -20px;
	background: transparent url(../img/nav/shadow-top-right.png) 0 0 no-repeat;
}

.shadow-l {
	left: -20px;
	top: 20px;
	width: 20px;	
	height: 480px; /* box.getHeight() - 40 */
	height: auto;
	background: transparent url(../img/nav/shadow-left.png) 0 0 repeat-y;
}

.shadow-r {
	right: -20px;
	top: 20px;
	width: 20px;	
	height: 480px; /* box.getHeight() - 40 */
	height: auto;
	background: transparent url(../img/nav/shadow-right.png) 0 0 repeat-y;
}


.shadow-bl {
	left: -20px;
	bottom: -20px;
	background: transparent url(../img/nav/shadow-bottom-left.png) 0 0 no-repeat;	
}

.shadow-b {
	left: 20px;
	bottom: -20px;
	height: 20px;
	width: 512px; /* box.getWidth() - 40 */	
	width: auto;
	background: transparent url(../img/nav/shadow-bottom.png) 0 100% repeat-x;
}

.shadow-br {
	right: -20px;
	bottom: -20px;
	background: transparent url(../img/nav/shadow-bottom-right.png) 0 0 no-repeat;	
}

/* arrow pointers */

.shadow-arrow-top .shadow-t {
	background: transparent url(../img/nav/shadow-arrow-top.png) 50% 0 repeat-x;
}

.shadow-arrow-bottom .shadow-b {
	background: transparent url(../img/nav/shadow-arrow-bottom.png) 50% 0 no-repeat;
}

.shadow-arrow-left .shadow-l {
	background: transparent url(../img/nav/shadow-arrow-left.png) 0 50% no-repeat;
}

.shadow-arrow-right .shadow-r {
	background: transparent url(../img/nav/shadow-arrow-right.png) 0 50% no-repeat;
}

/**
 * @section ap-tooltip
 * 
 * Custom tooltips, grey background, absolute position. 
 * 
 */

.tooltip {
	display: none;
}

.ap-tooltip {
	display: none;
	background: #f3f3f3;
	z-index: 99999;
}

.ap-tooltip .content {
	width: 228px;
	padding: 20px;
}

.ap-tooltip h3 {
	margin: 0 0 18px !important;
	padding: 0 0 0 20px !important;
	font-weight: bold !important;
	background: transparent url(../img/nav/ap-info-tooltip.png) 0 2px no-repeat;
	font-size: 12px !important;
	line-height: 18px !important;
}

.ap-tooltip .ap-text-small {
	color: #999 !important;
	font-size: 10px !important;
	line-height: 18px !important; /* replace !important rules */
}

.ap-tooltip .shadow-arrow-top .shadow-t {
	background: transparent url(../img/nav/shadow-arrow-top-tooltip.png) 50% 0 repeat-x;
}

.ap-tooltip .shadow-arrow-bottom .shadow-b {
	background: transparent url(../img/nav/shadow-arrow-bottom-tooltip.png) 50% 0 no-repeat;
}

.ap-tooltip .shadow-arrow-left .shadow-l {
	background: transparent url(../img/nav/shadow-arrow-left-tooltip.png) 0 50% no-repeat;
	background: transparent url(../img/nav/shadow-arrow-left-tooltip.png) 0 -420px no-repeat; /* replace */
}

.ap-tooltip .shadow-arrow-right .shadow-r {
	background: transparent url(../img/nav/shadow-arrow-right-tooltip.png) 0 50% no-repeat;
	background: transparent url(../img/nav/shadow-arrow-right-tooltip.png) 0 -420px no-repeat; /* replace */
}

/**
 * @section ap-tooltip-custom
 * 
 * Individual tooltip sizes
 * 
 */

#tooltip-newsletter .content, 
#tooltip-newsletter-2 .content {
	width: 71px;
	padding: 9px;
}

/**
 * @section ap-key-value
 * 
 * Key Value pairs. Set in definition list.
 * 
 */

.ap-key-value {
	float: left;
	width: 100%;
	margin: 0 0 18px;
}

.ap-key-value dl {
	float: left;
	width: 100%;
	font-weight: bold;
	font-size: 12px;
}

.ap-key-value dt, 
.ap-key-value dd {
	float: left;
	width: 50%;
	margin: 0 0 18px;
}

.ap-key-value dt {
	color: #999;
}

.ap-key-value dd {
	position: relative;
	color: #5c5f65;
}

.ap-key-value dd .ap-action {
	position: absolute;
	right: 0;
	top: 0;
}

/**
 * @section 	ap-action
 * @todo		merge with ap-checkout.css
 * 
 * Action Links used trough whole website.
 * 
 */

.ap-action {
	font-size: 10px;
	color: #999;
	padding: 0 0 0 16px !important;
	background-repeat: no-repeat;
	background-position: 0 50%;
	font-weight: bold;
}

.ap-action-change {
	background-image: url(../img/nav/ap-checkout-action-change.png);
}

.ap-action-delete {
	background-image: url(../img/nav/ap-checkout-action-delete.png);
}


/**
 * @section 	ap-table
 * @todo		merge with ap-checkout.css
 * 
 * Basic table layout
 * 
 */

.ap-table {
	float: left;
	width: 100%;
}

.ap-table table {
	width: 100%;
}

.ap-table th {
	padding: 4px 0;
	border-right: 1px solid #dadada;
	background: #f3f3f3;
	color: #5c5f65;
	font-weight: bold;
	font-size: 10px;
	line-height: 18px;
	text-align: center;
	text-transform: uppercase;	
}

.ap-table th.ap-table-first, 
.ap-table th.ap-table-last {
	border-right: none !important;
}

.ap-table td {
	padding: 6px 0;
	border-bottom: 1px solid #d8d8d8;
	vertical-align: middle;
	text-align: center;
	color: #5c5f65;
	background: transparent url(../img/nav/ap-table-td.png) 100% 50% no-repeat;
}

.ap-table td.ap-table-first, 
.ap-table td.ap-table-last {
	background-image: none;
}

.ap-table-last td {
	border: none;
}

/* footer */


/**
 * @section 	ap-tabs
 * @todo		merge with ap-checkout.css
 * 
 * Basic tabs layout
 * 
 */


.ap-tabs {
	float: left;
	width: 100%;
	background: transparent url(../img/nav/global-inner-bg-top.png) 50% 100% no-repeat;	
}

.ap-tabs ul,
.ap-tabs li {
	float: left;
	width: auto;
}

.ap-tabs a {
	display: block;	
	width: auto;
	border: 1px solid #e0e0e0;
	border-bottom: none;
	background: #ededed url(../img/nav/ap-checkout-help-tabs-a.png) 0 0 repeat-x;
	color: #5c5f65;
}

.ap-tabs .selected {
	background: transparent url(../img/nav/ap-tabs-selected.png) 100% 0 repeat-x;
}

.ap-tabs .selected a {
	background: #fff;
}

.ap-service-ap-tabs {
	background: transparent url(../img/nav/ap-tabs.png) 50% 100% no-repeat;
	float: left;
	width: 100%;

}
 
.ap-service-ap-tabs ul {
	padding: 0 0 0 58px;	
	float: left;
	width: auto;

}

.ap-service-ap-tabs li {
	padding: 0 10px 0 0;	
	float: left;
	width: auto;

}

.ap-service-ap-tabs a {
	float: left;
	line-height: 32px;
	height: 32px;
	padding: 0;
	font-weight: bold;
	font-size: 12px;
	text-align: center;	
	padding: 0 18px;
	display: block;	
	width: auto;
	border: 1px solid #e0e0e0;
	border-bottom: none;
	background: #ededed url(../img/nav/ap-checkout-help-tabs-a.png) 0 0 repeat-x;
	color: #5c5f65;
	
}


.ap-service-ap-tabs .selected {
	background: transparent url(../img/nav/ap-tabs-selected.png) 100% 0 repeat-x;
}

.ap-service-ap-tabs .selected a {
	background: #fff;
}


/**
 * @section 	Forms
 * @see			ap-checkout.css
 * @todo		merge with ap-checkout.css
 * 
 * Basic form styles
 * 
 */

form legend, 
form h2 {
	float: left;
	width: 100%;
	margin: 0 0 30px;
	font-size: 18px;
	line-height: 24px;
	color: #5c5f65;
}

form label, 
form h3 {
	display: block;
	font-size: 12px;
	line-height: 18px;
	color: #5c5f65;	
}

.ap-lightbox form {
	float: left;
}


/**
 * @section 	Forms #2
 * @todo		cut from ap-checkout.css
 * 
 * Basic form styles #2
 * 
 */

.input {
	float: left;
	width: 100%;
	margin: 0 0 18px;
	position: relative;
}

.input label {
	font-size: 12px;
	line-height: 18px;
}

/**
 * @section error
 * 
 * Inline error messages
 * 
 */


.input .ap-inline-error {
	position: absolute;
	background: #f3f3f3;
	top: -80px;
	left: 0;
	display: none;
	width: 287px;
}

.error .ap-inline-error {
	display: block;
}

.input .ap-inline-error .content {
	padding: 10px;
}

.input .ap-inline-error h3 {
	color: #bd6767;	
	margin: 0;
	font-weight: bold;
	float: left;
	width: 267px;
	background: transparent url(../img/nav/message-error.png) 0 2px no-repeat;
	text-indent: 24px;
	font-size: 12px;
	line-height: 18px;
	height: 20px;
}

.input .ap-inline-error p {
	color: #bd6767;	
	font-size: 12px;
	line-height: 18px;
	float: left;
	width: 267px;
	margin: 0 !important;
	padding: 6px 0 12px !important;
}

.ap-inline-error .shadow-arrow-top .shadow-t {
	background: transparent url(../img/nav/shadow-arrow-top-tooltip.png) 50% 0 repeat-x;
}

.ap-inline-error .shadow-arrow-bottom .shadow-b {
	background: transparent url(../img/nav/shadow-arrow-bottom-tooltip.png) 50% 0 no-repeat;
	background: transparent url(../img/nav/shadow-arrow-bottom-tooltip.png) -420px 0 no-repeat; /* replace */
}

.ap-inline-error .shadow-arrow-left .shadow-l {
	background: transparent url(../img/nav/shadow-arrow-left-tooltip.png) 0 50% no-repeat;
}

.ap-inline-error .shadow-arrow-right .shadow-r {
	background: transparent url(../img/nav/shadow-arrow-right-tooltip.png) 0 50% no-repeat;
}

/**
 * @section 		text, password
 * @todo 			Re-calculate input widths.
 *
 *
 */
 
.text input, 
.password input {
 	border: 1px solid #d9dad9;
 	padding: 1px 3px;
 	background: #ededed url(../img/nav/ap-input-text.png) 0 0 repeat-x;
 	color: #333;
 	font-size: 12px;
 	height: 15px;
	font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif; 	
}
 
.s input, 
.s textarea {
 	width: 71px;
 	width: 66px;
 	width: 46px;
}
 
.m input, 
.m textarea {
 	width: 152px;
 	width: 147px;
 	width: 127px;
}
 
.l input, 
.l textarea {
	width: 233px;
	width: 228px;
	width: 208px;
}

.xl input, 
.xl textarea {
	width: 314px;
	width: 309px;
	width: 279px;
}

.text-inline {
	float: left;
	width: 100%;
	margin: 0;
}

.text-inline .input {
	float: left;
	width: auto;
	margin: 0 10px 18px 0;
}

.text-inline .s {
	width: 71px;
	width: 61px;
}

.text-inline .s input {
	width: 71px;
	width: 63px;
	width: 53px;
}

.text-inline .m {
	width: 152px; 
	width: 142px;
	width: 132px;
}

.text-inline .m input {
	width: 152px; 
	width: 144px;
	width: 134px;
	width: 124px;
}

.text-inline .l {
	width: 233px;
	width: 223px;
	width: 213px;
}

.text-inline .l input {
	width: 233px; 
	width: 225px;
	width: 215px;
	width: 208px;
}

/**
 * @section 		textarea
 *
 */

.textarea textarea {
 	border: 1px solid #d9dad9;
 	padding: 1px 3px;
 	background: #ededed;
 	color: #5c5f65;
 	color: #333;
 	font-size: 12px;
 	line-height: 18px;
	font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
	overflow: auto;
}

 
 /**
 * @section 		checkbox
 *
 */

.checkbox input {
	float: left;
	margin: 3px 10px 0 0;
}

.checkbox label {
	float: left;
	width: 269px; /* ihre angaben */
}

 /**
 * @section 		radio
 *
 */

.radio input {
	float: left;
	margin: 3px 10px 0 0;
}

.radio label {
	float: left;
	width: auto; /* ihre angaben */
}

.radio-inline h3 {
	float: left;
	width: 71px;
}

.radio-inline label {
	width: 57px;
}

 /**
 * @section 		select
 *
 */
 
.select-inline .input {
 	float: left;
 	width: auto;
 	margin: 0 5px 0 0;
}
 
.s select {
 	width: 71px;
 	width: 66px;
}
 
.m select {
 	width: 152px;
 	width: 147px;
}
 
.l select {
	width: 233px;
	width: 228px; 
}

.xl select {
	width: 314px;
	width: 309px;
	width: 289px;
}

 /**
 * @section ap-select
 *
 * Custom select elements.
 *
 */

.ap-select {
	float: left;
	height: 34px;
	padding: 4px 0 0 0;
	position: relative;
}

.s .ap-select {
	width: 78px;
	background: transparent url(../img/nav/ap-select-s.png) 0 -38px no-repeat;
}

.s .ap-select-open {
	background: transparent url(../img/nav/ap-select-s.png) 0 0 no-repeat;
}

.sm .ap-select { /* used in search */
	width: 91px;
	background: transparent url(../img/nav/ap-select-sm.png) 0 -38px no-repeat;
}

.sm .ap-select-open { /* used in search */
	background: transparent url(../img/nav/ap-select-sm.png) 0 0 no-repeat;
}

.m .ap-select {
	width: 165px;
	background: transparent url(../img/nav/ap-select-m.png) 0 -38px no-repeat;
}

.m .ap-select-open {
	background: transparent url(../img/nav/ap-select-m.png) 0 0 no-repeat;
}


 /**
 * @section ap-select-current
 *
 * Currently selected element in custom select
 *
 */


.ap-select-current {
	height: 34px;
}

.s .ap-select-current {
	width: 78px;
	background: transparent url(../img/nav/ap-select-current-s.png) 0 0 no-repeat;
}

.sm .ap-select-current {
	width: 91px;
	background: transparent url(../img/nav/ap-select-current-sm.png) 0 0 no-repeat;
}

.m .ap-select-current {
	width: 165px;
	background: transparent url(../img/nav/ap-select-current-m.png) 0 0 no-repeat;
}

.ap-select-current a {
	width: 100%;
	height: 34px;
	line-height: 34px;
	text-indent: 15px;
	display: block;
	color: #5c5f65;
	font-weight: bold;
	text-decoration: none;
	overflow: hidden;
}

.s .ap-select-current a {
	width: 38px;
	border-right: 37px solid transparent;
	border-left: 3px solid transparent;
}

.m .ap-select-current a {
	width: 125px;
	border-right: 37px solid transparent;
	border-left: 3px solid transparent;
}

.sm .ap-select-current a {
	width: 51px;
	border-right: 37px solid transparent;
	border-left: 3px solid transparent;	
}

 /**
 * @section ap-select-options
 *
 * Additional items for selection in custom select
 *
 */

.ap-select-options {
	display: none; 
	position: absolute;
	left: 0;
	top: 38px;
	padding: 0 4px 5px;
}

.s .ap-select-options {
	width: 78px;
	background: transparent url(../img/nav/ap-select-options-s.png) 50% 100% no-repeat;
}

.sm .ap-select-options {
	width: 91px;
	background: transparent url(../img/nav/ap-select-options-sm.png) 50% 100% no-repeat;
}

.m .ap-select-options {
	width: 165px;
	background: transparent url(../img/nav/ap-select-options-m.png) 50% 100% no-repeat;
}

.ap-select-open .ap-select-options {
	display: block;
}

.ap-select-options ul {
	margin: 0 3px 3px;
	max-height: 162px;
	overflow: auto;
} 

.ap-select-options li {
	display: block;
	font-size: 12px;
	line-height: 18px;
	font-weight: bold;
}

.ap-select-options a {
	display: block;
	padding: 0 7px;
	height: 18px;
/*	margin: 0 5px 0 0; */
	color: #b2b2b2;
	overflow: hidden; /* truncate labels with too many characters */
	background: transparent url(../img/nav/ap-select-options-a.png) 0 -18px repeat-x;
}

.ap-select-options a:hover {
	background: transparent url(../img/nav/ap-select-options-a.png) 0 0 repeat-x;
	color: #5c5f65;
}


/**
 * @section 	error
 * @todo		add error handling for required select, checkbox and radio
 * 
 * How form elements are marked if an error occurs.
 * 
 */

.error input,
.error textarea {
	border: 1px solid #bd6767 !important;
	color: #bd6767 !important;
}

.radio-inline.error h3 {
	color: #bd6767;
}

/**
 * @section 		hint, unit, prefix
 * @todo 			Helper spans around input elements
 *
 *
 */
 
.input span.hint, 
.input span.unit {
	color: #999;
	font-size: 11px;
}


/**
 * @section message
 * 
 * User messages in form processing
 * 
 */

.message {
	float: left;
	width: 100%;
}

.message p {
	padding: 0 0 0 30px;
	font-weight: bold;
	font-size: 10px;
	line-height: 12px;
}

.message-hint {
	background: transparent url(../img/nav/message-hint.png) 0 0 no-repeat;
	color: #999;
	text-transform: uppercase;
}

.message-hint p {
	color: #999;	
}

.message-error {
	background: transparent url(../img/nav/message-error.png) 0 50% no-repeat;	
	color: #bd6767;
}

.message-error p {
	color: #bd6767;	
}

.message-success {
	
}

/**
 * @section global-message
 * 
 * Global message on top after server side processing
 * 
 */

.message-global {
	float: left;
	width: 944px;
	margin: 6px 6px 8px;
	padding: 8px;
	background: transparent url(../img/nav/pattern-dots.png) 1px 0 repeat;
}

.message-global .message-global-inner {
	float: left;
	width: 944px;
	height: 40px;
	background-color: #fff;
}

.message-teaser {
	float: left;
	width: 930px;
	padding: 15px;
	margin-bottom: 10px;
	background: transparent url(../img/nav/pattern-dots.png) 1px 0 repeat;
}

.message-teaser .message-global-banner {
	width: 927px;
	height: 394px;
	background-color: #fff;
	text-indent: -10000px;
}

/* error */

.message-global-error h3 {
	float: left;
	width: 100%;
	padding: 8px 0;
	text-indent: 224px;
	color: #bd6767;
	background: transparent url(../img/nav/message-error-white.png) 200px 50% no-repeat;
}

/* shipment action */

.message-shipment-action h3 {
	float: left;
	width: 100%;
	padding: 8px 0;
	text-indent: -10000px;
	
}

/**
 * @section fieldset.action
 *
 */
 
fieldset.action {
 	position: relative;
 	float: left;
 	width: 960px;
 	height: 34px;
 	margin: 0 6px;
}

fieldset.action-last {
	
}

fieldset.action .ap-button-primary, 
fieldset.action .ap-button-primary-alt, 
fieldset.action .ap-button-secondary {
	position: absolute;
/*	right: 0; */
	top: 0;
}

fieldset.action .ap-button-secondary-alt {
/*	left: 0; */
}

/**
 * 
 * Helper classes for position within fieldset.action
 * 
 */


fieldset.action .ap-button-left {
	left: 0;
}

fieldset.action .ap-button-right {
	right: 0;
	
}

.orderbutton {
	height:34px;
	line-height:34px;
}


/**
 * @section fieldset.inner
 * 
 * Inner form element combination. Darker background with border.
 * 
 */
 
fieldset.inner {
	background: #ededed;
	border: 1px solid #e0e0e0;
	padding: 27px;
}

fieldset.inner .text input, 
fieldset.inner .password input {
	background: transparent url(../img/nav/ap-input-text-alt.png) 0 0 repeat-x;
 	border-color: #eaeaea;
}

fieldset.inner .textarea textarea {
 	border-color: #eaeaea;
 	background-color: #fff;
}

/**
 * @section fieldset.single
 * 
 * If only one button is present, center it.
 * 
 */

fieldset.single {
	text-align: center;
}

fieldset.single input {
	float: none;
}


 
 /**
 * @section ap-button-primary
 *
 */

.ap-button-primary {
	width: 206px;
	width: 243px;
	height: 34px;
	border: none;
	padding: 0 37px 0 0;
	font-size: 14px;
	color: #fff;
	font-family: "trebuchet ms", arial, helvetica, sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	cursor: pointer;
	background-image: url(../img/nav/ap-button-primary.png);
	background-color: #c292c6;
	background-position: 100% 0;
	background-repeat: no-repeat;
}

.ap-button-primary:hover {
	background-color: #d3acd6;
}

.ap-button-primary-alt {
width: 206px;
	width: 243px;
	height: 34px;
	border: none;
	padding: 0 37px 0 0;
	font-size: 14px;
	color: #fff;
	font-family: "trebuchet ms", arial, helvetica, sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	background-image: url(../img/nav/ap-button-primary-alt.png);
	background-color: #8d8f94;
	background-position: 100% 0;
	background-repeat: no-repeat;
	
}

.ap-button-primary-alt-2 {
	width: auto;
	height: 41px;
	padding: 0 52px 0 26px;
	background: #f3f3f3 url(../img/nav/ap-button-primary-alt-3.png) 100% 0 no-repeat;	
	color: #5c5f65;
	line-height: 41px;
}

.ap-button-primary-alt-2:hover {
	background: #f3f3f3 url(../img/nav/ap-button-primary-alt-3.png) 100% 100% no-repeat;
	color: #8f939b;
}

/**
 * @section ap-button-primay-buy
 * @todo Add hover classes via javascript in frontend. 
 * 
 * Buy button on detail view. Semi-transparent png. background-color is ready for theming. 
 * Attention: Box model on button runs old school way (width = outer width, no matter what padding is set)
 * Background image is done via sprites
 *
 */

.ap-button-primary-buy {
	width: 191px;
	height: 49px;
	padding: 1px 36px 14px 62px;
	background-repeat: no-repeat;
	background-image: url(../img/nav/ap-button-primary-buy.png);
	background-position: 0 0;
	text-align: center;
}

.ap-button-primary-buy:hover {
	background-position: -191px 0;
}

.ap-button-primary-disabled {
	background-color: #ccc;
}

 /**
 * @section ap-button-secondary
 * @todo	Change background icon images to be transparent.
 * 
 *
 */

.ap-button-secondary {
	float: left;
	width: auto;
	height: 27px;
	padding: 0 27px;	
	font-family: "trebuchet ms", arial, helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	line-height: 27px;
	background-color: #5c5f65;
	background-position: 9px 7px;
	background-position: 9px 50%;
	background-repeat: no-repeat;
	color: #fff;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
}

.ap-button-secondary-alt {
	background-color: #b2b2b2 !important;
}

.ap-button-secondary-alt-2 {
	background-color: #5c5f65 !important;
}

/* hover states */

.ap-button-secondary:hover { 
	background-color: #d4add6;
}

.ap-button-secondary-alt:hover { 
	background-color: #c1c1c1 !important;
}

.ap-button-secondary-alt-2:hover { 
	background-color: #8f939b !important;
}

input.ap-button-secondary {
	padding: 0 9px 0 27px;
}

/* icons */

.ap-button-secondary-add {
	background-image: url(../img/nav/ap-button-secondary-add.png) !important;
}

.ap-button-secondary-back {
	background-image: url(../img/nav/ap-button-secondary-back.png) !important;
}

.ap-button-secondary-apply {
	background-image: url(../img/nav/ap-button-secondary-apply.png) !important;
}

.ap-button-secondary-search {
	background-image: url(../img/nav/ap-button-secondary-search.png) !important;
}

.ap-button-secondary-cancel {
	background-image: url(../img/nav/ap-button-secondary-cancel.png) !important;
}

fieldset.action .ap-button-secondary {
	background-position: 9px 12px;
	line-height: 34px;
	height: 34px;
}

/**
 * @section		ap-lightbox
 * 
 * Lightbox overlay.
 *
 */

.ap-lightbox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	width: 100%;
	height: 100%;
	z-index: 2000;
}

.ap-lightbox-loading {
	position: absolute;
	top: 0;
	left: 0;
	background: transparent url(../img/nav/lightbox-loading.gif) no-repeat 50% 50%;
	width: 100%;
	height: 100%;
	z-index: 2001;
}

.ap-lightbox {
	position: absolute;
	top: 120px;
	float: left;
	background: #fff;
	color: #5c5f65;
	z-index: 2002;
}

.ap-lightbox .ap-lightbox-title h3 {
	margin: 0 0 27px;
	font-size: 14px;
	font-weight: bold;
}

.ap-lightbox .ap-lightbox-title h2 {
	text-indent: 0 !important;
	margin: 0 0 24px;
	font-size: 18px;
	line-height: 24px;
}

.ap-lightbox .ap-lightbox-title p {
	margin: 0 0 24px;
	font-size: 12px;
	line-height: 18px;
}

.ap-lightbox table {
	width: 100% !important;
	margin: 0 0 24px;
}

.ap-lightbox tr.last td  {
	border: none;
}

.ap-lightbox form {
	width: auto;
	padding: 30px;
}

.ap-lightbox .ap-button-secondary {
	margin: 0 1px 0 0;
}

.ap-lightbox p.hint {
	clear: both;
}

p.hint {
	margin: 0 0 18px;
	font-size: 12px;
	line-height: 14px;
	color: #5c5f65;
	color: #999 !important;
}

.ap-lightbox .message p {
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
}

/**
 * @section	ap-action
 *
 * Framework for micro icons prepended to link text.
 *
 */

.ap-action {
	text-transform: uppercase;
	color: #999;
	padding: 0 0 0 20px;
	background-repeat: no-repeat;
	background-position: 0 50%;
	text-decoration: none;
}

.ap-action-help {
	background-image: url(../img/nav/ap-action-help.png)
}

.ap-action-print {
	background-image: url(../img/nav/ap-action-print.png)
}

.ap-action-info {
	background-image: url(../img/nav/ap-action-info.png)
}

.ap-action-more {
	background-image: url(../img/nav/ap-action-more.png)
}

.ap-more {
	text-transform: uppercase;
	color:#5C5F65;
	font-size:10px;
	font-weight:bold;
	padding: 0 0 0 20px;
	background-repeat: no-repeat;
	background-position: 0 50%;
	text-decoration: none;
	background-image:url("../img/nav/ap-action-more.png");
}


label .ap-action {
	text-transform: none;
	color: auto;
}

/**
 * @section footer-options
 * Container for additional products options. 
 * Moved ratings, combination and more from footer to here,
 * So @webmeister can do inlcusions.
 * 
 */

#footer-options {
	padding: 15px 0 0;
	margin: 0 auto;
	width: 990px;
	background: transparent url(../img/nav/global-bg-bottom.png) 50% 0 no-repeat;	
}

/**
 * @section ap-products-history
 * 
 * The last viewed products of a user session.
 * 
 */

.ap-products-history {
	float: left;
	width: 100%;
	padding: 0 0 15px;
	background: transparent url(../img/nav/footer-branding.png) 50% 100% no-repeat;
	text-align: center;
}

.ap-products-history ul {
}

.ap-products-history li {
	display: inline;
	line-height: 24px;
	margin-left: 20px;
}

.ap-products-history li img {
	vertical-align: middle;
	margin-right: 6px;
}

.ap-products-history li a {
	font-size: 10px;
}

.ap-products-history-label {
	font-size: 12px;
	text-transform: uppercase;
}

.ap-products-history-open a {
	width: 20px;
	height: 20px;
	padding: 0 0 0 10px;
	background: transparent url(../img/nav/ap-products-open.png) 0 50% no-repeat;
	text-transform: uppercase;
}

.ap-products-history-open a span {
	display: none;
}

/**
 * @section products-history-open
 * 
 * History can be expanded to bigger image views. 
 * Contains bigger images and pagination.
 * 
 */

#products-history-open {
	float: left;
	width: 100%;
	height: 187px;
	margin: 18px 0 0;
	position: relative;
}

#products-history-open .outer {
	float: left;
	width: 930px;
	height: 169px;
	margin: 0 30px;
	position: relative;
	overflow: hidden;
}

/**
 * 
 * Change position of inner wrapper so it appears centered. 
 * Depending on number of items. 
 * 
 */

#products-history-open .inner {
	position: absolute;
	left: 0;
	top: 0;	
}

#products-history-open .inner-5 {
	left: 78px;
}

#products-history-open .inner-4 {
	left: 155px;
}

#products-history-open .inner-3 {
	left: 233px;
}

#products-history-open .inner-2 {
	left: 310px;
}

#products-history-open .inner-1 {
	left: 388px;
}


#products-history-open .inner .image {
	float: left;
	width: 155px;	
	width: 112px;
	padding: 2px 5px 6px 4px;
	background: transparent url(../img/nav/ap-products-history-image.png) 0 0 no-repeat;
	margin: 0 18px 0 17px;
}

#products-history-open .inner .image a {
	float: left;
	position: relative;
}

#products-history-open .inner .image a img {
	float: left;
}

#products-history-open .inner .image a .ap-products-item-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 112px;
	height: 80px;
	background: transparent url(../img/nav/ap-products-item-overlay.png) 0 0 repeat-x;
	font-size: 12px;
	font-weight: bold;
	display: none;
}

#products-history-open .inner .image a:hover .ap-products-item-overlay {
	display: block;
}

#products-history-open .inner .image .ap-products-item-overlay span {
	float: left;
	width: 100px;
	margin-left: 6px;
	text-align: left;
}

#products-history-open .ap-products-item-overlay .ap-products-item-title {
	margin-top: 24px; 
}

#products-history-open .ap-products-item-overlay .ap-products-item-price del {
	font-size: 10px;
	color: #87898d;
}

/* pagination */

#products-history-open .pagination li {
	position: absolute;
	top: 58px;
	width: 30px;
	height: 17px;
	margin: 0;
}

#products-history-open .pagination .next {
	right: 0;
}

#products-history-open .pagination .previous {
	left: 0;
}

#products-history-open .pagination li a {
	padding: 0;
	float: left;
	width: 30px;
	height: 17px;
	text-indent: -10000px;
	background-repeat: no-repeat;
	background-position: 50% 0;
}

#products-history-open .pagination li a:hover {
	background-position: 50% -17px;
}

#products-history-open .pagination .next a {
	background-image: url(../img/nav/ap-products-pagination-next.png);
}

#products-history-open .pagination .previous a {
	background-image: url(../img/nav/ap-products-pagination-previous.png);
}

/**
 * @section ap-checkout-shippable
 * 
 * color indicators for shippable information
 * 
 */

span.ap-checkout-shippable-yes {
	height: 28px;
	display: block;
/*	text-indent: -10000px; */
	padding: 40px 0 0;
	background: transparent url(../img/nav/ap-checkout-shippable-yes.png) 50% 0 no-repeat;
}

span.ap-checkout-shippable-warning {
	padding: 40px 0 0;
	display: block;
	background: transparent url(../img/nav/ap-checkout-shippable-warning.png) 50% 0 no-repeat;
}

span.ap-checkout-shippable-error {
	padding: 40px 0 0;
	display: block;
	background: transparent url(../img/nav/ap-checkout-shippable-error.png) 50% 0 no-repeat;
}

/**
 * @section	ap-invite-friends
 *
 * Friend invitation lightbox.
 *
 */

.ap-invite-friends {
	float: left;
	width: 496px;
	background: #fff url(../img/nav/ap-invite-friends.png) 291px 45px no-repeat;
}

.ap-invite-friends .ap-lightbox-title {
	
}

.ap-invite-friends .ap-lightbox-title h2 {
	float: left;
	width: 360px;
	padding: 0 10px;
}

.ap-invite-friends .ap-lightbox-title p {
	float: left;
	width: 258px;
	padding: 0 182px 0 10px;	
}

.ap-invite-friends fieldset.inner {
	margin: 0 0 18px;
}

.ap-invite-friends fieldset.inner .text-inline {
	float: left;
	width: 380px;
	margin: 0 0 18px;
	overflow: hidden;	
}

.ap-invite-friends fieldset.inner .text-inline .text {
	width: 190px;
	margin: 0;
}

.ap-invite-friends fieldset.inner .text input {
	width: 171px;	
}

.ap-invite-friends fieldset.inner .text #sender-name, 
.ap-invite-friends fieldset.inner .text #receiver-name {
	width: 181px;
}

.ap-invite-friends fieldset.inner .textarea textarea {
	width: 372px;
	height: 72px;
}

.ap-invite-friends fieldset.inner .ap-button-secondary {
	width: 189px;
	text-align: left;
}

.ap-invite-friends fieldset.single {
	width: 450px;
}

/**
 * @section ap-checkout-birthday
 *
 * special form layout for birthday at login form.
 *
 */

.ap-checkout-birthday {
	float: left;
	width: 100%;
	margin: 0 0 18px;
}

.ap-checkout-birthday h3 {
	margin: 0 0 9px;
}

.ap-checkout-birthday input, 
.ap-checkout-birthday .unit,
.ap-checkout-birthday .hint {
	float: left;
}

.ap-checkout-birthday .unit,
.ap-checkout-birthday .hint {
	margin: 0 0 0 4px;
	line-height: 19px;
}

.ap-checkout-birthday .s {
	float: left;
	width: 54px;
	margin: 0;
}

.ap-checkout-birthday .s input {
	width: 34px;
}

.ap-checkout-birthday .m {
	margin: 0;
	width: 186px;
}

.ap-checkout-birthday .m input {
	width: 71px;
}


/**
 * @section	ap-checkout-help
 *
 * Help section within lightbox.
 *
 */

.ap-checkout-help {
	width: 900px;
}

.ap-checkout-help form {
	padding: 0;
}

.ap-checkout-help-header, 
.ap-checkout-help-footer {
	float: left;
	width: 900px;	
	height: 100px;
}

.ap-checkout-help-footer {
	margin-top: 27px;
}

.ap-checkout-help-header form, 
.ap-checkout-help-footer form {
	float: left;
	width: 888px;
	height: 93px;	
 	margin: 0 6px;
 	padding: 0;	
}

.ap-checkout-help-header form fieldset, 
.ap-checkout-help-footer form fieldset {
	float: right;
	width: 680px;
	padding: 20px 0 0;	
}

.ap-checkout-help-footer form fieldset {
	padding: 38px 0 0;
}

/* heading */

.ap-checkout-help-header h2, 
.ap-checkout-help-footer h2 {
	float: left !important;
	margin-left: 23px !important;
	width: 185px !important;
	height: 14px !important;
	background: transparent url(../img/nav/ap-checkout-help.png) 0 0 no-repeat;
	text-indent: -10000px !important;
}

.ap-checkout-help-header h2 {
	margin-top: 30px !important;
}

.ap-checkout-help-footer h2 {
	margin-top: 49px !important;
}

/* close button */

.ap-checkout-help-header .ap-button-secondary, 
.ap-checkout-help-footer .ap-button-secondary {
	position: static !important;
	float: right;
	margin-right: 23px !important;
	margin-left: 43px !important;
	width: 92px;
}

.ap-checkout-help-header .ap-button-secondary {
	top: 18px;
}

.ap-checkout-help-footer .ap-button-secondary {
	bottom: 18px;
}

.ap-checkout-help-header {
	margin: 0 0 7px;
	padding: 0 0 8px;
	background: transparent url(../img/nav/ap-checkout-help-header.png) 0 100% no-repeat;
}

.ap-checkout-help-header form {
	background: transparent url(../img/nav/pattern-dots.png) 0 100% repeat-x;
}

.ap-checkout-help-footer {
	padding: 8px 0 0;
	background: transparent url(../img/nav/ap-checkout-help-footer.png) 0 0 no-repeat;
}

.ap-checkout-help-footer form {
	margin-top: 7px;
	background: transparent url(../img/nav/pattern-dots.png) 0 0 repeat-x;
}

/* select */

.ap-checkout-help-header .select, 
.ap-checkout-help-footer .select {
	float: right;
	width: auto;
	margin: 2px 0 0;
	_display: inline; 
}

.ap-checkout-help-header .select select, 
.ap-checkout-help-footer .select select {
	width: 180px;
}

.ap-checkout-help-header .select label, 
.ap-checkout-help-footer .select label {
	float: left;
	width: auto;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 10px;
	color: #b2b2b2;
	margin: 4px 18px 0 0;
}


/**
 * @section	ap-checkout-help-content
 * @todo	check for selector conflicts. get rid of !important rules.
 * 
 * Content in help lightbox. Divided by tab navigation
 *
 */
 
.ap-checkout-help-content {
	float: left;
	width: 100%;
	background: transparent url(../img/nav/ap-checkout-help-content.png) 0 0 repeat-y;
} 


.ap-checkout-help-tabs {
	float: left;
	width: 100%;
	border-bottom: 27px solid #fff;
	background: #fff url(../img/nav/ap-checkout-help-tabs.png) 0 100% no-repeat;
}

.ap-checkout-help-tabs ul, 
.ap-checkout-help-tabs li {
	float: left;
	width: auto;
}

.ap-checkout-help-tabs ul {
	padding: 0 0 0 20px;
}

.ap-checkout-help-tabs li {
	padding: 0 30px 0 0;
}

.ap-checkout-help-tabs a {
	float: left;
	display: block;	
	width: 408px;
	height: 32px;
	border: 1px solid #e0e0e0;
	border-bottom: none;
	color: #5c5f65;
	font-size: 12px;
	text-transform: uppercase;
	text-align: center;
	line-height: 32px;
	background: #ededed url(../img/nav/ap-checkout-help-tabs-a.png) 0 0 repeat-x;
}

.ap-checkout-help-tabs .selected a {
	background: #fff;
}

.ap-checkout-help-tabs .selected {
	background: transparent url(../img/nav/ap-checkout-help-tabs-selected.png) 100% 0 repeat-x;
}

/* content */

.ap-checkout-help .ap-wrapper {
	float: left;
	width: 314px !important;
	margin: 0 !important;
	border: none !important;
}

.ap-checkout-help .ap-wrapper-first {
	padding: 0 81px 0 50px !important;	
}

.ap-checkout-help .ap-wrapper-last {
	padding: 0 0 0 91px !important;	
}

.ap-checkout-help .ap-wrapper-inner {
	float: left;
	width: 100%;
	border-bottom: 1px solid #e0e0e0;
	padding: 18px 0 12px !important;
}

.ap-checkout-help .ap-wrapper-inner-last {
	border: none;
}

.ap-checkout-help h2 {
	font-size: 18px;
	line-height: 24px;
	float: none;
	margin: 0 0 16px;
}

.ap-checkout-help p {
	margin: 0 0 6px;
}

.ap-checkout-help .ap-action {
	color: #5c5f65;
	font-weight: bold;
	font-size: 10px;
	text-decoration: none;
}

/**
 * @section	ap-checkout-overlay
 *
 * Preview article images in custom tooltip overlay.
 *
 */
 
.ap-checkout-overlay {
	left: 0;
	top: 0;
	position: absolute;
	width: 273px;
	z-index: 2000;
	background: #fff;
}

.ap-checkout-overlay h3 {
	float: left;
	width: 235px;
	margin: 0 0 0 19px;
	font-size: 12px;
	line-height: 33px !important;
	font-weight: bold;	
}

.ap-checkout-overlay img {
	float: left;
	border-bottom: 19px solid #fff;
	margin: 0 19px;
	padding: 19px;
	background: transparent url(../img/nav/pattern-dots.png) 0 0 repeat;
}

.ap-checkout-overlay .shadow-l {
	background-position: 0 -420px !important;
}

/**
 * @section		ap-checkout-inline-edit
 * @todo 		move td div.loading to global.
 * Inline editing of articles in checkout basket.
 *
 */

td div.loading {
	width: 100%;
	background: transparent url(../img/nav/lightbox-loading.gif) no-repeat 50% 50%;
}


/**
 * @section	ap-checkout-password-reminder
 * @section	ap-checkout-login-change
 *
 * Lightbox password reminder.
 * Lightbox change login data.
 *
 */

.ap-checkout-password-reminder, 
.ap-checkout-login-change {
	float: left;
	width: 496px;
}

.ap-checkout-password-reminder h2 {
	width: 436px;
	margin: 0 0 27px;
}

.ap-checkout-login-change h2 {
	color: #5C5F65;
	float: left;
	font-size: 18px;
	line-height: 24px;
	margin: 0 0 30px;
	width: 100%;
}

.ap-checkout-password-reminder form, 
.ap-checkout-login-change form {
	width: auto;
}

.ap-checkout-password-reminder fieldset.inner, 
.ap-checkout-login-change fieldset.inner {
	margin: 0 0 18px;
}

.ap-checkout-password-reminder fieldset.inner .text input, 
.ap-checkout-login-change fieldset.inner .text input {
	width: 181px;
}

.ap-checkout-password-reminder fieldset.inner .ap-button-secondary, 
.ap-checkout-login-change fieldset.inner .ap-button-secondary {
	width: 189px;
	text-align: left;
}

.ap-checkout-password-reminder .ap-lightbox-title h2 {
	position: relative;
}

.ap-checkout-password-reminder .ap-action-info {
	position: absolute;
	top: 3px;
	right: 0;
	background: transparent url(../img/nav/ap-action-info.png) 0 2px no-repeat;
	padding: 0 0 0 20px;
	font-size: 12px;
	line-height: 18px;	
}

.ap-checkout-login-change .ap-key-value {
	width: 180px;
	margin: 0;
	padding: 0 200px 0 0;
}

.ap-checkout-login-change .ap-key-value dl {
	font-weight: normal;
}

div.ap-checkout-login-change .ap-key-value dt {
	width: 110px;
}

div.ap-checkout-login-change .ap-key-value dd {
	width: 70px;
	color: #999;
}

/**
 * @section 	ap-addressbook-address
 * 
 * Lightbox address change.
 * 
 */
 
.ap-lightbox-address {
	width: 354px;
}

.ap-lightbox-address .ap-button-secondary {
	width: 146px;
	text-align: left;
}

.ap-lightbox .message {
	margin: 18px 0 0;
	width: 314px;
}

/**
 * @section 	ap-checkout-help-single
 * @see			ap-service.css
 *
 * Single view of service elements in lightbox.
 * Shared styles with views of service elements not in lightbox. 
 * 
 */

.ap-checkout-help-single .ap-wrapper {
	width: 456px !important;
	padding: 0 50px !important;
	background: #fff;
}

/**
 * @section 	ap-tabs
 * 
 */

.ap-service .ap-tabs, 
.ap-checkout-help-single .ap-tabs {
	background: transparent url(../img/nav/ap-tabs.png) 50% 100% no-repeat;
	border-bottom: 27px solid #fff;	
}
 
.ap-service .ap-tabs ul,
.ap-checkout-help-single .ap-tabs ul {
	padding: 0 0 0 58px;	
}

.ap-service .ap-tabs li, 
.ap-checkout-help-single .ap-tabs li {
	padding: 0 10px 0 0;	
}

.ap-service .ap-tabs a, 
.ap-checkout-help-single .ap-tabs a {
	float: left;
	line-height: 32px;
	height: 32px;
	padding: 0;
	font-weight: bold;
	font-size: 12px;
	text-align: center;	
	padding: 0 18px;	
}

.ap-service .ap-tabs li.selected a, 
.ap-checkout-help-single li.selected a {
	background: #fff;
}

/**
 * @section 	ap-table
 * 
 * Custom table styles within service.
 * 
 */
 

.ap-service .ap-table, 
.ap-checkout-help-single .ap-table {
	margin: 0 0 18px;
}

.ap-service .ap-table th, 
.ap-checkout-help-single .ap-table th {
	font-weight: bold;
	font-size: 12px;
	text-transform: none;
}

.ap-service .ap-table td, 
.ap-checkout-help-single .ap-table td {
	font-size: 12px;
	line-height: 24px;
	vertical-align: top;
	background: none;
}

.ap-service .ap-table-key, 
.ap-checkout-help-single .ap-table-key {
	font-weight: bold;
}

.ap-service .ap-table-key span, 
.ap-checkout-help-single .ap-table-key span {
	padding: 0 0 0 10px;
	display: block;
	text-align: left;
}

.ap-service .ap-table-value span, 
.ap-checkout-help-single .ap-table-value span {
	display: block;
	border-left: 1px solid #d8d8d8;
}

.ap-service .ap-table td.ap-table-spacer, 
.ap-checkout-help-single .ap-table td.ap-table-spacer {
	padding: 0;
	height: 2px;
	line-height: 0;
}

/**
 * @section 	ap-layout-content
 * 
 * Content within service section
 * 
 */
.ap-service-index .ap-wrapper {
	width: 314px;
	margin: 0;
	border-top: 27px solid #fff;
	border-bottom: 27px solid #fff;
}

.ap-service-index .ap-wrapper-first {
	padding: 0 91px 0 81px;
}

.ap-service-index .ap-wrapper-inner {
	float: left;
	width: 100%;
	border-bottom: 1px solid #e0e0e0;
	padding: 18px 0 0;
}

.ap-service-index .ap-wrapper-inner-last {
	border: none;
}

.ap-service .ap-layout-content h2, 
.ap-checkout-help-single .ap-wrapper h2 {
	margin: 0 0 24px;
}

.ap-service .ap-layout-content p, 
.ap-checkout-help-single .ap-wrapper p {
	margin: 0 0 18px;
}

.ap-service .ap-layout-content .ap-action, 
.ap-checkout-help-single .ap-wrapper .ap-action {
	color: #5c5f65;
	font-weight: bold;
	font-size: 10px;
}


/**
 * @section 	ap-service-wishdate
 * 
 */

.ap-service-wishdate .ap-table td, 
.ap-checkout-help-single .ap-service-wishdate .ap-table td {
	width: 50%;
} 

/**
 * @section 	ap-service-rate
 * 
 */

.ap-service-rate .ap-table-rate td, 
.ap-checkout-help-single .ap-service-rate .ap-table-rate td {
	width: 33.3%;
}

.ap-service-rate .ap-table-example td, 
.ap-checkout-help-single .ap-service-rate .ap-table-example td {
	width: 50%;
}

/**
 * @section 	ap-service-rate-calculator
 * @see			ap-checkout-rate-calculator / ap-checkout.css
 * 
 */

.ap-service-rate-calculator fieldset.inner .input-inline, 
.ap-checkout-help-single .ap-service-rate-calculator fieldset.inner .input-inline {
	float: left;
	width: 100%;
	margin: 0 0 18px;
}
 
.ap-service-rate-calculator fieldset.inner .input-inline .text, 
.ap-checkout-help-single .ap-service-rate-calculator fieldset.inner .text {
	float: left;
	width: auto;
	margin: 0 10px 0 0;
}

.ap-service-rate-calculator fieldset.inner .unit input, 
.ap-checkout-help-single .ap-service-rate-calculator fieldset.inner .unit input {
	width: 74px;
	margin: 0 5px 0 0;
}

.ap-service-rate-calculator fieldset.inner .radio, 
.ap-checkout-help-single .ap-service-rate-calculator fieldset.inner .radio {
	margin: 19px 10px 0;
	float: left;
	width: auto;
}

.ap-service-rate-calculator fieldset.inner .ap-button-secondary, 
.ap-checkout-help-single .ap-service-rate-calculator fieldset.inner .ap-button-secondary {
	margin: 0 1px 0 0;
	width: 199px;
	text-align: left;
}

.ap-service-rate-calculator td, 
.ap-checkout-help-single .ap-service-rate-calculator td {
	width: 50%;
}

.ap-service-rate-calculator .ap-table-value, 
.ap-checkout-help-single .ap-service-rate-calculator .ap-table-value {
	color: #915b81;
	
}

}

/**
 * @section 	ap-advice-sizefinder-measure
 * 
 * Measure lightbox
 * 
 */

.ap-advice-sizefinder-measure {
	width: 888px;
	padding: 6px;
	float: left;
}

.ap-advice-sizefinder-measure form {
	padding: 0;
}

.ap-advice-sizefinder-measure h2 {
	font-size: 18px;
	line-height: 24px;
	margin: 0 0 18px;
}

.ap-advice-sizefinder-measure h3, 
.ap-advice-sizefinder-measure p {
	float: left;
	width: 100%;
	font-size: 12px;
	line-height: 18px;
	margin: 0 0 18px;	
}


.ap-advice-sizefinder-measure h3 {
	font-weight: bold;
}

.ap-advice-sizefinder-measure h3 span {
	float: left;
	width: 15px;
	height: 18px;
	padding: 0 4px 0 0;
	overflow: hidden;
	background: transparent url(../img/nav/ap-advice-sizefinder-measure-number.png) 0 50% no-repeat;
	color: #fff;
	text-align: center;
	font-size: 10px;
}

.ap-advice-sizefinder-measure .ap-wrapper-first {
	float: left;
	width: 395px;
	padding: 0 43px 0 0;
}

.ap-advice-sizefinder-measure .ap-wrapper-first img {
	float: left;
	padding: 20px;
	background: transparent url(../img/nav/pattern-dots.png) 2px 2px repeat;
}

.ap-advice-sizefinder-measure .ap-wrapper-last {
	float: left;
	width: 450px;
	padding: 10px 0;
}

.ap-advice-sizefinder-measure .ap-wrapper-last .ap-wrapper-inner-first {
	float: left;
	width: 334px;
}

.ap-advice-sizefinder-measure .ap-wrapper-last .ap-wrapper-inner-last {
	float: right;
	padding: 0 10px 0 0;
}

/**
 *
 * Sizefinder in global help box. 
 * 
 */

.ap-checkout-help-single .ap-advice-sizefinder-measure .ap-wrapper-first {
	padding: 0 !important;
}

.ap-checkout-help-single .ap-advice-sizefinder-measure .ap-wrapper-last {
	width: 385px !important;
	padding: 10px 0 10px 20px !important;
}

/**
 * @section	ap-checkout-packet-shop
 *
 * Inline selector for packet shop search. Shares common styles with .ap-checkout-address-book.
 *
 */
 
.ap-checkout-packet-shop, 
.ap-checkout-address-book {
	float: left;
	width: 100%;
	margin: 30px 0 0;
}

.ap-checkout-packet-shop-pagination a, 
.ap-checkout-address-book-pagination a {
	color: #5c5f65;	
}

.ap-checkout-packet-shop-header, 
.ap-checkout-packet-shop-content,
.ap-checkout-packet-shop-footer, 
.ap-checkout-address-book-content,
.ap-checkout-address-book-footer {
	float: left;
	width: 100%;
}

.ap-service-packetshop-search .ap-wrapper {
	float: left;
	width: 780px;
	margin: 27px 81px;
}

.ap-service-packetshop-search-h3 {
	float: left;
	height: 59px;
	border-right: 3px solid #ededed;
	width: 165px;
	font-size: 14px;
	font-weight: bold;
	line-height: 59px;
	text-align: center;
	margin: 0;
}

.ap-service-packetshop-search .ap-button-secondary-search {
	width: 80px;	
}

/* header */

.ap-checkout-packet-shop-header, 
.ap-checkout-packet-shop-content, 
.ap-checkout-address-book-content {
	margin: 0 0 3px;
	background: #fff;	
}

.ap-checkout-packet-shop-header h3, 
.ap-checkout-packet-shop-header .text-inline {
	float: left;
	height: 59px;
	border-right: 3px solid #ededed;
}

.ap-checkout-packet-shop-header h3 {
	width: 165px;
	font-size: 14px;
	font-weight: bold;
	line-height: 59px;
	text-align: center;
}

.ap-checkout-packet-shop-header .text-inline {
	width: 491px;
	padding: 0 0 0 22px;
}

.ap-checkout-packet-shop-header .text-inline label {
	margin: 10px 0 0;
	width: 100%;
}

.ap-checkout-packet-shop-header .text-inline .s {
	margin: 0;
	width: 164px;
}

.ap-checkout-packet-shop-header .text-inline .s .hint {
	margin: 0 0 0 30px;
	float: left;
	text-transform: uppercase;
	line-height: 19px;
}

.ap-checkout-packet-shop-header .text-inline .s input {
	margin: 0;
	width: 75px;
	width: 67px;
}

.ap-checkout-packet-shop-header .text-inline .m {
	margin: 0;
	width: 158px;
}

.ap-checkout-packet-shop-header .text-inline .m input {
	margin: 0;
	width: 145px;
	width: 137px;
}

.ap-checkout-packet-shop-header .text-inline .m .unit {
	margin: 0 0 0 5px;
	float: left;
	line-height: 19px;
	text-align: center;
}

.ap-checkout-packet-shop-header .ap-button-secondary {
	float: left;
	margin: 19px 6px 0 9px;
	width: 80px;
}

/* content */

.ap-checkout-packet-shop-content, 
.ap-checkout-address-book-content {
	width: 780px;
	position: relative;
	overflow: hidden;
/*	height: 216px;*/
	height: 254px;
}

.ap-checkout-packet-shop-content-inner, 
.ap-checkout-address-book-content-inner {
/*	height: 216px; */
	height: 254px;
	position: absolute;
	left: 0;
	top: 0;
}

.ap-checkout-packet-shop-content, 
.ap-checkout-packet-shop-content-inner {
	height: 324px;
}


/*
.ap-checkout-address-book-content {
	height: 254px;
}

.ap-checkout-address-book-content-inner {
	height: 254px;
}
*/

.ap-checkout-packet-shop-content .radio, 
.ap-checkout-address-book-content .radio {
	margin: 0;
	padding: 27px 0;
	float: left;
	width: 156px;
}


.ap-checkout-packet-shop-content .radio input, 
.ap-checkout-address-book-content .radio input {
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}

.ap-checkout-packet-shop-content .radio label, 
.ap-checkout-address-book-content .radio label {
	float: left;
	width: 123px;
}

.ap-checkout-address-book-content .radio label a {
	margin: 16px 0 0;
}

.ap-checkout-packet-shop-content .ap-packet-search-table, .ap-checkout-address-book-content .ap-packet-search-table {
	float:left;
	margin:0;
	padding:27px 0;
	width:156px;
	position: relative;
	font-size:12px;
}

.ap-checkout-packet-shop-content .ap-packet-search-result-bullet, .ap-checkout-address-book-content .ap-packet-result-bullet {
	background: transparent url(../img/nav/ap-action-more.png) 50% 70% no-repeat;	
	width: 30px;
	height: 16px;
	float: left;
}

/* footer */

.ap-checkout-pagination {
	float: left;
	width: 100%;
	margin: 16px 0 0;
	height: 29px;
}

.ap-checkout-pagination ul {
	margin: 0 0 0 347px;
}

.ap-checkout-pagination ul, 
.ap-checkout-pagination li {
	float: left;
	width: auto;
	color: #5c5f65;
	font-size: 18px;
	font-weight: bold;
}


li.ap-checkout-pagination-previous,
li.ap-checkout-pagination-next {
	width: 25px;
	height: 21px;
	overflow: hidden;
}

li.ap-checkout-pagination-previous a,
li.ap-checkout-pagination-next a {
	float: left;
	width: 25px;
	text-indent: -10000px;
}

li.ap-checkout-pagination-previous a {
	background: transparent url(../img/nav/ap-checkout-packet-shop-pagination-previous.png) 0 50% no-repeat;
}

li.ap-checkout-pagination-next a {
	background: transparent url(../img/nav/ap-checkout-packet-shop-pagination-next.png) 100% 50% no-repeat;
}

/* loading */

#checkout-address-book.loading,
#checkout-paketausgabe.loading,
#packetshop-search.loading .ap-checkout-packet-shop-content {
	background: transparent URL('../img/nav/packetshop-loading.gif') no-repeat 50% 50%;
}

#packetshop-search.loading .ap-checkout-pagination {
	display: none;
}


.pa_name, .pa_street, .pa_zip, .pa_housenumber, .pa_city, .pa_zip
{
text-decoration:none;
}


/**
 *
 * Ratings für Google 
 * 
 */

.hreview {
	display: none;
}
 
.hreview-aggregate {
	display: none;
}

/** @section .ap-lightbox-global
 * 
 * This is a basic a layout for a global lightbox
 * 
 */

div.ap-lightbox-global {
	width: 540px;
}

.ap-lightbox-global form {
	padding: 20px 10px 10px;
	width: 520px;
}

/* background image in title */

.ap-lightbox-global .ap-lightbox-title {
	height: 250px;
}

.ap-lightbox-global .ap-lightbox-title h2 {
	float: left;
	text-indent: 10px;
	padding-left: 17px;
}

.ap-lightbox-global .ap-lightbox-title p {
	float: left;
	width: 286px;
	height: 120px;
	margin: 0;
	padding: 0 0 0 190px;
	background: transparent url(../img/nav/ap-checkout-h1.png) 0 0 no-repeat;	
}

.ap-lightbox-global .ap-button-secondary {
	width: 237px;
	text-align: left;
}