@charset "UTF-8";

@viewport {
	width: device-width;
	height: device-height;
}



/* CSS Document */

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  font: inherit;
  vertical-align: baseline;
  list-style:none;
  list-style-type:none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Teaching ie html5 new elements. */
header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

html {
	height:100%;
} 



body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	line-height: 1.25em;
    font-weight: normal;
	color:#999;
	background:#1E0F0F; /*dark brown*/
}


i { font-style:italic; }

b { font-weight:bold; }

a {
	color:#CCC; 
	text-decoration:none;
	border:none;
}

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

h1 { 
    font-size:1.5em; 
    font-weight: normal;
	color:#CCC;
}

h2 {
	font-size:1em;
	font-weight:bold;
	text-transform:uppercase;
	margin-top:4em;
	margin-bottom:20px;
	color:#FFF;
}

h3 {
	margin-top:4em;
	font-weight:bold;
}

p {
	font-weight:100;
}

img {
    width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
}

header {
	position:fixed;
	margin: 0 auto 0 0;
	width:220px;
	height: 100%;
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(30,15,15);
	/* RGBa with 0.6 opacity */
	background: rgba(30,15,15, 0.6);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99301515, endColorstr=#99301515);
	filter: alpha(opacity=60);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99301515, endColorstr=#99301515)";
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	z-index:1000;
}

header h1 {
	margin:20px;
}

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

#menu-icon {
	display: hidden;
	width: 40px;
	height: 40px;
	background: url(images-base/icon-menu.png) center;
}

#menu-toggle {
  display: none; /* hide the checkbox */
}

nav {
	margin-top:2em;
	margin-left:20px;
	font-size:.85em;
}

.nodrop {
	margin-bottom:1.25em;
}

.nodrop li {
	display: block;
	padding:.1em;
	padding-left:0;
	color:#CCC;
}
.nodrop a, .nodrop a:active, .nodrop a:visited {
	color:#CCC; 
	text-decoration:none;
}
.nodrop a:hover {
	color:#FFF;
}


#icontact {
	margin-left:0px;
	padding-bottom:20px;
	font-size: .8em;
}

#icontact .link, #icontact .link a, .link, .link a {
	text-decoration: none;
}

.sortables div {
	margin-bottom:.25em;
}



#content {
	float:left; 
	margin:0;
	margin-left:17%;
	width:83%;
	height:100%;
	z-index:500;
	overflow-x: hidden;
	font-size:.85em;
} 

#content.text, #content.thumbs {
	margin:0;
	padding-left:300px;
	width:auto;
}

#content.text {
	max-width:2000px;
}

.text {
	padding-right:15%;
	padding-bottom:100px;
	padding-top:20px;
}

.text p {
	margin-bottom:20px;
}

.text li {
	padding:.5em 0;
}

.text section {
	margin-bottom:100px;
}

#content.thumbs h2 {
	display:block;
	clear:both;
	padding-top:20px;
}


.book {
	width:300px;
	height:480px;
	margin:20px 60px 60px 0;
	float:left;
	display:inline;
}

.book img {
	width:100%;
	height:auto;
	margin-bottom:2em;
}

.book a, .book a:active, .book a:visited {
	color:#CCC; 
	text-decoration:none;
}
.book a:hover {
	color:#FFF;
}

.book figcaption {
	font-size:.85em;
}

.book figcaption .bookTitle {
	display:block;
	font-size:1.2em;
	font-weight:bold;
	font-style:italic;
}

.book figcaption .bookSubtitle {
	display:block;
	font-size:1.2em;
	font-weight:normal;
	font-style:italic;
}

.book figcaption .bookInfo {
	display:block;
	margin-bottom:1em;
}

.book .bookNotes {
	padding-bottom:60px;
}


.musicimg {
	width:100%;
	margin-bottom:40px;
}


.gallery {
	text-align:center;
}


#content.gallery img {
    width:auto;
	height:auto;
	max-width:100%;
	max-height:100%; 
}



#content a #work {
	border:none;
	cursor:url(/images-base/arrow-next.gif) 0 0, auto;
}



#worktext {
	text-align:left;
	/*margin:0;
	margin-left:-17%;
	padding:0;
	padding-left:280px;
	padding-right:16%;
	padding-bottom:100px;
	padding-top:4em;
	width:auto;
	max-width:2000px;*/
	margin: 4em 17%;
	font-weight:100;
	color:#999;
}

#worktext p {
	margin-bottom: 2em;
}


