﻿
div.opt-desc-item-summary { /*tvn added */
 	/* placeholder for any future restyling */
 	padding:8px;
 	}

div.opt-desc-item-link { /*tvn added */ 	 
 	padding-bottom:15px;
 	padding-left:8px;
 	}

/*DESKTOP*/
#help-mobile {
	display:none;
	}
#help-mobile-opts {display:none;}
#help-desktop {display:inline-block;}
#help-desktop-opts {display:inline-block}
	
/*img.boxed-style... refers to screenshots on Help pages*/
img.boxed-style {
	background-color: #fff;
	width: 45em;
	padding:10px;
	margin-bottom:1em;
	margin-top:1em;
	-webkit-box-shadow: 5px 5px 10px #888;
	        box-shadow: 5px 5px 10px #888;
	}
img.boxed-style-compounds {
	width: 670px;
	padding: 10px;
	margin-bottom:1em;
	margin-top:1em;
	-webkit-box-shadow: 2px 4px 6px #888;
	        box-shadow: 2px 4px 6px #888;
	}
img.boxed-style-dt {
	background-color: #fff;
	width: 45em;
	padding:10px;
	margin-top:1.5em;
	-webkit-box-shadow: 5px 5px 10px #888;
	        box-shadow: 5px 5px 10px #888;
	}
img.boxed-style-m {
	display:none;
	}


img.boxed-style-navbar {
	background-color: #fff;
	width: 100%;
	padding:10px;
	margin-top: 1.5em;
	-webkit-box-shadow: 5px 5px 10px #888;
	        box-shadow: 5px 5px 10px #888;
	}
img.boxed-style-tools-menu {
	background-color: #fff;
	width: 670px;
	padding:10px;
	/*margin: 25px;*/
	-webkit-box-shadow: 5px 5px 10px #888;
	        box-shadow: 5px 5px 10px #888;
	}
/*Help-block-example... refers to the example text entries in Help pages*/
.help_block_example {
	font-family: Roboto, sans-serif;
    font-size: 0.875rem;
    background:#ffff;
    color:#515151;
    margin-left: 3.125em;
    margin-right:5em;
    line-height:1.7em;
    margin-top:1em;
    margin-bottom:0.5em;
    padding:20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);
    border-radius:3px;
	}
a.help-block-example {
	color: var(--entry-hw);
	text-decoration:none !important;
	-moz-text-decoration-color: var(--link) !important;
	}
a.help-block-example:hover {
	text-decoration: underline !important;
	color: var(--entry-hw) !important;
	}
.help-block-example-hw {
	font-weight:bold;
	font-family:'amiri';
	font-size:1.25em;
	}
dl {
    margin-bottom: 4px;
	}
.example-offensive{
	cursor: pointer;
	user-select: none;
	filter: blur(5px);
	transition: filter 0.5s ease;
}	
/*HELP>Entry Structure example entry view*/
#entry_area  {
	position: relative;
	float: right;
    background-color: white;
    border-color: white !important;
    font-family: 'Open Sans', sans-serif;
	border: solid 1px;
    border-color: #ffffff !important;
    -webkit-box-shadow:0px 2px 4px #888888;
            box-shadow:0px 2px 4px #888888;
    font-size:80%;
	margin-bottom:10px;
	margin-top:35px;
    width:700px;
	}
/*I think this dates back to when we had an html example entry so no longer used
#target .entry-header {
    top: 0;
    position: static;
    padding-top:0 !important;
	}

span.oos { font-weight: bold; }

.QuotPara { line-height: 1.5em; }

#entry_area * { border-color: white; }*/

/*lists next to img on Help landing pages*/
#opts_div {
	position: relative;
	list-style-type: none;
    	font-family: 'Montserrat', sans-serif;
	margin-top:45px;
	margin-right:722px;
	}
#opts_ul a { 
	color: var(--link); 
	font-family: 'Montserrat'
	}
#opts_ul a:hover {
	text-decoration: underline;
	}

.opt-desc {
    font-size: 1em;
    line-height: 1.5em;
    color: var(--dark-grey);
    opacity: 0;
    -webkit-transition: opacity 1200ms ease-out, max-height 1500ms ease-out;
    transition: opacity 1200ms ease-out, max-height 1500ms ease-out;
    max-height: 0;
    padding-right: 8px;    
    font-family: 'Roboto', sans-serif;
	}

.opt {
    padding: 0;
    line-height: 2em;
    overflow: hidden;
    padding: 0;
    font-family:'Montserrat';
	}
.opt > a {
    padding: 7px;
    font-size: 18px;
    border: none;
    display: block;
	}
 #opts_ul > li.main_entry.opt.highlight > div >div.opt-desc-item-summary > a {font-family:'Arimo';}
/*.opt-title {
   }*/

.seemore {
	font-family:'Arimo' !important;
    	font-size: 1em;
    	padding-top: 10px;
    	padding-bottom:15px;
    	/*display: block; tvn removed */
    	color: var(--link);
    	text-align:left;
	}
span.seemore-desktop:hover {
    display: inline-block;
    text-align:left;
    text-decoration:underline;
   	}
.highlight {
    background-color: #ffd428 !important;
    border: 1px solid #ffd428 !important;
    -webkit-transition: background-color 1000ms ease-in, border-color 1000ms ease-in;
    transition: background-color 1000ms ease-in, border-color 1000ms ease-in;
	}
