@import url(https://fonts.googleapis.com/css?family=Bevan);
@import url(https://fonts.googleapis.com/css?family=Arvo:400,400italic,700,700italic);

body {
    color: #fff;
    background-color: #004;
    font-family: 'Arvo', Georgia, serif;
    font-size: 0.95em;
    line-height: 1.7em;
    margin: 0;
    padding: 0
    }

.bodycontainer {
    width: 960px;
    margin: 0 auto
    }

#header,
#content,
#footer {
    position: relative;
    top: 0;
    display: block;
    clear: both;
    width: 100%
    }

#header {
    background: url('../images/bkgd-header.gif') transparent 4px bottom repeat-x
    }

#content {
    border-top: 1px solid #3e3e69;
    background: url('../images/bkgd-content.gif') #00002c top left repeat
    }

#content > .bodycontainer {
    margin-top: 3em;
    margin-bottom: 2em
    }

p { margin-bottom: 1em }

ol { list-style-type: decimal }
ul { list-style-type: disc }

li ul,
li ol {
    margin-top: 0.3em;
    padding-left: 1.5em;
    list-style-type: square
    }

li ul li,
li ol li {
    color: #3e3e69
    }

ol li,
ul li {
    color: #bacef1;
    margin-bottom: 0.6em
    }

li span { color: #fff }

ol + p,
ul + p {
    margin-top: 1.8em
    }


h1 a:link { text-decoration: none }

h2 {
    font-family: 'Bevan', Georgia, serif;
    font-size: 1.9em;
    line-height: 1.1em;
    margin-top: 1.4em;
    margin-bottom: 1.2em;
    text-shadow: 1px 1px 1px #000;
    color: #eeefb8
    }


.headline {
    height: 70px;
    line-height: 70px;
    padding-left: 80px;
    background-color: transparent;
    background-position: center left;
    background-repeat: no-repeat;
    background-image: url('../images/badge-scouttrack-70.png')
    }

#title-contact { background-image: url('../images/badge-mail-70.png') }
#title-faq { background-image: url('../images/badge-question-70.png') }
#title-features { background-image: url('../images/badge-gears-70.png') }
#title-privacy { background-image: url('../images/badge-lock-70.png') }
#title-terms { background-image: url('../images/badge-warning-70.png') }
#title-testimonials { background-image: url('../images/badge-quote-70.png') }
#title-trial { background-image: url('../images/badge-70.png') }


h3 {
    font-family: 'Bevan', Georgia, serif;
    font-size: 1.6em;
    line-height: 1.2em;
    margin: 1.4em 0 1.2em;
    text-shadow: 1px 1px 1px #000;
    color: #bacef1
    }

h4 {
    font-size: 1.3em;
    line-height: 1.2em;
    margin-top: 1.3em;
    margin-bottom: 1em;
    text-shadow: 1px 1px 1px #000;
    color: #bacef1
    }

h5 {
    font-size: 0.9em;
    line-height: 1.2em;
    margin-top: 1.5em;
    margin-bottom: 1em
    }

h6 {
    font-size: 0.7em;
    line-height: 1.15em;
    margin-top: 1em;
    margin-bottom: 1em
    }


p a:link,
li a:link {
    color: #eeefb8;
    text-decoration: none;
    border-bottom: 1px dotted #eeefb8;
    padding-bottom: 1px
    }

p a:visited,
li a:visited {
    color: #bacef1;
    border-bottom: 1px dotted #3e3e69
    }

p a:hover,
li a:hover {
    color: #eeefb8;
    border-bottom: 1px solid #eeefb8
    }

p a:active,
li a:active {
    color: #fff;
    border-bottom: 1px solid #fff
    }

b, strong { font-weight: 700 }

i, em { font-style: italic }


.jump {
    font-size: 90%;
    margin-top: -0.5em
    }

.jump a:link, .jump a:visited {
    color: #eeefb8;
    text-decoration: none;
    padding-bottom: 1px
    }

.jump a:hover {
    color: #eeefb8;
    border-bottom: 1px dotted #eeefb8;
    text-decoration: none;
    padding-bottom: 1px
    }

.jump a:active {
    color: #fff;
    border-bottom: 1px dotted #fff;
    text-decoration: none;
    padding-bottom: 1px
    }

.icon-sm,
.icon-lg {
    display: block;
    margin-right: 0.7em !important;
    margin-bottom: 0 !important;
    background-color: transparent;
    background-position: 0 0;
    background-repeat: no-repeat
    }

.icon-sm {
    height: 54px;
    width: 54px;
    background-image: url('../images/badge-54.png')
    }

.icon-lg {
    height: 70px;
    width: 70px;
    background-image: url('../images/badge-70.png')
    }

#icon-house { background-image: url('../images/badge-house-70.png') }
#icon-clock { background-image: url('../images/badge-clock-70.png') }
#icon-mail { background-image: url('../images/badge-mail-70.png') }
#icon-lock { background-image: url('../images/badge-lock-70.png') }

#icon-arrows.icon-sm { background-image: url('../images/badge-arrows-54.png') }
#icon-fire.icon-sm { background-image: url('../images/badge-fire-54.png') }
#icon-globe.icon-sm { background-image: url('../images/badge-globe-54.png') }
#icon-network.icon-sm { background-image: url('../images/badge-network-54.png') }
#icon-users.icon-sm { background-image: url('../images/badge-users-54.png') }


.alignleft {
    float: left;
    margin: 0.3em 1.1em 0.3em 0
    }

.alignright {
    float: right;
    margin: 0.3em 0 0.3em 1.1em
    }

.largetext {
     font-size: 120%;
     line-height: 160%
     }


/********** Footer ***********/


#footer {
    border-top: 1px solid #3e3e69;
    background: url('../images/bkgd-footer.gif') transparent top left repeat-x;
    color: #bacef1
    }

