/* site.css */

/* global tag definition */

html {
	height: 100%;
	font-family: sans-serif;
	/* ZZ delete -webkit-text-size-adjust: 100%; */
	/* ZZ delete -ms-text-size-adjust: 100%; */

}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.42857143;
	margin: 0;
	text-align: center;
	padding: 10px;
	background: #c6E2F1 url(../pics/bg_repeat.png) repeat-x scroll top left;
	/*background: #92ffbe;*/
	height: 100%;
}

.MathJax {
	/*font-size: 1.3em !important;*/
}


iframe {
	display: block;
	width: 100vw;
	height: 90vh;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0 none;
	box-sizing: border-box;
	background-color: #BFDDED;
}

/* hyperlink appearance */

a.highlight:visited, a.highlight2:visited, a.head:visited {
	color: #000000;
	text-decoration: none;
}
a.highlight:link, a.highlight2:link, a.head:link {
	color: #000000;
	text-decoration: none;
}
a.highlight:active, a.highlight2:active, a.head:active {
	color: #000000;
	text-decoration: none;
}
a.highlight:hover, a.highlight2:hover, a.head:hover {
	color: #000000;
	text-decoration: underline;
}

/* default table style */

table {
	/*margin-left: auto;
	margin-right: auto;*/
	border: none;
	border-spacing: 0px;
	border-collapse: collapse;
	margin-left: 0;
}

caption {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2px;
	font-weight: bold;
	border: none;
	border-spacing: 0px;
}

/* same as header/container without left alignments */
#popup1 {
	padding: 5px;
	background-color: #BFDDED;
}

#popup2 {
	padding:10px;
	background-color:#FFF;
}

#container {
	padding:10px;
	text-align:left;
	background-color:#FFF;
}


#header {
	padding: 5px;
	margin-bottom: 5px;
	background-color: #BFDDED;
}


#header table {
	border: none;
	border-spacing: 0px;
	margin-left: 0;
}

#content {
	background-color: #dddddd;
	margin: 0px;
	text-align:left;
	width: auto;
	padding: 10px;
}

/* make sure floating imgs do not poke outside div */
#content:after {
	content: '';
	display: block;
	clear: both;
}

/* used for login page */
#contentall {
	background-color: #dddddd;
	width: auto;
	text-align:left;
	padding: 20px;
	margin-top: 10px;
}

#footer {
	padding: 10px;
	margin-top: 10px;
	background-color: #C4E786;
	clear: both;
}

.bigcurve {
	border-radius:10px;
}

.medcurve {
	border-radius:5px;
}

#leftnav {
	margin: 0px;
	padding: 5px;
	background-color: #527BB4;
	float: left;
	width: 130px;
}

#leftnav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#leftnav ul li {
	text-align:left;
}

#leftnav ul li a {
	font-size: 90%;
	display: block;
	color: #eeeeee;
	padding: 1px 4px 1px 8px;
	text-decoration: none;
}

#leftnav ul li a span {
	font-weight: bold;
	padding: 5px 4px 4px 4px;
	color: #ff0000;
	background-color: #ffffff;
}

#leftnav ul li a:hover {
	font-size: 90%;
	/*color: #000000;*/
	text-decoration: none;
	background-color: #6AA0EA;
}

#leftnav ul li a:visited {
	font-size: 90%;
	color: #eeeeee;
}

#leftnav ul li a.selected {
	font-size: 90%;
	color: #000000;
	text-decoration: none;
	background-color: #6AA0EA;
}

#leftnav ul li a.selected:hover {
	font-size: 90%;
	color: #000000;
	text-decoration: none;
	background-color: #6AA0EA;
}

.navTitle {
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 4px;
	text-align:left;
	font-weight: bold;
	font-size: 100%;
	text-decoration: underline;
	color: #ffffff;
}

.button {
	background: lightblue;
	border: 2px solid #bbb;
	border-radius: 3px;
	color: #333;
	font: bold 15px Arial;
	padding: 4px;
	text-align: center;
	text-shadow: 0 1px 0 #fff;
}

.button:hover {
	background: darkblue;
	color: #fff;
	text-decoration: none;
}

td {
	text-align: center;
	margin: 0;
	padding: 2px;
	border: 1px solid black;
	background-color: #eeeeee;
}

