/*
  HTML5 Reset :: style.css
  ----------------------------------------------------------
  We have learned much from/been inspired by/taken code where offered from:
  
  Eric Meyer          :: http://meyerweb.com
  HTML5 Doctor        :: http://html5doctor.com
  and the HTML5 Boilerplate :: http://html5boilerplate.com
  
-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
menu,
nav,
section,
time,
mark,
audio,
video,
details,
summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent; }

article,
aside,
figure,
footer,
header,
nav,
section,
details,
summary {
  display: block; }

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
*,
*:before,
*:after {
  box-sizing: border-box; }

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {
  max-width: 100%; }

/* force a vertical scrollbar to prevent a jumpy page */
html {
  overflow-y: scroll; }

/* we use a lot of ULs that aren't bulleted. 
  don't forget to restore the bullets within content. */
ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

del {
  text-decoration: line-through; }

abbr[title],
dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help; }

/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0; }

th {
  font-weight: bold;
  vertical-align: bottom; }

td {
  font-weight: normal;
  vertical-align: top; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

input,
select {
  vertical-align: middle; }

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */ }

input[type="radio"] {
  vertical-align: text-bottom; }

input[type="checkbox"] {
  vertical-align: bottom; }

.ie7 input[type="checkbox"] {
  vertical-align: baseline; }

.ie6 input {
  vertical-align: text-bottom; }

select,
input,
textarea {
  font: 99% sans-serif; }

table {
  font-size: inherit;
  font: 100%; }

small {
  font-size: 85%; }

strong {
  font-weight: bold; }

td,
td img {
  vertical-align: top; }

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* standardize any monospaced elements */
pre,
code,
kbd,
samp {
  font-family: monospace, sans-serif; }

/* hand cursor on clickable elements */
.clickable,
label,
input[type="button"],
input[type="submit"],
input[type="file"],
button {
  cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button,
input,
select,
textarea {
  margin: 0; }

/* make buttons play nice in IE */
button,
input[type="button"] {
  width: auto;
  overflow: visible; }

/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic; }

/* prevent BG image flicker upon hover 
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/js/boxsizing.htc); }

.group:before,
#secure-login div:before,
.group:after,
#secure-login div:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden; }

.group:after,
#secure-login div:after {
  clear: both; }

.group,
#secure-login div {
  zoom: 1; }

.post {
  position: relative; }

.post .back-text {
  transform: rotate(-20deg);
  position: absolute;
  z-index: 1;
  top: 150px;
  left: 50px;
  font-size: 5em;
  font-weight: bold;
  color: #780300; }

.post .back-text p {
  text-shadow: 4px 4px red; }

.grid {
  margin-left: -20px;
  list-style: none;
  margin-bottom: 0;
  display: block;
  clear: both; }

.grid .one-quarter,
.grid .one-half,
.grid .one-third,
.grid .two-thirds,
.grid .three-quarters,
.grid .full {
  float: left;
  padding-left: 20px;
  vertical-align: top; }

.one-quarter {
  width: 25%; }

.one-half {
  width: 50%; }

.one-third {
  width: 33.333%; }

.two-thirds {
  width: 66.666%; }

.three-quarters {
  width: 75%; }

.full {
  width: 100%; }

/********* --OLD-- GRID *********/
.col1 {
  width: 29px; }

.col2 {
  width: 87px; }

.col3 {
  width: 145px; }

.col4 {
  width: 203px; }

.col5 {
  width: 261px; }

.col6 {
  width: 319px; }

.col7 {
  width: 377px; }

.col8 {
  width: 435px; }

.col9 {
  width: 493px; }

.col10 {
  width: 551px; }

.col11 {
  width: 609px; }

.col12 {
  width: 667px; }

.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12 {
  float: left;
  margin: 0;
  overflow: hidden;
  margin-left: 29px; }

.col-first {
  clear: both;
  margin-left: 0 !important; }

/********* BODY *********/
body {
  background: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 58%; }

a {
  color: #026;
  text-decoration: underline; }

a:hover {
  color: #00143c;
  text-decoration: none; }

img {
  border: none;
  width: 100%;
  height: auto; }

