div#page-wrapper {
	font-size: 0.8em;
	margin-top: 20px;
}

div#navigation {
	float: left;
	margin-left: 10px;
}

div#navigation img {
	margin-bottom: 1px;
}

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

div#navigation ul a {
	font-weight: bold;
	text-decoration: none;
	display: block;
	padding: 10px 5px 10px 15px;
	width: 190px;
	background-color: #00609D;
	color: White;
	text-align: left;
	margin-bottom: 1px;
}

div#navigation ul a:hover {
	background-color: #EC8800;
}

div#navigation ul ul a {
	text-align: left;
	padding: 5px 5px 5px 30px;
	background-color: #0080D1;
	font-weight: normal;
	width: 175px;
}

div#navigation ul a.active {
	background-color: #EC8800;
	/*
	background-color: #14A836;
	*/
}

div#navigation p.userinfo {
	/* background-color: #FCFAD6; */
	margin: 0;
	padding: 0.1em;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	border: 2px solid #CFD39B;
	color: #EC8800;
}

div#navigation p.userinfo span {

}

div#content {
	margin-left: 250px;
	margin-top: 25px;
}

th {
	background: url(../images/background-th.gif) repeat-x bottom;
	padding: 0.5em 0 0.5em 2em;
	text-align: left;
	/* border-left: 1px solid #F19B21; */
	border-bottom: 1px solid #F19B21;
	border-right: 1px solid #FCC04A;
	border-top: 1px solid #FCC04A;
}

th a {
	color: Black;
	text-decoration: none;
	border-bottom: 1px dashed black;
}

th a:visited {
	color: Black;
}

th a:hover {
	border-bottom: 1px dashed #8A2C28;
}

table.data {
	border-top: 1px solid #CFD39B;
	border-left: 1px solid #CFD39B;
}

table.data td {
	padding: 0.25em;
	border-right: 1px solid #CFD39B;
	border-bottom: 1px solid #CFD39B;
}

table.data td.actions a {
	color: #8A2C28;
	font-weight: bold;
}

table.data td.total {
	font-weight: bold;
}

table.data td.actions a:visited {
	color: #8A2C28;
}

table.data td.actions a:hover {
	color: #00609D;
}

tr.alternaterow {
	background-color: #FFFEE2;
}

div.actionbar {
	margin: 1em;
	padding: 0 0 2em 0;
}

div.actionbar ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

div.actionbar li {
	background: url(../images/button-action-right.gif) no-repeat right top;
	float: left;
	margin-right: 20px;
}

div.actionbar a {
	display: block;
	background: url(../images/button-action-left.gif) no-repeat left top;
	padding: 2px 30px 5px 7px;
	color: White;
	font-weight: bold;
	text-decoration: none;
}

div.actionbar a:visited {
	color: White;
}

div.actionbar a:hover {
	color: White;
}

div#footer {
	clear: both;
	text-align: center;
	color: Gray;
	font-size: 90%;
	margin-top: 3em;
}

form {
	margin: 0;
	padding: 0.5em;
}

form p {
	padding: 0.25em;
}

fieldset {
	border: 0;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-left: 1em;
	padding-bottom: 1em;
	background: url(../images/background-fieldset.gif) #FCFAD6 repeat-x top;
	border-bottom: 3px solid #FCFAD6;
}

legend {
	color: #00841E;
	font-size: 1.4em;
	margin: 0;
	padding: 0;
}

label {
	display: block;
	width: 12em;
	float: left;
}

#form1 p {
	padding-left:0;
}

#form1 {
	padding:0;
}

label.radio {
	display: inline;
	float: none;
}

form p span.help {
	display: block;
	padding-left: 15em;
	font-size: 80%;
}

.required {
	color: #8A2C28;
	font-weight: bold;
}

div.halfblock {
	width: 45%;
	float: left;
}

div.confirm {
	text-align: left;
}

div.confirm p {
	font-style: italic;
}

span.required {
	padding: 0 0.1em 0 0.1em;
}

