
body, html {
    margin: 0px;
    padding: 0px;
}

body {
    background: #222222;
    color: #999999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    
    height: 100%;
    line-height: 1.5;
    width: 100%;
    word-spacing: 1px;
    overflow: hidden;
}

.page_border {
    background: #ffffff;
    position: fixed;
    z-index: 1;
}

#border_top, #border_bottom { height: 30px; right: 0; left: 0; }
#border_top { top: 0; }
#border_bottom { bottom: 0; }

#border_left, #border_right { width: 30px; top: 0; bottom: 0; }
#border_left { left: 0; }
#border_right { right: 0; }






.header_img {    /* To fix in place change to "position:fixed;" */
    position: fixed;
    top: 0px; left: 65px;
    z-index: 11;
}

.nav_container {    /* Vertical nav is not supported, however if you'd like to configure this do so here */

}

.nav_container.horizontal {    /* Enabled by default */
    line-height: 30px;
    position: fixed;
    top: 0; right: 120px;
    white-space: nowrap;
    width: auto;
    z-index: 998;
}

.nav_container.horizontal div {
    float: left;
}

#nav_loadspin {
    display: none !important;
    position: fixed;
    top: 5px; left: 30px;
    z-index: 100;
}







.project_link a, .page_link a, .link_link a, .nav_active a {    /* Applied to each navigation link */
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    display: block;
    font-size: 11px;
    margin: 0 -1px 0 0;
    padding: 0 30px;
    text-decoration: none;
}

