@import url("reset.css");
@import url("style-common.css");

@font-face {
    font-family: 'NewCicleFina';
    src:  url('NewCicleFina-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    src:  url('Montserrat-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'NotoColorEmoji';
    src:  url('NotoColorEmoji.ttf') format('truetype');
}

@font-face {
    font-family: 'EmojiOneColor';
    src:  url('EmojiOneColor.otf') format('opentype');
}
/*@font-face {
    font-family: 'Montserrat-bold';
    src:  url('Montserrat-Bold.ttf') format('truetype');
}
*/

/*  Main site layout  */
BODY, HTML, TABLE, TD, DIV {
  /*font-family: "Montserrat",sans-serif;*/
  font-size: 13pt;
  /*background-color: #404040;*/
  /*color:#CCC;*/
  margin:0;
  padding:0;
}

BODY {
  font-family: "Montserrat",sans-serif;
  font-size: 13pt;
  color:#595959;
  width:100%;
  background: #111111 url(../images/beet_dark_background.png);
}

/*#background_container {
  position:relative;
}

#bodyouter {
  background: no-repeat fixed 50% 50% / cover;
  max-height:1500px;
  min-width:100%;
  position:absolute;
}

#bodyinner {
  background: no-repeat fixed 50% 50% / cover;
  max-height:1500px;
  min-width:100%;
  position:absolute;
}*/

/*a:active {
  color:yellow;
}*/

h1, h2, h3 {
  font-family: "NewCicleFina",sans-serif;
  color:#686968;
  font-weight: bold;
  line-height: 30px;
}

h1 a, h2 a, h3 a {
  text-decoration: none;
  opacity:0.8;
}

h1 a:hover, h2 a:hover, h3 a:hover {
  opacity:1;
  background-color:silver;
}

h1, h1 a {
  font-size: 18pt;
}

h2, h2 a {
  font-size: 14pt;
}

h3, h3 a {
  font-size: 12pt;
}

p {
  font-size: 12pt;
}

a {
  font-family: "NewCicleFina",sans-serif;
  font-weight: bold;
  color:maroon;
  text-decoration:none;
  margin:0;
  font-size: 13pt;
  border-radius:6px;
  padding:4px 0 2px;
}

a:hover {
  background : #e1e1e1
}

strong, b {
  color:#111111;
}

#header a:hover, #footer a:hover {
  background-color:silver;  
}

.bold, em {
  color:#1a1a1a;
  font-weight: bold;
}

#content {
  position:relative;
  max-width:800px;
  width:100%;
  min-height:900px;
  margin:45px auto 1px;
  padding: 20px 10px;
  background-color:#F9F9F9;  
  font-size: 13pt;
  z-index: 1;
  box-shadow: 0 1px 5px #144914;
}

/* #content #sidebar .secondary {
 float:left;
}

#content #sidebar .sidebar_box {
  border:1px solid black;
  border-radius: 10px;
  margin:5px;
} */

#header_container {
  width: 100%;
  z-index: 5;
  position:fixed;
  top: 0;
  background:white;
  box-shadow: 0 1px 2px #144914;
}

#header_image {
  max-height: 45px;
  padding: 3px;
}

#header {
  width:98%;
  max-width: 816px;
  height: 45px;
  margin: 0 auto;
  padding-bottom: 10px;  
}
#header a {
  background-color:inherit;
}

.slogan {
  font-weight:bold;
  color:gray;
  /*text-shadow: 1px 1px 4px black;*/
}


.header_row { 
  width:98%;
}

#header_menu {  
  width:98%;  
}

#header_menu a.selected_menu {
  background-color: silver;
}

#header .header_subscribe {
  background-color: #f0f0f0;
  box-shadow: 1px 1px 1px black;
  border-radius: 4px;
  border:1px solid maroon;
  padding:5px 0 3px 10px;
  margin-bottom: 5px;
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
}



@keyframes fadeIn { 
    0% { 
        opacity: 0; 
  /* Firefox */
  -moz-transform: rotate(-2deg);
  /* WebKit */
  -webkit-transform: scale(1.2) rotate(-2deg);
  /* Opera */
  -o-transform: rotate(-2deg);
  /* Standard */
  transform: rotate(-2deg);        
    } 
    50% { 
        opacity: 1; 
  /* Firefox */
  -moz-transform: rotate(2deg);
  /* WebKit */
  -webkit-transform: scale(1.2) rotate(2deg);
  /* Opera */
  -o-transform: rotate(2deg);
  /* Standard */
  transform: rotate(2deg);        
     } 
}

#header_menu a {
  font-size: 14pt;
  font-weight: bold;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  padding:4px 6px 4px 6px;  
}

/* set the background colour */
.dropdown,
.dropdown ul {
  background : white;
}

