/*!
CSS      Customer relevant CSS
Version  1.0
Date     27.02.2026
(C) 	 2025 / www.studio50.ch
*/
/*
    Custom CSS for praxix-eva-weber.ch

    Regions:
    #region Custom fonts
    #region Colors
    #region Base
    #region Custom tags
    #region Header
    #region Navigation
    #region News
    #region Content
    #region Footer

nonid fertig:
    #region Page Header
    #region Content Index Sub Menues
    #region HTML Standards
    #region Custom Overwrites
    #region Custom Overwrites Forms
    #region div Tables
    #region CMS Design Snippets

*/

/*  ***********************************************************************************************************************************************************

    #region Custom fonts

    ***********************************************************************************************************************************************************
*/
@font-face {
    font-family: 'Muli';
    src: url('/font/muli/Muli.eot?#iefix') format('embedded-opentype'), url('/font/muli/Muli.woff2') format('woff2'), url('/font/muli/Muli.woff') format('woff'), url('/font/muli/Muli.ttf') format('truetype');
}

@font-face {
    font-family: 'Bookman';
    src: url('/font/bookman/bookmanoldstyle_bold.eot?#iefix') format('embedded-opentype'), url('/font/bookman/bookmanoldstyle_bold.woff2') format('woff2'), url('/font/bookman/bookmanoldstyle_bold.woff') format('woff'), url('/font/bookman/bookmanoldstyle_bold.ttf') format('truetype');
}

/*  ***********************************************************************************************************************************************************

    #region Colors

    ***********************************************************************************************************************************************************
*/
:root {
	/* font */
    --white_font: #EEEEEE;
    --white_dirty: #C7C7C7;
    --white: #ffffff;
    --gray: #999999;
	/* backgrounds */
    --black_bg: #181818;
    --black_font: #212121;
    --dark_gray: #333333;
    --bg_footer: #222222;
	--bg_footer_container: #111111;
	--bg_leather_fallback: #0D0D0D;
}



/* page snippets */
.zimgLeft {
    margin-right: 20px;
    float: left;
    width: 100%;
    max-width: 260px;
    height: auto;
}

.zimgRight {
    margin-left: 20px;
    float: right;
    width: 100%;
    max-width: 260px;
    height: auto;
}


/*  ***********************************************************************************************************************************************************

    #region Base

    ***********************************************************************************************************************************************************
*/
/* Reset */
div, body {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Basic */
pre, a, b, p, ul, ol, li, div, td, tr, th, address, body {
    font-family: Muli,Verdana,Helvetica,Arial,sans-serif;
    font-size: 1em;
    color: var(--white_font);
}

h1, h2, h3, h4, h5, h6 {
    font-family: Bookman,Muli,Verdana,Helvetica,serif;
    font-weight: 100;
    color: var(--white);
}

h1 {
    font-size: 2.2em;
	text-align:center;
	position:relative;
	line-height:20px;
	background-color:var(--black_bg);
	margin-left:-40px;
	margin-right:-40px;
	margin-bottom:70px;
	padding-top:30px;
	padding-bottom:30px;
	margin-top:0px;
}

h2 {
    font-size: 1.8em;
}

h3 {
    font-size: 1.4em;
}

h4 {
    font-size: 1.2em;
}

h5 {
    font-size: 1.0em;
}

h6 {
    font-size: 0.8em;
}

p {
    line-height: 1.6; /* set no unit so it calculates the line height accurate */
}

html {
    position: relative;
    min-height: 100%;
}

body {
    padding: 0px;
    margin: 0px;
    overflow: auto;
	background-image: url('/data/custom/images/bg_black_leather_300.png');
	background-color: var(--bg_leather_fallback);
}

a {
	color: var(--white_dirty);
    text-decoration: underline;
    transition: color 0.5s ease;
}
    a:hover {
        color: var(--white);
        transition: color 0.5s ease;
    }

/* Elements */
div {
    overflow: hidden;
}

@media screen and (max-width: 500px) {

	/* Basic */
	pre, a, b, p, ul, ol, li, div, td, tr, th, address, body {
		font-size: 0.99em;
	}

	h1 {
		font-size: 1.8em;
	}

	h2 {
		font-size: 1.6em;
	}

	h3 {
		font-size: 1.2em;
	}

	h4 {
		font-size: 1.0em;
	}

	h5 {
		font-size: 0.8em;
	}

	h6 {
		font-size: 0.7em;
	}

	p {
		line-height: 1.5; /* set no unit so it calculates the line height accurate */
	}
} /* END @media */


/*  ***********************************************************************************************************************************************************

    #region Custom tags

    ***********************************************************************************************************************************************************
*/

hr.SeparatorLine {
    height: 1px;
    color: var(--gray);
    background-color: var(--gray);
    border: none;
    display: block; /* prevent space at bottom to the div */
}


/*  ***********************************************************************************************************************************************************

    #region Custom overwrites

    ***********************************************************************************************************************************************************
*/

.btn {
    background-color: var(--black_bg);
    color: var(--white);
}

    .btn:hover {
        background-color: var(--dark_gray);
    }

.btnDis {
    background-color: var(--bg_footer);
}

span.error {
	display:block;
	padding:4px;
	background-color:var(--white_dirty);
}


/*  ***********************************************************************************************************************************************************

    #region Header

    ***********************************************************************************************************************************************************
*/

#Header {
    z-index: 999;
    position: fixed;
    top: 0px;
    max-width: 950px;
    width: 100%;
    height: 120px;
    cursor: pointer;
	background-color: var(--black_bg);
}

