/*-----------------------------------------------------------------------------
Stylehseet info

author:    The Media Collective
email:     andy@mediacollective.co.uk
website:   http://www.mediacollective.co.uk
-----------------------------------------------------------------------------*/

/* !GENERAL */

body {
	background: #2d261c url(../images/background01.png) repeat center top;
	margin: 0px;
	padding: 0px;
	line-height: 1;
	font-family: 'Roboto Slab', 'Georgia', serif;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}

p {
	line-height: 1.75em;
	padding: 0;
	margin: 0 0 1em 0;
	color: #333;
	font-size: 0.85em;
}

p a, li a {
	color: #333;
	text-decoration: none;
	border-bottom: solid #555 1px;
}

p a:hover, li a:hover {
	background-color: #333;
	color: #eee;
	border-bottom: solid 1px #333;
	text-decoration: none;
}

h1 {
	font-family: 'Raleway', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #111;
	background: transparent url(../images/heading_line06.png) no-repeat bottom center;
	padding-bottom: 22px;
	margin-bottom: 20px;
	font-size: 1.9em;
}

/* !SPECIFIC ELEMENTS */

.page_container {
	margin: 70px auto 70px;
	position: relative;
	text-align: left;
	width: 820px;
}

.text_section {
	float: left;
	width: 330px;
	height: 300px;
	background-color: #C9C7A8;
	text-align: center;
	padding: 40px;
	display: block;
}

.image_section {
	float: left;
	width: 410px;
	height: 380px;
	background-color: #ccc;
	line-height: 0;
}

.right_align {
	float: right;
}

.text_on_image {
	position: relative;
	top: -380px;
	text-align: center;
	width: 330px;
	height: 300px;
	padding: 40px;
	background-color: #111;
	display: none;
}

.image_section a img {
	border: none;
}

.image_section a {
	height: 380px;
	display: block;
	text-decoration: none;
}

.image_section a h1 {
	line-height: 1;
	color: #ccc;
	background-image: none;
}

.image_section a:hover .text_on_image {
	display: block;
	zoom: 1;
	filter: alpha(opacity=90);
	opacity: 0.9;
	cursor: pointer;
}

.just_images {
	padding-top: 70px;
	float: left;
}

.spacing1 { padding: 30px 40px 30px 40px; height: 320px; }
.spacing2 { padding: 40px 40px 40px 40px; height: 300px; }
.spacing3 { padding: 50px 40px 40px 40px; height: 290px; }
.spacing4 { padding: 60px 40px 40px 40px; height: 280px; }
.spacing5 { padding: 70px 40px 40px 40px; height: 270px; }
.spacing6 { padding: 80px 40px 40px 40px; height: 260px; }
.spacing7 { padding: 90px 40px 40px 40px; height: 250px; }
.spacing8 { padding: 100px 40px 40px 40px; height: 240px; }
.spacing9 { padding: 110px 40px 40px 40px; height: 230px; }
.spacing10 { padding: 120px 40px 40px 40px; height: 220px; }

