/*
 * Indexy - a WordPress plugin to manage glossary pages.
 *
 * Visit the plugin's webpage at http://www.damnleet.com/indexy
 *
 * Copyright 2015 Jeroen Treurniet (contact@damnleet.com)
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License, version 2, as 
 * published by the Free Software Foundation.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */

/*
 * This stylesheet is meant for use with WordPress' default TwentyFifteen theme,
 * and may or may not produce acceptable results with other themes. If not,
 * however, you can use this as a starting point to customize the appearence to
 * your liking.
 *
 * I strongly recommend making a copy of this file in your theme's folder and
 * editing that file. This way, your changes are preserved whenever Indexy is
 * updated. If your theme folder contains a file called 'indexy.css', the plugin
 * will take care of including it on your website, instead of the default copy
 * shipped with Indexy. If you prefer to include the style definitions for
 * glossary items in your theme's main style.css file, you should disable the
 * 'Include CSS file' option in Indexy's settings to disable this behavior.
 *
 * Alternatively, if your theme folder contains an empty indexy.css file, that
 * will produce the same result as disabling the 'Include CSS file' setting.
 *       
 * Because TwentyFifteen uses an inline stylesheet to define a bunch of things
 * (specifically to support customization options through the WP Customizer),
 * some of the items in this stylesheet have to be marked as !important to
 * override those inline definitions. If doing so is not necessary for your
 * theme, it is best practice to not mark those items as !important.
 */

/* 
 * Links to glossary articles, for both simple and popup style highlights. This
 * is applied to any highlighted terms.
 */
a.glossary, a.glossary:visited
{
	cursor:						help;
	border-bottom-style:		dashed !important;
}

/*
 * Popup style highlighting. The popup consists of a div.glossary-popup
 * containing an excerpt of the glossary article, and a 'read more' text. The
 * popup is generated by JavaScript.
 */
.glossary-popup
{
	background-color:			rgba( 225, 225, 225, 0.9 );
	border:						1px rgba( 200, 200, 200, 0.9) solid;
	color:						#333;
	font-size:					12pt;
	line-height:				1.2em;
	min-width:					150px;
	max-width:					300px;
	padding:					10px;
}

.glossary-popup-readmore
{
	color:						#666;
	font-size:					9pt;
	margin:						0.5em 0 0 4ch;
}

/*
 * Glossary index (if you so choose to use it). The below items style the list
 * of starting letters.
 */
.glossary-index-letters
{
	background-color:			rgba( 225, 225, 225, 0.9 );
	border:						1px rgba( 200, 200, 200, 0.9) solid;
	list-style-type:			none;
	text-align:					center;
	margin:						0 auto;
	padding:					10px;
	width:						95%;
}

.glossary-index-letters li
{
	display:					inline-block;
	padding:					0px 5px;
	margin:						0px;
}

/*
 * These items control the per-letter lists of articles.
 */
.glossary-index h2
{
}

.glossary-index
{
}

.glossary-index li
{
}

/*
 * This bit is only used to display a list of synonyms for a term on the term's
 * page, when you use the sample single-glossary.php file for TwentyFifteen that
 * comes with Indexy (located in the plugin's 'theme' subfolder). If you don't
 * use that file, or go with a customized approach, you may not need this.
 */
.glossary-synonyms
{
	font-size:				10pt;
	margin-left:			20px;
	margin-top:				-40px;
}

/*
 * Finally, we'll move on to the Glossary Index widget. This widget displays a
 * sorted, scrollable list of all glossary articles in the sidebar (or other
 * widget area), and relies heavily on JavaScript to do so (the script can be
 * found in the plugin's 'js' folder, and is called
 * 'indexy_glossary_index_widget.js').
 *
 * The HTML code emitted for the widget consists of three main elements: a
 * header, which contains left and right arrows to go back and forth through the
 * possible starting letters as well as a display showing the current letter,
 * a series of lists of articles for each possible starting letter, and finally,
 * a list of starting letters, where clicking one of the letters in the list
 * switches the widget to that letter immediately.
 *
 * First, we'll look at the styling for the header elements:
 */
.glossary-index-widget .widget-header
{
	background-color:		rgba( 255, 255, 255, 0.1 );
	font-size:				16pt;
	text-align:				center;
	width:					100%;
}

.glossary-index-widget .widget-header .column-arrow
{
	color:					rgba( 255, 255, 255, 0.4 );
	cursor:					pointer;
	display:				inline-block;
}

.glossary-index-widget .widget-header .column-currentletter
{
	color:					#FFF;
	display:				inline-block;
	width:					50%;
}

/*
 * Next, we have the lists of terms for each starting letter:
 */
.glossary-index-widget .widget-letter-block
{
	background-color:		rgba( 255, 255, 255, 0.05 );
	display:				none;
	list-style-type:		none;
	margin:					0;
	padding:				15px 5%;
	width:					100%;
}

.glossary-index-widget .widget-letter-block li
{
}

/*
 * And finally, the list of starting letters to jump to directly:
 */
.glossary-index-widget .widget-letter-index
{
	background-color:		rgba( 255, 255, 255, 0.1 );
	text-align:				center;
}

.glossary-index-widget .widget-letter-index li
{
	cursor:					pointer;
	display:				inline-block;
	font-size:				9pt;
	line-height:			1em;
	list-style-type:		none;
	padding:				0px;
}