/* generic styles */
input {
    -webkit-appearance: none;
}
.bg_gray { background-color: #F1F1F1; }
.f_purple { color: #724de8 !important; }
.page_header H1 { font-size: 23px; }
.page_header .tagline { border-bottom: 1px solid #cacbcd; color: #724de8; font-size: 14px; padding: 2px 0 10px 0; margin-bottom: 10px; }
.page_header .header_icon { float: left; padding: 0 10px; }
.ui-menu-item {font-size:12px;}
.clearfix {clear: both;}

/* Form fields */
.form_header { margin-top: 15px; }
.form_header, .form_guidelines { margin-bottom: 15px; }
.form_header H2, .form_guidelines H2 { display: block; font-size: 14px; }
.form_header p { line-height: 17px; }
.form_bottom { float: right; margin: 10px 0px; position: relative; clear: both;}
.form_guidelines UL LI { list-style-position: outside; margin-left: 15px; line-height: 17px;}
.form_fields { width: 660px; }
.field { width: 100%; }
.field_header { border-right: 1px solid #fff; padding: 5px 10px; width: 320px; }
.field_header LABEL { display: block; font-weight: bold; margin-bottom: 5px;}
.field_content { padding: 5px; width: 345px; }
.field_content INPUT, .field_content TEXTAREA { width: 99%; height: 18px; padding-top: 2px; }
.field_content TEXTAREA { height: 75px; }
.field_content .field_small { height: 20px; width: 125px; }
.field_notes { color: #444e5c; font-size: 10px; }
.field_top_note { font-weight: bold; font-size: 10px; font-style: italic; }
.form_fields TR TH { background-color: #828891; font-size: 1px; height: 10px;  max-height: 10px; line-height: 10px; padding: 0; }
.form_fields TR TH.first { border-right: 1px solid #fff; }
.field_datetime_results UL { margin-top: 10px; }
.field_datetime_results UL H3 { font-size: 10px; }
.field_datetime_results UL LI { list-style-position: outside; margin-left: 15px; }
.field_header_optional TD { font-size: 10px; font-weight: bold; padding: 5px 10px 10px 5px; width: 99%;  }
#Selected_Venue { margin-top: 0px; }
#Description_Count { color: gray; float: right; font-style: italic; }
#Security_Image { margin-bottom: 15px; }

#Submit_Event
,#Confirm_Event {
  cursor: pointer;
  width: 160px;
  height: 50px;
  margin-left: 4px;
  padding: 0 24px;
  border: none;
  border-radius: 0;
  background: #0088EE;
  font-family: "Benton Sans Medium", Arial, sans-serif;
  color: white;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
#Submit_Event:hover { background-position: 100% -19px;}
#Preview_Event { cursor: pointer; width: 83px; height: 19px; border: none; margin: 0 6px 0 0; background: url('http://media.advance.net/static/common/img/buttons/preview_gray_83x19.png') no-repeat; }
#Preview_Event:hover { background-position: 0px -19px; }
#Edit_Event {
    cursor: pointer;
    background: url('http://media.advance.net/static/common/img/buttons/event_edit_98x19.png') no-repeat;
    width: 98px;
    height: 19px;
    border: none;
    padding-right: 5px;
}
#Edit_Event:hover { background-position: 100% -19px; }
#Confirm_Event {
  width: auto;
  margin: 20px 0;
}
#Confirm_Event:hover { background-position: 100% -29px;}

/* Caledar Table */
TABLE.cal_table { float: left; width: 160px; background-color: #fff; margin-right: 5px; text-align: center; vertical-align: middle; }
TABLE.cal_table TD { background-color: #eee; font-size: 14px; width: 22px; height: 22px; }
TABLE.cal_table TD.p { background-color: #cdc1ff; }
TABLE.cal_table TR.cal_month TD { background-color: #6f757f; color: #fff; font-size: 14px; font-weight: bold; *width: 155px; }
TABLE.cal_table TD, TABLE.cal_table TR.cal_month TD, TABLE.cal_table TR.cal_dayofweek TH { border: 1px solid #fff;  }
TABLE.cal_table TR.cal_dayofweek TH { background-color: #fff; font-size: 10px; font-weight: bold; }
TABLE.cal_table TR.cal_dayofweek TH.g { background-color: #ccc; } 
TABLE#Calendar_2 { margin-right: 0; }

/* Calendar Table from newsengin */
TABLE.tableLargeCalendar { float: left; width: 160px; background-color: #fff; margin-right: 5px; text-align: center; vertical-align: middle; }
TABLE.tableLargeCalendar TD { border: 1px solid #fff; background-color: #eee; font-size: 14px; width: 22px; height: 22px; padding: 0 4px; }
TABLE.tableLargeCalendar TD.tableSmallCalendarTDHighlight { background-color: #cdc1ff; }
TABLE.tableLargeCalendar TD.tableSmallCalendarTD BR { display: none; line-height: 0; }
/*TABLE.tableLargeCalendar TD.tableSmallCalendarTDHighlight BR { display: none; line-height: 0; }*/

/* Preview Page */
.preview_header { font-size: 14px; line-height: 20px; margin-bottom: 5px; }
.preview_header H2 { display: inline; font-weight: bold; margin-right: 5px; }
.preview_table{max-width: 660px;}
/*.preview_table TD { vertical-align: top; }
.preview_table TR.first TD, .preview_table TR.last TD { height: 0px; background-color: #fff; }
.preview_table TR.first TD .round_tl, .preview_table TR.first TD .round_tr { *top: 1px; }*/
.preview_table .preview_label { background-color: #F1F1F1; font-weight: bold; line-height: 20px; padding: 10px; text-align: right; width: 25%; float: left; clear: both; min-width: 141px;}
.preview_table .preview_content { background-color: #fff; line-height: 20px; padding: 10px 10px 10px 20px; float: left; width: 60%; /* min-width: 293px; */}
.preview_hr { background-color: #828891; font-size: 1px; height: 10px;  max-height: 10px; line-height: 10px; padding: 0; margin: 20px 0; clear: both;}

/* Help Section */
#Event_Form_Help { line-height: 20px; width: 660px; text-align: left; }
#Event_Form_Help H2 { display: block; font-size: 20px; margin-bottom: 15px; }
#Event_Form_Help H3, #Event_Form_Help H4 { display: block; font-size: 14px; margin-bottom: 5px;  }
#Event_Form_Help UL { margin-bottom: 20px;  }
#Event_Form_Help UL LI { margin-left: 15px; margin-bottom: 5px; }
#Event_Form_Help UL LI UL { margin-bottom: 0; }
#Event_Form_Help UL LI UL LI { list-style-type: hyphen; }
#Event_Form_Help .close_help { float: right; padding-right: 10px; }


/* NEW STUFF */
.page_header h1 {
    color: dodgerblue;
    font-size: 16px;
}
.page_header h1 .tagline {
    color: black;
    font-size: 24px;
}
form section {
    border: solid 1px #CCCCCC;
    background-color: #EFEFEF;
    margin: 10px 0 20px;
    padding: 0;
    clear: both;
    overflow: hidden;
}
section .stepNumber {
    font-size: 30px;
    color: white;
    display: block;
    float: left;
    text-align: center;
    width: 10%;
    height: 40px;
    line-height: 40px;
    background: #363636;
}
section .formElements {
    float: left;
    padding: 10px;
    width: 80%;
}
form input[type='text']
  ,form input[type='email']
  ,form input[type='tel']
  ,form input[type='url']
  ,form input[type='date']
  ,form NETEXTAREA
  ,form textarea
  ,form select {
    width: 100%; height: 35px;
    box-sizing: border-box;
    border: solid 1px #DDD;
    box-shadow: none;
    border-radius: 0;
    margin: 0 0 10px;
    padding: 5px;
    font-size: 14px;
    color: #636363;
    font-family: "Benton Sans", Arial, sans-serif;
}

::-webkit-input-placeholder {
   color: #636363;
}

:-moz-placeholder { /* Firefox 18- */
   color: #636363;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #636363;  
}

:-ms-input-placeholder {  
   color: #636363;  
}

form NETEXTAREA, form textarea {height: auto;}
.message a {
    color: white;
    text-decoration: underline;
    font-weight: bold;
}
#Preview_Event {
    border: none;
    background: none;
    color: #363636;
    font-weight: bold;
    font-size: 16px;
}
form {
    font-family: "Benton Sans", Arial, sans-serif;
    font-size: 14px;
}

.formElements p {
    margin: 0 0 10px;
    padding: 0;
}
form select {
    width: auto;
    height: 37px;
}
#MainColumn {
    max-width: 700px;
    margin: 0 auto;
}
#step6 {
    border: none;
    background: none;
}
#EventTitle {
    max-width: 440px;
    float: none;
    margin-right: 10px;
}
#Security_Image {
    display: inline-block;
    margin: 0 10px 0 0;
}
#step3a input[type='date'], #step3a select {
    width: auto;
    float: left;
    margin-right: 5px;
}
#step3a select {
    width: 55px;
}
#EventType, #CategoryID {
    max-width: 100%;
    width: 100%;
}
.elementwrapper.event-date
,.elementwrapper.event-desc {
    float: left;
    width: 100%;
    max-width: 405px;
    margin-right: 20px;
}
.elementwrapper.event-title {
  width: 100%;
    max-width: 412px;
    float: left;
}

.elementwrapper.event-category {
    float: right;
    width: 300px;
}

#step5 .elementwrapper {
    width: 30%;
    float: left;
    margin-right: 20px;
}

/* CAPTCHA RELATED STUFF */
#human{display: none;}
#Submit_Event:disabled{
  opacity: 0.35;
}
#RobotTest {
    float: left;
    margin-right: 20px;
}
#RobotTest label {
    height: 30px;
    line-height: 30px;
    display: block;
    float: left;
    padding-right: 10px;
}

/* TOGGLE STUFF FOR THE SLIDE CAPTCHA */
.toggle{display: inline-block;}
.toggle-slide {
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  direction: ltr;
  text-align: center;
}
div.disabled > .toggle-slide {
  opacity: 0.7;
  pointer-events: none;
}
.toggle-slide .toggle-on,
.toggle-slide .toggle-off,
.toggle-slide .toggle-blob {
  float: left;
}
.toggle-slide .toggle-blob {
  position: relative;
  z-index: 99;
  cursor: hand;
  cursor: grab;
}

.toggle-jay .toggle-slide {
  /*border-radius: 5px;*/
  box-shadow: inset 0 0 0 1px #CCCCCC;
  background: #C9C9C9;
}
.toggle-jay .toggle-on,
.toggle-jay .toggle-off {
/*  color: rgba(0, 0, 0, 0.7);
  font-size: 11px;
  text-shadow: 1px 1px white;*/
  font-size: 14px;
  font-family: "Benton Sans Medium", Arial, sans-sarif;
  text-transform: uppercase;
}
.toggle-jay .toggle-on{
/*  background: -webkit-linear-gradient(#d2ff52, #91e842);
  background: linear-gradient(#d2ff52, #91e842);*/
  color: #FFFFFF;
  background: #0088EE;
}
  .toggle-jay .toggle-on.active{
    background: #00CC4E;
  }
.toggle-jay .toggle-off{
/*  background: -webkit-linear-gradient(#cfcfcf, #f5f5f5);
    background: linear-gradient(#cfcfcf, #f5f5f5);*/
    color: #FFFFFF;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: -34px;
}
  .toggle-off::before {
    content: "slide";
  }
    .touch .toggle-off::before{
      content: "tap";
    }
.toggle-jay .toggle-blob {
/*  border-radius: 4px;
  background: -webkit-linear-gradient(#cfcfcf, #f5f5f5);
  background: linear-gradient(#cfcfcf, #f5f5f5);
  box-shadow: inset 0 0 0 1px #bbb, inset 0 0 0 2px white;*/
  background-color: #0088EE;
  background-image: url("http://media.advance.net/static/common/events/img/lock.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
}
.toggle-jay .toggle-blob.unlocked {
/*  background: -webkit-linear-gradient(#e4e4e4, #f9f9f9);
  background: linear-gradient(#e4e4e4, #f9f9f9);
  box-shadow: inset 0 0 0 1px #ddd,inset 0 0 0 2px #ddd;*/
  background-color: #00CC4E;
  background-image: url("http://media.advance.net/static/common/events/img/unlock.png");
} 

  .touch .toggle-on.active{
        text-indent: 13px !important;
  }
  .touch .toggle-off::before {
  }
  .touch .toggle-jay .toggle-off{
    background: #0088EE;
    color: #FFFFFF;
    text-align: center;
    text-indent: -26px !important;
  }

#EventDateHelp { 
  width: 100%;
  display: inline-block;
  font-size: 14px;
}

#addvenue_link{
    display: block;
    line-height: 1em;
    font-size: 13px;
    color: #0088EE;
    margin-bottom: 14px;
    margin-top: 3px;
    float: right;
    text-decoration: none;
    border-bottom: 2px solid #B9E1FF;
}
    #addvenue_link:hover{
        border-color: #0088EE;
    }

#confirm_eventform
, #eventform.thankyou{
    margin: 0 auto;
    max-width: 660px;
}

.page_header {
    padding: 0;
    font-family: "Benton Sans", Arial, sans-serif;
    font-size: 16px;
}
.page_header h2 {
    display: inline;
    font-size: 1.33em;
    line-height: 1.5em;
    font-weight: normal;
    margin: 23px 0 22px;
    text-transform: uppercase;
    color: #222222;
    letter-spacing: 0.1em;
}
.eventsSales {
    display: block;
    line-height: 1em;
    font-size: 13px;
    color: rgb(94, 146, 165);
    margin-bottom: 14px;
    margin-top: 3px;
}
.eventsHelp {
    float: right;
    display: inline;
    margin: 25px 10px 0 0;
    line-height: 23px;
    font-size: 16px;
    text-decoration: none;
    color: #000000;
    font-family: "Benton Sans", Arial, sans-serif;
}
.eventsHelp:hover {
    text-decoration: underline;
}
.eventsHelp::before {
    display: inline-block;
    height: 18px;
    width: 13px;
    margin: 4px 5px 0 0;
    line-height: 18px;
    font-size: 18px;
    background-position: 0px -59px;
    float: left;
    background-image: url("http://media.advance.net/static/common/events/img/Events_Sprite.png");
    background-repeat: no-repeat;
    content: '';
}
.supportLinkContainer {
    float: left;
}
/* INLINE ERRORS */
.test{}
.test + .error{
  color: red;
  display: block;
  margin-bottom: 0px;
  height: 0px;
  opacity: 0;
  transition: opacity .25s ease-in-out, height .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out, height .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out, height .25s ease-in-out;
}
.test.pass{}
.test.fail{
  /*box-shadow: 0 0 4px #FF0000;*/
  border: 1px solid red;
}
.test.fail + .error{
  opacity: 1;
  margin-bottom: 10px;
  height: 20px;
}

@media screen and (min-width: 500px) and (max-width: 800px) {
    section .stepNumber{
        font-size: 35px;
    
        height: 50px;
        line-height: 50px;
    }
}
@media screen and (min-width: 801px) {
  /* desktop specific stuff */
    section .stepNumber{
        font-size: 48px;
    
        height: 65px;
        line-height: 65px;
    }
    #MainColumn{
        max-width:910px;
    }
    section .stepNumber{
        max-width:70px;
    }
    #step4 input{
        max-width: 40%;
        margin-right: 10px;
    }
    #step5 input {
        max-width: inherit;
    }
    #EventLongDescription, #EventDateString {
        width: 100%;
        margin-right: 5%;
        float: none;
        height: 214px;
    }
    select#EventType {
        width: 50%;
        max-width: 302px;
    }
    select#CategoryID{
        width: inherit;
        max-width: inherit;
    }
    #EventDateHelp{
      max-width: 40%;
    }
}
@media only screen and (max-width: 768px) {
  /* tablet specific stuff */
  html .elementwrapper.event-title {
    max-width: 244px;
  }
  html .elementwrapper.event-date, 
  html .elementwrapper.event-desc {
    max-width: 100%;
  }
  #EventDateString, #EventLongDescription {
    height: 100px;
  }
  html #step5 .elementwrapper {
    width: 100%;
    margin-right: 0;
  }
    .eventsHelp {
        float: left;
        width: 100%
    }
    .supportLinkContainer {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 500px){
  /*phone specific stuff*/
  html .elementwrapper.event-title {
    max-width: 100%;
  }
  html .elementwrapper.event-category
  ,html #step5 .elementwrapper {
    width: 100%;
    margin-right: 0;
  }
  #EventDateString, #EventLongDescription {
    height: 100px;
  }
  .elementwrapper.event-ownerphone .test.fail + .error {
      margin-bottom: 20px;
  }
  #RobotTest {
      margin: 0 auto 20px;
      float: none;
      width: 300px;
  }

  .form_bottom {
      float: none;
      padding: 0 10px;
  }

  #Submit_Event {
      width: 300px;
      float: none;
      margin: 0 auto 20px;
      display: block;
      border-radius: 0;
  }
}