/**
 *	Cre8tiveCat
 *	Primary Screen and Print Styles
 *	@media		screen,print
 *	
 *	@project	cre8tivecat.com
 *	@author		Thomas J Bradley <theman@thomasjbradley.ca>
 *	@link		http://thomasjbradley.ca
 *	@copyright	Copyright MMIX, Thomas J Bradley
 *	
 *	@colordef	#313334; grey
 *	@colordef	#85c441; green
 */


/**
 *	@section	General
 */

@media screen,print {

body {
	margin: 0;
	padding: 0;
	
	background: #313334 url("../img/bg.png") repeat left top;
	
	color: #fff;
	font: normal 100.01%/1.375 Georgia,Times,Cambria,serif;
	}

}


/**
 *	@section	Layout
 */

@media screen,print {

#content {
	margin: 0 0 1.375em 0;
	min-width: 980px;
	overflow: hidden;
	padding: 0;
	position: relative;
	}

#about {
	margin: 0;
	padding: 0 370px 0 315px;
	}
	
	#about img {
		display: inline;
		float: left;
		margin: -3.2em 0 0 -275px;
		}

#contact {
	margin: 0;
	padding: 0 40px;
	position: absolute;
	right: 0;
	top: 0;
	width: 295px;
	}
	
.js-active #portfolioc,
.js-active #artc {
	display: none;
	}

}


/**
 *	@section	Layout
 *	@subsection	Masthead
 */

@media screen,print {

.header {
	margin: 0;
	min-height: 1px;
	padding: 1px 0 0 0;
	position: relative;
	}
	
.header:after {
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	
	content: ".";
	font-size: 0;
	}
	
.nav {
	bottom: 0;
	margin: 0 0 0 40px;
	padding: 0;
	position: absolute;
	
	list-style-type: none;
	}
	
.nav:after {
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	
	content: ".";
	font-size: 0;
	}
	
	.nav li {
		display: inline;
		float: left;
		
		list-style-type: none;
		}
		
	.nav a,
	.nav a:link,
	.nav a:visited {
		display: block;
		margin: 0;
		padding: 0.6em 1em;

		color: #85c441;
		text-decoration: none;
		}
		
	.nav .current a,
	.nav .current a:link,
	.nav .current a:visited {
		background-color: #85c441;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		
		color: #fff;
		}
		
	.nav h2 {
		margin: 0;
		padding: 0;
		
		font-size: 1.5em;
		}

}


/**
 *	@section	Layout
 *	@subsection	Footer
 */

@media screen,print {

#footer {
	clear: both;
	margin: 0;
	overflow: hidden;
	padding: 0 40px 15px;
	
	border-top: 1px solid #85c441;
	}
	
#footer p {
	margin: 1.5em 0 0;
	padding: 0;
	
	color: #666;
	font-size: 0.75em;
	}
	
#footer a.thomasjbradley,
#footer a.thomasjbradley:link,
#footer a.thomasjbradley:visited {
	display: block;
	float: right;
	height: 35px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	width: 110px;
	
	background: transparent url("../img/thomasjbradley.gif") no-repeat right top;
	
	text-indent: -999em;
	}
	
#footer a.thomasjbradley:focus,
#footer a.thomasjbradley:hover,
#footer a.thomasjbradley:active {
	background-position: left top;
	}

}


/**
 *	@section	Typography
 */

@media screen,print {

h1 {
	display: inline;
	float: right;
	height: 125px;
	margin: 5px 25px 0 0;
	padding: 0;
	width: 300px;
	}
	
h2 {
	margin: 1em 0 0.8em;
	padding: 0;
	
	font-size: 1.875em;
	font-weight: normal;
	text-transform: lowercase;
	}

h3 {
	margin: 0.5em 0;
	padding: 0;
	
	font-size: 1.5em;
	font-weight: normal;
	}
	
p {
	margin: 0 0 1.375em;
	padding: 0;
	}
	
a,
a:link,
a:visited {
	color: #85c441;
	text-decoration: none;
	}

a:focus,
a:hover,
a:active {
	text-decoration: underline;
	}
	
}

@media print {

a:link:after,
a:visited:after,
a:hover:after,
a:active:after {
	content: " <http://cre8tivecat.com/"attr(href)"> ";
	
	color: #808080;
	font-style: italic;
	font-weight: normal;
	}

a[href^="/"]:after {
	content: " <http://cre8tivecat.com/"attr(href)"> ";
	}
	
a[href^="http"]:after {
	content: " <"attr(href)"> ";
	}

/* Use this one if the link text does not have the e-mail address inside */
a[href^="mailto"]:after {
	content: " <"attr(href)"> ";
	}

/* Use this only if the link text always has the e-mail address inside */
/*
a[href^="mailto"]:after {
	content: "";
	}
*/

}


