input, select, button {
  border:1px solid #aaa;
  border-radius:4px;
}


@font-face {
  font-family: DefaultFont;
  /*src: url('Righteous-Regular.ttf');*/
  src: url('Exo-Regular.ttf');
}

body {
    font-family: DefaultFont;
    font-size:14px;
}

a {
    color:#833;
    text-decoration:none;
}

a:hover {
    color:#000;
    text-decoration:underline;
}


table.cx_table th { border-bottom:1px solid #8ad; background-repeat: no-repeat; background-position: right; padding-right:10px; cursor:pointer; background-color:#def; }

.cx_table thead tr th {
    background-color:#aac;
    padding:3px 8px;
}

.cx_table tbody tr:nth-child(odd) td {
    background-color:#eef;
    border-bottom:1px solid #99a;
    padding:3px 6px;
}

.cx_table tbody tr:nth-child(even) td {
    background-color:#dde;
    border-bottom:1px solid #99b;
    padding:3px 6px;
}


/* site layout */


/*
#cwx_loginbox_hoveritem { width:200px; padding-top:2px; height:20px; background-color:#666; color:#fff; position:absolute; right:20px; border:1px solid #000; border-width:0px 1px 1px 1px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; text-align:center; }
*/



#cwx_loginbox { position:absolute; width:calc(40vw); left:30vw; /*_height:20vh;/*/ top:20vh; /*_overflow:hidden;*/ background-color:#ddd; /*text-align:center;*/ display:none; z-index:15000; border:1px solid #000; padding:2vh; }

#cwx_loginbox #login_status { margin-bottom:1vh; text-align:center; vertical-align:baseline; }
#cwx_loginbox .logo_sm { vertical-align:text-top; width:16px; height:16px; }

#cwx_loginbox #login_wrapper { }

#cwx_loginbox form#cwx_login { margin-bottom:1vh; display:block; text-align:center; border:1px solid #000; background-color:#f00; padding:3px;  vertical-align:middle; text-align:center; }

/*#cwx_loginbox form#cwx_login .ui-button { padding: 0.5vh 2vh; font-size:1.5vh; margin-bottom:0.5vh; }*/
#cwx_loginbox form#cwx_login #cwx_uname, form#cwx_login #cwx_pass { width:calc(30vw); display:inline-block; margin:0.5vh 0vw; }
#cwx_loginbox form#cwx_login #cwx_uname { margin-top:1vh; }

#cwx_loginbox form#cwx_login #cwx_login_submit {
    background-image: url(https://www.groovenet.hu/cwe/img/CX_1_favicon_128.png);
    background-repeat: no-repeat;
    background-size: 5vh;
    background-position: 1vh 0.7vh;
    padding: 2vh;
    margin:1vh;
    width:15vw;
    text-align: center;
}



#cwx_loginbox form#cwx_login #login_error { display:none; }

#cwx_loginbox div#cwx-gapi-signin { display: inline-grid; vertical-align:middle; }
#cwx_loginbox #fbLink { display: inline-grid; vertical-align:middle; }




#cwx_loginbox #profile_wrapper { }

#cwx_loginbox #profile_wrapper .profilehead { font-weight:bold; font-size:2vh; margin-bottom:1.5vh; text-align:center;  }
#cwx_loginbox #profile_wrapper .fieldset span.label { width: 16vw; white-space: nowrap; display:inline-block; text-align: right; }
#cwx_loginbox #profile_wrapper .fieldset input[type="text"],
  #cwx_loginbox #profile_wrapper .fieldset input[type="password"]
    { margin-bottom:0.3vh; }
    
    #cwx_loginbox #profile_wrapper .perr, #cwx_loginbox .phl {
      background-color: #c88;
      padding: 5px 0px;
      border: 1px solid #000;
      margin:0.5vh 0vw;
    }
    #cwx_loginbox #profile_wrapper .phl { background-color: #cc8; }
    #cwx_loginbox #profile_wrapper .phl .phltext { color:#000; }


    #cwx_loginbox #profile_wrapper .phltext {
      color:#fff;
      padding:5px 20px;
      text-align: center;
    }

    #cwx_loginbox #profile_wrapper .phltext:empty {
      padding:0px;
    }