#work, #worktext {
	opacity:0;
        -webkit-animation:fadeIn ease-in 1;
        -moz-animation:fadeIn ease-in 1;
        -o-animation:fadeIn ease-in 1;
        animation:fadeIn ease-in 1;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-fill-mode:forwards;
        -o-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
		-webkit-animation-duration:2s;
        -moz-animation-duration:2s;
        -o-animation-duration:2s;
        animation-duration:2s;
}

/* Key Frames
---------------------------------------------------- */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }





#workinfo, #subnav {
	text-align:left;
	position:fixed;
	left:20px;
	bottom: 40px;
	width:180px;
	padding-top:20px;
	padding-bottom:40px;
	border-top:1px solid #999;
	font-size:.95em;
	font-weight:100;
	color:#FFF;
	z-index:1500;
}

#subnav {
	bottom:0px;
	font-size:.8em;
}

#workinfo nav, #subnav nav {
	margin:0;
	margin-bottom:20px;
	padding:0;
	font-size:inherit;
	text-decoration:none;
}

#subnav nav {
	margin-bottom:-10px;
}

#workinfo nav li, #subnav nav li {
	padding:.1em;
	padding-left:0;
}

#workinfo nav a, #workinfo nav a:active, #workinfo nav a:visited, #subnav nav a, #subnav nav a:active, #subnav nav a:visited {
	color:#CCC;
	text-decoration:none;
}

#workinfo nav a:hover, #subnav nav a:hover {
	color:#FFF;
}

#firefoxlinks {
	display:none;
}

@-moz-document url-prefix() { 
 	#worklinks {
	display:none;
}
	#firefoxlinks {
	display:block;
}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */ 
   #worklinks {
	display:none;
}
	#firefoxlinks {
	display:block;
} 
}

#browse {
	position:fixed;
	left:0px;
	bottom:20px;
	padding:0;
	margin:0;
	z-index:2000;
}



/*footer {
	position:fixed;
	left:20px;
	bottom:20px;
	font-size:.6em;
	color:#999;
	z-index:1002;
	line-height:1.2em;
}

footer a {
	color:#999;
	text-decoration:none;
} */

#cc {
	color:#999;
	font-weight:100;
	font-size:.85em;
	margin-top:160px;
}

#cc a {
	color:#999;
	text-decoration:none;
}

#cc img {
	margin-bottom:10px;
}






/*FOR MOBILE DEVICE*/
@media only screen and (max-width : 770px) {
	
header {
	margin: 0;
	padding-bottom:0.2em;
	width:100%;
	height: auto;
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(30,15,15);
	/* RGBa with 0.6 opacity */
	background: rgba(30,15,15, 0.8);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC301515, endColorstr=#CC301515);
	filter: alpha(opacity=60);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99301515, endColorstr=#99301515)";
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}


#menu-icon {
	display:block;
	position:absolute;
	top:.3em;
	right: 20px;
}

label {
  cursor: pointer;
}

#menu {
  display: none;
}
#menu-toggle:checked + #menu {
  display: block;
}



	
#content {
	float:left; 
	margin:0;
	width:auto;
	height:auto;
	max-height:100%;
	max-width:100%;
    margin-top:60px;
	z-index:500;
	overflow-x: hidden;
	font-size:.85em;
}


#content.text, #content.thumbs {
	margin:20px;
	padding:0;
}

.text li {
	padding:1em 0;
}

#content #work {
	width:auto;
	height:auto;
	max-height:100%;
	max-width:100%;
}

#workinfo {
	position:relative;
	float:right;
	border-top:none;
	width:50%;
	padding:0;
	margin:60px 20px 0 0;
}

#workinfo nav {
	display:none;
}

#browse {
	position:relative;
	float:left;
	padding:0;
	margin:40px 0 0 0;
}

#worktext {
	clear:both;
	text-align:left;
	padding:0;
	margin: 0 20px 60px 20px;
}

#subnav {
	position:fixed;
	left:0;
	bottom:0;
	width:100%;
	padding:10px 0 20px 20px;
	background:#1E0F0F; /*dark brown*/
}

#subnav nav li {
	display:inline-block;
	font-size:.85em;
	line-height:.8em;
	padding:0 20px;
	margin-bottom:.75em;
	border-left: 1px solid #999;
}



}

@media only screen and (max-width : 600px) {
.book {
	width:100%;
	height:auto;
	margin:20px 0;
}
}