/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/*  Style-Box - ( CSS / HTML )
/*  Autor:  Edward Regel
/*  © 2014  Edward Regel
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/******************************/
/* BODY
/******************************/
body
{
position: absolute;
margin: 0px;
font-family: Arial;
font-size: 12pt;
color: #CCCCCC;
background-color: #000000;
background-image: url("../img/hg.png");
height: 100%; 
width: 100%;
min-width: 310px;
text-shadow: 4px 6px 8px rgba(0, 0, 0, 1.0);
}

/******************************/
/* EXTRAS
/******************************/
.html-page {min-height: 100%; height: auto !important;}
.html-page-cover {padding-bottom: 70px;}
.bottom-board {height: 89px; margin-top: -88px;}

a {outline: none;}
/* hr{border-bottom: 10px solid #525252;} */

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/******************************/
/* MENU-PANEL
/******************************/
.menu-panel
{
width: auto;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
background-image: url("../img/panel-menu.png");
}

/******************************/
/* MENU-PANEL-SHADOW
/******************************/
.menu-panel-shadow
{
width: auto;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
background-image: url("../img/shadow.png");
background-repeat: no-repeat;
}

@media (max-width: 630px){.menu-panel-shadow{background-image: none;}}

/******************************/
/* MENU-BORDER
/******************************/
.menu-border-top,
.menu-border
{
width: auto;
height: 10px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
background-image: url("../img/border.png");
}

.menu-border-top{background-image: url("../img/border-top.png");}

/******************************/
/* MENU-BORDER-SHADOW
/******************************/
.menu-border-shadow-1
{
width: auto;
height: 9px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
background-image: url("../img/panel-shadow-1.png");
}

.menu-border-shadow-2
{
width: auto;
height: 10px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
background-image: url("../img/panel-shadow-2.png");
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/******************************/
/* MENU-BOX
/******************************/
.menu-box
{
max-width: 1200px;
width: auto;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 10px;
/*border: 2px #00AAFF solid;*/
}

ul.menu-box li{display: inline-block;}
ul.menu-box img{border: none; width: auto;}
ul.menu-box li a{display: inline-block;}

/******************************/
/* LANGUAGE
/******************************/
#language
{
font-size: 28px;
margin-top: 5px;
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid #888888;
}

#language ul{text-align: left;}
#language li
{
border-radius: 15%;
display: inline-block; 
box-shadow: 10px 10px 15px rgba(0, 0, 0, 1.0);
}

#language a:link,
#language a:visited
{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 8px;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 3px;
display: inline-block;
color: #888888;
font-size: 12pt;
text-decoration: none;
text-align: center;
background-color: #777777;
border: 1px outset #AAAAAA;
border-radius: 15%;
position: relative;
z-index: 2;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 1.0);
}

#language li.active a{border: 1px solid #00FFCC; box-shadow: 0px 0px 10px rgba(0, 230, 255, 1.0);}

#language a:hover
{
color: #FF0000; transition: color 1.0s;
background-color: #AAAAAA; box-shadow: 0px 0px 20px rgba(150, 150, 150, 1.0); transition: background 1.0s;
}

/******************************/
/* LOGO-BOX
/******************************/
ul.logo-box img{max-width: 100%;}

.logo-box
{
width: auto;
height: 100px;
margin-top: -60px;
margin-left: 30px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
text-align: right;
z-index: 1;
}

/******************************/
/* NAVIGATION
/******************************/
#navigation{font-size: 28px;}
#navigation ul{text-align: left;}
#navigation li{display: inline-block;}

#navigation a:link,
#navigation a:visited
{
margin-left: 10px;
margin-right: 0px;
padding-left: 10px;
padding-right: 10px;
color: #AAAAAA;
text-decoration: none;
position: relative;
z-index: 3;
}

#navigation li.active a{color: #FF0000;}
#navigation li a:hover{color: #FF0000;}  /*#FFAA88;*/
#navigation li a:active{color: #FFCCAA;} /*#FFCCAA;*/

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/******************************/
/* TEXT-BOX
/******************************/
.text-box-top {margin-top: 8px;}

.text-box
{
width: auto;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding-top: 10px;
padding-left: 30px;
padding-right: 20px;
padding-bottom: 20px;
/*border: 1px #FF0000 solid;*/
}

.text-box-r
{
width: auto;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding-top: 10px;
padding-left: 20px;
padding-right: 30px;
padding-bottom: 20px;
/*border: 1px #FF0000 solid;*/
}

/* text-links */
a{text-decoration: none; color: #FFCCAA;	}
a:hover{text-decoration: none; color: #FF0000;}
a:active{text-decoration: none; color: #00AAFF;}

/******************************/
/* BODY-BOX
/******************************/
.body-box
{
max-width: 1180px;
width: auto;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 25px;
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
/*border: 2px #00AAFF solid;*/
}

/******************************/
/* DECO-PANEL
/******************************/
.deco-panel-1,
.deco-panel-2
{
width: 99.8%;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 10px;
display: inline-block;
text-align: left;
border: 1px outset #AAAAAA;
border-radius: 8px;
box-shadow: 0px 15px 20px rgba(0, 0, 0, 1.0);
}

.deco-panel-1{background-image: url("../img/panel-menu.png");}

/******************************/
/* IMG-PANEL   ( IMAGES )
/******************************/
ul.img-panel-l img,
ul.img-panel-r img
{max-width: 100%; border-radius: 6px;}

.img-panel-l
{
float: left;
margin-top: 10px;
margin-left: 0px;
margin-right: 10px;
margin-bottom: 10px;
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 4px;
max-width: 95%;
background-image: url("../img/glass.png");
border: 2px outset #888888;
border-radius: 8px;
box-shadow: 4px 6px 20px rgba(0, 0, 0, 1.0);
}

.img-panel-r
{
float: right;
margin-top: 10px;
margin-left: 10px;
margin-right: 0px;
margin-bottom: 10px;
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 4px;
max-width: 95%;
background-image: url("../img/glass.png");
border: 2px outset #888888;
border-radius: 8px;
box-shadow: 4px 6px 20px rgba(0, 0, 0, 1.0);
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/******************************/
/* INFO-PANEL
/******************************/
.info-panel
{
width: 98.5%;
margin-top: 15px;
display: inline-block;
/*border: 2px solid #00FF00;*/
}

/******************************/
/* COPYRIGHT-INFO
/******************************/
#copyright-info
{
float: left;
padding-left: 20px;
padding-right: 10px;
font-family: Arial;
font-size: 18pt;
color: #777777;
}

/******************************/
/* MENU-BOTTOM
/******************************/
#menu-bottom
{
float: right;
padding-left: 10px;
padding-right: 10px;
font-size: 18pt;
color: #777777;
}
#menu-bottom a:link,
#menu-bottom a:visited{color: #AAAAAA;}
#menu-bottom li.active a{color: #FF0000;}
#menu-bottom li a:hover{color: #FF0000;}
#menu-bottom li a:active{color: #FFCCAA;}

@media (max-width: 550px){#copyright-info, #menu-bottom{text-align: center; float: none;}}
@media (max-width: 380px){#copyright-info{font-size: 14pt;} #menu-bottom{font-size: 12pt; padding-left: 2px; padding-right: 2px;}}
@media (max-width: 300px){#menu-bottom{font-size: 10pt;}}