/***********************************************************************************/
/***********************************************************************************/
/* (c) 2013 Ryan Horne, Ancient World Mapping Center
// Title: leaflet_layers.js
// Purpose: Contains css styles used with a-la-carte 3.0 framework
// Author(s): Ryan Horne
// Version: 1.0 30 August 2013
// Released under GPLv2 */
/***********************************************************************************/
/***********************************************************************************/


body 
{
	margin:0; 
	padding:0; 
}

#map 
{ 
	position:absolute; 
	top:0; 
	bottom:0; 
	width:100%; 
}

#searchFields 
{
	float: left;
	width: 50%;
}

#searchResults 
{
	float: left;
	width: 50%;
}

.hidden 
{ 
	display: none; 
}

.info 
{
	padding: 6px 8px;
	font: 14px/16px Arial, Helvetica, sans-serif;
	background: white;
	background: rgba(255,255,255,0.8);
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	border-radius: 5px;
}
	
	.info h4 
	{
		margin: 0 0 5px;
		color: #777;
	}

.legend 
{
	text-align: left;
	line-height: 18px;
	color: #555;
}
	
	.legend i 
	{
		width: 18px;
		height: 18px;
		float: left;
		margin-right: 8px;
		opacity: 0.7;
	}
		
.help_info
{
	padding: 6px 8px;
	font: 14px/16px Arial, Helvetica, sans-serif;
	background: white;
	background: rgba(255,255,255,0.8);
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	border-radius: 5px;
	width:700px;
	margin-left: auto ;
	margin-right: auto ;
}
			
.leaflet-control-map-FisrtState
{
    background-image: url(globe.png);
    background-size:20px 20px;
    width: 20px;
    height: 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    padding: 3px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    cursor: auto;
    text-align: center;
    background-color: #FFFFFF;
}

    .leaflet-control-map-FisrtState:hover
	{
    	background-color: #F4F4F4;
	}



.leaflet-control-map-menu
{
    background-image: url(tools.png);
    background-size:20px 20px;
    width: 20px;
    height: 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    padding: 3px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    cursor: auto;
    text-align: center;
    background-color: #FFFFFF;
}

    .leaflet-control-map-menu:hover
	{
    	background-color: #F4F4F4;
        width: 20px;
    	height: 20px;
    }


.leaflet-control-map-search
{
    background-image: url(search.png);
    background-size:20px 20px;
    width: 20px;
    height: 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    padding: 3px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    cursor: auto;
    text-align: center;
    background-color: #FFFFFF;
}

    .leaflet-control-map-search:hover
{
    background-color: #F4F4F4;
        width: 20px;
    height: 20px;

}		


.leaflet-control-map-info
{
    background-image: url(question.png);
    background-size:20px 20px;
    width: 20px;
    height: 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    padding: 3px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    cursor: auto;
    text-align: center;
    background-color: #FFFFFF;
}

    .leaflet-control-map-info:hover
{
    background-color: #F4F4F4;
        width: 20px;
    height: 20px;

}

.nonMapOverlay
{
	position: absolute;
    top:15%;
    bottom: 15%;
    left: 20%;
    right: 20%;
    font: 14px/16px Arial, Helvetica, sans-serif;
	background: white;
	background: rgba(255,255,255,0.8);
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	border-radius: 5px;
	margin: auto;
    overflow:scroll;
    padding: 20px;
    display:none;
}

.nonMapOverlaySolid
{
	position: absolute;
    top:15%;
    bottom: 15%;
    left: 20%;
    right: 20%;
    font: 14px/16px Arial, Helvetica, sans-serif;
	background: white;
	background: rgba(255,255,255,.97);
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	border-radius: 5px;
	margin: auto;
    overflow:scroll;
    padding: 20px;
    display:none;
}

.customOverlaySecond 
{
	position: absolute;
    top:15%;
    bottom: 15%;
    left: 20%;
    right: 20%;
    font: 14px/16px Arial, Helvetica, sans-serif;
	background: white;
	background: rgba(255,255,255,0.8);
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	border-radius: 5px;
	margin: auto;
    padding: 20px;
  display:none;
}

