/*************/
/* All Pages */

body {
    height: 100%;
    background-color: #2F2634;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    /*background-color: #FF0000;*/
}

.centered {
    text-align: center;
    /*background-color:#888888;*/
}
.left_aligned {
    text-align: left;
}
.right_aligned {
    text-align: right;
}
.justify {
    text-align: justify;
}
.empty_row {
    min-height: 1px;
}

.left {
    float:left;
}
.right {
    float:right;
}
.floatclear {
    clear:both;
}
.invisible {
    visibility: hidden;
}
.row {
    /* override bootstrap */
}
.pos_relative {
    position: relative;
}
.dashed_panel {
    border: dashed 2px #000000;
    border-radius: 10px;
    padding: 10px;
    min-height: 137px;
}
.dashed_panel input[type="text"] {
    margin-top: 10px;
}
ul.outside li {
    list-style-position: outside;
    list-style-type: disc;
}
* {
    box-sizing: inherit;
    -webkit-box-sizing: inherit;
}
div.user_messages {
    /*visibility: hidden;*/
    position: absolute;
    width: 50%;
    left: 25%;
}
.desaturated {
    -webkit-filter: grayscale(55%);
    filter: grayscale(55%);
}


/*****************/
/* Homepage Tree */

div#landing_splash {
    position:fixed;
    z-index:10;
    width: 32%;
    top: 10%;
    left: 34%;
    cursor: pointer;
}
.main_tree_page {
    width: 100%;
    /*margin-left: 2.5%;*/
    /*border: solid 3px #00AA00;*/
}

#main_tree {
    height:auto;
    background-image: url('../images/background.gif');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    background-clip: border-box;
    /*min-height: 100%;*/
    padding-bottom: 106%;
    max-width:100%;
}

.container.width_override {
    max-width: none;
    width: 100%;
}
#tree_header img#linkupLogoTree {
    width: 23%; /*13%*/;
    margin-left: 2%;
    float:left;
    margin-top: 2%;
    margin-bottom: 3%;
}

/*@media {*/
    /*.container.width_override {*/
        /*width: 100%;*/
    /*}*/
/*}*/

#tree_header {
    height:10%;
}
#tree_header a {
    color: #ffffff;
    text-decoration: none;
}
#tree_header a:hover {
    text-decoration: underline;
}
a#signup_button {
    background-color: #296d9c;
    padding:4px 8px;
}
a#signup_button:hover {
    background-color: #1e5072;
    text-decoration: none;
}

ul#tree_header_menu {
    color: #ffffff;
    list-style-type: none;
    float:left;
    width: 70%; /*79%;*/
    margin-top: 2.8%;
    margin-bottom: 0;
    margin-left: 3%;
}
ul#tree_header_menu li {
    float:left;
    text-transform: uppercase;
    font-size: 1vw;
    margin: 0 1.0vw;
}

#tree_footer {
    /*background-color: #2F2634;*/
    background-position: center top;
    width: 90%;
    /*margin: 2% auto;*/
    /*padding: 2% 5%;*/
    color: #ffffff;
    border-bottom: solid 1px #ffffff;
    /*margin-bottom: 5%;*/
    /*margin-left: 16%;*/
    margin: 0 auto 5% auto;
    padding-bottom: 2%;
}

ul#tree_footer_menu_1 {
    list-style-type: none;
    /*float:left;*/
    width: 100%;
    /*padding-left: 6.25%;*/
}

ul#tree_footer_menu_1 li {
    float:left;
    font-size: 12px;
    text-align:center;
    margin-left: 4%;
    padding-top: 3%;
}
ul#tree_footer_menu_1 li:first-of-type {
    margin-left: 0;
    padding-top: 1.5%;
    text-align: left;
    width: 9%;
}
ul#tree_footer_menu_1 li:first-of-type img {
    width: 100%;
}
ul#tree_footer_menu_1 li a {
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
}
ul#tree_footer_menu_1 li a:hover {
    color: #ffffff;
    text-decoration: underline;
}

ul#tree_footer_menu_2 {
    list-style-type: none;
    float:left;
    width: 70%;
    margin-bottom: 0;
    margin-left: 10%;
    /*margin: 0 auto;*/
}
ul#tree_footer_menu_2 li {
    float:left;
    font-size: 12px; /*1.0vw*/
    text-align:center;
    margin-left: 7%;
    margin-bottom: 0;
}
ul#tree_footer_menu_2 li:first-child {
    margin-left:35%;
}
ul#tree_footer_menu_2 li a {
    color: #ffffff;
    text-decoration: none;
}
ul#tree_footer_menu_2 li a:hover {
    color: #ffffff;
    text-decoration: underline;
}

ul#tree_footer_menu_2_icons {
    list-style-type: none;
    float:right;
    width: 20%;
    margin-bottom: 0;
    position: relative;
    top: -4px;
}
ul#tree_footer_menu_2_icons li {
    float:right;
    margin-bottom: 0;
    margin-left: 1.0vw;
}
ul#tree_footer_menu_2_icons img {
    width: 3.0vw;
    vertical-align:top;
}

