@charset "UTF-8";
/* CSS Document */
@font-face { font-family: Qlassik_TB; src: url('/fonts/Qlassik_TB.ttf'); } 

html, body{
padding:0px;
margin:0px
}

body {
	background-color: #fff;
	font-size:20px;
	background-image:url('/images/blueGrain.jpg');
}

a {
	text-decoration:none;
}

#topBanner{
    width: 100%;
    height: 30px;
    padding: 3px;
    position:fixed;
    bottom:0;
    z-index:999999;
    
background:#ffffff;

}

#topBanner #about{
    margin-top: 8px;
    font-family:sans-serif;
    font-size: 60%; 
    color: #838383; 
    float:right; 
    padding-right:20px;
}

#about a{
	color: #326a84;
}    


#topBanner .fb-like{
float:left;
margin-top:3px;    
padding-left:14px;
}    

#test {
	position:absolute;
	left:50%;
	background:rgba(255,0,0,.5);	
}

.moveLeft
	{
		animation:keyLeft 1s;
		-moz-animation:keyLeft 1s; /* Firefox */
		-webkit-animation:keyLeft 1s; /* Safari and Chrome */
		-webkit-transform-origin: right bottom;
		-moz-transform-origin: right bottom;
		transform-origin: right bottom;
		-webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		animation-fill-mode: forwards;	
	}

.moveRight
	{
		animation:keyRight 1s;
		-moz-animation:keyRight 1s; /* Firefox */
		-webkit-animation:keyRight 1s; /* Safari and Chrome */
		-webkit-transform-origin: left bottom;
		-moz-transform-origin: left bottom;
		transform-origin: left bottom;
		-webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		animation-fill-mode: forwards;	
	}	


@keyframes keyLeft
{
	100% {transform:rotate(-15deg);}
}

@-moz-keyframes keyLeft
{
	100% {-moz-transform:rotate(-15deg);}
}

@-webkit-keyframes keyLeft
{
	100% {-webkit-transform:rotate(-15deg);}
}


/* */

@keyframes keyRight
{
	100% {transform:rotate(15deg);}
}

@-moz-keyframes keyRight
{
	100% {-moz-transform:rotate(15deg);}
}

@-webkit-keyframes keyRight
{
	100% {-webkit-transform:rotate(15deg);}
}




#wrapper {
	margin:0px auto;
	width: 557px;
	padding-bottom:20px;	
}

#title {
	text-align:center;
	width:600px;
}

#content {
	width: 557px;

	top: 236px;

}
#banner{
	margin-left:auto;
	margin-right:auto;
	width:533px;
}

#cookie{
        margin-top: 30px;
        margin-left:auto;
	margin-right:auto;
    	
        width: 557px;
    	
        height: 279px;
    	position:relative;
	cursor:pointer;
}

#content #click {
	position:absolute;
	top: 0px;
	left: -47px;
	z-index: 3;
}

#content #cookieLeft {
	position:absolute;
	top:10px;
	left: 123px;
	z-index:5;
}

#content #cookieRight {
	position:absolute;
	top:10px;
	left: 235px;
	z-index:4;
}
#content #glow {
	position:absolute;
	top: 74px;
	left: -108px;
	z-index:3;
}

#content #message{
	cursor:pointer;
	font-size:120%;
	font-family:Qlassik_TB;
	text-align:center;
	position:absolute;
	width:320px;
	background:rgba(255,255,255,.91);
	z-index: 6;
	left: 109px;
	top: 95px;
	padding:15px;
	
    -webkit-box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .3);
    -moz-box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .3);
    box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .3);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-moz-transform: scale(0);
	-webkit-transform: scale(0);
	transform: scale(0);	
}

#content #message p a{
	color:rgb(70, 70, 70);

}

#cta{
	margin-bottom: 50px;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	width:300px;
	text-align:center;
	
	-moz-transform: scale(0);
	-webkit-transform: scale(0);
	transform: scale(0);
	
}

