@font-face {
    font-family: 'Nexa';
    src: url('nexa_light-webfont.eot');
    src: url('nexa_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('nexa_light-webfont.woff') format('woff'),
         url('nexa_light-webfont.ttf') format('truetype'),
         url('nexa_light-webfont.svg#nexa_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* reset5 © 2011 opensource.736cs.com MIT */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote{display:block;}nav ul{list-style:none;}ol{list-style:decimal;}ul{list-style:disc;}ul ul{list-style:circle;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}ins{text-decoration:underline;}del{text-decoration:line-through;}mark{background:none;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input[type=submit],input[type=button],button{margin:0!important;padding:0!important;}input,select,a img{vertical-align:middle;}


body {
	font-family: "Nexa", "Helvetica Neue", Arial, sans-serif;
	min-width: 360px;
	background: black;
}

body.chrome {
	/* try to mitigate chrome's terrible font face rendering on windows */
	-webkit-text-stroke: 0.3px;		
}

#container {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	padding: 2% 0 0;
	margin: 1% auto 0;
	text-align: center;
}


nav#menu {
	background: black;
	padding: 3%;
	padding-top: 0;
	margin-bottom: 10%;
	
/*
	height: 250px;
	box-sizing: border-box;
*/
}

nav#menu #lauraduncan {
	width: 100%;
	margin-bottom: 20px;
	box-sizing: border-box;
}


html #lauraduncan img.svg {
	display: none;
}
html.svg #lauraduncan img.png {
	display: none;
}
html.svg #lauraduncan img.svg {
	display: block;
}

nav#menu a#lauraduncan img {
	/* redundant in column view, required on page view */
	width: 100%;
	margin-bottom: 10%;
}

nav#menu a {
	display: block;
	text-align: left;
	white-space: normal;
	color: white;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 18px;
	line-height: 30px;

	-webkit-transition: color 200ms;
	-moz-transition: color 200ms;
	-ms-transition: color 200ms;
	-o-transition: color 200ms;
	transition: color 200ms;
}
nav#menu a:hover {
	color: rgba(255, 255, 255, 0.6);
}
nav#menu a.current::before {
	content: "";
	display: inline-block;
	width: 25px;
	height: 15px;
	background: url('../img/arrownav.svg') right center no-repeat;
	background-size: contain;
	margin-right: 3px;
}


div.column {
	width: 22%;
	margin: 0 1%;
	display: inline-block;
	vertical-align: top;

	max-width: 250px;
	
	transition: margin-top .3s;
}
div.column div.inner-col {
	display: none;
}

div.column.ui-sortable {
	min-height: 690px;
	padding-bottom: 50px;
}
.placeholder {
	background-color: #fffaa1;
}

div.column a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-align: left;
	color: black;
	
	position: relative;
}

div.column a:hover p { opacity: 1; }
div.column a:hover img { opacity: 0.8; }

div.column a img {
	width: 100%;
	margin-bottom: 10%;
}

div.column a img, div.column a p {
	-webkit-transition: opacity 200ms;
	-moz-transition: opacity 200ms;
	-ms-transition: opacity 200ms;
	-o-transition: opacity 200ms;
	transition: opacity 200ms;
}

div.column a p {
	text-align: right;
	white-space: normal;
	margin-bottom: 10%;
	color: white;
	padding: 7px 0 0;
	font-size: 13px;
}
div.column a.haslabel img {
	/* bottom margin is taken over by the p element instead */
	margin-bottom: 0;
}

div.column a.wait img {
	opacity: 0.3;
}

div.column a.wait p span {display: none;}

div.column a.wait {
	position: relative;
}
div.column a.wait:after {
	content: '';
	background: url('../img/spinner.svg') center center no-repeat;
	background-size: contain;
	width: 50px;
	height: 50px;
	
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	
    -webkit-animation-name: spin;
    -webkit-animation-duration: 800ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 800ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 800ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-transition: rotate(3600deg);	
}

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}




#editcontrols {
	position:fixed;
	top: 0;
	left: 0;
	border: 1px solid grey;
	z-index:500;
	padding: 5px 10px;
}
#editcontrols button {
	display: inline-block;
	margin: 0 5px;
}