#cwx_loginbox #profile_wrapper #legaltext:not(:empty) { background-color:#fff; margin:1vh auto; font-size:1.5vh; color:#666; border:1px solid #bbb; min-height:2em; width:30vw; padding:0.5vh 1vh; }


#cwx_loginbox .btnset { text-align: center; background-color: #ccc; padding: 0.5vh 0vh; border: 1px solid #888; }
/*#cwx_loginbox #profile_wrapper input[type=button],*/
 #cwx_loginbox .btnset input[type=button] { padding:0.5vh 2vh; margin:0.3vh; width:15vw; }

#cwx_loginbox .altlogin { text-align: center; }



@media (min-width: 320px) and (max-width: 980px) {

  #cwx_loginbox { width:calc(80vw - 4vh); left:10vw; font-size:2vh; }
  /*#cwx_loginbox #login_status { margin-bottom:1vh; text-align:center; vertical-align:baseline; }*/
  #cwx_loginbox .logo_sm { vertical-align:text-top; width:2vh; height:2vh; }

  #cwx_loginbox form#cwx_login input:not([type=button]) { font-size: 3vh; }
  #cwx_loginbox form#cwx_login #cwx_uname, form#cwx_login #cwx_pass { width:calc(60vw);  }
  #cwx_loginbox form#cwx_login #cwx_login_submit {  width:50vw; }

  #cwx_loginbox .altlogin #cwx-gapi-signin { margin-top:1vh; }

  #cwx_loginbox .altlogin #fbLink { margin-top:1vh; }
  #cwx_loginbox .altlogin #fbLink img { width:500px; }

  #cwx_loginbox #profile_wrapper .profilehead { font-weight:bold; font-size:3vh; margin-bottom:1.5vh; text-align:center;  }
  #cwx_loginbox #profile_wrapper .fieldset span.label { width: 26vw; }

  #cwx_loginbox #profile_wrapper #legaltext:not(:empty) { width: 65vw; }

  #cwx_loginbox input:not([type=checkbox]) { font-size:2vh; width:40vw; }
  #cwx_loginbox input[type=checkbox] {  height: 3vh; width: 3vh; vertical-align:middle; }
  /*#cwx_loginbox #profile_wrapper input[type=button]*/
  #cwx_loginbox .btnset input[type=button] { width:25vw; }


}






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




#cwx_navbar { position:fixed; top:0px; width:100%; height:70px; background-color:#fff; border:1px solid #000; border-width:1px 0px 1px 0px;  background-image:url('../img/C60_1_60p.png'), url('../img/C60_1_60p_line.png'); background-repeat: no-repeat, repeat-x; background-position:top 5px left -25px, top 5px left 0px; }
/*'../img/CX_1_60p.png'*/

#cwx_navbar div.left { position:absolute; left:250px; top:9px; }
#cwx_navbar div.right { position:absolute; right:10px; top:9px; }

#cwx_navbar div.left .button { margin-right: 5px; }
#cwx_navbar div.right .button { margin-left: 5px; }

#cwx_navbar .button {
  display:inline-flex; height:50px; background-color:#ccc; color:#fff; border:1px solid #000; box-shadow:0px 0px 4px #000;
  font-variant-caps: unicase; font-size:22px; font-weight:bold; text-shadow:0px 0px 8px #000; cursor:pointer;
  transition:0.5s;  }

#cwx_navbar .button.hl1 { background-color:#f30; }
#cwx_navbar .button.hl2 { background-color:#fc0; }


#cwx_navbar .button div { margin:10px 10px; }

#cwx_navbar .button:hover { background-color:#000;  text-shadow:4px 4px 8px #fff, -4px -4px 8px #fff;
  transition:0.5s; }



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


#cwx_content { margin-top:71px; }






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

