/*
static_media/css/overlay.css
===============================================================================================================
OVERLAY
===============================================================================================================
*/
.overlay {
	background: #000;
	border: 1px solid #262626;
	border-radius: 100px;
	display: none;
	height: 200px;
	left: 50%;
	margin: -100px 0 0 -100px;
	-moz-border-radius: 100px;
	position: absolute;
	top: 50%;
	-webkit-border-radius: 100px;
	width: 200px;
	z-index: 999999;
}

.close_bt {
	cursor: pointer;
	position: absolute;
	right: 20px;
	top: 15px;
	z-index: 9999999990;
	text-indent: -9999px;
	overflow: hidden;
	background-color: #505253;
	background-image: url('/media/img/bt-x-close.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 23px;
	height: 22px;
	border-radius: 2x;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}
.close_bt:hover {
	background-color: #222;
}



#overlay_close , .overlay .close {
	cursor: pointer;
	position: absolute;
	right: 20px;
	top: 15px;
	z-index: 9999999990;
	text-indent: -9999px;
	overflow: hidden;
	background-color: #505253;
	background-image: url('/media/img/bt-x-close.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 23px;
	height: 22px;
	border-radius: 2x;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

#overlay_close:hover {
	background-color: #222;
}

.overlay header {
	margin: 30px 0 0 30px;
}

.overlay h1 {
	color: #ececec;
	font-size: 20px;
	font-weight: normal;
}

.overlay h2 {
	color: #828282;
	font-size: 10px;
	font-weight: normal;
}

.overlay .maps label input {
	display: none;
}

.overlay .maps label {
	background-image: url('/media/img/brazilian-states.png');
	cursor: pointer;
	left: 0;
	position: absolute;
	top: 0;
}


.overlay .maps label strong {
	color: #828282;
	font-size: 10px;
	left: 0;
	position: absolute;
	top: 0;
	z-index: 9999;
}

.overlay #appoint-city,
.overlay #how-to-use,
.overlay #new-hint,
.overlay #choose-city {
	display: none;
	height: 429px;
	left: 0;
	position: absolute;
	top: 0;
	width: 908px;
	z-index: 999999;
	overflow: hidden;
}

.overlay #choose-city label {
	cursor: pointer;
}

#how-to-use ol {
	background: url(/media/img/how-to-use-noalpha.jpg) no-repeat left top;
	float: left;
	height: 264px;
	left: 30px;
	position: absolute;
	top: 110px;
	width: 850px;
}

#how-to-use ol li {
	display: none;
}

#new-hint label{
		color:#AAA;
		background-color:#000;
}
#new-hint{
		background-color:#000;
		color:#FFF;
		font-family:helvetica,arial,sans;
        padding: 30px 20px;
}
#new-hint .hint-page h2{
        margin-bottom: 30px;
}
#new-hint div .new-hint-block{
		width: 270px;
		float:left;
        padding-top: 60px;
        padding-left: 10px;
        position: relative;
}
#new-hint .cancel-button,
#new-hint .submit-button
{
        position: absolute;
        top: 249px;
        cursor: pointer;
}
#new-hint .cancel-button{
        left: 100px;
}
/*map buttons*/
#new-hint .city-button{
        width: 125px;
        height: 90px;
}


/* 
 * Titles
 * */
#new-hint h3{
        display: none;
}
#new-hint .city-categorie{
        background: url(/media/img/new-hint/title1.png) no-repeat;
}
#new-hint .about{
        background: url(/media/img/new-hint/title2.png) no-repeat;
}
#new-hint .choose-photo{
        margin-left: 30px;
        background: url(/media/img/new-hint/title3.png) no-repeat ;
}

/*
 * Categories
 * */
#new-hint ul {
        margin-top: 40px;
}
#new-hint ul,li {
		list-style-type:none;
}
#new-hint li.categorie{
		float:left;
		margin-right:1px;
}
#new-hint li span{
		clear:both;
		display:block;
        color: #CCC;
        text-align: center;
        margin: -8px 0;
}

/*
 * Input fields
 * */
#new-hint table, #new-hint form{
        margin: 5px auto;
        padding: 0;
        border: none;
}
#new-hint td, #new-hint tr{
        margin: 0px 0;
        padding: 0;
        color: #CCC;
        height: 26px;
        vertical-align: top;
}
#new-hint input[type="text"]{
        background: url(/media/img/new-hint/input.png) no-repeat;
        padding:4px;
        width:200px;
}
#new-hint textarea{
        background: url(/media/img/new-hint/textarea.png) no-repeat;
        padding:4px;
        width: 200px;
        height: 88px;
}
#new-hint .info{
        color: #ccc;
        size: 8px;
        text-transform: none;
}
#new-hint .input-label{
        text-align: right;
        padding-right: 5px;
}
#new-hint input[type="file"]
{
        color: #ccc;
}

#new-hint .default-button
{
        background: url("/media/img/new-hint/default-bt.png") no-repeat scroll 0 0 transparent !important;
        color: #000 !important;
        font-weight: bold;
        padding: 3px;
        text-align: center;
        width: 100px;
        cursor: pointer;
        text-transform: uppercase;
}
#new-hint .default-button[disabled=""]
{
        background: url("/media/img/new-hint/default-disabled-bt.png") no-repeat scroll 0 0 transparent;
        color: #555;
}


/*
 * Photo upload
 * */
#new-hint .photo-preview-box{
        background-color: #141414;
        border: 3px solid #464646;
        width: 220px;
        height: 105px;
        display: relative;
        padding: 0;
        overflow: hidden;
}
#new-hint .image-specs{
        padding: 40px 10px;
        display: block;
        line-height: 1.2;
}
#new-hint #upload-hint-image-form {
        margin-bottom: 20px !important;
}

/*
 * Confirmation
 * */
#new-hint .page2,
#new-hint .page3 
{
        padding-top: 90px;
        text-align: center;
        display: none;
}
#new-hint .page3 {
        padding-top: 125px;
}
#new-hint .user-data-input
{
        width: 120px !important;
        margin-left: 5px;
}
#new-hint .user-data {
}
#new-hint .user-data tr {
        display: block;
        position: relative;
        float: left;
}
#new-hint .user-data td {
        display: block;
        position: relative;
        float: left;
}
#new-hint #user-data-form img {

        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
}
#new-hint .submit-final-page-button
{
        margin: 0 6px;
}
#new-hint .nav-button {
        padding: 2px 6px;
}
#new-hint #user-data-form label {
        margin-left: 5px;
}


#return-message {
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
	margin-top: 500px;
	width: 100%;
}

#photo-resizer h1
{
	text-align: left;
}

#return-message h2 {
	padding-bottom: 30px;
}

#return-message a {
	margin: auto;
	float: none;
}