/* pad items, set their text colour, and fade their background colour */
.dropdown a,
.dropdown span {
  padding    : 0.25em 0.5em;
    transition : background 0.2s;
}

/* set the background colour of active items */
.dropdown li:hover > a,
.dropdown li:hover > span,
.dropdown li.dropdownOpen > a,
.dropdown li.dropdownOpen > span {
  background : rgb(160,208,112);
}  

/*
#header_menu ul#menu_inner {
  list-style-type:none;
}

#header_menu ul#menu_inner li  {
  float:left;  
}

#header_menu ul#menu_inner li ul li a {
  font-size: 14pt;
  font-weight: bold;
  border-radius: 3px;  
  background-color: silver;
}

#header_menu ul#menu_inner li ul li a:hover {
  background-color: gray;
}

#header_menu ul#menu_inner li ul {
  display: none;
  list-style-type:none;
  position:absolute;
}

#header_menu ul#menu_inner li ul:hover {
  display: block;
  list-style-type:none;
  position:absolute;
}

#header_menu ul#menu_inner li ul li {
  display: block;
  clear:both;
  height:28px;
}

#header_menu ul#menu_inner li .hidden {
  transition: height 0.3s ease-in;
}

#header_menu ul#menu_inner li .hidden li {
  transition: background-color 0.3s ease;
}

#header_menu ul#menu_inner li a:hover + .hidden, #header_menu ul#menu_inner .hidden:hover {
    display: block;
}
*/
.search_results_item {
  position:relative;
  float:left;
  margin:10px;
}

.search_results_item .search_rank {
  position:absolute;
  right:3px;
  top:3px;
  width:15px;
  padding-left:6px;
  border-radius:50%;
  background:silver;
}

#footer {
  line-height:18px;
  font-size:10pt;
  z-index:0;
  width: 100%;
  min-height:400px;
  background: #F9F9F9;
}


#footer a {
  font-size:10pt;
  font-weight:bold;
}

#footer a.selected_menu {
  background-color: silver;
}

#footer .copyright {
  color: gray;
  border-top: 1px solid rgba(59, 60, 62, 0.8);
  font-size:9pt; 
  width:100%;
}

#footer .copyright a {
  font-size:9pt;
}

#footer h3 {
    border: medium none;
    font-size: 13px;
    font-weight: normal;
    line-height: normal;
    text-transform: uppercase;
    padding: 0px;
    /*margin-bottom: 20px;*/
}



.fancy_box {
  background: white;
  padding:5px;
  border-radius:2px;
  font-weight:normal;
}



.fancy_link {
  text-decoration: none;
}

.fancy_link:hover {
  opacity: 0.8;
  text-shadow: 1px 1px 4px black;
}

.fancy_box_header {
  font-size: 14pt;
  /* font-weight: bold; */
  background:#EFEFF0 url(../images/fancy_box_header_bg.png);
  height:29px;
  padding:11px 5px 2px 5px;
  border-radius: 8px 8px 0 0;
  border-right: 1px solid #CFCAFF;
  border-left: 1px solid #CFCAFF;
  text-align: center;
}

.fancy_box_header a {
  /*color:#333;*/
  text-decoration: none;
}

.fancy_box_content {
  background:#F7F7FE url(../images/fancy_box_content_bg.png) no-repeat;
  position: relative;
  color:black;
  padding:10px;
  height: 220px;
  /* max-height: 220px; */
  border-radius: 0 0 8px 8px;
  border-bottom: 1px solid #CFCAFF;
  border-right: 1px solid #CFCAFF;
  border-left: 1px solid #CFCAFF;
}

.fancy_button {
  display: inline-block;
  position: relative;
  margin:0 auto 0 auto;
  bottom:5px;
  padding: 2px 5px 2px 5px;
  background: #B4B5FD;
  line-height: 16px;
  border-radius: 4px;
  border-bottom: 1px solid #CFCAFF;
  border-right: 1px solid #CFCAFF;
  border-left: 1px solid #CFCAFF;
}

.fancy_button:hover {
  background: #CFCAFF;
}

a.fancy_button , a.fancy_button:visited {
  color:black;
  font-size: 10pt;
  text-decoration: none;
}

.transBlue50 {
  background: white url(../images/transpBlue50.png);
}

.content_item .content_item_top {
  /* max-height: 50px; */
  /* padding:3px; */
  /* margin:0 3px; */
  /* text-align: right; */
  font-size: 12px;
}

.content_item .content_image img {
  max-width:740px;
  width: 100%;
} 

.item_content, .item_content div, .item_content p {
  padding:5px;
  font-size: 14pt;
}

.item_content p {
  padding:5px;
  line-height: 145% !important;
}

.item_content p img {
  max-width: 100%;
}

.featured_suggestions_content .content_item_title{
  display:inline-block;
  max-height: 60px;
  min-height: 60px;
  height: 100%;
  text-align: left;
  font-size: 10px;
  float: left;
}

