@charset "UTF-8";
/* CSS Document */

body {
	background-color:#FFF;
	font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  margin:0;
  padding:0;
}

p{margin:10px 0 10px 0;}

#login_page{margin-top:80px;}
#login_container {width:288px; margin:0 auto; margin-top:10px; background-color:#EEE; border:1px solid #999; padding: 10px 10px 28px 10px;}
#login_info {width:292px; margin:0 auto; margin-top:10px; font-size: 90%; background-color:#EEE; border:1px solid #999; padding:0 8px 0 8px;}
#login_info2 {width:292px; font-size:90%; color:#b00; margin:0 auto; margin-top:10px; background-color:#EEE; border:1px solid #999; padding:0 8px 0 8px;}

#menu_container {width:100%; position:fixed; height:30px; top:0; left:0; background-image: url(../images/bg_menu.png); background-color:#CCC; border-bottom: 2px solid #36C;z-index: 99;}
/*#menu_container img {float:left; margin-right:5px;}*/

#menu_left ul {padding:0; margin:0; float:left;}
#menu_right ul {padding:0; margin:0; float:right;}
#menu_container li {float:left; list-style:none;}
#menu_left li {border-right: solid 1px #CCC;}
#menu_right li {border-left: solid 1px #CCC;}
#menu_left a {display:block; width:auto; height: 22px; margin-left:0px; text-decoration:none; color:#36C; padding: 8px 5px 0 5px; font-weight:bold; background: url(../images/bg_menu_hover.png) repeat-x 0 0;}
#menu_right a {display:block; width:30px; height: 30px; margin-left:0px;}
#menu_container a:hover, #menu_container a.selected {background-position: 0 -30px;} 
#mCatalog{background: url(../images/mCatalog.png) no-repeat 0 0;}
#mProfile{background: url(../images/mSettings.png) no-repeat 0 0;}
#mFaq{background: url(../images/mFaq.png) no-repeat 0 0;}
#mLogout{background: url(../images/mLogout.png) no-repeat 0 0;}
#mLogin{background: url(../images/mLogin.png) no-repeat 0 0;}

#menu_left, #menu_right{width: 50%;  height:100%; float:left;}


#container {height:100%; margin:40px 0px 0px 5px; background-color:#FFF; padding-bottom:25px;}
#footer{width:100%; height:17px; background-color:#CCC; background-image: url(../images/bg_footer.png); position:fixed; bottom:0; left:0; font-size:80%; text-align:center; padding-top:3px;}
#login_container a, #footer a, #container a{color:#36C;}

.formbox {
	border-color:#000;
	margin-top:10px;
}
.formbox a{color:#9C0;}

.formbox input { /* Alle Labels UND Formularelemente auswählen */
  display: block;
  float: right;
  width: 300px; /* Breite.*/
}


.formbox label { /* Alle Labels UND Formularelemente auswählen */
  display: block;
  float: left;
  width: 200px; /* Breite.*/
}

.errorbox {
	border-color:#000;
	background-color:#FCC;
	margin-top:100px;
	margin-bottom: 10px;
	font-size:80%;
}

.infobox {
	border-color:#000;
	background-color:#FFC;
	margin-top:100px;
	margin-bottom: 10px;
	font-size:80%;
}

.txtbox {
	border-color:#000;
	margin-top:10px;
	margin-bottom: 10px;
}

.login {
	border-color:#000;
	margin-top:10px;
    display:inline;
    background-color:#CCC;
}
.login a{color:9C0;}

label { /* Alle Labels UND Formularelemente auswählen */
  display: block;
  float: left;
  width: 80px; /* Breite.*/
  margin-bottom: 10px;
}

label#TermsAndConditionsLabel { /* Alle Labels UND Formularelemente auswählen */
  display: block;
  float: left;
  width: 235px; /* Breite.*/
  font-size:80%;
  padding-top:4px;
}

input#Username, input#Password { /* Alle Labels UND Formularelemente auswählen */
  display: block;
  float: right;
  width: 170px; /* Breite.*/
  
}

form br { /* Alle Zeilenumbrüche in Formularen auswählen */
  clear: left; /* das floating der labels und inputs aufheben */
  margin-top: 10px;
}

input#TermsAndConditions{ /* den Submit-Button */
	float:left;
	width:auto;
}

