body
{
    color: black !important;
}

.background-grad
{
    height: 2400px; /* Force page to this height */
}

/* Offset up into the fixed size reading-section above or it sits alone on a page */
.reading-submit-wrap
{
    margin-top: -190px; 
    width: 100%;
    position: relative;
    z-index: 10;
}

/* Desktop only, small screen heights */
@media (max-height: 750px)
{
    .reading-submit-wrap
    {
        margin-top: -90px;
    }
}

@media (max-height: 600px)
{
    .reading-submit-wrap
    {
        margin-top: -40px;
    }
}


.reading-submit-guest-btn
{
    width: 100%;
    max-width: 800px;
}


.reading-container
{
    margin-top: -166px;
    position: relative;
    color:#000;
    min-height:710px
}

.reading-page-mobile
{
    padding-top: 166px;
    /*padding-top: 200px;*/
}

@media (max-width: 350px) 
{
    .reading-page-mobile
    {
        padding-top: 75px;
    }

    .reading-submit-guest-btn
    {
        width: 100%;
    }
}

@media (orientation: portrait) and (max-width:319px),
       (orientation: landscape) and (max-height: 319px)
{
    /* Don't need this on mobile, no fixed sized paging */
    .reading-submit-wrap
    {
        margin-top: 30px;
    }

    .reading-submit-guest-btn
    {
        width: 100%;
    }
}

@media (orientation: portrait) and (max-width:415px),
       (orientation: landscape) and (max-height: 415px)
{
    /* Don't need this on mobile, no fixed sized paging */
    .reading-submit-wrap
    {
        margin-top: 30px;
    }

    .reading-submit-guest-btn
    {
        width: 100%;
    }
}

.reading-page
{
    width: 1700px;
    margin-right: 50px;
    min-height: 710px;
    padding-top: 10px;
    /*overflow: visible;*/
    overflow:auto;
}

.reading-page-content
{
    width: 1240px;
    max-width: 1240px;
    /*padding-top: 160px;
    text-align: justify;*/
}

