@charset "UTF-8";
/* licuit.com */
/* steps.css */
/* Created Jun, 2012 */
/* Modified Jun, 2012
--------------------------------------- */

#pageElements{
	
}

	#pageElements .steps{
		list-style:none;
		position:relative;
		width:100%;
		height:375px;
	}
	
		#pageElements .steps li.step{
			display:none;
			position:absolute;
			top:0px;
			left:0px;
			bottom:0px;
			right:0px;
		}
		
		#pageElements .steps li.step.active{
			display:block;	
		}
		
		/* STEP1 : ENTER */
		
		#pageElements .steps li.step.enter{
			background-image:url("/resources/images/steps/enter/bg.png");
			background-repeat:no-repeat;
			background-position:55px 10px;
		}
		
			#pageElements .steps li.step.enter .enterBtn{
				position:absolute;
				top:50px;
				left:310px;
				background-image:url("/resources/images/steps/enter/enter.png");
				width:379px;
				height:156px;
				cursor:pointer;
			}
			
			#pageElements .steps li.step.enter .enterBtn:hover p{
				font-size:32px;
				margin-top:-6px;
				margin-left:-6px;
			}
			
				#pageElements .steps li.step.enter .enterBtn p{
					position:absolute;
					top:26px;
					left:175px;
					color:#FFF;
					font-size:26px;
					text-shadow: -2px 2px #373737;
				}
			
			#pageElements .steps li.step.enter .otherOptions{
				position:absolute;
				left:590px;
				top:220px;
			}
			
				#pageElements .steps li.step.enter .otherOptions .register a{
					color:#dff1f6;
					font-size:24px;
					display:block;
					padding-top:20px;
					line-height:23px;
					width:250px;
					background-image:url("/resources/images/steps/enter/pacman.png");
					background-repeat:no-repeat;
					background-position:104px 43px;					
				}
				
				#pageElements .steps li.step.enter .otherOptions .register a:hover{
					text-shadow: -2px 2px #286170;
					background-position:104px -57px;		
				}
				
				#pageElements .steps li.step.enter .otherOptions .remember a{
					color:#9cd2e3;
					font-size:18px;
					margin-top:2px;
					display:block;
				}
			
				#pageElements .steps li.step.enter .otherOptions .remember a:hover{
					text-shadow: -2px 2px #286170;
				}	
		
		/* STEP2 : LOGIN */
		
		#pageElements .steps li.step.login{
			background-image:url("/resources/images/steps/login/bg.png");
			background-repeat:no-repeat;
			background-position:250px 0px;
		}
		
			#pageElements .steps li.step.login .loginForm{
				position:absolute;
				left:250px;
				top:0px;
				padding:40px 0px 0px 240px;
				width:510px;
				-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
			}
			
				#pageElements .steps li.step.login .loginForm .title{
					position:absolute;
					left:35px;
					top:25px;
					color:#e3dfdf;
					font-size:30px;
					line-height:38px;
					width:200px;
					display:block;
				}
				
					#pageElements .steps li.step.login .loginForm .title span{
						display:block;
						font-size:48px;
						color:#FFF;	
					}
				
				#pageElements .steps li.step.login .loginForm p.label{
					font-size:12px;
					text-transform:uppercase;
					color:#FFF;
					margin-bottom:6px;
					display:block;
				}
				
				#pageElements .steps li.step.login .loginForm p.label.checkbox{
					display:inline-block;
					margin-left:4px;	
				}
					
				#pageElements .steps li.step.login .loginForm input{
					width:100%;
					background-color:#e3dfdf;
					border:#bfbbbb solid 2px;
					border-radius:6px;
					margin-bottom:12px;
					font-size:17px;
					padding:8px 6px 8px 6px;
					color:#555;
					-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
				}
				
				#pageElements .steps li.step.login .loginForm .checkBox{
					position:relative;
					width:15px;
					height:15px;
					border-radius:6px;
					background-color:#e3dfdf;
					border:#bfbbbb solid 2px;
					display:inline-block;
					cursor:pointer;
				}
				
					#pageElements .steps li.step.login .loginForm .checkBox:hover span,
					#pageElements .steps li.step.login .loginForm .checkBox.active span{
						display:block;
						position:absolute;
						top:2px;
						left:2px;
						bottom:2px;
						right:2px;
						background-color:#bfbbbb;
						border-radius:3px;
					}
				
				#pageElements .steps li.step.login .loginForm .iLoginEnterHolder{
					margin-top:20px;
					width:100%;
					text-align:right;	
				}
				
				#pageElements .steps li.step.login .loginForm #iLoginEnter{
					background-color:#373636;
					border-radius:6px;
					padding:4px 8px 2px 55px;
					display:inline-block;
					font-size:28px;
					color:#FFF;
					background-image:url("/resources/images/steps/login/spaceinvader.png");
					background-position:8px 5px;
					background-repeat:no-repeat;
					cursor:pointer;
					text-shadow: -2px 2px #2a2929;					
				}
				
				#pageElements .steps li.step.login .loginForm #iLoginEnter:hover{
					background-color:#474646;
				}
				
			#pageElements .steps li.step.login .otherOptions{
				position:absolute;
				left:90px;
				top:135px;
				background-image:url("/resources/images/steps/login/trees.png");
				background-position:0px 0px;
				background-repeat:no-repeat;
				width:324px;
				height:230px;
			}
			
				#pageElements .steps li.step.login .otherOptions .register a{
					position:absolute;
					top:55px;
					left:13px;
					color:#FFFFFF;
					font-size:35px;
					display:block;
					line-height:26px;
					opacity:0.8;
				}
				
				#pageElements .steps li.step.login .otherOptions .register a:hover{
					text-shadow: -2px 2px #68b7b6;
					opacity:1;
				}
				
					#pageElements .steps li.step.login .otherOptions .register a span{
						color:#574445;
						font-size:28px;
						display:block;	
					}
				
				#pageElements .steps li.step.login .otherOptions .remember a{
					position:absolute;
					top:70px;
					left:165px;
					color:#574445;
					font-size:22px;
					display:block;
					line-height:19px;
					opacity:0.8;
				}
			
				#pageElements .steps li.step.login .otherOptions .remember a:hover{
					text-shadow: -2px 2px #4bbb96;
					opacity:1;
				}
				
					#pageElements .steps li.step.login .otherOptions .remember a > span{
						color:#FFFFFF;
						font-size:35px;
						display:block;
						margin-top:5px;
					}
					
						#pageElements .steps li.step.login .otherOptions .remember a > span > span{
							font-size:40px;
							vertical-align:-2px;
						}
						
		#pageElements .steps li.step.licenses{
			background-image:url("/resources/images/steps/licenses/bg.png");
			background-repeat:no-repeat;
			background-position:80px 0px;
			margin-top:-10px;
		}
		
			#pageElements .steps li.step.licenses .licensesMenu{
				position:absolute;
				top:45px;
				width:100%;
				text-align:right;
				list-style:none
			}
			
				#pageElements .steps li.step.licenses .licensesMenu li{
					display:inline-block;
					font-size:25px;
					padding:6px 10px 3px 10px;
					background-color:#296474;
					border-radius:8px;
					color:#FFF;
					margin-left:7px;
					cursor:pointer;
					text-shadow: -2px 2px #143f4a;
					opacity:0.4;
					-webkit-transition: opacity .5s ease-in-out;                    
                    -moz-transition: opacity .5s ease-in-out;                    
                    -o-transition: opacity .5s ease-in-out;                    
                    transition: opacity .5s ease-in-out;
				}
				
				#pageElements .steps li.step.licenses .licensesMenu li:last-child{
					margin-right:110px;	
				}
				
				#pageElements .steps li.step.licenses .licensesMenu li:hover,
				#pageElements .steps li.step.licenses .licensesMenu li.active{
					opacity:1;
				}
			
			#pageElements .steps li.step.licenses .appsHolder{
				position:absolute;
				top:110px;
				left:60px;
				width:902px;
				height:188px;
				overflow:hidden;
			}			
			
			body[data-platform="tablet"] #pageElements .steps li.step.licenses .appsHolder{
				top:75px;	
			}
			
			#pageElements .steps li.step.licenses .apps{
				position:absolute;
				top:0px;
				left:0px;
				width:auto;		
				list-style:none;
				white-space:nowrap;					
			}
			
			#pageElements .steps li.step.licenses .apps.lessThan3{
				width:900px;
				text-align:center;
			}
			
				#pageElements .steps li.step.licenses .apps li{
					position:relative;
					width:300px;
					height:188px;
					background-image:url("/resources/images/steps/licenses/app-bg.png");
					background-repeat:no-repeat;
					background-position:0px 0px;
					display:inline-block;
					text-align:left;
				}
					
					#pageElements .steps li.step.licenses .apps li > .contents{
						position:absolute;
						top:10px;
						left:13px;
						border-radius:3px;
						width:274px;
						height:163px;
						overflow:hidden;
					}
					
					#pageElements .steps li.step.licenses .apps li > .contents > img{
						position:absolute;
						top:0px;
						left:0px;
						z-index:1;
					}
					
					#pageElements .steps li.step.licenses .apps li > .contents > .layer{
						position:absolute;
						top:0px;
						left:0px;
						z-index:2;
						width:100%;
						height:100%;
						-webkit-transition: background-color .5s ease-in-out;                        
                        -moz-transition: background-color .5s ease-in-out;                        
                        -o-transition: background-color .5s ease-in-out;                        
                        transition: background-color .5s ease-in-out;
					}
					
					#pageElements .steps li.step.licenses .apps li > .contents:hover > .layer{
						background-color:rgba(0,0,0,0.8);
					}
					
					body[data-platform="tablet"] #pageElements .steps li.step.licenses .apps li > .contents > .layer{
						background-color:rgba(0,0,0,0.8);
					}
					
						#pageElements .steps li.step.licenses .apps li > .contents > .layer > .title{
							position:absolute;
							left:13px;
							bottom:13px;
							border-radius:3px;
							background-color:rgba(0,0,0,0.8);
							background-image:url("/resources/images/steps/licenses/pacman.png");
							background-repeat:no-repeat;
							background-position:4px 9px;
							padding:3px 6px 1px 26px;
							color:#FFF;
							text-shadow: -2px 2px #222;
							font-size:23px;
							display:inline-block;
							cursor:default;
							-webkit-transition: background-color .5s ease-in-out;                            
                            -moz-transition: background-color .5s ease-in-out;                            
                            -o-transition: background-color .5s ease-in-out;                            
                            transition: background-color .5s ease-in-out;
						}
						
						#pageElements .steps li.step.licenses .apps li > .contents:hover > .layer > .title{
							background-color:rgba(0,0,0,0);	
						}
						
						body[data-platform="tablet"] #pageElements .steps li.step.licenses .apps li > .contents > .layer > .title{
							background-color:rgba(0,0,0,0);	
						}
						
						#pageElements .steps li.step.licenses .apps li > .contents > .layer .btnGo{
							position:absolute;
							right:8px;
							top:8px;
							padding:3px 7px 0px 9px;
							background-color:#c43900;
							color:#FFF;
							text-shadow: -2px 2px #3f3f3f;
							font-size:22px;
							border-radius:3px;
							cursor:pointer;
							display:none;
						}
						
						#pageElements .steps li.step.licenses .apps li > .contents:hover > .layer .btnGo{
							display:block;	
						}
						
						body[data-platform="tablet"] #pageElements .steps li.step.licenses .apps li > .contents > .layer .btnGo{
							display:block;	
						}
						
						#pageElements .steps li.step.licenses .apps li > .contents > .layer .btnGo:hover{
							background-color:#e2654c;
						}
						
						#pageElements .steps li.step.licenses .apps li > .contents > .layer .btnGo.inactive{
							pointer-events:none;
							opacity:0.3;
						}
						
						#pageElements .steps li.step.licenses .apps li > .contents > .layer .license{
							position:absolute;
							left:17px;
							top:17px;
							
							cursor:default;
							-webkit-transition: opacity .5s ease-in-out;                            
                            -moz-transition: opacity .5s ease-in-out;                            
                            -o-transition: opacity .5s ease-in-out;                            
                            transition: opacity .5s ease-in-out;
							opacity:0;
						}
						
						#pageElements .steps li.step.licenses .apps li > .contents:hover > .layer .license{
							opacity:1;
						}
						
						body[data-platform="tablet"] #pageElements .steps li.step.licenses .apps li > .contents > .layer .license{
							opacity:1;
						}
							
							#pageElements .steps li.step.licenses .apps li > .contents > .layer .license span,
							#pageElements .steps li.step.licenses .apps li > .contents > .layer .license a{
								display:block;
								font-size:12px;
							}
							
							#pageElements .steps li.step.licenses .apps li > .contents > .layer .license .title{
								color:#ffd800;
								font-size:14px;
								margin-bottom:5px;
							}
							
							#pageElements .steps li.step.licenses .apps li > .contents > .layer .license .info{
								color:#ffffff;
							}
							
							#pageElements .steps li.step.licenses .apps li > .contents > .layer .license .info_reseller{
								color:#BBB;
								font-size:9px;
								line-height:11px;
								margin-top:5px;
								font-style:italic;
							}
							
							#pageElements .steps li.step.licenses .apps li > .contents > .layer .license .availability{
								color:#82bf40;
							}
							
							#pageElements .steps li.step.licenses .apps li > .contents > .layer .license .upgrade{
								background-color:#5bacc4;
								margin-top:6px;
								border-radius:9px;
								color:#FFF;
								padding:1px 8px 2px 8px;
								font-size:11px;
								margin-left:-8px;
								display:inline-block;
							}
							
							#pageElements .steps li.step.licenses .apps li > .contents > .layer .license .upgrade:hover{
								color:#fbf48c;
							}
				
			#pageElements .steps li.step.licenses .nav{
				display:none;
				position:absolute;
				top:175px;
				width:52px;
				height:52px;				
				background-repeat:no-repeat;
				cursor:pointer;
				-webkit-transition: background-position .5s ease-in-out;                
                -moz-transition: background-position .5s ease-in-out;                
                -o-transition: background-position .5s ease-in-out;                
                transition: background-position .5s ease-in-out;
			}
			
			#pageElements .steps li.step.licenses .nav.left{
				left:0px;
				background-position:0px 0px;	
				background-image:url("/resources/images/steps/licenses/nav-left.png");
			}
			
			#pageElements .steps li.step.licenses .nav.left:hover{
				background-position:-52px 0px;	
			}
			
			#pageElements .steps li.step.licenses .nav.right{
				right:0px;
				background-position:-52px 0px;
				background-image:url("/resources/images/steps/licenses/nav-right.png");
			}
			
			#pageElements .steps li.step.licenses .nav.right:hover{
				background-position:0px 0px;	
			}
			
