/*
 * bare minimum to make this work
 */
.my_awesome_read_more{
	max-height:initial;
}
[type=checkbox].my_awesome_read_more,
[type=radio].my_awesome_read_more{
	position:fixed;
	top:-100px;
	left:-100px;
}
[type=checkbox].my_awesome_read_more + .my_awesome_read_more:not(label), 
[type=radio].my_awesome_read_more + .my_awesome_read_more:not(label){
	display:block !important;
	height:0px !important;
	overflow:hidden !important;
}
[type=checkbox].my_awesome_read_more:checked + .my_awesome_read_more:not(label), 
[type=radio].my_awesome_read_more:checked + .my_awesome_read_more:not(label){
	display:initial !important;
	height:initial !important;
	overflow:initial !important;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * CODE BLOCK
 * use like this:
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


<label
	class='my_awesome_read_more'
	for='my_awesome_read_more_line_22'
>
	Optional Label Text Here (you can also use :after) 
</label>
<input
	type='checkbox'
	class='my_awesome_read_more'
	id='my_awesome_read_more_line_22'
/>

<span class='my_awesome_read_more'>

<p>
	Your read more content here....
</p>
<p>
	Style it anyway you want....
</p>
<p>
	Anything can be here, it just has to be within the "my_awesome_read_more" class and must be immediately proceeding the checkbox.
</p>

<p>
	Also, the checkbox needs a unique ID and <label> needs a corresponding unique for="". The trick I like to use for this is to use the line number shown in my IDE to ensure its unique 
</p>

</span>

 */


/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * CODE BLOCK
 * if you want to show different text/image for [un]checked leave the label text empty and use this:
 * This only works if you do checkbox -> label -> content
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[type=checkbox].my_awesome_read_more + label:after {
	content: 'Open';
}
[type=checkbox].my_awesome_read_more:checked + label:after {
	content: 'Close';
}

 */


/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * CODE BLOCK
 * want a one-time click to edit? Leave the label text empty and use this:
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[type=checkbox].my_awesome_read_more + label:after {
	content: 'Edit';
}
[type=checkbox].my_awesome_read_more:checked + label, 
[type=checkbox].my_awesome_read_more:checked + label:after {
	content: '';
	display:none;
}

 */