* { letter-spacing: 1px ; margin: 0px ; }

@font-face {
	font-family: title ;
	src: url('../fonts/title.eot') ;
	src: local('☺'), url('../fonts/title.woff') format('woff'), url('../fonts/title.ttf') format('truetype') ;
	font-weight: normal ;
	font-style: normal ;
}

@font-face {
	font-family: regular ;
	src: url('../fonts/regular.eot') ;
	src: local('☺'), url('../fonts/regular.woff') format('woff'), url('../fonts/regular.ttf') format('truetype') ;
	font-weight: normal ;
	font-style: normal ;
}

@font-face {
	font-family: regular ;
	src: url('../fonts/regular-italic.eot') ;
	src: local('☺'), url('../fonts/regular-italic.woff') format('woff'), url('../fonts/regular-italic.ttf') format('truetype') ;
	font-weight: normal ;
	font-style: italic ;
}

@font-face {
	font-family: regular ;
	src: url('../fonts/regular-bold.eot') ;
	src: local('☺'), url('../fonts/regular-bold.woff') format('woff'), url('../fonts/regular-bold.ttf') format('truetype') ;
	font-weight: bold ;
	font-style: normal ;
}

body { text-align: center ; }

body#index {
	background-color: #f3f4f4 ;
	background-image: -moz-radial-gradient(center 160px, circle cover, #ffffff, #f3f4f4 300px) ;
	background-image: -webkit-radial-gradient(center 160px, circle cover, #ffffff, #f3f4f4 300px) ;
	background-image: -o-radial-gradient(center 160px, circle cover, #ffffff, #f3f4f4 300px) ;
	background-image: -ms-radial-gradient(center 160px, circle cover, #ffffff, #f3f4f4 300px) ;
	background-image: radial-gradient(center 160px, circle cover, #ffffff, #f3f4f4 300px) ;
}

body#bbio {
	background-color: #f3f4f4 ;
	background-image: -moz-radial-gradient(center 160px, circle cover, #ffffff, #f3f4f4 300px) ;
	background-image: -webkit-radial-gradient(center 160px, circle cover, #ffffff, #f3f4f4 300px) ;
	background-image: -o-radial-gradient(center 160px, circle cover, #ffffff, #f3f4f4 300px) ;
	background-image: -ms-radial-gradient(center 160px, circle cover, #ffffff, #f3f4f4 300px) ;
	background-image: radial-gradient(center 160px, circle cover, #ffffff, #f3f4f4 300px) ;
	}

#filter {
	display: none ;
	position: fixed ; z-index:10 ;
	top: 0% ; left: 0% ; width: 100% ; height: 100% ;
	background-color: #000 ; opacity:0.5 ; filter: alpha(opacity=50) ;
}

#modal {
	display: none ; background-color: #fff ;
	position: fixed ; z-index:12 ;
	top: 10% ; left: 25% ; width: 50% ; height: 80% ;
	-webkit-border-radius: 5px ; -moz-border-radius: 5px ; border-radius: 5px ;
	-webkit-box-shadow: 0px 1px 2px 2px #444444 ; -moz-box-shadow: 0px 1px 2px 2px #444444 ; box-shadow: 0px 1px 2px 2px #444444 ;text-align: justify ;
}
#modal div#mtitle {
	background: #a68a6b ;
	background: -moz-linear-gradient(top, #d6c9bc 0%, #a68a6b 100%) ;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6c9bc), color-stop(100%,#a68a6b)) ;
	background: -webkit-linear-gradient(top, #d6c9bc 0%,#a68a6b 100%) ;
	background: -o-linear-gradient(top, #d6c9bc 0%,#a68a6b 100%) ;
	background: -ms-linear-gradient(top, #d6c9bc 0%,#a68a6b 100%) ;
	background: linear-gradient(top, #d6c9bc 0%,#a68a6b 100%) ;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6c9bc', endColorstr='#a68a6b',GradientType=0 ) ;
	-moz-border-radius-topleft: 5px ; -moz-border-radius-topright: 5px ; -moz-border-radius-bottomright: 0px ; -moz-border-radius-bottomleft: 0px ; -webkit-border-radius: 5px 5px 0px 0px ; border-radius: 5px 5px 0px 0px ;
	height: 30px ; padding: 10px ; overflow: hidden ;
	font: 28px title,serif ; color: #ffffff ;
	text-shadow: 0px -1px 1px #444444 ; filter: dropshadow(color=#444444, offx=0, offy=-1) ; 
}
#modal div#mcontent {
	overflow: auto ; padding: 10px ; height: 85% ;
	font: 11px regular,sans-serif ; color: #444444 ;
}
#modal div#mcontent p { margin: 4px ; text-align: justify ; }
#modal a { color: #888 ; text-decoration: underline ; }
#modal a:hover { color: #888 ; text-decoration: none ; }

#logo {
	background: url(/imgs/logo.png) no-repeat ; width: 322px ; height: 113px ;
	margin: 100px auto 20px auto ; cursor: pointer ;
}

#header {
	background: url(/imgs/header.png) no-repeat ; width: 819px ; height: 101px ;
	margin: 0px auto ; cursor: pointer ;
}

.sbox {
	font: 17px title,sans-serif ; display: block ; margin: 0px auto ;
	width: 819px ; height: 31px ; background: url(../imgs/sb.png) ;
	padding: 2px 10px 2px 8px ; border: none ;
}
#q { margin: -32px auto 0px auto ; color: #000 ; }
#suggest { color: #c8c8c8 ; }

.hbox {
	width: 819px ; height: 150px ; padding: 0px ; display: none ;
	margin: 0px auto ; cursor: pointer ; border: none ; background: url(../imgs/sb2.png) ;
}

.hbox li {
	height: 25px ; display: block ; text-align: left ; padding: 2px 10px 2px 6px ; margin-top: 1px ;
}
.hbox li.selected, .hbox li:hover {
	background-color: rgba(221,221,221,.5) ;
}

.hbox li .aname { font: 17px regular,sans-serif ; }
.hbox li .aalias { font: 11px regular,sans-serif ; color: #444 ; }
.hbox li .awords { display: block ; float: right ; font: 11px regular,sans-serif ; color: #444 ; margin-top: 6px ; }

#header div { float: right ; margin: 68px 3px 0px 0px ; }
#header h1#artist { font: 16pt title,sans-serif ; display: inline ; }
#header h2 { font: 11pt title,sans-serif ; display: inline ; }
#header h2:before { content: "\002014\0000A0" ; }

#content {
	font: 14px regular,sans-serif ; color: #444 ; line-height: 25.2px ;
	width: 800px ; margin: 20px auto 50px auto ;
}
#content #bio {
	-webkit-user-select: none ; -khtml-user-select: none ; -moz-user-select: none ;
	-o-user-select: none ; user-select: none ;
}
#content #bio p { margin: 6px 20px; text-align: justify ; }

#description { font: 9px regular,sans-serif ; color: #444444 ; width: 800px ; margin: 40px auto ; }
#description p { margin: 2px ; text-align: justify; }

#footer {
	position: fixed ; bottom: 3px ; right: 3px ; margin-top: 20px ;
	background-color:white;
	border-top:1px solid rgba(0,0,0,0.1);
}
#footer li {
	display: inline ; margin: 2px 4px 2px 4px ; padding: 3px ;
	font: 11px regular,sans-serif ; color: #444444 ;width:100%;
}
#footer li a { text-decoration: underline ; color: #444444 ; }
#footer li a:hover { text-decoration: none ; color: #444444 ; }

#container {
	position: relative ;
	margin: 0 auto 40px ;
	-webkit-perspective: 800 ;
	-moz-perspective: 800 ;
	-ms-perspective: 800 ;
	-o-perspective: 800 ;
	perspective: 800 ;
}

.sheet {
	width: 50% ; position: absolute ; right: 0px ;
	-webkit-transition: -webkit-transform 2s ;
	-moz-transition: -moz-transform 2s ;
	-ms-transition: -ms-transform 2s ;
	-o-transition: -o-transform 2s ;
	transition: transform 2s ;
	-webkit-transform-style: preserve-3d ;
	-moz-transform-style: preserve-3d ;
	-ms-transform-style: preserve-3d ;
	-o-transform-style: preserve-3d ;
	transform-style: preserve-3d ;
	-webkit-transform-origin: left center ;
	-moz-transform-origin: left center ;
	-ms-transform-origin: left center ;
	-o-transform-origin: left center ;
	transform-origin: left center ;
	cursor: pointer ;
}

div.sheet.flipped {
	-webkit-transform: rotateY( -180deg ) ;
	-moz-transform: rotateY( -180deg ) ;
	-ms-transform: rotateY( -180deg ) ;
	-o-transform: rotateY( -180deg ) ;
	transform: rotateY( -180deg ) ;
}

.sheet .figure {
	display: block ; height: 100% ; //width: 100% ;
	margin: 0px ; position: absolute ;
	-webkit-backface-visibility: hidden ;
	-moz-backface-visibility: hidden ;
	-ms-backface-visibility: hidden ;
	-o-backface-visibility: hidden ;
	backface-visibility: hidden ;
}

.sheet .figure .page {
	overflow: hidden ; width: 387px ; margin: 22px ;
	text-align: justify ;
}

.sheet .front {
	
}

.sheet .back {
	-webkit-transform: rotateY( 180deg ) ;
	-moz-transform: rotateY( 180deg ) ;
	-ms-transform: rotateY( 180deg ) ;
	-o-transform: rotateY( 180deg ) ;
	transform: rotateY( 180deg ) ;
}

#bio div:not(.flipped) div:not(.page) {
	background-image:url(../imgs/gra2.png);
	background-repeat:repeat-y;
	background-position:right;
	box-shadow:4px 2px 6px rgba(0,0,0,0.04);
	border-top:1px solid rgba(255,255,255,0.2);
	border-top-right-radius:4px;
	border-bottom-right-radius:4px;
	border-top:12px solid black;
	border-bottom:12px solid black;
	border-right:12px solid black;

}


#bio div.flipped div:not(.page) {
	background-image:url(../imgs/gra.png);
	background-repeat:repeat-y;
	background-position:left;
	box-shadow:-4px 2px 6px rgba(0,0,0,0.04);
	border-top:12px solid black;
	border-bottom:12px solid black;
	border-left:12px solid black;
	border-right:1px solid rgba(0,0,0,0.3);
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;



}

#sizer {
	visibility: hidden ; left: -10000px ; width: 343px ; position: fixed ;
	font-weight: bold ; font-size: 14px ; line-height: 20px ; text-align: justify ;
}


#bio div:not(.flipped) .page p {
	margin: 6px 48px 6px 14px;

}