/*
  CREATIVE LICENSE PORTFOLIO
  Typography Stylesheet
  By James Barnsley
  September 2012
*/
	
	
	
	
/* ========================================================== FONT IMPORTING === */
/* ============================================================================= */



@font-face {
	font-family: 'Archivo Narrow';
	font-style: normal;
	font-weight: 400;
	src: local('Archivo Narrow Regular'), local('ArchivoNarrow-Regular'), url(http://themes.googleusercontent.com/static/fonts/archivonarrow/v2/DsLzC9scoPnrGiwYYMQXphdbPw3QSf9R-kE0EsQUn2A.woff) format('woff');
}

@font-face {
	font-family: 'Crete Round';
	font-style: normal;
	font-weight: 400;
	src: local('Crete Round'), local('CreteRound-Regular'), url(http://themes.googleusercontent.com/static/fonts/creteround/v2/ZCcPJiCGOzh84o2siPk48YbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
	
/*
@import url(http://fonts.googleapis.com/css?family=Crete+Round);
@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);

@font-face {
	font-family: 'calif';
	src: url('../fonts/calif.eot');
	src: local('?'), url('../fonts/calif.woff') format('woff'), url('../fonts/calif.ttf') format('truetype'), url('../fonts/calif.svg') format('svg');
	font-weight: normal;
	font-style: normal;}

@font-face {
	font-family: 'calif-italic';
	src: url('../fonts/calif-italic.eot');
	src: local('?'), url('../fonts/calif-italic.woff') format('woff'), url('../fonts/calif-italic.ttf') format('truetype'), url('../fonts/calif-italic.svg') format('svg');
	font-weight: normal;
	font-style: normal;}

@font-face {
	font-family: 'calif-bold';
	src: url('../fonts/calif-bold.eot');
	src: local('?'), url('../fonts/calif-bold.woff') format('woff'), url('../fonts/calif-bold.ttf') format('truetype'), url('../fonts/calif-bold.svg') format('svg');
	font-weight: normal;
	font-style: normal;}
	*/
	


body, html {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 12px;
	color: #333333; }
	
	
	
	
/* ======================================================= STANDARD ELEMENTS === */
/* ============================================================================= */




/* =============================== HEADINGS === */

	
.typography h1,
.typography h2,
.typography h3 {
	font-family: 'Archivo Narrow', Arial, sans-serif;
	font-weight: normal;}
	
.typography h1 {
	color: #AAAAAA;
	font-size: 34px;
	padding-bottom: 2px;}
	
.typography h2,
.typography h2 a {
	color: #000000;
	font-size: 22px;}
	
.typography article h2 {
	padding-bottom: 4px;}
	
.typography .blog-summary h2 a {
	font-size: 26px;}

.typography h4 {
	color: #000000;
	font-size: 12px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;}
	
.typography h4 a {
	color: #000000;}
	
	
/* page introduction */

.typography h1 em {
	color: #EE2D64;
	font-style: normal; }
	
header.has-background h1 {
	color: #FFFFFF;}
	
	
/* project titles */

header.project h1#project-client{
	float: left;
	width: auto;
	margin-right: 35px;}
	
header.project h1 .label {
	font-family: Arial, Helvetica, sans-serif;
	display: block;
	font-size: 14px;}

header.project h1 .title {
	color: #000000;
	font-size: 24px;
	display: block;
	padding-bottom: 4px;}

#project-description h2 {
	padding-top: 25px;}

	
	
/* blog (resources) */

.typography .blog-summary h2.title a {
	color: #000000;}

.typography .blog-summary h2.title a:hover {
	color: #EE2D64;}
	
	
	


/* =============================== PARAGRAPH === */
	
.typography p {
	font-size: 1em;
	padding: 6px 0;
	line-height: 1.3em;}
	
#foot p {
	text-align: center;
	font-size: 90%;
	padding-bottom: 10px;
	color: #CCCCCC;}
	
	
/* blog dates */

.typography p.date {
	padding-bottom: 0;
	padding-top: 0;
	font-size: 11px;
	color: #AAAAAA;
	font-style: italic;}
	
.typography .blog-entry p.date {
	padding-bottom: 10px;
	margin-bottom: 15px;
	border-bottom: 1px solid #EEEEEE;}


/* search results */

.search-query {
	padding-bottom: 10px;
	margin-bottom: 15px;
	border-bottom: 1px solid #EEEEEE;}
	
	
	
/* code blocks */

pre {
	padding: 10px;
	margin: 10px 0;
	line-height: 1.5em;
	border: 1px dashed #DDDDDD;
	background: #EEEEEE;
	overflow-x: auto;}
	

/* resource tags */

p.tags {
	color: #CCCCCC;
	padding-top: 15px;}
	
	
	
	
/* =============================== LISTS === */

.typography ul,
.typography ol {
	margin-left: 25px;}
	
.typography li {
	padding: 3px 0;}
	
	
	
/* =============================== LINKS === */

.typography a {
	color: #888888;
	text-decoration: none;}

.typography a:hover {
	color: #EE2D64;}

#foot p a {
	color: inherit;}

a#back-to-work {
	font-family: 'Archivo Narrow', Georgia, Times, serif;
	color: #AAAAAA;
	position: absolute;
	bottom: 10px;
	right: 0;
	text-decoration: none;
	font-size: 14px;}

a#back-to-work:hover{
	color: #000000;}
	

/* readmore / downloads on resources */

a.readmore,
a.download,
.download a {
	padding: 4px 8px;
	color: #000000;
	background: #E5E5E5;
	border-right: 2px solid #60BDB6;}
	
a.readmore:hover,
a.download:hover,
.download a:hover {
	background: #EE2D64;
	color: #FFFFFF;
	border-color: #61204D;}
	
	
	
	
	
/* pagination */

#PageNumbers {
	margin-top: 15px;}
	
#PageNumbers a,
#PageNumbers span.current {
	padding: 4px 8px;
	background: #EEEEEE;
	color: #000000;
	margin-right: 2px;}
	
#PageNumbers a:hover,
#PageNumbers span.current {
	background: #CCCCCC;
	color: #000000;}
	

	
/* footer call to action */

#call-to-action {
	font-family: 'Archivo Narrow', Georgia, Times, serif;
	font-size: 18px;
	text-decoration: none;
	color: #EE2D64;
	display: block;
	float: right;
	padding: 10px 0;}
		

/* footer discrete links */
		
#foot p a:hover {
	color: #333333;}
	
	
	

/* =============================== IMAGES === */
	
.typography img.left{
	float: left;
	margin: 2px 10px 0 0;}
	
	
	
	
	
	
/* ========================================================== SPECIAL BLOCKS === */
/* ============================================================================= */
	

#menu-primary a {
	font-family: 'Archivo Narrow', Georgia, Times, serif;
	text-decoration: none;
	color: #000000;
	font-size: 18px;
	display: inline-block;
	padding: 6px 10px;}
	
#menu-primary a.current,
#menu-primary a.section,
#menu-primary a:hover {
	color: #EE2D64;}
	
#menu-primary .divider {
	font-family: 'Archivo Narrow', Georgia, Times, serif;
	text-decoration: none;
	color: #AAAAAA;
	font-size: 18px;}
	
	



/* ================================= SECONDARY MENU ===== */


#menu-secondary a {
	display: block;
	padding: 4px 0px;
	font-family: 'Archivo Narrow',Georgia,Times,serif;
	color: #555555;
	font-size: 18px;}
	
#menu-secondary a:hover {
	color: #EE2D64;}
	
#menu-secondary a.current,
#menu-secondary a.section {
	color: #000000;}