/* TODO move to mobile stylesheet */
@media screen and (max-width: 500px)
{
    html #main
    {
        display: block;
    }
    html #register 
    {
        box-sizing: border-box;
        width: 100%;
    }
    html header
    {
        padding: 10px;
    }
}




* { margin: 0; padding: 0; }
html, body { height: 100%; }
input { padding: 1px; }
h1, h2, h3, h4 { margin-bottom: 5px; }
#preload { position: absolute; top: -1000px; left: -1000px; }
pre, body, input, select, textarea { font: 10px Verdana, sans-serif; }
pre, body { font-size: 14px; }
body
{
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 15px;
    background-color: #ccc;
}
#container
{
    background-color: #0e8ebb;
    max-width: 1200px;
    margin: auto;
    min-height: 100%;
}
.strike { text-decoration: line-through; }
.block { display: block; }
.pre { white-space: pre-wrap; }
a { text-decoration: none; }
a.underline { text-decoration: underline; }
a:hover { text-decoration: underline; }
a.button:hover { text-decoration: none; }
p{ padding: 5px 0;}

/*ul, ol { list-style: none } */
li { margin-bottom: .5em; vertical-align: 50% }
select { min-width: 12em; }
.textright { text-align: right; }
.textleft { text-align: left; }
.justify { text-align: justify; }
.separate { margin-top: 8px; }
.relative, li.date { position: relative; }

.disable {
   pointer-events: none;
   cursor: default;
   color: #AAAAAA;
   font-weight: bold;
}

select.date 
{ 
	min-width:0;
	width:auto;
}
form.event select { min-width: 2em; }
.highlight
{
	background-color: #ffa !important;
	color: black !important;
	font-weight: bold !important;
}
dl { line-height: 1.5em; }
form.standard dl { display: inline-block; width: 100%; }
dt.separate, dd.separate, li.separate
{ 
    border-top: 1px solid #ccc;
    padding-top: 4px;
}
dl sup { line-height: .5em; }
dt
{
    margin: 0;
    padding-right: 4px;
    float: left;
    font-weight: bold;
    clear: left;
}
dd
{
    float: left;
    min-height: 1.5em;
    margin: 0;
    padding: 0;
}
dd.FT {clear:left; min-height: 0; } /* for displaying pre text */
dd.FT pre { padding: 0; }
dl.colon dt:after { content: ": "; }
dl.colon dt.nocolon:after { content: ""; }
dl.dash dt:after { content: " — "; }
dl.info dt { clear: none; }
dl.info dd { margin-right: 5px; }
dl.info { clear: left; }
#content dd.pre, #content dd pre, div#content form.standard dd ul
{
	clear: left;
    margin: 1em;
    display: block;
}

dl.second_dl {
    border-left: 1px solid #CCCCCC;
    padding-left: 40px;
    vertical-align: top;
}
dl.first_dl
{
	padding-right: 40px;
}

div#content form.standard dd ul li
{
	margin-top:0; 
	margin-bottom:0	
}


/* fun with spinners*/
iframe {background: transparent url(../images/loading.gif) no-repeat scroll 50% 50%;}
object /* this is for product display */
{
    background: white url(../images/loading.gif) no-repeat scroll 50% 50%;
    width: 600px;
    min-height: 300px;
}
/* disable spinner - text plain is transparent in moz. is also disabled in js */
object[type="text/plain"]
{
    background: white url(../images/frontpage_background.png) no-repeat scroll 50% 50%;
}

/* a bunch of convenience classes */
.center, #content form.standard fieldset table td.center { text-align: center; }
.blockcenter { margin-left: auto !important; margin-right: auto !important; }
.hide, .screenhide /* important, override any other specificity */
{
    display: none !important;
}
.hide2
{
    opacity: 0;
    z-index: -1;
}
.hide508 /* this is an attempt to use a style rule that will hide this element from visual rendering
			while still displaying it in screen readers.  Screen readers can be surprisingly varied 
			in how they honour screen media types.  Obviously anyone disabling screen stylesheets
			will not have an issue.  http://www.access-matters.com/screen-reader-test-results/ */
{
	position:absolute; 
	left:0px; 
	top:-500px; 
	width:1px; 
	height:1px; 
	overflow:hidden;
}

.clear {clear: both;}
.float { float: left; } /* default float */
.floatright { float: right; }
.spacer{padding-top: 15px;}
.click { cursor: pointer; }
.last   { border: none!important; }
/* This one may not need to be a hard override - is only used on a few fields in event right now
   Might be better to rely on simple specificity. */
