@import url(/style/shared/registration.css);

/* FONT-FAMILY VARIABLES: Here are some font-family stacks to choose from: */
/* SANS-SERIF */
/* font-family: Arial, "Helvetica Neue", sans-serif; /* font-family: Arial, "Helvetica Neue", sans-serif; /* font-family: Arial, "Helvetica Neue", sans-serif; */
/* font-family: Tahoma, "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif; */
/* font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; */
/* font-family: Verdana, Geneva, sans-serif; */
/* SERIF */
/* font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; */
/* font-family: Cambria, Georgia, serif; */
/* font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; */
/* font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; */
/* MONOSPACED */
/* font-family: Monaco, Consolas, "Lucida Console", monospace;*/
/* font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; */

/* ROUNDED CORNERS are specified separately at the end of this stylesheet */

body {
	font-family: Arial, "Helvetica Neue", sans-serif;
	font-size: 12px;
}
.bold {
	font-weight:bold;
}
.italic {
	font-style:italic;
}
.clear {
	clear:both;
}
a:link {
	color: #0057a4;
}
a:visited, a:active, a:focus {
	color: #553592;
}
a:hover {
	color: #800000;
}
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after,
.container_16:before,
.container_16:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container_12:after,
.container_16:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container_12,
.container_16 {
  zoom: 1;
}

.clearboth {
	clear:both;
}

/* CP Page Styles
 *-----------------------------------------------------------------------------------------*/
body.cp {
	margin: 0;
	padding: 0;
}
.cp .cpwrapper {
	width: 90%;
	margin: 0 8px 4px 4px;
	padding: 5px;
}
.cp .steps, .cp .options, .cp .help, .cp .header {
	border:1px solid #ccc;
	margin:15px 0;
	padding: 0 10px 10px;
}
.cp .header {
	background-color:#5BBCAB;
	border:none;
}
.cp h2 {
	font-size:1.2em;
	color:#fff;
	background-color:#037FA3;
	padding: 5px 10px;
	margin:0 -10px 10px;
}
.cp h3 {
	background-color:#037FA3;
	margin:0 -10px 10px;
	padding: 5px 10px;
	color:#fff;
	clear: left;
}
.cp .acpLogin {
	margin-bottom: 10px;
}
.cp .acpLogin .acpPasswordID {
	float: left;
	width: 50%;
	text-align: right;
	margin-right: 5%;
	font-style: italic;
	font-weight: bold;
}
.cp .acpLogin .acpPasswordID_info {
	float: left;
	width: 40%;
	text-align: left;
}
.cp ol, .cp ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.cp li {
	list-style-type: none;
	margin-left: 0;
}
.cp li.panel {
	font-size: 12px;
	line-height: 12px;
	padding-top: 5px;
}
.cp li.panel img {
	margin-top: -5px;
}
.cp .options li.panel, .cp .help li.panel {
	padding-left: 0;
	margin: 0.5em 0 0 0;
}
.cp .help .fieldset {
	height: 20px;
}
.cp .steps .currentstep {
	font-weight: bold;
}
.cp img.donestep {
	padding-left: 0px;
	background-image: url(/static/img/actions/16x16/check.gif);
	width: 10px;
	height: 14px;
	background-repeat: no-repeat;
}
.cp img.currentstep {
	background-image: url(/static/images/arrow.gif);
	width: 9px;
	height: 17px;
	background-repeat: no-repeat;
}
/* end cp styles
 * ----------------------------------------------------------------------------------------*/


/* Registration Call Page Styles
 *--------------------------------------------------------------------------------------*/