div#tree_image div#labels {
    position: absolute;
    top: 89vw;
    width: 75%;
    margin-left: 7%;
    cursor: default;
}
div#tree_image span {
    background-color: #74a5c5;
    /*padding: 5px 10px;*/
    font-size: 1vw;
    position: relative;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    display: table-cell;
    width: 20%;
    vertical-align: middle;
    padding: 5px 0;
}
div#tree_image div.story_counter {
    color: #ffffff;
    background: url("../images/story_counter.png");
    width: 4.2vw;
    height: 4.2vw;
    background-repeat: no-repeat;
    background-size: contain;
    text-align: center;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    font-size: 1vw;
    font-weight: 300;
}
div#tree_image span#label_individuals {
    /*top: 77vw;*/
    /*left: 1vw;*/
    width: 11%;
}
div#tree_image span#label_community_groups {
    top: 10vw;
    left: 0vw;
    width: 14%;
}
div#tree_image span#label_social {
    top: 17vw;
    left: -4vw;
}
div#tree_image span#label_businesses {
    top: 14vw;
    left: -1vw;
    width: 14%;
}
div#tree_image span#label_charities {
    top: 5vw;
    left: -1vw;
    width: 14%;
}


div#tree_image img.tree_segment {
    width: 75%;
    margin-left: 7%;
    margin-bottom: 12%;
    float:left;
    position: absolute;
    opacity: 1;
}
div#tree_image img.faded {
    opacity: 0.5;
}

div#add_story_fab {
    bottom: 2%;
    /*right: 13%;*/
    width: 10%;
    z-index: 9999;
    margin-left: 80%;
}
div#main_tree div#add_story_fab {
    position: absolute;
}
div#add_story_fab img {
    width: 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100%;
}
div#add_story_fab img:hover {
    background-position: 0 100%;
}
div#main_tree div#add_story_fab img {
    background-image: url("../images/add_story_fab.png");
}
div#main_container_white div#add_story_fab img {
    background-image: url("../images/add_story_fab_red.png");
}

div#contextual_information_button {
    position: absolute;
    top: 58%;
    /*right: 52%;*/
    width: 12%;
    z-index: 9999;
    margin-left: 37%;
}
div#contextual_information_button img {
    width: 100%;
    background-image: url("../images/opening_door.png");
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100%;
}
div#contextual_information_button img:hover {
    background-position: 0 0;
}

div#root_story_pins {
    position: absolute;
    display: table;
    top: 81vw;
    width: 75%;
    margin-left: 7%;
}
div#root_story_pins div {
    display: table-cell;
    width: 20%;
    position: relative;
    text-align: center;
}
div#root_story_pins img {
    width: 40%;
    height: 6vw;
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
}
div#root_pins_individuals img {
    left: 11.5vw;
    top: 0.5vw;
}
div#root_pins_community_groups img {
    top: 4vw;
    left: 5vw;
}
div#root_pins_social img {
    top: 11vw;
    left: -2vw;
}
div#root_pins_businesses img {
    top: 11.5vw;
    left: 2vw;
}
div#root_pins_charities img {
    top: 4vw;
    left: -2vw;
}

