/* 
DON'T STEAL, BE INSPIRED!

Description: Business card Design | Designed by Johnie Webdesign
Inspired: http://jakeprzespo.me/
Version: 
Author: Johnie Webdesign
Author URL: http://johnie.se/
*/

/*** VARIABLES ***/

/*** GLOBAL DEFAULTS ***/
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}
strong { font-weight: bold }
em { font-style: italic }
a img { border:none }

html, body{
	background: gray url('/businesscard/images/perforated.png') top left repeat;
	font-family: Lucida Grande, 'Helvetica Neue', Arial, Helvetica, sans-serif;
	color: #707070;
	text-shadow: 1px 1px 1px #FFFFFF;
}

/*** GENERAL ELEMENTS ***/

/* links */
a{
	color: #505050;
	text-decoration: none;
	font-weight: bold;
}

a:hover{
	color: #707070;
}

.clear{
	clear: both;
	margin: 0;
	padding: 10px 0;
}

/* headings */
h1{font-size: 85%; text-transform: uppercase; letter-spacing: 0px; margin-bottom: 10px; font-weight: bold; color: #505050;}
h2{}
h3{}
h4{}
h5{}
h6{}

/* other typography */
p{word-spacing: .3em; font-size: 70%; margin-bottom: 10px;}
img{}
hr{}
small{}
pre{}
blockquote{}
blockquote p{}
blockquote blockquote{}

/*** STRUCTURE ***/

#wrapper{
	padding: 20px 0 0 0;
	min-height:100%;
	height:auto !important;/* <- ie6 ignores it */
	height:100%;/* fix */
	/*background: transparent url('/businesscard/images/wrapper_highlight.png') top center no-repeat;*/
}

#cardWrap{
	position: relative;
	margin: 0 auto;
	width: 500px;
	padding-bottom: 20px;
	background: transparent url('/businesscard/images/card_bg.png') top left repeat-y;
}

#cardHighlight{
	position: relative;
	width: 460px;
	min-height: 100%;
	padding: 20px;
	background: transparent url('/businesscard/images/card_highlight.png') top left repeat-x;
}

#cardShadow{
	position: absolute;
	bottom: -36px;
	left: -24px;
	width: 548px;
	height: 106px;
	background: transparent url('/businesscard/images/card_shadow.png') top left no-repeat;
}

.clip{
	background: transparent url('/businesscard/images/clips.png') no-repeat;
	width: 44px;
	height: 44px;
	position: absolute;
	z-index: 1;
}

.left{
	background-position: 0 0;
	top:-15px;
	left: -15px;
}

.right{
	background-position: 0 -44px;
	top: -15px;
	right: -15px;
}

.hiring{
	background: transparent url('/businesscard/images/hiring.png') no-repeat;
	width: 194px;
	height: 22px;
	position: absolute;
	top:5px;
	left: 40px;
	z-index: 1;
	cursor: pointer;
}

.hireAble{
	background-position: 0 -22px;
}

#menu{
	position: absolute;
	top:10px;
	right: 50px;
	z-index: 10;
}

.menu_links{
	position: relative;
	width: 24px;
	background: transparent url('/businesscard/images/menuicons.png') 0 0 no-repeat;
	margin-right: 10px;
	height: 20px;
}

#menu_home{
	background-position: 0 0;
}

#menu_speaker{
	background-position: 0 23px;
}

#menu_portfolio{
	background-position: 0 46px;
}

#menu_social{
	background-position: 0 69px;
}

.nav{
	background: transparent url('/businesscard/images/nav.png') no-repeat;
	width: 12px;
	height: 11px;
	position: absolute;
	top:0px;
	cursor: pointer;
	z-index: 1;
}

.up{
	background-position: 0 0;
	right: 20px;
}

.down{
	background-position: 0 -11px;
	float: right;
	right: 5px;
}

#usethenav{
	background: transparent url('/businesscard/images/usethenav.png') no-repeat;
	width: 146px;
	height: 28px;
	position: absolute;
	right: -160px;
	top: 13px;
	z-index: 1;
}

#home{
	background: transparent url('/businesscard/images/card_jw.png') center center no-repeat;
}

#me_left{
	float: left;
	width: 45%;
	padding-top: 20px;
}

#johnie{
	background: transparent url('/businesscard/images/johnie_thumb.png') top left no-repeat;
	width: 191px;
	height: 144px;
	position: relative;
	cursor: pointer;
}

#biggerJ{
	background: url('/businesscard/images/biggerJ.jpg') top left no-repeat;
	width: 600px;
	height: 400px;
	z-index: 4;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-box-shadow:0 0 10px #000;
	-moz-box-shadow:0 0 10px #000;
	cursor: pointer;
	display: none;
}

#phone{
	background: transparent url('/businesscard/images/phone.png') center left no-repeat;
	padding: 0 0 0 24px;
	font-weight: bold;
}

#email{
	background: transparent url('/businesscard/images/email.png') center left no-repeat;
	padding: 0 0 0 24px;
}

#me_right{
	float: right;
	width: 55%;
	padding-top: 40px;
}

#tweet{
	background: transparent url('/businesscard/icons/tweet2.png') left center no-repeat;
	padding: 25px 0 36px 100px;
	font-family: Georgia, Helvetica, Arial;
	color: #707070;
	font-size: 16px;
	text-shadow: 1px 1px 1px #FFFFFF;
	font-weight: normal;
	font-style: italic;
	margin: 0;
}

#tweets{
	display: inline;
}

a#tweetlink{
	text-decoration: none;
	font-family: Georgia, Helvetica, Arial;
	color: #999999;
	font-size: 12px;
	text-shadow: 1px 1px 1px #FFFFFF;
	font-weight: bold;
	font-style: italic;
	position: relative;
	display: inline;
}

a#tweetlink:hover{
	color: #707070;
}

/*** SLIDER ***/

.panel{
	height: 220px;
	position: relative;
	margin-bottom: 20px;
}

#scroll{
	position: relative;
}