@charset "utf-8";
html, body {background-color:#232835;width:100%;height:100%;margin:0;padding:0;overflow:auto;font-family: 'Open Sans', sans-serif;}

/* ANIMATIONEN */

@keyframes errorfeld {
    0%   {background-color: #7d9da4;}
    50%  {background-color: #e57147;}
    100% {background-color: #7d9da4;}
}
/* GLOBAL */
#preloader {display:none;}
#contframe {scrollbar-base-color:#7d9da4;scrollbar-face-color:#7d9da4;scrollbar-3dlight-color:#beced1;scrollbar-highlight-color:#beced1;scrollbar-track-color:#87aab2;scrollbar-arrow-color:#4D535E;scrollbar-shadow-color:#4D535E;scrollbar-dark-shadow-color:#4D535E;}
#contframe::-webkit-scrollbar, #contframe::-webkit-scrollbar-thumb, #contframe::-webkit-scrollbar-button, #contframe::-webkit-scrollbar-track {background-color:#7d9da4;}
#contframe::-webkit-scrollbar-thumb, #contframe::-webkit-scrollbar-button {border: 1px solid #4D535E;}
#contframe::-webkit-scrollbar-track-piece  {background-color:#87aab2;}
#mainframe                       {margin-left:auto;margin-right:auto;}
#headframe                       {background-image:url(images/header.png);background-image:url(images/header.svg), linear-gradient(transparent, transparent);}
#headle, #navileft, #navicent    {float:left;}
#naviframe, #headri, #navirigh   {float:right;}
#naviframe                       {background-image:url(images/navi_bg.png);background-image:url(images/navi_bg.svg), linear-gradient(transparent, transparent);background-size:cover;}
#navimobil                       {text-align:center;font-weight:bold;}
#navimobil, #naviframe           {background-color:#beced1;}
#mainframe, #headframe, #bodyframe, #pageframe, #bigframe, #descframe, #loginframe, #applphoto {background-color:#ffffff;}
#headframe, #bodyframe, #navimobil, #bigframe, div.navibutton {width:100%;}
#bigframe, #descframe            {overflow:auto;}
#contframe                       {background-color:#7d9da4;overflow-y:scroll;}
#applphoto, #headframe           {background-repeat:no-repeat;background-position:center;}
#loginframe, #naviframe          {text-align:right;}
.headerval                       {text-align:left;}
a.header:link, a.header:visited        {color:#000000;text-decoration:none;}
a.header:hover                         {color:#7d9da4;text-decoration:none;}
a.header:active                        {color:#beced1;text-decoration:none;}
a.navigator:link, a.navigator:visited  {color:#000000;font-weight:bold;text-decoration:none;}
a.navigator:hover, a.navigator:active  {color:#FFFFFF;font-weight:bold;text-decoration:none;}
div.navibutton             {background-image:url(images/navi_shrink.png);background-image:url(images/navi_shrink.svg), linear-gradient(transparent, transparent);}
img#navigrow-lebenslauf, img#navigrow-person, img#navigrow-arbeitsproben, img#navigrow-ausbildung, img#navigrow-praktika, img#navigrow-schule, img#navigrow-zertifikate {-webkit-transition: width 0.4s ease-in-out;transition: width 0.4s ease-in-out;}
div.navi-topshadow         {background-image:url(images/navi_topshadow.png);background-image:url(images/navi_topshadow.svg), linear-gradient(transparent, transparent);background-repeat:no-repeat;background-size:contain;}
div.navi-bottomshadow      {background-image:url(images/navi_bottomshadow.png);background-image:url(images/navi_bottomshadow.svg), linear-gradient(transparent, transparent);background-repeat:no-repeat;background-size:contain;}
input.login                {background-color:#7d9da4;text-align:center;border:none;-webkit-transition: width 0.4s, background-color 0.4s ease-in-out;transition: width 0.4s, background-color 0.4s ease-in-out;}
input.login:focus          {background-color:#beced1;text-align:center;border:none;}
input.loginerror           {background-color:red;text-align:center;border:none;animation-name: errorfeld;animation-duration: 4s;animation-iteration-count: infinite;-webkit-transition: width 0.4s, background-color 0.4s ease-in-out;transition: width 0.4s, background-color 0.4s ease-in-out;}
input.loginerror:focus     {background-color:#beced1;text-align:center;border:none;}
input#loginbutton          {background-color:#232835;border:none;color:#beced1;text-decoration:none;cursor:pointer;-webkit-transition: background-color 0.2s, color 0.2s ease-in-out;transition: background-color 0.2s, color 0.2s ease-in-out;}
input#loginbutton:hover    {background-color:#beced1;border:none;color:#232835;text-decoration:none;cursor:pointer;}
input#loginbutton:active   {background-color:#7d9da4;border:none;color:#beced1;text-decoration:none;cursor:pointer;}
#loginbody                 {background-color:#ffffff;width:100%;height:100%;}
.downloadframe             {margin-left:auto;margin-right:auto;}
.downloaddfile             {background-color:#7d9da4;width:100%;-webkit-transition: background-color 0.2s ease-in-out;transition: background-color 0.2s ease-in-out;}
div.downloaddfile:hover    {width:100%;background-color:#beced1;}
.downloadcaptn, .downloaddescn, .downloaddatum, .downloadtitto, .downloadtitbo {width:100%;}
img.downloadsymbol         {height:100%;}
.downloadlogos             {position:relative;float:left;}
.downloadlogosico          {position:absolute;width:100%;height:100%;float:left;}
.downloadlogoshvr          {position:absolute;z-index:1;width:100%;height:100%;float:left;display:none;}
.downloadlogosico:hover + .downloadlogoshvr {display:block;}
.downloadlogoshvr:hover    {display:block;}
.downloadtitel             {float:right;}
img.dviewsymbol-1:hover    {content:url(images/dview_1h.svg);}
img.dviewsymbol-2:hover	   {content:url(images/dview_2h.svg);}
img.dviewsymbol-3:hover    {content:url(images/dview_3h.svg);}
img.dviewsymbol-4:hover    {content:url(images/dview_4h.svg);}
img.dviewsymbol-5:hover    {content:url(images/dview_5h.svg);}
img.dviewsymbol-6:hover    {content:url(images/dview_6h.svg);}
img.dviewsymbol-7:hover    {content:url(images/dview_7h.svg);}
img.dviewsymbol-8:hover    {content:url(images/dview_8h.svg);}
img.dviewsymbol-9:hover    {content:url(images/dview_9h.svg);}

/* MEDIA QUERIES */

/* Standard Bildschirme */
@media only screen and ( min-width: 950px ) {
#mainframe {width:700px;height:calc(100% - 8px);min-height:650px;margin-top:4px;margin-bottom:4px;}
#headframe {height:130px;background-size:680px;}
#headle, #headri {width:290px;}
#bodyframe {height:calc(100% - 138px);}
#pageframe {width:506px;height:calc(100% - 138px);float:left;margin-left:14px;}
#naviframe {width:166px;height:100%;margin-right:14px;}
#navimobil {display:none;}
#bigframe  {height:calc(100% + 138px);}
#descframe {width:100%;height:221px;}
#contframe {width:100%;height:calc(100% - 83px);}
#applphoto {width:166px;height:221px;background-size:166px;background-image:url(bild.php?p=bewerbungsfoto&s=440&t=png);}
.descripto {padding-right:5px;margin:0px;font-size:0.9em;}
.header, .headerval {padding-top:20px;font-size:0.9em;line-height:1.5;}
a.header:link, a.header:visited, a.header:hover, a.header:active {font-size:1em;}
img.navishadow {width:2px;height:30px;}
div.navibutton {height:30px;background-size:contain;}
div.navi-topshadow, div.navi-bottomshadow {width:166px; height:30px;}
img#navigator-lebenslauf, img#navigator-person, img#navigator-arbeitsproben, img#navigator-ausbildung, img#navigator-praktika, img#navigator-schule, img#navigator-zertifikate {width:135px;height:30px;}
img#navigrow-lebenslauf, img#navigrow-person, img#navigrow-arbeitsproben, img#navigrow-ausbildung, img#navigrow-praktika, img#navigrow-schule, img#navigrow-zertifikate {width:8px;height:30px;}
img#navigator-lebenslauf:hover + img#navigrow-lebenslauf, img#navigator-person:hover + img#navigrow-person, img#navigator-arbeitsproben:hover + img#navigrow-arbeitsproben, img#navigator-ausbildung:hover + img#navigrow-ausbildung, img#navigator-praktika:hover + img#navigrow-praktika, img#navigator-schule:hover + img#navigrow-schule, img#navigator-zertifikate:hover + img#navigrow-zertifikate {width:18px;}
input.login, input.loginerror             {font-size:1.2em;margin: 4px 0;width: 100px;}
input.login:focus, input.loginerror:focus {font-size:1.2em;margin: 4px 0;width: 120px;}
input#loginbutton, input#loginbutton:hover, input#loginbutton:active {font-size:1.1em;margin: 4px 0;width:100px;height:40px;}
#loginframe         {width:400px;height:135px;font-size:1.2em;padding-right:5px;padding-top:10px;}
.downloadframe      {width:90%;}
.downloadcaptn, .downloaddatum {height:25px;}
.downloaddescn      {height:80px;}
.downloaddfile, .downloadlogos, .downloadtitel {height:60px;}
.downloadlogos      {width:10%;}
.downloadtitel      {width:80%;}
.downloadtitto		{height:38px;}
.downloadtitbo		{height:22px;}
img.dviewsymbol-1, img.dviewsymbol-2, img.dviewsymbol-3, img.dviewsymbol-4, img.dviewsymbol-5, img.dviewsymbol-6, img.dviewsymbol-7, img.dviewsymbol-8, img.dviewsymbol-9 {height:20px;}
.downloaddescr      {padding-right:5px;margin:0px;font-size:0.9em;}
}

/* Tablets und mittlere Bildschirme */
@media only screen and ( min-width: 440px ) and ( max-width: 950px ) {
#mainframe {width:440px;height:calc(100% - 8px);min-height:440px;margin-top:4px;margin-bottom:4px;}
#headframe {height:100px;background-size:480px;}
#headle, #headri {width:180px;}
#bodyframe {height:calc(100% - 108px);}
#pageframe {width:312px;height:calc(100% - 108px);float:left;margin-left:14px;}
#naviframe {width:100px;height:100%;margin-right:14px;}
#navimobil {display:none;}
#bigframe  {height:calc(100% + 108px);}
#descframe {width:100%;height:133px;}
#contframe {width:100%;height:calc(100% - 25px);}
#applphoto {width:100px;height:133px;background-image:url(bild.php?p=bewerbungsfoto&s=440&t=png);background-size:100px;}
.descripto {padding-right:5px;margin:0px;font-size:0.6em;}
.header, .headerval {padding-top:25px;font-size:0.6em;line-height:1.2;}
a.header:link, a.header:visited, a.header:hover, a.header:active {font-size:1em;}
img.navishadow {width:2px;height:18px;}
div.navibutton {height:18px;background-size:contain;}
div.navi-topshadow, div.navi-bottomshadow {width:100px; height:18px;}
img#navigator-lebenslauf, img#navigator-person, img#navigator-arbeitsproben, img#navigator-ausbildung, img#navigator-praktika, img#navigator-schule, img#navigator-zertifikate {width:81px;height:18px;}
img#navigrow-lebenslauf, img#navigrow-person, img#navigrow-arbeitsproben, img#navigrow-ausbildung, img#navigrow-praktika, img#navigrow-schule, img#navigrow-zertifikate {width:5px;height:18px;}
img#navigator-lebenslauf:hover + img#navigrow-lebenslauf, img#navigator-person:hover + img#navigrow-person, img#navigator-arbeitsproben:hover + img#navigrow-arbeitsproben, img#navigator-ausbildung:hover + img#navigrow-ausbildung, img#navigator-praktika:hover + img#navigrow-praktika, img#navigator-schule:hover + img#navigrow-schule, img#navigator-zertifikate:hover + img#navigrow-zertifikate {width:11px;}
input.login, input.loginerror             {font-size:1em;margin: 3px 0;width: 65px;}
input.login:focus, input.loginerror:focus {font-size:1em;margin: 3px 0;width: 80px;}
input#loginbutton, input#loginbutton:hover, input#loginbutton:active {font-size:0.9em;margin: 4px 0;width:65px;height:25px;}
#loginframe         {width:250px;height:70px;font-size:1em;padding-right:5px;padding-top:10px;}
.downloadframe      {width:90%;}
.downloadcaptn, .downloaddatum {height:20px;}
.downloaddescn      {height:65px;}
.downloaddfile, .downloadlogos, .downloadtitel {height:47px;}
.downloadlogos      {width:15%;}
.downloadtitel      {width:75%;}
.downloadtitto		{height:30px;}
.downloadtitbo		{height:17px;}
img.dviewsymbol-1, img.dviewsymbol-2, img.dviewsymbol-3, img.dviewsymbol-4, img.dviewsymbol-5, img.dviewsymbol-6, img.dviewsymbol-7, img.dviewsymbol-8, img.dviewsymbol-9 {height:16px;}
.downloaddescr      {padding-right:5px;margin:0px;font-size:0.6em;}
}

/* Moderne Smartphones etc */
@media only screen and ( min-width: 320px ) and ( max-width: 440px ) {
#mainframe {width:100%;height:100%;}
#headframe {height:70px;background-size:contain;}
#headle, #headri {width:42%;}
#bodyframe {height:calc(100% - 102px);}
#pageframe {width:100%;height:100%;}
#naviframe {display:none;}
#navimobil {height:32px;font-size:0.65em;line-height:1.4em;}
#navileft, #navicent, #navirigh {height:32px;width:33%;}
#bigframe  {height:100%;}
#descframe {width:100%;height:240px;}
#contframe {width:100%;height:calc(100% - 240px);}
#applphoto {background-image:none;}
.descripto {padding-top:2px;padding-left:5px;padding-right:5px;margin:0px;font-size:0.8em;}
.header, .headerval {padding-top:16px;line-height:1.1;font-size:0.6em;}
a.header:link, a.header:visited, a.header:hover, a.header:active {font-size:1em;}
a.navigator:link, a.navigator:visited, a.navigator:hover, a.navigator:active   {font-size:0.7em;}
input.login, input.loginerror       {font-size:1em;margin: 4px 0;width: 50%;}
input.login:focus, input.loginerror:focus {font-size:1em;margin: 4px 0;width: 55%;}
input#loginbutton, input#loginbutton:hover, input#loginbutton:active {font-size:1em;margin: 4px 0;width:50%;height:40px;}
#loginframe   {width:68%;height:135px;font-size:1em;padding-top:10px;}
.downloadframe      {width:95%;}
.downloadcaptn, .downloaddatum {height:25px;}
.downloaddescn      {height:80px;}
.downloaddfile, .downloadlogos, .downloadtitel {height:60px;}
.downloadlogos      {width:15%;}
.downloadtitel      {width:80%;}
.downloadtitto		{height:40px;}
.downloadtitbo		{height:20px;}
img.dviewsymbol-1, img.dviewsymbol-2, img.dviewsymbol-3, img.dviewsymbol-4, img.dviewsymbol-5, img.dviewsymbol-6, img.dviewsymbol-7, img.dviewsymbol-8, img.dviewsymbol-9 {height:18px;}
.downloaddescr      {padding-right:5px;margin:0px;font-size:0.8em;}
}

/* Kleine Smartphones etc */
@media only screen and ( max-width: 320px ) {
#mainframe {width:100%;height:100%;}
#headframe {height:70px;background-size:contain;}
#headle, #headri {width:42%;}
#bodyframe {height:calc(100% - 90px);}
#pageframe {width:100%;height:100%;}
#naviframe {display:none;}
#navimobil {height:20px;font-size:0.5em;line-height:1.2em;}
#navileft, #navicent, #navirigh {height:20px;width:33%;}
#bigframe  {height:100%;}
#descframe {width:100%;height:120px;}
#contframe {width:100%;height:calc(100% - 120px);}
#applphoto {background-image:none;}
.descripto {padding-top:2px;padding-left:5px;padding-right:5px;margin:0px;font-size:0.6em;}
.header, .headerval    {padding-top:20px;line-height:1.1;font-size:0.4em;}
a.header:link, a.header:visited, a.header:hover, a.header:active {font-size:1em;}
a.navigator:link, a.navigator:visited, a.navigator:hover, a.navigator:active   {font-size:0.7em;}
input.login, input.loginerror {font-size:1em;margin: 4px 0;width: 50%;}
input.login:focus, input.loginerror:focus {font-size:1em;margin: 4px 0;width: 55%;}
input#loginbutton, input#loginbutton:hover, input#loginbutton:active {font-size:1em;margin: 4px 0;width:50%;height:40px;}
#loginframe   {width:68%;height:135px;font-size:1em;padding-top:5px;}
.downloadframe      {width:95%;}
.downloadcaptn, .downloaddatum {height:10px;}
.downloaddescn      {height:60px;}
.downloaddfile, .downloadlogos, .downloadtitel {height:40px;}
.downloadlogos      {width:15%;}
.downloadtitel      {width:80%;}
.downloadtitto		{height:20px;}
.downloadtitbo		{height:10px;}
img.dviewsymbol-1, img.dviewsymbol-2, img.dviewsymbol-3, img.dviewsymbol-4, img.dviewsymbol-5, img.dviewsymbol-6, img.dviewsymbol-7, img.dviewsymbol-8, img.dviewsymbol-9 {height:10px;}
.downloaddescr      {padding-right:5px;margin:0px;font-size:0.6em;}
}