div#branch_story_pins {
    position: absolute;
    display: table;
    top: 48vw;
    width: 75%;
    margin-left: 7%;
}
div#branch_story_pins div {
    display: table-cell;
    width: 20%;
    position: relative;
    text-align: center;
}
div#branch_story_pins img {
    width: 40%;
    height: 6vw;
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 1px 0;
    z-index: 5;
}
div#branch_story_pins div.dimmed img, div#root_story_pins div.dimmed img, div#branch_story_pins img[src="images/blank_pin.png"], div#root_story_pins img[src="images/blank_pin.png"] {
    box-shadow: none;
    cursor: default;
}
div#branch_story_pins div.hidden_branch img, div#root_story_pins div.hidden_branch img {
    display: none;
}
div#branch_story_pins img:hover, div#root_story_pins img:hover {
    /*opacity: 0.6;*/
    box-shadow: 0 0 5px 1px;
    width:46%;
    height: 6.9vw;
    margin-top: -3%;
    margin-left: -3%;
}
div#branch_story_pins img[src="images/blank_pin.png"]:hover, div#root_story_pins img[src="images/blank_pin.png"]:hover {
    box-shadow: none;
}
div#branch_pins_individuals {
    /* to fix hover-over story pin bug */
    z-index: 1;
}
div#branch_pins_community_groups {
    z-index: 0;
}
div#branch_pins_individuals img:first-of-type {
    top: -1vw;
    left: 11vw;
}
div#branch_pins_individuals img:nth-of-type(2) {
    left: 22vw;
}
div#branch_pins_individuals div.story_counter {
    top: -3vw;
    left: 0.8vw;
}
div#branch_pins_community_groups img:first-of-type {
    top: -22vw;
    left: 1.5vw;
}
div#branch_pins_community_groups img:nth-of-type(2) {
    top: -10vw;
}
div#branch_pins_community_groups div.story_counter {
    top: -29vw;
    left: -2vw;
}
div#branch_pins_social img:first-of-type {
    top: -26vw;
    left: 6vw;
}
div#branch_pins_social img:nth-of-type(2) {
    top: -14vw;
    left: 3.5vw;
}
div#branch_pins_social div.story_counter {
    top: -32vw;
    left: 3.5vw;
}
div#branch_pins_businesses img:first-of-type {
    top: -10vw;
    left: -1vw;
}
div#branch_pins_businesses img:nth-of-type(2) {
    top: -21vw;
    left: 8.5vw;
}
div#branch_pins_businesses div.story_counter {
    top: -26vw;
    left: 13vw;
}
div#branch_pins_charities img:first-of-type {
    top: 2.5vw;
    left: -16vw;
}
div#branch_pins_charities img:nth-of-type(2) {
    top: -2vw;
    left: -4vw;
}
div#branch_pins_charities div.story_counter {
    top: -7vw;
    left: 2vw;
}
div#pin_overlay_container {
    position: fixed;
    width: 100%;
    min-height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
    z-index: 100000;
    top: 0;
    font-family: "Open Sans", sans-serif;
}
div#pin_overlay {
    width: 80%;
    margin: 0 10%;
    opacity: 1;
}
div#pin_overlay h2 {
    color: #ffffff;
    text-transform: uppercase;
}
div#pin_overlay div#overlay_image {
    /*width: 80%;*/
}
div#pin_overlay div#overlay_image img {
    /*width: 100%;*/
    max-height: 45vh;
}
div#pin_overlay div#overlay_story {
    color: #ffffff;
    font-size: 14px; /*.5vw;*/
    max-height: 25vh;
    overflow: auto;
}
div#pin_overlay div#overlay_story h3 {
    font-size: 1rem;
    font-weight: 300;
    text-transform: uppercase;
    margin-top: 10px;
}
div#pin_overlay div#overlay_story a {
    float: right;
    color: #ffffff;
    text-decoration: underline;
}

div#pin_overlay div#overlay_story a:hover {
    color: #0FA0CE;
}
div#pin_overlay div#overlay_social_panel {
    width: 100%;
    color: #ffffff;
    text-align: center;
}
div#pin_overlay_container span#overlay_closebutton {
    color: #ffffff;
    float:right;
    margin: 10px 10% 0 0;
    cursor: pointer;
}


div.category_switch_button {
    text-transform: uppercase;
    background-color: #ffffff;
    /*width: 150px;*/
    font-size: 1.1vw;
    position: absolute;
    top: 58vw;
    z-index: 2000;
    cursor: pointer;
}
div.category_switch_button img {
    height: 3vw;
}
div.category_switch_button span span.category_label {
    display: block;
    color: #888;
    padding: 0.5vw 2vw;
    border:solid 1px #cccccc;
    height: 3vw;
}
div#category_left {
    margin-left:2%;
}
div#category_left img, div#category_left span span.category_label {
    float:left;
    border-left: none;
}
div#category_right {
    right: 17vw;
    margin-right:2%;
}
div#category_right img, div#category_right span span.category_label {
    float:right;
    border-right:none;
}

div#story_flick {
    font-size: 1.0vw;
    color: #444444;
    top: 72vw;
    left: 52vw;
    position: absolute;
    z-index: 1;
}
div#story_flick span {
    padding: 0 1vw;
}
div#story_flick img {
    height: 2vw;
    cursor: pointer;
}

/******************/
/* Non tree pages */

div.container.device_consistent_width {
    max-width: none;
    width: 100%;
}

div#non_tree_header {
    background-color: #b53d2c;
    padding: 0.5vh 0;
}

ul#non_tree_header_menu {
    list-style-type: none;
    float:left;
    width: 100%;
    margin-top: 2.5rem;
    font-weight: 300;
}
ul#non_tree_header_menu li {
    float:left;
    text-transform: uppercase;
    /*font-size: 1rem;*/
    font-size: 14px; /*1vw;*/
    width:20%;
    text-align:center;
}
ul#non_tree_header_menu li a {
    color: #ffffff !important;
}

div#non_tree_menu {
    /*background-image: url("../images/non_tree_menu_background.png");*/
    /*background-repeat: repeat-x;*/
    /*background-size: contain;*/
    /*height: 7vh;*/
}
#linkupLogoOther {
    /*width: 9vh;*/
    /*width: 10rem;*/
    margin: 2rem;
    float:left;
}

div#main_container_white {
    background-color: #ffffff;
    padding: 20px 0;
    font-size: 14px; /*1.3vw*/;
    color: #777;
}
div#main_container_sky {
    background-image: url('../images/background_sky.png');
    background-position: center top;
    background-size: cover;
    background-clip: border-box;
    padding-bottom: 10px;
}
/*div#main_container_how_you_can_help {*/
    /*background-image: url('../images/background_sky_how_you_can_help.png');*/
    /*background-position: center top;*/
    /*background-size: cover;*/
    /*background-clip: border-box;*/
    /*padding-bottom: 10px;*/
/*}*/

