html, body
{
	color : #222222;
	background : #707070;
	font-size : 12px;
	font-family : Arial, cursive;
	margin : 0px;
	padding : 0px;
	width : 100%;
	height : 100%;
}

#meshviewer{
    background-color:#000000;
}

#nosupport
{
	width : 450px;
	margin : 0px auto;
	padding : 10px;
	text-align : center;
}

#nosupport div.nosupporterror
{
	color : #aa0000;
	background : transparent;
	font-size : 14px;
	margin-bottom : 10px;
}

#top
{
	color : #dddddd;
	background : linear-gradient(#333333, #111111) #222222;
	overflow : auto;
}

/* kinda sketchy, the id 'logo' is put on multiple div's
 * changed to class 'topItem' */
/* #logo */
.topItem
{
	color : #ffffff;
	background : linear-gradient(#FF7AA9, #D1004A)  #E82F71;
	font-size : 14px;
	text-align : center;
	text-decoration : none;
	width : 190px;
	padding : 5px 0px;
	margin : 8px;
	border-radius : 5px;
	box-shadow: 0px 0px 5px #000000;
	cursor : pointer;
	float : left;
}

span.version
{
	margin-left : 5px;
	font-size : 10px;
}

img.topbutton
{
	width : 25px;
	height : 25px;
	margin : 9px 5px 0px 5px;
	border : 0px;
	cursor : pointer;
}

#left
{
	color : #222222;
	background : #cccccc;
	width : 200px;
	float : left;
	overflow : auto;
}

/*
#menu
{
	margin : 5px;
}
*/

div.menuitem
{
	padding : 2px;
	overflow : auto;
}

div.menugroup
{
	margin-left : 15px;
	margin-bottom: 12px;
	margin-top: 8px;
	font-size: 14px;
}

div.menutext
{
	padding : 2px;
	margin-left : 3px;
	float : left;
}

img.menubutton
{
	padding : 2px;
	float : left;
	cursor : pointer;
	border : 0px;
	display : block;
}

div.colorbutton
{
	width : 14px;
	height : 14px;
	border : 1px solid #222222;
	float : left;
}

div.progressbarborder
{
	height : 20px;
	border : 1px solid #222222;
}

div.progressbarcontent
{
	color : #ffffff;
	background : #279b61;
	height : 20px;
}

table.infotable td
{
	padding : 1px 5px;
}

div.importerdialog
{
	width : 450px;
}

div.welcometitle
{
	font-size : 19px;
	text-align : center;
	margin : 10px 0px;
}

div.welcometext
{
	text-align : center;
	margin : 10px 0px;
}

div.welcometextformats
{
	text-align : center;
	font-size : 17px;
	margin : 25px 0px;
}

canvas
{
	display : block;
}



a
{
	color : #225588;
	background : transparent;
	text-decoration : none;
}

a:hover
{
	text-decoration : underline;
}


.menuitem
{
    font-size:14px;
    font-weight:bold;
}

.submenuitem
{
    font-size:14px;
}


/*********************************
 * for cell selector dialog
 *********************************/

/* entry in cell list, default apearance */
.cellDiv
{
    background-color:#ffffff;
    cursor: pointer;
    padding: 3px;
    float:left;
    height: 24px;
    text-align:left;
    font-size: 16px;
    font-weight: bold;
    margin: 1%;
    width: 9%;    
}

/* entry in cell list, after clicked/cell had loaded */
.cellDivSelected
{
    background-color:#00cc00;
}

/* moved here from /apps/neuronMaps/css/neuronmaps.css */
.panel-header
{
    background-color: #818181;
    color: #ffffff;
    cursor: pointer;
    padding: 6px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 32px;
    font-weight:bold;
    transition: 0.4s;
    margin: 5px;
}


/*============================================================
 * stuff stolen from myself (node-mysql)
 */

/*
 * Accordion menu
 * adapted from https://www.w3schools.com/howto/howto_js_accordion.asp
 * Each menu item is in a div class .accordionSection,
 * which contains two divs, .sectionTitle and .sectionContent
 * the .active class is added/removed from sectionTitle when clicked on
 * (event handling added in the javascript, importer.js)
 */

 /* Style the buttons that are used to open and close the accordion panel */
.accordionSection {
	position: relative;
  background-color: #C0C0C0;
  cursor: pointer;
  padding: 0px;
  width: 200px;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.sectionTitle[aria-expanded='true'] {
  background-color: #B0B0B0;
  text-align: left;
  border-style: solid none none none;
}

.sectionTitle[aria-expanded='false'] {
  background-color: #A0A0A0;
  text-align: left;
  border-style: solid none none none;
}

.sectionTitle:hover {
  background-color: #808080;
}

.sectionTitle[aria-expanded='true']::after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
  float: right;
}

.sectionTitle[aria-expanded='false']::after {
  content: "\02795"; /* Unicode character for "plus" sign (+) */
  float: right;
}


/* Style the accordion panel. Note: hidden by default */
.sectionContent {
  background-color: #D0D0D0;
} 

/* adds a (+) at the end of .inactive */
.inactive::after {
  content: "\02795"; /* Unicode character for "plus" sign (+) */
  float: right;
}

/* adds a (-) at the end of .active */
.active::after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
  float: right;
}


/* button in the maps section, e.g. 'WormAtlas'
 * not used for now */
.mapBtn {
  border-radius: 5px;
  padding: 2px;
}