.featured_suggestions_content .content_item_title a {
  font-size: 12pt;
  font-weight: bold;
}

.featured_suggestions_content .content_url {
  font-size: 9pt;
}


.featured_suggestions_content  {
  float:left;
  max-height:185px;
  min-height:185px;
  height:100%;
  max-width:150px;
  margin: 1px;
  padding: 4px;
  border: 1px solid silver;
  border-radius: 2px;
  overflow: hidden;
  background-color: white;
  box-shadow: 1px 1px 1px silver; 
}


/*#footer .featured_suggestions_content img, .top_pages img {
  max-width:150px;
}
*/
.featured_suggestions_content img {
  /* position: absolute; */
  top: 0;
  left: 0;
  min-width: 144px;
  min-height: 89px;  
  max-width: 144px;
  max-height: 89px;

  cursor: pointer;
  background: no-repeat 50% 50%;
  background-size: auto, cover;
  z-index: 9998;  
  clear:both;
}

/* .featured_suggestions .featured_suggestions_content img {
  max-height: 130px;
  max-width: none;
}

.featured_suggestions .featured_suggestions_content .content_item .content_image img {
    width: none;
} */

.featured_suggestions_content h1 {
  line-height: 13px;
}

.featured_suggestions_content a.content_link {
  padding: 0;
  margin: 0;
}

.featured_suggestions_content .content_video .play {
  display:none !important;
}

#content #slide_show_container {  
  /* max-height:500px; */
  /* min-height:900px; */
  /* height:100%; */
  /* width:100%; */
  overflow: hidden;
}

#content #slide_show_container img {
    height: auto; 
    width: auto; 
    max-width: 780px; 
    max-height: 600px;
}  

#content #slide_show_container .glider-circle-icon {
  border: 1px solid silver;
}
/*#content #slide_show_container .glider-circle-icon:selected {
   background-color: green;
} */

/* #content #slide_show_container #jssor_1, #content #slide_show_container #jssor_1  { 
  min-width: 600px;
  min-height: 600px;
  width: 100%;
  height:100%;  
}
 */
/* #content #slide_show_container #jssor_1, #content #slide_show_container #jssor_1 a:hover {
  background-color: transparent;
  cursor: pointer;
} */

.listing {
  font-weight:bold;
  font-size:13px;
  max-width:640px;
  margin-bottom:30px;
}


.listing .listing_info {
  float:right;
  max-width:300px;
  width:99%;
}
.listing .listing_image {
  float:left;
  max-width:320px;
  width:99%;
}
.listing .listing_image img {
  max-width:320px;
  /*max-height:180px;*/
  width:99%;
}

.listing h1 {
  line-height:30px;
  font-size:16px;
  color: #4E85AB;
  /*margin:0 5px;*/
}

.listing .listing_row {
  position:relative;
  /*display:block;*/
  margin-top:10px;
  padding:2px 5px 2px 50px;
  /*border:1px dotted lime;*/
}

.listing .listing_row .listing_label {
  font-weight:normal;
  font-size:11px;
}

.listing .listing_row img {
  position:absolute;
  top:-5px;
  left:5px;
}

.youtube_thumbnail {
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 100%;  
  /* height: 100%; */
  cursor: pointer;
  background: no-repeat 50% 50%;
  background-size: auto, cover;
  z-index: 9998;  
  clear:both;
}


.video_container {
  position: relative;
  max-width:740px;
  max-height:420px;
  width: 100%;
  height: 100%;  

}

.video_container iframe, .video_container video {
  width: 100%;
  height: 100%;
}

.content_video {  
  width: 100%;
  height: 100%;
}

.video img,
.video iframe { display: block; }

.play {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: url('../images/play-button.png') no-repeat 50% 50%;
  background-size: auto, cover;
  z-index: 9999;
}

.play:hover { background-color: rgba(0,0,0,0.2) !important; }

#content .emoji_container {
  font-size: 11pt;  
  margin:5px;
  width:100%;
}

#content .emoji_container .emoji {
  font-size: 30pt;
  float: left;
  margin-right: 5px;
  /* font-family: "EmojiOneColor",sans-serif; */
  font-family: "NotoColorEmoji",sans-serif;
}

#content .emoji_container .traits {
  float:left;
  margin-left: 10px;
}

#content .emoji_container .trait {
  margin-bottom: 10px;
}

#content .emoji_container .color {
  float:left;
}

#content .emoji_container .astronomy {
  float:left;
}

#content .emoji_container .color_circle {
  width:12px;
  height:12px;
  border-radius: 6px;
  display:inline-block;
  margin-bottom: 0px;
  margin-left: 10px;
}

#content .emoji_container .astronomy .color_circle_title {
  padding-bottom:10px;
  display:inline-block;
}