td.data {
	padding: 6px;
}

td.noleft {
	text-align: center;
	margin: 0;
	padding: 2px;
	border: 1px solid black;
	border-left: none;
	background-color: #eeeeee;
}

td.noright {
	text-align: center;
	margin: 0;
	padding: 2px;
	border: 1px solid black;
	border-right: none;
	background-color: #eeeeee;
}

td.notop {
	text-align: center;
	margin: 0;
	padding: 2px;
	border-top-style: dashed;
}

td.nobottom {
	text-align: center;
	margin: 0;
	padding: 2px;
	border-bottom-style: dashed;
}

td.notopbottom {
	text-align: center;
	margin: 0;
	padding: 2px;
	border-top-style: dashed;
	border-bottom-style: dashed;
}

td.noleftright {
	text-align: center;
	margin: 0;
	padding: 2px;
	border: 1px solid black;
	border-left: none;
	border-right: none;
	background-color: #eeeeee;
}

/* page layout classes */

table.pagelayout {
	border: none;
	border-spacing: 0px;
	margin: 0;
	padding: 0;
	width: 100%;
}

table.layout {
	margin-left: auto;
	margin-right: auto;
	border: none;
	border-spacing: 0px;
	/*margin: 0;
	padding: 0;*/
	/*width: 100%;*/
}

table.layoutleft {
	border: none;
	border-spacing: 0px;
	margin-left: 0;
}

.layoutleftpad {
	border: none;
	border-spacing: 2px;
	margin-left: 0;
	border-collapse: separate;
}

table.figure {
	border: 1px solid black;
	border-spacing: 0px;
	margin-left: 0;
}

td.figure {
	border: 1px solid black;
	border-spacing: 0px;
	background-color: #ffffff;
	padding: 10px;
}

td.comment {
	padding: 0.5em;
	border: 1px dashed #2f6fab;
	color: black;
	background-color: #f9f9f9;
	line-height: 1.1em;
	text-align: left;
	vertical-align: top;
}

/* row/col used for getting equal heights for access page: */

.row {
	display: flex; /* equal height of the children */
}

.col {
	flex: 1; /* additionally, equal width */

	padding: 1em;
}

.hintcontent, .popup {
	background-color: #fff5c1;
	border: none;
	padding: 5pt;
	vertical-align: top;
	border-spacing: 0px;
}

.answercontent, .popup2 {
	background-color: #92C3FF;
	border: none;
	padding: 5pt;
	vertical-align: top;
	border-spacing: 0px;
}

td.head {
	margin: 0;
	padding: 2px;
	background-color: #4B6FA4;
	color: #ffffff;
	font-weight: bold;
}

td.headlite {
	background-color: #4B6FA4;
	color: #ffffff;
	font-weight: bold;
}

td.headliteright {
	background-color: #4B6FA4;
	color: #ffffff;
	font-weight: bold;
	text-align: right;
}

td.headleft {
	background-color: #4B6FA4;
	color: #ffffff;
	font-weight: bold;
	text-align: left;
}

td.headright {
	background-color: #4B6FA4;
	color: #ffffff;
	font-weight: bold;
	text-align: right;
}

td.headred {
	background-color: #ff8e8e;
	font-weight: bold;
}

td.subhead {
	background-color: #5882C1;
	color: #ffffff;
	font-weight: bold;
}

td.subheadleft {
	background-color: #5882C1;
	color: #ffffff;
	font-weight: bold;
	text-align: left;
}

td.subheadright {
	background-color: #5882C1;
	color: #ffffff;
	font-weight: bold;
	text-align: right;
}

.cell {
	background-color: #DDDDDD;
	color: #000000;
}

.cellleft {
	background-color: #DDDDDD;
	color: #000000;
	text-align: left;
}

.cellright {
	background-color: #DDDDDD;
	color: #000000;
	text-align: right;
}

.top {
	background-color: #EEEEEE;
	vertical-align: top;
}

.middle {
	vertical-align: middle;
}

.celltop {
	background-color: #DDDDDD;
	color: #000000;
	vertical-align: top;
}

td.semester1 {
	background-color: #C2E2FF;
	color: #623C81;
	font-weight: bold;
}

