@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(opensans.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
body { background-color: #e9ebee; font-family: 'Helvetica'; font-size: 1.25em; padding-right: 1%; padding-left: 0%;
    margin: 0 5px 5px 5px; padding-top: 74px; background-image: url('/img/bg.png'); background-repeat: repeat;
}
table { padding: 0; border-spacing: 0; }
a { text-decoration: none; color: #167ac6; }
a:hover { text-decoration: underline }
a[loading="1"] { color: #aaa !important; text-decoration: none }
button { font-size: 110%; border-radius: 5px; border: 0; background-color: #77aa77; padding: 5px 10px; color: #fff; cursor: pointer}
input[type="text"], input[type="password"], select { border: 1px solid #ccc; border-radius: 4px; background-color: #fff; padding: 6px 4px; font-size: 0.9rem; margin: 0; }
div,input,select,button,td { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
table.icheckbox { }
div.icheckbox { width: 32px; height: 32px; border: 2px solid #aaa; padding: 2px; cursor: pointer; }
div.icheckbox img { width: 100%; }
table.icheckbox td:first-child { padding: 0 10px 0 10px; }
center { margin: 0; }
.advertBig { width: 321px; height: 600px; background-color: #ccc; } 
.advertThin { width: 100px; height: 600px; background-color: #ccc; } 
.advertDyna { height: 100px; background-color: #ccc; } 
.clear { clear: right; float: none; }
.fieldBlinkHl { background-color: #f4343b !important; color: #ffffff !important; }
[cursor="pointer"] { cursor: pointer }

.loadMoreArea {text-align: center;}
.loadMoreArea a { font-size: 110%; border-radius: 3px; border: 0; background-color: #77aa77; padding: 5px 10px; color: #fff; }

.topPanelArea { margin-top: 0px; position: fixed; left: 0; top: 0; background-color: #e9ebee; padding: 0; border-radius: 5px;
    box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2),0 0 0 1px rgba(0,0,0,0.08);
}
.topPanel { background-color: #fff; border: 1px solid #bbb; border-radius: 5px; padding-top: 4px; padding-bottom: 0px}
.topPanel table td {vertical-align: middle; }
.topPanel [eclass="nav"] { margin: 0px 10px 0 10px; height: 48px; cursor: pointer; }
.topPanel [rclass="arrow"] { margin-left: 0; margin-right: 0; }
.topPanel [eclass="filter"] { cursor: pointer; font-weight: bold; color: #777; }
.topPanel [eclass="filter"][hl="1"] { color: #16a816; }
.topPanel [eclass="subscribe"] { cursor: pointer; padding-top: 0 }
.topPanel [eclass="subscribe"][hl="1"] { color: #16a816; }
.topPanel [eclass="subscribe"] button { margin-left: 2px; background-color: #556080/*0dc33c*/; color: #fff; padding: 4px 8px 4px 8px}
.topPanel [showsearch="1"] { display: none; }
.topPanel [showsearch="1"] input { width: 100%; font-size: 120%; min-width: 100px }
.topPanelButtonPassive { opacity: 0.2 !important; cursor: auto; }
.topPanelFilterArea { border-top: 1px solid #ccc; padding: 15px 0 15px 0; margin: 5px 10px 10px 10px }
.topPanelFilterArea>table { margin-top: 15px; }
.topPanelFilterArea>table:first-child { margin-top: 0;}
.topPanelFilterArea [eclass="close"] { text-align: right; vertical-align: top; }
.topPanelFilterArea [eclass="close"] img { height: 18px !important; opacity: 0.3; cursor: pointer; margin-right: 10px }
.topPanelFilterEmoArea { border-bottom: 2px solid #ddd; padding: 5px 0 10px 0; margin: 5px 0 10px 0; } 
.topPanelFilterEmo { display: inline-block; border: 1px solid #ccc; border-radius: 5px; padding: 5px 5px 2px 5px; margin: 10px 15px 0 0;
    background-color: #eee; font-size: 80%; vertical-align: top; cursor: pointer; }
.topPanelFilterEmo[hl="1"] { background-color: #aaffaa; }
.topPanelFilterEmo img { height: 24px; margin-right: 5px; margin-bottom: -2px}

.loaderImgArea { }
.loaderImage { width: 32px !important; height: 32px !important}

.searchResultTitle { text-align:center; margin: 5px 0 10px 0}

.mainContainer { margin: 0; width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto;}
.mainContainer tr:first-child { vertical-align: top; }
.mainContainerCenter { width: 100%; max-width: 1050px;}
.mainContainerRight { padding: 5px 0 0 20px; }
.advertRightWide { width: 330px; position: sticky; top: 10px; position: -webkit-sticky; height: 900px;}
.advertRightWideFlow {width: 321px; height: 610px;  }
.advertRightThin { height: 610px; background-color: #fff; width: 120px; display: none; }
.advertFeed { height: 100px; background-color: #ddd; }
.gHorizontal {background-color: yellow; display: none; height: 100px;}
.feedAdvertHorizontal { border: 1px solid #ddd; margin: 10px 0/*10px -6px 10px -4px*/; padding: 0 0 5px 0; max-width: 1250px; }
.feedAdvertHorizontal div:first-child { text-align: center; border-bottom: 1px solid #ddd; padding: 3px; color: #ccc; margin-bottom: 5px; }
.feedAdvertHorizontal div:not(:first-child) { height: 600px; }

.feed { width: 100%; min-width: 340px }
.feedElement { border: 1px solid #bbb; border-radius: 5px; padding: 8px 10px 5px 10px; margin-bottom: 20px; background-color: #fff;
    color: #555; position: relative; max-width: 1050px;
}
.feedElement[id="editorArea"] { position: static; }
.feedFocus { /*border: 2px solid #bbb; padding: 7px 9px 4px 9px*/} 
/*.feedContent img { max-width: 100%; min-width: 300px; border: 1px solid #ccc; margin: 5px 0 5px 0; }*/
.feedImageArea { padding: 0 0 5px 0} 
.feedImage { max-width: 100%; min-width: 300px; border: 1px solid #ccc; margin: 0; }
.feedImageDescription { font-size: 90%; text-align: center; color: #777; }
.feedVideoDescription { font-size: 90%; text-align: center; color: #777; }
.feedElement h1 { font-size: 150%; padding: 3px 30px 3px 0; margin: 0px 0 10px 0; border-bottom: 1px solid #eee; line-height: 120%;
    border-top: 1px solid #eee;  position: relative;
}
.feedElement h1[public="0"] a { color: #b0b02c}
.feedElement h2 { font-size: 120%; padding: 0; margin: 20px 0 0px 0; }
.feedElementEnd { height: 1px; }
.feedText { margin: 10px 0 10px 0}
.feedTextShowFull { margin: 15px 0 5px 0; cursor: pointer; text-align: center; background-color: #eee; padding: 0.5em;
    border-radius: 5px; font-size: 1rem;
} 
.feedHeader { border-bottom: 1px solid #eee; margin-bottom: 5px; text-align: right; padding-right: 3px;}
.iconMore { opacity: 0.5; width: auto !important; height: 18px !important; cursor: pointer; }
.iconMore[rclass="title"] {position: absolute; right: 6px; top: 8px; }
.feedBottom { margin-top: 5px; border-top: 1px solid #eee; padding-top: 10px; margin-right: 3px; } 
.showFullInfo { font-size: 80%; color: #888; text-decoration: none; }
.feedInfoShort img[rclass="more"] { width: 18px !important; margin: 5px 0 0 2px; opacity: 0.4; cursor: pointer; }
.feedInfoFull { padding: 1px; }
.feedMarks>div { display: inline-block; background-color: #fafafa; padding: 3px 7px; margin-right: 15px; margin-bottom: 18px;
    border-radius: 5px; border: 1px solid #ccc; position: relative; font-size: 80%; } 
.feedMarks a { color: #167ac6b3; }
/*.feedMarks img { yposition: absolute; left: -8px; top: -8px; width: 18px !important; display: none; }
.feedMarks img[show="1"] { display: block }*/
.feedMarks [eclass="counter"] { position: absolute; right: -6px; bottom: -14px; display: none;
    font-size: 75%; color: #999; background-color: #fff; border: 1px solid #ccc; font-weight: bold; padding: 1px 2px 0 2px; border-radius: 3px; }
.feedMarks [eclass="counter"][show="1"] { display: block }
.feedSource { margin: 3px 0 3px 0; font-size: 80%; }
.feedCategories { margin-top: 5px; font-size: 80%; color: #aaa; padding-left: 3px; }
.feedCategories div:not(:first-child) { margin-top: 5px; }
.feedInfo { text-align: right; vertical-align: top; padding-top: 0; font-size: 80%; white-space: nowrap; }
.feedInfo div { color: #888; margin-bottom: 3px; }
.feedInfo a { color: #000; font-weight: bold; } 
.feedHeaderSep {clear: left; float: none} 
.contentImageArea img { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
.contentImageDescription, .contentVideoDescription { text-align: center; font-size: 80%; color: #999; }
.contentText { margin: 5px 0 10px 0}
.feedQuotes { background-color: #f1f1f1; padding: 20px; margin: 0px 0; border-radius: 10px; }
.feedQuotesAuthor { text-align: right; font-style: italic; margin: 20px 0 -10px 0; }

.feedOptionsPanel { border: 2px solid #ccc; padding: 10px; background-color: #fff; position: absolute; right: 10px; display: none;
    border-radius: 5px; font-size: 100%; text-align: right; z-index: 10;
}
.feedOptionsPanel a[public="1"] { color: green }
.feedOptionsPanel a[public="0"] { color: #b0b02c }
.feedOptionsPanel a[confirm="1"] { color: red; }
.feedOptionsPanel a[used="1"] { color: #aaa; }
.feedOptionsPanel button { font-size: 80%; margin: 5px 0 5px 5px;}
.feedOptionsPanel div[rclass="field"] { margin-top: 10px; }
.feedOptionsPanel div[rclass="field"]:first-child { margin-top: 0 }
.feedOptionsAbuseArea { max-width: 350px }
.feedOptionsPad { background-color: #eee; border-radius: 5px; padding: 8px; margin-top: 5px; }

.feedRating { color: #777; white-space: nowrap; width: 70%}
.feedRating table { display: inline-block; margin-right: 10px; font-size: 130% }
.feedRating table td { vertical-align: middle; }
.feedRating table td:first-child { padding-right: 10px }
.feedRating img { width: 40px !important; vertical-align: middle; cursor: pointer; }
.feedRating img[state="disabled"] { opacity: 0.3}
.feedTags { text-align: right; vertical-align: middle }
.feedTags div { display: inline-block; margin-left: 10px; font-size: 80%; white-space: nowrap}
.feedTags a { color: #888 }

.recommendArea { text-align: justify; vertical-align: top; margin: 0 -5px; padding: 0 0 10px 0; }
.recommendAreaVertical { text-align: center; vertical-align: top; padding: 0 0 10px 0; }
.recommendItem { display: inline-block; float: left; width: 250px; margin: 10px 10px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     border-radius: 5px; }
.recommendItem div { text-align: center !important; font-size: 80%; padding: 5px 5px 10px 5px; }
.recommendItem img { width: 100%; max-height: 150px; height: auto; border: 0px solid #aaa; border-radius: 5px 5px 0 0}
.recommendItemVertical { margin: 20px 10px;  border-top: 1px solid #eee; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     border-radius: 8px; background-color: #fff; }
.recommendItemVertical div[pos="top"] { text-align: center; font-size: 100%; padding: 10px 5px 5px 5px; border-radius: 8px 8px 0px 0px }
.recommendItemVertical div[pos="bottom"] { text-align: center; font-size: 100%; padding: 5px 5px 10px 5px; border-radius: 0 0 8px 8px }
.recommendItemVertical a { color: #333; }
.recommendItemVertical div[pos="bottom"] a { font-size: 75%; }
.recommendItemVertical img { width: 100%; max-height: 150px; margin: 0 -2px 0 -2px; height: auto; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; }
.recommendAreaBig { text-align: center; padding: 0 0 10px 0; }
.recommendItemBig { vertical-align: top; display: inline-block; margin: 20px 10px;  width:400px; border-top: 1px solid #eee; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     border-radius: 8px; background-color: #fff; }
.recommendItemBig div[pos="top"] { text-align: center; font-size: 100%; font-weight: bold; padding: 10px 5px 5px 5px; border-radius: 8px 8px 0px 0px }
.recommendItemBig div[pos="bottom"] { text-align: center; font-size: 100%; padding: 5px 5px 10px 5px; border-radius: 0 0 8px 8px }
.recommendItemBig a { color: #333; }
.recommendItemBig div[pos="bottom"] a { font-size: 80%; }
.recommendItemBig img { width: 100%; /*max-height: 150px; */margin: 0 -2px 0 -2px; height: auto; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; }

.feedComments { text-align: left; margin: 5px -10px 0px -10px; background-color: #e9ebee; padding: 5px; }
.feedComments table[type="editor"] { text-align: left; background-color: #f6f7f9; margin-bottom: 10px; }
.feedComments table[type="editor"] div[type="editor"] { padding-right: 12px; }
.feedComments table[type="editor"] table { margin: 10px 0 10px 10px }
.feedComments table[type="editor"] td[type="profile"] table { margin: 0 }
.feedComments table[type="editor"] td[type="profile"] span { font-weight: bold }
.feedComments table[type="editor"] table td { vertical-align: middle }
.feedComments table[type="editor"] [eclass="hint"] { color: #777; font-size: 80%}
.feedComments textarea { border: 1px solid #ddd; padding: 5px; width: 100%; background-color: #fff; font-size: 100%; color: #333 }
.feedComments div[type="cbase"] { margin: 5px 0 10px 30px; }
.feedComments div[type="cbase"][level="0"] { margin-left: 5px; }
.feedComments div[type="ctext"] { background-color: #fff; display: inline-block; border-radius: 10px; padding: 7px; color: #666; min-width: 50%; font-size: 80%;}
.feedComments div[type="crate"] {font-size: 70%; color: #777; margin: 5px 0 0 5px; }
.feedComments div[type="crate"] a { color: #4b95ce;}
.feedComments div[type="crate"] a[confirm="1"] { color: red; font-weight: bold }
.feedComments div[type="crate"] td[type="counter"] { padding: 0 0 0 5px; vertical-align: middle;  } 
.feedComments div[type="crate"] td { vertical-align: middle; text-align: center; } 
.feedComments div[type="crate"] img { width: 16px !important; opacity: 0.3; cursor: pointer; margin-top: 3px; }
.feedComments div[type="crate"] img[hl="1"] { opacity: 1; }

.feedSocialsArea { border-top: 1px solid #eee; padding-top: 10px; margin-top: 5px; margin-bottom:0px; text-align: center; }
.feedSocials { margin: 0 auto 0 auto; opacity: 0.6 }
.feedSocials:hover { opacity: 1}
.feedSocials a { display: none; text-decoration: none; color: #333; }
.feedSocials td { vertical-align: middle; text-align: center;}
.feedSocials td:first-child { font-size: 1rem; padding-right: 10px; font-weight: bold;}
.feedSocials td:nth-child(2) { width: 20px; padding-right: 4px; }
.feedSocials td:nth-child(4) { width: 20px; padding-left: 4px; }
.feedSocialIcons img { width: 48px !important; min-width: 16px; border: 0; margin: 0 2px 0 2px; cursor: pointer; } 
.feedSocialNav img { width: auto !important; height: 48px !important; min-width: 16px; border: 0; }
.feedSocialsFlowArea { position: fixed; left: 0; bottom: 0; background-color: #e9ebee; width: 100%; padding: 0px 0px 3px 0 }
.feedSocialsFlow { background-color: #fff; border: 1px solid #bbb; border-radius: 5px; padding: 6px 6px 0px 6px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.content-text-hl-1 { font-weight: bold; font-size: 110%; text-align: center; padding: 0 10px 0 10px; margin-top: 10px; line-height: 120%;}

.advertMobile { display: none; }
.advertDesktop { display: block; }

/*@media (max-width: 1000px){
    .advertRightWide {display: none}
    .advertRightThin, .advertFeedWide {display: block}
    .feedSocialIcons img { width: 40px !important; }
    .feedSocialNav img { height: 40px !important; }
}
@media (max-width: 750px) {
    .advertRightThin {display: none; } 
    .mainContainerRight { padding: 0 }
    body { padding-right: 0; }
}*/
@media /*(min-resolution: 1.5dppx), */(max-width: 800px){
    body { font-size: 0.9em; padding-right: 0; margin: 0; padding-top: 48px}
    .mainContainerRight, .advertRightThin, .advertRightWide {display: none}
    .advertFeedWide {display: block}
    .advertMobile { display: block; }
    .advertDesktop { display: none; }
    .feedElement { padding-left: 4px; padding-right: 4px; border-radius: 0; border-left: 0; border-right: 0;}
    .feedText { margin-top: 5px; padding-left: 3px; padding-right: 3px; font-size: 125%; }
    .feedSocialIcons img, .feedRating img { width: 32px !important; }
    .feedSocialNav img { height: 32px !important; }
    .feedSocials td:first-child { display: none; }
    .topPanel { border: 0; padding-top: 5px; padding-bottom: 0}
    .feedSocialsFlow { border: 0; padding-top: 5px; }
    .feedAdvertHorizontal { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: 10px -4px 5px -4px; border-left: 0; border-right: 0;}
    .feedComments { margin: 5px -5px 0 -5px } 
    .topPanel img { height: 24px !important; }
    .topPanel [eclass="nav"] { margin-left: 2px; margin-right: 2px; }
    .topPanel button { font-size: 100%; margin-top: -1px }
    .topPanel input[type="text"] { font-size: 80% !important; padding: 2px 2px 2px 2px; margin-top: -1px; }
    div.icheckbox { width: 24px; height: 24px; padding: 0px; }
    div.icheckbox img { width: 22px !important; height: 22px !important; }
    table.icheckbox td:first-child { padding: 0 5px 0 5px; }
    .feedMarks>div { margin-right: 6px; margin-bottom: 15px; font-size: 70% }
    /*.feedMarks img { left: -5px; top: -8px; width: 14px !important; }*/
    .feedMarks [eclass="counter"] { right: -4px; bottom: -9px; }
    .feedInfoShort img[rclass="more"] { margin-top: 2px;}
    .feedComments div[type="cbase"] { margin: 5px 0 10px 20px; }
    .feedComments div[type="ctext"] { font-size: 100%; }
    .feedCategories { margin-top: 0px; }
    .feedRating table { margin-right: 0px; }
    .feedRating table td:first-child { padding-right: 5px; }
    .recommendArea { margin: 0 0px; padding: 0 0 5px 0; }
    .recommendItem { 2px 2px }
    .recommendItem div { font-size: 100% }
    .dialogArea { font-size: 1rem }
    .dialogArea [eclass="closeIcon"] { margin-top: 5px !important }
    .topPanelFilterArea [eclass="close"] img { height: 14px !important; padding-right: 0;}
    .topPanelFilterEmo { padding: 3px 3px 2px 3px; margin-right: 5px;}
    .topPanelFilterEmo img { height: 18px !important; }
    .iconMore[rclass="title"] { top: 5px;}
    .emoListWorkArea { padding: 5px !important}
    .emoListElementArea td { padding: 0; }
    .emoListElementArea { width: 105px !important; padding: 0; margin: 3px !important; font-size: 75%;}
    .emoListElementArea img { height: 20px; margin-right: 0px; }
    .recommendItemBig div[pos="bottom"] a { font-size: 90%; }
    .content-text-hl-1 { font-size: 100%;  }
}

#messageDialog { text-align: center; padding: 3px; padding-bottom: 10px; width: 400px;}
#messageDialog [eclass="content"] { margin: 10px; text-align: left; }
#modalBg { opacity: 0.5; background-color: #000000; left: 0; top: 0; position: fixed; width: 100%; height: 100%; z-index: 10; display: none; }
.dialogArea [eclass="title"] img {height: 16px; background-color: none; border-radius: 1px; padding: 2px; margin-bottom: -3px; opacity: 0.5; cursor: pointer; }
.dialogArea { background-color: #fefefe; border-radius: 4px; min-width: 340px; z-index: 100; position: fixed; left: 50%; top: 50%;
    transform: translate(-50%, -50%); display: none; box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2),0 0 0 1px rgba(0,0,0,0.08); } 
.dialogArea [eclass="title"] { background-color: #77aa77; border: 1px solid #0157E4; border-radius: 2px; color: #ffffff;
    padding: 5px 7px 5px 7px; text-align: center; margin: 2px; }
.dialogArea [eclass="closeArea"] { text-align: right; vertical-align: top; padding: 4px 8px 0 0; margin-bottom: -10px; }
.dialogArea [eclass="closeIcon"] { height: 14px !important; opacity: 0.3; cursor: pointer; margin: 0 }
.dialogArea p {margin: 5px 10px 0px 10px; font-size: 100%; }
.dialogArea p:first-child { margin-top: 15px}

.dialogArea [eclass="title"] a {font-size: 80%; color: #fff}
.dialogArea [eclass="content"] { text-align: center;}
.dialogArea [eclass="errors"], .dialogArea [eclass="messages"] { border: 1px solid #ff3333; border-radius: 2px; padding: 5px; margin: 2px; color: #ffffff; display: none; text-align: center;}
.dialogArea [eclass="messages"] { background-color: #FF6600; max-width: 400px; }
.dialogArea [eclass="errors"] { background-color: #ee6666; }
.dialogArea [eclass="errors"][blink="1"] { background-color: #fd1818; }
.dialogArea form { margin: 10px auto 10px auto; display: inline-block; font-size: 1rem }
.dialogArea input[type="text"], .dialogArea input[type="password"] { text-align: center; }
.dialogArea form { width:90%; }
.dialogArea tr { vertical-align: middle;}
.dialogArea table[eclass="form"]>tbody>tr>td { padding-bottom: 10px !important; }
div[eclass="field"] { min-width: 250px; margin: 5px 0 15px 0; }
div[eclass="field-reminder"] { text-align: right; font-size: 90%; margin: -5px 5px 10px 0 }
div[eclass="field-hint"] { font-size: 80%; }
[eclass="field-text"] { }
[eclass="field-title"]  { font-size: 90%; color: #777; text-align: right; padding-right: 10px; }
[eclass="field-value"]  { }

#dialogAuth [eclass="socials"] { text-align: center; margin-top: 10px; }
#dialogAuth [eclass="socials"] img { margin: 2px 3px 2px 2px; width: 48px; cursor: pointer; }
#dialogAuth [eclass="socials"] img[sel="1"] { background-color: #77aa77; }
form[eclass="auth"] { max-width: 300px }
#dialogAuth button { width: 100%; font-size: 1.25rem; }
#dialogAuth div[eclass="nav-center"] { text-align: center; margin: 0px 0px 0 0; font-size: 90%; }
#dialogAuth input { width: 95% !important;}

form.fieldsAlignLeft input {text-align: left !important}
form.fieldsAlignLeft {text-align: left}
#dialogProfile .loaderImgArea { padding-left: 10px; padding-bottom: 0 !important; }

#dialogSubscribe { padding-bottom: 10px }
#dialogSubscribe input { font-size: 120%; width: 100%; }
#dialogSubscribe [eclass="socials"] { margin-top: 0px; text-align: center; }
#dialogSubscribe [eclass="social"] { display: inline-block; margin: 0 5px 5px 0 }
#dialogSubscribe [eclass="social"] img { width: 48px !important; }

.emoListWorkArea {
    display: none; position: absolute; left: 0; top: 0; background-color: #fff;
    box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2),0 0 0 1px rgba(0,0,0,0.08);
    padding: 5px 5px; font-size: 100%; z-index: 100;
}
.emoListElementArea:hover { color: green }
.emoListElementArea { cursor: pointer; width: 170px; display: inline-block; border-radius: 5px; background-color: #eee; padding: 5px;
    vertical-align: middle; margin: 5px; }
.emoListElementArea img { height: 24px; margin-right: 5px; }
.emoListElementArea[hl="1"] { background-color: #aaffaa !important; }