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

   typography.css - Oh Hai! Welcome to my CSS codes.
   
       Index
	   
			01. Body
			02. Headings	
			03. Custom Headings					
			04. Lists
			05. Custom Lists
			06. Text Elements
			07. Custom Text Elements
			08. Tables			
			09. Wordpress  Alignment Styles
		   
		Frequently Used Colors
		
			Main Red - color: #E26363;
		 	Body Grey - color: #5b5b5b;
			Dark Grey - color: #353535;
			
		Fonts
			
			font-family: 'Alegreya', serif;
			font-family: 'Roboto', sans-serif;			
 
/* 01. Body   
-------------------------------------------------------------- */

body {
  	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	color: #5b5b5b;
	background: url("/img/common/background.jpg") no-repeat center -325px scroll;		
	/* -webkit-text-stroke: .5px Google Chrome, Y U NO LIKE ME? */			
	}
body.home {
	background: none;
	}


::selection {
	color:#FFF;
	background: #e26363; /* Safari */
	}
::-moz-selection {
	color:#FFF;
	background: #e26363; /* Firefox */
}	
	
/* 02. Headings - h1, h2, h3, etc.
-------------------------------------------------------------- */

h1 { font-size: 36px; }
h2 { 
	font-family: 'Alegreya', serif;
	font-size: 62px;
	font-weight: normal;
	line-height:1; 
	margin: 0px 0px 18px 0;
	}
h3 { 
	font-size: 18px;
	margin-bottom: 18px;
	-webkit-text-stroke: .5px /* Google Chrome, Y U NO LIKE ME? */			 
	}
h4 { 
	font-size: 14px;
	line-height:1.3; 	
	margin-bottom: 18px; 
	}
h5 { 
	font-size: 12px;
	line-height:1.5;
	margin-bottom: 18px;	 	 
	}

	/* 03. Custom Headings
	---------------------------------------------------------- */	
	#about h2, #work h2{
		font-size: 48px;
		margin-top:30px;
		margin-bottom: 20px;
		}
	#about h2 strong {
		font-weight:bold;
		color: #E26363;
		}		
	
	h5#listening {
		font-family: 'Alegreya', serif;
		font-weight: normal;
		font-style: italic;
		font-size: 16px;
		width: 100%;
		text-align: center;
		margin-top: 0;		
		}
	
	#home-blog h3 {
		font-family: 'Alegreya', serif;
		font-size: 36px;
		font-weight: 400;
		margin-top: 20px;
		padding-left: 27px;
		/*background: transparent url("/img/common/pencil.png") no-repeat left 17px;*/	
		}	
	#home-blog .icon-pen-alt-stroke {
		font-size: 20px;
		}
	
	#home-blog ul li h4 {
		float: left;
		width: 60%;
		margin: 0;
		font-family: 'Alegreya', serif;
		font-weight: normal;
		font-size: 22px;		
		}	
	
	#work h4 {
		line-height: 13px;			
		}	

	
	#work h3 {
		font-family: 'Roboto', sans-serif;
		text-transform: uppercase;
		font-size: 20px;
		font-weight: 300;
		border-bottom: 1px solid #e7e7e7;
		padding-bottom: 3px;
		margin-bottom: 18px;
		text-align:center;
		letter-spacing: 2px;
		display: inline-block;
		width: 100%;
		line-height: 22px;	
		}
		#work h3 span { /* Double Border */
			padding-bottom: 10px;
			border-bottom: 1px solid #e7e7e7;
			width: 100%;
			display: block;		
			}	
			
				
	/*			
	#work.page	.recent-title {
		width: 220px;
		height:220px;	
			} 	
	#work.page a h4 span {
		width: 220px;
		height:220px;						
		}					
	*/		
				
	.recent-title {
			background-color: #f9e0e0;
			border-radius: 200px 200px 200px 200px;
			color: #E26363;
			height: 140px;
			margin: 0 auto 15px;
			text-align: center;
			width: 140px;	
			} 
			
	
			
	#work a h4 span {
		display: table-cell;
		vertical-align: middle;
		width: 140px;
		height: 140px;	
		padding: 0 15px;
		opacity:0;
		filter:alpha(opacity=0);
		transition: all 0.2s ease-in-out 0.2s;
		background-color:#E26363;
		border-radius: 200px 200px 200px 200px;
		color: #FFF;
		text-transform: uppercase;							
		}
		#work a:hover h4 span {

			opacity:1;
			filter:alpha(opacity=100);			
			transition: all 0.2s ease-in-out 0.2s;	
			}		
		
		#work a:hover h4 {
			width: 140px;
			height: 140px;
			transition: all 0.3s ease-in-out 0.3s;	
			text-indent: 0;
			}	
		
	/* Site Specific Styles */		
						
	#work h4#summertime {
		background: #f9e0e0 url(/img/content/portfolio/summertime-logo.png) no-repeat center center;
		background-size:100% 100%;
		}		
	#work h4#rare {
		background: #f9e0e0 url(/img/content/portfolio/rare.png) no-repeat center center;
		background-size:100% 100%;		
		}		
	#work h4#grampa {
		background: #f9e0e0 url(/img/content/portfolio/grampa.png) no-repeat center center;
		background-size:100% 100%;		
		}	
	#work h4#trinity {
		background: #f9e0e0 url(/img/content/portfolio/trinity.png) no-repeat center center;
		background-size:100% 100%;		
		}	
	#work h4#river {
		background: #f9e0e0 url(/img/content/portfolio/river.png) no-repeat center center;
		background-size:100% 100%;		
		}		
	
	