body.registration_call {
	background-color:#ffffff;
}
body.logo_banner {
	background-image:url('/img/aspph/2018/reg_banner_2018.jpg');
	background-repeat:repeat-x;
}
.registration_call .wrap {
	background-color:#fff;
}
.registration_call .header {
	background-image:url("/img/aspph/2018/reg_banner_2018.jpg");
	background-repeat:no-repeat;
	height:120px;
	width:960px;
}
.registration_call h1 {
	font-size:1.8em;
	color:#284177;
}
.registration_call h2 {
	font-size:1.25em;
	color:#2785A1;
	margin:15px 0 0 0;
	clear:left;
}
.registration_call h4 {
	font-size:1.1em;
	margin:10px 0 0 0;
	clear:left;
}
.registration_call h3 {
	background-color:#037FA3;
	margin:0 -10px 10px;
	padding: 5px 10px;
	color:#fff;
}
.registration_call p {
	margin:10px 0;
}
.registration_call .labels {
	font-weight:bold;
}
.registration_call .details {
	margin:10px 0 0 0;
}

.registration_call .sidebar {
	border:1px solid #ccc;
	margin:15px 0;
	padding: 0 10px 10px;
}
.registration_call .colorbkg {
	background-color:#5BBCAB;
	border:none;
}
.registration_call .register a {
	display:block;
	background-color:#F37828;
	padding:5px;
	text-align:center;
	color:#fff;
	text-decoration:none;
	text-transform: uppercase;
	width:50%;
	border-style:solid;
	border-width:2px;
	border-top-color: #CCC;
	border-left-color: #999;
	border-right-color: #666;
	border-bottom-color: #333;
}
.registration_call .register a:hover {
	background-color:#F6903E;
}
.registration_call .sidebar .labels, .registration_call .sidebar .info {
	float:left;
}
.registration_call .sidebar .labels {
	width:20%;
	margin:0 2% 0 0;
}
.registration_call .sidebar .info {
	width:75%;
}
.registration_call .content {
	margin:15px 0;
	padding:10px;
	border:1px solid #ccc;
}
.registration_call .deadline .labels, .registration_call .deadline .info {
	float:left;
	margin: 0 0 10px 0;
}
.registration_call .deadline .labels {
	width:56%;
	margin:0 2% 0 0;
}
.registration_call .deadline .info {
	width:35%;
}

.registration_call ul {
	list-style: disc;
	margin:0px 0px 10px  10px;
}

.registration_call .content ul {
	list-style: disc;
	margin:0 25px;
}
.registration_call .content li {
	margin: 10px 0;
}
.registration_call .tabdata {
	margin:10px 0 0 0;
}

/****************************************
 * Expand / Collapse Steps
 ****************************************/
.registration_call #categories {
  list-style-type: none;
  margin: 0;
  padding: 0; }
.registration_call #categories li {
  list-style-type: none;
  margin: 0;
  padding: 0; }
.registration_call #categories li li{
  list-style-type: disc;
  margin: auto;
  padding: auto; }
.registration_call #categories a {
  text-decoration: none;
  display: inline-block;
  padding: 3px 5px; }
.registration_call #categories .collapse a {
  display: inline;
  padding: 0;
 }
.registration_call #categories p.switch {
  margin: -1em 0 0.5em 0;
  text-align: right; }
.registration_call #categories div.collapse {
  margin: 0 0 10px 10px; }
.registration_call #categories h2 {
  width: 100%; }
.registration_call #categories .expand a {
  display: block;
  background-color: #C9E3EA;
  border-color: #0F0F6F;
  border-width: 1px;
  border-style: solid;
  background-repeat: no-repeat; }
  .registration_call #categories .expand a:link, .registration_call #categories .expand a:visited {
    background-image: url("/static/img/arrow-down.gif");
    background-position: 98% 50%; }
  .registration_call #categories .expand a:hover, .registration_call #categories .expand a:active, .registration_call #categories .expand a:focus {
    text-decoration: underline;
    outline: 0 none; }
  .registration_call #categories .expand a.open:link, .registration_call #categories .expand a.open:visited {
    background-image: url("/static/img/arrow-up.gif");
    background-position: 98% 50%; }

/* end Registration Call Page Styles */

/* Instructions Page Styles
 *--------------------------------------------------------------------------------------*/
