/**
 * $Id: screen.css 7 2007-08-22 09:56:53Z claudio.felber $
 *
 * CSS definitions used for screen display.
 *
 * Author: Claudio Felber (claudio.felber@perron2.ch)
 * Created: 2006-05-09
 *
 * Copyright (c) 2006, Perron2 GmbH, All Rights Reserved.
 */
 
@import "common.css";
@import "lang.css";

body {
    background-color: #122e56;
    background-image: url(../pictures/background.gif);
    background-repeat: repeat-x;
    margin: 0;
    padding: 0;
    text-align: center;
    margin-bottom: 20px;
}

#page {
    position: relative;
    width: 720px;
    background-image: url(../pictures/content_bottom.gif);
    background-repeat: no-repeat;
    background-position: bottom left;
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/*===== Header image ========================================================*/

#header {
    width: 720px;
    height: 160px;
}

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

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

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

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

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

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

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

/*===== Page content ========================================================*/

#content {
    width: 600px;
    background-image: url(../pictures/content_background.gif);
    background-repeat: repeat-y;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 90px;
    overflow: hidden;
}

* html #content {
    width: 720px;
    w\idth: 600px;
}

/*===== Language menu =======================================================*/

#language {
	position: absolute;
	left: 13px;
	top: 4px;
	height: 16px;
}

#language ul {
	margin: 0;
}

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

* html #language a, * html #language span {
	height: 9px;
	he\ight: 0px;
}

#language li {
	float: left;
	padding: 0;
	border: none;
}

#item_de a, #item_de span, #item_de li {
	width: 46px;
}

#item_en a, #item_en span, #item_en li {
	width: 50px;
}

#item_es a, #item_es span, #item_es li {
	width: 49px;
}

/*===== Main menu ===========================================================*/

#menu {
    position: absolute;
    overflow: hidden;
    background-image: url(../pictures/menu_background.gif);
    width: 630px;
    height: 20px;
    left: 0px;
    top: 160px;
    padding-left: 90px;
}

* html #menu {
    width: 720px;
    w\idth: 630px;
}

#menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#menu li {
    display: block;
    padding: 0;
    border: none;
    width: 90px;
    height: 20px;
    float: left;
}

#menu a, #menu span {
    display: block;
    width: 90px;
    height: 0px;
    padding-top: 20px;
}

/*===== Main menu items (german) ============================================*/

body.de #item_portrait a {
    background-image: url(../pictures/menu/de/portrait_off.gif);
}

body.de #item_portrait, body.de #item_portrait a:hover, body.de #item_portrait a.active, body.de #item_portrait span {
    background-image: url(../pictures/menu/de/portrait_on.gif);
}

body.de #item_news a {
    background-image: url(../pictures/menu/de/news_off.gif);
}

body.de #item_news, body.de #item_news a:hover, body.de #item_news a.active, body.de #item_news span {
    background-image: url(../pictures/menu/de/news_on.gif);
}

body.de #item_music a {
    background-image: url(../pictures/menu/de/music_off.gif);
}

body.de #item_music, body.de #item_music a:hover, body.de #item_music a.active, body.de #item_music span {
    background-image: url(../pictures/menu/de/music_on.gif);
}

body.de #item_salsaare a {
    background-image: url(../pictures/menu/de/salsaare_off.gif);
}

body.de #item_salsaare, body.de #item_salsaare a:hover, body.de #item_salsaare a.active, body.de #item_salsaare span {
    background-image: url(../pictures/menu/de/salsaare_on.gif);
}

body.de #item_esencia a {
    background-image: url(../pictures/menu/de/esencia_off.gif);
}

body.de #item_esencia, body.de #item_esencia a:hover, body.de #item_esencia a.active, body.de #item_esencia span {
    background-image: url(../pictures/menu/de/esencia_on.gif);
}

body.de #item_links a {
    background-image: url(../pictures/menu/de/links_off.gif);
}

body.de #item_links, body.de #item_links a:hover, body.de #item_links a.active, body.de #item_links span {
    background-image: url(../pictures/menu/de/links_on.gif);
}

body.de #item_contact a {
    background-image: url(../pictures/menu/de/contact_off.gif);
}

