@charset "UTF-8";

/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
 * (en) central stylesheet
 * (de) zentrales Stylesheet
 *
 * @creator       YAML Builder V1.2b (http://builder.yaml.de)
 * @file          my_layout.css
 * @-yaml-minver  3.1
 * 
 */

/* import core styles | Basis-Stylesheets einbinden */
@import url(yaml/core/base.css);

/* import screen layout | Screen-Layout einbinden */
@import url(yaml/navigation/nav_shinybuttons.css);
@import url(yaml/navigation/nav_vlist.css);
@import url(yaml/screen/basemod.css);
@import url(yaml/screen/content.css);

/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
 * (en) stylesheet for screen layout
 * (de) Stylesheet für das Bildschirm-Layout
 *
 * @creator       YAML Builder V1.2b (http://builder.yaml.de)
 * @file          basemod.css
 * @-yaml-minver  3.1
 */

@media screen, projection
{
  .c20l, .c80l {float: left; }
  .c20r, .c80r {float: right; margin-left: -5px; }

  .c20l, .c20r { width: 20%; }
  .c80l, .c80r { width: 80%; }

  .tabbed {
    /* (en) This image is mainly transparent */
    /* (de) Dieses Bild ist grﾃｶﾃ殳enteils transparent */
    background: transparent url("yaml/navigation/images/sliding_door/round/bg.gif") repeat-x bottom;
    float: left;
    clear: both;
    width: 100%;
    /*position: absolute;*/
  }

  .tabbed ul {
    line-height: 1em;
    list-style: none;
    margin: 0;
    padding: 0 0 0 .5em; /* LTR */
    white-space: nowrap;
  }

  .tabbed li {
    /* (en) Repeat the main color from the image */
    /* (de) Wiederholung der Hauptfarbe aus der Bilddatei */
    list-style-type: none !important;
    background: #e0ecf8 url("yaml/navigation/images/sliding_door/round/left.png") no-repeat top left;
    border-bottom: 1px solid #000;
    float: left; /* LTR */
    margin: 0;
    padding: 0 0 0 3px;
  }

  .tabbed a,
  .tabbed strong {
    /* (en) This image is mainly transparent */
    /* (de) Dieses Bild ist grﾃｶﾃ殳enteils transparent */
    background: transparent url("yaml/navigation/images/sliding_door/round/right.png") no-repeat top right;
    color: #667;
    display: block;
    font-weight: normal;
    padding: 5px 11px 3px 8px;
    text-decoration: none;
    text-transform: none;

    /**
     * @bugfix
     * @affected   IE5.x, IE6
     * @css-for    all browsers
     * @valid      yes
     */
    width: auto; /* only IE 5.x */
    width/**/:/**/ .1em; /* only IE 6.0 */
  }

  .tabbed a:link,
  .tabbed a:visited { background-color: transparent; color: #667; }

  /**
   * @bugfix
   * @affected   IE5.x, IE6
   * @css-for    all browsers
   * @valid      yes
   */
  .tabbed > ul a,
  .tabbed > ul strong { width: auto; }  /* for other browsers */

  .tabbed ul li:focus,
  .tabbed ul li:hover,
  .tabbed ul li:active {
    /* (en) Repeat the main color from the image */
    /* (de) Wiederholung der Hauptfarbe aus der Bilddatei */
    background-color: #c4d0dc;
    background-position: 0 -150px;
  }

  .tabbed li:focus a,
  .tabbed li:hover a,
  .tabbed li:active a { background-position: 100% -150px; }

  .tabbed a:focus,
  .tabbed a:hover,
  .tabbed a:active { background-color: transparent; color: #223; }

  .tabbed li.active,
  .tabbed ul li.active:focus,
  .tabbed ul li.active:hover,
  .tabbed ul li.active:active {
    /* (en) Repeat the main color from the image */
    /* (de) Wiederholung der Hauptfarbe aus der Bilddatei */
    background: white url("yaml/navigation/images/sliding_door/round/left_on.png") no-repeat top left;
    border: 0 none;
  }

  .tabbed li.active strong {
    /* (en) This image is mainly transparent */
    /* (de) Dieses Bild ist grﾃｶﾃ殳enteils transparent */
    background: transparent url("yaml/navigation/images/sliding_door/round/right_on.png") no-repeat top right;
    color: #334;
    font-weight: bold;
    padding-bottom: 4px;
    padding-top: 5px;
  }

  #tabframe{
    /*position: relative;*/
    margin-right: 0.5em;
    margin-bottom: 3em;
  }
  .pages{
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    float: left;
    padding-top: 1em;
    width: 100%;
    min-height: 400px;
  }

  div#left_menu
  {
    padding-left: .5em;
    padding-right: .5em;
  }
  div#content
  {
    padding-left: .5em;
    padding-right: .5em;
  }
  div#top_image
  {
    overflow: hidden;
    clear: both;
    margin-bottom: 10px;
  }
  div#top_image img{
    float: right;
  }
  p
  {
    padding-left: 1em;
    line-height: 1.9em;
  }
  a{
    margin-left: 1px;
    margin-right: 1px;
  }
  a img
  {
    border-style: none;
		text-decoration: none;
  }
  a:hover
  {
    background-color: #e0e0ff
  }
  a:hover img
  {
    opacity: 0.4;
  }
	h1, h1 a, h1 a:hover, h1 a:visited
	{
		text-decoration: none;
	}
	small
	{
		font-size: 85%;
	}
  .inline
  {
    display: inline;
  }

  table, th, tr, td
  {
    color:#444444;
    line-height:1.3;
  }

  table th.nutrition
  {
    font-size: 80%;
  }
  .align_right
  {
    text-align: right;
  }
  .align_center
  {
    text-align: center;
  }

  table.result
  {
    border-bottom: 1px solid #DDDDDD;
  }

  table.result th,
  table.result td,
  table.result tr.last
  {
    padding: .3em .5em .3em .5em;
    border-bottom:1px solid #DDDDDD;
  }

  table.result th
  {
    background-color:#F0F0F0;
    /*font-size:95%;*/
    font-weight:normal;
    text-align: left;
  }

  table.result th.price,
  table.result th.content
  {
    width: 3em;
  }

  table.result th.name
  {
    /*width: 4em;*/
  }

  table.result th.price_per_liter,
  table.result th.price_per_unit,
  table.result th.price_total
  {
    border-width: 0px 1px 0px 1px;
    border-style: solid;
    border-color: #DDDDDD;
		text-align: center;
		font-size: 90%;
  }
	
	div.first
	{
		background-image: url(../images/1st.gif);
		background-repeat: no-repeat;	
		background-position: left bottom;	
		padding: 19px 2px 0px 15px;
		margin-left: -6px;
	}
	
  span.nowrap
  {
    white-space: nowrap;
  }

  span.disable
  {
    color: #d8d8d8;
  }

  td.control,
  th.control
  {
    width: 16px;
  }
  table.result td
  {
    text-align: right;
  }

  table.result td.shop
  {
    text-align: left;
  }
  table.result td.name
  {
    text-align: left;
  }
  table.result td.price
  {
    /*width: 5em;*/
  }

  table.result td.image
  {
    width: 80px;
    text-align: center;
  }

  table.result td.price_total,
  table.result td.price_per_unit,
	table.result td.price_per_liter
  {
    border-width: 0px 1px 0px 1px;
    border-style: solid;
    border-color: #DDDDDD;
  }

  table.result td.index
  {
    width: 2.3em;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-weight: bold;
  }

  table.result td.description
  {
    text-align: justify;
    padding: .3em 1em .3em 1em;
  }

  table.result td.image div
  { 
    float: right; 
    max-height: 64px; 
    overflow:hidden; 
  }

  table.result tr.blank,
  table.result tr.blank td
  {
    line-height: 5px;
    margin: 0;
    padding: 0;
    background-color:#FFF;
  }
  table.result td.total{
    font-weight: bold;
    font-size: 1.4em;
  }
  .unit
  {
    font-size: 85%;
    padding-left: .25em;
    color: #444;
  }

  table.result tbody:hover
  {
    background-color: #F0F8FF;
  }

  table.result tbody:hover th
  {
    background-color:#DDD;
  }

  table.result .buy
  {
    text-align: center;
		width: 6em;
  }
	table.result .price_total span.price
	{
		font-size: 140%;
		font-weight: bold;
	}
  div.postages
  {
    width: 60%;
    text-align: center;
  }

  div.postage
  {
    float: left;
    display: inline;
  }
  div.postages:after
  {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;

  }
  div.detail
  {
    padding: 1em;
  }
  div.detail div.image
  {
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
  }

  div.postages th.areagroup
  {
    width: 9em;
  }

  div.postages th.area
  {
    width: 7em;
  }

  div.postages td
  {
    width: 5em;
  }
	div.postages table
	{
		border-width-bottom: 0px;
	}

  h2
  {
    margin: .3em 0 .3em 0;
  }

  .selection .selected
  {
    /*font-weight: bold;*/
    background-color: #FFFBBB;
    padding: .2em;
  }

  div#welcome
  {
    padding: 10px 10px 10px 10px;
  }
  /* pagination */
  div.pagination {
    text-align:center;
    padding: 7px;
    margin: 3px;
  }

  div.pagination a {
    padding: 4px 6px 4px 6px;
    margin: 3px;
    border: 1px solid #ccc;
    
    text-decoration: none; /* no underline */
    color: #000;
  }
  div.pagination a:hover, div.pagination a:active {
    border: 1px solid #f0f0f0;
    color: #000;
  }
  div.pagination span.current {
    padding: 4px 6px 4px 6px;
    margin: 3px;
		border: 1px solid #d9d300;
		
		font-weight: bold;
		background-color: #d9d300;
		color: #fff;
	}
  div.pagination span.disabled {
    padding: 4px 6px 4px 6px;
    margin: 3px;

		border: 1px solid #EEE;
		color: #DDD;
  }
	div#filter,
	div#postage,
	div#items,
	div#multi
	{
			padding-left: 1em;
			padding-bottom: 1em;
	}
	
	div#filter table{
			text-align: center;
	}
	
	div#filter table
	{
		border-width: 0px 0px 1px 0px;
		border-style: solid;
		border-color: #aaa;
	}
  div#filter table td
  {
    line-height: 2em;
  }
  div#filter th[scope="col"]
  { 
    background: white;
		border-width: 0px 0px 1px 0px;
		border-style: solid;
		border-color: #eee;    
  }
  
	table#filter .can{
			background-color: #fbfbfb;
	}
	table#filter .bottle{
			background-color: #f8f8f8;
	}
	table#filter .barrel{
			background-color: #fbfbfb;
	}

  /* modal window */
  .modal {  
    background-color:#fff;
    opacity: 0.3;
  }

  #control_overlay {  
    background-color:#fff;  
  }
	/***** Ajax indicator ******/
	#ajax-indicator
	{
		position: absolute; /* fixed not supported by IE */
		background-color: #eee;
		border: 1px solid #bbb;
		top: 35%;
		left: 40%;
		width: 20%;
		font-weight: bold;
		text-align: center;
		padding: 0.6em;
		z-index: 100;
		filter: alpha(opacity=50);
		opacity: 0.5;
	}

	html>body #ajax-indicator
	{ position: fixed; }

	#ajax-indicator span
	{
		background-position: 0% 40%;
		background-repeat: no-repeat;
		background-image: url(../images/loading.gif);
		padding-left: 26px;
		vertical-align: bottom;
	}

	.sortable thead tr
	{
		/*background:url(../images/header-bg.gif);*/
		/*color:#cfdce7;
		border:1px solid #fff; border-right:none;*/
	}
	.sortable thead .desc,
	.sortable thead .asc,
	.sortable thead .initial
	{
		cursor: pointer;
		padding-left: 17px;
		background: url(../images/sort_initial.gif) 0px no-repeat;
	}
	.sortable thead .desc 
	{
		background-image: url(../images/sort_desc.gif);
	}
	.sortable thead .asc
	{
		background-image: url(../images/sort_asc.gif);
	}
	.sortable thead .initial
	{
	}	
	.sortable thead th.desc:hover,
	.sortable thead th.asc:hover,
	.sortable thead th.initial:hover
	{
		color: #182E7A;
		text-decoration: underline;
	}

  table#labels tr.selected
  {
    background-color: #ffdddd;
  }

  .hint, .attention, .grayed {
    background-color:#F4F8F4;
    background-position:left top;
    background-repeat:no-repeat;
    border-color:#AACCAA -moz-use-text-color;
    border-style:dotted none;
    border-width:1px 0;
    color:#335533;
    margin:0 0 1em 1em;
    padding:0.5em 1em 0.5em 48px;
  }
  .hint
  {
    background-image:url(../images/sym_hint.png);
  }
  .attention
  {
    background-image:url(../images/sym_attention.png);
  }
	
	div.h2box
	{
		background-image:url(../images/head2_box.png);
		background-repeat: no-repeat;
		background-position: right bottom;
		padding-bottom: 0px;
		margin-bottom: 1em;
	}
	div.h2box h2
	{
		background-image:url(../images/head2_box.png);
		background-repeat: no-repeat;
		background-position: right top;
		padding: 8px 0 10px 15px;
		margin: 0 0 0 10px;
		font-size: 17px;
		font-weight: bolder;
	}
	div.h2box div.frame
	{
		background-image:url(../images/head2_box.png);
		background-repeat: no-repeat;
		background-position: left top;
		padding-left: 3px;
	}
  div.h2box div.detail
  {
    height: auto;
  }
	div.h2box div.content
	{
		padding-bottom: 0.5em;
	}
	
	div.decolated
	{
		border-style: solid;
		border-color: #CCCCCC;
		border-width: 1px 0px 0px 0px;
		padding: 1px 1px 3px 1px;
		background-image: url(../images/head_bottom.png);
		background-repeat: repeat-x;
		background-position: left bottom;
		margin-bottom: 0.5em;
	}
	div.decolated h3
	{
		background-image:url(../images/head3_bg.png);
		background-repeat: repeat-x;
		padding: 2px;
		line-height: 120%;
		padding-left: .5em;
	}
	
	h4
	{
		background-image:url(../images/head4_bg.png);
		background-repeat: no-repeat;	
		background-position: left bottom;
		border-style: solid;
		border-color: #CCCCCC;
		border-width: 0px 1px 0px 1px;
		font-size:12px;
		font-weight:bold;
		height:18px;
		padding: 6px 1px 0px 9px;
		margin-bottom: 0.5em;
		margin-top: 0.5em;
	}
  #twtr-widget-1 h4
  {
    background-image: none;
		border-style: none;
  }
	
	a.button{
		background:buttonface url(../images/button_border2.gif) no-repeat;
		cursor:pointer;
		text-align:center;
		display:block;
		text-decoration:none;
		margin:3px 2px;
		background-color: #60C060;
		color: white;
	}
	
	a.button:hover span{
		
		opacity:0.6;
		filter:alpha(opacity:80);
	}
	
	a.button span
	{
		padding:3px 8px 4px 8px;
		
		text-align:center;
		position:relative;
		left:1px;top:1px;
		display:block;
		text-decoration:none;
		background:url(../images/button_border1.gif) right bottom no-repeat;
    white-space: nowrap;
	}
	
	ul
  {
    margin-bottom: 0.5em;
  }
  
  li
  {
    line-height: 1.6em;
    margin-bottom: 0.6em;
  }
  
  ul.separator
  {
    margin-left: 0px;
  }
  ul.separator li
  {
    border-bottom-color: #E5EBFA;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-left: 0px;
    margin-bottom: 0.6em;
    padding: 0em 0.4em 0.6em 0.4em;

  }
	div#tweets p
  {
    margin-bottom: 0.5em;
  }
	div.catalog-image
  {
    float:left;
    width: 155px;
    height: 190px;
    text-align: center;
    font-size: 90%;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  div.amazon-box
  {
    width: auto;
    margin: auto;
    overflow: hidden;
  }
  div.amazon-image
  {
    margin: auto; text-align: center; margin-bottom: 2em;
  }
  div.alternate-catalog
  {
    margin: auto;
    width: 465px;
  }
  div.labelcloud
  {
    line-height: 2.0em;
    padding: .7em;
  }
  div.labelcloud a
  {
    padding: 0.5em;
  }
}