#footer > .bodycontainer {
    margin-top: 2em;
    margin-bottom: 2em
    }

h5.disclaimer {
    font-style: italic
    }

h6.copyright {
    font-style: italic;
    margin-bottom: 2em
    }

h6.copyright a:link {
    text-decoration: none;
    padding-bottom: 1px;
    color: #fff;
    border-bottom: 1px dotted #3e3e69
    }

h6.copyright a:visited {
    color: #3e3e69
    }

h6.copyright a:hover {
    color: #fff;
    border-bottom: 1px dotted #fff
    }

h6.copyright a:active {
    border-bottom: 1px solid #fff
    }

.midbullet {
    color: #fff;
    margin: 0 0.4em
    }


/********** Columns (text and lists) ***********/

.columnrow {
    clear: both
    }

h3 + .columnrow {
    margin-top: 0
    }

ul.columnrow {
    margin: 0;
    padding: 0
    }

.col1,
.col2,
.col3,
.col4,
.col3-fill,
.col4-fill {
    display: block;
    float: left;
    margin: 0 2.5% 2% 0.5%
    }

.col1 { width: 100%; margin-right: 0 !important }
.col2 { width: 47% }
.col3 { width: 30% }
.col4 { width: 22%; font-size: 97% }
.col3-fill { width: 64% }
.col4-fill { width: 72% }

.col1 > h3,
.col2 > h3,
.col3 > h3,
.col4 > h3,
.col3-fill > h3,
.col4-fil > h3,
    margin-left: 0.5%
    }




/********** Homepage ***********/


#section-choose,
#section-difference {
    position: relative;
    top: 0;
    display: block;
    clear: both;
    width: 100%;
    margin: 4em 0
    }

#section-choose li,
#section-difference li {
    color: #e1e9f8
    }

#section-choose h3,
#section-difference h3 {
    font-family: 'Bevan', Georgia, serif;
    font-size: 1.9em;
    line-height: 1.2em;
    margin-top: 1.4em;
    margin-bottom: 0.6em;
    text-shadow: 1px 1px 1px #000
    }

#section-choose > ul li h4,
#section-difference > ul li h4 {
    font-family: 'Bevan', Georgia, serif;
    font-size: 1.4em;
    line-height: 1.2em;
    margin-bottom: 0.75em;
    text-shadow: 1px 1px 1px #000
    }

#section-choose > ul li {
    font-size: 1.1em;
    line-height: 1.7em;
    margin-bottom: 0.75em
    }

#section-choose h3,
#section-choose ul li h4 {
    color: #eeefb8
    }

#section-difference h3,
#section-difference ul li h4 {
    color: #d6d6f2
    }





/********** Login/Register tabs at top of screen ***********/

ul#nav-users {
    display: block;
    position: relative;
    z-index: 100;
    float: right;
    height: 45px;
    width: 320px;
    margin-bottom: 2em
    }

ul#nav-users li {
    display: inline;
    float: right
    }