td.semester2 {
	background-color: #B9FFCE;
	color: #623C81;
	font-weight: bold;
}

td.highlight {
	/*background-color: #0081CC;*/
	background-color: #ffcc33;
	color: #000000;
}

/* question browser */
td.Avail {
	background-color: #dddfff;
}

/*
td.qselect {
	font-size: 9pt;
	padding: 2px;
	background-color: #dddfff;
	color: #ffffff;
}
*/

td.qselect1 {
	font-size: 9pt;
	padding: 2px;
	background-color: #cc0000;
	color: #ffffff;
}

td.qselect2 {
	font-size: 9pt;
	padding: 2px;
	background-color: #00cc00;
	color: #ffffff;
}

.pass {
	background-color: #aaffaa;
	font-weight: bold;
}

.border {
	background-color: #ffcc00;
	font-weight: bold;
}

.fail {
	background-color: #ff5b5b;
	font-weight: bold;
}

.exclusion {
	color: #ffffff;
	background-color: #6193FF;
	font-weight: bold;
	/*padding: 0;
	margin: 0;*/
	/*font-size: 120%;*/
}

td.questiontitle {
	background-color: #fde1e1;
	padding-left: 10px;
	padding-right: 10px;
}

td.question {
	background-color: #ddffd9;
}

td.history {
	text-align: left;
	background-color: #FFfBb4;
}

.tick {
	color: #65a859;
}

.cross {
	color: #ff5b5b;
}

/* GREEN */

.green {
	background-color: #A4FFA4;
}

.greenleft {
	text-align: left;
	background-color: #A4FFA4;
}

.brightgreen {
	background-color: #00FF00;
}

.palegreen {
	background-color: #D7FFDE;
}

.palegreenleft {
	text-align: left;
	background-color: #D7FFDE;
}

.darkgreen {
	background-color: #008000;
}

.darkred {
	background-color: #d00000;
}

/* AMBER */

.brightamber {
	background-color: #FF8000;
}

.amber {
	background-color: #FF9747;
}

.paleamber {
	background-color: #FFB694;
}


/* RED */

.red {
	background-color: #FF7C7C;
}

.redleft {
	text-align: left;
	background-color: #FF7C7C;
}

.brightred {
	background-color: #FF0000;
}

.palered {
	background-color: #FFC3C3;
}

.paleredleft {
	text-align: left;
	background-color: #FFC3C3;
}

/* BLUE */

.blue {
	background-color: #438BFF;
}

.brightblue {
	background-color: #0829FF;
}

.paleblue {
	background-color: #A2C0FF;
}

.orange {
	background-color: #FF9747;
}

.yellow {
	background-color: #FFEB13;
}

.yellowleft {
	text-align: left;
	background-color: #FFEB13;
}

td.layout {
	background-color: transparent;
	border: none;
}

td.layoutleft {
	background-color: transparent;
	text-align: left;
	border: none;
}

td.layouttop {
	background-color: transparent;
	vertical-align: top;
	border: none;
}

td.layoutlefttop {
	background-color: transparent;
	vertical-align: top;
	text-align: left;
	border: none;
}

td.nblayout {
	background-color: transparent;
	vertical-align: top;
	border: none;
	padding: 0px;
	margin: 0px;
	line-height: 6pt;
}

td.nblayoutleft {
	background-color: transparent;
	vertical-align: top;
	text-align: left;
	border: none;
	padding: 0px;
	margin: 0px;
}

td.pad15 {
	padding: 15px;
}

.layoutleftred {
	background-color: transparent;
	vertical-align: top;
	text-align: left;
	border: none;
	color: #ff0000;
}

.debug {
	vertical-align: top;
	text-align: left;
	font-size: small;
}

td.lefttop {
	vertical-align: top;
	text-align: left;
}

td.layoutright {
	background-color: transparent;
/*	vertical-align: top;*/
	text-align: right;
	border: none;
}

td.nomargin {
	padding: 0px;
}

/* other tag classes */

img {
	border: none;
}

input {
	color: #000000;
}

textarea {
	font-family: monospace;
	background-color: #eeeeee;
}

textarea.python {
	box-sizing: border-box;
	font-family: monospace;
	background-color: #eeeeee;
	resize: none;
}