.inline
{
	display: inline !important;
    vertical-align: middle !important;
}

.disabled
{
    background-color: #ddd;
    color: black;
}
.errors
{
    color: red !important;
}

a img { border: none; }

.popuphelp:hover 
{
    cursor: help;
}
header
{
    background-color: #0a8fbc;
    color: white;
    padding: 20px 100px 20px 40px;
}

h1 
{
    font-size: 22px; 
    line-height: 26px;
}
h2 
{
    line-height: 36px;
    font-size: 32px; 
}
h3
{
    color: #0a8fbc;
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 0;
}
h4
{
    font-size: 14px;
    margin-top: 20px;
}
h3:first-of-type { margin-top: 0; }

h1,h2,h3
{
    font-weight: normal;
}

header p
{
    font-size: 12px;
    line-height: 20px;
    margin-right: 20px;
    margin-bottom: 9px;
}
.register
{
    display: block;
    text-align: center;
    /*padding: 20px 0; think I'll let the user decide this */
}
#main .register .button { float: none; }
#register
{
    border-radius: 8px;
    background-color: #0c7394;
    padding: 4px 140px 4px 20px;
    position: relative;
    min-height: 20px;
    margin-right: 0;
    overflow: auto;
}
#register a { color: white; }
#register a:last-of-type
{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 8px;
    background-color: #01455c;
    padding: 4px 30px;
}
#register a:last-of-type::after
{
    content: '▶';
    color: #7ea0ac;
    background-color: transparent;
    position: absolute;
    right: 15px;
    top: 13px;
    line-height: 0;
}
#register a:last-of-type:hover
{
    background-color: #11556c;
    text-decoration: none;
}

#navlist
{
    font-size: 14px;
    text-align: right;
    background-color: #0c7394;
}
#navlist li
{
    padding: 9px 15px;
    display: inline-block;
    margin: 0;
}
#navlist li a
{
    color: #c8e0e8;
}

#main
{
    display: flex;
    padding-bottom: 218px;
    position: relative;
}

#content, #section_MAIN
{
    flex: 3;
    min-width: 300px;
    padding: 20px 40px;
    background-color: white;
    color: #333;
}
#content p,
#content ul,
#section_MAIN p,
#section_MAIN ul 
{ margin-bottom: 0; }

#content h3,
#section_MAIN h3 
{ clear: both; }

#content ul, 
#content ol,
#section_MAIN ul, 
#section_MAIN ol 
{ margin-top: 10px; }

#content a.button, 
#sidebar a.button,
#section_MAIN a.button, 
#section_SIDE a.button
{
    float: left;
    padding: 8px 20px;
    background-color: #ccc;
    color: #333;
    margin-bottom: 30px;
    border-radius: 8px;
    font-size: 14px;
}
#content a.button:hover, 
#sidebar a.button:hover,
#section_MAIN a.button:hover, 
#section_SIDE a.button:hover
{ background-color: #1484c5; color: white; }

#sidebar a.button,
#section_SIDE a.button
{ float: none; }

#sidebar,
#section_SIDE
{
    flex: 1;
    min-width: 200px;
    background-color: #eee;
    color: #333;
    padding: 20px;
}
#content p,
#sidebar p,
#section_MAIN p,
#section_SIDE p
{
    font-size: 14px;
    line-height: 24px;
}

#content ul,
#content ol,
#section_MAIN ul,
#section_MAIN ol
{
    font-size: 14px;
    line-height: 18px;
    margin-left: 20px;
}
#sidebar .location, 
#section_SIDE .location 
{ color: #333; }
#sidebar a, 
#section_SIDE a 
{ color: #0a8fbc; }

footer  /* the footer is just empty space right now that could have been skipped, but that might change */
{
    border-top: 28px solid #0c7394;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #0e8ebb;
    color: white;
    padding: 10px 0;
    margin: 0;
    min-height: 170px;
    font-size: 10px;
}
footer ul { padding-left: 0; margin-left: 0; }
footer a, footer a:visited, footer a:hover { color: white; }
footer ul li { display: inline; }
footer ul li 
{
    padding: 0 7px 1px 3px;
    display: inline; 
    border-right: 1px solid white;
}
footer ul li:last-child { border: none; }

#edit
{
    display: block;
    text-align: center;
    background-color: white;
    font-size: 16px;
    padding: 4px;
}
#govnotice {
    padding: 0 10px;
    margin: 0 10px;
    text-align: justify;
    display: inline-block;
    color: #e0f1fc;
    font-size: 10px;
    width: 70%;
}