/* 	v6-screen.css

 	Screen stylesheet for Version 6
	of jamesmuspratt.com
 	
	Created in June 2009
 	Last updated May 2011

This design created by this stylesheet and associated images 
are copyright James Muspratt 2009. All rights reserved. No portion 
of this website may be reproduced without my explicit permission.

Image-scaling technique by Ethan Marcotte:
http://unstoppablerobotninja.com/entry/fluid-images/

Jquery state saving from:
http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/
------------------------------------------------------------*/





/* 	ZERO BROWSER DEFAULTS 
------------------------------------*/

body * {margin:0; padding:0; border:none;text-indent:0;text-decoration: none;outline:none;	color:#949494;

	font-family: ratio-1,ratio-2, sans-serif;
	}



a, a:link {color:#1b7fad;}

a:hover, #menu.b a:hover {color:#555;}


/* 	LAYOUT
------------------------------------*/
.clear {clear:both;}
.hide {display:none;}	
.show {display:block !important}


body, #nav {
	margin:0;
	padding:0;
	color: #000;
	font-size:12px;
	line-height:18px;	
	}

#content {
	font-size:17px;
	line-height:22px;
 	margin:0 0 200px 18px;
	}


	
#content p, #content ul {
	margin-bottom:11px;
	}	


body.scaling img {
/*	display:block;*/
	max-width: 78%;
	margin:0 0 0 -18px;
	border:0;
	}

#movieplayer {
	margin-left:-18px;
	width:700px;
	}
.scaling #content a {margin:0; display:inline;}
a img {border:0;}



/* 	BASIC TYPE
------------------------------------*/


h1 a {
	border:0 !important;
	color:#b5b5b5;
	display:block;
	font-size:12px;
	font-weight:400;
	height:90px;
	letter-spacing:1px;
	padding:10px 0 0 20px;
	text-transform:uppercase;
	width:400px;

	}


h2 {
	font-size:10px;
	line-height:18px;
	letter-spacing:1px;
	font-weight:500;
	text-transform:uppercase;
	}
/*h2:after, h2:before {content:" — ";}*/


#menu .caps {font-size:9px;letter-spacing:1px;}
#content .caps {font-size:15px;letter-spacing:1px;}

.n-next a, .n-next a:hover, a img, a:hover img {border:0;}

/* 	MENU
------------------------------------*/

#menu-wrap {
	position:fixed;
	top:90px;
	left:81%;	
	width:15%;
	margin:0;
	padding:0;
	}

#menu.show-always {
	display:block !important;
	}
#menu ul {
	list-style:none;
	}

#menu ul li a {
	margin-left:-18px;
	padding-left:18px;
	display:block;
	}
#menu ul li.current a {
	color:#000;
	font-weight:normal;
	background:transparent url(arrow.png) no-repeat 6px 6px;
	}

#menu a.tagActive {
	color:#000;
	font-weight:normal;
	}

#menu p, #menu ul {	
	margin-bottom:18px;
	}
	

/* 	SEARCH INPUT
------------------------------------*/
#search-input {
	border:1px solid #eaeaea;
	padding:3px;
	}
.searchbutton {
	color:#1b7fad;
	background:#fff;
	margin-top:10px;
	border:1px solid #eaeaea;
	padding:3px;
	}
.searchbutton:hover {
	color:#000;
	}

/* 	NAV
------------------------------------*/
#nav {
	position:absolute;
	top:13px;
	margin:0;
	left:81%;
	padding:0;
	width:15%;	
	}

#nav ul {list-style:none;}

#nav li a {display:block;}


#nav li.current a {
	border:0;
	}

#nav li.current a {
	font-weight:normal;
	color:#000;
	}

/* 	CAPTION
------------------------------------*/

#caption {
	margin:18px 0 36px 0;
	float:left;
	width:78%;
	}
#project-text {float:left;width:60%;}

#project-info {float:right; width:37%;}


#content #prev-next {list-style:none; clear:both; float:left; width:78%; margin-bottom:30px;}
#prev {float:left;}
#next {float:right;}
#next a, #prev a {display:block; width:30%;}

	
/* 	MENU AND SORT TOGGLE
------------------------------------*/

#menu-toggle {
	clear:both;
	}
#menu-toggle span, #sort-toggle span {display:block; clear:both;}

#sort-toggle, #menu-toggle {
	margin:0;
	color:#949494;
	}
#sort-toggle:hover, #menu-toggle:hover {
	color:#1b7fad;
	cursor:pointer;
	}
.show-menu {
	display:block;
	background-color:#fff;
	padding:1px;
	}
.show-menu#hover {
	color:#949494;
	}

/* 	THUMBS
------------------------------------*/
.thumbs {
	float:left;
	list-style:none;
	padding:0;
	margin-left:-18px;
	}

.thumbs li {float:left;}

.thumbs li a {
	margin:0 9px 9px 0;
	border:0 !important;
	overflow:hidden;
	display:block;
	}
.thumbs.port li a  {
	width:220px;
	height:147px;
	}

.thumbs.photo li a {
	width:110px;
	height:110px;
	}



/* 	FULLSCREEN
------------------------------------*/
/* And index page is one with thumbnails */
body.index .thumbs {
	max-width:81%;	
	}

body.fullscreen img {max-width:100%;}

		
		
/* 	FOOTER
------------------------------------*/		
p#footer {
	color:#949494;
	margin:60px 0 0 18px;
	clear:both;
	font-size:11px;
	width:50%;
	}
	
	

/* Begin single-column layout */

@media screen and (max-width: 480px ) {
	body {padding:10px;}
	h1 a {margin:0; padding:0; width:100%; height:50px;}
	#menu-date, #menu-media {float:left; margin-bottom:10px;}
	#project-text {float:none; width:100%;}
	#project-info {float:none; width:100%;}
	#nav, #menu-wrap {position:static;left:0; width:100%;}
	#menu {width:100%;margin-top:20px;}
	#menu ul li.current a {background-image:none;}
	.set {clear:both;float:left; margin-bottom:4px; border-bottom:1px solid #eaeaea; width:100%;}
	#menu ul {float:right; width:70%; margin-bottom:5px;}
	#menu h2 {width:20%; float:left;}
	#menu li {float:left; margin-right:5%; }
	#sort-toggle {float:left; margin:10px 0 0 0 ;}
	#menu-toggle {float:right; margin:-37px 10px 0 20px;}
	#content {clear:both; width:100%;float:left;}
	#caption {margin-left:0;}
	#caption-inner {width:100%; margin-left:0;}
	#content {font-size:14px; line-height:18px; margin:0 0 0 10px;}
	body.scaling img {max-width:100%;}
	p#footer {margin-left:0; width:100%;}
    }