div#main_container_white form {
    font-size: 14px;
}

div.bottom_padding {
    padding-bottom: 50px;
}
div.bottom_half_padding {
    padding-bottom: 25px;
}
div.bottom_quart_padding {
    padding-bottom: 12px;
}

div.top_padding {
    padding-top: 50px;
}
div.top_half_padding {
    padding-top: 25px;
}
div.top_quart_padding {
    padding-top: 12px;
}

div.no_bottom_padding {
    padding-bottom: 0 !important;
}
.no_bottom_margin {
    margin-bottom: 0;
}
.no_padding {
    padding: 0 !important;
}
.confirmation_text {
    font-weight: bold;
    color: #B04033;
}

div#advertisement_panel {
    background-color: #3B3B3B;
    color: #ffffff;
    padding: 90px 0;
}

div.row.final_row_padding {
    padding-bottom: 50px;
}

div#main_content {
    width: 100%;
    background-color: #ffffff;
}

div.non_tree_body {
    background-color: #ffffff;
    font-family: 'Open Sans', sans-serif;
}
div#non_tree_footer {
    max-width: none;
    width: 90%;
    /*background-color: #352b3b;*/
    background-position: center top;
    margin: 0 auto;
    color: #ffffff;
    border-bottom: solid 1px #ffffff;
    margin-bottom: 5%;
    padding: 2% 0;
}
.row {
    margin: 0 0;
}
.vertical_spacing {
    margin: 10px 0;
}

#container .row {
    margin: 0 -15px;
}
ul#non_tree_menu_1 {
    list-style-type: none;
}
ul#non_tree_menu_1 li {
    float:left;
}
ul#non_tree_menu_1 li a {
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
}
ul#non_tree_menu_1 li a:hover {
    text-decoration: underline;
}

ul#non_tree_login_menu {
    float: right;
    margin: 0;
    position: relative;
    top: -5px;
    font-weight:100;
    /*position: absolute;*/
    /*right: 0;*/
}
ul#non_tree_login_menu li {
    float: left;
    list-style-type: none;
    font-size: 2rem;
    margin-bottom: 0;
}
ul#non_tree_login_menu li span {
    font-size: 0.9em;
    color: #ffffff;
}
ul#non_tree_login_menu li a {
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.6em;
    padding: 0 1em;
}
ul#non_tree_login_menu li a#signup_link {
    color: #ffffff;
    border-left: 1px solid #ffffff;
    font-weight: 600;
}

div#inner_box {
    background-color: rgba(255,255,255,0.5);
    margin: 0 auto;
    margin-bottom: 50px;
    padding-bottom: 25px;
}
div.wide_page {
    width:90%;
}
div.slim_page {
    width:60%;
}

div#search_box, div#search_box_mobile {
    right: 0;
    border-bottom: solid 1px #ffffff;
    color: #ffffff;
    font-size: 0.6em;
    margin: 6px;
}
div#search_box.tree_page, div#search_box_mobile.tree_page {
    width: 16%;
    float:right;
}
div#search_box_mobile {
    position: absolute;
    top: 80px;
    width: 27%;
}

span.optional {
    color: #999999;
    font-style: italic;
}

div.header_row {
    margin-top: 20px;
    margin-bottom: 25px;
}

div.sign_up_page {
    font-size: 14px;
    color: #555555;
}

h1 {
    font-size: 2.0rem;
    margin: 7% 0 5% 0;
    font-weight: 600;
    color: #000000;
}
h2 {
    font-size: 1.5rem;
    margin: 3% 0;
    font-weight: 600;
    color: #444;
}

input[type="radio"], input[type="checkbox"] {
    display: none;
}
input[type="radio"] + label, input[type="checkbox"] + label {
    /*display: inline;*/
    font-weight:500;
    font-size: 13px;
}
input[type="radio"] + label span, input[type="checkbox"] + label span {
    display:inline-block;
    width:24px;
    height:24px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url("../images/checkboxes.png") left top no-repeat;
    cursor:pointer;
}
input[type="radio"]:checked + label span, input[type="checkbox"]:checked + label span {
    background:url("../images/checkboxes.png") -24px top no-repeat;
}