select {
	background-color: #eeeeee;
}

pre {
	font-family: monospace;
	font-size: 120%;
}

hr.dashed {
	border-top: 1px dashed #000000;
	border-bottom: 1px dashed #000000;
	color: #000000;
	background-color: transparent;
	height: 2px;
}

hr {
	color: #000000;
	border: 1px solid black;
}

hr.nomargin {
	margin: 0px;
	padding: 0px;
}

p.spacer {
	margin: 8px;
}

ul.plain {
	padding-left:0;
	list-style: none;
}

ul.noindent {
	/*padding-left:5px;*/
	list-style: inside;
	text-indent: -1em;
	padding-left: 1em;
}

/* generic format classes */

.section {
	font-size: 10pt;
	background-color: #ffbbee;
	padding: 5px;
	border: none;
}

.topic {
	font-size: 10pt;
	background-color: #ddffd9;
	border: none;
	padding: 5px;
}

.subtopic {
	font-size: 10pt;
	background-color: #fff9d5;
	padding: 5px;
	border: none;
}

.qhead {
	font-size: 9pt;
	background-color: #ADDEFF;
	padding: 5px;
	border: 1px solid black;
	font-weight: bold;
	text-align: left;
}

#logindetails {
	position: fixed;
	border: 1px solid black;
	width: 350px;
	margin: 0 auto;
	right: 0;
	left: 0;
	top: 0;
	background-color: #D1DCE2;
	font-size: 9pt;
}

.qside {
	font-size: 9pt;
	background-color: #CCEDFF;
	padding: 5px;
	border: 1px solid black;
	font-weight: bold;
	text-align: right;
}

.qbody {
	font-size: 9pt;
	background-color: #D8FFDD;
	padding: 5px;
	border: 1px solid black;
	text-align: left;
}

.centered {
	text-align: center;
}

.centerdiv {
	width: 500px;
	margin: 0 auto;
	background: #000;
	color: #fff;
}

.dump_var {
	font-size: 8pt;
	background-color: #C6FFEB;
	text-align: left;
}

.left {
	text-align: left;
}

.spad {
	padding: 5px;
	font-size: large;
}

.floatright {
	float: right;
}

.floatleft {
	float: left;
}

.huge {
	font-size: 200%;
}

.large {
	font-size: large;
}

.largecentered {
	font-size: large;
	text-align: center;
}

.largeleft {
	font-size: large;
	text-align: left;
}

.largeright {
	font-size: large;
	text-align: right;
}

.medium {
	font-size: medium;
}

.mediumbold {
	font-size: medium;
	font-weight: bold;
}

.darkgrey {
	background-color: #C4C4C4;
}

.grey {
	background-color: #e7e7e7;
}

.xsmall {
/*	margin: 0;*/
	padding: 0;
	font-size: x-small;
}

.xsmall a {
	display: block;
	/*padding: 1px 4px 1px 4px;*/
	padding: 2px;		/* must match default padding for cells */
	font-size: x-small;
}

.xsmall a:hover {
	color: #000000;
	background-color: #ffcc33;
	text-decoration: none;
}

.pad {
	border: none;
	background-color: transparent;
	padding: 5px;
	text-align: center;
	vertical-align: middle;
}

