/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
        display: block;
}
body {
        line-height: 1;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}
table {
        border-collapse: collapse;
        border-spacing: 0;
}




/************ CUSTOM **************/

body {
  color: #111;
  font-family: 'Droid Sans', sans-serif;
  font-size: 100%;
  line-height: 1.1em;
  background-color: rgb(0,20,13);
}

b {
  font-weight: bold;
}

em {
  font-style: italic;
}

a:hover {
    color: #333; 
}

a {
    color: #111;
}

ul,
ol {
    margin-top: 10px;
    margin-bottom: 10px;
    list-style: disc;
}
ol {
    list-style: decimal;
}

li {
    margin-left: 20px;
}

ul ul {
    margin-top: 0;
    margin-bottom: 0px;
}

.header,
.team {
    color: #fff;
    background: rgb(0,20,13);
    z-index: 5;
}

.header {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    padding: 15px 20px 17px 20px;

    background: -moz-linear-gradient(top,  rgba(40,61,48,1) 0%, rgba(0,20,13,1) 84%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(40,61,48,1)), color-stop(84%,rgba(0,20,13,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(40,61,48,1) 0%,rgba(0,20,13,1) 84%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(40,61,48,1) 0%,rgba(0,20,13,1) 84%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(40,61,48,1) 0%,rgba(0,20,13,1) 84%); /* IE10+ */
    background: linear-gradient(top,  rgba(40,61,48,1) 0%,rgba(0,20,13,1) 84%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#283d30', endColorstr='#00140d',GradientType=0 ); /* IE6-9 */

    /* outer shadows  (note the rgba is red, green, blue, alpha) */
    -moz-box-shadow:    0px 0px 4px 4px rgba(40, 40, 40, 0.6);
    -webkit-box-shadow: 0px 0px 4px 4px rgba(40, 40, 40, 0.6);
    box-shadow:         0px 0px 4px 4px rgba(40, 40, 40, 0.6);
}

.header a,
.navi a,
.team a {
    color: #fff;
    text-decoration:none;
}

.header a:hover,
.navi a:hover
.team a:hover {
    color: #fff;
    text-decoration:underline;
}

.header__logo {
  margin-right: 4px;
  margin-bottom: -3px;
}

.languageswitcher {
    margin-left: -12px;
}

.navi {
    font-size: 0.8em;
    position: absolute;
    top: 18px;
    right: 63px;
}

.content {
    width: 650px;
    margin: 0 auto;
    padding: 30px;
    
}

.activity-wrapper {
    width: 710px;
    margin: 0 auto;
    padding: 0;
}


.activity-content {
    padding: 30px;
    display: table-cell;
}

.phase-stepper {
    display: table-cell;
    width: 30px;
    vertical-align:middle;
    text-align: center;
    font-size: 25px;
    text-decoration: none;
    background-color: rgba(255, 255, 255,0.13);
}

.phase-stepper:hover,
.phase-stepper:active {
    background-color: rgba(30, 30, 30,0.08);
}

.pitch {
    width: 100%;
    color: #395360; /* #2A4C70; /*#051A1C;*/
    
    background-image: url("images/tile_top.png");
    background-repeat: repeat;
}

.pitch .content {
    font-size: 1.5em;
    font-family: 'Droid Serif', serif;
    line-height: 1.2em;
    
    background: #d5e8e9; /* The Fallback */
    background: rgba(255, 255, 255, 0.5);
    padding-top:80px;
}

.book {
    background-color: #c7e478;
}

.book .content {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #daeda7; /* The Fallback */
    background-color: rgba(255, 255, 255, 0.35);
}

.print-header {
  display: none;
}





.plan-header {
    background-color: #e3f5ab;
}

.plan-header .content {
    background: #ecf8c8; /* The Fallback */
    background: rgba(255, 255, 255, 0.35);
    padding-top: 15px;
    padding-bottom: 15px;
}

.plan-header__wrapper {
    display: table;
    width: 100%;
}

.ids-display {
    display: table-cell;
    width: 377px;
    vertical-align: middle;
}

.plan-navi {
    display: table-cell;
    width: 173px;
}

.ids-display__form {
    display: inline;
}

.plan-navi ul {
    list-style: none;
    margin: 0;
}

.plan-navi li {
    display: block;
    float: left;
    width: 42px;
    height: 42px;
    border: 3px white solid;
    border-radius: 8px;
}

.plan-navi__random,
.plan-navi__ids,
.plan-navi__search {
    display: block;
    opacity: .7;
    width: 100%;
    height:100%;
    font-size: 0;
    line-height: 0;
    background-color: #c7e478;
    background-image: url('images/icons.svg');
    border-radius: 5px;
}

.plan-navi__random:hover,
.plan-navi__ids:hover,
.plan-navi__search:hover,
.plan-navi__random:active,
.plan-navi__ids:active,
.plan-navi__search:active {
    opacity: 1;
}

.plan-navi__ids {
    background-position: -42px 0px;
}

.plan-navi__search {
    background-position: -84px 0px;
}

.plan_id_form {
    display: inline;
}

.ids-display__input {
    padding: 0 5px;
    font-size: 1em;
    background-color: transparent;
    border: none;
}

.popup {
    position: absolute;
    margin-top: -65px;
    padding: 15px;
    background-color: #c7e478;
    border: 3px solid white;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-image: none;
}

.popup--ids {
    margin-left: -248px
}

.popup--search {
    margin-left: -256px
}

.popup__info {
    margin-top: 5px;
    margin-bottom: -5px;
}

.popup__info,
.popup__close-link {
    color: #666;
    font-size: 0.8em;
}

.popup__close-link a:hover {
    color: #000;
}

.popup input {
    -moz-border-radius: 8px;
    border-radius: 8px;
    border-width: 1px;
}

.popup-input, /*TODO */
.popup__input {
    margin-left: 5px;
    margin-right: 3px;
    padding: 5px 10px 5px 7px;

    font-size: 1em;
    background-color: #f5ffe3;
}

.popup__submit {
    padding: 3px 5px 3px 5px;
    font-size: 0.8em;
    background-color: #d0d099;
}

.plan_title_container {
    font-size: 1.5em;
    background-color: #75c7d2;
}

.plan_title_container .content {
    background-color: #a5dbe2; /* The Fallback */
    background-color: rgba(255, 255, 255, 0.35);
}

.uppercase {
    text-transform: uppercase;
}

.activity_block {
    width: 100%;
}

.bg0  {
    background-color: #017f7c;
}

.bg0 .activity-wrapper {
    background-color: #339896; /* The Fallback */
}

.bg1 {
    background-color: #b9e7e7;
}

.bg1 .activity-wrapper {
    background-color: #ceeeee; /* The Fallback */
    background-color: rgba(255, 255, 255, 0.12);
}

.bg2 {
    background-color: #AF7500;
}

.bg2 .activity-wrapper {
    background-color: #bf9033; /* The Fallback */
}

.bg3 {
    background-color: #023838
}

.bg3 .activity-wrapper {
    background-color: #345f5f; /* The Fallback */
}

.bg4 {
    background-color: #D3B256;
}

.bg4 .activity-wrapper {
    background-color: #dbc177; /* The Fallback */
    background-color: rgba(255, 255, 255, 0.2);
}

.bg0 .activity-wrapper,
.bg2 .activity-wrapper,
.bg3 .activity-wrapper {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
}

.bg0 .activity-wrapper a,
.bg2 .activity-wrapper a,
.bg3 .activity-wrapper a {
    color: #fff;
}

.phase_title {
    line-height: 0.85em;
    margin-bottom: -17px;
    text-align: right;
}

.phase_title,
.photo_link {
    font-size: 0.8em;
    text-transform: uppercase;
}

.display_none {
  display: none;
}

.hidden {
    visibility: hidden;
}

.display_table-cell {
  display: table-cell;
}

.activity_block h2 {
    font-family: 'Droid Serif',serif;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.25em;
    margin-bottom: 5px;
    max-width: 74%;
}

.activity_id_wrapper {
  font-weight: normal;
}

.summary {
  font-weight: bold;
}

.source, .comments {
    font-size: 0.8em;
}

.description {
    margin-top: 15px;
}

.photo_link {
    margin: 0 auto;
    margin-top: 15px;
    text-align: center;
}

.less_pronounced {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

.about {
    background-image: url("images/tile_bottom.png");
    background-repeat: repeat;
}

.about .content {
    font-family: 'Droid Serif', serif;
    font-size: 0.8em;
    background: #92c9d1; /* The Fallback */
    background: rgba(255, 255, 255, 0.6);
}

.team {

}

.team h2 {
    font-weight: bold;
    margin-bottom: 0.5em;
}

.team a {
    text-decoration: underline;
}

.team-photo {
    border: rgba(255,255,255, 1) 5px solid;
    margin-right: 10px;
    margin-bottom: 30px;
    float:left;
}

.team-text {
    margin-right:15px;
    margin-bottom:20px;
    font-size: 0.8em;
}

.team-text h2 {
    font-size: 1rem;
}

.team__translator {
    float:left;
    width:50%;
}

/************ PRINT **************/

@media print {

    body {
        color: black;
        font-family: 'Droid Sans', sans-serif;
        font-size: 100%;
        line-height: 1.1em;
    }

    b {
        font-weight: bold;
    }

    em {
      font-style: italic;
    }

    a {
        color: #111;
        text-decoration: none;
    }

    ul {
        margin-top: 10px;
        margin-bottom: 10px;
        list-style: disc;
    }

    li {
        margin-left: 20px;
    }

    ul ul {
        margin-top: 0;
        margin-bottom: 0px;
    }

    .header,
    .navi,
    .pitch,
    .book,
    .team,
    .languageswitcher {
        display: none;
    }

    .print-header {
      display: block;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .finding-marbles {
      margin-left: 0;
    }

    .plan_id_form {
        display: inline;
    }

    .plan-header input {
        margin-left: 5px;
        margin-bottom: -20px;
        padding: 5px 10px 0 10px;
        font-size: 1em;

        -moz-border-radius: 10px;
        border-color: #111;
        border-radius: 10px;
        border-width: 2px;
    }

    .plan_id_submit,
    .plan-navi,
    .plan_title_container,
    .phase-stepper,
    .photo_link,
    .about,
    .team {
        display: none;
    }

    .uppercase {
        text-transform: uppercase;
    }

    .bg0 .activity-wrapper,
    .bg2 .activity-wrapper,
    .bg3 .activity-wrapper,
    .bg0 .activity-wrapper a,
    .bg2 .activity-wrapper a,
    .bg3 .activity-wrapper a {
        color: black;
    }

    .activity_block {
        border-top: solid 1px black;
    }

    .phase_title {
        margin-bottom: -15px;
        text-align: right;
        font-size: 0.8em;
        text-transform: uppercase;
    }

    .activity_block h2 {
        margin-bottom: 5px;
        font-family: 'Droid Serif', serif;
        font-size: 1.1em;
        font-weight: bold;
    }

    .summary {
      font-size: 0.9em;
    }

    .source {
        font-size: 0.8em;
    }

    .description {
      margin-top: 15px;
      width: 580px;
      font-size: 0.9em;
    }

    .print-header .content {
        font-family: 'Droid Serif', serif;
        border-top: 1px #111 solid;
    }

}