.background1 { background-color: #94a89e; }
.background2 { background-color: #746d6d; }
.background3 { background-color: #c5c8b2; }
.background4 { background-color: #81928b; }
.background5 { background-color: #837a70; }
.background6 { background-color: #8a8f96; }
.background7 { background-color: #b0b9a0; }
.background8 { background-color: #9fa09a; }
.background9 { background-color: #b3b498; }
.background10 { background-color: #94a68e; }
.background11 { background-color: #9c997e; }
.background12 { background-color: #877f7f; }

/* Agency Work page */

.simple_h1 {
	text-align: center;
	color: #c5c8b2;
	background: none;
	padding-top: 60px;
	padding-bottom: 100px;
}

.n_page_container {
	width: 800px;
	margin-top: 70px;
}

.agency_images img {
	margin-bottom: 40px;
}

/* Article/Blog Page */

.article_header {
	margin-left: 205px;
}

.article_section {
	width: 820px;
}

.article_section h2 {
	font-family: 'Raleway', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #c5c8b2;
	padding: 110px 120px 100px 120px;
	text-align: center;
	margin: 0;
	font-size: 1.75em;
}

.article_section img {
	width: 100%;
	margin-bottom: 30px;
}

h1 a {
	color: #111;
	text-decoration: none;
}

h1 a:hover {
	color: #333;
	text-decoration: none;
}

.article_section p a {
	color: #868778;
	border-bottom: none;	
	font-size: 0.875em;
	padding: 0 2px 0 4px;
}

.article_section p a:hover {
	background-color: #c5c8b2;
	border-bottom: none;
	color: #2d261c;
}

.article_section .back_home {
	font-family: 'Raleway', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 1.75em;
	text-align: center;
}


/*-----------------------------------------------------------------------------
RESPONSIVE STUFF
-----------------------------------------------------------------------------*/

/* ------ 451-900px ------- */
/* Single column */
@media (min-width: 451px) and (max-width: 900px) {

	.page_container {
		width: 410px;
	}

	.image_section, .image_section a {
		height: auto;
	}

	.text_on_image {
		background: #000 url(../images/up_arrow02.png) top center no-repeat;
		position: relative;
		display: block;
		top: 0;
		padding-left: 10%;
		padding-right: 10%;
		border-top: solid 5px #000;
		padding-top: 15px;
		padding-bottom: 20px;
		height: auto;
		width: auto;
	}
	
	.text_on_image h1 {
		font-family: 'Roboto Slab', 'Georgia', serif;
		font-size: 0.875em;
		text-transform: none;
		letter-spacing: normal;
		padding-bottom: 10px;
		margin-bottom: 0;
	}

	/* Article/Blog Page */
	
	.article_header {
		margin-left: 0;
	}
	
	.article_section {
		width: 410px;
	}

	.article_section h2 {
		padding: 80px 20px 70px 20px;
		text-align: center;
		font-size: 1.75em;
	}
	
}

/* ------ 451-767px ------- */
@media (min-width: 451px) and (max-width: 767px) {	
}

/* ------ -450px ------- */
/* Full width layout for phones */
@media (max-width: 450px) {
	
	body {
		width: 100%;
	}
	
	.page_container {
		width: 90%;
		margin: 20px;
		width: auto;
	}
	
	.text_section {
		width: 80%;
		padding-left: 10%;
		padding-right: 10%;
		padding-top: 30px;
		padding-bottom: 30px;
		height: auto;
	}
	
	.image_section {
		width: 100%;
		height: auto;
	}
	
	.image_section a, .image_section a:hover {
		height: auto;
	}
	
	.image_section img, .image_section a img, .image_section a {
		width: 100%;
		height: auto;
	}
	
	a .text_on_image {
		background: #000 url(../images/up_arrow02.png) top center no-repeat;
		position: relative;
		display: block;
		top: 0;
		width: 80%;
		padding-left: 10%;
		padding-right: 10%;
		padding-top: 10px;
		padding-bottom: 0px;
		border-top: solid 5px #000;
		height: auto;
		padding-bottom: 10px;
		margin-bottom: 0;
		height: auto;
		width: auto;
	}
	
	.text_on_image h1 {
		font-family: 'Roboto Slab', 'Georgia', serif;
		font-size: 0.875em;
		text-transform: none;
		letter-spacing: normal;
		padding-bottom: 15px;
		margin-bottom: 0;
	}
	
	h1 {
		font-size: 1.75em;
	}
	
	p {
		font-size: 0.75em;
	}
	
	/* Article/Blog Page */
	
	.article_header {
		margin-left: 0;
	}
	
	.article_section {
		width: auto;
	}

	.article_section h2 {
		padding: 80px 20px 70px 20px;
		text-align: center;
		font-size: 1.75em;
	}

}