body {
	background-image: url("assets/images/2027grid-e.jpg");
	background-color:#11274B;
	color: #333;
	font-family: 'Nunito Sans', sans-serif;
	margin: 0;
	padding: 0;
}

#header {
	margin: 0px max(2px, 50% - 480px);
	padding-left: min(32px, 2%);
	background-color: #134a8c;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap-reverse;
	overflow: hidden;
}

.content {
	margin: 0px max(2px, 50% - 480px);
	padding: 32px min(32px, 2%);
	background-color: #fefefe;
	overflow-x: auto;
}

/* Color Scheme related things */

p, li {
	color: #333;
	font-size: 16px;
}

h1 {
	color: hsl(22, 85%, 57%);
	font-weight: bold;
	font-size: 1.7em;
}

h2 {
	color: #ee7834;
	background-color: #fff;
	border-radius: 5px;
	border: 1px solid #ee7834;
	padding: 20px;
	text-align: center;
	font-weight: bold;
	font-size: 1.5em;
	margin: 0px 0px 20px 0px;
}

h3 {
	color: #ee7834;
	font-weight: normal;
	font-size: 1.3em;
}

h4 {
	color: #ee7834;
	font-weight: bold;
}


/* Callout Boxes should really be flex */
div.content div.calloutarea {
	display: flex;
	column-gap: 2%;
	justify-content: space-between;
	width: 100%;
}

@media (max-width: 800px) {
div.content div.calloutarea {
    display: block;
	width: 100%;
  }
}

div.content div.calloutarea > div {
	flex: 3;
}

div.content div.calloutarea > div.callout {
	background-color: #fefefe;
	border-radius: 5px;
	border: 1px solid #1e3453;
	flex: 2;
	padding: 10px;
}

div.content div.calloutarea > div.callout h3{
	color: #1e3453;
	font-weight: bold;
	background-color: #f8f8ff;
	border-bottom: 1px solid #C8CAD9;
	border-radius: 5px 5px 0px 0px;
	margin: 0px;
	padding: 20px;
}

/* Step 1,2,3,4 for Proreg, Artist Alley, etc. */
table.steptable {
	border-collapse: collapse;
	max-width: 924px;
	margin-left: auto;
	margin-right: auto;
}

table.steptable td.step {
	font-size:13px;
	border: 1px solid black;
	padding: 5px;
	color: #1e3453;
	background-color: #e9f3fa;
}

table.steptable td.step_selected {
	font-size:13px;
	border: 1px solid black;
	padding: 5px;
	color: #fff;
	background-color: #ee7834;
}

.even {
	background-color: #ccccff;
}

.odd {
	background-color: #ddddff;
}

/* Form and buttons, front page display */
form.main_code fieldset {
	border: none;
	padding-left: 4px;
	padding-right: 4px;
}

form.main_code fieldset legend {
	font-weight: bold;
}

form.main_code button.primary {
	cursor: pointer;
	padding: 8px 20px;
	background: #ee7834;
	border:1px solid rgb(244, 121, 64);
	color: #fff;
	border-radius: 5px;
}

form.main_code button.primary:hover {
	background-color: rgb(230, 101, 41);
}

/* When someone succeeds in the form, this is the "here is what you submitted" table */
div.tablesuccess table {
	padding-left: 20px;
}

div.tablesuccess td.col1 {
	font-weight: bold;
	padding-left: inherit;
}

div.tablesuccess td {
	padding-left: 20px;
}


/* Override Rules */
.content > div {
	display: block;
}

td {
	vertical-align: top;
}

abbr[title], acronym[title] {
    border-bottom: 1px dotted;
}

#copyright p {
	color:#fefefe;
	display: flex;
	justify-content: center;
}