b {
  font-weight: bold; }

/********* HEADER *********/
#header {
  overflow: hidden;
  width: 100%;
  min-width: 975px;
  background: #000; }

#header .content {
  position: relative;
  width: 975px;
  margin: 0px auto;
  height: 168px;
  background: #000 url(/images/header2023.jpg) no-repeat; }

#header .content h1 {
  position: absolute;
  top: 10px;
  right: 20px;
  text-align: right;
  color: rgba(255, 255, 255, 0.6);
  color: #b49a9a;
  font-size: 11px;
  font-weight: 300; }

/********* LEVEL 1 *********/
#level1 {
  overflow: hidden;
  width: 975px;
  margin: 0 auto;
  background: #fff url(/images/level1.jpg) no-repeat; }

#level1 .content {
  margin-left: 38px;
  width: 667px;
  float: left;
  background-color: #fff;
  display: inline;
  /*ie6 hack*/ }

/********* SIDEBAR *********/
#level1 .sidebar {
  min-height: 450px;
  margin-left: 29px;
  width: 203px;
  float: left;
  background: #fff url(/images/sidebar-line.jpg) no-repeat 0 0;
  overflow: hidden; }

/*navcontainer  */
#navcontainer {
  overflow: hidden;
  margin-left: 29px; }

#navcontainer ul {
  width: 174px;
  margin-left: 0;
  padding: 0;
  list-style-type: none;
  font-size: 1.65em;
  line-height: 1.2;
  letter-spacing: 0.09em; }

#navcontainer a {
  font-weight: 300;
  text-decoration: none;
  color: #fff;
  display: block;
  padding: 6px 15px;
  background-color: #757575;
  border-bottom: 1px solid #eee; }

#navcontainer a:hover,
#navcontainer .active {
  background-color: #780300;
  color: #fff; }

#advertisers img {
  border: none;
  display: block;
  margin-top: 25px;
  margin-left: 29px; }

/********* LEVEL 2 *********/
#level2 {
  margin-top: 20px;
  font-size: 1.7em;
  line-height: 1.2;
  height: 300px;
  background: #000 url(/images/level2.jpg) no-repeat;
  width: 100%;
  min-width: 975px; }

#level2 .content {
  width: 899px;
  overflow: hidden;
  margin: 0 auto; }

#level2 .rlwa {
  margin-top: 30px;
  margin-left: -28px; }

#level2 .box {
  display: block;
  float: left;
  width: 25%;
  padding-left: 28px; }

#level2 .box div {
  border: solid 1px white;
  margin: 0; }

#level2 .box h3 {
  font-weight: 300;
  border-bottom: solid 1px white;
  letter-spacing: 0.1em;
  color: #fff;
  margin: 0 0 10px 0; }

#level2 .box img {
  width: 202px;
  height: 122px;
  display: block;
  border: solid 1px black; }

#level2 .box p {
  padding-top: 15px;
  font-size: 0.88em;
  line-height: 1.4;
  color: #fff; }

#level2 .box p a {
  border: none;
  text-decoration: none;
  color: #c9a800; }

#level2 .box p a:hover {
  border: none;
  text-decoration: underline; }

/********* FOOTER *********/
#footer {
  width: 100%;
  min-width: 975px;
  clear: both;
  height: 60px;
  background: #222;
  overflow: hidden;
  border-top: solid 1px gray; }

#footer .content {
  width: 899px;
  overflow: hidden;
  margin: 0 auto; }

#footer .content p {
  padding: 10px 0;
  text-align: right;
  font-size: 1.2em;
  line-height: 1.5;
  color: #aaa; }

#footer .content p a {
  color: #aaa; }

/********* LIBRARY CLASSES *********/
/*hr*/
div.hr {
  clear: both;
  height: 5px;
  background: url(/images/post-line.png) no-repeat bottom center; }

div.hr hr {
  display: none; }

/*post*/
.post {
  color: #222;
  z-index: 1;
  font-weight: 300;
  position: relative;
  font-size: 1.8em;
  line-height: 1.5;
  clear: both;
  overflow: hidden;
  margin-bottom: 35px; }