.project_link a { color: #999999; }
.project_link a:hover { background: #f5f5f5; color: #333333; text-decoration:underline; }
.project_link a:active { background: #cccccc; color: #ffffff; text-decoration: none; }

.page_link a { color: #999999; text-decoration:none; }
.page_link a:hover { background: #f5f5f5; color: #333333; text-decoration: underline; }
.page_link a:active { background: #cccccc; color: #ffffff; text-decoration: none; }

.link_link a { color: #999999; text-decoration:none; }
.link_link a:hover { background: #f5f5f5; color: #333333; text-decoration: underline; }
.link_link a:active { background: #cccccc; color: #ffffff; text-decoration: none; }

.nav_active a { background: #f5f5f5; color: #000000; font-weight: bold; }
.nav_active a:hover { background: #f5f5f5; color: #333333; text-decoration: underline; }
.nav_active a:active    { background: #cccccc; color: #ffffff; text-decoration: none; }

.pagination { color: #555555; font-size: 11px; margin: 0 18px 0 0; z-index:11; }
.bottompad .pagination { margin-left: 35px; }
.pagination a { color: #555555; text-decoration: underline; }
.pagination a:hover { color: #999999; }
.pagination a:active { color: #ffffff; }

.nav_follow { 
    border-right: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    color: #999999;
    display: block;
    font-size: 11px;
    margin: 0 -1px 0 0;
    padding: 0 30px;
    text-decoration: none;
}

.nav_follow a { color: #999999; text-decoration: none; }
.nav_follow a:hover { text-decoration: underline; }
.nav_follow a:active { color: #666666; }

.view_tag_info {
    background: #111111;
    color: #666666;
    font-size: 11px;
    line-height: 11px;
    padding: 14px 22px 5px 15px;
    position: fixed;
    left: 30px; bottom: 0;
    z-index: 990;
}

.view_tag_info a { color: #0066ff; }
.view_tag_info a:hover { color: #ffffff; }
.view_tag_info a:active { color: #666666; }

#content_container .view_tag_info {
    background: transparent;
    color: #444444;
    font-size: 22px;
    line-height: 30px;
    position: absolute;
    top: 250px; left: 30px; right: 0;
    text-align: center;
}

#content_container .view_tag_info a { color: #444444; }
#content_container .view_tag_info a:hover { color: #ffffff; text-decoration: underline; }
#content_container .view_tag_info a:active { color: #666666; text-decoration: underline; }







#content_container {
    clear: both;
}







#maincontainer_scroll {
    overflow: hidden;
    position: fixed;
    top: 30px; right: 30px; bottom: 30px; left: 30px;
}

#maincontainer {
    padding: 30px 120px 0px 30px;
}

.bodycopy a { color: #333; text-decoration: underline; }
.bodycopy a:hover { color: #000; }
.bodycopy a:active { color: #000; }

.project_title {
    color: #0099ff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: -6px 0 23px 0;
    
//    background-color: white;
    font-style: italic;
    color: white;
    font-size: 24px;
    margin: 0px 0 14px 0;
    
}

.project_content {
    color: #999999;
}

.project_content p {
    width: 560px;
}

.project_content br { clear: none !important; }







.project_header {
    line-height: 29px;
}

.project_header a {
    font-family: Lucida Grande, Arial, san-serif;
    background: #ff3300;
    color: #222222;
    display: block;
    font-size: 14px;
    font-style: normal;
    height: 30px;
    position: fixed;
    top: 101px; right: 30px;
    text-align: center;
    text-decoration: none;
    width: 30px;
}

.project_header a:hover {
    background: #0099ff;
    color: #222222;
    text-decoration: none;
}

.project_header a:active {
    color: #222222;
    background: #ffffff;
    text-decoration: none;
}

.project_divider {
    color: #555555;
    display: none;
}

.project_index {
    display:none;    
}



h1 {
    font-size: 22px;
    line-height: 165%;
}

h2 {
    font-size: 16px;
    line-height: 165%;
}

h3 {
    font-size: 14px;
    line-height: 150%;
}

blockquote {
    color: #666666;
    margin: 0;
}

p {
    display: inline;
    margin: 0;
    padding: 0;
}

.project_content img {
    background: #111;
    margin: 0px 30px 30px 0px;
}











.project_content img {
    margin: 0px 35px 35px 0px;
    margin: 0px 14px 14px 0px;
}







.slideshow_component {
    float: left;
    position: relative;
    margin: 0 0 15px 0;
}

.slideshow_nav {
    clear: both;
    color: #666666;
    line-height: 29px;
    position: absolute;
    left: -30px;
    font-size: 11px;
    z-index: 999;
}

.slideshow_nav.above {
    top: 0;
}

.slideshow_nav.below {
    bottom: 10px;
}

.slideshow_nav a {
    font-family: Lucida Grande, Arial, san-serif;
    background: #ff3300;
    color: #222222;
    display: block;
    float: left;
    font-size: 14px;
    font-style: normal;
    height: 30px;
    margin: 0;
    text-align: center;
    text-decoration: none;
    width: 30px;
}

.slideshow_nav a:hover {
    background: #ffffff;
    color: #222222;
    text-decoration: none;
}

.slideshow_nav a:active {
    color: #0099ff;
    background: #ffffff;
    text-decoration: none;
}

.slideshow_nav a.slide_prev {
    border-right: 1px solid #333333;
}

.slideshow_count {
    background: #111111;
    color: #666666;
    float: left;
    font-size: 11px;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
}

.slideshow_wrapper {
    clear: both;
    margin: 0px 30px 10px 0px;
}

#slideshow_container img {
    margin: 0px;
}

.slideshow_wrapper a, .slideshow_wrapper a:hover, .slideshow_wrapper a:active {
    background: none !important;
}

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

.slideshow_thumb {
    float: left;
    list-style: none;
    margin: -3px 0px 0px -3px;
    padding: 0px 7px 7px 0px;
}

.slideshow_thumb a {
    background: none !important;
    border: 1px solid transparent;
    display: block;
    padding: 2px;
}

.slideshow_thumb a:hover {
    background: none !important;
    border: 1px solid #444444;
}

a.activeSlide {
    background: none;
    border: 1px solid #666666;
}

.slideshow_thumb a:active, a.activeSlide:hover, a.activeSlide:active {
    background: none !important;
    border: 1px solid #666666;
}

.slideshow_thumb img {
    border: 0;
    display: block;
    margin: 0;
    height: 80px;
}

.slideshow_caption {
    clear: both;
    display: block;
    font-size: 11px;
    padding: 5px 0 5px 0;
}





.project_footer {
    color: #444444;
    clear: both;
    padding: 15px 0 0 0;
    font-size: 11px;
}

.comment_link a {
    
}

.comment_link a:hover {
    
}

.footer_title_type {
    color: #444444;
    font-weight: bold;
}

.project_views {
    color: #444444;
    font-style: italic;
}



.project_footer .permalink a { color: #444444; }
.project_footer .permalink a:hover { color: #999999; text-decoration: underline; }
.project_footer .permalink a:active { color: #ffffff; }

.tags { color: #444444; }
.tags a { color: #666666; text-decoration: none; }
.tags a:hover { color: #999999; text-decoration: underline; }
.tags a:active { color: #ffffff; }
.tags a:visited {}

.project_footer .editlink a { color: #0066ff; font-style: italic; }
.project_footer .editlink a:hover { background: #ffff00; color: #000000; }
.project_footer .editlink a:active { background: #000000; color: #ffffff; }

.project_bottom {
    clear: both;
    border-bottom: 0px dotted #333333;
    margin: 30px 0px 0px 0px;
}








#thumb_container {
    background: #111;
    position: fixed;
    left: 30px; right: 30px; bottom: 30px;
    z-index: 99;
}

#crop_left, #crop_right {
    position: absolute;
    top: 0; bottom: 0;
    z-index: 99;
}

#crop_left { left: 0; }
#crop_right { right: 0; }


.project_thumb {
    float: left;
    margin: 0 15px 0 0;
    position: relative;
}

.project_thumb .hover { text-decoration: none; }

.project_thumb:hover {
    cursor: pointer;
    text-decoration: none;
}

.project_thumb .nohover {
    text-decoration: none;
}

.project_thumb:hover .cardimgcrop, .project_thumb:hover .cardimgcrop_default {
    -moz-opacity: 0.25;
    -khtml-opacity: 0.25;
    opacity: 0.25;
    filter: alpha(opacity=25);
}

.project_thumb:hover .thumb_title {
    display: block;
}

.project_thumb:hover .thumb_tag {
    display: block;
}

.project_thumb.active .cardimgcrop, .project_thumb.active .cardimgcrop_default {
    opacity: 1;
    outline: 2px solid #0099ff;
    outline-offset: -2px;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
}

.project_thumb.active .thumb_title {
    display: none;
}

.project_thumb.active .thumb_tag {
    display: none;
}

.cardimgcrop {
    background: #333333;
    overflow: hidden;
    position: relative;
    width: 160px; height: 90px;
}

.cardimgcrop img {
    background: #333333;
    width: 160px;
}

#content_container.ie .project_thumb {
    overflow: hidden;
    width: 160px; height: 90px;
}

.loader_holder {
    display: none;
    position: absolute;
    top: 8px; left: 8px;
    z-index: 3;
}

.thumb_title {
    display: none;
    overflow: hidden;
    position: absolute;
    top: 7px; left: 10px;
    width: 140px;
    z-index: 2;
}

.thumb_title .text {
    color: #ffffff;
    display: block;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.5;
    text-decoration: underline;
}

.thumb_tag {
    display: none;
    color: #999999;
    line-height: 15px;
    overflow: hidden;
    position: absolute;
    bottom: 10px; left: 10px;
    z-index: 2;
}

.thumb_tag a {
    color: #999999;
    font-size: 11px;
    line-height: 1;
    text-decoration: none;
}

.thumb_tag a:hover {
    text-decoration: underline;
}

.thumb_tag a:active {
    color: #ffffff;
}




#search_form {
    position: fixed;
    top: 0; left: 120px;
    z-index: 999;
}

#search_form #search_term {
    background: #f5f5f5;
    border-bottom: 0;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    border-top: 0;
    color: #666666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    height: 30px;
    line-height: 11px;
    padding: 0 10px;
    width: 188px;
}

#search_form_results {
    padding-bottom: 90px;
}

.search_header {
    color: #666666;
    float: left;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    margin: 0;
    padding: 5px 0;
    width: 145px;
}

#search_term {
    background: #1a1a1a;
    border: 1px solid #333333;
    color: #cccccc;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 5px;
    width: 220px;
}

#search_results {
    float: left;
}

.result {
    clear: both;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 60px;
}

.search_thumb {
    float: left;
    margin: 4px 25px 35px 0px;
}

.search_thumb img {
    width: 120px; height: auto;
}

.search_text {
    width: 500px;
    margin-left: 145px;
}

.search_title a {
    color: #cccccc;
    font-weight: bold;    
    text-decoration: none;
}

.search_title a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.search_title a:active {
    color: #666666;
}

.search_tags {
    color: #666666;
    font-family: Georgia, times, serif;
    font-size: 11px;
    font-style: italic;
}

.search_tags a {
    color: #666666;
    text-decoration: none;
}

.search_tags a:hover {
    background: none;
    color: #cccccc;
    text-decoration: underline;
}

.search_tags a:active {
    color: #666666;
}





.bottompad {
    clear: both;
    position: relative;
    height: 35px;
    margin: 35px 0 0 0;
    width: 705px;
    display: none;
}

.bottompad a {
    padding: 2px 3px 2px 3px;
}







.video_component {
    float: left;
    margin: 0 30px 30px 0;
}







.audio_component {
    color: #777777;
    font-family: 'Droid Sans Mono', Monaco, Monospace, Arial, san-serif;
    font-size: 10px;
    height: 30px;
    line-height: 26px;
    width: 300px;
}

.audio_component div {
    height: 26px;
}

.audio_component .border {
    border: 2px solid #aaaaaa;
    opacity: 0.5;
    background-color: white;
    
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
}

.audio_component .vertical_border {
    background: #aaaaaa;
    opacity: 0.50;
    
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
}

.audio_component .controls {
    top: 2px; left: 2px;
}

.audio_component .play_pause {
    background: url("/_gfx/playpause.png");    
}

.audio_component .spectrum .spectrum_bar {
    background: #666666;
}

.audio_component .loading {
    background: #bbbbbb;
    opacity: 0.25;
    
    filter: alpha(opacity=25);
    -moz-opacity: 0.25;
    -khtml-opacity: 0.25;
}

.audio_component .progress {
    background: #bbbbbb;
    border-right: 1px dotted #333333;
    opacity: 0.25;
    
    filter: alpha(opacity=25);
    -moz-opacity: 0.25;
    -khtml-opacity: 0.25;
}

.audio_component .volume_slide.hover {
    background: #bbbbbb;
    opacity: 0.3;

    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
}







.jspContainer {
    position: relative;
}

.jspPane {
    position: absolute;
}

.jspVerticalBar {
    position: fixed;
    top: 30px;
    right: 8px;
    width: 12px;
    height: 100%;
}

.jspHorizontalBar {
    position: absolute;
    bottom: -21px;
    left: 0;
    width: 100%;
    height: 12px;
}

.jspVerticalBar *, .jspHorizontalBar * {
    margin: 0;
    padding: 0;
}

.jspCap {
    display: none;
    height: 15px;
    width: 15px
}

.jspHorizontalBar .jspCap {
    float: left;
}

.jspTrack {
    position: relative;
}

.jspDrag {
    background: #808080;
    position: relative;
    top: 0;
    left: 0;
    height: 30px;
    cursor: pointer;
    z-index: 99;
    
    filter:alpha(opacity=25);
    -moz-opacity: 0.25;
    -khtml-opacity: 0.25;
    opacity: 0.25;
    
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.jspDrag.jspHover, .jspDrag.jspActive {
    filter:alpha(opacity=40);
    -moz-opacity: 0.40;
    -khtml-opacity: 0.40;
    opacity: 0.40;
}

.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
}

.jspArrow {
    background: #50506d;
    text-indent: -20000px;
    display: block;
    cursor: pointer;
}

.jspArrow.jspDisabled {
    cursor: default;
    background: #80808d;
}

.jspVerticalBar .jspArrow {
    height: 12px;
}

.jspHorizontalBar .jspArrow {
    width: 12px;
    float: left;
    height: 100%;
}

.jspVerticalBar .jspArrow:focus {
    outline: none;
}

.jspCorner {
    background: #eeeef4;
    float: left;
    height: 100%;
}







#content_container.ie .project_thumb:hover .cardimgcrop img, #content_container.ie .project_thumb:hover .cardimgcrop_default img {
    filter: alpha(opacity=25);
}

#content_container.ie .project_thumb.active .cardimgcrop img, #content_container.ie .project_thumb.active .cardimgcrop_default img {
    filter: alpha(opacity=20);
}


* html .jspCorner {
    margin: 0 -3px 0 0;
}







.toolset {    /* Admin and following icons â€” only seen by members */
    position: fixed;
    top: 36px; right: 36px;
    z-index: 9999;
}

.cargo_link {    /* "Running on Cargo" */
    color: transparent;
    overflow: hidden;
    text-indent: -9999px; 
    width: 20px; height: 20px;
    visibility:hidden;
}

.cargo_link a {
    background: url(http://www.cargocollective.com/_gfx/bolt-sc.png) no-repeat center;
    display: block;
    font-size: 11px;
    overflow: hidden;
    position: fixed;
    text-indent: -9999px;
    width: 20px; height: 20px;
    z-index: 9999;
}








html, body {
    min-width: 900px;
    min-height: 700px;
    position: relative;
    width: 100%;
    height: 100%; 
    overflow: visible; 
}



.page_border#border_top { 
    position: fixed;
}




.stretch_bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}


.bg1 #bg { background-image: url(http://friends.amoslanka.com/michalangela/cargo/images/bg1.jpg); }
.bg2 #bg { background-image: url(http://friends.amoslanka.com/michalangela/cargo/images/bg2.jpg); background-position: right bottom;}
.bg3 #bg { background-image: url(http://friends.amoslanka.com/michalangela/cargo/images/bg3.jpg); }
.bg4 #bg { background-image: url(http://friends.amoslanka.com/michalangela/cargo/images/bg4.jpg); }
.bg2 .header_img { top: auto; bottom: 30px; }


.bg2 .project_content {
    margin-bottom: 180px;
}


iframe.calendar {
    height: 550px;
    width: 100%;
}


img[align=left] { float:none; }
#social {
    position: fixed;
    bottom: 30px;
    right: 3px;
    z-index: 400;
}


#social .twitter {
    background: url(http://friends.amoslanka.com/michalangela/cargo/images/twitter.png);
}











.page_border { 
    position: absolute;
}





h3 {
    font-size: 14px;
    line-height: 150%;
}



.header_img { 
    border-top-width:0px; 
    top: 30px; 
    left: 0px;
    border-left: 45px solid white;
    border-right: 15px solid white;
}

#social a {
    display:block;
    width: 24px;
    height: 24px; 
    text-indent: -9999px;
    margin-top: 3px;
}
#social .facebook {
    background: url(http://friends.amoslanka.com/michalangela/cargo/images/facebook.png);
}

h2 {
    font-size: 16px;
    line-height: 165%;
}

#content_container {
    min-height: 100%;
}

.jspContainer { 
    height: auto!important; 
}

h1 {
    font-size: 22px;
    line-height: 165%;
}
blockquote {
    color: #666666;
    margin: 0;
}
#maincontainer {
    padding-top: 110px;    
}
#maincontainer_scroll {
//    position: relative;
//    overflow: visible;
//    height: 100%;
    width: 100%;
}
.project_content {
    max-width: 670px;
    width: 670px;
    padding: 1.2em .5em;
    background-color: white;
    color: #333;
    background-color: rgba(255,255,255,.5);
}



/* MailChimp Form Embed Code - Slim - 08/17/2011 */
#mc_embed_signup form {display:block; position:relative; text-align:left; padding:10px 0 10px 3%}
#mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}
#mc_embed_signup input {border:1px solid #999; -webkit-appearance:none;}
#mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
#mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
#mc_embed_signup input:focus {border-color:#333;}
#mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
#mc_embed_signup .button:hover {background-color:#777;}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .nowrap {white-space:nowrap;}     
#mc_embed_signup .clear {clear:none; display:inline;}

#mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup input.email {display:block; padding:8px 0; margin:0 4% 10px 0; text-indent:5px; width:58%; min-width:130px;}
#mc_embed_signup input.button {display:block; width:35%; margin:0 0 10px 0; min-width:90px;}

#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}




		 

/**
 * Fullscreen button
 */
 
a#fullscreen {
    background-color: #1a1a1a;
    background-image: url(/_gfx/fullscreen_open.png);
    background-repeat: no-repeat;
    background-position: 67px 3px;
    border: 1px solid #1a1a1a;
    color: #bbbbbb;
    display: block;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
    font-size: 11px;
    line-height: 18px;
    height: 19px;
    padding: 0 4px 0 5px;
    text-align: left;
    text-decoration: none;
    width: 74px;
}

a#fullscreen:hover {
    background-color: #fff;
    color: #000;
}

a#fullscreen:active {
    background-color: #fff;
    border: 1px solid #999;
    color: #666;
}