div.fe_info { padding:20px 50px; margin:150px 200px 30px 200px; display:block; position:relative; border:1px solid #995; background-color:#cc9; border-radius:10px; box-shadow:0px 0px 5px #000; text-align:center; }
div.fe_error { padding:20px 50px; margin:150px 200px 30px 200px; display:block; position:relative; border:1px solid #955; background-color:#c99; border-radius:10px; box-shadow:0px 0px 5px #000; text-align:center; }



.banner { border:1px solid #ccc; color:#ccc; text-align:center; vertical-align:middle; display:block; position:relative; }
.banner div.placeholder { position: relative; top:45%; }




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

/* solver layout */

#topbar { width:70vw; height:34px; vertical-align:middle; background-color:#eee; border-bottom:5px solid #777; }

#scorebox { height:30px; margin-top:-2px; margin-left:0px; display:inline-block; _border:1px solid #999; vertical-align: middle; }
#scorebox div.display { vertical-align:middle; background-color:#333; border:1px solid #000; border-radius: 2px; padding:1px 2px; margin-left:1px; display:inline-block;  }
#scorebox div.display div.val { vertical-align:middle; margin:0px 2px; display:inline-block; width:60px; text-align:center; position:relative; top:-2px; }
#scorebox div.display div.deduct { vertical-align:middle; background-color:#000; border-radius: 2px; margin:0px 1px; display:block; font-size:9px; text-align:center; position:relative; line-height:10px; top:-2px; }


.score_wrapper { z-index:2000; position:absolute; top:300px; left:600px; width:200px; height:0px; margin:0px 0px 0px -100px; text-align:center;
 --fs1:20px; --fs2:40px; font-weight:bold; }

.score_wrapper .scrr1 { display:inline-block; position:relative; top:-20px; font-size:var(--fs1); color:#f00; background-color:#fff; border:2px solid #800; border-radius:20px; transition: 0.7s; }
.score_wrapper .scrr2 { display:inline-block; position:relative; top:-80px; font-size:var(--fs2); color:rgba(255,0,0,0); background-color:rgba(255,255,255,0); border:2px solid rgba(127,0,0,0); border-radius:40px; transition: 0.7s; }

.score_wrapper .scrg1 { display:inline-block; position:relative; top:-20px; font-size:var(--fs1); color:#080; background-color:#fff; border:2px solid #060; border-radius:20px; transition: 0.7s; }
.score_wrapper .scrg2 { display:inline-block; position:relative; top:-80px; font-size:var(--fs2); color:rgba(0,96,0,0); background-color:rgba(255,255,255,0); border:2px solid rgba(0,96,0,0); border-radius:40px; transition: 0.7s; }


.score_wrapper .scrr1.dn, .score_wrapper .scrg1.dn { top:0px;  }
.score_wrapper .scrr2.dn, .score_wrapper .scrg2.dn { top:80px; }

.score_wrapper .inner { margin:10px; }
/*.score_wrapper .scrr2 .inner { padding: 0px 20px; }*/

/*.score_wrapper .scrr2 .inner { margin:10px; transition:0.7s; }
.score_wrapper .scrr1 .inner { margin:10px; padding: 0px 10px; transition:0.7s; }*/






#definition {
position:relative; white-space:nowrap; text-align:left; text-overflow:ellipsis; overflow-x:hidden; overflow-y:hidden; font-size:26px; font-variant:small-caps;
float:none; padding:4px 0px 4px 10px; width:63vw; position:relative; height:30px; display:inline-block; vertical-align: middle;
/*float:right; font-weight:bold; text-align:center;*/  }
#menu { float:left; margin:3px 3px 0px 0px; }







#sidebar { width:300px; overflow-y:auto; font-family:verdana; font-size:13px; }
#sidebar ul { padding-left: 0px; }
#sidebar ol { padding-left: 20px; }

#a_content { overflow-y:auto; }

#article h2 { margin-top:5px; }

#article div.att { margin-top:60px; border:1px solid #bbb; }
#article div.att p { margin:5px; }
#article div.att a { white-space:nowrap; }