.post h2 {
  font-family: Oswald;
  font-weight: 700;
  text-shadow: 4px 3px 5px #aaa;
  font-size: 2em;
  line-height: 1.2;
  margin: 0 0 20px 0; }

.post h2 span {
  font-weight: 700;
  color: #780300; }

.post h2 small {
  display: block;
  font-style: italic;
  font-weight: 700;
  font-size: 1.5em; }

.post h4.author {
  margin-top: -18px;
  margin-bottom: 15px;
  margin-left: 20px;
  font-size: 0.9em;
  font-weight: 300; }

.post p,
.post .table {
  font-size: 1em;
  margin-bottom: 15px; }

.post p.quote {
  font-style: italic; }

.post p.quote .author {
  font-style: normal;
  font-weight: bold; }

.post table {
  display: block;
  margin-bottom: 15px; }

.post td {
  padding: 2px 10px 2px 0; }

.post ul,
#level1 .post ol {
  margin-bottom: 20px; }

.post ul li,
.post ol li {
  margin-bottom: 5px; }

.post ol li {
  list-style-type: decimal;
  margin-left: 2em;
  margin-bottom: 10px; }

.post h3 {
  clear: both;
  margin: 0 0 11px 0;
  padding: 0 0 5px 0;
  border-bottom: dotted 1px #9d7878;
  font-size: 1.2em;
  font-weight: 300;
  color: #780300; }

.post .testimonial {
  font-size: 0.9em;
  margin: 0 0 3em 0.5em;
  padding-left: 1em;
  border-left: solid 2px orange; }

.testimonial p {
  margin: 0; }

.testimonial .rep {
  font-size: 0.85em;
  color: #9f8363;
  margin-left: 2em; }

/*photo*/
#level1 .photo {
  position: relative; }

.photo img {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%; }

#level1 .photo p.credit {
  margin: 2px 10px 0 0;
  padding: 0;
  font-size: 10px;
  text-align: right; }

#level1 .photo p.credit a {
  text-decoration: none; }

#level1 .photo p.caption {
  font-style: italic;
  width: 240px;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  margin-top: 5px;
  margin-left: 5px;
  color: #630100; }

/*bullet-list*/
.bullet-list {
  margin-left: 7px; }

.bullet-list a {
  text-decoration: none; }

.bullet-list a:hover {
  text-decoration: underline; }

.bullet-list li {
  background: url(/images/bullet-red.gif) no-repeat 0 0.4em;
  padding-left: 21px; }

.simple-list {
  margin-left: 1em;
  list-style-type: disc;
  padding-left: 1em; }
  .simple-list li {
    padding-bottom: 0.5em; }

/*Paypal Buy Now Box    */
.paypalRightBox {
  float: right;
  margin-left: 20px;
  border: solid 1px #b27600;
  width: 170px; }

.paypalRightBox form,
.paypalRightBox h3 {
  padding: 10px 10px 0 10px; }

.paypalRightBox h3 {
  font-weight: 700;
  color: #003366;
  border: none;
  font-size: 1em;
  margin: 0; }

