/*************************************************************************
**************************************************************************

Designed and Coded by Keith Mitchell
http://thepixelforest.com

TABLE OF CONTENTS
01. GLOBAL
02. COPY STYLES
03. HEADER
04. HORIZONTAL SCROLLING CONTROL
05. PROJECT THUMBS
06. PROJECTS
07. DRIBBBLE FEED
08. FOOTER
09. LINKAGE

**************************************************************************
01. GLOBAL
*************************************************************************/

@font-face{
	font-family:'ItaliaBook';
	src:url('fonts/italia.eot');
	src:url('fonts/italia.eot?#iefix') format('embedded-opentype'),
	    url('fonts/italia.woff') format('woff'),
	    url('fonts/italia.ttf') format('truetype'),
	    url('fonts/italia.svg#ItaliaBook') format('svg');
	font-weight:normal;
	font-style:normal;
}
html, body{
	margin:0;
	padding:0;
	font:12px/21px Helvetica, Arial, sans-serif;
	-webkit-font-smoothing:antialiased;
	color:#444444;
}

/*************************************************************************
02. COPY STYLES
*************************************************************************/

p{
	padding:0;
	margin-top:0;
	margin-bottom:21px;
}
h1, h2, h3, h4, h5{
	margin:0;
	padding:0;
	font-family:'ItaliaBook', Times, 'Times New Roman', serif;
	font-weight:normal;
}
h1{
	font-size:28px;
	line-height:32px;
	font-weight:normal;
	color:#FFFFFF;
	text-shadow:0 1px 2px #222222;
}
h2{
	font-size:17px;
	line-height:22px;
	color:#FFFFFF;
	text-shadow:0 1px 2px #222222;
}
h3{
	font-size:18px;
	line-height:21px;
	margin-top:85px;
	color:#333333;
	text-shadow:2px 2px 0 #DDDDDD;
}
h4{
	font-size:22px;
	line-height:28px;
}
h5{
	font-size:16px;
	margin-bottom:6px;
	text-shadow:2px 2px 0 #DDDDDD;	
}

/*************************************************************************
03. HEADER
*************************************************************************/

#header-outer{
	width:100%;
	background:#FFFFFF;	
}
#header-inner{
	position:relative;
	z-index:2;
	background:url(../images/header.jpg) no-repeat top center;
	/* shadow */
	-moz-box-shadow:0px 6px 24px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow:0px 6px 24px rgba(0, 0, 0, 0.8);
	box-shadow:0px 6px 24px rgba(0, 0, 0, 0.8);
}
#header{
	width:960px;
	height:320px;
	margin:0 auto;
	padding:45px 0 0 0;
}
a.logo{
	width:200px;
	height:200px;
	margin:-30px 45px 0 0;
	display:block;
	float:left;	
}
h2.left{
	width:345px;
	padding:25px 20px 0 0;
	float:left;	
}
h2.right{
	width:345px;
	padding:25px 0 0 0;
	float:right;	
}
#subheader{
	height:60px;
	text-align:center;	
}
p.specializing{
	position:relative;
	margin:10px 0 9px 0;
	font:14px/14px 'ItaliaBook', Times, 'Times New Roman', serif;
	text-shadow:2px 2px 0 #DDDDDD;
	background:transparent url(../images/bg-specializing.png) no-repeat top center;
}
p.areas{
	position:relative;
	font:18px/22px 'ItaliaBook', Times, 'Times New Roman', serif;
	text-shadow:2px 2px 0 #DDDDDD;
}
p.areas span{
	padding:0 4px;
	color:#AEADAA;
}
p.description{
	position:relative;
	margin-top:-70px;
	font:18px/22px 'ItaliaBook', Times, 'Times New Roman', serif;
	text-shadow:2px 2px 0 #DDDDDD;
}

/*************************************************************************
04. HORIZONTAL SCROLLING CONTROL
*************************************************************************/

