html, body, .foeMapping
{ height: 100%;
  margin: 0;
  padding: 0;
}

.foeMapping > #map
{   width: 100%;
    height: 100%;
}

.foeMapping > #map,
.foeMapping form
{   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10pt;
}


.foeMapping label input,
.foeMapping label span
{   padding: 3px;
    box-sizing: padding-box;
}

.foeMapping label input,
.foeMapping label textarea
{   border-radius: 3px;
    border: 1px solid #AAA;
}

.foeMapping label input[type=checkbox] {
	border: 0;
}

.foeMapping label
{   font-weight: 500;
    color: #444;
}

.foeMapping #legend
{   display: none;  /* Prevent rendering glitch */
}

.foeMapping #map #legend
{   display: block;
    padding: .2em .5em;
    margin: 10px 10px 0px 0px;
    border: 1px solid #444;
    border-radius: 4px;
    background-color: #505060; /* <=IE8 solid color fallback */
    background-color: rgba(80,80,96,0.8);
    /* <=IE8 solid color fallback; hex values are ARGB; 0.0 alpha is 00, 1.0 alpha is FF.  Gradient unused for now. */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CD505060,endColorstr=#CD505060);
    position: relative;
    overflow: hidden;
    /*height: auto;*/
}

.foeMapping #minimize_button
{   font-weight: bold;
    position: absolute;
    top: 5px;
    right: 5px;
    color: #EEE;
    font-size: 150%;
    cursor: hand;
    cursor: pointer;
}

.foeMapping #legend label input,
.foeMapping #legend label span
{   position:relative;
    bottom:11px;
}

.foeMapping #legend label span
{   font-weight: bold;
}

.foeMapping #legend label
{   display: block;
    padding-top: 3px;
    color: white;
    text-shadow: #222 0px 1px 3px;
    font-weight: 500;
}

.foeMapping #legend label img
{   padding: 0px 5px;
    /*max-width: 28px;*/
    max-height: 32px;
    min-height: 24px;
}

.foeMapping .foeInfoWindow h1
{   font-size: 100%;
    font-weight: bold;
}

.foeMapping .foeInfoWindow a
{   text-decoration: none;
}

.foeMapping .foeInfoWindow dd,
.foeMapping .foeInfoWindow dt
{   display: inline-block;
}

.foeMapping #postcode_locator
{   display: none;
}

.foeMapping #legend #postcode_locator
{   display: block;
    padding: 10px 5px;
    border-top: 1px solid #444;   /* Consider LESSifying with border color */
    box-shadow: inset 0px 1px #777; /* Cosmetic effect for seperator */
}

#geolocate_feature
{   display: none;
}

.foeMapping #legend #geolocate_feature
{   display: none;
    width: 100%;
    color: white;
    font-weight: bold;
}

.foeMapping #legend #geolocate_button
{   
}

/* Fiddly specificity here */
.foeMapping #legend #postcode_locator *
{   display: inline-block;
    padding: 1px 5px;
}

.foeMapping #legend #postcode_locator span,
.foeMapping #legend #postcode_locator input
{   position: static;
}

.foeMapping #legend #postcode_locator input[type=submit],
.foeMapping #legend #postcode_locator input[type=button] {
	padding: 0;
}

.foeMapping #legend #postcode_locator input[type=submit] {
	padding: 0 5px;
}

.foeMapping #legend #postcode_locator input[type=text] {
	padding: 2px 5px;
}

.foeMapping #postcode_input
{   width: 6em;
    background-color: #FAFAFF; /* <=IE8 solid color fallback */
    background-color: rgba(250,250,255,0.8);
    border: 1px solid #444;
}

[class^="icon-"],[class*=" icon-"]
{   display:inline-block;width:14px;height:14px;margin-top:1px;*margin-right:.3em;line-height:14px;vertical-align:text-top;background-image:url("/static/bootstrap/img/glyphicons-halflings-white.png");background-position:14px 14px;background-repeat:no-repeat;
}

