/*Expression Engine /  ----------------------------------------------------------
    Client Name CSS
    Managed by: Blue State Digital

    TABLE OF CONTENT

    01 - HTML5 Boilerplate
    02 - COMMON STYLES
    03 - LAYOUT
    04 - HOMEPAGE 
    05 - SUBPAGES
    06 - SIDEBAR
    07 - FRAMEWORK
    08 - UTILITY
    09 - PRINT
  
    COLOR GUIDE (Main Site Colors and their Hex Codes)
  
---------------------------------------------------------- */

/* 01 =HTML5 Boilerplate
------------------------- */

html, 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, canvas, details, figcaption, figure,  footer, header, hgroup, 
menu, nav, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display:block;
}
nav 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; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select {vertical-align:middle;}

/* end HTML5 Boilerplate reset */

/* HTML5 boilerplate base styles */

html { overflow-y: scroll; }
body { font:13px/1.231 sans-serif; *font-size:small; } 
select, input, textarea, button { font:99% sans-serif; }

pre, code, kbd, samp { font-family: monospace, sans-serif; }
ul, ol { list-style-type: none; }

small { font-size: 85%; }
b, strong, th { font-weight: bold; }
i, em { font-style: italic; }
td, td img { vertical-align: top; } 
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
pre {  padding: 15px;  white-space: pre;  white-space: pre-wrap;  white-space: pre-line;  word-wrap: break-word; }
textarea { overflow: auto; } 
.ie6 legend, .ie7 legend { margin-left: -7px; } 
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; }
.ie7 img { -ms-interpolation-mode: bicubic; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
button {  width: auto; overflow: visible; }

/* end HTML5 boilerplate base styles */

/* BSD base styles */
caption, th { text-align: left; }


/* 02 =COMMON STYLES
------------------------- */

body { font-family: "myriad-pro", arial, sans-serif; font-size: 16px; }
select, input, textarea {   color: #444; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
input {  }

.base h1, h1 { font-size: 28px; }
.base h2, h2 { font-size: 20px; }
.base h3, h3 { font-size: 16px; }
.base h4, h4 { font-size: 16px; font-weight: bold; }
.base h5, .base h6 {  }

.base p { margin-bottom: 15px; }
a, a:active, a:visited { color: #33afe8; text-decoration: none; }
a:hover, a:active { outline: none; }
a:hover, a:focus { color: #FFF; }
a:link { -webkit-tap-highlight-color: #FF5E99; }

blockquote { padding-left: 2em; color: #6d6f72; border-left: 3px solid #d8d5ca; font-family: "proxima-nova",sans-serif; font-size: 14px; }

.base ul, .base ol { margin-left: 1.8em; margin-bottom: 15px; }
.base ul {  }
.base ol {  }
.base ul li, .base ol li {  }
.base ul li { list-style: disc; }
.base ol li { list-style: decimal; }
.base li ol { margin-bottom: 0; }
.base li ul { margin-bottom: 0; }
.base li ol li { list-style: lower-roman; }
.base li ul li { list-style: circle; }


/* 03 =LAYOUT
------------------------- */
body { background: #232323; }
#full-background { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 0; }
#container { width: 1280px; margin: 0 auto; background-color: transparent; background-repeat: no-repeat; background-position: 0 0; position: relative; }

#global-header { padding: 50px; position: relative; height: 320px; top: 0; left: 0; background: transparent url(https://www.halftheskymovement.org/page/-/images/static/fade6black.png) 0 0 repeat-y; }
body.dev #global-header { background: transparent; }
#header-logo { width: 340px; height: 83px; margin: 0 0 20px; z-index: 10; position: absolute; display: block; top: 50px; left: 50px; background: transparent url(https://www.halftheskymovement.org/page/-/images/pages/header-logo.png) 0 0 no-repeat; }
/*#header-logo { z-index: 10; position: absolute; top: 50px; left: 50px; background: url('https://www.halftheskymovement.org/page/-/images/static/logo-transparent.png') no-repeat, url('https://www.halftheskymovement.org/page/-/images/logo-skyBG.jpg'); width:259px; height:83px; margin:0 0 20px;}
html.no-multiplebgs #header-logo, html.no-multiplebgs #home #header-logo { background:url('https://www.halftheskymovement.org/page/-/images/logo_static.jpg') no-repeat }

#header-logo.multibackstart, #home #header-logo.multibackstart {
  background-position: 0 0, 0px 0;
}

#header-logo.multibackstart:hover, #home #header-logo.multibackstart:hover {
  -moz-transition-property: background-position;  
  -moz-transition-duration: 45s;
  -moz-transition-timing-function: linear;
  -webkit-transition-property: background-position;  
  -webkit-transition-duration: 45s;  
  -webkit-transition-timing-function: linear;
  -o-transition-property: background-position;  
  -o-transition-duration: 45s;  
  -o-transition-timing-function: linear;
  transition-property: background-position;  
  transition-duration: 45s;  
  transition-timing-function: linear;
  background-position: 0 0, -898px 0;
}*/
.subtitle { z-index: 10; position: absolute; top: 153px; left: 50px; text-shadow: 0 0 10px #000; color: #33afe8; font-size: 20px; font-style: italic; width: 300px; display: none; }
header #signup-box { background: #33AFE8; padding: 5px 10px; font-size: 14px; z-index: 10; position: absolute; right: 20px; top: 0; width: 205px; height: 75px; }
header #signup-box h3 { color: #FFF; font-size: 20px; font-weight: normal; margin: 7px 0 !important; }
header #signup-box input[type="text"] { width: 125px; margin-right: 5px; background: #33AFE8; border: 1px solid #FFF; color: #FFF; padding: 7px; }
header #signup-box input[type="submit"] { width: 50px; background: #000; border: 1px solid #FFF; color: #FFF; padding: 7px; }
header #signup-box input[type="submit"]:hover { color: #33AFE8; background: #FFF; }
#menu { background: #000; z-index: 11; display: block; position: absolute; top: 0; right: 245px; width: 560px; height: 39px; padding: 0 8px; font-weight: bold; }
#menu li { list-style: none; padding: 10px 0 10px 0; margin: 0; font-size: 16px; position: relative; display: block; float: left; }
/*#menu > li.last_child { background: transparent url(https://www.halftheskymovement.org/page/-/images/static/act-arrow.png) right center no-repeat; padding-right: 15px;
  -webkit-transition: padding .10s linear;
  transition: padding .10s linear;
  -moz-transition: padding .10s linear;
  -o-transition: padding .10s linear; }
#menu > li.last_child:hover { padding-right: 25px; }
#menu > li.last_child a { color: #33AFE8; }*/
#menu>li.last_child { border: 1px solid #FFF; background: #33afe8; margin: 5px 0 5px 5px; padding: 4px 0; }
#menu>li.last_child:hover { background: #FFF; color: #33afe8; }
#menu>li.last_child>a { color: #FFF; }
#menu>li.last_child:hover>a { color: #33afe8; }
#menu li a, #menu li span { color: #FFF; padding: 0 8px 0 7px; }
#menu li a:hover { color: #33afe8; }
#menu li ul { display: none; position: absolute; top: 30px; left: -1px; padding-top: 10px; width: 150px; background: #000; }
/*#menu li.first_child ul { width: 150px; }*/
#menu li ul li { padding: 8px; float: none; }
#menu li ul li a { border-right: 0; padding: 0; display: block; }
#menu li:hover ul, #menu li ul:hover { display: block; }
 { height: 20px; float: left; margin: 0 5px; background: transparent url(https://www.halftheskymovement.org/page/-/images/static/social-icons.png) 0 0 no-repeat; display: block; }
 { background-position-y: 100%; }
#social { position: absolute; z-index: 10; top: 50px; right: 255px; width: 270px; }
#social a, a.social { width: 14px; height: 14px; float: left; display: block; border-radius: 2px; padding: 4px 3px 2px; margin: 0 5px; background: transparent; color: #FFF; font-size: 14px; }
#social a.pintrest { background: #d0272d; }
#social a.facebook { background: #4167bf; }
#social a.twitter, a.social.twitter { background: #2daae1; }
#social a.tumblr { background: #425e7e; }
#social a.google { background: #de4324; }
#social a.rss { background: #ff7200; }
#social a.youtube { background: #b22c27; }
#social a.instagram { background: #336f91; }
#social a.good-is { background: #71b3f7; text-align: center; }
#social a.good-is img { position: relative; top: -2px; }
#social a:hover, a.social:hover { background: #000; }

#main { padding: 0 0; color: #FFF; position: relative; background-color: #434343;
    background-image: url(https://www.halftheskymovement.org/page/-/images/static/main-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#6b6b6b), to(#434343));
    background: -webkit-radial-gradient(circle, #6b6b6b, #434343);
    background: -moz-radial-gradient(circle, #6b6b6b, #434343);
    background: -ms-radial-gradient(circle, #6b6b6b, #434343);}
#page-links { background: transparent url(https://www.halftheskymovement.org/page/-/images/static/ghoul.png) 0 0 repeat; padding: 30px 50px; height: 60px; margin-top: -120px; position: relative; }
#page-links a { color: #777; }
#page-links a:hover { color: #AAA; }
#page-links h2 { font-size: 20px; }
#content { padding: 30px 50px; }
#content.base h1, #preamble .left h1 { font-size: 36px; margin-bottom: 7px; }
#twitter-feed + #content { width: 800px; float: left; }
#twitter-feed.align-book + #content { width: auto; float: none; }
#twitter-feed { width: 279px; float: right; padding: 30px 50px 0; margin-bottom: 20px; position: relative; }
/*#twitter-feed + #video-feed + #content { width: 422px; float: left; }*/
#twitter-feed + #video-feed + #content { width: 800px; float: none; }
#video-feed { width: 279px; float: right; padding: 80px 50px 50px; }

.base ul#subnav, .base ul#subnav li { margin: 0; padding: 0; list-style: none; }
.base ul#subnav { margin-bottom: 15px; }
.base ul#subnav li { display: inline; padding: 0 10px; border-right: 1px solid #FFF; }
.base ul#subnav li.first_child { padding-left: 0; }
.base ul#subnav li.last_child { border-right: 0; }
#subnav li a { color: #33afe8; }
#subnav li a:hover { color: #FFF; }
#subnav li.active a, #subnav li.active a:hover { color: #AAA; cursor: default; }
#disqus_thread { padding: 0 50px 50px; width: 800px; float: left; }
.comment-count { display: none; padding-left: 25px; }
footer { background: #000; position: relative; padding: 15px 50px; height: 22px; }
#footer-nav { padding: 0 0; position: absolute; top: 20px; left: 50px; font-size: 12px; font-weight: bold; }
#footer-nav li { list-style: none; padding: 0; margin: 0; display: inline; }
#footer-nav li a { padding-right: 10px; display: inline; color: #FFF; }
#footer-nav li a:hover { color: #33afe8; }
#search { position: absolute; top: 13px; left: 500px; }
#search input[type="text"] { background: #393939; color: #FFF; font-size: 12px; border: 0; border-radius: 18px; moz-border-radius: 18px; -webkit-border-radius: 18px; padding: 7px 7px 7px 40px; width: 110px;}
#search input[type="image"] { position: absolute; left: 13px; top: 8px; }
#logos { position: absolute; top: 0px; right: 50px; border:solid; border-color:#FFFFFF; padding: 5px;}
#logos a { margin-left: 30px; }

/* 04 =HOMEPAGE
------------------------- */

.cta-arrow { background: transparent url(https://www.halftheskymovement.org/page/-/images/static/cta-arrow.png) 0 center no-repeat; width: 15px; height: 100%; display: block; position: absolute; right: 10px; top: 0; }
.blue-section .cta-arrow { right: 10px; }
.cta-arrow:hover { background-position: 100% center; }
.dev .cta-arrow { background: transparent; font-size: 20px; }
.dev .cta-arrow span.ss-icon { position: absolute; height: 20px; overflow: none; top: 50%; margin-top: -10px; }
#home #container { width: 100%; min-width: 1280px; margin: 0 auto; background: no-repeat center center ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: static; }
#home h1 { font-size: 22px; }
#home h2 { font-size: 16px; }
#home h3 { font-size: 14px; }
#home #global-header { background: transparent; }
#home #header-logo { background: url('https://www.halftheskymovement.org/page/-/images/pages/header-logo.png') no-repeat, url('https://www.halftheskymovement.org/index.html'); }
#home .subtitle { 
    -webkit-transition: top .10s linear;
    transition: top .10s linear;
    -moz-transition: top .10s linear;
    -o-transition: top .10s linear;
    -ms-transition: top .10s linear; }
#home #main { background: none; margin-top: -90px; }
#home .left-section { width: 300px; color: #FFF; padding: 15px 20px; border-bottom: 1px dashed #AAA; position: relative;
    -webkit-transition: padding .10s linear;
    transition: padding .10s linear;
    -moz-transition: padding .10s linear;
    -o-transition: padding .10s linear;
    -ms-transition: padding .10s linear; }
#home .left-section h1 span.ss-icon { position: relative; top: 3px; margin-left: 10px;}
#home .left-section h1.space span.ss-icon { margin: 0 10px 0 0;}
#home .left-section h1.dvd { text-align: right; font-style: normal; float: right; }
#home .left-section.first-child { border-top: 1px dashed #AAA; }
#home .left-section:hover a { color: #33afe8; }
#home .left-section.no-hover:hover a { color: #FFF; }
#home .left-section.no-hover:hover a:hover { color: #33afe8; }
#home .left-section a { color: #FFF; }
#home .left-section a:hover { color: #33afe8; }
#home .left-section a.cta { color: #33afe8; }
#home .left-section a.cta:hover { color: #FFF; }
#home .left-section h3 { display: none; }
#home .left-section img.floatl, #home .left-section img.floatr { padding-bottom: 0; 
    -webkit-transition: height .10s linear;
    transition: height .10s linear;
    -moz-transition: height .10s linear;
    -o-transition: height .10s linear;
    -ms-transition: height .10s linear; }
#home .left-section.blue-section { background: transparent url(https://www.halftheskymovement.org/page/-/images/static/blue-screen-75.png) 0 0 repeat; }
#home .left-section.blue-section a { color: #FFF; }
#home .left-section.blue-section a:hover { color: #000; }
#home .left-section.blue-section:hover a { color: #000; }
#home h1.space { margin-top: 20px; font-style: normal;
    -webkit-transition: margin .10s linear;
    transition: margin .10s linear;
    -moz-transition: margin .10s linear;
    -o-transition: margin .10s linear;
    -ms-transition: margin .10s linear; }
#home h3 { margin-bottom: 15px; }
#rotator { background: transparent url(https://www.halftheskymovement.org/page/-/images/static/ghoul.png) 0 0 repeat; position: relative; padding: 10px 50px; height: 75px; margin: 20px -50px 0px -50px; }
/*#slides { position: absolute; margin: 10px 50px; height: 75px; overflow: hidden; white-space: nowrap; width: 1180px; top: 0; left: 0; }*/
#slides { position: relative; margin: 0 auto; height: 75px; overflow: hidden; white-space: nowrap; width: 1180px; top: 0; left: 0; }
#rotator li, #rotator ul { list-style: none; padding: 0; margin: 0; }
#rotator img { width: 110px; height: 75px; margin: 0 10px 25px 0; }
#rotator ul { position: absolute; top: 0; left: 0; height: 75px; white-space: nowrap; }
#rotator li { display: inline; width: 120px; }
#rotator .arrow { display: none; font-size: 50px; color: #444; text-align: center; position: absolute; top: 15px; height: 50px; width: 20px; z-index: 15; }
#rotator #next { right: 15px; }
#rotator #prev { left: 15px; }
#rotator .active { color: #FFF !important; cursor: pointer; }
#home footer { margin-top: -15px; }

#home #container { width: 100%; height: auto; position: relative; min-width: 810px; min-height: 600px; }
#home header { width: 100%; padding: 0; position: absolute; top: 0; left: 0; }
#home #main { position: absolute; bottom: 30px; left: 0; width: 100%; }
#home footer { position: absolute; bottom: 0; left: 0; padding: 15px 0; width: 100%; margin: 0; min-width: 1035px; }
#home #search { left: 33%; }
#home #slides { width: auto; }

/* 05 =SUBPAGES
------------------------- */

#blog .entry.thumbnail .entry-thumb img { width: 120px; }
#blog .entry p { margin-left: 130px; }
.base ul.funders-teams, .base ul.funders-teams li { margin: 0; padding: 0; list-style: none; }
.base ul.funders-teams img { width: 200px; }
.funders-teams .floatl { padding: 0 20px 20px 0; }
#twitter-feed ul li { padding: 20px 0; border-bottom: 1px dashed #AAA; }
#twitter-feed .book, #preamble .book { padding: 20px 0 10px; margin-bottom: 10px; border-top: 1px dashed #444; border-bottom: 1px dashed #333; }
#twitter-feed .book h1, #preamble .book h1 { margin-bottom: 20px; }
#twitter-feed .book h3, #preamble .book h3 { margin-top: 25px; }
.book h1 a { color: #FFF; }
.book h1 a:hover { color: #33afe8; }
#twitter-feed .title-block { position: relative; }
#twitter-feed .social.twitter { float: none; position: absolute; top: 0; right: 120px; }
#content .social.rss { background-position: -100px 0; width: 20px; position: relative; margin-left: 10px; float: none; display: inline-block; }

#video-feed ul, #video-feed li { margin: 0; padding: 0; list-style: none; }
#video-feed img { width: 110px; padding-bottom: 0; }
#video-feed li { padding: 10px 0; border-top: 1px dashed #AAA; }
#video-feed li:first-child { border: 0; }
#video-feed h2 { margin-bottom: 10px; }
#video-feed p { margin-left: 120px; font-size: 14px; }
#video-feed a { color: #FFF; }
#video-feed a:hover { color: #33afe8; }

#preamble { padding: 30px 50px 0; margin-bottom: -20px; }
#preamble .left { float: left; width: 700px; }
#preamble .sort-box { margin: 20px 20px 0 0; float: left; }
#partners #preamble .sort-box { clear: left; }
#preamble .right { float: right; width: 279px; padding: 0 50px; margin-bottom: 20px; position: relative; }
.base ul#gallery, .base ul#gallery li { padding: 0; margin: 0; list-style: none; }
.base ul#gallery li { float: left; width: 212px; margin: 10px; }
#gallery .download-links { margin: 10px 0 0 0; }
#gallery .download-links select { width: 162px; }
#gallery .download-links .button { width: 27px; font-weight: bold; color: #FFF; text-align: center; background: #33AFE8; padding: 2px 10px; float: right; }
#videos #gallery li { height: 270px; }
#videos.educational #gallery li { height: 330px; }
#gallery img { width: 210px; border: 1px solid #AAA; margin-bottom: 7px; }
#gallery p { margin: 0; font-size: 14px; }
#gallery p.summary { margin-bottom: 10px; }
#gallery h4 { margin-bottom: 7px; }
#gallery .pagination { clear: both; }
#partners #gallery li { width: 272px; height: 325px; }
#partners #gallery img { width: 270px; height: 150px; }
.base ul.partners-more, .base ul.partners-more li { list-style: none; margin: 0; padding: 0; }
#partners .pagination { clear: both; float: left; margin-top: 20px;}
#partners #gallery img.logo { width: 80px; height: auto; border: 0; }
#partners #gallery p { margin-left: 90px; }
#gallery li span.symbol { margin-right: 5px; font-size: 12px; }

#background-group { width: 1280px; height: 420px; margin: -50px; }
#background-group .background-frame, #background-group .link-frame { border-left: 10px solid #000; display: block; height: 420px; width: 425px; position: absolute; right: 0; top: 0; z-index: 1; background-color: transparent; background-position: 0 0; background-repeat: none; }
#background-group .background-frame { background-color: #232323; }
#background-group .background-frame:first-child, #background-group .link-frame:first-child { border-left: 0; width: 850px; right: 430px; }
#background-group .gradient-mask { z-index: 2; position: absolute; top: 0; left: 0;width: 100%; height: 100%; background: transparent url(https://www.halftheskymovement.org/page/-/images/static/fade6black.png) 0 0 repeat-y; }
#background-group a.headline-group { position: absolute; bottom: 20px; left: 20px; z-index: 3; color: #FFF; }
#background-group a.headline-group:hover { color: #33afe8; }
#background-group .background-links .link-frame:first-child .headline-group { left: 50px }
#background-group .link-frame { z-index: 3; }
#background-group h1 { font-size: 36px; }

#search .gs-result .gs-title, .gs-result .gs-title * { color: #33AFE8 !important; text-decoration: none !important; }
#search .gs-result .gs-title:hover, .gs-result .gs-title *:hover { color: #FFF !important; }
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl { color: #33AFE8 !important; }
.gsc-above-wrapper-area, .gsc-webResult .gsc-result { border-color: #444 !important; }
.gs-visibleUrl-short { display: none; }
.gs-webResult div.gs-visibleUrl-long, .gs-promotion div.gs-visibleUrl-long { display: block !important; }
.gsc-results .gsc-cursor-box .gsc-cursor-page { color: #33AFE8 !important; }
.gsc-results .gsc-cursor-box .gsc-cursor-current-page { color: #333 !important; }

.campaign-link { margin: 10px 0 !important; text-shadow: 0 0 8px #000; }
.book h1 { font-style: italic; }

#act #content.base h2 { font-size: 24px; font-weight: bold; }
#act #content.base h2 span.ss-icon { font-size: 20px; position: relative; top: 4px; margin-left: 8px; left: 0; 
  -webkit-transition: left .10s linear;
  transition: left .10s linear;
  -moz-transition: left .10s linear;
  -o-transition: left .10s linear;
  -ms-transition: left .10s linear; }
#act #content.base h2:hover span.ss-icon { left: 10px; }

#songs .songs-about { width: 400px; position: absolute; top: 343px; left: 50px; color: white; text-shadow: 0px 0px 3px black; }
#songs #main { background: #FFF; }
#songs #content { background: #FFF; color: #444; }
#songs #content a:hover { color: #222; }
#songs #twitter-feed { color: #777; }
#songs #twitter-feed a { color: #555; }
#songs #twitter-feed a:hover { color: #33AFE8; }
#songs #global-header { background: transparent url(https://www.halftheskymovement.org/page/-/images/static/songs-header-bg.png) 0 0 no-repeat; }
.songs-title-banner { position: absolute; left: -23px; top: 220px; }
.songs-calendar { }
#songs #content .song-feature-button { padding: 10px; text-align: center; margin: 0 10px 10px 0; width: 200px; display: inline-block; border: 1px solid #33AFE8; color: #33AFE8; }
#songs #content .song-feature-button:hover { background: #33AFE8; color: #FFF; }
.songs-calendar .entry { display: block; cursor: pointer; width: 200px; float: left; margin: 10px; border: 2px solid #58595b; position: relative; height: 328px; }
.songs-calendar .entry img { margin-bottom: -4px; width: 200px; height: 260px; }
.songs-calendar .entry h2 { background: #58595b; position: relative; color: #FFF; font-size: 20px; text-align: center; padding: 22px 10px; height: 24px; }
.songs-calendar .entry .hover-screen { background: transparent url(https://www.halftheskymovement.org/page/-/images/static/blue-screen-75.png) 0 0 repeat; display: none; text-align: center; color: #FFF; font-weight: bold; padding: 70px 20px 20px; width: 160px; height: 170px; position: absolute; top: 0; left: 0; }
.songs-calendar .entry .hover-screen .upcoming { display: none; }
.songs-calendar .entry .hover-screen .date { text-transform: uppercase; }
.songs-calendar .entry:hover .hover-screen { display: block; }
.songs-calendar .entry.st-upcoming .hover-screen { background: transparent url(https://www.halftheskymovement.org/page/-/images/static/ghoul.png) 0 0 repeat; }
.songs-calendar .entry.st-upcoming .hover-screen .upcoming { display: block; }
.songs-calendar .entry.st-upcoming .hover-screen .current { display: none; }
.songs-calendar .entry.st-upcoming .status-screen { background: transparent url(https://www.halftheskymovement.org/page/-/images/static/passed-lines.png) 0 0 repeat; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.songs-calendar .entry.st-upcoming img { filter: url(https://www.halftheskymovement.org/page/-/images/static/filters.svg#grayscale); filter: gray; -webkit-filter: grayscale(1); }
.songs-calendar .entry.st-featured h2 { background: #33AFE8; }
.songs-calendar .entry.st-featured { border-color: #33AFE8; }
.songs-calendar .entry.eid-368 h2 { padding: 10px; height: 48px; }
.base ul.song-social { margin: 0; }
.base ul.song-social li { list-style: none; display: inline-block; width: 90px; overflow: hidden; }
.base ul.song-social li.twitter { width: 120px; }
.base ul.song-social li.text { width: auto; }
#songs .return { padding: 10px 0 0 0; }
#songs .return span.ss-icon { position: relative; top: 2px; margin-right: 5px;}
#songs .instructions { font-size: 11px; color: #999; }
#watch-module { width: 300px; float: right; padding: 0 0 20px 0; margin: 0 0 20px 20px; border-bottom: 1px solid #ddd; }
#watch-module h2 { font-size: 28px; }
#watch-module h2 span.ss-icon { position: relative; top: 4px; }
#watch-module h2.left span.ss-icon { margin: 0 5px 0 0; }
#watch-module h2.left { margin-top: 10px; }
#watch-module h2.right { text-align: right; }

#live-tweet .twtr-widget { float: left; margin: 20px 20px 0 0; }
#live-tweet .experts .twtr-join-conv { display: none; }
#live-tweet .twitter-widget { width: 400px; overflow: hidden; display: inline-block; margin-top: 20px; }
#live-tweet .widget-1 { margin-right: 20px; }


/* 06 =SIDEBAR
------------------------- */

/* 07 =FRAMEWORK
------------------------- */

#framework .help { color: #CCC !important; }
#signup td td { padding: 10px; }
#signup input[type="file"] { background: #AAA; padding: 0px; border-radius: 7px; margin-top: 10px; }
#SKIN, #SKIN + #constituent_content {
  background: white;
  color: #222;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  padding: 10px;
}
#SKIN a, #SKIN + #constituent_content a {
  color: #33AFE8;
}
#SKIN a:hover, #SKIN + #constituent_content a:hover {
  color: #AAA;
}
#SKIN .event_group .datebox .english { font-size: 12px; }
#redirect .box {
  background: #FFF;
  color: #222;
  border: 0 !important;
  border-radius: 8px;
  -webkit-border-radius: 8px;
}
/*
SKIN OVERRIDES
Last Update: March 7, 2011
NOTE: These definitions assume that framework elements have been wrapped in a div with the id "framework".
For the YUI styles to work the body id should be "bsd"
*/
 
/*=TYPOGRAPHY
---------------------------------------------------------- */
#framework #SKIN h1, /*If you change the font-soze for h1 or it's top margin or padding properties be sure to change the top margin property for "#SKIN #account_actions" such that the base line for the elements within line up with h1 in control_set div*/ 
#framework #SKIN .basic .main #eventdetail .title, /*Event Title*/
#framework #profiledetail #sectionheader,
#framework #stdheader #title /*Page title on Outreach pages*/
{ font-size: 24px; font-weight: bold; line-height: 30px; margin-bottom: 6px; }
 
/*if using cufon or typekit for headers be sure to target the following header ids/classes
#titletext - header for Outeach pages
.headertitle — header for Comunity pages
*/
#framework #contribution .contribheader, /*Section headers on Contribute form*/
#framework #SKIN h2,
#framework #sectionheader,
#framework #SKIN .widget_header,
#framework #SKIN .widget_title,
#framework #community .communitypostinlist .title, /*Blog post title on community web page*/
#framework #community .header, /*Community page headers */
#framework #community .communitypostfull .title, /*Community title for full blog post*/
#framework #community .journaltitle,
#framework #community .journalarchive .journalarchivetitle,
#framework a#host-button,
#framework #loginform .logintitle,
#framework #signupform .signuptitle, 
#framework #outreach_content #loginform .logintitle,
#framework #outreach_content #signupform .signuptitle,
#framework #manageform .managetitle,
#framework #forgotpw .header
{ font-size: 18px; font-weight: bold; line-height: 24px; margin-bottom: 6px; }
 
#framework #SKIN h3,
#framework #SKIN .basic .main .typedescheader,
#framework #community .postlist table.head .text, /*Table heading on Community Dashboard page*/
#framework #community .subheader, /*Subheader on the Community Blog Entry Preview page*/
#framework #community .profileteaser .title, /* Profile teaser title on Blog home page*/
#framework #odgettingstarted .odsechead,
#framework #odprogress .odsechead, 
#framework #odyourpage .odsechead, 
#framework #odstats .odsechead, 
#framework #odaddress .odsechead, 
#framework #odgroup .odsechead,
#framework #outreach_content .omhead
{ font-size: 14px; font-weight: bold; line-height: 20px; margin-bottom: 6px; }
 
#framework #SKIN h4, #framework #SKIN h5 { font-size: 12px; font-weight: bold; line-height: 18px; }
 
/*HEADERS WITH BOTTOM BORDERS*/
#framework #contribution .contribheader, /*Section headers on Contribute form*/
#framework #sectionheader,
#framework .sectionheader,
#framework #SKIN .header,
#framework #SKIN .basic .main .typedescheader,
#framework #community .header /*Community page headers */
#framework #community .communitypostfull .title, /*Community title for full blog post*/
#framework #community .journaltitle,
#framework #community .journalarchive .journalarchivetitle,
#framework #stdheader, /*Header for Outreach pages*/
#framework #community .profileteaser .title, /* Profile teaser title on Blog home page*/
#framework #odgettingstarted .odsechead,
#framework #odprogress .odsechead, 
#framework #odyourpage .odsechead, 
#framework #odstats .odsechead, 
#framework #odaddress .odsechead, 
#framework #odgroup .odsechead,
#framework #outreach_content .omhead,
#framework #manageform .managetitle,
#framework #forgotpw .header
{ border-bottom: 1px solid #ddd; padding-bottom: 3px; }
 
/*WIDGET HEADERS*/
#framework #SKIN .widget_header { background: #eee; border-bottom: 1px solid #ddd; margin-bottom: 6px; padding: 5px 10px; position: relative; }
 
/*SUB-HEADERS*/
#framework #SKIN .widget_subheader, /*Widget Subheader on the dashboard*/
#framework #community .subheader /*Subheader on the Community Blog Entry Preview page*/
{ background: #F2F7F7; border-bottom: 1px solid #ddd; padding: 5px 10px; }
 
/*=FORM ELEMENTS
---------------------------------------------------------- */
#framework .checkbox, #framework .radiobutton, #framework.label, #framework .text { margin: 0 .5em 0 0; }
 
/*=BUTTONS
---------------------------------------------------------- */
/*INPUT BUTTONS*/
#framework input[type=button],
#framework input[type=submit],
#framework .submit,
#framework #invitationpage #submit_button,
#framework #date-filter,
#framework .loginbutton input,
#framework .signupbutton input,
#framework #community input[type=submit],
#framework .utils_search button
{ cursor: pointer; } /*Targets most Buttons*/
 
/*INPUT HOVER STATES
Note this will only work for modern browsers*/
#framework input[type=button]:hover,
#framework input[type=submit]:hover,
#framework input:hover.submit,
#framework #invitationpage input:hover#submit_button,
#framework button:hover#date-filter,
#framework .loginbutton input:hover,
#framework .signupbutton input:hover,
#framework #community input[type=submit]:hover,
#framework .utils_search button:hover
{  }
 
/*RSVP and DETAILS BUTTONS*/
#framework #event_results .event_footer .links { float: left; }
#framework #event_results .event_footer .links .detail_button, #framework #event_results .event_footer .links .rsvp_button { float: right; } 
#framework #event_results .event_footer .links .detail_button a, #framework #event_results .event_footer .links .rsvp_button a { display: block; margin-left: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 2px 10px; }
#framework #event_results .event_footer .links .detail_button a { background: #eee; border: 1px solid #ccc; padding: 2px 10px 1px; }
#framework #event_results .event_footer .links .rsvp_button a { background: #555; color: #fff; padding: 3px 10px 2px; }
#framework #event_results .event_footer .links .detail_button a:hover, #framework #event_results .event_footer .links .rsvp_button a:hover { background: #33; border-color: #333; color: #eee; } /*Hover state for RSVP and Details buttons*/
 
/*CONTACT IMPORTER BUTTOM FOR SHARE AND INVITE FORMS*/
#framework #contact_importer_button { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 12px; } /*You can change the background color to match your other input button styles*/
 
/*SEARCH BUTTON*/
#framework .search_form button { }
 
/*=TEXT INPUT FIELDS AND TEXTAREAS
---------------------------------------------------------- */
#framework input.text, #framework textarea {  } /*Use this definition to target most of the text input fields*/
 
/*=TABS
NOTE If the background color for your page is not white you will have to update the bottom border color for the active tabs for Framework, Events and Friends i.e.
#framework #SKIN #blue_hat .blue_hat_active { background: none; border-bottom: 1px solid #fff; font-weight: bold; }
#framework ul#event_order li.active { background: none; border-bottom: 1px solid #fff; font-weight: bold; }
#framework #SKIN #friends_tabs ul li.active_tab  { background: none; border: 1px solid #ddd; border-bottom: 1px solid #fff; }
---------------------------------------------------------- */
/*FRAMEWORK TABS*/
#framework #SKIN #blue_hat { background: none;  border-bottom: 1px solid #ddd; height: 43px; }
#framework #SKIN #blue_hat ul { display: inline; float: right; height: auto; margin: 0 5px; padding: 18px 0 0 0; }
#framework #SKIN #blue_hat li { background: #eee; border: 1px solid #ddd; border-top-left-radius: 3px; display: inline; float: right; padding: 5px 10px 4px; text-decoration: none; }
#framework #SKIN #blue_hat li a { color: #888; text-decoration: none; }
#framework #SKIN #blue_hat .blue_hat_active { background: none; border-bottom: 1px solid #fff; font-weight: bold; }
#framework #SKIN #blue_hat .blue_hat_active a { color: #555; }
#framework #SKIN #blue_hat li a:hover { background: none; color: #555; }
 
/*EVENT TABS*/
#framework ul#event_order { border-bottom: 1px solid #ddd; clear: both; float: left; list-style-type: none; margin: 0 0 10px 0; top: 0;  width: 100%; }
#framework ul#event_order li {  background: #eee; border: 1px solid #ddd; color: #888; display: inline; float: left; margin: 0 0 -1px 5px; padding: 5px 10px 4px; text-decoration: none; }
#framework ul#event_order li a { color: #888;  }
#framework ul#event_order a:hover { color: #555; }
#framework ul#event_order li.active { background: none; border-bottom: 1px solid #fff; font-weight: bold; }
#framework ul#event_order li.active a { color: #555; }
 
/*WIDGET TABS*/
/*Note that the active tab background color should be the same as the .widget_header background color under the WIDGET HEADERS category above*/
#framework #SKIN .widget_tabs { margin: 0; padding: 0;  }
#framework #SKIN .widget_tabs li { border-top-left-radius: 3px; float: left; list-style: none; padding: 5px 10px 4px 10px; margin: 0 5px 0 0; list-style-type: none; }
#framework #SKIN .widget_tabs li.active_tab { background: #eee; font-weight: bold; }
#framework #SKIN .widget_tabs li.inactive_tab { background: #ddd; }
 
/*FRIENDS TABS*/
#framework #SKIN #friends_tabs { border-bottom: 1px solid #ddd; margin: 18px 0 6px 0; }
#framework #SKIN #friends_tabs ul { margin: 0; padding: 5px 0 0 0; list-style: none; }
#framework #SKIN #friends_tabs li { border-top-left-radius: 3px; border-top-right-radius: 3px; display: inline; float: left;  margin: 0 0 -1px 5px; list-style-type: none; padding: 5px 10px 4px; }
#framework #SKIN #friends_tabs ul li.active_tab  { background: none; border: 1px solid #ddd; border-bottom: 1px solid #fff; }
#framework #SKIN #friends_tabs ul li.active_tab a { color: #555; font-weight: bold; }
#framework #SKIN #friends_tabs ul li.inactive_tab  {  background: #eee; border: 1px solid #ddd;  }
 
/*=SPEAKOUT TABS */
#framework #speakout #tabs { margin-top: 18px; }
#framework #speakout #nav-tabs, #framework #speakout #tip-tabs { border-bottom: 1px solid #ddd; clear: both; float: left; list-style-type: none; margin: 0 0 18px 0; top: 0;  width: 100%; }
#framework #speakout td.tips { padding: 0 10px; }
#framework #speakout #tip-tabs { width: 300px; }
#framework #speakout #nav-tabs li, #framework #speakout #tip-tabs li { background: #eee; border: 1px solid #ddd; color: #888; display: inline; float: left; margin: 0 0 -1px 5px; padding: 5px 10px 4px; text-decoration: none; }
#framework #speakout #nav-tabs li.tab-on, #framework #speakout #tip-tabs li.tip-on { background: none; border-bottom: 1px solid #fff; color: #555; font-weight: bold; }
#framework #speakout #nav-tabs li.tab-off, #framework #speakout #tip-tabs li.tip-off { cursor: pointer; }
 
 
/*YUI POP OVER
This controls the style of the pop over opened after clicking the contact importer button
As noted above, in order for this to work the body id should be "bsd"
---------------------------------------------------------- */
#bsd .yui-panel { border: 1px solid #ccc; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
#bsd .yui-panel-container.shadow .underlay { display: none; }
#bsd .yui-panel .container-close { right: 10px; } /*This targets the close button in the popover. You can replace the default image with one of your choosing. Image dimensions should be 12px square*/
#bsd .yui-panel .hd { background: #eee; color: #333; border: none; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: bold; line-height: 24px; margin-bottom: 6px; padding: 10px; }
#bsd .yui-panel .bd { font-size: 12px; line-height: 18px; padding: 6px; }
#bsd #contact_importer_wrapper { margin: 0; }
#bsd #contact_importer_wrapper #contact_importer_error { margin: 18px 0 0 0; }
#bsd #contact_importer_dialog .button-group button { background: #eee; border: 1px solid #ddd; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; cursor: pointer; padding: 3px 10px; }
/*Contact Listings*/
#bsd #contact_importer_wrapper #results_table_header { background: #eee; }
#bsd #contact_importer_wrapper #results_table_outer { border: 1px solid #ddd; }
 
 
 
/*=LAYOUT
---------------------------------------------------------- */
/*SOCIAL NET WIDGET COLUMNS*/
#framework #SKIN #widget_group_1 { float: left; width: 49%; } /*Left column*/
#framework #SKIN #widget_group_2 { float: right; width: 49%; } /*Right column*/
 
/*SPEAKOUT*/
 
#framework .group_field { margin-bottom: 10px; float: left; margin-right: 5px; }
#framework #speakout .splash { margin: 0 0 20px 0; }
#framework #speakout table { clear: left; margin: 0 20px 10px 0; }
 
#framework #speakout #recipient_table { width: 300px; }
#framework #speakout .recipient-header { font-weight: bold; }
#framework #speakout .recipient-divider { padding-top: 10px; font-style: italic; }
#framework #speakout .recipient-header th { text-align: auto !important }
#framework #speakout .stat { text-align: right; padding-right: 4px; }
#framework #speakout td { vertical-align: top; }
#framework #speakout .step { margin-top: 15px; }
#framework #speakout .field { width: 50%; padding-left: 10px; }
#framework #speakout th.divider { padding: 10px; font-size: 16px; background: #eee; }
#framework #speakout #speakout_form { margin-top: 20px; }
#framework #speakout h4 { font-size: 16px; }
 
#framework #speakout table#landing div.goal { float: right; margin: 10px; padding: 15px 15px 0; width: 280px; border: 1px solid #CCC; }
#framework #speakout table#landing div.goal td { padding: 5px; }
#framework #speakout table#landing div.goal input.landing-button, #framework #speakout table#landing div.goal input.landing-button-over { display: block; margin-top: 15px; }
#framework #speakout table#landing div.goal input#addr1, #framework #speakout table#landing div.goal input#addr2, #framework #speakout table#landing div.goal input#email { width: 200px; }
 
 
/*=PLEASE DO NOT DELETE OR MODIFY ANY OF THE STYLES BELOW
---------------------------------------------------------- */
#framework #SKIN #widget_directory_search_groups_by_keyword { float: none !important; }


/* 08 =UTILITY
------------------------- */

.cufon-loading * { visibility: hidden !important; }

.floatl { float: left; margin: 0; padding: 0 10px 10px 0; }
.floatr { float: right; margin: 0; padding: 0 0 10px 10px; }
.required { color: red; }
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; } 
/* Hide only visually, but have it available for screenreaders www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden  */
.visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px);  clip: rect(1px, 1px, 1px, 1px); }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after {  content: "."; display: block; height: 0; visibility: hidden; } 
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

input:valid, textarea:valid {  }

::-moz-selection{ background: #1fb9e7; color:#fff; text-shadow: none; }
::selection { background:#1fb9e7; color:#fff; text-shadow: none; } 

.edit-this { display: none; }

/* LIGHTBOX */
/* Required settings*/
.reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; background: rgba(0,0,0,.7); z-index: 999; display: none; top: 0; left: 0; filter: alpha(opacity=80) !important; }
.reveal-modal { display: none; background: transparent; position: fixed; z-index: 1000; }
.reveal-modal div, .reveal-modal form, .reveal-modal fieldset, .reveal-modal legend, .reveal-modal p, .reveal-modal input { border: none; margin: 0; padding: 0; }
.reveal-modal .close-reveal-modal { position: absolute; }
/*.reveal-modal { display: none; }*/

/* Custom settings */
#lightbox-bsd { background: teal; width: 500px; height: 400px; color: #fff; font: 12px Helvetica, sans-serif; }
#lightbox-bsd .close-reveal-modal { top: 20px; right: 20px; cursor: pointer; }
#lightbox-bsd form { position: absolute; left: 20px; top: 350px; }
/* USE TO HIDE LEGEND VISUALLY #lightbox-bsd form legend { position: absolute !important; clip: rect(1px 1px 1px 1px);  clip: rect(1px, 1px, 1px, 1px); } */
#lightbox-bsd form input { padding: 5px 10px; }
/* USE FOR IMAGE SUBMIT BUTTONS #lightbox-bsd form input.submit { line-height: 0; text-indent: -9999px; overflow: hidden; } */
#lightbox-bsd form #lightbox-signup-email {}
#lightbox-bsd form #lightbox-signup-zip {}
#lightbox-bsd form #lightbox-signup-submit {}

/* 09 =PRINT
------------------------- */

@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; } 
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }  
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }  
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
  header #sidebar, #editToggle, .editThis, #navigation, #addthis, #search, #nav { display: none; }
  /* hide disqus since it is extraneous content that just increases page size */
  #disqus_thread {display:none;}
  a.dsq-brlink {display:none;}
 
  /* float blog entry images to decrease page length */
  #main {overflow:hidden;}
  #main img { float:left; clear:both; /*keeps images from piling up next to each other*/ margin:0 10px 10px 0; }
}