#main-outer{
	width:auto;
	background:#3B3935 url(../images/body-bgRepeat.jpg) repeat top left;
}
#main{
	width:960px;
	margin:0 auto;
	position:relative; /* IE7 requires to scroll using jquery scrollTo */
	overflow:hidden;
}
#main-scroller{
	width:10000px;
}
.page{
	margin-right:960px;
	float:left;	
}

/*************************************************************************
05. PROJECT THUMBS
*************************************************************************/
 
#container-thumbs{
	width:1000px;
	min-height:1390px;
	position:relative;
	background:transparent url(../images/bg-strings.png) no-repeat top center;
}
.card{
	position:absolute;
}
.card .front{
	width:inherit;
	height:inherit;
	z-index:900;
	position:absolute;
	/* shadow */
	-moz-box-shadow:0px 6px 24px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow:0px 6px 24px rgba(0, 0, 0, 0.8);
	box-shadow:0px 6px 24px rgba(0, 0, 0, 0.8);
}
.card.flip .front{
	z-index:900;
}
.card .back{ /* old browsers - one bg image */
	background:#FFFFFF url(../images/thumb-string-back.png) no-repeat top center;
}
.card .back{ /* modern browsers - two bg images */
	width:100%;
	height:100%;
	top:0;
	left:0;
	position:absolute;
	z-index:800;
	overflow:hidden;
	text-align:center;
	background: url(../images/thumb-string-back.png) no-repeat top center, url(../images/bg-card-back.jpg) repeat top center;
	/* shadow */
	-moz-box-shadow:0px 12px 80px rgba(0, 0, 0, 1.0);
	-webkit-box-shadow:0px 12px 80px rgba(0, 0, 0, 1.0);
	box-shadow:0px 12px 80px rgba(0, 0, 0, 1.0);
}
.card.flip .back{
	z-index:1000;
}
.card .back a.view-detail{
	width:100px;
	margin:15px auto;
	padding:4px 0px 3px 0;
	display:block;
	border:1px solid #E3E3E3;
	box-shadow:1px 2px 0px #F1F1F1;
	background:#F7F7F7;
	text-align:center;
	font:13px/21px 'ItaliaBook', Times, 'Times New Roman', serif;
	text-transform:uppercase;
	text-shadow:2px 2px 0 #DDDDDD;
}
.load{ /* ajax loader */
	width:97%;
	height:16px;
	margin:0 4px;
	display:block;
	position:absolute;
	bottom:4px;
	right:0;
	background:url(../images/loader.gif) repeat-x top left;
}
*:first-child+html .load{ /* hide from IE7 */
	visibility:hidden;
}
.recent-launch{
	position:absolute;
	bottom:-3px;
	right:-3px;
}

/*************************/

.gigapan{
	width:463px;
	height:298px;
	margin:60px 0 0 8px;
}
.mba{
	width:219px;
	height:316px;
	margin:55px 0 0 494px;
}
.bigfish{
	width:225px;
	height:307px;
	margin:60px 0 0 735px;	
}
.slu{
	width:220px;
	height:277px;
	margin:380px 0 0 14px;	
}
.corwin{
	width:225px;
	height:276px;
	margin:388px 0 0 252px;	
}
.saw{
	width:460px;
	height:301px;
	margin:396px 0 0 500px;	
}
.midu{
	width:469px;
	height:283px;
	margin:685px 0 0 10px;
}
.idea{
	width:225px;
	height:280px;
	margin:722px 0 0 497px;	
}
.lundin{
	width:219px;
	height:224px;
	margin:722px 0 0 737px;	
}
.marymac{
	width:447px;
	height:259px;
	margin:995px 0 0 19px;	
}
.intellibot{
	width:225px;
	height:263px;
	margin:1028px 0 0 487px;	
}
.dla{
	width:219px;
	height:261px;
	margin:975px 0 0 737px;	
}

/*************************************************************************
06. PROJECTS
*************************************************************************/

