/* reset styles */
html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p,
a, font, img, ol, ul, li, form, label,
table, tbody, tfoot, thead, tr, th, td {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-weight:inherit;
  font-style:inherit;
  font-size:100%;
  font-family:inherit;
  vertical-align:baseline;
}

/* default page styles */

html {
  overflow-y: scroll;
  overflow: -moz-scrollbars-vertical;
  min-height: 100vh;
}

body {
  background-color:#808080;
  color:#000000;
  font-family:tahoma,arial,helvetica,sans-serif; 
  padding:1em;
  min-height:100vh;
}

p, h1, h2, h3, h4, h5, h6, ol, ul { margin:1em 0; }

h1 { font-size:150%; font-weight:bold; }
h2 { font-size:140%; font-weight:bold; }
h3 { font-size:130%; font-weight:bold; border-bottom:solid 1px #909090; }
h4 { font-size:120%; font-weight:bold; }
h5 { font-size:110%; font-weight:bold; }
h6 { font-size:110%; }

ol, ul { padding-left:3em; }

a, a:visited { color:blue; text-decoration:underline; }
a:hover, a:active { color:red; text-decoration:underline; }

/* styling for tables */
table.fullwidth { width:100%; }
th { background-color:#3366cc; font-weight:bold; text-align:left; }
tr.odd, td.odd, td.light { background-color:#e8e8e8; }
tr.even, td.even, td.dark { background-color:#d8d8d8; }
table.padded td, table.padded th { padding:0.1em 0.3em; }
td.label { background-color:#c5caff; font-weight:bold; }
td.rpad, th.rpad { padding-right: 1em; }
td.lpad, th.lpad { padding-left: 1em; }

/* general style classes */
.aligntop { vertical-align:top; }
.highlight { background-color: #ffcc99; border:2px solid red; }
.note { color:gray; font-style:italic; }
.boldface { font-weight:bold; }
.warning { color:#ff6600; }
.error { color:#ff0000; font-weight:bold; }
.helptext { font-style:italic; }
.label { font-weight:bold; }
.desc_text { color:#606060; font-style:italic; }
p.compact { margin:0; padding:0; }
p.important, .blockstrong { margin:1em 0.5em; border:2px solid #0055ff; padding:0.3em; }
p.very_important, p.critical { margin:1em 0.5em; border:2px solid #ff3344; padding:0.3em; font-weight:bold; color:red; }
p.padded { padding-left:1em; padding-right:1em }
.small, .smaller { font-size:80% }
.large, .larger { font-size:120% }
.outlined { border:1px solid #404040; }
.padded { padding:4px; }
.separated { margin:3px 0; }

div.underline, p.underline { border-bottom:1px dotted #000000; }
div.indented, p.indented { padding-left: 20px; padding-right:20px; }

/* align styles */
.acenter { text-align:center; }
.aleft { text-align:left; }
.aright { text-align:right; }

p.banner-warning { margin: 1em 0.5em; padding:0.3em; border:2px solid #ff8800; color:#ff8800; background-color:#ffffbb; font-weight:bold; }

/* style for errorlist that comes out of django form validation failures */
ul.errorlist { display:inline; margin:0; padding:0; }
ul.errorlist li { list-style-type:none; display:inline; margin:0 0.4em; font-weight:bold; color:#ff0000; }

/* main page */
#pagecontainer { max-width:960px; margin:0 auto; padding:1.5em; background-color:#ffffff; min-height:500px; }

/* style for items in the messages area */
#messageArea p { margin:1em 0.5em; padding:0.3em; }
#messageArea p.debug { border:1px dotted gray; font-style:italic; background-color:#f0f0f0; }
#messageArea p.info { border:1px solid gray; background-color:#f0f0f0; }
#messageArea p.success { border:2px solid #00ff00; color:#00ff00; background-color:#d0ffd0; font-weight:bold; }
#messageArea p.warning { border:2px solid #ff8800; color:#ff8800; background-color:#ffffaa; font-weight:bold; }
#messageArea p.error { border:2px solid #ff0000; color:#ff0000; background-color:#ff8888; font-weight:bold; }

#javascript-is-disabled { font-weight:bold; background-color:#ffff44; padding:4px; }

.dialog-no-close  .ui-dialog-titlebar-close { display: none; }
.dialog-no-titlebar  .ui-dialog-titlebar { display: none; }

/* expander sections */
.expand-section {
  position:relative;
}
.expand-section .expander img {
  position:absolute;
  left:0;
  top:4px;
  display:none;
  cursor:pointer;
}
.expand-section .expander img.expand {
  display:block;
}

.expand-section .expander span.toggle {
  text-decoration:underline;
  color:#0000ff;
  cursor:pointer;
  margin-left:16px;
}
.expand-section .expand-content {
  padding-left:2em;
  display:none;
  position:relative;
}

/* tooltips */
.tooltip {
    cursor:pointer;
}
span.tooltip {
  cursor:pointer;
  text-decoration:underline;
  color:#0000ff;
}
#tooltip-window {
    z-Index:500;
    width:250px;
    background-color:#99ddee;
    border:1px solid #00ccff;
    padding:0.5em;
}
#tooltip-window-shim {
    z-Index:499;
}

/*------- tabbed sections ------*/

.tabbed {
    width:95%;
    display:inline-block;
}

/* Clearfix */
.tabbed-links:after {
    display:block;
    clear:both;
    content:'';
}
.tabbed-links {
    margin:0;
    padding-left:5px;
    padding-bottom:1px;
}
.tabbed-links li {
    margin:0px 3px;
    float:left;
    list-style:none;
}
 
.tabbed-links a {
    padding:5px 8px;
    display:inline-block;
    border-radius:5px 5px 0px 0px;
    background:#afafaf;
    color:#6c6c6c;
    font-size:16px;
    font-weight:600;
    text-decoration:none;
    /* transition:all linear 0.15s; */
}
 
.tabbed-links a:hover {
    background:#a7cce5;
    text-decoration:none;
}
 
.tabbed-links li.active a, .tabbed-links li.active a:hover {
    color:#2f2f2f;    
    background:#7fb5da;
}
 
/*----- Content of Tabs -----*/
.tabbed-content {
    padding:8px;
    border: 1px solid #4c4c4c;
    border-radius:3px;
    box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
    background:#fff;
}
 
.tabbed-data {
    display:none;
}
 
.tabbed-data.active {
    display:block;
}

/* submit button styles */ 
input[type=submit] { color:#ffffff; background-color:#4caf50;
   font-weight:bold; padding:8px 15px; cursor:pointer; }
input[type=submit]:hover { background-color:#44ff44; }

@media only screen and (max-width: 900px) {
	html { min-height:100vh; overflow:scroll; }
	body { min-height:100vh; padding:0; background-color:#ffffff; }
	#pagecontainer { min-height: 100vh; }
	img { max-width:90% }
	
	
	
}
