/*------------------------CODE INTERACTIVE----------------------------*/
code {
    color: black;
    background-color: #EAEAEA;
    padding: 2px 8px;
    border-radius: 7px;
    display: inline-block;
}

ul code{
	display: inline;
}


code.value {
    background-color: LEMONCHIFFON;
    border: 1px solid lightgray;
}

code.constant{
	background-color: lavender;
    color: black;
    border: 1px solid grey;
    margin: 2px;
}

code.lclass, code.lconstant, code.lfunction {
    background-color: #088860;
    color: #fff;
}

code.lclass:hover,code.lconstant:hover,code.lfunction:hover{
	color: black;
}
code.framework {
    background-color: #900090;
	color:white !important;
}
code.framework:hover{
	color: black;
}

code:hover,
code.value:hover,
code.function:hover,
code.class:hover,
code.cmethod:hover,
code.constant:hover,
code.framework:hover,
code.cproperty:hover{
	background-color: white;
}
code:hover:after,
code.constant:hover:after,
code.value:hover:after,
code.function:hover:after,
code.class:hover:after,
code.lclass:hover:after,
code.lfunction:hover:after,
code.lconstant:hover:after,
code.cmethod:hover:after,
code.framework:hover:after,
code.cproperty:hover:after{
	position: relative;
	padding: 2px 8px;
	border-radius: 7px;
	left: 0;
	width: 100%;
}

code.framework:hover:after{
	content: "(framework or CMS Class or function)";
}
code.value:hover:after{
	content: "(value)";
}
code.function:hover:after{
	content: "(defined function)";
}
code.class:hover:after{
	content: "(defined class)";
}
code.lclass:hover:after{
	content: "(language class)";
}
code.lfunction:hover:after{
	content: "(language function)";
}
code.lconstant:hover:after{
	content: "(language constant)";
}
code.cmethod:hover:after{
	content: "(class method)";
}
code.cproperty:hover:after{
	content: "(class property)";
}
code.constant:hover:after{
	content: "(constant)";
}