/* 04. Lists - ul, ol, li, etc.
-------------------------------------------------------------- */

li ul,
li ol       { margin: 0; }
/*ul, ol      { margin: 0 1.5em 1.5em 0; padding-left: 3.333em; }*/

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }	

	/* 05. Custom Lists
	---------------------------------------------------------- */
	.site-meta ul {
		margin:15px 0;
		padding: 0;
		width: 100%;
		text-align: center;
		}
		.site-meta ul li {
			list-style-type: none;
			display: inline-block;
			padding-right: 15px;			
			}
		
	#nav ul {
		width: 100%;
		margin: 0;
		padding: 0;
		}	
	#nav ul li {
			width: 31%;
			float: left;		
			list-style-type: none;
			border-right: 1px solid #D98382;
			text-align: center;			
			}
	#nav ul li.close {
		width: 6%;
		}	
	#nav ul li.close a{
		letter-spacing: 0;
		}					
	
	.social ul {
		display: inline;
		width: 100%;
		margin: 0;
		padding: 0;
		}	
	.social ul li {
			display: inline;		
			list-style-type: none;
			padding-right: 8px;				
			}
	#getintouch ul {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		font-size: 60px;
		margin-bottom: 25px;
		}	
	#getintouch ul li {
			display: inline;		
			list-style-type: none;
			padding-right: 8px;				
			}	
	#getintouch ul li a {
		text-decoration: none;
		}					
			
	/* Last.fm */		
			
	#last-fm ul {
		display: block;
		width: 100%;
		margin: 0 0 0 40px;
		padding: 0;
		line-height: 15px;
		height: 65px;
		overflow: hidden;
		}	
	#last-fm ul li {	
			list-style-type: none;
			padding-right: 8px;	
			background: #f7f7f7;
			text-align: left;
			float: left;
			opacity:0.5;
			filter:alpha(opacity=50);			
			}
			
	
	#last-fm ul li.logo {
			opacity:1;
			filter:alpha(opacity=100);			
		}				
	#last-fm ul li.logo img {
		border: none;
		 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
		filter: gray; /* IE6-9 */
		-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */		
		}
	#last-fm ul li:hover.logo img {
		border: none;
		 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
		-webkit-filter: grayscale(0%);
		}		
	#last-fm ul li:hover.logo {
		-moz-border-radius:0;
		-webkit-border-radius:0;
		border-radius:0;	
		background: none;
		margin-right: 0;
		padding-right: 8px;
		}			
	.lfmTrackArtist {
		display: inline-block;
		}	
	#last-fm ul li img {
		height: 62px;
		width: 62px;
		-moz-border-radius:65px;
		-webkit-border-radius:65px;
		border-radius:65px;
		border: 1px solid #EFEFEF;	
		}				
	#last-fm ul li .lfmTrackInfoCell {
		display: none;
		margin-top: 15px;
		float: right;
		padding-left: 4px;
		overflow: hidden;
		width: 60px;		

		}			
	#last-fm ul li .lfmTrackInfoCell a, #last-fm ul li .lfmTrackArtist  {
		white-space: nowrap;
		display: block;		
		}		
		#last-fm ul li:hover .lfmTrackInfoCell {
			display: inline; 			
			}						
		.lfmTrackTitle {
			padding-right: 4px;
			padding-left: 0px;
			display: block;
			}	
	#last-fm ul li:hover {		
		-moz-border-radius:65px;
		-webkit-border-radius:65px;
		border-radius:65px;	
		background: #FFF;
		margin-right: 10px;
		padding-right: 15px;			
		cursor: pointer !important;
		opacity:1;
		filter:alpha(opacity=100);
		position:relative;  		
		} 				
	/*#last-fm ul li:hover:after {
				content:url(/img/common/gradient.png);
				position:absolute;
				right: 0;
				top: 0;		
		}	*/
		
	/*************/	
				
	#home-blog ul {
		border-top: 1px solid #bdbdbd;		
		list-style: none;
		padding: 0;
		}	
		#home-blog ul li {
			padding: 10px 25px;
			line-height:30px;
			border-bottom: 1px solid #bdbdbd;
			overflow: hidden;		
			}		
		#home-blog ul li:nth-child(odd) {
			background-color:#f9f9f9;
			}				
		#home-blog ul li span.category {
			float: left;
			width: 30%;	
			text-align: center;	
			font-weight: 300;					
			}			
		#home-blog ul li span.date {
			float: left;
			width: 10%;
			text-align: right;
			font-size: 16px;
			font-weight: 300;	
			}				