body.instructions {
	background-color:#fff;
	height:auto;
	margin: 0 10px 0 5px;
}
body.logo_banner {
	background-image:url('/img/shared/bannerback.png');
	background-repeat:repeat-x;
}
.instructions .wrap {
	background-color:#fff;
	text-align:left;
}
.instructions .header {
	background-image:url("/img/shared/logo.png");
	background-repeat:no-repeat;
	height:120px;
	width:960px;
}
.instructions h1 {
	font-size:1.8em;
	color:#284177;
}
.instructions h2 {
	font-size:1.3em;
	color:#66a5d8;
	margin:15px 0 0 0;
	clear:left;
}
.instructions h3 {
	background-color:#012248;
	margin:0 -10px 10px;
	padding: 5px 10px;
	color:#fff;
}
.instructions p {
	margin:10px 0;
}
.instructions .labels {
	font-weight:bold;
}
.instructions .details {
	margin:10px 0 0 0;
}

.instructions .sidebar {
	border:1px solid #ccc;
	margin:15px 0;
	padding: 0 10px 10px;
}
.instructions .colorbkg {
	background-color:#c5daea;
	border:none;
}
.instructions .register a {
	display:block;
	background-color:#880100;
	padding:5px;
	text-align:center;
	color:#fff;
	text-decoration:none;
	text-transform: uppercase;
	width:50%;
	border-style:solid;
	border-width:2px;
	border-top-color: #CCC;
	border-left-color: #999;
	border-right-color: #666;
	border-bottom-color: #333;
}
.instructions .register a:hover {
	background-color:#a74546;
}
.instructions .sidebar .labels, .instructions .sidebar .info {
	float:left;
}
.instructions .sidebar .labels {
	width:20%;
	margin:0 2% 0 0;
}
.instructions .sidebar .info {
	width:75%;
}
.instructions .content {
	margin:15px 0;
	padding:10px;
	border:1px solid #ccc;
}
.instructions .deadline .labels, .instructions .deadline .info {
	float:left;
	margin: 0 0 10px 0;
}
.instructions .deadline .labels {
	width:56%;
	margin:0 2% 0 0;
}
.instructions .deadline .info {
	width:35%;
}
.instructions .content ul {
	list-style: disc;
	margin:0 25px;
}
.instructions .content li {
	margin: 10px 0;
}
.instructions .tabdata {
	margin:10px 0 0 0;
}

/****************************************
 * Expand / Collapse Steps
 ****************************************/
.instructions #categories {
  list-style-type: none;
  margin: 0;
  padding: 0; }
.instructions #categories li {
  list-style-type: none;
  margin: 0;
  padding: 0; }
.instructions #categories li li{
  list-style-type: disc;
  margin: auto;
  padding: auto; }
.instructions #categories a {
  text-decoration: none;
  display: inline-block;
  padding: 3px 5px; }
.instructions #categories .collapse a {
  display: inline;
  padding: 0;
 }
.instructions #categories p.switch {
  margin: -1em 0 0.5em 0;
  text-align: right; }
.instructions #categories div.collapse {
  margin: 0 0 10px 10px; }
.instructions #categories h2 {
  width: 100%; }
.instructions #categories .expand a {
  display: block;
  background-color: #C9E3EA;
  border-color: #cccccc;
  border-width: 1px;
  border-style: solid;
  background-repeat: no-repeat; }
  .instructions #categories .expand a:link, .instructions #categories .expand a:visited {
    background-image: url("/static/img/arrow-down.gif");
    background-position: 98% 50%; }
  .instructions #categories .expand a:hover, .instructions #categories .expand a:active, .instructions #categories .expand a:focus {
    text-decoration: underline;
    outline: 0 none; }
  .instructions #categories .expand a.open:link, .instructions #categories .expand a.open:visited {
    background-image: url("/static/img/arrow-up.gif");
    background-position: 98% 50%; }

/* end Instructions Page Styles */

/***********************
* Demographics Styles  *
***********************/

.reg_rolesetup div.sectionboxinstructions {
  background-color:#c5daea;
  border:1px #999 solid;
  padding:5px 15px;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}

/* Range styles */
#range_1 .registration_call .header img.lgimage,
#range_0 .registration_call .header img.lgimage{
  
}
#range_1 .registration_call .header img.smimage {
  display:inline-block;
  margin:30px 0 0 10px;
  width:45%;
}

