/**
 * $Id$
 *
 * CSS definitions used for screen display.
 *
 * Author: Claudio Felber (claudio.felber@perron2.ch)
 * Created: 2008-02-22
 *
 * Copyright (c) 2008, Perron2 GmbH, All Rights Reserved.
 */

@import "content.css";

/*===== Main page building blocks ===========================================*/

html, body {
    background-color: #336699;
    background-image: url(../pictures/frame/background.gif);
    background-repeat: repeat-x;
    height: 100%;
}

#page {
    position: relative;
    width: 820px;
    background-image: url(../pictures/frame/page_background.png);
    background-position: 0px -1px;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    _height: 100%;
}

#header {
    width: 800px;
    height: 180px;
    margin-left: 10px;
    margin-right: 10px;
    overflow: hidden;
}

#logo {
    display: block;
    margin-left: 21px;
    margin-top: 23px;
    width: 139px;
    height: 0px;
    padding-top: 66px;
    overflow: hidden;
    background-image: url(../pictures/frame/logo.png);
    _background-image: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../pictures/frame/logo.png', sizingMethod='scale');
}

#footer {
    height: 70px;
    background-image: url(../pictures/frame/footer_background.png);
    background-repeat: no-repeat;
    margin-left: 170px;
    margin-right: 10px;
    _background-image: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../pictures/frame/footer_background.png', sizingMethod='crop');
}

#container {
    background-image: url(../pictures/frame/container_background.png);
    background-repeat: repeat-y;
    background-position: 170px 0px;
}

#imprint {
	font-size: 10px;
    text-transform: lowercase;
    text-align: right;
    padding-right: 30px;
    color: #6f95cb;
    margin-top: -8px;
    padding-bottom: 2px;
}

#imprint a {
	text-decoration: none;
}

#imprint a:hover {
	text-decoration: underline;
    color: #6f95cb;
}

/*===== Header images =======================================================*/

body.home #header {
    background-image: url(../pictures/frame/headers/home.jpg);
}

body.contact #header {
    background-image: url(../pictures/frame/headers/contact.jpg);
}

body.tips #header {
    background-image: url(../pictures/frame/headers/tips.jpg);
}

body.sitemap #header {
    background-image: url(../pictures/frame/headers/sitemap.jpg);
}

body.search #header {
    background-image: url(../pictures/frame/headers/search.jpg);
}

body.books #header {
    background-image: url(../pictures/frame/headers/books.jpg);
}

body.coupons #header {
    background-image: url(../pictures/frame/headers/coupons.jpg);
}

body.delivery #header {
    background-image: url(../pictures/frame/headers/delivery.jpg);
}

body.agb #header {
    background-image: url(../pictures/frame/headers/agb.jpg);
}

body.services #header {
    background-image: url(../pictures/frame/headers/services.jpg);
}

body.outofprint #header {
    background-image: url(../pictures/frame/headers/outofprint.jpg);
}

body.subscriptions #header {
    background-image: url(../pictures/frame/headers/subscriptions.jpg);
}

body.companies #header {
    background-image: url(../pictures/frame/headers/companies.jpg);
}

body.booktables #header {
    background-image: url(../pictures/frame/headers/booktables.jpg);
}

body.advancesale #header {
    background-image: url(../pictures/frame/headers/advancesale.jpg);
}

body.newsletters #header {
    background-image: url(../pictures/frame/headers/newsletters.jpg);
}

body.shop #header {
    background-image: url(../pictures/frame/headers/shop.jpg);
}

body.team #header {
    background-image: url(../pictures/frame/headers/team.jpg);
}

body.history #header {
    background-image: url(../pictures/frame/headers/history.jpg);
}

body.partners #header {
    background-image: url(../pictures/frame/headers/partners.jpg);
}

body.basket #header {
    background-image: url(../pictures/frame/headers/basket.jpg);
}

/*===== Left sidebar and main menu ==========================================*/

#sidebar {
    position: absolute;
    width: 800px;
    left: 10px;
    top: 180px;
    z-index: -100px;
    
}

#sidebar_footer {
    height: 20px;
    background-image: url(../pictures/frame/sidebar_background.png);
    _background-image: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../pictures/frame/sidebar_background.png', sizingMethod='scale');
}