#HeaderSpacer {
    height: 200px;
}

.brandTitle {
	font-family: Bookman,Verdana,Helvetica,Arial,sans-serif;
	font-size:40pt;
    color: var(--white);
	text-align: center;
	display:block;
}

.brandSlogan {
	font-family: Bookman,Verdana,Helvetica,Arial,sans-serif;
	font-size:25pt;
    color: var(--white);
	text-align: center;
	display:block;
	line-height:10pt;
}

@media screen and (max-width: 500px) {

    #Header {
        justify-content: flex-start !important; /* set it left as at right we've got the mobile button */
        height: 75px;
        padding: 10px 10px 10px 10px;
    }

    #HeaderSpacer {
        height: 68px;
    }

	.brandTitle {
		font-size:14pt;
		width:80%;
	}

	.brandSlogan {
		font-size:12pt;
		width:80%;
	}

} /* END @media */


/*  ***********************************************************************************************************************************************************

    #region Navigation

    ***********************************************************************************************************************************************************
*/

#Navigation {
    position: fixed;
    top: 120px;
    z-index: 999;
    height: auto;
    max-width: 950px;
    width: 100%;
}

#menuContainer {
    xmax-width: 1000px;
    text-align: center;
    display: block;
    xpadding: 0px 28px 0px 28px; /* space left right for menu */
   	border-bottom:1px solid var(--gray);
	background-color: var(--black_bg);
}

#menuContainerDiv {
    xmax-width: 850px;
    width: 100%;
    display: inline-block;
}

#mobileButton {
    display: none;
    text-align: right;
    margin-left: auto;
    margin-right: 0;
    position: relative;
    top: 13px;
    right: 0px;
    margin-left: auto;
    margin-right: 0;
    position: fixed;
    z-index: 999;
    xopacity: 0.3;
}

#mobileButtonImg {
    cursor: pointer;
    width: 48px;
    height: auto;
}


/* Navigation Table Design */
.divNavTable {
    display: table;
    border-collapse: collapse;
    width: 100%;
}

.divNavTR {
    display: table-row;
    height: 48px;
}

.mainNavItem, .mainNavItemSel {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    display: table-cell;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	width:14%;	/* yes, hard coded ... */
    font-size: 1.3em;
    font-weight: normal;
	white-space:nowrap;
    color: var(--white_font);
    vertical-align: middle;
    text-align: center;
}

    .mainNavItem:hover {
		background-color:var(--gray);
    }

.mainNavItemSel {
	background-color:var(--dark_gray);
    font-weight: bold;
	color: var(--white);
}

@media screen and (max-width: 500px) {

    #Navigation {
        position: fixed;
        top: 75px;
        height: auto;
        max-width: 950px;
        width: 100%;
    }

    /* switching to mobile button */
    #mobileButton {
        display: block;
    }

    #menuContainer {
        display: none;
        padding: 0px 0px 0px 0px; /* remove space left right for menu */
    }
    /* alter menu design to stacked */
    .mainNavItem {
        display: block;
        height: 62px;
        width: 100% !important;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        color: var(--white_font);
        vertical-align: middle;
        text-align: center !important;
        line-height: 2.7; /* needed to text-align correctly, set no unit so it calculates the line height accurate */
        border-bottom: 1px solid var(--dark_gray);
    }

        .mainNavItem:hover {
            background-color: var(--pew_green_light);
            color: var(--black_font);
        }

    .mainNavItemSel {
        display: block;
        height: 62px;
        width: 100% !important;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        color: var(--white);
        background-color:var(--dark_gray);
        vertical-align: middle;
        text-align: center !important;
        line-height: 2.7; /* needed to text-align correctly, set no unit so it calculates the line height accurate */
        border-bottom: 1px solid var(--white);
    }
} /* END @media */

	
/*  ***********************************************************************************************************************************************************

    #region News

    ***********************************************************************************************************************************************************
*/