select {
    width: 100%;
}
input[type="text"] {
    text-align: center;
}
input[type="text"].left_aligned {
    text-align: left;
}
.styled_select {
    width: 100%;
    height: 34px;
    overflow: hidden;
    background: url("../images/dropdown_arrow.png") no-repeat right #ffffff;
    border: 1px solid #888;
    border-radius: 4px;
}
.styled_select select {
    background: transparent;
    /*width: 268px;*/
    /*padding: 0 20px;*/
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 34px;
    -webkit-appearance: none;
}
.horizontal_rule {
    border-bottom: solid 1px #CA7D73;
    margin-top: 20px;
    margin-bottom: 20px;
}
a.emphasised_text {
    color: #b53d2c;
}
textarea {
    margin: 10px 0;
    height: 100px;
}
textarea.form-control {
    height: 100px;
}
textarea + label#textarea_feedback {
    position: absolute;
    right: 18px;
    bottom: 40px;
    font-size: 1rem;
    font-weight: 400;
}
textarea + label#textarea_reasons {
    position: absolute;
    right: 9px;
    bottom: 9px;
    font-size: 1rem;
    font-weight: 400;
}
label#calendar_description_feedback {
    position: absolute;
    left: 10px;
    bottom: 9px;
    font-size: 1rem;
    font-weight: 400;
}
label#contact_message_text_feedback {
    position: relative;
    top: -9px;
    left: 10px;
    text-align: left;
}
h2#more {
    font-size: 1.8rem;
    font-weight: 500;
    padding: 3rem 0 1rem 0;
}
body#your_story {
    font-size: 1.2rem;
}
ul.story_admin_tags {
    list-style-type:none;
}
ul.story_admin_tags li.unknown {
    color: #FF0000;
    font-weight:bold;
}
input#story_id_textbox {

}
div#story_id_textbox_results {
    /*position: absolute;*/
    border-left: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
    width: 90%;
    top: -16px;
    position: relative;
    clear: both;
}
div#story_id_textbox_results .item {
    padding: 3px;
    font-family: Helvetica, sans-serif;
    border-bottom: 1px solid #c0c0c0;
}
div#story_id_textbox_results .item:last-child {
    border-bottom: 0;
}
div#story_id_textbox_results .item:hover {
    background-color: #f2f2f2;
    cursor: pointer;
    font-weight: bold;
}





#upload_photo input[type="file"] {
    display: none;
}
input[type="file"] + label span {
    display:block;
    width:55px;
    height:55px;
    vertical-align:middle;
    background:url("../images/your_story_photo_upload.png") left top no-repeat;
    cursor:pointer;
    background-size: contain;
    margin: 0 auto;
}
#image_upload_text {
    font-weight: 500;
    text-align: center;
    visibility: hidden;
    overflow: auto;
}
input[type="submit"].btn-danger {
    background-color: #AC3527;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    margin: 30px 0 30px 0;
    text-transform: none;
    font-size: 1.4rem;
    font-weight: 100;
}
input[type="submit"].btn-danger:hover {
    opacity: 0.5;
}
input.mandatory, textarea.mandatory {
    width: 90%;
    float: left;
}
input.mandatory + label, textarea.mandatory + label {
    float: left;
    color: #BC4239;
    text-align: right;
    padding-left:5px;
}
table.stories_table {
    width: 100%;
}
table.stories_table img {
    border-radius: 50%;
}

div#main_container_sky a:not(.btn), div#main_container_white a:not(.btn) {
    color: #BA685D;
}

div.hero_container {

}
div#about_us_hero_container {
    height:auto;
    background-image: url('../images/About_us_hero_image.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-clip: border-box;
    padding-bottom: 7%;
}

div.hero_container h1 {
    font-family: "Open Sans", sans-serif;
    font-size: 4.5vw;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px #b53d2c;
    margin-top: 90px;
}

div.calendar_video {
    position: relative;
}
img.youtube_thumb {
    /*position: absolute;*/
    /*display: block;*/
}
img.youtube_mask {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
}
body#how_you_can_help_page form.how_you_can_help_form label {
    font-size: 11px;
}
body#how_you_can_help_page form.how_you_can_help_form label.large, div.container label.large {
    font-size: 18px;
}
form.how_you_can_help_form div {
    font-size:12px;
}
h2.how_you_can_help_subheading {
    color: #AB3526;
    font-size: 1.8rem;
    margin-top: 0.5rem;
}
h2.how_you_can_help_subheading a {
    color: #AB3526 !important;
    font-size: 1.9rem;
    margin-top: 0.5rem;
    font-weight: normal;
}

h2.how_you_can_help_subheading a:hover {
    font-weight: bold;
    text-decoration: none;
}
div#how_you_can_help_images img {
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
}
div#how_you_can_help_images img:hover {
    background-position: 0 100%;
}
div#how_you_can_help_images img#hych-donate {
    background-image: url("../images/how_you_can_help-donate2.png");
}
div#how_you_can_help_images img#hych-volunteer {
    background-image: url("../images/how_you_can_help-volunteer2.png");
}


/*div#contextual_information_button img {*/
    /*width: 100%;*/
    /*background-image: url("../images/opening_door.png");*/
    /*background-repeat: no-repeat;*/
    /*background-position: 0 100%;*/
    /*background-size: 100%;*/
/*}*/
/*div#contextual_information_button img:hover {*/
    /*background-position: 0 0;*/
/*}*/


div#why_motivation_databox {
    width: 40vw;
    background-color: #444444;
    color: #ffffff;
    padding: 2vw;
    position: absolute;
    border-radius: 5%;
}

div#give_option_table {
    border: solid 1px #AB3526;
    padding: 0 50px;
}
div.right_border {
    border-right: solid 1px #AB3526;
}
div.left_border {
    border-left: solid 1px #AB3526;
}
span.pipe_divider {
    font-weight: normal;
    margin: 0 10px;
}
.form_field_title {
    font-weight: bold;
}