.icon-resize-full{background-position:-408px -97px}

.icon-resize-small{background-position:-432px -97px}

.placeholder
{   color: #999;
}


/** Share URL *************************************************************************************************************************************************/
#share_button
{   position: absolute;
    bottom: 5px;
    left: 45%;
    opacity: 0;
}

#share_button:hover
{   opacity: 1;
}

#share_url
{   opacity: 0;
    position: absolute;
    left: 10%;
    bottom: -100px;
    width: 80%;
    border-radius: 4px;
    border: 1px solid #999;
    font-size: 16px;
    line-height: 20px;
    padding: 5px;
    color: #333;
    box-shadow: 0 5px 15px  rgba(128,128,128,0.5);
    -webkit-transition: opacity 0.5s ease, bottom 0s linear 0.5s;
    transition:opacity 0.5s, bottom 0s linear 0.5s;
}

#share_url:focus
{   opacity: 1;
    bottom: 30px;
    -webkit-transition:opacity 0.5s;
    transition:opacity 0.5s;
}



/** User Submissions ******************************************************************************************************************************************/
.foeMapping #add_your_pin_container
{   padding: 0px 5px;
    padding-bottom: 10px;
    border-top: 1px solid #444;
    box-shadow: inset 0px 1px #777;
    display: none;
}

.foeMapping #legend #add_your_pin_container
{   display: block;
}

.foeMapping .divButton,
.foeMapping .divButton *
{   cursor: hand;
    cursor: pointer;
}

.foeMapping .bigOrange
{   width: 100%;
    height: 40px;
    color: #FFF;
    font-weight: 600;
    border-radius: 3px;
    text-shadow: #6a4500 0px 1px 1px;
    background: #ff7f00;  /* Sampled from mockup */
    background: rgba(255,127,0,0.9);
    background-image: linear-gradient(bottom, rgb(239,127,0) 19%, rgb(255,132,0) 60%);
    background-image: -o-linear-gradient(bottom, rgb(239,127,0) 19%, rgb(255,132,0) 60%);
    background-image: -moz-linear-gradient(bottom, rgb(239,127,0) 19%, rgb(255,132,0) 60%);
    background-image: -webkit-linear-gradient(bottom, rgb(239,127,0) 19%, rgb(255,132,0) 60%);
    background-image: -ms-linear-gradient(bottom, rgb(239,127,0) 19%, rgb(255,132,0) 60%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.19, rgb(239,127,0)), color-stop(0.6, rgb(255,132,0)) );
}

.foeMapping .bigOrange > p
{   padding-top: 12px;
}

.foeMapping .bigOrange > img
{   float: left;
    padding: 8px 10px 0 15px;
    max-width: 28px;
    /* height: 32px; */
}

.foeMapping #add_your_pin_form
{
    display: none;
    position: absolute;
    top: 10px;
    left: 50%;
    margin-left: -42.421%; /* -244 / 577 */
    max-width: 533px;
    width: 72%; /* ?? / 577 */
    padding: 20px 35px;
    padding-top: 5px;
    /* Refactor out */
    border-radius: 9px;
    border: 1px solid #444;
    background: #505060;
    background: rgba(80,80,96,0.8);
}

.foeMapping #add_your_pin_form #close_button
{   position: absolute;
    top: 18px;
    right: 18px;
    height: 25px;
    width: 25px;
    background-color: #dbdcdd;
    border-radius: 20px;
    font-weight: bold;
}

.foeMapping #add_your_pin_form #close_button p
{   color: rgba(80, 80, 96, 0.8);
    font-size: 11px;
    text-align: center;
    margin: 0;
    line-height: 25px;
    font-weight: bold;
}

.foeMapping #add_your_pin_form p,
.foeMapping #add_your_pin_form label
{   font-weight: 500;
    color: white;
}