div.confirm input {
	padding: 0.25em 1.25em 0.25em 1.25em !important;
	padding: 0.25em;
	margin-right: 1em;
	color: White;
	font-weight: bold;
	border-top: 2px solid #8DD900;
	border-left: 2px solid #8DD900;
	border-bottom: 2px solid #36A200;
	border-right: 2px solid #36A200;
	background: url(../images/background-confirm-button.gif) repeat-x;
}

div.confirm button {
	padding: 0.25em 1.25em 0.25em 1.25em !important;
	padding: 0.25em;
	margin-right: 1em;
	color: White;
	font-weight: bold;
	border-top: 2px solid #8DD900;
	border-left: 2px solid #8DD900;
	border-bottom: 2px solid #36A200;
	border-right: 2px solid #36A200;
	background: url(../images/background-confirm-button.gif) repeat-x;
	width: 45%;
}

div.confirm input.cancel {
	border-top: 2px solid #EC8E8A;
	border-left: 2px solid #EC8E8A;
	border-bottom: 2px solid #B25450;
	border-right: 2px solid #B25450;
	background: url(../images/background-cancel-button.gif) repeat-x;
	width: 45%;
}

div.confirm input.important {
	border-top: 2px solid #99ACD0;
	border-left: 2px solid #99ACD0;
	border-bottom: 2px solid #5F7296;
	border-right: 2px solid #5F7296;
	background: url(../images/background-important-button.gif) repeat-x;
}

.tight {
	margin: 0;
	padding: 0;
}

.hard {
	clear: both;
}

p.info {
	border: 1px solid #CFD39B;
	padding: 20px 10px 20px 60px;
	width: 80%;
	font-size: 1.2em;
	font-weight: bold;
	background: url(../images/icon-info.gif) #FFFDB7 no-repeat 10px 10px;
}

div.error, div.errorLogin {
	border: 1px solid #AE6865;
	background: #FFEDE6 url(../images/icon-error.gif) no-repeat 10px 10px;
	padding: 20px 0 5px 60px;
	width: 80%;
	margin: 1em 0 1em 0;
	font-weight: bold;
	color:black;
}

div.errorLogin {
	width: 105px;
}

div.error p, div.errorLogin p {
	font-size: 1.2em;
	margin: 0;
	padding: 0;
}

div.error ul, div.errorLogin ul {
	margin: 0 0 0 1em;
	padding: 1em;
	list-style: decimal;
}

div.okay {
	border: 1px solid #00841E;
	background: #EBFFB0 url(../images/icon-okay.gif) no-repeat 10px 10px;
	padding: 20px 0 20px 60px;
	width: 80%;
	margin: 1em 0 1em 0;
	font-weight: bold;
}

div.okay p {
	font-size: 1.2em;
	margin: 0;
	padding: 0;
}

div.okay ul {
	margin: 0 0 0 1em;
	padding: 1em;
	list-style: decimal;
}

table.data th a.asc {
	background: url(../images/background-th-asc.gif) no-repeat top left;
	padding-left: 15px;
}

table.data th a.desc {
	background: url(../images/background-th-desc.gif) no-repeat top left;
	padding-left: 15px;
}

div.course {
	margin-top: 2em;
	width: 90%;
}

div.course div.cost {
	float: left;
	width: 60px;
	color: #8A2C28;
	border: 1px solid #8A2C28;
	margin: 0 0.5em 0 0;
	text-align: center;
	font-weight: bold;
}

div.course div.cost p {
	display: inline;
	margin: 0;
	padding: 0;
}

div.course div.cost span.hours {
	font-size: 2em;
	display: block;
	padding: 0.2em 0.2em 0 0.2em;
}

div.course div.cost span.price {
	font-size: 1.2em;
	display: block;
	background-color: #8A2C28;
	color: White;
	padding: 0.2em;
}

div.course div.description {
	border: 1px solid #CFD39B;
	margin-left: 70px;
	background: #FCFAD6 url(../images/background-fieldset.gif) repeat-x;
}