ul#nav-users li + li {
    margin-right: 12px
    }

ul#nav-users li a {
    display: block;
    height: 45px;
    width: 100%;
    background-image: url('../images/tabs-login_trial.png');
    background-color: transparent;
    background-repeat: no-repeat;
    padding-bottom: 0 !important;
    border-bottom: 0px !important
    }

ul#nav-users li a span { display: none }

li#login { width: 148px }
li#trial { width: 141px }
li#login a { background-position: -142px -53px }
li#login a:hover  { background-position: -142px -50px }
li#login a:active { background-position: -142px 0 }

li#trial a { background-position: 0 -53px }
li#trial a:hover { background-position: 0 -50px }
li#trial a:active { background-position: 0 0 }






/********** Logo and Navigation ***********/

#headergroup {
    display: block;
    position: relative;
    clear: both;
    width: 100%;
    height: 59px;
    margin-top: 2em
    }

#site-title {
    display: block;
    float: left;
    height: 59px;
    width: 344px
    }

#site-title a {
    display: block;
    height: 59px;
    width: 100%;
    background: url('../images/logo-main.png') transparent 0 0 no-repeat
    }

#site-title a span { display:none }


ul#nav-site {
    position: relative;
    display: block;
    float: right
    }

ul#nav-site li {
    display: inline;
    margin-left: 1.25em;
    font-size: 1.2em;
    line-height: 59px;
    text-shadow: 1px 1px 1px #000
    }

ul#nav-site li a:link,
ul#nav-site li a:visited {
    color: #bacef1 !important;
    text-decoration: none;
    border-bottom: 0px !important
    }

ul#nav-site li a:hover { color: #fff !important }
ul#nav-site li a:active { color: #eeefb8 !important }

ul#nav-site li.selected,
ul#nav-site li.selected a:link,
ul#nav-site li.selected a:visited {
    font-weight: bold;
    color: #eeefb8 !important
    }




/********** Homepage Banner ***********/

#bannerarea {
    display: block;
    clear: both;
    width: 100%;
    position: relative;
    top: 25px
    }

#introtext {
    display: block;
    position: relative;
    float: left;
    top: 40px;
    width: 600px
    }

#image-boyscout,
#image-cubscout,
#image-girlscout,
#image-ahggirl {
    display: block;
    height: 400px;
    width: 330px;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat
    }

#image-boyscout { background-image: url('../images/cartoon-boyscout.png') }
#image-cubscout { background-image: url('../images/cartoon-cubscout.png') }
#image-girlscout { background-image: url('../images/cartoon-girlscout.png') }
#image-ahggirl { background-image: url('../images/cartoon-ahggirl.png') }


#featureimage {
    display: block;
    float: right;
    height: 400px;
    width: 252px;
    margin: 0 45px 0 12px
    }


#site-description {
    position: relative;
    display: block;
    float: left;
    font-family: 'Arvo', Georgia, serif !important;
    font-size: 1.4em !important;
    line-height: 1.65em !important;
    color: #bacef1 !important;
    margin: 0 0 1em 12px
    }

#site-description span { color: #fff }



ul#callouts-users {
    float: left;
    display: block;
    position: relative;
    height: 80px;
    width: 512px;
    margin: 1.5em 44px 0;
    padding: 0
    }

ul#callouts-users li {
    list-style: none outside none;
    float: left;
    height: 80px;
    width: 240px;
    margin: 0 8px
    }

ul#callouts-users li a {
    display: block;
    height: 80px;
    width: 240px;
    background-image: url('../images/callout-buttons.png');
    background-color: transparent;
    background-repeat: no-repeat;
    border-bottom: 0px !important
    }

ul#callouts-users li a span { display: none }

li#trial-callout a:link { background-position: 0 -80px }
li#trial-callout a:hover { background-position: 0 0px }
li#login-callout a:link { background-position: -241px -80px }
li#login-callout a:hover { background-position: -241px 0 }


.quote {
    margin-top: 1.5em;
    background: url('../images/quote.png') transparent top left no-repeat
    }

.quote > p {
    margin: 7px 0 1em 12px
    }

.quotecite {
    font-size: 0.9em;
    line-height: 1.6em;
    font-style: italic;
    margin: -0.25em 0 1em 12px;
    color: #bacef1
    }