/* 06. Text elements - a, p, strong, etc.
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; }

a:focus, 
a:hover     { color: #000; }
a           { color: #E26363; text-decoration: underline; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

	/* 07. Custom Text elements
	---------------------------------------------------------- */
	
#blog-post a {
	text-decoration: underline;
	color:#1588af;
	}
	

	#work img {
		width: 100%;
		padding-bottom: 12px;
		}
	
	.logo-sub {
		transition: all 0.1s ease-in-out 0.1s;			
		left: 10px;
		position: absolute;
		display: block;
		top: 25px;	
		}	
	a:hover.logo-sub {
		opacity:0.8;
		filter:alpha(opacity=80);		
		}		
	
	#about hr {
		width: 60%;
		margin-bottom: 40px;
		}
	
	#about #desc p {
		font-weight: 300;
		font-size: 17px;
		line-height: 25px;	
		}
	
	#last-fm a {
	 text-decoration: none;
	 }
	
	#nav a {
		text-decoration: none;
		}
	a#menu  {
		text-decoration: none;
		}
	p.intro {
		font-family: 'Alegreya', serif;
		font-size: 30px;
		line-height: 35px;
		margin-bottom: 35px;		
		}
		p.intro span {
			font-size: 20px;
			font-style: italic;
			}		
	.site-meta ul li a {
		text-transform: uppercase;
		font-family: 'Alegreya', serif;
		font-weight: 400;
		font-size: 25px;
		letter-spacing: 3px;
		color: #CCC;
		text-decoration: none;			
		}	
	.site-meta ul li a:hover {
		color: #5b5b5b
		}		
	
	#nav ul li a.first {
		border-left: 1px solid #D98382;		
		}	
	
	#nav ul li a {
		text-transform: uppercase;
		font-family: 'Alegreya', serif;
		font-weight: 400;
		font-size: 20px;
		color: #bd7373;
		display: block;
		width: 100%;
		letter-spacing: 6px;
		padding: 10px 0;
		text-shadow:1px 1px 0px #FF9B9B;		
		line-height: normal;		
		}		
	#nav ul li a:hover {
		background: #D98382;
		color:#353535;
		text-shadow:1px 1px 0px #f19191;
		opacity:0.6;
		filter:alpha(opacity=60);					
		}		
	
	a.home {
		float: left;
		display: block;
		background: transparent url(/img/common/home-icon.png) no-repeat left top;
		height: 46px;
		width: 40px;
		text-indent: -9999px;
		overflow: hidden;
		margin-left: 10px;
		position: absolute;		
		}
		
	/*a#menu {
		font-family: 'Alegreya', serif;
		right: 0;
		display: block;
		line-height: 20px;
		overflow: hidden;
		position: absolute;
		color: #353535;
		background-color: #FFF; 
		font-size: 16px;
		font-weight: bold;
		padding: 9px 18px;
		text-transform: uppercase;						
		}		
		.sub a#menu {
			top:25px;
			color: #5B5B5B;
			text-shadow: none;		
			}
		.sub a:hover#menu {
			opacity:0.6;
			filter:alpha(opacity=60);	
			background: none;				
			}			
		a:hover#menu {
			transition: all 0.1s ease-in-out 0.1s;			
			background-color:#D78285;
			color:#353535;
			opacity:0.6;
			filter:alpha(opacity=60);
		text-shadow: none;							
			}
		a:hover:focus#menu {
			background-color: none !important;
			}			
		a:hover.home {
			transition: all 0.1s ease-in-out 0.1s;			
			opacity:0.8;
			filter:alpha(opacity=80);
			background-position: left -5px;		
			}	*/	
		
	a#menu {
		right: 0;
		display: block;
		height: 40px;
		width: 40px;
		line-height: 40px;
		overflow: hidden;
		position: absolute;
		color: #FFF;
		font-size: 36px;
		font-weight: normal;
		padding: 9px;
		text-shadow:2px 2px 0px #6E706F;							
		}		
		.sub a#menu {
			top:25px;
			color: #5B5B5B;
			text-shadow: none;		
			}
		.sub a:hover#menu {
			opacity:0.6;
			filter:alpha(opacity=60);	
			background: none;				
			}			
		a:hover#menu {
			background-color:#D78285;
			color:#353535;
			opacity:0.6;
			filter:alpha(opacity=60);
			text-shadow: none;							
			}
		a:hover:focus#menu {
			background-color: none !important;
			}			
		a:hover.home {
			transition: all 0.1s ease-in-out 0.1s;			
			opacity:0.8;
			filter:alpha(opacity=80);
			background-position: left -5px;		
			}	
				
	
	footer .container p {
		font-weight: bold;
		text-transform:uppercase;
		margin: 0;
		}	
	
	#home-blog h4 a {
		color: #5b5b5b;
		}
	#home-blog h4 a:hover {
		color: #E26363;
		}		
		#home-blog ul li a {
			text-decoration: none;
			}		
	
	hr.rounded {
		height: 10px;
		border: 0;
		background-color:#E26363;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		 border-radius: 5px;
		display: block;	 
		}	

	
	#work a {
		text-decoration: none !important;
		text-transform: uppercase;
		line-height: 12px;	
		}
		
		#feature p {
			font-family: 'Alegreya', serif;
			font-style: italic;	
			font-size:19px;
			font-weight: 400;
			color: #969696;
			margin: 0 0 10px 0;	
			}
			
	#feature a {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e26363), color-stop(1, #e26363) );
		background:-moz-linear-gradient( center top, #e26363 5%, #e26363 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e26363', endColorstr='#e26363');
		background-color:#e26363;
		-moz-border-radius:13px;
		-webkit-border-radius:13px;
		border-radius:13px;
		display:inline-block;
		text-transform: uppercase;
		color:#ffffff;
		font-size:14px;
		letter-spacing: 3px;
		font-weight:bold;
		padding:15px 30px;
		text-decoration:none;
		text-shadow:1px 1px 0px #cd5050;
		box-shadow:2px 2px 0px #EFEFEF;	
		}
	#feature a:hover {
		text-shadow:1px 1px 0px #e99292;
		color:#442121;	
		}	
			
		
	h2 strong {
		color:#e26363;
		}	
	
	footer .container .social {
		opacity:0.5;
		filter:alpha(opacity=50);
		padding-bottom: 4px; 	
		}	
	
	.social ul li a {
		text-transform: uppercase;
		font-weight: 700;	
		text-decoration: none;
		color: #353535;
		-webkit-text-stroke: .4px /* Google Chrome, Y U NO LIKE ME? */			
		}	
	.social ul li a:hover {
		/*color: #FFF;
		text-shadow: #b87070 1px 1px 0px;*/
		opacity:0.8;
		filter:alpha(opacity=80); 		
		}			
	.social ul li a.twitter {
		background: url(/img/common/social-sprite.png) no-repeat left top;
		padding-left: 17px;
		}		
	.social ul li a.linkedin {
		background: url(/img/common/social-sprite.png) no-repeat left -18px;
		padding-left: 18px;
		}		
	.social ul li a.skype {
		background: url(/img/common/social-sprite.png) no-repeat left -37px;
		padding-left: 18px;
		}	
	.social ul li a.email {
		background: url(/img/common/social-sprite.png) no-repeat left -54px;
		padding-left: 17px;
		}		
			
	
