/* Copyright 2015 Online Ocigrup S.L. All rights reserved. */
html, body {
	
	margin: 0px;
	padding: 0px;
	background-color: #eae2d7;
	overflow: hidden;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@font-face {

    font-family: 'bebas';
    src: url('BowlbyOne-Regular.otf');
    font-weight: normal;
    font-style: normal;

}


#banner_center #buton_play{
	letter-spacing:5px;
	background-image:-webkit-linear-gradient(top,#88b46a, #5b9e2b);
	background-image:-moz-linear-gradient(top,#88b46a,#5b9e2b);
	background-image:-ms-linear-gradient(top,#88b46a,#5b9e2b);
	background-image:-o-linear-gradient(top,#88b46a,#5b9e2b);
	background-image:linear-gradient(to bottom,#88b46a,#5b9e2b);
	font-family:bebas;
	color:#fff;
	text-decoration: none;
	text-shadow: 0 0 2 px rgba(150, 150, 150, 1);
	width: 300px;
	height: 132px;
	position: relative;
	left: 0;
	bottom: 0;
	right: 0;
	top:-150px;
	margin: auto;
	background-color: #6d9254;
	border-radius: 28px;
	text-align: center;
	vertical-align: middle;
	line-height: 132px;
	font-size:64px;
}

.btn_play{
  text-decoration:none; 
}

#screen_under{

	width: 1024px;
	height: 1024px;
	position: absolute;
	left: 0;
	top: 0;
	background: black;
	z-index: 45;
	opacity: 0.5;
   
}


#selected_color{

position: absolute;  top:60px; left:184px; margin: auto;
background: url("/fullscreen/img/selected.png") no-repeat;
width: 38px;height: 38px;
z-index: 25;

}

#selected_tool{

position: absolute;  top:110px; left: 30px; margin: auto; 
background: url("/fullscreen/img/selected_tool.png") no-repeat; 
width: 38px;height: 38px;
z-index: 25;

}

#selected_size{

position: absolute;  top:10px; left: 132px; margin: auto; 
background: url("/fullscreen/img/selected_size.png") no-repeat; 
width: 38px;height: 38px;
z-index: 25;

}

#container_coljnr{

	position: absolute;
  	left:     50%;
  	top:      50%;

}


#canvas{

	width: 100%;
  	height: 100%;
  	border: none;
  	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	-ms-interpolation-mode: nearest-neighbor;
	background-color: white;

}

#print {

position: absolute; top:60px; left: 492px;
	width: 41px;
	height: 41px;
	z-index: 5;
		background:transparent;

	
}

#more {

	position: absolute; top:70px; left: 482px;
	width: 41px;
	height: 41px;
	z-index: 5;
		background:transparent;


}

#back {

	position: absolute; top:110px; left: 492px;
	width: 41px;
	height: 41px;
	z-index: 5;
	background:transparent;

}

#tool_boton_pen {

	position: absolute; top:10px; left: 10px;
	
	background: transparent;

	width: 51px;
	height: 51px;
	z-index: 5;
}

#tool_boton_rubber {

	position: absolute; top:60px; left: 10px;
background: transparent;
	width: 51px;
	height: 51px;
	z-index: 5;

}


#tool_boton_bucket {
	position: absolute; top:110px; left: 10px;
	background: transparent;
	width: 51px;
	height: 51px;
	z-index: 5;
}

#tool_boton_circle {

	position: absolute; top:10px; left: 64px;
background: transparent;
	
	width: 51px;
	height: 51px;
	z-index: 5;

}

#tool_boton_rectangle {

	position: absolute; top:60px; left: 64px;
background: transparent;
	width: 51px;
	height: 51px;
	z-index: 5;
}

#tool_boton_undo {

	position: absolute; top:110px; left: 64px;	
		background: transparent;
	width: 51px;
	height: 51px;
	z-index: 5;
	

}

#button_to_tools {

	top:0;
	left: 0;
	background: url("/fullscreen/img/menu_button_lite.png");
	width:62px;
	height: 61px;
	position: absolute;

}


#container_tools{
	
	position: absolute;
	top: -250px;
	left: 0;
	background: url("/fullscreen/img/menufullscreen_lite_last.png") no-repeat;
	width: 550px;
	height: 168px;
	z-index: 10;
	height :174px;
}


#paint_loader{

	top:0;
	left: 0;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 32px;
	height: 32px;
	background-color: red;
	margin: auto;
	z-index: 10;
	background: url("/fullscreen/img/ajax_loader.gif");
	display: none;

}


#color1{position: absolute; top:10px; left: 182px; margin: auto; background: transparent;  width: 51px;height: 51px;z-index: 5;}
#color2{position: absolute; top:60px; left: 182px; margin: auto; background: transparent;   width: 51px;height: 51px;z-index: 5;}
#color3{position: absolute; top:110px; left: 182px; margin: auto; background: transparent;   width: 51px;height: 51px;z-index: 5;}