button.css3button {
	cursor:pointer;
	font-family: Qlassik_TB;
	font-size: 100%;
	color: #ffffff;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#8fcdfc 0%,
		#0e0e4f);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#8fcdfc),
		to(#0e0e4f));
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border: 0px solid #950de3;
	-moz-box-shadow:
		0px 0px 7px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.6);
	-webkit-box-shadow:
		0px 0px 7px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.6);
	text-shadow:
		0px -1px 0px rgba(000,000,000,1),
		0px 1px 0px rgba(007,031,184,1);
}

button.mybutton{

		font-family: Qlassik_TB;
		font-size: 158%;
		color: #ffffff;
		padding: 10px 20px;
		background: -moz-linear-gradient(
			top,
			#8fcdfc 0%,
			#0e0e4f);
		background: -webkit-gradient(
			linear, left top, left bottom, 
			from(#8fcdfc),
			to(#0e0e4f));
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border: 0px solid #950de3;
		-moz-box-shadow:
			0px 0px 3px rgba(000,000,000,0.5),
			inset 0px 0px 1px rgba(255,255,255,0.6);		

		-webkit-box-shadow:
			0px 0px 3px rgba(000, 000, 000, 0.8),
			inset 0px 0px 1px rgba(255, 255, 255, 0.6);
			
		text-shadow:
			0px -1px 0px rgba(000,000,000,1),
			0px 1px 0px rgba(007,031,184,1);
	}

.showMessage
{
	animation:showMsg 1s;
	-webkit-animation:showMsg 1s;	
	-moz-animation:showMsg 1s;
	
	-webkit-transition: all 1000ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
	   -moz-transition: all 1000ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
	    -ms-transition: all 1000ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
	     -o-transition: all 1000ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
	        transition: all 1000ms cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */


	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	

}

@keyframes showMsg
{
	70% {transform: scale(1.1);}
	100% {transform: scale(1);}
}

@-webkit-keyframes showMsg
{
	70% {-webkit-transform: scale(1.1);}
	100% {-webkit-transform: scale(1);}
}

@-moz-keyframes showMsg
{
	70% {-moz-transform: scale(1.1);}
	100% {-moz-transform: scale(1);}
}


/* register */

#register, #mail, #aboutPage{
    margin-top: 20px;
	 margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    background:#ffffff;
    width:360px;
    padding: 20px;
    -webkit-box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .3);
    -moz-box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .3);
    box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .3);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

#register h1, #mail h1{
    color: #326a84;
    font-family:Qlassik_TB;
    margin: 0;
}

#register h2, #aboutPage h2{
    text-align:center;
    color: #326a84;
    font-family:Qlassik_TB;
    font-size:120%;
    margin: 0;
}


#register p, #mail p{
    color: #326a84;
    font-family:Qlassik_TB;
    margin-bottom:2px;
	
}

#register button, #mail button{
    margin-top:19px;    
}

#register input, #mail input{
        font-family: arial, san-serif;
	color: rgba(0, 0, 0, 0.5);
	font-size: 70%;
	background: #fff;
	padding: 6px 6px 6px 8px;
	width: 338px;
	height:20px;
	border: solid 1px #bcbbbb;
	outline: none;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
	box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

#errorMessage{
    margin: auto;
    margin-top: 20px;
    text-align:center;
    color: #326a84;
    font-family:Qlassik_TB;
    background:#ffffff;
    width:360px;
    padding: 20px;
    -webkit-box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .3);
    -moz-box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .3);
    box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .3);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}


#mail textarea{
   font-family: arial, san-serif;
	color: rgba(0, 0, 0, 0.5);
	font-size: 70%;
	background: #fff;
	padding: 6px 6px 6px 8px;
	width: 338px;
	height:50px;
	border: solid 1px #bcbbbb;
	outline: none;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
	box-shadow: inset 0 1px 2px rgba(0,0,0,.2);}

#capt{
    margin-top:20px;
    margin-left:-2px;
    }

#aboutPage p{
	font-family: arial, san-serif;
	color: rgba(60, 60, 60, 0.8);
	font-size: 80%;
	margin:0;
	margin-top:10px;
	line-height: 147%;	
}

#aboutPage a{
	color: #326a84;
	
}