#content .emoji_container .astronomy {
  height: 20px;
  /* border-radius: 5px; */
  /* border:1px dotted lime;  */
  display: inline-block;
  margin: 0px 10px ;
}

#content .emoji_container .astronomy .astronomy_object {
  font-size: 20pt;
  float:left;
}

#content .emoji_container .astronomy .astronomy_object_title {
  /*padding-top:10px;*/
  display:inline-block;
}

#content .emoji_container .emoji_title {
  float: left;
  margin:right:5px;
}

/* #content .emoji_container .emoji_title:after {
  clear:both;
} */

#content #recent_slides {
  width:100%;
  text-align: center;
  position:relative;
}
#content #recent_slides .recent_slide {
  zoom:40%;
  display:inline-block;
  padding:15px;
  margin:3px;
  border:1px solid silver;
  border-radius: 4px;
  text-align: left;
}

#content #recent_slides .recent_slide:hover {
  zoom:70%;
/*  position:absolute;
  top:-50px;
  background:white;*/
}

#content #recent_slides .emoji_container {
  width:none;
}

.flip_text {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
  display:inline-block;
}

#this_page_links {
  background: #d5d5d5;
  padding: 10px;
  margin: 5px;
}



/*  Site Widgets  */
label[aria-pressed=true] span {background-color:black;color:silver} //temp hack, remove after updating ui theme

#login_welcome {}

#login_dashboard_link {padding-right: 5px;}

#site-messages {max-width:820px; margin:0 auto 0 auto; padding:5px}

#recently_visited {display:inline}
#recently_visited span {padding-right:5px}

/*  Framework Widgets  */
#recently_visited {display:inline}
#recently_visited span {padding-right:5px;display:block}

.addform_row label {
    display:inline-block;
    width:150px;
}

.crud_form_field {
	min-height:30px;
  display:block;
}


.crud_form_field label {
	font-size:9pt;
	font-weight:bold;
	width:220px;
  margin-left: 5px;
  color:navy;
}

.crud_form_field:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#captcha_container  {
  width:350px;
}

#captcha_container img {
  margin-top: 15px;
  height:35px;
  float:right;
}

#captcha_result span {
  margin-left: 5px;
  padding-bottom: 5px;
}

/* these next few are fixes we need for the jquery ui css */
.ui-icon {
	display:inline-block !important; /* jquery ui icons force line breaks w/o this */  
}
input.ui-state-disabled[name=changetime],input.ui-state-disabled[name=addtime] {
  opacity:0.9;
}
.border-fix {
	margin:1px;
}

.option_buttons a {
  background-color:inherit;
  padding:0;
}



/* these next few are fixes we need for the jquery ui css */
.ui-icon {
	display:inline-block !important; /* jquery ui icons force line breaks w/o this */
}
.border-fix {
	margin:1px;
}

#sort_table td.ui-widget-content {
  padding:2px;

}

/* custom site definitions that grab this jquery ui themes * base colors and use them */
/*.ui_style label {
	font-weight:bold;
}*/

/*  Highlight button class to mimic ui_style buttons but highlighted */
.ui_style_bright, a.ui_style_bright {
	background-color: forestgreen;
	color:white;
	border: 1px solid lime;
	font-weight: bold;
	text-decoration: none;
	opacity:0.9;
	padding:0 5px 0 5px;
  border-radius: 6px 6px 6px 6px;
}

.ui_style_bright:hover {
	 opacity:1;
}

.ui_style a, a.ui_style {
	white-space:nowrap;
	font-size:10pt;
}

.ui-widget-content a {
    /* color: #333333; */
}



/* overrides for datatables */
/* make toolbars float right and left to not take up two lines*/
.data_table {
	font-size: 9pt;
	width:100%;
}

.data_table tr {
  background: url(../images/transpWhite50.png);
}

.dataTables_length   {float:left}
.dataTables_filter   {float:right}
.dataTables_info     {float:left}
.dataTables_paginate {float:right}
.DataTables_sort_wrapper {white-space:nowrap;cursor:pointer;}

/* Jquery timepicker addon to datepicker needs these to look right*/
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div .ui_tpicker_hour div { padding-right: 2px; }
.ui-timepicker-div .ui_tpicker_minute div { padding-right: 6px; }
.ui-timepicker-div .ui_tpicker_second div { padding-right: 6px; }
.ui-timepicker-div td { font-size: 90%; }

/*  fullcalendar prints day numbers in white, switch them to brown */
.fc-day-number {color:brown}

/*  ui-dialog boxes seem to be broken close icon and other s are aligned left */
.ui-dialog {font-size:11pt; border:1px solid silver}




/* style the .open_modal class that is used on links or elements that open a modal box on click  and the hidden content element for the model*/
.open_modal {cursor:pointer;}
.open_modal_content {display:none; }