/* ------ NOTES----------------------------------------------------------------

Customizable Screen Styles for your Simple Signup event pages.

--------- CONTENTS ------------------------------------------------------------

1: PAGE BACKGROUND AND WIDTH 
2: TYPOGRAPHY
3: BORDERS
4. SECTIONS AND EXTRA HTML

---------------------------------------------------------------------------- */



/* 1: PAGE BACKGROUND AND WIDTH
============================================================================ */

/* Use this to change the background color and/or image */

html {
font-size: 100% !important;
}

body {
  background-color: #fff;
  background-image: none;
  background-repeat: repeat-x;
  background-position-x: left;
  background-position-y: top;
  }

/* Use this to change the width of the page. In pixels or percent. */ 

/*
.wrapper {width: 760px;}
*/

/* Use this to change the background color of the header, content and footer */

#header {background-color: #fff;}

#content {background-color: #fff;}

#footer {background-color: #fff;}


/* 2: TYPOGRAPHY
============================================================================ */

/* Use this to change the color, size and font for the body copy */

body {
  color: #333;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 1rem;
line-height: 1.5rem;

  }

/* Use this to change the color, size, weight, style and font for headings */

h1 {
	color: #000;
	font-family: Helvetica, Arial, sans-serif;
  font-size: 2.5rem;
line-height: 3rem;
	font-weight: bold; 
	font-style: normal;
  }

h2 {
	color: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 20px;
  font-size: 2rem;
line-height: 2.5rem;
	font-weight: normal;
	font-style: normal;
  }

h3 {
	color: #000;
	font-family: 1.5rem;
line-height: 2rem;
	font-size: 13px;
	font-weight: bold;
	font-style: normal;
  }
  
/* Use this to change the color of the form labels */

.attendee-form .event-attendee {color: #333;}


/* 3: BORDERS
============================================================================ */

/* Use this to change the color of the borders */
  
.cart, .cart td, .cart th {border-color: #fff;}

.attendee-form td {border-color: #fff;}


/* 4: SECTIONS AND EXTRA HTML
============================================================================ */

#extra-html-left {
  float: left;
  width: 47%;
  clear: left;
  margin-top: 20px;
  }
#extra-html-right {
  float: right;
  width: 46%;
  clear: right;
  margin-top: 20px;
  }
#extra-html-footer {clear: both; margin-top: 20px;}

.section.left {
  float: left;
  width: 47%;
  clear: left;
  margin-top: 20px;
  }
.section.right {
  float: right;
  width: 46%;
  clear: right;
  margin-top: 20px;
  }
.section.footer {clear: both; margin-top: 20px; padding: 20px;}
.section img {padding: 10px;}
.section img.left {float: left;}
.section img.right {float: right;}

.section-contents {text-align: center;}

.captioned-img {float: left;}
.captioned-img img {float: left; padding: 0 20px 20px 0;}
.captioned-img img.right {float: right; padding: 0 0 20px 20px;}
.captioned-img .caption {float: none;}

ul {
    list-style: none;          /* remove default bullets */
    padding: 0;
    margin: 0;
}

ul li {
    position: relative;
    padding-left: 1rem;      /* space for custom bullet */
    margin-bottom: 0.6rem;     /* spacing between items */
    font-size: 1rem;
    line-height: 1.5;
}

ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;                /* vertically centers the dot */
    width: 0.35rem;
    height: 0.35rem;
    background: #333;          /* bullet color */
    border-radius: 50%;        /* makes it a dot */
}

input[type="submit"] {
    background-color: #e94e17;
    color: #fff;
    border: none;
    padding: 0.75rem 1.4rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;          /* rounded corners */
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.15s ease;
    display: inline-block;
}

input[type="submit"]:hover {
    background-color: #d44615;   /* slightly darker on hover */
}

#header {
text-align: left;
}

#header .wrapper {
text-align: left;
}


#header img {
width: 120px;
}