/* STYLES FOR INDEX PAGE */

/* MOBILE FIRST - INDEX PAGE */

#right-column {
	width:				100%;
	float: 				left;
}

.work-list {
	display: 			none;
	width: 				90%;
	margin: 			5%;
	background-color: 	#222;
	-moz-border-radius: 5px;
	border-radius: 		5px;
	position:			relative;
}

.work-list img {
	width: 				100%;
	-moz-border-radius: 5px;
	border-radius: 		5px;
}

.work-list p {
	display: 			none;
}

/* To get images to display nicely*/
#right-column a img{
	display: block;
}

header {
	position:			absolute;
	top:				35%;
	width:				90%;
	z-index: 			1;
	font-size: 			2.0rem;
	line-height: 		2.0rem;
	margin:				5%;
	text-align: 		center;
}

header a:link, header a:visited {
	color: 				#222;
	background-color: 	#fff;
	padding: 			0rem 0.3rem;
	-moz-border-radius: 2px;	
	border-radius: 		2px;
}

header a:hover {
	color: 				rgb(0, 195, 255);
}



/* INDEX PAGE DOUBLE THUMBNAIL LAYOUT */

@media all and (min-width: 475px) {

	.work-list {
		width: 				45%;
		margin:				2.5%;
		float: 				left;
	}

	header {
		font-size: 			2.0rem;
		line-height: 		2.2rem;
	}

}



/* INDEX PAGE DOUBLE COLUMN TABLET LAYOUT */

@media all and (min-width: 760px) {

	/* WORKS */

	#right-column {
		width:				80%;
		max-width: 			768px;
		float: 				right;
	}

	.work-list {
		display: 			none;
		width: 				100%;
		float:				left;
		margin:				0rem;
		padding-right:		1.0rem;
		position:			relative;
		overflow: 			auto;
		border-bottom: 		1px solid #666;
		-moz-border-radius: 0px;
		border-radius: 		0px;
	}

	.work-list:last-of-type {
		border-bottom: 		none;
	}

	.work-list img {
		float:				left;
		width:				45%;
		position:			static;
		-moz-border-radius: 0px;
		border-radius: 		0px;

	}

	.work-list p {
		display: 			block;
		clear:  			right;
		float:				right;
		width:				55%;
		padding:			1.0rem 0rem 1.0rem 1.0rem;
		text-align: 		justify;
		font-family: 		'Source Sans Pro', sans-serif;
		font-weight: 		300;
		line-height: 		2.4rem;
		font-size: 			1.8rem;
		color:				#fff;
	}

	header {
		float:				right;
		position:			static;
		text-align: 		right;
		font-size: 			1.6rem;
		margin:				0rem;
		clear:				none;
		width:				55%;
		margin-top: 		1rem;
	}

	.more {
		font-family: 		'Telex', sans-serif;
		font-size: 			1.4rem;
	}

	a.more:link, a.more:visited {
		color: 				rgb(0, 195, 255);
		background-color: 	#222;
		padding: 			0rem 0.3rem;
		-moz-border-radius: 2px;
		border-radius: 		2px;	
	}

	a.more:hover {
		background-color: 	#fff;
	}

}



/* INDEX PAGE FULL LAYOUT */

@media all and (min-width: 960px) {

	/* WORKS */

	.work-list {
		display: 			none;
		width: 				93%;
		margin: 			2.8rem;
		float:				none;
		padding: 			1.0rem;
		border-bottom: 		none;
		-moz-border-radius: 5px;
		border-radius: 		5px;
	}

	.work-list img {
		width:				20%;
		-moz-border-radius: 5px;
		border-radius: 		5px;
	}

	.work-list p {
		width:				80%;
		line-height: 		2.1rem;
		font-size: 			1.4rem;
	}

	header {
		margin-top: 		0rem;
		width:				80%;
	}

}