/*  
	Version: 1.0
	Description: vCard
	Author: Mohammad Koubeissi
	Author URL: http://www.qbessi.com

*/

/* Default styles */

@import url("reset.css");

/*-------------------------------------------------------------------------------------------

INDEX:

1. SETUP
-1.1 Defaults
-1.2 Hyperlinks

2. SITE STRUCTURE & APPEARANCE
-2.1 Layout
-2.2 Social
-2.3 Tipsy

3. Typography

-------------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------------*/
/* 1. SETUP */
/*-------------------------------------------------------------------------------------------*/

/* 1.1 Defaults */

body  { background: #FFF url('../images/bg.png') repeat-x; font: 12px Helvetica, Arial, sans-serif; line-height: 1.5; color: #4d4d4d; } 

/* 1.2 Hyperlinks */

a:link, a:visited {  }
a:hover  {  }

/*-------------------------------------------------------------------------------------------*/
/* 2. SITE STRUCTURE & APPEARANCE */
/*-------------------------------------------------------------------------------------------*/

/* 2.1 Layout */
.container { margin: 140px auto; width: 960px; -webkit-animation-name: pop; -webkit-animation-duration: 1s;-webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in; }
.logo { margin: 0 auto; background: url('../images/logo.png') no-repeat; text-indent: -9999px; width: 212px; height: 66px; }
.clouds { background: url('../images/clouds.png') repeat-x; height: 124px; margin-top: 50px;}


/* 2.2 Social */
.social { margin: 30px 0 0 420px; }
.social a {  float: left; margin-right: 15px; background: url('../images/social.png') no-repeat; width: 32px; height: 32px;  text-indent: -9999px; }
.social a.email { background-position: 0 0; } 
.social a.linkedin { background-position:0 -33px; } 
.social a.twitter {  background-position:0 -66px; }

/* 2.3 Tips */
.tipsy{padding:5px; font-size:10px; opacity:0.8; filter:alpha(opacity=80); background-repeat:no-repeat;  background-image:url("../images/tipsy.gif")}
.tipsy-inner{padding:5px 8px 4px 8px; background-color:#000; color:#FFF; max-width:200px; text-align:center; font-size:12px}
.tipsy-inner{-moz-border-radius:3px; -webkit-border-radius:3px}
.tipsy-north{background-position:top center}

/* 2.4 Animation */
#cloud{position:absolute; left:5%; top:15px; z-index:2; width:85px; height:39px; background-image:url(../images/cloud1.png); background-repeat:no-repeat}
#cloud2{position:absolute; left:25%; top:65px; z-index:3; width:142px; height:49px; background-image:url(../images/cloud2.png); background-repeat:no-repeat}
#cloud3{position:absolute; left:50%; top:10px; z-index:4; width:95px; height:44px; background-image:url(../images/cloud3.png); background-repeat:no-repeat}
#cloud4{position:absolute; left:60%; top:35px; z-index:5; width:161px; height:52px; background-image:url(../images/cloud4.png); background-repeat:no-repeat}
#cloud5{position:absolute; left:75%; top:80px; z-index:6; width:161px; height:52px; background-image:url(../images/cloud5.png); background-repeat:no-repeat}
#cloud6{position:absolute; left:90%; top:22px; z-index:1; width:95px; height:44px; background-image:url(../images/cloud6.png); background-repeat:no-repeat}
@-webkit-keyframes pop{from{-webkit-transform:scale(.1); opacity:0}
85%{-webkit-transform:scale(1.05); opacity:1}
to{-webkit-transform:scale(1)}
}

/*-------------------------------------------------------------------------------------------*/
/* 3. Typography
/*-------------------------------------------------------------------------------------------*/

h2 { font-size: 34px; color: #000; text-align: center; width: 550px; line-height: 40px; margin: 30px auto; }