/* Contextual information tree slices */

div#contextual_information_preamble {
    color:#000000;
    width: 80%;
    margin-left: 5%;
    text-align: justify;
    position: absolute;
    font-size: 1.9vw;
}
div#contextual_information_preamble h1 {
    margin-top: 0;
    font-size: 3vw;
}
span.ci_nav_arrow {
    cursor: pointer;
}
div#ci_tree_row {
    position: relative;
    top: 26vw;
    margin-bottom: 12%;
}
div#ci_tree {
    /*margin-top: 200px;*/

}

div#ci_tree img.cross_section {
    width: 75%;
    margin-left: 7%;
    /*margin-bottom: 12%;*/
    float:left;
    position: absolute;
    opacity: 1;
}
div#ci_tree img.cross_section:hover:not(#cs_0) {
    /*background: #ff0000;*/
    /*opacity: 0.1;*/
}
div#ci_tree img#cs_0 {
    position: relative;
}
div#ci_tree img#cs_1 {
    width: 12%;
    left: 31%;
    top: 40%;
    border-radius: 32%;
    cursor: pointer;
    background-image: url("../images/ci-ring1-trans-duo.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
}
div#ci_tree img#cs_1:hover {
    background-position: 0 100%;
}
div#ci_tree img#cs_2 {
    width: 19%;
    left: 28%;
    top: 36%;
    border-radius: 41%;
    cursor: pointer;
    background-image: url("../images/ci-ring2-trans-duo.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
}
div#ci_tree img#cs_2:hover {
    background-position: 0 100%;
}
div#ci_tree img#cs_3 {
    width: 25%;
    left: 25%;
    top: 32%;
    border-radius: 45%;
    cursor: pointer;
    background-image: url("../images/ci-ring3-trans-duo.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
}
div#ci_tree img#cs_3:hover {
    background-position: 0 100%;
}
div#ci_tree img#cs_4 {
    width: 31%;
    left: 22%;
    top: 29%;
    border-radius: 44%;
    cursor: pointer;
    background-image: url("../images/ci-ring4-trans-duo.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
}
div#ci_tree img#cs_4:hover {
    background-position: 0 100%;
}
div#ci_tree img#cs_5 {
    width: 37%;
    left: 19%;
    top: 24%;
    border-radius: 44%;
    cursor: pointer;
    background-image: url("../images/ci-ring5-trans-duo.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
}
div#ci_tree img#cs_5:hover {
    background-position: 0 100%;
}
div#ci_tree img#cs_6 {
    width: 43%;
    left: 16%;
    top: 20%;
    border-radius: 46%;
    cursor: pointer;
    background-image: url("../images/ci-ring6-trans-duo.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
}
div#ci_tree img#cs_6:hover {
    background-position: 0 100%;
}
div#ci_tree img#cs_7 {
    width: 50%;
    left: 13%;
    top: 16%;
    border-radius: 42%;
    cursor: pointer;
    background-image: url("../images/ci-ring7-trans-duo.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
}
div#ci_tree img#cs_7:hover {
    background-position: 0 100%;
}
div#ci_tree img#cs_8 {
    width: 55%;
    left: 10%;
    top: 13%;
    border-radius: 44%;
    cursor: pointer;
    background-image: url("../images/ci-ring8-trans-duo.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
}
div#ci_tree img#cs_8:hover {
    background-position: 0 100%;
}
div#ci_tree img#cs_9 {
    width: 61%;
    left: 7%;
    top: 9%;
    border-radius: 45%;
    cursor: pointer;
    background-image: url("../images/ci-ring9-trans-duo.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
}
div#ci_tree img#cs_9:hover {
    background-position: 0 100%;
}
div#ci_tree span#central_text {
    left:39%;
    top: 47%;
    width: 10%;
    display: block;
    position: absolute;
    color: #ffffff;
    font-size: 1.2vw;
    text-align: center;
}
div#year_markers div.year_counter {
    color: #000000;
    background-color: #ffffff;
    width: 3.0vw;
    height: 3.0vw;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    cursor: pointer;
    font-size: 0.8vw;
    border-radius: 50%;
    padding: 0.9vw 0.4vw;
}
div#year_markers div#yc_1 {
    top: 29vw;
    left: 40vw;
}
div#year_markers div#yc_2 {
    top: 26vw;
    left: 38vw;
}
div#year_markers div#yc_3 {
    top: 24vw;
    left: 36vw;
}
div#year_markers div#yc_4 {
    top: 22vw;
    left: 35vw;
}
div#year_markers div#yc_5 {
    top: 19vw;
    left: 33vw;
}
div#year_markers div#yc_6 {
    top: 17vw;
    left: 30vw;
}
div#year_markers div#yc_7 {
    top: 15vw;
    left: 28vw;
}
div#year_markers div#yc_8 {
    top: 14vw;
    left: 26vw;
}
div#year_markers div#yc_9 {
    top: 12vw;
    left: 24vw;
}
div#story_panel {
    position:absolute;
    left:22%;
    top:19%;
    width:45%;
    height:40%;
}
div#story_panel button#close_button {
    position: absolute;
    right: 0px;
    top: 6px;
    height: 22px;
}
div#story_panel_year {
    text-align: center;
    color: #ffffff;
    margin-bottom: 25px;
    /*width:65%;*/
    /*margin-left:19%;*/
}
div#story_panel_year img {
    width: 34%;
}
div#story_panel_year span#year_text {
    /*float:left;*/
    top: 2px;
    position: relative;
    padding: 0 20px;
}
div#story_panel_image {
    text-align: center;
    height:9vw;
}
div#story_panel_image img {
    /*max-width:65%;*/
    height:100%;
}
div#story_panel_title h1 {
    text-align: center;
    color: #ffffff;
    font-size:2.0vw;
    letter-spacing: 1px;
}
div#story_panel_text {
    text-align: center;
    color: #ffffff;
    font-size:1.4vw;
    letter-spacing: 0.5px;
}