.selector_lo {
	border: 1px solid black;
	background-color: #eeeeee;
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

.selector_lo a.fill:hover {
	background-color: orange;
	text-decoration: none;
}

.selector_lo div.dtable {
	display:table;
	height:100%;
	text-align: center;
}

.selector_lo div.dcell {
	display:table-cell;
	vertical-align:middle;
	text-align: center;
}

.selector_lo a.fill {
	display:block;
	height:100%;
	padding: 5px;
	text-decoration: none;
}

.hi {
	height: 100%;
	padding: 0px;
	border: 1px solid black;
	background-color: orange;
}

.hi a {
	display:block;
	height: 100%;
	padding: 5px;
	text-decoration: none;
}

.hi a:hover {
	display:block;
	background-color: #eeeeee;
	height: 100%;
	padding: 5px;
	text-decoration: none;
}

.lo {
	height: 100%;
	padding: 0px;
	border: 1px solid black;
	background-color: #eeeeee;
}


.lo a {
	display:block;
	height: 100%;
	padding: 5px;
	text-decoration: none;
}

.lo a:hover {
	display:block;
	background-color: orange;
	height: 100%;
	padding: 5px;
	text-decoration: none;
}

.greenbox {
	padding: 0;
}

.greenbox a {
	display: block;
	background-color: #a4ffa4;
	padding: 2px;		/* must match default padding for cells */
}

.greenbox a:hover {
	color: #000000;
	background-color: #ffcc33;
	text-decoration: none;
}

.redbox {
	padding: 0;
	background-color: #ffA4A4;
}

.redbox a {
	display: block;
	background-color: #ffA4A4;
	padding: 2px;		/* must match default padding for cells */
}

.redbox a:hover {
	color: #000000;
	background-color: #ffcc33;
	text-decoration: none;
}

.typebox {
	text-align: left;
	text-decoration: underline;
}

.successbox {
	text-align: left;
	border: 2px solid green;
	margin: 12px;
	font-size: 130%;
	color: #000000;
	background-color: #ffffff;
}

.errorbox {
	text-align: left;
	border: 2px solid red;
	padding: 10px;
	font-size: 130%;
	color: #000000;
	background-color: #ffffff;
}

.xsmallcentered {
	font-size: x-small;
	text-align: center;
}


.whitebig {
	font-size: 250%;
	color: #FFF;
	letter-spacing: 1px;
}

.whitemed {
	font-size: 150%;
	color: #FFF;
	line-height:1;
}

.whitebox {
	text-align: left;
	border: 1px solid gray;
/*	margin: 12px;*/
	background-color: #ffffff;
	width: 200px;
}

.small {
	font-size: small;
}

.smallcentered {
	font-size: small;
	text-align: center;
}

.white {
	color: #ffffff;
}

.whitebold {
	color: #ffffff;
	font-weight: bold;
}

.preblock {
	font-family: monospace;
	font-size: 120%;
	color: #000000;
	background-color: #e7e7e7;
}

.bold {
	font-weight: bold;
}

.boldred {
	color: #ff0000;
	font-weight: bold;
}

.smallbold {
	font-size: small;
	font-weight: bold;
}

.boldcentered {
	text-align: center;
	font-weight: bold;
}

.largeboldcentered {
	text-align: center;
	font-weight: bold;
	font-size: 160%;
}

.largeboldleft {
	text-align: left;
	font-weight: bold;
	font-size: 180%;
}

h1 {
	font-size: 200%;
	font-weight: bold;
	color: #000000;
	margin: 10px;
}

h2 {
	font-size: 160%;
	color: #4B6FA4;
	font-weight: bold;
	/*margin-top: 15px;*/
}

h3 {
	font-size: 130%;
	color: #ffffff;
	background-color: #4B6FA4;
	font-weight: bold;
	margin-top: 15px;
	margin-bottom: 0px;
	padding-left: 10px;
}

h4 {
	font-size: 100%;
	color: #4B6FA4;
	font-weight: bold;
	margin-top: 5px;
}

h5 {
	font-size: 90%;
	color: #4B6FA4;
	font-weight: bold;
	margin-top: 5px;
}

h6 {
	font-size: 70%;
	color: #4B6FA4;
	font-weight: bold;
}

.title {
	font-size: 200%;
	line-height: 1;
	color: #002455;
	text-align: left;
}

.assignment_title, .assessment_title {
	padding: 5px;
	margin-bottom: 5px;
	background-color: #BFDDED;
	font-size: 200%;
	line-height: 1;
	color: #002455;
	text-align: left;
	border: none;
	border-left: 1px solid black;
}

.assignment_head, .assessment_head {
	padding: 5px;
	margin-bottom: 5px;
	background-color: #C6E2F1;
	font-size: 150%;
	line-height: 1;
	color: #002455;
	text-align: left;
	border: none;
	border-left: 1px solid black;
}

.assignment_body, .assessment_body {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	font-size: 150%;
	margin-bottom: 10px;
	padding: 5px 10px 1px;
	background-color: #C4EDE7;
	/*background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.15));*/
	border: none;
	border-left: 1px solid black;
}

.assessment_title a {
	font-size: 100%;
	color: #006090;
	text-decoration: none;
	background-color: #BFDDED;
}

.assessment_body a {
	font-size: 100%;
	color: #006090;
	text-decoration: none;
	background-color: #C4EDE7;
}

a {
	color: #006090;
	background-color: inherit;
	text-decoration: none;
}

.head a:link {
	color: #ffffff;
	text-decoration: underline;
}

.head a:visited {
	color: #ffffff;
	text-decoration: underline;
}

.subhead, .subheadleft a:link {
	color: #ffffff;
}

.subhead, .subheadleft a:visited {
	color: #ffffff;
}

a:hover {
	text-decoration: underline;
}

.content {
	background-color: transparent;
	vertical-align: top;
	border: none;
	padding-right: 3px;
	padding-left: 3px;
	font-size: 90%;
}

.topleftZZ {
	border: none;
	font-size: 120%;
	text-align: left;
	vertical-align: top;
	margin: 0;
	padding-top: 4px;
	padding-bottom: 0;
	padding-right: 4px;
	background: #ffffff url('../pics/topbar.jpg') repeat-x scroll top left;
	color: #000000;
}

.topZZ {
	border: none;
	font-size: 120%;
	text-align: right;
	vertical-align: top;
	margin: 0;
	padding-top: 4px;
	padding-bottom: 0;
	padding-right: 4px;
	background: #ffffff url('../pics/topbar.jpg') repeat-x scroll top left;
	color: #000000;
}

img.equation {
	vertical-align: middle;
}

/* ZZ not used?
.banner {
	width: 80%;
	margin: auto;
	padding: 10px;
}

.bannerleft {
	width: 25%;
	float: left;
}

.bannerright {
	margin-left: 15%;
}
*/

.nowrap {
	white-space: nowrap;
}

.h100 {
	height: 100%
}

fieldset {
	border: 5px solid #1F497D;
	border-radius: 5px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: left;
}

legend {
	background: #1F497D;
	color: #fff;
	padding: 5px 10px 5px 10px ;
	font-size: 20px;
	border-radius: 5px;
	/*box-shadow: 0 0 0 5px #ddd;*/
	margin-left: 10px;
	width: auto;
}

.s1 {
	background-color: #F2B2B2;
}

.s2 {
	background-color: #FFD6CC;
}

.s3 {
	background-color: #FFFFDC;
}

.s4 {
	background-color: #E0FFC5;
}

.s5 {
	background-color: #B2FFB2;
}

/* ZZ not used delete
.w10 {
	width: 10;
}

.w20 {
	width: 20;
}

.w40 {
	width: 40;
}

.w50 {
	width: 50;
}

.w60 {
	width: 60;
}

.w100 {
	width: 100;
}
*/

.p5 {
	width: 5%;
}

.p10 {
	width: 10%;
}

.p20 {
	width: 20%;
}

.p40 {
	width: 40%;
}

.p50 {
	width: 50%;
}

.p60 {
	width: 60%;
}

.p80 {
	width: 80%;
}

.p100 {
	width: 100%;
}

.masq {
	border: 3px solid black;
	background-color: #3E42B4;
	color: #ffffff;
	font-size: 200%;
	text-align: left;
}

.masq a {
	color: yellow;
}

.code {
	color: red;
	background-color: white;
}

.inv {
	display: none;
}

/* size the answer box to be the size of the text */
.answerbox {
	float: left;
}

/* Ace editor */
#editor {
	/*position: absolute;*/
	width: 100%;
	height: 200px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.icon-green {
	color: #009900;
}

.icon-amber {
	color: #FF9747;
}

.icon-red {
	color: #FF7C7C;
}

/* nice buttons */
.sandboxbutton {
	font-size: 1.2em;
        box-shadow:inset 0px 1px 0px 0px #cf866c;
        /*background-color: #008000;*/
        border-radius:5px;
        border:1px solid #14942a;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        padding:6px 24px;
        text-decoration:none;
        text-shadow:0px 1px 0px #854629;
}
.sandboxbutton:hover {
	text-decoration: none;
        /*background-color: #00d400;*/
	filter: brightness(150%);
}
.sandboxbutton:active {
	text-decoration: none;
        position:relative;
        top:1px;
}