/* -----------------------------------
   Fonts resources
   ----------------------------------- */


/* -----------------------------------
   Media selection classes
   ----------------------------------- */


@media only screen and (max-width:767px) { 

  .small-devices-only { display:initial; }
  .large-devices-only { display:none; }

 }
@media only screen and (min-width:1200px) { 

  .small-devices-only { display:none }
  .large-devices-only { display:initial; }

 }
/* -----------------------------------
   Base HTML tags
   ----------------------------------- */

* {
}
*::selection { 
  background: #000000;
  color: #4D4D4D;
}

html { 
  color: #000000;
  font-family:'Raleway';
  font-size:1.3vmax;
  font-weight:400;
  letter-spacing:0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


@media only screen and (max-width:767px) { 
html { font-size: 2vmax; }
 }
@media only screen and (min-width:1200px) { 
html { font-size: 1.1vmax; }
 }
body { 
  background-color: #000000; 
}

h1 { font-family:Quicksand; font-size:180%; font-weight:normal; letter-spacing:0.15em; margin-top:2em; }
h2 { font-family:Quicksand; font-size:120%; font-weight:normal; letter-spacing:0.05em; margin-top:1em; }
h3 { font-family:Quicksand; font-size:100%; font-weight:normal; letter-spacing:0.05em; margin-top:1em; }

img{
  border:none;
}

/* -----------------------------------
   Links
   ----------------------------------- */

a { 
  color: #000000;
  text-decoration:none;
  border-width: 0 0 1px 0; 
  border-style: none none solid none;
   
}
a:hover { 
  background-color: #4D4D4D; 
  color:#000000;
   
}
a:link {}
a:visited {}
a:active {}

a.simple { border:0px; }
a.simple:hover { background-color:transparent; }


/* -----------------------------------
   Navigation Bar
   ----------------------------------- */

nav a, .menu-item {
  transition: all 0.5s;
  display:inline-block;
  padding:3px;
  margin:5px;
  text-decoration:none;
  text-align:center;
  font-weight:normal;
}
nav a:hover, .menu-item:hover {
}

@media only screen and (max-width:767px) { 
nav a, .menu-item { font-size:65%; }
 }
  nav {
    position:fixed; 
    z-index:2;
    top:90px;
    right:0px;
    text-transform:uppercase;
    padding:25px 0px 25px 15px;
    border-top-left-radius: 0px 0px;
    border-top-right-radius: 0em 0em;
    border-bottom-right-radius: 0em 0em;
    border-bottom-left-radius: 0px 0px;
    opacity:0.9;
    filter:alpha(opacity=90); 
    background-color: #000000; 
  }

  nav a {
    display:block;
    text-align:left;
    text-decoration:none;
    border:0px;
    padding:0.2em 0.8em 0.2em 0.2em;
    transition: all 0s;
    color:#4D4D4D;
   }
  nav a:hover {
    background-color: #000000; 
    color:#4D4D4D;
  }


/* -----------------------------------
   Menu
   ----------------------------------- */

.menu-box {
  position:absolute;
  right:4%;
  top:90px;
  line-height:15px;
}


/* -----------------------------------
   Lists
   ----------------------------------- */

<!-- ul,ol { margin:20px 0px 30px 30px; line-height:200%;}
ul { list-style-type: square; }
ul > li:last-child { }   
 -->

/* -----------------------------------
   Paragraphs
   ----------------------------------- */

p  { 
    margin-top:2em; 
  color:inherit; 
  }
p:first-of-type { margin-top:0em; }

pre { 
  font-family:'Lucida Console', Courier; 
  line-height:125%;
  letter-spacing:0em; 
  margin:2em 0em 2em 0em;
  padding:1em;
  border:1px solid #000000;
  background-color: #262626;
}
pre.wrap {
  white-space:pre-wrap;
}

.quote:before {content:""}
.quote {
  font-family:'Playfair Display'; 
  font-style:italic;
  color: #4D4D4D;
  padding-left:2vw;
  border-left:2px solid #000000;
}

.caption {
	width:100%;	font-weight: bold;
	letter-spacing: 3px;
	text-align:center;
	margin: 0px auto;
	padding: 5px;
}

/* -----------------------------------
   Words
   ----------------------------------- */

strong {
  font-weight:400;
  padding:1px 6px 2px 5px; 
  background-color:#4D4D4D; 
  border-width:1px 0px 1px 0px;
  border-style:solid;
  border-color:#000000;
}
strong.inverted { border:0px; padding:2px 6px 3px 5px; }
strong.console { border:0px; padding:2px 6px 3px 5px; }
strong.marker { border:0px; color:black; }


/* -----------------------------------
   A VOIR L'USAGE
   ----------------------------------- */

<!-- .ajax_window {
  background: #BFBFBF;
  padding:20px;
  border: 3px solid #FFFFFF;
  position: fixed;
  top:100px;
  margin:50px;
  margin-left:10px;
  min-width:60%;
}
 -->

.message {
  margin: 20px;
  margin-right: 150px;
  margin-left: 150px;
  border: 1px solid #4D4D4D;
  padding: 10px;
  background-color:#262626;
}

option {
	background-color: #737373;
	color: #000000;
	letter-spacing: 1px;
}


.highlighted_form{
	background-color:#000000;
	border: 1px solid #000000;
	position: relative;
	width: 320px;
	padding: 20px;
	margin: 5px;
	margin-left: auto;
	margin-right: auto;
}

.navigation_form{
	margin-top: 20px;
	text-align: right;
}

.external{ background-color: #B8B8E6; font-style: italic; }
.warning{ color: #FFBFBF; }
.severity_high{	background-color: #FFEEDD; }
.severity_critical{ background-color: #FFDDDD; }
.severity_normal{}
.severity_low{}
.state_done{ background-color: #DDFFDD; }
.master_row{ background-color: #DDDDFF; }
.highlighted_row{ background-color: #FFDDDD; }
.highlighted_row_2{ background-color: #CCCCCC; }
.header_column{ width: 200px; background-color: #262626; }

.header_menu{
    color:black;
	background-color:transparent;
    text-decoration:none;
    position:absolute;
    padding:5px;
    top:20px;
    right:10px;
}
.header_menu:hover{
}


/* -----------------------------------
   Text blocks
   ----------------------------------- */

.highlighted {
  margin: 0px auto;
  margin-top: 50px;
  margin-bottom: 50px;
  padding: 20px;
  background-color:#262626;
  color:#808080;
}

/* -----------------------------------
   Sticky DIV
   ----------------------------------- */
.sticky-div {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    padding:10px;
    z-index: 9;
    background-color:#131313;
    filter:alpha(opacity=95); /* IE opacity change on hover doesn't work? */
    opacity:0.95;
}

/* -----------------------------------
   Embedded SVG
   ----------------------------------- */

svg {}
svg text { letter-spacing:0em; }


/* -----------------------------------
   Database
   ----------------------------------- */

.primary_key{ background-color: #E6B8B8; font-style: italic; }


/* -----------------------------------
   Button
   ----------------------------------- */

.button {
  display:inline-block;
  padding:5px 10px 5px 10px;
  margin-right:5px;
  color: #4D4D4D;
  background-color: #000000;
  border: 1px solid #000000;
  border-radius: 0; 
  -moz-border-radius: 0; 
  -webkit-border-radius: 0; 
}
.button:hover {
  color: #4D4D4D;
  background-color: #000000;
  cursor:pointer;
}


/* -----------------------------------
   Form
   ----------------------------------- */

form {
}

input, select, textarea {
  font-family:'Raleway';
  font-size:1.3vmax; 
  padding:2px 5px 2px 5px;
	color: #000000;
	background-color: #4D4D4D;
	border: 1px solid #000000;
	border-radius: 0; 
	-moz-border-radius: 0; 
	-webkit-border-radius: 0; 
}
input {
  text-align:center;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #4D4D4D url("../data/icons/select-arrow.png") no-repeat right center;
    padding:2px 25px 2px 10px;
}

 <!-- select option {
  margin-bottom:10px;
  background-color:white;
  line-height:50px;
  font-size:12pt;
} -->


input:focus, select:focus, textarea:focus {
    background-color:#000000;
}
input:hover, select:hover, textarea:hover {
}
input[type="submit"], input[type="button"], input[type="reset"] {
  padding:5px 20px 5px 20px;
	border:1px solid #000000;
  color: #4D4D4D;
  background-color: #000000;
	cursor:pointer;  
}
input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover {
	background-color: #4D4D4D;
}


/* -----------------------------------
   Spacers
   ----------------------------------- */

div:empty.spacer { 
  display:block; 
  height:30px;
}
div:empty.spacer.visible { 
  height:auto;
  width:50%; 
  margin:50px;
  margin-left:auto; 
  margin-right:auto; 
  border-top:1px solid #000000;
}


/* -----------------------------------
   Table
   ----------------------------------- */

table {
	margin: 0 auto; /* to center the table */
	empty-cells: show;
	border-spacing:0;
	border-collapse:collapse;
	letter-spacing:0.0em;
	text-align:center;
}

tr {}
.alternate { color: #4D4D4D; }
.alternate tr:nth-child(even) { background-color: #0A0A0A; }
.alternate tr:nth-child(odd) { background-color: #000000; }

th, thead, thead td {
	padding:6px;
	background-color: #4D4D4D;
  color: #4D4D4D; 
}
td {}

.table-title { 
  padding:10px;
  background-color: #000000; 
  font-weight:bold;
  color: #4D4D4D; 
}

table.left, th.left, td.left { text-align:left; }
table.right, th.right, td.right { text-align:right; }
table.center, th.center, td.center { text-align:center; }
table.justify, th.justify, td.justify { text-align:justify; }


/* -----------------------------------
   Data table
   ----------------------------------- */

.data-table {
	border-bottom:1px solid #000000;
}
.data-table .selected td{
	background-color: #4D4D4D;
}
.data-table tr:hover, .data-table .alternate tr:hover {
	background-color: #4D4D4D;
	border-top:1px solid #131313;
	border-bottom:1px solid #131313;
}
.data-table th, .data-table thead, .data-table thead td {
	border-top:1px solid #4D4D4D;
	border-bottom:1px solid #4D4D4D;
}
.data-table td {
	border-top:1px solid #4D4D4D;
	border-bottom:1px solid #4D4D4D;
}
.data-table .selected td{
	border-top:1px solid #4D4D4D;
	border-bottom:1px solid #4D4D4D;
}

/* -----------------------------------
   Spinner
   ----------------------------------- */
.spinner {
}

/* -----------------------------------
   Badges
   ----------------------------------- */
.badge {
  position:relative;
  top:0.5em;
  display:inline-block;
  letter-spacing: 0.1em;
  font-size:small;
  font-weight:bold;
  color:white;
  line-height: 20px;
  height: 20px;
  padding:0em 10px;
  margin:0px 5px;
  border-radius: 10px; 
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px; 
  text-shadow: 0px 0px rgba(0, 0, 0, 0.25);
  border: 0px solid;
  background: #67c1ef;
  border-color: #30aae9;
  background-image: -webkit-linear-gradient(top, #aaaaaa, #888888);
  background-image: -moz-linear-gradient(top, #aaaaaa, #888888);
  background-image: -o-linear-gradient(top, #aaaaaa, #888888);
  background-image: linear-gradient(to bottom, #aaaaaa, #888888);
}
.badge:not(:empty) {
  top:-1px;
  padding:0em 9px;
}
.badge.superscript {
  margin:0px;
  left:-0.5em;
  top:-1.2em;  
}
.badge.blue {
  background: #67c1ef;
  border-color: #30aae9;
  background-image: -webkit-linear-gradient(top, #acddf6, #67c1ef);
  background-image: -moz-linear-gradient(top, #acddf6, #67c1ef);
  background-image: -o-linear-gradient(top, #acddf6, #67c1ef);
  background-image: linear-gradient(to bottom, #acddf6, #67c1ef);
}
.badge.green {
  background: #77cc51;
  border-color: #59ad33;
  background-image: -webkit-linear-gradient(top, #a5dd8c, #77cc51);
  background-image: -moz-linear-gradient(top, #a5dd8c, #77cc51);
  background-image: -o-linear-gradient(top, #a5dd8c, #77cc51);
  background-image: linear-gradient(to bottom, #a5dd8c, #77cc51);
}
.badge.yellow {
  background: #fae23e;
  border-color: #f4e006;
  background-image: -webkit-linear-gradient(top, #fcd589, #faba3e);
  background-image: -moz-linear-gradient(top, #fcd589, #faba3e);
  background-image: -o-linear-gradient(top, #fcd589, #faba3e);
  background-image: linear-gradient(to bottom, #fcd589, #faba3e);
}
.badge.orange {
  background: #faba3e;
  border-color: #f4a306;
  background-image: -webkit-linear-gradient(top, #fcd589, #faba3e);
  background-image: -moz-linear-gradient(top, #fcd589, #faba3e);
  background-image: -o-linear-gradient(top, #fcd589, #faba3e);
  background-image: linear-gradient(to bottom, #fcd589, #faba3e);
}
.badge.red {
  background: #fa623f;
  border-color: #fa5a35;
  background-image: -webkit-linear-gradient(top, #fc9f8a, #fa623f);
  background-image: -moz-linear-gradient(top, #fc9f8a, #fa623f);
  background-image: -o-linear-gradient(top, #fc9f8a, #fa623f);
  background-image: linear-gradient(to bottom, #fc9f8a, #fa623f);
}
.badge.purple {
  background: #fa623f;
  border-color: #fa5a35;
  background-image: -webkit-linear-gradient(top, #c8a4dc, #8b55b2);
  background-image: -moz-linear-gradient(top, #c8a4dc, #8b55b2);
  background-image: -o-linear-gradient(top, #c8a4dc, #8b55b2);
  background-image: linear-gradient(to bottom, #c8a4dc, #8b55b2);
}


/* -----------------------------------
   Notes
   ----------------------------------- */
.note:before { content:"NOTE : "; font-weight:bold; letter-spacing:2px;  }
.note.empty:before { content:""; }
.note {
  width:50%;
  margin: 0px -40px 10px -50px;
  padding:10px 15px;
  border-width: 1px 0px 1px 0px;
  border-style:solid;
  border-color:#cccccc;
  font-family:'Indie Flower', serif; 
  font-size:125%;
  line-height:150%;
  text-align:justify;
  color:#888888;
  background-color:#f9f9f9;
}

.note.warning:before { content:"WARNING : "; color:red; }
.note.warning.empty:before { content:""; }
.note.warning { border-width: 2px 0px 2px 0px; border-color:red; background-color:#ffcfdd; }

.note.important:before { content:"IMPORTANT : "; }
.note.important.empty:before { content:""; }
.note.important { background-color:#ffcfdd; }

.note.todo:before { content:"TODO : "; }
.note.todo.empty:before { content:""; }
.note.todo { background-color:#d3e4ff; }

.note.fixme:before { content:"FIXME : "; }
.note.fixme.empty:before { content:""; }
.note.fixme { background-color:#ffff99; }


/* -----------------------------------
   Post-it
   ----------------------------------- */

.post-it {
  float:right;
  clear:none;

  display:inline-block;
  -ms-transform:rotate(10deg);
  -webkit-transform:rotate(10deg);
  transform:rotate(10deg);

  width:15em;
  height:15em;

  padding:1em;
  border:0em;

  font-family:'Indie Flower', serif; 
  font-style:normal;
  line-height:1.4;
  text-align:center;
  background-color:#ffff99; 
  color:#000000;
}


/* -----------------------------------
   Flex-boxes
   ----------------------------------- */

  div.flex-container {
      display:flex; 
      display:-webkit-flex;
      flex-direction: row; 
      -webkit-flex-direction: row;
      flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      align-items:stretch;
      -webkit-align-items:stretch;
      justify-content:center; 
      -webkit-justify-content:center; 
  }
  .flex-container > .flex-box {
      flex: 0 1 31%;
      -webkit-flex: 0 1 31%;
      word-wrap:break-word;
      page-break-inside:avoid;
  }

@media only screen and (max-width:767px) { 
.flex-container > .flex-box { flex: 0 1 100%; -webkit-flex: 0 1 100%; }
 }
@media only screen and (min-width:1200px) { 
.flex-container > .flex-box { flex: 0 1 23%; -webkit-flex: 0 1 23%; }
 }
  .flex-container > .flex-box > .title {
  }
<!--   .flex-box > .content {
      display:inline;
  }
 -->
  .flex-box > .flex-box {
      width:auto;
  }
  .flex-box > .flex-box > .title {
      display:inline;
  }


/* -----------------------------------
   Animations
   ----------------------------------- */

  .pulsing-green {
    animation-name: pulse-green;
    animation-duration: 2s;
    animation-iteration-count: 1;
    -webkit-animation-name: pulse-green;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
  }
  @-webkit-keyframes pulse-green {
      0% {background-color: #00ff00;}
      100% {background-color: white;}
  }
  @keyframes pulse-green {
      0% {background-color: #888888;}
      100% {background-color: white;}
  }
  .pulsing-red {
    animation-name: pulse-red;
    animation-duration: 2s;
    animation-iteration-count: 1;
    -webkit-animation-name: pulse-red;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
  }
  @-webkit-keyframes pulse-red {
      0% {background-color: #ff0000;}
      100% {background-color: white;}
  }
  @keyframes pulse-red {
      0% {background-color: #888888;}
      100% {background-color: white;}
  }


/* -----------------------------------
   Modifiers (do not move!)
   ----------------------------------- */

.center { text-align:center; }
.justified { text-align:justify; }
.scroll { overflow-x:auto; overflow-y:scroll; height:25vh; }
.narrow { width:80%; margin-left:auto; margin-right:auto; }
.float-right { float:right; clear:none; }

.nowrap { white-space: nowrap; }

.bold { font-weight:bold; }
.uppercase { text-transform:uppercase; }
.super {
    vertical-align: super;
    font-size: smaller;
}

.mono { font-family:'Lucida Console', Courier; }
.font-mono { font-family:'Lucida Console', Courier; }
.font-standard { font-family:'Raleway'; }
.font-alternate { font-family:Quicksand; }
.font-handwriting { font-family:'Indie Flower', serif; }
.font-quote { font-family:'Playfair Display'; font-style:italic; }

.font-smaller { font-size:smaller; }
.font-small { font-size:small; }

.border-highlight { border: 3px solid #888888; }
.border-highlight-warning { border: 3px solid #ffaaaa; }

.editable {}
.readonly { background-color: #000000; font-style: italic; }

.e-mail { letter-spacing:0.15em; }

/* -----------------------------------
   Color classes (do not move)
   ----------------------------------- */

.clear  { background-color:transparent; }
.white  { background-color:#ffffff; }
.yellow { background-color:#ffff99; }
.orange { background-color:#f7ac71; }
.red    { background-color:#ffcfdd; }
.pink { background-color:#f9a5d3; }
.blue   { background-color:#d3e4ff; }
.azure { background-color:#2dcde0; }
.emerald { background-color:#34cfb4; }
.green  { background-color:#e0fec2; }
.mauve { background-color:#bda5f6; }
.purple { background-color:#b875ca; }

.inverted { background-color:#888888; color:white; }
.console { background-color:#333333; color:#00ff00; }

.marker { background-color:#ffff00; padding: 0.2em; }
.marker.yellow { background-color:#ffff00; }
.marker.green { background-color:#00ff00; }
.marker.blue { background-color:#00ccff; }
.marker.pink { background-color:#ff00ff; }
.marker.orange { background-color:#ff9900; }
.marker.red { background-color:#ff583c; }

.bkg-main  { background-color: #000000; color: #4D4D4D;}
.bkg-alt  { background-color: #000000; color: #4D4D4D; }
.bkg-alt2  { background-color: #000000; color: #4D4D4D; }
.bkg-bkg  { background-color: #000000; color: #4D4D4D; }
.bkg-text  { background-color: #000000; color: #4D4D4D; }

.bkg-main-light  { background-color: #262626; color: #808080; }
.bkg-alt-light  { background-color: #262626; color: #808080; }
.bkg-alt2-light  { background-color: #262626; color: #808080; }
.bkg-bkg-light  { background-color: #262626; color: #808080; }
.bkg-text-light  { background-color: #262626; color: #808080; }

.bkg-main-lighter  { background-color: #4D4D4D; color: #000000; }
.bkg-alt-lighter  { background-color: #4D4D4D; color: #000000; }
.bkg-alt2-lighter  { background-color: #4D4D4D; color: #000000; }
.bkg-bkg-lighter  { background-color: #4D4D4D; color: #000000; }
.bkg-text-lighter  { background-color: #4D4D4D; color: #000000; }

.bkg-main-dark  { background-color: #000000; color: #4D4D4D; }
.bkg-alt-dark  { background-color: #000000; color: #4D4D4D; }
.bkg-alt2-dark  { background-color: #000000; color: #4D4D4D; }
.bkg-bkg-dark  { background-color: #000000; color: #4D4D4D; }
.bkg-text-dark  { background-color: #000000; color: #4D4D4D; }

.bkg-main-darker  { background-color: #000000; color: #4D4D4D; }
.bkg-alt-darker  { background-color: #000000; color: #4D4D4D; }
.bkg-alt2-darker  { background-color: #000000; color: #4D4D4D; }
.bkg-bkg-darker  { background-color: #000000; color: #4D4D4D; }
.bkg-text-darker  { background-color: #000000; color: #4D4D4D; }


/******************************************************************************
** Special CSS
*******************************************************************************/

div#tipDiv {
  background-color:#3E4281;
  color:#FFFFFF;
}

.calendar{
	background-color:#000000;
	border: 1px dotted;
	padding: 20px;
}
.calendar_cell{
	padding: 3px;
	text-align: center;
}
.calendar_today{
	color: #000000;
}
.calendar_weekday {
	border: 0px;
	padding: 3px;
	font-weight: bold;
	text-align: center;
}
.calendar_meeting{
	padding: 3px;
	text-align: center;
	color: #000000;
	background-color:#000000;
}
th.calendar {
	background-color: #000000;
	border: 0px;
	padding: 5px;
}

#home {
	margin-top:100px;
}

.copyright {
	border:1px solid #000000;
	background-color:#262626;
	color:#000000;
	letter-spacing: 1px;
	text-align:right;
	left:10px;
	width:99%;
	padding:2px;
	padding-right:5px;
}


#header {
	margin-top:20px;
	margin-bottom:50px;
	width:100%;
}

#logo {
}

.menu_box {
	display:table;
	border-spacing:3px;
	width:100%;
	line-height:15px;
}

.menu_cell {
	display:table-cell;
	border:1px solid #000000;
	background-color:#262626;
	padding:0px;
	width:15%;
	min-width:65px;
	text-decoration:none;
	text-align:center;
	font-weight:normal;
	letter-spacing:1px;
    color:black;
	margin:1px;
	padding: 5px;
}
.menu_cell:hover {
	background-color:#000000;
}

.title {
	margin-left:0px;
	margin-right:0px;
	background-color: #000000;
	font-weight: bold;
	padding-right: 120px;
	padding-top: 5px;
	padding-left: 20px;
	height: 25px;
}

.rightalign {
	right: 10px;
	position: absolute;
}
.contentbody {
	margin-top: 20px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 20px;
}


/******************************************************************************
** Auto-fill widget
*******************************************************************************/
.afw_optionDiv{
	position:fixed;	/* Never change this one */
	width:350px;
	height:250px;
	padding:3px;
	overflow:auto;	/* Scrolling features */
	border:1px solid #000000;
	background-color:#262626;
	text-align:left;
	z-index:100;
}
.afw_optionDiv div{	/* General rule for both .option and .optionSelected */
	margin:1px;
	padding:3px;
	cursor:pointer;
}
.afw_optionDiv .afw_option{ /* Div for each item in list */
}
.afw_optionDiv .afw_optionSelected{ /* Selected item in the list */
	background-color:#000000;
	color:#FFF;
}


/* -----------------------------------
   Gallery CSS
   ----------------------------------- */
/*----------------------------
 Gallery background
 ----------------------------*/

.gallery_background {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:-1;
    overflow:hidden;
}

.gallery_name {
    position:absolute;
    bottom:-100px;
    left:0px;
    color:#131313;
    font-family: times, serif;
    font-size:350px;
    font-style:italic;
    text-transform:lowercase;
    letter-spacing:40px;
}
.gallery_copyright {
    position:absolute;
    left:0px;
    bottom:30px;
    width:100%;
    color:#999999;
    font-size:10pt;
    text-transform:lowercase;
    letter-spacing:10px;
}
.gallery_copyright.inline {
}
/* iPad & al. */ @media only screen and (max-device-width: 1024px) {
    .gallery_copyright.inline {display:none;}
}

#gallery-click-catcher {
	z-index:+50; 
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
	background-color:#262626;
	filter:alpha(opacity=50);
	opacity: 0.5;
}


/*----------------------------
 Gallery body
 ----------------------------*/

.gallery_body {
    margin-top:5vh;
}
.gallery_body.inline {
}

/*----------------------------
 Gallery thumbnails
 ----------------------------*/

.gallery_thumbs_container {
    padding-top:50px;
    width:100%;
	scrollbar-face-color: #000000;
	scrollbar-shadow-color: #000000;
	scrollbar-highlight-color:#000000;
	scrollbar-3dlight-color: #000000;
	scrollbar-darkshadow-color: #000000;
	scrollbar-track-color:#000000;
	scrollbar-arrow-color:#262626;
}
.gallery_thumbs_container::-webkit-scrollbar {background-color:#000000; width:10px; height:10px; border-radius:10px;}
.gallery_thumbs_container::-webkit-scrollbar-button {background-color:#000000; border-radius:10px;}
.gallery_thumbs_container::-webkit-scrollbar-thumb {background-color:#000000; border-radius:10px;}

.gallery_thumbs_container.inline {
    position:absolute;
    padding:0px;
    width:100%;
    bottom:60px;
}

.gallery_thumbs_container.gallery-flex {
    display:flex; 
    display:-webkit-flex;
    flex-direction:row; 
    -webkit-flex-direction:row;
    flex-wrap:wrap;
    -webkit-flex-wrap:wrap;
    align-items:flex-start;
    -webkit-align-items:flex-start;
    justify-content:center; 
    -webkit-justify-content:center; 
}
.gallery-flex div { transition: .8s opacity; }
.gallery-flex:hover div { opacity: 1; }
.gallery-flex:hover div:hover { opacity: 1; }

/* iPad & al. */ @media only screen and (max-device-width: 1024px) {
    .gallery_thumbs_container.inline {bottom:-20px;}
}

.gallery_thumb_cell {
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
	padding:0px;
	background-color: #000000;
	cursor:pointer;
	text-align:center;
	margin:0px;
}

.gallery_thumb {
	background-color:green;
}

/*----------------------------
 Gallery slide
 ----------------------------*/

#gallery-slide-div { 
  display:none; 
  position:fixed; 
  z-index:98; 
  top:0px; 
  left:0px; 
  width:100%; 
  height:100%; 
  background-color: #333333;
}

#gallery-slide-img { 
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  overflow: auto;
  cursor:pointer;
}

#gallery-slide-info-box {
  position:absolute; 
  z-index:99;
  left:10px; 
  top:10px; 
  padding:4px; 
  color:white; 
}
#gallery-slide-info-box-icon { display:inline-block; width:4vmax; opacity:0.00; transition:all 1s; }
#gallery-slide-info-box-icon:hover { opacity:1; }
#gallery-slide-info-box-content { display:none; }

#gallery-slide-close-box {
  position:absolute; 
  z-index:99;
  cursor:pointer;
  transition:all 1s;
  right:10px; 
  top:10px; 
  padding:4px; 
  background-color:transparent; 
  color:white; 
  opacity:0.1; 
}
#gallery-slide-close-box:hover { opacity:1; }
#gallery-slide-close-box img { width:4vmax; }
 
.gallery-slide-control {
  position: absolute;
  z-index:2;
  transition:all 1s;
  cursor:pointer;
  top:0px;
  background-color:transparent;
  height:100%;
  width:100%;
  opacity:0.1;
}
.gallery-slide-control:hover { opacity:1; }
.gallery-slide-control.prev { left:0px; width:20%; }
.gallery-slide-control.next { right:0px; width:20%; }

.gallery-slide-control-arrow {
  position: absolute;
  display:block;
  top: 50%;
  transform: translateY(-50%);
  height:6vmax;
  width:6vmax;
}

.gallery-slide-control-arrow.prev { left: 0.5vw; }
.gallery-slide-control-arrow.next { right: 0.5vw; }
.gallery-slide-control-arrow.prev img { width:4vmax; }
.gallery-slide-control-arrow.next img { width:4vmax; }
  
}

/*----------------------------
 Gallery folders
 ----------------------------*/

.gallery_folders {
}

.gallery_folder_container {    
}

.gallery_folder {
  transition: all 1s;
  display:inline-block;
  padding:5px;
  margin:2px;
  border:0px;
	text-align:center;
	letter-spacing:3px;
	text-decoration: none;
	font-weight:normal;
  font-size:smaller;
}
.gallery_folder:hover {
	background-color:#000000;
    color:#4D4D4D;
}
.gallery_folder img {
    position:relative;
    height:14px;
}

/*----------------------------
 Gallery navigation
 ----------------------------*/
.gallery_page_box {
	cursor:pointer;
	color:#000000;
	border:1px solid #131313;
	background-color:#000000;
	height:30px;
	width:30px;
}

.gallery_page_box:hover {
	background-color:#131313;
}

.gallery_page_box_next {
}

.gallery_page_box_prev {
}

#gallery-login-container {
    position:fixed;
    z-index:98;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    overflow:hidden;
}
#gallery-login-form {
    position:relative;
    z-index:98;
    width:250px;
    top:30%;
    margin:0 auto;
 	padding:20px;
	background-color: #262626;
	border: 1px solid #4D4D4D;
}

#gallery_notification_container {
}

#gallery_notification {
    z-index:99;
    position:absolute;
    width:10%;
    top:50%;
    left:43%;

 	padding:10px;
	background-color: #000000;
	border: 1px solid #4D4D4D;
    vertical-align:middle;
    filter:alpha(opacity=80);
    opacity:0.8;
}


/* -----------------------------------
   Application CSS
   ----------------------------------- */

#app-body{
	position:absolute;
	height:100%;
	top:0px;
	left:0px;
	right:0px;	overflow:hidden;}

#app-header-container {
	position:relative;
	width:100%;
	overflow:hidden;
	margin-bottom:1em;
}

#app-logo{
	font-size:5vmax;
	font-family: Quicksand;
	display:inline-block;
	white-space:nowrap;
}

@media only screen and (max-width:767px) { 
#app-logo{ font-size:200%; }
 }

#app-menu{
	position:absolute;
	bottom:0px;
	right:0px;
}

#app-quick-access-box {
	z-index:19; 
	position:fixed; 
	right:10px; 
	top:10px;
}

#app-spinner {
	z-index:19; 
	position:fixed; 
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
	padding:50px;
	color: #4D4D4D;
	background-color:#000000;
	filter:alpha(opacity=90);
	opacity: 0.9;
	border-radius:20%; 
	-moz-border-radius:20%; 
	-webkit-border-radius:20%; 
}

#app-toolbar {
	width:100%;
	height:26px;	
	overflow:hidden;
	padding:5px;	
	background-color: #000000;
}

#app-content-container {
	position:absolute;
	width:100%;
	top:170px;
	bottom:20px;
}

#app-content {
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:-20px;
	padding:10px;
	overflow:auto;
	
	background-color: #000000;
	border-color: #000000;
	border-width: 1px; 
	border-style: none none none none;
}

#app-content.nosidebar {
	left:0px;
	right:0px;
	padding:20px;
}

#app-sidebar {
	position:absolute;
	width:230px;
	top:0px;
	bottom:-20px;	overflow:auto;
	
	background-color: #000000;
	border-color: #000000;
	border-width: 1px; 
	border-style: none solid none none;
}

/*
** Pop-up Window
*/
#app-popup-container {
	 
}

#app-popup {
	z-index:+2; 
	 
	background-color:#000000;
	border: 2px  solid #999999;
	border-top: 25px solid #999999;
	position:relative;
	top:80px; 
	margin:auto; 
	max-width:85%;}

#app-popup-content {
	position:relative; 
	padding:10px; 
	overflow:auto;
	max-height:60%;}

#app-popup-title {
	position:relative; 
	float:left;	
	margin-left:10px;
	margin-top:-20px;
	font-size:12px;
	font-weight:bold;
	color: #FFFFFF;
}

#app-popup .close-box {
	position:relative; 
	float:right;	
	margin-top:-20px;
	margin-right:5px;
	height:16px;
	width:16px;
	cursor:pointer;
}

#app-popup input[type="submit"], input[type="button"], input[type="reset"] {
	float:right;	
}

#app-click-catcher {
	z-index:+1; 
	position:fixed; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
	background-color:#000000;
	filter:alpha(opacity=90);
	opacity: 0.9;
}

/*
** Tooltip
*/
#app-tooltip-container {
}
#app-tooltip {
	z-index:19;

	color: #4D4D4D;
	background-color: #000000;
	padding:10px; 
	position: absolute;
	font-size:smaller;
	max-width:600px;
}

/*
** Dialog
*/
#app-dialog-container {
	 
}

#app-dialog {
	 
	z-index:19;
	position: fixed;
    top: 250px;
    left: 50%;
    transform: translate(-50%, -50%);
	min-width:200px; 
	max-width:350px;
	overflow:auto;
	background: #000000;
	padding:15px; 
	border: 1px solid #000000;
}

.error#app-dialog {
	color: #CC5555;
	background-color: #FFCCCC;
}
.success#app-dialog {
	color: #55CC55;
	background-color: #CCFFCC;
}

#app-dialog input[type="submit"], input[type="button"], input[type="reset"] {
	position: relative;
	float:right;	
	margin-left:5px;
	margin-top:50px;
}

/*
** Toolbar
*/
#app-toolbar .item {
	cursor:pointer;	
	 
 }
#app-toolbar img {
	padding:5px;
	margin-top:-4px; 
}
#app-toolbar .item:hover img:hover {
	background-color: #BFBFBF;
 }

/*
** Sidebar
*/
#app-sidebar .item {
	position:relative;
	background-color: #262626;
	left:0px;
	margin:1px;
	cursor:pointer;	
}
#app-sidebar .level1 {
	background-color: #000000;
}
#app-sidebar .level2 {
	background-color: #000000;
}
#app-sidebar .level3 {
	background-color: #000000;
	padding-left:10px;
}
#app-sidebar .item .level0:hover {
	background-color:#000000;
}
#app-sidebar .item .level1:hover {
	background-color:#000000;
}
#app-sidebar .item .level2:hover {
	background-color:#000000;
}
#app-sidebar .item .level3:hover {
	background-color:#000000;
}
#app-sidebar .label {
	padding:5px;
	color: #FFFFFF}
#app-sidebar .level0 .label {
	color: #000000}
#app-sidebar .detail {
	font-size:smaller;
	position:relative;
	padding:5px;
	padding-left:15px;
	color:#E6E6E6;	
}

/*
** Widgets
*/
.app-button {
	border:1px solid #000000;
	background-color:#262626;
	margin:5px;
	padding:5px;
	cursor:pointer;	
}
.app-button:hover {
	color: #4D4D4D;
	background-color: #000000;
}

/* -----------------------------------
   Theme modifiers
   ----------------------------------- */

/* -----------------------------------
   Theme modifiers (small-devices)
   ----------------------------------- */

@media only screen and (max-width:767px) { 

 }

/* -----------------------------------
   Theme modifiers (large-devices)
   ----------------------------------- */

@media only screen and (min-width:1200px) { 

 }