.paypalRightBox h3 strong {
  color: #000; }

.arrow-overlay {
  diaply: block;
  position: absolute;
  top: 242px;
  right: 408px; }

/********* PAGES *********/
/*newsletter list*/
.newsletter-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.news-year-list {
  width: 23%; }

.news-year-list a {
  text-decoration: none; }

.news-year-list a:hover {
  text-decoration: underline; }

.news-year-list ul li {
  font-size: 13px;
  color: #111; }

.news-year-list h4 {
  padding-left: 3px;
  font-size: 14px;
  background-color: #780300;
  color: #fff;
  margin-bottom: 5px; }

/*competition winner list*/
.competition-winners {
  display: flex;
  flex-wrap: wrap; }

.decade {
  width: 22%;
  margin-right: 1em; }
  .decade li {
    font-size: 13px;
    color: #111; }
  .decade h4 {
    padding-left: 3px;
    font-size: 14px;
    background-color: #780300;
    color: #fff;
    margin-bottom: 5px; }

/*magic-lectures-vancouver.php*/
.lecture-paypal {
  overflow: hidden;
  border: solid 1px #00376e;
  padding: 10px;
  background: #e9f4ff;
  margin-bottom: 2em;
  display: block; }

.countdown {
  padding-right: 2em;
  width: 40%; }

.prices {
  color: #433;
  font-size: 18px;
  overflow: hidden;
  clear: left;
  width: 600px;
  margin-bottom: 15px; }

.prices dl {
  float: left;
  width: 600px; }

.prices dt {
  clear: left;
  float: left;
  width: 140px;
  font-weight: 300; }

.prices dd {
  margin-bottom: 15px;
  float: left;
  width: 460px; }

s {
  color: #837272; }

/*vmc-installation-dinner-show.php*/
.fadeIn {
  position: absolute;
  right: 0;
  top: 96px;
  display: none; }

.registerNow {
  background: #fff;
  width: 380px;
  border: solid 1px #a00; }

.registerNow h3 {
  margin: 0;
  padding: 5px 10px;
  display: block;
  color: #fff;
  font-weight: 700;
  background: #a00;
  text-transform: uppercase; }

.registerNow h3 span {
  position: absolute;
  right: 10px;
  top: 0;
  display: block;
  text-align: right;
  cursor: pointer; }

.registerNow .details {
  margin: 10px; }

.registerNow .details h4 {
  font-size: 18px;
  font-weight: 700; }

.registerNow .details p {
  font-size: 14px; }

/*magicians-for-hire.php*/
.post .magician {
  width: 100%;
  border-bottom: solid 1px #aaa;
  clear: both;
  overflow: hidden;
  margin-bottom: 15px; }

.post .magician .magician-photo {
  overflow: hidden;
  width: 15%;
  float: left;
  margin-right: 2%; }

.post .magician .magician-photo img {
  border: solid 1px black; }

.post .magician h4 {
  padding: 0 0 0.5em 0;
  line-height: 95%;
  font-weight: bold;
  font-size: 1.3em;
  font-variant: small-caps; }

.post .magician .magician-details {
  float: left;
  width: 80%;
  overflow: hidden; }

.post .magician .magician-details p {
  font-size: 0.89em; }

/*magic-circle-library.php*/
#libraryList h3 {
  padding-left: 20px;
  background: url("../images/library-arrows.gif") no-repeat;
  background-position: 0 11px;
  cursor: pointer; }

#libraryList h3.open {
  background-position: 0 -20px; }

/*secure  - ALL pages with secure area   */
#secure-login {
  overflow: hidden; }

#secure-login div {
  margin: 10px 0; }

#secure-login label {
  float: left;
  width: 7em; }

#secure-login input {
  float: left; }

#secure-login div {
  clear: both; }

#secure-login .errorMsg {
  font: 0.7em/1.2 arial;
  margin-bottom: 1em;
  color: #a00; }