body.de #item_contact, body.de #item_contact a:hover, body.de #item_contact a.active, body.de #item_contact span {
    background-image: url(../pictures/menu/de/contact_on.gif);
}

/*===== Main menu items (english) ===========================================*/

body.en #item_portrait a {
    background-image: url(../pictures/menu/en/portrait_off.gif);
}

body.en #item_portrait, body.en #item_portrait a:hover, body.en #item_portrait a.active, body.en #item_portrait span {
    background-image: url(../pictures/menu/en/portrait_on.gif);
}

body.en #item_news a {
    background-image: url(../pictures/menu/en/news_off.gif);
}

body.en #item_news, body.en #item_news a:hover, body.en #item_news a.active, body.en #item_news span {
    background-image: url(../pictures/menu/en/news_on.gif);
}

body.en #item_music a {
    background-image: url(../pictures/menu/en/music_off.gif);
}

body.en #item_music, body.en #item_music a:hover, body.en #item_music a.active, body.en #item_music span {
    background-image: url(../pictures/menu/en/music_on.gif);
}

body.en #item_salsaare a {
    background-image: url(../pictures/menu/en/salsaare_off.gif);
}

body.en #item_salsaare, body.en #item_salsaare a:hover, body.en #item_salsaare a.active, body.en #item_salsaare span {
    background-image: url(../pictures/menu/en/salsaare_on.gif);
}

body.en #item_esencia a {
    background-image: url(../pictures/menu/en/esencia_off.gif);
}

body.en #item_esencia, body.en #item_esencia a:hover, body.en #item_esencia a.active, body.en #item_esencia span {
    background-image: url(../pictures/menu/en/esencia_on.gif);
}

body.en #item_links a {
    background-image: url(../pictures/menu/en/links_off.gif);
}

body.en #item_links, body.en #item_links a:hover, body.en #item_links a.active, body.en #item_links span {
    background-image: url(../pictures/menu/en/links_on.gif);
}

body.en #item_contact a {
    background-image: url(../pictures/menu/en/contact_off.gif);
}

body.en #item_contact, body.en #item_contact a:hover, body.en #item_contact a.active, body.en #item_contact span {
    background-image: url(../pictures/menu/en/contact_on.gif);
}

/*===== Main menu items (spanish) ===========================================*/

body.es #item_portrait a {
    background-image: url(../pictures/menu/es/portrait_off.gif);
}

body.es #item_portrait, body.es #item_portrait a:hover, body.es #item_portrait a.active, body.es #item_portrait span {
    background-image: url(../pictures/menu/es/portrait_on.gif);
}

body.es #item_news a {
    background-image: url(../pictures/menu/es/news_off.gif);
}

body.es #item_news, body.es #item_news a:hover, body.es #item_news a.active, body.es #item_news span {
    background-image: url(../pictures/menu/es/news_on.gif);
}

body.es #item_music a {
    background-image: url(../pictures/menu/es/music_off.gif);
}

body.es #item_music, body.es #item_music a:hover, body.es #item_music a.active, body.es #item_music span {
    background-image: url(../pictures/menu/es/music_on.gif);
}

body.es #item_salsaare a {
    background-image: url(../pictures/menu/es/salsaare_off.gif);
}

body.es #item_salsaare, body.es #item_salsaare a:hover, body.es #item_salsaare a.active, body.es #item_salsaare span {
    background-image: url(../pictures/menu/es/salsaare_on.gif);
}

body.es #item_esencia a {
    background-image: url(../pictures/menu/es/esencia_off.gif);
}

body.es #item_esencia, body.es #item_esencia a:hover, body.es #item_esencia a.active, body.es #item_esencia span {
    background-image: url(../pictures/menu/es/esencia_on.gif);
}

body.es #item_links a {
    background-image: url(../pictures/menu/es/links_off.gif);
}

body.es #item_links, body.es #item_links a:hover, body.es #item_links a.active, body.es #item_links span {
    background-image: url(../pictures/menu/es/links_on.gif);
}

body.es #item_contact a {
    background-image: url(../pictures/menu/es/contact_off.gif);
}

body.es #item_contact, body.es #item_contact a:hover, body.es #item_contact a.active, body.es #item_contact span {
    background-image: url(../pictures/menu/es/contact_on.gif);
}