#range_0 .registration_call .header .heading {
  float:left;
  margin-left: 10px;
}
#range_0 .registration_call .header .heading h1 {
  margin:0;
  font-size:1.3em;
}
#range_0 .registration_call .header .heading h1.companyname {
  display:block;
  font-size:1.7em;
  margin:20px 0 5px 0;
}

/***********************************
* Registration Role Setup Styles
***********************************/

body.reg_rolesetup section ul {
  max-width:60em;
  list-style-type: none;
  margin: 5px 0;
  padding: 0;
  }
  body.reg_rolesetup section ul li {
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid; 
    -ms-column-break-inside:avoid;
    column-break-inside:avoid;
    clear: left;
    vertical-align: top;
    }
    body.reg_rolesetup section ul li input[type="checkbox"] {
      margin: 0 5px 10px ;
      padding: 0;
      width: 5%;
      display: inline-block;
      vertical-align: top;
      }
    body.reg_rolesetup section ul li label    {
      width: 85%;
      margin-left: 0;
      display: inline-block;
      vertical-align: top;
      }

            
@media only screen and (max-width: 720px) {
    body.reg_rolesetup section ul li input[type="checkbox"] {
      margin: 0 2px 10px ;
      width: 10%;
      }
    body.reg_rolesetup section ul li label    {
      width: 80%;
      }
  }
  
.registration table.people {
  width: 100%;
}
.registration table.people thead th {
  background-color: #FFF;
  color: #333;
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  border-bottom: 4px double #CCC;
}

.registration table.people .fa {
  font-size: 1.5em;
}

/* Demographics */

.reg_rolesetup div.sectionboxinstructions {
  background-color: #FFF;
  border: none;
  box-sizing: border-box;

}
.reg_rolesetup div.sectionbox {
  border: none;
}

.reg_rolesetup textarea {
  max-width: 400px;
  width: 95%;
}

.reg_rolesetup section {
  margin: .5em 0;
}

/* Items */
div.group.sectionbox {
  border: none;
  margin: 1em 0;
  padding: 0;
}

h3.singular, div.group.sectionbox .multiple .item h3, .quantityselect h3 {
  background-color: #ffffff;
    border-bottom: 1px solid #ddd;
    font-size: 1.2em;
    margin: 1em 0 .5em 0;
    padding: 0;
}

body.registration.options form, body.reg_rolesetup form, body.reg_options form {
    background-color: #efefef;
    padding: .5em;
}

.reg_rolesetup div.sectionboxinstructions, body.reg_options form div {
    background-color: transparent;
    border: none;
    box-sizing: border-box;
}

.reg_rolesetup form .sectionboxinstructions > div, body.reg_options form .multiple > div {
  width: 90%;
  margin: 10px auto;
  background-color: #FFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  padding: .5em;
  min-width: 90%;
  border: none;
}

input[type="submit"], input[type="button"], input[type="submit"]:enabled, input[type="button"]:enabled, button, .button {
  background-color: #009DC1;
  border: none;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-size: 1.2em;
  letter-spacing: 0.08em;
  margin: 0;
  padding: 5px 8px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin: 1em 0;
  }
  input[type="submit"]:hover, input[type="button"]:hover, input[type="submit"]:enabled:hover, input[type="button"]:enabled:hover, button:hover, .button:hover {
    background-color:#006691;
    }
  input[type="submit"]:disabled, input[type="button"]:disabled, input[type="submit"]:disabled:hover, input[type="button"]:disabled:hover {
    background-color: #ccc;
    color: #efefef;
    } 

header .logo {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

header .logo img {
  width: 100%;
}
.topsection {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  text-align: left;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.leftAside {
  width:  70%;
  box-sizing: border-box;
  padding: .5em;
}

.rightAside {
  width: 30%;
  box-sizing: border-box;
  padding: .5em;
}

body {
  min-width: auto!important;
}

@media (max-width: 700px) {

  .topsection {
  -webkit-box-orient: column;
  -webkit-box-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  }

  .leftAside, .rightAside {
    width: 95%;
    margin: 0 auto;
  }
}