/* HTML5 ADVENT | ZingChart (www.zingchart.com) | PINT (www.pint.com) */

/* BASIC ELEMENTS
------------------------------------------------------------------------------------- */
/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,
em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,
caption,article,aside,audio,canvas,command,datalist,details,embed,eventsource,figcaption,figure,footer,header,hgroup,keygen,
mark,meter,nav,output,progress,ruby,rp,rt,section,source,summary,time,video,wbr { margin:0; padding:0; }
table, th, td { margin:0; }

/* HTML/BODY */
 body, html {
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 16px;
  font-family: Arial; }
 body {
  background-image: url('../images/tree.gif'), url('/images/bg_grad.gif');
  background-position: -250px 0px, center top;
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
  background-color: #205690;	 
 }
/* LINKS */
a:link { color:#0030ff; text-decoration:none; }
a:visited { color:#0030ff; text-decoration:none; }
a:hover, a:active { color:#0030ff; text-decoration:underline; cursor: pointer; }
a img { border:0; }

@font-face {
    font-family: 'skaterdudesregular';
    src: url('/fonts/skaterdudes-webfont.eot');
    src: url('/fonts/skaterdudes-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/skaterdudes-webfont.woff') format('woff'),
         url('/fonts/skaterdudes-webfont.ttf') format('truetype'),
         url('/fonts/skaterdudes-webfont.svg#skaterdudesregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'equalsans';
    src: url('/fonts/equalsans-webfont.eot');
    src: url('/fonts/equalsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/equalsans-webfont.woff') format('woff'),
         url('/fonts/equalsans-webfont.ttf') format('truetype'),
         url('/fonts/equalsans-webfont.svg#skaterdudesregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* HEADLINES */
h1 { margin:0 0 10px; color:#b2b2b2; font:bold 30px/30px helvetica,sans-serif; text-shadow:1px 1px 4px #000; }
h1.headline { margin:0 auto; text-align: center; max-width: 592px; }
h1.headline span { display:inline-block; }
h1.skaterdudes { font-family: 'skaterdudesregular'; }
h2 { margin:0 0 2px; margin-top: 20px; margin-bottom: 15px; color: #F1E63C; font-size: 42px; font-family: 'equalsans'; }
h2.headline { margin:0 0 15px; color:#a8a8a8; font:normal 14px/16px 'FranklinGothicBook',helvetica,sans-serif; text-shadow:1px 1px 2px #000; }
h3 {  font-size: 28px; font-weight: bold; margin-bottom: 10px; color: #014e68; font-family: 'equalsans'; }
h4{ margin:0 0 2px; color:#000; font:normal 18px/20px helvetica,sans-serif; }
/* -- H1 SPAN colors */
.color1 { color:#b2e205; }
.color2 { color:#ff3301; }
.color3 { color:#b70000; }
.color4 { color:#02bab5; }

/* WRAPPER
------------------------------------------------------------------------------------- */
#container { position:relative; margin:0 auto; padding:0; width:1000px; padding-left: 120px; height: auto; text-align:left; }


/* HEADER
------------------------------------------------------------------------------------- */
/* HEADER DEFAULTS */
#header { padding:0 0 70px 0; width:100%; height:120px; display:block; color:#a8a8a8; font:normal 12px/14px 'FranklinGothicBook',helvetica,sans-serif; }
#header p { font:normal 12px/14px 'FranklinGothicBook',helvetica,sans-serif; text-shadow:1px 1px 2px #000; }
#header .disclaimer { margin:0 0 10px; font-size:11px; }
.js #header p { display:none; }
.js #header .disclaimer { display:block; }


/* CALENDAR
------------------------------------------------------------------------------------- */
#calendar { position:relative; width:100%; height:480px; display:block; z-index:10; overflow: hidden; margin-top: 70px; }
/* -- Calendar UL */
.component-calendar { margin:0; }
.component-calendar li { position:relative; width:126px; height:120px; float:left; display:inline; overflow:hidden; list-style:none; color:#4f4f4f; z-index:10; }
.component-calendar .active:hover { box-shadow:0 0 9px #222; -moz-box-shadow:0 0 9px #222; -webkit-box-shadow:0 0 9px #222; }
.component-calendar .remove-css:hover { box-shadow:0 0 0; -moz-box-shadow:0 0 0; -webkit-box-shadow:0 0 0; }
.component-calendar .indent-3 { margin-left:378px; }
.component-calendar a { position:relative; width:126px; height:120px; display:block; color:#4f4f4f; cursor:default; }
.component-calendar a:hover { opacity:.14; text-decoration:none; background:#000 url(../images/bg-sprite-24.png) no-repeat 0 -120px; }
.component-calendar .active a:hover { opacity:1; background:none; cursor:pointer; }
.component-calendar .active a:hover .day { -moz-border-radius:5px; border-radius:5px; }
.component-calendar .active { background: url(../images/temp1.jpg) top left no-repeat; }
.component-calendar .active .day strong { font-weight: normal; color: #ccc; padding-top: 0; }
/* -- 'Day' element */
.component-calendar .day { position:absolute; top:0; left:0; width:126px; height:120px; display:block; z-index:20; }
.component-calendar .day strong{ position:absolute; top:0; left:0; padding:29px 6px 0; width:114px; height:91px; color:#4f4f4f; z-index:20; font-size:24px; }
/*.component-calendar .active a:hover .day strong { background:url(../images/bg-sprite-24.png) no-repeat 0 0; }*/
.component-calendar .day span { position:absolute; top:0; left:0; width:126px; height:120px; opacity:0; z-index:15; -moz-border-radius:5px; border-radius:5px; }
/* -- JS-Enabled 'Fade In/Out' Hover */
.component-calendar .hover { background:none !important; }
.component-calendar .hover span { background:#000 url(../images/bg-sprite-24.png) no-repeat 0 -120px; }
.component-calendar .active span { background:none; }
.component-calendar .color1 .hover span { background-color:#b2e205; background:-moz-linear-gradient(100% 100% 90deg, #8dbb01, #b2e205); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#b2e205), to(#8dbb01)); }
.component-calendar .color2 .hover span { background-color:#ffd427; background:-moz-linear-gradient(100% 100% 90deg, #ffa800, #ffd427); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffd427), to(#ffa800)); }
.component-calendar .color3 .hover span { background-color:#00cccc; background:-moz-linear-gradient(100% 100% 90deg, #01a09c, #00cccc); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#00cccc), to(#01a09c)); }
.component-calendar .color4 .hover span { background-color:#ff5a2e; background:-moz-linear-gradient(100% 100% 90deg, #ff3301, #ff5a2e); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff5a2e), to(#ff3301)); }
/* -- Content Element */
.component-calendar .content { position:relative; margin:0 0 0 126px; width:126px; height:120px; display:block; background:#332f30; z-index:30; }
.component-calendar img { margin:0 0 8px; display:block; }
.component-calendar small { position:absolute; top:4px; left:7px; color:#fff; font-size:24px; line-height:24px; z-index:40; }
.component-calendar strong { padding:0 0 0 7px; display:block; }


/* OVERLAY BOX
------------------------------------------------------------------------------------- */
.component-box { position:absolute; padding:0 0 13px; display:none; background:url(../images/bg-box-arrow.png) no-repeat 0 100%; z-index:100; }
.arrow-left { background-position:20% 100%; }
.arrow-center { background-position:50% 100%; }
.arrow-right { background-position:80% 100%; }
.component-box .inner { position:relative; padding:21px 15px; background:#fff; box-shadow:0 0 9px #121212; -moz-box-shadow:0 0 9px #121212; -webkit-box-shadow:0 0 9px #121212; }
.component-box .close { position:absolute; top:6px; right:5px; width:10px; height:10px; overflow:hidden; background:url(../images/bg-sprite.png) no-repeat 0 -180px; cursor:pointer; }
.component-box .close span { position:absolute; top:0; left:0; width:10px; height:10px; overflow:hidden; background:url(../images/bg-sprite.png) no-repeat 0 -180px; cursor:pointer; }
/* -- Overlay Specifics */
#overlay-mask { position:absolute;z-index:999;background-color:#000;display:none;top:0px;left:0px; }
#overlay-main { position:absolute; top:0; left:0; margin:0 auto; text-align:left; background:#d9d9d9 url(../images/bg-overlay-main.png) repeat-x 0 0; box-shadow:0 0 19px #000; -moz-box-shadow:0 0 19px #000; -webkit-box-shadow:0 0 19px #000; z-index:1000; }
/*#overlay-main { position:absolute; top:0; left:0; margin:0 auto; padding:10px; width:666px; height:410px; text-align:left; background:#d9d9d9 url(../images/bg-overlay-main.png) repeat-x 0 0; box-shadow:0 0 19px #000; -moz-box-shadow:0 0 19px #000; -webkit-box-shadow:0 0 19px #000; z-index:1000; }*/
#overlay-body { overflow:hidden; margin:0 auto; padding:10px; }
/*#overlay-body { position:absolute; top:0;left:0; margin:0 auto; padding:10px; }*/
#overlay-close { position:absolute; top:10px; right:10px; width:30px; height:20px; overflow:hidden; background:url(../images/bg-sprite.png) no-repeat 0 -210px; cursor:pointer; }
#overlay-close span { position:absolute; top:0; left:0; width:30px; height:30px; display:block; background:url(../images/bg-sprite.png) no-repeat 0 -210px; cursor:pointer; }
#overlay-main .left { width:446px; padding-left: 10px; float:left; display:inline; line-height: 1.5; }
#overlay-main .left .quote { font-family: Arial, sans-serif; font-size: 14px; }
#overlay-main .right { margin-left:20px; padding:19px 0 0 19px; width:414px; min-height: 500px; float:right; display:inline; word-wrap:break-word; background: white; }
#overlay-main .right img.gingerbread { margin-bottom: 20px; }
#overlay-main p { margin:0 0 20px; }
#overlay-main p.candy { font-size: 14px; }
#overlay-main .caption { margin:4px 0 0; }


/* 'DAY' DETAIL
------------------------------------------------------------------------------------- */
#daydetail { margin:170px 0 0; }
.js #daydetail { display:none; }
/* -- List Styles */
#daydetail-list { margin:0 auto; width:786px; }
#daydetail-list li { margin:0 0 25px; list-style:none; }
#daydetail-list .top { margin:8px 0 0; width:100%; text-align:right; }
#daydetail-list p { margin:0 0 7px; }
/* -- Content */
.daydetail-content { padding:10px; width:600px; /*background:#d9d9d9 url(../images/bg-overlay-main.png) repeat-x 0 0;*/ position: absolute; top: 205px; left: 240px; z-index: 9999; visibility: hidden; display: none; }
.daydetail-content p { padding-top: 10px; padding-bottom: 20px; width: 533px; }
.daydetail-content img.verse { margin-top: 20px; }
.daydetail-content .left { width:406px; float:left; }
.daydetail-content .right { margin-right:27px; padding:19px 0 0; width:314px; float:right; }
/* -- Caption */
.caption { margin:4px 0 0; color:#666; }
.caption strong { color:#000; font-size:16px; }


/* FOOTER
------------------------------------------------------------------------------------- */
#footer { position:absolute; top:627px; left:0; width:100%; height:60px; display:block; clear:both; color:#fff; font:normal 11px/13px helvetica,sans-serif; z-index:50; }
#footer .disclaimer { position:absolute; top:24px; left:252px; width:378px;  }
#footer .disclaimer p { width:100%; text-align:center; }

#zingchart { position:absolute; top:11px; right:29px; }
#zingchart li { list-style:none; }
#zingchart span { margin:13px 8px 0 0; float:left; display:inline; }
#zingchart img { float:left; display:inline; }
#zingchart-box { width:440px; }
#zingchart-box .inner { padding:21px 230px 40px 15px; background:#121212 url(../images/bg-zingchart.png) no-repeat 100% 100%; }
#zingchart-box .text { width:200px; }
#zingchart-box p { margin:0 0 5px; }
#zingchart-box p img { margin:0 0 10px; display:block; }
#zingchart-box .last { margin:0; }
#zingchart-box a { color:#00bbf1; }

/* MISC. CLASSES & IDS
------------------------------------------------------------------------------------- */
.clearfix:after, .component-calendar:after, .daydetail-content:after { content:''; display:block; clear:both; }

img.tree { position: absolute; top: 0; z-index: 1; }
img.tree.left { left: -250px; }
img.tree.right { right: -250px; }
.modal-content p { margin: 20px 0 15px 0; color: #000; }
.modal-content .modal-header { padding-bottom: 30px; }
.circle { position: absolute; top: 156px; left: 10px; width: 48px; height: 48px; border-radius: 50%; background: none; text-indent: -9999px; z-index: 999; }
.circle.redboots { width: 40px; height: 40px; top: 204px; left: 80px; }
.circle.carols { width: 58px; height: 58px; top: 285px; left: 38px; }
.circle.prayer { width: 48px; height: 48px; top: 392px; left: 38px; }
.circle.birth { width: 40px; height: 40px; top: 387px; left: 132px; }
a.btn.btn-primary { color: #fff; }
.close { display: block; opacity: 1; z-index: 9999; }
.close:hover { opacity: 0.8; }
body.mobile { font-size: 13px; background: url('/images/bg_grad.gif') top center repeat-y; }
.mobile #container { font-size: 13px; padding: 5%; max-width: 100%; }
.mobile #header { padding: 0; height: auto; max-width: 100%; }
.mobile h1.headline { max-width: 100%; }
.mobile h1.headline img { max-width: 100%; }
.mobile #calendar { display: none; margin-top: 0; max-width: 100%; }
.mobile .daydetail-content { position: relative; max-width: 100%; top: auto; left: auto; }
.mobile .daydetail-content p { max-width: 100%; }
.mobile .daydetail-content.today { display: block; visibility: visible; }
.mobile img.close { display: none; }
.mobile .modal { display: block; position: relative; padding: 10px; width: 600px; margin: auto; }
.mobile .modal a { text-decoration: underline; }
.mobile .modal-header, .modal-footer { display: none; }
.mobile a.btn.btn-primary { width: 100%; height: auto; word-wrap: normal; display: block; white-space: normal; }
.archive { width: 450px; margin: auto; }
.archive ul { margin-left: 50px; }
.archive a { color: #fff; }


@media screen and (max-device-width:570px) {
.mobile .modal { width: auto; }
/*.mobile #container .daydetail-content h2 { font-size: 60px; }
.mobile #container .daydetail-content p { font-size: 200%; }*/
.archive { max-width: 100%; }
.archive ul { margin-left: 50px; max-width: 100%; }
.archive ul li { max-width: 100%; }
}

@media screen and (min-device-width:578px) and (max-device-width:1024px) {
body { font-size: 100%; background: url('/images/bg_grad.gif') top center repeat-y; }
#container { padding: 0; max-width: 100%; }
}

@media screen and (min-device-width:578px) and (max-device-width:800px) {
.daydetail-content { left: auto; width: auto; max-width: 100%; padding: 0 10%; }
.daydetail-content p { width: 90%; }
}