/*
Title: Master styles for screen media
Author: r@ronnyo.com
*/

/* Body styles */

body {background: #777 url(images/bg6.jpg) right top; font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; text-align: center; width: 100%; overflow-x: hidden;}

#wrap {width:100%; margin:auto; position: relative;}

.card {
	position: relative;
	width: 420px; height: 200px; margin: 2.5em auto 2em auto; padding: 1em; border: 1px solid #DDD;
	background: #f0f1e0 url(images/vcard.png) right top; color: #333; text-align: left;
	-moz-box-shadow: -2px 5px 30px rgba(0,0,0,0.4);
	-webkit-box-shadow: -2px 5px 30px rgba(0,0,0,0.4);
}

h1, h2 {
	text-shadow: 1px -1px #DDD;
	font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
	font-style: italic;
}

h2 {font-size: 1.2em; color: #555; margin-right: 105px;}

.avatar {
	position: absolute; right: 0.9em; width: 106px; height: 123px;
	background: url(../images/logos.png) -189px 0px no-repeat;
	text-indent: -9999px;
}

.branding {clear: both; position: absolute; bottom: 1em; width: 420px;}

.branding a {display: block; text-decoration: none;}
#metacafe {
	width: 189px; height: 50px;
	float: left;
	background: url(../images/logos.png) left top no-repeat; text-indent: -9999px; 
}

#pixelsheaven {
	width: 130px; height: 50px;
	float: right;
	background: url(../images/logos.png) right top no-repeat; text-indent: -9999px; 
}

#metacafe:hover {background-position: left bottom;}
#pixelsheaven:hover {background-position: right bottom;}

/* Social Strip
----------------------*/
/* This strip uses a great fix by Paul from http://www.pmob.co.uk/pob/centred-float.htm */
#social{
	float: right;
	clear: both;
	position:relative;
	left:-50%;
	text-align:left;
	margin-bottom:1em;
}
#social ul{
	list-style:none; 
	position:relative;
	left:50%;
} 
#social li{
	float:left;
	margin-right:10px;
}
#social li.last{margin-right:0}
#social li a{
	background: url(images/social.png);
	float:left;
	text-decoration:none;
	text-indent: -9999px;
	width: 30px;
	height: 32px;
}
#social li a:hover, #social li a:focus, #social li a:active {position: relative; top: 2px;}

#social #linkedin { background-position: 0 0;} 
#social #facebook { background-position: -30px 0;}
#social #twitter { background-position: -60px 0;}
#social #diigo { background-position: -90px 0;}
#social #email { background-position: -120px 0;}

/* Footer */	
.footer {
	clear: both; margin: 2em 0 1em 0;
	text-align: center; font-size: 90%; color: #DDD;
	text-shadow: 1px -1px #666;
}

/* Misc
-----------------*/

/* self-clear floats */
.group:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}