#News {
	position: absolute;
	z-index:99;
    padding: 0;
    margin: 0 auto;
	top:810px;
	height:auto;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width:600px;
	min-width:250px;
	width:100%;
    padding: 0px 40px 00px 40px;
    background-image: url(/images/rgba/white_70.png);
	border-radius: 16px;
	color:var(--black_font);
}
#News b, #News p {
	color:var(--black_font);
}

@media screen and (max-width: 500px) {
	#News {
		top:140px;
		padding: 0px 20px 0px 20px;
		border-radius: 12px;
	}
	.News p {
		line-height:1.3em;
		font-size:0.7em;
	}

} /* END @media */


/*  ***********************************************************************************************************************************************************

    #region Content

    ***********************************************************************************************************************************************************
*/

#baseContainer {
    height: 100%;
    padding: 0;
    margin: 0 auto;
    max-width: 950px;
    min-width: 250px;
    background-color: var(--black_bg);
	color: var(--white_font);
}

#Content {
	position: relative;
	top:0px;
	height:100%;
    margin: 0px 70px 0px 70px;
}
.content_page {
    background-image: url(/images/rgba/white_30.png); /* transparent bg  - evt ischalte */
	padding:0px 40px 40px 40px;
}

#mainImageSpacer {
	height:100px;
}
#mainImage {
	width:100%;
}

@media screen and (max-width: 500px) {

	#Content {
		margin: 10px 10px 0px 10px;
	}

	.content_page {
		padding:0px 20px 20px 20px;
	}

	#mainImageSpacer {
		height:60px;
	}

} /* END @media */


.HomeTextDiv {
	position: absolute;
	z-index:99;
	width: 950px;
	height:auto;
    padding: 0px 90px 0px 90px;
    background-image: url(/images/rgba/white_10.png);
}
.HomeTextDiv p {
	line-height:30pt;
	color:var(--white_font);
}

@media screen and (max-width: 500px) {
	.HomeTextDiv {
		position: absolute;
		z-index:999;
		width: 100%;
		height:auto;
		padding: 0px 20px 0px 20px;
		background-image: url(/images/rgba/white_10.png);
	}
	.HomeTextDiv p {
		line-height:1.7em;
		font-size:0.8em;
		color:var(--white_font);
	}
} /* END @media */


/*  ***********************************************************************************************************************************************************

    #region Footer

    ***********************************************************************************************************************************************************
*/

.footerContainer {
	background-color: var(--bg_footer_container);
}

.footerContent {
	height:100%;
	padding:0;
	margin:0 auto;
	max-width:950px;
	min-width:300px;
	background-color:var(--bg_footer);
}

.footerText {
	font-size:1em;
	color:var(--white_font) !important;
}
.footerText b {
	color:var(--white_font) !important;
}
.footerCenter {
	text-align:center;
}
.footerRight {
	text-align:right;
}
.footerBottomNoteContainer {
	background-color: var(--bg_footer_container);
}
.footerBottomNote {
	text-align:center;
	padding:0;
	margin:0 auto;
	max-width: 950px;
	min-width: 300px;
	background-color:var(--bg_footer);
	color:var(--gray);
}

@media screen and (max-width: 500px) {
	.footerText {
		font-size:0.8em !important;
		color:var(--white_font) !important;
	}
	.footerText b {
		color:var(--white_font) !important;
	}
	.footerCenter {
		text-align:left;
		}
	.footerRight {
		text-align:left;
		}
	.footerBottomNote {
		font-size:0.8em !important;
	}

} /* END @media */


/*  ***********************************************************************************************************************************************************

    #region table and div table

    ***********************************************************************************************************************************************************
*/
/* div table */
.divTDHeader {
    background-color: var(--pew_green_darker_60) !important;
    color: var(--white) !important;
    padding: 6px 12px 6px 12px;
}

.divTD {
    color: var(--white);
    padding: 6px 12px 6px 12px;
}

.divTD_list {
    background-color: var(--white_60);
}

/* native table */
td {
    vertical-align: top;
}

@media screen and (max-width: 500px) {
    .divTD {
        display: block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        vertical-align: top;
        width: 100% !important;
    }
    .mob-hideme {
        display: none;
    }
} /* END @media */