/*-  BASE STYLES
----------------------------------------------------------------------*/

/*- self-clearing floats ----------*/

.mod:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/*- fluid images and objects ----------*/

img,
object,
embed {max-width: 100%;}


/*- optional vanity styles ----------*/

::selection {background: #EA4C89;}
::-moz-selection {background: #EA4C89;}

img::selection {background: transparent;}
img::-moz-selection {background: transparent;}

@media only screen and (max-device-width: 480px) {

	html {-webkit-text-size-adjust: none}
	a {-webkit-tap-highlight-color: rgba(200,0,0,0.4);}

}


@font-face {
   font-family: GRB;
   src: url("../fonts/grb.otf") format("opentype");
}


/*- LET'S GET STARTED!
----------------------------------------------------------------------*/


body {
	padding: 0;
	margin: 8em auto 0;
	width: 376px;
	background-color: #fff;
	background: url(../img/bg.jpg) repeat-x top center;
	color: #333;
	font: normal 16px/22px Helvetica, Arial, Verdana, sans-serif;
	font-family: "rooney-web-1","rooney-web-2", sans;
}


abbr {
	cursor: help;
}

h1 {
	/*font-family: GothamRoundBold;*/
	font-family: "vinyl-1","vinyl-2";
	font-weight: 900;
	/* font-size: 4.7em; */
	font-size: 75px;
	color: #333;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 2px;
	text-shadow: 1px 1px 0px #fff, 2px 2px 0px #99CCCC;
	margin-left: -12px;
	line-height: .95em;
}

h2 {
	font-family: GRB;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 6px;
	font-size: 25px;
	height: 24px;
	width: 100%;
	padding: 13px 0 8px;
	border-top: 1px solid #ECECEC;
	border-bottom: 1px solid #ECECEC;
	
	
}

h3 {
	color: #cbcbcb;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 6px;
	margin-left: -5px;
	font: 700 1.1em GRB;
}

section p {
	margin: .8em .3em;
	font-family: "rooney-web-1","rooney-web-2", serif;
	font-style: italic;
	font-size: .9em;
	line-height: 1.3em;
	font-weight: 300;
	color: #333;
	text-align: center;
	
}

footer p {
	margin: .4em 0 8em;
	font-family: "rooney-web-1","rooney-web-2", sans;
	font-style: italic;
	font-size: .6em;
	font-weight: 500;
	color: #999;
	
}

a {
	color: #6994a3;
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	color: #000;
}


#bloom {
	width: 106px;
	margin: 1em auto;
}



/* Main Header */

body > header {
	/*border: 1px solid red;*/
}
header > hgroup {
	margin: .4em 0;
	/*border: 1px solid blue;*/
}
header > hgroup h1{
	margin-bottom: 3px;
}

/* Main NAV */
header nav {
	font-family: GRB;
	text-transform: uppercase;
	letter-spacing: 6px;
	font-size: 25px;
	height: 24px;
	width: 100%;
	padding: 13px 0 8px;
	border-top: 1px solid #ECECEC;
	border-bottom: 1px solid #ECECEC;
	
}

header nav ul {list-style: none;}
header nav li {float: left; display: inline;}

header nav a:link, header nav a:visited {
	color: #4A585B;
	/*background: #842346;*/
	padding: 0 0 0 34px;
	text-decoration: none;
	margin: 0 0 0 20px;
	background-image: url(../img/bullet.png);
	background-position: 0 center;
	background-repeat: no-repeat;

}

header nav li:first-child a {

	margin-left: 0;
	
	padding: 8px 0 8px;
	background-image: none;
}

header nav a:hover, header nav a:active,
header nav .active a:link, header nav .active a:visited {
	color: #EA4C89;
}


/* Social Nav */
.social {
/*	border: 1px solid red;*/
	height: 90px;

	border-top: 1px solid #ECECEC;
	border-bottom: 1px solid #ECECEC;
	
	
}

.social ul {list-style: none;}
.social li {float: left; display: inline;}

.social li a {
	display: block;
	width: 60px;
	height: 60px;
	margin: 15px 0 15px 42px;

	color: #333;
	color: rgba(255, 255, 255, 0);
}
.social li:first-child a {
	margin-left: 0;
}

.twitter a {
	background: url(../img/icon-twitter.png) no-repeat center top;
}
.flickr a {
	background: url(../img/icon-flickr.png) no-repeat center top;
}
.dribbble a {
	background: url(../img/icon-dribbble.png) no-repeat center top;
}
.lastfm a {
	background: url(../img/icon-lastfm.png) no-repeat center top;
}
.social li a:hover {
	background-position: center bottom;
}



/* Current Projects */

#projects {
	height: 290px;
	padding: 13px 0 8px;
	border-top: 1px solid #ECECEC;
	border-bottom: 1px solid #ECECEC;
}

#projects p {
	margin: 0 1.3em;
	font-family: "rooney-web-1","rooney-web-2", serif;
	font-style: italic;
	font-size: .7em;
	line-height: 1.3em;
	font-weight: 300;
	color: #424242;
	text-align: center;
}

#projects h3 {
	font-size: 1.3em;
	letter-spacing: 8px;
	margin-left: 5px;
}


#projects .items {
	float: left;
	width: 366px;
	height: 250px;
	background: #F7F7F7;
	margin: 10px 6px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	
	-webkit-transition: background .3s linear;
	-moz-transition: background .3s linear;
	-o-transition: background .3s linear;
	transition: background .3s linear;
}

#projects .items#fruitmemory {

}

#projects .items#dayone {

}

#fruitmemory .img {
	margin: 15px;
	width: 150px;
	height: 170px;
	background: url(../img/project-fruitmemory.png) no-repeat 0 0;
	
	z-index: 20;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
#fruitmemory:hover .img {

	background: url(../img/project-fruitmemory.png) no-repeat -150px 0;
	
	opacity: 1;
}
a #fruitmemory:hover {
	background: #7e8495;
}

#dayone .img {
	margin: 0;
	width: 366px;
	height: 250px;
	background: url(../img/dayone.png) no-repeat 0 0;
	
	z-index: 20;
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	-o-transition: all 0.1s;
	transition: all 0.1s;
}
#dayone:hover .img {
	background: url(../img/dayone.png) no-repeat -366px 0;
}
a #dayone:hover {
	background: #FFF;
}



#projects .items#fruitmemory a.img {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}