#color4{position: absolute; top:8px; left: 232px; margin: auto;background: transparent;   width: 51px;height: 51px;z-index: 5;}
#color5{position: absolute; top:58px; left: 232px; margin: auto;background: transparent;    width: 51px;height: 51px;z-index: 5;}
#color6{position: absolute; top:108px; left: 232px; margin: auto; background: transparent; ;  width: 51px;height: 51px;z-index: 5;}

#color7{position: absolute; top:8px; left: 281px; margin: auto; background: transparent;  width: 51px;height: 51px;z-index: 5;}
#color8{position: absolute; top:58px; left: 281px; margin: auto; background: transparent;   width: 51px;height: 51px;z-index: 5;}
#color9{position: absolute; top:108px; left: 281px; margin: auto;background: transparent;    width: 51px;height: 51px;z-index: 5;}

#color10{position: absolute; top:8px; left: 330px; margin: auto; background: transparent;   width: 51px;height: 51px;z-index: 5;}
#color11{position: absolute; top:58px; left: 330px; margin: auto; background: transparent;   width: 51px;height: 51px;z-index: 5;}
#color12{position: absolute; top:108px; left: 330px; margin: auto;background: transparent;    width: 51px;height: 51px;z-index: 5;}

#color13{position: absolute; top:8px; left: 380px; margin: auto;background: transparent;    width: 51px;height: 51px;z-index: 5;}
#color14{position: absolute; top:58px; left: 380px; margin: auto; background: transparent;   width: 51px;height: 51px;z-index: 5;}
#color15{position: absolute; top:108px; left: 380px; margin: auto;background: transparent;    width: 51px;height: 51px;z-index: 5;}

#color16{position: absolute; top:8px; left: 430px; margin: auto; background: transparent;   width: 51px;height: 51px;z-index: 5;}
#color17{position: absolute; top:58px; left: 430px; margin: auto; background: transparent;   width: 51px;height: 51px;z-index: 5;}
#color18{position: absolute; top:108px; left: 430px; margin: auto; background: transparent;   width: 51px;height: 51px;z-index: 5;}

#color19{position: absolute; top:8px; left: 482px; margin: auto; background: transparent;   width: 51px;height: 51px;z-index: 5;}

#btn_size_5{position: absolute; top:12px; left: 115px; margin: auto; background: transparent;  width: 51px;height: 51px;z-index: 5;}
#btn_size_10{position: absolute; top:62px; left: 115px; margin: auto; background: transparent; width: 51px;height: 51px;z-index: 5;}
#btn_size_15{position: absolute; top:112px; left: 115px; margin: auto; background: transparent;  width: 51px;height: 51px;z-index: 5;}

#btn_size_10{position: absolute; top:62px; left: 120px; margin: auto; background: transparent; width: 51px;height: 51px;z-index: 5;}
#btn_size_15{position: absolute; top:112px; left: 120px; margin: auto; background: transparent;  width: 51px;height: 51px;z-index: 5;}
/*
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    #container_tools{
	 	zoom:95%;
 	}
 	#banner_center{
 		zoom:95%;
 	}
 	#start_btn{
 		zoom:95%;
 	}
}


@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){ 
   #container_tools{
	 	zoom:85%;
 	}
 	#banner_center{
 		zoom:85%;
 	}
 	#start_btn{
 		zoom:85%;
 	}
}


@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi){ 
   #container_tools{
	 	zoom:75%;
 	}
 	#banner_center{
 		zoom:75%;
 	}
 	#start_btn{
 		zoom:75%;
 	}
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){ 
  #container_tools{
	 	zoom:75%;
 	}
 	#banner_center{
 		zoom:75%;
 	}
 	#start_btn{
 		zoom:75%;
 	}
}

*/
@media (min-width: 240px) and (max-width: 480px) and (orientation : landscape) {
 	#container_tools{
	 	zoom:75%;
 	}
 /*	#banner_center{
 		zoom:75%;
 	}
 	#start_btn{
 		zoom:75%;
 	}*/
}


@media (min-width: 481px) and (max-width: 640px) and (orientation : landscape) {
	#container_tools{
	 	zoom:85%;
 	}
/* 	#banner_center{
 		zoom:85%;
 	}
 	#start_btn{
 		zoom:85%;
 	}*/
}

@media (min-width: 641px) and (max-width: 800px) and (orientation : landscape) {
	#container_tools{
	 	zoom:95%;
 	}
 	/*#banner_center{
 		zoom:95%;
 	}
 	#start_btn{
 		zoom:95%;
 	}*/
}

@media (min-width: 801px) and (max-width: 1024px) and (orientation : landscape){
	#container_tools{
	 	zoom:95%;
 	}
 	/*#banner_center{
 		zoom:95%;
 	}
 	#start_btn{
 		zoom:95%;
 	}*/
}



@media (min-width: 240px) and (max-width: 480px) and (orientation : portrait) {
 	#container_tools{
	 	zoom:60%;
 	}
 	/*#banner_center{
 		zoom:60%;
 	}
 	#start_btn{
 		zoom:60%;
 	}*/
}

