/* FONTS */
@font-face {
   font-family: 'stay_classy_sldtregular';
   src:  url('fonts/stay_classy_sldt-webfont.woff2') format('woff2'),
         url('fonts/stay_classy_sldt-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'yellow_peasultra_light';
   src:  url('fonts/yellowpeas-ultralight-webfont.woff2') format('woff2'),
         url('fonts/yellowpeas-ultralight-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   }

@font-face {
   font-family: 'archiveregular';
   src:  url('fonts/archive-regular-webfont.woff2') format('woff2'),
         url('fonts/archive-regular-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}
@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  


html,
body {
  /*height: 100%;*/
}

#whole-container {
	/*height: 100%;*/
}

#main-container {
}

#logo {
   height: 135.5px;/* 215px; */
   width: 155px; /* 196px; */
   background-color: white;
   background-image: url("../img/Terpsichore.png");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: 50% 50%;
   margin-left: 20px;
}

#logo:before {
   content: " ";
   display: block;
   position: relative;
   float: left;
   margin-left: -20px;
   width: 20px;
   height: 135.5px;
   background-color: white;
}

#logo:after {
   content: " ";
   display: block;
   position: relative;
   /*left: 215px;*/
   /*top: 0;*/
   margin-left: 155px;
   width: 50px;
   height: 135.5px;
   background-color: white; /* For browsers that do not support gradients */
   background-image: linear-gradient(to right, white , #b2dfdb);
   float:left ;
}

#title {
   font-family: 'yellow_peasultra_light', serif;
   font-size: 72px;
   line-height: 1em;
}

#login-box {
   text-align: center;
   height: 110px;
   position: absolute;
   right: 20px;
   top: -112px; /* -125 (height) + 2 (borders) */
   z-index: 3;
   transition: top .35s ease-in-out;
}

#login-box form > * {
   margin-bottom: 3px;
}
#login-box input:not([type="submit"]) {
   width: 130px;
}

#login-box.pulled {
   top: -1px;
}

#login-pull {
	height: 15px;
	width: 15px;
	position: absolute;
	right: 5px;
	bottom: -15px;
	cursor: pointer;
	opacity: 1 !important;
}

#login-box-loggedIn {
   font-weight: 400;
}

#menu {
   width: 185px;
   min-width: 185px; 
}

.page {
   min-height: 400px;
}

#news:not(.trumbowyg-editor) {
	min-height: 100px;
}

.clickIcon {
   margin: 0 5px;
   padding: 0;
   background-color: transparent;
   border: 0;
   border-color: #007bff;
   /*font-size: 1.5rem;*/
   font-weight: 700;
   line-height: 1;
   color: #007bff;
   text-shadow: 0 1px 0 #fff;
   opacity: 1;
}

.clickIcon:hover {
   color: #003FAA;
   border-color: #003FAA;
}

#bottom-container {
   color: #004d40;
   border: solid 1px #004d40;
   background-color: #b2dfdb;
   box-shadow: 1px 1px 2px 3px #f5f5f5;
   opacity: 0.8;
}


/*.box-debug > div, .box-debug > div > div, .box-debug > div > div > div {*/
/*	border: solid 1px black;*/
/*}*/

/* usefull classes */
.canEdit {
   border: solid blue 1px;
}
.canEdit:hover {
	box-shadow: 0 0 8px blue;
}

.p-relative {
	position: relative;
}

.bottom-right{
  position: absolute;
  bottom: 0;
  right: 0;
}

.top-right{
  position: absolute;
  top: 1px;
  right: 1px;
}

/* reCAPTCHA box hidding */
.grecaptcha-badge { visibility: hidden; }


/* Bootstrap corrections */
.alert{
   margin-bottom: 0;
}

.list-group-item.active {
   background-color: #4db6ac; /* teal-lighten-2 */
   border-color:     #4db6ac;
}

.alert-sm {
   height: calc(1.5em + .5rem + 2px);
   padding-top: .25rem;
   padding-bottom: .25rem;
}


/* RESPONSIVE MANAGEMENT */

/* Large devices */
@media (max-width: 1199.98px) {
   #menu .list-group-item {
      padding: 3px;
   }
   #title {
      font-size: 48px;
   }
   #middle-main-container {
      max-width: 745px;
   }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
   #menu {
      width: 155px;
      min-width: 155px; 
   }
   #logo {
      height: 117.6px;
      width: 129.0px;
      margin-left: 26px;
   }
   #logo:after {
      height: 117.6px;
      margin-left: 117.6px;
      float:left ;
      width: 50px;
   }
   #logo:before {
      content: " ";
      display: block;
      position: relative;
      float:left ;
      margin-left: -26px;
      width: 26px; /* 155 - 129 */
      height: 117.6px;
      background-color: white;
   }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
   #title {
      padding-left: 0 !important;
   }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
   #main-container {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
   }
   #menu {
      width: 100%; 
   }
   #middle-main-container {
      padding-left: 0 !important;
      padding-top: 1rem;
   }
   #logo {
      height: 58.8px;
      width: 64.5px;
   }
   #logo:before {
      height: 58.8px;
   }
   #logo:after {
      height: 58.8px;
      margin-left: 64.5px;
   }
   #title {
      font-size: 32px;
   }
   
}

/* testing even smaler screen */
@media (max-width: 419.98px) {
   #title {
      font-size: 24px;
   }
}


/* color */
.teal-lighten-5 { background-color: #e0f2f1; }
.teal-lighten-4 { background-color: #b2dfdb; }
.teal-lighten-3 { background-color: #80cbc4; }
.teal-lighten-2 { background-color: #4db6ac; }
.teal-lighten-1 { background-color: #26a69a; }
.teal           { background-color: #009688; }
.teal-darken-1  { background-color: #00897b; }
.teal-darken-2  { background-color: #00796b; }
.teal-darken-3  { background-color: #00695c; }
.teal-darken-4  { background-color: #004d40; }
.teal-accent-1  { background-color: #a7ffeb; }
.teal-accent-2  { background-color: #64ffda; }
.teal-accent-3  { background-color: #1de9b6; }
.teal-accent-4  { background-color: #00bfa5; }
 
/* css arrows */
.down {
   position: relative;
   content: "";
   display: inline-block;
   width: 10px;
   height: 10px;
   border-right: 0.2em solid;
   border-top: 0.2em solid;
   transform: rotate(135deg);
}
table tr:last-child .down {
   visibility: hidden;
}

.up {
   position: relative;
   content: "";
   display: inline-block;
   width: 10px;
   height: 10px;
   border-right: 0.2em solid;
   border-top: 0.2em solid;
   transform: rotate(-45deg);
}
table tr:nth-child(2) .up {
   visibility: hidden;
}