/*-----[Char Picker structure]--------------------------------------------*/

#spk-container {
	display: block;
	/*position: fixed;
	padding: 1%;*/
}

	#spk-container > li {
		float: left;
		width: 6.69%;
		height: 3em;
		margin: 0.5%;
		list-style-type: none;
		text-align: center;
		line-height: 3em;
		cursor: pointer;
        font-family: 'Verisurf GD&T';
		-webkit-user-select: none;
		 -khtml-user-select: none;
		   -moz-user-select: -moz-none;
			-ms-user-select: none;
				user-select: none;
	}

#spk-container2 > li {
    float: left;
    width: 6.69%;
    height: 3em;
    margin: 0.5%;
    list-style-type: none;
    text-align: center;
    line-height: 3em;
    cursor: pointer;
    font-family: 'Y14.5M';
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}

#spk-container3 > li {
    float: left;
    width: 6.69%;
    height: 3em;
    margin: 0.5%;
    list-style-type: none;
    text-align: center;
    line-height: 3em;
    cursor: pointer;
    font-family: 'Y14.5M-2009';
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}

#note2 {
    display: inline-block;
    position: relative;
    padding: 1%;
    z-index: 10;
    float: none;
    margin-top: 15px;
    margin-right: 20px;
}

#note3 {
    display: inline-block;
    position: relative;
    padding: 1%;
    z-index: 10;
    float: none;
    margin-top: 15px;
    margin-right: 20px;
}

	#spk-container > li.spk-breaker {
		clear: left;
	}

	#spk-container > li:hover {
		position: relative;
		top: 1px;
	}

/*-----[Customisable styles]--------------------------------------------------*/

    #spk-container {
	    background: #EEE;
	    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	    border-radius: 5%;
	    width: 90%;
    }

	#spk-container > li {
		background: #DDD;
		border-radius: 10%;
	}

    #spk-container2 {
        background: #EEE;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        border-radius: 5%;
        width: 90%;
    }

    #spk-container2 > li {
        background: #DDD;
        border-radius: 10%;
    }

    #spk-container3 {
        background: #EEE;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        border-radius: 5%;
        width: 90%;
    }

    #spk-container3 > li {
        background: #DDD;
        border-radius: 10%;
    }


    /*-----[Char Picker structure]--------------------------------------------*/

#spk-container-main {
	display: none;
	position: fixed;
	padding: 1%;   
    z-index: 10;
}


#spk-container-main {
	background: #EEE;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	border-radius: 5%;
	width: 30%;
}

	#spk-container-main > li {
		background: #DDD;
		border-radius: 10%;
	}


#spk-overlay {
    display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.8;
  z-index: 9;
  background-color: rgba(0,0,0,0.5);
}