div.course div.title {
	background-color: White;
	border-bottom: 1px solid #CFD39B;
}

div.course div.description h2 {
	margin: 0;
	padding: 0.5em;
	color: black;
	line-height:1em;
}

div.course div.actionbar {
	float: right;
}

div.course div.description p {
	line-height: 150%;
	padding: 0.5em;
}

div.vcode {
	float: right;
	width: 250px;
}

div.homesplash {
	width: 500px;
	height: 200px;
	background: url(../images/home-splash.jpg) no-repeat;
	color: White;
	text-align: right;
}

div.homesplash h2 {
	padding-right: 1em;
	padding-bottom: 0;
	margin-bottom: 0;
	color: White;
	font-size: 2em;
	font-weight: normal;
}

div.homesplash ul {
	font-size: 1.2em;
	list-style-type: none;
	margin: 0;
	padding: 0 0 0 275px;
	text-align: left;
	line-height: 200%;
}

div.home-wrapper {
	width: 500px;
}

div.home-wrapper p {
	line-height: 150%;
}

div.home-wrapper div.actionbar {
	padding-left: 260px;
}

dl.resources {
	margin: 1em;
}

dl.resources dt {
	border-top: 1px solid #CFD39B;
	border-left: 1px solid #CFD39B;
	border-right: 1px solid #CFD39B;
	padding: 20px 10px 20px 60px;
	width: 300px;
	font-size: 1.2em;
	font-weight: bold;
}

dl.resources dt.file {
	background: url(../images/icon-file.gif) #FFFDB7 no-repeat 10px 10px;
}

dl.resources dt.url {
	background: url(../images/icon-url.gif) #FFFDB7 no-repeat 10px 10px;
}

dl.resources dd {
	width: 300px;
	background: #FFFDB7;
	border-bottom: 1px solid #CFD39B;
	border-left: 1px solid #CFD39B;
	border-right: 1px solid #CFD39B;
	margin: 0 0 2em 0;
	padding: 0 10px 10px 60px;
}

td.courselist ul {
	margin: 0;
	padding: 0 0 0 2em;
	list-style-type: none;
	line-height: 150%;
}

td.courselist ul li {
	padding-left: 1em;
}

div.course div.actionbar {
	padding-bottom: 0;
}

.show {
	display: block;
}

.hide {
	display: none;
}

.alert {
	background: #f00;
	color: #fff;
	margin-bottom: 20px;
	padding: 10px 20px;
}

.notice {
	background: #F8FFD8;
	border: 1px solid #9BC200;
	margin-bottom: 30px;
	padding: 7px 15px;
}

form.checkout {
  width: 30vw;
  min-width: 500px;
  align-self: center;
  box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
    0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
  border-radius: 7px;
  padding: 40px;
}

#payment-message {
  color: rgb(105, 115, 134);
  font-size: 16px;
  line-height: 20px;
  padding-top: 12px;
  text-align: center;
}

#payment-element {
  margin-bottom: 24px;
}

/* Buttons and links */

button:hover {
  filter: contrast(115%);
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}
.spinner {
  color: #ffffff;
  font-size: 22px;
  text-indent: -99999px;
  margin: 0px auto;
  position: relative;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.spinner:before,
.spinner:after {
  position: absolute;
  content: "";
}
.spinner:before {
  width: 10.4px;
  height: 20.4px;
  background: #5469d4;
  border-radius: 20.4px 0 0 20.4px;
  top: -0.2px;
  left: -0.2px;
  -webkit-transform-origin: 10.4px 10.2px;
  transform-origin: 10.4px 10.2px;
  -webkit-animation: loading 2s infinite ease 1.5s;
  animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
  width: 10.4px;
  height: 10.2px;
  background: #5469d4;
  border-radius: 0 10.2px 10.2px 0;
  top: -0.1px;
  left: 10.2px;
  -webkit-transform-origin: 0px 10.2px;
  transform-origin: 0px 10.2px;
  -webkit-animation: loading 2s infinite ease;
  animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}