.customOverlayInterior {
  position: absolute;
    top:2%;
    bottom: 2%;
    left: 1%;
    right: 5%;
    overflow:scroll;
    padding: 5px;
}

/***********************************************************************************/
/*Styling for popups. The buttons need to have the base class plus whatever icon they will use*/
/***********************************************************************************/

.popupCloseCarte {
	position: absolute;
	top: 0;
	right: 0;
	padding: 4px 4px 0 0;
	text-align: center;
	width: 18px;
	height: 14px;
	font: 16px/14px Tahoma, Verdana, sans-serif;
	color: #c3c3c3;
	text-decoration: none;
	font-weight: bold;
	background: transparent;
	cursor: pointer; cursor: hand;
	}
.popupCloseCarte:hover {
	color: #999;
	cursor: pointer; cursor: hand;
	}	
	
	
	.popupBaseButton
{
    background-size:20px 20px;
    width: 20px;
    height: 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    padding: 3px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    cursor: auto;
    text-align: left;
    text-indent:30%;
    background-color: #FFFFFF;
}

	.popupHomeButton
{
    background-image: url(Home.png);
}

	.popupPlusButton
{
    background-image: url(Plus.png);
}
 

    .popupBaseButton:hover
{
    background-color: #F4F4F4;
}

	
	.popupZoomButton
{
    background-image: url(globe.png);
}


	.popupEditButton
{
    background-image: url(edit.png);
}


	.popupInformationButton
{
    background-image: url(information.png);
}

	.popupDeleteButton
{
    background-image: url(Trash.png);
}

	.popupAwmcButton
{
    background-image: url(http://awmc.unc.edu/awmc/applications/leaflet_test/awmc_small.png);
}

	.popupPleiadesButton
{
    background-image: url(http://awmc.unc.edu/awmc/applications/leaflet_test/pleiades_icon.png);
}

	.popupPelagiosButton
{
    background-image: url(http://awmc.unc.edu/awmc/applications/leaflet_test/pelagios.png);
}


#EditColumn1
{
	float: left;
	width: 48%;
	margin-left: 3%;
}
	
#EditColumn2
{
	float: left;
	width: 20%;
	margin-left: 3%; 
	}


/***********************************************************************************/
/* for the info box */



.info_header {
		#border:1px solid #bbb;
		height:80px;
		padding:10px;
	}
	.info_content {
		margin-top:10px;
		padding-bottom:10px;
	}
	.info_content div {
		padding:10px;
		#border:1px solid #bbb;
		float:left;
	}
	.info_content-left {
		width:180px;
	}
	.info_content-main {
		margin-left:10px;
		width:500px;
	}
	.info_content-right {
		margin-left:10px;
		width:134px;
	}
	.info_footer {
		float:left;
		margin-top:10px;
		margin-bottom:10px;
		padding:10px;
		border:1px solid #bbb;
		width:878px;
	}
	.info_bottom {
		clear:both;
		text-align:right;
	}

/********/

.ui-slider{
	width: 20em;

}


.ui-slider .ui-slider-handle {

    cursor: default;
    height: 1.2em;
    position: absolute;
    width: 1.2em;
    z-index: 2;
}
/*********/

/***********************************************************************************/
 
 /*tab experiment */
			.tabs li {

				list-style:none;

				display:inline;

			}



			.tabs a {

				padding:5px 10px;

				display:inline-block;

				background:#666;

				color:#fff;

				text-decoration:none;

			}



			.tabs a.active {

				background:#fff;

				color:#000;

			}



/***********************************************************************************/
/*Styling for labels. Very few things can serve double duty here*/
/***********************************************************************************/ 

.sweet-deal-label {
background-color:transparent;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
			color: black;
			font-weight: bold;
			text-shadow:  #fff 0em 0em 0.2em,#fff 0em 0em 0.2em, #fff 0.1em 0.1em 0.2em ;
		}