#container-detail{
	width:960px;
	min-height:300px;
}
#container-detail-inner{
	width:730px;
	min-height:300px;
	margin:0 auto 90px auto;
	padding-top:20px;
	position:relative;
	background:transparent url(../images/bg-strings-detail.png) repeat-y top center;
}
a.btn-back{
	width:82px;
	height:50px;
	margin:-25px 0 0 -115px;
	position:absolute;
	cursor:pointer;
	background:transparent url(../images/btn-back.png) bottom;
}
a.btn-launch{
	width:160px;
	height:50px;
	margin:-25px 0 0 288px;
	position:absolute;
	background:transparent url(../images/btn-launch.png) bottom;	
}
#container-detail-inner img{
	margin-top:50px;
	/* shadow */
	-moz-box-shadow:0px 6px 24px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow:0px 6px 24px rgba(0, 0, 0, 0.8);
	box-shadow:0px 6px 24px rgba(0, 0, 0, 0.8);	
}

/*************************************************************************
07. DRIBBBLE FEED
*************************************************************************/

#dribbble-outer{
	width:100%;
	height:150px;
	padding:25px 0 30px 0;
	background:url(../images/bg-dribbble.png) repeat-x top center;
}
#dribbble-inner{
	width:960px;
	margin:0 auto;
}
#dribbble-inner .intro{
	width:220px;
	padding:0 20px 0 0;
	float:left;
	color:#BABAB1;
	text-shadow:1px 1px 0 #000000;
}
#dribbble-inner h4{
	font-size:21px;
	line-height:26px;
}
#dribbble-inner h5{
	margin-top:18px;
	font-size:18px;
	text-shadow:1px 1px 0 #000000;
}
#dribbble-inner h5 a{
	padding-left:22px;
	color:#BABAB1;
	text-decoration:none;
	background:transparent url(../images/icon-dribbble.png) no-repeat left;
}
#dribbble-inner h5 a:hover{
	color:#FFFFFF;
	text-decoration:underline;
}
#dribbble-inner .thumbs{
	width:715px;
	float:left;	
}
#dribbble-inner .thumbs img{
	margin-right:30px;
	border:3px solid #FFFFFF;
	/* shadow */
	-moz-box-shadow:0px 2px 2px rgba(0, 0, 0, 1.0);
	-webkit-box-shadow:0px 2px 2px rgba(0, 0, 0, 1.0);
	box-shadow:0px 2px 2px rgba(0, 0, 0, 1.0);	
}

/*************************************************************************
08. FOOTER
*************************************************************************/

#footer-outer{
	width:100%;
	background:#E7E4DD;	
}
#footer-inner{
	background:url(../images/footer.jpg) no-repeat top center;
	-moz-box-shadow:0px -3px 6px rgba(0, 0, 0, 1.0);
	-webkit-box-shadow:0px -3px 6px rgba(0, 0, 0, 1.0);
	box-shadow:0px -3px 6px rgba(0, 0, 0, 1.0);
}
#footer{
	width:960px;
	height:275px;
	margin:0 auto;
}
#footer h4{
	height:80px;
	padding:15px 0 0 0;	
}
#footer .column{
	width:220px;
	padding:15px 20px 0 0;
	float:left;	
}
.goonies{
	width:180px;
	height:40px;
	margin-top:50px;
	display:block;	
}

/*************************************************************************
09. LINKAGE
*************************************************************************/

/* default */
a:link, a:visited, a:active {color:#333333; text-decoration:underline;}
a:hover{color:#225577; text-decoration:underline;}

/* header */
#header a:link, #header a:visited, #header a:active {color:#FFFFFF; text-decoration:underline;}
#header a:hover{color:#DDDDDD; text-decoration:underline;}

/* view details */
.card .back a.view-detail:link, .card .back a.view-detail:visited {color:#444444; text-decoration:none;}
.card .back a.view-detail:hover {background:#EEF8FF; border:1px solid #CEE4F4;}
.card .back a.view-detail:active {box-shadow:inset 0px 1px 3px #173950; }