/***********   meniu  ******************/

/*@import url(https://fonts.googleapis.com/css?family=Cuprum:400,700);*/

.mainmenu {
    color: #6b092e;
    font-family: 'Cuprum',Georgia,"Times New Roman",Times,Serif;
    font-size: 14px;
    height: 64px;
}
.mainmenu ul {margin: 0; padding: 0; }
.mainmenu li i { position: absolute; margin-left: -35px; margin-top: 4px;}
.mainmenu li { float: left; display: block; padding: 2px 10px 10px 20px; border-right: 1px solid #ffffff; cursor: pointer; }
.mainmenu li:last-child{ border-right:none;}
.mainmenu li main {font-weight: 700; margin-top: -40px; }
.mainmenu li span { position: relative; float: left; font-size: 12px; color: #6b092e; }

.mainmenu li, .mainmenu li i, .mainmenu li main, .mainmenu li span {
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
}

.mainmenu li:hover main { 
	margin-left: 10px; 
   -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}
.mainmenu li:hover span { 
	margin-left: 25px; 
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

/* COLOR MANAGEMENT */

/*.ccblue .mainmenu { background: none repeat scroll 0 0 #03B2EC;}*/
.ccblue .mainmenu li:hover { background: #044c64; }
.ccblue .mainmenu li:hover i {color: #ffffff;}
.ccblue .mainmenu li i { color: #044c64; }
.ccblue .mainmenu li:hover i {color: #ffffff;}


section{ float:left; width:100%; margin-bottom:5px;}




/****************** end meniu   *********************/        
        
        
        
        
        
        
        
        
        #div_main0 {
            float: left;
            display: inline-table;
            width: 90%;
            margin: 2%;
            padding-right: 2%;
            padding-left: 2%;
            /*border: 1px solid #aaaaaa;*/
        }
        
        .divClk,
        #div1, #div2, #div3, #div4, #div5, #div6,
        #divR1, #divR2, #divR3, #divR4, #divR5, #divR6
        /*{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} */
        
        {
            float: left;
            min-width: 30px;
            display: inline-table;
            height: 1em;
            margin: 5px;
            padding: 5px;
            border: 1px solid #aaaaaa;
        }
        
        .divClk2        
        {
            float: left;
            min-width: 10px;
            display: inline-table;
            height: 1em;
            margin: 2px;
            padding: 2px;
        }
        
        #divT1, #divT2 {
            width: 600px;
            display: block;
            height: 1em;
            margin: 5px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
        
        .mydivcl {
            width: 300px;
            display: block;
            height: 45px;
            margin: 25px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
        
        #div_textA,
        #div_textB {
            float: left;
            display: inline-table;
            position: relative;
            width: 35%;
            margin-left: 3%;
            padding: 3%;
            border: 1px solid #aaaaaa;
            border-radius: 25px;
            /*background: #dd8d8d;*/
            background: rgba(221, 141, 141, 0.6);
            
        }
        
        #div_capitole {
            float: left;
            display: inline-table;
/*            width: 30%;*/
            width: 400px;
            height: 1200px;
            margin-top: 5%;
            margin-left: 10%;
            padding: 5%;
            border: 1px solid #aaaaaa;
            border-radius: 25px;
            background: rgba(238, 234, 234, 0.3);
        }
        
        #div_frame_exercitiu, #div_frame_exerc {
            float: left;
            position: relative;
            display: block;
            min-width: 800px;
            width: 70%;
            height: 400px;
            margin: 3%;
            padding: 2%;
            border: 1px solid #aaaaaa;
            border-radius: 25px;
            /*background: #EEEAEA;*/
            /*opacity: 0.3;*/
            background: rgba(238, 234, 234, 0.3);

        }
        
        #div_frame_util {
            float: left;
            display: inline-table;
            width: 60%;
            height: 50px;
            margin-top: 0%;
            margin-left: 1%;
            padding: 1%;
            border: 1px solid #aaaaaa;
            border-radius: 25px;
            background: rgba(238, 234, 234, 0.3);
        }
        
        #div_text_cerinta {
            float: center;
            display: block;
            width: 40%;
            height: 1em;
            margin: 1.0em auto 3% 20%;
            text-align: center;
            font-size: 1.2em;
            font-weight: 400;
        }
        
        #div_text_numelectie {
            float: left;
            display: block;
            min-width: 120px;
            width: 10%;
            height: 1em;
            margin: 1%;
            text-align: left;
        }
        
        #str_introdus {
            width: 95%;
        }
        
        #div_textlipsa {
            float: center;
            display: block;
            min-width: 700px;
            width: 40%;
            height: 1em;
            margin-top: 10%;
            text-align: center;
        }
        
        #div_textmarcheaza {
            float: left;
            display: block;
            min-width: 700px;
            width: 40%;
            height: 1em;
            margin-top: 5%;
            text-align: center;
        }
        
        .recun_poza {
            float: left;
            display: inline-table;
            position: relative;
            width: 15%;
            height: 100px;
            margin-left: 3%;
            padding: 3%;
            border: 1px solid #aaaaaa;
            border-radius: 25px;
            background: #ffffff;
        }

        .detradus_cl {
            float: left;
            display: inline-table;
            position: relative;
            width: 35%;
            height: 1em;
            margin-left: 3%;
            margin-top: 5%;
            padding: 3%;
            border: 1px solid #aaaaaa;
            border-radius: 25px;
            background: #ffffff;
        }

        .textul_introdus {
            float: left;
            display: inline-table;
            position: relative;
            width: 30%;
            height: 3em;
            margin-left: 3%;
            padding: 1%;
            border: 1px solid #aaaaaa;
            border-radius: 25px;
            background: #ffffff;
            outline: none;
            resize: none;
            font-family: inherit;
            font-size: inherit;
        }
        
        .textul_introdus:focus {
            box-shadow: inset 0 0 3px 2px #33f;
        }

        .textul_corect {
            float: left;
            display: inline-table;
            position: relative;
            width: 50%;
            /*height: 5em;*/
            font-size: 0.7em;
            /*margin: 0px 10px 20px 0px;*/
            padding: 1%;
            border: 1px solid #aaaaaa;
            border-radius: 15px;
            /*background: #ffffff;*/
        }
        /*butoane*/
        
        .animate {
            transition: all 0.1s;
            -webkit-transition: all 0.1s;
        }
        
        .action-button {
            position: relative;
            padding: 10px 30px;
            margin: 0px 10px 20px 0px;
            float: left;
            border-radius: 15px;
            font-family: 'Pacifico', cursive;
            font-size: 0.7em;
            color: #FFF;
            text-decoration: none;
            /*pointer-events:none;*/
        }
        
        .blue {
            background-color: #3498DB;
            border-bottom: 5px solid #2980B9;
            text-shadow: 0px -2px #2980B9;
        }
        
        .red {
            background-color: #E74C3C;
            border-bottom: 5px solid #BD3E31;
            text-shadow: 0px -2px #BD3E31;
        }
        
        .green {
            background-color: #82BF56;
            border-bottom: 5px solid #669644;
            text-shadow: 0px -2px #669644;
            border-radius: 30px;
            margin-right: 30px
        }
        
        .yellow {
            background-color: #F2CF66;
            border-bottom: 5px solid #D1B358;
            text-shadow: 0px -2px #D1B358;
        }
        
        .gray {
            background-color: #C0C0C0;
            border-bottom: 5px solid #808080;
            text-shadow: 0px -2px #808080;
        }
        
        .action-button:active {
            transform: translate(0px, 5px);
            -webkit-transform: translate(0px, 5px);
            border-bottom: 1px solid;
        }
        
        
        
        /* The CSS  pt select box*/
        
        select {
            padding: 3px;
            margin: 0;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
            -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
            box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
            background: #f8f8f8;
            color: #888;
            border: none;
            outline: none;
            display: inline-block;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
        }
        /* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
        
        @media screen and (-webkit-min-device-pixel-ratio: 0) {
            select {
                padding-right: 18px
            }
        }
        
        label {
            position: relative
        }
        
    /*    label:after {
            content: '<>';
            font-family: 'Lato', Calibri, Arial, sans-serif;
            font-size: 2em;
            color: #aaa;
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
            right: 8px;
            top: 2px;
            padding: 0 0 2px;
            border-bottom: 1px solid #ddd;
            position: absolute;
            pointer-events: none;
        }
     */   
        label:before {
           /* content: '';*/
            right: 6px;
            top: 0px;
            width: 20px;
            height: 20px;
            background: #f8f8f8;
            position: absolute;
            pointer-events: none;
            display: block;
        }
        /* end CSS  pt select box*/
        
/*************** progress bar ***************/        

.progress-bar{
        float: right;
	display: inline;
        position: relative;
	width: 100px;
	height: 80px;
	margin: 2px;
	padding: 0;
}
.progress-bar .progress-active{
	position: relative;
	top: -105px;
}
.progress-bar p{
	position: relative;
	margin: 0;
	padding: 0;
	width: 80px;
	top: -180px;
	font-size: 20px;
	font-weight: 300;
	text-align: center;
}



/***** sortable list ******/

  #sortable { 
  list-style-type: none; 
  margin: 100px 0px 150px 15%; 
  padding: 0; 
}

#sortable li { 
  margin: 3px 3px 3px 0; 
  padding: 5px; 
  float: left; 
  min-width: 30px;
  /*width: 145px; */
  height: 36px; 
  font-size: 1em; 
  text-align: center; 
}

.div_sort {
  margin-left: 0px;
  height:100px;
  padding:20px;
  float: center;
  /*border:1px solid #aaaaaa;
  background-color: LightBlue;*/
}

li { 
  margin: 20px; 
  padding: 20px; 
  border: 0px solid;
  border-radius: 25px;
  box-shadow: 5px 5px 5px grey;
}      
 /***** end sortable list ******/