.foeMapping #add_your_pin_form p,
.foeMapping #add_your_pin_form label,
.foeMapping #add_your_pin_form input,
.foeMapping #add_your_pin_form textarea
{   display: block;
    width: 100%;
    box-sizing: border-box;
}

.foeMapping #add_your_pin_form input,
.foeMapping #add_your_pin_form textarea
{   padding: 6px;
    margin: 7px auto;
    /* border-radius: 3px; */
    border: 0;
}

.foeMapping #add_your_pin_form label#dp
{

}

.foeMapping #add_your_pin_form label#dp #id_data_protection
{   width: auto;
    display: inline;
    margin: 0;
}

.foeMapping #add_your_pin_form button.bigOrange
{   position: relative;
    display: block;
    margin: 10px auto;
    border-width: 0px;
    font-size: 24px;
    text-shadow: none;
    width: auto;
    padding: 7px 28px;
    height: auto;
    border-radius: 9px;
    clear: both;
}

.foeMapping #form_confirmation
{   visibility: hidden;
    position: absolute;
    top: 93px;
    text-align: center;
    width: 300px;
    left: 50%;
    margin-left: -150px;
}

.foeMapping form#user_submission > table label > span
{   display: block;
}

.foeMapping form#user_submission > table td
{   padding-top: 15px;
    vertical-align: top;
}

.foeMapping #map #legend
{   padding-top: 10px;
}

#form_body h2,
#form_confirmation h2
{   color: #ffcd42;
    margin-bottom: 5px;
}

.textfields
{   width: 60.50283105022831050228310502283%; /* 265px / 438px */
    float: left;
}

.formimage
{   text-align: center;
    width: 39.497716894977168949771689497717%; /* 173 / 438 */
    float: right;
    margin-top: 16px;
}

#form_body input,
#form_body textarea
{   -moz-box-sizing: border-box;
    box-sizing: border-box
}

.foeMapping #add_your_pin_form #id_photo
{   display: inline-block;
    width: auto;
    vertical-align: 50%;
}

.foeMapping #add_your_pin_form .upload-photo-label
{   display: inline-block;
    width: 86px;
    margin-right: 10px;
}

.smallprint
{   font-size: 80%;
    text-align: center;
    margin: 5px 0;
    color: white;
}

#add_your_pin_button
{   width: 170px;
    padding-right: 6px;
}

.geolocateicon,
#geolocate_button
{   vertical-align: middle;
}

#form_confirmation p
{   font-weight: bold;
}

#form_confirmation .closeForm
{   background: #888888;
    font-size: 24px;
    width: auto;
    padding: 7px 28px;
}

#form_confirmation .closeForm > p
{   margin: 0;
    padding: 0;
}

#form_confirmation > img
{   margin: 10px;
}

#add_your_pin_form .error
{   background-color: #FFAAAA;
}

@media all and (max-width: 530px)
{   .foeMapping #legend #add_your_pin_container
    {   display: none;
    }
}





/** Responsive ************************************************************************************************************************************************/

@media all and (max-width: 480px)
{   .foeMapping > #map,
    .foeMapping form
    {   font-size: 80%
    }


    .foeMapping label input,
    .foeMapping label span
    {   padding: 2px;
    }

    .foeMapping #map #legend
    {   padding: 3px;
        margin: 3px;
        margin-left: 30px;
        border-radius: 2px;
    }

    .foeMapping #legend label input,
    .foeMapping #legend label span
    {   position:relative;
        bottom:5px;
    }

    .foeMapping #legend label
    {   display: inline-block;
        padding: 2px;
        width: 45%;
        font-weight: normal;
    }

    .foeMapping #legend label img
    {   padding: 0px;
        height: 18px;
        width: 16px;
    }

    .foeMapping #legend #postcode_locator
    {   padding: 5px;
    }

    .foeMapping #postcode_input
    {   width: auto;
    }
}