.reading-page-content, .readlet-page-content
{
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

reading-page-content:first-child, readlet-page-content:first-child
{
    margin-top: 166px;
}

.readlet-section
{
    width: 1700px;
}

.readlet-page
{
    width: 100%;
    min-height: 710px;
    overflow: visible;
    /*TEST*/
    position: relative;
}

.readlet-page-content
{
    width: 1240px;
    max-width: 1240px;
}

@media( max-width: 350px )
{
    .reading-container
    {
        margin-top: 0px;
    }

    .reading-out-page-container
    {
        margin-top: 0px;
    }

    .reading-page, .reading-page-content
    {
        width: 100%;
    }

    .reading-page-content, .readlet-page-content
    {
        top: initial;
        transform: initial;
        -webkit-transform: initial;
        -ms-transform: initial;
    }
}

.readlet-intro
{
    font-size: 13px;
    font-style: italic;
    margin-left: 50px;
}

.reading-final-credits
{
    font-size: larger;  
    color: #ffff00
}

 .reading-review-box
{
    font-size:smaller;
    margin-bottom: 20px;
    border: 2px solid rgb( 60, 169, 179 );
    background-color: rgba( 255, 255, 255, 0.4 );
}

 .reading-review-box .title-bar
 {
     height: 44px;
     padding-top: 10px;
     padding-left: 10px;
 }

  .reading-review-box .footer
  {
      height: 34px;
      padding-left: 10px;
  }

 .reading-review-box .title-bar, .reading-review-box .footer
 {
     background-color: rgba( 255, 255, 255, 0.7 );
     width: 100%;
 }
 
 .reading-review-box .edit-btn
 {
     float:right;
     width:100%;
     background-color: #42aeb4;
 }

 .reading-review-box .credit-col
 {
     /*border-left: 1px solid white;*/
     text-align: right;
     min-width: 70px;
     max-width: 70px;
     width: 70px;
     padding-right: 10px;
 }

 .reading-review-box table td
 {
     border-bottom: 1px dotted white;
 }

.box-bkg
{
    background: #f0f9ff; /* Old browsers */
    background: -moz-linear-gradient(top,  #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f9ff), color-stop(47%,#cbebff), color-stop(100%,#a1dbff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */
    opacity: 0.2;
}

.reading-review-textbox
{
    float:left;
}

.btq-wrap
{
    position: relative;
    overflow: visible;
    min-height: 400px;
}

/* This is for desktop etc where there is an image to the right 
   below we have seperate for mobile and then again split for phone/tablet.
*/
.btq-panel
{
    position:relative;
    top:50%;
    left:27%;
    max-width: 400px;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
}

.btq-panel-mobile
{
    position:relative;
    padding-top: 80px;
    padding-bottom: 60px;
    left:50%;
    max-width: 400px;
    transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    /*transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);*/
}

@media ( orientation: 'portrait' ) and ( max-width: 450px ),
       ( orientation: 'landscape') and ( max-height: 450px )
{
    /* on phones just center horizontally or we get overflow issues */
    .btq-panel-mobile
    {
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }
}

.btq-select
{
    width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.btq-image
{
    position:relative;
    margin-top: -70px;
    left:600px;
}

@media ( orientation: portrait ) and ( max-width:390px ),
       ( orientation: landscape ) and ( max-height: 390px )
{
    .btq-panel 
    {
        left: 50%;
        width: 90%;
        top: 25%;
        transform: translateX(-50%);
    }
}

.astro-input-col
{
    float:left;
    padding-right: 10px;
}

.astro-input-col input[type=text]
{
    text-align: center;
}

.astro-input-row > td
{
    padding-left: 10px;
    text-align: left;
}

.astro-input-row > td > input[type=text]
{
    width: 60px;
    text-align: center;
}

/* Overrides */

input[type=text], select
{
    background-color: #edf6ed;
    color: black;
    padding: 3px 8px;
    border: none;
    border-radius: 4px;
    margin-bottom: 10px;
    -webkit-box-shadow: inset -3px 3px 8px 0px rgba(50, 50, 50, 0.35);
    -moz-box-shadow:    inset -3px 3px 8px 0px rgba(50, 50, 50, 0.35);
         box-shadow:    inset -3px 3px 8px 0px rgba(50, 50, 50, 0.35);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
            transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.page-section
{
    margin-top: 20px;
    margin-bottom: 20px;
}

.reading-wrap
{
    max-width: 1240px;
}

.search-console
{
    max-width: 400px;
    float:left;
}

.searchbox
{
    margin-left: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
    max-width:300px;
}

.searchbox, .searchbox > H4
{
    color: #24777d;
    font-weight: bold;
    font-style:italic;
}

.searchbox-address
{

}

.searchbox-button
{
    width:85px;
}

.poi-btn
{
    width: 262px;
}

/* Here we float it to the right of input console */
.location-select-map 
{
    margin-top: 20px;
    margin-bottom: 30px;
    margin-left: 50px;
    max-width: 45%;
    border: 2px dotted #fff;
    float: left;
    padding: 4px 4px;
}

.location-select-map-inner 
{
    width: 100%;
    height: 240px;
}

/* Smaller screens it will reflow below, so fit to width */

@media ( orientation: landscape ) and ( max-height: 649px )
{
    .location-select-map
    {
        margin-left: 40px;
        max-width: 44%;
    }
}

@media ( orientation: portrait ) and ( max-width: 649px )
{
    .search-console
    {
        width: 100%;
    }

    .location-select-map
    {
        margin-left: initial;
        margin-top: 20px;
        max-width: initial;
    }
}

@media( max-width:350px ) 
{
    .location-select-map
    {
        margin-left: auto;
        margin-top: 20px;
        max-width: 100%;
    }
}

#map-canvas, .satmap
{
    width: 620px;
    height: 400px;
    border: 2px solid white;
}

@media (orientation: portrait) and (max-width:419px), 
       (orientation: landscape) and (max-height: 419px) 
{
    .satmap 
    {
        max-width: 100%;
        height: 240px;
    }
}

.readlet-select
{
    background-color: rgba(255,255,255,0.5);
    margin-bottom: 5px;
    border: 1px solid rgba( 60, 169, 179, 0.3 );
}

.readlet-select.selected
{
    border: 1px solid rgb( 60, 169, 179 );
}

.readlet-select .title
{
    background-color: rgba( 255, 255, 255, 0.7 );
    color: black;
    font-weight: bold;
    font-size: 16px !important;
    width: 100%;
    min-height: 32px;
    padding: 2px 10px;
}

.readlet-select > .title.selected
{
    background-color: white;
    border: 1px rgb( 60, 169, 179 ) dotted;
}

.readlet-select > .intro
{
    color: black;
    font-style: italic;
    padding: 10px 20px;
}

.readlet-select > .footer
{
    width: 100%;
    height: 30px;
    padding-left: 10px;
    background-color: rgba( 255, 255, 255, 0.6 );
}

.readlet-select > .footer > .btn
{
    border-radius: 0;
    min-width: 84px;
    color: #42aeb4;
    background-color: rgba( 255, 255, 255, 0.6 );
}

.readlet-select > .footer > .credits,
.readlet-select > .title > .credits
{
    padding-top: 2px;
    font-size: small;
    font-weight: bold;
    color: #337081;
}

.readlet-select > .title > .credits
{
    float: right;
}

.readlet-select > .footer > .credits
{
    float: left;
}

.readlet-select > .footer > .btn.selected
{
    color: white;
    background-color: #42aeb4;
}

.reading-copy
{
    color: black;
    font-size: 22px;
    font-stretch:expanded;
    padding-top: 30px;
    margin-left: 200px;
    margin-right: 266px;
}

.reading-section
{
    /*margin-top: 100px;
    border-bottom: #000 1px solid;*/
    padding-top: 10px;
    overflow: visible;
}

.reading-section:first-child
{
    margin-top: 0px;
}

.reading-copy .title
{
    color: white;
    font-size: 40px;
    padding-top: 10px;
    padding-bottom: 30px;
}


.reading-copy .quote
{
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    max-width: 700px;
    margin-bottom: 40px;
}

.reading-copy .quote .text
{
    font-family: 'Times New Roman';
    text-shadow: #777 3px 3px 6px;
}

.reading-copy .quote .author
{
    clear:both;
    font-size: 14px;
    text-shadow: #777 3px 3px 6px;
}

.reading-copy .quote > img
{
    padding-left: 10px;
    padding-right:10px;
}

#reading-image-ref
{
    left: 50%;
    margin-left: -1000px;
    position: absolute;
    z-index: -2000;
    margin-top: -180px;
}

.reading-images
{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.over
{
    z-index: 2000;
}

.under
{
    z-index: -2000;
}

.arrow
{
    margin-right: 20px;
}

/* Show poems as a list item per line */
ul.poem
{
    list-style: none;
    text-align: left;
}

#_countryInfoContent td
{
    vertical-align:top;
    padding-right:8px;
    min-width:130px;
}

#_countryInfoContent .smaller
{
    font-size: 12px;
}

/* location select */
.location-select-modal
{
    background-color:rgba( 50,50,50, 0.9 );
    position: absolute;
    margin:auto 0;
    padding:8px 8px 8px 8px;
    border-radius:8px;
    border:2px solid #555555;
    width: 500px;
    margin-top: 10px;
    color:#ffffff;
    z-index:10000;
}

.location-select-modal-header
{
    padding-left: 12px;
    height:34px;
}

.location-select-modal-content
{
    background-color:rgba( 50,50,50, 0.5 );
    padding:8px 8px 8px 8px;
    border-radius:8px;
}

.location-select-modal-content input,
.location-select-modal-content textarea
{
    color: #000000;
}

.location-select-modal-footer
{
    padding: 8px 0px 8px 0px;
}

.row
{
    margin-left: 0px;
    margin-right: 0px;
}

.reading-terms
{
    font-size: 14px;
    color: #555555;
    font-style: italic;
    text-align: center;
}

.reading-terms a
{
    font-weight: bold;
    color: #555555;
}