/**
 *	@section	Forms
 */

@media screen,print {

form,
fieldset {
	display: block;
	margin: 0;
	padding: 0;
	
	border: 0;
	}

input,
select {
	vertical-align: middle;
	}

label {
	vertical-align: middle;
	}
	
}	


/**
 *	@section	Images
 */

@media screen,print {

img {
	margin: 0;
	padding: 0;
	
	border: 0;
	}
	
}


/**
 *	@section	Misc
 */

@media screen,print {

.scroll-wrap {
	margin: 0;
	overflow: hidden;
	padding-left: 35px;

	border-bottom: 16px solid #85c441;
	border-top: 16px solid #85c441;
	}
	
#cardsc .scroll-wrap {
	border-bottom: 0;
	}
	
#portfolioc .scroll-wrap {
	border-top: 0;
	}

.js-active .scroll-wrap,
#cardsc .scroll-wrap,
#portfolioc .scroll-wrap {
	position: relative;

	border-bottom: 16px solid #85c441;
	border-top: 16px solid #85c441;
	}

.js-active .scrollable {
	height: 500px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100%;
	
	background-color: rgba(0,0,0,0.5);
	}
	
	.scrollable ul {
		margin: 0;
		padding: 0;
		
		list-style-type: none;
		}
	
	.js-active .scrollable ul {
		left: 0;
		position: absolute;
		width: 20000em;
		}
		
		.scrollable ul li {
			display: inline;
			float: left;
			height: 500px;
			margin: 0 5px 5px 5px;
			padding: 0;
			position: relative;
			}
		
		.js-active .scrollable li {
			display: inline;
			float: left;
			margin: 0 15px 0 0;
			
			border: 0;
			opacity: 0.9;
			}
			
		.js-active .scrollable li.active,
		.js-active .scrollable li:hover {
			opacity: 1;
			}
		
		.js-active .scrollable img {
			cursor: pointer;
			}
			
		.scrollable li .info {
			display: none;
			}
			
		.scrollable li:hover .info {
			bottom: 0;
			display: block;
			left: 0;
			margin: 5px;
			padding: 0 1em;
			position: absolute;
			right: 0;
			
			background-color: #85c441;
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			
			color: #fff;
			font-size: 0.875em;
			}
			
		.js-active .scrollable li.active:hover .info {
			margin: 5px 5px 5px 10px;
			}
			
		.info a,
		.info a:link,
		.info a:visited {
			color: #fff;
			text-decoration: underline;
			}

a.prev-arrow,
a.next-arrow {
	display: none;
	}

.js-active a.prev-arrow,
.js-active a.prev-arrow:link,
.js-active a.prev-arrow:visited,
.js-active a.next-arrow,
.js-active a.next-arrow:link,
.js-active a.next-arrow:visited {
	display: block;
	height: 500px;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	width: 40px;
	z-index: 100;
	
	background-color: #313334;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	cursor: pointer;
	
	color: #e7d4b3;
	}

.js-active a.next-arrow,
.js-active a.next-arrow:link,
.js-active a.next-arrow:visited {
	left: auto;
	right: 0;

	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	-moz-border-radius-topright: 0;
	-moz-border-radius-bottomright: 0;
	-webkit-border-top-right-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	}

.js-active a.prev-arrow span,
.js-active a.next-arrow span {
	display: block;
	height: 25px;
	margin: 240px 0 0 12px;
	padding: 0;
	overflow: hidden;
	width: 14px;
	
	background: transparent url("../img/arrow.png") no-repeat left top;
	
	text-indent: -999em;
	}
	
.js-active a.prev-arrow span {
	background-position: left bottom;
	}
	
.js-active a.prev-arrow:hover,
.js-active a.prev-arrow:focus,
.js-active a.prev-arrow:active,
.js-active a.next-arrow:hover,
.js-active a.next-arrow:focus,
.js-active a.next-arrow:active {
	background-color: #85c441;
	}
	
.js-active a.prev-arrow:hover span,
.js-active a.prev-arrow:focus span,
.js-active a.prev-arrow:active span {
	background-position: right bottom;
	}
	
.js-active a.next-arrow:hover span,
.js-active a.next-arrow:focus span,
.js-active a.next-arrow:active span {
	background-position: right top;
	}
	
}