.thumb_control {
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
}
div.column a p span .pth, div.column a p span .nth {
	display: inline-block;
	width: 15px;
	height: 15px;
	background-color: rgba(0, 0, 0, 0.2);
	margin-right: 4px;
	z-index: 50;
	
	text-align: center;
}
.pth:hover, .nth:hover {
	color: white;
	background-color: rgba(0, 0, 0, 0.6);
}

#modal-bg {
	display: none; /* start hidden */
	
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	z-index: 999998;
}
.modal {
	display: none; /* start hidden */
	
	z-index: 999999;
	position: fixed;
	top: 30%;
	left: 50%;
	width: 40%;
	margin-left: -20%;
	padding: 20px;
	box-sizing: border-box;
	background: #eee;
	border-radius: 15px;
	color: 343;
}
.modal #dialog-msg {
	font-weight: normal;
}
.modal button {
	font-size: 1em;
	padding: 5px 10px !important;
	float: right;
}

#modal-textbox textarea {
	display: block;
	min-width: 100%;
	max-width: 100%;
	min-height: 5rem;
	box-sizing: border-box;
	
	margin: 0.5rem 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ thumbnail pane ~~~~~~~~~~~~~~ */

#thumbnails {
	min-height: 100%;
	width: 100%;
	position: absolute;
	z-index: 2000;
	background: black;
	display: none;	
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ gallery view ~~~~~~~~~~~~~~ */

#viewer {
	width: 100%;
	height: 100%;
	position: relative;
	display: none;
}

#slides {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	margin: 0 100px 60px;
}
#slides.new {
	width: 100%;
	height: 100%;
	margin: 0;
}
#slides #photoswipe {
	width: 100%;
	height: 100%;
}

#prev, #next {
	position: absolute;
	height: 100%;
	width: 100px;
	top: 0;
	text-align: left;
	text-indent: -9999px;
}

#prev, #next, #pagers, #close, #showthumbs {
	opacity: 0.5;
	transition: opacity .2s;
}
#prev:hover, #next:hover, #pagers:hover, #close:hover, #showthumbs:hover {
	opacity: 0.9;
}

#prev svg, #next svg {
	display: none;
}

#next {
	right: 0;
	background: url('../img/arrowright.svg') 10px 45% no-repeat;
	background-size: 70%;
}
#prev {
	left: 0;
	background: url('../img/arrowleft.svg') 20px 45% no-repeat;
	background-size: 70%;
}



#pagers {
	text-align: center;
}

#pagers a {
	text-align: left;
	text-indent: -999px;
	display: inline-block;
	vertical-align: middle;
	

	border-radius: 99px;
	margin: 0 2px 0;
	
	background: black;
	border: 1px solid white;
	width: 8px;
	height: 8px;
	
	
	/* trying to get them to anti-alias */
	-webkit-transform: rotate(360deg); 
	-moz-transform: rotate(360deg); 
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg); 
}
#pagers a.currentpager {
	background: white;
	width: 10px;
	height: 10px;
	border: 0;
}

/*
html.svg #prev svg, html.svg #next svg {
	display: block;
	position: absolute;
	top: 50%;
	margin-top: -45px;
	left: 50%;
	margin-left: -15px;
}
html.svg #prev:hover svg g, html.svg #next:hover svg g {
	stroke-width: 2px;
}
*/

#viewer.showing_video #prev,
#viewer.showing_video #next,
#viewer.showing_video #showthumbs,
#viewer.showing_video #info {
	display: none;
}

#slides #info {
	position: absolute;
	bottom: -40px;
	height: 30px;
	line-height: 30px;
	width: 100%;
}
#viewer #close,
#viewer #showthumbs {
	position: absolute;
	left: 3%;
	top: 0;
	color: white;
	text-decoration: none;
	font-size: 20px;
	z-index: 1000;
	-webkit-font-smoothing: antialiased;
}
#viewer #showthumbs {
	left: auto;
	right: 3%;
}

#slides #info #position {
/*
	position: absolute;
	left: 0;
*/
}

