/* =============== Layout =============== */
			
/*html 								{ height: 100% }
body 								{ height: 100%; margin: 0; padding: 0; font-family: sans-serif; overflow-x: hidden; overflow-y: hidden; }
*/
#LabelRuler                         { position:absolute; visibility:hidden; height:auto; width:auto;}

/*input[type="text"]                  { border: 1px solid #999; padding: 3px; }
	*/		
#locationSearch                     { background-color: #fff; padding: 5px; border: 1px solid #999; margin: 0 0 10px 0; text-align: center;}
#locationSearch input[type="text"] 	{ width: 95%; }
#controls							{ float: left; width: 380px; }
#widthSelection                     { text-align: right; margin: 10px 9px 0 0; font-size: 10pt; }
.pac-container                      {z-index:9999}
#mapCanvas {
    max-width: 640px;
}
#mapCanvas:after {
    content: '';
    display: block;
    margin-top: 100%;
}

#buttons							{ position: fixed; bottom: 15px; left: 0; width: 380px; text-align: center; }
#buttons img                        { vertical-align: middle; margin: 0 3px 0 10px; }
#buttons a                          { font-size: 10pt !important; }

#footer .content                    { text-align: right; }

div.clear							{ clear: both; }
div.content                         { padding: 10px; }

/*fieldset                            { margin: 0 0 10px 0; background-color: #EEEEFF; }
    */
#mapCompass 
{
    position:absolute;
    top:2px;
    margin-left: 575px;
    width: 66px;
    height:66px;
    background: url(/img/surveycompass.png);
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events:none;
    z-index: 10;
}

/* 
    Hides the "x" from the top right of jQuery dialogs.
    These were causing some problems with the shape edit dialog,
    where closing the dialog with the "x" would not delete
    the shape from the map.
    Clicking cancel or pressing Esc work fine.
*/
/*.ui-dialog-titlebar-close                   { visibility: hidden; }
.show-close .ui-dialog-titlebar-close       { visibility: visible; }*/

/* =============== Shape Colour Selection =============== */

#colours                            { }
#colours div                        { display: inline-block; width: 30px; height: 30px; cursor: pointer; cursor: hand; border: 2px solid #888; -moz-border-radius: 5px; border-radius: 5px; }
#colours div.selected               { border: 2px solid black; }

/* =============== Help Dialog =============== */

#helpDialog                         { font-size: 10pt; }
			
/* =============== Shape Dialog =============== */

#shapeDialog                        { font-size: 10pt; }
#shapeDialog div.selected label     { color: Gray; text-decoration: line-through; }
#shapeDialog .shapeSquare           { float: left; width: 16px; height: 16px; border: 1px solid black; margin: 3px 0 0 0; vertical-align: middle; -moz-border-radius: 5px; border-radius: 5px; }
#shapeDialogDescription             { float: right; width: 385px; clear: inherit;}

/* =============== Save Dialog =============== */

#roofAreaWarning                    { color: Red; }
#roofareacheckboxes div             { text-align: left; margin: 0 0 5px 0px !important; }
#saveDialog                         { font-size: 10pt; text-align: center; }
#saveDialog input[type="text"]      { width: 100%; }

/* =============== Shape Labels =============== */
			
#noShapes                           { color: #888; font-style: italic; font-size: 10pt; text-align: center; }
#shapes                             { margin: 10px; }
.shapeItem                          { margin: 0; padding: 5px; border: 1px solid #EEEEFF; cursor: pointer; cursor: hand; }
.shapeItem:hover                    { border: 1px solid black; }
.shapeItem .shapeSquare             { float: left; width: 16px; height: 16px; border: 1px solid black; margin: 0 10px 0 0; vertical-align: middle; -moz-border-radius: 5px; border-radius: 5px; }
.shapeItem .shapeDelete             { float: left; width: 16px; height: 16px; cursor: pointer; cursor: hand; margin: 0 10px 0 0; background-image: url(/img/icons/trash3.png); vertical-align: middle; -moz-opacity: 0.5; opacity: 0.5; }
.shapeItem .shapeDelete:hover       { -moz-opacity: 1; opacity: 1; }
.shapeItem .shapeLabel              { float: left; height: auto; width:calc(100% - 110px); display: inline-block; vertical-align: middle; color: #444444; }
.shapeItem .shapeArea               { float: right; display: inline-block; margin: 0 10px 0 0; }
			
/* =============== Map Controls & Overlays =============== */

div.mapLabel                        { height:auto !important;  position: absolute; border: 1px solid black; background-color: #DDD; height: 30px; width: auto; min-width: 85px !important; padding-bottom: 5px; padding-right: 5px; -moz-border-radius: 5px; border-radius: 5px; }
/*div.mapLabel.withArea               { height: 50px !important; }*/
div.mapLabel div.colour             { width: 16px; height: 16px; margin: 6px 5px 0px 5px; border: 1px solid black; float: left; -moz-border-radius: 5px; border-radius: 5px; display:inline-block; }
div.mapLabel div.text               { white-space: pre-wrap; font-family: Arial; font-size: 14px; margin-top: 6px; margin-left: 28px;}
div.mapLabel div.area               { font-size: 14px; font-family: Arial; margin-left: 28px; }
            
/* =============== Misc Content Formatting =============== */
			
span.super                          { vertical-align: super;font-size: 50%; }