.paypal {
  border: solid 1px #00376e;
  padding: 10px;
  display: block;
  margin-bottom: 2em;
  background: #e9f4ff; }

.logout {
  font: 12px/1 arial 700;
  text-align: right; }

.pay-for-shit {
  background: #dfd3c7;
  padding: 10px 10px 0 10px;
  margin-bottom: 25px; }

.pay-for-shit form {
  margin-bottom: 0;
  padding: 0; }

.pay-for-shit td {
  padding: 0 0 0 0;
  margin: 0; }

.pay-for-shit input[type="image"] {
  margin: -1em 0 0 0; }

.pay-for-shit input,
.pay-for-shit select {
  padding: 3px;
  margin: 0 0 1em 0;
  display: block; }

.pay-for-shit form img {
  height: 1px;
  width: 1px; }

#for-hire input::placeholder {
  color: #bbb; }

.click-dropdown {
  background: url(/magic-lectures-vancouver/click-dropdown.gif) no-repeat;
  background-position: 190px 64px; }

/********* OOCSS CLASSES *********/
.table {
  display: table; }

.table .spacey {
  padding: 0.5em 0.5em 0.5em 0; }

.table-row {
  display: table-row; }

.table-cell {
  display: table-cell; }

.highlight,
.highlighted {
  padding-left: 0.25em;
  padding-right: 0.25em;
  background: #ffff80; }

.clearer,
.clear {
  clear: both; }

.border,
.bordered {
  padding: 3px;
  border: solid 1px black; }

.left {
  float: left; }

.right {
  float: right; }

.image {
  width: 50%;
  margin-bottom: 15px; }

@media only screen and (max-width: 400px) {
  .image {
    width: 100%;
    margin-bottom: 0; } }

img.image.left,
.gutter-right {
  margin-right: 20px; }

img.image.right,
.gutter-left {
  margin-left: 20px; }

.credit.image.left {
  width: 250px;
  margin-right: 20px; }

.credit span {
  display: block;
  text-align: right;
  font-size: 0.55em;
  margin: -5px 5px 0 0; }

.picture {
  margin-bottom: 1em; }

.picture p {
  font: italic 0.7em/1 arial;
  color: #4f0502;
  background: beige;
  padding: 10px;
  margin: 0; }

.picture.left {
  padding-right: 20px; }

.picture.right {
  padding-left: 20px; }

.picture.border {
  padding: 0;
  border: none; }

.picture.border img {
  padding: 3px;
  border: solid 1px black; }

/* use on DIV with text that has image floated beside it */
.hide {
  display: none !important; }

p.important {
  color: #780300; }

p.important a {
  color: #480100; }

.two-column {
  width: 60%; }

.two-column li {
  float: left;
  width: 40%;
  margin-right: 2%; }

.cancelled {
  position: absolute;
  top: 70px;
  left: 25px; }

.inset-module {
  width: 50%;
  padding: 1% 2%;
  background: #ffffcc;
  font-size: 0.75em; }

.inset-module.right {
  margin-left: 20px; }

.inset-module.left {
  margin-right: 20px; }

.lecture-prices td {
  line-height: 1.2em;
  vertical-align: bottom;
  padding: 10px 20px 0 0; }

.tn-newsletter {
  padding: 4px;
  border: solid 1px #ccc;
  background: white;
  position: relative;
  float: left;
  margin: 0 20px 20px 0;
  width: 46%; }

.tn-newsletter a img {
  display: block;
  padding: 0; }

.tn-newsletter:before,
.tn-newsletter:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 400px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg); }

.tn-newsletter:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto; }

a.button {
  letter-spacing: 0.2em;
  display: inline-block;
  background: red;
  padding: 0;
  padding: 0.75em 1em;
  text-decoration: none;
  color: white;
  font-weight: bold;
  border-radius: 0.75em;
  background-color: #780300; }

a.button:hover {
  background: #540200; }

.social-icons img {
  margin-bottom: -0.2em;
  margin-right: 1em;
  height: 1.4em; }

/* jQuery Countdown styles 1.6.1. */
.hasCountdown {
  /*border: 1px solid #ccc;  REMOVED FOR THIS COUNTER*/
  background-color: #eee; }

.countdown_rtl {
  direction: rtl; }

.countdown_holding span {
  color: #888; }

.countdown_row {
  clear: both;
  width: 100%;
  padding: 0px 2px;
  text-align: center; }

.countdown_show1 .countdown_section {
  width: 98%; }

.countdown_show2 .countdown_section {
  width: 48%; }

.countdown_show3 .countdown_section {
  width: 32.5%; }

.countdown_show4 .countdown_section {
  width: 24.5%; }

.countdown_show5 .countdown_section {
  width: 19.5%; }

.countdown_show6 .countdown_section {
  width: 16.25%; }

.countdown_show7 .countdown_section {
  width: 14%; }

.countdown_section {
  display: block;
  float: left;
  font-size: 75%;
  text-align: center; }

.countdown_amount {
  font-size: 200%; }

.countdown_descr {
  display: block;
  width: 100%; }

.contact h5 {
  font-weight: bold;
  color: #780300;
  text-transform: uppercase; }

.indented-blurb {
  margin-left: 1em;
  font-style: italic; }

.indented-blurb h6 {
  font-weight: bold;
  font-style: normal; }