*{
  padding: 0;
  margin: 0;
  font-family: "MyriadProRegular";
  box-sizing: border-box;
}

body
{
	width: 834px;
	margin: 0 auto;
}

#mainContainer{
  /* width: 834px; */
  /* margin: 0 auto; */
  background-color: rgb(131, 120, 172);
  background-image: url(../assets/content-bg.png);
  background-repeat: no-repeat repeat;
  padding-bottom: 40px;
}

#headerContainer{
  position: relative;
	/* width: 834px; */
  height: 445px;
  background-image: url(../assets/diamonds.png);
  background-repeat: no-repeat;
}

/* #### iPhone 4+ Portrait or Landscape #### */
/*@media only screen and (max-device-width: 834px) {
	body { margin: 0; }
}
/*
@media only screen and (max-width: 360px) {
	#mainContainer, #headerContainer{ 
		width: 360px;
}
}

@media only screen and (max-width: 400px) {
	#mainContainer, #headerContainer{ 
		width: 400px;
}
}*/

#headerContainer .piglette-logo,
#headerContainer .chupa-chups-logo{
  position: absolute;
  background-repeat: no-repeat;
  top: 5px;
}

#headerContainer .piglette-logo{
  height: 111px;
  width: 150px;
  left: 5px;
  background-image: url('../assets/piglette-logo.png');
}

#headerContainer .chupa-chups-logo{
  height: 99px;
  width: 97px;
  right: 5px;
  background-image: url('../assets/chupa-chups-logo.png');
}

#contentContainer{
  width: 722px;
  margin: 0 auto;
}

/*
 * Form
 */
#contentContainer form{
  display: block;
  margin: 20px auto;
}

#contentContainer form input, a.button, button{
  display: block;
  width: 444px;
  border: none;
  margin: 0 auto;
}

#contentContainer form .textInput{
  position: relative;
  height: 64px;
  width: 444px;
  background-image: url('../assets/input-border.png');
  padding: 11px 12px 0px 12px;
  margin: 0 auto 14px auto;
}

#contentContainer form .textInput input{
  width: 100%;
  height: 43px;
  text-align: center;
  font-size: 20px;
  border-radius: 5px;
  border: 1px solid rgba(100, 50, 50, 0.5);
  padding: 0 10px;
}

#contentContainer form input[readonly]{
	background-color: goldenrod;
}

#contentContainer form .textInput input::-webkit-input-placeholder,
#contentContainer form .textInput input::-moz-placeholder,
#contentContainer form .textInput input:-moz-placeholder,
#contentContainer form .textInput input:-ms-input-placeholder{
  color: red;
}

#contentContainer form input[type="submit"], button, a.button{
  height: 64px;
  border-radius: 14px;
  box-shadow: 0 0 2px 2px rgba(10, 10, 10, 0.1);
  color: rgb(254, 219, 40);
  text-transform: uppercase;
  font-size: 46px;
  cursor: pointer;

  background: rgb(210,107,220);
  background: -moz-linear-gradient(top,  rgb(210,107,220) 0%, rgb(124,54,197) 100%);
  background: -webkit-linear-gradient(top,  rgb(210,107,220) 0%,rgb(124,54,197) 100%);
  background: linear-gradient(to bottom,  rgb(210,107,220) 0%,rgb(124,54,197) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d26bdc', endColorstr='#7c36c5',GradientType=0 );
}

#contentContainer form p{
  text-align: center;
  font-size: 21px;
  color: white;
  font-style: italic;
}

#contentContainer form .message, #blockContainer form .error{
  display: none;
  margin-bottom: 20px;
}

#blockContainer form .error{
	margin-top: 10px; 
}

#blockContainer form .error p:nth-child(2){
	font-style: initial;
	color: orange;
}

#contentContainer form .loading{
  display: none;
  text-align: center;
}

#contentContainer form .loading > div{
  width: 32px;
  height: 32px;
  background-image: url('../assets/loading.png');
  margin: 19px auto;

  animation: form-loading-div-rotate 1s infinite linear;
  -webkit-animation: form-loading-div-rotate 1s infinite linear;
  -moz-animation: form-loading-div-rotate 1s infinite linear;
}

#goMain
{
	text-decoration: none;
	margin-top: 30px;
	line-height: 64px;
	display:none;
	/* visibility: hidden; */
}

@keyframes form-loading-div-rotate {
  from {
    transform: rotateZ(360deg);
  }
  to {
    transform: rotateZ(0deg);
  }
}

/* << Form */

#rulesBlock{
  text-align: center;
}

#rulesBlock h1{
  font-size: 18px;
  text-transform: uppercase;
  color: rgb(254, 219, 40);
}

#rulesBlock .yellowArrows{
  height: 24px;
  width: 24px;
  background-image: url('../assets/yellow-arrows.png');
  margin: 13px auto;
  cursor: pointer;
}

#rulesBlock .yellowArrows.up{
  -webkit-transform: rotateZ(180deg);
  -moz-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}

#rulesBlock{
  margin-top: 20px;
}

#rulesBlock .rules{
  display: none;
}

#rulesBlock .rules p{
  font-size: 18px;
  color: rgb(255, 244, 189);
  margin-top: 20px;
}

#rulesBlock .rules p:first-child{
  margin-top: 0;
}

#rulesBlock .rules a{
  color: rgb(255, 244, 189);
}

#rulesBlock .nextDraw{}

#rulesBlock .nextDraw p{
  color: white;
  font-size: 21px;
}

#rulesBlock .nextDraw p.date{
  color: rgb(254, 219, 40);
}

#rulesBlock .nextDraw a{
  font-size: 16px;
  color: white;
  text-decoration: none;
}

/* 
 * Check code block
 */
#checkCodeBlock{}

#checkCodeBlock h1,
#registrationBlock h1,
#registrationCompletedBlock h1{
  text-align: center;
  font-family: 'Lobster';
  font-size: 37px;
  color: rgb(254, 219, 40);
  font-weight: bold;
  /*text-shadow: 0 0 6px rgb(101, 96, 122);*/
  text-shadow: 0 0 3px rgb(10, 10, 10);
  margin-top: 20px;
  padding-bottom: 20px;
}

#checkCodeBlock > p,
#registrationBlock > p,
#registrationCompletedBlock > p{
  text-align: center;
  font-size: 21px;
  color: white;
  /*padding: 20px 0;*/
}
/* << Check code block */

/* 
 * Registration block 
 */
#registrationBlock form .message{
  display: block;
}

#registrationBlock #chagree{
	display: initial;
	margin: initial;
	width: initial;
	/* float: left; */
}

#registrationBlock form
{
	text-align: center;
	color: white;
}

a.golden
{
	color: rgb(254, 219, 40);
  margin-top: 5px;
}
/* << Registration block */

/* 
 * Registration completed block 
 */
#registrationCompletedBlock > .number{
  text-align: center;
  font-size: 50px;
  color: rgb(254, 219, 40);
  font-weight: bold;
  text-shadow: 0 0 3px rgb(10, 10, 10);
}

#registrationCompletedBlock button{
	margin-top: 20px;
}
/* << Registration completed block  */