@media (min-width: 481px) and (max-width: 640px) and (orientation : portrait) {
	#container_tools{
	 	zoom:70%;
 	}
 /*	#banner_center{
 		zoom:70%;
 	}
 	#start_btn{
 		zoom:70%;
 	}*/
}

@media (min-width: 641px) and (max-width: 800px) and (orientation : portrait) {
	#container_tools{
	 	zoom:80%;
 	}
 /*	#banner_center{
 		zoom:80%;
 	}
 	#start_btn{
 		zoom:80%;
 	}*/
}

@media (min-width: 801px) and (max-width: 1024px) and (orientation : portrait){
	#container_tools{
	 	zoom:90%;
 	}
 /*	#banner_center{
 		zoom:90%;
 	}
 	#start_btn{
 		zoom:90%;
 	}*/
}

#cortina{

 width: 1024px;
 height: 1024px;
 background: white;
 position: absolute;
 top:0;
 left:0;
 z-index: 99999;

}

#cortina_phone_landscape{

 width: 397px;
 height: 234px;
 z-index: 9999999;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 margin: auto;
 background-image: url("/fullscreen/img/mobile_device_landscape.png");
 display: none;
  
}

#cortina_phone_portrait{

 width: 234px;
 height: 397px;
 z-index: 9999999;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 margin: auto;
 background-image: url("/fullscreen/img/mobile_device_portrait.png");
 display: none;
  
}

#button_to_description {

 bottom:0;
 left: 0;
 background: url("/fullscreen/img/icona_paper.png");
 width:62px;
 height: 61px;
 position: absolute;
}


h1 {
	font-size: 17px;
	margin: 5px 0px 5px 0px;
	overflow: hidden;
	height: 40px;
}

a {
color: #CCCCCC;
text-decoration: underline;
}


#menu_to_description{
 text-align: center;
 width: 100%;
 height: 96px;
 background:black;
 opacity: .75;
 position: absolute;
 left: 0;
 bottom: -96px;
 z-index: 100;
 font-family: Arial;
 font-size: 1.2em;
 color: #fff;

}

#button_social {
	bottom:0;
	right: 0;
	background: url(/fullscreen/img/socialButton.png) no-repeat;
	width:64px;
	height: 63px;
	position: absolute;
	z-index: 40;
}
#social_menu{
	bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  min-height: 2000px;
  position: relative;
  z-index: 39;
  margin: auto;
  display: none;
  text-align: center;
  vertical-align: middle;
  background-color: RGBA(255,255,255,0.5);
}
#social_menu div{
	width:199px;
	height: 133px;
	background: url(/fullscreen/img/socialMenu.png) no-repeat;
	z-index: 40;
	margin:auto;
	position:relative;
	bottom:-100px;
}
#social_menu a{
	width:66px;
	height:66px;
	padding:0px;
	margin:0px;
	float:left;
}


@media (min-width: 240px) and (max-width: 480px) and (orientation : landscape) {

 	#cortina_phone_landscape{zoom:60%;}
 	#cortina_phone_portrait{zoom:60%;}
}


@media (min-width: 481px) and (max-width: 640px) and (orientation : landscape) {
	
 	#cortina_phone_landscape{zoom:60%;}
 	#cortina_phone_portrait{zoom:60%;}
}

@media (min-width: 641px) and (max-width: 800px) and (orientation : landscape) {

 	#cortina_phone_landscape{zoom:70%;}
 	#cortina_phone_portrait{zoom:70%;}
}

@media (min-width: 801px) and (max-width: 1024px) and (orientation : landscape){

 	#cortina_phone_landscape{zoom:80%;}
 	#cortina_phone_portrait{zoom:80%;}
}



@media (min-width: 240px) and (max-width: 480px) and (orientation : portrait) {
 
 	#cortina_phone_landscape{zoom:50%;}
 	#cortina_phone_portrait{zoom:50%;}
}

@media (min-width: 481px) and (max-width: 640px) and (orientation : portrait) {

 	#cortina_phone_landscape{zoom:60%;}
 	#cortina_phone_portrait{zoom:60%;}
}

@media (min-width: 641px) and (max-width: 800px) and (orientation : portrait) {

 	#cortina_phone_landscape{zoom:70%;}
 	#cortina_phone_portrait{zoom:70%;}
}

@media (min-width: 801px) and (max-width: 1024px) and (orientation : portrait){

 	#cortina_phone_landscape{zoom:80%;}
 	#cortina_phone_portrait{zoom:80%;}

}


#banner_center{
	width: 100%;
	height: 100px;
	position: absolute;
	left: 0;
	right:0;
	bottom:0;
	
	margin: auto;
	z-index: 50;
	
}

#mainContainer {
  /*position: relative;*/
  width: 100%;
  height: 100px;
}

#content, #adContainer {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100px;
}

#contentElement {
  width: 100%;
  height: 100px;
}

#SDK_core {
  width: 100%;
  height: 100px;
  border: 0px; 
  opacity: 1; 
  margin: 0px; 
  padding: 0px; 
  z-index: 50;
}