#slides .slide {
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	overflow: hidden;
}
#slides .slide img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;	
}
#slides .slide div.valigner {
	width: 0px;
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}

#slides .slide img.unloaded {
	top: 50%;
	margin-top: -64px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ pages ~~~~~~~~~~~~~~~ */

#menu.alone {
/*
	width: 22%;
	padding: 0.66%; /* previously the padding was a percentage of the column's width 
	margin: 0 1%;
	max-width: 250px;
*/
	display: inline-block;
	vertical-align: top;
}
#menu.alone a#lauraduncan {
	display: block;
}

section {
	vertical-align: top;
	display: inline-block;
	width: 70%;
	max-width: 803px;
	margin: 0 1%;
	text-align: left;
	color: white;
/* 	-webkit-font-smoothing: antialiased; */
}

section p {
	line-height: 140%;
	margin-bottom: 15px;
}

section h1 {
	font-weight: 400;
	font-size: 30px;
	text-align: center;
	margin-top: 50px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Splash page ~~~~~~~~~~~~~~~ */

#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: black;
	z-index: 9000;
	cursor: pointer;
}

#splash_wrapper {
	width: 80%;
	margin: 10% auto 0;
	white-space: nowrap;
}
#slideshow {
	display: inline-block;
	width: 40%;
	vertical-align: top;
}
#splash_wrapper #lauraduncan {
	vertical-align: top;
	margin-top: 13%;
	width: 60%;
	display: inline-block;
	margin-left: 2%;
}
#splash_wrapper #lauraduncan img {
	width: 100%;
}
/* NOAH MODIFICATIONS */
#slideshow li {
	-webkit-transition: opacity 1000ms ease-in-out;
	transition: opacity 800ms ease-in-out, margin-left 600ms ease-in-out !important;
	margin-left: 100%;
}
#slideshow li.rslides1_on {
	margin-left: 0%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Responsive rules ~~~~~~~~~~~~~~~ */

@media all and (max-width: 700px) {	
	/* collapse to 2 columns */
	br#two_column {
		display: inline;
	}
	div.column {
		width: 45%;
		margin: 0 2%;
	}
	
	div.column div.inner-col {
		display: inline;
	}
	div.column.outer-col {
		display: none;
	}
	
	/* collapse section from a 3-column width to 1 */
	#mcolumn {
		margin-right: 49%;
	}
	section {
		display: block;
		width: 90%;
		margin: 0 5%;
	}
	
	/* mobile style gallery */
	
	#slides {
		margin: 0 0 60px;
	}
	#prev, #next {
		display: none;
	}
	#slides #info #position {
		left: 3%;
	}
	#viewer #close, #viewer #showthumbs {
		bottom: 2.5%;
		top: auto;
		font-size: 30px;
	}
	
	
	#slides #close {
		top: auto;
		bottom: -50px;
		right: 20px;
		font-size: 50px;
		z-index: 9999;
	}
	
	/* mobile style info page */
	
	section#info p#bio {
		float: none;
		margin-bottom: 20px;
	}
	#info img, p#bio {
		width: 100%;
	}
	
	/* mobile style splash page */
	#splash a#lauraduncan {
		display: block;
		width: 80%;
		position: absolute;
		bottom: 10%;
		left: 10%;
		margin: 0;		
	}
	
	#slideshow {
		width: 100%;
	}

}

@media only screen 
and (min-device-width : 320px)  
and (max-device-width : 568px) 
and (orientation : landscape) { 
	/* all iphones in landscape: reduce height of navbar */
	#container { margin-top: 48px; }
	header { min-height: 48px; }
	header h1 {
		top: 6px;
		margin-left: -37px;
	}
	header h1 a {
		width: 75px;
		height: 47px;
	}
	header nav { margin-top: 21px; }
	header div.hr { top: 39px; }
	
	header nav a {
		font-size: 14px;
		-webkit-text-size-adjust: none;
	}
	
	/* 	undo two-row navbar */
	nav div.spacer {
	display: inline-block;
	width: 100px;
	}
	
	/* shrink viewer info bar too */
	#slides { margin-bottom: 25px; }
}