/*
.icon-bulletin,
.icon-calendar,
.icon-programs,
.icon-users {
    padding-left: 40px;
    line-height: 36px;
    height: 36px;
    background-position: 0 0;
    background-color: transparent;
    background-repeat: no-repeat
    }

.icon-bulletin { background-image: url('../images/icon-bulletin.png') }
.icon-calendar { background-image: url('../images/icon-calendar.png') }
.icon-programs { background-image: url('../images/icon-programs.png') }
.icon-users { background-image: url('../images/icon-user.png') }

*/

h4.question {
    font-size: 1.2em;
    padding-left: 22px;
    background: url('../images/icon-expand.png') transparent left 0.1em no-repeat
    }

h4.question:hover {
    color: #eeefb8;
    cursor: pointer
    }

h4.question:active {
    color: #fff
    }

h4.open {
    color: #fff;
    font-size: 1.2em;
    padding-left: 22px;
    background: url('../images/icon-collapse.png') transparent left 0.1em no-repeat
    }

.answer {
    margin: 0 0 3em 22px !important
    }


a.screenshot:after {
    content:url('../images/icon-screenshot.png');
    margin-left: 3px;
    border-bottom: 0px !important
    }

ul.screenshotlist {
    clear: both;
    display: block;
    height: 50px;
    width: 240px;
    margin-top: 1.5em;
    padding: 0
    }

ul.screenshotlist li { display:none }
ul.screenshotlist li.firstslide {
    display: block;
    list-style: none outside none;
    float: left;
    height: 50px;
    width: 240px
    }

ul.screenshotlist li.firstslide a {
    display: block;
    height: 52px;
    width: 240px;
    background-image: url('../images/button-screenshots.png');
    background-color: transparent;
    background-repeat: no-repeat;
    border-bottom: 0px !important;
    background-position: 0 -104px
    }

ul#bsgallery li.firstslide a {
    background-image: url('../images/button-tour-boyscout.png')
    }

ul#cubgallery li.firstslide a {
    background-image: url('../images/button-tour-cubscout.png')
    }


ul.screenshotlist li.firstslide a:hover {
    background-position: 0 -52px;
    cursor: pointer
    }

ul.screenshotlist li.firstslide a:active {
    background-position: 0 0px;
    cursor: pointer
    }


ul.screenshotlist li.firstslide a:after {
    content: none;
    margin-left: 0
    }

li.firstslide a span { display: none }




.program-description h4,
.role-description h4 {
    margin-top: 0.4em
    }

.program-description ul,
.role-description ul {
    margin-left: 1em
    }

.sidetablist li {
    list-style: none outside none;
    padding: 0;
    margin:0;
    line-height: 1.1em
    }

.sidetablist li:hover span {
    color: #eeefb8;
    cursor: pointer
    }

.sidetablist li span {
    display: block;
    margin: 1.2em 0;
    color: #e1e9f8
    }

.sidetablist li + li {
    border-top: 1px dotted #3e3e69
    }

.sidetablist li.selected span {
    font-weight: bold;
    color: #eeefb8
    }

.sidetablist li.selected span:after {
    content: "\00a0\00bb"
    }


#readmore-button {
    display: block;
    height: 52px;
    width: 240px;
    margin: 0 auto;
    background-image: url('../images/button-readmore.png');
    background-position: 0 -104px;
    background-color: transparent;
    background-repeat: no-repeat
    }

#readmore-button:hover {
    background-position: 0 -52px;
    cursor: pointer
    }

#readmore-button:active {
    background-position: 0 0;
    cursor: pointer
    }

#readmore-button span { display: none; }



#starttrial-button {
    display: block;
    height: 52px;
    width: 240px;
    margin: 0 auto;
    border: 0;
    background-image: url('../images/button-starttrial.png');
    background-position: 0 -104px;
    background-color: transparent;
    background-repeat: no-repeat
    }

#starttrial-button:hover {
    background-position: 0 -52px;
    cursor: pointer
    }

#starttrial-button:active {
    background-position: 0 0;
    cursor: pointer
    }

#starttrial-button span { display: none; }

#contactimage {
    height: 300px;
    background: url('../images/cartoon-boyscout-300.png') transparent top center no-repeat
    }

/* clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.columnrow.clearfix + .columnrow.clearfix,
.columnrow.clearfix + .readmore > .columnrow.clearfix {
    border-top: 1px solid #3e3e69;
    margin-top: 3em
    }


/* Style overrides for fancybox */
#fancybox-title,
#fancybox-title-float-main,
#fancybox-error {
	font-family: 'Arvo', Georgia, serif !important;
	}