input#submit, input.submit { /* den Submit-Button */
	float:right;
	width:auto;
	color:#FFF; 
	font: bold 90% 'trebuchet ms',helvetica,sans-serif; 
	background-color:#36C; 
	border: 1px solid #000; 
}

input.cancel, input.logout { /* den Submit-Button */
    float:left;
	width:auto;
	color:#FFF; 
	font: bold 100% arial,helvetica,sans-serif; 
	background-color:#36C; 
	border: 1px solid #000; 
    padding:2px 5px 2px 5px;
    margin:8px 5px 5px 20px;
}

a.menu, a.menu_selected{
background-color:#36C; font-weight: bold; display:block; color:#FFF; text-decoration:none; padding:0 5px 0 5px; margin-right:3px; float: left;
}
a.menu:hover, a.menu_selected{
	background-color:#FFF;
	color:#36C;
}

#headline{
    position: fixed;
    margin:0;
    top:30px;
    left:0;
    padding:3px 12px 0 0;
    height:18px;
    width: 100%;
    color:#36C;
    text-align:right;
    font-weight:bold;
    font-size:10pt;
    font-style:italic;
}
ul.story_box, ul.toload, ul.installed{
    float:left;
    width:144px;
    height:245px;
    padding:0;
    margin:0 10px 10px 0;
    list-style:none;
    background-color:#FFF;
    border: 0px solid #36C;
    border-radius: 6px;
    box-shadow: 0px 3px 10px #b0b0b0;
}

li.story_box_title{
    text-align:center;
    font-weight:bold;
    color:#36C;
    border: 0px solid rgb(74, 118, 205);
    border-radius: 6px;
    height: 45px;
}
li.story_box_id{
  background-color: #36C;
  color:#FFF;
  border: 0px solid #36C;
  border-radius: 6px 6px 0px 0px;
  font-size:8pt;
}
li.story_box_package{
  text-align:left;
  background-color:rgb(74, 118, 205);
  color:#FFF;
  font-size:8pt;
}
li.story_box_status{
    text-align:center;
    font-weight:bold;
    color:#36C;
    /*background-color:#345;*/
    cursor:pointer;
    padding-top: 18px;
}

table {
  border-collapse: collapse;
  width: 100%; 
}

td {
  width: 50%; /* Set the width of the table cells to 50% */
}

td:first-child {
  text-align: left;
  font-weight:bold;
  padding-left:5%;
}

td:last-child {
  text-align: right;
  padding-right:5%;
}

