body {
background : /*url(../images/bg.png) repeat */#ffffff;
}

/* MAIN DIV */

#main {
width : 960px;
margin : 20px auto;
}
header {
width : 211px;
}

/* COL_1 DIV */
/* the first column div styling, the logo and the egg is included here */

#col_1 {
clear : both;

margin-top : 70px;

width : 262px;
display : block;
}

/* The logo comes as a backgroung  */

#col_1 h1 {
background : url(../images/logo.png) center no-repeat;
text-indent : -1000px;
width : 960px;
height : 353px;
}

/* this is the egg picture */
#col_1 img {
float : left;
padding : 100px 10px 0 20px;
}


/* COL_2 DIV */
/* the second column div styling, the speech bubble, message and the countdoed are included here */

#col_2 {
float : right;
width : 380px;
margin-right : 150px;
}

/* this is the speech bubble div, it has a css3 gradient background */

#eggword {
	position:relative;
	width:340px;
	height:340px;
	margin:1em auto 80px;
	text-align:center;
	color:#fff; 
	background:#db3661;
	/* css3 */
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#e64c74), to(#d8305c));
	background:-moz-linear-gradient(#e64c74, #d8305c);
	background:-o-linear-gradient(#e64c74, #d8305c);
	background:linear-gradient(#e64c74, #d8305c);
	/*
	NOTES:
	-webkit-border-radius:170px; // produces oval in safari 4 and chrome 4
	-webkit-border-radius:170px; // produces oval in chrome 4 (again!) but not supported in safari 4
	
	*/
	-webkit-border--radius:170px;
	-moz-border-radius:170px;
	border-radius:170px;
}



/* creates the larger circle */
#eggword:before {
	content:"";
	position:absolute;
	bottom:-50px;
	right:200px;
	border-width:100px 0px 200px 100px;
	border-style:solid;
	border-color:transparent #db3661;
	z-index:-2;
transform:rotate(35deg);
-ms-transform:rotate(35deg); /* IE 9 */
-moz-transform:rotate(35deg); /* Firefox */
-webkit-transform:rotate(35deg); /* Safari and Chrome */
-o-transform:rotate(35deg); /* Opera */
}

/* hello there my friend text */

#eggword h1 {
padding : 67px 56px 15px 56px;
text-align : center;
font-family : 'Lobster', arial, sans-serif;
font-size : 50px;
color : #eae8e8;
}

/* the sorry, but... text */

#eggword p {
padding : 30px;
text-align : center;
font-family : Arial, Helvetica, sans-serif;
font-size : 24px;
color : #eae8e8;
}


/* the info about being under construction */

.firstinfo {
margin-top : 65px;
width : 960px;
font-family : Helvetica, sans-serif;
font-size : 24px;
color : #a7a7a7;
text-align : center;
}

/* styling the counddown */

#counter {
margin-top : 37px;
width : 380px;
height : 60px;
font-family : Arial, Helvetica, sans-serif;
font-weight:900;
  
font-size : 48px;
color : #585858;
}

.countDays, .countHours, .countMinutes, .countSeconds {
float : left;
width:52px;
height:100px;
padding-left : 35px;
width : 60px;
text-align : left;
display : block;
}
.digit {
position : absolute;
top : 0;
left : 0;
}
.position {
position : relative;
float : left;
width : 30px;
height:20px;
margin : 8px 0 0 0;
}
.boxName {
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
font-weight : 100;
text-transform : capitalize;
text-align:center;
width:70px;
margin: -20px 0 0 0;
}
/* margin left for DAYS and HOURS that the text may come to center much more */
.Days { margin-left: 10px; } 
.Hours { margin-left: 4px; }


/* NEWSLETTER SECTION */
/* this is the section that contains the newsletter form and the text above it */
section {
clear : both;
width : 960px;
padding-top : 20px;
}


/* the invitation to subscribe to the newsletter, starting with Meanwhile.. */

section p {
font-family : Arial, Helvetica, sans-serif;
font-size : 16px;
font-weight:400;
text-align : center;
color : #585858;
padding-bottom : 17px;
}

/* The div wich contains the form */

.form-container {
width : 960px;
height : 40px;
display : block;
position:relative;
}

/* the part where the email will be submitted */

.email {
width : 670px;
height : 38px;
margin : 0 0 0 160px;
padding-left : 26px;
background : #f5f5f5;
border : #c8c8c8 solid 1px;
border-radius : 6px;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
color : #585858;
font-style : italic;
text-align : left;
line-height : 14px;
}
/* the style of the email when the cursor is placed on it */

.email:focus {
outline : 0;
background : #f0f0f0;
}

/* This is the submit button, which is done fully with CSS3 */

.submit {
	moz-box-shadow:inset 0px 1px 0px 0px #f461a9;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f461a9;
	box-shadow:inset 0px 1px 0px 0px #f461a9;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e64b72), color-stop(1, #d8315b) );
	background:-moz-linear-gradient( center top, #e64b72 5%, #d8315b 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e64b72', endColorstr='#d8315b');
	background-color:#e64b72;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #d8315b;
	display:inline-block;
	color:#fcfcfc;
	font-family:arial;
	font-size:18px;
	padding:10px 31px;
	text-decoration:none;
	text-transform:uppercase;
	height:42px;
	width:116px;
	position:absolute;
	right:100px;
	}
/* styling the submit button when the mouse points on it */

.submit:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d8315b), color-stop(1, #e64b72) );
	background:-moz-linear-gradient( center top, #d8315b 5%, #e64b72 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d8315b', endColorstr='#e64b72');
	background-color:#d8315b;
} 


.submit:active {
	position:absolute;
	top:1px; 
}

/* SOCIAL DIV */
/* the social icons container div */
#social {
clear : both;
width : 320px;
margin : 26px auto;
}
/* the un-ordered list wich is used to display the social icons */

#social ul {
width : 320px;
}
/* the links in the ul, style to bring the icons side by side */

#social li {
float : left;
padding-left: 20px;
}

#social a {
	position:relative;
}

/* the icon images style */
#social li img {
width : 40px;
height : 40px;
border : #838282 solid 1px;
border-radius : 21px;
}
/* styling images when the mouse is over them */
#social li img:hover {
	border : #db3661 solid 2px;
	
}