/* =iPad, etc
----------------------------------------------- */
@media (max-width: 800px) {

.bodycontainer {
    width: 94%;
    max-width: 800px
    }
}



/* =
----------------------------------------------- */
@media (max-width: 650px) {

.bodycontainer {
    width: 94%;
    max-width: 480px
    }

.col1,
.col2,
.col3,
.col4 {
    width: 100%;
    margin-bottom: 40px;
    font-size: 100%
    }

#introtext {
    width: 100%;
    top: 10px
    }

#site-description {
    width: 100%;
    margin-left: 0;
    font-size: 1.0em
    }

.columnrow.clearfix + .columnrow.clearfix {
    border-top: 0px;
    margin-top: 0
    }


 }




/* =iPhone, etc
----------------------------------------------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

.bodycontainer {
    width: 94%;
    margin: 0 3%;
    max-width: 480px
    }

.col1,
.col2,
.col3,
.col4 {
    width: 100%;
    margin-bottom: 40px;
    font-size: 100%
    }

ul#nav-site {
    margin-top: 0.75em;
    }

ul#nav-site li {
    display: inline;
    margin: 0 0.4em !important;
    font-size: 0.85em;
    line-height: 1.3em;
    }

#introtext {
    font-size: 80%;
    width: 100%;
    top: 10px
    }

#site-description {
    width: 100%;
    margin-left: 0;
    font-size: 1em
    }

#site-title {
    height: 53px;
    width: 300px
    }

#site-title a {
    height: 53px;
    background-image: url('../images/logo-300.png')
    }

.columnrow.clearfix + .columnrow.clearfix {
    border-top: 0px;
    margin-top: 0
    }

#featureimage { display: none; }

.headline {
    line-height: 2.1em;
    background-position: top left
    }


ul#callouts-users {
    height: 170px;
    width: 240px;
    margin: 0 auto
    }

ul#callouts-users li {
    height: 80px;
    width: 240px;
    margin: 0 0 5px
    }

#section-choose h3,
#section-difference h3 {
    font-size: 1.4em;
    margin-bottom: 0.5em
    }

#section-choose > ul li h4,
#section-difference > ul li h4 {
    font-size: 1.2em
    }

#section-choose > ul li,
#section-difference > ul li {
    font-size: 1.0em;
    line-height: 1.5em
    margin-bottom: 0.3em
    }

#contactimage { background-image: none; display: none; }


}


/* Print Stylesheet
----------------------------------------------- */
@media print{

    .noprint,
    #featureimage,
    ul#nav-users,
    ul#nav-site,
    ul#callouts-users,
    ul.sidetablist,
    .icon-sm,
    .icon-lg {
        display: none
        }

    h1#site-title a span {
        display: block;
        font-family: 'Bevan', Georgia, serif;
        font-size: 2.7em;
        line-height: 1.1em;
        margin: 0;
        padding: 0;
        color: #888 !important
        }

    h1#site-title a span strong { font-weight: normal; color: #000 }

    h2, h3, h4, p, li { text-shadow: none !important }

    .headline {
        height: 40px;
        font-size: 2.2em;
        color: #000;
        line-height: 40px;
        padding-left: 0px !important;
        }

    ul, ol { padding-left: 1.5em }
    ol li { color: #000 }

    #introtext { width: 100%; top: 0.5em }
    #headergroup { margin-top: 0.4em; }
    #site-description { margin: 0 }
    #section-choose, #section-difference { margin: 1em 0 }
    #section-choose > ul li h4, #section-difference > ul li h4 { margin-top: 0.3em }

    #content > .bodycontainer {
        margin-bottom: 1em;
        margin-top: 1em;
        }

    h4.question { font-size: 1.3em; padding-left: 0 }
    h4.open { color: #000; padding-left: 0 }
    .answer { display: block !important; margin: 0 0 3em 0 !important }

    .quote > p { margin: 7px 0 1em 0 }
    .quotecite { margin: -0.25em 0 1em 0 }


    #roles-display, #programs-display { width: 100% !important }
    .role-description, .program-description { display: block !important; margin-top: 2em }

    a.screenshot { border-bottom: 0 !important }
    a.screenshot:after {
    content: none;
    margin-left: 0;
    border-bottom: 0px !important
    }

}