/*//#info_fixed{background-color:red; position:fixed; height:30px; width:100%; left:0; top:32px;}*/
.info { position:fixed; left:0; top:32px; right:0; width:auto; font-size:90%; color:#000; background-color:#EEE; border:1px solid #999; padding:8px 8px 8px 8px; margin:0 0 10px 0;z-index: 99;}
.edit_profile {height:auto; width:auto; font-size:90%; color:#000; background-color:#EEE; border:1px solid #999; padding:8px 8px 8px 8px; margin:0 10px 10px 0px;}
.red {color:#b00;}
.green{color:#093;}
.edit_profile a{color:9C0;}

.edit_profile input { /* Alle Labels UND Formularelemente auswählen */
  display: block;
  float: right;
  width: 230px; /* Breite.*/
  
}

.edit_profile label { /* Alle Labels UND Formularelemente auswählen */
  display: block;
  float: left;
  width: 150px; /* Breite.*/
  
}
input.width-150 {width: 150px; margin-top: 5px;}
.header_box{font-weight:bold; margin-top: 3px;}

h1 {
  color: #36C;
  padding-left: 10%;
}
h2 {
  color: #36C;
  padding-left: 10%;
}
img {
  max-width: 100%;
}
a {
  text-decoration:none;
}
#blog a {
  color: #36C;
}
#downloads a {
  color: #111111;
}
a:hover {
  text-decoration:underline;
}
.blogentry {
  margin: 20px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 2%;
  padding-bottom: 2%;
  background-color: #EEEEEE;
  border-radius: 5px; 
} 
.blogheader {
  text-align: center;
  color: #36C;
}
.blogtext {
  line-height: 120%;
  font-weight: 500;
  color: #111111;
}
.bildunterschrift {
  line-height: 120%;
  font-weight: 500;
  color: #777777;
  text-align: center;
}
.date {
  color: #CCCCCC;
  font-style: italic;
}
.buttontext {
  display: block;
  height: 50px;
  line-height: 50px;
  color: #FEFEFE;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
}
.button {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  border: none;
  text-decoration: none;
  cursor: pointer;
  border-radius: 5px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

#blog {
  margin-top: 2%;
  margin-left: 5%;
  margin-right: 2%;
  margin-bottom: 2%;
  width: 60%;
  height: 96%;
  border: none;
  float: left;
}
#downloads {
  margin-top: 10%;
  margin-left: 2%;
  margin-right: 5%;
  margin-bottom: 2%;
  width: 26%;
  height: 96%;
  border: none;
  float: left;
  overflow: auto;
  background-color: #EFEFEF;
  border-radius: 5px;
}


.sbutton{
  align-items: center;
  appearance: button;
  border-radius: 6px;
  border-style: none;
  box-shadow: rgba(255, 255, 255, 0.26) 0 1px 2px inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  margin-top: 5px;
  padding: 5px 20px;
  text-align: center;
  text-transform: none;
  transition: color 0.4s ease-in-out,background 0.4s ease-in-out,opacity 0.4s ease-in-out,box-shadow 0.4s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}


.sbutton-update{
  background-color: #5fc853;
}

.sbutton-update:active {
  background-color: #61c456;
}

.sbutton-update:hover {
  background-color: #61c456;
}

.sbutton-upgrade{
  background-color: #8F00FF;
}

.sbutton-upgrade:active {
  background-color: #7b04d6;
}

.sbutton-upgrade:hover {
  background-color: #7b04d6;
}

.sbutton-download{
background-color: #0377dd;
}

.sbutton-download:active {
background-color: #0276db;
}

.sbutton-download:hover {
background-color: #0373d6;
}

.sbutton-storage{
background-color: #F3AB3F;
font-size: 10px;
font-weight: 600;
line-height: 1;
margin-top: 5px;
padding: 5px 15px;
}

.sbutton-storage:active {
background-color: #F3AB3F;
}

.sbutton-storage:hover {
background-color: #F3AB3F;
}

.sbutton-resume{
background-color: #bb2742;
}

.sbutton-resume:active {
background-color: #a32038;
}

.sbutton-resume:hover {
background-color: #982237;
}


.sbutton-installed{
background-color: #595959;
cursor:default;
pointer-events: none;
}

.sbutton-installed:active {
background-color: #595959;
cursor:default;
pointer-events: none;
}

.sbutton-installed:hover {
background-color: #595959;
cursor:default;
pointer-events: none;
}

.sbutton-order{
  background-color: #000000;
  cursor:default;
  pointer-events: none;
  }

  .story-badge {
    display: none; /* Initially hide the badge */
    padding:1px;
    background-color: grey; /* Set the background color */
    color: white; /* Set the text color */
    border-radius: 5px; /* Add rounded corners */
    text-align: center;
    line-height: 20px; /* Center the text vertically */
    font-size: 14px; /* Define the font size */
    font-weight:600;
    position: relative;
    top: -120px; /* Position at the top of the story item */
    left:65%; /* Position at the left of the story item */
    width: 25%;
    z-index:2;
}

.new {
    background-color: #FE2D6C; /* Set the background color */
}



  /* MODAL STYLES
-------------------------------*/
.jw-modal {
  /* modals are hidden by default */
  display: none;

  /* modal container fixed across whole screen */
  position: absolute;
  top: 0; 
  left: 0;
  inset: 0;
  width:100%;
  height:100%;
  /* z-index must be higher than everything else on the page */
  z-index: 10000;
  
  /* semi-transparent black background exposed by padding */
  background-color: rgba(0, 0, 0, .75);
  padding: 40px;

  /* enables scrolling for tall modals */
  overflow: auto;
}

.jw-modal.open {
  display: block;
}

.jw-modal-body {
  padding: 20px;
  background: #fff;
}

body.jw-modal-open {
  /* body overflow is hidden to hide main scrollbar when modal window is open */
  overflow: hidden;
}

 /* Hide Clear Text Button in IE */
 ::-ms-clear {
  display: none;
}