/* 
Title: Photo Tagging
Author: Neill Horsman
URL: http://www.neillh.com.au
Credits: jQuery, imgAreaSelect 
*/

.clear { clear:both; }
.hide { display:none; }

/* Tagging specfic styles here */
.on-off {
	height:25px;
}
.start-tagging, .finish-tagging {
	background:#111111;
	width:160px;
	padding:5px 0;
	border:1px solid #333;
	color:#fff;
	cursor:pointer;
	font-weight:bold;
	text-align:center;
}

/* Image Map CSS */
.map li {
	margin:0;
	padding:0;
	list-style:none;
}
.admin, .pop-front {
	position:absolute;
	display:block;
	cursor:pointer;
	color:#000;

}


.admin span {
	color:#333;
	font-family: Arial, Helvetica, sans-serif;
	display:none;
	text-align: center;
	width: 100%;
	height: 100%;
}

.pop-front span {
    color: #7ac3e0;
    font-family: Arial, Helvetica, sans-serif;
    display: none;
    text-align: center;
    width: 150px;
    z-index: 1;
    background: #fff;
    font-size: 12px;
    position: absolute;
    border: 1px solid #ccc;
    border-radius: 3px;

}

.admin span img, .pop-front span img{
    width: 70%;
    margin-top: 10px;

}

.pop-front img {
	width: 40%;
}
.admin span p{
	height: 100%;
	width: 100%;

}


.admin:hover span, .selected {
	z-index: 1;
	background:#fff;
	/*Add a width in here to control your comment hover*/
	font-size: 12px;
	display:block;
	position:absolute;
	filter:alpha(opacity=90);
	opacity:0.9;
	height: 100%;
	width: 100%;
}

.pop-front:hover span, .selected
{
	display:block;
}

/*
use this for a sqaure border highlight
.map li a.hover, .map li a:hover { border:3px solid #fff; }
*/

#titles {
	margin-bottom:50px;
}
#titles li {
	margin:0 0 5px 15px;
	list-style: disc;
}

/* Form CSS */
#title_container { background:#fff; position:absolute; z-index:999; border:1px solid #000;; width:50%; padding:10px; }
label { font-size:14px; font-weight:bold; color:#333; }
input { width:100px; }
.send { position:absolute; left:5px; top:755px; }

/* Error box */
#error-box { width:200px; height:60px; padding:10px; margin-left:300px; background:#ffadad; border:1px #000 solid; position:absolute; top:303px; z-index:1; }
.confirm { background:#0FC !important; color:#333 !important; }
.err { list-style-image:url('../img/Cancel_16x16.png'); margin-left:25px; }
.confirm .err { list-style-image:url('../img/check.gif'); }
.err li { margin-bottom:8px; }
.closebtn { position:absolute; bottom:10px; right:10px; background:url('../img/Cancel_16x16.png') no-repeat 0px 0; padding-left:15px; }
.confirm .closebtn { background:url('../img/check.gif') no-repeat 0px 0; }

#imageid
{
	background-color: #fff;
	border: 1px solid #ccc ;
	max-width: 1170px;
	padding: 4px;
	line-height: 1.42857;
	border-radius: 3px;
	/* -webkit-transition: all 0.2s ease-in-out; */
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	display: inline-block;

	height: auto;
}

@media (max-width: 560px) {
	#imageid{
		max-width: 450px;
		float: left;
		display: block;
	}
}

.custom-icon {
font-size: 42px;

    -webkit-border-radius: 1100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    
       color: #d7dd3b;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    width: 36px;
    height: 36px;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    position: absolute;
    top: 45%;
    left: 45%;
}

.single {
	position:absolute;
	display:block;
	cursor:pointer;
	color:#000;

}

.pop
{
	min-width: 100px;
	max-width: 200px;
	min-height: 50px;
	max-height: 150px;
	display:none;
}

.pop span

{	color:#333;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}
.pop img
{
	width: 100%;

}
.pop p
{
	height: 100%;
	width: 100%;
}

.pop:hover span, .selected {
	border : 1px solid #000000;
	z-index: 1;
	background:#fff;
	/*Add a width in here to control your comment hover*/
	font-size: 12px;
	display:block;
	position:absolute;
	filter:alpha(opacity=90);
	opacity:0.9;
}


.titrelook {
	font-family: 'Cookie', cursive !important;
    font-size: 40pt !important;
    text-align: center;
    font-weight: 300 !important;
    border-bottom: none !important;
}