div#ci_nav_arrows {
    position:relative;
    top:17vw;
    left:-8vw;
    width: 135%;
}



div#full_page_overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    z-index: 1000;
    top: 0;
    left: 0;
}
div#login_prompt_outer_border {
    width: 80%;
    background-color:#ffffff;
    opacity: 1;
    margin-left: 9%;
    /*margin-top: 20vh;*/
    padding: 1%;
    z-index:1002;
    font-size: 20px;
    position: fixed;
    top: 20%;
}
div#login_prompt {
    width: 80%;
    border:solid 2px #AC3527;
    padding: 10%;
}
div#login_prompt a {
    color: #AC3527;
    text-decoration: underline;
}
button#close_login_prompt {
    position: fixed;
    top: 16%;
    left: 9%;
    border: none;
    padding: 10px;
}


div.lightbox {
    width: 60%;
    background-color:#ffffff;
    opacity: 1;
    margin-left: 20%;
    padding: 4%;
    z-index:1002;
    font-size: 14px;
    position: fixed;
    top: 10%;
    overflow: scroll;
    max-height: 75%;
    text-align: center;
}
div.lightbox a {
    color: #AC3527;
    text-decoration: underline;
}
div.small {
    width: 40%;
    margin-left: 30%;
    border: solid 6px #000;
}

button#close_lightbox {
    top: 6%;
    left: 9%;
    border: none;
    padding: 10px;
    float:right;
}
div#how_to_use_the_tree {
    /*border:1px dotted #ffff00;*/
    opacity: 0.5;
    position: absolute;
    left: 2%;
    top: 10%;
    max-width: 20%;
    z-index: 999;
    text-align: center;
}
div#how_to_use_the_tree a {
    color: #0FA0CE;
    display: block;
    padding: 3%;
    background-color: #ffff00;
}
div#how_to_use_the_tree a:hover {
    color: #ffff00;
    background-color: #0FA0CE;
    text-decoration: none;
}

h1#full_story_category_title, h2#full_story_title {
    text-transform:uppercase;
    margin: 0;
}
span#full_story_category {
    display: block;
    background-color: #E6E1D7;
    color: #000000;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 0;
    font-weight: bold;
}
span#full_story_comment_count {
    font-weight:bold;
    font-size:16px;
}
span#full_story_like_count {
    font-size: 20px;
    color: #000000;
    font-weight: bold;
}
span#full_story_like_count span.glyphicon-heart {
    color:#b73d2d;
}
textarea + label#comment_text_feedback {
    /*position: absolute;*/
    /*right: 18px;*/
    /*bottom: 40px;*/
    font-size: 1rem;
    font-weight: 400;
    position: relative;
    right: 15px;
    top: -32px;
}
textarea#comment_text {
    border:solid 1px #000000;
    z-index: 3;
}
input#username_submit {
    position: relative;
    top: -64px;
    z-index: 2;
}

div#mobile_closebutton {
    color: #ffffff;
    background-color: #777;
    text-align: center;
    cursor: pointer;
    padding: 1px;
}
div#mobile_closebutton:hover {
    background-color: #ccc;
}

form.search_form {
    margin-bottom: 0;
    font-size: 14px;
}
form.search_form input {
    color: #ffffff;
    background-color: transparent;
    border: none;
    text-align: left;
    margin-bottom: 0;
    width: 80%;
    height: 20px;
    padding-left: 0;
}
form.search_form input::-webkit-input-placeholder {
    color: #ffffff;
}

form.search_form input:-moz-placeholder { /* Firefox 18- */
    color: #ffffff;
}

form.search_form input::-moz-placeholder {  /* Firefox 19+ */
    color: #ffffff;
}