.opt.highlight {
    background-color: white !important;
    border: none !important;
    /*border-bottom: 1px solid gray !important;*/
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding:8px;
	}
.opt.highlight > a {
    border: none !important;
    /*border-top: 1px solid gray !important;*/
	}
.opt.highlight > a:hover {
	}
.opt.highlight .opt-desc {
    padding-top: 5px;
    padding-bottom: 5px;    
    opacity: 1;
    max-height: 999px;
    -webkit-transition: opacity 800ms ease-in, max-height 2000ms ease-in; 
    transition: opacity 800ms ease-in, max-height 2000ms ease-in;
    background-color: white;         
	}
#entry_area #bck_img {
    width:100%;
  }

#entry_area rect{
	fill:#ffe419!important;
	fill-opacity:0
	}
.getting_started #entry_area {
	left:0 !important;
	padding:0 !important
	}
a.sublist {
	color: #007D57;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.125em;
	line-height: 2.5em;
	}
a.sublist:hover {
	text-decoration: underline !important;
}
#entry_area svg .highlight{
	background:#ffe100;
	fill-opacity:0.6;
	border:3px solid #ffeb59!important;
	-webkit-transition:fill-opacity 750ms ease-in,border-color 750ms ease-in;
	transition:fill-opacity 750ms ease-in,border-color 750ms ease-in;
}
/*table in Key to Pronunciation and List of Abbrevs*/
table {
    border-collapse: collapse;
    width: 100%;
 	}
td {
    border: 0 solid #ddd;
    padding-left:0px;
    padding-top: 8px;
    padding-right:0px;
    padding-bottom:8px;
    line-height: 1.3em;
}
@media only screen and (max-width:1200px){
p.help-intro {
	display:none;
	}
#help-desktop{
	display:none;
	}
#help-mobile {
	display:inline-block;
	}
img.boxed-style-dt {
	display:none;
	}
img.boxed-style-m {
	display:inline-block;
	background-color: #fff;
	width: 20em;
	padding:10px;
	margin-top: 1.5em;
	margin-bottom:1em;
	-webkit-box-shadow: 5px 5px 10px #888;
	        box-shadow: 5px 5px 10px #888;
	}
}


/*MEDIUM DEVICES & TABLETS*/
@media only screen and (max-width:992px){
#help-desktop{
	display:none;
	}
#help-desktop-opts{display:none;}
#help-mobile {
	display:inline-block;
	}
#help-mobile-opts {display:inline-block;}
img.boxed-style-dt {
	display:none;
	}
img.boxed-style-m {
	display:inline-block;
	background-color: #fff;
	width: 20em;
	padding:10px;
	margin-top: 1.5em;
	margin-bottom:1em;
	-webkit-box-shadow: 5px 5px 10px #888;
	        box-shadow: 5px 5px 10px #888;
	}
p.help-intro {
	display:none;
	}
#entry_area {
	display: none;
	}
#opts_div {
	position: relative;
	line-height: 2em;
	margin-top:0em;
	font-size: 1.125em;
	list-style-type: none;
    font-family: 'Roboto', sans-serif;
    width:100%;
	}
#opts_ul a {
	color: var(--link); 
	}
#opts_ul a:hover {
	color: var(--link);
	text-decoration: underline;
	}
.opt-desc {
    font-size: 16px;
    line-height: 1.5em;
    color: #4c4c4c;
    padding-left: 7px;
    padding-right: 7px;
    font-family: 'Roboto', sans-serif;
   }
.opt > a {
    padding: 7px;
    font-size: 1em;
    border: none !important;
    display: visible;
	}
span.seemore-desktop {
	display:none;
	}
.help_block_example {
    margin-left: 1em;
     margin-right:3em;
    margin-top:0.5em;
    margin-bottom:0.5em;
    padding-right:1em;
	}
}

@media only screen and (max-width:768px){
#help-desktop{
	display:none;
	}
#help-mobile {
	display:inline-block;
	}
.help_block_example {
    margin-left: 1em;
     margin-right:1em;
    margin-top:0.5em;
    margin-bottom:0.5em;
    padding-right:1em;
	}

}
/*Mobile phones*/
@media screen and (max-width: 480px) {
#help-desktop{
	display:none;
	}
#help-mobile {
	display:inline-block;
	}
img.boxed-style {
	display:none;
	}
	
img.boxed-style-dt {
	display:none;
	}
img.boxed-style-m {
	display:none;
	}

img.boxed-style-compounds {
	display:none;
	}
img.boxed-style-navbar {
	display:none;
	}
img.boxed-style-tools-menu {
	display:none;
	}
span.seemore-desktop {
	display:none;
	}
.help_block_example {
	font-family: Roboto, sans-serif;
    font-size: 0.875rem;
    color:#515151;
    margin-left: 1em;
    margin-right:1em;
    line-height:170%;
    margin-top:0.5em;
    margin-bottom:0.5em;
    padding-right:1em;
	}
.help-block-example-hw {
	font-family:Amiri; 
	font-size:1.125rem;
	}
#main-box > div:nth-child(4){
	padding-left:1em;
	padding-right:2em;
	}
#entry_area {
	display: none;
	}
td{
	padding-left:0em;
	padding-right:0em;
	text-align:justify;
	}
td:first-child {
	width:30% !important;
	}
}
@media only screen and (max-width:1112px){
span.seemore-desktop {
	display:none;
	}