/*
    infobox.css
    m.attoverticale.com | 25/03/2019 | CSS
    (c) Copyright 2019 web-communication.eu
*/



.infobox {
    position: 					fixed;
    top: 						50%;
    left: 						50%;
    width: 						auto;
	height: 					auto;
	min-width: 					300px;
	max-width:					500px;
	background:                	#FFFFFF;
	border:                    	Solid 2px #FFFFFF;
	-moz-box-shadow:           	2px  5px 25px #000;
    -webkit-box-shadow:        	2px  5px 25px #000;
    filter:                    	progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=10);
    box-shadow:                	2px 5px 25px #000;
	-moz-border-radius: 		20px;
	-webkit-border-radius:		20px;
	border-radius: 				20px;
	z-index:                   	100001;
	padding: 			       	25px 25px 70px 25px;
    -webkit-transform: 			translate(-50%,-50%);
    -moz-transform: 			translate(-50%,-50%);
    -ms-transform: 				translate(-50%,-50%);
    -o-transform: 				translate(-50%,-50%);
    transform: 					translate(-50%,-50%);
}


.infobox p {
	font-family:               Arial, Helvetica, sans-serif;
    color:                     #333333;
	font-size:                 16px;
    font-weight:               normal;
	/*background: 			   #eeddee;*/
	line-height:			25px;
}

.infobox .container {
	position: 					absolute;
	bottom: 					20px;
	left: 						0;
	width: 						100%;
	padding: 					0 25px;
	/*text-align: 				center;*/
	/*background: 				#eee;*/
}



/* buttons */

.infobox ul li {	
	display:					inline-block;
    list-style: 				none;
    margin: 					0 3px;
    padding: 					0;
	text-align: 				center;
	border: 					1px solid #000000;
	border-radius:              14px;
    -moz-border-radius:         14px;
    -webkit-border-radius:      14px;
}

.infobox ul li a {
    display:					block;
    padding: 					5px 0;
 
    font-family:                Arial, Helvetica, sans-serif;
    font-size:                  18px;
    font-weight:                normal;
    text-decoration:			none;	
}

.infobox ul li.hover,
.infobox ul li:hover {
    cursor: 					pointer; 
	 background:                #009CDE;
}

.infobox ul li:hover > a {
    color: 						#0000FF;
}



/* blue button */

.infobox ul li.blue {	
	background:                 #FFFFFF;/*#0F67CC;*/
	width: 						70px;
}

.infobox ul li.blue a {
    color: 						#000000;/*#FFFFFF;*/
}


.infobox ul li.blue:hover {
    cursor: 					pointer; 
	background:                 #000000;
}

.infobox ul li.blue:hover > a {
    color: 						#FFFFFF;
}




/* red button */

.infobox ul li.red {	
	background:                 #FFFFFF;/*#0F67CC;*/
	width: 						120px;
}

.infobox ul li.red a {
    color: 						#000000;/*#FFFFFF;*/
}


.infobox ul li.red:hover {
    cursor: 					pointer; 
	background:                 #000000;
}

.infobox ul li.red:hover > a {
    color: 						#FFFFFF;
}




/* grey button */

.infobox ul li.grey {	
	background:                 #DDDDDD;
	width: 						70px;
}

.infobox ul li.grey a {
    color: 						#555555;
}


.infobox ul li.grey:hover {
    cursor: 					pointer; 
	background:                 #CCCCCC;
}

.infobox ul li.grey:hover > a {
    color: 						#555555;
}



	
#infobox_error, 
#infobox_email, 
#infobox_captcha,
#infobox_author, 
#infobox_affiliation,
#infobox_userid,
#infobox_sent,
#infobox_cancel, 
#infobox_error_send,
#infobox_paypal,
#infobox_notes,
#infobox_cart_update,
#infobox_loading,
#infobox_empty,
#infobox_insta,
#infobox_edit,
#infobox_currency,
#infobox_cookie,
#infobox_vat,
#infobox_vatinfo,
#infobox_redirect {
	display:                   none;
}	
	











/*new*/
#area {	
	position:                  fixed;
    background:                #FFFFFF;
    width:                     500px;
    height:                    300px;
    top:                       0;
    margin-left:               -250px;
	margin-top:                -150px;
    padding:                   0;
    left:                      50%;
    border:                    Solid 1px #FFFFFF;
    -moz-box-shadow:           2px  5px 25px #000;
    -webkit-box-shadow:        2px  5px 25px #000;
    filter:                    progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=10);
    box-shadow:                2px 5px 25px #000;
    display:                   none;
    z-index:                   100001;
}

#area .ScrollStyle
{
    max-height:                498px;
    overflow-y:                scroll;
}

#area .close
{
   position:					absolute;
   top:							-45px;
   right:						-45px;
}



@media only screen and (max-width: 480px) {
	
	#area {	
		width:                     300px;
		height:                    250px;
		  position: 					fixed;
		top: 						50%;
		left: 						50%;
		margin: 0;
	
		-webkit-transform: 			translate(-50%,-50%);
		-moz-transform: 			translate(-50%,-50%);
		-ms-transform: 				translate(-50%,-50%);
		-o-transform: 				translate(-50%,-50%);
		transform: 					translate(-50%,-50%);
	}
	
	#area .close {
	 
	   top:							-30px;
	   right:						-30px;
	}
}

@media only screen and (min-width: 481px) and (max-width: 760px) {
	
	#area {	
		width:                     380px;
		height:                    280px;
		  position: 					fixed;
		top: 						50%;
		left: 						50%;
		margin: 0;
	
		-webkit-transform: 			translate(-50%,-50%);
		-moz-transform: 			translate(-50%,-50%);
		-ms-transform: 				translate(-50%,-50%);
		-o-transform: 				translate(-50%,-50%);
		transform: 					translate(-50%,-50%);
	}
	
	#area .close {
	 
	   top:							-35px;
	   right:						-35px;
	}
}