/* 08. Tables
-------------------------------------------------------------- */

table       { margin-bottom: 1.4em; width:100%; }
th          { font-weight: bold; }
thead th 	{ background: #c3d9ff; }
th,td,
caption 	{ padding: 4px 10px 4px 5px; }
tr.even td  { background: #e5ecf9; }
tfoot       { font-style: italic; }
caption     { background: #eee; }
	

@media (min-width: 768px) and (max-width: 979px) {
	h2 { 
		font-size: 52px;
		font-weight: normal;
		line-height:1; 
		margin: 0px 0px 18px 0;
		padding: 0 15px;	
		}
	#work h4, .recent-title, #work a:hover h4, #work a h4 span  {
		height: 104px;
		width: 104px;
		font-size: 11px;				
		}	
	#about .intro br {
		display: none;
		}	
	#last-fm ul {
		margin-left: 0;
		}				
					
}		

@media (max-width: 767px) {

#work .row {
	width: 410px;
	display: inline-block;
	}
	#last-fm .span8 {
		text-align:center;
		}		
	#last-fm ul {
		display: inline-block;
		margin-left: 0;
		width:auto;
		}		
	h2 { 
		font-size: 52px;
		font-weight: normal;
		line-height:1; 
		margin: 0px 0px 18px 0;
		padding: 0 15px;	
		}
	#feature br {
		display: none;
		}	
	#about .intro br {
		display: none;
		}			
	
	
}

@media (max-width: 480px) {
#work .row {
	width: auto;
	}
	#about #desc, #about p.intro {
		padding: 0px 10px;
		}	
	#about p.intro {
		font-size: 22px;
		line-height: 29px;
		}		
	#nav ul li a {
		font-size: 15px;
		letter-spacing: 0;
		padding: 6px 0;
		}
	#nav ul li {
		width: 29%;
		}	
	#nav ul li.close {
		width: 10%;
		}		
	
	#last-fm {
		display: none;
		}
	#home-blog h3 {
		font-size:30px;
		background-position: left 12px;
		}	

	/*#work .span2:last-child {
		display: inline-block;
		}*/

	#header {
		background: url("/img/common/background.jpg") no-repeat scroll center -25px transparent;
		}

	#header .social {
		padding-bottom: 40px;
		}		
	#header a.logo {
	display: inline-block;
		margin-top: 45px;
		}	
	#header #mcgformula {
		top: 55px;
		}		
	h2 { 
		font-size: 42px;
		font-weight: normal;
		line-height:1; 
		margin: 0px 0px 18px 0;
		padding: 0 15px;			
		}
	#feature br {
		display: none;
		}		
}