.layerType1{
	position:fixed;
	top:0px;
	bottom:0px;
	width:100%;
	left:100%;
	z-index:999;
	background-image:url("/resources/images/common/layers/bg-layers.png");
	
	-webkit-transition: left .4s ease-in-out;    
    -moz-transition: left .4s ease-in-out;    
    -o-transition: left .4s ease-in-out;    
    transition: left .4s ease-in-out;
}

.layerType1.show{
	left:0px;
}
	
	.layerType1 .closer{
		position:absolute;
		top:20px;
		right:30px;	
	}
	
	.layerType1 .closer:hover{
		opacity:0.8;	
	}
	
#downloadLayer{
	
}

body[data-platform="tablet"] #downloadLayer{
	display:none;
}

	#downloadLayer .contents{
		position:absolute;
		top:100px;
		width:800px;
		left:50%;
		margin-left:-400px;
	}
	
		#downloadLayer .contents .claimBG{
			position:absolute;
			width:572px;
			left:50%;
			margin-left:-286px;
			z-index:1;
		}
		
		#downloadLayer .contents .claim{
			position:absolute;
			width:572px;
			left:50%;
			top:32px;
			margin-left:-286px;
			z-index:2;
			color:#FFF;
			text-align:center;
			font-size:28px;
			line-height:1.1em;
		}	
		
			#downloadLayer .contents .claim span{
				font-size:35px;
				display:block;
				color:#fbf056;
				
			}
			
		#downloadLayer .contents .boxes{
			position:absolute;
			top:190px;
			left:20px;
			overflow:hidden;
		}
		
			#downloadLayer .contents .boxes .box{
				width:248px;
				height:160px;
				float:left;	
				background-color:#404040;
				background-color:rgba(255,255,255,0.8);
				margin-right:7px;
				position:relative;
				
				padding-left:70px;
				padding-top:30px;
				padding-right:15px;
				-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;				
			}
			
			#downloadLayer .contents .boxes .box:last-child{
				margin-right:0px;	
			}
			
				#downloadLayer .contents .boxes .box .systemIcon{
					position:absolute;
					width:48px;
					height:48px;
					background-image:url("/resources/images/download/system-icons.png");
					background-repeat:no-repeat;
					top:15px; 
					left:15px;
				}
				
				#downloadLayer .contents .boxes .box:nth-child(1) .systemIcon{
					background-position:-96px 0px;
				}
				
				#downloadLayer .contents .boxes .box:nth-child(2) .systemIcon{
					background-position:-48px 0px;
				}
				
				#downloadLayer .contents .boxes .box:nth-child(3) .systemIcon{
					background-position:0px 0px;
				}

				#downloadLayer .contents .boxes .box .systemLabel{
					font-size:23px;	
				}
				
				#downloadLayer .contents .boxes .box .systemDescription{
					margin-top:8px;
					font-size:13px;
				}
				
				#downloadLayer .contents .boxes .box .btnDownload{
					position:absolute;
					bottom:25px;
					left:50%;
					background-color:#7FBA00;
					height:30px;
					overflow:hidden;
					border-radius:15px;
					-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
					padding:7px 40px 0px 25px;
					color:#FFF;
					margin-left:-70px;
					width:140px;
					display:inline-block;
					font-size:16px;
					
					background-image:url("/resources/images/download/arrow-down.png");
					background-position:right center;
					background-repeat:no-repeat;
				}
				
				#downloadLayer .contents .boxes .box .btnDownload:hover{
					background-color:#75AB00;
				}
				
				#downloadLayer .contents .boxes .box .btnDownload.off{
					opacity:0.3;
				}
				
				#downloadLayer .contents .boxes .box .btnDownload.off:hover{
					background-color:#7FBA00;
				}
				
		#downloadLayer .contents .info{
			position:absolute;
			top:410px;
			width:100%;
			left:0px;
			text-align:center;
			-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
			padding-left:100px;
			padding-right:100px;
		}
		
			#downloadLayer .contents .info p{
				color:#999;	
			}