form.search_form input:-ms-input-placeholder {
    color: #ffffff;
}
div#site_search_results, div#site_search_results_mobile {
    background-color: #b53d2c;
    position: absolute;
    width: 12%;
    border: solid 1px #ffffff;
    z-index: 10000;
    font-size:10px;
}
div#site_search_results_mobile {
    width: 100%;
}
div#main_tree div#search_box_mobile {
    right: 117px;
    top: 10px;
}
div#site_search_results div.search_result_item, div#site_search_results_mobile div.search_result_item {
    padding: 5%;
}
div#site_search_results div.search_result_item:hover, div#site_search_results_mobile div.search_result_item:hover {

}
div#site_search_results a, div#site_search_results_mobile a {
    color: #ffffff;
    display: block;
    width: 100%;
    padding: 5%;
}
div#site_search_results div.search_result_item, div#site_search_results_mobile div.search_result_item {

}
div#site_search_results a:hover, div#site_search_results_mobile a:hover {
    background-color:#cccccc;
}
select#your_motivation {
    font-size: 16px;
}
select#your_motivation option {
    white-space: pre-wrap;
    padding: 5px;
}
select#volunteer_help_out_with {
    font-size: 16px;
}
select#volunteer_help_out_with option {
    white-space: pre-wrap;
    padding: 5px;
}
a#story_tips img:hover {
    opacity: 0.5;
    border: dotted 1px #000000;
}

/**************************************/






/***********************/
/* Google button rules */
#gSignInButton:hover {
    cursor: pointer;
}


div#gSignInWrapper #customBtn {
    /*background: url('../images/signup_google2.png') no-repeat;*/
    /*display: inline-block;*/
    /*color: #444;*/
    /*width: 448px;*/
    /*height: 50px;*/
    /*border-radius: 5px;*/
    /*border: thin solid #888;*/
    /*box-shadow: 1px 1px 1px grey;*/
    /*white-space: nowrap;*/
}
div#gSignInWrapper #customBtn:hover {
    /*cursor: pointer;*/
}

div#gSignInWrapper span.icon {
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    /*width: 42px;*/
    /*height: 42px;*/
}
div#gSignInWrapper span.buttonText {
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    /*padding-left: 42px;*/
    /*padding-right: 42px;*/
    /*font-size: 14px;*/
    /*font-weight: bold;*/
}
/***********************/



/***********************/
/* Viewport specific rules */


/* Override skeleton rules */
.container {
    width: 100%;
    padding: 0;
}

.slicknav_menu {
    display:none;
}
.mobile_only {
    display:none;
}


/* Larger than phablet only */
@media (max-width: 549px) {
    /*div#right_menu_container:not(.contextual_information) {*/
        /*display: none;*/
    /*}*/
    /*nav#right_menu:not(.contextual_information) {*/
        /*display: none;*/
    /*}*/
    div#tree_footer {
        width: 100%;
    }
    ul#tree_header_menu {
        display:none;
    }
    ul#non_tree_header_menu {
        display:none;
    }
    .slicknav_menu {
        display:block;
    }
    .mobile_only {
        display:block;
    }
    .not_mobile {
        display:none;
    }
    nav#right_menu.contextual_information {
        top: 5% !important;
    }
    div#story_panel {
        top: 0;
    }
}
@media (min-width: 550px) {
    div#right_menu {
        display: block;
    }
    nav#right_menu ul {
        display: block;
    }
}


div#right_menu_container {
    /* This container is required to hide menu items that enter the hill area */
    position: absolute;
    width: 30%;
    height: 73vw;
    right: 0;
    overflow: hidden;
}
div#right_menu_container.contextual_information {
    height: 100vh;
    top: 10%;
    position: fixed;
    max-width: 17vw;
}
nav#right_menu {
    float:right;
    position: absolute;
    right: 1.3%;
    top: 33%;
    min-width: 250px;
    font-size: 1.3vw;
    z-index: 1000;
    backface-visibility: hidden;
}
nav#right_menu.contextual_information {
    top: 0;
}

nav#right_menu ul {
    text-align: right;
    margin-right: 20px;
}

nav#right_menu li {
    margin-bottom: 3vh;
    list-style-type: none;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out; /*cubic-bezier(0.86, 0, 0.07, 1);*/
    transition-delay: 0ms;

}
nav#right_menu.contextual_information li {
    margin-bottom: 0.5vh;
}
nav#right_menu li a, nav#right_menu li span.menu_item {
    color: #666666;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;

    transition-property: all;
    transition-duration: 0s;
    transition-timing-function: ease-in-out;
    transition-delay: 0ms;
    cursor: pointer;
}

nav#right_menu li:hover {
}
nav#right_menu li:hover a, nav#right_menu li:hover span.menu_item {
    color: #000000;
}
nav#right_menu li.current a, nav#right_menu li.current span.menu_item {
    color: #000000;
    margin: 200px 0;
}

nav#right_menu li.current {
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0ms;
    margin-top: 4vh;
    margin-bottom: 4vh;

    /*transform: translateY(5vh);*/
    /*-webkit-transform: translateY(5vh);*/
    /*-moz-transform: translateY(5vh);*/
    /*-o-transform: translateY(5vh);*/
    /*-ms-transform: translateY(5vh);*/
}

nav#right_menu.contextual_information li.current {
    margin-top: 2vh;
    margin-bottom: 2vh;
}

nav#right_menu li.current ~ li {
    /*transform: translateY(4vh);*/
}
nav#right_menu li.current ~ li a {
    /*color: #ff0000;*/
}