/* a word, inside of which is .orthography and either .context-info or .context-required */
.word {
	border: 1px #0C2169 dashed;
	padding: 2px 5px;
	margin: 3px;
	background-color: #fff;
	display: inline-block;
	cursor:pointer; /* clicking on a word goes to a search for that word (except when it expands/collapses the context quote)*/
}

/*contains the list of all rhymes in a group, including the title (of style .title) of that group*/
.rhyme-group {
	padding: 0px;
	overflow: auto;
	padding-bottom: 5px;
}

/* Anywhere that the context of a word is shown */
.context-required, .context-info, .context-header {
	font-style: italic;
	font-size: 10pt;
}

/* It was thought that the context could be displayed differently depending on whether that specific context was needed for the word to have a particular rhyme (i.e. that there were other words with the same spelling but different punctuation) or the context was just there to give an idea of the word's usage. In the end there it was not clear that would be useful as so many words have different pronunciations in subtly different contexts that would not be so obvious to the user, and also it can be slow to check for this.
So for now context-required and context-info are identical, and .context-required is always used.*/
.context-required, .context-info {
	cursor:pointer; /*clicking shows or hides the context */
}

/*context of search results is shown on click or mouseover*/
.context-shown {
	display: inline-block;
}

.context-shown::before, .context-shown::after,.context-header::before, .context-header::after,.context-info::before, .context-info::after {
	content: "";
    background-size: cover;
}

.context-shown::before, .context-shown::after {
    background-image: url(../images/ellipsis.png);
}

.context-info::before {
    background-image: url(../images/leftquote.png);
}

.context-info::after {
    background-image: url(../images/rightquote.png);
}

.context-header::before {
    background-image: url(../images/leftquotewhite.png);
}

.context-header::after {
    background-image: url(../images/rightquotewhite.png);
}

/*The ellipsis shown on either side of a context quote, or instead of the quote when the quote is hidden */
.context-hidden,.context-ellipsis,.context-shown::before, .context-shown::after {
	display: inline-block;
	width: 17px;
	height: 10.5px;
}

.expand-indicator {
	width: 17px;
	height: 10.5px;
	margin-left: 45%;
	margin-right: 45%;
	display: block;
}

/*open and closing quote marks for context information */
.context-quote, .context-info::before, .context-info::after, .context-header::before, .context-header::after {
	display: inline-block;
	width: 13px;
	height: 10.5px;
}

/* General informational text (e.g. heading showing how many homographs there are, or 'no rhymes found' etc.) */
.info {
	font-weight: bold;
	font-style: italic;
	padding: 5px;
}

/* Heading for a group of rhymes with a specific number of syllables */
.syllable-group-header {
	width: 100%;
	float: left;
	font-weight: bold;
	padding: 7px;
}

/* A group of rhymes with a specific number of syllables */
.syllable-group {
	padding-left: 15px;
}


/*title, can be found inside .rhyme-group and the #info_overlay*/
.title, .subtitle {
	font-weight: bold;
	float: top;
	margin: 0px;
}

/*orthography of a word. Found inside .word */
.orthography {
	font-size: 12pt;
}

/* The overlay showing information on different accent parameters etc. looks similar to the group of all rhymes for a given homograph */
.homograph,.genericheader, #info_overlay {
	overflow: auto;
	background-color: #C7DCF5;
	border-radius: 15px;
}

/*contains all rhyme groups relevant to a particular homograph of the search term*/
.homograph, .genericheader {
	width: 95%;
	margin: 10px;
}

.homograph .title,.genericheader .title,#info_overlay .title, #info_overlay .subtitle {
	color: #fff;
	background-color: #3A84DB;
	padding: 5px 15px;
}


.rhyme-group .title, #info_overlay .subtitle {
	border-radius: 0px;
	background-color: #6EA0DB;
}

/* A group of parameters in the search form, e.g. Roticity with the options Rhotic and non-rhotic */
.parameter-group {
	margin-top: 5px;
	margin-bottom: 5px;
	float: top;
}

.parameter-group input {
	margin-left: 35px;
}

form {
	float: left;
}

#logo {
	/*width: 437px;
	height: 83.5px;*/
	max-width: 437px;
	max-height: 83.5px;
	width: 100%;
}

#logocontainer {
	float: left;
	/*width: 437px;
	height: 83.5px; */
	margin: 15px;
}

#logolink {
	display: block;
}

#results,#forumthreads,#ads {
	float: left;
	width: 100%;
}

#ads {
	margin: 5px;
}

/* Question mark icon which shows #info_overlay when clicked */
.help {
	width: 20px;
	height: 20px;
	left-margin: 5px;
	cursor:pointer;
	display: inline-block;
}

/* 'About' button which shows #info_overlay when clicked */
.about, .toplink {
	cursor:pointer;
	float: left;
	background-color: #3A84DB;
	color: #0C2169;
	padding: 5px;
	margin: 0px 3px 3px 13px;
	border-radius: 7px;
	font-weight: bold;
	position: relative;
	top: -10px;
	left: 20px;
}

/* Close button for #info_overlay */
#close {
	width: 25px;
	height: 25px;
	background-color: transparent;
	cursor:pointer;
	float: right;
}

/* Translucent background when #info_overlay is shown to darken the rest of the page  */
#overlay_background {
	position: fixed;
	display:none;
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
}

/* overlay showing help/about information (displayed over #overlay_background)*/
#info_overlay {
	position: fixed;
	background-color: #C7DCF5;
	border: 1px #0C2169 dashed;
	border-radius: 15px;
	margin: 50px;
	top: 0;
	left: 0;
	max-height: 90%;
	right: 0;
	overflow-y: auto;
}

/* When a word in the overlay is clicked, the overlay is closed and the word is searched for.
When the header of a homograph is clicked, the list of rhymes for that homograph is expanded (and loaded from the server if necessary) or collapsed */
.staticword, .homograph h1 {
	cursor: pointer;
}

.help-section {
	padding: 15px;
}

a {
	font-weight: bold;
	color: #0C2169;
}

.forumresult,.randomrhyme {
	padding: 2px;
	margin-left: 15px;
	margin-top: 2px;
}

/* The forum archive (forum/index.php) and forum results in searches */
.forum-note {
	font-style: italic;
}
.forum-topic-info, .forum-breadcrumb {
	font-size: 10pt;
	color: #0C2169;
}
.forum-topic-info {
	margin-left: 10px;
}
.forum-breadcrumb {
	padding-top: 5px;
	padding-bottom: 0px;
}
.forum-post {
	background-color: #fff;
	border: 1px #0C2169 dashed;
	margin: 10px 15px;
	padding: 8px 12px;
}
.forum-post-header {
	font-size: 10pt;
	margin-bottom: 6px;
	color: #3A84DB;
}
.forum-poster {
	font-weight: bold;
	color: #0C2169;
}
.forum-quote {
	border-left: 4px solid #6EA0DB;
	background-color: #EEF4FC;
	margin: 6px 0px;
	padding: 4px 10px;
}
.quote-header {
	font-size: 9pt;
	font-weight: bold;
	margin-bottom: 3px;
}