#menu {
    background-image: url(../pictures/frame/menu_background.png);
    background-repeat: repeat-y;
    width: 800px;
}

#menu ul {
    padding: 0;
    margin: 0;
    padding-top: 80px;
    padding-bottom: 19px;
    list-style-type: none;
    width: 160px;
    overflow: hidden;
}

#menu li {
    width: 160px;
    float: left;
    margin: 0;
    padding: 0;
    background-image: none;
}

#menu li.active, #menu li.last {
    background-image: url(../pictures/frame/menu_separator.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    padding-bottom: 1px;
}

#menu li.subactive a {
    height: 19px;
}

#menu li.last {
    background-position: 20px bottom;
}

#menu li.last.active {
    background-position: 0px bottom;
}

#menu a, #menu span {
    background-position: left bottom;
    background-repeat: no-repeat;
    display: block;
    height: 20px;
    width: 160px;
    text-indent: -10000em;
}

#menu a:hover {
    background-position: -160px bottom;
}

#menu span, #menu li.active a {
    background-position: -320px bottom;
}

/* Submenu overrides */

#menu ul ul {
    padding: 0;
    padding-bottom: 1px;
    margin-bottom: 34px;
    background-image: url(../pictures/frame/menu_separator.png);
    background-repeat: no-repeat;
    background-position: 36px bottom;
}

#menu li.active li a {
    background-position: left bottom;
}

#menu li li.active a, #menu li li span {
    background-position: -320px bottom;
}

#menu li li a:hover {
    background-position: -160px bottom;
}

#menu li li.active {
    background: none;
    padding: 0;
}

#menu li li a, #menu li li span {
    height: 15px !important;
}

/* Item images */

#item_order a, #item_order span {
    background-image: url(../pictures/frame/menu/order.png);
}

#item_services a, #item_services span {
    background-image: url(../pictures/frame/menu/services.png);
}

#item_shop a, #item_shop span {
    background-image: url(../pictures/frame/menu/shop.png);
}

#item_portrait a, #item_portrait span {
    background-image: url(../pictures/frame/menu/portrait.png);
}

#item_docudisp a, #item_docudisp span {
    background-image: url(../pictures/frame/menu/docudisp.png);
}

#item_books a, #item_books span {
    background-image: url(../pictures/frame/submenu/books.png);
}

#item_coupons a, #item_coupons span {
    background-image: url(../pictures/frame/submenu/coupons.png);
}

#item_delivery a, #item_delivery span {
    background-image: url(../pictures/frame/submenu/delivery.png);
}

#item_agb a, #item_agb span {
    background-image: url(../pictures/frame/submenu/agb.png);
}

#item_outofprint a, #item_outofprint span {
    background-image: url(../pictures/frame/submenu/outofprint.png);
}

#item_subscriptions a, #item_subscriptions span {
    background-image: url(../pictures/frame/submenu/subscriptions.png);
}

#item_companies a, #item_companies span {
    background-image: url(../pictures/frame/submenu/companies.png);
}

#item_booktables a, #item_booktables span {
    background-image: url(../pictures/frame/submenu/booktables.png);
}

#item_advancesale a, #item_advancesale span {
    background-image: url(../pictures/frame/submenu/advancesale.png);
}

#item_newsletters a, #item_newsletters span {
    background-image: url(../pictures/frame/submenu/newsletters.png);
}

#item_team a, #item_team span {
    background-image: url(../pictures/frame/submenu/team.png);
}

#item_contact a, #item_contact span {
    background-image: url(../pictures/frame/submenu/contact.png);
}

#item_history a, #item_history span {
    background-image: url(../pictures/frame/submenu/history.png);
}

#item_partners a, #item_partners span {
    background-image: url(../pictures/frame/submenu/partners.png);
}

/*===== Helpers menu ========================================================*/

#helpers {
	position: relative;
    margin-left: 10px;
    width: 800px;
    height: 40px;
    background-image: url(../pictures/frame/menu_background.png);
    background-repeat: repeat-y;
    z-index: 1;
}

#helpers ul {
    position: absolute;
    z-index: 1;
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-left: 180px;
    width: 350px;
    height: 20px;
    background-image: url(../pictures/frame/helpers.png);
}

#helpers li {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    background-image: none;
}

#helpers a, #helpers span {
    display: block;
    height: 0;
    padding-top: 20px;
    overflow: hidden;
}

#helpers a:hover, #helpers li.active a, #helpers span {
    background-image: url(../pictures/frame/helpers.png);
}

#helper_home, #helper_home a:hover, #helper_home.active a, #helper_home span {
    width: 36px;
    background-position: 0px 20px;
}

#helper_contact, #helper_contact a:hover, #helper_contact.active a, #helper_contact span {
    width: 61px;
    background-position: -36px 20px;
}

#helper_tips, #helper_tips a:hover, #helper_tips.active a, #helper_tips span {
    width: 71px;
    background-position: -97px 20px;
}

#helper_blog, #helper_blog a:hover, #helper_blog.active a, #helper_blog span {
    width: 74px;
    background-position: -168px 20px;
}

#helper_sitemap, #helper_sitemap a:hover, #helper_sitemap.active a, #helper_sitemap span {
    width: 51px;
    background-position: -242px 20px;
}

/*===== Basket ==============================================================*/

#basket {
    background-image: url(../pictures/frame/basket_background.png);
    background-repeat: repeat-y;
    width: 800px;
    min-height: 40px;
    _height: 40px;
}

#basket span, #basket a {
    background-image: url(../pictures/frame/menu/basket.png);
    display: block;
    width: 160px;
    height: 21px;
    text-indent: -10000em;
}

#basket span, #basket a.active {
    background-position: -320px 0px;
}

#basket a:hover {
    background-position: -160px 0px;
}

#basket p {
    color: #6699cc;
    font-size: 10px;
    line-height: 12px;
    padding: 0;
    padding-left: 20px;
    width: 140px;
    margin: 0;
    margin-top: 4px;
}

/*===== Search box ==========================================================*/

#search {
    position: absolute;
    background-color: white;
    z-index: 2;
    height: 20px;
    width: 270px;
    left: 540px;
}

#search span {
    display: block;
    width: 84px;
    height: 0px;
    padding-top: 20px;
    overflow: hidden;
    background-image: url(../pictures/frame/search/search.png);
    position: absolute;
}

#query {
    border: 0px;
    padding: 0;
    padding-left: 2px;
    background-color: white;
    width: 164px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    left: 84px;
}

#submit {
    background-image: url(../pictures/frame/search/submit.png);
    width: 20px;
    height: 20px;
    position: absolute;
    left: 250px;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    text-indent: -10000px;
}

#submit:hover, #submit.hover {
    background-position: 20px 0px;
}

/*===== Content =============================================================*/

#content {
    width: 600px;
    margin-left: 190px;
    top: 0px;
    position: relative;
    background-color: #e6e6e6;
    *background-image: url(../pictures/frame/content_background.png);
    z-index: 0px;
}

#content_footer {
    height: 1px;
    width: 600px;
    background-image: url(../pictures/frame/section_background.png);
    overflow: hidden;
}

/*===== Popups ==============================================================*/

#popup_overlay {
	opacity: 0.5;
	filter: alpha(opacity = 50);
    background-color: #000000;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

#popup_window {
    position: fixed;
    _position: absolute;
	background-color: white;
    padding: 10px;
    z-index: 10001;
}

img.popup_image {
    margin-bottom: -3px;
}

/*===== Teasers =============================================================*/

div.teaser {
    text-align: right;
    color: white;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 182px;
    width: 176px;
}

div.teaser div.container {
    width: 140px;
    padding: 10px;
	background-color: #3994cd;
    background-image: url(../pictures/frame/teaser_background.gif);
    background-repeat: no-repeat;
    margin-left: 8px;
}	

div.teaser.alternate div.container {
	background-color: #669700;
    background-image: url(../pictures/frame/teaser_background_alternate.gif);
}

div.teaser strong {
    color: white;
}

div.teaser span, div.teaser a {
	font-size: 11px;
    color: #cccccc;
}

div.teaser a {
	text-decoration: none;
}

div.teaser a:hover {
	text-decoration: underline;
    color: #cccccc;
}

div.teaser img.shadow_left {
	float: left;
    position: static;
    height: 20px;
}

div.teaser img.shadow_right {
	float: right;
    position: static;
    height: 20px;
}